/* AKWABA TITULAIRE — la page du propriétaire : elle se lit assis, au calme. Nuit et or.
   L'écran principal (17/09, puis 27/09) : quatre carrés, voiture et itinéraire en haut, celui qui tient le téléphone et
   la caisse en bas ; « Ouvrir la journée » au milieu, à cheval sur les deux rangées ; sous voiture et itinéraire, un « choix ». */

.ecran{margin-top:4px}
/* La date en grand (27/09) : verte quand tout est bon (journée ouverte, quatre feux verts), rouge dès qu'il manque
   quelque chose, grise quand la journée est fermée. */
.date-grande{
  font-family:"Cormorant Garamond",serif;font-weight:700;font-size:36px;line-height:1.05;margin:0 0 6px;text-align:center;
  color:var(--faible);text-wrap:balance;
}
.date-grande.rouge{color:var(--rouge)} .date-grande.verte{color:var(--vert)}
.journee-active{
  min-height:24px;margin:0 0 14px;text-align:center;font-size:15px;line-height:1.45;color:var(--doux);
  font-family:"Cormorant Garamond",serif;font-size:22px;font-style:italic;
}
/* Quatre carrés et le rond au milieu (27/09) : trois colonnes, deux rangées ; le rond occupe la colonne du milieu sur
   les deux rangées, centré : plus bas que la première ligne, plus haut que la seconde. */
.quatre{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto;gap:10px;align-items:stretch}
.cote{
  position:relative;background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);padding:14px 12px;
  display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%;overflow:hidden;box-shadow:var(--ombre);min-height:118px;
}
/* Le feu (27/09) : vert = c'est bon, rouge = pas bon, gris = on ne sait pas encore. L'illettré voit l'icône et la couleur. */
.feu{position:absolute;top:10px;right:10px;width:14px;height:14px;border-radius:50%;background:var(--bord);box-shadow:0 0 0 2px var(--carte)}
.feu.vert{background:var(--vert);box-shadow:0 0 0 2px var(--carte),0 0 8px var(--vert)}
.feu.rouge{background:var(--rouge);box-shadow:0 0 0 2px var(--carte),0 0 8px var(--rouge)}
.cote .quoi{padding-right:20px}
#coteVoiture{grid-column:1;grid-row:1} #coteItineraire{grid-column:3;grid-row:1}
#coteAssistant{grid-column:1;grid-row:2} #coteCaisse{grid-column:3;grid-row:2}
.cote .quoi{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:10.5px;letter-spacing:.08em;white-space:normal;line-height:1.2;min-width:0;max-width:100%}
#coteCaisse .quoi{white-space:normal;line-height:1.2}   /* « Droit de journée » (30/09) : deux lignes valent mieux qu'un débordement */
.cote .ic{width:20px;height:20px;flex:0 0 auto;color:var(--or)}
.cote .valeur{font-weight:800;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.cote .note{margin-top:auto;font-size:12px;color:var(--faible);line-height:1.3}
.cote .choix{
  margin-top:auto;font-size:13px;font-weight:800;color:var(--or);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
}
.cote .choix:focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:4px}
#coteCaisse .valeur.ok{color:var(--vert)} #coteCaisse .valeur.attend{color:var(--rouge)}
.ouvrir{
  grid-column:2;grid-row:1 / 3;align-self:center;
  width:136px;height:136px;margin:0;padding:0 14px;border-radius:50%;flex:0 0 auto;
  --anneau:var(--bord);--fond-rond:var(--creux);
  background:radial-gradient(circle, var(--fond-rond) 0 calc(50% - 9px), transparent calc(50% - 9px)),
             conic-gradient(var(--anneau) calc(var(--pct, 0) * 1%), var(--bord) 0);
  color:var(--faible);font-size:16px;font-weight:800;line-height:1.15;
  display:grid;place-items:center;text-align:center;box-shadow:0 0 0 3px var(--carte);
}
.ouvrir .lib{display:block}
.ouvrir .pct{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;margin-top:4px;opacity:.85}
/* La jauge (28/09) : 25 % par feu vert. Rouge, orange, or, puis vert à 100 % : là seulement le rond s'allume. */
.ouvrir.p33{--anneau:var(--rouge)} .ouvrir.p67{--anneau:var(--or)}
.ouvrir.p100{--anneau:var(--vert);--fond-rond:var(--vert);color:var(--sur-vert)}
.ouvrir[disabled]{opacity:1}
.ouvrir.ouverte{--pct:100;--anneau:var(--vert);--fond-rond:var(--or);color:var(--sur-or)}
.ouvrir.ouverte .pct{display:none}
.cote button.choix{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.cote button.choix[disabled]{opacity:.5}
#coteCaisse{cursor:pointer}
/* La couleur de la voiture (28/09) : le mot, et une pastille de la couleur, pour l'œil qui ne lit pas. */
.pastille{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid var(--bord);vertical-align:-1px;margin-left:6px}
#assistant09{margin-top:2px;font-size:11px;color:var(--faible)}

@media (max-width:420px){
  .cote .quoi{font-size:9.5px;letter-spacing:.04em}
  .quatre{gap:8px}
  .ouvrir{width:118px;height:118px;font-size:15px;padding:0 10px}
  .cote{padding:12px 9px;min-height:108px}
  .cote .quoi{font-size:10px;letter-spacing:.05em;gap:5px}
  .cote .ic{width:18px;height:18px}
}

/* ── Les voitures ──────────────────────────────────────────────────────────────────────────── */
.liste{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.voiture{
  width:100%;margin:0;text-align:left;background:var(--creux);color:var(--texte);border:1px solid var(--bord);
  display:flex;flex-direction:column;gap:3px;padding:13px 14px;
}
.voiture .nom{font-weight:800;font-size:15px}
.voiture .det{color:var(--doux);font-size:13px;font-weight:600}
.voiture.choisie{border-color:var(--or);background:var(--or-doux)}
.conseil{font-size:15px;line-height:1.5;color:var(--doux);margin:8px 0 0}
input.texte{font-family:"Manrope",system-ui,sans-serif;letter-spacing:0}
input[type=date]{font-family:"JetBrains Mono",monospace}
#secChamps label{margin-top:12px}
.types{display:flex;flex-wrap:wrap;gap:8px}
.types button{width:auto;margin:0;padding:11px 14px;font-size:14px;font-weight:700;background:transparent;color:var(--texte);border:1px solid var(--bord)}
.types button.choisi{border-color:var(--or);color:var(--or);background:var(--or-doux)}

/* ── Le dossier ────────────────────────────────────────────────────────────────────────────── */
.liens{margin:12px 0 0;text-align:center}
.liens .choix{font-size:14px;font-weight:800;color:var(--or);text-decoration:underline;text-underline-offset:3px}
.bloc{margin-top:12px}
.etat{font-weight:800;font-size:15px;margin:6px 0 2px;min-height:22px}
select{width:100%;padding:14px;border-radius:12px;border:1px solid var(--bord);background:var(--creux);color:var(--texte);font-size:16px;font-family:inherit}
.cases{display:flex;flex-wrap:wrap;gap:8px}
.case{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bord);border-radius:10px;padding:9px 12px;margin:0;font-size:15px;font-weight:800;color:var(--texte);cursor:pointer}
.case input{width:18px;height:18px;margin:0;accent-color:var(--or)}
.case:has(input:checked){border-color:var(--or);background:var(--or-doux);color:var(--or)}
#secChampsPiece label,#secChampsPermis label{margin-top:12px}

/* ── La journée ────────────────────────────────────────────────────────────────────────────── */
.caisse{text-align:center;font-size:13px;color:var(--faible);margin:12px 0 0;min-height:18px;font-weight:700}
.caisse.confirmee{color:var(--vert)}
#secAssistant{margin-top:14px}

/* ── La journée de création ────────────────────────────────────────────────────────────────── */
.bandeau{background:var(--or);color:var(--sur-or);border-radius:12px;padding:12px 14px;font-size:15px;font-weight:800;margin:12px 0 0}
.gps{font-size:13px;color:var(--faible);min-height:18px;margin:8px 0 0;font-weight:700}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
button.gros{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:16px 14px;min-height:150px;font-size:20px;line-height:1.1}
button.gros span{font-size:13px;font-weight:600;line-height:1.35;opacity:.9}
button.gros.vert{background:var(--vert);color:var(--sur-vert)}
button.gros.rouge{background:var(--rouge);color:#fff}
button.gros.dore{background:var(--or);color:var(--sur-or);min-height:120px}
button.gros[disabled]{opacity:.35}
.ligne-nee{margin-top:12px;border-top:1px solid var(--bord);padding-top:12px}
.ligne-nee .nom{font-weight:800;font-size:15px}
.nommer{display:grid;gap:8px;margin-top:8px}
.nommer button{margin-top:0}

/* Une voiture de la liste : le bouton, et sous lui le lien vers sa carte grise (021). */
.voiture-ligne{display:flex;flex-direction:column;gap:4px}
.voiture-ligne .carte-grise{align-self:flex-end;font-size:12.5px;font-weight:800;color:var(--or);text-decoration:underline;text-underline-offset:3px}

/* Cinq voitures par page : deux flèches et le compte (27/09). */
.pages{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}
.pages .rond{width:44px;height:44px;border-radius:50%;padding:0;margin:0;display:grid;place-items:center;background:var(--creux);color:var(--or);border:1px solid var(--bord)}
.pages .rond[disabled]{opacity:.35}
.pages .ic{width:22px;height:22px}

/* Le formulaire de la carte grise en quatre onglets (27/09) : les zones de la carte, l'une après l'autre. */
.onglets{display:flex;gap:6px;margin:6px 0 12px;overflow-x:auto;padding-bottom:2px}
.onglets button{flex:0 0 auto;margin:0;padding:8px 12px;border-radius:999px;background:var(--creux);color:var(--doux);border:1px solid var(--bord);font-size:13px;font-weight:800;width:auto}
.onglets button.actif{background:var(--or);color:var(--sur-or);border-color:var(--or)}
.onglets button.rempli:not(.actif)::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--vert);margin-left:6px;vertical-align:middle}
.onglet{display:none}.onglet.actif{display:block}
.onglets-pas{display:flex;gap:8px;margin:8px 0 14px}
.onglets-pas button{flex:1;margin:0}

/* Le choix de l'assistant (024) : le 09 en gros, ses voitures en détail quand on appuie, « Choisir ». */
.assistant-detail{display:none;padding:8px 12px 10px;border:1px solid var(--bord);border-top:0;border-radius:0 0 var(--rayon) var(--rayon);background:var(--creux);margin-top:-6px}
.assistant-detail.ouvert{display:block}
.assistant-detail .ligne{padding:6px 0;font-size:14px}
.assistant-detail button{margin-top:8px}

/* Les réglages de la ville (044) : un réglage = son nom, sa phrase, moins / la valeur / plus, et d'où vient la valeur. */
.compte .choix{margin-right:12px;color:var(--or);font-weight:800;text-decoration:none;border:1px solid var(--or);border-radius:999px;padding:9px 14px;font-size:14px}
.cahier li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--bord);font-size:14px;line-height:1.4}
.cahier li .code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-weight:700;color:var(--doux)}
.reglage{background:var(--carte);border:1px solid var(--bord);border-radius:14px;padding:14px 16px;margin:0 0 10px}
.reglage.propre{border-color:var(--or);box-shadow:inset 4px 0 0 var(--or)}
.reglage .nom{font-weight:800;font-size:17px}
.reglage .det{font-size:14px;color:var(--doux);line-height:1.4;margin:4px 0 10px}
.reglage .rangee{display:flex;align-items:center;justify-content:center;gap:16px}
.reglage .valeur{min-width:110px;text-align:center;font-size:26px;font-weight:700}
.reglage .rond-pas{width:60px;height:60px;border-radius:50%;margin:0;padding:0;display:grid;place-items:center;font-size:30px;font-weight:700;border:0;flex:0 0 auto}
.reglage .moins{background:var(--creux);color:var(--texte);border:1px solid var(--bord)}
.reglage .plus{background:var(--vert);color:var(--sur-vert)}
.reglage .rond-pas:disabled{opacity:.35}
.reglage .sous{font-size:13px;color:var(--faible);text-align:center;margin-top:8px}
.reglage .retirer{margin:10px 0 0;font-size:14px}
.cahier li .det{white-space:nowrap}


/* TITULAIRE, D'APRÈS LE KIT D'HONORÉ (06/10, maquette « Akwaba Titulaire Abidjan ») : la nuit d'Abidjan en fond de toute la
   page (la chaussée mouillée de sa maquette, fixée derrière), en tête le logo, le nom peint, le gbaka blanc au liseré
   vert et orange devant la lagune ; les cartes en verre sombre au bord doré, le rond « Fermer la journée » dans ses anneaux.
   Cette page est TOUJOURS de nuit : c'est sa scène. Le titre tapé reste pour les lecteurs d'écran. */
:root,:root.nuit{--mod:#F39A2B;--halo:rgba(243,154,43,.42);--fond:#0B0908;--carte:rgba(22,17,10,.86);--bord:rgba(255,174,0,.55);--creux:rgba(9,7,5,.85);
  --texte:#F3EEE4;--doux:#D9CDB6;--faible:#A8A090;--or:#FFC62B;--sur-or:#1E1600;--or-doux:rgba(255,198,43,.14);--vert:#4CFF68;--sur-vert:#06201A;--rouge:#FF5149}
html{background:var(--fond)}
body{background:url("/accueil/fond-titulaire.webp?v=3") center top/100% auto repeat-y var(--fond)}
.ciel{height:min(50.6vw,283px);position:relative;background:url("/accueil/tete-titulaire.webp") center top/cover no-repeat;margin:0 auto;max-width:560px}
.ciel:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 92%,rgba(11,9,8,.9))}
@media (min-width:600px){.ciel{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}}
main>.surtitre,main>h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main>.sous{color:var(--doux);text-align:center}
.carte,.compte,.installer,.reglage,.assistant-detail,.voiture{background:linear-gradient(#1a1912dc,#080907dc);border:1px solid var(--bord);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.installer{background:rgba(255,198,43,.10)}
.compte .surnom{color:var(--or)}
.date-grande{color:var(--texte);text-shadow:0 2px 8px #000}
.journee-active{color:var(--doux)}
.cote{background:linear-gradient(#252418e8,#090a07ee);border:1px solid var(--bord);box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.5);transition:transform .18s ease,box-shadow .18s ease}
@media (hover:hover){.cote:hover{transform:translateY(-3px);box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 28px rgba(255,139,0,.18)}}
.cote:active{transform:translateY(1px) scale(.985)}
.cote .quoi{color:#FFD04A}
.cote .ic{color:var(--or);filter:drop-shadow(0 0 6px rgba(255,157,0,.6))}
.cote .valeur{color:var(--texte)}
.cote .choix{color:var(--or)}
.feu{box-shadow:0 0 0 2px #0a0a07}
.feu.vert{background:var(--vert);box-shadow:0 0 0 2px #0a0a07,0 0 10px var(--vert);animation:feu 1.7s ease-in-out infinite}
@keyframes feu{50%{opacity:.6}}
/* Le rond : deux anneaux qui tournent lentement, vert et or, et le disque qui respire ; immobile si l'on préfère le calme. */
.ouvrir{position:relative;background:radial-gradient(circle at 50% 30%,#2b4227,#090c08 65%);color:var(--texte);box-shadow:inset 0 0 25px rgba(67,255,80,.16),0 0 24px rgba(67,255,80,.16);border:2px solid rgba(85,255,112,.7);animation:respire 3.4s ease-in-out infinite}
.ouvrir::before,.ouvrir::after{content:"";position:absolute;inset:6px;border-radius:50%;border:4px solid rgba(85,255,112,.65);border-top-color:transparent;animation:tourne 5s linear infinite;pointer-events:none}
.ouvrir::after{inset:-4px;border-color:rgba(255,179,0,.55);border-top-color:rgba(255,179,0,.55);border-bottom-color:transparent;animation:tourne 7s linear infinite reverse}
.ouvrir.ouverte{background:radial-gradient(circle at 50% 30%,#FFE08B,#D9A72E 55%,#8A6410);color:var(--sur-or);border-color:#FFD34B}
.ouvrir:not(.ouverte):not(.p100){border-color:var(--bord);animation:none}
.ouvrir:not(.ouverte):not(.p100)::before,.ouvrir:not(.ouverte):not(.p100)::after{border-color:rgba(255,174,0,.25);border-top-color:transparent;animation:none}
.ouvrir.p100:not(.ouverte){background:radial-gradient(circle at 50% 30%,#2b4227,#090c08 65%);color:#9CFFAE;border-color:#58FF72}
.ouvrir:active{transform:scale(.94)}
.ouvrir .pct{color:inherit}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes respire{50%{box-shadow:inset 0 0 25px rgba(67,255,80,.3),0 0 40px rgba(67,255,80,.3)}}
.surtitre{color:var(--or)}
.pied{color:#AAA596}
button:not(.sobre):not(.ouvrir):not(.rond):not(.rond-pas):not(.choix){box-shadow:0 6px 18px rgba(0,0,0,.45)}
button.sobre{border-color:var(--bord);color:var(--doux)}
.quatre{gap:12px}
@media (prefers-reduced-motion:reduce){.ouvrir,.ouvrir::before,.ouvrir::after,.feu.vert{animation:none!important}}

/* (076) Le châssis d'abord : grand, en chasse fixe, espacé pour relire lettre par lettre. */
#champVinEntree.vin{font-family:"JetBrains Mono",monospace;font-size:20px;letter-spacing:.14em;text-transform:uppercase}
#champVinEntree.vin.bon{border-color:var(--vert)}
#champVinEntree.vin.faux{border-color:#D2452B}

/* (078) Les dix tests du châssis : une ligne par test, le verdict par l'icône et la couleur, le détail en dessous. */
.tests-vin{list-style:none;padding:0;margin:10px 0 0}
.tests-vin li{display:grid;grid-template-columns:28px 1fr;gap:4px 10px;padding:8px 0;border-bottom:1px solid var(--bord);font-size:14px}
.tests-vin li .ic{width:22px;height:22px;margin:0;grid-row:span 2}
.tests-vin li b{font-weight:800}
.tests-vin li small{display:block;color:var(--doux);font-size:12.5px}
.tests-vin li.ok .ic{color:var(--vert)}
.tests-vin li.faux .ic{color:#D2452B}
.tests-vin li.faux b{color:#D2452B}
.tests-vin li.sans_objet .ic,.tests-vin li.a_venir .ic{color:var(--doux);opacity:.7}
.tests-vin li.attente .ic{opacity:.3}

/* (079) La case « véhicule ancien » : grande, un appui sur toute la ligne. */
label.case{display:flex;align-items:center;gap:12px;padding:10px 0;font-weight:700;cursor:pointer}
label.case input{width:26px;height:26px;margin:0;accent-color:var(--or)}
.tests-vin li.hors_reseau .ic{color:var(--doux);opacity:.5}