/* ============================================================================
   VGM Tour — style.css
   Une seule feuille, servie depuis l'app. Aucune ressource externe : la CSP du
   §4.3 d'ARCHITECTURE (`default-src 'none'`, `font-src 'self'`, `style-src 'self'`)
   refuse tout le reste, et au sous-sol il n'y a pas de réseau.

   Cinq parties, dans cet ordre :
   1. LES JETONS — recopiés de `maquettes/jetons-v2.css` (SIGNATURE v2). Un seul thème,
      clair. Une couleur = un rôle. On n'écrit jamais un hex dans un composant.
   2. LA COQUILLE ET LES ÉCRANS — recopiés de la maquette approuvée `tour-v0.17.html`.
   3. L'ÉLÉMENT, SA FICHE, LA LISTE À COCHER — la suite de la même maquette.
   4. CE QUE L'APP AJOUTE À LA MAQUETTE — les mises en page que la CSP a fait passer
      d'un attribut `style=` à une classe.
   5. L'ORDINATEUR — les deux colonnes au-delà de 900 px, le clavier, le survol
      (ARCHITECTURE §6.4). Rien de cette partie ne s'applique au téléphone.

   Téléphone : une colonne, rien ne glisse horizontalement, cibles 48 px, champs 16 px.
   Aucun attribut `style=` n'est écrit dans le HTML : la CSP les refuserait. Ce qui varie
   au rendu passe par une classe ou par une propriété personnalisée posée en CSSOM.
   ============================================================================ */

/* ============================================================================
   Évaluation VGM — jetons-v2.css (2026-09-19)
   Les jetons de la signature v2 : « on fait le tour, la maison se construit sous nos yeux,
   tout part chez VGM ». Voir docs/SIGNATURE_v2.md.

   UN SEUL THÈME, CLAIR. Aucun prefers-color-scheme, aucun data-theme, aucune ombre de
   remplacement : le mode sombre est retiré (Samuel, 19 sept. 2026).
   Contenu : variables seulement + quatre utilitaires. AUCUN composant : la maquette les construit.

   Règles d'emploi :
   - Une couleur = un rôle. On n'écrit jamais un hex dans un composant.
   - L'orange est UNIQUE et il est un BLOC : le bouton « Ensuite » (ou « Prendre la photo »,
     « Envoyer chez VGM »), un par écran, texte --action-encre dessus. Jamais de blanc sur
     l'orange (3,17:1, échec AA). Jamais d'orange en texte courant.
   - La barre de progression est ENCRE, pas orange.
   - L'anneau choisi est un TRAIT (3 px) autour d'une image, jamais un fond.
   - L'agent est --agent (ardoise), jamais --danger (rouge : Supprimer, erreur, côté du
     croquis qui ne ferme pas).
   - Pas de jeton vert, pas de jaune, pas de dégradé de marque.
   - Contrastes vérifiés le 19 sept. 2026 (WCAG 2.1) : voir le tableau de SIGNATURE_v2 §3.
   ============================================================================ */

/* ---------- Police ----------
   PRODUCTION : Outfit est HÉBERGÉE ici, dans `statique/polices/` (woff2, licence SIL OFL,
   texte complet dans `polices/OFL.txt`). Aucune ressource externe : la CSP du §4.3
   (`font-src 'self'`) refuserait Google Fonts, et au sous-sol il n'y a pas de réseau.
   Le fichier servi par Google pour les quatre graisses est le MÊME : Outfit est une police
   variable. On déclare donc une seule face par sous-ensemble, avec une plage de graisses. */
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('polices/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('polices/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  color-scheme: light; /* le seul */

  /* ---------- 1. Palette ---------- */

  /* Neutres — blanc pour la photo, chaud pour l'enfoncé */
  --fond:        #ffffff;   /* fond de page : blanc pur, les photos y respirent */
  --surface:     #ffffff;   /* cartes, tuiles d'image, pied fixé (= le fond : pas d'élévation par la couleur) */
  --surface-2:   #f6f4f1;   /* enfoncé, à peine chaud : bouton creux pressé, tuile de fait, ligne de confirmation, Ensuite inactif */
  --encre:       #161616;   /* le gris foncé VGM : titres, mots des choix, barre de progression — 18,1:1 sur --fond */
  --encre-2:     #3f3f3d;   /* la voix de l'écran (sous-question), paragraphes — 10,6:1 */
  --gris:        #6b6b68;   /* étiquettes, légendes, « Retour » — 5,35:1 sur --fond, 4,87:1 sur --surface-2 : AA partout */
  --gris-clair:  #a5a4a0;   /* texte fantôme des champs SEULEMENT (2,5:1), jamais une information */
  --trait:       #e6e4df;   /* hairline, rail de la barre de progression, anneau « pas commencé » du plan */
  --trait-fort:  #cbc9c4;   /* bord d'un champ au repos, d'un bouton creux */

  /* L'action — l'orange VGM (#f1651c, --vgm-orange de leur site). UN bloc par écran. */
  --action:        #f1651c; /* fond du bouton unique ; anneau de 3 px autour d'une image choisie (3,17:1 sur blanc : AA composant) */
  --action-encre:  #161616; /* texte SUR --action : 5,7:1. Jamais #fff. */
  --action-presse: #d9560f; /* état pressé, 120 ms (encre dessus 4,56:1) */
  --action-texte:  #bf4a0e; /* l'orange quand il est un MOT : 5,0:1 sur --fond, 4,55:1 sur --surface-2. Presque jamais (un lien de courriel). */
  --action-doux:   #fff1ea; /* fond de la ligne en cours dans le plan, halo du focus (gris dessus 4,84:1) */
  --action-cadre:  #f8c4a6; /* bord doux, focus secondaire */
  --action-ombre:  rgba(241,101,28,.22); /* anneau du focus visible au clavier */

  /* L'agent — ardoise. Il propose, il n'ordonne pas. */
  --agent:        #2b5d7d;  /* texte de sa ligne, bord gauche, anneau pointillé d'une tuile pré-choisie — 7,1:1 sur --fond */
  --agent-encre:  #ffffff;
  --agent-doux:   #eaf2f7;  /* fond de la ligne de l'agent et de la pastille « Proposé » (ardoise dessus 6,25:1) */
  --agent-cadre:  #b9d0e2;

  /* Pas tranché, pas commencé — le pointillé (un TRAIT, jamais un fond) */
  --pointille:       #8a8a86;  /* 3,47:1 sur --fond : lisible comme composant */
  --pointille-texte: #6b6b68;  /* = --gris */

  /* Danger — le rouge VGM (--vgm-red). Supprimer, erreur technique, côté du croquis qui ne ferme pas. Jamais l'agent. */
  --danger:        #a50000; /* 8,1:1 sur --fond */
  --danger-encre:  #ffffff;
  --danger-doux:   #fdeceb; /* rouge dessus 7,1:1 */
  --danger-cadre:  #e8b4ae;

  /* Photo : voile sous un mot blanc (héros de C'est envoyé) — blanc dessus au moins 4,7:1 au pire pixel */
  --voile-photo:   linear-gradient(transparent 35%, rgba(0,0,0,.55));
  --voile-fenetre: rgba(22,22,22,.45); /* derrière une fenêtre ponctuelle (Supprimer) */

  /* Ombres — une seule famille, discrète ; l'élévation vient surtout de la hairline */
  --ombre-repos:   0 1px 3px rgba(0,0,0,.06);
  --ombre-survol:  0 4px 14px rgba(0,0,0,.09);    /* ordinateur seulement */
  --ombre-fenetre: 0 14px 40px rgba(0,0,0,.16);
  --ombre-pied:    0 -1px 0 var(--trait);          /* le pied fixé n'a qu'une hairline au-dessus */

  /* ---------- 2. Typographie — Outfit, une seule famille, hiérarchie par la graisse ---------- */
  --police:          'Outfit', -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
  --police-chiffres: 'Outfit', -apple-system, system-ui, sans-serif; /* Outfit expose tnum (mesuré passe 2) */

  /* Sept tailles, pas une de plus */
  --t-question: 28px;  --g-question: 700;  --l-question: 1.15;  --e-question: -.01em; /* une question par écran, deux lignes max */
  --t-question-court: 26px;   /* écrans de moins de 700 px de haut (iPhone SE) */
  --t-question-ordi: 32px;
  --t-chiffre: 22px;   --g-chiffre: 700;   /* cote dans un champ, fait dans une tuile, titre de l'écran-plan — tabular-nums */
  --t-corps: 17px;     --g-corps: 400;     --l-corps: 1.45;  /* la voix de l'écran, en --encre-2 */
  --t-mot: 16px;       --g-mot: 600;       /* le mot sous une image, le mot d'un bouton, un champ (MINIMUM iPhone) */
  --t-champ: 16px;
  --t-legende: 13px;   /* faits gris du plan, cotes du croquis, liens sous une photo */
  --t-etiquette: 12px; --g-etiquette: 700; --e-etiquette: .06em; /* capitales espacées : nom du chapitre en tête, mot d'une tuile de fait */
  --t-pastille: 11px;  --g-pastille: 700;  --e-pastille: .05em;  /* « Proposé » au coin d'une image */
  --g-agent: 500;      /* la ligne de l'agent, 16 px ardoise */

  /* ---------- 3. Espacement — base 4, marge 24 ---------- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;  --e-4: 16px;  --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
  --marge-page: 24px;        /* téléphone : la respiration qui manquait (v0.2 : 16) */
  --marge-page-ordi: 40px;
  --largeur-etape: 560px;    /* l'écran-étape à l'ordinateur : une colonne centrée, pas plus large */
  --largeur-page: 1180px;

  /* Rythme de l'écran-étape (voir SIGNATURE_v2 §5.1) */
  --h-tete: 56px;            /* « ‹ » · CHAPITRE · Plan */
  --h-barre: 3px;            /* la barre de progression, segmentée par chapitre */
  --barre-ecart: 4px;        /* entre deux segments */
  --barre-rail: var(--trait);
  --barre-plein: var(--encre);
  --question-haut: 32px;     /* de la barre à la question */
  --voix-haut: 8px;          /* de la question à la voix de l'écran */
  --geste-haut: 32px;        /* de la voix au geste */
  --h-pied: 84px;            /* + --sur-bas ; « Retour » à gauche, « Ensuite » à droite */
  --h-respiration: 100vh;    /* l'écran de respiration ne défile pas */

  /* ---------- 4. Cibles tactiles — 48 partout, une main ---------- */
  --cible: 48px;             /* minimum absolu : lien, bouton creux, ligne d'étape, tuile */
  --cible-champ: 52px;
  --cible-ensuite: 52px;     /* le bouton orange du pied ; largeur minimale --l-ensuite */
  --l-ensuite: 160px;
  --cible-chapitre: 56px;    /* une ligne de chapitre dans le plan */
  --cible-petite: 40px;      /* icône seule (✕ d'une fenêtre) — seule exception, jamais pour un mot */

  /* ---------- 5. Le choix par l'image ---------- */
  --tuile-gouttiere: 12px;   /* deux par rangée : (390 - 48 - 12) / 2 = 165 */
  --tuile-image: 1 / 1;      /* aspect-ratio de l'image d'exemple */
  --tuile-mot-haut: 8px;     /* de l'image au mot */
  --tuile-max: 6;            /* au-delà : « Voir les autres » déplie dans la même grille */
  --r-tuile: 12px;
  --exemple-photo: 4 / 3;    /* l'image d'exemple d'un écran-photo, pleine largeur */
  --r-exemple: 16px;
  --vignette: 96px;          /* photos supplémentaires d'une place, vignettes du plan et de C'est envoyé */
  --pastille-propose: 24px;  /* « Proposé » au coin haut gauche d'une image, 8 px du bord */
  --image-source: 640px;     /* le fichier : carré 640 × 640, WebP au plus 60 ko, coin appliqué par le CSS */

  /* ---------- 6. Le cercle au crayon — DEUX emplois : l'image choisie, le chapitre fait ---------- */
  --anneau-choisi: 3px;              /* autour d'une image choisie (carré arrondi --r-tuile + 3) */
  --anneau-propose: 2px;             /* pointillé ardoise autour d'une image pré-choisie */
  --anneau-plan: 24px;               /* en tête d'une ligne de chapitre : fermé orange 2,5 px / pointillé / --trait */
  --anneau-plan-trait: 2.5px;
  --anneau-etape: 16px;              /* devant une étape dépliée dans le plan, 1,5 px */
  --anneau-respiration: 48px;        /* autour du nom du chapitre sur l'écran de respiration */
  --anneau-depart: -60deg;           /* le tracé commence à 10 h */
  --anneau-depassement: 3px;         /* il croise son propre trait à la fermeture — à 24 px et plus SEULEMENT (à 16-20 px : cercle net) */
  --anneau-duree: 220ms;             /* il se dessine ; il disparaît sans animation ; il ne rejoue jamais */
  --pointille-motif: 3px 4px;        /* stroke-dasharray des anneaux et cadres pointillés */
  --bord-pointille: 1.5px dashed var(--pointille);

  /* ---------- 7. Le croquis (périmètre par les mesures saisies) ---------- */
  --croquis-haut: 150px;             /* collant en tête du corps pendant les mesures ; 200 px sur C'est envoyé */
  --croquis-haut-fin: 200px;
  --croquis-grille: var(--trait);    /* grille de 1 pi, à 40 % */
  --croquis-grille-op: .40;
  --croquis-cote: var(--encre);      /* côtés fermés : 2 px, bouts ronds */
  --croquis-cote-trait: 2px;
  --croquis-encours: var(--action);  /* le côté en cours : orange 2,5 px */
  --croquis-encours-trait: 2.5px;
  --croquis-annexe-trait: 1.5px;     /* garage accolé, étage en fantôme */
  --croquis-interieur: var(--surface-2); /* rempli seulement quand le polygone ferme */
  --croquis-ecart: var(--danger);    /* le dernier côté qui ne ferme pas : pointillé rouge + « manque 2' » */
  --croquis-trace-duree: 600ms;      /* le tracé se dessine une fois, sur C'est envoyé */

  /* ---------- 8. Rayons ---------- */
  --r-fenetre: 20px;
  --r-carte: 16px;
  --r-bouton: 12px;          /* Ensuite, boutons creux, champs : une seule forme de bouton */
  --r-champ: 12px;
  --r-tuile-fait: 12px;
  --r-pilule: 999px;         /* pastilles, cotes du croquis */

  /* Bords */
  --bord: 1px solid var(--trait);
  --bord-champ: 1.5px solid var(--trait-fort);
  --bord-creux: 1.5px solid var(--trait-fort);   /* « Je ne vois pas », « Autre », « Voir les autres », « C'est ça pour tout » */
  --bord-focus: 2px solid var(--action);
  --anneau-focus: 0 0 0 4px var(--action-ombre);

  /* Icônes — un seul style : trait 1,8, bouts ronds, sans remplissage. Le toit VGM (pignon, fenêtre à
     quatre carreaux, trait du pignon) est la seule icône de marque : écran d'entrée 48 px, C'est envoyé 24 px. */
  --ico: 24px;  --ico-trait: 1.8;  --ico-petite: 18px;  --ico-toit-entree: 48px;

  /* ---------- 9. Mouvement — trois durées, une courbe ---------- */
  --vite: 120ms;             /* état pressé (scale .98 + --surface-2), fondu d'un anneau qui part */
  --sortie: 160ms;           /* le corps sort (-16 px, fondu) */
  --entree: 240ms;           /* le corps entre (+24 px depuis la droite, fondu) ; dépli d'une ligne */
  --barre: 320ms;            /* la barre de progression avance */
  --normal: 220ms;           /* fondu de la photo dans son cadre, anneau qui se dessine */
  --cascade: 60ms;           /* écart entre deux tuiles de faits sur C'est envoyé */
  --courbe: cubic-bezier(.2,.9,.3,1);
  --glisse-sortie: -16px;
  --glisse-entree: 24px;
  --presse: .98;

  /* ---------- 10. Empilement ---------- */
  --z-pied: 20;              /* le pied fixé : la seule chose collée pendant le tour */
  --z-tete: 20;
  --z-croquis-collant: 10;
  --z-fenetre: 95;  --z-menu: 100;  --z-toast: 110; /* pas de toast dans le tour ; le jeton existe pour les erreurs techniques */

  /* ---------- 11. Sécurité iPhone ---------- */
  --sur-haut: env(safe-area-inset-top, 0px);
  --sur-bas:  env(safe-area-inset-bottom, 0px);
}

/* Petit écran (iPhone SE, 667 px de haut) : la question descend d'un cran, le geste se rapproche */
@media (max-height: 700px){
  :root{ --t-question: var(--t-question-court); --question-haut: 24px; --geste-haut: 24px; }
}

/* Ordinateur : la question grandit, l'écran-étape reste une colonne */
@media (min-width: 900px){
  :root{ --t-question: var(--t-question-ordi); --marge-page: var(--marge-page-ordi); }
}

/* Mouvement réduit : tout d'un coup — l'anneau apparaît, le corps ne glisse pas, le croquis est déjà tracé */
@media (prefers-reduced-motion: reduce){
  :root{ --vite:0ms; --sortie:0ms; --entree:0ms; --barre:0ms; --normal:0ms; --cascade:0ms;
         --anneau-duree:0ms; --croquis-trace-duree:0ms; --glisse-sortie:0; --glisse-entree:0; --presse:1; }
}

/* ---------- 12. Quatre utilitaires (et pas un de plus) ---------- */

/* Chiffres qui s'alignent : les nombres saisis dans une fiche */
.u-tabulaire{ font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size: var(--t-chiffre); font-weight: var(--g-chiffre); }

/* Zone touchable garantie, même si le visuel est plus petit (« ‹ », « Plan », un lien sous une photo) */
.u-cible{ min-height: var(--cible); min-width: var(--cible); display: inline-flex; align-items: center; justify-content: center; }

/* « Pas tranché » : cadre pointillé, texte gris. Une tuile proposée sans image, une étape entamée. */
.u-pointille{ border: var(--bord-pointille); color: var(--pointille-texte); background: transparent; }

/* Caché aux yeux, présent pour la lecture d'écran (le mot derrière une icône seule, l'état d'une barre) */
.u-cache{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   2. LA COQUILLE ET LES ÉCRANS (maquette tour-v0.17, en-tête de la page)
   ========================================================================== */
/* ============================================================================
   tour-v0.9 — la maquette du tour de la maison en étapes (PROCESSUS §2, SIGNATURE_v2 §5).
   Un seul thème, clair. Aucun hex ici : tout vient de jetons-v2.css, sauf le bureau
   autour du téléphone (hors app). Une colonne, rien ne glisse, cibles 48, champs 16.
   ============================================================================ */
:root{ --bord-creux:1.5px solid var(--pointille); --bord-champ:1.5px solid var(--pointille); }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--fond); font-family:var(--police); color:var(--encre); -webkit-font-smoothing:antialiased; min-height:100dvh; overflow-x:hidden; }
button,input{ font-family:inherit; font-size:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; text-align:inherit; }
img{ display:block; max-width:100%; }


/* ---------- Le téléphone ---------- */
/* L'app tient tout l'écran du téléphone : une colonne, rien ne glisse horizontalement.
   À l'ordinateur, la colonne se borne à 430 px et se centre — le même écran, pas un autre. */
#tel{ position:relative; width:100%; max-width:430px; height:100dvh; margin:0 auto; background:var(--fond); overflow:hidden; }

/* Tête 56 + barre 3 */
/* v0.17 : « TOUR » est accolé au logo — une seule marque, « Évaluation VGM Tour », et non
   deux mots côte à côte qu'on lisait comme une phrase (« VGM TOUR IL MANQUE »).
   Le nom de l'écran reste au centre, en petites capitales grises : il ne peut plus se
   confondre avec la marque, qui est en encre et à la taille du logo. */
.tete{ position:absolute; top:0; left:0; right:0; z-index:var(--z-tete); height:calc(var(--h-tete) + var(--sur-haut)); padding-top:var(--sur-haut); background:var(--fond); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-left:var(--marge-page); padding-right:12px; }
.tete .chapitre{ font-size:var(--t-etiquette); font-weight:var(--g-etiquette); letter-spacing:var(--e-etiquette); text-transform:uppercase; color:var(--gris); text-align:center; line-height:1.2; }
.tete .chapitre small{ display:block; font-size:var(--t-legende); font-weight:400; letter-spacing:0; text-transform:none; color:var(--gris); }
.tete-maison{ width:40px; height:40px; display:block; }
.tete-maison svg{ width:40px; height:40px; }
.dessin-crayon path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.dessin-crayon .fantome{ stroke:var(--trait); stroke-width:2px; }
.dessin-crayon .encre{ stroke:var(--encre); stroke-width:2.4px; }
.dessin-crayon.petit .encre{ stroke-width:4px; }
.dessin-crayon.petit .fantome{ stroke-width:3px; }
.dessin-crayon.moyen{ width:96px; height:96px; }
.dessin-crayon.grand{ width:70%; height:80%; }
.tete .logo-plan, .tete .tete-toit{ display:inline-flex; align-items:center; justify-self:start; }
.tete .plan-lien{ justify-self:end; min-height:var(--cible); display:inline-flex; align-items:center; padding:0 12px; font-size:var(--t-mot); font-weight:var(--g-mot); color:var(--gris); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; border-radius:var(--r-bouton); }
.tete .plan-lien:active{ background:var(--surface-2); }
.barre{ position:absolute; top:calc(var(--h-tete) + var(--sur-haut)); left:var(--marge-page); right:var(--marge-page); height:var(--h-barre); display:flex; gap:2px; z-index:var(--z-tete); }
.barre .seg{ flex:1; background:var(--barre-rail); border-radius:2px; overflow:hidden; }
.barre .seg i{ display:block; height:100%; width:0; background:var(--barre-plein); transition:width var(--barre) var(--courbe); }
.barre .seg{ min-width:6px; }
.tete.sans-barre + .barre{ display:none; }

/* Corps */
#corps{ scrollbar-width:none; position:absolute; top:calc(var(--h-tete) + var(--sur-haut)); bottom:calc(var(--h-pied) + var(--sur-bas)); left:0; right:0; overflow-y:auto; overflow-x:hidden; padding:24px var(--marge-page) 0; -webkit-overflow-scrolling:touch; }
#corps.plein{ top:0; padding-top:0; }
#corps.plein > .ecran > .marque, #corps.plein > .ecran > .question:first-child, #corps.plein > .ecran > .respiration{ padding-top:0; }
#corps.plein > .ecran > .question:first-child, #corps.plein > .ecran > .respiration > .question:first-child{ margin-top:32px; }
#corps::-webkit-scrollbar{ display:none; }
#corps.sans-pied{ bottom:0; }
#corps.sort{ animation:sortie var(--sortie) ease-in forwards; }
#corps.entre{ animation:entree var(--entree) var(--courbe); }
#corps.sort.inverse{ animation-name:sortie-inv; }
#corps.entre.inverse{ animation-name:entree-inv; }
@keyframes sortie{ to{ opacity:0; transform:translateX(var(--glisse-sortie)); } }
@keyframes entree{ from{ opacity:0; transform:translateX(var(--glisse-entree)); } }
@keyframes sortie-inv{ to{ opacity:0; transform:translateX(calc(-1 * var(--glisse-sortie))); } }
@keyframes entree-inv{ from{ opacity:0; transform:translateX(calc(-1 * var(--glisse-entree))); } }

.question{ font-size:var(--t-question); font-weight:var(--g-question); line-height:var(--l-question); letter-spacing:var(--e-question); text-wrap:balance; margin:0; }
.voix{ font-size:var(--t-corps); font-weight:var(--g-corps); line-height:var(--l-corps); color:var(--encre-2); margin:var(--voix-haut) 0 0; }
.geste{ margin-top:24px; }
.geste > * + *{ margin-top:12px; }
.etiquette{ font-size:var(--t-etiquette); font-weight:var(--g-etiquette); letter-spacing:var(--e-etiquette); text-transform:uppercase; color:var(--gris); margin:0 0 10px; }
.legende{ font-size:var(--t-legende); color:var(--gris); line-height:1.4; }

/* Pied fixé 84 */
.pied{ position:absolute; bottom:0; left:0; right:0; z-index:var(--z-pied); height:calc(var(--h-pied) + var(--sur-bas)); padding:0 var(--marge-page) var(--sur-bas); background:var(--fond); box-shadow:var(--ombre-pied); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pied .liens{ display:flex; gap:4px; }
.lien{ min-height:var(--cible); min-width:var(--cible); justify-content:center; display:inline-flex; align-items:center; padding:0 8px; margin-left:-8px; font-size:var(--t-mot); font-weight:var(--g-mot); color:var(--gris); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; border-radius:var(--r-bouton); }
.lien + .lien{ margin-left:4px; }
.lien:active{ background:var(--surface-2); }
.b-ensuite{ height:var(--cible-ensuite); min-width:var(--l-ensuite); padding:0 24px; border-radius:var(--r-bouton); background:var(--action); color:var(--action-encre); font-size:var(--t-mot); font-weight:var(--g-mot); display:inline-flex; align-items:center; justify-content:center; transition:transform var(--vite), background var(--vite); white-space:nowrap; }
.b-ensuite:active{ background:var(--action-presse); transform:scale(var(--presse)); }
.b-ensuite.inactif{ background:var(--surface-2); color:var(--gris); pointer-events:none; }
.b-ensuite.large{ width:100%; }

/* Boutons creux et champs */
.creux{ width:100%; min-height:var(--cible); border:var(--bord-creux); border-radius:var(--r-bouton); background:var(--fond); font-size:var(--t-mot); font-weight:var(--g-mot); display:inline-flex; align-items:center; justify-content:center; padding:0 16px; transition:transform var(--vite), background var(--vite); }
.creux:active{ background:var(--surface-2); transform:scale(var(--presse)); }
.creux.action{ border-color:var(--action); }
.creux.choisi{ border:var(--anneau-choisi) solid var(--action); }
.rangee-creux{ display:flex; flex-direction:column; gap:8px; }
.champ{ width:100%; height:var(--cible-champ); border:var(--bord-champ); border-radius:var(--r-champ); padding:0 14px; font-size:var(--t-champ); background:var(--fond); outline:none; }
.champ:focus{ border:var(--bord-focus); box-shadow:var(--anneau-focus); }
.champ::placeholder{ color:var(--gris-clair); }
.champ.chiffre{ font-family:var(--police-chiffres); font-variant-numeric:tabular-nums; font-size:var(--t-chiffre); font-weight:var(--g-chiffre); }
.champ-ligne{ display:flex; align-items:center; gap:12px; }
.champ-ligne label{ font-size:var(--t-mot); font-weight:var(--g-mot); flex:1; }
.champ-ligne .champ{ width:120px; }
.champ-ligne .unite{ font-size:var(--t-legende); color:var(--gris); }

/* Compteur (- N +) */
.compteur{ display:flex; align-items:center; justify-content:space-between; min-height:var(--cible); }
.compteur .nom{ font-size:var(--t-mot); font-weight:var(--g-mot); }
.compteur .cmd{ display:flex; align-items:center; gap:12px; }
.compteur button{ width:var(--cible); height:var(--cible); border:var(--bord-creux); border-radius:50%; font-size:22px; display:inline-flex; align-items:center; justify-content:center; }
.compteur button:active{ background:var(--surface-2); }
.compteur .n{ font-family:var(--police-chiffres); font-variant-numeric:tabular-nums; font-size:var(--t-chiffre); font-weight:var(--g-chiffre); min-width:28px; text-align:center; }

/* ---------- La carte photo ---------- */
.carte-photo{ }
.carte-photo .cadre{ position:relative; aspect-ratio:var(--exemple-photo); border-radius:var(--r-exemple); overflow:hidden; background:var(--surface-2); }
.carte-photo .cadre img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.carte-photo .cadre img.reel{ opacity:0; transition:opacity var(--normal) var(--courbe); }
.carte-photo .cadre img.reel.la{ opacity:1; }
.carte-photo .cadre.absente img.exemple{ opacity:.35; }
.carte-photo .cadre .marque{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--t-mot); font-weight:var(--g-mot); color:var(--gris); }
.carte-photo .cadre .nom-place{ position:absolute; left:12px; top:12px; height:24px; padding:0 10px; border-radius:var(--r-pilule); background:var(--fond); font-size:var(--t-pastille); font-weight:var(--g-pastille); letter-spacing:var(--e-pastille); text-transform:uppercase; color:var(--gris); display:inline-flex; align-items:center; }
.carte-photo .sous{ display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.carte-photo .titre-photo{ font-size:var(--t-legende); color:var(--gris); margin:0 0 8px; }
.carte-photo.mini .cadre{ width:var(--vignette); height:var(--vignette); aspect-ratio:auto; border-radius:var(--r-tuile); }
.agent-apres{ margin-top:8px; }
.plus-tard{ margin-top:16px; }
/* ---------- La note (DECISIONS 10.1) : sous le contenu, au-dessus du pied ---------- */
.note{ margin-top:0; }
.note .note-lien{ min-height:var(--cible); display:inline-flex; align-items:center; gap:8px; padding:0 8px; margin-left:-8px; font-size:var(--t-mot); font-weight:var(--g-mot); color:var(--gris); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; border-radius:var(--r-bouton); }
.note .note-lien:active{ background:var(--surface-2); }
.note .note-lien svg{ width:var(--ico-petite); height:var(--ico-petite); flex:none; }
.note .crayon-ico path{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Le lien « Ajouter une photo » (§16) : la forme d'« Ajouter une note », l'entrée de fichier cachée dedans */
.note .photo-lien{ position:relative; }
.note .appareil-ico path, .note .appareil-ico circle{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.note textarea.champ{ height:auto; min-height:var(--cible-champ); padding:14px; resize:none; line-height:1.4; font-size:var(--t-champ); overflow:hidden; display:block; }
.note .note-texte{ width:100%; display:block; text-align:left; padding:4px 0; min-height:var(--cible); }
.note .note-texte .etiquette{ margin:0 0 4px; }
.note .note-texte p{ margin:0; font-size:15px; line-height:1.4; color:var(--encre); white-space:pre-wrap; }
.note .note-texte:active{ background:var(--surface-2); }
.crayon-ico{ width:16px; height:16px; color:var(--gris); flex:none; }
.crayon-ico path{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.notes-fin{ margin-top:12px; }
.notes-fin .ligne-note{ display:flex; gap:8px; align-items:flex-start; font-size:var(--t-legende); color:var(--gris); line-height:1.4; padding:6px 0; }
.notes-fin .ligne-note b{ font-weight:600; color:var(--encre-2); }
.etape-ligne .crayon-ico{ margin-left:4px; }

/* ---------- La ligne de l'agent ---------- */
.agent{ background:var(--agent-doux); border-left:3px solid var(--agent); border-radius:var(--r-bouton); padding:14px 16px; color:var(--agent); font-size:var(--t-mot); font-weight:var(--g-agent); line-height:1.4; }
.agent .actions{ display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.agent .creux{ width:auto; min-width:120px; color:var(--encre); background:var(--fond); }
.agent .lien{ margin-left:0; }
.agent.silence{ display:none; }

/* ---------- Le choix par l'image ---------- */
.rangee .etiquette{ margin-bottom:10px; }
.grille{ display:grid; grid-template-columns:1fr 1fr; gap:12px var(--tuile-gouttiere); align-items:start; }
.grille.sobres{ gap:8px var(--tuile-gouttiere); }
.rangee-creux.deux{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rangee-creux.deux .creux{ padding:0 10px; min-width:0; width:auto; }
.rangee-creux.deux .creux:nth-child(3):last-child{ grid-column:1 / -1; }
.apres-grille{ margin-top:12px; }
.grille.pliee .tuile.plus{ display:none; }
.tuile{ position:relative; display:block; width:100%; }
.tuile .img{ display:block; position:relative; aspect-ratio:var(--tuile-image); border-radius:var(--r-tuile); background:var(--surface-2); transition:transform var(--vite); }
.tuile .img img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-tuile); }
.tuile:active .img{ transform:scale(var(--presse)); }
.tuile .mot{ display:block; margin-top:var(--tuile-mot-haut); text-align:center; font-size:var(--t-mot); font-weight:var(--g-mot); color:var(--encre); line-height:1.2; }
.tuile.choisi .mot{ font-weight:700; }
.tuile.choisi .img{ border-color:transparent; }
.tuile .note{ display:block; text-align:center; font-size:var(--t-legende); color:var(--gris); margin-top:2px; }
.tuile .pastille{ position:absolute; left:8px; top:8px; height:var(--pastille-propose); padding:0 8px; border-radius:var(--r-pilule); background:var(--agent-doux); color:var(--agent); font-size:var(--t-pastille); font-weight:var(--g-pastille); letter-spacing:var(--e-pastille); text-transform:uppercase; display:inline-flex; align-items:center; z-index:2; }
.tuile.sobre .img{ aspect-ratio:auto; min-height:var(--cible); display:flex; align-items:center; justify-content:center; padding:12px; text-align:center; font-size:var(--t-mot); font-weight:var(--g-mot); background:var(--fond); border:var(--bord-creux); }
.tuile .pastille.sous-mot{ position:static; display:inline-flex; margin:6px auto 0; }
.tuile.sobre{ display:flex; flex-direction:column; align-items:center; }
.tuile.sobre .img{ width:100%; }
.tuile.sobre.choisi .img{ font-weight:700; }
.tuile.chiffre .img{ aspect-ratio:auto; height:64px; background:var(--fond); border:var(--bord-creux); display:flex; align-items:center; justify-content:center; font-family:var(--police-chiffres); font-variant-numeric:tabular-nums; font-size:var(--t-chiffre); font-weight:var(--g-chiffre); }
.tuile.autre .img{ background:var(--fond); border:var(--bord-pointille); display:flex; align-items:center; justify-content:center; }
.tuile.autre .img svg{ width:56%; height:56%; }
svg.anneau{ position:absolute; left:-4px; top:-4px; width:calc(100% + 8px); height:calc(100% + 8px); pointer-events:none; overflow:visible; z-index:3; }
svg.anneau path{ fill:none; stroke:var(--action); stroke-width:var(--anneau-choisi); stroke-linecap:round; stroke-linejoin:round; }
svg.anneau.propose path{ stroke:var(--agent); stroke-width:var(--anneau-propose); stroke-dasharray:var(--pointille-motif); }
svg.anneau.dessine path{ transition:stroke-dashoffset var(--anneau-duree) var(--courbe); }
.anneau-rond{ width:100%; height:100%; overflow:visible; display:block; }
.anneau-rond path{ fill:none; stroke-linecap:round; stroke-width:2.5px; }
.anneau-rond .rail{ stroke:var(--pointille); stroke-dasharray:2 3; stroke-width:1.5px; }
.anneau-rond .trace{ stroke:var(--encre); }
.anneau-plan.fait .anneau-rond .trace, .anneau-rond.grand .trace{ stroke:var(--action); }
.anneau-rond.grand path{ stroke-width:3px; }
.ligne-sans{ margin-top:16px; }
.tuile-pct{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; }
.tuile-pct .champ{ height:48px; background:var(--fond); }

/* Les mots du métier (pro) */
.pilules{ display:flex; flex-wrap:wrap; gap:8px; }
.pilule{ min-height:var(--cible); padding:0 16px; border-radius:var(--r-pilule); border:var(--bord-creux); font-size:var(--t-mot); font-weight:var(--g-mot); display:inline-flex; align-items:center; transition:transform var(--vite); }
.pilule:active{ transform:scale(var(--presse)); background:var(--surface-2); }
.pilule.choisi{ background:var(--encre); color:var(--fond); border-color:var(--encre); }
.pilule.propose{ border:var(--bord-pointille); border-color:var(--agent); background:var(--agent-doux); color:var(--agent); }
.rangee .bascule{ display:inline-flex; margin-top:6px; }
.lien-petit{ min-height:var(--cible); display:inline-flex; align-items:center; font-size:var(--t-legende); color:var(--gris); text-decoration:underline; text-underline-offset:3px; }

/* Cartes (types de pièce, personnes) */
.cartes{ display:grid; grid-template-columns:1fr; gap:8px; }
.carte{ min-height:64px; border:var(--bord-creux); border-radius:var(--r-carte); padding:8px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:var(--t-mot); font-weight:var(--g-mot); transition:transform var(--vite); background:var(--fond); }
.carte:active{ transform:scale(var(--presse)); background:var(--surface-2); }
.carte.choisi{ border:var(--anneau-choisi) solid var(--action); }
.carte .gauche{ display:flex; align-items:center; gap:12px; }
.carte.statique{ pointer-events:none; }
.carte.faite{ background:var(--surface-2); }
.carte .sous-titre{ display:block; font-size:var(--t-legende); font-weight:400; color:var(--gris); margin-top:2px; }
.carte .fait{ font-size:var(--t-legende); color:var(--gris); font-weight:400; white-space:nowrap; }
.carte img{ width:48px; height:48px; border-radius:var(--r-tuile); object-fit:cover; flex:none; }
.tour-cartes .carte{ min-height:56px; padding:6px 16px; }
.tour-cartes .carte img{ width:40px; height:40px; }
.tour-cartes .carte .sous-titre{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:250px; }
.carte .chevron{ color:var(--gris); }
.fait-ligne{ display:flex; align-items:center; gap:12px; min-height:56px; background:var(--surface-2); border-radius:var(--r-bouton); padding:0 16px; font-size:var(--t-mot); font-weight:var(--g-mot); }
.fait-ligne .creux{ width:auto; }

/* Liste (rénovations, Il manque) */
.liste{ display:flex; flex-direction:column; }
.liste .ligne{ min-height:56px; display:flex; align-items:center; gap:12px; border-bottom:var(--bord); padding:8px 0; }
.liste .ligne .nom{ flex:1; font-size:var(--t-mot); font-weight:var(--g-mot); }
.liste .ligne .nom small{ display:block; font-size:var(--t-legende); color:var(--gris); font-weight:400; }
.liste .ligne .champ{ width:104px; height:48px; }
.liste .ligne .champ.detail{ width:auto; flex:1; }
.liste .ligne .creux{ width:auto; min-width:96px; }
.liste .ligne img{ width:48px; height:48px; border-radius:8px; object-fit:cover; flex:none; }
.liste .ligne .pointille{ width:40px; height:40px; border-radius:8px; border:var(--bord-pointille); }
.liste .ligne.case{ cursor:pointer; }
.case-carre{ width:28px; height:28px; border:var(--bord-creux); border-radius:8px; flex:none; position:relative; }
.case-carre.coche{ border-color:var(--encre); background:var(--encre); }
.carte-blanche{ border:var(--bord); border-radius:var(--r-carte); padding:16px; }
.carte-blanche h3{ margin:0 0 4px; font-size:var(--t-corps); font-weight:700; }

/* ---------- Le plan de la maison ---------- */
.plan-tete{ display:flex; gap:16px; align-items:center; min-height:120px; margin:-8px 0 8px; }
.plan-tete .dessin{ width:96px; height:96px; flex:none; border-radius:var(--r-tuile); background:var(--surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.plan-tete .dessin svg{ width:100%; height:100%; }
.plan-tete .adresse{ font-size:var(--t-chiffre); font-weight:var(--g-chiffre); line-height:1.15; }
.plan-tete .faits{ font-size:var(--t-legende); color:var(--gris); margin-top:4px; }
.plan-reprendre{ margin:8px 0 16px; }
.plan-reprendre .quoi{ font-size:var(--t-legende); color:var(--gris); margin-top:6px; text-align:center; }
.bande{ border-top:var(--bord); }
.bande:last-child{ border-bottom:var(--bord); }
.bande .entete{ width:100%; min-height:var(--cible-chapitre); display:flex; align-items:center; gap:12px; padding:4px 0; }
.bande .entete:active{ background:var(--surface-2); }
.bande .entete.encours{ background:var(--surface-2); border-radius:var(--r-bouton); }
.bande .anneau-plan{ width:var(--anneau-plan); height:var(--anneau-plan); flex:none; display:block; }
.bande .anneau-plan svg{ width:100%; height:100%; overflow:visible; }
.bande .anneau-plan path{ fill:none; stroke-linecap:round; stroke-width:var(--anneau-plan-trait); }
.bande .anneau-plan .rail{ stroke:var(--trait-fort); stroke-dasharray:2 3; stroke-width:1.5px; }
.bande .anneau-plan .trace{ stroke:var(--encre); }
.bande .anneau-plan.fait .trace{ stroke:var(--action); }
.bande .anneau-plan.dessine .trace{ transition:stroke-dashoffset var(--anneau-duree) var(--courbe); }
.bande .nom{ flex:1; font-size:var(--t-corps); font-weight:700; }
.bande .encore{ font-size:var(--t-legende); color:var(--gris); }
.bande .chevron{ color:var(--gris); transition:transform var(--entree); }
.bande.ouverte .chevron{ transform:rotate(90deg); }
.bande .etapes{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--entree) var(--courbe); }
.bande.ouverte .etapes{ grid-template-rows:1fr; }
.bande .etapes > div{ overflow:hidden; }
.etape-ligne{ width:100%; min-height:52px; display:flex; align-items:center; gap:12px; padding:4px 0 4px 36px; border-top:var(--bord); }
.etape-ligne:active{ background:var(--surface-2); }
.etape-ligne .mini{ width:var(--anneau-etape); height:var(--anneau-etape); flex:none; border-radius:50%; border:1.5px solid var(--trait-fort); }
.etape-ligne .mini.fait{ border-color:var(--encre); background:var(--encre); }
.etape-ligne .mini.pointe{ border-style:dashed; border-color:var(--pointille); }
.etape-ligne .nom{ flex:1; font-size:var(--t-mot); font-weight:500; text-align:left; }
.etape-ligne .etat{ font-size:var(--t-legende); color:var(--gris); }
.etape-ligne img{ width:40px; height:40px; border-radius:8px; object-fit:cover; }
.plan-fin{ min-height:56px; display:flex; align-items:center; font-size:var(--t-corps); font-weight:700; margin-top:16px; width:100%; }

/* ---------- La respiration ---------- */
.respiration{ display:flex; flex-direction:column; min-height:100%; }
.respiration .photo{ aspect-ratio:var(--exemple-photo); border-radius:var(--r-exemple); overflow:hidden; margin:24px 0; }
.respiration .photo img{ width:100%; height:100%; object-fit:cover; }
.respiration .ligne-chapitre{ display:flex; align-items:center; gap:14px; }
.respiration .anneau-resp{ width:var(--anneau-respiration); height:var(--anneau-respiration); flex:none; display:block; }
.respiration .nom-chapitre{ font-size:var(--t-chiffre); font-weight:700; flex:1; }
.respiration .maison-resp{ width:96px; height:96px; flex:none; display:block; }
.respiration .maison-resp svg{ width:96px; height:96px; }
.respiration .legende{ margin-top:16px; }
.respiration .suite{ margin-top:16px; }

/* ---------- La maison / C'est envoyé ---------- */
.heros-fin{ position:relative; aspect-ratio:var(--exemple-photo); border-radius:var(--r-exemple); overflow:hidden; background:var(--surface-2); }
.heros-fin img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 500ms var(--courbe); }
.heros-fin .voile{ position:absolute; inset:0; background:var(--voile-photo); }
.heros-fin .adresse{ position:absolute; left:16px; right:16px; bottom:14px; color:#fff; font-size:var(--t-question); font-weight:700; line-height:1.1; }
.heros-fin .toit{ position:absolute; left:14px; top:12px; width:24px; height:24px; color:#fff; z-index:1; }
.heros-fin .crayon-fin{ z-index:2; }
.heros-fin .crayon-fin{ position:absolute; inset:0; background:var(--fond); display:flex; align-items:center; justify-content:center; transition:opacity var(--croquis-trace-duree) var(--courbe); }
.heros-fin .crayon-fin.efface{ opacity:0; pointer-events:none; }
.confirmation{ min-height:56px; display:flex; align-items:center; padding:0 16px; margin-top:16px; background:var(--surface-2); border-radius:var(--r-bouton); font-size:var(--t-mot); font-weight:var(--g-mot); }
.faits-phrase{ font-size:var(--t-corps); color:var(--encre-2); line-height:var(--l-corps); margin-top:16px; }
.faits-phrase + .voix{ margin-top:8px; }
.manque-ligne{ width:100%; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:var(--bord); border-bottom:var(--bord); margin-top:16px; font-size:var(--t-mot); color:var(--gris); }
.tuiles-faits{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.tuile-fait{ min-height:72px; background:var(--surface-2); border-radius:var(--r-tuile-fait); padding:12px 14px; }
.tuile-fait .m{ font-size:var(--t-etiquette); font-weight:var(--g-etiquette); letter-spacing:var(--e-etiquette); text-transform:uppercase; color:var(--gris); }
.tuile-fait .v{ font-family:var(--police-chiffres); font-variant-numeric:tabular-nums; font-size:var(--t-chiffre); font-weight:var(--g-chiffre); margin-top:4px; }
.tuile-fait{ opacity:0; }
.tuile-fait.cascade{ animation:pose var(--entree) var(--courbe) both; }
@keyframes pose{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.vignettes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:12px; }
.vignettes figure{ margin:0; }
.vignettes img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.vignettes figcaption{ font-size:var(--t-legende); color:var(--gris); margin-top:4px; line-height:1.3; }
.section-fin{ margin-top:28px; }
.section-fin h3{ margin:0 0 8px; font-size:var(--t-corps); font-weight:700; }
.section-fin .mots{ font-size:var(--t-legende); color:var(--gris); line-height:1.5; }

/* ---------- Le croquis ---------- */

/* Entrée */
.marque{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.heros-accueil{ margin:0 calc(-1 * var(--marge-page)) 24px; }
.heros-accueil img{ width:100%; aspect-ratio:var(--exemple-photo); object-fit:cover; }
.marque svg{ width:var(--ico-toit-entree); height:var(--ico-toit-entree); }
.marque .nom-marque{ font-size:var(--t-etiquette); font-weight:var(--g-etiquette); letter-spacing:var(--e-etiquette); text-transform:uppercase; color:var(--gris); }
.faits-role{ font-size:var(--t-legende); color:var(--gris); margin-top:8px; line-height:1.4; }
.toit-vgm path{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* ==========================================================================
   3. L'ÉLÉMENT, SA FICHE, LA LISTE À COCHER (maquette tour-v0.17, pied de la page)
   ========================================================================== */
/* ---------- v0.7 : le plan, la place en pilules, la fenêtre d'exemple, Aujourd'hui ---------- */
.tete .plan-lien.gauche{ justify-self:start; margin-left:-12px; }
.pilule{ min-height:var(--cible); padding:0 16px; border-radius:var(--r-pilule); border:var(--bord-creux); font-size:var(--t-mot); font-weight:var(--g-mot); display:inline-flex; align-items:center; position:relative; background:var(--fond); text-align:left; }
.pilule .simple{ font-weight:400; color:var(--gris); margin-left:4px; }
.pilule.choisi{ border-color:transparent; }
.pilule.choisi .simple{ color:var(--gris); }
.pilule.propose{ border:1.5px dashed var(--agent); background:var(--agent-doux); color:var(--agent); }
.pilule.propose .simple{ color:var(--agent); }
.pilule.plus, .pilule.sans{ border-style:solid; color:var(--gris); }
.pilule.sans.choisi{ color:var(--encre); }
.pilules{ display:flex; flex-wrap:wrap; gap:8px; }
.pilules.types{ padding:8px 0 8px 36px; }
.rangee + .rangee{ margin-top:16px; }
.rangee .etiquette{ margin-bottom:8px; }
.rangee .lien-petit{ margin-top:2px; font-size:var(--t-mot); font-weight:500; }
.photo-bloc .creux.photo{ height:var(--cible-champ); }
.photo-bloc .creux .simple{ font-weight:400; color:var(--gris); margin-left:4px; }
.vignettes.petites{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.vignettes.petites figure{ width:var(--vignette); margin:0; }
.vignettes.petites img{ width:var(--vignette); height:var(--vignette); object-fit:cover; border-radius:var(--r-tuile); opacity:0; transition:opacity var(--normal) var(--courbe); }
.vignettes.petites img.la{ opacity:1; }
.vignettes.petites .lien-petit{ min-height:32px; width:100%; justify-content:center; }
.etape-ligne .nom small{ display:block; font-size:var(--t-legende); color:var(--gris); font-weight:400; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.etape-ligne .nom{ min-width:0; }
.etape-ligne.faite .nom{ color:var(--encre-2); }
.etape-ligne .mini.plus{ border-style:dashed; border-color:var(--pointille); display:inline-flex; align-items:center; justify-content:center; font-size:12px; color:var(--gris); }
.etape-ligne.ajouter .nom{ color:var(--gris); }
.bande .encore{ font-size:var(--t-legende); color:var(--gris); }
.b-ensuite.creux-orange{ background:var(--fond); border:2px solid var(--action); }
.carte.visite{ align-items:flex-start; gap:12px; }
.carte.visite .commune{ color:var(--gris); font-weight:400; }
.carte.visite.grande{ min-height:96px; }
.liste .ligne.fait b{ font-weight:600; text-align:right; }
.liste .ligne .chevron{ color:var(--gris); }
.voile-fen{ position:absolute; inset:0; background:var(--voile-fenetre); z-index:var(--z-fenetre); }
.fenetre{ position:absolute; left:0; right:0; bottom:0; max-height:80%; background:var(--fond); border-radius:var(--r-fenetre) var(--r-fenetre) 0 0; z-index:calc(var(--z-fenetre) + 1); display:flex; flex-direction:column; box-shadow:var(--ombre-fenetre); }
.fenetre .fen-tete{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px 8px var(--marge-page); }
.fenetre .fen-tete h2{ margin:0; font-size:var(--t-chiffre); font-weight:700; }
.fenetre .fen-x{ width:var(--cible); height:var(--cible); display:inline-flex; align-items:center; justify-content:center; font-size:20px; color:var(--gris); border-radius:50%; }
.fenetre .fen-corps{ overflow-y:auto; overflow-x:hidden; padding:8px var(--marge-page) 16px; }
.fenetre .fen-pied{ padding:8px var(--marge-page) calc(16px + var(--sur-bas)); box-shadow:var(--ombre-pied); }
.fenetre .tuile .mot .simple{ font-weight:400; color:var(--gris); }
.agent-apres{ margin-top:8px; }
.fenetre[hidden], .voile-fen[hidden]{ display:none; }
.etiquette-ligne{ display:flex; align-items:center; justify-content:space-between; min-height:40px; margin:-8px 0 0; }
.etiquette-ligne .droite{ display:inline-flex; align-items:center; gap:4px; margin-right:-12px; }
.crayon-btn{ min-width:var(--cible); width:var(--cible); height:var(--cible); flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--gris); margin:-4px 0; }
.crayon-btn:active{ background:var(--surface-2); }
.crayon-btn .crayon-ico{ width:18px; height:18px; }
.crayon-btn.retirer{ font-size:16px; }
.sous-vignette{ display:flex; justify-content:center; }

/* L'appareil à côté du crayon (§17.1, §19.7) : même cible de 48 px, même gris, le glyphe à
   18 px comme le crayon, pas de mot. Un `label` qui vise l'entrée de fichier de la question. */
.appareil-ico{ color:var(--gris); flex:none; }
.appareil-ico path, .appareil-ico circle{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.crayon-btn .appareil-ico{ width:18px; height:18px; }
.crayon-btn.appareil-btn{ cursor:pointer; position:relative; }

/* La vignette d'une question (§17.1) : 96 px, sa légende à côté, le ✕ dans la colonne du
   crayon, une ligne par photo. */
.photos-question{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.photo-question{ display:flex; align-items:center; gap:12px; margin:0; min-height:var(--cible); }
.photo-question img{ width:var(--vignette); height:var(--vignette); object-fit:cover; border-radius:var(--r-tuile); flex:none; }
.photo-question figcaption{ flex:1; min-width:0; }
.photo-question .crayon-btn{ margin:0 -12px 0 0; }

/* Le niveau en sur-titre d'une place (§19.4) : 17 px, gris, sa ligne, sans « · ». */
.sur-titre{ font-size:var(--t-corps); font-weight:var(--g-corps); line-height:1.3; color:var(--gris); margin:0 0 4px; }

/* « Je ne sais pas » sous un champ (§19.9) : sa ligne, pleine largeur. */
.pilules.sous-le-champ{ margin-top:8px; }
.pilules.sous-le-champ .pilule{ flex:1 1 100%; justify-content:center; }

/* La phrase du contenu gardé (§19.1), sous la question qui pilote la condition. */
.legende.garde{ margin-top:8px; }
.note-texte.petite{ padding:0; min-height:0; margin-top:4px; }
.note-texte.petite p{ font-size:15px; color:var(--gris); }
.champ-note{ margin-top:8px; }
.rangee + .rangee{ margin-top:8px; }
.pilule{ padding:0 14px; }
/* ---------- v0.8 : l'élément et sa fiche (DECISIONS §11.2) ---------- */
.pilule.elem{ padding:0; overflow:visible; }
.pilule.elem .pilule-mot{ min-height:var(--cible); min-width:var(--cible); justify-content:center; padding:0 4px 0 14px; display:inline-flex; align-items:center; font-size:var(--t-mot); font-weight:var(--g-mot); color:inherit; border-radius:var(--r-pilule) 0 0 var(--r-pilule); }
.pilule.elem .chev{ min-width:var(--cible); min-height:var(--cible); display:inline-flex; align-items:center; justify-content:center; gap:3px; color:var(--gris); font-size:18px; border-radius:0 var(--r-pilule) var(--r-pilule) 0; border-left:1px solid var(--trait); }
.pilule.elem .chev span{ transition:transform var(--entree); }
.pilule.elem.ouverte .chev span{ transform:rotate(90deg); }
.pilule.elem .chev .point{ width:6px; height:6px; border-radius:50%; background:var(--encre); display:inline-block; }
.pilule.elem.choisi{ background:var(--fond); color:var(--encre); }
.fiche{ background:var(--surface-2); border-radius:var(--r-carte); padding:16px; margin-top:12px; display:flex; flex-direction:column; gap:12px; }
.fiche .fiche-titre{ margin:0; font-size:var(--t-corps); font-weight:700; }
.fiche .fiche-ligne{ display:flex; flex-direction:column; gap:6px; }
.fiche .fiche-etq{ font-size:var(--t-etiquette); font-weight:var(--g-etiquette); letter-spacing:var(--e-etiquette); text-transform:uppercase; color:var(--gris); }
.fiche .pilule, .fiche .creux, .fiche .champ{ background:var(--fond); }
.fiche .pilule.choisi{ background:var(--encre); color:var(--fond); }
.fiche .pilule.sans.choisi{ background:var(--encre); color:var(--fond); }
.fiche .saisie.annee{ display:flex; align-items:center; gap:8px; }
.fiche .saisie.annee .champ{ width:120px; height:var(--cible); }
.fiche .rangee-photo .creux{ flex:1; min-width:120px; width:auto; height:var(--cible); }
.fiche .vignettes.petites figure{ width:72px; }
.fiche .vignettes.petites img{ width:72px; height:72px; }
.fiche .champs-ligne .champ{ height:var(--cible); }
.fiche .lien{ align-self:flex-start; margin-left:-8px; }
.fiche .note{ margin:0; }
.fiche .note-lien{ margin-left:-8px; min-height:var(--cible); }
.marque.logo{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.logo-vgm{ height:64px; width:auto; display:block; }   /* Aujourd'hui : le verrou en grand, c'est l'accueil de l'app */
.tete-toit{ display:inline-flex; align-items:center; gap:8px; }
.tete-toit .toit-img{ height:28px; width:auto; display:block; }
.tete-toit .dessin-crayon{ width:32px; height:32px; display:block; }
/* v0.10 : le nom VGM TOUR, gras, à la hauteur du logo (Samuel : « plus bold, qui fit ») */
.marque.logo{ justify-content:space-between; }
.marque.logo .nom-marque{ font-size:26px; font-weight:800; letter-spacing:.04em; line-height:1; color:var(--encre); text-transform:uppercase; padding-top:6px; white-space:nowrap; }
@media (max-width:360px){ .marque.logo .nom-marque{ font-size:22px; } }
/* ---------- v0.12 (DECISIONS §11.6) : liste à cocher, selon le rôle, une place un pouce ---------- */
#corps.place{ display:flex; flex-direction:column; }
/* v0.16 : la règle « une place, un pouce » (§11.6.6) est RETIRÉE de la mise en page.
   Elle collait le contenu en bas (`margin-top:auto`) et laissait un demi-écran de vide
   sur toute place courte — et il y en a beaucoup. L'action qui compte (Ensuite, Retour,
   Le plan) est DÉJÀ fixée dans le pied, sous le pouce : les pilules, elles, ont besoin
   d'être vues, pas d'être basses. Le contenu commence donc sous l'en-tête. */
#corps.place > .ecran > .question{ margin-bottom:16px; }
#corps.place > .ecran > .geste{ padding-bottom:8px; }
.liste-coche{ display:flex; flex-direction:column; }
.ligne.bloc{ display:block; padding-top:12px; padding-bottom:12px; }
.ligne.bloc .nom{ display:block; margin-bottom:8px; }
.pilules.serre{ display:flex; flex-wrap:wrap; gap:8px; }
.carte.ajout-visite{ border:var(--bord-pointille); color:var(--gris); justify-content:flex-start; gap:12px; }
.carte.ajout-visite .nom{ font-size:var(--t-mot); font-weight:var(--g-mot); }
.ligne-coche{ display:flex; align-items:center; border-bottom:var(--bord); }
.ligne-coche .coche-mot{ flex:1; min-height:var(--cible); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:var(--t-mot); font-weight:500; color:var(--encre); text-align:left; padding:0 4px 0 0; }
.ligne-coche .coche-mot .txt{ flex:1; }
.ligne-coche .coche-mot small{ display:block; font-size:11px; color:var(--gris); font-weight:400; margin-top:1px; }
.ligne-coche .cercle{ width:20px; height:20px; flex:none; display:block; }
.ligne-coche .cercle .anneau-rond .rail{ stroke:var(--pointille); }
.ligne-coche .cercle .anneau-rond .trace{ stroke:var(--action); stroke-width:3px; }
.ligne-coche.coche .coche-mot{ font-weight:600; }
.ligne-coche.role .cercle .anneau-rond .rail{ stroke:var(--gris); stroke-dasharray:2 2; stroke-width:2px; }
.ligne-coche .chev{ min-width:var(--cible); min-height:var(--cible); display:inline-flex; align-items:center; justify-content:center; gap:3px; color:var(--gris); font-size:18px; }
.ligne-coche .chev .point{ width:6px; height:6px; border-radius:50%; background:var(--encre); display:inline-block; }
.ligne-coche:active{ background:var(--surface-2); }
.pil-role{ display:inline-flex; flex-direction:column; align-items:center; }
.pil-role small{ font-size:11px; color:var(--gris); margin-top:2px; line-height:1; }
.pilule.role{ border:1.5px dashed var(--gris); color:var(--encre-2); }
.etape-ligne .nom small.role{ color:var(--gris); }
/* v0.13 : le logo VGM en haut à gauche du plan (il ouvre Le dossier) */
.tete .plan-lien.logo-plan{ text-decoration:none; padding:0 8px 0 0; }
.logo-tete{ height:40px; width:auto; display:block; }   /* v0.17 : le verrou complet (maison + trois mots) a besoin de hauteur */
/* v0.14 (§11.7) : l'étiquette Requis, Effacer */
.requis{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--gris); margin-left:8px; }
.fiche .fiche-etq{ display:flex; align-items:center; }
.fiche .fiche-pied{ display:flex; justify-content:space-between; align-items:center; }
.elem-ligne .puce{ width:6px; height:6px; border-radius:50%; background:var(--encre); flex:none; margin:6px 5px 0; }
.etiquette-ligne .etiquette{ margin:0; }
.etiquette-ligne .lien-petit{ margin:0; }
.champs-ligne{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
.champ-court{ display:flex; flex-direction:column; gap:4px; font-size:var(--t-legende); color:var(--gris); }
.champ-court .saisie{ display:flex; align-items:center; gap:6px; }
.champ-court .champ{ width:100%; height:var(--cible); }
.pilule{ min-width:var(--cible); justify-content:center; }
.pilules{ gap:6px 8px; }
.rangee + .rangee{ margin-top:12px; }
.geste{ margin-top:16px; }
.geste > * + *{ margin-top:12px; }
.photo-bloc .rangee-photo{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
.photo-bloc .rangee-photo .creux{ flex:1; min-width:140px; width:auto; }
.vignettes.petites{ margin:0; }
.vignettes.petites .lien-petit{ min-height:var(--cible); }

/* ==========================================================================
   4. CE QUE L'APP AJOUTE À LA MAQUETTE
   La maquette posait quelques mises en page en attribut `style=`. La CSP les
   refuse (§4.3, `style-src 'self'` sans `unsafe-inline`), donc chacune devient
   une classe. Rien de nouveau n'est décidé ici : les mêmes valeurs.
   ========================================================================== */

/* Le bandeau : il ne dit qu'une chose, et seulement quand elle est vraie. */
.bandeau{ position:absolute; top:0; left:0; right:0; z-index:calc(var(--z-tete) + 1); margin:0;
  padding:calc(10px + var(--sur-haut)) var(--marge-page) 10px; background:var(--surface-2);
  color:var(--encre-2); font-size:var(--t-legende); line-height:1.35; }
.bandeau[hidden]{ display:none; }
.tete[hidden]{ display:none; }
.pied[hidden]{ display:none; }

/* Les titres qui portaient une marge en ligne dans la maquette. */
.question.titre-serre{ margin-top:8px; }
.question.titre-large{ margin-top:32px; }

/* Le bouton Photo est une vraie entrée de fichier : la caméra native d'iOS
   (ARCHITECTURE §2.3). L'entrée est invisible, l'étiquette est le bouton —
   la cible reste celle d'un bouton creux, donc au moins 48 px. */
.creux.photo{ position:relative; }
.entree-photo{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden;
  clip-path:inset(50%); pointer-events:none; }

/* Un chiffre court (la taxe, l'offre d'achat) : le champ ne prend pas la ligne. */
.champ.chiffre.court{ width:120px; height:var(--cible); flex:none; }

/* L'unité d'un chiffre (pi, %), à droite du champ, jamais dans le champ. */
.saisie{ display:inline-flex; align-items:center; gap:8px; }
.saisie .unite{ color:var(--gris); font-size:var(--t-mot); }

/* Deux boutons creux côte à côte : « N'existe pas » et « Pas d'accès ».
   Ce sont des états DISTINCTS de vide (CONTRAT §3.4), donc deux contrôles. */
.rangee-creux.deux{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.rangee-creux.deux .creux{ flex:1; min-width:140px; min-height:var(--cible); }
.rangee-creux.deux .creux.choisi{ border-color:var(--encre); color:var(--encre); background:var(--surface-2); }

/* La marque de ce qui reste dû dans une fiche. */
.requis{ margin-left:8px; font-size:var(--t-legende); font-weight:500; color:var(--gris);
  text-transform:none; letter-spacing:0; }

/* Une ligne de Il manque se touche : elle ouvre la place ou la fiche. */
.liste .ligne.case{ width:100%; min-height:var(--cible); display:flex; align-items:center;
  justify-content:space-between; gap:12px; }
.liste .ligne.case .nom small{ display:block; font-size:var(--t-legende); color:var(--gris); font-weight:400; }

/* Le cercle au crayon d'une ligne à cocher, quand il est encore vide. */
.ligne-coche .cercle .anneau-rond .rail{ opacity:1; }

/* Aujourd'hui n'a pas d'en-tête : le verrou de marque descend de lui-même sous
   l'encoche, comme dans la maquette approuvée. */
#corps.plein > .ecran > .marque.logo{ margin-top:calc(24px + var(--sur-haut)); }

/* Une question de texte libre prend la ligne entière : elle n'est pas une pilule. */
.pilules > .champ:not(.chiffre){ flex:1 1 100%; min-height:var(--cible-champ); }


/* ---------- Les six cases du code (20 sept.) -------------------------------------------
   Elles utilisaient `.pilules`, une mise en page faite pour des boutons de choix qui
   s'enroulent : chaque champ prenait toute la largeur et on obtenait trois rangées de deux
   cases énormes. Six chiffres se lisent d'un coup d'oeil ou ne se lisent pas.
   Six colonnes égales, jamais d'enroulement, et une hauteur de cible de 56 px. */
.cases-du-code{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:8px;
  width:100%;
}
.cases-du-code .case-code{
  width:100%;
  min-width:0;               /* sinon la largeur intrinsèque de l'input fait déborder la grille */
  height:56px;
  padding:0;
  text-align:center;
  font-family:var(--police-chiffres, inherit);
  font-variant-numeric:tabular-nums;
  font-size:24px;
  font-weight:600;
}
/* Sur un très petit écran, on resserre plutôt que d'enrouler. */
@media (max-width:360px){
  .cases-du-code{ gap:6px; }
  .cases-du-code .case-code{ height:52px; font-size:20px; }
}


/* ==========================================================================
   5. L'ORDINATEUR (ARCHITECTURE §6.4 : « même app, même code, deux colonnes
      au-delà de 900 px »)

   Le média de 900 px existait depuis le premier jour et ne faisait que grossir
   la question : l'app restait une maquette de téléphone de 430 px posée au
   milieu d'un 27 pouces. Il porte maintenant ce que le document promettait.

   LA RÈGLE DE CETTE SECTION, ET IL N'Y EN A QU'UNE : LE TÉLÉPHONE PASSE AVANT.
   C'est l'outil de terrain. Donc :

   - le HTML est LE MÊME des deux côtés. `rendu.js` écrit toujours les deux
     morceaux — la colonne du plan, puis l'écran — et c'est le CSS, lui seul,
     qui décide de les poser côte à côte ou d'en cacher un. Aucune largeur n'est
     lue en JS, rien ne se réaffiche quand on tourne le téléphone ou qu'on
     redimensionne la fenêtre ;
   - sous 900 px, `.ecran` n'a AUCUNE BOÎTE (`display:contents`). Les enfants
     d'un écran restent donc les enfants directs de `#corps`, avec les mêmes
     marges, la même colonne, les mêmes 48 px. La seule trace de l'ordinateur
     au téléphone est un `<div>` qui ne dessine rien ;
   - la colonne du plan n'est pas affichée sous 900 px : au téléphone, on
     navigue ; à l'écran large, on voit les deux.

   Ce que le large NE change PAS : l'anneau au crayon, le pointillé, l'ordre
   libre, les mots du papier, les cibles de 48 px. DÉCISIONS §11 ne se
   rediscute pas parce que l'écran est plus grand.
   ========================================================================== */

/* ---------- La coquille d'un écran, aux deux largeurs ---------- */

/* Sous 900 px : pas de boîte, donc rien de changé. */
.ecran{ display:contents; }

/* Sous 900 px : on navigue, le plan est un écran. */
.plan-cote{ display:none; }

/* ---------- Le clavier ----------
   Sur un ordinateur on tape. Le focus se VOIT : un anneau de 2 px en --action,
   posé à 2 px du contrôle, jamais un halo effacé. `:focus-visible` ne se
   déclenche pas au doigt — le toucher n'est pas touché par ces trois règles. */
:focus-visible{ outline:var(--bord-focus); outline-offset:2px; }

/* Un champ a déjà son bord et son anneau sur `:focus` : on ne double pas. */
.champ:focus-visible{ outline:none; }

/* Le bouton Photo est une étiquette dont l'entrée de fichier est invisible :
   c'est l'entrée qui prend le focus, c'est l'étiquette qui doit le montrer. */
.creux.photo:focus-within{ outline:var(--bord-focus); outline-offset:2px; }

/* ---------- Le survol, à la souris seulement ----------
   `:active` dit déjà l'enfoncé au doigt. Le survol n'existe qu'avec un
   pointeur fin, et il dit la même chose que l'enfoncé : le fond à peine chaud. */
@media (hover: hover) and (pointer: fine){
  .creux:hover, .pilule:hover, .carte:hover, .etape-ligne:hover, .ligne-coche:hover,
  .lien:hover, .plan-lien:hover, .note-lien:hover, .crayon-btn:hover,
  .compteur button:hover, .bande .entete:hover{ background:var(--surface-2); }
  .pilule.choisi:hover{ background:var(--encre); }   /* une pilule choisie reste noire sous la souris : son mot est blanc */
  .b-ensuite:hover{ background:var(--action-presse); }
  .b-ensuite.inactif:hover{ background:var(--surface-2); }
  .tuile:hover .img{ box-shadow:var(--ombre-survol); }
}

/* ---------- Au-delà de 900 px : deux colonnes ---------- */
@media (min-width: 900px){
  :root{
    --l-plan: 340px;            /* la colonne du plan, à gauche, toujours visible */
    --ecart-colonnes: 40px;     /* = --e-10, entre les deux colonnes */
  }

  /* La page tient les deux colonnes et leurs marges, et pas un pixel de plus :
     on ne tire pas une colonne de 430 px à 1400 px, on pose deux colonnes. */
  #tel{
    max-width:calc(var(--l-plan) + var(--ecart-colonnes) + var(--largeur-etape)
                   + 2 * var(--marge-page));
    overflow:hidden;
  }

  /* L'écran-étape reste une colonne, centrée, pas plus large que le jeton le dit. */
  .ecran{ display:block; min-width:0; max-width:var(--largeur-etape); margin-inline:auto; }

  /* Un écran à une seule colonne : le pied se range sur cette colonne-là. Sinon
     « Ensuite » part à l'autre bout de l'écran, à un demi-mètre de ce qu'on vient
     de répondre. Le pourcentage se lit sur la largeur de la page, pas du pied. */
  #corps:not(.place) ~ .pied{
    padding-left:calc((100% - var(--largeur-etape)) / 2);
    padding-right:calc((100% - var(--largeur-etape)) / 2);
  }

  /* UNE PLACE : le plan à gauche, la place courante à droite. Toucher une place
     dans le plan l'ouvre à droite — le plan ne s'en va pas. `#corps.place` est
     posée par l'app exactement quand `rendu.js` écrit la colonne du plan : les
     deux ne peuvent pas se désaccorder. */
  #corps.place{
    display:grid;
    grid-template-columns:var(--l-plan) minmax(0, var(--largeur-etape));
    column-gap:var(--ecart-colonnes);
    align-items:start;
    justify-content:center;
    overflow-x:hidden;
  }
  #corps.place > .ecran{ margin-inline:0; max-width:none; }

  /* Le plan reste sous les yeux pendant qu'on remplit la place : il est collant
     en tête de sa colonne et défile pour lui seul. C'est tout le gain du large. */
  .plan-cote{
    display:block;
    position:sticky;
    top:0;
    max-height:calc(100dvh - var(--h-tete) - var(--h-pied) - var(--e-6));
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:var(--ecart-colonnes);
    border-right:var(--bord);
    scrollbar-width:none;
  }
  .plan-cote::-webkit-scrollbar{ display:none; }

  /* La colonne défile pour elle seule, donc elle rogne ce qui dépasse d'elle.
     L'anneau de focus d'une ligne pleine largeur se dessine DEDANS, sinon on
     n'en verrait pas les côtés. */
  .plan-cote :focus-visible{ outline-offset:-2px; }

  /* Dans la colonne, l'adresse est un rappel, pas un titre d'écran. Aucune marge
     négative : la colonne défile pour elle seule, et un débord au-dessus d'elle
     serait rogné au lieu de remonter. */
  .plan-cote .plan-tete{ min-height:0; margin:0 0 8px; }
  .plan-cote .plan-tete .adresse{ font-size:var(--t-corps); }
}
/* v0.2 (DÉCISIONS §14.1, §14.3) : le compteur – n + en cercles creux de 48 px, le seul chiffre
   de la ligne ; il suit la pilule ou remplace le cercle d'une ligne à cocher. */
.compte{ display:inline-flex; align-items:center; gap:2px; flex:none; }
.compte button{ width:var(--cible); height:var(--cible); min-height:var(--cible); border-radius:50%; border:var(--bord-creux); background:var(--fond); font-size:var(--t-chiffre); display:inline-flex; align-items:center; justify-content:center; color:var(--encre); }
.compte button:active{ background:var(--surface-2); }
.compte .n{ font-family:var(--police-chiffres); font-variant-numeric:tabular-nums; font-size:var(--t-chiffre); font-weight:var(--g-chiffre); min-width:24px; text-align:center; }
.ligne-coche.compte-ligne .coche-mot{ padding-right:8px; }
.pil-compte{ display:inline-flex; align-items:center; gap:8px; max-width:100%; }
/* « Comme le rez-de-chaussée », « + Location » : des pilules de geste, en gris, jamais cerclées */
.pilule.comme{ border-style:dashed; color:var(--gris); }
.pilules.ajout-instance{ padding-top:4px; }
/* Il manque groupé par chapitre, le compte à droite, le détail en retrait */
.manque-chapitre + .manque-chapitre{ margin-top:16px; }
.manque-chapitre .chapitre-ligne .nom{ font-weight:700; }
.manque-chapitre .chapitre-ligne b{ font-family:var(--police-chiffres); font-variant-numeric:tabular-nums; font-size:var(--t-chiffre); font-weight:var(--g-chiffre); margin-right:12px; }
.manque-chapitre .ligne.detail{ padding-left:16px; }
/* v0.2.2 (DÉCISIONS §22, CONTRAT v0.2.2) : la place de comptes d'un niveau. Une ligne par place à
   instance, le mot à gauche, l'appareil au rang du compteur, – n + à droite dans la colonne du
   crayon et du ✕ (§19.7). À zéro : le mot et le « + » seulement, le n garde sa colonne. La
   rangée passe à 56 px quand le mot casse (deux lignes de 20 px, 8 px d'air de chaque côté) ;
   8 px entre l'appareil et le – (passe 8, 5 et 13). */
.liste-coche.comptes .piece-ligne .coche-mot{ cursor:default; padding:8px 8px 8px 0; gap:8px; }
.liste-coche.comptes .piece-ligne .coche-mot .txt{ line-height:20px; min-width:0; }
.liste-coche.comptes .piece-ligne:active{ background:none; }
.liste-coche.comptes .piece-ligne .compte{ margin-right:-12px; }
.piece-ligne.zero .coche-mot{ font-weight:500; color:var(--encre-2); }
.piece-ligne.zero .compte .moins{ display:none; }
.piece-ligne.zero .compte .n{ visibility:hidden; }
.piece-ligne .compte .moins, .piece-ligne .compte .plusun{ flex:none; }
.piece-ligne .crayon-btn.appareil-btn{ margin:0 8px 0 0; }
/* La pièce sous son compte : en retrait, son nom et l'appareil dans la colonne du +, ses pilules
   dessous (48 px, un toucher), ses photos sous ses pilules. */
.sous-piece{ padding:4px 0 10px 16px; border-bottom:var(--bord); }
.sous-piece-tete{ display:flex; align-items:center; justify-content:space-between; min-height:var(--cible); }
.sous-piece-tete .sous-nom{ font-size:var(--t-mot); font-weight:500; color:var(--encre-2); }
.sous-piece-tete .crayon-btn{ margin:0 -12px 0 0; }
.sous-piece .pilules.attr + .pilules.attr{ margin-top:8px; }
.sous-piece .photos-question{ margin-top:8px; }
.liste-coche.comptes > .photos-question{ margin:8px 0; }
/* « Comme le rez-de-chaussée » en tête des comptes d'un étage encore à zéro, sur un plex seulement (§21.1). */
.pilules.comme-niveau{ margin-bottom:4px; }
/* Le plan : le résumé des comptes du niveau tient sur deux lignes plutôt que d'être coupé (§21.9). */
.etape-ligne.comptes-ligne .nom small{ white-space:normal; max-width:none; }
/* C'est envoyé : sous la photo d'une pièce, son niveau et sa grandeur ou ses morceaux (§21.4). */
.vignettes figcaption .niveau-fin{ display:block; margin-top:1px; font-size:var(--t-legende); color:var(--gris); }
/* La ligne d'un compte n'est pas un mot qu'on touche : ni fond au survol, ni fond pressé. */
.liste-coche.comptes .piece-ligne:hover{ background:none; }

/* ---------- CONTRAT v0.2.3 (DÉCISIONS §23, maquette v0.29) ---------- */
/* LE CROQUIS : le dessin collant en tête de l'écran, à -32 px pour que la marge haute du dessin
   (32 px) absorbe le collage sans couper la cote arrière (23.5). Le contour par les fonds
   par-dessus les traits : les traits à 4 px, puis les fonds, il ne reste que la moitié
   extérieure ; le bloc en cours garde son trait orange. Les cotes en pastilles, « rue » en bas. */
.croquis{ position:sticky; top:-32px; z-index:var(--z-croquis-collant); background:var(--fond); margin:0 calc(-1 * var(--marge-page)); padding:0 var(--marge-page) 4px; }
.croquis svg{ width:100%; height:var(--croquis-haut); display:block; }
.croquis.fin{ position:static; margin:0; padding:0; }
.croquis.fin svg{ height:var(--croquis-haut-fin); }
.croquis .cote{ fill:none; stroke:var(--croquis-cote); stroke-width:var(--croquis-cote-trait); stroke-linecap:round; stroke-linejoin:round; }
.croquis .contour{ stroke-width:4px; }
.croquis .interieur{ fill:var(--croquis-interieur); stroke:none; }
.croquis .encours{ stroke:var(--croquis-encours); stroke-width:var(--croquis-encours-trait); }
.croquis .grille-pi{ stroke:var(--croquis-grille); opacity:var(--croquis-grille-op); }
.croquis text{ font-family:var(--police-chiffres); font-variant-numeric:tabular-nums; font-size:12px; fill:var(--encre); }
.croquis text.rue{ font-size:11px; fill:var(--gris); font-family:var(--police); }
.croquis .pastille{ fill:var(--fond); stroke:var(--trait); }
.croquis .pastille.danger{ stroke:var(--danger-cadre); }
.croquis text.danger{ fill:var(--danger); }
.croquis text.encours{ stroke:none; fill:var(--action-texte); }
.croquis rect.pastille.encours{ stroke:var(--action); stroke-width:1.5px; }
.croquis .total{ font-size:var(--t-legende); color:var(--gris); margin:4px 0 0; text-align:center; }
.croquis .total .danger{ color:var(--danger); }
.detail-du-croquis{ margin:8px 0 0; text-align:center; font-variant-numeric:tabular-nums; }
/* ---------- CONTRAT v0.2.5 : LA TOILE (DÉCISIONS §25, maquette v0.37) ----------
   Le croquis à la main : le svg ne colle pas en tête (il se travaille, il ne se consulte pas) ; la page
   défile sur la toile, pendant la pose aussi (le coin se pose au doigt levé, §25.11 ; touch-action
   seulement sur les poignées, les parties et le corps). Les coins sont des poignées de 9 px dans une
   zone de 24 px ; chaque mur et sa pastille ont une zone de 48 px ; le coin touché est orange, le coin
   tenu par deux murs confirmés est noir, le premier coin à toucher pour fermer est pointillé. Une
   mesure confirmée est une pastille noire. Le pavé du galon vit dans la carte du mur (§25.13). */
.croquis.main{ position:static; margin:0; padding:0; }
.croquis.main svg{ height:260px; touch-action:pan-y; }
.croquis.main svg.en-pose{ touch-action:pan-y; }
.croquis .zone-mur{ stroke:transparent; stroke-width:24px; fill:none; cursor:pointer; }
.croquis .zone, .croquis .poignee, .croquis .partie, .croquis .coin-partie, .croquis .corps{ touch-action:none; }
.croquis .plein{ fill:var(--croquis-interieur); }
.croquis .corps.encours{ stroke:var(--action); stroke-width:3px; }
.croquis .ecart{ stroke:var(--danger); stroke-dasharray:4 4; stroke-width:1.5px; }
.vue{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px; }
.vue .creux.vue-btn{ width:auto; min-width:var(--cible); padding:0 14px; font-weight:600; }
.vue .creux.annuler{ font-weight:500; }
/* Le pavé du galon : la valeur en gros, cinq touches par rangée, « po » et « Effacer » larges */
.galon{ display:flex; flex-direction:column; gap:8px; margin:4px 0 8px; }
.galon-valeur{ margin:0; display:flex; align-items:baseline; gap:10px; }
.galon-valeur .u-tabulaire{ font-size:28px; }
.galon-valeur.dessine .u-tabulaire{ color:var(--gris); }
.galon-valeur small{ font-size:var(--t-legende); color:var(--gris); }
.pave{ display:grid; grid-template-columns:repeat(10, 1fr); gap:8px; }
.pave .touche{ grid-column:span 2; height:var(--cible); min-height:var(--cible); width:auto; padding:0; font-family:var(--police-chiffres); font-variant-numeric:tabular-nums; font-size:var(--t-chiffre); font-weight:var(--g-chiffre); }
.pave .touche.large{ grid-column:span 5; font-family:inherit; font-size:var(--t-mot); font-weight:600; }
.pave .touche.choisi{ border-color:var(--action); color:var(--action-texte); }
.croquis .poignee{ fill:var(--fond); stroke:var(--encre); stroke-width:2px; }
.croquis .poignee.encours{ stroke:var(--action); stroke-width:3px; }
.croquis .poignee.petite{ stroke:var(--gris); stroke-width:1.5px; }
.croquis .poignee.tenu{ fill:var(--encre); }
.croquis .poignee.depart{ stroke:var(--action); stroke-width:3px; stroke-dasharray:4 3; }
.croquis .zone{ fill:transparent; stroke:none; cursor:grab; }
.croquis .partie{ cursor:grab; }
.croquis .cote-pastille{ cursor:pointer; }
.croquis .pastille.fixe{ fill:var(--encre); stroke:var(--encre); }
.croquis text.fixe{ fill:var(--fond); }
.croquis text.nom-partie{ fill:var(--gris); font-size:10px; font-family:var(--police); pointer-events:none; }
.croquis text.invite{ font-size:12px; fill:var(--gris); font-family:var(--police); }
/* Un bloc du croquis : la maison, une partie. Son nom, « Retirer » à droite, ses mesures en
   ligne courte (étiquette à gauche, champ de 132 px et unité à droite), ses rangées de pilules
   avec leur étiquette au-dessus (passe 9, 10). En cours : le bord orange. */
.bloc{ border:var(--bord-creux); border-radius:var(--r-bouton); padding:12px; display:flex; flex-direction:column; gap:8px; }
.bloc.encours{ border-color:var(--action); }
.bloc-tete{ display:flex; align-items:center; justify-content:space-between; min-height:var(--cible); }
.bloc-nom{ font-size:var(--t-mot); font-weight:600; }
.bloc .lien{ margin:0; }
.bloc .champ-ligne.mesure .champ{ width:132px; height:var(--cible); }
.bloc .rangee{ margin-top:0; }
.bloc .rangee .etiquette-ligne{ margin-top:0; }
.bloc .pilules .pilule{ padding:0 12px; }
.lien.danger{ color:var(--danger); }
.regroupee > .rangee + .rangee{ margin-top:12px; }
/* « Itinéraire » à côté de la ville, dans la voix du dossier : souligné, sans la hauteur d'un bouton. */
.lien.itineraire{ margin-left:0; min-height:0; min-width:0; padding:0; text-decoration:underline; text-underline-offset:3px; }
/* Une question `lignes` : la zone grandit avec la frappe, la police est celle de la page. */
textarea.champ.grand{ height:auto; min-height:120px; padding:14px; resize:none; line-height:1.4; font-size:var(--t-champ); font-family:inherit; color:inherit; display:block; width:100%; overflow:hidden; }
/* Le petit mot d'une réponse par défaut (« par défaut », « selon le croquis ») : sous la pilule
   (le rang du rôle), à côté du mot d'une ligne à cocher, après le champ d'un chiffre. */
.coche-mot .txt small.origine{ display:block; font-size:11px; font-weight:400; color:var(--gris); line-height:1; margin-top:2px; }
small.origine{ font-size:11px; color:var(--gris); line-height:1; }
.pilules > small.origine{ flex:1 1 100%; }