/* =====================================================================
   Charte « visite guidée » (étape 1b) — d'après la maquette validée.
   Bleu nuit = structure ; orange = action principale ; vert = validé
   uniquement ; rouge = suppression / anomalie.
   Trois modes : clair (défaut), sombre, plein soleil (contraste maximal,
   texte plus gros). Le mode est posé sur <html data-mode="…">.
   ===================================================================== */

@font-face{font-family:'Jakarta'; src:url(/fonts/jakarta-latin.woff2) format('woff2'); font-weight:200 800; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jakarta'; src:url(/fonts/jakarta-latin-ext.woff2) format('woff2'); font-weight:200 800; font-display:swap; unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Serif PV'; src:url(/fonts/serif-latin-600.woff2) format('woff2'); font-weight:600; font-display:swap;}
@font-face{font-family:'Serif PV'; src:url(/fonts/serif-latin-700.woff2) format('woff2'); font-weight:700; font-display:swap;}
@font-face{font-family:'Serif PV'; src:url(/fonts/serif-latin-ext-700.woff2) format('woff2'); font-weight:700; font-display:swap; unicode-range:U+0100-02AF,U+1E00-1EFF;}

:root{
  --police:'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --police-titre:'Serif PV', Georgia, 'Times New Roman', serif;
  --fond:#F5F3EE; --surface:#FFFFFF; --surface-2:#FBFAF7; --bord:#E4E0D8;
  --texte:#12263F; --texte-2:#5B6572;
  --bleu:#1F4E79; --bleu-fonce:#123454; --bleu-doux:#E8F0F7; --sur-bleu:#FFFFFF; --sur-bleu-2:#D6E3F0;
  --orange:#BC5216; --orange-vif:#F2A66B; --orange-doux:#FCE9D6; --orange-texte:#8A4A00; --sur-orange:#FFFFFF;
  --vert:#1F7A4D; --vert-doux:#DDF0E5; --vert-texte:#14573A;
  --rouge:#A83A2E; --rouge-doux:#FBEAE7;
  --ombre:0 1px 2px rgba(18,38,63,.06), 0 4px 14px rgba(18,38,63,.06);
  --rayon:16px; --rayon-petit:12px; --trait:1px;
  --taille:16px;
  color-scheme:light;
}
html[data-mode="sombre"]{
  --fond:#0E1520; --surface:#172231; --surface-2:#1C2938; --bord:#2B394B;
  --texte:#E9EEF4; --texte-2:#A6B2C1;
  --bleu:#8DB8E3; --bleu-fonce:#0B1726; --bleu-doux:#1E3247; --sur-bleu:#0B1726; --sur-bleu-2:#22374C;
  --orange:#F08A4B; --orange-vif:#F2A66B; --orange-doux:#3A2618; --orange-texte:#F6B88E; --sur-orange:#1A0E06;
  --vert:#5CC48E; --vert-doux:#173326; --vert-texte:#8FDDB2;
  --rouge:#F08A7E; --rouge-doux:#3A1D1A;
  --ombre:none;
  color-scheme:dark;
}
/* Plein soleil : noir sur blanc, traits épais, texte plus gros. */
html[data-mode="soleil"]{
  --fond:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF; --bord:#000000;
  --texte:#000000; --texte-2:#1A1A1A;
  --bleu:#002A52; --bleu-fonce:#001A33; --bleu-doux:#FFFFFF; --sur-bleu:#FFFFFF; --sur-bleu-2:#FFFFFF;
  --orange:#7A2C00; --orange-vif:#000000; --orange-doux:#FFFFFF; --orange-texte:#5C2100; --sur-orange:#FFFFFF;
  --vert:#00502A; --vert-doux:#FFFFFF; --vert-texte:#00401F;
  --rouge:#8A0F00; --rouge-doux:#FFFFFF;
  --ombre:none; --trait:2px;
  --taille:19px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; font-size:var(--taille);}
body{margin:0; background:var(--fond); color:var(--texte); font-family:var(--police); font-size:1rem; line-height:1.45; -webkit-font-smoothing:antialiased;}
[hidden]{display:none !important;}
a{color:inherit; text-decoration:none;}
button, input, select, textarea{font:inherit; color:inherit;}
:focus-visible{outline:3px solid var(--orange-vif); outline-offset:2px;}
html[data-mode="soleil"] :focus-visible{outline-color:#000;}
@media (prefers-reduced-motion: no-preference){
  .anim{transition:transform .15s ease, background-color .15s ease, opacity .15s ease;}
}

/* ---------- Mise en page ---------- */
.ecran{max-width:560px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; padding-bottom:calc(84px + env(safe-area-inset-bottom));}
.ecran.sans-nav{padding-bottom:calc(96px + env(safe-area-inset-bottom));}
.marges{padding:0 20px;}
.pile > * + *{margin-top:12px;}

.barre-haut{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 20px 4px;}
.marque{display:flex; align-items:center; gap:10px;}
.marque-logo{width:36px; height:36px; border-radius:10px; background:var(--bleu); color:var(--sur-bleu); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
html[data-mode="sombre"] .marque-logo{background:#1F4E79; color:#fff;}
.marque-nom{font-size:.75rem; font-weight:700; letter-spacing:.14em; color:var(--bleu);}
.bouton-rond{width:48px; height:48px; border-radius:24px; border:var(--trait) solid var(--bord); background:var(--surface); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; flex-shrink:0; color:var(--bleu);}

h1.titre{margin:0; font-family:var(--police-titre); font-size:1.85rem; line-height:1.15; font-weight:700;}
.sous-titre{margin:4px 0 0; font-size:.95rem; color:var(--texte-2);}
h2.section{display:flex; align-items:center; justify-content:space-between; margin:22px 0 8px; font-size:1rem; font-weight:700;}
h2.section a, h2.section button{font-size:.82rem; font-weight:600; color:var(--bleu); background:none; border:none; padding:8px 0; cursor:pointer;}
.etiquette{font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-2);}

/* ---------- Cartes ---------- */
.carte{background:var(--surface); border:var(--trait) solid var(--bord); border-radius:var(--rayon); padding:14px; box-shadow:var(--ombre);}
.carte-bleue{background:var(--bleu); color:var(--sur-bleu); border-radius:20px; padding:18px 18px 16px; border:var(--trait) solid var(--bleu);}
html[data-mode="sombre"] .carte-bleue{background:#1F4E79; color:#fff; border-color:#1F4E79;}
.carte-bleue .etiquette{color:var(--sur-bleu-2); opacity:.95;}
html[data-mode="sombre"] .carte-bleue .etiquette{color:#BFD3E6;}
.carte-bleue .grand{margin-top:6px; font-family:var(--police-titre); font-size:1.4rem; font-weight:700; line-height:1.2;}
.carte-bleue .fin{margin-top:4px; font-size:.82rem; opacity:.9;}
.ligne-carte{display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:64px; cursor:pointer;}
.ligne-carte .icone{width:40px; height:40px; border-radius:12px; background:var(--bleu-doux); color:var(--bleu); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
html[data-mode="soleil"] .ligne-carte .icone{border:2px solid #000;}
.ligne-carte .corps{flex-grow:1; min-width:0;}
.ligne-carte .nom{font-size:.95rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ligne-carte .detail{font-size:.78rem; color:var(--texte-2);}

/* ---------- Barre d'avancement ---------- */
.avancement{display:flex; align-items:center; gap:12px; margin-top:14px;}
.avancement .rail{flex-grow:1; height:8px; border-radius:4px; background:rgba(255,255,255,.25); overflow:hidden;}
.avancement .plein{height:8px; border-radius:4px; background:var(--orange-vif);}
html[data-mode="soleil"] .carte-bleue .avancement .plein{background:#fff;}
.avancement .pc{font-size:.9rem; font-weight:700; min-width:3.2em; text-align:right;}

/* ---------- Boutons ---------- */
.btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; padding:10px 16px; border-radius:var(--rayon-petit); border:var(--trait) solid transparent; font-weight:700; font-size:1rem; cursor:pointer; text-align:center;}
.btn-action{min-height:56px; border-radius:var(--rayon); background:var(--orange); color:var(--sur-orange); font-size:1.06rem;}
.btn-bleu{background:var(--bleu); color:var(--sur-bleu);}
html[data-mode="sombre"] .btn-bleu{background:#2B6198; color:#fff;}
.btn-blanc{background:var(--surface); color:var(--bleu); border-color:var(--bord);}
.carte-bleue .btn-blanc{background:#fff; color:#1F4E79; border-color:#fff;}
.btn-vert{background:var(--vert); color:#fff;}
html[data-mode="sombre"] .btn-vert{color:#06210F;}
.btn-discret{background:transparent; color:var(--bleu); border-color:var(--bord);}
.btn-danger{background:transparent; color:var(--rouge); border-color:var(--rouge);}
.btn[disabled]{opacity:.55; cursor:not-allowed;}
.lien{background:none; border:none; padding:10px 0; color:var(--bleu); font-weight:600; text-decoration:underline; cursor:pointer; min-height:44px;}

/* ---------- Compteurs ---------- */
.compteurs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.compteur{background:var(--surface); border:var(--trait) solid var(--bord); border-radius:var(--rayon); padding:12px;}
.compteur .nb{font-size:1.6rem; font-weight:700; color:var(--bleu); line-height:1.2;}
.compteur .nb.vert{color:var(--vert);} .compteur .nb.orange{color:var(--orange);}
.compteur .lib{font-size:.75rem; color:var(--texte-2); line-height:1.25;}

/* ---------- Pastilles ---------- */
.pastille{display:inline-block; font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:12px; white-space:nowrap;}
.pastille.brouillon{color:var(--orange-texte); background:var(--orange-doux);}
.pastille.termine{color:var(--vert-texte); background:var(--vert-doux);}
.pastille.fige{color:var(--vert-texte); background:var(--vert-doux);}
.pastille.local{color:var(--rouge); background:var(--rouge-doux);}
html[data-mode="soleil"] .pastille{border:2px solid currentColor;}

/* ---------- Navigation basse (zone du pouce) ---------- */
.nav-bas{position:fixed; left:0; right:0; bottom:0; z-index:10; background:var(--surface); border-top:var(--trait) solid var(--bord); padding:6px 8px calc(10px + env(safe-area-inset-bottom));}
.nav-bas .dedans{max-width:560px; margin:0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}
.nav-bas a{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; min-height:52px; justify-content:center; color:var(--texte-2); font-size:.7rem; font-weight:600;}
.nav-bas a[aria-current="page"]{color:var(--bleu); font-weight:700;}
.barre-bas{position:fixed; left:0; right:0; bottom:0; z-index:10; background:var(--surface); border-top:var(--trait) solid var(--bord); padding:12px 20px calc(14px + env(safe-area-inset-bottom));}
.barre-bas .dedans{max-width:520px; margin:0 auto; display:flex; gap:10px;}

/* ---------- Formulaires ---------- */
.champ{display:block; margin-top:16px;}
.champ > span{display:block; font-size:.85rem; font-weight:600; color:var(--texte-2); margin-bottom:6px;}
.champ input, .champ select, .champ textarea{width:100%; min-height:52px; padding:12px 14px; border-radius:var(--rayon-petit); border:var(--trait) solid var(--bord); background:var(--surface); font-size:1rem;}
.champ input:focus, .champ select:focus, .champ textarea:focus{outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-doux);}
.choix{display:flex; flex-wrap:wrap; gap:8px;}
.choix button, .choix label{min-height:48px; padding:10px 16px; border-radius:24px; border:var(--trait) solid var(--bord); background:var(--surface); font-weight:600; font-size:.95rem; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.choix [aria-pressed="true"], .choix input:checked + span{background:var(--bleu); color:var(--sur-bleu); border-color:var(--bleu);}
html[data-mode="sombre"] .choix [aria-pressed="true"]{background:#2B6198; color:#fff; border-color:#2B6198;}
.choix.large{display:grid; grid-template-columns:1fr 1fr;}
.choix.large button{justify-content:center; border-radius:var(--rayon-petit); min-height:64px; font-size:1.05rem;}

.option{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px; min-height:64px; border-radius:var(--rayon); border:var(--trait) solid var(--bord); background:var(--surface); cursor:pointer;}
.option + .option{margin-top:8px;}
.option .icone{width:40px; height:40px; border-radius:12px; background:var(--bleu-doux); color:var(--bleu); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.option .corps{flex-grow:1;}
.option .nom{font-weight:700;}
.option .detail{font-size:.8rem; color:var(--texte-2);}
.option[aria-pressed="true"]{border-color:var(--bleu); box-shadow:0 0 0 2px var(--bleu) inset;}
.option .coche{width:24px; height:24px; border-radius:12px; border:2px solid var(--bord); flex-shrink:0;}
.option[aria-pressed="true"] .coche{border-color:var(--bleu); background:var(--bleu); box-shadow:inset 0 0 0 4px var(--surface);}

.suggestions{margin-top:6px; border:var(--trait) solid var(--bord); border-radius:var(--rayon-petit); background:var(--surface); overflow:hidden;}
.suggestions button{display:block; width:100%; text-align:left; padding:12px 14px; min-height:48px; border:none; background:none; border-top:1px solid var(--bord); cursor:pointer;}
.suggestions button:first-child{border-top:none;}
.suggestions small{display:block; color:var(--texte-2); font-size:.75rem;}

.etapes{display:flex; gap:6px; margin-top:12px;}
.etapes span{flex:1; height:6px; border-radius:3px; background:var(--bord);}
.etapes span.faite{background:var(--bleu);}

.message{margin-top:14px; padding:12px 14px; border-radius:var(--rayon-petit); font-size:.9rem;}
.message.erreur{background:var(--rouge-doux); color:var(--rouge); border:var(--trait) solid var(--rouge);}
.message.info{background:var(--orange-doux); color:var(--orange-texte); border:var(--trait) solid var(--orange-vif);}
.message.ok{background:var(--vert-doux); color:var(--vert-texte); border:var(--trait) solid var(--vert);}
.vide{color:var(--texte-2); text-align:center; padding:28px 10px; font-size:.95rem;}
.chargement{color:var(--texte-2); text-align:center; padding:60px 10px;}

/* ---------- Menu du profil (feuille qui monte du bas) ---------- */
.feuille-fond{position:fixed; inset:0; z-index:30; background:rgba(10,18,30,.45); display:flex; align-items:flex-end; justify-content:center;}
.feuille{width:100%; max-width:560px; background:var(--surface); border-radius:22px 22px 0 0; padding:10px 20px calc(20px + env(safe-area-inset-bottom)); border-top:var(--trait) solid var(--bord); max-height:90vh; overflow:auto;}
.feuille .poignee{width:44px; height:5px; border-radius:3px; background:var(--bord); margin:4px auto 14px;}
.feuille h3{margin:0 0 4px; font-size:1.1rem;}
.modes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px;}
.modes button{min-height:72px; border-radius:var(--rayon-petit); border:var(--trait) solid var(--bord); background:var(--surface-2); font-weight:700; font-size:.85rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;}
.modes button[aria-pressed="true"]{border-color:var(--bleu); box-shadow:0 0 0 2px var(--bleu) inset;}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}