@font-face{font-family:'Archivo Variable';font-style:normal;font-weight:100 900;font-display:swap;
  font-stretch:62% 125%;
  src:url('../fonts/archivo-variable.woff2') format('woff2-variations');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-sans.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/instrument-sans-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jetbrains-mono.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/jetbrains-mono-500.woff2') format('woff2');}
/* ============================================================
   JOEL GODENIR · Consultant IA
   Direction : grille suisse / éditorial sportif
   ============================================================ */

:root{
  --ink:#0E0E0E;
  --ink-60:#4A4A47;
  --ink-40:#767671;
  --paper:#FFFFFF;
  --mist:#F5F4F1;
  --rule:#DCDAD4;
  --orange:#FA5F12;
  --orange-pale:#FFE2D2;
  --orange-light:#FF9966;   /* accents sur fond sombre (4,05:1) */
  --orange-text:#FA5F12;   /* aligné sur l'orange de marque */   /* orange lisible sur fond sombre (4,05:1) */
  --teal:#12A28D;
  --teal-deep:#0B4F46;

  --gut:40px;
  --maxw:1440px;

  --mono:"JetBrains Mono",ui-monospace,monospace;
  --body:"Satoshi","Instrument Sans","Archivo Variable",system-ui,sans-serif;
  --disp:"Archivo Variable","Archivo",system-ui,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
[id]{scroll-margin-top:100px}
/* ---------- grille de repérage (hairlines) ---------- */

.page{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* ---------- typographie ---------- */
.disp{
  font-family:var(--disp);font-weight:800;
  font-variation-settings:"wdth" 116;
  line-height:.84;letter-spacing:-.035em;text-transform:uppercase;
  margin:0;
}
.d-xl{font-size:clamp(3.4rem,11.5vw,10.5rem)}
.d-l{font-size:clamp(2.05rem,4.75vw,3.95rem);line-height:.96;letter-spacing:-.03em}
.d-m{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:.95}
.eyebrow{
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);
  margin:0 0 1.5rem;display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{
  content:"";width:26px;height:3px;background:var(--orange);flex:none;
}
.eyebrow.plain::before{display:none}
.sec--dark .eyebrow{color:#fff}
.geo .eyebrow{color:#fff}
.qui .eyebrow{color:var(--ink)}
.qui .eyebrow::before{background:var(--ink)}
.band .eyebrow{color:var(--ink)}
.band .eyebrow::before{background:var(--ink)}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;color:var(--ink-60);max-width:44ch;font-weight:450}
.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:1.05rem 1.75rem;font-family:var(--mono);font-size:.8125rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:500;min-height:48px;
  border:1px solid var(--ink);position:relative;overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn span{position:relative;z-index:1}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .45s var(--ease);z-index:0;
}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:var(--paper)}
.btn--fill{background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:600}
.btn--fill::after{background:var(--ink)}
.btn--fill:hover{border-color:var(--ink)}
.btn--light{border-color:rgba(255,255,255,.45);color:#fff}
.qui .btn--light,.band .btn--light,.tarif--hi .btn--light{border-color:rgba(14,14,14,.4);color:var(--ink);font-weight:600}
.qui .btn--light::after,.band .btn--light::after,.tarif--hi .btn--light::after{background:var(--ink)}
.qui .btn--light:hover,.band .btn--light:hover,.tarif--hi .btn--light:hover{color:var(--paper);border-color:var(--ink)}
.btn--light::after{background:#fff}
.btn--light:hover{color:var(--ink);border-color:#fff}
.arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule);
  transition:box-shadow .4s var(--ease);
}
.hdr.is-stuck{box-shadow:0 12px 30px -22px rgba(0,0,0,.4)}
.hdr .wrap{display:flex;align-items:center;gap:2.5rem;height:74px}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--disp);
  font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:-.03em;
  text-transform:uppercase;font-size:1.05rem;flex:none}
.logo i{width:11px;height:11px;background:var(--orange);display:block;border-radius:0;
  transition:transform .4s var(--ease)}
.logo:hover i{transform:rotate(45deg)}
.logo em{font-style:normal;color:var(--ink-40);font-family:var(--mono);
  font-size:.71875rem;letter-spacing:.1em;margin-left:.35rem}
.nav{display:flex;align-items:center;gap:2rem;margin-left:auto}
.nav>a,.nav>.has-mega>button{
  font-size:.875rem;font-weight:500;letter-spacing:-.01em;
  padding:.4rem 0;position:relative;display:inline-flex;align-items:center;gap:.4rem;
}
.nav>a::after,.nav>.has-mega>button::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav>a:hover::after,.nav>.has-mega:hover>button::after,.nav>a[aria-current]::after{transform:scaleX(1)}
.nav .chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
.has-mega:hover .chev{transform:rotate(225deg) translate(-3px,-3px)}
.hdr-cta{margin-left:.5rem}
.hdr-tel{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--ink-60)}
/* méga-menu */
.has-mega{position:static}
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-bottom:1px solid var(--rule);box-shadow:0 30px 60px -30px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:var(--maxw);margin:0 auto;padding:2.75rem var(--gut) 2.25rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem}
.mega-lbl{font-family:var(--mono);font-size:.71875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-40);margin:0 0 1.1rem;font-weight:500}
.mega-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.mega-list>li>a{
  display:flex;gap:.85rem;align-items:baseline;padding:.5rem 0;
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.mega-list>li>a:hover{border-color:var(--ink)}
.mega-list b{font-weight:500;font-size:.95rem}
.mega-list i{font-family:var(--mono);font-size:.71875rem;color:var(--orange-text);font-style:normal;
  letter-spacing:.08em;padding-top:.2rem}
.mega-sub{list-style:none;margin:.1rem 0 .6rem 2.1rem;padding:0;display:grid;gap:.1rem}
.mega-sub a{font-size:.8125rem;color:var(--ink-60);padding:.2rem 0;display:block}
.mega-sub a:hover{color:var(--orange-text)}
.mega-promo{background:var(--mist);padding:1.75rem;display:flex;flex-direction:column;gap:.9rem}
.mega-promo .tag{align-self:flex-start;background:var(--orange);color:var(--ink);font-family:var(--mono);
  font-size:.71875rem;letter-spacing:.1em;padding:.3rem .6rem;text-transform:uppercase}
.mega-promo p{margin:0;font-size:.875rem;color:var(--ink-60);line-height:1.5}
.mega-promo strong{font-size:1.05rem;font-weight:700;display:block;line-height:1.25}
.burger{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:22px;height:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){
  :root{--gut:24px}
  .burger{display:flex}
  .hdr-tel,.hdr-cta{display:none}
  /* backdrop-filter crée un bloc conteneur pour les descendants en position
     fixed : le menu se retrouvait enfermé dans la hauteur de l'en-tête.
     On le neutralise en mobile, où il n'apporte rien. */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
  .nav{
    position:fixed;inset:74px 0 0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:1.5rem var(--gut) 3rem;overflow-y:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.3s var(--ease);
  }
  .nav.open{transform:none;opacity:1;visibility:visible}
  .nav>a,.nav>.has-mega>button{font-size:1.35rem;font-family:var(--disp);text-transform:uppercase;
    font-weight:700;letter-spacing:-.02em;padding:1rem 0;border-bottom:1px solid var(--rule);width:100%;justify-content:space-between}
  .nav>a::after,.nav>.has-mega>button::after{display:none}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
  .has-mega.open .mega{max-height:1400px}
  .mega-in{grid-template-columns:1fr;padding:1.25rem 0 1.5rem;gap:1.5rem}
  .mega-promo{display:none}
}
/* ---------- bandeau données ---------- */
.strip{border-bottom:1px solid var(--rule);background:var(--paper)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:0}
.strip .cell{
  flex:1 1 200px;padding:1.1rem 1.25rem 1.1rem 0;display:flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);
}
.strip .cell b{color:var(--ink);font-weight:600}
.dot{width:6px;height:6px;background:var(--orange);flex:none}
.dot--teal{background:var(--teal-deep)}
/* ---------- sections ---------- */
.sec{padding:clamp(4.5rem,9vw,8.5rem) 0;position:relative}
.sec--mist{background:var(--mist)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:3rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
@media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:1.5rem}}
/* ---------- révélation au scroll ---------- */
.rv{opacity:0}
.rv.in{opacity:1}
html.no-anim .rv{opacity:1}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1}
  *{animation:none!important;transition-duration:.01ms!important}
}
/* découpes SplitText : marge de sécurité pour les accents des capitales */
.sline{padding:.16em 0 .08em;margin:-.16em 0 -.08em}
/* barre de progression de lecture */
#prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:left;z-index:2}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.6rem 3rem 1.6rem 0;position:relative;
  font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:600;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.5rem;top:50%;width:13px;height:13px;
  border-right:2px solid var(--orange-text);border-bottom:2px solid var(--orange-text);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .ans{padding:0 20% 1.8rem 0;color:var(--ink-60);font-size:1rem;max-width:70ch}
@media(max-width:700px){.faq .ans{padding-right:0}}
/* ---------- pied de page ---------- */
.ftr{background:var(--ink);color:#fff;padding:clamp(3.5rem,6vw,5.5rem) 0 2rem}
.ftr a{color:rgba(255,255,255,.7)}
.ftr a:hover{color:var(--orange-light)}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;
  padding-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,.14)}
.ftr .ftr-h{font-family:var(--mono);font-size:.71875rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:0 0 1.1rem;font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9rem}
.ftr-mark{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 116;
  text-transform:uppercase;letter-spacing:-.04em;line-height:.82;
  font-size:clamp(2.4rem,7vw,5rem);margin:0 0 1.2rem}
.ftr-mark span{color:var(--orange)}
.ftr-bot{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;
  padding-top:1.75rem;font-family:var(--mono);font-size:.71875rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
@media(max-width:900px){.ftr-top{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:560px){.ftr-top{grid-template-columns:1fr}}
/* ---------- bloc contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-list{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--rule)}
.contact-list li{border-bottom:1px solid var(--rule);padding:1.15rem 0;display:flex;gap:1.5rem;align-items:baseline}
.contact-list .k{font-family:var(--mono);font-size:.71875rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-40);width:110px;flex:none}
.contact-list .v{font-size:1.05rem;font-weight:500}
.contact-list .v:hover{color:var(--orange-text)}
/* ---------- grain ---------- */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- rideau d'ouverture ---------- */
html.loading, html.loading body{overflow:hidden;height:100%}
#curtain{position:fixed;inset:0;z-index:400;color:#fff}
#curtain .ccol{position:absolute;top:0;height:100%;width:20.4%;background:var(--ink)}
#curtain .ccol:nth-child(1){left:0}
#curtain .ccol:nth-child(2){left:20%}
#curtain .ccol:nth-child(3){left:40%}
#curtain .ccol:nth-child(4){left:60%}
#curtain .ccol:nth-child(5){left:80%}
#curtain .cin{position:absolute;inset:0;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gut);display:flex;flex-direction:column;justify-content:center}
#curtain .cmark{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 118;
  text-transform:uppercase;letter-spacing:-.04em;line-height:.84;font-size:clamp(2.6rem,9vw,7rem)}
#curtain .cmark span{display:block;overflow:hidden}
#curtain .cmark i{display:block;font-style:normal}
#curtain .cmark em{font-style:normal;color:var(--orange)}
#curtain .crow{display:flex;align-items:baseline;gap:1.2rem;margin-top:1.75rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
#curtain .cnt{color:var(--orange);font-size:.875rem}
#curtain .cbar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:left;z-index:3}
html.no-anim #curtain{display:none}
/* ---------- curseur ---------- */
/* Le curseur ne repose plus sur le fondu par différence : selon les
   extensions installées, un contexte d'empilement peut le neutraliser,
   et le point restait alors blanc sur fond blanc, donc invisible.
   Un point sombre cerné de blanc se voit sur tous les fonds du site. */
#cur{position:fixed;top:0;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;isolation:auto;
  pointer-events:none;z-index:300;opacity:0;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease)}

/* Repli si le fondu est neutralisé : le script ajoute cette classe sur
   <html> et le point bascule alors selon la section survolée. */
html.cur-sans-fondu #cur{mix-blend-mode:normal;background:var(--ink);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
html.cur-sans-fondu #cur.sur-sombre{background:#fff;box-shadow:0 0 0 1.5px rgba(14,14,14,.35)}
html.has-cur #cur{opacity:1}
#cur.big{width:46px;height:46px;margin:-23px 0 0 -23px}
html.has-cur, html.has-cur a, html.has-cur button, html.has-cur summary{cursor:none}
html.has-cur input, html.has-cur textarea, html.has-cur select{cursor:auto}
@media(hover:none){#cur{display:none}}
/* ---------- bandeau défilant ---------- */
.marq{background:var(--ink);color:#fff;overflow:hidden;padding:1.4rem 0;position:relative}
.marq-in{display:flex;width:max-content;will-change:transform}
.marq-in span{display:flex;align-items:center;gap:.55em;padding-right:.55em;white-space:nowrap;
  font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 116;
  text-transform:uppercase;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.7rem,4.2vw,3.4rem)}
.marq-in i{width:12px;height:12px;background:var(--orange);display:block;flex:none;transform:rotate(45deg)}
.marq-in em{font-style:normal}
.marq-in .teal{color:var(--teal)}
/* ---------- section sombre (contact) ----------
   Le contact bascule en noir et se fond avec le pied de page :
   cela réduit le nombre de zones de couleur au lieu de l'augmenter,
   et la page se termine sur un seul bloc sombre. */
.sec--dark{background:var(--ink);color:#fff;position:relative}
.sec--dark h2{color:#fff}
.sec--dark .lede{color:rgba(255,255,255,.68)}
.sec--dark .contact-list{border-top-color:rgba(255,255,255,.16)}
.sec--dark .contact-list li{border-bottom-color:rgba(255,255,255,.16)}
.sec--dark .contact-list .k{color:rgba(255,255,255,.62)}
.sec--dark .contact-list .v{color:#fff}
.sec--dark .contact-list a.v:hover{color:var(--orange-light)}
.sec--dark .form-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.sec--dark .fld label{color:rgba(255,255,255,.55)}
.sec--dark .fld input,.sec--dark .fld select,.sec--dark .fld textarea{
  color:#fff;border-bottom-color:rgba(255,255,255,.22)}
.sec--dark .fld input::placeholder,.sec--dark .fld textarea::placeholder{color:rgba(255,255,255,.35)}
.sec--dark .fld select option{color:var(--ink)}
.sec--dark .fld input:focus,.sec--dark .fld select:focus,.sec--dark .fld textarea:focus{border-color:var(--orange)}
.sec--dark .fine{color:rgba(255,255,255,.62)}
/* le pied de page prolonge le bloc sombre : plus de rupture entre les deux */
.ftr--joined{padding-top:0}
.ftr--joined .ftr-top{border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(3rem,5vw,4.5rem)}
/* =========================================================
   COMPOSANTS PARTAGÉS
   Utilisés par l'accueil et par toutes les pages service.
   ========================================================= */

/* ---------- barre de réassurance ---------- */
.hero-foot{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  padding:1.5rem 0 1.75rem;border-top:1px solid var(--rule);position:relative;z-index:2;
  margin-top:clamp(2.5rem,5vw,4rem)}
/* pastille avis Google : l'élément fort de la barre */
.gbadge{display:flex;align-items:center;gap:.85rem;border:2px solid var(--rule);
  padding:.7rem 1rem;background:var(--paper);transition:border-color .35s var(--ease)}
.gbadge:hover{border-color:var(--ink)}
.gbadge .gmark{width:26px;height:26px;flex:none;display:block}
.gbadge .gtxt{display:flex;flex-direction:column;gap:.22rem;line-height:1}
.gbadge .gtop{display:flex;align-items:center;gap:.5rem}
.gbadge .gnum{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 108;
  font-size:1.05rem;letter-spacing:-.02em;line-height:1}
.gbadge .stars{color:var(--orange-text);font-size:.85rem;letter-spacing:.08em;line-height:1}
.gbadge .gsub{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange-text)}
.hfacts{display:flex;flex-wrap:wrap;gap:clamp(1.25rem,3vw,2.5rem);margin-left:auto}
.hfacts span{font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-60);display:flex;align-items:center;gap:.6rem}
.hfacts span::before{content:"";width:7px;height:7px;background:var(--orange-text);flex:none}
.hfacts b{color:var(--ink);font-weight:600}
@media(max-width:900px){.hfacts{margin-left:0;width:100%;gap:.6rem 1.5rem}}
/* ---------- cartes (blog, actualités, cas clients) ---------- */
/* ============ BLOG / CARTES ============ */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.card{background:var(--paper);display:flex;flex-direction:column;padding:0;position:relative;
  transition:background .45s var(--ease)}
.card:hover{background:var(--ink)}
.card-vis{height:190px;position:relative;overflow:hidden;background:var(--mist);flex:none;
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--rule)}
.card:hover .card-vis{border-color:rgba(255,255,255,.15)}
.card-vis .illus{width:100%;height:100%;display:block;
  transition:transform .7s var(--ease)}
.card:hover .card-vis .illus{transform:scale(1.06)}
.card:nth-child(1) .card-vis{background:var(--orange)}
.card:nth-child(2) .card-vis{background:var(--teal-deep)}
.card:nth-child(3) .card-vis{background:var(--ink)}
.card-tag{position:absolute;top:0;left:0;font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;background:var(--paper);color:var(--orange-text);
  padding:.45rem .7rem}
.card-body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1;gap:.9rem}
.card .date{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-40);transition:color .4s}
.card h2,.card h3,.card h4{margin:0;font-size:1.18rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;
  transition:color .4s}
.card p{margin:0;font-size:.9rem;color:var(--ink-60);line-height:1.55;flex:1;transition:color .4s}
.card .more{font-family:var(--mono);font-size:.71875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  display:flex;align-items:center;gap:.5rem;color:var(--orange-text);margin-top:.4rem}
.card .more span{transition:transform .4s var(--ease)}
.card:hover .more span{transform:translateX(6px)}
.card:hover h2,.card:hover h3,.card:hover h4{color:#fff}
.card:hover p,.card:hover .date{color:rgba(255,255,255,.72)}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.cards{grid-template-columns:1fr}.card-vis{height:168px}}
/* ---------- formulaire ---------- */
/* ============ FORMULAIRE ============ */
.form-card{background:var(--mist);padding:clamp(1.75rem,3vw,2.5rem)}
.fld{margin-bottom:1.15rem}
.fld label{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:.5rem}
.fld input,.fld select,.fld textarea{
  width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;
  padding:.7rem 0;font:inherit;font-size:.95rem;color:var(--ink);border-radius:0;
  transition:border-color .3s;resize:vertical;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--orange)}
.fld ::placeholder{color:var(--ink-40)}
.fine{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-40);margin:1rem 0 0;text-align:center}
/* ============ HERO ============ */
.hero{position:relative;padding:clamp(2.5rem,5vw,4.5rem) 0 0;border-bottom:1px solid var(--rule);overflow:hidden}
.hero-in{position:relative;min-height:min(76vh,660px);display:flex;flex-direction:column}
.hero-vert{
  position:absolute;left:1px;bottom:150px;transform:rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--mono);font-size:.6875rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-40);z-index:3;
}
.hero h1{position:relative;z-index:2;margin:0;display:block}
.hero .h1-disp{display:block;font-size:clamp(3rem,12.6vw,12rem);
  font-variation-settings:"wdth" 120;letter-spacing:-.045em}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-body{position:relative;z-index:2;max-width:min(52%,620px);margin-top:auto;padding-top:clamp(2rem,4vw,3rem)}
.hero-lede{max-width:46ch;margin:0;font-size:clamp(1.02rem,1.32vw,1.18rem);line-height:1.55;color:var(--ink-60)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin:2rem 0 0}
.hero-block{position:absolute;right:0;bottom:0;width:min(36%,440px);height:min(62%,400px);
  background:var(--orange-pale);z-index:0}
.hero-portrait{
  position:absolute;right:-1%;bottom:-1px;height:clamp(300px,41vw,620px);width:auto;margin:0;z-index:1;
}
.hero-portrait img{height:100%;width:auto;filter:saturate(1.04)}
@media(max-width:1080px){
  .hero-in{min-height:0}
  .hero-body{max-width:100%}
  .hero-portrait{position:relative;right:auto;bottom:auto;height:auto;width:min(64%,340px);
    margin:2.5rem 0 -1px auto}
  .hero-portrait img{width:100%;height:auto}
  .hero-block{width:52%;height:230px}
  .hero-vert{display:none}
}
/* ============ MANIFESTE ============ */
.mani{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.mani-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--rule);padding-top:2.25rem}
.mani-cols h3{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange-text);margin:0 0 .9rem;font-weight:600;display:flex;align-items:center;gap:.6rem}
.mani-cols h3::before{content:"";width:16px;height:3px;background:var(--orange);flex:none}
.mani-cols p{margin:0;font-size:.95rem;color:var(--ink-60);line-height:1.55}
@media(max-width:900px){.mani{grid-template-columns:1fr}.mani-cols{grid-template-columns:1fr;gap:1.75rem}}
/* ============ INDEX SERVICES ============ */
.srv-list{border-top:1px solid var(--ink)}
.srv{
  display:grid;grid-template-columns:74px minmax(0,1.15fr) minmax(0,1.25fr) 190px 40px;
  align-items:center;gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--rule);
  position:relative;transition:padding-left .45s var(--ease);
}
.srv::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.srv:hover::before{transform:scaleX(1)}
.srv:hover{padding-left:18px}
.srv .num{font-family:var(--mono);font-size:.8125rem;font-weight:600;letter-spacing:.07em;color:var(--orange-text);transition:color .3s}
.srv:hover .num{color:var(--ink)}
.srv .ttl{font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.srv .ttl small{display:block;font-size:.8125rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink-60);margin-top:.55rem;line-height:1.4}
.srv .desc{color:var(--ink-60);font-size:.95rem;line-height:1.5}
.srv .price{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-60);font-weight:500;text-align:right}
.srv .go{font-size:1.35rem;text-align:right;transition:transform .4s var(--ease),color .3s;color:var(--ink-60)}
.srv:hover .go{transform:translateX(8px);color:var(--orange-text)}
.srv-note{font-family:var(--mono);font-size:.71875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-60);margin:1.5rem 0 0}
@media(max-width:1080px){
  .srv{grid-template-columns:54px 1fr 34px;gap:1rem .9rem;padding:1.35rem 0}
  .srv .desc{grid-column:2/4;font-size:.9rem}
  .srv .price{grid-column:2/4;text-align:left}
  .srv .go{grid-row:1;grid-column:3}
}
/* ============ GEO ============ */
.geo{background:var(--teal-deep);color:#fff;position:relative;overflow:hidden}
.geo-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.geo-lede{color:rgba(255,255,255,.72);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;max-width:44ch;margin:1.75rem 0 0}
.geo-pts{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.geo-pts li{padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,.18);display:flex;gap:1.1rem;align-items:baseline}
.geo-pts b{font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.1em;color:var(--orange-light);flex:none;width:28px}
.geo-pts span{font-size:.98rem;color:rgba(255,255,255,.85);line-height:1.5}
@media(min-width:901px){.geo-grid > div:last-child{position:sticky;top:110px}}
.answer{background:#fff;color:var(--ink);padding:clamp(1.5rem,2.5vw,2.25rem);position:relative;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
.answer-top{display:flex;align-items:center;gap:.7rem;padding-bottom:1.1rem;margin-bottom:1.35rem;
  border-bottom:1px solid var(--rule)}
.answer-top .chip{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  background:var(--teal-deep);color:#fff;padding:.3rem .55rem}
.answer-top small{font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-40)}
.answer .q{font-size:1.02rem;font-weight:500;letter-spacing:-.01em;margin:0 0 1.1rem;line-height:1.45}
.answer .a{font-size:.95rem;line-height:1.65;color:var(--ink-60);margin:0}
.answer .a mark{color:var(--ink);padding:.05em .2em;font-weight:500;background-color:transparent;
  background-image:linear-gradient(var(--orange-pale),var(--orange-pale));
  background-repeat:no-repeat;background-position:left center;background-size:var(--hl,100%) 100%}
.answer sup{font-family:var(--mono);font-size:.625rem;color:var(--orange);vertical-align:super;margin-left:.15em}
.answer .type{display:inline-block;width:2px;height:1em;background:var(--orange);vertical-align:-.12em;
  animation:blink 1s steps(2) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.answer-src{margin:1.5rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.5rem}
.answer-src span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;padding:.35rem .6rem;
  border:1px solid var(--rule);color:var(--ink-40)}
.answer-src span.me{border-color:var(--orange-text);color:var(--orange-text);font-weight:600}
.geo-cap{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin:1rem 0 0;text-align:right}
@media(max-width:900px){.geo-grid{grid-template-columns:1fr}}
/* ============ QUI SUIS-JE ============ */
.qui{background:var(--orange);color:var(--ink);position:relative;overflow:hidden;padding:0}
.qui-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
.qui-photo{margin:0 0 0 calc((100vw - min(100vw, var(--maxw)))/-2 - var(--gut));align-self:end;
  display:flex;overflow:hidden}
.qui-photo img{width:100%;max-width:540px;display:block}
.qui-txt{padding:clamp(4rem,8vw,7rem) 0 clamp(4rem,8vw,7rem)}
.qui h2{color:var(--ink)}
.qui p{color:rgba(14,14,14,.86);max-width:50ch;font-size:1.02rem;line-height:1.6}
.qui-facts{list-style:none;margin:2.25rem 0 2.5rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;border-top:1px solid rgba(14,14,14,.22);max-width:560px}
.qui-facts li{padding:1rem 1rem 1rem 0;border-bottom:1px solid rgba(14,14,14,.22)}
.qui-facts b{display:block;white-space:nowrap;font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 112;
  font-size:1.65rem;letter-spacing:-.02em;line-height:1}
.qui-facts small{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(14,14,14,.82);display:block;margin-top:.4rem}
.qui-vert{position:absolute;right:calc(var(--gut) * .5);top:0;writing-mode:vertical-rl;
  font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 70;font-size:clamp(4rem,9vw,8rem);
  line-height:.9;color:rgba(14,14,14,.1);text-transform:uppercase;letter-spacing:-.02em;user-select:none}
@media(max-width:900px){
  .qui-grid{grid-template-columns:1fr}
  .qui-photo{order:2;margin-left:calc(var(--gut) * -1)}
  .qui-photo img{max-width:340px}
  .qui-txt{padding-bottom:1rem}
  .qui-vert{display:none}
}
/* ---------- verbe en tête de chaque ligne de service ---------- */
/* Le verbe est une étiquette de catégorie, pas un titre : il annonce,
   le nom de la prestation reste l'élément dominant. Même traitement que
   dans le méga-menu, pour que le vocabulaire soit reconnaissable. */
.srv .verbe{display:flex;align-items:center;gap:.6rem;font-style:normal;
  font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange);margin-bottom:.6rem}
.srv .verbe::before{content:"";width:18px;height:3px;background:var(--orange);flex:none}
.srv .ttl{font-weight:600}
/* ---------- méga-menu : grille de trois colonnes ----------
   La grille est décalée de 2rem vers la gauche et élargie d'autant,
   pour que chaque cellule ait le même retrait interne tout en laissant
   la première colonne alignée sur la marge de page. */
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.mcell{display:flex;flex-direction:column;align-self:stretch;
  padding:1.5rem 2rem 1.7rem;position:relative;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transition:background .3s var(--ease)}
.mcell:nth-child(3n){border-right:0}
.mcell:nth-child(3n+1){padding-left:0}
.mcell:nth-child(3n){padding-right:0}
a.mcell:hover{background:var(--mist)}
.mverbe{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.75rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--orange);
  margin-bottom:.7rem}
.mverbe::before{content:"";width:18px;height:3px;background:var(--orange);flex:none}
.mcell b,.mhead b{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:600;
  letter-spacing:-.02em;line-height:1.25;margin-bottom:.9rem;transition:color .3s}
.marrow{font-style:normal;font-size:.9rem;opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);color:var(--orange)}
a.mcell:hover .marrow,.mhead:hover .marrow{opacity:1;transform:none}
a.mcell:hover b,.mhead:hover b{color:var(--orange-text)}
.mlist{list-style:none;margin:0 0 0 .1rem;padding:0;display:grid;gap:.4rem}
.mlist li{position:relative;padding-left:.95rem;font-size:.8125rem;color:var(--ink-60);line-height:1.4}
.mlist li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
  border-radius:50%;background:var(--orange)}
.mlist--liens a{color:var(--ink-60);transition:color .25s}
.mlist--liens a:hover{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px}
/* bande de mise en avant, sur toute la largeur */
.mband{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(1.25rem,3vw,2.5rem);
  background:var(--mist);padding:1.4rem 2rem;margin-top:1.5rem;
  transition:background .3s var(--ease)}
.mband:hover{background:var(--orange-pale)}
.mband-tag{font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--orange);color:var(--ink);padding:.35rem .6rem;flex:none}
.mband-txt{display:block}
.mband-txt b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.25rem}
.mband-txt span{display:block;font-size:.85rem;color:var(--ink-60);line-height:1.5}
.mband-cta{font-family:var(--mono);font-size:.71875rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange-text);white-space:nowrap;display:flex;align-items:center;gap:.45rem}
.mband-cta i{font-style:normal;transition:transform .3s var(--ease)}
.mband:hover .mband-cta i{transform:translateX(4px)}
@media(max-width:1080px){
  .mega-grid{grid-template-columns:1fr;margin-left:0;width:100%}
  .mcell{padding:1.2rem 0;border-right:0}
  
  .mband{grid-template-columns:1fr;gap:.9rem;padding:1.4rem;margin-top:1.2rem}
  .mband-tag{justify-self:start}
}
/* ---------- sous-titres descriptifs ----------
   Règle : l'orange en capitales sert d'ÉTIQUETTE DE CATÉGORIE, placée
   au-dessus d'un titre. Tout ce qui DÉCRIT sous un titre passe en texte
   courant gris, comme les listes du méga-menu. */
.step .dur,
.tarif .k,
.lever h3 ~ .k,
.gbadge .gsub{
  font-family:var(--body);font-size:.8125rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink-60);line-height:1.4;
}
.step .dur{margin-top:.45rem}
.tarif .k{margin-bottom:1.35rem}
.lever h3 ~ .k{margin-top:.35rem;margin-bottom:1.1rem}
.tarif--hi .k{color:rgba(14,14,14,.8)}
.tarif--devis .k,.lever--geo h3 ~ .k{color:rgba(14,14,14,.8)}
/* ---------- bande d'appel ---------- */
.band{background:var(--orange);color:var(--ink);position:relative;overflow:hidden}
.band .wrap{padding:clamp(3.5rem,7vw,6rem) var(--gut);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:2.5rem;align-items:end}
.band h2{color:var(--ink);margin:0}
.band p{color:rgba(14,14,14,.86);max-width:46ch;margin:1.5rem 0 0}
.btn--light{border-color:rgba(14,14,14,.4);color:var(--ink);font-weight:600}
.btn--light::after{background:var(--ink)}
.btn--light:hover{color:var(--paper);border-color:var(--ink)}
@media(max-width:900px){
  .band .wrap{grid-template-columns:1fr}
}
/* Sur le teal profond, le bouton clair doit être blanc sur bordure blanche :
   le texte quasi-noir n'y donnait que 2,04:1. */
.geo .btn--light{border-color:rgba(255,255,255,.5);color:#fff}
.geo .btn--light span{color:#fff}
.geo .btn--light::after{background:#fff}
.geo .btn--light:hover{border-color:#fff}
.geo .btn--light:hover span{color:var(--ink)}
/* ---------- très petits écrans (iPhone SE et assimilés) ----------
   Le logo complet occupait 274 px sur 320 et poussait le bouton du menu
   hors de l'écran. La mention secondaire disparaît en dessous de 400 px. */
@media(max-width:400px){
  .logo em{display:none}
  .logo{font-size:.95rem;letter-spacing:-.01em}
  :root{--gut:18px}
}
/* ---------- zones tactiles ----------
   Les liens de listes faisaient 16 px de haut : sous le minimum
   recommandé de 24 px pour une cible tactile. */
/* Cibles tactiles : le minimum de 24 px vaut à toutes les largeurs,
   pas seulement sur mobile. */
.ftr-top ul a,.mega-sub a,.mlist--liens a{display:inline-block;padding:.45rem 0}
.crumb a,.crumb span{display:inline-block;padding:.3rem 0}
.silo-note a,.lever-link,.answer-src a{display:inline-block;padding:.4rem 0}
.sommaire a{padding:.35rem 0}
.art-meta span{display:inline-block;padding:.2rem 0}
@media(min-width:1081px){
  .hdr-tel{display:inline-flex;align-items:center;min-height:24px}
}
.lever-link{min-height:24px;align-items:center}
@media(max-width:900px){
  .ftr-bot span{line-height:2}
}
.ftr-bot a{color:inherit;text-decoration:none;transition:color .25s;display:inline-block;padding:.35rem 0}
.ftr-bot a:hover{color:var(--orange-light)}
.lien-cookies{background:none;border:0;padding:.35rem 0;font:inherit;color:inherit;
  cursor:pointer;transition:color .25s}
.lien-cookies:hover{color:var(--orange-light)}
.faq .ans{padding:0 3rem 1.8rem 0;color:var(--ink-60);font-size:1rem;max-width:none}
.contact-list .k{font-family:var(--mono);font-size:.71875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-40);width:110px;flex:none}
.card .date{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-40);transition:color .4s}
.card .more{font-family:var(--mono);font-size:.71875rem;letter-spacing:.09em;text-transform:uppercase;
  display:flex;align-items:center;gap:.5rem;color:var(--orange-text);margin-top:.4rem}
/* ---------- en-tête de page service ---------- */
.shero{padding:clamp(2.5rem,5vw,4rem) 0 0;border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.crumb{font-family:var(--mono);font-size:.71875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-40);display:flex;gap:.6rem;margin:0 0 clamp(2rem,4vw,3.5rem)}
.crumb a:hover{color:var(--orange-text)}
.shero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.72fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
.shero h1{margin:0;font-size:clamp(2rem,4.7vw,4.05rem)}
/* dimensionné pour le mot le plus long du catalogue ("Automatisation"),
   sinon le masque d'animation coupe la fin du mot */
.shero .sub{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink-60);line-height:1.5;max-width:46ch;margin:2rem 0 0}
.shero-num{position:absolute;right:-.5%;bottom:-3.5rem;font-family:var(--disp);font-weight:800;
  font-variation-settings:"wdth" 125;font-size:clamp(9rem,24vw,22rem);line-height:.7;color:#EDEBE6;
  z-index:0;user-select:none;letter-spacing:-.06em}
.shero>.wrap{position:relative;z-index:1}
@media(max-width:900px){.shero-grid{grid-template-columns:1fr}}
/* bloc En clair */
.enclair{border:1px solid var(--ink);padding:1.75rem;background:var(--paper)}
.enclair .tag{display:inline-block;font-family:var(--mono);font-size:.71875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper);background:var(--ink);padding:.35rem .6rem;margin-bottom:1.1rem}
.enclair p{margin:0;font-size:1rem;line-height:1.6}
.enclair p + p{margin-top:.8rem}
/* ---------- trois leviers ---------- */
.levers{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-left:-2rem;width:calc(100% + 2rem)}
.levers::before{content:"";position:absolute;top:0;left:2rem;right:0;height:1px;background:var(--ink)}
.lever{padding:2.25rem 2rem 2.5rem 2rem;border-right:1px solid var(--rule);position:relative}
.lever:last-child{border-right:0}
.lever .n{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 118;font-size:clamp(3rem,5vw,4.5rem);
  line-height:.85;letter-spacing:-.04em;color:#FFC9A8;display:block;margin-bottom:1.1rem;transition:color .4s var(--ease)}
.lever:hover .n{color:var(--orange)}
.lever h3{margin:0 0 .35rem;font-size:1.75rem;font-weight:700;letter-spacing:-.03em}
.lever .k{font-family:var(--mono);font-size:.71875rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange-text);display:block;margin-bottom:1.1rem}
.lever p{margin:0 0 1.25rem;font-size:.95rem;color:var(--ink-60);line-height:1.55;max-width:34ch}
.lever ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.lever li{font-size:.875rem;color:var(--ink-60);padding-left:1.1rem;position:relative}
.lever li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--orange-text)}
.lever--geo{background:var(--teal-deep);color:#fff;margin-left:-1px}
.lever--geo .n{color:rgba(255,255,255,.34)}
.lever--geo:hover .n{color:var(--orange)}
.lever--geo .k{color:rgba(255,255,255,.82)}
.lever--geo p,.lever--geo li{color:rgba(255,255,255,.8)}
.lever--geo li::before{background:var(--orange-light)}
.lever--geo .lever-link{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.lever--geo .lever-link:hover{border-color:#fff}
.lever--geo .flag{position:absolute;top:0;right:0;background:var(--orange);color:var(--ink);font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .65rem}
@media(max-width:900px){
  .levers{grid-template-columns:1fr;margin-left:0;width:100%}
  .levers::before{left:0}
  .lever{border-right:0;border-bottom:1px solid var(--rule);padding:2.25rem 0 2.5rem}
  /* en pile, le bloc coloré déborde jusqu'aux bords de l'écran :
     son texte retombe exactement sur la marge de page, comme les autres */
  .lever--geo{margin:0 calc(var(--gut) * -1);width:calc(100% + var(--gut) * 2);
    padding:2.5rem var(--gut)}
}
/* ---------- méthode ---------- */
.steps{border-top:1px solid var(--ink)}
.step{display:grid;grid-template-columns:100px minmax(0,.9fr) minmax(0,1.3fr);gap:1.5rem;
  padding:1.9rem 0;border-bottom:1px solid var(--rule);align-items:start}
.step .n{font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.09em;color:var(--orange-text);padding-top:.35rem}
.step h3{margin:0;font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.step p{margin:0;color:var(--ink-60);font-size:.95rem;line-height:1.6}
.step .dur{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-text);display:block;margin-top:.6rem}
@media(max-width:800px){.step{grid-template-columns:60px 1fr}.step p{grid-column:2}}
/* ---------- tarifs ---------- */
.tarifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.tarif{background:var(--paper);padding:2.25rem 2rem 2.5rem;display:flex;flex-direction:column}
.tarif--hi{background:var(--orange);color:var(--ink);position:relative}
.tarif--hi::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ink)}
.tarif .ribbon{position:absolute;top:0;right:0;background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.45rem .7rem}
.tarif h3{margin:0 0 .3rem;font-size:1.4rem;font-weight:700;letter-spacing:-.025em}
.tarif .k{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange-text);display:block;margin-bottom:1.5rem}
.tarif--hi .k{color:var(--ink)}
.tarif .amt{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 112;font-size:2.75rem;
  letter-spacing:-.035em;line-height:1;margin:0}
.tarif--hi .amt{color:var(--ink)}
.tarif .amt small{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-40);font-weight:500;margin-bottom:.5rem}
.tarif--hi .amt small{color:rgba(14,14,14,.82)}
.tarif ul{list-style:none;margin:1.75rem 0 2rem;padding:0;display:grid;gap:.55rem;flex:1}
.tarif li{font-size:.9rem;color:var(--ink-60);padding-left:1.1rem;position:relative;line-height:1.5}
.tarif--hi li{color:rgba(14,14,14,.86)}
.tarif li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--orange-text)}
.tarif--hi li::before{background:var(--ink)}
@media(max-width:900px){.tarifs{grid-template-columns:1fr}}
/* ---------- CTA bande ---------- */

@media(max-width:800px){.band .wrap{grid-template-columns:1fr}}
.lever-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font-family:var(--mono);font-size:.71875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--orange-text);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .35s var(--ease)}
.lever-link:hover{border-color:var(--orange)}
.lever-link span{transition:transform .35s var(--ease)}
.lever-link:hover span{transform:translateX(4px)}
.lever{display:flex;flex-direction:column}
.lever ul{flex:1}
/* ---------- silo de contenu ---------- */
.silo-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem;margin-top:2.5rem}
.silo-note{margin:0;font-size:.9rem;color:var(--ink-60)}
.silo-note a{border-bottom:1px solid var(--rule);padding-bottom:1px;transition:border-color .3s,color .3s}
.silo-note a:hover{color:var(--orange-text);border-color:var(--orange-text)}
/* ---------- mention hors taxes ---------- */
.tarif .amt i{font-style:normal;font-family:var(--mono);font-size:.5625rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;vertical-align:.9em;margin-left:.35em;opacity:.75}
/* ---------- grille de quatre formules ---------- */
.tarifs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tarifs--4 .amt{font-size:2.15rem}
.tarifs--4 .tarif{padding:2rem 1.6rem 2.25rem}
@media(max-width:1180px){.tarifs--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.tarifs--4{grid-template-columns:1fr}}
/* ---------- bande de chiffres ----------
   Sur le teal profond, le #FA5F12 donne 3,02:1 : conforme pour les grandes
   tailles uniquement. Il n'est donc utilisé que sur les chiffres et le mot
   accentué du titre. Les libellés restent en blanc. */
.chiffres{background:var(--teal-deep);color:#fff;padding:clamp(4rem,8vw,7rem) 0;position:relative;overflow:hidden}
.chiffres .eyebrow{color:rgba(255,255,255,.75)}
.chiffres .eyebrow::before{background:var(--orange)}
.chiffres h2{color:#fff}
.chiffres-head{max-width:52ch}
.chiffres-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin:clamp(2.5rem,5vw,4rem) 0 0;border-top:1px solid rgba(255,255,255,.18)}
.ch{padding:1.75rem 1.5rem 1.75rem 0;border-bottom:1px solid rgba(255,255,255,.18)}
.ch b{display:block;font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 112;
  font-size:clamp(2.2rem,4.5vw,3.4rem);letter-spacing:-.03em;line-height:1;white-space:nowrap;
  color:var(--orange)}
.ch small{display:block;margin-top:.6rem;font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.secteurs{margin-top:clamp(2.5rem,5vw,3.5rem)}
.secteurs-intro{max-width:56ch;color:rgba(255,255,255,.8);font-size:1rem;line-height:1.6;margin:0 0 1.5rem}
.secteurs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.secteurs li{font-family:var(--mono);font-size:.71875rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.28);padding:.55rem .85rem;
  color:rgba(255,255,255,.9);transition:border-color .3s,color .3s}
.secteurs li:hover{border-color:var(--orange-light);color:var(--orange-light)}
@media(max-width:900px){.chiffres-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- comment c'est construit ---------- */
.constr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.cst{padding:2.25rem 2.5rem 2.5rem 0;border-bottom:1px solid var(--rule);position:relative}
.cst:nth-child(even){padding-left:2.5rem;border-left:1px solid var(--rule)}
.cst-n{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 118;
  font-size:clamp(2.6rem,4.5vw,3.6rem);line-height:.85;letter-spacing:-.04em;
  color:#FFC9A8;display:block;margin-bottom:1rem;transition:color .4s var(--ease)}
.cst:hover .cst-n{color:var(--orange)}
.cst h3{margin:0 0 .8rem;font-size:1.3rem;font-weight:600;letter-spacing:-.025em;line-height:1.25}
.cst p{margin:0;color:var(--ink-60);font-size:.96rem;line-height:1.6;max-width:52ch}
@media(max-width:800px){
  .constr{grid-template-columns:1fr}
  .cst,.cst:nth-child(even){padding:2rem 0 2.25rem;border-left:0}
}
/* ---------- liste « compris » ---------- */
.compris{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,5vw,4rem);border-top:1px solid var(--ink)}
.compris li{padding:1.25rem 0;border-bottom:1px solid var(--rule);position:relative;
  padding-left:1.6rem;color:var(--ink-60);font-size:.98rem;line-height:1.55}
.compris li::before{content:"";position:absolute;left:0;top:1.62em;width:7px;height:7px;background:var(--orange)}
.compris b{display:block;color:var(--ink);font-weight:600;font-size:1.05rem;letter-spacing:-.015em;margin-bottom:.25rem}
@media(max-width:800px){.compris{grid-template-columns:1fr}}
.chiffres-lede{max-width:52ch;margin:1.75rem 0 0;color:rgba(255,255,255,.85);font-size:1.02rem;line-height:1.6}
.lien-inline{display:inline-block;padding:.25rem 0;text-decoration:underline;text-underline-offset:3px}
.lever--geo{background:var(--orange);color:var(--ink);margin-left:-1px}
.lever--geo .n{color:rgba(14,14,14,.24)}
.lever--geo:hover .n{color:var(--ink)}
.lever--geo .k{color:var(--ink)}
.lever--geo p,.lever--geo li{color:rgba(14,14,14,.86)}
.lever--geo li::before{background:var(--ink)}
.lever--geo .lever-link{color:var(--ink);border-bottom-color:rgba(14,14,14,.35)}
.lever--geo .lever-link:hover{border-color:var(--ink)}
.lever--geo .flag{position:absolute;top:0;right:0;background:var(--ink);color:#fff;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .65rem}
.tarif--hi .ribbon{position:absolute;top:0;right:0;background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.45rem .7rem}
.tarif .amt i{font-style:normal;font-family:var(--mono);font-size:.5625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;vertical-align:.9em;margin-left:.35em;opacity:.75}
.tarif .amt i{font-style:normal;font-family:var(--mono);font-size:.5625rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;vertical-align:.9em;margin-left:.35em;opacity:.75}
.chiffres-lede{max-width:56ch;margin:1.75rem 0 0;color:rgba(255,255,255,.85);font-size:1.02rem;line-height:1.6}
/* ---------- section « ce qui me distingue » ---------- */

/* ---------- page Qui suis-je ---------- */
.qsj-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:end;margin-top:clamp(2rem,4vw,3rem)}
.qsj-portrait{margin:0;position:relative}
.qsj-portrait::before{content:"";position:absolute;inset:18% -6% -4% 12%;background:var(--orange-pale);z-index:0}
.qsj-portrait img{position:relative;z-index:1;display:block;width:100%;height:auto}
@media(max-width:900px){
  .qsj-grid{grid-template-columns:1fr}
  .qsj-portrait{max-width:340px;margin-top:1rem}
}
/* ---------- liste des métiers ---------- */
.metiers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.metiers li{font-family:var(--mono);font-size:.71875rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;border:1px solid var(--rule);padding:.6rem .9rem;color:var(--ink-60);
  transition:border-color .3s,color .3s}
.metiers li:hover{border-color:var(--orange);color:var(--orange-text)}
.metiers li:last-child{border-color:var(--orange);color:var(--orange-text)}
/* ---------- récit du parcours ---------- */
.recit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:1px solid var(--ink)}
.rc{padding:2rem 2.5rem 2.25rem 0;border-bottom:1px solid var(--rule);position:relative}
.rc:nth-child(even){padding-left:2.5rem;border-left:1px solid var(--rule)}
.rc:nth-child(3),.rc:nth-child(4){border-bottom:0}
.rc-an{display:flex;align-items:center;gap:.65rem;font-family:var(--mono);font-size:.75rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--orange);
  margin-bottom:.9rem}
.rc-an::before{content:"";width:18px;height:3px;background:var(--orange);flex:none}
.rc p{margin:0;font-size:1rem;line-height:1.68;color:var(--ink-60)}
.rc strong{display:block;color:var(--ink);font-weight:600;font-size:1.15rem;
  letter-spacing:-.02em;line-height:1.3;margin-bottom:.55rem}
@media(max-width:900px){
  .recit{grid-template-columns:1fr}
  .rc,.rc:nth-child(even){padding:1.75rem 0 1.9rem;border-left:0;border-bottom:1px solid var(--rule)}
  .rc:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
}
/* ---------- références ---------- */
.refs{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.refs li{background:var(--paper)}
.refs li::before{content:none}
.refs a{display:block;padding:1.4rem 1.6rem 1.5rem;position:relative;
  transition:background .3s var(--ease)}
.refs a::after{content:"↗";position:absolute;top:1.35rem;right:1.4rem;font-size:.8rem;
  color:var(--orange);opacity:0;transform:translate(-4px,4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.refs a:hover{background:var(--mist)}
.refs a:hover::after{opacity:1;transform:none}
.refs a:hover b{color:var(--orange-text)}
.refs b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;
  margin-bottom:.4rem;padding-right:1.5rem;transition:color .3s}
.refs span{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--orange-text)}
.refs-note{max-width:76ch;margin:2rem 0 0;font-size:.95rem;line-height:1.6;color:var(--ink-60)}
@media(max-width:1020px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.refs{grid-template-columns:1fr}}
.refs-foot{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.5rem);flex-wrap:wrap;margin-top:2rem}
.refs-foot .refs-note{margin:0;flex:1 1 24ch}
/* ---------- familles de références ---------- */
.fam{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--ink);padding-top:2rem}
.fam-head{display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.25rem,3vw,2.5rem);align-items:start;margin-bottom:2rem}
.fam-n{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 118;
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:.85;letter-spacing:-.04em;color:#FFC9A8}
.fam-head h3{margin:0;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.2}
.fam-head p{margin:0;color:var(--ink-60);font-size:.96rem;line-height:1.6}
@media(max-width:820px){
  .fam-head{grid-template-columns:1fr;gap:.75rem}
  .fam-n{font-size:1.9rem}
}
.reflist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.reflist li{background:var(--paper);border-bottom:1px solid var(--rule)}
.reflist li:nth-child(odd){border-right:1px solid var(--rule)}
.reflist li::before{content:none}
.reflist a{display:block;padding:1.5rem 1.7rem 1.6rem;position:relative;
  transition:background .3s var(--ease)}
.reflist a::after{content:"↗";position:absolute;top:1.45rem;right:1.5rem;font-size:.85rem;
  color:var(--orange);opacity:0;transform:translate(-4px,4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.reflist a:hover{background:var(--mist)}
.reflist a:hover::after{opacity:1;transform:none}
.reflist a:hover b{color:var(--orange-text)}
.reflist b{display:block;font-size:1.08rem;font-weight:600;letter-spacing:-.015em;
  line-height:1.25;margin-bottom:.35rem;padding-right:1.5rem;transition:color .3s}
.reflist .sec-lbl{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--orange-text);margin-bottom:.7rem}
.reflist .desc{display:block;font-size:.9rem;line-height:1.55;color:var(--ink-60)}
@media(max-width:760px){
  .reflist{grid-template-columns:1fr}
  .reflist li:nth-child(odd){border-right:0}
}
.fam-note{max-width:78ch;margin:clamp(2.5rem,5vw,3.5rem) 0 0;font-size:1rem;line-height:1.65;
  color:var(--ink-60);border-left:4px solid var(--orange);padding-left:1.5rem}
/* ---------- coordonnées ---------- */
.coord{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(255,255,255,.18)}
.co{display:block;padding:2rem 2.5rem 2.25rem 0;border-bottom:1px solid rgba(255,255,255,.18);
  transition:background .3s var(--ease)}
.co:nth-child(n+2){padding-left:2.5rem;border-left:1px solid rgba(255,255,255,.18)}
.co-lbl{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.75rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--orange);
  margin-bottom:.9rem}
.co-lbl::before{content:"";width:18px;height:3px;background:var(--orange);flex:none}
.co b{display:block;font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:600;letter-spacing:-.02em;
  line-height:1.25;margin-bottom:.6rem;color:#fff;transition:color .3s}
.co:hover b{color:var(--orange)}
.co-sub{display:block;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.78)}
.coord-note{margin-top:clamp(2rem,4vw,2.75rem)}
.coord-note p{margin:0;max-width:76ch;font-size:1rem;line-height:1.65;color:rgba(255,255,255,.82)}
.coord-note b{color:#fff;font-weight:600}
@media(max-width:900px){
  .coord{grid-template-columns:1fr}
  .co,.co:nth-child(n+2){padding:1.75rem 0 1.9rem;border-left:0}
}
/* ---------- formulaire sur fond clair ---------- */
#contact .form-card{background:var(--paper);border:1px solid var(--rule);padding:clamp(1.75rem,3vw,2.5rem)}
#contact .fld label{color:var(--ink-60)}
#contact .fld input,#contact .fld select,#contact .fld textarea{
  background:var(--paper);border-color:var(--rule);color:var(--ink)}
#contact .fld input:focus,#contact .fld select:focus,#contact .fld textarea:focus{border-color:var(--orange)}
#contact .fine{color:var(--ink-40)}
.compris--form{grid-template-columns:1fr;margin-top:2.25rem}
.compris--form li{padding:.9rem 0 .9rem 1.6rem}
.compris--form li::before{top:1.28em}
.compris--form b{font-size:1rem}
@media(max-width:900px){
  .auteur-liens .btn{width:100%;justify-content:center}
  .ftr-bot span{line-height:2}
}
/* ---------- filtres par catégorie ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filtre{font-family:var(--mono);font-size:.71875rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;border:1px solid var(--rule);background:transparent;color:var(--ink-60);
  padding:.7rem 1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;
  transition:border-color .25s,color .25s,background .25s}
.filtre span{font-size:.6875rem;opacity:.7}
.filtre:hover{border-color:var(--ink);color:var(--ink)}
.filtre.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.filtre.is-on span{opacity:.65}
.card[hidden]{display:none}
.vide{margin:2rem 0 0;color:var(--ink-60);font-size:1rem}
.qui .btn--light,.band .btn--light,.tarif--hi .btn--light,.cta-cat .btn--light{border-color:rgba(14,14,14,.4);color:var(--ink);font-weight:600}
.qui .btn--light::after,.band .btn--light::after,.tarif--hi .btn--light::after,.cta-cat .btn--light::after{background:var(--ink)}
.qui .btn--light:hover,.band .btn--light:hover,.tarif--hi .btn--light:hover,.cta-cat .btn--light:hover{color:var(--paper);border-color:var(--ink)}
/* ---------- en-tête d'article ---------- */
.art-head{padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem)}
.art-head .disp{max-width:20ch}
.art-chapo{max-width:62ch;margin:1.75rem 0 0;font-size:clamp(1.1rem,1.6vw,1.3rem);
  line-height:1.55;color:var(--ink-60)}
.art-meta{display:flex;flex-wrap:wrap;gap:1.75rem;margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:.71875rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-40)}
.art-meta b{color:var(--ink-60);font-weight:600}
/* ---------- corps et colonne latérale ---------- */
.art-wrap{padding-top:0}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2.5rem,5vw,4.5rem);
  align-items:stretch}
/* La colonne doit s'étirer sur toute la hauteur de l'article, sinon le bloc
   collant n'a aucune course et disparaît dès le premier défilement. */
.art-aside{height:100%}
.art-corps{max-width:72ch}
.art-corps h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.025em;
  line-height:1.2;margin:2.75rem 0 1rem;scroll-margin-top:110px}
.art-corps h3{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;margin:2rem 0 .7rem}
.art-corps p{margin:0 0 1.25rem;font-size:1.05rem;line-height:1.72;color:var(--ink-60)}
.art-corps strong{color:var(--ink);font-weight:600}
.art-intro{font-size:1.15rem !important;line-height:1.65 !important;color:var(--ink) !important;
  border-left:4px solid var(--orange);padding-left:1.5rem;margin-bottom:2rem !important}
.art-corps blockquote{margin:2.25rem 0;padding:1.75rem 2rem;background:var(--mist);
  border-left:4px solid var(--orange)}
.art-corps blockquote p{margin:0;font-size:1.15rem;line-height:1.55;color:var(--ink);font-weight:500}
.art-fin{margin-top:2.75rem;padding:1.75rem 2rem;background:var(--orange-pale)}
.art-fin p{margin:0;color:var(--ink);font-size:1rem;line-height:1.65}
.art-fin b{font-weight:600}
/* ---------- bloc latéral collant ---------- */
.aside-collant{position:sticky;top:110px;display:grid;gap:1.25rem}
/* Fond orange : le noir est réservé au pied de page. */
.cta-cat{background:var(--orange);color:var(--ink);padding:1.75rem 1.6rem 1.6rem}
.cta-lbl{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.6875rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 .9rem}
.cta-lbl::before{content:"";width:16px;height:3px;background:var(--ink);flex:none}
.cta-titre{margin:0 0 .7rem;font-size:1.15rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.cta-txt{margin:0 0 1.35rem;font-size:.92rem;line-height:1.55;color:rgba(14,14,14,.82)}
.cta-cat .btn{width:100%;justify-content:center}
.cta-fine{margin:.9rem 0 0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(14,14,14,.72);text-align:center;line-height:1.7}
.sommaire{border:1px solid var(--rule);padding:1.5rem 1.6rem}
.som-lbl{margin:0 0 .9rem;font-family:var(--mono);font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.sommaire ol{margin:0;padding:0;list-style:none;counter-reset:s}
.sommaire li{counter-increment:s;margin-bottom:.55rem}
.sommaire li:last-child{margin-bottom:0}
.sommaire a{display:flex;gap:.7rem;font-size:.92rem;line-height:1.45;color:var(--ink-60)}
.sommaire a::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.6875rem;
  color:var(--orange);padding-top:.3em;flex:none}
.sommaire a:hover{color:var(--orange-text)}
@media(max-width:1080px){
  .art-grid{grid-template-columns:1fr}
  .aside-collant{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
}
@media(max-width:700px){.aside-collant{grid-template-columns:1fr}}
/* ---------- encart auteur ---------- */
.auteur{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.auteur p{margin:0 0 1.5rem;font-size:1.05rem;line-height:1.7;color:var(--ink-60);max-width:60ch}
.auteur-liens{display:flex;gap:.85rem;flex-wrap:wrap}
@media(max-width:900px){.auteur{grid-template-columns:1fr}}
/* ---------- listes dans les articles ---------- */
.art-liste{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.7rem}
.art-liste li{position:relative;padding-left:1.35rem;font-size:1.05rem;line-height:1.6;color:var(--ink-60)}
.art-liste li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--orange);flex:none}
.art-liste strong{color:var(--ink);font-weight:600}
/* ---------- pages légales ---------- */
.legal h2{margin-top:3rem}
.legal h3{margin-top:1.75rem}
.legal-dl{margin:0 0 1.5rem;padding:0;border-top:1px solid var(--rule)}
.legal-dl > div{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:1.5rem;
  padding:.9rem 0;border-bottom:1px solid var(--rule)}
.legal-dl dt{margin:0;font-family:var(--mono);font-size:.71875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-40);padding-top:.25em}
.legal-dl dd{margin:0;font-size:1rem;line-height:1.5;color:var(--ink)}
.legal-note{margin:1.75rem 0;padding:1.35rem 1.6rem;background:var(--orange-pale);
  border-left:4px solid var(--orange)}
.legal-note p{margin:0;font-size:.96rem;line-height:1.6;color:var(--ink)}
.legal p a{display:inline-block;padding:.2rem 0;text-decoration:underline;text-underline-offset:3px;color:var(--orange-text)}
.aremplir{display:inline-block;background:var(--orange);color:var(--ink);font-weight:600;
  padding:.1rem .45rem;font-size:.92em}
.legal-liens{border:1px solid var(--rule);padding:1.5rem 1.6rem}
.legal-liens ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.legal-liens a{font-size:.92rem;color:var(--ink-60);display:inline-block;padding:.25rem 0}
.legal-liens a:hover{color:var(--orange-text)}
@media(max-width:600px){.legal-dl > div{grid-template-columns:1fr;gap:.3rem}}

/* ================================================================
   Classes propres au thème WordPress
   ================================================================ */

/* Lien d'évitement : visible uniquement au clavier. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:.9rem 1.4rem;font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.skip-link:focus{left:0}

/* Le contenu des pages de service reprend la largeur pleine. */
.contenu-service > *{max-width:none}

/* Pied de page */
.ftr-baseline{color:rgba(255,255,255,.6);max-width:32ch;font-size:.95rem;margin:0}
.ftr-terne{color:rgba(255,255,255,.6)}

/* Pagination des listes d'articles */
.pagination{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--rule);padding-top:1.75rem}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .9rem;border:1px solid var(--rule);
  font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.07em;
  color:var(--ink-60);transition:border-color .25s,color .25s,background .25s}
.pagination .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination .screen-reader-text{position:absolute;left:-9999px}

/* Champ de recherche */
.wp-block-search__input,input[type="search"]{width:100%;max-width:34rem;padding:.9rem 1rem;
  border:1px solid var(--rule);background:var(--paper);font:inherit;color:var(--ink)}
input[type="search"]:focus{border-color:var(--orange);outline:none}

/* Blocs Gutenberg : correspondance avec la mise en forme du site. */
.wp-block-group.enclair{background:transparent}
.wp-block-details{margin:0}
.art-corps .wp-block-heading{scroll-margin-top:110px}
.art-corps figure.wp-block-image{margin:2rem 0}
.art-corps figure.wp-block-image img{width:100%;height:auto;display:block}
.art-corps .wp-block-quote{margin:2.25rem 0;padding:1.75rem 2rem;background:var(--mist);
  border-left:4px solid var(--orange)}
.art-corps .wp-block-quote p{margin:0;font-size:1.15rem;line-height:1.55;color:var(--ink);font-weight:500}

/* Le bas de page tient sur une ligne : deux blocs seulement. */
.ftr-bot{justify-content:space-between;align-items:baseline}
.ftr-legal{text-align:right}
/* Le bouton doit reprendre exactement l'aspect des liens voisins. */
.lien-cookies{text-transform:uppercase;letter-spacing:.09em;font-size:inherit;
  font-family:var(--mono);font-weight:inherit;line-height:2}
@media(max-width:760px){
  .ftr-bot{flex-direction:column;gap:.5rem}
  .ftr-legal{text-align:left}
}

/* ================================================================
   Corrections responsives
   ================================================================ */

/* Les éléments décoratifs en position absolue (grand numéro de section,
   étiquette d'angle) dépassaient de quelques pixels sur les largeurs
   intermédiaires et provoquaient un défilement horizontal.
   « clip » découpe sans créer de conteneur de défilement, ce qui préserve
   le comportement collant du bloc latéral des articles. */
.shero{overflow:hidden}
/* On découpe uniquement les blocs qui débordent, jamais la page entière :
   un découpage global crée un contexte d'empilement qui casse le fondu
   du curseur et le positionnement fixe. */
.levers,.sec.geo,.chiffres,.band{overflow:hidden}

/* Entre 900 et 1180 px, les quatre colonnes du pied de page tombaient
   à 149 px : les libellés revenaient à la ligne sur deux niveaux. */
@media(max-width:1180px){
  .ftr-top{grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
  .ftr-top > div:first-child{grid-column:1 / -1;margin-bottom:1rem}
}
@media(max-width:820px){
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .ftr-top{grid-template-columns:1fr}
}

/* La mention légale sous les tarifs restait à 10 px sur un texte long. */
.srv-note{font-size:.75rem;line-height:1.8}

/* ================================================================
   Curseur et portrait : corrections mobile
   ================================================================ */

/* ================================================================
   Version mobile
   Le mobile passe en premier : c'est là que se fait l'essentiel des
   visites. L'ordre de lecture prime sur la composition graphique.
   ================================================================ */
@media(max-width:1080px){

  /* --- en-tête : la marque et le menu, rien d'autre --- */
  .hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .burger{flex:none}

  /* --- hero : on lit d'abord de quoi il s'agit, l'image vient ensuite --- */
  .hero-in{display:flex;flex-direction:column;min-height:0}
  .hero-body{order:1;max-width:100%;padding-top:clamp(1.5rem,5vw,2.5rem)}
  .hero-portrait{order:2;position:relative;right:auto;bottom:auto;
    width:100%;max-width:none;height:auto;margin:2rem auto 0;display:block}
  .hero-portrait img{width:100%;height:auto;display:block}
  .hero-foot{order:3}
  .hero-block{display:none}
  .hero-vert{display:none}
}

@media(max-width:760px){
  /* Le titre garde de l'impact sans écraser l'écran. */
  .hero-body .disp{font-size:clamp(2.6rem,13vw,4rem)}
  .hero-lede{font-size:1rem;line-height:1.6}
  .hero-cta{width:100%}
  .hero-cta .btn{width:100%;justify-content:center}

  /* Les boutons pleine largeur sont plus faciles à viser au pouce.
     On exclut le bouton d'en-tête, masqué à cette largeur. */
  main .btn{width:100%;justify-content:center}
  .filtres .filtre{width:auto}

  /* La barre de réassurance s'empile plutôt que de se comprimer. */
  .hero-foot{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .hfacts{flex-direction:column;gap:.6rem}
}

/* Le fond déclaré sur body est propagé au canevas du navigateur, et le
   canevas n'entre pas dans le calcul des fondus. Le curseur en mode
   « différence » n'avait donc rien avec quoi se fondre sur les sections
   claires : il y restait blanc, donc invisible. On peint le fond sur un
   élément réel pour lui redonner un arrière-plan. */
.page{background:var(--paper)}

/* Le portrait de la section « qui suis-je » était recadré sur les petits
   écrans, comme l'était celui de l'en-tête : même traitement, pleine
   largeur et image entière. */
@media(max-width:1080px){
  .qui-grid{display:flex;flex-direction:column}
  .qui-txt{order:1}
  .qui-photo{order:2;position:relative;width:100%;height:auto;min-height:0;
    margin:2rem 0 0;aspect-ratio:auto;overflow:visible}
  .qui-photo img{position:relative;inset:auto;width:100%;max-width:none;height:auto;
    object-fit:contain;display:block;margin:0 auto}
  .qui-vert{display:none}
}

/* Pied de la liste d'articles : bouton de chargement et message de fin. */
.liste-foot{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;flex-direction:column;
  align-items:center;gap:1rem}
.liste-foot .btn[disabled]{opacity:.55;pointer-events:none}
.liste-fin{margin:0;font-family:var(--mono);font-size:.71875rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-40)}

/* Tolérance à l'ancien balisage des pages légales.
   Une première version de l'import perdait la balise de liste de
   définitions et ne laissait que des blocs contenant un terme et sa
   valeur. On les met en forme de la même façon, pour que ces pages
   restent lisibles même sans réimport du contenu. */
.legal div:has(> dt){display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:1.5rem;padding:.9rem 0;border-bottom:1px solid var(--rule)}
.legal div:has(> dt):first-of-type{border-top:1px solid var(--rule)}
.legal dt{margin:0;font-family:var(--mono);font-size:.71875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);padding-top:.25em}
.legal dd{margin:0;font-size:1rem;line-height:1.5;color:var(--ink)}
@media(max-width:600px){
  .legal div:has(> dt){grid-template-columns:1fr;gap:.3rem}
}

/* En mobile, le portrait de la section « qui suis-je » se centre.
   Sa taille sur ordinateur reste celle d'origine. */
@media(max-width:1080px){
  .qui-photo img{max-width:min(100%, 460px);margin:0 auto}
}

/* ================================================================
   Filet de sécurité contre les mises en page automatiques
   ================================================================
   Les classes de mise en page du cœur sont retirées côté serveur
   (voir inc/blocs-mise-en-page.php). Si l'une passait malgré tout, la
   contrainte de largeur qu'elle applique repose sur deux variables :
   les neutraliser suffit, sans toucher aux marges ni aux largeurs
   définies par le thème. */
main{--wp--style--global--content-size:100%;--wp--style--global--wide-size:100%}
main .wp-block-group{box-sizing:border-box}

/* Les marges automatiques entre blocs sont annulées avec une spécificité
   volontairement basse : le cœur les pose sans spécificité, le thème les
   pose avec des classes. Les règles écrites à la main restent donc
   prioritaires, seules celles de l'éditeur sautent. */
main :where(.is-layout-flow) > *,
main :where(.is-layout-constrained) > *{margin-block-start:0;margin-block-end:0}

/* Protection renforcée : si le cœur contraint malgré tout la largeur, on
   la rend à ses conteneurs. Mieux vaut une accroche un peu large qu'une
   page entière repliée sur une colonne. */
main .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width:none;margin-left:0;margin-right:0}
main .wrap{width:100%;max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:var(--gut);padding-right:var(--gut)}

/* Filet : si un conteneur intermédiaire réapparaissait, il deviendrait
   l'unique enfant des grilles et ferait tout s'empiler. « display:contents »
   le rend transparent pour la mise en page, sans rien changer d'autre. */
.wp-block-group > .wp-block-group__inner-container{display:contents}

/* ================================================================
   Pied de page en version mobile
   ================================================================
   Sur une colonne unique, le pied de page atteignait plus de mille
   pixels de haut pour une quinzaine de liens. Les deux listes passent
   côte à côte, les espacements se resserrent et la marque diminue. */
@media(max-width:640px){
  .ftr{padding:clamp(2.5rem,8vw,3.5rem) 0 1.5rem}

  .ftr-mark{font-size:clamp(2.2rem,11vw,3rem);line-height:.9}
  .ftr-baseline{font-size:.9rem;line-height:1.5;max-width:38ch}

  /* Deux colonnes de liens, la marque et les coordonnées en pleine largeur. */
  .ftr-top{grid-template-columns:1fr 1fr;gap:2rem 1.5rem;padding-bottom:2rem}
  .ftr-top > div:first-child{grid-column:1 / -1;margin-bottom:.5rem}
  .ftr-top > div:last-child{grid-column:1 / -1;padding-top:1.5rem;
    border-top:1px solid rgba(255,255,255,.14)}

  .ftr-h{margin-bottom:.9rem}
  .ftr ul{gap:.1rem;font-size:.92rem}
  .ftr-top ul a{padding:.4rem 0}

  /* Les coordonnées se lisent mieux sur deux colonnes que sur quatre lignes. */
  .ftr-top > div:last-child ul{grid-template-columns:1fr 1fr;gap:.1rem 1.5rem}
  .ftr-terne{font-size:.85rem}

  /* Bas de page : trois lignes serrées plutôt qu'un pavé aéré. */
  .ftr-bot{gap:.75rem;padding-top:1.5rem;font-size:.6875rem;letter-spacing:.1em}
  .ftr-bot a,.lien-cookies{padding:.2rem 0}
  .ftr-legal{line-height:2}
}

/* En dessous de 380 px, les deux colonnes de liens tiennent encore :
   c'est la liste des coordonnées qui doit repasser sur une colonne. */
@media(max-width:380px){
  .ftr-top > div:last-child ul{grid-template-columns:1fr}
}

/* ================================================================
   En-tête de la page « Qui suis-je »
   ================================================================
   Le texte était aligné en bas d'une colonne dont la hauteur venait du
   portrait : un grand vide se creusait au-dessus du titre. Les deux
   colonnes s'alignent maintenant sur leur centre, et le portrait est
   ramené à une taille qui accompagne le texte au lieu de l'écraser. */
.qsj-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.6fr);align-items:center}
.qsj-portrait{max-width:340px;margin-left:auto}
.qsj-portrait::before{inset:14% -5% -3% 10%}

@media(max-width:900px){
  .qsj-grid{grid-template-columns:1fr;gap:1.5rem}
  .qsj-portrait{max-width:300px;margin:0 auto}
}

/* Le badge d'avis n'est cliquable que si une fiche est renseignée. */
a.gbadge:not([href]){cursor:default}

/* ================================================================
   Formulaire Forminator
   ================================================================
   L'extension apporte sa propre mise en forme. On l'aligne sur la charte
   sans réécrire ses styles : couleurs, police et bouton du thème. */
.form-card .forminator-ui,
.form-card .forminator-custom-form{margin:0}
.form-card .forminator-field input[type="text"],
.form-card .forminator-field input[type="email"],
.form-card .forminator-field input[type="tel"],
.form-card .forminator-field select,
.form-card .forminator-field textarea{
  font-family:var(--body) !important;font-size:1rem !important;color:var(--ink) !important;
  background:transparent !important;border:0 !important;border-bottom:1px solid var(--rule) !important;
  border-radius:0 !important;padding:.7rem 0 !important;box-shadow:none !important}
.form-card .forminator-field input:focus,
.form-card .forminator-field select:focus,
.form-card .forminator-field textarea:focus{
  border-bottom-color:var(--orange) !important;outline:none !important}
.form-card .forminator-label{
  font-family:var(--mono) !important;font-size:.625rem !important;font-weight:600 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--ink-40) !important}
.form-card .forminator-button-submit{
  font-family:var(--mono) !important;font-size:.6875rem !important;font-weight:700 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
  background:var(--orange) !important;color:var(--ink) !important;border:0 !important;
  border-radius:0 !important;padding:1.05rem 1.6rem !important;width:100% !important;
  transition:background .25s var(--ease) !important}
.form-card .forminator-button-submit:hover{background:var(--ink) !important;color:#fff !important}
.form-card .forminator-description,
.form-card .forminator-error-message{font-family:var(--body) !important;font-size:.85rem !important}

/* ================================================================
   Page introuvable
   ================================================================ */
.err{position:relative;overflow:hidden;padding:clamp(3.5rem,8vw,7rem) 0 clamp(4rem,9vw,7rem)}
.err-num{position:absolute;top:50%;right:calc(var(--gut) * -1);transform:translateY(-50%);
  font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 118;
  font-size:clamp(14rem,34vw,30rem);line-height:.8;letter-spacing:-.05em;
  color:var(--orange-pale);z-index:0;pointer-events:none;user-select:none}
.err .wrap{position:relative;z-index:1}
.err-in{max-width:min(100%, 44rem)}
.err-in .sub{max-width:52ch;margin-top:1.5rem}

.err-causes{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;
  border-top:1px solid var(--rule);display:grid;gap:0}
.err-causes li{position:relative;padding:.95rem 0 .95rem 1.6rem;
  border-bottom:1px solid var(--rule);color:var(--ink-60);font-size:.98rem}
.err-causes li::before{content:"";position:absolute;left:0;top:1.45em;
  width:6px;height:6px;background:var(--orange)}

.err-liens{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(2rem,4vw,3rem)}

@media(max-width:900px){
  .err-num{right:auto;left:50%;transform:translate(-50%,-50%);opacity:.7}
}
@media(max-width:760px){
  .err-liens .btn{width:100%;justify-content:center}
}

/* ================================================================
   Quatrième levier : la publicité dans les IA
   ================================================================ */
/* Quatre leviers en deux lignes de deux : sur une seule ligne, chaque
   colonne devient trop étroite pour les listes qu'elle contient. */
.levers{grid-template-columns:repeat(2,minmax(0,1fr))}
.levers::before{left:0}

/* Le GEA reprend le traitement du GEO, en teal, pour que les deux leviers
   récents se lisent comme un ensemble face aux deux leviers historiques. */
.lever--gea{background:var(--teal-deep);color:#fff;margin-left:-1px;position:relative}
.lever--gea .n{color:rgba(255,255,255,.30)}
.lever--gea:hover .n{color:var(--orange-light)}
.lever--gea .k{color:rgba(255,255,255,.82)}
.lever--gea h3{color:#fff}
.lever--gea .lever-sub{color:rgba(255,255,255,.7)}
.lever--gea p,.lever--gea li{color:rgba(255,255,255,.82)}
.lever--gea li::before{background:var(--orange-light)}
.lever--gea .lever-link{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.lever--gea .lever-link:hover{border-color:#fff}
.lever--gea .flag{position:absolute;top:0;right:0;background:var(--orange);color:var(--ink);
  font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.5rem .8rem;z-index:2}

/* La mise en garde sur un canal encore jeune. */
.lever-note{margin-top:clamp(2rem,4vw,3rem);padding:1.5rem 1.75rem;
  background:var(--orange-pale);border-left:4px solid var(--orange)}
.lever-note p{margin:0;font-size:1rem;line-height:1.65;color:var(--ink);max-width:80ch}
.lever-note b{font-weight:600}

@media(max-width:900px){
  .levers{grid-template-columns:1fr}
  .lever--gea{margin:0 calc(var(--gut) * -1);width:calc(100% + var(--gut) * 2);
    padding:2.5rem var(--gut)}
}

/* Mention de transparence sur les articles rédigés avec l'aide d'une IA. */
.meta-ia b{position:relative;padding-left:1.1rem;color:var(--orange-text) !important}
.meta-ia b::before{content:"";position:absolute;left:0;top:.42em;width:6px;height:6px;
  background:var(--orange);border-radius:50%}

/* ================================================================
   Corrections d'alignement et de grille
   ================================================================ */

/* Les liens du méga-menu ont reçu un remplissage vertical pour rester
   cliquables au doigt. La puce, calée sur la hauteur de ligne, s'est
   retrouvée décalée vers le haut : on l'aligne sur le texte réel. */
.mlist--liens li{display:flex;align-items:flex-start}
.mlist--liens li::before{position:static;flex:none;margin:.95rem .6rem 0 0}
.mlist--liens li a{padding-top:.45rem;padding-bottom:.45rem}

/* Les quatre leviers reviennent sur une seule ligne. Le remplissage et la
   taille des listes sont réduits pour que chaque colonne reste lisible. */
.levers{grid-template-columns:repeat(4,minmax(0,1fr))}
.levers .lever{padding-left:1.5rem;padding-right:1.5rem}
.levers .lever li{font-size:.875rem;line-height:1.45}
.levers .lever p{font-size:.94rem}
.levers .lever .lever-link{font-size:.6875rem}

@media(max-width:1280px){
  .levers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .levers{grid-template-columns:1fr}
}

/* L'accroche de l'accueil tient en deux lignes : on réduit légèrement
   l'échelle pour qu'elle laisse respirer le portrait et le texte. */
.hero .h1-disp{font-size:clamp(2.6rem,7.6vw,8.8rem)}

/* ================================================================
   Visuel de l'article
   ================================================================ */
.art-visuel{margin:0;padding:0 0 clamp(1.5rem,3vw,2.5rem)}
.art-visuel img{width:100%;height:auto;display:block}
.art-visuel figcaption{margin-top:.7rem;font-family:var(--mono);font-size:.6875rem;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-40)}
@media(max-width:760px){
  .art-visuel{padding-bottom:1.25rem}
}

/* ================================================================
   Vignette des cartes d'articles
   ================================================================
   La zone visuelle avait une hauteur fixe : l'image, deux fois plus
   large que haute, s'y trouvait recadrée et son titre coupé. On lui
   donne le même rapport que les fichiers fournis, et l'image s'affiche
   entière. La couleur de fond ne sert plus que lorsqu'il n'y a pas
   d'image du tout. */
.card-vis{height:auto;aspect-ratio:1200 / 630}
.card-vis img{width:100%;height:100%;object-fit:cover;display:block}
.card:nth-child(1) .card-vis:has(img),
.card:nth-child(2) .card-vis:has(img),
.card:nth-child(3) .card-vis:has(img){background:transparent}

@media(max-width:640px){
  .card-vis{height:auto}
}

/* Sur les pages de service, la barre de réassurance sépare le texte du
   filet de bas d'en-tête. Les listes d'articles n'en ont pas : le texte
   venait toucher le trait. On leur rend cet espace. */
.shero:not(:has(.hero-foot)){padding-bottom:clamp(2.5rem,5vw,4rem)}

/* Grille tarifaire à deux formules : deux colonnes, sans étirer les cartes
   sur toute la largeur de l'écran. */
.tarifs--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:56rem}
@media(max-width:760px){
  .tarifs--2{grid-template-columns:1fr;max-width:none}
}

/* ================================================================
   Grilles tarifaires : formule optionnelle et grille à deux cartes
   ================================================================ */

/* Deux cartes occupent toute la largeur, comme la ligne de titre au-dessus :
   une grille calée à gauche laissait un vide à droite. */
.tarifs--2{max-width:none}

/* Une formule présentée comme une variante : bord pointillé à l'intérieur
   de la carte, façon coupon détachable, et étiquette discrète. */
.tarif--option{position:relative;outline:1.5px dashed rgba(14,14,14,.28);outline-offset:-14px}
.tarif--option .ribbon{top:14px;right:14px;background:var(--paper);color:var(--ink-60);
  border:1.5px dashed rgba(14,14,14,.28)}

/* ================================================================
   Page Agent IA : un prix d'entrée, des curseurs
   ================================================================ */
.enveloppe{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:1px;background:var(--rule);border:1px solid var(--rule)}

.env-prix{background:var(--orange);color:var(--ink);display:flex;flex-direction:column;
  padding:clamp(2rem,3.5vw,3.25rem)}
.env-k{margin:0 0 1.6rem;font-family:var(--mono);font-size:.71875rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.env-montant{margin:0;font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 118;
  font-size:clamp(4.4rem,8.6vw,7.4rem);line-height:.88;letter-spacing:-.045em}
.env-montant small{display:block;margin-bottom:.9rem;font-family:var(--mono);font-size:.71875rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.env-montant i{font-style:normal;margin-left:.45rem;vertical-align:top;font-family:var(--mono);
  font-size:.75rem;font-weight:700;letter-spacing:.1em}
.env-sous{margin:1.6rem 0 0;max-width:34ch;font-size:1.05rem;line-height:1.55}
.env-prix ul{list-style:none;flex:1;display:grid;align-content:start;gap:.62rem;
  margin:1.8rem 0 2.2rem;padding:1.6rem 0 0;border-top:1px solid rgba(14,14,14,.22)}
.env-prix li{position:relative;padding-left:1.15rem;font-size:.93rem;line-height:1.5}
.env-prix li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--ink)}
.env-prix .btn{align-self:flex-start}

.env-facteurs{background:var(--paper);padding:clamp(2rem,3.5vw,3.25rem)}
.env-titre{margin:0 0 .4rem;font-family:var(--mono);font-size:.71875rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--orange-text)}
.facteur{padding:1.5rem 0 1.35rem;border-bottom:1px solid var(--rule)}
.facteur:last-child{border-bottom:0;padding-bottom:0}
.facteur .facteur-n{margin:0;font-family:var(--mono);font-size:.71875rem;font-weight:700;
  letter-spacing:.1em;line-height:1.4;color:var(--orange-text)}
.facteur h3{margin:.35rem 0 .45rem;font-size:1.14rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.facteur p{margin:0 0 1.05rem;max-width:58ch;font-size:.93rem;line-height:1.55;color:var(--ink-60)}

/* Le curseur : la part orange est ce que couvre le prix d'entrée. */
.jauge{position:relative;height:4px;background:var(--rule);border-radius:2px}
.jauge span{position:absolute;left:0;top:0;bottom:0;width:32%;background:var(--orange);border-radius:2px}
.jauge span::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;
  border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--paper);transform:translateY(-50%)}
.facteur .jauge-legende{display:flex;justify-content:space-between;gap:1rem;margin:.6rem 0 0;max-width:none;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-40)}
.facteur .jauge-legende span:first-child{color:var(--orange-text)}

.env-exemple{margin-top:clamp(1.75rem,3.5vw,2.5rem);padding:1.5rem 1.75rem;
  background:var(--paper);border-left:4px solid var(--orange)}
.env-exemple p{margin:0;max-width:86ch;font-size:1rem;line-height:1.65;color:var(--ink)}
.env-exemple b{font-weight:600}

@media(max-width:900px){
  .enveloppe{grid-template-columns:1fr}
}
@media(max-width:520px){
  .facteur .jauge-legende{flex-direction:column;gap:.3rem}
}

/* ================================================================
   Lisibilité
   ================================================================
   Les notes sous les tarifs étaient en capitales de 9 pixels, en gris :
   le texte que le visiteur doit lire avant de signer était le moins
   lisible de la page. Elles repassent en texte courant. */
.srv-note{font-family:var(--body);font-size:.92rem;font-weight:400;letter-spacing:0;
  text-transform:none;line-height:1.6;color:var(--ink-60)}

/* Le corps de texte gagne un peu de contraste sur les fonds clairs. */
.lede,.sub{color:#3d3d3a}

/* ================================================================
   Services proposés sur demande
   ================================================================ */
.srv-demande{display:inline-block;margin-left:.6rem;padding:.2rem .5rem;vertical-align:middle;
  border:1px solid var(--rule);font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-60)}
.srv--demande .ttl{color:var(--ink-60)}
.srv--demande:hover .ttl{color:inherit}

/* ================================================================
   Photos en bichromie
   ================================================================
   N'importe quelle photo prend les couleurs du site : le gris de l'image
   devient du teal dans les ombres et de l'orange pâle dans les lumières.
   Une photo prise au téléphone ou tirée d'une banque d'images s'intègre
   ainsi sans retouche. Usage : un bloc Image avec la classe « bichro ». */
.bichro{position:relative;overflow:hidden;background:var(--teal-deep);isolation:isolate}
.bichro img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.12) brightness(1.05);
  mix-blend-mode:screen}
.bichro::after{content:"";position:absolute;inset:0;background:var(--orange);mix-blend-mode:multiply;
  opacity:.28;pointer-events:none}
.bichro figcaption{position:relative;z-index:1;padding:.6rem .8rem;background:var(--paper);
  font-size:.85rem;color:var(--ink-60)}

/* Entre 1081 et 1199 px, le menu complet s'affiche mais la place manque :
   la mention sous le logo s'efface pour éviter que l'en-tête déborde. */
@media(min-width:1081px) and (max-width:1199px){
  .logo em{display:none}
}

/* ================================================================
   Menu des services : une liste déroulante simple
   ================================================================ */
.has-mega.has-simple{position:relative}
.mega--simple{left:-1.25rem;right:auto;width:min(26rem,92vw);border:1px solid var(--rule)}
.msimple{display:flex;flex-direction:column;padding:.55rem}
.mitem{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:.85rem 2.6rem .85rem .9rem;
  color:var(--ink);text-decoration:none;transition:background .2s var(--ease)}
.mitem:hover,.mitem:focus-visible{background:var(--mist)}
.mitem-v{font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--orange-text)}
.mitem b{font-size:.98rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.mitem-go{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);font-style:normal;
  color:var(--ink-40);transition:transform .25s var(--ease),color .25s var(--ease)}
.mitem:hover .mitem-go{color:var(--orange-text);transform:translate(3px,-50%)}
.msep{margin:.5rem .9rem .2rem;padding-top:.8rem;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-40)}
.mitem--demande{padding-top:.6rem;padding-bottom:.6rem}
.mitem--demande b{font-size:.92rem;font-weight:500;color:var(--ink-60)}

@media(max-width:1080px){
  .has-mega.has-simple{position:static}
  .mega--simple{width:auto;border:0}
  .msimple{padding:.4rem 0 1rem}
  .mitem{padding:.75rem 2.4rem .75rem 0}
  .mitem:hover{background:transparent}
  .mitem b{font-size:1.02rem}
  .msep{margin-left:0;margin-right:0}
}

/* ============================================================
   3.3.0 · Recentrage local
   ============================================================ */

/* ---------- appel direct dans l'en-tête mobile ---------- */
.hdr-appel{display:none}
@media(max-width:1080px){
  .hdr-appel{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;min-height:44px;
    padding:0 .9rem;background:var(--orange);color:var(--ink);font-weight:600;font-size:.875rem}
  .hdr-appel svg{flex:none}
  .burger{margin-left:.5rem}
}
@media(max-width:380px){.hdr-appel span{display:none}.hdr-appel{padding:0 .75rem}}
/* 3.3.1 : avec le bouton « Appeler », la mention sous le logo faisait déborder
   l'en-tête entre 401 et 590 px (la plupart des Android). Elle disparaît sous
   640 px, et au-dessus elle se tronque plutôt que de pousser la page. */
@media(max-width:640px){.logo em{display:none}}
@media(max-width:1080px){
  .logo{min-width:0;flex-shrink:1;white-space:nowrap}
  .logo em{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .hdr-appel,.burger{flex:none}
}

/* ---------- hero mobile : la preuve avant le portrait ---------- */
@media(max-width:700px){
  .hero-portrait{width:min(50%,210px);margin-top:1.75rem}
  .hero-block{width:46%;height:150px}
  .hero-foot{margin-top:0}
}

/* ---------- offre : formule complète + leviers à la carte ---------- */
.offre-pack{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);
  background:var(--orange);color:var(--ink);padding:clamp(2rem,4vw,3rem);position:relative;align-items:start}
.offre-pack::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ink)}
.offre-pack .ribbon{position:absolute;top:0;right:0;background:var(--ink);color:#fff;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .8rem}
.offre-pack h3{margin:0 0 .35rem;font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 116;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(2rem,3.6vw,3rem)}
.offre-pack .k{display:block;font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:1.5rem}
.offre-pack .amt{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 112;
  font-size:clamp(3rem,5vw,4.25rem);line-height:1;letter-spacing:-.03em;margin:0 0 .6rem}
.offre-pack .amt i{font-style:normal;font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.08em;margin-left:.35rem}
.offre-pack .note{margin:0 0 1.75rem;font-size:.95rem;max-width:40ch}
.offre-pack ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.offre-pack li{padding-left:1.4rem;position:relative;line-height:1.5}
.offre-pack li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--ink)}
.offre-pack .btn{border-color:var(--ink)}
.offre-pack .btn--fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.offre-pack .btn--fill::after{background:var(--paper)}
.offre-pack .btn--fill:hover{color:var(--ink)}
.offre-cta{display:flex;flex-wrap:wrap;gap:.75rem}
@media(max-width:900px){.offre-pack{grid-template-columns:1fr}}

.leviers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(1.25rem,2.5vw,2rem)}
.levier{background:var(--paper);padding:1.6rem 1.5rem 1.75rem;display:flex;flex-direction:column;gap:.35rem;
  transition:background .3s var(--ease)}
a.levier:hover{background:var(--mist)}
.levier .sig{font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.1em;color:var(--orange-text)}
.levier b{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.levier span{font-size:.9rem;color:var(--ink-60);line-height:1.5}
.levier .px{margin-top:auto;padding-top:.9rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}
.leviers-titre{margin:clamp(2.5rem,5vw,3.5rem) 0 0;font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:.75rem}
.leviers-titre::before{content:"";width:26px;height:3px;background:var(--orange);flex:none}
@media(max-width:980px){.leviers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.leviers{grid-template-columns:1fr}}

/* tarifs de la page référencement : le pack au-dessus des quatre leviers */
.tarifs + .offre-pack,.offre-pack + .tarifs{margin-top:1.25rem}

/* ---------- zone d'intervention ---------- */
.zone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.zone-communes{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.zone-communes li{border:1px solid var(--rule);background:var(--paper);padding:.45rem .85rem;font-size:.9rem}
.zone-communes li.client{border-color:var(--teal-deep);background:var(--teal-deep);color:#fff}
.zone-note{margin:1.25rem 0 0;font-size:.95rem;color:var(--ink-60)}
.zone-carte{margin:0;background:var(--paper);border:1px solid var(--rule);padding:clamp(1rem,2.5vw,1.75rem)}
.zone-carte svg{display:block;width:100%;height:auto}
.zone-carte figcaption{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:1rem;font-size:.8125rem;color:var(--ink-60)}
.zone-carte figcaption span{display:inline-flex;align-items:center;gap:.5rem}
.zone-carte .k-bureau{width:12px;height:12px;background:var(--orange)}
.zone-carte .k-client{width:12px;height:12px;border-radius:50%;background:var(--teal)}
.zone-carte .k-commune{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink)}
@media(max-width:900px){.zone{grid-template-columns:1fr}}