/* 3.15.4 (UX-D32) : LA VITRINE, charte E « bleu nuit et blanc » (maquette Landing). Les couleurs, polices et ombres
   viennent de app/assets/css/tokens.css, chargé avant ce fichier : aucun code couleur de marque ici en dehors des
   jetons. Mouvements : transitions seulement, coupées si l'appareil demande moins d'animations. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:var(--brand)}
h1,h2,h3{margin:0;line-height:1.15;color:var(--nuit)}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.conteneur{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.conteneur.etroit{max-width:820px}
.centre{text-align:center}
.aller-contenu{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--nuit);color:#fff;padding:8px 14px;border-radius:var(--r-sm)}
.aller-contenu:focus{left:8px}
.ic-svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Le logo D32 : la maison bleu nuit, la coche bleu Garentiz. */
.logo-svg{width:30px;height:30px;flex:none}
.logo-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.logo-maison{stroke:var(--nuit);stroke-width:4.6}
.logo-coche{stroke:var(--brand);stroke-width:4}

/* Boutons : une seule action pleine par zone (créer un compte). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border-radius:var(--r-sm);font:600 14.5px/1 var(--font);text-decoration:none;border:1px solid transparent;transition:background var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),transform var(--t) var(--ease);white-space:nowrap}
.btn .ic-svg{width:16px;height:16px}
.btn-lg{min-height:46px;padding:0 22px;font-size:15px}
.btn-plein{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.btn-plein:hover{background:var(--brand-2)}
.btn-contour{background:var(--surface);color:var(--nuit);border-color:var(--line-bouton)}
.btn-contour:hover{border-color:var(--brand-4);background:var(--brand-tint)}
.btn-blanc{background:#fff;color:var(--brand)}
.btn-blanc:hover{background:var(--brand-tint)}
.btn-sur-nuit{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-sur-nuit:hover{background:rgba(255,255,255,.1)}
.btn:active{transform:translateY(1px)}
.lien-fleche{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:14px;color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.lien-fleche .ic-svg{width:14px;height:14px;transition:transform var(--t) var(--ease)}
.lien-fleche:hover .ic-svg{transform:translateX(3px)}

/* L'en-tête. */
.tete{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tete.defile{border-bottom-color:var(--line);box-shadow:var(--sh-1)}
.barre{display:flex;align-items:center;gap:28px;height:64px}
.marque{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--nuit);font-weight:700;font-size:19px;letter-spacing:-.01em}
.barre .liens{display:flex;gap:26px}
.barre .liens a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500}
.barre .liens a:hover{color:var(--nuit)}
.droite{margin-left:auto;display:flex;align-items:center;gap:18px}
.lien-connexion{font-weight:600;font-size:14.5px;text-decoration:none}
.lien-connexion:hover{text-decoration:underline}
.lang-pick{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 4px;font:600 13.5px var(--font);color:var(--ink-2);cursor:pointer}
.lang-btn .ic-svg{width:16px;height:16px}
.lang-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:6px;z-index:60}
.lang-pop[hidden]{display:none}
.lang-pop a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-xs);color:var(--ink);text-decoration:none;font-size:14px}
.lang-pop a:hover,.lang-pop a.on{background:var(--brand-tint)}
.lang-pop svg{width:20px;height:14px;border-radius:2px}
.lang-pop .nom{flex:1}
.lang-pop .ok{color:var(--brand);font-weight:700}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger span{display:block;width:18px;height:2px;background:var(--nuit);border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Le héros. */
.hero{background:var(--bg);padding:64px 0 80px;border-bottom:1px solid var(--line-2)}
.hero-grille{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.eyebrow{color:var(--brand);font-weight:600;font-size:14px;margin-bottom:16px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.2vw,52px);letter-spacing:-.015em;margin-bottom:20px}
.lead{font-size:18px;color:var(--ink-2);max-width:34em;margin-bottom:28px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.actions.centre{justify-content:center}
.hero .note{margin-top:22px;font-size:14px;color:var(--ink-2);max-width:36em}
.hero .note b{color:var(--nuit)}

/* Les fenêtres d'application (écrans d'exemple, décoratifs). */
.fenetre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden}
.fenetre-barre{display:flex;gap:6px;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.fenetre-barre i{width:9px;height:9px;border-radius:50%;background:var(--line-3)}
.fenetre-corps{padding:18px 20px 20px}
.fen-titre{font-weight:600;color:var(--nuit);font-size:15.5px;margin-bottom:10px}
.depuis{font-size:12.5px;color:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:7px 11px;margin-bottom:14px}
.depuis b{color:var(--nuit)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.kpi small{display:block;font-size:11.5px;color:var(--ink-3)}
.kpi b{font-family:var(--serif);font-size:20px;color:var(--nuit);font-variant-numeric:tabular-nums}
.kpi b.retard{color:var(--st-rouge-ink)}
.taches{display:grid;gap:8px}
.tache{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px}
.tache-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.tache-txt b{font-size:13.5px;color:var(--nuit);font-weight:600}
.tache-txt small{font-size:12px;color:var(--ink-3)}
.vignette{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-sm);background:var(--brand-tint);color:var(--brand);flex:none}
.vignette .ic-svg{width:17px;height:17px}
.mini{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--r-xs);border:1px solid var(--line-bouton);color:var(--nuit);background:var(--surface);white-space:nowrap}
.mini.plein{background:var(--brand);border-color:var(--brand);color:#fff}
.pastille{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.pastille.ambre{background:var(--st-ambre-bg);color:var(--st-ambre-ink)}
.pastille.bleu{background:var(--st-bleu-bg);color:var(--st-bleu-ink)}
.pastille.vert{background:var(--st-vert-bg);color:var(--st-vert-ink)}

/* Les sections. */
.section{padding:88px 0}
.bande-claire{background:var(--bg);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.titre-serif{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3vw,38px);letter-spacing:-.01em}
.sous{color:var(--ink-2);margin-top:12px;font-size:16px}
.section .titre-serif.centre+.chose{margin-top:56px}

/* Les trois choses qui comptent. */
.chose{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;padding:44px 0}
.chose+.chose{border-top:1px solid var(--line-2)}
.chose-texte .numero{color:var(--brand);font-weight:700;font-size:13px;letter-spacing:.06em;margin-bottom:8px}
.chose-texte h3{font-family:var(--serif);font-weight:600;font-size:27px;margin-bottom:12px}
.chose-texte p:not(.numero){color:var(--ink-2);margin-bottom:14px;max-width:32em}
.fen-tete{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14px;color:var(--nuit)}
.fen-tete b{flex:1;font-weight:600}
.fen-tete .vignette{width:28px;height:28px}
.fen-tete .vignette .ic-svg{width:15px;height:15px}
.lettre{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font-size:14px;color:var(--ink);min-height:4.8em}
.lettre.tape::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--brand);opacity:var(--curseur,1);transition:opacity 120ms linear}
.fen-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.fen-pied small{font-size:12px;color:var(--ink-3)}
.index-calc{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;margin-bottom:12px}
.index-calc>div{flex:1}
.index-calc small{display:block;font-size:12px;color:var(--ink-3)}
.index-calc b{font-family:var(--serif);font-size:22px;color:var(--nuit);font-variant-numeric:tabular-nums}
.index-calc b.bleu{color:var(--brand)}
.index-calc>.ic-svg{color:var(--ink-4)}
.puces-etat{display:flex;flex-wrap:wrap;gap:6px}
.reg .fen-tete .ic-svg{color:var(--proof)}
.lien-pdf{color:var(--brand);font-size:12.5px;font-weight:600}
.ecriture{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line-2);font-size:13px}
.ecriture small{color:var(--ink-3);font-variant-numeric:tabular-nums}
.scelle{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--nuit);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px 2px 4px}

/* Le sceau. */
.sceau-svg{flex:none}
.sceau-svg.petit{width:16px;height:16px}
.sceau-svg.grand{width:56px;height:56px}
.sceau-rosace{fill:var(--nuit)}
.sceau-cercle{fill:none;stroke:#fff;stroke-width:1.6;opacity:.5}
.sceau-coche{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

/* Ce qui rend Garentiz différent. */
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.carte-sig,.carte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-1)}
.etiquette-sig{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);background:var(--accent-pale);color:var(--warn-ink-2);margin-bottom:14px}
.carte-sig h3{font-family:var(--serif);font-weight:600;font-size:20px;margin-bottom:10px}
.carte-sig p{color:var(--ink-2);font-size:14.5px}
.frise{list-style:none;margin:22px 0 0;padding:0;display:flex;justify-content:space-between;position:relative}
.frise::before{content:"";position:absolute;left:12%;right:12%;top:10px;height:2px;background:var(--line-3)}
.frise li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;text-align:center}
.frise i{width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--line-3);display:flex;align-items:center;justify-content:center;color:#fff}
.frise i .ic-svg{width:12px;height:12px;stroke-width:3}
.frise li.fait i{background:var(--st-vert-plein);border-color:var(--st-vert-plein)}
.frise li.maintenant i{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft-2);background:var(--accent-pale)}
.frise small{font-size:11.5px;color:var(--ink-2);font-weight:500}
.sceau-ligne{display:flex!important;align-items:center;gap:16px;margin-top:22px}
.pastille-sceau{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--nuit);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px 4px 5px;background:var(--surface-2)}
.anneaux{display:flex!important;gap:22px;margin-top:20px}
.anneau{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.anneau svg{width:56px;height:56px;transform:rotate(-90deg)}
.anneau circle{fill:none;stroke-width:4.5}
.anneau-fond{stroke:var(--line-2)}
.anneau-arc{stroke-linecap:round;transition:stroke-dasharray 900ms var(--ease)}
.anneau.ambre .anneau-arc{stroke:var(--st-ambre-barre)}
.anneau.vert .anneau-arc{stroke:var(--st-vert-plein)}
.anneau b{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:13px;color:var(--nuit)}
.anneau small{font-size:11.5px;color:var(--ink-3)}

/* Et tout le reste : douze tuiles qui se déplient. */
.reste{margin-top:96px}
.tuiles{gap:12px;margin-top:28px;align-items:start}
.tuile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tuile:hover{border-color:var(--line-hover)}
.tuile[open]{box-shadow:var(--sh-2);border-color:var(--brand-line)}
.tuile summary{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;list-style:none}
.tuile summary::-webkit-details-marker{display:none}
.tuile-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.tuile-txt b{font-size:14px;color:var(--nuit);font-weight:600}
.tuile-txt small{font-size:12.5px;color:var(--ink-3)}
.tuile-chev{color:var(--ink-4);transition:transform var(--t) var(--ease)}
.tuile[open] .tuile-chev{transform:rotate(90deg)}
.tuile p{padding:0 16px 16px 58px;font-size:13.5px;color:var(--ink-2)}
.aussi{margin-top:20px;font-size:13.5px;color:var(--ink-2)}
.aussi b{color:var(--nuit)}

/* À plusieurs. */
.carte .vignette{margin-bottom:14px}
.carte h3{font-family:var(--serif);font-weight:600;font-size:19px;margin-bottom:8px}
.carte>p{color:var(--ink-2);font-size:14.5px}
.carte .plus{margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.carte .plus summary{cursor:pointer;color:var(--brand);font-weight:600}
.carte .plus p{margin-top:8px}
.carte-mons{border-style:dashed;border-color:var(--line-3);background:var(--surface-2)}
.carte .lien-fleche{margin-top:14px}

/* Les tarifs. */
.etapes{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.etapes li{padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.etapes li+li{border-left:1px solid var(--line)}
.etapes small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.etapes b{color:var(--nuit);font-size:15px}
.etapes span{font-size:13px;color:var(--ink-2)}
.simu{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 24px}
.simu-question{font-weight:600;color:var(--nuit);flex:1;min-width:14em}
.pas{display:inline-flex;align-items:center;border:1px solid var(--line-bouton);border-radius:var(--r-sm);overflow:hidden}
.pas button{width:40px;height:40px;border:0;background:var(--surface);color:var(--nuit);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pas button:hover{background:var(--brand-tint)}
.pas input{width:58px;height:40px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font:600 16px var(--font);color:var(--nuit);-moz-appearance:textfield;appearance:textfield}
.pas input::-webkit-outer-spin-button,.pas input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.simu-resultats{display:flex;gap:24px}
.simu-res{display:flex;flex-direction:column;min-width:7.5em}
.simu-res small{font-size:12px;color:var(--ink-3)}
.simu-res b{font-family:var(--serif);font-size:19px;white-space:nowrap;color:var(--nuit);font-variant-numeric:tabular-nums;transition:color var(--t) var(--ease)}
.simu-res.avant b{color:var(--brand)}
.simu-res b.change{color:var(--brand-3)}
.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;align-items:start}
.tarif{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px 22px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.tarif.mis-en-avant{border:2px solid var(--brand);box-shadow:var(--sh-2)}
.tarif .etiquette{position:absolute;top:-12px;left:24px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:600;padding:3px 11px;border-radius:var(--r-pill)}
.tarif h3{font-family:var(--serif);font-weight:600;font-size:22px}
.tarif .prix{font-family:var(--serif);font-weight:600;font-size:40px;color:var(--nuit);margin-top:10px;line-height:1.1}
.tarif .unite{font-size:13px;color:var(--ink-3);margin-top:4px;min-height:2.6em}
.tarif .accroche{font-size:14px;color:var(--ink-2);margin-top:10px}
.coches{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;font-size:13.5px}
.coches li{display:flex;gap:8px;align-items:flex-start}
.coches .ic-svg{width:16px;height:16px;color:var(--proof);stroke-width:2.4;margin-top:2px}
.inclus{margin:16px 0 14px;border-top:1px solid var(--line-2);padding-top:12px;font-size:13.5px;color:var(--ink-2)}
.inclus summary{cursor:pointer;color:var(--brand);font-weight:600}
.inclus ul{margin:10px 0 0;padding-left:18px;display:grid;gap:4px}
.inclus .pour-qui{margin-top:10px;color:var(--ink)}
.inclus .petit{margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.inclus .ouverture{color:var(--st-ambre-ink);font-weight:500}
.tarif>.lien-fleche{margin-top:auto}
.note-tarifs{margin-top:22px;text-align:center;font-size:13px;color:var(--ink-3)}
.note-tarifs a{color:var(--brand)}
.regles{margin:16px auto 0;max-width:860px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 22px;font-size:14px;color:var(--ink-2)}
.regles>summary{cursor:pointer;font-weight:600;color:var(--nuit)}
.regles>p{margin-top:10px}
.exemples{margin-top:16px}
.exemples h3{font-size:15px;font-family:var(--font);margin-bottom:8px}
.exemples table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.exemples th,.exemples td{padding:7px 10px;border-bottom:1px solid var(--line-2);text-align:right}
.exemples th:first-child{text-align:left}
.exemples thead th{color:var(--nuit);font-weight:600}
.exemples small{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.connect-detail{margin-top:14px;font-size:13px}

/* Les questions. */
#faq .titre-serif{margin-bottom:24px}
.faq{display:grid;gap:10px}
.question{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:border-color var(--t) var(--ease)}
.question[open]{border-color:var(--brand-line)}
.question summary{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:15px 18px;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--nuit);list-style:none}
.question summary::-webkit-details-marker{display:none}
.q-chev{color:var(--ink-4);transform:rotate(90deg);transition:transform var(--t) var(--ease)}
.question[open] .q-chev{transform:rotate(-90deg)}
.question p{padding:0 18px 16px;font-size:14.5px;color:var(--ink-2)}

/* La bande finale, bleu Garentiz, et le pied. */
.final{background:var(--brand);color:#fff;padding:84px 0}
.final .titre-serif{color:#fff;max-width:18em;margin:0 auto}
.final p{color:var(--nuit-sous);margin:16px auto 28px;max-width:40em}
.pied{border-top:1px solid var(--line);padding:26px 0 30px;font-size:13px;color:var(--ink-3)}
.pied-grille{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.pied-marque{display:flex;align-items:center;gap:8px}
.pied-marque .logo-svg{width:22px;height:22px}
.pied-marque b{color:var(--nuit)}
.pied .liens{display:flex;flex-wrap:wrap;gap:6px 18px;margin-left:auto}
.pied .liens a{color:var(--ink-2)}
.pied-adresse{flex-basis:100%;color:var(--ink-4)}
.vers-haut{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--nuit);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-3);opacity:0;transform:translateY(10px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);z-index:40}
.vers-haut.visible{opacity:1;transform:none}
.vers-haut[hidden]{display:none}

/* 3.15.4 (UX-D32) : apparition au défilement, seulement si le script tourne (classe posée par site.js) ; transitions
   seulement, aucune animation à remplissage. */
.js .apparait{opacity:0;transform:translateY(18px);transition:opacity var(--t-poser) var(--ease),transform var(--t-poser) var(--ease)}
.js .apparait.vu{opacity:1;transform:none}
.js .ecriture{opacity:0;transform:translateX(-8px);transition:opacity var(--t-glisser) var(--ease),transform var(--t-glisser) var(--ease)}
.js .vu .ecriture,.js .chose.vu .ecriture{opacity:1;transform:none}
.js .chose.vu .ecriture[data-ordre="1"]{transition-delay:120ms}
.js .chose.vu .ecriture[data-ordre="2"]{transition-delay:240ms}
.js .chose.vu .ecriture[data-ordre="3"]{transition-delay:360ms}

/* Tablette. */
@media (max-width:1080px){
  .barre .liens{gap:18px}
  .hero-grille,.chose{gap:36px}
  .simu-resultats{gap:16px}
}
/* Téléphone et petite tablette : menu repliable, une colonne. */
@media (max-width:900px){
  .conteneur{padding:0 20px}
  .burger{display:flex}
  .barre{flex-wrap:wrap;height:auto;min-height:60px;gap:0}
  .barre .liens,.droite{display:none}
  .tete.ouvert .barre .liens{display:flex;flex-direction:column;flex-basis:100%;gap:0;padding:8px 0;border-top:1px solid var(--line-2)}
  .tete.ouvert .barre .liens a{padding:12px 0;font-size:16px}
  .tete.ouvert .droite{display:flex;flex-basis:100%;flex-wrap:wrap;margin:0;padding:6px 0 16px;gap:14px}
  .tete.ouvert .droite .btn{flex-basis:100%}
  .lang-pop{left:0;right:auto}
  .hero{padding:40px 0 56px}
  .hero-grille,.chose{grid-template-columns:1fr}
  .chose{padding:32px 0}
  .section{padding:64px 0}
  .grille-3,.tarifs{grid-template-columns:1fr}
  .tarif.mis-en-avant{order:-1}
  .etapes{grid-template-columns:1fr}
  .etapes li+li{border-left:0;border-top:1px solid var(--line)}
  .simu{flex-direction:column;align-items:stretch;gap:16px}
  .simu-resultats{justify-content:space-between}
  .simu-res{min-width:0}
  .reste{margin-top:64px}
  .pied .liens{margin-left:0}
}
@media (max-width:480px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpis .kpi:last-child{grid-column:span 2}
  .actions .btn{flex:1 1 100%}
  .ecriture{grid-template-columns:1fr auto}
  .ecriture small{grid-column:span 2}
  .tache .mini{display:none}
  .simu-res b{font-size:15px}
  .simu-resultats{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;transition-delay:0ms!important}
  .js .apparait,.js .ecriture{opacity:1;transform:none}
}