@charset "utf-8";
/* ==========================================================================
   Elsermans Couverture — feuille de style unique
   Palette dérivée du logo : bleu nuit + rouge + blanc
   ========================================================================== */

/* --- Polices auto-hébergées (aucun CDN) ------------------------------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Fallback métrique : limite le décalage au swap (anti-CLS) */
@font-face{font-family:'Poppins Fallback';src:local('Arial');size-adjust:112%;ascent-override:92%;descent-override:31%;line-gap-override:0%}
@font-face{font-family:'Grotesk Fallback';src:local('Arial');size-adjust:104%;ascent-override:96%;descent-override:26%;line-gap-override:0%}

/* --- Jetons ------------------------------------------------------------ */
:root{
  --navy-900:#081A33; --navy-800:#0B2445; --navy-700:#123159; --navy-600:#1B4478;
  --navy-500:#2E619C; --navy-300:#7FA2CB; --navy-100:#E3ECF7;
  --red-700:#A81A20; --red-600:#CE2127; --red-500:#E23940; --red-100:#FCE9EA;
  --bg:#F6F9FC; --bg-alt:#ECF2F9; --surface:#FFFFFF;
  --border:#D6E1EF; --border-strong:#B9CBE1;
  --text:#0A1A2E; --muted:#456085;
  --shadow-s:0 1px 2px rgba(8,26,51,.06),0 2px 8px -4px rgba(8,26,51,.10);
  --shadow-m:0 8px 28px -14px rgba(8,26,51,.30);
  --shadow-l:0 24px 60px -30px rgba(8,26,51,.45);
  --font-display:'Space Grotesk','Grotesk Fallback',system-ui,sans-serif;
  --font-body:'Poppins','Poppins Fallback',system-ui,sans-serif;
  --header-h:78px;
  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px;
  --wrap:1220px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* --- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--text);
  background:
    radial-gradient(ellipse 60% 45% at 12% 4%,rgba(27,68,120,.10),transparent 62%),
    radial-gradient(ellipse 52% 38% at 92% 22%,rgba(206,33,39,.07),transparent 62%),
    radial-gradient(ellipse 70% 50% at 45% 78%,rgba(27,68,120,.07),transparent 62%),
    var(--bg);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,picture,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.14;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
p,li{text-wrap:pretty}
:focus-visible{outline:3px solid var(--red-600);outline-offset:3px;border-radius:4px}

/* --- Utilitaires ------------------------------------------------------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
body,main,.site-header,.topbar,.site-footer{max-width:100%}
.wrap-narrow{width:min(100% - 2.5rem,830px);margin-inline:auto}
.skip-link{position:absolute;left:0;top:0;z-index:2000;background:var(--navy-800);color:#fff;
  padding:.85rem 1.4rem;border-radius:0 0 var(--r-s) 0;font-weight:600;
  transform:translateY(-120%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
/* Piege a robots du formulaire : invisible et hors du parcours clavier. */
.hp{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section{padding-block:clamp(3.25rem,7vw,5.75rem)}
.section--alt{background:var(--bg-alt);border-block:1px solid var(--border)}
.section--navy{background:var(--navy-800);color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red-600);margin-bottom:.9rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red-600);border-radius:2px;flex:none}
.eyebrow svg{width:15px;height:15px;flex:none}
.section--navy .eyebrow{color:#FF8A8F}
.section--navy .eyebrow::before{background:#FF8A8F}
.h-xl{font-size:clamp(2.1rem,5.4vw,3.6rem)}
.h-l{font-size:clamp(1.75rem,3.9vw,2.7rem)}
.h-m{font-size:clamp(1.35rem,2.5vw,1.8rem)}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--muted);max-width:68ch}
.section--navy .lead{color:#C3D5EC}
.accent{color:var(--red-600)}
.section--navy .accent{color:#FF7A80}
.section-head{max-width:70ch;margin-bottom:clamp(2rem,4vw,3rem)}

/* Utilitaires d'espacement (remplacent les attributs style inline, bloques par la CSP) */
.mt-s{margin-top:.6rem}
.mt-m{margin-top:1rem}
.mt-l{margin-top:2rem}
.pb-0{padding-bottom:0}
.center{justify-content:center;text-align:center}
.lead.center{margin-inline:auto}
.meta{font-size:.82rem;color:var(--muted);margin-bottom:1.5rem}
.stat strong .sep{display:inline;font-size:.5em;font-weight:500;opacity:.55}
/* Un emplacement réservé dans un chiffre reste lisible sans écraser la carte */
.stat strong .ph{font-size:.4em;font-weight:500;letter-spacing:0}

/* --- Boutons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:600;font-size:.94rem;line-height:1.2;padding:.95rem 1.5rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s,color .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:linear-gradient(135deg,var(--red-600),var(--red-700));color:#fff;box-shadow:0 10px 24px -12px rgba(206,33,39,.75)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(206,33,39,.85)}
.btn--navy{background:linear-gradient(135deg,var(--navy-600),var(--navy-800));color:#fff;box-shadow:0 10px 24px -12px rgba(11,36,69,.7)}
.btn--navy:hover{transform:translateY(-2px)}
.btn--ghost{background:var(--surface);color:var(--navy-800);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--navy-600);color:var(--navy-600)}
.btn--light{background:#fff;color:var(--navy-800)}
.btn--light:hover{transform:translateY(-2px)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--outline-light:hover{background:rgba(255,255,255,.12)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}

/* --- Barre d'urgence + en-tête ---------------------------------------- */
.topbar{background:var(--navy-900);color:#D8E6F7;font-size:.82rem}
.topbar__inner{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;justify-content:space-between;
  padding-block:.5rem}
.topbar a{color:#fff;font-weight:600}
.topbar a:hover{color:#FF9196}
.topbar__item{display:inline-flex;align-items:center;gap:.45rem}
.topbar__item svg{width:15px;height:15px;flex:none;opacity:.85}

.site-header{position:sticky;top:0;z-index:900;background:rgba(246,249,252,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.site-header>.wrap,.topbar>.wrap{width:min(100% - 3rem,1440px)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:2.75rem;height:var(--header-h)}
.logo{display:inline-flex;align-items:center;flex:none;margin-right:auto;padding-right:1rem}
.logo img{height:50px;width:auto}
.nav{display:flex;align-items:center;gap:1.55rem}
.nav__link{font-size:.9rem;font-weight:500;color:var(--muted);padding-block:.4rem;position:relative;
  display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;cursor:pointer}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--navy-700)}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--red-600);border-radius:2px}
.nav__chev{width:13px;height:13px;transition:transform .25s var(--ease)}
.has-drop{position:relative}
.has-drop:hover .nav__chev,.has-drop:focus-within .nav__chev{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + .7rem);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:290px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  box-shadow:var(--shadow-l);padding:.55rem;opacity:0;visibility:hidden;transition:.25s var(--ease)}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop::before{content:"";position:absolute;top:-.7rem;left:0;right:0;height:.7rem}
.drop a{display:block;padding:.6rem .8rem;border-radius:var(--r-s);font-size:.88rem;color:var(--muted);font-weight:500}
.drop a:hover{background:var(--navy-100);color:var(--navy-700)}
.drop__all{margin-top:.3rem;border-top:1px solid var(--border);padding-top:.5rem}
.drop__all a{color:var(--red-600);font-weight:600}
.header__cta{display:flex;align-items:center;gap:.8rem;flex:none}
.header__tel{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--navy-800);white-space:nowrap}
.header__tel:hover{color:var(--red-600)}
.header__call{display:none;width:44px;height:44px;padding:0;border-radius:50%;flex:none}
.header__call svg{width:19px;height:19px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--border-strong);border-radius:var(--r-s);
  background:var(--surface);align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--navy-800);border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;
  background:var(--navy-800);border-radius:2px;transition:.25s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mobile-nav{display:none;position:fixed;inset:calc(var(--header-h)) 0 0;z-index:880;background:var(--bg);
  overflow-y:auto;padding:1.5rem 1.25rem 3rem}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav a{display:block;padding:.85rem .25rem;border-bottom:1px solid var(--border);font-weight:600;color:var(--navy-800)}
.mobile-nav .sub a{padding-left:1.1rem;font-weight:500;font-size:.92rem;color:var(--muted);border-bottom:0}
.mobile-nav .sub{margin-bottom:.6rem;border-bottom:1px solid var(--border);padding-bottom:.5rem}
.mobile-nav .btn{width:100%;margin-top:1.3rem}

/* --- Fil d'Ariane ------------------------------------------------------ */
.crumbs{font-size:.8rem;color:var(--muted);padding-block:1.1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.crumbs li{display:flex;align-items:center;gap:.45rem}
.crumbs li+li::before{content:"›";color:var(--border-strong)}
.crumbs a:hover{color:var(--red-600);text-decoration:underline}
.crumbs [aria-current]{color:var(--navy-700);font-weight:600}

/* --- Hero -------------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(2.5rem,5vw,4.25rem) clamp(3rem,6vw,5rem)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hero__kicker{display:inline-flex;align-items:center;gap:.55rem;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:.42rem .95rem;font-size:.78rem;font-weight:600;color:var(--navy-700);
  box-shadow:var(--shadow-s);margin-bottom:1.3rem}
.hero__kicker svg{width:15px;height:15px;color:var(--red-600)}
.hero h1{font-size:clamp(2.25rem,5.2vw,3.85rem);margin-bottom:1.1rem}
.hero__baseline{font-family:var(--font-display);font-size:.92rem;font-weight:500;color:var(--muted);
  font-style:italic;margin-bottom:1rem}
.hero__media{position:relative}
.hero__media img{border-radius:var(--r-xl);box-shadow:var(--shadow-l);width:100%}
.hero__badge{position:absolute;left:-18px;bottom:26px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-m);padding:.9rem 1.15rem;box-shadow:var(--shadow-m);max-width:230px}
.hero__badge strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--navy-700);line-height:1.1}
.hero__badge span{font-size:.76rem;color:var(--muted);line-height:1.35;display:block;margin-top:.15rem}
.hero__trust{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.9rem;font-size:.84rem;color:var(--muted)}
.hero__trust li{display:flex;align-items:center;gap:.45rem;list-style:none}
.hero__trust svg{width:16px;height:16px;color:var(--red-600);flex:none}

/* --- Bandeau défilant -------------------------------------------------- */
.marquee{background:var(--navy-800);color:#fff;overflow:hidden;padding-block:.85rem;
  border-block:1px solid var(--navy-700)}
.marquee__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee span{font-family:var(--font-display);font-size:.88rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;color:#D6E4F5}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Grilles & cartes -------------------------------------------------- */
.grid{display:grid;gap:1.35rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-s);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--border-strong)}
.card__media{aspect-ratio:3/2;overflow:hidden;background:var(--navy-100)}
/* Le <picture> doit porter la hauteur, sinon le height:100% de l'image
   n'a pas de référence et les visuels au format 16:9 ne remplissent pas la carte. */
.card__media picture{display:block;width:100%;height:100%}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.card__body h3{font-size:1.12rem}
.card__body p{font-size:.91rem;color:var(--muted)}
.card__link{margin-top:auto;font-size:.85rem;font-weight:600;color:var(--red-600);display:inline-flex;align-items:center;gap:.4rem}
.card__link svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.card:hover .card__link svg{transform:translateX(4px)}
.card--flat{padding:1.5rem 1.55rem;gap:.55rem}
.card--flat h3{font-size:1.05rem}
.card--flat p{font-size:.9rem;color:var(--muted)}
.card__icon{width:46px;height:46px;border-radius:13px;background:var(--navy-100);color:var(--navy-700);
  display:grid;place-items:center;margin-bottom:.35rem}
.card__icon svg{width:23px;height:23px}
.card__num{font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--red-600);
  letter-spacing:.1em}

/* liste de prestations */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin-top:.4rem}
.chips li{font-size:.82rem;background:var(--navy-100);color:var(--navy-700);border-radius:999px;
  padding:.35rem .8rem;font-weight:500}
.section--navy .chips li{background:rgba(255,255,255,.1);color:#DCE9F8}

/* --- Bloc statistiques ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:1.6rem 1.4rem;
  box-shadow:var(--shadow-s)}
.stat strong{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,2.5rem);
  color:var(--navy-700);line-height:1}
.stat>span{display:block;font-size:.84rem;color:var(--muted);margin-top:.5rem}
/* Plage horaire : plus longue qu'un nombre, donc plus petite et insecable */
.stat--hours strong{font-size:clamp(1.3rem,2.4vw,1.75rem);white-space:nowrap}
.section--navy .stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.section--navy .stat strong{color:#fff}
.section--navy .stat>span{color:#B9CFE9}

/* --- Bloc média + texte ------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media img{border-radius:var(--r-l);box-shadow:var(--shadow-m)}

/* --- Contenu éditorial ------------------------------------------------- */
.prose{max-width:none}
.prose>*+*{margin-top:1.15rem}
.prose h2{font-size:clamp(1.5rem,3vw,2.05rem);margin-top:clamp(2.6rem,5vw,3.4rem);padding-top:.2rem}
.prose h3{font-size:clamp(1.14rem,2vw,1.35rem);margin-top:2rem}
.prose h4{font-size:1.02rem;margin-top:1.5rem;font-family:var(--font-body);font-weight:600}
.prose p,.prose li{color:#243B57}
.prose a:not(.btn){color:var(--navy-600);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--navy-300);font-weight:500}
.prose a:not(.btn):hover{color:var(--red-600);text-decoration-color:var(--red-500)}
.prose ul,.prose ol{padding-left:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.6rem}
.prose ul li::before{content:"";position:absolute;left:.15rem;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--red-600);transform:rotate(45deg)}
.prose ol{counter-reset:step;list-style:none;padding-left:0}
.prose ol>li{position:relative;padding-left:2.4rem;counter-increment:step}
.prose ol{gap:1.1rem}
.prose ol>li::before{content:counter(step);position:absolute;left:0;top:.02em;width:1.75rem;height:1.75rem;
  border-radius:50%;background:linear-gradient(135deg,var(--navy-600),var(--navy-800));color:#fff;
  font-family:var(--font-display);font-size:.82rem;font-weight:700;display:grid;place-items:center;
  box-shadow:0 4px 10px -5px rgba(8,26,51,.6)}
.prose li>h3:first-child,.prose li>h4:first-child{margin-top:0}
.prose li>*+*{margin-top:.35rem}
.prose figure{margin-block:1.8rem}
.prose .fig-wide{margin-block:2.4rem}
.figure-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-block:2.4rem;
  align-items:start}
.figure-duo figure{margin:0}
/* Les visuels n'ont pas tous le meme rapport : on les normalise pour que les
   deux images du duo s'alignent exactement. */
.figure-duo img{aspect-ratio:3/2;width:100%;height:auto;object-fit:cover}
.figure-duo figcaption{font-size:.78rem;margin-top:.55rem}
.guide{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--navy-600);
  border-radius:0 var(--r-l) var(--r-l) 0;padding:1.6rem 1.8rem;box-shadow:var(--shadow-s);
  display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:center}
.guide h2{font-family:var(--font-display);margin:.1rem 0 .45rem;color:var(--navy-800)}
.guide p{font-size:.93rem;color:var(--muted);margin:0;max-width:60ch}
.guide .btn{flex:none;white-space:nowrap}
.prose figure img{border-radius:var(--r-l);box-shadow:var(--shadow-m)}
.prose figcaption{font-size:.82rem;color:var(--muted);margin-top:.7rem;text-align:center}
.prose strong{color:var(--navy-800);font-weight:600}

/* Réponse directe mise en avant (GEO) */
.answer{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--red-600);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:1.15rem 1.35rem;font-size:1.02rem;box-shadow:var(--shadow-s)}
.answer p{margin:0;color:var(--text)}

/* Tableau comparatif */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);
  box-shadow:var(--shadow-s)}
.table-wrap table{min-width:540px;font-size:.9rem}
.table-wrap caption{text-align:left;padding:1rem 1.15rem .25rem;font-size:.82rem;color:var(--muted)}
.table-wrap th,.table-wrap td{padding:.8rem 1.15rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.table-wrap thead th{background:var(--navy-800);color:#fff;font-family:var(--font-display);font-size:.84rem;
  letter-spacing:.02em;border-bottom:0}
.table-wrap tbody th{font-weight:600;color:var(--navy-800)}
.table-wrap tbody tr:last-child th,.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr:nth-child(even){background:#FAFCFE}

/* Encadré À retenir */
.recap{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;border-radius:var(--r-l);
  padding:1.7rem 1.8rem;box-shadow:var(--shadow-m)}
.recap h2{color:#fff;font-size:1.25rem;margin:0 0 .9rem}
.recap ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.6rem}
.recap li{position:relative;padding-left:1.7rem;font-size:.93rem;color:#DBE8F7}
.recap li::before{content:"";position:absolute;left:.15rem;top:.6em;width:8px;height:8px;border-radius:2px;
  background:var(--red-500);transform:rotate(45deg)}

/* Encadré preuve terrain / EEAT */
.proof{background:var(--bg-alt);border:1px solid var(--border);border-left:4px solid var(--navy-600);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:1.3rem 1.5rem}
.proof h3{font-size:1rem;margin:0 0 .5rem;color:var(--navy-800);display:flex;align-items:center;gap:.5rem}
.proof h3::before{content:"À noter";font-family:var(--font-body);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--navy-600);
  padding:.2rem .5rem;border-radius:999px;flex:none}
.proof p{font-size:.93rem;color:#2B4260;margin:0}
.ph{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:var(--red-100);
  color:var(--red-700);padding:.1em .45em;border-radius:5px;border:1px solid #F3C9CB}

/* --- FAQ --------------------------------------------------------------- */
.faq{display:flex;flex-direction:column;gap:.9rem}
.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  padding:1.25rem 1.4rem;box-shadow:var(--shadow-s)}
.faq__item h3{font-size:1.04rem;margin:0 0 .55rem;color:var(--navy-800)}
.faq__item p{font-size:.93rem;color:#2B4260;margin:0}
.faq__item p+p{margin-top:.6rem}

/* --- Bandeau de conversion -------------------------------------------- */
.cta-band{background:linear-gradient(130deg,var(--navy-800) 0%,var(--navy-700) 55%,var(--navy-600) 100%);
  color:#fff;border-radius:var(--r-xl);padding:clamp(2rem,4vw,3.2rem);box-shadow:var(--shadow-l);
  display:grid;grid-template-columns:1.4fr auto;gap:1.8rem;align-items:center}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.15rem);color:#fff;margin-bottom:.7rem}
.cta-band p{color:#C6D8ED;max-width:56ch;font-size:.97rem}
.cta-band .btn-row{margin-top:0;justify-content:flex-end}

/* --- Zones ------------------------------------------------------------- */
.zone-list{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none}
.zone-list a{display:inline-block;background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:.45rem 1rem;font-size:.86rem;font-weight:500;color:var(--navy-700);transition:.2s}
.zone-list a:hover{border-color:var(--red-600);color:var(--red-600)}

/* --- Galerie ----------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.gallery figure{margin:0;border-radius:var(--r-m);overflow:hidden;position:relative;background:var(--navy-100);
  border:1px solid var(--border)}
.gallery picture{display:block}
.gallery img{aspect-ratio:3/2;width:100%;height:auto;object-fit:cover;transition:transform .5s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(8,26,51,.88));
  color:#fff;padding:1.9rem .95rem .8rem;font-size:.8rem;line-height:1.4}

/* --- Formulaire -------------------------------------------------------- */
.form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);
  padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow-m)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--navy-800);margin-bottom:.4rem}
.field .hint{font-weight:400;color:var(--muted);font-size:.8rem}
.field input,.field select,.field textarea{width:100%;padding:.8rem .95rem;border:1px solid var(--border-strong);
  border-radius:var(--r-s);background:#FBFDFF;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-600);
  box-shadow:0 0 0 3px rgba(46,97,156,.16)}
.field textarea{min-height:140px;resize:vertical}
.field--check{display:flex;gap:.7rem;align-items:flex-start;font-size:.84rem;color:var(--muted)}
.field--check input{width:auto;margin-top:.25rem;flex:none}
.form .btn{width:100%}
.form__note{font-size:.78rem;color:var(--muted);margin-top:.9rem}

/* --- Coordonnées ------------------------------------------------------- */
.contact-list{list-style:none;display:flex;flex-direction:column;gap:1.1rem}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start}
.contact-list svg{width:20px;height:20px;color:var(--red-600);flex:none;margin-top:.25rem}
.contact-list strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:600;margin-bottom:.1rem}
.contact-list a{font-weight:600;color:var(--navy-800)}
.contact-list a:hover{color:var(--red-600)}

/* --- Pied de page ------------------------------------------------------ */
.site-footer{background:var(--navy-900);color:#B7CCE5;padding-block:clamp(2.8rem,5vw,4rem) 1.5rem}
.footer__grid{display:grid;grid-template-columns:1.35fr 1.35fr .85fr 1.05fr;gap:2.2rem}
.site-footer ul.cols-2{display:block;column-count:2;column-gap:1.3rem}
.site-footer ul.cols-2 li{margin-bottom:.5rem;break-inside:avoid}
.footer__logo{background:#fff;border-radius:var(--r-m);padding:.85rem 1rem;display:inline-block;margin-bottom:1.1rem}
.footer__logo img{height:46px;width:auto}
.site-footer h2{font-family:var(--font-display);font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;margin-bottom:1rem}
.site-footer p{font-size:.88rem;line-height:1.7}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.site-footer a{font-size:.88rem}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer__legal{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.3rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.8rem}
.footer__legal a{font-size:.8rem}

/* --- Bandeau de conversion entre deux sections ------------------------ */
.cta-strip-wrap{padding-block:clamp(2rem,4vw,3rem)}
.cta-strip{display:grid;grid-template-columns:1.5fr auto;gap:1.6rem;align-items:center;
  background:linear-gradient(130deg,var(--navy-800) 0%,var(--navy-700) 55%,var(--navy-600) 100%);
  color:#fff;border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.2rem) clamp(1.6rem,3.5vw,2.6rem);
  box-shadow:var(--shadow-l)}
.cta-strip .eyebrow{color:#FF8A8F;margin-bottom:.5rem}
.cta-strip .eyebrow::before{background:#FF8A8F}
.cta-strip h2{color:#fff;margin:0 0 .45rem;font-family:var(--font-display)}
.cta-strip p{color:#C6D8ED;margin:0;font-size:.95rem;max-width:58ch}
.cta-strip .btn-row{margin-top:0;justify-content:flex-end;flex:none}
@media (max-width:860px){
  .cta-strip{grid-template-columns:1fr}
  .cta-strip .btn-row{justify-content:flex-start}
}
@media (max-width:640px){
  .cta-strip .btn-row{display:grid;grid-template-columns:1fr;width:100%}
  .cta-strip .btn-row .btn{width:100%}
}

/* --- Crédit de réalisation -------------------------------------------- */
.footer__credit a{font-weight:600;color:#fff}
.footer__credit a:hover{color:#FF9196}

/* --- Relance en milieu de page ---------------------------------------- */
.mid-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.1rem;margin-block:2.6rem;padding:1.35rem 1.6rem;border-radius:var(--r-l);
  background:linear-gradient(130deg,var(--navy-800),var(--navy-700));color:#fff;
  box-shadow:var(--shadow-m)}
.mid-cta p{margin:0;font-size:.95rem;color:#C9DBF0;max-width:46ch}
.mid-cta strong{color:#fff;display:block;font-family:var(--font-display);font-size:1.12rem;
  margin-bottom:.2rem}
.mid-cta__actions{display:flex;gap:.7rem;flex-wrap:wrap;flex:0 1 auto}
.mid-cta .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.mid-cta .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}

@media (max-width:760px){
  /* Les deux boutons ne tiennent pas côte à côte : ils passent en pleine largeur */
  .mid-cta{padding:1.2rem 1.15rem}
  .mid-cta__actions{flex:1 1 100%;display:grid;grid-template-columns:1fr;gap:.6rem}
  .mid-cta__actions .btn{width:100%}
  .mid-cta p{max-width:none}
}

/* --- Relance sous la FAQ ---------------------------------------------- */
.faq__more{margin-top:1.4rem;font-size:.92rem;color:var(--muted);text-align:center}
.faq__more a{color:var(--navy-700);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.faq__more a:hover{color:var(--red-600)}

/* --- Barre d'action fixe (mobile uniquement) -------------------------- */
.action-bar{display:none}
@media (max-width:960px){
  .action-bar{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    position:fixed;left:0;right:0;bottom:0;z-index:870;
    padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom,0px));
    background:rgba(246,249,252,.94);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);
    box-shadow:0 -6px 24px -14px rgba(8,26,51,.5)}
  .action-bar .btn{width:100%;padding:.8rem .6rem;font-size:.9rem}
  /* le contenu ne doit jamais passer sous la barre */
  body{padding-bottom:5rem}
  /* masquée quand le menu plein écran est ouvert */
  body:has(#mobile-nav[data-open="true"]) .action-bar{display:none}
}
@media print{.action-bar{display:none!important}}

/* --- Page 404 ---------------------------------------------------------- */
.err{text-align:center;padding-block:clamp(3rem,8vw,6rem)}
.err__code{font-family:var(--font-display);font-size:clamp(4rem,14vw,8rem);line-height:1;color:var(--navy-100)}

/* --- Responsive -------------------------------------------------------- */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
/* En-tête : trois paliers avant de basculer sur le menu burger */
@media (max-width:1320px){
  .header__tel{display:none}
  .nav{gap:1.15rem}
  .header__inner{gap:1.5rem}
  .logo{padding-right:.5rem}
}
@media (max-width:1120px){
  .nav{display:none}
  .burger{display:flex}
}
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{order:-1}
  .hero__badge{left:12px}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .split,.split--reverse .split__media{grid-template-columns:1fr;order:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1fr}
  .cta-band .btn-row{justify-content:flex-start}
}
@media (max-width:640px){
  :root{--header-h:66px}
  .site-header>.wrap,.topbar>.wrap{width:min(100% - 1.75rem,1440px)}
  .site-footer ul.cols-2{column-count:1}
  .header__inner{gap:.75rem}
  .logo{padding-right:0}
  .wrap,.wrap-narrow{width:min(100% - 1.75rem,var(--wrap))}
  .logo img{height:38px}
  .grid--2,.grid--3,.grid--4,.stats,.gallery,.figure-duo{grid-template-columns:1fr}
  .guide{grid-template-columns:1fr}
  .topbar__inner{justify-content:center;font-size:.76rem}
  .btn-row .btn,.form .btn,.mobile-nav .btn{width:100%}
  .header__quote{display:none}
  .header__call{display:inline-flex}
  .header__cta{gap:.5rem}
  .hero__badge{position:static;margin-top:1rem;max-width:none}
}

/* ══════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */

@keyframes fadeUp{from{opacity:0;translate:0 34px;scale:.978}to{opacity:1;translate:0 0;scale:1}}
@keyframes slideUp{from{translate:0 34px}to{translate:0 0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* --- Entrée de page (hero) -------------------------------------------
   Les éléments susceptibles d'être le LCP (titre, accroche, visuel) ne
   changent que de position, jamais d'opacité. */
.hero__kicker{animation:fadeUp .7s var(--ease) both .08s}
.hero__baseline{animation:fadeUp .7s var(--ease) both .2s}
.hero .lead{animation:slideUp .8s var(--ease) both .28s}
.hero .btn-row{animation:fadeUp .7s var(--ease) both .44s}
.hero__trust{animation:fadeUp .7s var(--ease) both .58s}
.hero__media{animation:slideUp .85s var(--ease) both .05s}
.hero__badge{animation:fadeUp .7s var(--ease) both .7s}

/* --- Révélation au défilement ----------------------------------------
   Sans le support de animation-timeline, rien n'est masqué : le contenu
   s'affiche simplement sans animation. */
@supports (animation-timeline: view()){
  .section-head,
  .card,
  .stat,
  .prose figure,
  .figure-duo,
  .faq__item,
  .recap,
  .guide,
  .proof,
  .answer,
  .table-wrap,
  .gallery figure,
  .split__media,
  .cta-band,
  .mid-cta,
  .cta-strip,
  .zone-list li{
    animation:fadeUp 1s linear both;
    animation-timeline:view();
    /* La plage s'achève pendant la phase d'entrée : un élément situé en bas de
       page termine donc toujours son animation, même quand le défilement ne
       peut pas aller plus loin. */
    animation-range:entry 0% entry 62%;
  }

  /* Léger décalage d'une colonne à l'autre, pour éviter l'effet « bloc » */
  .grid>*:nth-child(3n+2),
  .stats>*:nth-child(2n){animation-range:entry 5% entry 66%}
  .grid>*:nth-child(3n),
  .gallery figure:nth-child(3n){animation-range:entry 9% entry 70%}
  .zone-list li:nth-child(even){animation-range:entry 7% entry 68%}
}

/* --- Micro-interactions ---------------------------------------------- */
.nav__link::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--navy-600);border-radius:2px;scale:0 1;transform-origin:left;
  transition:scale .28s var(--ease)}
.nav__link:hover::before{scale:1 1}
.nav__link[aria-current="page"]::before{display:none}
.card__link svg,.btn svg{will-change:transform}
.logo img{transition:opacity .25s var(--ease)}
.logo:hover img{opacity:.82}

/* --- Mouvement réduit : tout est désactivé, rien ne reste masqué ------ */
@media (prefers-reduced-motion:reduce){
  .hero__kicker,.hero__baseline,.hero h1,.hero .lead,.hero .btn-row,
  .hero__trust,.hero__media,.hero__badge,
  .section-head,.card,.stat,.prose figure,.figure-duo,.faq__item,.recap,
  .guide,.proof,.answer,.table-wrap,.gallery figure,.split__media,
  .cta-band,.mid-cta,.cta-strip,.zone-list li{
    animation:none!important;
    opacity:1!important;
    translate:none!important;
    scale:none!important;
  }
  .nav__link::before{transition:none}
}

/* --- Impression & accessibilité --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .topbar,.site-header,.mobile-nav,.marquee,.cta-band,.btn{display:none!important}
  body{background:#fff}
  .prose a::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* ══════════════════════════════════════════════════════════════════════
   EFFETS VISUELS
   Réécriture en CSS pur d'effets repérés sur 21st.dev. Les originaux sont
   des composants React (Tailwind + Motion + WebGL) : ils sont inutilisables
   ici, la CSP du site interdisant le JavaScript tiers et les styles en
   ligne. Chaque effet est donc refait sans script, sans dépendance et sans
   requête supplémentaire — un seul repaint, rien à télécharger.

   1. BG Patterns / Grid ......... grille estompée sur les blocs marine
   2. Dot Pattern ................ semis de points sur les encadrés clairs
   3. Spotlight Background ....... halo lumineux décentré
   4. Animated Gradient / Aurora .. dérive lente de deux nappes colorées
   5. Text Shimmer ............... reflet qui balaie le bouton principal
   6. Shine on hover ............. éclat diagonal au survol des cartes
   7. Blur Fade .................. révélation nette depuis un léger flou
   ══════════════════════════════════════════════════════════════════════ */

/* --- 1. Grille estompée + 3. halo (blocs marine) ---------------------- */
.cta-band,.cta-strip,.mid-cta,.recap,.section--navy{position:relative;isolation:isolate}
.cta-band,.cta-strip,.mid-cta,.recap{overflow:hidden}

.cta-band::before,.cta-strip::before,.mid-cta::before,
.recap::before,.section--navy::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(125% 105% at 12% 0%,#000 22%,transparent 76%);
          mask-image:radial-gradient(125% 105% at 12% 0%,#000 22%,transparent 76%);
}
/* Les encadrés « À retenir » sont plus petits : maille plus fine */
.recap::before{background-size:34px 34px}

.cta-band::after,.cta-strip::after,.mid-cta::after,.section--navy::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(34rem 20rem at 88% 6%,rgba(206,33,39,.26),transparent 62%),
    radial-gradient(28rem 18rem at 4% 98%,rgba(127,162,203,.20),transparent 66%);
}

/* --- 2. Semis de points (encadrés clairs) ----------------------------- */
.guide,.proof,.answer{position:relative;isolation:isolate;overflow:hidden}
.guide::before,.proof::before,.answer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(18,49,89,.13) 1px,transparent 1px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(90% 130% at 97% 4%,#000 6%,transparent 68%);
          mask-image:radial-gradient(90% 130% at 97% 4%,#000 6%,transparent 68%);
}

/* --- 4. Aurore : deux nappes qui dérivent lentement -------------------
   Uniquement sur le grand bandeau de conversion, présent une seule fois
   par page : l'effet reste discret et le coût de composition négligeable. */
@media (prefers-reduced-motion:no-preference){
  .cta-band::after{
    animation:aurora 34s ease-in-out infinite alternate;
    will-change:transform;
  }
}
@keyframes aurora{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to{transform:translate3d(4%,3%,0) scale(1.14)}
}

/* --- 5. Reflet des boutons : voir la troisieme serie, plus bas --------- */
@keyframes sheen{0%,74%{translate:-150% 0}100%{translate:150% 0}}

/* --- 6. Éclat diagonal au survol des cartes --------------------------- */
.card{position:relative}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
  opacity:0;translate:-120% 0;
}
@media (prefers-reduced-motion:no-preference){
  .card:hover::after,.card:focus-visible::after{opacity:1;animation:sheen 1.1s var(--ease)}
}
/* Liseré rouge + halo chaud : le survol devient lisible d'un coup d'œil */
.card:hover,.card:focus-visible{
  box-shadow:var(--shadow-m),
             0 0 0 1px rgba(206,33,39,.20),
             0 20px 44px -28px rgba(206,33,39,.55);
  border-color:rgba(206,33,39,.35);
}

/* --- 7. Révélation depuis un léger flou ------------------------------- */
@keyframes fadeUpBlur{
  from{opacity:0;translate:0 34px;scale:.978;filter:blur(8px)}
  to  {opacity:1;translate:0 0;scale:1;filter:blur(0)}
}
@supports (animation-timeline: view()){
  .section-head,
  .gallery figure,
  .cta-band,
  .recap{animation-name:fadeUpBlur}
}

/* --- Mouvement réduit : plus aucun mouvement, rien n'est masqué ------- */
@media (prefers-reduced-motion:reduce){
  .cta-band::after,.btn--primary::after,.card::after{animation:none!important}
  .card::after{opacity:0!important}
  .section-head,.gallery figure,.cta-band,.recap{filter:none!important}
}

/* --- Impression : aucun décor ---------------------------------------- */
@media print{
  .cta-band::before,.cta-band::after,.cta-strip::before,.cta-strip::after,
  .mid-cta::before,.mid-cta::after,.recap::before,
  .section--navy::before,.section--navy::after,
  .guide::before,.proof::before,.answer::before,
  .btn--primary::after,.card::after{display:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   EFFETS VISUELS — seconde série
   Repris de recb82.pages.dev, dont les effets sont ici réécrits pour ce
   site : leur comparateur avant/après est piloté en JavaScript sur
   « pointermove » ; la version ci-dessous s'appuie sur un <input
   type="range"> natif, donc clavier, souris et tactile fonctionnent, et
   l'image reste lisible même sans script.

    8. Avant / après glissant ..... page Démoussage
    9. Parallaxe au défilement .... galeries
   10. Flottement + halo tournant . encart chiffré du hero
   11. Ombre pulsée .............. bouton de devis de la barre mobile
   ══════════════════════════════════════════════════════════════════════ */

/* --- 8. Comparateur avant / après ------------------------------------- */
@property --ba-pos{syntax:'<percentage>';inherits:true;initial-value:50%}

.ba{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-l);
  box-shadow:var(--shadow-m);background:var(--navy-100);--ba-pos:50%;
  touch-action:pan-y;isolation:isolate}
.ba__img{position:absolute;inset:0}
.ba__img picture{display:block;width:100%;height:100%}
.ba__img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;box-shadow:none}
/* La seconde image n'est révélée qu'à droite du curseur. */
.ba__img--apres{clip-path:inset(0 0 0 var(--ba-pos))}

.ba__handle{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:3px;
  background:#fff;box-shadow:0 0 20px rgba(8,26,51,.5);pointer-events:none;z-index:3}
.ba__knob{position:absolute;top:50%;left:50%;translate:-50% -50%;width:46px;height:46px;
  border-radius:50%;background:#fff;color:var(--navy-800);display:grid;place-items:center;
  box-shadow:var(--shadow-m)}
.ba__knob svg{width:20px;height:20px}

.ba__tag{position:absolute;bottom:.85rem;z-index:2;font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .72rem;border-radius:999px;
  background:rgba(8,26,51,.74);color:#fff;pointer-events:none}
.ba__tag--avant{left:.85rem}
.ba__tag--apres{right:.85rem}

/* Le curseur natif porte toute l'interaction : souris, doigt et clavier.
   Il est transparent mais bien présent — donc focusable et annoncé. */
.ba__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%;cursor:ew-resize}
.ba__range::-moz-range-thumb{width:56px;height:100vh;border:0;background:transparent;cursor:ew-resize}
.ba__range:focus-visible{outline:none}
.ba:has(.ba__range:focus-visible){outline:3px solid var(--red-600);outline-offset:3px}

/* Révélation à l'arrivée : le curseur part du bord puis se cale au milieu,
   ce qui signale qu'il est déplaçable sans aucune légende. */
@keyframes revele-ba{from{--ba-pos:6%}to{--ba-pos:50%}}
@media (prefers-reduced-motion:no-preference){
  .ba{animation:revele-ba 2.1s var(--ease) .45s both}
}

@media (max-width:640px){
  .ba{aspect-ratio:4/3}
  .ba__knob{width:40px;height:40px}
}

/* --- 9. Parallaxe au défilement --------------------------------------- */
@keyframes parallaxe{from{translate:0 -26px}to{translate:0 26px}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* L'image est agrandie de 12 % : le déplacement ne découvre jamais de vide. */
    .gallery figure img{scale:1.12;animation:parallaxe linear both;
      animation-timeline:view();animation-range:entry 0% exit 100%}
    /* Le survol reprend la main : les deux effets ne se superposent pas. */
    .gallery figure:hover img{animation-play-state:paused}
  }
}

/* --- 10. Encart chiffré : flottement + halo tournant ------------------- */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes flottement{from{translate:0 0}to{translate:0 -10px}}
@keyframes halo{to{--ang:360deg}}

.hero__badge{position:relative;isolation:isolate}
.hero__badge::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from var(--ang),transparent 0deg 250deg,
             rgba(206,33,39,.85) 300deg,rgba(127,162,203,.9) 330deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  padding:2px}
@media (prefers-reduced-motion:no-preference){
  .hero__badge{animation:fadeUp .7s var(--ease) both .7s,
                         flottement 5.5s var(--ease) 1.4s infinite alternate}
  .hero__badge::before{animation:halo 7s linear infinite}
}

/* --- 11. Ombre pulsée sur le devis mobile ------------------------------ */
@keyframes pulse-ombre{
  0%,100%{box-shadow:0 8px 20px -10px rgba(206,33,39,.75)}
  50%    {box-shadow:0 12px 30px -8px rgba(206,33,39,.95)}
}
@media (max-width:960px) and (prefers-reduced-motion:no-preference){
  .action-bar .btn--primary{animation:pulse-ombre 3.4s var(--ease) infinite}
}

/* --- Mouvement réduit : tout se fige, rien ne disparaît ---------------- */
@media (prefers-reduced-motion:reduce){
  .ba{animation:none!important;--ba-pos:50%!important}
  .gallery figure img{animation:none!important;scale:1!important;translate:none!important}
  .hero__badge,.hero__badge::before,.action-bar .btn--primary{animation:none!important}
}

/* --- Impression ------------------------------------------------------- */
@media print{
  .ba__range,.ba__handle,.ba__tag{display:none!important}
  .ba__img--apres{clip-path:none!important;position:static}
  .hero__badge::before{display:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   EFFETS VISUELS — troisième série : titres et boutons
   Repris de recb82.pages.dev. Chez eux, le découpage des titres est fait
   en JavaScript au chargement ; ici il est fait à la génération du site,
   donc la révélation est purement CSS et le titre reste du texte
   ordinaire pour les moteurs et les lecteurs d'écran.

   12. Titre mot à mot ........... le H1 de chaque page
   13. Halo tournant au survol ... tous les boutons
   14. Reflet oblique ........... tous les boutons, teinte par variante
   15. Enfoncement au clic ...... tous les boutons
   ══════════════════════════════════════════════════════════════════════ */

/* --- 12. Le titre se lève, mot après mot ------------------------------- */
@keyframes monteMot{from{translate:0 106%}to{translate:0 0}}

h1 .w{
  display:inline-block;vertical-align:top;overflow:hidden;
  /* La fenêtre déborde vers le bas pour ne pas rogner les jambages. */
  padding-bottom:.12em;margin-bottom:-.12em;
}
h1 .w>i{display:inline-block;font-style:inherit}

@media (prefers-reduced-motion:no-preference){
  h1 .w>i{animation:monteMot .58s var(--ease) both}
  /* Le décalage passe par une classe : la CSP interdit les styles en ligne. */
  h1 .w-1 >i{animation-delay:.02s}  h1 .w-2 >i{animation-delay:.055s}
  h1 .w-3 >i{animation-delay:.09s}  h1 .w-4 >i{animation-delay:.125s}
  h1 .w-5 >i{animation-delay:.16s}  h1 .w-6 >i{animation-delay:.195s}
  h1 .w-7 >i{animation-delay:.23s}  h1 .w-8 >i{animation-delay:.265s}
  h1 .w-9 >i{animation-delay:.30s}  h1 .w-10>i{animation-delay:.335s}
  h1 .w-11>i{animation-delay:.37s}  h1 .w-12>i{animation-delay:.405s}
  h1 .w-13>i{animation-delay:.44s}  h1 .w-14>i{animation-delay:.475s}
  h1 .w-15>i{animation-delay:.51s}  h1 .w-16>i{animation-delay:.545s}
  h1 .w-17>i{animation-delay:.58s}  h1 .w-18>i{animation-delay:.615s}
}

/* --- 13 à 15. Boutons -------------------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}

/* Reflet oblique : lent au repos, plus vif au survol. */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,
             var(--sheen,rgba(255,255,255,.34)) 50%,transparent 62%);
  translate:-150% 0;
}
/* Halo tournant, révélé au survol et à la tabulation. */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;padding:1.6px;
  background:conic-gradient(from var(--ang),transparent 0 70%,
             var(--beam,#fff) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .28s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{opacity:1}

/* Teintes par variante : le halo reste lisible sur chaque fond. */
.btn--primary      {--beam:#FFFFFF;      --sheen:rgba(255,255,255,.34)}
.btn--navy         {--beam:#7FA2CB;      --sheen:rgba(255,255,255,.28)}
.btn--light        {--beam:var(--red-600);--sheen:rgba(206,33,39,.16)}
.btn--ghost        {--beam:var(--red-600);--sheen:rgba(206,33,39,.14)}
.btn--outline-light{--beam:#FFFFFF;      --sheen:rgba(255,255,255,.22)}

/* Le bouton s'enfonce légèrement au clic : la pression est confirmée. */
.btn:active{scale:.972;transition-duration:.08s}

@media (prefers-reduced-motion:no-preference){
  /* Le balayage n'occupe qu'un quart du cycle : le reste du temps, rien ne bouge. */
  .btn::before{animation:sheen 6s var(--ease) infinite}
  .btn:hover::before{animation-duration:1.6s}
  .btn::after{animation:halo 2.6s linear infinite}
}

/* --- Mouvement réduit : tout se fige, rien ne disparaît ---------------- */
@media (prefers-reduced-motion:reduce){
  h1 .w>i{animation:none!important;translate:none!important}
  .btn::before,.btn::after{animation:none!important}
  .btn::before{opacity:0!important}
  .btn:active{scale:none}
}

@media print{
  h1 .w{overflow:visible}
  .btn::before,.btn::after{display:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   AVIS CLIENTS — bandeau défilant
   Repris de la famille « testimonials marquee » de 21st.dev, réécrit sans
   JavaScript : la piste est dupliquée et translatée de la moitié de sa
   largeur, ce qui donne une boucle sans raccord.
   ══════════════════════════════════════════════════════════════════════ */
.avis-piste{overflow:hidden;padding-block:.5rem 1.4rem;
  /* Les deux bords s'estompent : la rangée n'a pas de fin visible. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.avis-piste__track{display:flex;width:max-content}
.avis-piste__lot{display:flex;gap:1.15rem;padding-inline:.575rem}

.avis{margin:0;flex:0 0 clamp(270px,78vw,380px);display:flex;flex-direction:column;gap:.85rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);
  padding:1.4rem 1.5rem;box-shadow:var(--shadow-s);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.avis:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--border-strong)}
.etoiles{display:inline-flex;gap:.12rem;color:#F5A623}
.etoiles svg{width:17px;height:17px}
.avis blockquote{margin:0}
.avis blockquote p{margin:0;font-size:.93rem;line-height:1.62;color:#2B4260;
  /* Un avis long est tronqué proprement plutôt que d'étirer toute la rangée. */
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.avis figcaption{margin-top:auto;display:flex;flex-direction:column;gap:.1rem;
  padding-top:.85rem;border-top:1px solid var(--border)}
.avis figcaption strong{font-family:var(--font-display);font-size:.95rem;color:var(--navy-800)}
.avis figcaption span{font-size:.79rem;color:var(--muted)}
.avis-note{margin-top:.2rem;font-size:.82rem;color:var(--muted);text-align:center}

@keyframes defile-avis{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
  .avis-piste__track{animation:defile-avis 64s linear infinite}
  /* Le défilement s'arrête dès qu'on veut lire : survol ou tabulation. */
  .avis-piste:hover .avis-piste__track,
  .avis-piste:focus-within .avis-piste__track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  /* Plus de défilement : la rangée se parcourt à la main. */
  .avis-piste{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .avis-piste__track{animation:none}
  .avis-piste__lot[aria-hidden="true"]{display:none}
  .avis-note{display:none}
}
@media print{.avis-piste{overflow:visible}.avis-piste__track{animation:none}
  .avis-piste__lot[aria-hidden="true"]{display:none}}