/* ==========================================================================
   FOX — Site vitrine · charte « cabinet éditorial »
   Tokens et composants conformes au skill fox-branding.
   Pas d'ombres portées : filets fins + espace. Orange = accent seulement.
   ========================================================================== */

@font-face{font-family:'Inter';font-weight:400;src:url('../fonts/inter-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:600;src:url('../fonts/inter-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:700;src:url('../fonts/inter-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Lora';font-weight:600;src:url('../fonts/lora-600.woff2') format('woff2');font-display:swap}

:root{
  --papier:#FBFAF7;
  --feuille:#FFFFFF;
  --encre:#23262E;
  --accent:#2A2E39;
  --highlight:#F05400;
  --highlight-texte:#C64500;
  --plume:#70747E;
  --filet:#DDD9CF;
  --ok:#1F6B4A;
  --sur-accent:#FFFFFF;
  --sortie:cubic-bezier(.22,.61,.36,1);
  --mark:url('../fox-mark.webp');
  --logo:url('../fox-logo.webp');
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);line-height:1.6;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  border-top:4px solid var(--highlight)}
img{max-width:100%}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--highlight);outline-offset:2px}

.conteneur{max-width:1180px;margin:0 auto;padding:0 40px}
.lecture{max-width:920px;margin:0 auto;padding:0 40px}
.kicker{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--plume)}
.num{font-variant-numeric:tabular-nums}
h1{font-family:Lora,Georgia,serif;font-weight:600;font-size:54px;line-height:1.1;
  color:var(--accent);margin:.45em 0 .4em;text-wrap:balance}
h2{font-family:Lora,Georgia,serif;font-weight:600;font-size:30px;line-height:1.2;
  color:var(--accent);margin:.35em 0 .35em;text-wrap:balance}
h3{font-family:Lora,Georgia,serif;font-weight:600;font-size:20px;color:var(--accent);margin:.45em 0 .3em}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:4px;padding:13px 22px;
  font-weight:600;font-size:14px;letter-spacing:.02em;text-decoration:none;cursor:pointer;
  border:1px solid var(--accent);min-height:44px;
  transition:background .25s,color .25s,border-color .25s}
.btn .fleche{display:inline-block;transition:transform .3s var(--sortie)}
.btn:hover .fleche{transform:translateX(4px)}
.btn--primaire{background:var(--accent);color:var(--sur-accent)}
.btn--primaire:hover{background:#1D2027}
.btn--secondaire{background:transparent;color:var(--accent)}
.btn--secondaire:hover{background:var(--accent);color:var(--sur-accent)}
.btn--orange{background:var(--highlight);color:#fff;border-color:var(--highlight)}
.btn--orange:hover{background:#D74B00;border-color:#D74B00}
.btn--clair{background:transparent;color:#fff;border-color:rgba(251,250,247,.55)}
.btn--clair:hover{background:rgba(251,250,247,.12)}

/* ---------- header (se condense au scroll) ---------- */
.entete{position:sticky;top:0;background:var(--papier);z-index:20;
  border-bottom:1px solid transparent;transition:border-color .3s}
.entete .int{display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:1180px;margin:0 auto;padding:16px 40px;transition:padding .35s var(--sortie)}
.entete.compacte{border-bottom-color:var(--filet)}
.entete.compacte .int{padding-top:9px;padding-bottom:9px}
.entete nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.entete nav a.lien{position:relative;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);text-decoration:none;padding:12px 0}
.entete nav a.lien::after{content:"";position:absolute;left:0;bottom:6px;height:2px;width:100%;
  background:var(--highlight);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--sortie)}
.entete nav a.lien:hover::after,.entete nav a.lien.actif::after{transform:scaleX(1);transform-origin:left}
.entete nav a.lien.actif{color:var(--highlight-texte)}
.entete .btn{padding:10px 18px;min-height:0}

/* marque header : renard + veille (lueur périodique, répond au survol) */
.marque{display:flex;align-items:center;gap:12px;text-decoration:none}
.veille{position:relative;display:block;width:42px;height:45px;flex:none;transition:width .35s var(--sortie),height .35s var(--sortie)}
.entete.compacte .veille{width:34px;height:37px}
.veille .renard{display:block;width:100%;height:100%;background:var(--mark) center/contain no-repeat}
.veille .lueur{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat}
.veille .lueur::before{content:"";position:absolute;inset:-20%;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.6) 50%,transparent 66%);
  transform:translateX(-130%);animation:lueur 5.2s ease-in-out 2s infinite}
.marque:hover .lueur::before{animation:lueur 1.1s ease-in-out}
@keyframes lueur{0%{transform:translateX(-130%)}38%{transform:translateX(130%)}100%{transform:translateX(130%)}}
.marque .nom{font-family:Lora,Georgia,serif;font-weight:600;font-size:19px;
  letter-spacing:.08em;color:var(--accent)}

/* ---------- révélations & mouvement ---------- */
.r{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .7s var(--sortie)}
.r.vu{opacity:1;transform:none}
.mot{display:inline-block;overflow:hidden;vertical-align:bottom}
.mot>span{display:inline-block;transform:translateY(108%);transition:transform .7s var(--sortie)}
.vu .mot>span{transform:none}

/* ---------- intro de marque (accueil, une fois par session) ---------- */
.voile{position:fixed;inset:0;z-index:60;background:var(--papier);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s ease,visibility .55s}
.voile.fin{opacity:0;visibility:hidden}
.voile .passer{position:absolute;right:26px;bottom:22px;border:none;background:none;
  font-family:Inter;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plume);cursor:pointer;padding:10px}
.voile .passer:hover{color:var(--accent)}
.intro{position:relative;width:640px;height:228px;overflow:hidden;max-width:92vw}
.intro .piece{position:absolute;left:0;top:-206px;width:640px;height:640px;
  background:var(--logo) 0 0/100% 100% no-repeat;opacity:0}
.voile.joue .intro .piece{opacity:1;transform:none !important;
  transition:transform .8s var(--sortie),opacity .5s ease}
.intro .f-ciel{clip-path:polygon(19% 34.7%,31.6% 34.7%,31.6% 48%,19% 48%);transform:translateY(-26px)}
.intro .f-og{clip-path:polygon(11% 34.7%,27.2% 34.7%,11% 53.2%);transform:translate(-26px,-20px) rotate(-8deg)}
.intro .f-od{clip-path:polygon(23.4% 34.7%,39.2% 34.7%,39.2% 53.2%);transform:translate(26px,-20px) rotate(8deg)}
.intro .f-jg{clip-path:polygon(11% 45.2%,26.4% 42%,19.4% 64%,11% 64%);transform:translate(-22px,12px)}
.intro .f-jd{clip-path:polygon(24.2% 42%,39.2% 45.2%,39.2% 64%,31.2% 64%);transform:translate(22px,12px)}
.intro .f-maison{clip-path:polygon(18.4% 41%,32.2% 41%,36% 55.8%,25.3% 65%,14.6% 55.8%);
  transform:translateY(22px) scale(.9);transform-origin:25% 50%}
.voile.joue .intro .f-ciel{transition-delay:.05s}
.voile.joue .intro .f-og{transition-delay:.22s}
.voile.joue .intro .f-od{transition-delay:.34s}
.voile.joue .intro .f-jg{transition-delay:.48s}
.voile.joue .intro .f-jd{transition-delay:.6s}
.voile.joue .intro .f-maison{transition-delay:.78s}
.intro .t-fox{clip-path:inset(39.8% 11% 44.2% 42.6%);transform:translateY(14px)}
.voile.joue .intro .t-fox{transition-delay:1.45s;transition-duration:.6s}
.intro .b-1{clip-path:inset(56.9% 45.0% 40.2% 42.7%)}
.intro .b-2{clip-path:inset(56.9% 31.5% 40.2% 55.2%)}
.intro .b-3{clip-path:inset(56.9% 19.4% 40.2% 68.7%)}
.intro .b-4{clip-path:inset(56.9% 15.1% 40.2% 80.7%)}
.intro .b-5{clip-path:inset(56.9% 11.2% 40.2% 85.1%)}
.intro .b-1,.intro .b-2,.intro .b-3,.intro .b-4,.intro .b-5{transform:translateY(7px)}
.voile.joue .intro .b-1{transition-delay:2.15s;transition-duration:.45s}
.voile.joue .intro .b-2{transition-delay:2.33s;transition-duration:.45s}
.voile.joue .intro .b-3{transition-delay:2.51s;transition-duration:.45s}
.voile.joue .intro .b-4{transition-delay:2.69s;transition-duration:.45s}
.voile.joue .intro .b-5{transition-delay:2.87s;transition-duration:.45s}

/* ---------- hero accueil ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
  max-width:1180px;margin:0 auto;padding:72px 40px 88px}
.hero .sous{font-size:16px;max-width:46ch;margin:0 0 28px}
.hero .ctas{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap}
.hero .preuves{display:flex;gap:26px;border-top:1px solid var(--filet);padding-top:18px;flex-wrap:wrap}
.hero .preuves span{font-size:12.5px;color:var(--plume)}
.hero .preuves b{color:var(--encre);font-weight:600}

/* le document qui se compose */
.docr{background:var(--feuille);border:1px solid var(--filet);border-radius:6px;
  padding:30px 32px;position:relative;transition:transform .35s var(--sortie),border-color .35s}
.docr:hover{transform:translateY(-3px);border-color:var(--accent)}
.docr::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:4px;
  background:var(--highlight);border-radius:6px 6px 0 0;
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--sortie) .15s}
.docr.vu::before{transform:scaleX(1)}
.docr .ligne{display:flex;justify-content:space-between;align-items:baseline}
.docr .ligne .kicker{color:var(--accent)}
.docr .bien{font-family:Lora,Georgia,serif;font-weight:600;font-size:19px;color:var(--accent);
  border-bottom:1px solid var(--filet);padding:10px 0 16px;margin-bottom:18px}
.docr .valeur{font-family:Lora,Georgia,serif;font-weight:600;font-size:44px;color:var(--accent);line-height:1.1}
.docr .fourchette{font-size:13.5px;color:var(--plume);margin:6px 0 20px}
.docr .lib{display:flex;justify-content:space-between;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--plume);margin-bottom:8px}
.docr .lib b{color:var(--highlight-texte)}
.docr .jauge{height:2px;background:var(--filet)}
.docr .jauge span{display:block;height:2px;width:0;background:var(--highlight);
  transition:width 1.1s var(--sortie) .9s}
.docr.vu .jauge span{width:82%}
.docr .pied{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--filet);
  margin-top:20px;padding-top:14px;font-size:12px;color:var(--plume)}

/* ---------- sections ---------- */
section.bloc{padding:84px 0;border-top:1px solid var(--filet)}
.bloc .intro-texte{max-width:56ch;margin:0 0 44px}

/* stepper méthode */
.etapes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:34px;position:relative}
.etapes::before{content:"";position:absolute;top:5px;left:0;right:0;height:2px;background:var(--filet)}
.etapes .prog{position:absolute;top:5px;left:0;height:2px;background:var(--highlight);
  width:0;transition:width 1.6s var(--sortie) .2s}
.etapes.vu .prog{width:100%}
.etape{padding-top:26px;position:relative}
.etape::before{content:"";position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--papier);border:2px solid var(--plume);transform:scale(.6);opacity:.4;
  transition:transform .4s var(--sortie),opacity .4s,border-color .4s}
.etapes.vu .etape::before{transform:scale(1);opacity:1;border-color:var(--highlight)}
.etapes.vu .etape:nth-child(3)::before{transition-delay:.5s}
.etapes.vu .etape:nth-child(4)::before{transition-delay:1.1s}
.etape .lib{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--plume)}
.etape .lib b{color:var(--highlight-texte)}
.etape p{font-size:14px;margin:0}

/* carte du secteur */
.secteur{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.carte-cadre{background:var(--feuille);border:1px solid var(--filet);border-radius:6px;padding:18px;position:relative}
.carte-cadre .legende{position:absolute;left:30px;bottom:26px;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--plume);background:var(--feuille);
  padding:4px 8px;border:1px solid var(--filet);border-radius:4px}
.rue{fill:none;stroke:var(--filet);stroke-width:1.6;stroke-dasharray:600;stroke-dashoffset:600;
  transition:stroke-dashoffset 2.2s ease}
.vu .rue{stroke-dashoffset:0}
.parcelle{fill:none;stroke:var(--filet);stroke-width:1;opacity:0;transition:opacity .8s ease .6s}
.vu .parcelle{opacity:.75}
.vente{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s var(--sortie)}
.vu .vente{opacity:1;transform:none}
.vente circle.pt{fill:var(--highlight)}
.vente circle.onde{fill:none;stroke:var(--highlight);stroke-width:1;opacity:0}
.vu .vente circle.onde{animation:onde 2.6s ease-out infinite}
@keyframes onde{0%{r:5;opacity:.55}70%{r:16;opacity:0}100%{r:16;opacity:0}}
.vente text{font-family:Lora,Georgia,serif;font-weight:600;font-size:12px;fill:var(--accent)}
.vente text.an{font-family:Inter,sans-serif;font-weight:600;font-size:8.5px;fill:var(--plume);letter-spacing:.08em}
.nom-rue{font-family:Inter,sans-serif;font-weight:600;font-size:7.5px;letter-spacing:.14em;
  fill:var(--plume);opacity:0;transition:opacity .9s ease 1.1s}
.vu .nom-rue{opacity:.9}
.stats{display:flex;margin-top:36px;flex-wrap:wrap;row-gap:18px}
.stat{border-left:2px solid var(--filet);padding:2px 26px 2px 16px}
.stat:first-child{border-left-color:var(--highlight)}
.stat .valeur{font-family:Lora,Georgia,serif;font-weight:600;font-size:30px;color:var(--accent)}
.stat .lib{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--plume)}

/* cartes (bénéfices, sections produit) */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.carte{background:var(--feuille);border:1px solid var(--filet);border-radius:6px;padding:26px 28px;
  position:relative;transition:transform .35s var(--sortie),border-color .35s}
.carte:hover{transform:translateY(-3px);border-color:var(--accent)}
.carte--marque::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:4px;
  background:var(--highlight);border-radius:6px 6px 0 0}
.carte .kicker{display:block;margin-bottom:8px}
.carte h3{margin:.2em 0 .3em}
.carte p{font-size:14px;margin:0;color:var(--encre)}

/* liste éditoriale (rapport, avis de valeur) */
.deux-col{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:start}
.liste-filet{list-style:none;margin:0;padding:0}
.liste-filet li{border-top:1px solid var(--filet);padding:14px 0 14px 0;font-size:14.5px}
.liste-filet li:last-child{border-bottom:1px solid var(--filet)}
.liste-filet b{font-weight:600;color:var(--accent)}

/* bande CTA navy */
.bande{background:var(--accent);color:#fff}
.bande .int{max-width:1180px;margin:0 auto;padding:64px 40px;display:flex;
  align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.bande h2{color:#fff;margin:0;max-width:24ch;font-size:28px}
.bande p{color:rgba(251,250,247,.75);margin:6px 0 0;font-size:14px}

/* ---------- pages intérieures ---------- */
.page-tete{max-width:1180px;margin:0 auto;padding:64px 40px 24px}
.page-tete h1{font-size:40px;max-width:22ch}
.page-tete .sous{font-size:16px;max-width:56ch;margin:0}

/* déroulé avant/pendant/après (agences) */
.deroule{counter-reset:temps}

/* formulaires éditoriaux */
.formulaire{background:var(--feuille);border:1px solid var(--filet);border-top:4px solid var(--highlight);
  border-radius:6px;padding:34px 36px;max-width:640px}
.champ{margin-bottom:20px}
.champ label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--plume);margin-bottom:7px}
.champ label b{color:var(--highlight-texte);font-weight:600}
.champ input,.champ select,.champ textarea{width:100%;border:1px solid var(--filet);border-radius:4px;
  background:var(--papier);color:var(--encre);font-family:Inter,sans-serif;font-size:14.5px;
  padding:12px 14px;min-height:44px;transition:border-color .25s}
.champ textarea{min-height:120px;resize:vertical;line-height:1.5}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--accent);outline:none}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{
  outline:2px solid var(--highlight);outline-offset:1px}
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formulaire .note-envoi{font-size:12.5px;color:var(--plume);margin:14px 0 0}
.formulaire .note-envoi a{color:var(--highlight-texte)}

/* pages légales */
.legal{padding:24px 0 80px}
.legal .cadre-attente{border:1px solid var(--filet);border-left:3px solid var(--highlight);
  border-radius:4px;background:var(--feuille);padding:16px 20px;font-size:13.5px;color:var(--plume);
  margin:26px 0 38px}
.legal h2{font-size:22px;margin-top:1.6em}
.legal p{font-size:14.5px;max-width:70ch}
.legal .a-completer{color:var(--plume);font-style:italic}

/* ---------- footer ---------- */
footer.pied{border-top:1px solid var(--filet);margin-top:0;background:var(--papier)}
.pied .int{max-width:1180px;margin:0 auto;padding:52px 40px 28px;display:grid;
  grid-template-columns:1.2fr .8fr .8fr;gap:44px}
.pied .marque-pied{display:flex;align-items:flex-start;gap:14px}
.pied .marque-pied .renard-pied{display:block;width:38px;height:41px;flex:none;
  background:var(--mark) center/contain no-repeat}
.pied .marque-pied .nom{font-family:Lora,Georgia,serif;font-weight:600;font-size:17px;color:var(--accent)}
.pied .marque-pied .base{font-size:12.5px;color:var(--plume);margin:2px 0 0}
.pied h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--plume);margin:0 0 14px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:9px}
.pied li a{font-size:13.5px;text-decoration:none;color:var(--encre)}
.pied li a:hover{color:var(--highlight-texte)}
.pied .mention{max-width:1180px;margin:0 auto;padding:18px 40px 26px;border-top:1px solid var(--filet);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12px;color:var(--plume)}

/* ---------- progression de lecture (rappel de la jauge de fiabilité) ---------- */
#progression{position:fixed;top:0;left:0;width:100%;height:4px;background:var(--highlight-texte);
  transform:scaleX(0);transform-origin:left;z-index:55;pointer-events:none}

/* ---------- lien vers l'application ---------- */
.entete nav a.lien--app{color:var(--plume)}
.entete nav a.lien--app::after{background:var(--accent)}

/* ---------- CTA mobile permanent ---------- */
.cta-mobile{display:none}

/* ---------- parcours produit (questionnaire → moteur → documents) ---------- */
.processus{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin-top:42px}
.volet{background:var(--feuille);border:1px solid var(--filet);border-radius:6px;
  padding:24px;position:relative}
.volet:not(:last-child)::after{content:"→";position:absolute;right:-22px;top:50%;
  transform:translateY(-50%);color:var(--plume);font-size:17px}
.volet .cartouche{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--plume);display:flex;justify-content:space-between;gap:10px;margin-bottom:16px;
  border-bottom:1px solid var(--filet);padding-bottom:12px}
.volet .cartouche b{color:var(--highlight-texte)}
.volet h3{margin:0 0 14px;font-size:18px}
.volet .legende-volet{font-size:13px;color:var(--plume);margin:16px 0 0}

/* volet 1 — la saisie guidée */
.champ-fictif{display:flex;align-items:center;gap:10px;border:1px solid var(--filet);
  border-radius:4px;padding:9px 12px;margin-bottom:8px;font-size:12.5px;color:var(--plume);
  background:var(--papier)}
.champ-fictif .coche{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--filet);
  flex:none;position:relative;transition:border-color .3s}
.champ-fictif .coche::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--ok);transform:scale(0);transition:transform .35s var(--sortie)}
.processus.vu .champ-fictif .coche{border-color:var(--ok)}
.processus.vu .champ-fictif .coche::after{transform:scale(1)}
.processus.vu .champ-fictif:nth-of-type(2) .coche{transition-delay:.35s}
.processus.vu .champ-fictif:nth-of-type(2) .coche::after{transition-delay:.35s}
.processus.vu .champ-fictif:nth-of-type(3) .coche{transition-delay:.7s}
.processus.vu .champ-fictif:nth-of-type(3) .coche::after{transition-delay:.7s}
.completude{margin-top:14px}
.completude .lib{display:flex;justify-content:space-between;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--plume);margin-bottom:7px}
.completude .lib b{color:var(--highlight-texte)}
.completude .jauge{height:2px;background:var(--filet)}
.completude .jauge span{display:block;height:2px;width:0;background:var(--highlight);
  transition:width 1s var(--sortie) 1s}
.processus.vu .completude .jauge span{width:92%}

/* volet 2 — le moteur */
.puces-methodes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.puce{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--filet);border-radius:4px;padding:6px 10px;color:var(--plume);
  opacity:.35;transform:translateY(4px);
  transition:opacity .4s ease,transform .4s var(--sortie),border-color .4s,color .4s}
.processus.vu .puce{opacity:1;transform:none;border-color:var(--accent);color:var(--accent)}
.processus.vu .puce:nth-child(2){transition-delay:.35s}
.processus.vu .puce:nth-child(3){transition-delay:.7s}
.valeur-moteur{font-family:Lora,Georgia,serif;font-weight:600;font-size:29px;color:var(--accent);
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .5s ease 1.1s}
.processus.vu .valeur-moteur{opacity:1}
.fourchette-moteur{font-size:12px;color:var(--plume);margin:2px 0 12px;
  font-variant-numeric:tabular-nums}
.fiab-moteur .lib{display:flex;justify-content:space-between;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--plume);margin-bottom:7px}
.fiab-moteur .lib b{color:var(--highlight-texte)}
.fiab-moteur .jauge{height:2px;background:var(--filet)}
.fiab-moteur .jauge span{display:block;height:2px;width:0;background:var(--highlight);
  transition:width .9s var(--sortie) 1.4s}
.processus.vu .fiab-moteur .jauge span{width:82%}

/* volet 3 — les documents sortent */
.sortie-docs{position:relative;height:158px;margin-bottom:4px}
.page-doc{position:absolute;left:50%;top:6px;width:98px;height:130px;background:var(--feuille);
  border:1px solid var(--filet);border-top:3px solid var(--highlight);border-radius:4px;
  padding:10px 9px;transform:translateX(-50%);opacity:0;
  transition:transform .7s var(--sortie),opacity .5s ease}
.page-doc .titre-doc{font-size:7.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.page-doc .l{height:3px;background:var(--filet);border-radius:2px;margin:5px 0}
.page-doc .l.courte{width:60%}
.processus.vu .d1{opacity:1;transform:translateX(-50%) translateX(-56px) rotate(-5deg);
  transition-delay:.45s}
.processus.vu .d2{opacity:1;transform:translateX(-50%) translateX(56px) rotate(5deg);
  transition-delay:.7s}
.badge-clic{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--highlight-texte);border:1px solid var(--filet);background:var(--papier);
  border-radius:4px;padding:5px 10px;white-space:nowrap;opacity:0;transition:opacity .5s ease 1.2s}
.processus.vu .badge-clic{opacity:1}

/* ---------- analyse par photos ---------- */
.scene-photo{background:var(--feuille);border:1px solid var(--filet);border-radius:6px;
  padding:22px;max-width:420px}
.zone-photo{position:relative;border:1px solid var(--filet);border-radius:4px;
  background:var(--papier);aspect-ratio:3/2;overflow:hidden}
.zone-photo img{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 2.2s var(--sortie)}
.scene-photo.vu .zone-photo img{transform:scale(1)}
.zone-photo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;
  background:var(--highlight);opacity:0}
.scene-photo.vu .zone-photo::after{animation:balayage-photo 1.7s ease .2s forwards}
@keyframes balayage-photo{0%{left:0;opacity:.9}88%{opacity:.9}100%{left:calc(100% - 2px);opacity:0}}
/* points d'analyse posés sur la photo */
.marqueur{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--highlight);border:2px solid #fff;opacity:0;transform:scale(.4);
  transition:opacity .35s ease,transform .45s var(--sortie)}
.marqueur::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid var(--highlight);opacity:0}
.scene-photo.vu .marqueur{opacity:1;transform:scale(1)}
.scene-photo.vu .marqueur::after{animation:onde-photo 2.4s ease-out infinite}
@keyframes onde-photo{0%{transform:scale(.6);opacity:.6}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
.scene-photo.vu .m-cuisine{transition-delay:.55s}
.scene-photo.vu .m-cuisine::after{animation-delay:.55s}
.scene-photo.vu .m-porte{transition-delay:.95s}
.scene-photo.vu .m-porte::after{animation-delay:.95s}
.scene-photo.vu .m-fenetre{transition-delay:1.55s}
.scene-photo.vu .m-fenetre::after{animation-delay:1.55s}
.observations{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.obs{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--filet);border-radius:4px;padding:6px 10px;color:var(--accent);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s var(--sortie)}
.obs::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--highlight);margin-right:7px;vertical-align:1px}
.scene-photo.vu .obs{opacity:1;transform:none}
.scene-photo.vu .obs:nth-child(1){transition-delay:.75s}
.scene-photo.vu .obs:nth-child(2){transition-delay:1.15s}
.scene-photo.vu .obs:nth-child(3){transition-delay:1.75s}

/* ---------- bande « gain de temps » (moment fort navy) ---------- */
.bande-temps{background:var(--accent);color:#fff;padding:92px 0}
.bande-temps .kicker{color:#FF9A5E}
.bande-temps h2{color:#fff;font-size:44px;max-width:16ch}
.bande-temps .sous-bande{color:rgba(251,250,247,.78);font-size:15.5px;max-width:52ch;margin:0}
.bande-temps .gains{display:grid;grid-template-columns:1fr 1fr 1fr;gap:34px;margin-top:48px}
.gain{border-top:2px solid rgba(251,250,247,.22);padding-top:16px;position:relative}
.gain::before{content:"";position:absolute;top:-2px;left:0;width:0;height:2px;
  background:var(--highlight);transition:width .9s var(--sortie) .3s}
.gain.vu::before{width:46px}
.gain h3{color:#fff;font-size:19px;margin:.2em 0 .25em}
.gain p{color:rgba(251,250,247,.75);font-size:13.5px;margin:0}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--filet)}
.faq details:last-of-type{border-bottom:1px solid var(--filet)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:20px;padding:18px 2px;font-weight:600;font-size:16px;
  color:var(--accent);font-family:Lora,Georgia,serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:Inter,sans-serif;color:var(--highlight-texte);
  font-size:18px;flex:none;transition:transform .3s var(--sortie)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .rep{padding:0 2px 20px;font-size:14.5px;max-width:65ch}
.faq .rep a{color:var(--highlight-texte)}

/* ---------- footer : réseaux sociaux ---------- */
.reseaux{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}
.reseaux a{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--plume);text-decoration:none;border-bottom:1px solid var(--filet);padding-bottom:2px}
.reseaux a:hover{color:var(--highlight-texte);border-bottom-color:var(--highlight)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero,.secteur,.deux-col{grid-template-columns:1fr;gap:44px}
  .grille{grid-template-columns:1fr 1fr}
  .pied .int{grid-template-columns:1fr 1fr}
  h1{font-size:38px}
  .page-tete h1{font-size:32px}
  .processus{grid-template-columns:1fr}
  .volet:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-24px;
    transform:translateX(-50%)}
  .bande-temps h2{font-size:32px}
  .bande-temps .gains{grid-template-columns:1fr;gap:24px}
}
@media (max-width:680px){
  .conteneur,.lecture,.page-tete,.entete .int,.bande .int{padding-left:22px;padding-right:22px}
  .hero{padding:48px 22px 60px}
  section.bloc{padding:60px 0}
  .etapes{grid-template-columns:1fr}
  .etapes::before,.etapes .prog{display:none}
  .grille{grid-template-columns:1fr}
  .pied .int{grid-template-columns:1fr;gap:30px}
  .champ-duo{grid-template-columns:1fr}
  .formulaire{padding:26px 22px}
  h1{font-size:31px}
  .entete{position:static}
  .entete .int{flex-wrap:wrap;row-gap:4px}
  .entete nav{gap:15px}
  .entete nav .btn{display:none}
  body.avec-cta-mobile{padding-bottom:74px}
  body.avec-cta-mobile .cta-mobile{display:block;position:fixed;left:0;right:0;bottom:0;
    z-index:40;background:var(--papier);border-top:1px solid var(--filet);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .cta-mobile .btn{display:flex;justify-content:center;width:100%}
}

/* ==========================================================================
   APERÇU DU RAPPORT — document white-label (page apercu-rapport.html)
   Agence de démonstration (fictive) : couleur --agence pour illustrer la
   personnalisation. FOX reste discret en pied de document.
   ========================================================================== */
.rapport-scene{background:var(--papier);padding:10px 0 8px}
.rapport-doc{--agence:#2F5D4A;background:var(--feuille);border:1px solid var(--filet);
  border-radius:6px;max-width:860px;margin:0 auto;overflow:hidden}

/* couverture */
.rd-couv{background:var(--agence);color:#fff;padding:30px 40px}
.rd-couv .rd-marque{display:flex;align-items:center;gap:14px}
.rd-couv .rd-mono{width:46px;height:46px;flex:none;border:1.5px solid rgba(255,255,255,.6);
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:Lora,Georgia,serif;font-weight:600;font-size:22px}
.rd-couv .rd-nom{font-family:Lora,Georgia,serif;font-weight:600;font-size:19px;line-height:1.2}
.rd-couv .rd-sous{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:2px}
.rd-couv .rd-bandeau{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);flex-wrap:wrap}
.rd-couv .rd-type{font-family:Lora,Georgia,serif;font-weight:600;font-size:26px}
.rd-couv .rd-meta{font-size:12px;color:rgba(255,255,255,.78);text-align:right;
  font-variant-numeric:tabular-nums;line-height:1.7}

/* corps du rapport */
.rd-corps{padding:8px 40px 36px}
.rd-sec{padding:30px 0;border-bottom:1px solid var(--filet)}
.rd-sec:last-child{border-bottom:none}
.rd-sec > .kicker{display:block;margin-bottom:16px;color:var(--agence)}
.rd-titre-bien{font-family:Lora,Georgia,serif;font-weight:600;font-size:22px;color:var(--accent);
  margin:0 0 4px}
.rd-adresse{font-size:13.5px;color:var(--plume);margin:0}

/* fiche caractéristiques */
.rd-fiche{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--filet);
  border:1px solid var(--filet);border-radius:4px;overflow:hidden;margin-top:20px}
.rd-fiche div{background:var(--feuille);padding:14px 16px}
.rd-fiche .lib{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--plume);display:block;margin-bottom:5px}
.rd-fiche .val{font-family:Lora,Georgia,serif;font-weight:600;font-size:17px;color:var(--accent);
  font-variant-numeric:tabular-nums}

/* valeur estimée */
.rd-valeur-bloc{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.rd-fourchette{display:flex;align-items:baseline;gap:10px;margin:6px 0 4px}
.rd-fourchette .centre{font-family:Lora,Georgia,serif;font-weight:600;font-size:46px;
  color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.rd-fourchette .unite{font-family:Lora,Georgia,serif;font-weight:600;font-size:22px;color:var(--accent)}
.rd-bornes{font-size:13.5px;color:var(--plume);font-variant-numeric:tabular-nums;margin:0 0 18px}
.rd-echelle{height:6px;border-radius:3px;background:var(--filet);position:relative;margin:0 0 6px}
.rd-echelle .plage{position:absolute;top:0;bottom:0;left:14%;right:14%;background:#E7E3D8;border-radius:3px;
  transform:scaleX(0);transform-origin:center;transition:transform 1s var(--sortie) .3s}
.rapport-doc.vu .rd-echelle .plage{transform:scaleX(1)}
.rd-echelle .curseur{position:absolute;top:-4px;left:50%;width:2px;height:14px;background:var(--highlight);
  transform:translateX(-50%) scaleY(0);transform-origin:center;transition:transform .5s var(--sortie) 1.1s}
.rapport-doc.vu .rd-echelle .curseur{transform:translateX(-50%) scaleY(1)}
.rd-echelle-lib{display:flex;justify-content:space-between;font-size:11px;color:var(--plume);
  font-variant-numeric:tabular-nums}
.rd-fiab{border-left:2px solid var(--highlight);padding-left:18px}
.rd-fiab .score{font-family:Lora,Georgia,serif;font-weight:600;font-size:34px;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1}
.rd-fiab .score small{font-size:16px;color:var(--plume)}
.rd-fiab .lib{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--plume);margin:6px 0 10px}
.rd-fiab .niveau{font-size:13px;color:var(--encre)}
.rd-fiab .niveau b{color:var(--highlight-texte)}

/* méthodes croisées */
.rd-methode{margin-bottom:18px}
.rd-methode:last-child{margin-bottom:0}
.rd-methode .tete{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13.5px;margin-bottom:7px}
.rd-methode .tete b{font-weight:600;color:var(--accent)}
.rd-methode .tete .poids{font-family:Lora,Georgia,serif;font-weight:600;color:var(--agence);
  font-variant-numeric:tabular-nums}
.rd-methode .barre{height:6px;border-radius:3px;background:var(--filet);overflow:hidden}
.rd-methode .barre span{display:block;height:6px;background:var(--agence);border-radius:3px;
  width:0;transition:width 1s var(--sortie)}
.rapport-doc.vu .rd-methode .barre span{width:var(--p)}
.rd-methode .desc{font-size:12.5px;color:var(--plume);margin:6px 0 0}

/* table des ventes de référence */
.rd-table-enveloppe{overflow-x:auto;margin-top:6px}
.rd-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.rd-table th{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--plume);
  text-align:left;padding:9px 12px;border-bottom:2px solid var(--accent);font-weight:600}
.rd-table td{padding:9px 12px;border-bottom:1px solid var(--filet)}
.rd-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.rd-table tr:last-child td{border-bottom:none}
.rd-table .ref-adresse{color:var(--accent);font-weight:600}
.rd-note-source{font-size:12px;color:var(--plume);margin:12px 0 0}

/* points de vigilance */
.rd-vigilance{list-style:none;margin:16px 0 0;padding:0}
.rd-vigilance li{position:relative;padding:11px 0 11px 22px;font-size:14px;
  border-bottom:1px solid var(--filet)}
.rd-vigilance li:last-child{border-bottom:none}
.rd-vigilance li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;
  border-radius:50%;background:var(--attention,#9A6516)}
.rd-vigilance b{color:var(--accent);font-weight:600}

/* analyse (prose cabinet) */
.rd-analyse p{font-size:14.5px;margin:0 0 14px;max-width:64ch}
.rd-analyse p:last-child{margin-bottom:0}
.rd-analyse .signature{font-size:12.5px;color:var(--plume);margin-top:18px}

/* pied de document */
.rd-pied{background:var(--papier);border-top:1px solid var(--filet);padding:22px 40px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.rd-pied .mentions{font-size:11.5px;color:var(--plume);max-width:70ch;line-height:1.6}
.rd-pied .propulse{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--plume);white-space:nowrap}
.rd-pied .propulse b{color:var(--highlight-texte)}

/* légende sous le document */
.rd-legende{max-width:860px;margin:18px auto 0;font-size:13px;color:var(--plume);
  display:flex;align-items:center;gap:10px}
.rd-legende .pastille{width:12px;height:12px;border-radius:3px;background:#2F5D4A;flex:none}

@media (max-width:680px){
  .rd-couv,.rd-corps,.rd-pied{padding-left:22px;padding-right:22px}
  .rd-fiche{grid-template-columns:1fr 1fr}
  .rd-valeur-bloc{grid-template-columns:1fr;gap:26px}
  .rd-fourchette .centre{font-size:38px}
}

/* ---------- accessibilité mouvement ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .r,.mot>span{opacity:1 !important;transform:none !important;transition:none !important}
  .docr::before,.docr .jauge span,.etapes .prog,.etape::before{transition:none !important}
  .docr.vu::before{transform:scaleX(1)}
  .etapes.vu .prog{width:100%}
  .rue{stroke-dashoffset:0 !important;transition:none !important}
  .parcelle,.vente{opacity:1 !important;transform:none !important;transition:none !important}
  .vente circle.onde{animation:none !important}
  .veille .lueur::before{animation:none !important}
  .voile{display:none !important}
  .champ-fictif .coche,.champ-fictif .coche::after,.puce,.valeur-moteur,.page-doc,.badge-clic,
  .completude .jauge span,.fiab-moteur .jauge span,.gain::before{transition:none !important}
  .processus .puce,.processus .valeur-moteur,.processus .badge-clic{opacity:1;transform:none}
  .processus .champ-fictif .coche{border-color:var(--ok)}
  .processus .champ-fictif .coche::after{transform:scale(1)}
  .processus .completude .jauge span{width:92%}
  .processus .fiab-moteur .jauge span{width:82%}
  .processus .d1{opacity:1;transform:translateX(-50%) translateX(-56px) rotate(-5deg)}
  .processus .d2{opacity:1;transform:translateX(-50%) translateX(56px) rotate(5deg)}
  .gain::before{width:46px}
  .zone-photo::after{animation:none !important;opacity:0}
  .obs,.nom-rue{transition:none !important;opacity:1 !important;transform:none !important}
  .zone-photo img{transform:none !important;transition:none !important}
  .marqueur{transition:none !important;opacity:1 !important;transform:scale(1) !important}
  .marqueur::after{animation:none !important}
  .intro .piece{opacity:1 !important;transform:none !important;transition:none !important}
  .docr,.carte{transition:none}
  .rd-echelle .plage,.rd-echelle .curseur,.rd-methode .barre span{transition:none !important}
  .rapport-doc.vu .rd-echelle .plage{transform:scaleX(1)}
  .rapport-doc.vu .rd-echelle .curseur{transform:translateX(-50%) scaleY(1)}
  .rd-methode .barre span{width:var(--p)}
}