/* SYNERO — feuille de style commune. Tokens : knowledge-base/brand-synero.md
   Site web : titres en Inter (choix de Mick, 2026-11-05) ; Montserrat reste la police des supports imprimés. */

@font-face{font-family:"Inter";src:url("/assets/fonts/inter.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --nuit:#0A2A52;
  --profond:#082449;
  --acier:#2C638D;
  --encre:#060F1D;
  --clair:#F4F6F9;
  --bordure:#DDE3EA;
  --gris:#5A6B7D;
  --ciel:#9FC2DC;
  /* Accent 10 % (règle 60-30-10) : ambre, complémentaire du bleu. Toujours avec du texte bleu nuit, jamais en texte sur fond blanc. */
  --ambre:#F5A524;
  --ambre-fonce:#E39412;
  --blanc:#FFFFFF;

  --texte:var(--nuit);
  --texte-doux:var(--gris);
  --surface:var(--blanc);
  --surface-alt:var(--clair);
  --accent:var(--acier);
  --focus:var(--acier);

  --titre:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --corps:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --max:1120px;
  --etroit:760px;
  --rayon:12px;
  --rayon-sm:8px;
  --ombre-1:0 1px 2px rgba(10,42,82,.06),0 4px 16px rgba(10,42,82,.06);
  --ombre-2:0 12px 32px rgba(10,42,82,.10);
  --ombre-3:0 16px 40px rgba(10,42,82,.10);
  --duree:.2s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --z-header:50;
  --z-skip:100;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{
  margin:0;background:var(--surface);color:var(--texte);
  font-family:var(--corps);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--titre);font-weight:600;line-height:1.15;letter-spacing:-0.025em;margin:0;text-wrap:balance}
h3,h4{letter-spacing:-0.01em}
p{margin:0;text-wrap:pretty}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--nuit)}
ul{margin:0;padding:0}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.final :focus-visible,.section--sombre :focus-visible,.site-footer :focus-visible{outline-color:var(--ciel)}
main:focus{outline:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap--etroit{max-width:var(--etroit)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{
  position:absolute;left:16px;top:-60px;z-index:var(--z-skip);
  background:var(--blanc);color:var(--nuit);padding:12px 18px;border-radius:var(--rayon-sm);
  font-weight:600;text-decoration:none;box-shadow:var(--ombre-2);transition:top var(--duree) var(--ease);
}
.skip:focus{top:12px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  font-family:var(--titre);font-weight:600;font-size:16px;line-height:1.2;
  padding:12px 24px;border-radius:var(--rayon-sm);text-decoration:none;cursor:pointer;
  transition:transform var(--duree) var(--ease),box-shadow var(--duree) var(--ease),background-color var(--duree) var(--ease),color var(--duree) var(--ease);
  border:2px solid transparent;touch-action:manipulation;
}
.btn svg{width:16px;height:16px;flex:none}
.btn:active{transform:scale(.98)}
.btn--clair{background:var(--blanc);color:var(--nuit)}
.btn--clair:hover{color:var(--nuit);background:var(--clair)}
/* Bouton d'action principal : l'accent ambre */
.btn--fonce{background:var(--ambre);color:var(--nuit)}
.btn--fonce:hover{background:var(--ambre-fonce);color:var(--nuit)}
.final .btn--clair{background:var(--ambre);color:var(--nuit)}
.final .btn--clair:hover{background:var(--ambre-fonce);color:var(--nuit)}
.btn--contour{background:transparent;color:var(--nuit);border-color:var(--bordure)}
.btn--contour:hover{color:var(--nuit);border-color:var(--acier);background:var(--blanc)}
.btn--contour-fonce{background:transparent;color:var(--nuit);border-color:var(--bordure)}
.btn--contour-fonce:hover{color:var(--nuit);border-color:var(--acier)}
.btn--mini{min-height:44px;padding:8px 16px;font-size:15px}
.btn--large{width:100%}
@media (min-width:560px){.btn--large{width:auto}}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;min-height:44px}
.lien-fleche svg{width:16px;height:16px;transition:transform var(--duree) var(--ease)}
.lien-fleche:hover svg{transform:translateX(3px)}

/* ---------- En-tête (clair) ---------- */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--bordure);
}
@supports (backdrop-filter:blur(10px)){.site-header{background:rgba(255,255,255,.9);backdrop-filter:blur(10px)}}
.nav{display:flex;align-items:center;gap:16px;padding:12px 24px;max-width:var(--max);margin:0 auto;min-height:68px}
.nav__logo{display:flex;align-items:center;margin-right:auto;min-height:44px}
.nav__logo img{width:148px;height:40px}
.nav__liens{display:flex;align-items:center;gap:4px;list-style:none}
.nav__liens a{
  display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:6px;
  color:var(--nuit);text-decoration:none;font-size:15px;font-weight:500;
  transition:color var(--duree) var(--ease),background-color var(--duree) var(--ease);
}
.nav__liens a:hover{color:var(--nuit);background:var(--clair)}
.nav__liens a[aria-current="page"]{color:var(--acier);box-shadow:inset 0 -2px 0 var(--acier);border-radius:0}
.nav__cta{box-shadow:none}
.nav__menu{
  display:none;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;
  background:transparent;border:1px solid var(--bordure);border-radius:var(--rayon-sm);
  color:var(--nuit);font:600 15px/1 var(--corps);cursor:pointer;
}
.nav__menu svg{width:20px;height:20px}
@media (max-width:900px){
  .nav{gap:10px;padding:10px 16px;min-height:64px}
  .nav__logo img{width:126px;height:34px}
  .nav__menu{display:inline-flex}
  .nav__liens{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;
    background:var(--blanc);border-bottom:1px solid var(--bordure);box-shadow:var(--ombre-2);
  }
  .nav__liens.ouvert{display:flex}
  .nav__liens a{min-height:52px;font-size:17px;border-bottom:1px solid var(--bordure);border-radius:0}
  .nav__liens a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--acier);padding-left:16px}
}
@media (max-width:340px){.nav__cta{display:none}}

/* ---------- Hero (clair) ---------- */
.hero{
  background:linear-gradient(180deg,var(--blanc) 0%,var(--blanc) 70%,#F8FAFC 100%);
  color:var(--nuit);position:relative;overflow:hidden;padding:56px 0 64px;border-bottom:1px solid var(--bordure);
}
.hero--page{padding:48px 0 56px}
@media (min-width:900px){.hero{padding:88px 0 96px}.hero--page{padding:72px 0 80px}}
.hero__grille{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.hero__grille{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:64px}}
.eyebrow{
  display:block;font-size:15px;font-weight:600;line-height:1.4;
  color:var(--acier);margin-bottom:16px;
}
.hero h1{font-size:clamp(34px,5.4vw,56px);line-height:1.08;margin-bottom:24px}
.hero--page h1{font-size:clamp(30px,4.4vw,46px);line-height:1.12}
.hero h1 .accent{color:var(--nuit);background:linear-gradient(var(--ambre),var(--ambre)) no-repeat 0 90%/100% 28%;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero__sub{font-size:clamp(17px,2.1vw,20px);color:var(--gris);max-width:640px;margin-bottom:32px}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.hero__garanties{margin-top:24px;padding-top:24px;border-top:1px solid var(--bordure);font-size:15px;color:var(--gris);max-width:560px}
.hero__note{font-size:15px;color:var(--gris)}
.check{width:18px;height:18px;flex:none;color:var(--acier)}

/* Portrait du hero */
.portrait{position:relative;max-width:400px;justify-self:center;width:100%}
.portrait picture img{border-radius:16px;width:100%;aspect-ratio:1;object-fit:cover;box-shadow:var(--ombre-3)}
.portrait__legende{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px 0}
.portrait__nom{font-family:var(--titre);font-weight:600;font-size:16px;color:var(--nuit)}
.portrait__role{font-size:14px;color:var(--gris)}
.portrait__citation{
  margin-top:16px;padding:16px 4px 0;border-top:1px solid var(--bordure);
  color:var(--nuit);font-size:15px;line-height:1.45;
}
.portrait__citation strong{display:block;font-family:var(--titre);font-weight:600;font-size:16px;margin-bottom:4px}
.portrait__citation span{font-size:13px;color:var(--gris)}

/* Bandeau preuve */
.preuve{display:flex;align-items:center;gap:12px;margin-top:32px;padding:12px 16px;border-radius:12px;background:var(--clair);border:1px solid var(--bordure);max-width:560px}
.preuve p{font-size:15px;color:var(--nuit);line-height:1.45}
.preuve a{color:var(--acier);font-weight:600}

/* ---------- Sections ---------- */
section{padding:72px 0}
@media (min-width:900px){section{padding:96px 0}}
.section--clair{background:var(--surface-alt);border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure)}
.section--sombre{background:var(--nuit);color:var(--blanc)}
.kicker{font-size:15px;font-weight:600;line-height:1.4;color:var(--acier);margin-bottom:12px}
.section--sombre .kicker{color:var(--ciel)}
h2{font-size:clamp(27px,3.6vw,40px);margin-bottom:16px}
.chapeau{font-size:18px;color:var(--texte-doux);max-width:660px}
.section--sombre .chapeau{color:rgba(255,255,255,.82)}
.tete{margin-bottom:44px}
.tete--centre{text-align:center}
.tete--centre .chapeau{margin:0 auto}
.suite{margin-top:36px}

/* ---------- Cartes ---------- */
.grille{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grille--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.carte{
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:24px;
  transition:box-shadow var(--duree) var(--ease),border-color var(--duree) var(--ease);
}
a.carte{display:block;text-decoration:none;color:inherit}
a.carte:hover,.carte--survol:hover{box-shadow:var(--ombre-1);border-color:#c6d3e0;color:inherit}
.carte h3{font-size:18px;font-weight:600;margin-bottom:8px}
.carte p{font-size:16px;color:var(--texte-doux)}
.carte .lien-fleche{margin-top:12px;color:var(--acier)}
.puce{color:var(--acier);display:flex;margin-bottom:12px}
.puce svg{width:20px;height:20px}
/* Liste de constats : pas de boîtes, un filet au-dessus de chaque point */
.grille--liste{gap:40px 32px}
.grille--liste > .carte{background:none;border:0;border-top:1px solid var(--bordure);border-radius:0;padding:24px 0 0}
.conclusion{margin-top:36px;font-size:18px;font-weight:500;color:var(--nuit);max-width:700px}
.conclusion strong{color:var(--acier);font-weight:600}
.etiquette{display:inline-block;font-size:14px;font-weight:600;color:var(--acier);background:rgba(44,99,141,.08);border-radius:6px;padding:4px 8px;margin-bottom:12px}

/* ---------- Étapes ---------- */
.etapes{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));counter-reset:e;list-style:none}
.etape{position:relative;padding-top:24px;border-top:3px solid var(--bordure)}
.etape::before{
  counter-increment:e;content:"0" counter(e);
  font-family:var(--titre);font-weight:600;font-size:15px;color:var(--acier);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:12px;
}
.etape h3{font-size:20px;margin-bottom:10px}
.etape p{color:var(--texte-doux);font-size:16px}
.etape--actif{border-top-color:var(--acier)}

/* ---------- Témoignage ---------- */
.temoin{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.temoin{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px}}
.video{
  position:relative;width:100%;max-width:340px;justify-self:center;
  border-radius:18px;overflow:hidden;background:var(--encre);box-shadow:var(--ombre-3);
  aspect-ratio:464/832;
}
.video video{width:100%;height:100%;object-fit:cover}
.citation{margin:0}
.citation blockquote{margin:0}
.citation blockquote p{font-family:var(--titre);font-weight:600;font-size:clamp(22px,2.8vw,30px);line-height:1.3;letter-spacing:-0.015em;color:var(--nuit)}
.section--sombre .citation blockquote p{color:var(--blanc)}
.citation blockquote p::before{content:"« "}
.citation blockquote p::after{content:" »"}
.citation figcaption{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:15px;color:var(--texte-doux)}
.citation figcaption strong{display:block;color:var(--nuit);font-weight:600}
.section--sombre .citation figcaption{color:var(--ciel)}
.section--sombre .citation figcaption strong{color:var(--blanc)}
.initiales{width:44px;height:44px;border-radius:50%;background:var(--nuit);color:var(--blanc);display:flex;align-items:center;justify-content:center;font:600 15px/1 var(--titre);flex:none}
.faits{display:grid;gap:14px;margin-top:32px;list-style:none}
@media (min-width:640px){.faits{grid-template-columns:repeat(3,1fr)}}
.faits li{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:16px 20px}
.section--clair .faits li{background:var(--blanc)}
.faits b{display:block;font-family:var(--titre);font-size:14px;font-weight:600;color:var(--acier);margin-bottom:4px}
.faits span{font-size:15px;color:var(--nuit);line-height:1.45;display:block}
.transcription{margin-top:24px;border:1px solid var(--bordure);border-radius:var(--rayon);background:var(--surface)}
.transcription summary{padding:16px 48px 16px 18px;font-size:16px}
.transcription .transcription__texte{padding:0 18px 18px;font-size:16px;color:var(--texte-doux)}
.transcription .transcription__texte p{padding:0;margin-bottom:10px}

/* ---------- Livrable (rapport) ---------- */
.livrable{display:grid;gap:44px;align-items:center}
@media (min-width:880px){.livrable{grid-template-columns:1fr 1fr;gap:56px}}
.rapport{background:var(--blanc);border:1px solid var(--bordure);border-radius:14px;box-shadow:var(--ombre-3);overflow:hidden}
.rapport__tete{background:var(--nuit);color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.rapport__tete strong{font-family:var(--titre);font-weight:600;font-size:15px}
.rapport__tete span{font-size:13px;color:var(--ciel)}
.rapport__corps{padding:8px 24px 16px}
.ligne{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--bordure)}
.ligne:last-child{border-bottom:0}
.ligne__label{font-size:15px;color:var(--gris)}
.ligne__val{font-family:var(--titre);font-weight:600;font-size:16px;color:var(--nuit);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ligne__val small{display:block;font-size:13px;font-weight:400;color:var(--gris)}
.ligne--total{border-top:1px solid var(--nuit)}
.ligne--total .ligne__label{color:var(--nuit);font-weight:600}
.ligne__val em{font-style:normal;color:var(--acier)}
.rapport__pied{background:var(--clair);padding:12px 24px;font-size:14px;color:var(--gris);border-top:1px solid var(--bordure)}
.liste{list-style:none;margin:24px 0 0}
.liste li{display:flex;gap:13px;align-items:flex-start;padding:9px 0;font-size:17px}
.liste .check{margin-top:4px;color:var(--acier)}

/* ---------- Pourquoi ---------- */
.pourquoi{display:grid;gap:1px;grid-template-columns:1fr;background:var(--bordure);border:1px solid var(--bordure);border-radius:var(--rayon);overflow:hidden}
@media (min-width:760px){.pourquoi{grid-template-columns:repeat(2,1fr)}}
.pourquoi > div{background:var(--blanc);padding:32px 24px}
.pourquoi h3{font-size:18px;margin-bottom:10px}
.pourquoi p{font-size:16px;color:var(--texte-doux)}

/* ---------- Bloc fondateur ---------- */
.fondateur{display:grid;gap:36px;align-items:center}
@media (min-width:860px){.fondateur{grid-template-columns:300px 1fr;gap:56px}}
.fondateur picture img{border-radius:16px;width:100%;max-width:300px;aspect-ratio:1;object-fit:cover;box-shadow:var(--ombre-2)}
.fondateur p + p{margin-top:14px}
.fondateur .texte{color:var(--texte-doux);font-size:17px}

/* ---------- Cas client ---------- */
.fil{font-size:14px;color:var(--gris);margin-bottom:14px}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.fil li{display:flex;align-items:center}
.fil li+li::before{content:"/";margin-right:6px;color:#8695A6}
.fil a{color:var(--acier);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.fil a:hover{color:var(--nuit);text-decoration:underline}
.fiche{display:grid;gap:0;background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--rayon);overflow:hidden;margin:0}
.fiche > div{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--bordure)}
.fiche > div:last-child{border-bottom:0}
.fiche dt{font-size:15px;color:var(--gris)}
.fiche dd{margin:0;font-weight:600;font-size:15px;text-align:right}
.recit{display:grid;gap:20px;counter-reset:r}
@media (min-width:900px){.recit{grid-template-columns:repeat(3,1fr)}}
.recit .carte{border-top:3px solid var(--bordure)}
.recit .carte--apres{border-top-color:var(--acier)}
.flux{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;list-style:none}
.flux li{font:600 14px/1 var(--corps);background:var(--clair);border:1px solid var(--bordure);border-radius:8px;padding:8px 12px;color:var(--nuit)}
.flux li.fleche{background:none;border:0;padding:0;color:var(--acier)}

/* ---------- Texte long (pages légales, à propos) ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(22px,2.6vw,28px);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:28px 0 10px}
.prose p,.prose li{color:var(--texte-doux);font-size:17px}
.prose p + p{margin-top:14px}
.prose ul{padding-left:22px;margin:12px 0}
.prose li + li{margin-top:6px}
.prose strong{color:var(--nuit)}

/* ---------- FAQ ---------- */
.faq{max-width:780px}
details{border-bottom:1px solid var(--bordure)}
summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;min-height:44px;
  font-family:var(--titre);font-weight:600;font-size:17px;color:var(--nuit);line-height:1.35;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--acier);border-bottom:2px solid var(--acier);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--duree) var(--ease);
}
details[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
details > p,details > div{padding:0 0 22px;color:var(--texte-doux);font-size:17px;max-width:70ch}
.transcription summary{font-family:var(--corps);font-weight:600}

/* ---------- CTA final ---------- */
.final{background:var(--nuit);color:#fff;text-align:center;padding:88px 0}
.final h2{font-size:clamp(28px,4.2vw,44px);margin-bottom:18px}
.final p{color:rgba(255,255,255,.85);font-size:19px;max-width:620px;margin:0 auto 32px}
.final .hero__note{margin-top:20px;display:block}

/* ---------- Page « Bonjour » (networking) ---------- */
.carte-visite{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:linear-gradient(180deg,var(--blanc) 0%,var(--clair) 100%);color:var(--nuit)}
.carte-visite__corps{width:100%;max-width:440px;text-align:center}
.carte-visite__logo{width:140px;height:38px;margin:0 auto 28px}
.carte-visite picture img{width:132px;height:132px;border-radius:50%;margin:0 auto 18px;border:3px solid var(--blanc);box-shadow:var(--ombre-2);object-fit:cover}
.carte-visite h1{font-size:28px;margin-bottom:6px}
.carte-visite__role{color:var(--acier);font-size:15px;font-weight:500;margin-bottom:18px}
.carte-visite__phrase{font-size:17px;color:var(--gris);margin-bottom:26px}
.carte-visite__actions{display:grid;gap:12px}
.carte-visite__actions .btn{width:100%}
.carte-visite .preuve{margin:28px auto 0;text-align:left;background:var(--blanc)}
.carte-visite__liens{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;margin-top:22px;font-size:15px}
.carte-visite__liens a{color:var(--acier);display:inline-flex;align-items:center;min-height:44px}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--profond);color:rgba(255,255,255,.7);padding:56px 0 32px;font-size:15px}
.pied{display:grid;gap:36px}
@media (min-width:760px){.pied{grid-template-columns:1.4fr 1fr 1fr}}
.pied__logo{width:148px;height:40px;margin-bottom:16px}
.pied h2{font-family:var(--corps);font-size:15px;font-weight:600;letter-spacing:0;color:var(--ciel);margin-bottom:8px}
.pied ul{list-style:none}
.pied a{color:rgba(255,255,255,.85);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pied a:hover{color:var(--blanc);text-decoration:underline}
.pied__bas{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:rgba(255,255,255,.6)}
.pied__bas a{color:rgba(255,255,255,.75);min-height:auto}

/* ---------- Apparition au défilement (seulement si JS) ---------- */
.js-pret .reveal{opacity:0;transform:translateY(12px)}
.js-pret .reveal.vu{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-pret .reveal.vu.fini{transition:transform var(--duree) var(--ease),box-shadow var(--duree) var(--ease),border-color var(--duree) var(--ease)}
@media print{.js-pret .reveal{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-pret .reveal{opacity:1;transform:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Corrections audit V1 ---------- */
.cta-court{display:none}
@media (max-width:900px){.cta-long{display:none}.cta-court{display:inline}}
.final a:not(.btn),.section--sombre a:not(.btn){color:var(--blanc)}
.final a:not(.btn):hover{color:var(--ciel)}
.final .hero__note{color:rgba(255,255,255,.75)}
.final .hero__note a{white-space:nowrap}
/* Preuve sous les boutons du hero : mobile uniquement (sur ordinateur, la carte portrait la porte) */
.preuve--hero{margin-top:28px}
.preuve .initiales{width:40px;height:40px;font-size:14px}
@media (min-width:960px){.preuve--hero{display:none}}
@media (max-width:959px){
  .portrait{max-width:300px}
  .portrait__citation{display:none}
}
.citation--longue blockquote p{font-size:clamp(20px,2.3vw,25px);line-height:1.38}
@media (max-width:480px){
  .fiche > div{flex-direction:column;gap:2px}
  .fiche dd{text-align:left}
}


/* ---------- Motion : détails au défilement (désactivés si « réduire les animations ») ---------- */
.site-header{transition:box-shadow .25s var(--ease),background-color .25s var(--ease)}
.site-header.defile{box-shadow:0 6px 24px rgba(10,42,82,.08)}
.progression{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ambre);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

@keyframes monter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes glisser{from{transform:translateY(12px)}to{transform:none}}
@keyframes poser{from{transform:scale(.965)}to{transform:none}}
.anime .hero .fil{animation:monter .6s var(--ease) both}
.anime .hero .eyebrow{animation:monter .6s var(--ease) .05s both}
.anime .hero h1{animation:glisser .7s var(--ease) .1s both}
.anime .hero__sub{animation:monter .7s var(--ease) .2s both}
.anime .hero__actions{animation:monter .7s var(--ease) .3s both}
.anime .hero .preuve--hero{animation:monter .7s var(--ease) .4s both}
.anime .hero .hero__garanties{animation:monter .7s var(--ease) .48s both}
.anime .hero .portrait{animation:poser .9s var(--ease) .15s both}
.anime .hero .portrait__citation{animation:monter .7s var(--ease) .75s both}

/* Étapes : la ligne se remplit au fil du défilement */
.anime .etape{border-top-color:var(--bordure)}
.anime .etape::after{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--acier);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.anime .etape::before{color:#8695A6;transition:color .4s var(--ease)}
.anime .etape.atteinte::after{transform:scaleX(1)}
.anime .etape.atteinte::before{color:var(--acier)}

/* Conclusion : le passage clé se surligne quand il apparaît */
.anime .conclusion strong{background:linear-gradient(rgba(245,165,36,.38),rgba(245,165,36,.38)) no-repeat 0 88%/0% 42%;transition:background-size 1.1s var(--ease) .5s}
.anime .conclusion.vu strong{background-size:100% 42%}

/* Flux d'automatisation : les étapes s'allument l'une après l'autre */
/* Une seule fois, à l'apparition : la donnée passe d'un outil à l'autre */
@keyframes allumer{0%,100%{background:var(--clair);border-color:var(--bordure)}35%,60%{background:var(--ambre);border-color:var(--ambre)}}
.anime .vu .flux li:not(.fleche){animation:allumer 1.2s var(--ease) .4s 1 both}
.anime .vu .flux li:nth-child(3){animation-delay:.9s}
.anime .vu .flux li:nth-child(5){animation-delay:1.4s}

/* Micro-interactions */
.btn svg{transition:transform var(--duree) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
details > p,details > div{transition:opacity .3s var(--ease)}
@keyframes deplier{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.anime details[open] > p,.anime details[open] > div{animation:deplier .3s var(--ease)}
@media (prefers-reduced-motion:reduce){.progression{display:none}}

/* ---------- Réalisations : vignettes et captures d'écran ---------- */
.carte.carte--visuel{display:flex;flex-direction:column;padding:0;overflow:hidden}
.carte__image{aspect-ratio:16/10;background:var(--clair);border-bottom:1px solid var(--bordure)}
.carte__image img{width:100%;height:100%;object-fit:cover;object-position:top}
.carte__corps{padding:24px;display:flex;flex-direction:column;flex:1}
.carte__corps .etiquette{align-self:flex-start}
.carte__corps .lien-fleche{margin-top:auto;padding-top:12px;align-self:flex-start}
.carte--large{grid-column:1/-1}
@media (min-width:900px){.carte--large{max-width:none}.carte--large p{max-width:70ch}}

/* Site affiché sur ordinateur et sur téléphone */
.ecrans{position:relative;max-width:1000px;margin:0 auto;padding-bottom:7%}
.navigateur{width:87%;border:1px solid var(--bordure);border-radius:12px;overflow:hidden;background:var(--blanc);box-shadow:var(--ombre-3)}
.navigateur__barre{display:flex;align-items:center;padding:9px 14px;background:var(--clair);border-bottom:1px solid var(--bordure)}
.navigateur__barre span{font-size:13px;line-height:1.3;color:var(--gris);background:var(--blanc);border:1px solid var(--bordure);border-radius:6px;padding:3px 12px}
.navigateur img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.telephone{position:absolute;right:0;bottom:0;width:22%;border:6px solid var(--encre);border-radius:28px;overflow:hidden;background:var(--encre);box-shadow:var(--ombre-3)}
.telephone img{width:100%;aspect-ratio:1/2;object-fit:cover;object-position:top;border-radius:21px}
@media (max-width:640px){
  .ecrans{padding-bottom:22%}
  .navigateur{width:100%}
  .telephone{width:31%;border-width:4px;border-radius:18px}
  .telephone img{border-radius:14px}
}
.ecrans__lien{margin-top:28px;text-align:center}

/* Détail d'une capture, avec son explication */
.captures{display:grid;gap:56px}
.capture{display:grid;gap:24px;align-items:center;margin:0}
@media (min-width:900px){
  .capture{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px}
  .capture--inverse{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .capture--inverse .capture__image{order:2}
}
.capture__image{border:1px solid var(--bordure);border-radius:var(--rayon);overflow:hidden;background:var(--blanc);box-shadow:var(--ombre-1)}
.capture__image img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.capture figcaption h3{font-size:20px;margin-bottom:10px}
.capture figcaption p{color:var(--texte-doux);font-size:16px}
.capture figcaption p + p{margin-top:10px}
.capture__image--libre img{aspect-ratio:auto}
.carte__note{margin-top:12px;font-size:14px!important}
@media (min-width:900px){
  .carte--large.carte--visuel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .carte--large .carte__image{aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--bordure)}
  .carte--large .carte__corps{justify-content:center}
}

/* Avis Google cité */
.avis{max-width:760px;margin:56px auto 0;padding:28px;border:1px solid var(--bordure);border-radius:var(--rayon);background:var(--clair)}
.avis__source{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--gris);margin-bottom:12px}
.avis__etoiles{color:var(--nuit);font-size:17px;letter-spacing:2px}
.avis blockquote{margin:0}
.avis--compact{margin:24px 0 0;padding:20px}
.avis--compact blockquote p{font-size:16px;color:var(--nuit);line-height:1.55}
.avis--compact blockquote p::before{content:"« "}
.avis--compact blockquote p::after{content:" »"}