/* MaxiVisa : style C1 « Verre sur la ville » (choix de Christian du 24/10/2026), police General Sans comme la vitrine.
   Une ville en photo plein écran, assombrie, derrière chaque page ; les blocs sont des cartes de verre dépoli, le texte
   est blanc. Couleurs de la charte seulement : encre, sarcelle, blanc, brume, gris (le rouge sert aux erreurs).
   Aucune règle en ligne (politique de contenu stricte). */

@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/GeneralSans-400.woff2") format("woff2"); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/GeneralSans-500.woff2") format("woff2"); }
@font-face { font-family: 'General Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/GeneralSans-600.woff2") format("woff2"); }

:root {
  --encre: #1F2A30;
  --action: #0E7C86;   /* sarcelle */
  --blanc: #FFFFFF;
  --brume: #A9B8BF;
  --gris: #7F8A8E;
  --brume-pale: #EEF2F4;
  --texte: rgba(255, 255, 255, .88);
  --doux-texte: rgba(255, 255, 255, .7);
  --verre: rgba(255, 255, 255, .13);
  --verre-fort: rgba(255, 255, 255, .2);
  --verre-bord: rgba(255, 255, 255, .25);
  --filet: rgba(255, 255, 255, .16);
  --erreur: #B91C1C;
  --erreur-texte: #FCA5A5; /* rouge lisible sur fond sombre */
  --police: 'General Sans', system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--encre); }
body { margin: 0; color: var(--texte); font: 400 16px/1.6 var(--police); -webkit-font-smoothing: antialiased; min-height: 100vh; }
h1, h2, h3 { font-family: var(--police); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; color: var(--blanc); text-wrap: balance; }
h1 { font-size: clamp(32px, 7.5vw, 46px); margin: 0 0 16px; }
h2 { font-size: 22px; margin: 34px 0 12px; }
h3 { font-size: 18px; margin: 0 0 8px; }
p { margin: 0 0 12px; }
a { color: var(--blanc); text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }
strong, b { color: var(--blanc); font-weight: 600; }
ul { margin: 0 0 12px; padding-left: 20px; }

/* La ville en plein écran, la même pour une page donnée */
.bandeau { position: fixed; inset: 0; z-index: -1; background: var(--encre) center / cover no-repeat; }
.bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,42,48,.35), rgba(31,42,48,.6) 40%, rgba(31,42,48,.88)); }
.fond-abidjan .bandeau { background-image: url("/img/fonds/abidjan.jpg"); }
.fond-paris .bandeau { background-image: url("/img/fonds/paris.jpg"); }
.fond-lyon .bandeau { background-image: url("/img/fonds/lyon.jpg"); }
.fond-grenoble .bandeau { background-image: url("/img/fonds/grenoble.jpg"); }

/* Verre dépoli : tous les blocs de contenu */
.verre, .dossier, .encadre, .score, .rapport, .controles li, .recu, .simulation, .statut, .resume-reponses,
.question, .lien-partage, .familles li, .pied, .tuile {
  background: var(--verre); border: 1px solid var(--verre-bord);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* Verre dans du verre : pas de second flou (affichage plus sûr et plus léger sur téléphone) */
:is(.dossier, .encadre, .score, .rapport, .resume-reponses, .question) :is(.score, .rapport, .controles li, .familles li, .recu,
.simulation, .statut, .lien-partage, .verre) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.08); }

/* En-tête en pastilles de verre */
.haut { position: relative; z-index: 2; }
.entete { max-width: 720px; margin: 0 auto; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -.02em; color: var(--blanc); text-decoration: none; }
.marque img { display: block; flex: none; }
.actions-entete { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.actions-entete form { margin: 0; }
.pastille { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-height: 0; padding: 0 15px; border-radius: 999px; font: 500 13px/1 var(--police); white-space: nowrap; text-decoration: none; cursor: pointer; width: auto; margin: 0; }
.pastille.verre, button.pastille.verre { background: var(--verre-fort); border: 1px solid rgba(255,255,255,.3); color: var(--blanc); }
.pastille.verre:hover { background: rgba(255,255,255,.3); }

/* La page, posée sur la ville */
main { position: relative; z-index: 1; max-width: 720px; margin: 24px auto 0; padding: 18px 20px 56px; min-height: 60vh; }
.surtitre { display: block; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--doux-texte); margin-bottom: 10px; }

/* Pied : verre sombre */
.pied { position: relative; z-index: 1; background: rgba(31,42,48,.55); border-width: 1px 0 0; color: var(--doux-texte); font-size: 14px; padding: 30px 0 44px; }
.pied .bloc { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.pied .marque { font-size: 18px; display: flex; gap: 8px; margin-bottom: 10px; }
.pied p { margin: 0 0 8px; }

/* Formulaires : champs en verre, texte blanc */
label { display: block; font-weight: 500; font-size: 14px; color: var(--blanc); margin: 18px 0 7px; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], select, textarea {
  width: 100%; font: 400 17px var(--police); color: var(--blanc); background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.22); border-radius: 16px; padding: 13px 16px; outline: none; color-scheme: dark; }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.5); }
input:focus, select:focus, textarea:focus { border-color: var(--blanc); background: rgba(255,255,255,.18); }
select option { color: var(--encre); background: var(--blanc); }
input[type=file] { font: 400 15px var(--police); width: 100%; padding: 14px; color: var(--blanc); border: 1.5px dashed rgba(255,255,255,.4); border-radius: 18px; background: var(--verre); }
.ligne { display: flex; gap: 8px; }
.ligne select { width: 48%; }
.case { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 15px; color: var(--texte); margin-top: 18px; }
.case input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--action); }
fieldset { border: 0; padding: 0; margin: 12px 0; }
legend { font-weight: 500; color: var(--blanc); margin-bottom: 10px; padding: 0; }

/* Boutons : principal blanc, secondaire en contour blanc */
button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 22px;
  padding: 0 26px; font: 600 16px/1.2 var(--police); text-decoration: none; cursor: pointer; border-radius: 999px;
  background: var(--blanc); color: var(--encre); border: 1.5px solid var(--blanc); transition: background .2s, color .2s; }
button:hover, .bouton:hover { background: var(--brume-pale); }
button:focus-visible, .bouton:focus-visible, .pastille:focus-visible, a:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
button.secondaire, .bouton.secondaire { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.7); }
button.secondaire:hover, .bouton.secondaire:hover { background: var(--blanc); color: var(--encre); }
button.danger { background: var(--erreur); border-color: var(--erreur); color: var(--blanc); }
button.lien { width: auto; min-height: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; color: var(--blanc); font-weight: 500; text-decoration: underline; }
button.lien:hover { background: none; }
.bouton + .bouton { margin-top: 10px; }
.ligne button { margin-top: 12px; }

/* Messages et blocs */
.aide { color: var(--doux-texte); font-size: 14px; }
.statut { padding: 14px 18px; border-radius: 18px; color: var(--blanc); margin-bottom: 22px; border-left: 4px solid var(--action); }
.erreur { color: var(--erreur-texte); font-weight: 500; font-size: 15px; margin: 6px 0 0; }
.simulation { padding: 14px 18px; border-style: dashed; border-radius: 18px; margin-bottom: 20px; font-size: 15px; }
.dossier { border-radius: 24px; padding: 18px 20px; margin-bottom: 12px; }
.dossier h2 { font-size: 18px; margin: 0 0 6px; }
.chiffre { font-size: 64px; font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--blanc); }
.encadre { border-radius: 26px; padding: 22px; margin: 22px 0; }
.sans-cadre { border: 0; padding: 0; margin: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.espace-haut { margin-top: 24px; }
.intertitre { margin: 10px 0 4px; }
.dossier .aide { margin-bottom: 8px; }
.dossier > :last-child, .encadre > :last-child { margin-bottom: 0; }

/* Dépôt des pièces */
.etiquette { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--blanc); background: var(--action); vertical-align: middle; }
.etiquette.a-revoir { background: var(--erreur); }
.deposees { list-style: none; padding: 0; margin: 8px 0; border-top: 1px solid var(--filet); }
.deposees li { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 15px; }
.deposees li span { flex: 1 1 100%; }
.retrait { display: inline; }
.choix-fichier { display: flex; gap: 8px; flex-wrap: wrap; }
.choix-fichier .bouton { flex: 1 1 140px; margin-top: 12px; position: relative; text-align: center; }
.js .choix-fichier input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.js .sans-js { display: none; }
progress.progression { width: 100%; height: 8px; margin-top: 10px; accent-color: var(--action); }
.editeur { width: 100%; max-width: 600px; max-height: 100vh; border: 0; border-radius: 26px; padding: 20px; background: var(--encre); color: var(--texte); }
.editeur::backdrop { background: rgba(31, 42, 48, .75); }
.editeur h2 { margin-top: 0; }
.cadre-photo { background: rgba(255,255,255,.08); border-radius: 18px; text-align: center; margin: 10px 0; overflow: hidden; }
.cadre-photo canvas { max-width: 100%; max-height: 55vh; touch-action: none; }
.outils { display: flex; flex-wrap: wrap; gap: 8px; }
.outils button { flex: 1 1 150px; margin-top: 0; }
.outils button[aria-pressed=true] { background: var(--blanc); color: var(--encre); }

/* Vérifications du dossier : cartes de verre, état en pastille */
.controles { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.controles li { padding: 14px 16px; border-radius: 18px; font-size: 15px; margin: 0; }
.controles .etat { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin: 0 8px 6px 0; background: var(--verre-fort); color: var(--blanc); }
.controle-a_corriger { background: rgba(185, 28, 28, .2) !important; border-color: rgba(252, 165, 165, .35) !important; }
.controle-a_corriger .etat { background: var(--erreur); }
.controle-conforme .etat { background: var(--action); }

/* Score : anneau, tuiles des familles, corrections numérotées */
.score { border-radius: 28px; padding: 20px; margin: 18px 0; }
.score-tete { display: flex; align-items: center; gap: 18px; }
.score-tete > div { min-width: 0; }
.anneau { position: relative; width: 118px; height: 118px; flex: none; }
.anneau svg { width: 100%; height: 100%; display: block; }
.anneau .fond-anneau { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 12; }
.anneau .arc { fill: none; stroke: var(--blanc); stroke-width: 12; stroke-linecap: round; }
.anneau .valeur { position: absolute; inset: 13px; border-radius: 50%; background: rgba(31,42,48,.55); display: grid; place-content: center; text-align: center; color: var(--blanc); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.anneau .valeur small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--doux-texte); margin-top: 4px; }
.score-niveau { font-weight: 600; color: var(--blanc); margin: 0 0 4px; }
.score-tete p { font-size: 14px; }
.tag { display: inline-block; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; background: var(--action); color: var(--blanc); }
.familles { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.familles li { display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 20px; padding: 12px 6px; font-size: 11px; color: var(--doux-texte); }
.familles li span:last-child { order: -1; font-size: 19px; font-weight: 600; color: var(--blanc); letter-spacing: -.02em; }
.corrections { list-style: none; padding: 0; margin: 0 0 12px; counter-reset: correction; font-size: 14px; }
.corrections li { counter-increment: correction; position: relative; padding: 10px 0 10px 36px; border-top: 1px solid var(--filet); }
.corrections li:first-child { border-top: 0; }
.corrections li::before { content: counter(correction); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: 8px; background: var(--action); color: var(--blanc); font-weight: 600; font-size: 12px; display: grid; place-items: center; }

/* Rapport rédigé */
.rapport { border-radius: 28px; padding: 22px; margin: 18px 0; }
.explication p, .explication li { font-size: 16px; }
.explication ul { padding-left: 20px; }
.lien-partage { word-break: break-all; font-family: ui-monospace, monospace; font-size: 14px; border-radius: 14px; padding: 10px 12px; }
.liste-simple { padding-left: 20px; font-size: 15px; }
.liste-simple li { margin-bottom: 6px; }
.conditions li { margin-bottom: 10px; }
.recu { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 15px; border-radius: 22px; padding: 18px 20px; }
.recu dt { color: var(--doux-texte); }
.recu dd { margin: 0; color: var(--blanc); }

/* Score indicatif : chaque question en carte, réponses en pastilles */
.question { border-radius: 22px; padding: 16px 16px 14px; margin: 12px 0; }
/* Légende flottante : la question reste dans sa carte, pas posée sur la bordure */
.question legend { float: left; width: 100%; margin-bottom: 12px; font-size: 16px; line-height: 1.35; }
.question legend + * { clear: both; }
.choix-reponse { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-reponse label { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 10px 13px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; font-weight: 500; font-size: 15px; cursor: pointer; color: var(--blanc); }
.choix-reponse label:has(input:checked) { background: var(--blanc); border-color: var(--blanc); color: var(--encre); }
.choix-reponse input { accent-color: var(--action); margin: 0; }
.ligne-unite { display: flex; align-items: center; gap: 10px; }
.ligne-unite input { width: 60%; }
.resume-reponses { list-style: none; padding: 4px 18px; margin: 18px 0; border-radius: 22px; }
.resume-reponses li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: 15px; }
.resume-reponses li:last-child { border-bottom: 0; }
.resume-reponses li span { flex: 1 1 260px; }

/* Écrans en cartes (demande de Christian du 24/10/2026) : pas de longue liste à faire défiler sur le téléphone. Une page
   montre un résumé et des tuiles ; chaque tuile ouvre sa vue (#ancre). Sans :has(), tout s'affiche comme avant. */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0; }
.tuile { display: flex; flex-direction: column; gap: 4px; min-height: 124px; padding: 16px; border-radius: 24px; text-decoration: none;
  color: var(--blanc); position: relative; }
.tuile::after { content: ""; position: absolute; top: 18px; right: 16px; width: 8px; height: 8px; border: solid rgba(255,255,255,.7);
  border-width: 2px 2px 0 0; transform: rotate(45deg); }
.tuile:hover { background: var(--verre-fort); }
.tuile-titre { font-size: 13px; font-weight: 500; color: var(--doux-texte); padding-right: 18px; }
.tuile-chiffre { margin-top: auto; font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.tuile-chiffre small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--doux-texte); }
.tuile-chiffre.tuile-mot { font-size: 22px; letter-spacing: -.02em; }
.tuile-aide { font-size: 13px; color: var(--doux-texte); }
.retour { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 4px; }
.retour::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.vue > h2 { margin-top: 8px; }
.vue { scroll-margin-top: 12px; }
@supports selector(:has(a)) {
  .vue { display: none; }
  .vue:target { display: block; }
  main:has(.vue:target) .sommaire { display: none; }
}

/* Pièces : tuiles repliées, une seule ouverte à la fois (attribut name des details) */
.grille-pieces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.piece { border-radius: 20px; background: var(--verre); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.piece[open] { grid-column: 1 / -1; background: var(--verre-fort); }
.piece summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  min-height: 84px; padding: 12px 14px; border-radius: 20px; }
.piece summary::-webkit-details-marker { display: none; }
.piece-nom { font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--blanc); overflow-wrap: anywhere; }
.piece-etat { font-size: 12px; color: var(--doux-texte); }
.piece-etat .etiquette { margin-left: 0; }
.piece[open] summary { min-height: 0; flex-direction: row; align-items: baseline; }
.piece[open] .piece-nom { font-size: 17px; font-weight: 600; flex: 1; }
.piece-corps { padding: 0 16px 16px; }

/* Repli : ce qui ne demande pas d'action (points conformes, code de réduction) */
.repli, .code-promo { margin: 14px 0 0; }
.repli > summary, .code-promo > summary { cursor: pointer; font-weight: 500; font-size: 15px; color: var(--blanc); padding: 6px 0; }
.code-promo > summary { font-size: 14px; color: var(--doux-texte); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.code-promo > summary::-webkit-details-marker { display: none; }
.code-promo label { margin-top: 8px; }

/* Score indicatif : une famille de questions par écran, avec sa progression */
.etape-tete { display: flex; justify-content: flex-end; margin: 8px 0 4px; }
.etape h2 { margin: 18px 0 4px; }
.etape-num { font-size: 13px; color: var(--doux-texte); white-space: nowrap; }
progress.progression-etapes { display: block; width: 100%; height: 4px; margin: 0 0 6px; accent-color: var(--blanc); }
.navigation-etapes { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.navigation-etapes .bouton, .navigation-etapes button { flex: 1; margin-top: 0; }
.navigation-etapes .bouton.secondaire { flex: 0 0 auto; width: auto; }
@supports selector(:has(a)) {
  .etapes .etape { display: none; }
  .etapes .etape:target, .etapes:not(:has(.etape:target)) .etape:first-child { display: block; }
}

/* Résumé du score indicatif : une carte repliée par étape */
.resume-famille { border-radius: 20px; margin: 8px 0; background: var(--verre); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.resume-famille > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 15px 18px; font-weight: 500; color: var(--blanc); }
.resume-famille > summary::-webkit-details-marker { display: none; }
.resume-famille .resume-reponses { margin: 0 8px; padding-top: 0; padding-bottom: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.retour-modifier { display: inline-block; margin: 6px 18px 14px; font-size: 14px; font-weight: 500; }

/* Champ piège des formulaires publics : invisible pour une personne */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Téléphone : photos allégées et cadrées en hauteur (3G) */
@media (max-width: 640px) {
  .fond-abidjan .bandeau { background-image: url("/img/fonds/abidjan-tel.jpg"); }
  .fond-paris .bandeau { background-image: url("/img/fonds/paris-tel.jpg"); }
  .fond-lyon .bandeau { background-image: url("/img/fonds/lyon-tel.jpg"); }
  .fond-grenoble .bandeau { background-image: url("/img/fonds/grenoble-tel.jpg"); }
  .entete { padding: 14px 16px; }
  main { margin-top: 10px; padding: 14px 16px 44px; }
  .pied .bloc { padding: 0 16px; }
  .chiffre { font-size: 54px; }
  .anneau { width: 108px; height: 108px; }
  .anneau .valeur { font-size: 36px; }
  .familles li span:last-child { font-size: 16px; }
  .tuile { min-height: 112px; padding: 14px; }
  .tuile-chiffre { font-size: 30px; }
}