/* Feuille de style unique de Pass Pierre (ARCH-0002 § 6.2). Les variables :root reprennent les valeurs
   de design/brand.md par copie littérale — jamais réinterprétées. Structure reprise de
   design/template.html, qui reproduit un écran validé. Une classe par rôle visuel, en anglais. */

/* Jost, servie par Pass Pierre, jamais chargée depuis Google (design/brand.md § Typographie). Réservée aux documents et au Pass Pierre. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jost-300-V82V_nF.woff2") format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jost-400-AMPqkX-.woff2") format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jost-500-Rf4A02N.woff2") format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jost-700-JtmXzFe.woff2") format('woff2')}

/* design/brand.md § Couleurs d'interface et § Typographie */
:root{
  --ink:#101412;            /* Texte principal */
  --title-green:#2F7466;    /* Vert de titre */
  --muted:#5E645F;          /* Gris de texte */
  --line:#DEDED8;           /* Bordure de case */
  --white:#FFFEFA;          /* Fond de case */
  --mint:#DFF1EB;           /* Fond de case choisie ; bouton secondaire */
  --dark:#153F38;           /* Vert foncé : bouton principal, coche */
  --sel-border:#4E9789;     /* Vert soutenu : bordure et pictogramme sélectionnés, piste parcourue */
  --err:#B3261E;            /* Rouge d'erreur */
  --dis-bg:#EFEEE9;         /* Fond d'option désactivée */
  --dis-ink:#9A9D99;        /* Texte d'option désactivée */
  --track-dark:#5A5A56;     /* Gris de piste sombre */
  --pure-white:#FFFFFF;     /* Blanc */
  --grad:linear-gradient(to right,#F7F5F1,#CFE7DF);   /* Fond dégradé */
  --grad-end:#CFE7DF;       /* Côté vert d'eau du dégradé : survol du bouton secondaire */
  /* design/brand.md § Le Pass Pierre, « Les quatre couleurs propres au document » : ne portent aucun texte, et ne servent qu'au Pass Pierre. */
  --pp-rule:#E3E8E5;        /* Filet */
  --pp-flex-zone:#BFE0D5;   /* Zone de souplesse */
  --pp-min-handle:#8FC6B6;  /* Poignée du minimum */
  --pp-page:#EDEBE6;        /* Fond autour de la page */
  --font:Arial,Helvetica,sans-serif;
  --font-document:'Jost',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--grad);-webkit-font-smoothing:antialiased;min-height:100vh}
button,input{font-family:inherit;color:inherit}
a{color:var(--ink)}

/* ---------- site : en-tête et page ---------- */
.site-header{display:flex;align-items:center;padding:16px 20px}
.site-logo-link{display:inline-block;line-height:0}
.site-logo{height:60px;width:auto;display:block}   /* design/brand.md § Logo : 60 px en haut à gauche des pages du site */
.site-main{padding:0 20px 40px;max-width:960px;margin:0 auto}
.brand-block{display:flex;justify-content:center;align-items:center;min-height:60vh}
.brand-logo{width:min(320px,70vw);height:auto}

/* ---------- boutons (design/brand.md § Les boutons) ---------- */
.btn{display:inline-block;border:0;border-radius:11px;padding:17px 20px;font-size:15px;font-weight:900;text-decoration:none;cursor:pointer;text-align:center}
.btn-primary{background:var(--dark);color:var(--pure-white)}
.btn-secondary{background:var(--mint);color:var(--dark)}
.btn-secondary:hover{background:var(--grad-end)}
.btn-outline{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn-block{display:block;width:100%}

/* ---------- pages d'erreur ---------- */
.error-page{max-width:420px;margin:10vh auto 0;display:flex;flex-direction:column;gap:18px}
.error-heading{margin:0;font-size:28px;line-height:.98;letter-spacing:-.045em;font-weight:500;color:var(--ink)}
.error-text{margin:0;font-size:12.5px;line-height:1.35;color:var(--muted)}
/* Le titre et le texte courant d'une page du site qui n'est pas une erreur (conditions générales, compte, liens) : le
   rendu des pages d'erreur, sous leur propre classe (ARCH-0002 § 6.2, une classe par rôle visuel). */
.page-heading{margin:0;font-size:28px;line-height:.98;letter-spacing:-.045em;font-weight:500;color:var(--ink)}
.page-text{margin:0;font-size:12.5px;line-height:1.35;color:var(--muted)}

/* ---------- parcours : écran (design/template.html) ---------- */
.screen{min-height:100vh;max-width:420px;margin:0 auto;display:flex;flex-direction:column;background:var(--grad)}
.scroll{flex:1;padding:18px 20px 24px;display:flex;flex-direction:column}
.scroll.centered .content{margin:auto 0}
.top{height:26px;display:flex;align-items:center;flex:0 0 auto}
.logo{height:40px;width:auto;display:block}
/* UX-0011 § 5, « En-tête avec la pastille « PRO » » : fond de case choisie, vert foncé, à côté du logo ; le lien d'en-tête à droite. */
.pro-pill{margin:0 0 0 10px;padding:3px 10px;border-radius:999px;background:var(--mint);color:var(--dark);font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.3}
.top-link{margin-left:auto;font-size:14px}
.bar{-webkit-appearance:none;appearance:none;display:block;width:100%;height:4px;border:0;border-radius:4px;background:rgba(16,20,18,.10);margin:14px 0 0;overflow:hidden;flex:0 0 auto}
.bar::-webkit-progress-bar{background:transparent}
.bar::-webkit-progress-value{background:var(--ink);border-radius:4px}
.bar::-moz-progress-bar{background:var(--ink);border-radius:4px}
.content{padding-top:28px}

/* ---------- typographie du parcours ---------- */
/* L'écran de passage, centré dans la hauteur (PARCOURS.md § 3) ; dessin de 160 px, 200 px sur ordinateur. */
.content.centered{flex:1;display:flex;flex-direction:column;justify-content:center}
.passage{display:flex;flex-direction:column;align-items:center;text-align:center}
.passage-drawing{display:block;width:160px;height:auto;margin:0 0 25px}
.kicker-property{white-space:nowrap}
.kicker{margin:0 0 25px;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--title-green)}
.q{margin:0 0 25px;font-size:28px;line-height:.98;letter-spacing:-.045em;font-weight:500;color:var(--ink)}
.q em{font-style:normal;color:var(--title-green);display:block}
.q2{margin-top:40px}
.nw{white-space:nowrap}
.sub{margin:0 0 6px;font-size:12.5px;line-height:1.35;font-weight:400;color:var(--muted)}
.sub + .sub{margin-top:8px}
.sub strong{font-weight:700;color:var(--muted)}
.sub u{text-underline-offset:3px}
/* design/brand.md § Typographie (CEO/CPO, 2026-11-02 et 2026-11-03) : trois espaces égaux de 25 px — sous-titre → titre
   (.kicker), titre → texte (.q), texte → premières réponses (ci-dessous) ; une seconde question suit la même règle. */
.question.closing{margin-top:22px}
.sub + .question,.sub + .sel,.sub + .grid,.sub + .stack,.sub + .slider,.sub + .search,.sub + .field,.sub + .code,.sub + .recap,.sub + .dpe,.sub + .slabel{margin-top:25px}
.fam{margin:26px 0 10px;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sel>.fam:first-child{margin-top:0}
.slabel{margin:0 0 12px;font-size:12.5px;line-height:1.35;color:var(--ink)}
.slabel.gap{margin-top:28px}

/* ---------- options ---------- */
/* UX-0000 § 1, « Combien de cases par ligne » (CEO/CPO, 2026-11-03) : deux par ligne sur téléphone ; sur ordinateur,
   deux lignes jusqu'à dix cases, quatre par ligne au-delà (classe cols-N, GridColumnsExtension) ; la dernière ligne incomplète est centrée, ses cases à la largeur
   des autres. */
.grid{--gap:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.grid>*{flex:0 0 calc((100% - var(--gap)) / 2);min-width:0}
.stack{display:flex;flex-direction:column;gap:10px}
.stack + .stack,.grid + .stack,.stack + .grid,.grid + .grid{margin-top:10px}
.stack.after{margin-top:22px}
.opt{position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;cursor:pointer;
     display:flex;align-items:center;gap:12px;padding:16px 40px 16px 16px;text-align:left;transition:background .15s,border-color .15s}
/* Lu par les lecteurs d'écran seulement. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.opt:focus,.cta:focus,.btn:focus{outline:none}
.cta:focus-visible,.btn:focus-visible{box-shadow:0 0 0 3px rgba(78,151,137,.35)}
.opt:focus-visible{box-shadow:0 0 0 3px rgba(78,151,137,.35)}
/* UX-0000 § 6 : aucun contour au clic, toujours un contour au clavier. Les champs, dont l'input n'a pas de contour, le
   montrent sur leur case ; les autres boutons, liens et intitulés perdent celui du navigateur au clic seulement. */
.finput:focus-within,.search:focus-within{box-shadow:0 0 0 3px rgba(78,151,137,.35)}
.slider input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(78,151,137,.35)}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none}
.opt .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.opt .lbl{font-size:14px;line-height:1.3;font-weight:400;color:var(--ink)}
.opt .prec{font-size:12.5px;line-height:1.35;color:var(--muted)}
.opt .ck{position:absolute;top:9px;right:12px;font-size:14px;font-weight:700;color:var(--dark);opacity:0}
.opt .ico{flex:0 0 auto;display:block;color:var(--ink)}
.opt .ico svg{display:block;width:100%;height:100%}
.opt[aria-pressed="true"]{background:var(--mint);border-color:var(--sel-border)}
.opt[aria-pressed="true"] .ck{opacity:1}
.opt[aria-pressed="true"] .ico{color:var(--sel-border)}
.opt:disabled{cursor:default;background:var(--dis-bg);border-color:transparent}
/* État grisé (PARCOURS.md § 2, « Les deux gris ») : le rendu du désactivé, mais la réponse reste touchable. */
.opt.greyed{background:var(--dis-bg);border-color:transparent}
.opt.greyed .lbl,.opt.greyed .prec{color:var(--dis-ink)}
.opt:disabled .lbl,.opt:disabled .prec{color:var(--dis-ink)}
/* design/brand.md § Pictogrammes, « La couleur n'est pas dans le fichier » : le pictogramme d'une option désactivée ou
   grisée prend le gris de texte ; les deux traitements sont identiques à l'œil (PARCOURS.md § 2, « Les deux gris »). */
.opt:disabled .ico,.opt.greyed .ico{color:var(--muted)}
.opt:disabled .drawing{filter:grayscale(1);opacity:.35}
.card .ico{width:28px;height:28px}
.card.wide{justify-content:center;text-align:center;padding:15px 40px}
.card.wide .txt{align-items:center}
.band{flex-direction:column;justify-content:center;text-align:center;gap:8px;padding:16px 40px;min-height:110px}
.band .txt{align-items:center}
.band .ico{width:40px;height:40px}
.band.notxt{padding:15px 40px}
/* UX-0009 § 3 : 104 px de haut au moins, 146 px sur une case à précision ; 128 px au moins sur ordinateur (UX-0000 § 1). */
.pill{flex-direction:column;justify-content:flex-start;text-align:center;gap:8px;padding:16px 10px 14px;min-height:104px}
.pill:has(.prec){min-height:146px}
.pill .txt{align-items:center}
.pill .ico{width:36px;height:36px}
.pill .ck{right:10px}
.tile{flex-direction:column;justify-content:flex-start;text-align:center;gap:6px;padding:12px 10px 14px}
.tile .txt{align-items:center}
.drawing{width:100%;height:66px;object-fit:contain;display:block;margin-bottom:4px}
.grid.tiles.has-err,.stack.has-err,.grid.has-err,.sel.has-err,.dpe.has-err{outline:1.5px solid var(--err);outline-offset:6px;border-radius:18px}
.err{margin:16px 0 0;font-size:12.5px;color:var(--err)}
.note{margin:10px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted)}
/* Un refus (UX-0000 § 5) : une saisie à corriger dans le rouge d'erreur, une limite du parcours dans le gris de texte. */
.refusal{margin:12px 0 0;font-size:12.5px;line-height:1.35}
.refusal-input{color:var(--err)}
.refusal-limit{color:var(--muted)}
.actions .refusal{margin:0 0 10px}

/* ---------- champs ---------- */
.field{display:block;margin-top:16px}
.flabel{display:block;font-size:12.5px;color:var(--ink);margin-bottom:6px}
.finput{display:flex;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:0 12px;height:48px}
.finput.has-err,.search.has-err{border-color:var(--err)}
.finput input{border:0;background:transparent;width:100%;font-size:14px;outline:none}
.finput.withbtn b{font-size:11.5px;font-weight:700;color:var(--dark);white-space:nowrap;padding-left:8px}
.code{display:flex;gap:8px;justify-content:center}
.cbox{width:44px;height:54px;background:var(--white);border:1px solid var(--line);border-radius:12px}
.links-inline{display:flex;justify-content:center;gap:22px;margin:18px 0 0;font-size:12.5px}
.links-inline a,.u{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* PARCOURS.md § 2, « Liens d'action » : un lien d'action écrit en <button> n'en garde ni le fond, ni la bordure, ni la
   police du navigateur (recette, E9). */
button.u{border:0;background:transparent;padding:0;font:inherit;cursor:pointer}
.search{display:flex;justify-content:space-between;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:12px;height:48px;padding:0 14px;font-size:14px;color:var(--muted)}
.search input{border:0;background:transparent;width:100%;font-size:14px;outline:none;color:var(--ink)}
/* E7 : le champ désactivé tant qu'une commune est choisie (PARCOURS.md, E7 ; CEO/CPO, 2026-11-03). */
.search.disabled{background:var(--dis-bg);border-color:transparent;color:var(--dis-ink)}
.search.disabled input,.search.disabled b{color:var(--dis-ink)}
.search.disabled input::placeholder{color:var(--dis-ink)}
/* L'écran des quartiers : 25 px entre la recherche et la première réponse (PARCOURS.md, écran 5 ; CEO/CPO, 2026-11-03). */
.search + .grid{margin-top:25px}
.search b{font-size:20px;font-weight:400;color:var(--ink)}
.results{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.result{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:14px;text-align:left;cursor:pointer}
.result:disabled{background:var(--dis-bg);color:var(--dis-ink);border-color:transparent;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span,.chip{background:var(--mint);border-radius:12px;padding:9px 12px;font-size:12.5px;display:inline-flex;gap:8px;align-items:center}
.chips i,.chip i{font-style:normal;color:var(--muted);margin-left:6px}
.chip button{border:0;background:transparent;font-size:14px;cursor:pointer;padding:0;color:var(--ink)}
/* « Votre sélection » (UX-0000 § 6, « Pastilles de sélection » ; CEO/CPO, 2026-11-02 et 2026-11-03) : une ligne par
   commune, dans une bulle verte — fond de case choisie, bordure vert soutenu, coins de case ; le lien sur la même ligne,
   souligné en texte principal, la croix au bout ; pas de coche. */
.city-lines{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.city-line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:4px;padding:12px 16px;background:var(--mint);border:1px solid var(--sel-border);border-radius:16px;font-size:14px;color:var(--ink)}
.city-line .as-link{font-size:12.5px;color:var(--ink)}
.city-remove{margin-left:auto;border:0;background:transparent;font-size:16px;line-height:1;cursor:pointer;padding:0 2px;color:var(--ink)}
.city-localities{flex-basis:100%;order:1;font-size:12.5px;color:var(--muted)}

/* ---------- récapitulatif ---------- */
.recap{display:flex;flex-direction:column;gap:10px}
.rsec{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:0 16px}
.rhead{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-size:12px;font-weight:500;text-transform:uppercase;color:var(--ink);width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:0}
.rhead i{font-style:normal;color:var(--muted);font-weight:400;text-transform:none}
/* PARCOURS.md § 6 : titre de section en majuscules, chevron devant ; <summary> sans son triangle natif. */
.rhead{list-style:none;gap:12px}
.rhead::-webkit-details-marker{display:none}
/* Les titres de catégorie, dans le vert de titre (PARCOURS.md § 6 ; CEO/CPO, 2026-11-02). */
.rtitle{display:flex;align-items:center;gap:10px;color:var(--title-green)}
.rtitle::before{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.rsec[open] .rtitle::before{transform:rotate(45deg)}
.rhead a{font-size:12.5px;font-weight:400;text-transform:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rsec[open]{padding-bottom:4px}
.rprec{display:block;font-size:12.5px;line-height:1.35;color:var(--muted)}
.rrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:12px 0}
.rrow div{display:flex;flex-direction:column;gap:3px}
.rk{font-size:12.5px;color:var(--muted)}
.rv{font-size:14px;color:var(--ink)}
.rv.empty{color:var(--muted)}
.rrow a,.rrow button.link{font-size:12.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;border:0;background:transparent;cursor:pointer;padding:0}
.rrow.updated{background:var(--mint);margin:0 -16px;padding-left:16px;padding-right:16px;animation:recap-updated 1.2s ease-out .8s forwards}
/* PARCOURS.md § 6 : la marque de la mise à jour est brève, puis la ligne redevient comme les autres. */
/* La marque est le fond de la ligne, sans aucun mot (PARCOURS.md § 6 : « Aucun message, aucun bandeau ») ; .rmark ne
   porte rien de visible. */
.rmark{display:none}
@keyframes recap-updated{to{background:transparent}}
.rsec{scroll-margin-top:16px}
.rsearch{margin:18px 0 8px;font-size:12px;font-weight:500;text-transform:uppercase;color:var(--ink)}

/* ---------- échelle énergétique (design/brand.md § Couleurs réglementaires) ---------- */
.dpe{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dpe-c{position:relative;height:48px;border:0;border-radius:10px;background:var(--c);color:var(--pure-white);font-size:15px;font-weight:700;cursor:pointer}
.dpe-c[aria-pressed="true"]{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--ink)}
.dpe-c.grey{background:var(--dis-bg);color:var(--dis-ink)}
/* UX-0000 § 6, « L'échelle énergétique » : la cible choisie porte, avec l'anneau, une coche alignée à droite, dans la couleur du texte de la cible. */
.dpe-c .ck{position:absolute;top:50%;right:5px;transform:translateY(-50%);font-size:11px;font-weight:700;color:inherit;opacity:0}
.dpe-c[aria-pressed="true"] .ck{opacity:1}
.dpe-c.a{--c:#2E7D46}.dpe-c.b{--c:#4E9789}.dpe-c.c{--c:#7FAE5A}.dpe-c.d{--c:#C9B23C}.dpe-c.e{--c:#D6913A}.dpe-c.f{--c:#C96A33}.dpe-c.g{--c:#B3261E}
.dpe-leg{display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;color:var(--muted)}

/* ---------- curseurs ---------- */
.slider{margin-top:6px}
.val{display:block;text-align:center;font-size:40px;font-weight:500;letter-spacing:-.04em;line-height:1;margin-bottom:22px;color:var(--ink)}
.slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;margin:0;
  background:linear-gradient(to right,var(--sel-border) 0 var(--p,40%),var(--track-dark) var(--p,40%) 100%);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--sel-border);border:4px solid var(--white);box-shadow:0 2px 6px rgba(16,20,18,.25);cursor:pointer;pointer-events:auto}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--sel-border);border:4px solid var(--white);box-shadow:0 2px 6px rgba(16,20,18,.25);cursor:pointer;pointer-events:auto}
.duo{position:relative;height:28px}
.duo input[type=range]{position:absolute;left:0;right:0;top:11px;background:transparent;pointer-events:none}
.duo::before{content:"";position:absolute;left:0;right:0;top:11px;height:6px;border-radius:6px;
  background:linear-gradient(to right,var(--track-dark) 0 var(--a,10%),var(--sel-border) var(--a,10%) var(--b,30%),var(--track-dark) var(--b,30%) 100%)}
.bounds{display:flex;justify-content:space-between;margin-top:12px;font-size:12.5px;color:var(--muted)}
.slider + .sel,.slider + .stack{margin-top:16px}
/* Désactivé, ou grisé sous un bandeau (PARCOURS.md § 2, « Les deux gris ») — le grisé reste touchable : les couleurs
   d'une option désactivée, jamais une opacité (UX-0000 § 6, « Curseurs » ; design/brand.md, « Les éléments ») ; la piste
   entière et la poignée, la valeur et ses bornes dans le texte d'option désactivée. */
.slider.disabled{pointer-events:none}
.slider.disabled input[type=range],.slider.greyed input[type=range],.slider.greyed .duo::before{background:var(--dis-ink)}
.slider.greyed .duo input[type=range]{background:transparent}
.slider.disabled input[type=range]::-webkit-slider-thumb,.slider.greyed input[type=range]::-webkit-slider-thumb{background:var(--dis-ink)}
.slider.disabled input[type=range]::-moz-range-thumb,.slider.greyed input[type=range]::-moz-range-thumb{background:var(--dis-ink)}
.slider.disabled .val,.slider.greyed .val,.slider.disabled .bounds,.slider.greyed .bounds{color:var(--dis-ink)}
/* Pas encore réglé (PARCOURS.md § 2, « Curseurs ») : piste entièrement dans le gris de piste sombre, sans portion verte. */
.slider.unset input[type=range],.slider.unset .duo::before{background:var(--track-dark)}
.duo-slider.unset .duo input[type=range]{background:transparent}
.band.ord{padding:14px 40px 16px;gap:6px}
.band.ord .drawing{width:100%;max-width:260px;height:96px;margin:0}
.field + .sub{margin-top:14px}
.search + .sel{margin-top:16px}

/* ---------- entrée (A1, A2) : case à cocher et champ du code ---------- */
.check{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:12.5px;line-height:1.35;color:var(--ink);cursor:pointer}
.check input{margin:1px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:var(--dark)}
/* UX-0000 § 5 ; UX-0011 § 6, 4 : sans la case, c'est la case qui prend la bordure du rouge d'erreur (recette, E10). */
.check.has-err input{outline:2px solid var(--err);outline-offset:1px;border-radius:3px}
.code-input input{text-align:center;font-size:24px;letter-spacing:.35em}
.links.links-center{justify-content:center;gap:22px;flex-wrap:wrap}
.links .u.off,.links-inline .u.off{color:var(--dis-ink);text-decoration-color:var(--dis-ink);cursor:default}
.error-page form{display:flex;flex-direction:column;gap:18px}
.error-page form.actions-row{flex-direction:row;flex-wrap:wrap;gap:12px;margin-top:0}

/* ---------- bloc d'action ---------- */
.actions{position:sticky;bottom:0;padding:14px 20px 18px;background:var(--grad);box-shadow:0 -12px 18px -14px rgba(16,20,18,.18)}
.cta{width:100%;border:0;border-radius:11px;background:var(--dark);color:var(--pure-white);font-size:15px;font-weight:900;padding:17px 20px;cursor:pointer}
/* design/brand.md, « Les boutons » : « Continuer » grisé prend le fond et le texte d'option désactivée, jamais une opacité. */
/* « off » : grisé mais touchable — touché, il dit pourquoi il n'avance pas (UX-0000 § 5 ; CEO/CPO, 2026-11-03). */
.cta:disabled,.cta.off{background:var(--dis-bg);color:var(--dis-ink);cursor:default}
.links{display:flex;justify-content:space-between;margin-top:14px;font-size:14px}
.links a,.links button{color:var(--ink);text-decoration:none;border:0;background:transparent;font-size:14px;cursor:pointer;padding:0}
.links a.u,.links button.u{text-decoration:underline}
.links.links-head{margin:0 0 12px}
.as-link{border:0;background:transparent;padding:0;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.reassure{margin:12px 0 0;text-align:center;font-size:12.5px;line-height:1.35;color:var(--muted)}

/* ---------- écrans Autour du bien ---------- */
.souple .opt{width:100%}
/* UX-0000 § 1 : la dernière ligne incomplète d'une grille de temps est centrée (recette N2). */
.tchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tchips.c3>*{flex:0 0 calc((100% - 16px) / 3)}
.tchips.c4>*{flex:0 0 calc((100% - 24px) / 4)}
.tchip{position:relative;background:var(--white);border:1px solid var(--line);border-radius:12px;cursor:pointer;font-family:inherit;font-size:14px;line-height:1.3;padding:11px 4px;text-align:center;color:var(--ink);transition:background .15s,border-color .15s}
.tchip:focus{outline:none}
.tchip:focus-visible{box-shadow:0 0 0 3px rgba(78,151,137,.35)}
.tchip .ck{position:absolute;top:2px;right:6px;font-size:11px;font-weight:700;color:var(--dark);opacity:0}
.tchip[aria-pressed="true"]{background:var(--mint);border-color:var(--sel-border)}
.tchip[aria-pressed="true"] .ck{opacity:1}

/* ---------- environnement local (ARCH-0007 § 4) ---------- */
.dev-banner{background:var(--mint);border:1px solid var(--sel-border);border-radius:16px;padding:16px;margin:0 auto 24px;max-width:420px;display:flex;flex-direction:column;gap:12px}
.dev-banner-title{margin:0;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--title-green)}

/* ---------- Le bandeau d'une demande de sécurité en cours (UX-0011, « Le changement d'adresse différé ») : sans croix ---------- */
.security-banner{max-width:880px;margin:0 auto 16px;padding:14px 18px;background:var(--mint);border:1px solid var(--sel-border);border-radius:16px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.security-banner p{margin:0;font-size:14px;line-height:1.5}
/* Le bandeau d'une connexion par code de secours (UX-0011 § 5, 2) : sur le fond de la page, avec une croix. */
.notice-banner{max-width:880px;margin:0 auto 16px;padding:0 18px;display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.notice-banner p{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.notice-close{font-size:16px;line-height:1;text-decoration:none;color:var(--ink)}

/* ---------- La fenêtre d'un geste du compte (UX-0011 § 6), rendue en page ---------- */
.account-window{max-width:480px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:24px}
.actions-row{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.actions-stack{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:24px}

/* ---------- Mon compte (UX-0011 § 3 ; maquette 2026-10-26-site-v78, .db-panel et .db-line) ---------- */
.account{max-width:880px;margin:0 auto}
/* Le titre en deux tons, comme le titre de question (UX-0000 § 6 ; design/brand.md § Typographie) : le début en texte
   principal, la fin en vert de titre, à la ligne, sans italique. */
.account-heading{margin:0 0 18px;font-size:28px;line-height:.98;letter-spacing:-.045em;font-weight:500;color:var(--ink)}
.account-heading em{font-style:normal;color:var(--title-green);display:block}
.account-panel{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:6px 18px}
.account-line{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.account-line:first-child{border-top:0}
.account-line b{font-size:14px;font-weight:700}
.account-line .v{grid-column:1 / -1;grid-row:2;font-size:14px;color:var(--muted);line-height:1.5}
.account-line form{grid-column:2;grid-row:1}
/* design/brand.md, « Les liens sont dans la couleur du texte » ; UX-0000 § 6, « Liens d'action » : soulignés, sans gras, jamais dans un vert. */
.account-link{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font-size:14px;font-weight:400;text-decoration:underline;text-underline-offset:3px;font-family:inherit}

/* ---------- documents et Pass Pierre (design/brand.md § Typographie) ---------- */
body.pierre-document{background:var(--pure-white);color:var(--ink);font-family:var(--font-document)}

/* ---------- ordinateur (UX-0000 § 1, « Sur ordinateur » ; design/template.html) ----------
   À partir de 768 px : colonne de 880 px (CEO/CPO, 2026-11-03), marges de 24 px, cases en grille sur deux, trois ou
   quatre colonnes selon leur nombre, dessin de 96 px. Le reste prend la largeur de la colonne. En fin de feuille, pour l'emporter sur les règles du téléphone. */
@media (min-width:768px){
  .screen{max-width:880px}
  .scroll{padding:28px 24px 24px}
  .top{height:40px}
  .content{padding-top:36px}
  .grid.cols-3>*{flex-basis:calc((100% - 2 * var(--gap)) / 3)}
  .grid.cols-4>*{flex-basis:calc((100% - 3 * var(--gap)) / 4)}
  .grid.cols-5>*{flex-basis:calc((100% - 4 * var(--gap)) / 5)}
  .grid.cols-1>*{flex-basis:calc((100% - var(--gap)) / 2)}
  .grid.tiles{--gap:12px}
  .tile{padding:16px 14px 18px}
  .drawing{height:96px;margin-bottom:6px}
  .actions{padding:16px 24px 24px}
  /* design/brand.md § Pictogrammes : 40 px dans une case en grille sur ordinateur, 36 px sur téléphone. */
  .pill .ico{width:40px;height:40px}
  .pill{min-height:128px}
  .passage-drawing{width:200px}
}
/* B4, B5 : la question des temps, sous la liste, sur téléphone comme sur ordinateur (PARCOURS.md, écrans 5 ter et 5 quater ;
   CEO/CPO, 2026-11-03) ; un bloc par carte cochée. */
.times-block{margin-top:22px}
.times-question .sub + .times-block{margin-top:25px}
.times-head{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:14px;color:var(--ink)}
.times-head .ico{width:28px;height:28px;display:block}
.times-head .ico svg{display:block;width:100%;height:100%}

/* ---------- Les codes de secours (UX-0011 § 6, « Activer la double authentification », 4) : deux colonnes ---------- */
.backup-codes{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;letter-spacing:.06em}
.backup-codes-actions{display:flex;flex-wrap:wrap;gap:10px}
/* « Imprimer » (ARCH-0002 § 6.1, print) : le titre et les dix codes, rien d'autre — ni en-tête, ni pied, ni boutons. */
@media print{
  body>:not(.site-main){display:none}
  .site-main>:not(.backup-codes-window):not(.poster-window){display:none}
  .poster-window>:not(.poster){display:none}
  .poster{border:0;box-shadow:none}
  .backup-codes-window>:not(.account-heading):not(.backup-codes){display:none}
}

/* ---------- « Imprimer mon QR code » (UX-0011 § 6) : l'affichette et la carte de visite ---------- */
.poster{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:var(--pure-white);border:1px solid var(--line);border-radius:22px;padding:28px;margin:18px 0}
.poster-card{max-width:340px}
.poster .logo{height:44px;width:auto}
.poster .qr-code svg{margin:0 auto}
.poster-title{margin:0;font-size:24px;font-weight:700;color:var(--title-green)}
.poster-text{margin:0;font-size:15px;line-height:1.45}
.poster-link{margin:0;font-size:13px;color:var(--muted);word-break:break-all}
.poster-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- L'activation de la double authentification (UX-0011 § 6, 2) : le code QR et la clé en texte ---------- */
.qr-code{margin:18px 0}
.qr-code svg{display:block;width:240px;max-width:100%;height:auto}
.qr-key{margin:0 0 18px}
.qr-key>summary{list-style:none;cursor:pointer}
.qr-key-value{font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;letter-spacing:.06em;user-select:all}
.account-confirm{grid-column:2;grid-row:1;justify-self:end}
.account-confirm[open]{grid-column:1 / -1;grid-row:auto;justify-self:stretch}
.account-line .hint{grid-column:1 / -1;font-size:12.5px;color:var(--muted);margin:0}
.account-confirm>summary{list-style:none;display:inline}
.account-confirm>summary::-webkit-details-marker{display:none}
.account-confirm p{margin:12px 0 0;font-size:14px;line-height:1.5}

/* ---------- espace acquéreur : en-tête, menu, tableau de bord (UX-0011 § 3) ---------- */
/* L'espace du professionnel a le même rendu (UX-0011 § 6) : le logo, la pastille « PRO », puis le menu à droite. */
.pro-pill{margin-left:10px;padding:3px 10px;border-radius:999px;background:var(--dark);color:var(--pure-white);font-size:11px;font-weight:700;letter-spacing:.1em}
.pro-header .buyer-menu{margin-left:auto}
.buyer-header{justify-content:space-between}
.buyer-menu{position:relative}
.buyer-menu>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.buyer-menu>summary::-webkit-details-marker{display:none}
.buyer-initials{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--mint);color:var(--dark);font-weight:700;font-size:12.5px}
.buyer-who{color:var(--muted)}
/* Sur téléphone, les initiales seules : le nom et l'adresse ne débordent jamais (recette FEAT-0021, E1). */
@media (max-width:640px){.buyer-who{display:none}.buyer-menu-list{right:0;max-width:calc(100vw - 32px)}}
.buyer-menu-list{position:absolute;right:0;top:calc(100% + 8px);background:var(--white);border:1px solid var(--line);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:10px;min-width:180px;z-index:2}
.buyer-menu-list a{font-size:14px}
.buyer-nav{max-width:880px;margin:0 auto 20px;padding:0 16px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.buyer-dashboard{max-width:880px;margin:0 auto;padding:0 16px 40px}
.buyer-pill{display:inline-block;margin:0 0 20px;padding:6px 14px;border-radius:999px;background:var(--mint);color:var(--dark);font-size:12.5px}
.buyer-counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.buyer-counter{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.buyer-counter b{font-size:28px}
.buyer-counter span{font-size:12.5px;color:var(--muted)}
.buyer-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:12px}
.buyer-block{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.buyer-block .kicker{margin-bottom:6px}
.buyer-block .page-text{margin:0}
/* Recette 2026-11-08 (E1) : le lien de 64 caractères et le message à copier passent à la ligne dans leur carte, jamais de défilement horizontal. */
.buyer-block{min-width:0}
.buyer-block>*{min-width:0;max-width:100%}
.buyer-block .page-text,.buyer-block pre{overflow-wrap:anywhere}
.buyer-block pre{white-space:pre-wrap;font-family:inherit}
.buyer-block-share{background:var(--grad)}
.buyer-block-wide{width:100%}
.onboarding{position:relative;margin-bottom:12px}
.onboarding-steps{margin:0;padding-left:20px;display:grid;gap:12px}
.onboarding-steps li{display:flex;flex-direction:column;gap:2px}
.buyer-fact{margin:0;font-size:14px}
/* Les liens des blocs, à la taille d'une réponse dans une case (recette FEAT-0021, liens en 16 px). */
.buyer-block a.u{font-size:14px}
.buyer-fact span{color:var(--muted)}
.buyer-percent{margin:0;font-size:28px;font-weight:500;color:var(--title-green)}
.buyer-to-specify{margin:0;padding-left:18px;font-size:14px;line-height:1.6}
.buyer-picto{display:block;width:40px;height:40px;color:var(--ink)}
.buyer-picto svg{display:block;width:100%;height:100%}
.buyer-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;width:100%}
/* « Mes Pass Pierre » (UX-0011 § 3, FEAT-0034) */
.buyer-pass-line{margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.buyer-pass-cards{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.buyer-pass-card{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:16px 20px;text-decoration:none;color:var(--ink)}
.buyer-pass-card:hover{border-color:var(--sel-border)}
.buyer-pass-drawings{display:flex;gap:4px;flex:0 0 auto}
.buyer-pass-drawings img{height:48px;width:auto;display:block}
.buyer-pass-text{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0}
.buyer-pass-name{font-size:14px}
.buyer-pass-date,.buyer-pass-state{font-size:12.5px;color:var(--muted)}

/* ---------- le Pass Pierre du professionnel (UX-0020 ; design/brand.md § Le Pass Pierre) ----------
   Trois tailles dans le corps : 15 px (titre de bloc), 13 px (réponses), 11 px (étiquettes) ; celles de l'en-tête n'y servent qu'à lui. */
.pp{font-family:var(--font-document);font-size:13px;line-height:1.3;color:var(--ink);max-width:880px;margin:0 auto;padding:16px;background:var(--pure-white);border-radius:18px}
.pp-hero{display:grid;grid-template-columns:1fr;gap:0 16px;background:var(--grad);border:1px solid var(--pp-rule);border-radius:18px;padding:18px 20px 0;break-inside:avoid}
.pp-logo{height:40px;width:auto;display:block;margin-bottom:14px}
.pp-brand{margin:0;font-size:50px;font-weight:700;letter-spacing:-.025em;line-height:1;color:var(--ink)}
.pp-kind{margin:4px 0 0;font-size:34px;font-weight:500;letter-spacing:-.01em;line-height:1.1;color:var(--title-green)}
.pp-type{margin:12px 0 0;font-size:48px;font-weight:700;letter-spacing:-.025em;line-height:1.02;color:var(--dark)}
.pp-type.long{font-size:36px;line-height:1.05}
.pp-type.xlong{font-size:30px}
.pp-drawings{display:flex;gap:16px;align-items:flex-end;justify-content:flex-end;margin-top:12px}
.pp-drawings img{max-width:100%;height:auto;max-height:140px;display:block}
.pp-date{display:inline-flex;align-items:center;margin-top:12px;background:var(--mint);color:var(--dark);font-size:11px;font-weight:500;border-radius:999px;padding:5px 12px}
.pp-ident{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;border-top:1px solid var(--pp-rule);margin-top:12px;padding:13px 0 14px;font-size:13px}
.pp-ident>*{padding:0 12px;border-left:1px solid var(--pp-rule)}
.pp-ident>*:first-child{padding-left:0;border-left:0}
.pp-initials{width:36px;height:36px;border-radius:50%;background:var(--mint);color:var(--dark);display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-size:13px;padding:0}
.pp-ident b{font-weight:500}
.pp-legend{display:flex;gap:22px;flex-wrap:wrap;margin:9px 4px 8px;font-size:11px;color:var(--muted)}
.pp-dot{display:inline-block;width:18px;height:11px;border-radius:6px;vertical-align:-1px;margin-right:7px}
.pp-dot.chosen{background:var(--mint);box-shadow:inset 0 0 0 1px var(--line)}
.pp-dot.flex{background:var(--pure-white);outline:1.5px dotted var(--sel-border);outline-offset:-1.5px}
.pp-block{display:grid;grid-template-columns:1fr;border:1px solid var(--pp-rule);border-radius:14px;margin-bottom:6px;background:var(--pure-white);break-inside:avoid}
.pp-head{display:flex;align-items:center;gap:10px;padding:10px 12px}
.pp-num{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--mint);color:var(--dark);font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center}
.pp-pic{width:28px;height:28px;flex:0 0 28px;color:var(--sel-border)}
.pp-pic svg{display:block;width:100%;height:100%}
.pp-title{margin:0;font-size:15px;font-weight:500;line-height:1.15;color:var(--ink)}
.pp-body{padding:10px 14px;min-width:0;align-self:center;border-top:1px solid var(--pp-rule)}
.pp-rows{display:flex;flex-wrap:wrap;gap:10px 0}
.pp-row{padding:0 14px;border-left:1px solid var(--pp-rule);min-width:0}
.pp-row:first-child{padding-left:0;border-left:0}
.pp-sub{margin:0 0 5px;font-size:11px;font-weight:400;color:var(--muted)}
.pp-sub.after{margin:5px 0 0}
.pp-pills{display:flex;flex-wrap:wrap;gap:5px}
.pp-pill{display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:5px 12px;font-size:13px;font-weight:500;line-height:1.2;color:var(--dark);background:var(--mint);box-shadow:inset 0 0 0 1px var(--line)}
.pp-pill.flex{background:var(--pure-white);box-shadow:none;outline:1.5px dotted var(--sel-border);outline-offset:-1.5px}
.pp-pill small{font-size:11px;font-weight:400;color:var(--muted)}
.pp .rv{display:inline-flex;align-items:center;flex-wrap:wrap;gap:3px 7px;border-radius:9px;padding:5px 12px;font-size:13px;font-weight:500;line-height:1.2;color:var(--dark);background:var(--mint);box-shadow:inset 0 0 0 1px var(--line)}
.pp .rv.flex{background:var(--pure-white);box-shadow:none;outline:1.5px dotted var(--sel-border);outline-offset:-1.5px}
.pp .rv.empty{color:var(--muted)}
.pp .rprec{font-size:11px;font-weight:400;color:var(--muted)}
.pp-band{margin:16px 0 8px;padding:10px 14px;border-radius:14px;background:var(--mint);font-size:22px;font-weight:500;letter-spacing:-.01em;color:var(--ink);break-after:avoid}
.pp-change-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pp-change{display:flex;flex-direction:column;gap:4px}
.pp-change .pp-pills{align-items:center}
.pp-cities{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.pp-state{display:inline-flex;align-items:center;gap:6px;background:var(--mint);color:var(--dark);font-size:11px;font-weight:500;border-radius:999px;padding:5px 12px}
.pp-footer{margin:10px 4px 0;font-size:11px;color:var(--muted)}
/* FEAT-0008 : le flou est dessiné sur des valeurs neutres ; aucune réponse n'est dans le HTML, le flou n'est qu'un dessin. */
.pp-pill.blurred,.blurred{filter:blur(5px);user-select:none;pointer-events:none}
.pp-label-blur{display:inline-block}
@media (min-width:720px){
  .pp-hero{grid-template-columns:1fr minmax(240px,40%)}
  .pp-hero>.pp-ident{grid-column:1/-1}
  .pp-block{grid-template-columns:230px 1fr}
  .pp-body{border-top:0;border-left:1px solid var(--pp-rule)}
}