/* VARIABLES GLOBALES (Design Tokens) 
           Toutes les couleurs, tailles et ombres du site sont centralisées ici.
           Modifier ces valeurs suffit à changer l'apparence sur toute la page.
        */
        :root {
            /* Palette de couleurs principale (bleu ARS Bretagne) */
            --primary-start: #2f80ed;
            --primary: #0057d9;
            --primary-hover: #0047b0;
            --primary-gradient: linear-gradient(140deg,#2f80ed 0%,#0057d9 100%);

            /* Couleurs neutres et états */
            --bg-glass-heavy: rgba(255, 255, 255, 0.95);
            --border-glass: 1px solid rgba(0, 0, 0, 0.1);
            --text-main: #1e1e1e;
            --text-muted: #383838;
            --success: #16a34a;
            --danger: #e1000f;

            /* Ombres réutilisables */
            --shadow-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
            --shadow-btn: 0 8px 20px -6px rgba(0, 87, 217, 0.25);
            --shadow-btn-hover: 0 12px 25px -6px rgba(0, 87, 217, 0.35);

            /* Tailles des avatars et logos en en-tête mobile.
               clamp(min, préféré, max) assure un dimensionnement fluide selon la hauteur d'écran. */
            --header-emph-size: clamp(120px, 18vh, 220px);
            --balise-mobile-size: clamp(80px, 10vh, 140px);

            /* Taille de l'avatar urgence (partagée entre desktop et mobile pour cohérence visuelle) */
            --avatar-urgence-size: clamp(220px, 20vw, 380px);
        }

        *, html, body {
            box-sizing: border-box; margin: 0; padding: 0;
            -webkit-tap-highlight-color: transparent;
        }

        html, body {
            width: 100%; height: 100%; overflow: hidden;
            font-family: "Marianne", Arial, sans-serif;
            color: var(--text-main); background-color: #f8fafc;
        }

        body {
            background: url("ressources/fond_seul.png") center/cover no-repeat;
            display: flex; flex-direction: column;
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        }

        #app {
            flex: 1; width: 100%; position: relative;
            display: flex; align-items: center; justify-content: center; overflow: hidden;
        }

        .topbar {
            position: absolute; top: 0; left: 0; width: 100%;
            display: flex; justify-content: space-between; align-items: center;
            padding: clamp(0.5rem, 2vh, 1.5rem) clamp(1rem, 3vw, 2.5rem); z-index: 50; pointer-events: none;
        }

    /* pointer-events: none est posé sur .topbar pour ne pas bloquer les clics en dessous.
       On le réactive ici sur chaque enfant direct pour que les boutons restent cliquables. */
    .topbar > * { pointer-events: auto; }

    /* Logo ARS à gauche (remplacé par le logo Balise via JS dès qu'on quitte l'accueil) */
    .logo-ars { height: clamp(90px, 14vh, 180px); width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }

    /* Logo Balise en en-tête (affiché uniquement sur mobile selon l'écran courant via JS) */
    .logo-balise-header { height: clamp(48px, 8vh, 96px); width: auto; }

    /* Miniature de l'avatar neutre dans la barre de navigation mobile (masquée par défaut) */
    .header-avatar { height: clamp(60px, 9vh, 110px); width: auto; border-radius: 50%; object-fit: contain; display: none; }

        .btn-retour {
            display: inline-flex; align-items: center; gap: 0.8rem;
            padding: 0.6rem 1.2rem; background: #fff;
            border: 2px solid var(--primary); border-radius: 100px;
            color: var(--primary); font-weight: 800; font-size: clamp(0.9rem, 2vh, 1.2rem);
            text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.1); cursor: pointer;
            transition: all 0.3s ease; opacity: 0; visibility: hidden; transform: translateX(-15px);
        }
        .btn-retour i { font-size: 1.2em; }
        .btn-retour.visible { opacity: 1; visibility: visible; transform: translateX(0); }
        .btn-retour:hover, .btn-retour:focus { background: var(--primary); color: white; transform: scale(1.05); }

        .screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex; justify-content: center; align-items: stretch;
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease; transform: scale(0.98) translateY(10px);
            padding: clamp(70px, 12vh, 110px) clamp(1rem, 3vw, 2rem) clamp(10px, 2vh, 1rem);
        }

        .screen.active { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1) translateY(0); z-index: 10; }

        .layout {
            display: grid; width: 100%; height: 100%; max-width: 1600px; margin: 0 auto;
            grid-template-columns: 1fr minmax(auto, 750px) 1fr; align-items: center; gap: 1rem;
        }

        /* ─── CONTENEURS D'AVATARS ───────────────────────────────────────────────
           Les avatars (neutre et bras tendu) sont dans des divs .avatar-container.
           Ils occupent la colonne gauche du grid .layout (3 colonnes : avatar | contenu | avatar).
        ────────────────────────────────────────────────────────────────────── */

        /* Colonne gauche : l'avatar est aligné à droite pour se rapprocher du contenu central */
        .avatar-container { display: flex; align-items: center; justify-content: flex-end; height: 100%; }

        /* Colonne droite (avatar urgence) : aligné à gauche pour partir du bord intérieur */
        .avatar-container.right { justify-content: flex-start; align-items: center; }

        /* Premier avatar de la grille (colonne gauche) : ajout d'un retrait à gauche */
        .layout > .avatar-container:first-child { justify-content: flex-start; padding-left: clamp(1rem, 3vw, 2.5rem); }

        /* Image des avatars : limitée en hauteur pour ne jamais dépasser la zone visible
           (le padding vertical de .screen est ~110px en haut + ~1rem en bas) */
    .avatar-container > img {
        max-height: min(40vh, calc(100vh - 160px));
        width: auto; max-width: 100%; object-fit: contain; display: block;
    }

        /* Limitation supplémentaire sur les écrans autres que l'accueil (plus de contenu vertical) */
    .screen:not(#accueil) .avatar-container > img { max-height: min(36vh, calc(100vh - 160px)); }

        /* Sur l'écran d'accueil, l'avatar bras tendu peut être un peu plus grand.
           Le transform:none empêche un décalage vertical involontaire sur certains viewports. */
    #accueil .avatar-container { align-items: center; margin-right: -2rem; z-index: 3; }
    #accueil .avatar-container img { max-height: clamp(280px, 40vh, 480px); width: auto; margin-top: 2vh; transform: none; }

        /* ─── AVATAR URGENCE (coin supérieur droit, fixe sur toutes les pages) ─────
           Affiché en position fixed pour qu'il reste visible au-dessus de tout le contenu.
           pointer-events: none pour ne pas intercepter les clics sur les boutons en dessous.
           L'animation float lui donne un effet de lévitation subtil sur desktop.
        ────────────────────────────────────────────────────────────────────── */
        .avatar-urgence-container {
            position: fixed;
            top: clamp(10px, 2.5vh, 24px);
            right: clamp(10px, 2.5vw, 24px);
            width: var(--avatar-urgence-size);
            height: auto;
            display: flex; align-items: center; justify-content: center;
            z-index: 1200;
            pointer-events: none;
            animation: float 6s ease-in-out infinite;
            transform-origin: top right;
        }
        .avatar-urgence-container img {
            width: 100%;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 12px 20px rgba(220, 38, 38, 0.14));
            max-width: 100%;
            display: block;
        }

        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

        .center-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; z-index: 2; }
        #accueil .center-content { justify-content: flex-start; padding-top: 5vh; }

    .logo-container-large { display: flex; justify-content: flex-start; align-items: center; height: 100%; padding-left: 2rem; }
    /* Grand logo Balise en colonne droite (accueil uniquement) : taille calibrée pour équilibrer l'avatar urgence */
    .logo-container-large img { width: clamp(240px, 28vw, 580px); max-width: 100%; object-fit: contain; }

        h1 { font-size: clamp(2.2rem, 5vh + 1vw, 4.5rem); line-height: 1.1; margin-bottom: clamp(1rem, 2vh, 1.5rem); font-weight: 900; letter-spacing: -0.02em; }
        h1 span { color: var(--primary); }
        h2 { font-size: clamp(1.6rem, 3.5vh + 0.5vw, 2.8rem); line-height: 1.2; margin-bottom: clamp(0.5rem, 2vh, 1.5rem); font-weight: 700; color: var(--text-muted); }
        h3 { font-size: clamp(1.1rem, 2.5vh, 1.8rem); color: var(--success); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
    .titre-question { font-size: clamp(1.5rem, 4vh, 3rem); font-weight: 900; margin-bottom: clamp(1rem, 3vh, 2rem); color: #000000; line-height: 1.2; max-width: 95%; text-align: center; }

        .options-list { display: flex; flex-direction: column; gap: clamp(0.8rem, 2vh, 1.2rem); width: 100%; max-width: 700px; }

    .btn-option {
            display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 75px;
            padding: clamp(1rem, 2.5vh, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
                background-color: var(--primary);
                color: #fff; text-decoration: none; border-radius: 100px;
                font-size: clamp(1.1rem, 2.8vh, 1.6rem); font-weight: 800; box-shadow: var(--shadow-btn);
                border: 3px solid transparent; cursor: pointer; position: relative; overflow: hidden;
                -webkit-appearance: none; appearance: none; outline: none; user-select: none;
                /* only animate the properties we need to avoid layout jank */
                transition: box-shadow 220ms ease, opacity 180ms linear;
                will-change: transform, box-shadow;
            }

        .btn-option::before {
                content: '';
                position: absolute; inset: 0; z-index: 0;
                background: var(--primary-gradient);
                opacity: 1; transition: opacity 180ms linear;
                border-radius: inherit; pointer-events: none;
                will-change: opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden;
            }

        /* Suppression des artefacts visuels natifs (surbrillance au tap sur iOS, outline Chrome) */
        .btn-option, .btn-outline { outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

        /* Le pseudo-élément ::before porte le dégradé de survol. On le coupe immédiatement
           lors du clic pour éviter un scintillement au relâchement du bouton. */
        .btn-option:active::before, .btn-option:focus::before { opacity: 0; transition: opacity 0s linear; }
        .btn-option:focus { box-shadow: var(--shadow-btn-hover); }

        /* Les enfants du bouton passent au-dessus du pseudo-élément ::before (le dégradé) */
        .btn-option > * { position: relative; z-index: 1; }

        /* Animation de survol : le bouton rétrécit légèrement puis bondit vers le haut */
        @keyframes shrinkBounce {
                0% { transform: translateY(0) scale(1); }
                30% { transform: translateY(-3px) scale(0.96); }
                60% { transform: translateY(-10px) scale(1.03); }
                100% { transform: translateY(-6px) scale(1); }
            }

        /* Au survol ou au focus clavier, déclenchement de l'animation et accentuation de l'ombre */
        .btn-option:hover, .btn-option:focus {
                box-shadow: var(--shadow-btn-hover);
                animation: shrinkBounce 360ms cubic-bezier(.22,1,.36,1) both;
            }
            .btn-option:hover::before, .btn-option:focus::before { opacity: 0; }

        /* État enfoncé : légère compression rapide pour un retour tactile visible */
        .btn-option:active {
                transform: translateY(-2px) scale(0.985);
                box-shadow: 0 6px 18px rgba(0,0,0,0.12);
                transition: transform 120ms ease;
            }
        .btn-option i { font-size: 1.5em; margin-left: 15px; transition: transform 200ms cubic-bezier(.22,1,.36,1); display: flex; align-items: center; justify-content: center; }
        .btn-option:hover i { transform: translateX(6px) scale(1.04); }

    .btn-outline { background: #fff; color: var(--primary); border-color: var(--primary); box-shadow: 0 4px 15px rgba(0,0,0,0.1); justify-content: center; gap: 15px; transition: box-shadow 200ms ease, background-color 180ms linear, color 180ms linear; }
    .btn-outline { -webkit-appearance: none; appearance: none; }
    .btn-option::-moz-focus-inner { border: 0; }
    .btn-outline i { margin-left: 0; transition: transform 200ms cubic-bezier(.22,1,.36,1); }
    .btn-outline:hover, .btn-outline:focus { background-color: var(--primary); color: #fff; box-shadow: var(--shadow-btn-hover); animation: shrinkBounce 360ms cubic-bezier(.22,1,.36,1) both; }

    /* Variante danger (rouge) : utilisée pour les boutons "Appeler le 15" — pas de dégradé bleu */
    .btn-option.btn-danger { background-color: var(--danger); border-color: transparent; }
    .btn-option.btn-danger::before { opacity: 0 !important; transition: none !important; }
    .btn-option.btn-danger:hover, .btn-option.btn-danger:focus { box-shadow: 0 12px 28px rgba(225,0,15,0.18); }

    /* Boutons outline (fond blanc, bordure bleue) : le dégradé est désactivé, il s'inverse au survol */
     .btn-option.btn-outline::before, .btn-outline::before { opacity: 0 !important; transition: none !important; }
     .btn-option.btn-outline:hover::before, .btn-outline:hover::before { opacity: 0 !important; }
    .btn-option.btn-outline { border-color: var(--primary); background-color: #fff; color: var(--primary); }

        .info-panel { background: var(--bg-glass-heavy); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 2px solid var(--primary); border-radius: 24px; padding: clamp(1rem, 2.5vh, 2rem); width: 100%; max-width: 700px; margin-bottom: clamp(1rem, 2vh, 2rem); box-shadow: var(--shadow-soft); text-align: center; }
        .info-panel h4 { color: var(--primary); font-size: clamp(1.1rem, 2.5vh, 1.4rem); margin-bottom: 0.8rem; text-align: center; font-weight: 800; }
        .info-panel p { font-size: clamp(1rem, 2.2vh, 1.3rem); line-height: 1.5; color: var(--text-main); font-weight: 600; text-align: center; }
        .info-pill { display: inline-block; background: #eef2ff; color: var(--primary); padding: 0.6rem 1.2rem; border-radius: 100px; font-weight: 800; font-size: clamp(0.9rem, 2vh, 1.1rem); margin: 0.25rem; border: 2px solid rgba(0, 0, 145, 0.2); }

    /* Écran de suivi (ecran_suivi) : les blocs d'information doivent tenir dans un seul écran sans scroll */
    .followup-container { max-height: calc(100vh - 240px); overflow-y: auto; padding-right: 8px; }
    #ecran_suivi .info-panel { padding: 0.9rem 1rem; border-radius: 18px; }
    #ecran_suivi .info-panel h4 { font-size: 1.05rem; margin-bottom: 0.4rem; }
    #ecran_suivi .info-panel p { font-size: 0.95rem; line-height: 1.4; }
    @media (max-width: 900px) { .followup-container { max-height: calc(100vh - 200px); } }

        .accordion-wrapper { width: 100%; max-width: 750px; max-height: calc(100vh - 240px); overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--primary) transparent; }
        .accordion-wrapper::-webkit-scrollbar { width: 8px; }
        .accordion-wrapper::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 10px; }
        .accordion-wrapper::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }

        .accordion { display: flex; flex-direction: column; gap: 0.8rem; width: 100%; }
        .accordion-item { background: #fff; border: 2px solid rgba(0,0,0,0.1); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: all 0.3s ease; flex-shrink: 0; }
        .accordion-header { width: 100%; min-height: 70px; padding: clamp(0.8rem, 2vh, 1.2rem) clamp(1rem, 2vw, 1.5rem); background: transparent; color: var(--text-main); font-weight: 800; font-size: clamp(1rem, 2.2vh, 1.3rem); border: none; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
        .accordion-header i { color: var(--primary); font-size: 1.5em; transition: transform 0.3s; }
        .accordion-item.active { border-color: var(--primary); box-shadow: 0 8px 20px rgba(0,0,145,0.15); }
        .accordion-item.active .accordion-header { background: #eef2ff; color: var(--primary); }
        .accordion-item.active .accordion-header i { transform: rotate(180deg); }
        .accordion-content { max-height: 0; padding: 0 clamp(1rem, 2vw, 1.5rem); background: #fff; color: var(--text-muted); font-size: clamp(1rem, 2vh, 1.2rem); line-height: 1.5; transition: all 0.4s ease; opacity: 0; text-align: left; }
        .accordion-item.active .accordion-content { max-height: 800px; padding: 1.2rem clamp(1rem, 2vw, 1.5rem); opacity: 1; }

        .danger-text { color: var(--danger); font-weight: 900; font-size: 1.1em; display: flex; align-items: center; gap: 10px; }
        .danger-img { max-height: 12vh; margin-top: 10px; display: block; filter: drop-shadow(0 10px 15px rgba(225, 0, 15, 0.2)); object-fit: contain; }

        .prev-list { display: flex; flex-direction: column; gap: clamp(0.8rem, 2vh, 1.2rem); width: 100%; max-width: 800px; max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
        .prev-list::-webkit-scrollbar { width: 8px; }
        .prev-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 10px; }
        .prev-list::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
        .prev-item { display: flex; align-items: center; background: #fff; border: 2px solid rgba(0,0,0,0.1); border-radius: 20px; padding: clamp(1rem, 2.5vh, 1.5rem); gap: 1.5rem; text-decoration: none; color: var(--text-main); font-weight: 700; font-size: clamp(1rem, 2.2vh, 1.2rem); line-height: 1.4; text-align: left; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; flex-shrink: 0; }
        .prev-item:hover, .prev-item:focus { transform: translateY(-2px) scale(1.01); box-shadow: 0 15px 35px -5px rgba(0,0,145,0.15); border-color: var(--primary); }
        .prev-icon { flex-shrink: 0; width: clamp(50px, 8vw, 65px); height: clamp(50px, 8vw, 65px); background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-btn); color: #fff; font-size: 1.5em; }

        .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: 1rem; }
        .popup-overlay.active { opacity: 1; visibility: visible; }
    .popup-content { background: #fff; width: 100%; max-width: clamp(420px, 60vw, 700px); max-height: 90vh; overflow-y: auto; border-radius: 32px; padding: clamp(2rem, 5vh, 3rem); text-align: center; position: relative; transform: scale(0.95) translateY(20px); transition: all 0.4s ease; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
        .popup-overlay.active .popup-content { transform: scale(1) translateY(0); }
        .popup-content h2 { color: var(--text-main); margin-bottom: 1rem; font-size: clamp(1.4rem, 3vh, 1.8rem); font-weight: 900; }
        .popup-content p { color: var(--text-muted); font-size: clamp(1rem, 2.2vh, 1.2rem); margin-bottom: 2rem; line-height: 1.5; font-weight: 600; }
        .popup-content img { max-height: 15vh; width: auto; margin-bottom: 1.5rem; filter: drop-shadow(0 10px 15px rgba(220, 38, 38, 0.2)); object-fit: contain; }
        .popup-btn-group { display: flex; flex-direction: column; gap: 1rem; }
    /* Boutons outline dans les popups : uniformisé à la même taille que les .btn-option
       Les popups sont plus larges donc on limite explicitement la largeur à 520px */
    .popup-content .btn-outline {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        min-height: 75px;
        padding: clamp(1rem, 2.5vh, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
        border-radius: 100px;
        font-size: clamp(1.1rem, 2.8vh, 1.6rem);
        font-weight: 800;
        gap: 10px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);
        border: 3px solid var(--primary);
        background-color: #fff;
        color: var(--primary);
        position: relative;
        overflow: hidden;
    }

    /* Les balises <a> avec .btn-outline dans les popups doivent se comporter comme des blocs flex */
    .popup-content a.btn-outline { display: flex; text-decoration: none; }
    /* Balises <a> avec .btn-option dans les popups : même mise en forme que les boutons */
    .popup-content a.btn-option { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; min-height: 75px; padding: clamp(1rem, 2.5vh, 1.5rem) clamp(1.5rem, 3vw, 2.5rem); border-radius: 100px; font-size: clamp(1.1rem, 2.8vh, 1.6rem); font-weight: 800; gap: 10px; box-shadow: var(--shadow-btn); color: #fff; text-decoration: none; }
    /* Le texte doit passer au-dessus du pseudo-élément ::before (dégradé de fond) */
    .popup-content a.btn-option > span { position: relative; z-index: 2; color: #fff; display: inline-block; }
    .popup-content .btn-option { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
        .btn-close-popup { position: absolute; top: 1.2rem; right: 1.2rem; width: 44px; height: 44px; background: #f1f5f9; border-radius: 50%; border: 2px solid transparent; font-size: 1.5rem; font-weight: bold; color: var(--text-main); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; }
        .btn-close-popup:hover, .btn-close-popup:focus { background: #e2e8f0; border-color: var(--primary); color: var(--primary); }

    .footer { position: absolute; bottom: 0; width: 100%; text-align: center; padding: clamp(0.5rem, 1vh, 1rem); font-size: clamp(1rem, 2.2vh, 1.4rem); color: var(--text-muted); font-weight: 700; z-index: 50; pointer-events: none; }
    .footer p { margin: 0; }

        @media (max-width: 1100px) { .layout { grid-template-columns: 1fr minmax(auto, 650px) 1fr; } }
        @media (max-width: 900px) {
            .layout { 
                grid-template-columns: 1fr; 
                display: flex; 
                flex-direction: column; 
                justify-content: center; 
                align-items: center;
                height: 100%;
                width: 100%;
            }
            
            /* Sur mobile, on masque les avatars décoratifs (neutre, bras tendu) dans les colonnes
               pour concentrer l'affichage sur le contenu central. Seul l'avatar urgence reste visible. */
            .avatar-container { display: none !important; }
            .avatar-container.right { display: flex !important; align-items: center; justify-content: flex-start; }

            /* L'avatar urgence reste en position fixe sur mobile */
            .avatar-urgence-container {
                position: fixed;
                top: clamp(8px, 2vh, 18px);
                right: clamp(8px, 2vw, 18px);
                width: var(--avatar-urgence-size);
                animation: none;
                pointer-events: none;
            }

            .center-content { 
                flex: 1; 
                display: flex; 
                flex-direction: column; 
                justify-content: center; 
                align-items: center; 
                width: 100%; 
                /* Décalage vers le bas pour laisser de la place à la topbar et à l'avatar urgence */
                padding-top: 7vh !important; 
            }
            
            #accueil .center-content { padding-top: 0 !important; justify-content: center !important; }

            /* Le grand logo Balise en colonne droite est masqué sur mobile (redondant avec la topbar) */
            .logo-container-large { display: none !important; }

            /* Sur mobile, on resserre le padding de la topbar */
            .topbar { padding: 0.6rem 0.75rem; }

            /* Le logo ARS à gauche prend la même taille que l'avatar urgence (--header-emph-size) */
            .logo-ars { height: var(--header-emph-size); width: auto; }

            /* Le logo Balise en en-tête est géré par JS (show/hide selon l'écran actif) */
            .logo-balise-header { display: none !important; height: clamp(100px, 16vh, 160px); }

            /* Taille de l'avatar urgence identique à la variable partagée */
            .avatar-urgence-container { width: var(--avatar-urgence-size); }

            /* Le bouton Retour reste dans le flux normal sur mobile (pas de transform décalant) */
            .btn-retour {
                pointer-events: auto;
                position: relative;
                transform: none;
                transition: opacity 0.25s ease, transform 0.25s ease;
            }
            .btn-retour.visible { opacity: 1; visibility: visible; transform: translateX(0); }

            .options-list { width: 100%; max-width: 95%; align-items: center; margin: 0 auto; justify-content: center; }
            .btn-option { 
                width: 100%; 
                max-width: 100% !important;
                justify-content: center;
                text-align: center; 
                gap: 15px;
            }
            .btn-option span { text-align: center; }
            .btn-option i { margin-left: 0; }
            .accordion-header { justify-content: center; text-align: center; gap: 15px; }
            .accordion-header span { text-align: center; }
            .accordion-header i { margin-left: 0; }
        }
        /* ─── TRÈS PETITS ÉCRANS (max 420px) ───────────────────────────────────
           Sur les petits téléphones, l'avatar urgence et le logo sont agrandis
           pour que le texte d'avertissement reste lisible. L'animation est
           désactivée pour économiser les ressources.
        ────────────────────────────────────────────────────────────────────── */
        @media (max-width: 420px) {
            .topbar { padding: 0.4rem 0.5rem; }
            .logo-ars { height: clamp(44px, 9vh, 76px) !important; }
            .avatar-urgence-container {
                width: clamp(85px, 20vw, 120px) !important;
                top: 8px !important; right: 8px !important;
                animation: none !important;
            }
            .header-avatar { height: clamp(36px, 8vh, 64px); }
        }
        /* ─── ÉCRAN PRÉVENTION ──────────────────────────────────────────────────
           Les 4 cartes de prévention doivent tenir sur un seul écran sur desktop.
           Sur mobile, un scroll vertical est autorisé si nécessaire.
        ────────────────────────────────────────────────────────────────────── */
        #ecran_prevention .layout { align-items: center; justify-items: center; }
        #ecran_prevention .center-content {
            justify-content: center; padding-top: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
        }
        #ecran_prevention .prev-list {
            max-width: 920px; width: 100%; align-items: center; display: flex; flex-direction: column; gap: clamp(1rem, 2vh, 1.5rem);
            max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 8px;
        }
        #ecran_prevention .prev-item {
            width: 100%; max-width: 100%; padding: clamp(1rem, 2.5vh, 2rem); border-radius: 18px;
            min-height: 120px; display: flex; align-items: center; gap: 1.25rem; text-align: left; box-sizing: border-box;
        }

        /* Sur desktop : pas de scroll, les items s'étirent verticalement (texte à gauche, icône à droite) */
        @media (min-width: 901px) {
            #ecran_prevention .prev-list { max-height: none; overflow: visible; }
            #ecran_prevention .prev-item { min-height: 140px; padding: clamp(1.25rem, 3vh, 2.5rem); }
            #ecran_prevention .prev-item { text-align: left; flex-direction: row; justify-content: space-between; align-items: center; }
            #ecran_prevention .prev-item .prev-icon { margin-left: 1rem; margin-top: 0; }
        }

        /* Centrage forcé sur desktop : le layout prévention passe en colonne (pas de grid) */
        @media (min-width: 901px) {
            #ecran_prevention .layout {
                display: flex !important;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%;
                padding-top: 0; padding-bottom: 0;
            }
            #ecran_prevention .center-content {
                width: 100%; max-width: 920px; margin: 0 auto; text-align: center; align-items: center; justify-content: center; display: flex; flex-direction: column;
            }
            #ecran_prevention .prev-list { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vh, 2rem); align-items: center; width: 100%; overflow: visible; }
            #ecran_prevention .prev-item { width: 90%; max-width: 820px; text-align: left; flex-direction: row; align-items: center; justify-content: space-between; padding: clamp(1.25rem, 3vh, 2.25rem); box-sizing: border-box; }
            #ecran_prevention .prev-item .prev-icon { margin-top: 0; margin-left: 1rem; }
        }

        /* ─── SURVOL DES CARTES INFO / PRÉVENTION (desktop uniquement) ───────────
           overflow: visible sur le conteneur pour que les ombres ne soient pas rognées.
           z-index élevé au survol pour que la carte se superpose à ses voisines.
        ────────────────────────────────────────────────────────────────────── */
        @media (min-width: 901px) {
            #ecran_info .prev-list, #ecran_prevention .prev-list { overflow: visible !important; }

            .prev-item { position: relative; z-index: 1; transition: box-shadow 200ms ease, transform 160ms ease; }
            .prev-item:hover, .prev-item:focus-within {
                z-index: 50;
                transform: translateY(-6px);
                box-shadow: 0 18px 45px -12px rgba(0,0,0,0.35), 0 6px 18px rgba(0,0,145,0.08);
            }
            .prev-item:focus-visible { outline-offset: 6px; }
        }

        /* Sur mobile : scroll vertical autorisé si le contenu dépasse la hauteur d'écran */
        @media (max-width: 900px) {
            #ecran_prevention .prev-list { max-height: calc(100vh - 220px); overflow-y: auto; }
            #ecran_prevention .prev-item { min-height: 84px; padding: clamp(1rem, 2.5vh, 1.75rem); flex-direction: row; text-align: left; }
        }
        
        @media (min-width: 901px) { .logo-balise-header { display: none; } }

        /* Centrage vertical et horizontal du contenu de l'écran de suivi */
        #ecran_suivi .center-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
        #ecran_suivi .followup-container { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
        /* Tous les blocs info-panel sont à la même largeur pour un alignement uniforme */
        #ecran_suivi .info-panel { width: 100%; max-width: 820px; margin: 0; text-align: center; box-sizing: border-box; }
        #ecran_suivi .info-panel > div, #ecran_suivi .info-panel p, #ecran_suivi .info-panel h4 { margin-left: auto; margin-right: auto; }

        /* ─── POSITIONNEMENT DU TITRE DE QUESTION SUR DESKTOP ──────────────────
           Le titre est déplacé vers le haut avec transform (pas margin) pour agrandir
           l'espace visuel entre le titre et le bloc de réponses SANS déplacer les boutons.
           Le bloc de réponses reste centré dans la page car transform n'affecte pas le layout.
        ────────────────────────────────────────────────────────────────────── */
        @media (min-width: 901px) {
            .titre-question {
                transform: translateY(-8vh);
                margin-bottom: 1.5rem;
                will-change: transform;
            }
            #ecran_suivi .followup-container { margin-top: 0; }
        }

        /* Sur mobile, on laisse le titre en place et on pousse le conteneur de blocs vers le bas */
        @media (max-width: 900px) {
            #ecran_suivi .titre-question, #ecran_suivi h1.titre-question { transform: none; }
            #ecran_suivi .followup-container { margin-top: clamp(2rem, 8vh, 10vh); }
        }



    /* ─── RECHERCHE CPTS (auto-complétion) ──────────────────────────────────
       Le dropdown de résultats est en position absolute pour ne pas pousser
       les autres éléments (avatar, contenu) lors de la frappe.
    ────────────────────────────────────────────────────────────────────── */
    .cpts-field { position: relative; width: 100%; }
    .cpts-results-wrap { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; max-height: 46vh; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.06); }
    .cpts-results-wrap ul { margin: 0; padding: 0; list-style: none; }
    .cpts-result-item { padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(0,0,0,0.06); cursor: pointer; text-align: left; }
    .cpts-result-item:hover { background: #f6f9ff; }
    /* overflow: visible sur .info-panel pour que le dropdown ne soit pas rogné */
    .info-panel { overflow: visible; }
    .cpts-phone-line { font-weight:800; color:var(--primary); white-space:nowrap; margin-top:6px; }
    /* Bouton d'appel CPTS : affiche "Appeler" au-dessus et le numéro de téléphone en dessous */
    .btn-option.call-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding-top:0.8rem; padding-bottom:0.8rem; }
    .btn-option.call-button .call-label { font-weight:800; line-height:1; font-size:0.95rem; }
    .btn-option.call-button .call-number { white-space:nowrap; font-weight:800; font-size:1.05rem; }

/* ==========================================================================
   AJOUTS DE COPYRIGHT ET DE BLOC FEEDBACK (PC & MOBILE)
   ========================================================================== */

/* 1. Version PC (écrans > 900px) */

/* Bloc Feedback flottant en bas à droite sur PC */
.pc-feedback-block {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--primary);
    border-radius: 20px;
    padding: clamp(1rem, 2vh, 1.25rem);
    max-width: 320px;
    box-shadow: var(--shadow-soft);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: clamp(0.85rem, 1.8vh, 0.95rem);
    font-weight: 700;
    color: var(--text-main);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.pc-feedback-block.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pc-feedback-block p {
    margin: 0;
    line-height: 1.4;
    text-align: left;
}

/* Bouton dans le bloc de feedback PC */
.btn-feedback-pc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 100px;
    font-size: clamp(0.85rem, 1.8vh, 0.95rem);
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s;
    box-shadow: var(--shadow-btn);
}

.btn-feedback-pc:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    color: #fff;
}

.btn-feedback-pc:active {
    transform: translateY(0);
}

/* Copyright spécifique sur l'écran de fin (PC) */
.pc-copyright-end {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.75rem, 1.5vh, 0.9rem);
    color: rgba(30, 30, 30, 0.6);
    font-weight: 700;
    text-align: center;
    width: 90%;
    max-width: 600px;
    z-index: 5;
    pointer-events: none;
}

/* Ajustement vertical de l'écran de fin sur PC pour un rendu équilibré */
@media (min-width: 901px) {
    #ecran_fin .layout {
        transform: translateY(-5vh);
        will-change: transform;
    }
}

/* 2. Version Mobile (écrans <= 900px) */
.mobile-only-footer {
    display: none;
}

@media (max-width: 900px) {
    /* Masquer le bloc de feedback PC et le copyright PC */
    .pc-feedback-block, .pc-copyright-end {
        display: none !important;
    }

    /* Autoriser le défilement vertical sur mobile */
    .screen {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Adapter le layout au flux défilant */
    .layout {
        height: auto !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Annuler les scrolls internes sur mobile pour scroller globalement */
    .followup-container,
    .accordion-wrapper,
    .prev-list,
    #ecran_prevention .prev-list {
        max-height: none !important;
        overflow-y: visible !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    /* Style du footer mobile */
    .mobile-only-footer {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: auto !important; /* Pousse le footer en bas */
        padding: 30px 10px 20px 10px;
        gap: 20px;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    /* Conteneur de feedback sur mobile */
    .mobile-feedback-box {
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid var(--primary);
        border-radius: 18px;
        padding: 18px;
        width: 100%;
        max-width: 500px;
        box-shadow: var(--shadow-soft);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
        box-sizing: border-box;
    }

    .mobile-feedback-box p {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-main);
        margin: 0;
        line-height: 1.4;
    }

    /* Bouton feedback sur mobile */
    .btn-feedback-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary);
        color: #fff;
        border: none;
        padding: 12px 24px;
        border-radius: 100px;
        font-size: 0.9rem;
        font-weight: 800;
        cursor: pointer;
        text-decoration: none;
        width: 100%;
        max-width: 250px;
        transition: background-color 0.2s, transform 0.1s;
        box-shadow: var(--shadow-btn);
        text-align: center;
        box-sizing: border-box;
    }

    .btn-feedback-mobile:hover, .btn-feedback-mobile:focus {
        background-color: var(--primary-hover);
        color: #fff;
    }

    .btn-feedback-mobile:active {
        transform: scale(0.98);
    }

    /* Copyright sur mobile */
    .mobile-copyright {
        font-size: 0.75rem;
        color: rgba(30, 30, 30, 0.6);
        font-weight: 700;
        text-align: center;
        line-height: 1.4;
        max-width: 90%;
    }
}