/* Moteur à Clients. Deux fonds (nuit, neige), les couleurs de la jauge du logo, une seule police (Inter).
   Mouvement : seulement transform et opacity, et rien du tout si « réduire les animations » est activé. */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Inter Display";src:url(/assets/fonts/interdisplay-800.woff) format("woff");font-weight:800;font-display:swap}

@property --v{syntax:"<number>";inherits:true;initial-value:100}

:root{
  --nuit:#0F2340;
  --nuit-fonce:#0A1930;
  --nuit-trait:#2B4467;
  --neige:#F2F5F8;
  --trait:#D3DBE6;
  --trait-fort:#C4CEDB;
  --texte:#26364D;
  --gris:#55657B;
  --gris-nuit:#C3CFDF;
  --vert:#38BE96;
  --vert-texte:#157A5C;
  --ambre:#F7A624;
  --rouge:#E5484D;
  --rouge-texte:#C92A30;
  --display:"Inter Display","Inter",system-ui,sans-serif;
  --ressort:cubic-bezier(.2,.9,.3,1.2);
  --entete:64px;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--ressort:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + 12px)}
body{margin:0;background:#fff;color:var(--nuit);font:400 1.0625rem/1.6 "Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,picture,svg{display:block}
img{max-width:100%;height:auto}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--nuit);outline-offset:3px;border-radius:4px}
.nuit :focus-visible{outline-color:var(--ambre)}

.cadre{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px}
.etroit{max-width:860px}
.titre{font-family:var(--display);font-weight:800;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
.chiffre{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
h2.titre{font-size:clamp(1.8rem,3.4vw + 1rem,2.9rem)}
.sous-titre{font-size:clamp(1.4rem,1.6vw + 1rem,1.9rem);margin:56px 0 20px}
.nuit{background:var(--nuit);color:#fff}
.neige{background:var(--neige)}
.section{padding:68px 0}
.tete-section{max-width:44rem;margin-bottom:30px}
.intro{font-size:1.125rem;line-height:1.55;color:var(--texte);margin-top:14px}
.nuit .intro{color:var(--gris-nuit)}
.mention{font-size:.9rem;line-height:1.5;color:var(--gris)}
.nuit .mention{color:#9FB0C8}
.centre{text-align:center;max-width:44rem;margin-inline:auto}
.lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.si-large{display:none}
.evitement{position:absolute;left:12px;top:-60px;z-index:30;background:var(--ambre);color:var(--nuit);font-weight:700;padding:10px 16px;border-radius:8px}
.evitement:focus{top:12px}

/* ---------- Boutons et liens ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border-radius:999px;background:var(--ambre);color:var(--nuit);font-weight:700;font-size:1.0625rem;line-height:1.2;text-decoration:none;text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 22px -12px rgba(247,166,36,.75),0 2px 4px -1px rgba(15,35,64,.25);transition:transform .25s var(--ressort)}
.bouton:hover{transform:translateY(-2px)}
.bouton:active{transform:translateY(0) scale(.97)}
.bouton.compact{min-height:44px;padding:9px 16px;font-size:.95rem;box-shadow:none}
.bouton.plein{display:flex;width:100%}
.lien{font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.lien:hover{text-decoration-color:var(--ambre)}

/* ---------- En-tête ---------- */
.entete{position:sticky;top:0;z-index:20;view-transition-name:entete;border-bottom:1px solid var(--nuit-trait)}
.entete-rang{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--entete)}
.logo img{height:26px;width:auto}
.menu{display:none}

/* ---------- 1. L'ouverture : la fiche, avant et après ---------- */
.ouverture{position:relative;overflow:hidden;padding:26px 0 52px}
.ouverture-grille{position:relative;display:grid;gap:24px}
.ouverture h1{font-size:clamp(2.05rem,8.4vw,2.7rem)}
.chapeau{font-size:1.125rem;line-height:1.55;color:var(--gris-nuit)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:24px}
.ouverture .bouton{flex:1 1 auto}
.ouverture .mention{margin-top:18px}

.tel{width:100%;max-width:380px;justify-self:center}
.tel-ecran{position:relative;overflow:hidden;border-radius:34px;border:1px solid var(--nuit-trait);padding:24px 14px 18px;background:var(--nuit-fonce)}
.tel-ecran[style*="--fond"]{background:linear-gradient(rgba(10,25,48,.76),rgba(10,25,48,.76)),var(--fond) 30% 60%/cover}
.tel-heure{text-align:center;margin-bottom:16px}
.tel-heure b{display:block;font:800 3.25rem/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tel-heure span{font-size:.85rem;color:var(--gris-nuit)}
.tel-fil{display:grid;gap:10px}
.bulle{border-radius:18px;padding:11px 14px 12px;font-size:.94rem;line-height:1.38}
.bulle small{display:block;font-size:.78rem;font-weight:600;margin-bottom:2px;opacity:.85}
.bulle b{display:block;font-size:1rem}
.bulle.manque{display:flex;gap:12px;align-items:center;background:#3B1A27;color:#FFD3D5;border:1px solid #8A3540}
.bulle.manque svg{flex:none}
.bulle.manque b{color:#fff}
.bulle.texto{background:var(--vert);color:#06261C;margin-left:36px;border-bottom-right-radius:6px}
.bulle.client{background:#EDF1F6;color:var(--nuit);margin-right:36px;border-bottom-left-radius:6px}
.bulle.alerte{background:var(--ambre);color:var(--nuit)}
.tel-note{margin-top:12px;font-size:.78rem;line-height:1.4;color:#9FB0C8;text-align:center}
.rejouer{background:none;border:0;padding:6px 4px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.tel-sonne{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:6px;background:var(--nuit-fonce);opacity:0;pointer-events:none;transition:opacity .35s ease-out}
.tel-sonne b{font:800 1.5rem/1.2 var(--display);margin-top:22px}
.tel-sonne > span:last-child{color:var(--gris-nuit);font-variant-numeric:tabular-nums}
.tel-anneaux{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--vert);color:#06261C}
.tel-anneaux::before,.tel-anneaux::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--vert);opacity:0}

/* La fiche et son curseur */
.aa{display:grid;gap:14px;justify-items:center}
.aa-commandes{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:400px;padding:3px;border:2px solid var(--nuit);border-radius:999px;background:#fff}
.aa-commandes button{min-height:44px;border:0;border-radius:999px;background:none;color:var(--nuit);font-weight:700;cursor:pointer}
.aa-commandes button[aria-pressed="true"]{background:var(--nuit);color:#fff}
.aa-scene{--v:100;position:relative;display:grid;width:100%;max-width:400px;overflow:hidden;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none;border-radius:18px;border:1px solid var(--trait-fort);background:#fff;
  box-shadow:0 1px 0 var(--trait-fort),0 26px 44px -30px rgba(15,35,64,.5)}
.aa-scene:has(.aa-curseur:focus-visible){outline:3px solid var(--nuit);outline-offset:3px}
.aa-scene > .fiche,.aa-dessus{grid-area:1 / 1}
.aa-dessus{position:relative;z-index:1;overflow:hidden;transform:translateX(calc(var(--v) * 1%))}
.aa-dessus > .fiche{height:100%;transform:translateX(calc(var(--v) * -1%))}
/* Le trait suit exactement la coupe ; la poignée reste toujours visible, même aux deux bouts. */
.aa-trait,.aa-poignee{position:absolute;inset:0;z-index:2;pointer-events:none}
.aa-trait{transform:translateX(calc(var(--v) * 1%))}
.aa-trait::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--nuit)}
.aa-poignee{transform:translateX(calc(clamp(8,var(--v),92) * 1%))}
.aa-poignee span{position:absolute;top:50%;left:0;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--nuit);color:#fff;box-shadow:0 8px 18px -6px rgba(10,25,48,.7)}
/* Le champ sert au clavier et aux lecteurs d'écran ; la souris et le doigt glissent sur la scène elle-même. */
.aa-curseur{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}

.fiche{position:relative;isolation:isolate;display:flex;flex-direction:column;background:#fff;font-size:.9rem;line-height:1.4;color:var(--texte)}
.f-photos{position:relative;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:3px;height:118px}
.tuile{overflow:hidden;background:#DDE3EB}
.f-photos .tuile:first-child{grid-row:1 / span 2}
.tuile picture,.tuile img{width:100%;height:100%;object-fit:cover;object-position:var(--position,50% 50%)}
.f-rien{position:absolute;inset:0;display:grid;place-items:center;font-size:.82rem;font-weight:600;color:#5F6F85}
.f-corps{flex:1;display:flex;flex-direction:column;padding:13px 16px 16px}
.f-nom{font:800 1.45rem/1.1 var(--display);color:var(--nuit);letter-spacing:-.01em}
.f-note{display:flex;align-items:center;gap:7px;margin-top:6px}
.f-note b{font-size:1rem;color:var(--nuit)}
.etoiles{width:84px;height:auto;flex:none}
.etoiles .pleine{fill:var(--ambre)}
.etoiles .vide{fill:#CBD3DE}
.f-info{font-size:.84rem;color:var(--gris);margin-top:2px}
.f-info b{color:var(--vert-texte)}
.f-actions{display:grid;grid-template-columns:repeat(4,1fr);margin-top:13px;text-align:center;font-size:.78rem;font-weight:600;color:var(--nuit)}
.f-actions i{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 4px;border-radius:50%;border:1.5px solid #B4C0D0}
.f-actions span:first-child i{background:var(--nuit);border-color:var(--nuit);color:#fff}
.f-services{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 auto;padding-right:30px;min-height:28px}
.f-services > span:not(.rep){border:1px solid var(--trait-fort);border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:600;color:var(--nuit);background:var(--neige)}
.f-onglets{display:flex;gap:20px;margin-top:14px;border-bottom:1px solid var(--trait);font-size:.875rem;font-weight:600;color:var(--gris)}
.f-onglets > *{padding-bottom:9px}
.f-onglets b{color:var(--nuit);border-bottom:3px solid var(--nuit);margin-bottom:-1px}
.f-resume{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:13px 0}
.f-gros{font:800 2.6rem/1 var(--display);color:var(--nuit)}
.f-resume .etoiles{width:70px;margin-top:3px}
.f-total{font-size:.78rem;color:var(--gris)}
.f-barres{display:grid;gap:5px}
.f-barres div{display:grid;grid-template-columns:10px 1fr;gap:8px;align-items:center;font-size:.72rem;color:var(--gris)}
.f-barres i{position:relative;display:block;height:7px;border-radius:4px;background:#E3E8EF;overflow:hidden}
.f-barres i::after{content:"";position:absolute;inset:0;background:var(--ambre);border-radius:4px;transform:scaleX(var(--w));transform-origin:left}
.f-avis{padding-top:12px;border-top:1px solid var(--trait)}
.f-auteur{position:relative;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center}
.f-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#5E7088;color:#fff;font-weight:700}
.f-auteur b{display:block;color:var(--nuit);line-height:1.2}
.f-auteur small{display:flex;gap:6px;align-items:center;font-size:.78rem;color:var(--gris)}
.f-auteur .etoiles{width:66px}
.f-avis > p:not(.f-reponse):not(.f-manque){margin-top:7px}
.f-reponse{position:relative;margin:9px 0 0 14px;padding:8px 36px 8px 10px;border-left:3px solid var(--vert);background:#EAF7F2;font-size:.84rem;color:#0D3B2C}
.f-manque{position:relative;margin-top:9px;padding:8px 36px 8px 10px;border:1.5px dashed #E2A9AB;border-radius:6px;font-size:.84rem;font-weight:600;color:#9B1F24}
.f-actu{position:relative;display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;margin-top:12px;padding:12px 30px 0 0;border-top:1px solid var(--trait)}
.f-actu .tuile{width:56px;height:56px;border-radius:8px}
.f-actu b{display:block;color:var(--nuit);font-size:.875rem;line-height:1.25}
.f-actu small{font-size:.78rem;color:var(--gris)}
.f-manque small{display:block;font-weight:400}
.f-actu-vide .tuile{background:none;border:1.5px dashed #E2A9AB}
.f-actu-vide b{color:#9B1F24}

.rep{position:absolute;top:8px;right:8px;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:800 .8rem/1 var(--display);color:#fff;box-shadow:0 0 0 3px #fff}
.avant .rep{background:var(--rouge-texte)}
.apres .rep{background:var(--vert-texte)}
.f-services .rep{top:2px;right:0}
.f-auteur .rep{top:5px;right:0}
.f-reponse .rep,.f-manque .rep{top:50%;right:6px;margin-top:-12px}
.f-actu .rep{top:28px;right:0}

.faits{display:grid;gap:0;margin-top:56px;border-top:2px solid var(--nuit)}
.fait{display:grid;grid-template-columns:7.2rem 1fr;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--trait-fort)}
.fait .chiffre{font-size:2.9rem;white-space:nowrap}
.fait p:last-child{color:var(--texte)}
.source{font-size:.85rem;color:var(--gris);margin-top:14px}

/* ---------- 3. Le calculateur ---------- */
.calcul-grille{display:grid;gap:8px}
.soumission{background:#fff;border:1px solid var(--trait-fort);border-radius:8px;box-shadow:0 1px 0 var(--trait-fort),0 26px 44px -30px rgba(15,35,64,.5)}
.ligne{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--trait)}
.ligne label{min-width:0;font-weight:600;line-height:1.3}
.ligne small{display:block;margin-top:5px;font-size:.8rem;font-weight:400;line-height:1.4;color:var(--gris);overflow-wrap:anywhere}
.pas{display:flex;align-items:center;flex:none;border:1.5px solid var(--nuit);border-radius:12px;background:#fff}
.pas button{width:44px;height:48px;border:0;background:none;font-size:1.4rem;font-weight:600;cursor:pointer;border-radius:10px;transition:transform .2s var(--ressort)}
.pas button:active{transform:scale(.85)}
.pas input{width:2.4ch;border:0;padding:0;background:none;text-align:center;font:800 1.3rem var(--display);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.pas input::-webkit-outer-spin-button,.pas input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.champ{display:flex;align-items:center;gap:6px;flex:none;border:1.5px solid var(--nuit);border-radius:12px;padding:0 12px;height:51px;font:800 1.3rem var(--display)}
.champ input{width:5.2ch;border:0;padding:0;background:none;text-align:right;font:inherit;font-variant-numeric:tabular-nums}
.pas input:focus-visible,.champ input:focus-visible{outline:none}
.pas:focus-within,.champ:focus-within{outline:3px solid var(--nuit);outline-offset:2px}
.pas:has(button:focus-visible){outline:none}
.total{padding:16px;border-top:3px double var(--nuit);margin-top:-1px}
.rang{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:600}
.rang + .rang{margin-top:8px}
.rang .perdu{font-size:clamp(2.5rem,11vw,3.4rem);color:var(--rouge-texte)}
.rang .an{font-size:1.5rem;color:var(--rouge-texte)}
.rang.forfait{margin-top:14px;padding-top:14px;border-top:1px solid var(--trait)}
.rang.forfait .chiffre{font-size:1.25rem;white-space:nowrap}
.jauge-bloc{display:grid;justify-items:center;gap:6px;margin-top:26px;text-align:center}
.jauge{width:min(240px,70%);height:auto;overflow:visible}
.aiguille{fill:var(--nuit);transform-box:view-box;transform-origin:60px 78px;transform:rotate(var(--angle,-78deg));transition:transform .9s var(--ressort)}
.jauge-phrase{font:800 1.35rem/1.25 var(--display);min-height:1.7em;margin-top:8px}
.promesse{font-weight:600;color:var(--texte);margin-bottom:16px}

/* ---------- 4. Le forfait ---------- */
.film-cadre{margin:0}
.film-cadre video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--nuit-fonce);border-radius:12px;outline:1px solid var(--nuit-trait)}
.film-cadre video:focus-visible{outline:3px solid var(--ambre);outline-offset:3px}
.film-cadre .mention{margin-top:12px}
.forfait-grille{display:grid;gap:8px}
.pieces{border-top:2px solid var(--nuit)}
.pieces li{display:grid;grid-template-columns:48px 1fr;gap:6px 8px;padding:22px 0;border-bottom:1px solid var(--trait-fort)}
.no{font:800 1.5rem/1.3 var(--display);color:var(--vert-texte);font-variant-numeric:tabular-nums}
.pieces h3{font-size:1.2rem;line-height:1.3}
.pieces p{margin-top:6px;color:var(--texte)}
.vignette-cadre{grid-column:2;margin-top:10px}
.vignette{display:flex;align-items:center;justify-content:center;gap:8px;width:210px;max-width:100%;height:76px;border-radius:12px;border:1px solid var(--trait-fort);background:#fff}
.v-recherche{justify-content:flex-start;padding:0 14px;font-size:.82rem;font-weight:600;white-space:nowrap}
.v-recherche svg{flex:none}
.v-recherche span{position:relative;overflow:hidden;text-overflow:ellipsis}
.v-recherche span::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:right}
.v-etoiles{gap:4px}
.v-etoiles svg{fill:var(--ambre)}
.v-page{flex-direction:column;align-items:stretch;gap:6px;padding:0 22px}
.v-page i{display:block;height:6px;border-radius:3px;background:var(--trait)}
.v-page i:nth-child(2){width:60%}
.v-page span{display:flex;align-items:center;justify-content:center;gap:6px;height:26px;border-radius:999px;background:var(--nuit);color:#fff;font-size:.78rem;font-weight:700}
.v-textos{flex-direction:column;align-items:stretch;gap:6px;padding:0 20px}
.v-textos i{display:block;height:20px;border-radius:10px}
.v-textos i:first-child{width:62%;background:#E3E8EF;border-bottom-left-radius:3px}
.v-textos i:last-child{width:74%;margin-left:auto;background:var(--vert);border-bottom-right-radius:3px}
.v-barres{align-items:flex-end;gap:10px;padding-bottom:14px}
.v-barres i{display:block;width:22px;height:46px;border-radius:5px 5px 0 0;background:var(--vert);transform:scaleY(var(--h));transform-origin:bottom}

.etapes{position:relative;display:grid;gap:26px;counter-reset:etape;padding-left:40px}
.etapes::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--vert);transform-origin:top}
.etapes li{position:relative;counter-increment:etape}
.etapes li::before{content:counter(etape);position:absolute;left:-40px;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--nuit);color:#fff;font:800 .95rem/1 var(--display)}
.etapes h4{font-size:1.125rem;line-height:1.3}
.etapes p{margin-top:4px;color:var(--texte)}

/* ---------- 5. Le prix ---------- */
.prix-grille{display:grid;gap:8px}
.facture{background:#fff;color:var(--nuit);border-radius:10px;padding:24px 20px;box-shadow:0 30px 50px -30px rgba(3,10,22,.8)}
.facture-titre{font-weight:700}
.facture-prix{margin-top:6px;font-weight:600;color:var(--texte)}
.facture-prix .chiffre{font-size:clamp(3rem,13vw,4rem);color:var(--nuit);margin-right:6px}
.facture dl{margin-top:18px;border-top:2px solid var(--nuit)}
.facture dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed var(--trait-fort)}
.facture dt{color:var(--texte)}
.facture dd{font-weight:700;white-space:nowrap}
.fondateur{margin:18px 0;padding:14px 16px;border:2px solid var(--ambre);border-radius:8px;background:#FFF7E8;line-height:1.45}
.jamais{display:grid;gap:26px}
.jamais h3{font-size:1.25rem;line-height:1.3}
.barre{text-decoration:line-through;text-decoration-color:var(--rouge);text-decoration-thickness:3px}
.jamais p{margin-top:6px;color:var(--texte)}

/* ---------- 6. Qui, les métiers, les questions ---------- */
.qui-grille{display:grid;gap:26px}
.portrait{width:min(260px,70%);border-radius:22px;overflow:hidden}
.portrait img{width:100%}
.qui-grille p{margin-top:14px;color:var(--texte);max-width:38rem}
.metiers{display:grid;gap:26px;margin-top:64px;padding-top:36px;border-top:2px solid var(--nuit)}
.metiers .sous-titre{margin-top:0}
.metiers-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metiers-photos picture{aspect-ratio:4 / 5;overflow:hidden;border-radius:12px}
.metiers-photos img{width:100%;height:100%;object-fit:cover}
.metiers-liste{border-top:1px solid var(--trait-fort);margin-bottom:14px}
.metiers-liste a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--trait-fort);font-size:1.125rem;font-weight:700;text-decoration:none}
.metiers-liste svg{flex:none;transition:transform .3s var(--ressort)}
.metiers-liste a:hover svg{transform:translateX(6px)}
.faq{border-top:2px solid var(--nuit)}
.faq details{border-bottom:1px solid var(--trait-fort)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:1.125rem;font-weight:700;line-height:1.35;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:18px;height:18px;background:
  linear-gradient(var(--vert-texte),var(--vert-texte)) center/100% 3px no-repeat,
  linear-gradient(var(--vert-texte),var(--vert-texte)) center/3px 100% no-repeat;transition:transform .3s var(--ressort)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--texte);max-width:44rem}

/* ---------- 7. L'appel final et le pied de page ---------- */
.final{text-align:center}
.final .titre{max-width:20ch;margin-inline:auto}
.final .intro{margin-bottom:26px}
.pied{background:var(--nuit-fonce);padding:44px 0 56px;font-size:.92rem;color:#9FB0C8}
.pied-grille{display:grid;gap:28px}
.pied img{height:26px;width:auto;margin-bottom:14px}
.pied a{color:#fff}
.pied-titre{font-weight:700;color:#fff;margin-bottom:6px}
.pied li{margin-top:4px}
.pied-notes p + p{margin-top:8px}

/* ---------- /comparaison ---------- */
.comparaison-tete{padding:44px 0 56px}
.comparaison-tete h1{font-size:clamp(1.9rem,4.4vw + .8rem,3.2rem);max-width:22ch;margin:10px 0 16px}
.avis-fictif{margin-bottom:22px;padding:12px 16px;border-left:4px solid var(--ambre);background:#fff;font-size:.95rem}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duel-fiche{background:#fff;border:1px solid var(--trait-fort);border-radius:16px;padding:16px 14px;min-width:0}
.duel-qui{font-size:.8rem;font-weight:600;color:var(--gris)}
.duel-fiche h3{font:800 1.3rem/1.15 var(--display);margin-top:4px;overflow-wrap:anywhere}
.duel-fiche .f-note{flex-wrap:wrap}
.duel-fiche dl{margin-top:12px;border-top:2px solid var(--nuit)}
.duel-fiche dl div{padding:10px 0;border-bottom:1px solid var(--trait)}
.duel-fiche dt{font-size:.8rem;color:var(--gris)}
.duel-fiche dd{font-weight:700;font-size:1.125rem;line-height:1.25}
.moins{color:var(--rouge-texte)}
.plus{color:var(--vert-texte)}
.ecarts{display:grid;gap:12px;margin-bottom:26px}
.ecarts li{padding:12px 0 12px 16px;border-left:4px solid var(--rouge);color:var(--texte);font-size:1.0625rem}
.ecarts li.plus{border-left-color:var(--vert)}
.ecarts b{color:var(--nuit)}

/* La fiche dans l'ouverture, sur fond de nuit */
.aa .mention{max-width:400px;text-align:center}
.nuit .aa-scene{border-color:transparent;box-shadow:0 34px 60px -30px rgba(3,10,22,.95)}
.nuit .aa-scene:has(.aa-curseur:focus-visible){outline-color:var(--ambre)}

/* ---------- 2. Ce qui change sur la fiche ---------- */
.changements{border-top:2px solid var(--nuit);margin-bottom:22px}
.changements li{display:grid;grid-template-columns:34px 1fr;gap:6px 12px;padding:18px 0;border-bottom:1px solid var(--trait-fort)}
.num{grid-row:1 / span 3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--nuit);color:#fff;font:800 .9rem/1 var(--display)}
.changements h3{font-size:1.2rem;line-height:1.35}
.changements p{position:relative;padding-left:4.2rem;color:var(--texte)}
.changements p b{position:absolute;left:0;top:.15em;font-size:.85rem}
.etat-avant b{color:var(--rouge-texte)}
.etat-apres b{color:var(--vert-texte)}

/* ---------- 3. Les appels manqués ---------- */
.appels{position:relative;overflow:hidden}
.appels-photo{display:none}
.appels-grille{position:relative;display:grid;gap:8px}
.suite{margin-top:20px}

/* L'équipe : une ligne par collaborateur, une case en pointillé tant qu'il n'est pas arrivé */
.equipe{margin-top:56px;padding-top:32px;border-top:2px solid var(--nuit)}
.equipe .sous-titre{margin-top:0}
.equipe-liste{border-top:1px solid var(--trait-fort)}
.equipe-liste li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--trait-fort)}
.equipe-photo{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--nuit);color:#fff;font:800 1.4rem/1 var(--display)}
.equipe-photo picture,.equipe-photo img{width:100%;height:100%;object-fit:cover}
.equipe-photo.vide{background:none;border:2px dashed #AEBBCB;color:var(--gris)}
.equipe-liste b{display:block;font-size:1.1rem}
.equipe-liste p{color:var(--texte)}
.a-venir b{color:var(--gris)}

/* ---------- Écrans plus larges ---------- */
@media (min-width:700px){
  :root{--entete:72px}
  .cadre{padding-inline:28px}
  .si-large{display:inline}
  .logo img{height:30px}
  .section{padding:96px 0}
  .ouverture .bouton{flex:0 0 auto}
  .faits{grid-template-columns:1fr 1fr;column-gap:40px}
  .faits .source{grid-column:1 / -1}
  .pieces li{grid-template-columns:56px 1fr 210px;align-items:center}
  .vignette-cadre{grid-column:3;margin-top:0}
  .jamais{grid-template-columns:1fr 1fr;gap:34px 48px}
  .equipe-liste{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
  .qui-grille{grid-template-columns:300px 1fr;gap:48px;align-items:center}
  .portrait{width:300px}
  .metiers{grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .pied-grille{grid-template-columns:1.2fr 1fr 1.3fr;gap:48px}
  .facture{padding:32px}
  .duel{gap:20px}
  .duel-fiche{padding:22px}
}
@media (min-width:1000px){
  .menu{display:flex;gap:28px;margin-left:auto;font-size:.95rem;font-weight:600}
  .menu a{text-decoration:none;padding:8px 0}
  .menu a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--ambre)}
  .ouverture{padding:52px 0 72px}
  .ouverture-grille{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"titre fiche" "texte fiche";column-gap:72px;row-gap:26px;align-items:start}
  .ouverture .aa{grid-area:fiche}
  .ouverture h1{grid-area:titre;font-size:clamp(2.8rem,4vw,3.6rem);align-self:end}
  .ouverture-texte{grid-area:texte;max-width:34rem}
  .tel-ecran{border:10px solid var(--nuit-fonce);border-radius:46px;box-shadow:0 0 0 1px var(--nuit-trait),0 40px 70px -30px rgba(3,10,22,.9)}
  .appels-grille{grid-template-columns:minmax(0,1fr) 360px;column-gap:64px;align-items:center}
  .appels .tete-section{margin-bottom:0}
  .avec-photo .appels-grille{grid-template-columns:minmax(0,1fr) 520px;column-gap:48px}
  .avec-photo .tel{justify-self:start;max-width:360px}
  .avec-photo .appels-photo{display:block;position:absolute;inset:0 0 0 min(calc(100% - 378px),calc(50% + 212px))}
  .appels-photo picture,.appels-photo img{width:100%;height:100%;object-fit:cover;object-position:42% 55%}
  .calcul-grille{grid-template-columns:1fr 1.05fr;grid-template-areas:"tete formulaire" "jauge formulaire";column-gap:72px;align-items:start}
  .calcul-grille .tete-section{grid-area:tete}
  .soumission{grid-area:formulaire}
  .jauge-bloc{grid-area:jauge;justify-items:start;text-align:left;margin-top:0}
  .jauge-bloc .bouton.plein{width:auto}
  .ligne{padding:18px 22px}
  .total{padding:22px}
  .forfait-grille{grid-template-columns:.8fr 1.2fr;column-gap:72px;align-items:start}
  .collant{position:sticky;top:calc(var(--entete) + 32px)}
  .etapes{grid-template-columns:repeat(4,1fr);gap:32px;padding:44px 0 0}
  .etapes::before{left:15px;right:calc(25% - 39px);top:13px;bottom:auto;width:auto;height:3px;transform-origin:left}
  .etapes li::before{left:0;top:-44px}
  .prix-grille{grid-template-columns:1fr 1fr;column-gap:72px;align-items:center}
  .changements li{grid-template-columns:34px 200px 1fr 1fr;gap:0 24px;align-items:start}
  .num{grid-row:auto}
}

/* ---------- Le mouvement ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}

  /* Le titre monte mot à mot au chargement. */
  .js .titre .mot{display:inline-block;animation:monter .75s var(--ressort) both;animation-delay:calc(var(--i) * 40ms)}
  @keyframes monter{from{opacity:0;transform:translateY(.5em)}}

  /* La démonstration du téléphone : tout est caché tant que le script n'a pas pris la main. */
  .js .tel:not(.pret) .bulle,.js .tel.anime .bulle{opacity:0;transform:translateY(14px) scale(.96)}
  .js .tel.anime .bulle.vu{opacity:1;transform:none;transition:opacity .3s ease-out,transform .6s var(--ressort)}
  .tel.sonne .tel-sonne{opacity:1}
  .tel.sonne .tel-anneaux svg{animation:sonnerie .5s ease-in-out 3}
  .tel.sonne .tel-anneaux::before{animation:anneau 1.2s ease-out}
  .tel.sonne .tel-anneaux::after{animation:anneau 1.2s ease-out .35s}
  @keyframes sonnerie{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
  @keyframes anneau{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}

  /* Les blocs montent une fois, quand ils entrent à l'écran. */
  .js [data-apparait]{opacity:0;transform:translateY(22px)}
  .js [data-apparait].vu{opacity:1;transform:none;transition:opacity .5s ease-out,transform .8s var(--ressort)}

  /* Les vignettes du forfait s'animent une fois, avec leur ligne. */
  .js .pieces li .v-recherche span::after{transform:scaleX(1)}
  .js .pieces li.vu .v-recherche span::after{animation:frappe 1.1s steps(14) .35s forwards}
  @keyframes frappe{to{transform:scaleX(0)}}
  .js .pieces li .v-etoiles svg{opacity:0;transform:scale(.3)}
  .js .pieces li.vu .v-etoiles svg{opacity:1;transform:none;transition:opacity .2s ease-out,transform .5s var(--ressort);transition-delay:calc(.3s + var(--i) * 90ms)}
  .js .pieces li.vu .v-page span{animation:pression .7s var(--ressort) .5s}
  @keyframes pression{35%{transform:scale(.88)}}
  .js .pieces li .v-textos i{opacity:0;transform:translateY(8px) scale(.9)}
  .js .pieces li.vu .v-textos i{opacity:1;transform:none;transition:opacity .25s ease-out,transform .5s var(--ressort);transition-delay:.35s}
  .js .pieces li.vu .v-textos i:last-child{transition-delay:.75s}
  .js .pieces li .v-barres i{transform:scaleY(0)}
  .js .pieces li.vu .v-barres i{transform:scaleY(var(--h));transition:transform .7s var(--ressort);transition-delay:calc(.3s + var(--i) * 120ms)}

  /* Les barres d'avis de la fiche et le fil des étapes se dessinent. */
  .js .aa:not(.vu) .f-barres i::after{transform:scaleX(0)}
  .js .aa.vu .f-barres i::after{transition:transform .9s var(--ressort) .2s}
  .js .etapes::before{transform:scale(0)}
  .js .etapes.vu::before{transform:none;transition:transform 1.1s cubic-bezier(.3,.7,.2,1) .2s}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
}

/* « ?fige » dans l'adresse : la page sans aucun mouvement, pour les captures d'écran. */
.fige *,.fige *::before,.fige *::after{animation:none !important;transition:none !important}
.fige .v-recherche span::after{transform:scaleX(0) !important}