/* ══════════════════════════════════════════════════════════════════════
   JSF Courtage — Design system « Insurtech » moderne (home + pages service)
   Clair, aéré, sans-serif, arrondi, tech & rassurant. Rouge JSF conservé.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* Neutres froids */
  --ink:#14181F; --graphite:#39414F; --slate:#5A6472; --mute:#6E7789;
  --line:#E7EBF1; --line-soft:#F1F4F8;
  /* Surfaces */
  --bg:#FFFFFF; --bg-soft:#F5F7FA; --card:#FFFFFF;
  /* Marque */
  --red:#8B1010; --red-600:#B0121A; --red-500:#CE1B22;
  --red-tint:#FCEDEC; --red-tint-2:#F9DEDC;
  --orange:#F26B21; --gold:#C79A3B;
  --green:#16A34A; --green-ok:#1C7C4A; --green-ok-tint:#E7F6EC;   /* vert « conforme » : celui des notes A du diagnostic.
     5,21:1 avec du blanc — le --green du site n'en donne que 3,30 et
     échouerait en fond de pastille. */ --blue:#702020; --violet:#9A6510;
  /* Dégradés */
  --grad:linear-gradient(118deg,#B0121A 0%,#E8531F 100%);
  /* Dégradé RÉSERVÉ AUX BOUTONS : la fin du dégradé décoratif (#E8531F) ne donne que
     3,69:1 avec du texte blanc — échec WCAG AA pour du texte normal. #CE4A1C atteint
     4,54:1 en gardant la même teinte (11 % plus foncé, invisible à l'œil). */
  --grad-btn:linear-gradient(118deg,#B0121A 0%,#CE4A1C 100%);
  --grad-text:linear-gradient(118deg,#B0121A,#F26B21);
  /* Rayons */
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px; --pill:999px;
  /* Ombres douces */
  --sh-sm:0 2px 10px rgba(20,24,31,.06);
  --sh:0 16px 40px -16px rgba(20,24,31,.16);
  --sh-lg:0 40px 80px -32px rgba(20,24,31,.22);
  --sh-red:0 18px 44px -16px rgba(176,18,26,.42);
  --wrap:1180px; --pad:clamp(20px,5vw,64px);
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); color:var(--ink); background:var(--bg); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--sans); font-weight:800; line-height:1.08; letter-spacing:-.03em}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.grad-txt{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2.5px solid var(--red-500); outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:12px 18px;font-weight:700;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0;top:0}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--sans);
  font-size:15.5px;font-weight:700;padding:15px 26px;border-radius:var(--pill);cursor:pointer;
  border:1.5px solid transparent;transition:.25s cubic-bezier(.3,.7,.3,1);white-space:nowrap;line-height:1}
.btn svg{width:18px;height:18px}
.btn .arw{transition:transform .25s} .btn:hover .arw{transform:translateX(4px)}
.go .arw{transition:transform .25s}
.card:hover .go .arw,.sol:hover .go .arw,.post:hover .go .arw{transform:translateX(4px)}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:var(--sh-red)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 24px 50px -16px rgba(176,18,26,.5)}
.btn-soft{background:var(--red-tint);color:var(--red-600)}
.btn-soft:hover{background:var(--red-tint-2)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.btn-lg{padding:17px 30px;font-size:16.5px}
.btn-white{background:#fff;color:var(--red-600)}.btn-white:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}

/* Pills / badges */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--red-600);background:var(--red-tint);padding:7px 15px;border-radius:var(--pill)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--graphite);
  background:var(--bg-soft);border:1px solid var(--line);padding:9px 16px;border-radius:var(--pill)}
.pill svg{width:16px;height:16px;color:var(--red-600)}
.pill .star{color:var(--gold)}

/* Icon chips */
.ichip{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;flex:none}
.ichip svg{width:26px;height:26px;stroke-width:2}
.ic-red{background:var(--red-tint);color:var(--red-600)}
.ic-orange{background:#FEEEE2;color:var(--orange)}
.ic-green{background:#FDEDE7;color:#C2410C}   /* corail du logo (nom historique) */
.ic-blue{background:#F2E6E6;color:#702020}    /* bordeaux du logo */
.ic-violet{background:#FBF1DD;color:#9A6510}  /* or du logo */
.ic-gold{background:#F8F0DC;color:#A9822B}

/* Sections */
section{padding-block:clamp(56px,8vw,104px)}
.sec-head{max-width:640px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(30px,4.4vw,50px);margin-top:18px}
.sec-head p{color:var(--slate);margin-top:16px;font-size:18px}

/* Cartes */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;
  transition:.28s cubic-bezier(.3,.7,.3,1)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:transparent}

/* Nav */
header.nav{position:sticky;top:0;z-index:100;transition:.3s}
header.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);box-shadow:0 10px 34px -24px rgba(20,25,40,.55)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav-logo img{height:56px;width:auto;transition:.2s}
header.nav.scrolled .nav-logo img{height:50px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{position:relative;font-size:15px;font-weight:600;color:var(--graphite);white-space:nowrap;padding:6px 0;letter-spacing:-.01em;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover,.nav-links a.active{color:var(--red-600)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-tel{font-size:14.5px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:7px;color:var(--ink);transition:color .2s}
.nav-tel:hover{color:var(--red-600)}
.nav-tel svg{width:16px;height:16px;color:var(--red-600)}
.btn-nav{padding:11px 20px;font-size:14.5px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;margin:5px 0;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
/* Les trois barres deviennent une croix : le bouton dit dans quel état on est.
   Les marges verticales voisines fusionnent → 7,5 px séparent le centre de deux
   barres, d'où la valeur du déplacement. */
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(.3)}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Footer */
footer.ft{background:var(--ink);color:#AEB6C2;padding-block:clamp(48px,6vw,72px)}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.ft-brand img{height:64px;width:auto;margin-bottom:18px}
.ft-brand p{font-size:14.5px;line-height:1.7;max-width:32ch}
.ft-brand .rate{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#E7EBF1}
.ft-brand .rate .star{color:var(--gold)}
.ft-social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ft-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.07);color:#AEB6C2;transition:.2s}
.ft-social a:hover,.ft-social a:focus-visible{background:var(--red-500);color:#fff;transform:translateY(-2px)}
.ft-social svg{width:17px;height:17px;display:block}
.ft-col h3,.ft-col h4{font-family:var(--sans);font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:16px}
.ft-col a{display:block;font-size:14.5px;margin-bottom:11px;color:#AEB6C2;transition:.2s}
.ft-col a:hover{color:#fff}
.ft-bot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:26px;flex-wrap:wrap}
.ft-bot .lgl{font-size:13px;color:#8892A0}.ft-bot .lgl a{color:#AEB6C2;text-decoration:underline}
.ft-credit{font-size:13px;color:#8892A0}
/* Signature discrète : le partenaire ne porte pas les couleurs de la marque. */
.ft-credit a{color:#AEB6C2;text-decoration:underline;text-underline-offset:2px}

/* Reveal */
/* L'apparition au défilement n'est active que si site.js a posé la classe
   .js-anim sur <html>. Sans JS — ou si le script échoue — le contenu reste
   VISIBLE. Auparavant .rv{opacity:0} s'appliquait toujours : une seule
   défaillance du script rendait toute la page blanche. */
.js-anim .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-anim .rv.in{opacity:1;transform:none}
.js-anim .rv.d1{transition-delay:.08s}.js-anim .rv.d2{transition-delay:.16s}.js-anim .rv.d3{transition-delay:.24s}

/* Responsive nav */
@media(max-width:1024px){
  .nav-tel{display:none}
  .nav-toggle{display:block}
  /* Le panneau reste dans le document et s'ouvre par une transition : « display »
     ne s'anime pas, l'ancienne bascule display:none→flex apparaissait donc d'un
     coup. « visibility » (et non seulement l'opacité) le sort du parcours au
     clavier tant qu'il est fermé — un menu invisible mais tabulable est un piège. */
  .nav-links{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:flex-start;
    background:#fff;padding:22px var(--pad);gap:4px;border-bottom:1px solid var(--line);box-shadow:var(--sh);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .2s ease,transform .26s cubic-bezier(.2,.7,.2,1),visibility 0s linear .26s}
  .nav-links.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .nav-links a{padding:12px 0;width:100%;font-size:16px}
  .nav-links a::after{display:none}
}
@media(max-width:480px){.btn-nav{padding:10px 15px;font-size:13.5px}}
@media(max-width:820px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ft-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* ══ Pages de service ══ */
.crumb{font-size:13.5px;color:var(--mute);font-weight:600;padding-top:22px}
.crumb a{color:var(--slate)}.crumb a:hover{color:var(--red-600)}
.svc-hero{padding-top:clamp(24px,3vw,44px);padding-bottom:clamp(44px,6vw,80px)}
.svc-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,56px);align-items:center}
.svc-hero h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.035em;margin:18px 0 0}
.svc-hero .lead{font-size:clamp(17px,1.3vw,19px);color:var(--slate);max-width:42ch;margin:20px 0 28px}
.svc-visual{background:linear-gradient(135deg,var(--red-tint),#FDF1E9);border-radius:var(--r-xl);padding:clamp(26px,3vw,38px);border:1px solid var(--line)}
.svc-visual .big{font-size:clamp(44px,6vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1}
.svc-visual .cap{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--red-600)}
.svc-visual ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.svc-visual li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;color:var(--graphite)}
.svc-visual li svg{width:20px;height:20px;color:var(--green);flex:none}
.ben-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.ben{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.ben h3{font-size:18.5px;margin:16px 0 8px}.ben p{color:var(--slate);font-size:15px}
.faq{max-width:820px;margin-top:44px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--red-600);transition:.25s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;color:var(--slate);font-size:15.5px;line-height:1.65}
.cta-band{background:var(--grad-btn);border-radius:var(--r-xl);padding:clamp(34px,4vw,56px);text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band h2{color:#fff;font-size:clamp(26px,3.4vw,40px);max-width:20ch;margin:0 auto}
.cta-band p{color:rgba(255,255,255,.9);margin:14px auto 26px;max-width:48ch}
.cta-band .btn-white{box-shadow:0 20px 40px -14px rgba(0,0,0,.35)}

/* ── Rappel de marque dans les bandeaux rouges ───────────────────────────
   Pas un logo posé : il est rouge, il disparaîtrait sur un fond rouge, et il
   faudrait une version blanche à maintenir. On reprend le LOSANGE du logo —
   un carré arrondi tourné à 45°, forme déjà employée par les puces du site.
   Deux losanges emboîtés, en blanc très transparent : la marque se devine
   sans jamais disputer la lecture. Purement décoratif → aria-hidden inutile,
   ce sont des pseudo-éléments, invisibles pour les lecteurs d'écran. */
.cta-band::before,.cta-band::after{content:"";position:absolute;pointer-events:none;
  transform:rotate(45deg);border-radius:clamp(14px,2vw,26px);border:2px solid rgba(255,255,255,.13)}
.cta-band::before{width:clamp(150px,20vw,260px);aspect-ratio:1;right:clamp(-70px,-6vw,-40px);top:clamp(-70px,-6vw,-40px)}
.cta-band::after{width:clamp(80px,11vw,140px);aspect-ratio:1;left:clamp(-40px,-4vw,-26px);bottom:clamp(-40px,-4vw,-26px);
  border-color:rgba(255,255,255,.10)}
/* Le contenu repasse devant les losanges. */
.cta-band>*{position:relative;z-index:1}

/* Même signature sur le bandeau de chiffres, qui porte le même rouge.
   Il a déjà son halo (::before) → on n'utilise que ::after, et on le pose
   sur .wrap pour ne pas écraser le halo existant. */
.stats .wrap::after{content:"";position:absolute;pointer-events:none;transform:rotate(45deg);
  width:clamp(120px,14vw,190px);aspect-ratio:1;border-radius:clamp(12px,1.6vw,20px);
  border:2px solid rgba(255,255,255,.12);right:clamp(-60px,-5vw,-34px);top:clamp(-60px,-5vw,-34px)}
.stats .stats-grid{position:relative;z-index:1}
@media(max-width:900px){.svc-hero-grid,.ben-grid{grid-template-columns:minmax(0,1fr)}.svc-hero-grid>*,.ben-grid>*,.ft-grid>*{min-width:0}}
/* Filet de sécurité mobile : rien ne dépasse la largeur de l'écran */
.wrap{overflow-wrap:break-word}
.svc-visual .big{overflow-wrap:anywhere}
@media(max-width:560px){
  .hero-cta .btn,.cta-band .btn{white-space:normal}
  .svc-hero .hero-cta{width:100%}
  .svc-hero .hero-cta .btn{flex:1 1 100%}
}

/* ══ Blog & articles ══ */
.blog-hero{text-align:center;padding-bottom:clamp(24px,3vw,40px)}
.blog-hero h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.035em;margin-top:16px}
.blog-hero p{color:var(--slate);font-size:18px;margin-top:14px;max-width:52ch;margin-inline:auto}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;padding:0;overflow:hidden}
.post .thumb{height:148px;background:var(--grad);display:grid;place-items:center}
.post .thumb.g2{background:linear-gradient(125deg,#8B1010,#CE1B22)}
.post .thumb.g3{background:linear-gradient(125deg,#B0121A,#F07050)}
.post .thumb svg{width:50px;height:50px;color:#fff;opacity:.92;stroke-width:1.6}
.post .pbody{padding:26px;display:flex;flex-direction:column;flex:1}
.post .tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--red-600)}
.post h2{font-size:20px;margin:10px 0 8px;letter-spacing:-.02em;line-height:1.25}
.post p{color:var(--slate);font-size:14.5px;flex:1}
.post .go{margin-top:16px;display:inline-flex;gap:8px;font-weight:700;font-size:14px;color:var(--red-600)}
.article-hero{padding-bottom:clamp(18px,2.5vw,28px)}
.article-hero .crumb{padding-top:0;margin-bottom:18px}
.article-hero h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.03em;margin:14px 0 12px;max-width:22ch}
.article-meta{font-size:14px;color:var(--mute);font-weight:600}
.prose{max-width:760px}
.prose h2{font-size:clamp(23px,2.6vw,30px);margin:38px 0 12px;letter-spacing:-.02em}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose p,.prose li{color:var(--graphite);font-size:17px;line-height:1.72;margin-bottom:14px}
.prose ul{margin:0 0 16px 22px}
.prose strong{color:var(--ink)}
.prose a{color:var(--red-600);font-weight:600;text-decoration:underline}
/* Un bouton dans le corps d'article ne doit PAS hériter du style de lien souligné */
.prose a.btn{text-decoration:none;font-weight:700}
.prose a.btn-primary,.prose a.btn-dark{color:#fff}
.prose a.btn-white,.prose a.btn-soft{color:var(--red-600)}
.prose a.btn-ghost{color:var(--ink)}
.callout{background:var(--red-tint);border-radius:var(--r);padding:22px 26px;margin:26px 0}
.callout p{margin:0;font-size:16px}.callout strong{color:var(--red-600)}
.art-cta{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;margin-top:44px;text-align:center}
.art-cta h3{font-size:22px;margin-bottom:8px}.art-cta p{color:var(--slate);margin-bottom:18px}
@media(max-width:820px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}

/* ══ Illustrations photo (importées de l'ancien site, auto-hébergées) ══ */
.sol-photo{width:calc(100% + 64px);height:188px;object-fit:cover;margin:-32px -32px 24px -32px;display:block}
.svc-media{width:100%;height:clamp(200px,26vw,300px);object-fit:cover;border-radius:var(--r-lg);display:block;box-shadow:var(--sh);margin-bottom:22px}

.sol{overflow:hidden}

/* ══ Bloc « Contrôle Technique » (carte sombre — page cyber) ══ */
.ct{position:relative}
.ct-card{background:linear-gradient(135deg,#6E0A0A 0%,#3C0D0D 55%,#1C0A0A 100%);border-radius:var(--r-xl);padding:clamp(30px,4vw,52px);color:#F1DEDA;overflow:hidden;position:relative}
.ct-card::after{content:"";position:absolute;top:-120px;right:-80px;width:360px;height:360px;background:radial-gradient(circle,rgba(242,107,33,.22),transparent 70%)}
.ct-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,48px);align-items:center;position:relative;z-index:1}
.ct-card h2{color:#fff;font-size:clamp(26px,3.4vw,40px);margin:16px 0 14px}
.ct-card p{color:#E4C9C5;max-width:44ch}
.ct-actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.ct-panel{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);padding:22px}
.ct-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ct-row:last-child{border-bottom:0}.ct-row .dg{font-size:14px;color:#C6CCD6}
.grade{font-weight:800;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;font-size:15px}
.gA{background:rgba(22,163,74,.18);color:#4ADE80}.gB{background:rgba(37,99,235,.18);color:#60A5FA}.gC{background:rgba(199,154,59,.2);color:#E3B75B}.gD{background:rgba(242,107,33,.18);color:#F7A66F}
@media(max-width:900px){.ct-grid{grid-template-columns:minmax(0,1fr)}.ct-grid>*{min-width:0}}

/* ═══════════════════════════════════════════════════════════════
   PASSE PREMIUM — profondeur douce (ombres multi-couches),
   micro-interactions tactiles, rythme. Raffinement, pas d'effets en plus.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Ombres feuilletées : un contact net proche + une diffusion douce lointaine (feel premium) */
  --sh-sm:0 1px 2px rgba(20,24,31,.05), 0 3px 10px -2px rgba(20,24,31,.06);
  --sh:0 2px 6px -1px rgba(20,24,31,.06), 0 18px 44px -18px rgba(20,24,31,.17);
  --sh-lg:0 5px 14px -4px rgba(20,24,31,.07), 0 44px 84px -34px rgba(20,24,31,.23);
}
/* Boutons : retour tactile à l'appui + arête « éclairée » sur le primaire */
.btn{transition:transform .24s cubic-bezier(.3,.7,.3,1),box-shadow .24s cubic-bezier(.3,.7,.3,1),background .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{box-shadow:var(--sh-red),inset 0 1px 0 rgba(255,255,255,.20)}
.btn-primary:hover{box-shadow:0 26px 52px -18px rgba(176,18,26,.48),inset 0 1px 0 rgba(255,255,255,.24)}
/* Cartes secondaires : léger lift au survol (cohérent avec .card) */
.ben,.step,.avis-card,.risk-card{transition:transform .3s cubic-bezier(.3,.7,.3,1),box-shadow .3s cubic-bezier(.3,.7,.3,1),border-color .3s}
.ben:hover,.step:hover,.avis-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:transparent}
/* Liens de contenu : soulignement animé, plus fin que le défaut navigateur */
.prose a:not(.btn){text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(176,18,26,.35);transition:text-decoration-color .2s}
.prose a:not(.btn):hover{text-decoration-color:var(--red-600)}
/* Rythme : titres display encore un cran plus serrés (premium) */
.sec-head h2{letter-spacing:-.035em}
/* Respect strict de prefers-reduced-motion pour les transforms au survol */
@media(prefers-reduced-motion:reduce){.btn,.ben,.step,.avis-card,.risk-card,.card{transition:none}.btn:active,.ben:hover,.step:hover,.avis-card:hover{transform:none}}

/* ═══════════════════════════════════════════════════════════════
   BLOCS LIBRES & CONTENUS CRÉÉS DEPUIS LE BACK-OFFICE
   Composants nouveaux (ils n'existaient pas) — construits avec les
   jetons du site, aucun style en double.
   ═══════════════════════════════════════════════════════════════ */
.cms-blocks{background:var(--bg-soft)}
.cms-block{display:grid;gap:clamp(20px,4vw,44px);align-items:center;padding-block:clamp(26px,4vw,44px)}
.cms-block + .cms-block{border-top:1px solid var(--line)}
.cms-block.has-img{grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.cms-block.has-img{grid-template-columns:minmax(0,42%) minmax(0,1fr)}
  .cms-block.has-img:nth-child(even) .cms-block-media{order:2}}
.cms-block-media img{width:100%;height:100%;max-height:340px;object-fit:cover;border-radius:var(--r-lg);display:block;box-shadow:var(--sh)}
.cms-block-body h2{font-size:clamp(24px,3.2vw,38px);letter-spacing:-.02em;margin:0 0 12px}
.cms-block-body p{color:var(--slate);font-size:clamp(15px,1.6vw,17px);line-height:1.65;margin:0;max-width:62ch}

/* Page libre & article créés depuis l'admin */
.cms-page-hero{background:var(--bg-soft);padding-block:clamp(48px,7vw,84px)}
.cms-page-hero h1{font-size:clamp(32px,5.4vw,58px);letter-spacing:-.03em;margin:14px 0 0;max-width:20ch}
.cms-page-hero .lead{color:var(--slate);font-size:clamp(16px,1.9vw,20px);margin-top:16px;max-width:60ch}
.cms-date{color:var(--mute);font-size:14px}
.cms-cover{width:100%;max-height:420px;object-fit:cover;border-radius:var(--r-lg);margin-top:28px;display:block;box-shadow:var(--sh)}
.cms-body{max-width:70ch;margin-inline:auto}
.cms-body p{color:var(--slate);font-size:17px;line-height:1.75;margin:0 0 18px}
.cms-body h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.02em;margin:34px 0 12px;color:var(--ink)}

/* Liste d'articles ajoutés depuis l'admin (injectés dans la page blog) */
.cms-posts{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:28px}
.cms-post{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s cubic-bezier(.3,.7,.3,1),box-shadow .25s}
.cms-post:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:transparent}
.cms-post img{width:100%;height:170px;object-fit:cover;display:block}
.cms-post-b{padding:20px}
.cms-post-b h3{font-size:19px;letter-spacing:-.01em;margin:0 0 8px}
.cms-post-b p{color:var(--slate);font-size:14.5px;line-height:1.6;margin:0}


/* ── Grille Solutions : séparation Particuliers / Professionnels ── */
.sol-group{margin:56px 0 0;display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red-600)}
.sol-group::before,.sol-group::after{content:"";height:1px;width:min(90px,12vw);background:var(--line)}
.sol-group + .sol-grid{margin-top:26px}

/* Rubriques secondaires, en liens plutôt qu'en cartes. La grille comptait 21
   cartes alignées : un défilement sans fin où plus rien ne ressortait. On garde
   les rubriques les plus recherchées en cartes, et les autres RESTENT SUR LA
   PAGE en liens — le maillage interne de l'accueil est intact, seules leur
   présentation et leur emprise changent.
   grid-column:1/-1 → le bloc occupe toute la largeur, sous les cartes. */
.sol-more{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:20px 22px;margin-top:4px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-lg)}
.sol-more-lb{font-size:13.5px;font-weight:700;color:var(--graphite)}
.sol-more a{font-size:14.5px;color:var(--slate);text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.sol-more a:hover,.sol-more a:focus-visible{color:var(--red-600);text-decoration-color:var(--red-500)}

/* ── Panneau « obligation légale » ─────────────────────────────────────────
   Posé UNIQUEMENT sur les couvertures que la loi impose réellement :
   décennale (art. L241-1 du code des assurances) et complémentaire santé
   collective (art. L911-7 du code de la sécurité sociale). La RC Pro reçoit
   une variante nuancée : elle n'est obligatoire que pour les professions
   réglementées, et l'écrire autrement serait une allégation fausse.
   Jamais sur multirisque, cyber, protection juridique ni les packs.
   Le bail commercial impose parfois une multirisque : c'est une obligation
   CONTRACTUELLE, pas légale — donc pas de panneau non plus. */
.oblig{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;
  /* La carte est un conteneur flex en colonne : sans align-self, un enfant
     est ÉTIRÉ sur toute la largeur et la pastille cesse d'en être une.
     width:fit-content couvre le cas des parents non-flex (pages produit). */
  align-self:flex-start;width:fit-content;max-width:100%;
  background:var(--red-tint);color:var(--red-600);border:1px solid rgba(206,27,34,.20);
  border-radius:var(--pill);padding:5px 13px 5px 10px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;line-height:1.35}
.oblig svg{width:15px;height:15px;flex:none}
/* Variante « selon la profession » : même forme, ton neutre — on ne crie pas
   une obligation qui ne vise pas tout le monde. */
.oblig.cond{background:var(--bg-soft);color:var(--graphite);border-color:var(--line)}
.oblig.cond svg{color:var(--red-600)}
/* Sur une carte sombre, le panneau s'inverse pour rester lisible. */
.sol.feat .oblig{background:rgba(242,107,33,.16);color:#F7A66F;border-color:rgba(247,166,111,.28)}
@media(max-width:600px){.oblig{font-size:12px;padding:4px 11px 4px 9px}}
/* ── Partenaires de proximité ──────────────────────────────────────────────
   Deux cartes de même taille, volontairement : la section recommande, elle ne
   hiérarchise pas. Le logo est OPTIONNEL — quand le fichier n'existe pas, un
   monogramme prend sa place et la carte reste finie. Déposer le vrai logo dans
   assets/partenaires/<slug>.png suffit à le faire apparaître. */
.prt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;margin-top:34px}
.prt{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.prt-logo{height:44px;display:flex;align-items:center;margin-bottom:18px}
.prt-logo img{max-height:44px;width:auto;max-width:190px;object-fit:contain}
/* Monogramme de repli : même poids visuel qu'un logo, aucune place vide. */
.prt-mono{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--grad);color:#fff;font-weight:800;font-size:17px;letter-spacing:.02em}
.prt h3{font-size:19px;margin:0 0 4px}
.prt .prt-quoi{font-size:13px;font-weight:700;color:var(--red-600);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.prt p{color:var(--slate);font-size:14.5px;line-height:1.6;margin:0 0 18px;flex:1}
.prt .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;
  font-size:14.5px;color:var(--red-600);align-self:flex-start}
.prt .go:hover{gap:11px}
@media(prefers-reduced-motion:reduce){.prt .go:hover{gap:8px}}
/* ── Vidéos (lecture au clic, miniature auto-hébergée) ── */
.vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:var(--grad-btn);display:grid;place-items:center;box-shadow:0 10px 30px rgba(139,16,16,.34);transition:transform .25s,box-shadow .25s}
.vid:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid.on .vid-play{display:none}
.vid-play svg{width:26px;height:26px;color:#fff;margin-left:3px}

/* Page « Notre engagement sport » — corps de texte aéré */
.es-body{font-size:17px;line-height:1.75;color:var(--slate)}
.es-body p{margin:0 0 20px}
.es-body p:last-child{margin-bottom:0}

/* ── Encart du club soutenu (page Engagement sport) ── */
.club-box{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:40px;
  padding:24px 28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.club-logo{flex:none;display:block;line-height:0}
.club-logo img{width:88px;height:88px;object-fit:cover;border-radius:50%}
.club-txt{flex:1 1 320px;min-width:0}
.club-box h3{font-size:21px;font-weight:800;letter-spacing:-.015em;margin:10px 0 6px}
.club-box h3 a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;transition:.2s}
.club-box h3 a:hover{color:var(--red-600);border-bottom-color:var(--red-600)}
.club-ext{font-size:.72em;margin-left:.35em;color:var(--red-600);vertical-align:super}
.club-box p{color:var(--slate);font-size:14.5px;margin:0;max-width:62ch}
@media(max-width:560px){.club-box{gap:16px;padding:20px}.club-logo img{width:64px;height:64px}}

/* Réservé aux lecteurs d'écran */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Fond de marque commun à tout le site, FIXE au défilement ──
   Repris du héros de l'accueil pour donner une unité graphique aux pages
   internes. Deux couches fixes derrière le contenu : un dégradé chaud ancré
   au haut de la fenêtre, et le halo rouge/orangé en haut à droite.
   Les blocs opaques (cartes, bandeau sombre, section « méthode ») le
   recouvrent normalement — le fond ne réapparaît qu'entre eux.            */
html{background:var(--bg)}
body{background:transparent;position:relative}
body::before,body::after{content:"";position:fixed;pointer-events:none}
body::before{inset:0;z-index:-2;
  background:linear-gradient(180deg,#FFF1EA 0%,#FDF6F2 46%,var(--bg) 100%)}
body::after{top:-320px;right:-220px;width:900px;height:900px;z-index:-1;
  background:radial-gradient(circle at center,rgba(242,107,33,.22),rgba(176,18,26,.14) 40%,transparent 72%)}
@media(max-width:700px){body::after{width:600px;height:600px;top:-220px;right:-180px}}
/* Le pied de page sombre et les sections illustrées restent opaques :
   ils doivent masquer le fond, sinon le texte clair devient illisible. */
.ft{position:relative;z-index:1}

/* ── Section « en 3 étapes » — partagée par l'accueil et les 15 pages produit ──
   Ces règles ne vivaient que dans le <style> de l'accueil : partout ailleurs
   la section s'affichait sans mise en forme (constaté le 23/07/2026).

   Parti pris : ce n'est pas une liste de trois éléments équivalents, c'est un
   PARCOURS — on ne peut pas comparer le marché avant de connaître le métier.
   Trois cartes identiques écrasaient cette progression. À la place, un chemin :
   les étapes sont posées sur une ligne dont la couleur s'intensifie, et la
   dernière pastille est pleine — on arrive quelque part, on est couvert.
   Les numéros sont conservés parce que l'ordre porte ici une vraie information. */
.method{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5))}

/* Chaque page produit pose SA photo en fond fixe sur cette section, par un
   style en ligne. Les deux garde-fous doivent donc être en !important : sans
   ça, la déclaration en ligne l'emporte et l'effet resterait actif là où on
   n'en veut pas.
   · sous 900 px : iOS Safari ignore « fixed » et, selon les versions, agrandit
     l'image démesurément ;
   · mouvement réduit : c'est un effet de mouvement, même sans animation. */
@media(max-width:900px){ .method{background-attachment:scroll !important} }
@media(prefers-reduced-motion:reduce){ .method{background-attachment:scroll !important} }

.steps{--sgap:clamp(26px,4vw,48px);--node:46px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sgap);margin-top:clamp(40px,5vw,60px)}
.step{position:relative;background:none;border:0;padding:0}

/* La pastille numérotée, posée sur le chemin */
.step .num{position:relative;z-index:1;width:var(--node);height:var(--node);border-radius:50%;
  display:grid;place-items:center;margin:0 0 22px;
  font-family:var(--mono);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  color:var(--red-600);background:#fff;border:2px solid rgba(206,27,34,.30)}
/* Les trois pastilles sont IDENTIQUES au repos — le vert n'est pas un état,
   c'est une récompense : il n'apparaît qu'au moment où la troisième s'allume.
   (La dernière était pleine et rouge en permanence jusqu'au 31/07.) */

/* ── Progression 1 · 2 · 3, en boucle ────────────────────────────────────
   Un point lumineux parcourt les trois étapes : les deux premières prennent
   brièvement l'aspect « atteint » (pleines), la troisième — déjà pleine, c'est
   l'arrivée — se contente de pulser. Animer les trois à l'identique aurait
   effacé cette distinction, qui est le sens même du dessin.

   Départ conditionné à .rv.in : l'animation ne tourne pas tant que la section
   n'est pas à l'écran. Rien à ajouter côté script, la classe existe déjà.
   Cycle de 3,6 s, décalé d'un tiers par étape. */
@keyframes jsf-etape-vide{
  0%,  1.8% {background:#fff;color:var(--red-600);border-color:rgba(206,27,34,.30);box-shadow:var(--sh-sm), 0 0 0 0 rgba(176,18,26,.26);transform:scale(1)}
  8.3% {background:var(--red);color:#fff;border-color:var(--red);box-shadow:var(--sh-sm), 0 0 0 10px rgba(176,18,26,0);transform:scale(1.07)}
  15.7% {background:var(--red);color:#fff;border-color:var(--red);box-shadow:var(--sh-sm), 0 0 0 0 rgba(176,18,26,0);transform:scale(1)}
  22.2%, 100% {background:#fff;color:var(--red-600);border-color:rgba(206,27,34,.30);box-shadow:var(--sh-sm), 0 0 0 0 rgba(176,18,26,0);transform:scale(1)}
}
/* Troisième étape : l'arrivée. Même rythme que les deux autres, mais en vert
   et avec un éclat deux fois plus large — la fin de partie doit se voir.
   L'éclat porte le VERT WHATSAPP (#25D366) : vif, reconnaissable, et sans
   contrainte de contraste puisqu'aucun texte ne se pose dessus. Le
   remplissage, lui, garde #1C7C4A — le vert clair donnerait 1,98:1 avec du
   blanc, le chiffre serait illisible. */
@keyframes jsf-etape-verte{
  0%,  1.8% {background:#fff;color:var(--red-600);border-color:rgba(206,27,34,.30);box-shadow:var(--sh-sm), 0 0 0 0 rgba(37,211,102,.60);transform:scale(1)}
  8.3% {background:var(--green-ok);color:#fff;border-color:var(--green-ok);box-shadow:var(--sh-sm), 0 0 0 24px rgba(37,211,102,0);transform:scale(1.14)}
  15.7% {background:var(--green-ok);color:#fff;border-color:var(--green-ok);box-shadow:var(--sh-sm), 0 0 0 0 rgba(37,211,102,0);transform:scale(1)}
  48% {background:var(--green-ok);color:#fff;border-color:var(--green-ok);box-shadow:var(--sh-sm), 0 0 0 0 rgba(37,211,102,0);transform:scale(1)}
  54%, 100% {background:#fff;color:var(--red-600);border-color:rgba(206,27,34,.30);box-shadow:var(--sh-sm), 0 0 0 0 rgba(37,211,102,0);transform:scale(1)}
}
/* Ombre douce au repos : la pastille se pose SUR le chemin au lieu d'y être
   incrustée. C'est ce léger relief qui fait la différence de finition. */
.step .num{box-shadow:var(--sh-sm)}
.js-anim .step.rv.in .num{animation:jsf-etape-vide 7.8s cubic-bezier(.3,.7,.3,1) infinite}
.js-anim .step.rv.in:last-child .num{animation-name:jsf-etape-verte}

/* LE LOGO SUIT LA PROGRESSION — il ne se contente pas d'attendre la fin.
   Il apparaît au-dessus de CHAQUE étape au moment où elle s'allume :
   il accompagne, il surveille, il guide. Puis, sur la troisième, il arrive
   après le vert, plus grand et plus longtemps : là, il récompense.
   C'est aussi ce qui rompt la monotonie — la boucle ne se lit plus pareil
   d'un bout à l'autre.
   ⚠ Un ::after n'hérite PAS de l'animation-delay de son parent : chaque
   décalage est répété explicitement.
   Décoratif → contenu vide, donc ignoré par les lecteurs d'écran. */
/* L'arrivée : plus tard que le vert, plus grand, et il s'attarde. */
@keyframes jsf-logo-recompense{
  0%,  20.3% {opacity:0;transform:translateX(-50%) translateY(9px) scale(.4) rotate(-8deg)}
  22.4% {opacity:1;transform:translateX(-50%) translateY(-2px) scale(1.12) rotate(2deg)}
  25% {opacity:1;transform:translateX(-50%) translateY(0) scale(1) rotate(0)}
  39.7% {opacity:1;transform:translateX(-50%) translateY(0) scale(1) rotate(0)}
  48%, 100% {opacity:0;transform:translateX(-50%) translateY(-10px) scale(.94) rotate(0)}
}
.js-anim .step.rv.in:last-child .num::after{
  content:"";position:absolute;left:50%;bottom:calc(100% + 9px);
  width:32px;height:32px;opacity:0;pointer-events:none;
  background:url('logo-jsf.webp') center/contain no-repeat;
  filter:drop-shadow(0 4px 12px rgba(28,124,74,.40));
  animation:jsf-logo-recompense 7.8s cubic-bezier(.2,.85,.25,1) infinite;
  animation-delay:2.4s}
.js-anim .step.rv.in:nth-child(2) .num{animation-delay:1.2s}
.js-anim .step.rv.in:nth-child(3) .num{animation-delay:2.4s}

/* Le chemin : un segment part de chaque pastille vers la suivante.
   Tracé segment par segment plutôt qu'en une barre unique — insensible
   à la largeur des colonnes et aux gouttières. */
.step::after{content:"";position:absolute;top:calc(var(--node) / 2 - 1px);
  left:calc(var(--node) + 14px);right:calc(-1 * var(--sgap) - 14px);height:2px;border-radius:2px}
.step:nth-child(1)::after{background:linear-gradient(90deg,rgba(206,27,34,.20),rgba(206,27,34,.50))}
.step:nth-child(2)::after{background:linear-gradient(90deg,rgba(206,27,34,.50),var(--red))}
.step:last-child::after{display:none}

.step h3{font-size:19.5px;letter-spacing:-.015em;margin:0 0 8px}
.step p{color:var(--slate);font-size:14.5px;line-height:1.6;margin:0;max-width:34ch}

/* Sous 860 px le chemin bascule à la verticale, le long de la marge gauche */
@media(max-width:860px){
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding-left:calc(var(--node) + 20px);padding-bottom:30px}
  .step:last-child{padding-bottom:0}
  .step .num{position:absolute;left:0;top:0;margin:0}
  .step::after{top:calc(var(--node) + 10px);bottom:10px;left:calc(var(--node) / 2 - 1px);
    right:auto;width:2px;height:auto}
  .step:nth-child(1)::after{background:linear-gradient(180deg,rgba(206,27,34,.20),rgba(206,27,34,.50))}
  .step:nth-child(2)::after{background:linear-gradient(180deg,rgba(206,27,34,.50),var(--red))}
  .step h3{margin-top:9px}
  .step p{max-width:none}
}

/* ── Encart « Vu dans les médias » (accueil) ──
   Deux colonnes : le lecteur à gauche, le propos à droite. La vidéo garde
   le comportement du site — elle ne se charge qu'au clic du visiteur. */
.media-band{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,52px);align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);box-shadow:var(--sh)}
.media-band .vid{border-radius:var(--r-sm);overflow:hidden}
/* Variante image fixe (pas d'embed) : la capture renvoie vers Instagram.
   Auto-hébergée, elle ne casse jamais — même si la vidéo YouTube est retirée. */
.media-band .shot{position:relative;display:block;border-radius:var(--r-sm);overflow:hidden;
  aspect-ratio:16/9;background:#14181F;line-height:0}
.media-band .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.media-band .shot:hover img{transform:scale(1.04)}
.media-band .shot::after{content:"";position:absolute;inset:0;background:rgba(20,24,31,.14);transition:.25s}
.media-band .shot:hover::after{background:rgba(20,24,31,.04)}
.media-band .shot .vid-play{z-index:1}
.media-band .shot:focus-visible{outline:3px solid var(--red-500);outline-offset:2px}
.media-txt h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em;margin:16px 0 12px}
.media-txt p{color:var(--slate);font-size:15.5px;line-height:1.65;margin:0 0 10px}
.media-cue{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--red-600);background:var(--red-tint);border-radius:var(--pill);padding:7px 14px;margin-bottom:20px!important}
.media-txt .btn{margin-top:4px}
@media(max-width:860px){.media-band{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════
   AFFICHES JSF & PUB CROISÉE (inc/affiches.php)
   ── L'affiche est un support publicitaire : elle illustre, elle ne
      remplace jamais le texte de la page. D'où la mention sous chaque
      visuel et le fait que tout son contenu existe aussi en texte réel.
   ══════════════════════════════════════════════════════════════════════ */

/* Photo d'en-tête de rubrique (bandeau sous le héros) */
.svc-cover{margin-top:clamp(26px,3.5vw,44px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh);line-height:0;background:var(--bg-soft)}
.svc-cover img{width:100%;height:clamp(200px,26vw,340px);object-fit:cover;display:block}

/* Affiche dans la colonne droite du héros (pages sans encart chiffré) */
.aff-hero{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh);background:#fff}
.aff-hero img{width:100%;height:auto;display:block}
.aff-hero .aff-mention{padding:12px 16px 14px;margin:0}

/* Bandeau « L'essentiel en un visuel » */
.aff-band .aff-band-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(26px,4vw,52px);align-items:center;
  background:linear-gradient(135deg,var(--red-tint),#FDF1E9);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,3vw,38px)}
.aff-fig{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:#fff;line-height:0}
.aff-fig img{width:100%;height:auto;display:block}
.aff-side h2{font-size:clamp(24px,2.8vw,36px);letter-spacing:-.025em;margin:14px 0 10px}
.aff-punch{font-size:clamp(17px,1.4vw,20px);font-weight:700;color:var(--red-600);margin:0 0 14px}
.aff-note{color:var(--slate);font-size:15.5px;line-height:1.65;margin:0 0 22px;max-width:52ch}
.aff-cta{display:flex;gap:12px;flex-wrap:wrap}
.aff-mention{font-size:12.5px;line-height:1.5;color:var(--slate);margin-top:18px;max-width:62ch}
.aff-mention.center{margin-inline:auto;text-align:center;margin-top:28px}
@media(max-width:900px){
  .aff-band .aff-band-in{grid-template-columns:minmax(0,1fr)}
  .aff-fig{max-width:420px;margin-inline:auto}
  .aff-cta .btn{flex:1 1 100%}
}

/* « Ça peut aussi vous intéresser » */
.xpromo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.xpromo-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .3s cubic-bezier(.3,.7,.3,1),box-shadow .3s cubic-bezier(.3,.7,.3,1),border-color .3s}
.xpromo-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:transparent}
.xpromo-card>img{width:100%;height:230px;object-fit:cover;object-position:top center;display:block}
.xpromo-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.xpromo-body h3{font-size:19px;letter-spacing:-.02em}
.xpromo-body p{color:var(--slate);font-size:15px;flex:1}
.xpromo-body .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;
  color:var(--red-600);margin-top:6px}
.xpromo-card:hover .go .arw{transform:translateX(4px)}
@media(max-width:980px){.xpromo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.xpromo-grid{grid-template-columns:minmax(0,1fr)}
  .xpromo-card>img{height:auto}}
@media(prefers-reduced-motion:reduce){.xpromo-card{transition:none}.xpromo-card:hover{transform:none}}

/* Mention légale discrète (allégations chiffrées, art. L521-2 du Code des assurances) */
.legal-note{font-size:12.5px;line-height:1.5;color:var(--slate);margin-top:16px;max-width:70ch}
.legal-note.after-stats,.wrap>.legal-note{margin-top:26px}

/* ══════════════════════════════════════════════════════════════════════
   RETOURS D'INTERACTION — 2026-07-30
   Rien de décoratif ici : chacun de ces états existait déjà côté JavaScript
   mais n'avait aucune traduction visuelle. On rend visible ce que le code
   faisait déjà en silence.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Champ en erreur. site.js pose .invalid sur le champ fautif du formulaire
      de l'accueil et lui donne le focus — mais aucune règle ne l'affichait :
      le visiteur voyait le curseur sauter sans comprendre pourquoi.
      Même traitement que diagnostic.php, pour un site cohérent. */
.contact input.invalid,.contact textarea.invalid,
form input.invalid,form textarea.invalid{
  border-color:var(--red-500);box-shadow:0 0 0 4px rgba(206,27,34,.12)}

/* 2. Bouton pendant l'envoi. L'anneau tourne à l'endroit exact où le doigt
      vient d'appuyer ; sur mobile lent, c'est la seule preuve qu'il se passe
      quelque chose. aria-busy est posé par le script. */
@keyframes jsf-spin{to{transform:rotate(360deg)}}
/* Les marges internes se resserrent pendant l'envoi : l'anneau ajoute ~22 px
   à un contenu déjà en « nowrap ». Sans cette compensation il déborde du
   contour sur les petits écrans (constaté à 375 px, marge de 3 px seulement). */
.btn.is-sending{pointer-events:none;opacity:.9;padding-inline:18px}
.btn.is-sending::before{content:"";width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:jsf-spin .7s linear infinite}

/* 3. Message de résultat. Le texte changeait sans changer d'apparence :
      succès et échec se ressemblaient. */
.form-note{transition:color .2s ease}
.form-note.is-ok{color:var(--green);font-weight:700}
.form-note.is-ko{color:var(--red-600);font-weight:700}

/* 4. Mouvement réduit : on garde l'information, on retire l'animation.
      Un anneau figé ressemblerait à une page bloquée → on l'efface et le
      libellé « Envoi en cours… » suffit à porter le message. */
@media(prefers-reduced-motion:reduce){
  .btn.is-sending::before{display:none}
  .nav-links{transition:none}
  .nav-toggle span{transition:none}
}