/* ==========================================================================
   Shine Nova Cleaning Services — feuille de style
   DA : navy + or repris du logo. Registre "bordereau d'intervention".
   ========================================================================== */

:root{
  --navy-900:#06122A;
  --navy-800:#0A1B33;
  --navy-700:#152B4C;
  --ink:#0E1B2E;
  --slate:#55677E;
  --paper:#FFFFFF;
  --paper-2:#F2F5F8;
  --paper-3:#E8EDF3;
  --line:#D8E0E9;
  --line-dark:rgba(227,193,132,.28);
  --gold:#C9A24A;
  --gold-light:#E3C184;
  --gold-ink:#8A6A2C;

  --ff-display:"Newsreader",Georgia,"Times New Roman",serif;
  --ff-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1180px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(64px,9vw,120px);
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-sans);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:400;margin:0;line-height:1.08;letter-spacing:-.015em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gut)*2,1400px);margin-inline:auto}
.sec{padding-block:var(--sec)}
.sec--paper2{background:var(--paper-2)}
.sec--navy{background:var(--navy-800);color:#EDF1F6}
.sec--navy h2,.sec--navy h3{color:#fff}

/* --- Signature : label capitales entre deux filets (repris du logo) ------- */
.rule-label{
  display:flex;align-items:center;gap:14px;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:500;margin:0 0 22px;
}
.rule-label::before,.rule-label::after{content:"";height:1px;background:var(--gold);opacity:.55;flex:1}
.rule-label--start::before{display:none}
.rule-label--start{gap:0}
.rule-label--start::after{margin-left:14px}
.sec--navy .rule-label{color:var(--gold-light)}
.sec--navy .rule-label::before,.sec--navy .rule-label::after{background:var(--gold-light);opacity:.45}

.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--slate);max-width:62ch}
.sec--navy .lede{color:#B9C6D6}

h1{font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:1.02}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:.5em}
h3{font-size:1.22rem;line-height:1.3}
.h-italic{font-style:italic;color:var(--gold-ink)}
.sec--navy .h-italic{color:var(--gold-light)}

/* --- Boutons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:var(--r);border:1px solid transparent;
  font-family:var(--ff-sans);font-size:.9rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;transition:.22s ease;min-height:52px;
}
.btn--gold{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn--outline{border-color:rgba(227,193,132,.55);color:#F2E3C6;background:transparent}
.btn--outline:hover{background:rgba(227,193,132,.12)}
.btn--ink{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn--ink:hover{background:var(--navy-700)}
.btn--line{border-color:var(--line);color:var(--ink);background:transparent}
.btn--line:hover{border-color:var(--navy-800)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* --- Placeholders "à compléter" ------------------------------------------ */
.tbc{
  border-bottom:1px dashed var(--gold);color:var(--gold-ink);
  font-style:normal;white-space:nowrap;
}
.sec--navy .tbc,.site-footer .tbc{color:var(--gold-light);border-color:var(--gold-light)}

/* --- Header --------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--navy-800);
  border-bottom:1px solid rgba(227,193,132,.2);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding-block:10px}
/* Le logo complet (rond + texte) remplace l'emblème + le texte HTML,
   à la demande de la cliente le 23/09 : c'est le logo tel qu'elle l'a fourni. */
.brand img{height:68px;width:auto}
@media (max-width:640px){.brand img{height:56px}}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--ff-display);font-size:1.18rem;color:#fff;letter-spacing:.01em}
.brand-sub{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-light);margin-top:5px}
.nav{display:flex;align-items:center;gap:32px}
.nav a{
  text-decoration:none;color:#D5DEEA;font-size:.86rem;font-weight:500;letter-spacing:.02em;
  padding:6px 0;border-bottom:1px solid transparent;transition:.2s;
}
.nav a:hover{color:#fff;border-color:var(--gold)}
.nav a[aria-current="page"]{color:#fff;border-color:var(--gold)}
.header-cta{display:flex;align-items:center;gap:14px}
.header-tel{
  display:inline-flex;align-items:center;gap:8px;color:var(--gold-light);
  text-decoration:none;font-size:.86rem;font-weight:600;letter-spacing:.02em;
}
.header-tel:hover{color:#fff}
.burger{
  display:none;width:46px;height:46px;border:1px solid rgba(227,193,132,.4);
  background:transparent;border-radius:var(--r);cursor:pointer;padding:0;
}
.burger span{display:block;width:20px;height:1px;background:var(--gold-light);margin:5px auto;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- Hero ----------------------------------------------------------------- */
.hero{background:var(--navy-800);color:#fff;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);
  align-items:center;padding-block:clamp(48px,7vw,88px);
}
.hero h1{color:#fff;margin-bottom:24px}
.hero .lede{color:#B9C6D6;margin-bottom:32px}
.hero-proof{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;
  margin:34px 0 0;padding-top:26px;border-top:1px solid rgba(227,193,132,.25);
}
.hero-proof li{display:flex;gap:10px;font-size:.9rem;color:#C6D2E0;line-height:1.45}
.hero-proof svg{flex:0 0 16px;margin-top:4px;color:var(--gold)}
.hero-media{position:relative}
.hero-media img{width:100%;border-radius:var(--r);filter:saturate(.92)}
.hero-media::before{
  content:"";position:absolute;inset:-14px -14px auto auto;width:60%;height:60%;
  border-top:1px solid var(--gold);border-right:1px solid var(--gold);opacity:.55;
}
.hero-badge{
  position:absolute;left:-16px;bottom:26px;background:var(--paper);color:var(--ink);
  padding:16px 22px;border-radius:var(--r);max-width:250px;box-shadow:0 18px 40px rgba(6,18,42,.28);
}
.hero-badge strong{display:block;font-family:var(--ff-display);font-size:1.05rem;margin-bottom:2px}
.hero-badge span{font-size:.78rem;color:var(--slate);line-height:1.45;display:block}

/* --- Bandeau typologies --------------------------------------------------- */
.strip{background:var(--navy-900);color:#C6D2E0;border-top:1px solid rgba(227,193,132,.18)}
.strip ul{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.strip li{
  padding:22px 20px;text-align:center;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;border-right:1px solid rgba(227,193,132,.16);
}
.strip li:last-child{border-right:0}

/* --- Grille prestations ---------------------------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,56px)}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:.25s ease;
}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card-figure{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.card-figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-figure img{transform:scale(1.04)}
.card-body{padding:26px 26px 30px;flex:1;display:flex;flex-direction:column}
.card-num{
  font-family:var(--ff-display);font-size:.85rem;color:var(--gold-ink);
  letter-spacing:.1em;margin-bottom:10px;display:block;
}
.card h3{margin-bottom:10px}
.card p{font-size:.94rem;color:var(--slate);margin-bottom:16px}
.card ul{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}
.card ul li{
  font-size:.84rem;color:var(--slate);padding:4px 0 4px 16px;position:relative;
}
.card ul li::before{
  content:"";position:absolute;left:0;top:13px;width:6px;height:1px;background:var(--gold);
}

/* --- Méthode (étapes) ------------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px}
.step{padding:0 28px 0 0;border-right:1px solid rgba(227,193,132,.22)}
.step:last-child{border-right:0}
.step:not(:first-child){padding-left:28px}
.step-num{
  font-family:var(--ff-display);font-size:2.6rem;color:var(--gold);line-height:1;
  display:block;margin-bottom:16px;
}
.step h3{font-size:1.08rem;margin-bottom:8px;color:#fff}
.step p{font-size:.9rem;color:#A9B8CA;margin:0}

/* --- Engagements ----------------------------------------------------------- */
.engagements{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.engagement{
  padding:30px 34px 30px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:38px 1fr;gap:20px;align-items:start;
}
.engagement:nth-child(even){padding-left:34px;border-left:1px solid var(--line)}
.engagement-k{font-family:var(--ff-display);color:var(--gold-ink);font-size:1.1rem;padding-top:2px}
.engagement h3{font-size:1.05rem;margin-bottom:6px}
.engagement p{font-size:.92rem;color:var(--slate);margin:0}

/* --- Split image/texte ------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.split--rev .split-media{order:2}
.split-media img{border-radius:var(--r);width:100%}
.split-media{position:relative}
.split-tag{
  position:absolute;top:0;left:0;background:var(--navy-800);color:var(--gold-light);
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;padding:10px 18px;
}
.checklist li{
  position:relative;padding:9px 0 9px 30px;font-size:.94rem;color:var(--slate);
  border-bottom:1px solid var(--line);
}
.checklist li::before{
  content:"";position:absolute;left:6px;top:15px;width:6px;height:11px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);
}
.note-devis{
  margin-top:22px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);
}

/* --- Zone ------------------------------------------------------------------- */
.zone-box{
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,4vw,48px);
  background:var(--paper);
}
.zone-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.zone-list li{
  border:1px solid var(--line);padding:8px 16px;font-size:.85rem;color:var(--slate);
  border-radius:var(--r);
}

/* --- FAQ --------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--ff-display);font-size:1.12rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:34px;width:11px;height:11px;
  border-right:1px solid var(--gold-ink);border-bottom:1px solid var(--gold-ink);
  transform:rotate(45deg);transition:.25s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding-bottom:24px;color:var(--slate);font-size:.96rem;max-width:70ch;margin:0}

/* --- CTA final ---------------------------------------------------------------- */
.cta-final{background:var(--navy-900);color:#fff;text-align:center}
.cta-final h2{color:#fff;margin-bottom:18px}
.cta-final .lede{margin:0 auto 32px;color:#B9C6D6}
.cta-final .btn-row{justify-content:center}

/* --- Footer --------------------------------------------------------------------- */
.site-footer{background:var(--navy-800);color:#A9B8CA;font-size:.9rem;padding-block:64px 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px}
.site-footer h4{
  font-family:var(--ff-sans);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-light);margin:0 0 18px;font-weight:600;
}
.site-footer a{text-decoration:none;color:#A9B8CA;transition:.2s}
.site-footer a:hover{color:#fff}
.site-footer li{padding:5px 0}
.footer-brand img{width:100px;margin-bottom:18px}
.footer-bottom{
  margin-top:52px;border-top:1px solid rgba(227,193,132,.18);padding:22px 0 26px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.78rem;color:#7E8FA4;
}

/* --- Barre mobile ------------------------------------------------------------------ */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--navy-800);border-top:1px solid rgba(227,193,132,.25);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;
}
.mobile-bar .btn{flex:1;padding:14px 10px;font-size:.85rem;min-height:50px}

/* --- Formulaires --------------------------------------------------------------------- */
.field{margin-bottom:18px}
.field label{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-bottom:8px;font-weight:600;
}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  transition:border-color .2s;min-height:52px;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.form-note{font-size:.8rem;color:var(--slate);margin-top:14px}

/* --- Tunnel devis ---------------------------------------------------------------------- */
.tunnel{border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.tunnel-head{
  display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--paper-2);
}
.tunnel-head button{
  flex:1;padding:16px 8px;background:transparent;border:0;border-right:1px solid var(--line);
  font-family:var(--ff-sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);cursor:default;position:relative;
}
.tunnel-head button:last-child{border-right:0}
.tunnel-head button[data-on="1"]{color:var(--navy-800);background:var(--paper)}
.tunnel-head button[data-on="1"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);
}
.tunnel-body{padding:clamp(24px,4vw,44px)}
.tunnel-step{display:none}
.tunnel-step.is-on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tunnel-q{font-family:var(--ff-display);font-size:1.5rem;margin-bottom:8px}
.tunnel-help{color:var(--slate);font-size:.92rem;margin-bottom:26px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opt{
  border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;cursor:pointer;
  background:var(--paper);text-align:left;font-family:inherit;font-size:.94rem;color:var(--ink);
  transition:.2s;min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:4px;
}
.opt small{color:var(--slate);font-size:.78rem;line-height:1.4}
.opt:hover{border-color:var(--gold)}
.opt[aria-pressed="true"]{border-color:var(--navy-800);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--navy-800)}
.tunnel-nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px;flex-wrap:wrap}
.recap{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--paper-2);margin-bottom:26px}
.recap dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:.92rem}
.recap dt{color:var(--slate);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;padding-top:3px}
.recap dd{margin:0;font-weight:600}

/* --- Reveal ------------------------------------------------------------------------------ */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important}
}

/* --- Page header (pages internes) ---------------------------------------------------------- */
.page-head{background:var(--navy-800);color:#fff;padding-block:clamp(52px,7vw,84px)}
.page-head h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.4rem);margin-bottom:18px}
.page-head .lede{color:#B9C6D6}
.crumb{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin-bottom:20px}
.crumb a{text-decoration:none;color:var(--gold-light);opacity:.8}
.crumb a:hover{opacity:1}

/* --- Responsive ------------------------------------------------------------------------------ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-media{max-width:520px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:32px 0}
  .step{padding-bottom:8px}
  .step:nth-child(2){border-right:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .opts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav{
    position:fixed;inset:76px 0 auto 0;background:var(--navy-800);flex-direction:column;
    align-items:stretch;gap:0;padding:8px var(--gut) 26px;
    border-bottom:1px solid rgba(227,193,132,.2);transform:translateY(-120%);
    transition:transform .3s ease,visibility 0s .3s;max-height:calc(100dvh - 76px);overflow:auto;
    visibility:hidden; /* fermé : sa bordure basse dépassait dans l'en-tête */
  }
  .nav.is-open{transform:none;visibility:visible;transition:transform .3s ease}
  .nav a{padding:16px 0;border-bottom:1px solid rgba(227,193,132,.14);font-size:1rem}
  .nav a:hover,.nav a[aria-current="page"]{border-color:rgba(227,193,132,.14)}
  .burger{display:block}
  .header-cta .btn{display:none}
  .header-tel{display:none}
  .mobile-bar{display:flex}
  body{padding-bottom:74px}
  .strip ul{grid-template-columns:repeat(2,1fr)}
  .strip li:nth-child(2n){border-right:0}
  .strip li:nth-child(-n+2){border-bottom:1px solid rgba(227,193,132,.16)}
}
@media (max-width:640px){
  .grid-3,.grid-2,.split{grid-template-columns:1fr}
  .split--rev .split-media{order:0}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;padding:0 0 26px;border-bottom:1px solid rgba(227,193,132,.22)}
  .step:not(:first-child){padding-left:0;padding-top:26px}
  .step:last-child{border-bottom:0;padding-bottom:0}
  .engagements{grid-template-columns:1fr}
  .engagement:nth-child(even){padding-left:0;border-left:0}
  .engagement{padding-right:0}
  .opts{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-proof{grid-template-columns:1fr}
  .hero-badge{position:static;margin-top:-30px;margin-left:16px;box-shadow:0 12px 30px rgba(6,18,42,.22)}
  .tunnel-head button{font-size:.6rem;letter-spacing:.08em;padding:14px 4px}
}

.header-tel .tbc{color:#8DA0B6;border-color:rgba(141,160,182,.7);font-weight:500}
.footer-brand img{width:140px}

/* --- Ajustements mobile (QA 390 px) ------------------------------------------ */
@media (max-width:640px){
  .hero-media::before{display:none}
  .hero-badge{
    position:static;margin:20px 0 0;max-width:none;box-shadow:none;
    background:transparent;border:1px solid rgba(227,193,132,.35);color:#EDF1F6;
  }
  .hero-badge strong{color:#fff}
  .hero-badge span{color:#B9C6D6}
  .hero .btn-row .btn,
  .cta-final .btn-row .btn{width:100%}
  .hero-media{max-width:none}
  .split-tag{font-size:.6rem;padding:8px 12px}
  h2{font-size:clamp(1.7rem,7vw,2.2rem)}
  .tunnel-q{font-size:1.25rem}
  .page-head h1{font-size:clamp(1.9rem,8vw,2.4rem)}
}
@media (max-width:640px){
  .tunnel-nav{flex-direction:column}
  .tunnel-nav .btn,.tunnel-nav .btn-row,.tunnel-nav .btn-row .btn{width:100%}
  .tunnel-nav .btn-row{flex-direction:column}
}

section[id]{scroll-margin-top:96px}
.engagement-k svg{display:block;color:var(--gold-ink);margin-top:4px}
.zone-aside{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,40px)}
@media (max-width:640px){.zone-aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:26px}}

/* --- Envoi des formulaires (23/09) ---------------------------------------
   `.pot` : champ leurre pour les robots, jamais montré ni lu à voix haute.
   `.msg-ok` : confirmation affichée quand la fonction Netlify a bien expédié. */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg-ok{margin-top:14px;padding:12px 14px;border-left:3px solid var(--gold);
  background:rgba(201,162,74,.08);font-size:.95rem}

/* --- Hero plein écran (23/09) --------------------------------------------
   Demande de Salim : la photo occupe tout l'écran, le texte passe devant,
   tout est centré. Le voile en deux couches garantit le contraste du texte
   blanc quelle que soit la zone de la photo (les bureaux sont très clairs).
   `100svh` et non `100vh` : sur téléphone, `vh` compte la barre d'adresse et
   le bas du hero se retrouve coupé. */
.hero--plein{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding-block:calc(var(--header-h,77px) + 32px) 56px;
}
.hero--plein::after{display:none}                     /* le liseré du hero split */
.hero-fond{position:absolute;inset:0;overflow:hidden}
.hero-fond img{
  width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:saturate(.85) brightness(.92);
}
.hero-voile{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,27,51,.72) 0%, rgba(10,27,51,.50) 45%, rgba(10,27,51,.88) 100%),
    radial-gradient(85% 60% at 50% 48%, rgba(10,27,51,.16), rgba(10,27,51,.62) 100%);
}
.hero-centre{
  position:relative;z-index:2;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  max-width:860px;
}
.hero-centre .rule-label{justify-content:center}
.hero-centre h1{margin-bottom:22px;text-wrap:balance}
.hero-centre .lede{color:#CBD6E4;margin-bottom:34px;max-width:70ch;text-wrap:pretty}
.btn-row--centre{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero-proof--centre{
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;
  margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  width:100%;
}
.hero-proof--centre li{align-items:center;font-size:.85rem;text-shadow:0 1px 10px rgba(10,27,51,.55)}
/* Le texte passe sur une photo : une ombre douce garantit la lecture
   même sur les zones claires du cliché. */
.hero-centre h1,.hero-centre .lede{text-shadow:0 2px 18px rgba(10,27,51,.45)}

@media (max-width:860px){
  .hero--plein{min-height:100svh;padding-block:calc(var(--header-h,77px) + 20px) 40px}
  .hero-proof--centre{gap:12px 22px;margin-top:30px}
  .hero-proof--centre li{font-size:.84rem}
}
@media (max-width:520px){
  /* Sur téléphone on garde les deux preuves qui portent la promesse : le devis
     écrit et la zone. Quatre lignes centrées feraient un pavé illisible. */
  .hero-proof--centre li:nth-child(2),
  .hero-proof--centre li:nth-child(4){display:none}
  .btn-row--centre .btn{width:100%}
}

/* Ajustements du hero plein écran après contrôle visuel (23/09) :
   le label se perdait sur la zone claire de la photo, et les quatre preuves
   débordaient sur deux lignes parce que le bloc de texte est bridé à 860px. */
.hero-centre .rule-label{
  color:#E4CE95;text-shadow:0 1px 10px rgba(10,27,51,.7);
}
.hero-centre .rule-label::before,
.hero-centre .rule-label::after{background:rgba(228,206,149,.55)}
.hero-proof--centre{width:min(1080px,92vw);max-width:none}