/* ==========================================================================
   ErgÔ'ccitan — Questionnaires
   Charte reprise du site ergoccitan.fr. Conçu d'abord pour iPad 11",
   puis décliné vers desktop et mobile.
   ========================================================================== */

:root {
    --rouge:        #C41E3A;
    --rouge-fonce:  #8B1A28;
    --or:           #D4AF37;
    --accent:       #E63946;
    --noir:         #1A1A1A;
    --texte:        #333333;
    --texte-clair:  #666666;
    --bg:           #FFFFFF;
    --bg-alt:       #FEF5F5;
    --creme:        #FDFBF7;
    --sable:        #F5F0E8;
    --bordure:      #E0E0E0;

    --vert:         #2E7D32;
    --orange:       #ED6C02;
    --rouge-alerte: #C62828;

    --radius:       8px;
    --ombre-sm:     0 2px 4px rgba(0, 0, 0, .08);
    --ombre-md:     0 4px 12px rgba(0, 0, 0, .12);
    --transition:   .2s ease;

    /* Cible tactile minimale (Apple HIG) : confort de saisie sur iPad. */
    --cible:        44px;
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` doit masquer, quelle que soit la règle qui suit.
   La feuille du navigateur pose `[hidden] { display: none }`, mais elle perd
   contre n'importe quelle règle d'auteur portant un `display` — `.btn` en pose
   un, et le bouton « Ajouter un diagnostic » restait donc visible sous une case
   « je n'ai pas de… » cochée, invitant à saisir ce que le patient venait de
   déclarer inexistant. `!important` est ici la seule forme qui tienne : la
   règle doit gagner contre toutes celles écrites plus bas. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--texte);
    background: var(--creme);
    line-height: 1.55;
    /* Évite le zoom automatique iOS au focus d'un champ. */
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--noir); margin: 0 0 .4em; }
h1 { font-size: 1.9rem; color: var(--rouge); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--rouge); }

/* -- En-tête -------------------------------------------------------------- */

.site-header {
    background: #fff;
    border-bottom: 3px solid var(--rouge);
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: var(--ombre-sm);
}

.site-header .logo { height: 46px; width: auto; }
.site-header .marque { font-family: 'Playfair Display', Georgia, serif; font-size: 1.2rem; color: var(--rouge); font-weight: 700; }
.site-header nav { display: flex; gap: .75rem; align-items: center; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.wrap-etroit { max-width: 480px; }

/* -- Cartes et blocs ------------------------------------------------------ */

.carte {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--ombre-sm);
    margin-bottom: 1.25rem;
}

/* Carte des consignes : fond teinté et liseré rouge, pour la distinguer des
   cartes de saisie sans en faire un encart d'alerte. */
.carte-instructions {
    background: var(--bg-alt);
    border-left: 5px solid var(--rouge);
}

/* Les consignes arrivent découpées en paragraphes par `Export\Instructions` :
   `white-space: pre-line` reproduisait les coupures à 80 colonnes de la
   transcription, et le texte s'arrêtait à mi-largeur de sa carte. */
.instructions-corps { font-size: .92rem; }
.instructions-corps p { margin: 0; }
.instructions-corps p + p { margin-top: .5rem; }

.carte-titre {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-bottom: 2px solid var(--bg-alt);
    padding-bottom: .6rem;
    margin-bottom: 1rem;
}

/* -- Formulaires ---------------------------------------------------------- */

label { display: block; font-weight: 700; margin-bottom: .3rem; font-size: .92rem; }

input[type="text"], input[type="password"], input[type="date"], select, textarea {
    width: 100%;
    min-height: var(--cible);
    padding: .6rem .75rem;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    font-family: inherit;
    /* 16px minimum : en-deçà, iOS zoome sur le champ au focus. */
    font-size: 16px;
    background: #fff;
    color: var(--texte);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--rouge);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, .12);
}

textarea { min-height: 90px; resize: vertical; }

.champ { margin-bottom: 1rem; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.aide { font-size: .82rem; color: var(--texte-clair); margin-top: .25rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--cible);
    padding: .65rem 1.4rem;
    border: none;
    border-radius: var(--radius);
    background: var(--rouge);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}

.btn:hover  { background: var(--rouge-fonce); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondaire { background: #fff; color: var(--rouge); border: 2px solid var(--rouge); }
.btn-secondaire:hover { background: var(--bg-alt); }
.btn-fantome { background: transparent; color: var(--texte-clair); border: 1px solid var(--bordure); }
.btn-fantome:hover { background: var(--sable); color: var(--texte); }
.btn-sm { min-height: 34px; padding: .3rem .8rem; font-size: .85rem; }

/* -- Messages ------------------------------------------------------------- */

.message { padding: .85rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border-left: 4px solid; }
.message-erreur  { background: #FFEBEE; border-color: var(--rouge-alerte); color: #8E1A1A; }
.message-succes  { background: #E8F5E9; border-color: var(--vert);         color: #1B5E20; }
.message-info    { background: var(--bg-alt); border-color: var(--rouge);  color: var(--rouge-fonce); }

/* -- Liste des questionnaires --------------------------------------------- */

.liste-questionnaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.tuile {
    display: block;
    background: #fff;
    border: 1px solid var(--bordure);
    border-left: 5px solid var(--rouge);
    border-radius: var(--radius);
    padding: 1.15rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition), transform var(--transition);
}

.tuile:hover { box-shadow: var(--ombre-md); transform: translateY(-2px); }
.tuile h3 { color: var(--rouge); margin-bottom: .3rem; }
.tuile p  { margin: 0; font-size: .9rem; color: var(--texte-clair); }
.tuile .meta { margin-top: .6rem; font-size: .82rem; color: var(--texte-clair); }

/* Tuile du catalogue praticien : elle contient un champ et deux boutons, elle
   n'est donc pas cliquable elle-même. Le soulèvement au survol annoncerait un
   lien qui n'existe pas. */
.tuile-statique:hover { box-shadow: none; transform: none; }

/* Les descriptions vont d'une à quatre lignes : sans cela, le champ et les
   boutons flottaient à une hauteur différente dans chaque tuile d'une même
   rangée, et l'œil devait les chercher. `margin-top: auto` colle le bloc de
   liens en bas, la grille étirant déjà les tuiles à hauteur égale. */
.tuile-statique { display: flex; flex-direction: column; }
.tuile-statique .meta { margin-bottom: auto; }
.tuile-statique .champ-lien { margin: .9rem 0 .7rem; }
.tuile-statique .champ-lien input {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1rem; /* 16 px : en dessous, iOS zoome au focus, y compris sur un champ en lecture seule */
    background: var(--creme);
    /* La fin de l'URL est ce qui distingue les douze liens : cadré à gauche, le
       champ n'affichait que le domaine, identique partout. `direction: rtl` fait
       défiler jusqu'au slug sans toucher à l'ordre des caractères — le champ
       n'accepte pas de saisie, le sens d'écriture n'a donc rien d'autre à régir.
       Rétabli au focus, sans quoi le curseur partirait à contresens. */
    direction: rtl;
    text-align: left;
}

.tuile-statique .champ-lien input:focus { direction: ltr; }

/* -- Vitrine d'accueil ----------------------------------------------------- */

/* Le patient connecté sans destination ne voit plus de liste : seul le logo du
   cabinet, en grand, qui ouvre le site officiel. `min-height` en `dvh` et non
   `vh` : sur iOS la barre d'adresse rétractable fausse `vh` et le bloc
   dépassait sous le pli. */
.vitrine {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    min-height: 55dvh;
    padding: 2rem 0;
    text-decoration: none;
    color: var(--texte-clair);
    transition: transform var(--transition);
}

.vitrine img { width: min(320px, 70vw); height: auto; }
.vitrine:hover { transform: scale(1.02); }
.vitrine-pied { display: flex; justify-content: center; }

/* -- Barre de progression collante ---------------------------------------- */

.barre-progression {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-sm);
    padding: .55rem 1.25rem;
}

.progression-ligne { display: flex; align-items: center; gap: 1rem; max-width: 1100px; margin: 0 auto; }
.progression-piste { flex: 1; height: 8px; background: var(--sable); border-radius: 99px; overflow: hidden; }
.progression-valeur { height: 100%; width: 0; background: linear-gradient(90deg, var(--rouge), var(--or)); transition: width .25s ease; }
.progression-compteur { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.progression-compteur .fait { color: var(--rouge); font-size: 1.05rem; }

/* Navigation par ancres : défilement horizontal tactile. */
.nav-ancres {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding: .4rem 0 .1rem;
    max-width: 1100px;
    margin: 0 auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.nav-ancres a {
    flex: 0 0 auto;
    min-width: 38px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .6rem;
    border-radius: var(--radius);
    background: var(--sable);
    color: var(--texte);
    text-decoration: none;
    font-weight: 700;
    font-size: .85rem;
    transition: background var(--transition), color var(--transition);
}

.nav-ancres a:hover   { background: var(--bg-alt); color: var(--rouge); }
.nav-ancres a.complet { background: var(--vert); color: #fff; }
.nav-ancres a.partiel { background: var(--or); color: var(--noir); }

/* -- Sections de questions ------------------------------------------------ */

.section-questions { margin-bottom: 2rem; scroll-margin-top: 120px; }

.section-entete {
    background: var(--noir);
    color: #fff;
    padding: .7rem 1rem;
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    align-items: baseline;
    gap: .75rem;
}

.section-entete .code { font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; color: var(--or); font-weight: 700; }
.section-entete .titre { font-weight: 700; font-size: .98rem; }
.section-entete .compte { margin-left: auto; font-size: .82rem; opacity: .8; white-space: nowrap; }

.section-corps { background: #fff; border: 1px solid var(--bordure); border-top: none; border-radius: 0 0 var(--radius) var(--radius); }

/* -- Question ------------------------------------------------------------- */

/* Les réponses passent **toujours** sous l'énoncé, pleine largeur, quel que soit
   l'écran. Elles ont d'abord occupé une troisième colonne sur PC : « Plus de la
   moitié des jours » y écrasait la question à deux mots par ligne, et la
   disposition changeait d'un questionnaire à l'autre selon la longueur des
   modalités. Une seule forme partout se lit de la même façon sur iPad, sur
   téléphone et sur PC — c'est ce que le cabinet a demandé. */
.question {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: .75rem;
    row-gap: .55rem;
    align-items: center;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--bordure);
    transition: background var(--transition);
}

.reponses { grid-column: 1 / -1; }

.question:last-child { border-bottom: none; }
.question:nth-child(even) { background: var(--creme); }
.question.repondu .numero { background: var(--vert); color: #fff; border-color: var(--vert); }

.question.manquante {
    background: #FFF5F5;
    box-shadow: inset 4px 0 0 var(--rouge-alerte);
    scroll-margin-top: 140px;
}

.question .numero {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    font-weight: 700;
    font-size: .85rem;
    background: #fff;
    transition: background var(--transition), color var(--transition);
}

.question .enonce { font-size: .95rem; }

/* Mention « facultatif » : discrète, sans couleur d'alerte — elle informe, elle
   n'avertit pas. C'est l'exception qui est marquée, les questions obligatoires
   étant la règle : un astérisque sur chacune n'apprenait rien au patient. */
.facultatif {
    font-size: .78rem;
    font-weight: 400;
    font-style: italic;
    color: var(--texte-clair);
    white-space: nowrap;
}

/* Segments de réponse : boutons larges, confortables au doigt. `wrap` pour que
   les libellés longs descendent d'une ligne au lieu de comprimer les cibles
   sous les 44 px réglementaires. */
.reponses { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Les modalités d'une échelle se partagent **toute** la largeur, à parts égales,
   quelle que soit la longueur de leur libellé. Sans `flex-grow`, « Toujours » et
   « Jamais » laissaient la moitié de la ligne vide alors que « Presque jamais »
   l'occupait entière : deux questionnaires voisins ne se ressemblaient plus, et
   les cibles courtes étaient les plus difficiles à viser au doigt. La base de
   8 rem reste un plancher — au-delà de cinq modalités, `wrap` fait passer les
   dernières à la ligne plutôt que de descendre sous les 44 px. */
.reponses-longues label,
.reponses:not(.reponse-choix):not(.reponse-consentement):not(.reponse-nombre) > label {
    flex: 1 1 8rem;
    white-space: normal;
    line-height: 1.25;
    padding: .4rem .5rem;
    font-size: .82rem;
}

.reponses input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.reponses label {
    min-width: var(--cible);
    min-height: var(--cible);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 .5rem;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    background: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: all var(--transition);
    /* Supprime le flash bleu au tap sur iOS. */
    -webkit-tap-highlight-color: transparent;
}

.reponses label:hover { border-color: var(--rouge); background: var(--bg-alt); }
.reponses input:checked + label { background: var(--rouge); border-color: var(--rouge); color: #fff; box-shadow: var(--ombre-sm); }
.reponses input:focus-visible + label { outline: 3px solid rgba(196, 30, 58, .35); outline-offset: 1px; }

/* Deux lignes empilées : les légendes d'extrémité, puis les cibles. Le conteneur
   passe donc en colonne, la rangée de chiffres gardant le `flex` horizontal. */
.reponse-nombre { flex-direction: column; gap: .25rem; }
.reponse-nombre .echelle-valeurs { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Les chiffres occupent toute la largeur eux aussi, comme les modalités-phrases :
   une échelle 0-10 laissait sinon un tiers de ligne vide à droite, et l'ancre
   « gêne complètement » ne tombait plus sous la valeur qu'elle nomme. Base à
   `--cible` et non 8 rem : onze valeurs à 8 rem sortiraient sur trois lignes,
   là où le plancher de 44 px suffit à les garder visables au doigt. */
.reponse-nombre label { flex: 1 1 var(--cible); min-width: var(--cible); padding: 0 .35rem; }

/* Légendes des bornes d'une échelle numérique : « 7 » ne se lit pas sans elles.
   `space-between` les colle aux extrémités qu'elles nomment, et le retour à la
   ligne des cibles ne les déplace pas — elles restent au-dessus de la première. */
.echelle-ancres {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .78rem;
    color: var(--texte-clair);
}
.echelle-ancres .ancre-max { text-align: right; }

/* Sur une échelle de modalités (`scale`), `.reponses` reste un flex horizontal
   partagé avec les libellés : les ancres s'y glisseraient entre deux chiffres.
   `flex-basis: 100 %` leur donne leur propre ligne, au-dessus des cibles, sans
   toucher à la disposition des autres natures de saisie. */
.reponses > .echelle-ancres { flex: 1 0 100%; }

/* Texte libre : 16 px minimum, sinon iOS zoome au focus. */
.reponse-texte { display: block; }
.reponse-texte textarea {
    width: 100%;
    min-height: calc(var(--cible) * 1.6);
    font-size: 1rem;
    font-family: inherit;
    padding: .5rem .6rem;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    background: #fff;
    resize: vertical;
}
.reponse-texte textarea:focus-visible {
    outline: 3px solid rgba(196, 30, 58, .35);
    outline-offset: 1px;
    border-color: var(--rouge);
}

/* Note libre accolée à une cote (« Lesquels ? »). Occupe toute la largeur sous
   l'énoncé et ses réponses : c'est un complément facultatif, pas une deuxième
   question, et rien ne doit laisser croire qu'elle est attendue. */
.note-item {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.note-item label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--texte-clair);
}
/* 16 px minimum : en dessous, iOS zoome au focus. */
.note-item input {
    flex: 1 1 12rem;
    min-height: var(--cible);
    font-size: 1rem;
    font-family: inherit;
    padding: .4rem .6rem;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    background: #fff;
}
.note-item input:focus-visible {
    outline: 3px solid rgba(196, 30, 58, .35);
    outline-offset: 1px;
    border-color: var(--rouge);
}

/* -- Natures propres aux anamnèses ---------------------------------------- */

.reponse-ligne { display: block; }
.reponse-ligne input {
    width: 100%;
    min-height: var(--cible);
    /* 16 px minimum : en dessous, iOS zoome au focus. */
    font-size: 1rem;
    font-family: inherit;
    padding: .5rem .6rem;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    background: #fff;
}
.reponse-ligne input:focus-visible {
    outline: 3px solid rgba(196, 30, 58, .35);
    outline-offset: 1px;
    border-color: var(--rouge);
}

/* Les modalités d'un choix sont des phrases, pas des cotes. Elles s'étirent
   tout de même pour occuper toute la largeur, comme les échelles : l'item 10 du
   PHQ-9 laissait sinon sa rangée à moitié vide, et deux questions voisines de la
   même page ne se ressemblaient plus. Le texte reste cadré à gauche — c'est ce
   qui les distingue d'une cote centrée. */
.reponse-choix { flex-wrap: wrap; gap: .4rem; }
.reponse-choix input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.reponse-choix label {
    flex: 1 1 8rem;
    justify-content: flex-start;
    text-align: left;
    padding: .5rem .9rem;
    font-size: .88rem;
    font-weight: 400;
}

/* Consentement : une case cochable ordinaire. Le libellé bouton des échelles
   ferait passer un accord pour une modalité parmi d'autres. */
.reponse-consentement { align-items: center; gap: .6rem; }
.reponse-consentement input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    accent-color: var(--rouge);
    /* La cible reste de 44 px sans grossir la case elle-même. */
    margin: calc((var(--cible) - 1.5rem) / 2) 0;
}
.reponse-consentement label {
    min-width: 0;
    min-height: 0;
    border: none;
    background: transparent;
    font-weight: 400;
    font-size: .92rem;
    padding: 0;
}
.reponse-consentement label:hover { background: transparent; border: none; }

.reponse-fichier { display: block; }
.reponse-fichier input[type="file"] {
    width: 100%;
    min-height: var(--cible);
    font-size: 1rem;
    font-family: inherit;
    padding: .5rem .6rem;
    border: 1px dashed var(--bordure);
    border-radius: var(--radius);
    background: #fff;
}
.aide-fichier { display: block; font-size: .82rem; color: var(--texte-clair); margin-top: .3rem; }

/* -- Groupes répétables --------------------------------------------------- */

.groupe-repetable {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--bordure);
    transition: background var(--transition);
}
.groupe-repetable:last-child { border-bottom: none; }
.groupe-repetable.manquante {
    background: #FFF5F5;
    box-shadow: inset 4px 0 0 var(--rouge-alerte);
    scroll-margin-top: 140px;
}

.groupe-entete { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.groupe-entete .numero {
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    font-weight: 700;
    font-size: .85rem;
    background: #fff;
}
.groupe-entete .enonce { font-size: .95rem; font-weight: 700; }

/* Case « je n'ai pas de… », entre l'énoncé et les occurrences. Le libellé
   enveloppe la case : toute la ligne devient cliquable, ce qui vaut mieux
   qu'une cible de 1,5 rem au doigt. Volontairement sobre — c'est une réponse
   parmi deux, pas un avertissement. */
.groupe-aucun {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--cible);
    margin-bottom: .6rem;
    padding: .35rem .6rem;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    background: #fff;
    font-weight: 400;
    font-size: .9rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.groupe-aucun:hover { border-color: var(--or); }
.groupe-aucun input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    margin: 0;
    accent-color: var(--rouge);
}
/* Cochée, la case devient la réponse visible du groupe : sans ce contraste,
   rien ne distinguait « j'ai déclaré n'avoir aucun traitement » d'un groupe
   simplement replié. */
.groupe-aucun:has(input:checked) {
    border-color: var(--or);
    background: var(--creme);
    font-weight: 700;
}
.groupe-aucun:has(input:focus-visible) {
    outline: 3px solid rgba(196, 30, 58, .35);
    outline-offset: 1px;
}

.groupe-occurrence {
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--or);
    border-radius: var(--radius);
    padding: .75rem .85rem .25rem;
    margin-bottom: .6rem;
    background: var(--creme);
}

.occurrence-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
.occurrence-rang {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: var(--rouge);
}

/* Cible de 44 px sur le retrait : sur iPad, un lien de texte se rate. */
.btn-retirer {
    min-height: var(--cible);
    padding: 0 .8rem;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    background: #fff;
    color: var(--texte-clair);
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn-retirer:hover { border-color: var(--rouge-alerte); color: var(--rouge-alerte); }

.groupe-occurrence .champ { margin-bottom: .7rem; }
/* Le libellé enveloppe son champ — voir `_group.twig`. Il porte donc lui-même
   `.champ`, et c'est le `<span>` intérieur qui reçoit la mise en forme du texte :
   sans lui, `label { display: block }` s'appliquerait au bloc entier et la marge
   basse du libellé s'insérerait au-dessus de la saisie. */
.groupe-occurrence .champ-libelle {
    display: block;
    font-weight: 400;
    font-size: .88rem;
    color: var(--texte-clair);
    margin-bottom: .3rem;
}
.groupe-occurrence input {
    width: 100%;
    min-height: var(--cible);
    font-size: 1rem;
    font-family: inherit;
    padding: .5rem .6rem;
    border: 1px solid var(--bordure);
    border-radius: var(--radius);
    background: #fff;
}

/* -- Mention d'information (RGPD) ----------------------------------------- */

.mention-rgpd {
    font-size: .82rem;
    color: var(--texte-clair);
    border-top: 1px solid var(--bordure);
    padding-top: .75rem;
    margin-top: 1rem;
}

/* Libellé réservé aux lecteurs d'écran : un textarea de réponse est décrit par
   l'énoncé de la question, qui n'est pas un <label>. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -- Pastille d'aide ------------------------------------------------------ */

.aide-pastille { position: relative; display: inline-flex; }

.aide-pastille button {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid var(--rouge);
    background: #fff;
    color: var(--rouge);
    font-weight: 700;
    font-family: 'Playfair Display', Georgia, serif;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.aide-contenu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    width: min(420px, 85vw);
    background: #fff;
    border: 1px solid var(--bordure);
    border-top: 4px solid var(--rouge);
    border-radius: var(--radius);
    box-shadow: var(--ombre-md);
    padding: 1rem;
    font-size: .88rem;
    z-index: 100;
    text-align: left;
    font-weight: 400;
}

/* Les consignes arrivent découpées en paragraphes par `Export\Instructions` :
   `pre-line` reproduisait les coupures à 80 colonnes de la transcription. */
.aide-contenu p { margin: 0; }
.aide-contenu p + p { margin-top: .5rem; }

.aide-pastille.ouvert .aide-contenu { display: block; }
/* Survol sur desktop uniquement : sur tactile, le tap prend le relais. */
@media (hover: hover) and (pointer: fine) {
    .aide-pastille:hover .aide-contenu { display: block; }
}

/* -- Pied de formulaire --------------------------------------------------- */

.pied-formulaire {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--bordure);
    padding: .85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
    flex-wrap: wrap;
}

.etat-sauvegarde { font-size: .82rem; color: var(--texte-clair); }

/* -- Tableaux admin ------------------------------------------------------- */

.tableau { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
.tableau th, .tableau td { padding: .6rem .75rem; border-bottom: 1px solid var(--bordure); text-align: left; }
.tableau thead th { background: var(--noir); color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.tableau tbody tr:hover { background: var(--creme); }
.tableau .actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.etiquette { display: inline-block; padding: .15rem .55rem; border-radius: 99px; font-size: .76rem; font-weight: 700; }
.etiquette-complete { background: #E8F5E9; color: var(--vert); }
.etiquette-erreur   { background: #FFEBEE; color: var(--rouge-alerte); }
.etiquette-attente  { background: var(--sable); color: var(--texte-clair); }

.classe-typique  { color: var(--vert); font-weight: 700; }
.classe-probable { color: var(--orange); font-weight: 700; }
.classe-averee   { color: var(--rouge-alerte); font-weight: 700; }

.puce-typique, .puce-probable, .puce-averee {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem;
}
.puce-typique  { background: var(--vert); }
.puce-probable { background: var(--orange); }
.puce-averee   { background: var(--rouge-alerte); }

/* -- Écran de connexion --------------------------------------------------- */

.ecran-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.ecran-connexion .carte { width: 100%; max-width: 400px; text-align: center; }
.ecran-connexion .logo { height: 64px; margin-bottom: 1rem; }
.ecran-connexion form { text-align: left; margin-top: 1.25rem; }

/* -- Responsive ----------------------------------------------------------- */

/* iPad portrait et petits écrans : les cibles se resserrent, la disposition ne
   change pas — les réponses sont déjà sous l'énoncé à toutes les largeurs. */
@media (max-width: 900px) {
    /* Base réduite, pas supprimée : les cibles se resserrent pour tenir sur une
       ligne, mais gardent le même mode de répartition qu'en grand écran. Une
       base nulle (`flex: 1`) les aurait empêchées de passer à la ligne, quitte à
       descendre sous les 44 px sur les échelles à modalités-phrases. */
    .reponses:not(.reponse-nombre) label { flex: 1 1 5rem; font-size: .74rem; padding: 0 .25rem; }

    /* Les chiffres gardent leur base à `--cible` : onze valeurs à 5 rem chacune
       sortiraient sur six lignes. Ils s'étirent tout de même pour remplir la
       largeur, comme en grand écran. */
    .reponse-nombre label { font-size: .74rem; padding: 0 .2rem; }

    /* Base à 8 rem et non 5 : une phrase de choix comprimée à 5 rem se briserait
       en trois lignes. Elle s'étire comme les autres, avec plus d'air. */
    .reponse-choix label { flex: 1 1 8rem; font-size: .88rem; padding: .5rem .9rem; }
    .reponse-consentement label { flex: 0 0 auto; font-size: .92rem; padding: 0; }
}

@media (max-width: 600px) {
    h1 { font-size: 1.5rem; }
    .wrap { padding: 1rem .85rem 4rem; }
    .carte { padding: 1.1rem; }
    .site-header { padding: .6rem .85rem; }
    .site-header .marque { font-size: 1rem; }
    .question { padding: .75rem .7rem; }

    /* Cinq réponses sur une ligne imposeraient ~55 px par bouton, donc une
       police illisible et une cible sous les 44 px requis. On passe en 3 + 2 :
       la page s'allonge, mais chaque libellé reste entier et confortable. */
    .reponses {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .35rem;
    }

    .reponses label { min-width: 0; font-size: .8rem; padding: 0 .2rem; }

    /* Des modalités-phrases ne tiennent pas dans un tiers de téléphone :
       « Pas du tout à mon enfant » y sortirait sur quatre lignes de deux mots.
       Une colonne unique, un choix par ligne, aligné à gauche comme une liste. */
    .reponses-longues { grid-template-columns: 1fr; }

    .reponses-longues label {
        justify-content: flex-start;
        text-align: left;
        font-size: .85rem;
        padding: .5rem .75rem;
    }

    /* Les natures des anamnèses ne sont pas des modalités côte à côte : la
       grille de trois colonnes couperait une adresse en tiers. */
    .reponse-ligne,
    .reponse-fichier { display: block; }
    .reponse-choix,
    .reponse-consentement { display: flex; }

    /* Un choix par ligne sur téléphone. La base à 8 rem des grands écrans y
       ferait déborder quatre modalités hors de la carte : `flex-basis` l'emporte
       sur la largeur du conteneur, la ligne ne se coupe pas toute seule. */
    .reponse-choix label { flex: 1 1 100%; padding: .5rem .9rem; font-size: .88rem; }
    .reponse-consentement label { padding: 0; font-size: .92rem; }

    .groupe-repetable { padding: .75rem .7rem; }
    .grille-champs { grid-template-columns: 1fr; }
    .pied-formulaire { flex-direction: column; align-items: stretch; }
    .pied-formulaire .btn { width: 100%; }
    .tableau { font-size: .82rem; }
}

@media print {
    .barre-progression, .pied-formulaire, .site-header nav, .nav-ancres { display: none; }
    body { background: #fff; }
}