/* ==========================================================================
   HESTIA Extranet — charte reprise du site vitrine (hestia-site)
   ========================================================================== */
:root {
    /* --- Charte HESTIA (officielle) --- */
    --color-primary:       #3575ad; /* Bleu principal "main" */
    --color-primary-dark:  #285d8c; /* Bleu foncé (hover/titres) */
    --color-primary-light: #eaf2f8; /* Bleu très clair (fonds) */
    --color-hestia:        #f06787; /* Rose Hestia (signature) */
    --color-hestia-dark:   #d94f6f;
    --color-care:          #76c8b2; /* Vert Care */
    --color-maison:        #5fa08e; /* Vert Maison */
    --color-sky:           #86acce; /* Bleu clair */
    --color-jaune:         #fed370; /* Jaune (accent doux) */

    /* Accent boutons : rose Hestia assombri pour contraste AA avec texte blanc */
    --color-accent:        #c63a5d; /* blanc/accent = 5.0:1 (WCAG AA) */
    --color-accent-dark:   #a82f4e; /* hover = 6.6:1 */

    --color-text:          #1f2933;
    --color-text-soft:     #52606d;
    --color-bg:            #ffffff;
    --color-bg-alt:        #f5f8fb;
    --color-border:        #dde6ee;
    --color-error:         #b42318;
    --color-error-bg:      #fef3f2;

    --container: 1180px;
    --radius: 8px;
    --shadow: 0 2px 10px rgba(17, 68, 115, 0.08);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-bg-alt);
    line-height: 1.6;
    min-height: 100vh; display: flex; flex-direction: column;
}
h1, h2, h3 { line-height: 1.25; color: var(--color-primary-dark); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--color-primary-dark); color: #fff; padding: .6rem 1rem; z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    position: sticky; top: 0; z-index: 100;
}
.header-inner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem;
    padding-top: .6rem; padding-bottom: .6rem;
}
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-logo { display: block; height: 50px; width: auto; max-width: 100%; }
.brand-tag {
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-primary-dark); background: var(--color-primary-light);
    padding: .2rem .6rem; border-radius: 999px;
}

.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.main-nav a {
    display: block; padding: .6rem .85rem; color: var(--color-text); font-weight: 600;
    font-size: .98rem; border-radius: var(--radius);
}
.main-nav a:hover { background: var(--color-primary-light); color: var(--color-primary-dark); text-decoration: none; }

.nav-user {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem .85rem; color: var(--color-text-soft); font-size: .95rem;
}
.nav-user svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.nav-logout a {
    color: var(--color-primary); border: 2px solid var(--color-primary);
    padding: .4rem .8rem; font-weight: 700;
}
.nav-logout a:hover { background: var(--color-primary); color: #fff; }

/* Burger mobile */
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .5rem; margin-left: auto; background: none; border: 0; }
.nav-burger span { width: 26px; height: 3px; background: var(--color-primary-dark); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

/* ---------- Main ---------- */
main { flex: 1; padding-bottom: 3rem; }
.page-head { padding: 2rem 0 1rem; }
.page-head h1 { margin: 0 0 .25rem; }
.page-head p { margin: 0; color: var(--color-text-soft); }

.card {
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* ---------- Boutons utilitaires ---------- */
.btn { display: inline-block; padding: .75rem 1.5rem; border-radius: var(--radius); font-weight: 700; border: 0; cursor: pointer; font-family: inherit; font-size: 1rem; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-dark); text-decoration: none; }

/* ---------- Messages ---------- */
.alert { padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid transparent; }
.alert-error { color: var(--color-error); background: var(--color-error-bg); border-color: #fecdca; }

/* ---------- Connexion ---------- */
.login-page { padding: 4rem 0; }
.login-card { max-width: 460px; margin: 0 auto; text-align: center; padding: 2.25rem 2rem; }
.login-help { font-size: .9rem; color: var(--color-text-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary-dark); color: #cfe0f0; font-size: .85rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2rem; padding-top: 1rem; padding-bottom: 1rem; }
.footer-inner p { margin: 0; }
.site-footer a { color: #cfe0f0; }
.site-footer a:hover { color: #fff; }

/* ---------- Page d'erreur (403 / 404 / erreur) ---------- */
.error-page { padding: 3rem 0 4rem; text-align: center; }
.error-page .error-code { font-size: clamp(3.5rem, 14vw, 7rem); font-weight: 800; color: var(--color-primary); opacity: .22; line-height: 1; margin: 0; }
.error-page h1 { margin: .2rem 0 1rem; }
.error-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1.6rem 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    /* Ligne 1 : logo à gauche, burger à droite — le logo reste toujours visible */
    .nav-burger { display: flex; }
    .brand-logo { height: 38px; }

    /* Le menu passe sous la ligne 1 et se déplie au clic du burger */
    .main-nav { order: 3; flex-basis: 100%; margin-left: 0; display: none; }
    .header-inner.is-open .main-nav { display: block; }

    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: .25rem 0; }
    .main-nav > ul > li { border-top: 1px solid var(--color-border); }
    .main-nav a { width: 100%; text-align: left; padding: .85rem .5rem; }
    .nav-user { padding: .85rem .5rem; }
    .nav-logout a { border: 0; }
}

/* Le burger devient une croix quand le menu est ouvert */
.header-inner.is-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header-inner.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.header-inner.is-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Accueil : cartes de rubriques ---------- */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.home-card { display: block; color: var(--color-text); border-top: 4px solid var(--color-primary); transition: transform .15s ease, box-shadow .15s ease; }
.home-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(17, 68, 115, 0.14); }
.home-card h2 { font-size: 1.2rem; }
.home-card p { color: var(--color-text-soft); }

/* ---------- Espace documentaire ---------- */
.doc-groups { display: grid; gap: 1.25rem; }
.doc-groups h2 { font-size: 1.2rem; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-item { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--color-border); }
.doc-type {
    flex: 0 0 3.2rem; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
    color: var(--color-primary-dark); background: var(--color-primary-light);
    border-radius: var(--radius); padding: .7rem .2rem;
}
.doc-info { flex: 1; min-width: 0; }
.doc-info p { margin: .15rem 0 0; font-size: .95rem; }
.doc-title { font-weight: 700; overflow-wrap: anywhere; }
.doc-info .doc-meta { font-size: .82rem; color: var(--color-text-soft); }
.btn-sm { padding: .5rem 1rem; font-size: .9rem; white-space: nowrap; }
@media (max-width: 560px) {
    /* Logo, pastille « Extranet » et burger tiennent sur une seule ligne */
    .header-inner { gap: .5rem .6rem; }
    .brand-logo { height: 32px; }
    /* Le bouton passe sous le texte, aligné sur celui-ci */
    .doc-item { flex-wrap: wrap; }
    .doc-info { flex-basis: calc(100% - 4.2rem); }
    .doc-item .btn { margin-left: 4.2rem; }
}

/* ---------- Catégories ---------- */
.breadcrumb { font-size: .9rem; margin: 0 0 .4rem; }
.doc-empty { color: var(--color-text-soft); }
.home-other { margin-top: 1.25rem; }
/* L'en-tête collant ne doit pas masquer la sous-catégorie visée par une ancre */
.doc-groups .card { scroll-margin-top: 90px; }

/* ---------- Visionneuse de documents ---------- */
/* Pas d'overflow:hidden ici : la barre d'outils doit rester collée sous l'en-tête au défilement */
.viewer { background: #e4e9ef; border: 1px solid var(--color-border); border-radius: var(--radius); }
.viewer-toolbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: .5rem 1rem; font-size: .9rem; color: var(--color-text-soft);
    position: sticky; top: 70px; z-index: 10;
}
.viewer-zoom { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }
.viewer-btn {
    width: 2.2rem; height: 2.2rem; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-bg); color: var(--color-primary-dark); font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.viewer-btn:hover { background: var(--color-primary-light); }
.viewer-btn-text { width: auto; padding: 0 .8rem; font-size: .9rem; }

/* Plein écran : natif (:fullscreen) ou recouvrement de la fenêtre (.is-fullscreen, iPhone) */
.viewer:fullscreen, .viewer.is-fullscreen { overflow-y: auto; border: 0; border-radius: 0; }
.viewer.is-fullscreen { position: fixed; inset: 0; z-index: 300; }
.viewer:fullscreen .viewer-toolbar, .viewer.is-fullscreen .viewer-toolbar { top: 0; border-radius: 0; }
html.viewer-open { overflow: hidden; }
/* Défilement horizontal quand la page agrandie dépasse l'écran */
.viewer-pages { overflow-x: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; min-height: 40vh; }
.viewer-page { flex: 0 0 auto; margin: 0 auto; background: #fff; box-shadow: 0 1px 6px rgba(17, 68, 115, 0.18); }
.viewer-page canvas { display: block; width: 100%; height: 100%; }
.viewer-fallback { padding: 1.5rem; margin: 0; text-align: center; }
.viewer-image { padding: 1rem; text-align: center; }
.viewer-image img { background: #fff; box-shadow: 0 1px 6px rgba(17, 68, 115, 0.18); }
@media (max-width: 900px) {
    .viewer-toolbar { top: 55px; }
    .viewer-pages { padding: .5rem; }
    .viewer-toolbar { padding: .4rem .5rem; }
    .viewer-toolbar > [data-pdf-viewer-target="status"] { white-space: nowrap; }
    .viewer-zoom { gap: .4rem; margin-left: auto; }
}

/* ---------- Référence et dates des documents ---------- */
.doc-meta { font-size: .82rem; color: var(--color-text-soft); }
.doc-ref { font-weight: 700; color: var(--color-primary-dark); }
.page-head .alert { margin-top: .8rem; color: var(--color-error); }