/* Le parcours guidé (lot UX-1, 29/09/2026) : une colonne, une question, un champ, un bouton plein largeur en bas.
   L'identité du produit — blanc, gris chaud, UN accent vermillon, Bricolage pour les titres, Archivo pour le reste. */
/* La police est DÉCLARÉE ici, en tête (feu vert du 28/09, O21) : sans @font-face, le premier écran après la création
   s'affichait dans la police de secours du téléphone. Même fichier que la coque et l'atelier. */
@font-face{font-family:Archivo;src:url('/statique/demo/archivo-fr.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Bricolage;src:url('/statique/demo/bricolage-fr.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{--g-fond:#fff;--g-sourd:#F6F5F1;--g-encre:#111113;--g-doux:#45464E;--g-ligne:#E8E6E0;--g-ligne2:#D6D3CB;--g-accent:#D23C25;--g-accent-fonce:#AE2E1A;--g-titre:Bricolage,Archivo,system-ui,sans-serif;--g-police:Archivo,system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--g-fond);color:var(--g-encre);font:400 16px/1.5 var(--g-police);-webkit-font-smoothing:antialiased}
.lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Une colonne, la largeur d'un téléphone, même au bureau : le bouton est en bas de l'écran quand le contenu est court,
   après le contenu quand il est long (la grille des photos). */
.guide{display:flex;flex-direction:column;min-height:100svh;width:min(100%,520px);margin:0 auto;padding:max(18px,env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))}
.guide-tete{display:flex;align-items:center;gap:6px;min-height:28px;margin-bottom:26px}
.guide-compte{margin:0;font-size:13.5px;font-weight:600;color:var(--g-doux);letter-spacing:.01em}
/* LA FLÈCHE ← (lot UX-3 « parcours », 29/09 — « je ne peux jamais faire retour ») : en haut à gauche de chaque écran du guide et de
   la porte, 44 px pour le pouce, alignée sur le bord du texte. Un lien : l'historique du navigateur suit. */
.guide-retour,.acces-retour{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-12px;border-radius:50%;color:var(--g-encre);text-decoration:none;font-size:24px;line-height:1}
.guide-retour:hover,.acces-retour:hover{background:var(--g-sourd)}
.guide-retour:focus-visible,.acces-retour:focus-visible{outline:3px solid var(--g-encre);outline-offset:2px}
h1{margin:0 0 8px;font:600 clamp(28px,8vw,36px)/1.12 var(--g-titre);letter-spacing:-.03em;text-wrap:balance}
.guide-aide{margin:0 0 22px;color:var(--g-doux);font-size:16.5px}
.guide-forme{display:flex;flex-direction:column;flex:1;gap:14px}
.guide-forme input[type=tel],.guide-forme input[type=email],.guide-forme textarea{width:100%;min-height:58px;padding:15px 18px;border:1.5px solid var(--g-ligne2);border-radius:16px;background:var(--g-fond);color:inherit;font:inherit;font-size:18px}
.guide-forme textarea{resize:none;line-height:1.35;min-height:92px}
.guide-forme input:focus,.guide-forme textarea:focus{outline:0;border-color:var(--g-encre);box-shadow:0 0 0 4px #D23C2522}
.guide-forme input::placeholder,.guide-forme textarea::placeholder{color:#8a8a86}
.guide-forme [aria-invalid=true]{border-color:var(--g-accent)}
/* L'erreur, EN LIGNE, sous le champ : elle dit quoi faire (jamais un bandeau loin du champ). */
.guide-erreur{margin:-4px 0 0;color:var(--g-accent-fonce);font-size:14.5px;font-weight:600;line-height:1.4}
/* Les trois réponses de « où vous travaillez » : de grandes cartes, une seule cochée, la coche à droite. */
.guide-choix{border:0;margin:0;padding:0;display:grid;gap:10px}
.guide-carte{position:relative;display:block;cursor:pointer}
.guide-carte input{position:absolute;opacity:0;width:1px;height:1px}
.guide-carte span{display:flex;align-items:center;min-height:62px;padding:0 18px;border:1.5px solid var(--g-ligne2);border-radius:16px;font-size:17px;font-weight:500}
.guide-carte span::after{content:"";margin-left:auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--g-ligne2);background:var(--g-fond)}
.guide-carte input:checked+span{border-color:var(--g-encre);box-shadow:inset 0 0 0 1px var(--g-encre)}
.guide-carte input:checked+span::after{border:7px solid var(--g-accent)}
.guide-carte input:focus-visible+span{outline:3px solid var(--g-encre);outline-offset:2px}
/* Les photos : HUIT vignettes du thème qu'on touche (lot UX-2 « photos », 29/09), deux colonnes, celle qui ouvre le site déjà
   cochée — le seul accent vermillon de l'écran avant le bouton. En 3:2 et non 4:3 : quatre rangées doivent laisser la ligne
   « Vos propres photos » et le bouton « Suivant » visibles sans défiler sur un téléphone de 844 px. */
.guide-images{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.guide-image{position:relative;display:block;cursor:pointer}
.guide-image input{position:absolute;opacity:0;width:1px;height:1px}
.guide-image img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;border:3px solid transparent;background:var(--g-sourd)}
.guide-image input:checked+img{border-color:var(--g-accent)}
.guide-image input:focus-visible+img{outline:3px solid var(--g-encre);outline-offset:2px}
.guide-note-photos{margin:-2px 0 0;text-align:left;text-wrap:pretty}
/* Les gestes : UN bouton plein largeur, « Plus tard » en texte dessous. Jamais trois. Rien d'animé sur les boutons. */
.guide-gestes{margin-top:auto;padding-top:26px;display:grid;gap:4px;justify-items:center}
.guide-suivant{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:0 24px;border:0;border-radius:999px;background:var(--g-accent);color:#fff;font:600 17px/1 var(--g-police);text-decoration:none;cursor:pointer}
.guide-suivant:hover{background:var(--g-accent-fonce)}
.guide-suivant:focus-visible{outline:3px solid var(--g-encre);outline-offset:3px}
.guide-plus-tard{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:0;background:none;color:var(--g-doux);font:500 15.5px/1 var(--g-police);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.guide-plus-tard:hover{color:var(--g-encre)}
.guide-note{margin:6px 0 0;color:var(--g-doux);font-size:13.5px;line-height:1.45;text-align:center;text-wrap:balance}
@media(prefers-reduced-motion:no-preference){
 .guide-suivant,.guide-carte span,.guide-image img{transition:background-color .15s,border-color .15s,box-shadow .15s}
 h1,.guide-aide{animation:guide-entre .2s ease-out both}
 @keyframes guide-entre{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
 /* D'un écran à l'autre, un fondu court (le site s'y prête déjà : composition.css) — jamais un saut sec, jamais une transition
    « sautée » que le navigateur signale en erreur quand une page opte et pas la suivante. */
 @view-transition{navigation:auto}
 ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
}