/* Archives, direction Nuit. Police servie localement, aucune ressource externe. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  --fond: #1A1714;
  --surface: #221E1A;
  --surface-2: #26211C;
  --surface-3: #2E2720;
  --bordure: #3A332C;
  --bordure-champ: #4A4138;
  --pointille: #6B5D4C;
  --or: #D9B26F;
  --or-clair: #E8C98E;
  --or-texte: #E6C68E;
  --texte: #F5F1EA;
  --secondaire: #C9C1B6;
  --doute: #F4A196;
  --doute-fond: #3A1F1B;
  --doute-bord: #6B3A33;
  --doute-valeur: #FBD2CB;
  --absent: #E8B45C;
  --papier: #EFE6D2;
  --encre: #3B2F1E;
  --h1: 12% 8%; --h2: 88% 30%; --h3: 40% 100%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--fond); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
a { color: var(--or); }
a:hover { color: var(--or-clair); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }

/* Fond : 3 halos radiaux dorés, placés différemment selon l'écran */
.ecran {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background:
    radial-gradient(circle at var(--h1), rgba(217,178,111,0.15), transparent 34%),
    radial-gradient(circle at var(--h2), rgba(217,178,111,0.08), transparent 30%),
    radial-gradient(circle at var(--h3), rgba(217,178,111,0.09), transparent 36%),
    var(--fond);
  background-attachment: fixed;
}
.ecran[data-ecran="deposer"], .ecran[data-ecran="verifier"] { --h1: 10% 0%; --h2: 95% 40%; --h3: 45% 100%; }
.ecran[data-ecran="lecture"] { --h1: 50% 30%; --h2: 5% 90%; --h3: 95% 5%; }
.ecran[data-ecran="corriger"] { --h1: 70% 20%; --h2: 5% 80%; --h3: 100% 100%; }
.ecran[data-ecran="rangement"] { --h1: 20% 10%; --h2: 90% 70%; --h3: 50% 110%; }
.ecran[data-ecran="modele"] { --h1: 15% 5%; --h2: 92% 45%; --h3: 45% 105%; }
.ecran[data-ecran="surlignage"] { --h1: 75% 25%; --h2: 5% 15%; --h3: 40% 105%; }
.chargement { padding: 40px 24px; color: var(--secondaire); }
.vue { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* En-tête */
.entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 40px; }
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marque-nom { font-size: 14px; font-weight: 700; letter-spacing: 0.24em; color: var(--or); }
.marque-app { font-size: 15px; color: var(--secondaire); }
.entete-droite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lien-entete { font-size: 15px; font-weight: 600; text-decoration: none; }
.pastille-solde { padding: 8px 16px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--bordure); font-size: 14px; color: var(--or-texte); }

/* Typographie */
.titre { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.sous-titre { font-size: 17px; line-height: 1.55; color: var(--secondaire); }
.surtitre { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); }
.petit { font-size: 14px; color: var(--secondaire); line-height: 1.55; }
.tres-petit { font-size: 13px; color: var(--secondaire); line-height: 1.55; }
.attention { color: var(--absent); }
.alerte { color: var(--doute); }

/* Boutons en pilule */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--or);
  background: transparent; color: var(--or); font: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer; text-decoration: none; text-align: center;
}
.bouton.principal { background: var(--or); color: var(--fond); border-color: var(--or); }
.bouton.principal:hover { background: var(--or-clair); color: var(--fond); }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.bouton.grand { min-height: 58px; font-size: 17px; }
.bouton.tres-grand { min-height: 64px; font-size: 18px; font-weight: 800; }
.lien { background: none; border: 0; padding: 0; font: inherit; color: var(--or); text-decoration: underline; cursor: pointer; }
.lien.fort { font-weight: 700; text-decoration: none; }
.lien:disabled { opacity: 0.45; cursor: not-allowed; }

/* Champs */
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label, .etiquette { font-size: 15px; font-weight: 600; }
.saisie {
  min-height: 52px; width: 100%; border: 1px solid var(--bordure-champ); border-radius: 27px; padding: 0 20px;
  background: var(--fond); color: var(--texte); font: inherit; font-size: 16px;
}
textarea.saisie { min-height: 110px; padding: 14px 20px; border-radius: 22px; resize: vertical; }
select.saisie { min-height: 44px; border-radius: 22px; padding: 0 16px; font-size: 15px; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.case input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--or); flex: none; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Surfaces */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.message { padding: 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--bordure); font-size: 15px; line-height: 1.55; }
.message.doute { background: var(--doute-fond); border-color: var(--doute-bord); color: var(--doute); }
.message.info { color: var(--or-texte); }
.bandeau-simulation { margin: 0 24px 12px; padding: 12px 18px; border-radius: 18px; border: 1px dashed var(--absent); color: var(--absent); font-size: 14px; text-align: center; }
.liste-simple { margin: 0; padding-left: 20px; font-size: 14px; color: var(--secondaire); }
.pied-liens { font-size: 14px; color: var(--secondaire); }

/* Conteneurs */
.page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 8px 24px 40px; display: flex; flex-direction: column; gap: 20px; }
.page.large { max-width: 1180px; padding-top: 4px; }
.colonnes { display: flex; flex-wrap: wrap; gap: 28px; }
.col-large { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.col-etroite { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px 16px 56px; text-align: center; }

/* 1. Connexion */
.connexion { flex: 1; display: flex; flex-wrap: wrap; align-items: stretch; }
.connexion-accroche { flex: 1 1 480px; padding: 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-width: 0; }
.connexion-accroche .marque-nom { font-size: 15px; }
.connexion-texte { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.connexion-texte h1 { font-size: 52px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
.connexion-texte p { font-size: 19px; line-height: 1.55; color: var(--secondaire); }
.connexion-zone { flex: 1 1 420px; padding: 48px 24px; display: flex; align-items: center; justify-content: center; min-width: 0; }
.connexion-carte { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 28px; padding: 40px; display: flex; flex-direction: column; gap: 22px; }
.connexion-carte h2 { font-size: 28px; font-weight: 800; }
.connexion-carte .intro { font-size: 16px; line-height: 1.5; color: var(--secondaire); }
.connexion-carte .bas { font-size: 15px; color: var(--secondaire); text-align: center; }
.saisie.code { letter-spacing: 0.4em; font-size: 22px; font-weight: 700; text-align: center; }

/* 2. Déposer */
.depot-zone {
  flex: 1; min-height: 360px; border: 1.5px dashed var(--pointille); border-radius: 28px; background: rgba(38,33,28,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 32px;
}
.depot-zone.bloquee { opacity: 0.5; }
.depot-zone.survol { border-color: var(--or); background: rgba(46,39,32,0.85); }
.depot-icone { width: 72px; height: 72px; border-radius: 36px; background: var(--or); display: flex; align-items: center; justify-content: center; }
.depot-zone .grand-texte { font-size: 21px; font-weight: 700; }
.depot-zone .petit-texte { font-size: 16px; color: var(--secondaire); }
.choix-fichiers { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ligne-lot { background: var(--surface); border: 1px solid var(--bordure); border-radius: 20px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ligne-lot b { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.ligne-lot span { color: var(--secondaire); font-size: 15px; white-space: nowrap; }
.ligne-long { background: var(--doute-fond); border: 1px solid var(--doute-bord); border-radius: 20px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.ligne-long .nom { color: var(--doute-valeur); font-weight: 700; }
.pied-depot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }

/* 7. Modèle */
.grille-modele { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.carte .surtitre { font-size: 13px; }
.ligne-info { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; padding: 6px 0; border-bottom: 1px solid #2E2822; }
.ligne-correspondance { flex-wrap: wrap; }
.ligne-correspondance .nom-info { flex: 1 1 120px; overflow-wrap: anywhere; }
.ligne-correspondance .saisie { flex: 2 1 160px; width: auto; min-height: 44px; }
.bloc-correspondance { display: flex; flex-direction: column; gap: 8px; }
.ligne-info.perso .nom-info { color: var(--absent); }
.interrupteur { flex: none; width: 40px; height: 24px; border-radius: 12px; border: 0; padding: 2px; background: var(--bordure-champ); display: flex; justify-content: flex-start; cursor: pointer; }
.interrupteur::after { content: ""; width: 20px; height: 20px; border-radius: 10px; background: var(--secondaire); }
.interrupteur[aria-checked="true"] { background: var(--or); justify-content: flex-end; }
.interrupteur[aria-checked="true"]::after { background: var(--fond); }
.bloc-niveau { padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--surface-3); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: grab; min-width: 0; }
.bloc-niveau.glisse { opacity: 0.5; }
.bloc-niveau.cible { outline: 2px dashed var(--or); }
.bloc-niveau small { font-weight: 500; color: var(--secondaire); font-size: 14px; }
.mini-boutons { display: flex; gap: 4px; flex: none; }
.mini { width: 30px; height: 30px; border-radius: 15px; border: 1px solid var(--bordure-champ); background: var(--fond); color: var(--secondaire); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mini:hover { color: var(--or); border-color: var(--or); }
.motif-nom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.puce-cle { padding: 5px 10px; border-radius: 12px; background: var(--or); color: var(--fond); font-weight: 700; }
.motif-groupe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 4px 3px 6px; border-radius: 14px; border: 1px solid var(--bordure); }
.motif-groupe.conditionnel { border-style: dashed; }
.motif-groupe .texte-fixe, .motif-sep { color: var(--secondaire); }
.motif-groupe .mini { width: 22px; height: 22px; font-size: 12px; }
.ajout-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ajout-ligne .saisie { flex: 1 1 160px; width: auto; min-height: 44px; }
.ajout-ligne .bouton { min-height: 44px; padding: 0 18px; font-size: 15px; }
.apercu-chemin { padding: 14px; border-radius: 16px; background: var(--fond); border: 1px solid var(--bordure); font-size: 13px; line-height: 1.6; color: var(--or-texte); }
.apercu-chemin span { color: var(--texte); }
.nom-modele { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-right: auto; }
.nom-modele .saisie { width: 240px; max-width: 100%; min-height: 48px; }

/* 8. Surlignage */
.surlignage { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.surlignage-gauche { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.surlignage-droite { flex: 999 1 420px; min-width: 0; display: flex; justify-content: center; }
.titre.moyen { font-size: 36px; line-height: 1.15; }
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille-info { min-height: 44px; padding: 0 16px 0 10px; border-radius: 22px; border: 1px solid var(--bordure-champ); background: transparent; color: var(--texte); font: inherit; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pastille-info[aria-pressed="true"] { background: var(--surface-3); border-color: var(--or); }
.pastille-info .rond { width: 22px; height: 22px; border-radius: 11px; flex: none; }
.pastille-ajout { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px dashed var(--pointille); background: transparent; color: var(--or); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.feuille {
  position: relative; width: 100%; max-width: 470px; aspect-ratio: 3 / 4; background: var(--papier); border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5); background-image: repeating-linear-gradient(transparent 0 30px, rgba(90,70,40,0.10) 30px 31px); overflow: hidden;
}
.feuille .manuscrit { position: absolute; left: 12%; right: 6%; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: clamp(16px, 4.6vw, 24px); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feuille .manuscrit.grand { font-size: clamp(18px, 5.4vw, 28px); }
.feuille .marque-surligne { position: absolute; left: 10%; height: 6%; border-radius: 3px; }

/* 3. Lecture */
.anneau { width: 240px; height: 240px; border-radius: 120px; background: conic-gradient(var(--or) 0 0%, var(--bordure) 0% 100%); display: flex; align-items: center; justify-content: center; }
.anneau-centre { width: 208px; height: 208px; border-radius: 104px; background: var(--fond); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.anneau-chiffre { font-size: 56px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.anneau-legende { font-size: 16px; color: var(--secondaire); }
.lecture-texte { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.lecture-texte h1 { font-size: 34px; font-weight: 800; line-height: 1.2; }
.puces-etat { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.puce-etat { padding: 10px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--bordure); font-size: 15px; }
.puce-etat.doute { background: var(--doute-fond); border-color: var(--doute-bord); color: var(--doute); }
.puce-etat.attente { color: var(--secondaire); }

/* 4. Vérifier */
.tete-verifier { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tete-verifier > div { display: flex; flex-direction: column; gap: 8px; }
.titre.verifier { font-size: 38px; }
.grille-doutes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.carte-doute { text-decoration: none; color: var(--texte); background: var(--surface); border: 1px solid var(--bordure); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.carte-doute:hover { border-color: var(--or); color: var(--texte); }
.carte-doute .haut { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--secondaire); }
.carte-doute .lieu { font-size: 19px; font-weight: 700; }
.valeur-doute { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--doute-fond); border: 1px solid var(--doute-bord); }
.valeur-doute .champ-nom { font-size: 15px; color: var(--doute); }
.valeur-doute .valeur { font-size: 17px; font-weight: 800; color: var(--doute-valeur); text-align: right; }
.identiques { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--bordure); }
.identiques .bouton { min-height: 46px; font-size: 15px; }

/* 5. Corriger */
.barre-doutes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 40px; }
.segments { display: flex; gap: 6px; flex: 0 1 auto; min-width: 0; }
.segment { width: 28px; height: 6px; border-radius: 3px; background: var(--bordure); flex: 0 1 28px; min-width: 4px; }
.segment.fait { background: var(--or); }
.corriger { flex: 1; display: flex; flex-wrap: wrap; gap: 32px; padding: 8px 40px 40px; align-items: center; }
.corriger-document { flex: 999 1 480px; min-width: 0; display: flex; gap: 16px; align-items: flex-start; }
.vignettes { display: flex; flex-direction: column; gap: 10px; flex: none; max-height: 640px; overflow-y: auto; }
.vignette { flex: none; width: 72px; height: 96px; border-radius: 6px; background: var(--bordure-champ); border: 2px solid transparent; color: var(--secondaire); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
.vignette[aria-current="true"] { background: var(--papier); border-color: var(--or); color: var(--encre); }
.page-entiere { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.page-cadre { position: relative; width: 100%; max-width: 460px; min-height: 200px; background: var(--papier); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); overflow: hidden; line-height: 0; }
.page-cadre img { width: 100%; height: auto; display: block; }
.page-cadre .attente-page { line-height: 1.5; padding: 80px 20px; text-align: center; color: var(--encre); font-size: 15px; }
.zone-or { position: absolute; border: 3px solid #D9B26F; border-radius: 10px; background: rgba(217,178,111,0.22); box-shadow: 0 0 0 6px rgba(217,178,111,0.18); pointer-events: none; }
.carte-question { flex: 1 1 360px; min-width: 0; background: var(--surface); border: 1px solid var(--bordure); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.carte-question h1 { font-size: 30px; font-weight: 800; line-height: 1.2; }
.choix-valeurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.choix-valeur { min-height: 72px; padding: 8px 14px; border: 1px solid var(--bordure-champ); border-radius: 20px; background: var(--surface-2); color: var(--texte); font: inherit; font-size: 24px; font-weight: 800; cursor: pointer; overflow-wrap: anywhere; }
.choix-valeur.lue { border: 2px solid var(--or); background: var(--surface-3); }
.choix-valeur:hover { border-color: var(--or-clair); }
.choix-valeur.long { font-size: 17px; }

/* 6. Rangement */
.titre.range { font-size: 42px; }
.arbre { flex: 999 1 520px; min-width: 0; background: var(--surface); border: 1px solid var(--bordure); border-radius: 26px; padding: 22px 26px; font-size: 15px; line-height: 2.05; max-height: 70vh; overflow-y: auto; }
.arbre div { padding-left: calc(var(--retrait, 0) * 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arbre .dossier { color: var(--or-texte); font-weight: 700; }
.arbre .fichier { color: var(--texte); font-weight: 500; }
.arbre .reste { color: var(--secondaire); font-style: italic; }
.rangement-actions { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.rangement-actions .note { margin-top: auto; font-size: 14px; line-height: 1.6; color: var(--secondaire); }

/* Compte et aide */
.texte-long { max-width: 760px; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.6; color: var(--secondaire); }
.texte-long h2 { color: var(--texte); font-size: 22px; font-weight: 800; margin-top: 12px; }
.texte-long strong { color: var(--texte); }
.grille-compte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.donnee { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #2E2822; font-size: 15px; }
.donnee span:first-child { color: var(--secondaire); }
.donnee span:last-child { font-weight: 700; text-align: right; min-width: 0; }

/* Petits écrans */
@media (max-width: 720px) {
  .entete, .barre-doutes { padding: 16px; }
  .page { padding: 4px 16px 32px; }
  .titre, .titre.verifier, .titre.range { font-size: 30px; }
  .titre.moyen { font-size: 28px; }
  .connexion-accroche { padding: 28px 16px 8px; gap: 24px; }
  .connexion-texte h1 { font-size: 34px; }
  .connexion-texte p { font-size: 17px; }
  .connexion-zone { padding: 16px 16px 32px; }
  .connexion-carte { padding: 26px 20px; border-radius: 24px; }
  .depot-zone { min-height: 240px; padding: 24px 16px; }
  .anneau { width: 200px; height: 200px; }
  .anneau-centre { width: 172px; height: 172px; }
  .anneau-chiffre { font-size: 46px; }
  .lecture-texte h1 { font-size: 26px; }
  .corriger { padding: 4px 16px 32px; gap: 20px; }
  .corriger-document { flex-direction: column-reverse; }
  .vignettes { flex-direction: row; max-height: none; overflow-x: auto; max-width: 100%; }
  .vignette { width: 48px; height: 64px; flex: none; }
  .carte-question { padding: 22px 18px; }
  .carte-question h1 { font-size: 24px; }
  .arbre { padding: 16px; font-size: 14px; }
  .arbre div { padding-left: calc(var(--retrait, 0) * 12px); }
  .bandeau-simulation { margin: 0 16px 12px; }
  .surlignage { gap: 24px; }
}

/* Pied de page commun et administration */
.pied-page { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 20px 24px 28px; font-size: 14px; color: var(--secondaire); }
.pied-page a { color: var(--secondaire); }
.pied-page a:hover { color: var(--or); }
.grille-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.titre-carte { font-size: 20px; font-weight: 800; min-width: 0; }
.cabinet-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.pastille-solde.coupe { color: var(--doute); border-color: var(--doute-bord); background: var(--doute-fond); }
.liste-adresses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.liste-adresses li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.liste-adresses li span { min-width: 0; }
.ligne-admin { display: flex; flex-wrap: wrap; gap: 10px; }
.ligne-admin .saisie { flex: 1 1 160px; width: auto; }