/*!
 * Home Forteress, feuille de style principale (styles.css)
 * CSS vanilla, variables dans :root, aucune dépendance, aucun build.
 *
 * SYSTÈME (phase 2 de l'audit UX/UI, septembre 2026). Avant d'écrire une valeur,
 * utiliser le jeton correspondant ; avant d'ajouter une règle, chercher celle qui existe.
 *   Espacements  --s-1 à --s-10 : 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 px
 *   Sections     --section-y (80 / 96 / 104 px selon la largeur), --section-y-tight,
 *                --head-gap (en-tête de section -> contenu) ; deux sections de même
 *                fond qui se suivent n'ont qu'une marge entre elles
 *   Largeurs     --w-large (1280 px, grille), --w-moyen (880 px, blocs centrés),
 *                --w-texte (68 caractères, texte courant)
 *   Typographie  --fs-hero (h1 sur photo), --fs-h1 (h1 de page), --fs-h2 (.display-3),
 *                --fs-h3 (tous les h3), --fs-lede, --fs-body, --fs-small ;
 *                titres équilibrés (text-wrap: balance)
 *                Exceptions assumées : h2 .display-2 de l'accueil (modèle de référence),
 *                intertitres des articles (taille de lecture)
 *   Couleurs     --orange-text pour tout texte orange sur fond clair, --orange-2 sur fond
 *                sombre, --orange pour les icônes et les filets ; --faint conforme AA
 *   Boutons      --btn-grad (vermillon, texte blanc 700) : contraste sous le seuil AA,
 *                exception assumée pour l'identité de la marque ; #C64200 réservé aux petits textes
 *   États        survol --t (220 ms), focus visible 3 px orange sur tout élément
 *                interactif, .btn:disabled
 *   Apparitions  [data-reveal] posé par app.js, .reveal sur l'accueil ; --t-reveal,
 *                --reveal-y, --stagger ; rien au-dessus de la ligne de flottaison
 */

/* Polices hébergées sur le site (woff2, sous-ensemble latin, polices variables).
   Archivo et Inter sont préchargées dans chaque page. Plus de police à chasse fixe : intitulés,
   compteurs et numéros sont en Inter, chiffres à largeur fixe (font-variant-numeric: tabular-nums).
   Plages de graisse identiques à l'ancien chargement Google Fonts : Inter s'arrête à 600. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500 900;font-stretch:100%;font-display:swap;
  src:url(/assets/fonts/archivo-latin-500-900.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/inter-latin-400-600.woff2) format("woff2")}

/* =========================================================================
   HOME FORTERESS, Système de design (clair & moderne)
   Fond clair, dégradés profonds (jamais de noir brut), boutons arrondis.
   Orange signature #FE5900. Libellés techniques en Inter, petites capitales espacées. Carte FR/BE interactive.
   ========================================================================= */

:root{
  /* Fonds clairs */
  --bg:        #FBFBFD;
  --bg-2:      #F2F3F7;
  --surface:   #FFFFFF;

  /* Texte */
  --ink:       #15171F;   /* presque noir, jamais #000 */
  --ink-soft:  #2C2F3A;
  --mute:      #5C6270;
  --faint:     #676D7B;

  /* Filets */
  --line:      #E7E9F0;
  --line-soft: #EFF1F6;

  /* Accent orange */
  --orange:      #FE5900;
  --orange-2:    #FF7A33;
  --orange-text:#C64200;   /* orange lisible : 5,02:1 sur blanc */
  --orange-deep: #C64200;
  --orange-grad: var(--btn-grad);
  /* Boutons principaux : dégradé vermillon, texte blanc. Contraste sous le seuil AA (2,8 à 3,5:1) :
     exception assumée, choisie pour l'identité de la marque (décision du 26 septembre 2026). */
  --btn-grad: linear-gradient(135deg,#FF6B45,#F2502A 55%,#E0431E);
  --btn-grad-survol: linear-gradient(135deg,#F85F3A,#EA4824 55%,#D63C1A);
  --btn-ombre: 0 8px 20px -10px rgba(242,80,42,.55);
  --btn-ombre-survol: 0 14px 30px -12px rgba(242,80,42,.5);
  --btn-texte-ombre: 0 1px 1px rgba(0,0,0,.18);
  --orange-tint: #FFF3EC;
  --orange-ink:  #2A0E00;

  /* Profondeur (remplace le noir : dégradé bleu-ardoise) */
  --deep-grad:radial-gradient(950px 560px at 14% -8%, #3b3b3b 0%, rgba(59,59,59,0) 56%),linear-gradient(160deg, #303030 0%, #272727 44%, #191919 100%);
  --deep-solid:#232323;
  --bone:#F4F4F4;     /* texte sur fond profond */
  --mute-deep:#ABABAB;
  --line-deep:   rgba(255,255,255,.12);

  /* Type */
  --display: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Rythme */
  --pad-x: clamp(28px, 6vw, 120px);   /* marges latérales élargies */
  --maxw: 1280px;
  --section-y: 80px;

  /* Arrondis & ombres */
  --r:      18px;
  --r-sm:   12px;
  --r-pill: 999px;
  --shadow:    0 1px 2px rgba(20,22,30,.04), 0 10px 34px rgba(20,22,30,.07);
  --shadow-lg: 0 36px 70px -28px rgba(20,22,30,.28);
  --shadow-orange: var(--btn-ombre-survol);

  --ease: cubic-bezier(.22,.61,.36,1);
  --w-prose:68ch;
  --w-mid:1060px;
  /* Espacements : multiples de 4 et de 8 px */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  /* Rythme vertical, fonction de la largeur uniquement (80 / 96 / 104 px) */
  --section-y-tight:56px; --head-gap:40px;
  /* Trois largeurs de contenu */
  --w-large:var(--maxw); --w-moyen:880px; --w-texte:68ch;
  /* Échelle typographique */
  --fs-hero:clamp(2.6rem,7vw,6rem);
  --fs-h1:clamp(1.75rem,3vw,2.75rem);
  --fs-h2:clamp(1.6rem,3vw,2.55rem);
  --fs-h3:1.25rem;
  --fs-lede:clamp(1.05rem,1.4vw,1.28rem);
  --fs-body:17px;
  --fs-small:.875rem;
  --lh-titre:1.08; --lh-h3:1.25;
  /* Mouvement */
  --t-fast:160ms; --t:220ms; --t-lent:250ms;
  --t-reveal:600ms; --reveal-y:20px; --stagger:75ms;
}

@media (min-width:768px){:root{--section-y:96px;--section-y-tight:64px;--head-gap:48px}}

@media (min-width:1200px){:root{--section-y:104px;--section-y-tight:72px;--head-gap:72px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:
    radial-gradient(1000px 520px at 100% -6%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 26%);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---- Type ---- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:var(--lh-titre);letter-spacing:-.02em;margin:0;color:var(--ink)}
h1,h2,h3{text-wrap:balance}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.lede{text-wrap:pretty}
.display-1{font-size:var(--fs-hero);font-weight:900;line-height:1;letter-spacing:-.035em}
.display-2{font-size:clamp(2.1rem,5vw,3.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.display-3{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.02em;line-height:var(--lh-titre)}
.lede{font-size:var(--fs-lede);color:var(--mute);line-height:1.55;max-width:46ch}
p{margin:0 0 1em}

.eyebrow{
  font-family:var(--body);font-size:.86rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;
  display:block;margin:0 0 1rem;
}
/* filet retiré : accroche orange simple */

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section--tight{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
/* Deux sections de même fond qui se suivent : une seule marge entre elles */
.section:not(.paper):not(.deep)+.section:not(.paper):not(.deep),
.section.paper+.section.paper{padding-top:0}

/* Panneau clair tramé (ancien .paper) */
.paper{background:var(--bg-2);color:var(--ink)}
.paper .lede,.paper .ref{color:var(--mute)}

/* Section profonde (dégradé, jamais noir) */
.deep{background:var(--deep-grad);color:var(--bone)}
.deep .lede{color:var(--mute-deep)}
.deep h1,.deep h2,.deep h3,.deep h4{color:#fff}

/* ---- Boutons (arrondis pilule) ---- */
.btn{
  --bg:var(--orange);--fg:#fff;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--body);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:.95em 1.7em;border:1px solid transparent;border-radius:var(--r-pill);
  background-image:var(--btn-grad);color:var(--fg);cursor:pointer;
  text-shadow:var(--btn-texte-ombre);
  box-shadow:var(--btn-ombre);
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.btn svg{width:1em;height:1em;transition:transform .3s var(--ease)}
.btn:hover{background-image:var(--btn-grad-survol);box-shadow:var(--btn-ombre-survol);transform:translateY(-1px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn--ghost{background-image:none;background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow);font-weight:600;text-shadow:none}
/* Survol : fond vermillon et texte blanc, comme le bouton principal (jamais de texte orange sur fond orange) */
.btn--ghost:hover{background-image:var(--btn-grad-survol);border-color:transparent;color:#fff;text-shadow:var(--btn-texte-ombre);box-shadow:var(--btn-ombre-survol);transform:translateY(-1px)}
/* fantôme sur fond profond / image */
.hero .btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px);box-shadow:none}
.hero .btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
.btn--lg{padding:1.08em 2.1em;font-size:1.02rem}

.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:8px;
}

.textlink{
  font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em;
  border-bottom:1px solid var(--line);padding-bottom:.4em;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.textlink svg{width:.9em;height:.9em;transition:transform .3s var(--ease)}
.textlink:hover{color:var(--orange-deep);border-color:var(--orange)}
.textlink:hover svg{transform:translateX(3px)}
.deep .textlink,.spot__body .textlink{color:#fff;border-color:var(--line-deep)}
.deep .textlink:hover,.spot__body .textlink:hover{color:var(--orange-2);border-color:var(--orange)}

/* =======================================================================
   EN-TÊTE
   ======================================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s var(--ease),border-color .4s var(--ease),
             backdrop-filter .4s var(--ease),box-shadow .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -16px rgba(20,22,30,.3);
}
/* swap logo clair/sombre */

.nav{display:flex;align-items:center;gap:2.2rem}
.header .btn{font-size:.86rem;padding:.72em 1.3em}
.header .btn--ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none}
.header.is-stuck .btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.header.is-stuck .btn--ghost:hover{color:var(--orange-deep);border-color:var(--orange)}

.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;color:#fff;align-items:center;justify-content:center;position:relative;z-index:101}
.header.is-stuck .burger{color:var(--ink)}
.burger[aria-expanded="true"]{color:#fff}
.burger svg{width:26px;height:26px;transition:opacity .2s var(--ease)}
.burger[aria-expanded="true"] svg{opacity:0}
.burger[aria-expanded="true"]::before,.burger[aria-expanded="true"]::after{content:"";position:absolute;width:24px;height:2px;background:#fff;border-radius:2px;top:50%;left:50%}
.burger[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--deep-grad);
  transform:translateY(-100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;padding:calc(86px + env(safe-area-inset-top)) var(--pad-x) calc(34px + env(safe-area-inset-bottom));visibility:hidden;overflow-y:auto;
}
.mobile-menu.is-open{transform:translateY(0);visibility:visible}
.mobile-menu ul{list-style:none;margin:0 0 auto;padding:0}
.mobile-menu li{border-bottom:1px solid var(--line-deep)}
.mobile-menu li:first-child{border-top:1px solid var(--line-deep)}
.mobile-menu li a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem .15rem;font-family:var(--display);font-weight:700;font-size:1.42rem;letter-spacing:-.01em;color:#fff;transition:color .25s var(--ease),padding-left .25s var(--ease)}
.mobile-menu li a::after{content:"";flex:none;width:7px;height:7px;border-top:2px solid var(--mute-deep);border-right:2px solid var(--mute-deep);transform:rotate(45deg);transition:border-color .25s var(--ease)}
.mobile-menu li a:active{color:var(--orange-2);padding-left:.5rem}
.mobile-menu li a:active::after{border-color:var(--orange)}
@media (hover:hover){.mobile-menu li a:hover{color:var(--orange-2);padding-left:.5rem}.mobile-menu li a:hover::after{border-color:var(--orange)}}
.mobile-menu .btn{width:100%;justify-content:center;text-align:center;white-space:nowrap;font-size:1rem;padding:1.05em 1.4em}

/* =======================================================================
   HERO
   ======================================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(48px,8vh,120px);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,20,20,.5) 0%, rgba(20,20,20,.2) 32%, rgba(24,24,24,.82) 78%, var(--bg) 100%),
    linear-gradient(95deg, rgba(24,24,24,.8) 0%, rgba(24,24,24,.12) 62%);
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero h1{max-width:18ch;color:#fff}
.hero__sub{margin:1.8rem 0 2.6rem;max-width:50ch;font-size:clamp(1.05rem,1.4vw,1.28rem);color:rgba(255,255,255,.86)}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem}
/* Hero de sous-page (franchise) : photo plus visible, voile léger, texte blanc */
.hero--page .hero__media::after{
  background:
    linear-gradient(90deg, rgba(20,20,20,.6) 0%, rgba(20,20,20,.28) 36%, rgba(20,20,20,0) 64%),
    linear-gradient(180deg, rgba(20,20,20,.32) 0%, rgba(20,20,20,0) 26%, rgba(20,20,20,0) 56%, rgba(20,20,20,.46) 100%);
}
@media (max-width:720px){
  .hero--page .hero__media::after{
    background:linear-gradient(180deg, rgba(20,20,20,.6) 0%, rgba(20,20,20,.44) 26%, rgba(20,20,20,.52) 52%, rgba(20,20,20,.76) 100%);
  }
}

/* =======================================================================
   CONSTAT , chiffres
   ======================================================================= */
.constat__head{max-width:62ch;margin-bottom:clamp(48px,6vw,80px)}
.constat__head .display-3{margin-top:.4rem}
/* ---- Chiffres clés : cartes sobres, chiffre mesuré ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2.6rem}
.stat{
  position:relative;padding:2rem 1.9rem 1.9rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:0 1px 2px rgba(16,18,24,.03);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.stat__num::after{
  content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:var(--orange);margin-top:1rem;
}
.stat:hover{transform:translateY(-4px);border-color:rgba(254,89,0,.35);box-shadow:var(--shadow)}
.stat__num{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2rem,3.2vw,2.9rem);color:var(--ink);
}
.stat__num .u{display:inline;font-size:.42em;font-weight:700;letter-spacing:.02em}
.stat__label{margin-top:1rem;color:var(--mute);font-size:.95rem;line-height:1.55;max-width:32ch}
@media (max-width:900px){ .stats{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .stats{grid-template-columns:1fr} .stat{padding:1.6rem 1.5rem} }
.constat__foot{margin-top:2.4rem;color:var(--mute);max-width:70ch}
.constat__foot strong{color:var(--ink);font-weight:600}

/* =======================================================================
   MANIFESTE
   ======================================================================= */
.manifest{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,96px);align-items:start}
.manifest__statement{font-family:var(--display);font-weight:800;letter-spacing:-.025em;font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.08}
.manifest__statement em{color:var(--orange-deep);font-style:normal}
.manifest__body{color:var(--mute);font-size:1.05rem}
.manifest__body p{margin-bottom:1.1em}
/* Trois repères alignés, cartes discrètes plutôt que barres verticales */
.manifest__meta{
  margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.manifest__meta > div{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);padding:1.1rem 1.2rem;
}
.manifest__meta .k{
  font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;
  color:#fff;line-height:1;
}
.manifest__meta .v{
  font-size:.78rem;letter-spacing:.02em;text-transform:none;
  color:var(--mute-deep);margin-top:.45rem;
}

/* Appels à l'action */
.manifest__cta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.8rem}
.textlink--light{color:#fff}
.textlink--light:hover{color:var(--orange-2)}

.constat__cta{
  display:flex;align-items:center;justify-content:center;gap:1.6rem;flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,44px);
}

@media (max-width:880px){
  .manifest__meta{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .manifest__meta{grid-template-columns:1fr}
  .manifest__cta,.constat__cta{flex-direction:column;align-items:stretch}
  .manifest__cta .btn,.constat__cta .btn{width:100%;justify-content:center}
  .manifest__cta .textlink,.constat__cta .textlink{justify-content:center}
}

/* =======================================================================
   SOLUTIONS
   ======================================================================= */
.sec-head{display:grid;align-items:end;margin-bottom:var(--head-gap)}
.sec-head .lede{margin-top:0}
.sec-head > .textlink{align-self:end}
@media (max-width:880px){.sec-head{grid-template-columns:1fr}}
/* En-tête de section centré */
.sec-head--center{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s-5)}
.sec-head--center .sec-head__title{max-width:none}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center .sec-head__title h2{max-width:22ch;margin-inline:auto}
.sec-head--center .lede{justify-self:center;margin-left:auto;margin-right:auto;max-width:54ch;text-align:center}

.solutions{grid-template-columns:repeat(12,1fr);gap:18px}
.sol{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;min-height:300px;box-shadow:var(--shadow);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.sol:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line)}
.sol__media{position:relative;flex:1;min-height:180px;overflow:hidden;background:var(--bg-2)}
.sol__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-lent) var(--ease)}
.sol:hover .sol__media img{transform:scale(1.05)}
.sol__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,20,20,.28) 100%)}
.sol__body{padding:1.4rem 1.5rem 1.6rem;position:relative;z-index:1}
.sol__name{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.01em}
.sol__desc{color:var(--mute);font-size:.95rem;margin-top:.5rem;line-height:1.5}
.sol--md{grid-column:span 4}

/* =======================================================================
   SPOTLIGHT (safety room / bunker) , panneau profond
   ======================================================================= */
.spot{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg)}
.spot__media{position:relative;min-height:clamp(360px,52vh,600px);overflow:hidden;background:var(--bg-2)}
.spot__media img{width:100%;height:100%;object-fit:cover}
.spot__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.3),transparent 60%)}
.spot__body{padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:center;background:var(--deep-grad);color:var(--bone)}
.spot__body .eyebrow{color:var(--orange-2)}
.spot__body p{color:var(--mute-deep);max-width:42ch}

/* =======================================================================
   AUDIT (panneau clair)
   ======================================================================= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(32px,4vw,56px)}
.step{padding:2.2rem 2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);border-top:3px solid var(--orange)}
.step__n{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.8rem;letter-spacing:.04em;color:var(--orange-deep)}
.step__t{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.01em;margin:1rem 0 .8rem}
.step__d{color:var(--mute);font-size:.98rem}
.audit__cta{align-items:center;gap:1.4rem;flex-wrap:wrap}

/* =======================================================================
   CERTIFICATIONS
   ======================================================================= */

/* =======================================================================
   COUVERTURE + CARTE INTERACTIVE
   ======================================================================= */
.cover{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:center}
.cities{columns:2;column-gap:2rem;margin-top:1.4rem}
.cities .city{break-inside:avoid;padding:.7rem 0;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cities .city b{font-weight:600}
.cities .city span{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

.cover__panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-lg)}

/* Carte */
.geomap__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.geomap__toggle{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;gap:2px}
.geomap__toggle button{border:0;background:none;padding:.5em 1.25em;border-radius:var(--r-pill);font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--mute);cursor:pointer;transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s}
.geomap__toggle button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.geomap__stage{position:relative}
.geomap__map{display:none}
.geomap__map.is-active{display:block;animation:mapfade .5s var(--ease)}
@keyframes mapfade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.geomap svg{width:100%;height:auto;overflow:visible;display:block}
.geomap .region{fill:#EDEFF4;stroke:#FFFFFF;stroke-width:1;transition:fill .4s var(--ease)}
.geomap__map:hover .region{fill:#E6E9F1}
.geomap .pin{cursor:pointer}
.geomap .pin__hit{fill:transparent}
.geomap .dot{fill:var(--orange);stroke:#fff;stroke-width:2;transition:stroke-width .2s var(--ease)}
.geomap .pin:hover .dot{stroke-width:2.6}
/* anneau qui pulse , ancré sur son propre centre (corrige les cercles volants) */
.geomap .pin__ring{fill:none;stroke:var(--orange);stroke-width:2;opacity:.6;transform-box:fill-box;transform-origin:center;animation:pulse 2.6s var(--ease) infinite}
.geomap .pin__name{opacity:0;pointer-events:none;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:11px;font-weight:600;letter-spacing:.02em;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;transition:opacity .18s var(--ease)}
.geomap .pin:hover .pin__name{opacity:1}
.geomap .pin--hub .pin__name{opacity:1}
@keyframes pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.geomap .pin__ring{animation:none;opacity:0}.geomap__map.is-active{animation:none}}

/* =======================================================================
   BLOC ORANGE
   ======================================================================= */
/* le bloc orange vit dans une section : on l'enveloppe */

/* =======================================================================
   ACTUALITÉS
   ======================================================================= */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.news__item{padding:2rem 1.9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.news__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.news__date{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep)}
.news__title{font-family:var(--display);font-weight:800;font-size:1.28rem;letter-spacing:-.01em;margin:1rem 0 .8rem}
.news__excerpt{color:var(--mute);font-size:.95rem}
.news__item .textlink{margin-top:1.4rem;font-size:.7rem}

/* =======================================================================
   PIED DE PAGE (profond)
   ======================================================================= */
.footer{background:var(--deep-grad);color:var(--bone);padding-top:clamp(56px,7vw,96px);padding-bottom:2.4rem}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(32px,5vw,72px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line-deep)}
.footer__brand img{height:44px;width:auto;margin-bottom:1.4rem}
.footer__brand p{color:var(--mute-deep);max-width:34ch;font-size:.96rem}
.footer__social{display:flex;gap:.8rem;margin-top:1.6rem}
.footer__social a{width:42px;height:42px;border:1px solid var(--line-deep);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--mute-deep);transition:color .3s var(--ease),border-color .3s var(--ease),background .3s}
.footer__social a:hover{color:#fff;border-color:var(--orange);background:rgba(254,89,0,.16)}
.footer__social svg{width:18px;height:18px}
.footer__col h4{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-deep);margin-bottom:1.3rem}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col li{margin-bottom:.8rem}
.footer__col a,.footer__col address{color:var(--bone);font-style:normal;font-size:.96rem;line-height:1.5;display:block}
.footer__col a:hover{color:var(--orange-2)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-top:2rem}
.footer__bottom p{margin:0;color:var(--mute-deep);font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.7rem;letter-spacing:.04em}
.footer__bottom nav{display:flex;gap:1.6rem}
.footer__bottom nav a{color:var(--mute-deep);font-size:.82rem}
.footer__bottom nav a:hover{color:var(--orange-2)}

/* =======================================================================
   FRANCHISE
   ======================================================================= */

.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(32px,4vw,56px)}
.benefit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.benefit h3{font-family:var(--display)}
.benefit p{color:var(--mute);font-size:.94rem;margin:0}

.apply{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,3.5vw,44px);box-shadow:var(--shadow-lg)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field--full{grid-column:1 / -1}
.field label{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.field label .req{color:var(--orange-text)}
.field input,.field textarea{
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  font-family:var(--body);font-size:1rem;padding:.85em 1em;border-radius:var(--r-sm);width:100%;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(254,89,0,.12)}
.field textarea{resize:vertical;min-height:110px}
.field.has-error input,.field.has-error textarea{border-color:#E0502E}
.field__err{color:#C23B16;font-size:.8rem;min-height:1em;font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:.04em}
.form__submit{margin-top:1.6rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.form__legal{color:var(--faint);font-size:.78rem;max-width:34ch;line-height:1.45}

.hero--page{min-height:82svh;align-items:center;padding-bottom:0}
.hero--page .display-1{font-size:clamp(2.1rem,5vw,4.3rem)}
/* Halo sombre doux derrière le texte (gauche) pour le faire ressortir */
.hero--page .hero__inner::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-8%;top:50%;transform:translateY(-50%);width:64%;height:140%;
  background:radial-gradient(58% 52% at 30% 50%, rgba(14,12,10,.5) 0%, rgba(14,12,10,.26) 40%, rgba(14,12,10,0) 76%);
}
@media (max-width:720px){
  .hero--page .hero__inner::before{left:-12%;width:104%;background:radial-gradient(70% 54% at 44% 50%, rgba(14,12,10,.66) 0%, rgba(14,12,10,.38) 48%, rgba(14,12,10,0) 84%)}
}

/* =======================================================================
   BLOC PROFOND (offre / mise en avant) , même dégradé que le pied de page
   ======================================================================= */

/* Carte de prix posée sur fond profond */

/* Carte de prix lisible (modalités / offre de lancement) */

/* Surcharges quand une section porte la classe .deep */
.deep .manifest__body{color:var(--mute-deep)}
.deep .manifest__statement em{color:var(--orange-2)}
/* filet orange retiré : bordure uniforme */
.deep .manifest__meta .v{color:var(--mute-deep)}
.deep .cities .city{border-bottom-color:var(--line-deep)}
.deep .cities .city span{color:var(--mute-deep)}
.deep .constat__foot{color:var(--mute-deep)}
.deep .constat__foot strong{color:#fff}


/* Masque initial gate derriere .js : sans JavaScript, le contenu reste visible */
/* Apparitions au défilement (voir assets/js/app.js) :
   fondu et montée de 20 px sur 600 ms, une seule fois, cascade de 75 ms dans une même grille.
   Sans JavaScript, la classe .js est absente : tout reste visible. */
.js .reveal,.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-y));
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);
  transition-delay:calc(var(--i,0) * var(--stagger))}
.js .reveal.is-in,.js [data-reveal].is-in{opacity:1;transform:none}
.js .reveal.sans-anim,.js [data-reveal].sans-anim{transition:none}
.reveal[data-d="1"]{--i:1}
.reveal[data-d="2"]{--i:2}
.reveal[data-d="3"]{--i:3}
/* Rien ne s'anime au chargement : ce qui est à l'écran à l'ouverture s'affiche immédiatement,
   titre principal compris (décision du 28 septembre 2026). Seuls les blocs situés plus bas apparaissent. */
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}
@media (prefers-reduced-motion: reduce){
  .sol__media img,.btn,.textlink svg{transition:none}
  .hero__media img{transform:none !important}
}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media (max-width:1080px){
  .manifest{grid-template-columns:1fr;gap:2.4rem}
  .cover{grid-template-columns:1fr;gap:2.4rem}
  .apply{grid-template-columns:1fr;gap:2.4rem}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .sol--md{grid-column:span 6}
}
@media (max-width:880px){
  .burger{display:flex}
  .news{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .stats{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .spot{grid-template-columns:1fr}
  .spot__media{min-height:300px}
  .solutions{grid-template-columns:1fr}
  .sol--md{grid-column:span 1}
  .footer__top{grid-template-columns:1fr;gap:2.4rem}
  .benefits{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .cities{columns:1}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
}

/* =======================================================================
   AJOUTS , bouton gris, encart promo hero, modalités, offre de lancement
   ======================================================================= */
/* Bouton gris (hero) */

/* Encart promotionnel sous le bouton du hero */

/* Liste de modalités (carte sombre) */

/* Carte Offre de lancement */
/* filet orange retiré : bordure uniforme comme le reste du site */


/* Compléments d'en-têtes centrés (accueil) */
.sec-head--center > .textlink{justify-self:center;align-self:center}
.constat__head--center{max-width:64ch;margin-left:auto;margin-right:auto;text-align:center}
.constat__head--center .eyebrow{justify-content:center}
.constat__foot--center{text-align:center;margin-left:auto;margin-right:auto}

/* =======================================================================
   ACCUEIL , hero « maison interactive »
   Texte compact (l'image reste le sujet) + points cliquables ouvrant
   une fiche produit (titre, description, visuel, lien).
   ======================================================================= */
/* Voile très léger : la maison doit rester lisible */
.hero--home .hero__inner::before{display:block}
.hero--home .hero__inner{isolation:isolate}
.hero--home .hero__inner::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:0;
  transform:translateX(-50%);width:min(900px,100%);height:100%;
  background:radial-gradient(56% 48% at 50% 50%,rgba(12,12,14,.56) 0%,rgba(12,12,14,.32) 48%,rgba(12,12,14,0) 78%)}
/* Texte compact */
.hero--home .hero__inner{max-width:none}
.hero--home h1{font-size:clamp(1.9rem,3.1vw,3.05rem);line-height:1.05}
.hero--home .hero__sub{font-size:clamp(.98rem,1.05vw,1.08rem);color:rgba(255,255,255,.82)}
.hero--home .btn{font-size:.92rem;padding:.85em 1.5em}

/* --- Points interactifs --- */
.hotspot{
  position:absolute;transform:translate(-50%,-50%);
  width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.75);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.hotspot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--orange);transition:transform .3s var(--ease)}
/* halo qui pulse */
.hotspot::after{
  content:"";position:absolute;inset:-1.5px;border-radius:50%;
  border:1.5px solid var(--orange);opacity:.7;animation:hs-pulse 2.4s var(--ease) infinite;
}
.hotspot:hover,.hotspot:focus-visible{background:rgba(254,89,0,.28);border-color:#fff;transform:translate(-50%,-50%) scale(1.12)}
.hotspot[aria-expanded="true"]{background:var(--orange);border-color:#fff}
.hotspot[aria-expanded="true"]::after{animation:none;opacity:0}
.hotspot[aria-expanded="true"]::before{background:#fff;transform:scale(.85)}
@keyframes hs-pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.1);opacity:0}100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion: reduce){.hotspot::after{animation:none;opacity:0}}
/* étiquette au survol */

/* --- Fiche produit --- */
.hs-card__close{
  position:absolute;top:.7rem;right:.7rem;width:34px;height:34px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(20,20,20,.55);color:#fff;font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
  transition:background .25s var(--ease);
}
.hs-card__close:hover{background:rgba(20,20,20,.85)}

@media (max-width:900px){
  /* Mobile : la fiche devient un panneau bas, pleine largeur */
  .hotspot{width:30px;height:30px}
  .hero--home .hero__media::after{
    background:linear-gradient(180deg, rgba(20,20,20,.6) 0%, rgba(20,20,20,.3) 34%, rgba(20,20,20,.35) 60%, rgba(20,20,20,.72) 100%);
  }
}

.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}

/* ---- Landing concession : champs complémentaires ---- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field select{
  width:100%;padding:.95rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--surface);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field select:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(254,89,0,.16)}
.field.has-error select{border-color:#C62828}
.consent{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;font-size:.92rem;color:var(--mute);line-height:1.5}
.consent input{width:18px;height:18px;margin-top:.15rem;flex:none;accent-color:var(--orange)}
.form__error{
  margin-top:1rem;background:rgba(198,40,40,.07);border:1px solid rgba(198,40,40,.32);
  color:#9C2020;padding:.85rem 1rem;border-radius:var(--r-sm);font-size:.92rem;
}
.field label.consent{
  text-transform:none;letter-spacing:normal;font-family:var(--body);
  font-size:.92rem;font-weight:400;color:var(--mute);line-height:1.55;
}
.field label.consent .req{color:var(--orange-text)}

/* =========================================================================
   NAVBAR FLOTTANTE (remplace .header)
   Pilule vitrée détachée du haut, sous-menus déroulants, panneau mobile.
   ========================================================================= */
.hf-nav{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  width:min(1260px, calc(100% - 28px));z-index:120;
  border-radius:var(--r-pill);
  background:rgba(22,22,26,.58);
  -webkit-backdrop-filter:saturate(170%) blur(20px);
  backdrop-filter:saturate(170%) blur(20px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.65);
  transition:top .35s var(--ease),background .35s var(--ease),
             box-shadow .35s var(--ease),border-radius .35s var(--ease),
             width .35s var(--ease);
}
.hf-nav.is-stuck{
  top:10px;width:min(1180px, calc(100% - 20px));
  background:rgba(16,16,20,.86);
  box-shadow:0 14px 44px -20px rgba(0,0,0,.8);
}
.hf-nav__bar{display:flex;align-items:center;gap:1.4rem;height:68px;padding:0 .7rem 0 1.3rem;transition:height .35s var(--ease)}
.hf-nav.is-stuck .hf-nav__bar{height:60px}

.hf-brand{display:flex;align-items:center;flex:none}
.hf-brand img{height:34px;width:auto;transition:height .35s var(--ease)}
.hf-brand picture,.footer__brand picture{display:contents} /* le logo reste l'élément mis en page */
.hf-nav.is-stuck .hf-brand img{height:30px}

.hf-menu{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0 auto 0 .6rem;padding:0}
.hf-menu > li{position:relative}
.hf-link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.62rem .85rem;border-radius:var(--r-pill);
  font-family:var(--body);font-size:.92rem;font-weight:500;
  color:rgba(255,255,255,.82);background:none;border:0;cursor:pointer;
  transition:color .2s var(--ease),background .2s var(--ease);
  white-space:nowrap;
}
.hf-link:hover,.hf-link:focus-visible{color:#fff;background:rgba(255,255,255,.1);outline:none}
/* pastille d'etat retiree : le fond n'apparait qu'au survol */
.hf-link .chev{width:11px;height:11px;transition:transform .25s var(--ease);opacity:.75}
.hf-item.is-open > .hf-link{color:#fff;background:rgba(255,255,255,.12)}
.hf-item.is-open > .hf-link .chev{transform:rotate(180deg)}

/* ---- Panneau déroulant ---- */
.hf-drop{
  position:absolute;top:calc(100% + 12px);left:0;
  min-width:270px;padding:.6rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.hf-item.is-open > .hf-drop{opacity:1;visibility:visible;transform:translateY(0)}
.hf-drop--wide{display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.hf-drop a{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.62rem .75rem;border-radius:var(--r-sm);
  color:var(--ink-soft);font-size:.9rem;line-height:1.35;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.hf-drop a:hover{background:var(--orange-tint);color:var(--orange-deep)}
.hf-drop a b{display:block;font-weight:600;color:var(--ink);font-size:.92rem}
.hf-drop a:hover b{color:var(--orange-deep)}
.hf-drop a small{display:block;color:var(--faint);font-size:.78rem;margin-top:.12rem}
.hf-drop a .ic{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--orange-tint);color:var(--orange-deep);margin-top:.05rem;
}
.hf-drop a .ic svg{width:15px;height:15px}
.hf-drop__head{
  grid-column:1/-1;padding:.5rem .75rem .35rem;
  font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}

/* ---- Actions ---- */
.hf-actions{display:flex;align-items:center;gap:.55rem;flex:none}
.hf-nav .btn{font-size:.85rem;padding:.68em 1.25em;box-shadow:none}
.hf-nav .btn--ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.hf-nav .btn--ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff}

/* ---- Burger ---- */
.hf-burger{
  display:none;width:42px;height:42px;flex:none;margin-left:auto;
  background:none;border:0;cursor:pointer;position:relative;
}
.hf-burger span{
  position:absolute;left:50%;width:20px;height:2px;border-radius:2px;background:#fff;
  transform:translateX(-50%);transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.hf-burger span:nth-child(1){top:14px}
.hf-burger span:nth-child(2){top:20px}
.hf-burger span:nth-child(3){top:26px}
.hf-burger[aria-expanded="true"] span:nth-child(1){transform:translateX(-50%) translateY(6px) rotate(45deg)}
.hf-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hf-burger[aria-expanded="true"] span:nth-child(3){transform:translateX(-50%) translateY(-6px) rotate(-45deg)}

/* ---- Panneau mobile ---- */
.hf-panel{
  display:none;padding:.4rem .8rem 1rem;
  max-height:calc(100vh - 140px);overflow-y:auto;
  border-top:1px solid rgba(255,255,255,.1);margin-top:.2rem;
}
.hf-nav.is-open .hf-panel{display:block}
.hf-nav.is-open{border-radius:26px;background:rgba(14,14,18,.96)}
.hf-panel a,.hf-panel .hf-acc__btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:.85rem .6rem;color:rgba(255,255,255,.9);font-size:1rem;font-weight:500;
  background:none;border:0;border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer;font-family:var(--body);text-align:left;
}
.hf-panel a:hover,.hf-panel .hf-acc__btn:hover{color:var(--orange-2)}
.hf-acc__btn .chev{width:12px;height:12px;transition:transform .25s var(--ease)}
.hf-acc.is-open .hf-acc__btn .chev{transform:rotate(180deg)}
.hf-acc__body{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.hf-acc__body a{padding-left:1.4rem;font-size:.92rem;color:rgba(255,255,255,.7);font-weight:400}
.hf-panel__cta{display:grid;gap:.6rem;margin-top:1rem}
.hf-panel__cta .btn{width:100%;justify-content:center}

@media (max-width:1080px){
  .hf-menu,.hf-actions{display:none}
  .hf-burger{display:block}
  .hf-nav__bar{height:62px;padding:0 .5rem 0 1rem}
  .hf-nav.is-stuck .hf-nav__bar{height:58px}
}
@media (prefers-reduced-motion:reduce){
  .hf-nav,.hf-nav *{transition:none!important}
}

/* =========================================================================
   HERO INTERACTIF (points produits sur la façade)
   Direction A au survol (>=768px), fiche ancrée en dessous.
   ========================================================================= */

.hx__dot{
  position:absolute;left:0;top:0;
  width:44px;height:44px;transform:translate(-50%,-50%);
  display:grid;place-items:center;background:none;border:0;padding:0;
  cursor:pointer;z-index:6;-webkit-tap-highlight-color:transparent;
}
.hx__dot::before{
  content:"";width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--orange);
  box-shadow:0 2px 12px rgba(0,0,0,.45);
  transition:width .25s var(--ease),height .25s var(--ease);
}
.hx__dot::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(254,89,0,.85);animation:hxPulse 2.4s var(--ease) infinite;
}
@keyframes hxPulse{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(2.6);opacity:0}}
.hx__dot:hover::before,.hx__dot:focus-visible::before{width:19px;height:19px}
.hx__dot:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:50%}
.hx__dot[aria-expanded="true"]::before{width:19px;height:19px;background:var(--orange);border-color:#fff}
.hx__dot[aria-expanded="true"]::after{animation:none;transform:scale(2);opacity:.45}

/* ---- Bulle (desktop) ---- */
.hx__card{
  position:absolute;z-index:7;width:320px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
  backdrop-filter:saturate(170%) blur(16px);
  border:1px solid rgba(255,255,255,.75);border-radius:18px;
  box-shadow:0 28px 70px -26px rgba(8,10,16,.7);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  pointer-events:none;
}
.hx__card.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hx__thumb{width:100%;aspect-ratio:16/9;background:#EEF0F5;display:grid;place-items:center;
  border-bottom:1px solid var(--line);overflow:hidden}
.hx__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hx__thumb .hx__empty{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.hx__body{padding:15px 17px 17px}
.hx__title{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em;margin:0 0 5px;color:var(--ink)}
.hx__text{font-size:.87rem;color:var(--mute);margin:0 0 11px;line-height:1.5}
.hx__more{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--orange-deep)}
.hx__more svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.hx__more:hover svg{transform:translateX(3px)}

/* ---- Fiche ancrée (mobile) ---- */
.hx__panel{display:none}
@media (max-width:767.98px){
  .hx__card{display:none!important}
  .hx__panel{display:block;margin:14px auto 0;background:var(--surface);
    border:1px solid var(--line);border-radius:16px;overflow:hidden;
    box-shadow:0 12px 34px -22px rgba(12,14,20,.45)}
  .hx__panel[hidden]{display:none}
  .hx__panel-in{display:flex;gap:14px;padding:14px}
  .hx__panel .hx__thumb{width:88px;height:88px;aspect-ratio:auto;flex:none;
    border:1px solid var(--line);border-radius:12px}
  .hx__panel .hx__body{padding:0;min-width:0}
  .hx__dot::before,.hx__dot::after{width:12px;height:12px}
  .hx__dot[aria-expanded="true"]::before{width:15px;height:15px}
}

/* ---- Repli sans JavaScript ---- */
.hx__fallback{position:relative;z-index:5;margin:0;padding:0 var(--pad-x) 22px;
  list-style:none;display:flex;flex-wrap:wrap;gap:8px 14px}
.hx__fallback a{font-size:.88rem;color:#fff;text-decoration:underline}
.hx-js .hx__fallback{display:none}


/* ---- Grille produits ramenée à trois, plus le CTA global ---- */
.solutions--trio{grid-template-columns:repeat(3,1fr)}
.solutions--trio .sol{grid-column:auto!important;grid-row:auto!important}
.sol-cta{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  text-align:center;margin-top:clamp(36px,5vw,56px);
}
.sol-cta__txt{color:var(--mute);max-width:56ch;margin:0}
@media (max-width:900px){ .solutions--trio{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .solutions--trio{grid-template-columns:1fr} }

/* =========================================================================
   HERO ACCUEIL, image plein cadre et texte centré
   La hauteur du hero suit le ratio du visuel : l'image n'est jamais rognée
   et les marqueurs restent alignés sur la façade à toutes les largeurs.
   ========================================================================= */
.hero--home{
  min-height:0;height:auto;display:block;position:relative;
  padding:0;align-items:stretch;overflow:hidden;
}
.hero--home .hero__media{position:relative;inset:auto;width:100%;z-index:auto}
.hero--home .hero__media img{
  width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:16/9;
}
/* Voile sombre en haut pour la lisibilité du texte et de la navbar */
.hero--home .hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,
    rgba(10,11,15,.82) 0%, rgba(10,11,15,.62) 26%,
    rgba(10,11,15,.24) 48%, rgba(10,11,15,0) 66%);
}
/* Bloc de texte superposé, centré horizontalement, ancré en haut */
.hero--home .hero__inner{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:96px var(--pad-x);
  pointer-events:none;
}
.hero--home .hero__inner > *{pointer-events:auto}
.hero--home h1{max-width:16ch;margin:0 auto;color:#fff}
.hero--home .hero__sub{margin:1rem auto 1.8rem;max-width:44ch;text-align:center}
.hero--home .hero__cta{justify-content:center;position:relative;z-index:16}
.hero--home .hx__fallback{justify-content:center;padding-top:16px;padding-bottom:20px}


/* Une seule formulation à la fois, selon l'interaction disponible */


/* Indication du hero : lisible quelle que soit la zone de l'image */

/* =========================================================================
   CERTIFICATIONS, texte à gauche et échelle CR à droite
   ========================================================================= */
.certs-duo{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(32px,4vw,64px);align-items:center;
}
.certs-hl{color:var(--orange-text)}
.certs-duo__txt .btn{margin-top:1.8rem}



.certs-duo__fig{margin:0}
.certs-duo__fig img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.certs-duo__fig figcaption{
  margin-top:.9rem;font-size:.8rem;text-align:center;
}

@media (max-width:900px){
  .certs-duo{grid-template-columns:1fr;gap:32px}
  .certs-duo__fig{order:-1}
}

/* =========================================================================
   HERO ACCUEIL SUR SMARTPHONE
   Visuel plein écran, texte centré, boutons ancrés en bas.
   Les points interactifs sont réservés à l'ordinateur : sur un écran
   étroit ils encombrent la façade sans rien apporter.
   ========================================================================= */
@media (max-width:767.98px){
  .hero--home{
    display:block;position:relative;overflow:hidden;
  }
  .hero--home .hero__media{position:absolute;inset:0;height:100%;width:100%}
  .hero--home .hero__media img{
    width:100%;height:100%;aspect-ratio:auto;
    object-fit:cover;object-position:50% 34%;
  }
  .hero--home .hero__media::after{
    background:linear-gradient(180deg,
      rgba(10,11,15,.86) 0%, rgba(10,11,15,.60) 24%,
      rgba(10,11,15,.24) 44%, rgba(10,11,15,.30) 70%,
      rgba(10,11,15,.72) 100%);
  }

  /* Bloc unique : texte centré, boutons poussés en bas */
  .hero--home .hero__inner{
    position:absolute;inset:0;
    display:flex;flex-direction:column;justify-content:center;
    padding:calc(84px + env(safe-area-inset-top)) var(--pad-x)
            calc(28px + env(safe-area-inset-bottom));
    text-align:center;
  }
  .hero--home h1{
    font-size:clamp(1.9rem,8.4vw,2.6rem);max-width:14ch;line-height:1.06;
    margin:0 auto;
  }
  .hero--home .hero__sub{
    margin:.9rem auto 0;font-size:1rem;max-width:26ch;
    color:rgba(255,255,255,.88);
  }
  .hero--home .hero__cta{
    flex-direction:column;align-items:stretch;gap:10px;
    width:100%;max-width:320px;margin:1.7rem auto 0;
  }
  .hero--home .hero__cta .btn{width:100%;justify-content:center;font-size:.95rem;padding:.95em 1.4em}

}

/* Points interactifs et indication : réservés aux écrans à souris.
   En dessous, ils tombent dans le texte du hero sans rien apporter. */
@media (max-width:1199.98px){
  .hero--home .hx__dot{display:none!important}
}

/* Desktop intermédiaire : le hero est proportionnellement moins haut,
   on compacte le bloc texte pour qu'il reste au-dessus de la façade. */
@media (min-width:768px) and (max-width:1399.98px){
  .hero--home h1{font-size:clamp(1.7rem,3.6vw,2.5rem)}
  .hero--home .hero__sub{margin:.7rem auto 1.2rem;font-size:.98rem}
  .hero--home .hero__cta{gap:.6rem}
  .hero--home .hero__cta .btn{font-size:.88rem;padding:.78em 1.3em}
}

/* =========================================================================
   HERO ACCUEIL, cadrage resserré sur la maison
   Le hero est plus court que l'image : le bas (gravier, allée) est rogné
   et la maison occupe l'essentiel du cadre.
   ========================================================================= */
@media (min-width:768px){
  .hero--home{height:min(88svh,52vw);min-height:520px}
  .hero--home .hero__media{position:absolute;inset:0;height:100%;width:100%}
  .hero--home .hero__media img{
    width:100%;height:100%;aspect-ratio:auto;
    object-fit:cover;object-position:50% 34%;
  }
}

/* Bulle au-dessus de tout le contenu du hero, titre compris */
.hero--home .hx__card{z-index:60}
.hero--home .hx__dot{z-index:12}

/* Titre et boutons légèrement plus généreux sur ordinateur */
@media (min-width:1200px){
  .hero--home h1{font-size:clamp(2.6rem,4.1vw,3.9rem);max-width:17ch}
  .hero--home .hero__sub{font-size:1.12rem;max-width:46ch;margin-top:1.15rem}
  .hero--home .hero__cta{margin-top:2rem;gap:.9rem}
  .hero--home .hero__cta .btn{font-size:1rem;padding:1em 1.9em}
}

/* Le bloc texte est centré, mais légèrement remonté sur ordinateur :
   sans cela les boutons recouvrent la porte d'entrée aux largeurs
   où l'image est la plus zoomée. */
@media (min-width:1200px){
  .hero--home .hero__inner{padding-bottom:22vh}
}

/* =========================================================================
   PAGE PRODUIT : en-tête, blocs deux colonnes, galerie
   ========================================================================= */
.phero{padding:calc(128px + 4vh) 0 clamp(40px,5vw,72px);background:var(--bg-2)}
.phero .lede{margin-top:1.1rem}
.phero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}

.pduo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.pduo__fig{margin:0}
.pduo__fig img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow)}
.pduo__fig figcaption{margin-top:.8rem;font-size:.8rem}
.pduo h2{margin-bottom:1rem}
.pduo p + p{margin-top:.9rem}

.plist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.plist li{display:flex;gap:.7rem;align-items:flex-start;color:var(--mute);font-size:.97rem;line-height:1.55}
.plist li svg{width:18px;height:18px;color:var(--orange);flex:none;margin-top:.25rem}

/* Niveaux de protection */
.levels{display:grid;gap:.7rem;margin-top:2rem}
.level{display:grid;grid-template-columns:120px 1fr auto;gap:.4rem 1.2rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:1rem 1.2rem}
.level__n{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;grid-row:1/3}
.level__t{font-weight:600;font-size:.96rem}
.level__d{font-size:.86rem;color:var(--mute)}
.level__v{grid-row:1/3;font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.78rem;white-space:nowrap;text-align:right}

/* Galerie */

@media (max-width:900px){
  .pduo{grid-template-columns:1fr}
  .level{grid-template-columns:90px 1fr;}
  .level__v{grid-row:auto;grid-column:1/-1;text-align:left}
}

/* =========================================================================
   ENCART OFFRE CONCESSION sur la page franchise
   Volontairement plus sobre que la carte de l'offre principale :
   c'est une porte d'entrée, pas l'offre phare.
   ========================================================================= */

/* CTA de la section audit centré */
.audit__cta{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}

/* Certifications : accroche, titre et bouton centrés, texte courant à gauche */
/* Titre et bouton centrés sur toute la largeur de la section,
   texte et image en deux colonnes entre les deux. */
.certs-head{text-align:center;margin:0 auto clamp(32px,4vw,56px)}
.certs-head .eyebrow{display:block}
.certs-cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,52px)}

/* Lien d'évitement, visible uniquement au focus clavier */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:.9rem 1.4rem;border-radius:0 0 var(--r-sm) 0;
  font-weight:600;font-size:.92rem;
}
.skip:focus{left:0}

/* =========================================================================
   ACCESSIBILITÉ, contraste des petits textes (WCAG AA, seuil 4,5:1)
   L'orange de marque #FE5900 ne donne que 3,16:1 sur blanc : correct pour
   les grands titres (seuil 3:1) mais insuffisant en petite taille.
   Les petits textes orange utilisent donc --orange-text (5,02:1).
   ========================================================================= */
.eyebrow{color:var(--orange-text)}
.textlink{color:var(--orange-text)}
.stat__num .u{color:var(--orange-text)}
.certs-duo__fig figcaption,
.pduo__fig figcaption{color:var(--mute)}
.level__v{color:var(--mute)}

/* Sur fond sombre le rapport s'inverse : l'orange clair reste lisible */
.deep .eyebrow,.hero .eyebrow,.deep .textlink,.deep .claim,.deep .certs-hl,.rhero .crumb a{color:var(--orange-2)}
/* Sur fond sombre, les petits textes gris prennent le gris clair des sections profondes */
.deep .source-note,.deep figcaption{color:var(--mute-deep)}

/* Focus clavier visible sur tous les éléments interactifs */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--orange);outline-offset:3px;border-radius:4px;
}

/* Le menu principal annulait son propre contour de focus : rétabli */
.hf-link:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;
  background:rgba(255,255,255,.12);color:#fff;
}

/* =========================================================================
   PLACEHOLDERS DE VISUELS (en attente des photos définitives)
   ========================================================================= */

/* Bloc d'analyse en deux colonnes de texte */
.analyses{columns:2;column-gap:clamp(32px,4vw,64px)}
.analyses > article{break-inside:avoid;margin-bottom:2rem}
.analyses h3{margin-bottom:.6rem}
.analyses p{color:var(--mute);font-size:.96rem;line-height:1.6}
@media (max-width:860px){ .analyses{columns:1} }

/* Source discrète sous un bloc de chiffres */
.source-note{font-size:var(--fs-small);color:var(--faint);margin-top:1.4rem;text-align:center;max-width:74ch;margin-inline:auto}

/* Fil d'ariane */
.crumb{font-size:.84rem;color:var(--mute);margin-bottom:1.2rem}
.crumb a{color:var(--orange-text)}
.crumb a:hover{text-decoration:underline}
.crumb span[aria-hidden]{margin:0 .4rem;color:var(--faint)}

/* En-tête de page intérieure : titre plus mesuré que celui de l'accueil */
.phero h1{font-weight:800;font-size:var(--fs-h1);max-width:26ch;line-height:var(--lh-titre);margin-inline:auto}
/* Titres principaux longs (fenêtres, garage, grilles, persiennes) : trois lignes au plus en mobile */
@media (max-width:767px){ .phero h1.titre-long{font-size:min(var(--fs-h1),5.75vw)} }
.phero .lede{max-width:62ch;font-size:var(--fs-lede)}

/* Les enfants de grille ne doivent pas être bloqués par leur contenu */
.pduo > *,.certs-duo > *,.solutions > *,.stats > *,.benefits > *{min-width:0}
.plist li span{min-width:0;overflow-wrap:anywhere}
/* La hauteur minimale imposait une largeur via le ratio : neutralisée */
/* Titres de section courts : ne pas les casser inutilement */

/* =========================================================================
   ALIGNEMENT CENTRÉ, harmonisé sur tout le site
   En-tête de page et titres de section centrés, comme sur l'accueil.
   ========================================================================= */

/* En-tête de page intérieure */
.phero__in{max-width:var(--w-moyen);margin-inline:auto;text-align:center}
.phero__in .eyebrow{display:block}
.phero__in .lede{margin-inline:auto}
.phero__in .crumb{display:flex;justify-content:center;flex-wrap:wrap;gap:.1rem}
.phero__cta{justify-content:center}

/* Tous les en-têtes de section sont centrés par défaut */
.sec-head{
  grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s-5);
}
.sec-head__title{max-width:none}
.sec-head__title h1,.sec-head__title h2{max-width:24ch;margin-inline:auto}
.sec-head .eyebrow{display:block}
.sec-head .lede{margin-inline:auto;max-width:62ch;justify-self:center}
.sec-head > .textlink{justify-self:center}

/* Titres des blocs deux colonnes : centrés au-dessus du contenu de leur colonne */
.pduo > div > .eyebrow,
.pduo > div > h2{text-align:center}
.pduo > div > h2{max-width:24ch;margin-inline:auto}

@media (max-width:880px){
  .sec-head > .textlink{justify-self:center}
}

/* =========================================================================
   CATALOGUE PRODUITS : cartes strictement identiques
   flex:1 sur le média entrait en conflit avec le ratio, d'où des hauteurs
   d'image différentes selon que la carte portait une photo ou un texte.
   ========================================================================= */
.solutions--trio{align-items:stretch}
.solutions--trio .sol{display:flex;flex-direction:column}
.solutions--trio .sol__media{
  flex:none;aspect-ratio:4/3;min-height:0;width:100%;
  display:grid;place-items:center;
}
.solutions--trio .sol__media img,
.solutions--trio .sol__media picture{width:100%;height:100%;display:block}
.solutions--trio .sol__media img{object-fit:cover}
.solutions--trio .sol__body{flex:1;display:flex;flex-direction:column}
.solutions--trio .sol__desc{margin-top:.45rem}

/* En-tête de la page catalogue : plus d'air sous la navbar */
.section--catalogue{padding-top:calc(132px + 4vh)}

/* ---- Recherche de produit ---- */
.psearch{max-width:620px;margin:0 auto clamp(32px,4vw,52px);position:relative}
.psearch__field{position:relative;display:flex;align-items:center}
.psearch__field svg{position:absolute;left:1.1rem;width:19px;height:19px;color:var(--faint);pointer-events:none}
.psearch input{
  width:100%;padding:1rem 3rem 1rem 3rem;border:1px solid var(--line);
  border-radius:var(--r-pill);font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--surface);box-shadow:0 1px 2px rgba(16,18,24,.04);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.psearch input::placeholder{color:var(--faint)}
.psearch input:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(254,89,0,.15)}
.psearch__clear{
  position:absolute;right:.6rem;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--bg-2);color:var(--mute);cursor:pointer;display:none;place-items:center;font-size:1.1rem;line-height:1;
}
.psearch__clear.is-on{display:grid}
.psearch__clear:hover{background:var(--line);color:var(--ink)}
.psearch__tags{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.9rem}
.psearch__tag{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);
  padding:.42rem .85rem;font-size:.82rem;color:var(--mute);cursor:pointer;font-family:var(--body);
  transition:border-color .2s,color .2s,background .2s;
}
.psearch__tag:hover,.psearch__tag[aria-pressed="true"]{border-color:var(--orange);color:var(--orange-text);background:var(--orange-tint)}
.psearch__count{text-align:center;font-size:.88rem;color:var(--mute);margin-top:1rem;min-height:1lh} /* hauteur réservée : le texte arrive par le script */
.psearch__empty{text-align:center;padding:3rem 1rem;color:var(--mute)}
.psearch__empty strong{display:block;font-size:1.1rem;color:var(--ink);margin-bottom:.5rem}
.sol[hidden]{display:none!important}
/* Toutes les rangées à la même hauteur, pas seulement à l'intérieur d'une rangée */
.solutions--trio{grid-auto-rows:1fr}

/* =========================================================================
   PAGES LÉGALES : lecture longue, hiérarchie claire
   ========================================================================= */
/* Pages légales : sommaire à gauche, contenu à droite, texte aligné à gauche */
.legal{max-width:1180px;margin-inline:auto;text-align:left;
  padding-inline:clamp(28px,7vw,140px)}
.legal__intro-zone{max-width:72ch;margin:0 auto clamp(32px,4vw,52px);text-align:center}
.legal__intro-zone .legal__maj{margin-bottom:1.6rem}
.legal__grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(32px,4.4vw,80px);align-items:start}
.legal__aside{position:sticky;top:110px}
.legal__body > section:first-child{margin-top:0}
@media (max-width:980px){
  .legal__grid{grid-template-columns:1fr;gap:0}
  .legal__aside{position:static;margin-bottom:1.5rem}
  .legal__body{max-width:none}
}
.legal__maj{
  display:inline-block;font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.45rem .9rem;margin-bottom:2rem;
}
.legal__intro{color:var(--mute);font-size:1.02rem;line-height:1.7}
.legal__intro p + p{margin-top:.9rem}

.legal section{margin-top:clamp(40px,5vw,64px);scroll-margin-top:110px}
.legal h2{
  font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.02em;
  padding-bottom:.7rem;border-bottom:2px solid var(--line);margin-bottom:1.2rem;
}
.legal h2 .num{color:var(--orange-text);font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600;font-size:.78em;margin-right:.6rem}
.legal h3{margin:1.6rem 0 .6rem}
.legal p{color:var(--mute);line-height:1.75;font-size:.98rem}
.legal p + p{margin-top:.9rem}
.legal a{color:var(--orange-text);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--orange-deep)}

/* Liste de coordonnées */
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;margin:1.1rem 0 0}
.legal dt{font-weight:600;color:var(--ink);font-size:.95rem}
.legal dd{margin:0;color:var(--mute);font-size:.97rem}
@media (max-width:560px){
  .legal dl{grid-template-columns:1fr;gap:.2rem}
  .legal dd{margin-bottom:.7rem}
}

.legal ul{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem}
.legal ul li{display:flex;gap:.7rem;color:var(--mute);font-size:.97rem;line-height:1.6}
.legal ul li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-top:.62rem}

/* Encart d'information à compléter */

/* Sommaire */
.legal__toc{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;margin:0}
.legal__toc h2{font-size:.8rem;font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);border:0;padding:0;margin:0 0 .9rem}
.legal__toc ol{margin:0;padding-left:1.1rem;display:grid;gap:.5rem;color:var(--mute);font-size:.88rem;line-height:1.4}
.legal__toc a{color:var(--ink-soft);text-decoration:none}
.legal__toc a:hover{color:var(--orange-text);text-decoration:underline}

/* Tableau des durées de conservation et des cookies */
.legal__table{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.93rem}
.legal__table th,.legal__table td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.legal__table th{font-weight:600;color:var(--ink);background:var(--bg-2);font-size:.88rem}
.legal__table td{color:var(--mute);line-height:1.55}
.legal__table tr:last-child td{border-bottom:0}
.legal__wrapx{-webkit-overflow-scrolling:touch;overflow-x:auto}
@media (max-width:620px){
  .legal__table{min-width:520px}
}
/* Encart d'alerte, plus fort que l'encart "à compléter" */
/* Les tableaux larges doivent défiler dans leur cadre, pas pousser la page */
.legal__grid > *{min-width:0}
.legal__body,.legal__wrapx{min-width:0;max-width:100%}

/* =========================================================================
   BANDEAU DE CONSENTEMENT AUX TRACEURS
   ========================================================================= */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  padding:0 clamp(12px,2vw,24px) clamp(12px,2vw,24px);
  opacity:0;transform:translateY(16px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  pointer-events:none;
}
.cookie.is-on{opacity:1;transform:none;pointer-events:auto}
.cookie__box{
  max-width:760px;margin-inline:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 24px 60px -20px rgba(12,14,20,.35);
  padding:clamp(20px,2.6vw,28px);
}
.cookie__head h2{font-size:1.1rem;letter-spacing:-.02em;margin-bottom:.6rem}
.cookie__head p{color:var(--mute);font-size:.92rem;line-height:1.6;margin:0}
.cookie__head a{color:var(--orange-text);text-decoration:underline}

.cookie__opts{display:grid;gap:.7rem;margin-top:1.2rem}
.cookie__opt{
  display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem 1rem;
  transition:border-color .2s var(--ease);
}
.cookie__opt:hover{border-color:var(--orange)}
.cookie__opt input{width:18px;height:18px;margin-top:.15rem;flex:none;accent-color:var(--orange)}
.cookie__opt b{display:block;font-size:.94rem;color:var(--ink)}
.cookie__opt small{display:block;color:var(--mute);font-size:.85rem;line-height:1.5;margin-top:.2rem}

.cookie__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.cookie__actions .btn{flex:1 1 auto;justify-content:center;font-size:.9rem;padding:.8em 1.2em}
.cookie__actions--perso .btn{flex:1 1 100%}

@media (max-width:560px){
  .cookie__actions{flex-direction:column}
  .cookie__actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cookie{transition:none}
}
/* L'attribut hidden doit primer sur les display de disposition */
.cookie [hidden]{display:none!important}

/* Lien de tête dans les accordéons du menu mobile */
.hf-acc__lead{
  font-weight:600!important;color:var(--orange-2)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
}
.hf-acc__lead::after{content:"\2192";margin-left:.5rem;font-weight:400}

/* Entrée « Voir tous nos produits » en pied de méga-menu */
.hf-drop__all{
  grid-column:1/-1;display:flex!important;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.45rem;padding:.8rem .75rem;
  border-top:1px solid var(--line);border-radius:0 0 var(--r-sm) var(--r-sm);
  font-weight:600;font-size:.9rem;color:var(--orange-deep)!important;background:var(--orange-tint);
  transition:background .18s var(--ease);
}
.hf-drop__all:hover{background:rgba(254,89,0,.16)}
.hf-drop__all svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.hf-drop__all:hover svg{transform:translateX(3px)}

/* =========================================================================
   PAGE CONTACT
   ========================================================================= */
.contact-duo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,4vw,64px);align-items:start}
@media (max-width:940px){ .contact-duo{grid-template-columns:1fr} }

.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.6rem;margin-bottom:1rem}
.ccard h3{margin-bottom:.9rem;
  display:flex;align-items:center;gap:.6rem}
.ccard h3 .ic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--orange-tint);color:var(--orange-deep)}
.ccard h3 .ic svg{width:17px;height:17px}
.ccard p{color:var(--mute);font-size:.95rem;line-height:1.6;margin:0}
.ccard p + p{margin-top:.5rem}
.ccard a{color:var(--orange-text);text-decoration:none;font-weight:600}
.ccard a:hover{text-decoration:underline}
.ccard__big{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}

/* Réassurance sous le formulaire */
.crea{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(36px,4vw,56px)}
.crea div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.1rem 1.2rem}
.crea b{display:block;font-size:.95rem;color:var(--ink);margin-bottom:.3rem}
.crea span{color:var(--mute);font-size:.88rem;line-height:1.5}
@media (max-width:800px){ .crea{grid-template-columns:1fr} }

/* Accroche publicitaire au-dessus du rappel final */
.claim{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.05rem,2vw,1.4rem);color:var(--orange-text);
  margin:0 auto .9rem;max-width:28ch;
}

/* Le sous-menu « Nous rejoindre » : la ligne de prix ne doit pas se couper.
   Règle limitée aux menus simples : le méga-menu Produits garde sa largeur. */
.hf-drop:not(.hf-drop--wide){min-width:288px}
.hf-drop:not(.hf-drop--wide) a small{white-space:nowrap}
.hf-drop--wide{min-width:600px}

/* =========================================================================
   BLOG : liste d'articles et page article
   ========================================================================= */

/* ---- En-tête d'article ---- */
.art{max-width:1180px;margin-inline:auto;padding-inline:clamp(28px,7vw,140px)}
.art__head{max-width:760px;margin-inline:auto;text-align:center}
.art__cat{display:inline-block;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--orange-deep);
  background:var(--orange-tint);border-radius:var(--r-pill);padding:.4rem .85rem;margin-bottom:1.2rem}
.art__head h1{font-size:var(--fs-h1);line-height:var(--lh-titre);letter-spacing:-.03em;margin-inline:auto}
h1.display-2{font-size:var(--fs-h1);line-height:var(--lh-titre);max-width:26ch;margin-inline:auto}
.art__chapo{color:var(--mute);font-size:var(--fs-lede);line-height:1.65;margin:1.2rem auto 0;max-width:62ch}
.art__meta{display:flex;justify-content:center;align-items:center;gap:.55rem;flex-wrap:wrap;
  margin-top:1.6rem;font-size:.86rem;color:var(--faint)}
.art__meta .sep{width:3px;height:3px;border-radius:50%;background:var(--faint);display:inline-block}
.art__meta strong{color:var(--ink-soft);font-weight:600}

/* ---- Corps ---- */
.art__grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(32px,4.4vw,80px);
  align-items:start;margin-top:clamp(40px,5vw,64px)}
.art__aside{position:sticky;top:110px}
.art__body h2{font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.02em;
  margin:2.6rem 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--line);scroll-margin-top:110px}
.art__body h3{margin:1.9rem 0 .6rem}
.art__body p{color:var(--mute);line-height:1.8;font-size:1rem}
.art__body p + p{margin-top:1rem}
.art__body a{color:var(--orange-text);text-decoration:underline;text-underline-offset:2px}
.art__body a:hover{color:var(--orange-deep)}
.art__body ul{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.65rem}
/* Puce en bloc, pastille posée en absolu : le texte et ses passages en gras restent sur les mêmes lignes */
.art__body ul li{position:relative;padding-left:calc(6px + .75rem);color:var(--mute);font-size:.99rem;line-height:1.7}
.art__body ul li::before{content:"";position:absolute;left:0;top:.72rem;width:6px;height:6px;border-radius:50%;
  background:var(--orange)}
.art__body strong{color:var(--ink)}

/* Encart de mise en avant */
.art__key{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1.2rem 1.4rem;margin:1.8rem 0}
.art__key p{margin:0;color:var(--ink-soft);font-size:.98rem}

/* ---- Sommaire ---- */
.art__toc{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem}
.art__toc h2{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .9rem;border:0;padding:0}
.art__toc ol{margin:0;padding-left:1.1rem;display:grid;gap:.5rem;font-size:.88rem;line-height:1.4}
.art__toc a{color:var(--ink-soft);text-decoration:none}
.art__toc a:hover{color:var(--orange-text);text-decoration:underline}

/* ---- Sources, étiquettes, méthode ---- */
.art__sources{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.art__sources h2{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);border:0;padding:0;margin:0 0 1rem}
.art__sources ol{margin:0;padding-left:1.2rem;display:grid;gap:.7rem;font-size:.88rem;color:var(--mute)}
.art__sources b{display:block;color:var(--ink-soft);font-weight:600}
.art__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.art__tags span{border:1px solid var(--line);border-radius:var(--r-pill);padding:.35rem .8rem;
  font-size:.8rem;color:var(--mute);background:var(--surface)}
.art__method{margin-top:1.6rem;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:1rem 1.2rem;font-size:.88rem;color:var(--mute);line-height:1.65}
.art__method strong{color:var(--ink)}

/* ---- Liste d'articles ---- */
.posts{grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(32px,4vw,52px);grid-auto-rows:1fr}
.post{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(254,89,0,.35)}
.post__cat{font-family:var(--body);font-variant-numeric:tabular-nums;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--orange-deep)}
.post h2{letter-spacing:-.02em}
.post h2 a{color:var(--ink);text-decoration:none}
.post:hover h2 a{color:var(--orange-deep)}
.post p{color:var(--mute);font-size:.94rem;line-height:1.6;flex:1}
.post__meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--faint)}
.post__meta .sep{width:3px;height:3px;border-radius:50%;background:var(--faint)}
@media (max-width:820px){ .posts{grid-template-columns:1fr} }

/* ---- Articles liés ---- */
.related{margin-top:clamp(48px,6vw,80px);padding-top:2rem;border-top:1px solid var(--line)}
.related > h2{font-size:1.2rem;margin-bottom:1.2rem}

@media (max-width:980px){
  .art__grid{grid-template-columns:1fr;gap:0}
  .art__aside{position:static;margin-bottom:1.8rem}
}
/* Respiration après une liste dans un article */
.art__body ul + p,.art__body ul + h2,.art__body ul + h3{margin-top:1.4rem}
.art__body ul + h2{margin-top:2.6rem}

/* Questions fréquentes en fin d'article */
.faql{display:grid;gap:.7rem;margin-top:1.2rem}
.faqi{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.1rem 1.3rem}
.faqi h3{margin:0 0 .45rem;color:var(--ink)}
.faqi p{margin:0;font-size:.94rem;line-height:1.65}

/* Liste d'actualités : trois par ligne, carte entièrement cliquable */
.posts--trois{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
/* Toute carte d'article est cliquable sur l'ensemble de sa surface.
   Le lien du titre porte la zone, ce qui garde le texte sélectionnable. */
.post{position:relative}
.post:has(h2 a){cursor:pointer}
.post h2 a::after{content:"";position:absolute;inset:0}
.post[hidden]{display:none!important}
@media (max-width:1000px){ .posts--trois{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .posts--trois{grid-template-columns:1fr} }
/* Les tableaux des articles défilent dans leur cadre sans pousser la page */
.art__grid > *,.art__body{min-width:0;max-width:100%}
.art__body .legal__wrapx{min-width:0;max-width:100%;overflow-x:auto}
@media (max-width:980px){ .art__body{max-width:100%} }

/* Le navigateur ajoute sa propre croix sur les champs de recherche :
   on la masque, le bouton d'effacement du site suffit. */
.psearch input[type="search"]::-webkit-search-cancel-button,
.psearch input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.psearch input[type="search"]{appearance:none}

/* Cartes d'article plus larges que hautes : extrait limité et marges resserrées */
.post{padding:1.25rem 1.35rem}
.post h2{font-size:1.02rem;line-height:1.32;margin-bottom:.45rem}
.post__cat{margin-bottom:.5rem;font-size:.62rem}
/* Extrait : hauteur figée sur un nombre entier de lignes pour qu'aucune
   ligne ne soit coupée en deux, même dans une carte à hauteur uniforme. */
.post > p:not(.post__cat):not(.post__meta){
  flex:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.9rem;line-height:1.5;
  height:calc(.9rem * 1.5 * 3);
}
/* Le titre est lui aussi borné, pour que les cartes restent comparables */
.post h2{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* La date reste collée en bas quelle que soit la longueur du titre */
.post__meta{margin-top:auto;padding-top:.9rem}
.posts--trois .post__meta{margin-top:.9rem;font-size:.78rem}

/* =========================================================================
   PAGE PRESSE
   ========================================================================= */
/* Deux fiches côte à côte, le logo au-dessus du texte dans chaque fiche */
.press{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin-top:clamp(32px,4vw,52px);align-items:stretch}
.pitem{
  display:flex;flex-direction:column;gap:.9rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2vw,26px);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);position:relative;
}
.pitem > div:last-child{display:flex;flex-direction:column;flex:1;min-height:0}
.pitem__head{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  padding-bottom:.85rem;border-bottom:1px solid var(--line)}
@media (max-width:880px){ .press{grid-template-columns:1fr} }
.pitem:hover{border-color:rgba(254,89,0,.35);box-shadow:var(--shadow)}
.pitem__date{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint)}
.pitem__tag{display:inline-block;background:var(--orange-tint);color:var(--orange-deep);
  border-radius:var(--r-pill);padding:.3rem .7rem;font-size:.7rem;font-weight:700}
.pitem h3{line-height:1.35;margin-bottom:.55rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pitem h3 a{color:var(--ink);text-decoration:none}
.pitem:hover h3 a{color:var(--orange-deep)}
.pitem p{color:var(--mute);font-size:.92rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:calc(.92rem * 1.55 * 2)}
.pitem p + p{margin-top:.6rem}
.pitem blockquote{margin:1rem 0 0;padding-left:1rem;border-left:2px solid var(--line);
  font-style:italic;color:var(--ink-soft);font-size:.98rem}
.pitem__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.9rem;
  font-weight:600;font-size:.9rem;color:var(--orange-text);text-decoration:none}
.pitem__more:hover{text-decoration:underline}
.pitem__more svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.pitem__more:hover svg{transform:translateX(3px)}


.presskit{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,36px);margin-top:clamp(36px,4vw,56px);text-align:center}
.presskit h2{font-size:1.25rem;margin-bottom:.7rem}
.presskit p{color:var(--mute);max-width:56ch;margin:0 auto}
.presskit .btn{margin-top:1.4rem}
/* Logos des médias sur la page presse */
.pitem__logo{display:block;max-width:112px;flex:none}
.pitem__logo img{width:100%;height:auto;display:block;
  filter:grayscale(1);opacity:.75;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.pitem:hover .pitem__logo img{filter:none;opacity:1}
@media (max-width:760px){ .pitem__logo{max-width:120px} }
/* Étiquette distincte pour les contenus partenaires */
.pitem__tag--part{background:var(--bg-2);color:var(--mute);border:1px solid var(--line)}

/* Fiche presse entièrement cliquable : le lien du titre couvre la carte.
   Le lien de lecture repasse au-dessus pour rester distinct au survol. */
.pitem:has(h3 a){cursor:pointer}
.pitem h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pitem__more{position:relative;z-index:2}
.pitem__logo,.pitem__head{position:relative;z-index:2}

/* Alignement optique des icônes de bouton : le centre géométrique tombe
   légèrement au-dessus du centre visuel des capitales. */
.btn svg,.textlink svg,.hf-drop__all svg,.pitem__more svg{position:relative;top:1px}
.btn svg{flex:none}

/* Bande d'appel à l'action intercalée dans une page produit */
.inline-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
}
.inline-cta p{margin:0;color:var(--ink-soft);font-weight:600}
@media (max-width:680px){
  .inline-cta{flex-direction:column;align-items:stretch;text-align:center}
  .inline-cta .btn{justify-content:center}
}
/* Cartes de liens croisés, sans visuel */
.solutions--liens .sol__body{padding:1.2rem 1.3rem}
.solutions--liens .sol__name{margin:0}
/* « Sur le même sujet » occupe toute la largeur de l'article */
.art > .related{margin-top:clamp(48px,6vw,80px);padding-top:2rem;border-top:1px solid var(--line)}
.art > .related > h2{font-size:1.2rem;margin-bottom:1.2rem}
/* La grille s'adapte au nombre d'articles liés : deux cartes occupent
   toute la largeur au lieu de laisser une colonne vide. */
.art > .related .posts{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

/* =========================================================================
   PAGES RECRUTEMENT : offre de démarrage
   ========================================================================= */
.offre{
  max-width:780px;margin-inline:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(26px,3.2vw,42px);text-align:center;box-shadow:var(--shadow);
}
.offre__eb{display:inline-block;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--orange-deep);
  background:var(--orange-tint);border-radius:var(--r-pill);padding:.4rem .9rem;margin-bottom:1.4rem}
.offre__prix{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.6rem,6vw,4.2rem);color:var(--ink)}
.offre__prix .u{font-size:.3em;font-weight:700;letter-spacing:.02em;margin-left:.25em;color:var(--mute)}
.offre__sous{color:var(--mute);font-size:1rem;margin-top:.9rem;max-width:52ch;margin-inline:auto}
.offre__inc{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:1.8rem 0 0;
  padding:1.6rem 0 0;border-top:1px solid var(--line);list-style:none;text-align:left}
.offre__inc li{display:flex;gap:.7rem;font-size:.95rem;color:var(--ink-soft);line-height:1.5}
.offre__inc li svg{width:17px;height:17px;flex:none;margin-top:.15rem;color:var(--orange)}
.offre__cta{margin-top:1.8rem}
@media (max-width:620px){ .offre__inc{grid-template-columns:1fr} }

/* Les quatre conditions de démarrage */

/* Évolution vers la gamme complète */

/* Étapes du parcours */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(28px,3.4vw,44px);
  counter-reset:e}
.etapes article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1.3rem 1.4rem;counter-increment:e}
.etapes article::before{content:counter(e,decimal-leading-zero);display:block;
  font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.72rem;letter-spacing:.04em;color:var(--orange-deep);margin-bottom:.7rem}
.etapes h3{margin-bottom:.4rem}
.etapes p{color:var(--mute);font-size:.9rem;line-height:1.55}
@media (max-width:900px){ .etapes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .etapes{grid-template-columns:1fr} }

/* =========================================================================
   FAQ EN ACCORDÉON, sur balise <details> : aucun JavaScript requis,
   accessible au clavier et ouvrable par le navigateur pour la recherche.
   ========================================================================= */
.faql{max-width:var(--w-moyen);margin-inline:auto}
details.faqi{padding:0;overflow:hidden}
details.faqi + details.faqi{margin-top:.6rem}
details.faqi > summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.2rem;padding:1.05rem 1.25rem;font-weight:700;font-size:.98rem;color:var(--ink);
  transition:color .2s var(--ease);
}
details.faqi > summary::-webkit-details-marker{display:none}
details.faqi > summary:hover{color:var(--orange-deep)}
details.faqi > summary:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:var(--r-sm)}
.faqi__ico{flex:none;width:20px;height:20px;position:relative;margin-top:.15rem;transition:transform .3s var(--ease)}
.faqi__ico::before,.faqi__ico::after{content:"";position:absolute;background:var(--orange);
  top:50%;left:50%;border-radius:2px;transition:transform .3s var(--ease)}
.faqi__ico::before{width:15px;height:2px;transform:translate(-50%,-50%)}
.faqi__ico::after{width:2px;height:15px;transform:translate(-50%,-50%)}
details.faqi[open] .faqi__ico::after{transform:translate(-50%,-50%) scaleY(0)}
details.faqi > div{padding:0 1.25rem 1.2rem}
details.faqi > div p{margin:0;color:var(--mute);font-size:.94rem;line-height:1.7}
@media (prefers-reduced-motion:reduce){ .faqi__ico,.faqi__ico::before,.faqi__ico::after{transition:none} }

/* Formulaire de candidature : plus large sur grand écran */
.wrap--form{max-width:980px;padding-inline:clamp(28px,3.2vw,44px)}
/* Titre certifications : tenir sur une seule ligne tant que la place le permet */
@media (max-width:900px){ .certs-title,.certs-title .certs-hl{white-space:normal} }
/* Phrases dont la coupure est maîtrisée : on neutralise le retour forcé
   quand la place manque, pour ne pas créer de débordement. */
.nowrap-line{display:inline-block}
@media (max-width:700px){ .nowrap-line{display:inline} }
.claim br{display:inline}
@media (min-width:560px){ .claim br{display:block} }

/* Hero d'accueil sur mobile : un écran de téléphone est bien plus étroit
   que le visuel. Réduire la hauteur limite le rognage latéral et garde
   la façade entière visible. */

/* Bloc focus sur fond clair : la carte reste blanche, le texte reprend
   les couleurs courantes du site. */
.spot-light .spot{border:1px solid var(--line);box-shadow:var(--shadow)}
.spot-light .spot__body{background:var(--surface);color:var(--ink)}
.spot-light .spot__body .eyebrow{color:var(--orange-text)}
.spot-light .spot__body h2{color:var(--ink);margin:.45rem 0 1.1rem}
.spot-light .spot__body p{color:var(--mute)}
.spot-light .spot__body .textlink{color:var(--orange-text);margin-top:1.5rem;align-self:flex-start}
.spot-light .spot__body .textlink:hover{color:var(--orange-deep)}
.spot-light .spot__media::after{background:none}
/* Carte d'actualité de l'accueil : toute la surface est cliquable */
.news__item--link{position:relative;cursor:pointer}
.news__item--link .news__title a{color:inherit;text-decoration:none}
.news__item--link .news__title a::after{content:"";position:absolute;inset:0}
.news__item--link:hover .news__title a{color:var(--orange-deep)}
.news__item--link .textlink{pointer-events:none}

/* =========================================================================
   PAGES PRODUIT ÉTOFFÉES : modèles, gammes de panneaux, risques
   ========================================================================= */
.modeles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(28px,3.4vw,44px)}
.modele{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}
.modele__cr{display:inline-block;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.68rem;letter-spacing:.04em;font-weight:600;
  color:var(--orange-deep);background:var(--orange-tint);border-radius:var(--r-pill);padding:.32rem .7rem;margin-bottom:.8rem}
.modele h3{margin-bottom:.4rem}
.modele p{color:var(--mute);font-size:.9rem;line-height:1.55}
@media (max-width:1000px){ .modeles{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .modeles{grid-template-columns:1fr} }

.gammes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,3.4vw,44px)}
.gamme{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r)}
.gamme h3{margin-bottom:.6rem}
.gamme ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.gamme li{display:flex;gap:.6rem;color:var(--mute);font-size:.92rem;line-height:1.55}
.gamme li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-top:.6rem}
@media (max-width:900px){ .gammes{grid-template-columns:1fr} }

.risques{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(28px,3.4vw,44px)}
.risque{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.2rem 1.3rem}
.risque h3{margin-bottom:.5rem}
.risque p{color:var(--mute);font-size:.89rem;line-height:1.6;margin:0}
@media (max-width:860px){ .risques{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .risques{grid-template-columns:1fr} }

.tailles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(24px,3vw,38px);max-width:840px;margin-inline:auto}
.taille{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.4rem 1.3rem;text-align:center}
.taille b{display:block;font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--ink)}
.taille span{display:block;color:var(--mute);font-size:.9rem;margin-top:.35rem}
@media (max-width:620px){ .tailles{grid-template-columns:1fr} }
/* Variantes de grille des étapes, sans style en ligne pour rester responsive */
.etapes--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .etapes--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .etapes--3{grid-template-columns:1fr} }

/* Coupe technique légendée */
.coupe{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,4vw,56px);
  align-items:center;max-width:960px;margin:clamp(28px,3.4vw,44px) auto 0}
.coupe__fig{margin:0;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem;display:grid;place-items:center}
.coupe__fig img{width:100%;height:auto;max-width:320px;display:block}
.coupe__list{margin:0;padding:0;list-style:none;display:grid;gap:1rem;counter-reset:cp}
.coupe__list li{display:flex;gap:.9rem;counter-increment:cp}
.coupe__list li::before{content:counter(cp);flex:none;width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;background:var(--orange-tint);color:var(--orange-deep);
  font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:600}
.coupe__list p{margin:0;color:var(--mute);font-size:.95rem;line-height:1.6}
.coupe__list strong{color:var(--ink)}
@media (max-width:820px){ .coupe{grid-template-columns:1fr} }

/* Styles de profil */
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,3.4vw,44px)}
.style{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.style img{width:100%;height:auto;display:block}
.style__body{padding:1.2rem 1.3rem}
.style h3{margin-bottom:.4rem}
.style p{color:var(--mute);font-size:.92rem;line-height:1.55;margin:0}
@media (max-width:860px){ .styles{grid-template-columns:1fr} }

/* Tableau de performances */
.perf{width:100%;border-collapse:collapse;margin-top:clamp(24px,3vw,38px);font-size:.95rem;
  max-width:760px;margin-inline:auto}
.perf th,.perf td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.perf th{background:var(--bg-2);font-weight:600;color:var(--ink);font-size:.9rem}
.perf td{color:var(--mute)}
.perf tr:last-child td{border-bottom:0}
.perf td strong{color:var(--ink)}

/* Niveaux de certification, en trois paliers */
.niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,3.4vw,44px)}
.niveau{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.6rem}
.niveau__code{display:inline-block;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.74rem;letter-spacing:.04em;font-weight:600;
  color:var(--orange-deep);background:var(--orange-tint);border-radius:var(--r-pill);padding:.36rem .8rem;margin-bottom:.9rem}
.niveau h3{margin-bottom:.5rem}
.niveau p{color:var(--mute);font-size:.93rem;line-height:1.6;margin:0}
@media (max-width:880px){ .niveaux{grid-template-columns:1fr} }

/* Liste d'équipements sur deux colonnes */
.equip{columns:2;column-gap:clamp(24px,3vw,48px);margin-top:clamp(24px,3vw,38px);max-width:820px;margin-inline:auto;padding:0}
.equip li{break-inside:avoid;display:flex;gap:.7rem;color:var(--mute);font-size:.96rem;line-height:1.6;
  margin-bottom:.7rem;list-style:none}
.equip li svg{width:16px;height:16px;flex:none;margin-top:.22rem;color:var(--orange)}
@media (max-width:680px){ .equip{columns:1} }

/* Types d'ouvertures couvertes */
.ouvertures{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.ouvertures span{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.55rem 1.1rem;font-size:.92rem;color:var(--ink-soft)}

/* Gamme en trois solutions, avec fiche technique */
.solu{display:grid;gap:18px;margin-top:clamp(28px,3.4vw,44px)}
.solu__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.solu__media{background:var(--bg-2);min-height:260px}
.solu__body{padding:clamp(24px,3vw,40px)}
.solu__name{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--ink)}
.solu__bl{color:var(--orange-text);font-weight:600;font-size:.95rem;margin:.3rem 0 1rem}
.solu__body p{color:var(--mute);font-size:.96rem;line-height:1.7}
.solu__body p + p{margin-top:.8rem}
@media (max-width:900px){
  .solu__item{grid-template-columns:1fr}
}

/* Tableau des modèles TITAN */
.modtab{width:100%;border-collapse:collapse;margin-top:clamp(24px,3vw,38px);font-size:.95rem}
.modtab th,.modtab td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.modtab thead th{background:var(--bg-2);font-weight:600;color:var(--ink);font-size:.88rem}
.modtab td{color:var(--mute)}
.modtab tbody th{font-family:var(--display);font-weight:800;color:var(--ink);font-size:1rem}
.modtab tr:last-child td,.modtab tr:last-child th{border-bottom:0}
@media (max-width:680px){ .modtab{min-width:560px} }

/* Points forts en bandeau */
.forts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(24px,3vw,38px)}
.forts div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.2rem 1.3rem}
.forts b{display:block;font-size:.96rem;color:var(--ink);margin-bottom:.35rem}
.forts span{color:var(--mute);font-size:.89rem;line-height:1.55}
@media (max-width:900px){ .forts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .forts{grid-template-columns:1fr} }
/* Bande de trois visuels de détail */
.detail3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(24px,3vw,38px)}
.detail3 figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.detail3 img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.detail3 figcaption{padding:.9rem 1.1rem;color:var(--mute);font-size:.88rem;line-height:1.5}
.detail3 figcaption b{display:block;color:var(--ink);font-size:.94rem;margin-bottom:.25rem}
@media (max-width:860px){ .detail3{grid-template-columns:1fr} }

/* Galerie de mises en situation */
.situ{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(28px,3.4vw,44px)}
.situ figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);position:relative}
.situ img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.situ figcaption{padding:1rem 1.2rem;color:var(--mute);font-size:.92rem;line-height:1.55}
.situ figcaption b{display:block;color:var(--ink);font-size:.98rem;margin-bottom:.25rem}
@media (max-width:760px){ .situ{grid-template-columns:1fr} }

/* Étapes de réalisation, en ligne */
.real{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(24px,3vw,38px);counter-reset:r}
.real article{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1.3rem 1.4rem;counter-increment:r}
.real article::before{content:counter(r);display:block;font-family:var(--display);font-weight:800;
  font-size:1.6rem;line-height:1;color:var(--orange-text);margin-bottom:.6rem}
.real h3{margin-bottom:.35rem}
.real p{color:var(--mute);font-size:.89rem;line-height:1.55;margin:0}
@media (max-width:900px){ .real{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .real{grid-template-columns:1fr} }

/* =========================================================================
   GALERIE PRODUIT
   Section « Puisque des images valent davantage que des mots ».
   La grille s'adapte au nombre de visuels : il suffit d'ajouter ou de
   retirer un <figure> pour la faire évoluer, sans toucher au CSS.
   ========================================================================= */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:16px;margin-top:clamp(28px,3.4vw,44px)}
.galerie figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);align-self:start}
.galerie img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s var(--ease)}
.galerie figure:hover img{transform:scale(1.03)}
.galerie figcaption{padding:.9rem 1.1rem;color:var(--mute);font-size:.88rem;line-height:1.5}

/* Décomposition d'un droit d'entrée en deux versements */

/* Étendue de la gamme couverte */
.gamme-liste{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.gamme-liste span{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.55rem 1.1rem;font-size:.92rem;color:var(--ink-soft)}
/* Visuel en tête de chaque gamme de panneaux */
.gamme{padding:0;overflow:hidden}
.gamme__media{background:var(--bg-2);border-bottom:1px solid var(--line)}
.gamme__media img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.gamme__body{padding:1.5rem 1.6rem}
/* Cartes alignées entre elles : image, titre, sous-titre, liste et lien partagent les rangées de la grille */
.gammes{row-gap:0}
.gamme{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.gamme__body{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
.gamme .gamme__body h3{margin:0}
.gamme__sous{margin:.3rem 0 0;font-family:var(--body);font-size:1rem;font-weight:500;line-height:1.45;color:var(--mute)}
.gamme__body ul{margin-top:1.15rem;align-self:start}
.gamme__lien{margin-top:1.4rem;align-self:end;justify-self:start}
@media (max-width:900px){ .gammes{row-gap:16px} .gamme{grid-row:auto;grid-template-rows:auto} .gamme__body{grid-row:auto;grid-template-rows:auto} }

/* Catalogue des panneaux (/gammes-portes-blindees/), panneaux.js.
   Largeur d'une carte calculée sur la grille (--base cartes par ligne) ; --cols fixe le nombre réel
   par rangée de chaque gamme pour qu'aucune carte ne reste seule, la dernière rangée est centrée. */
.panneaux__note{max-width:var(--w-texte);margin:var(--s-8) auto 0;text-align:center;color:var(--mute);font-size:var(--fs-small);line-height:1.55}
.wrap--panneaux{container-type:inline-size}
.panneaux{--base:4;--g:var(--s-5);--carte:calc((100cqi - (var(--base) - 1) * var(--g)) / var(--base));
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-7) var(--g);
  max-width:calc(var(--cols) * var(--carte) + (var(--cols) - 1) * var(--g));margin:var(--head-gap) auto 0}
/* Ordinateur : 4 cartes par ligne au plus (8 = 4+4, 14 = 4+4+4+2, 9 = 3+3+3) */
.panneaux--classique{--cols:4} .panneaux--design{--cols:4} .panneaux--signature{--cols:3}
@media (max-width:899px){ .panneaux{--g:var(--s-4)} }
@media (max-width:599px){ .panneaux{--base:2} .panneaux--classique,.panneaux--design{--cols:2}
  .panneaux--signature{--base:3;--cols:3;--g:var(--s-3)} }
.panneau{flex:0 0 var(--carte);min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.panneau__ouvrir{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--r-sm)}
.panneau__ouvrir img{display:block;width:100%;height:auto;aspect-ratio:523/1221;border-radius:var(--r-sm);
  box-shadow:0 1px 2px rgba(21,23,31,.08),0 10px 24px -14px rgba(21,23,31,.35);transition:transform var(--t) var(--ease)}
.panneau__ouvrir:hover img{transform:translateY(-2px)}
.panneau h3{font-size:1.05rem;margin-top:var(--s-4)}
.panneau__choix{margin-top:.2rem;color:var(--mute);font-size:var(--fs-small);line-height:1.4}
.pastilles{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:var(--s-3)}
.pastilles__titre{width:100%;font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:.15rem}
.pastille{width:24px;height:24px;padding:0;border-radius:50%;cursor:pointer;background:var(--c);
  border:1px solid rgba(21,23,31,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.pastille:hover{transform:scale(1.1)}
.pastille[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--orange)}
.pastille:focus-visible{border-radius:50%}
@media (min-width:900px){ .pastilles{gap:7px} .pastille{width:29px;height:29px} }
@media (max-width:599px){ .panneau h3{font-size:.95rem} }

/* =========================================================================
   PAGE RECRUTEMENT, VERSION AFFIRMÉE
   Hero scindé, carte de prix contrastée, chiffres clés dont un en aplat.
   ========================================================================= */
.rhero{background:var(--deep-grad);color:var(--bone);position:relative;overflow:hidden;
  padding:clamp(88px,11vw,140px) 0 clamp(56px,7vw,88px)}
.rhero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 30%,rgba(254,89,0,.22),transparent 70%)}
.rhero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.rhero h1{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:1.02;
  font-size:clamp(2.4rem,5.6vw,4.2rem);color:#fff;margin:.9rem 0 0}
.rhero h1 .hl{color:var(--orange)}
.rhero__lede{color:rgba(255,255,255,.78);font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.65;
  margin-top:1.3rem;max-width:46ch}
.rhero__lede strong{color:#fff}
.rhero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.rhero__micro{margin-top:1.4rem;font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.72rem;letter-spacing:.04em;
  color:rgba(255,255,255,.5)}
.rhero .eyebrow{color:var(--orange-2)}

.pcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:clamp(26px,3vw,38px);backdrop-filter:blur(6px)}
.pcard__eb{display:inline-block;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:#FF9A66;
  border:1px solid rgba(254,89,0,.45);border-radius:var(--r-pill);padding:.4rem .85rem;margin-bottom:1.3rem}
.pcard__prix{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.8rem,6vw,4rem);color:#fff}
.pcard__prix .u{font-size:.28em;font-weight:700;letter-spacing:.02em;margin-left:.3em;color:rgba(255,255,255,.65)}
.pcard__nom{font-weight:700;color:#fff;margin-top:.5rem;font-size:1.05rem}
.pcard__sous{color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.6;margin-top:.7rem}
.pcard__list{list-style:none;margin:1.5rem 0 0;padding:1.4rem 0 0;border-top:1px solid rgba(255,255,255,.14);
  display:grid;gap:.7rem}
.pcard__list li{display:flex;gap:.7rem;color:rgba(255,255,255,.88);font-size:.94rem;line-height:1.5}
.pcard__list svg{width:17px;height:17px;flex:none;margin-top:.15rem;color:var(--orange)}
@media (max-width:920px){ .rhero__grid{grid-template-columns:1fr} }

/* Trois chiffres clés, le premier en aplat orange */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,3.4vw,44px)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.7rem}
.kpi--fort{background-image:var(--orange-grad);border-color:transparent;color:#fff;box-shadow:var(--shadow)}
.kpi__eb{font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--mute)}
.kpi--fort .kpi__eb{color:#fff}
.kpi__num{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.7rem,3.2vw,2.2rem);
  color:var(--ink);margin:.6rem 0 .5rem;line-height:1.05}
.kpi--fort .kpi__num{color:#fff}
.kpi p{color:var(--mute);font-size:.92rem;line-height:1.55;margin:0}
.kpi--fort p{color:#fff}
@media (max-width:900px){ .kpis{grid-template-columns:1fr} }

/* Liste numérotée 01 à 04 */
.numlist{display:grid;gap:1.1rem;margin:0;padding:0;list-style:none;counter-reset:nl}
.numlist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;counter-increment:nl}
.numlist li::before{content:counter(nl,decimal-leading-zero);font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.78rem;
  font-weight:600;color:var(--orange-deep);background:var(--orange-tint);border-radius:9px;
  width:38px;height:38px;display:grid;place-items:center}
.numlist h3{margin-bottom:.3rem}
.numlist p{color:var(--mute);font-size:.94rem;line-height:1.6;margin:0}

/* Parcours en deux étapes */
.parc{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.4vw,28px);align-items:stretch;
  margin-top:clamp(28px,3.4vw,44px)}
.parc__e{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,32px)}
.parc__e--2{border-color:rgba(254,89,0,.4)}
.parc__eb{font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--orange-deep)}
.parc__prix{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.7rem,3vw,2.2rem);
  color:var(--ink);margin:.7rem 0 .2rem}
.parc__nom{color:var(--mute);font-size:.95rem;margin-bottom:1.1rem}
.parc__e ul{list-style:none;margin:0;padding:1.1rem 0 0;border-top:1px solid var(--line);display:grid;gap:.6rem}
.parc__e li{display:flex;gap:.6rem;color:var(--ink-soft);font-size:.93rem;line-height:1.5}
.parc__e svg{width:16px;height:16px;flex:none;margin-top:.2rem;color:var(--orange)}
.parc__mid{display:grid;place-items:center;gap:.5rem;text-align:center}
.parc__arrow{width:44px;height:44px;border-radius:50%;background-image:var(--orange-grad);
  display:grid;place-items:center;color:#fff}
.parc__arrow svg{width:20px;height:20px}
.parc__mid span{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.62rem;letter-spacing:.08em;color:var(--faint);
  text-transform:uppercase;max-width:9ch;line-height:1.4}
.parc__calc{margin-top:1.6rem;text-align:center;font-family:var(--display);font-weight:800;
  font-size:clamp(1rem,2vw,1.3rem);color:var(--ink);letter-spacing:-.01em}
.parc__calc em{font-style:normal;color:var(--orange)}
@media (max-width:860px){
  .parc{grid-template-columns:1fr}
  .parc__mid{flex-direction:row}
  .parc__arrow{transform:rotate(90deg)}
}
/* Comparatif des deux formules, sans style en ligne pour rester responsive */
.parc--duo{grid-template-columns:1fr 1fr}
@media (max-width:860px){ .parc--duo{grid-template-columns:1fr} }
/* Titre court maintenu sur une seule ligne tant que la place le permet */
.nowrap-title{white-space:nowrap}
@media (max-width:760px){ .nowrap-title{white-space:normal} }
/* Trois profils recherchés : cartes sans visuel, marge intérieure des .benefit */
.modeles--trois{grid-template-columns:repeat(3,1fr)}
.modeles--trois .modele{padding:1.9rem 1.7rem}
@media (max-width:900px){ .modeles--trois{grid-template-columns:1fr} }

/* Bloc de texte centré : paragraphes limités en largeur et recentrés */
.texte-centre{max-width:62ch;margin-inline:auto;text-align:center}
.texte-centre .lede{max-width:none;margin-inline:auto}
.texte-centre .claim{margin-inline:auto}

/* Chaîne de barrières successives */
.chaine{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem;
  margin-top:clamp(24px,3vw,36px)}
.chaine span{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.6rem 1.15rem;font-size:.94rem;color:var(--ink-soft);font-weight:600}
.chaine i{color:var(--orange-text);font-style:normal;font-weight:800}

/* Schéma de coupe dessiné, légende à côté */

/* Équation des composants */
.somme{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  margin-top:clamp(24px,3vw,36px);max-width:var(--w-moyen);margin-inline:auto}
.somme span{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.6rem 1rem;font-size:.92rem;color:var(--ink-soft);font-weight:600}
.somme i{color:var(--orange);font-style:normal;font-weight:800;font-size:1.05rem}

/* Planche de dessins de modèles */
.dessins{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(24px,3vw,38px)}
.dessins figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.9rem;display:grid;place-items:center;gap:.7rem}
.dessins img{width:100%;height:auto;max-width:140px;display:block;mix-blend-mode:multiply}
.dessins figcaption{color:var(--mute);font-size:.8rem;text-align:center;line-height:1.4}
@media (max-width:1000px){ .dessins{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .dessins{grid-template-columns:repeat(2,1fr)} }

/* =========================================================================
   HERO D'ACCUEIL : occupation de l'écran et centrage optique
   La navbar recouvre le haut du hero. Le bloc de texte est donc centré
   dans la zone réellement visible, et non au centre géométrique.
   ========================================================================= */
@media (min-width:768px){
  .hero--home .hero__inner{
    padding-top:clamp(120px,15vh,190px);
    padding-bottom:clamp(56px,7vh,96px);
  }
}
/* Sur mobile, le hero occupe la quasi-totalité de l'écran */
@media (max-width:767.98px){
  .hero--home{min-height:92svh;height:92svh}
  .hero--home .hero__inner{
    padding-top:calc(104px + env(safe-area-inset-top));
    padding-bottom:calc(52px + env(safe-area-inset-bottom));
  }
}
/* Tablette : le hero garde une présence comparable au desktop */
@media (min-width:768px) and (max-width:1199.98px){
  .hero--home{height:82svh;min-height:560px}
}
/* Visuel du modèle en tête de carte */
.modele{padding:0;overflow:hidden;display:flex;flex-direction:column}
.modele__cr{align-self:flex-start}
.modele__media{background:var(--bg-2);border-bottom:1px solid var(--line);display:grid;place-items:center;padding:1.2rem}
.modele__media img{width:100%;height:auto;max-width:150px;display:block}
.modele__body{padding:1.3rem 1.4rem}
/* Étapes empilées en colonne, à côté d'un visuel */
.etapes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){ .etapes--2{grid-template-columns:1fr} }
.etapes .textlink{margin-top:1rem}

/* =========================================================================
   SYSTÈME DE MISE EN PAGE
   Trois largeurs de conteneur, plus aucune valeur posée au cas par cas.
   Le texte de corps n'est jamais une colonne centrée isolée : il occupe
   toujours une colonne dans une grille, aligné à gauche.
   ========================================================================= */
.wrap--mid{max-width:calc(var(--w-moyen) + 2 * var(--pad-x))}

/* Bloc de section en deux colonnes : intitulé à gauche, corps à droite.
   Remplace les sections « titre centré puis paragraphes centrés ». */

/* Variante : intitulé à gauche, visuel à droite, texte sous l'intitulé */

/* Une figure isolée prend la largeur de sa colonne, jamais un bloc flottant */

/* =========================================================================
   MODÈLE DE SECTION PRODUIT, aligné sur la page d'accueil
   1. Intitulé et titre centrés, au-dessus.
   2. En dessous : texte et visuel côte à côte (.split),
      ou texte seul sur deux colonnes (.prose2) ou une colonne large (.prose1).
   Le contenu occupe la largeur de la grille, sans colonne étroite isolée.
   ========================================================================= */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(32px,4vw,56px)}
.split__text>p{text-align:left;max-width:none}
.split__text>p+p{margin-top:1rem}
.split__text>.plist:first-child{margin-top:0}
.split__text .ouvertures{justify-content:flex-start}
.split__media{margin:0}
.split__media img{width:100%;height:auto;display:block;border-radius:var(--r);
  box-shadow:0 24px 60px -30px rgba(20,24,40,.35)}
.split__media figcaption{color:var(--mute);font-size:var(--fs-small);line-height:1.5;margin-top:.8rem}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
}
/* Texte seul : deux colonnes de lecture sur la largeur de la grille */
/* Texte court : une colonne large, centrée */
.prose1{max-width:var(--w-moyen);margin:clamp(24px,3vw,40px) auto 0;text-align:center}
.prose1>p{max-width:none;margin-inline:auto}
.prose1>p+p{margin-top:1rem}
/* Titres de section : assez larges pour tenir sur deux lignes sur desktop */
@media (min-width:1024px){
  .sec-head--center .sec-head__title h2{max-width:28ch}
  .sec-head--center .lede{max-width:64ch}
}
/* Deux colonnes de texte équilibrées : le texte s'écoule d'une colonne à l'autre */
/* Chaîne de composants : le signe + fait partie de l'élément, jamais orphelin */
.somme{gap:.6rem}
.somme i{display:none}
.somme span+span::before{content:"+";color:var(--orange-text);font-weight:800;margin-right:.55rem}
/* Une phrase ne se coupe jamais entre deux colonnes */
.somme span:not(:first-of-type)::before{content:"+";color:var(--orange-text);font-weight:800;margin-right:.55rem}

/* Texte et visuel de même hauteur : l'image remplit sa colonne */
.split--egal{align-items:stretch}
.split--egal .split__media{display:flex;flex-direction:column}
.split--egal .split__media picture{flex:1;display:block;min-height:320px}
.split--egal .split__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){ .split--egal .split__media picture{min-height:0} .split--egal .split__media img{height:auto} }

/* Cartes d'avantages : jamais de carte orpheline.
   Quatre cartes s'alignent sur une ligne, puis deux par deux, puis une. */
.benefits:has(> .benefit:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){
  .benefits:has(> .benefit:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .benefits:has(> .benefit:nth-child(4):last-child){grid-template-columns:1fr}
}

/* =========================================================================
   GRILLES ÉQUILIBRÉES : aucune ligne ne se termine par une carte isolée
   ========================================================================= */
/* Galeries : le nombre de colonnes suit le nombre de visuels */
@media (min-width:900px){
  .galerie:has(> figure:nth-child(4):last-child),
  .galerie:has(> figure:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  /* cinq visuels : le premier en grand, les quatre autres autour */
  .galerie:has(> figure:nth-child(5):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .galerie:has(> figure:nth-child(5):last-child)>figure:first-child{grid-column:span 2;grid-row:span 2;align-self:stretch}
}
@media (min-width:600px) and (max-width:899.98px){
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Catalogue et actualités : la dernière ligne se centre au lieu de rester
   collée à gauche, ce qui la rend intentionnelle. */
.solutions,.posts{display:flex;flex-wrap:wrap;justify-content:center}
.solutions>*,.posts>*{flex:0 1 calc((100% - 2 * 18px) / 3);min-width:0}
@media (max-width:980px){ .solutions>*,.posts>*{flex-basis:calc((100% - 18px) / 2)} }
@media (max-width:620px){ .solutions>*,.posts>*{flex-basis:100%} }
/* Trois cartes restent sur une ligne tant que la largeur le permet */
.benefits:has(> .benefit:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){ .benefits:has(> .benefit:nth-child(3):last-child){grid-template-columns:1fr} }
@media (min-width:900px){
  .galerie:has(> figure:nth-child(5):last-child)>figure:first-child{display:flex;flex-direction:column}
  .galerie:has(> figure:nth-child(5):last-child)>figure:first-child picture{flex:1;height:auto;min-height:0;display:block}
  .galerie:has(> figure:nth-child(5):last-child)>figure:first-child img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
}
/* Une liste numérotée occupe toute la hauteur de sa colonne, en regard du visuel */
.split__text--liste{display:flex;flex-direction:column;justify-content:center}
.split__text--liste .coupe__list{gap:clamp(1.1rem,2vw,1.6rem)}
.split__text--liste .coupe__list p{font-size:1.02rem;line-height:1.6}
/* L'image d'une colonne de même hauteur garde la légende sous elle */
.split--egal .split__media figcaption{flex:none}
/* Une infographie ne se rogne jamais : elle garde son format d'origine */
.split__media--info img{height:auto!important;object-fit:contain!important;aspect-ratio:auto!important}

/* Hauteurs égales, version robuste : c'est le texte qui fixe la hauteur.
   L'image est positionnée dans sa colonne sans peser sur la hauteur de la
   ligne, quel que soit son format (paysage, carré ou portrait). */
@media (min-width:901px){
  .split--egal .split__media{display:flex;flex-direction:column;align-self:stretch}
  .split--egal .split__media picture{flex:1 1 auto;position:relative;min-height:300px;display:block}
  .split--egal .split__media picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .split--egal .split__text{align-self:center}
}
/* Cadrage calé sur le bas du visuel, quand l'élément clé s'y trouve */
/* Serrure : le cadrage garde la caméra en haut et le lecteur d'empreinte en bas */
.split__media--serrure img{object-position:50% 42%}

/* Liste centrée en bloc : le bloc prend la largeur de sa plus longue ligne
   et se centre, les coches et les phrases restent alignées à gauche. */
.plist--centre{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
/* Cartes d'une même rangée : même hauteur. Une hauteur à 100 % bloquait l'étirement. */
.solutions>*,.posts>*{height:auto;align-self:stretch}
.solutions--trio .sol,.solutions .sol,.posts--trois .post,.posts .post{height:auto}

/* Section « Pour qui ? » : liste et phrase finale resserrées sous le titre */
.pourqui__fin{text-align:center;max-width:52ch;margin:1.4rem auto 0}
.pourqui__head{margin-bottom:1.6rem}
.pourqui__liste{margin-top:0}
/* Cartes de liens croisés : elles portent désormais leur vignette */
.solutions--liens .sol__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.solutions--liens .sol__media img{width:100%;height:100%;object-fit:cover;display:block}

/* Schéma légendé en grand : colonnes égales, schéma entier, jamais rogné */
.coupe--large{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:none;gap:clamp(32px,5vw,72px)}
.coupe--large .coupe__fig img{max-width:none;width:100%;height:auto}
@media (max-width:900px){ .coupe--large{grid-template-columns:1fr} }

/* Sections de texte plus larges, pour que la lecture respire */
.wrap--large{max-width:calc(var(--w-moyen) + 2 * var(--pad-x))}
.wrap--large .sec-head--center .lede{max-width:78ch}
.texte-large{text-align:center;max-width:78ch;margin:1.4rem auto 0}

/* Bandeau d'appel : texte à gauche sur toute la place disponible, bouton à droite */
.inline-cta{max-width:var(--w-moyen);margin-inline:auto;padding:clamp(20px,2.4vw,28px) clamp(22px,3vw,36px)}
.inline-cta p{flex:1 1 auto;max-width:none;font-size:1.02rem;line-height:1.55}
.inline-cta .btn{flex:none}
@media (max-width:720px){
  .inline-cta{flex-direction:column;align-items:center;text-align:center}
}
.coupe--large .coupe__fig{display:block;padding:0;background:none;border:0;border-radius:var(--r);overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(20,24,40,.35)}
.coupe--large .coupe__fig picture{display:block;width:100%}
@media (min-width:721px){
  .inline-cta{flex-wrap:nowrap}
  .inline-cta p{flex:1 1 0;min-width:0}
}
/* Le schéma a son propre fond : pas de cadre gris autour, il occupe toute sa colonne */
.coupe--large{align-items:center}
/* Dans une section de texte élargie, le second paragraphe suit directement le premier */
.wrap--large .sec-head{margin-bottom:0}
.wrap--large .texte-large{margin-top:1.1rem}
.texte-large a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Image carrée affichée entière, à côté du texte, sans aucun rognage */
.split--carre{align-items:center}
.split--carre .split__media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}

/* =========================================================================
   CARROUSEL D'IMAGES
   Trois visuels sur desktop, deux sur tablette, un et demi sur mobile pour
   montrer qu'il y a une suite. Aimantation native, sans bibliothèque.
   ========================================================================= */

/* =========================================================================
   BOUTONS : le libellé ne passe jamais à la ligne.
   Sur mobile, les boutons d'action prennent toute la largeur disponible et
   leur taille de texte s'ajuste à l'écran, pour tenir sur une seule ligne.
   ========================================================================= */
.btn{white-space:nowrap}
@media (max-width:560px){
  main .btn{width:100%;justify-content:center;
    gap:.45rem;letter-spacing:0;padding-left:clamp(.7rem,3.2vw,1.4rem);padding-right:clamp(.7rem,3.2vw,1.4rem);font-size:clamp(.78rem,3.6vw,1rem)}
  main .btn svg{flex:none;width:16px;height:16px}
}
/* Très petits écrans : la flèche décorative laisse sa place au texte */
@media (max-width:359.98px){
  main .btn svg{display:none}
}

/* =========================================================================
   CARROUSEL PRODUITS
   La piste démarre sur le bord gauche du contenu et déborde jusqu'au bord
   droit de l'écran : on voit qu'il y a une suite, sans bouton ni point.
   ========================================================================= */
.carr{position:relative;margin-top:clamp(32px,4vw,56px)}
.carr__repere{height:0;overflow:hidden}
.carr__piste{
  --inset:var(--pad-x);
  display:flex;gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--inset);
  padding:8px var(--inset) 22px;
  scrollbar-width:none;cursor:grab;outline:none;
  -webkit-overflow-scrolling:touch}
.carr__piste::-webkit-scrollbar{display:none}
.carr__piste:focus-visible{box-shadow:inset 0 0 0 3px var(--orange-tint)}
.carr--glisse .carr__piste{cursor:grabbing;scroll-snap-type:none;user-select:none}
.carr--glisse .carr__piste img{pointer-events:none}

.carr__item{flex:0 0 clamp(280px,34vw,520px);margin:0;scroll-snap-align:start}
.carr__ouvrir{display:block;width:100%;padding:0;border:0;background:var(--bg-2);cursor:zoom-in;
  border-radius:22px;overflow:hidden;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 22px 50px -28px rgba(20,24,40,.45);
  transition:transform var(--t-lent) var(--ease),box-shadow var(--t-lent) var(--ease)}
.carr__ouvrir img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block;
  transition:transform var(--t-lent) var(--ease)}
.carr__ouvrir::after{content:"";position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;
  background:rgba(20,22,28,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E") center/16px no-repeat;
  backdrop-filter:blur(6px);opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s var(--ease)}
@media (hover:hover){
  .carr__ouvrir:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(20,24,40,.55)}
  .carr__ouvrir:hover img{transform:scale(1.045)}
  .carr__ouvrir:hover::after{opacity:1;transform:none}
}
.carr__ouvrir:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.carr__nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);margin-top:.4rem}
.carr__progression{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.carr__progression span{display:block;height:100%;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),width .3s var(--ease)}
.carr__compteur{font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.74rem;letter-spacing:.04em;color:var(--mute);min-width:7ch;text-align:right}
.carr__btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none;
  transition:background .25s,border-color .25s,color .25s,opacity .25s,transform .25s var(--ease)}
.carr__btn svg{width:18px;height:18px}
.carr__btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.carr__btn:active:not(:disabled){transform:scale(.94)}
.carr__btn:disabled{opacity:.3;cursor:default}
/* Quand toutes les images tiennent à l'écran, la navigation disparaît */
.carr--statique .carr__nav{visibility:hidden}
.carr--statique .carr__piste{cursor:default}

@media (max-width:980px){ .carr__item{flex-basis:clamp(260px,52vw,440px)} }
@media (max-width:620px){
  .carr__item{flex-basis:82vw}
  .carr__ouvrir{border-radius:18px}
  .carr__btn{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .carr__ouvrir,.carr__ouvrir img,.carr__progression span{transition:none}
}

/* ---------- Plein écran ---------- */
html.lb-ouvert{overflow:hidden}
.lb{position:fixed;inset:0;z-index:1000;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(8px,2vw,24px);padding:clamp(16px,4vw,48px);
  background:rgba(12,13,17,.92);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .22s ease}
.lb[hidden]{display:none}
.lb.is-visible{opacity:1}
.lb__cadre{margin:0;display:grid;place-items:center;min-width:0;height:100%}
.lb__img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:14px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);transform:scale(.97);transition:transform .3s var(--ease)}
.lb.is-visible .lb__img{transform:none}
.lb__nav,.lb__fermer{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background .2s,border-color .2s}
.lb__nav:hover,.lb__fermer:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
.lb__nav svg,.lb__fermer svg{width:20px;height:20px}
.lb__fermer{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.lb__compteur{position:absolute;left:50%;bottom:clamp(14px,3vw,28px);transform:translateX(-50%);margin:0;
  font-family:var(--body);font-variant-numeric:tabular-nums;font-weight:500;font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.7)}
@media (max-width:620px){
  .lb{grid-template-columns:1fr;padding:64px 12px 72px}
  .lb__nav{position:absolute;bottom:14px;width:46px;height:46px}
  .lb__nav--prec{left:16px} .lb__nav--suiv{right:16px}
  .lb__img{max-height:calc(100vh - 170px)}
}

/* Trois niveaux de Safety Room : l'image garde son format horizontal et reste
   visible pendant la lecture du texte, au lieu d'être étirée à sa hauteur. */
.solu__item{align-items:start}
.solu__media{align-self:start;height:auto;aspect-ratio:4/3;position:sticky;top:110px}
.solu__media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){ .solu__media{position:static} }

/* =========================================================================
   NIVEAUX DE SAFETY ROOM : image et description côte à côte,
   caractéristiques dans un tableau pleine largeur en dessous.
   ========================================================================= */
.solu__item--v2{display:block}
.solu__item--v2 .solu__haut{display:grid;
  gap:clamp(28px,4vw,56px);align-items:center;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.solu__item--v2 .solu__media{position:static;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;align-self:center;min-height:0;top:auto}
.solu__item--inverse .solu__haut .solu__media{order:2}
.solu__item--v2 .solu__body>p:last-child{margin-bottom:0}

.solu__tableau{margin-top:clamp(24px,3vw,36px);overflow-x:auto}
.specs{width:100%;border-collapse:collapse;font-size:.95rem}
.specs caption{text-align:left;font-family:var(--body);font-variant-numeric:tabular-nums;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-text);font-weight:600;padding-bottom:.9rem}
.specs th,.specs td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:1px solid var(--line)}
.specs th{width:30%;font-weight:700;color:var(--ink);white-space:nowrap}
.specs td{color:var(--ink-soft);line-height:1.55}
.specs tbody tr:nth-child(odd){background:var(--bg-2)}
@media (max-width:900px){
  .solu__item--inverse .solu__haut .solu__media{order:0}
}
@media (max-width:620px){
  .specs,.specs tbody,.specs tr,.specs th,.specs td{display:block;width:100%}
  .specs tr{padding:.75rem .9rem;border-top:1px solid var(--line)}
  .specs th,.specs td{padding:0;border:0;white-space:normal}
  .specs th{margin-bottom:.2rem;font-size:.86rem}
  .specs tr:last-child th,.specs tr:last-child td{border:0}
  .specs tr:last-child{border-bottom:1px solid var(--line)}
}
/* Carte à marge uniforme : image, texte et tableau alignés sur les mêmes bords */
.solu__item--v2{padding:clamp(22px,3vw,44px)}
.solu__item--v2 .solu__body{padding:0}
.solu__item--inverse .solu__haut{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.solu__item--v2 .solu__media{margin:0}
@media (max-width:900px){
  .solu__item--v2 .solu__haut,.solu__item--inverse .solu__haut{grid-template-columns:1fr}
}

/* Lien d'itinéraire sous chaque adresse de la page contact */
.ccard__lien{display:inline-block;margin-top:.35rem;font-size:.86rem;font-weight:600;color:var(--orange-text);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ccard__lien:hover{color:var(--orange)}

/* Contenu placé sous un titre centré, sans image : un bloc centré qui respire */
.bloc-centre{max-width:var(--w-moyen);margin:clamp(24px,3vw,40px) auto 0}
.bloc-centre>p.lede{text-align:center;max-width:64ch;margin-left:auto;margin-right:auto}
.bloc-centre>p.lede+p.lede{margin-top:1rem}
.bloc-centre>.plist{margin-top:1.4rem}
.bloc-centre .phero__cta,.bloc-centre .hero__cta{justify-content:center;margin-top:1.8rem}
.bloc-centre>.legal__wrapx{margin-top:0}
/* Liste numérotée présentée en deux colonnes sous son titre */
.numlist--grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2.6rem;max-width:var(--w-moyen);margin-inline:auto}
@media (max-width:760px){ .numlist--grille{grid-template-columns:1fr} }
/* Titre des certifications : il passe à la ligne comme les autres titres, au lieu de déborder */
.certs-head{max-width:none}
.certs-title,.certs-title .certs-hl{white-space:normal}
.certs-title{max-width:28ch;margin-left:auto;margin-right:auto}
/* Styles de fenêtre : la parclose, qui fait la différence, affichée en entier */
.style img{aspect-ratio:425/296;object-fit:cover}