/* ══════════════════════════════════════════════════════════════════
   CLIMSSUD — Saint-Bauzély (30)
   Direction « Le seuil » (DESIGN.md §12, choix Mourad 2026-07-29)
   Motif signature : le claustra (bandes verticales, §6)
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens (DESIGN.md §2/§3) ──────────────────────────────────── */
:root{
  --paper:#FFFFFF;
  --paper-2:#F2F3F0;
  --paper-3:#E8EBE6;
  --ink:#16201A;
  --ink-2:#4A5750;
  --line:#DDE1DC;
  --garrigue:#264834;
  --garrigue-deep:#17301F;
  /* Accent vif de la marque. ⚠️ #C8522A ne fait que 4,44:1 sur blanc — sous le
     seuil AA (4,5:1). Il sert donc aux APLATS, filets et au motif claustra,
     jamais à porter du texte. Deux déclinaisons accessibles pour le texte : */
  --terracotta:#C8522A;        /* motif, filets, bordures — pas de texte dessus */
  --terracotta-ink:#A8421F;    /* texte et boutons sur fond CLAIR   → 6,0:1 */
  --terracotta-deep:#8E3717;   /* survol des boutons                → 7,6:1 */
  --terracotta-light:#E8875C;  /* texte sur fond SOMBRE             → 5,5:1 */
  --sage:#9FB3A3;

  --ff-title:'Familjen Grotesk',system-ui,-apple-system,sans-serif;
  --ff-body:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;

  /* ⛔ jamais au-dessus de clamp(40px,6vw,96px) — design-artisan-btp §4 */
  --fs-display:clamp(32px,4.4vw,66px);
  --fs-h2:clamp(23px,2.7vw,36px);
  --fs-h3:clamp(18px,1.7vw,22px);

  --wrap:1240px;
  --gut:clamp(16px,3vw,34px);

  /* Motif signature — bandes de 3px espacées de 9px, VISIBLE (§6) */
  --claustra:repeating-linear-gradient(90deg,var(--terracotta) 0 3px,transparent 3px 12px);
  --claustra-sage:repeating-linear-gradient(90deg,var(--sage) 0 3px,transparent 3px 12px);

  --shadow-1:0 1px 2px rgba(22,32,26,.06),0 6px 18px rgba(22,32,26,.08);
  --shadow-2:0 2px 6px rgba(22,32,26,.08),0 12px 32px rgba(22,32,26,.13);
  --shadow-3:0 18px 46px rgba(22,32,26,.14);
}

/* ── Base ──────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--ff-title);margin:0;line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Lien d'évitement : masqué VERS LE HAUT et jamais vers la gauche.
   Un left:-9999px crée un débordement horizontal réel que le sweep DOM détecte
   (et que `overflow-x:hidden` masquerait sans le régler). */
.skip{position:absolute;left:8px;top:-64px;z-index:200;background:var(--garrigue);color:#fff;padding:12px 20px;text-decoration:none;transition:top .16s ease-out}
.skip:focus{top:8px}

/* ── Boutons ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;
  font-family:var(--ff-body);font-weight:600;font-size:15.5px;
  text-decoration:none;border:0;cursor:pointer;
  transition:background-color .18s ease-out,color .18s ease-out,transform .1s ease-out,border-color .18s ease-out;
}
.btn:active{transform:scale(.96)}
.btn-1{background:var(--terracotta-ink);color:#fff}
.btn-1:hover{background:var(--terracotta-deep)}
.btn-2{border:1.5px solid var(--garrigue);color:var(--garrigue);background:transparent}
.btn-2:hover{background:var(--garrigue);color:#fff}
.btn-3{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-3:hover{background:rgba(255,255,255,.14)}
.btn-full{width:100%}

/* ══ HEADER — pilule flottante (§12 : jamais la barre pleine largeur) ══ */
.header{
  position:fixed;top:clamp(10px,1.6vw,22px);left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100% - 24px));z-index:60;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:999px;
  padding:9px 10px 9px clamp(16px,2vw,24px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:var(--shadow-2);
  transition:box-shadow .2s ease-out,background-color .2s ease-out;
}
.header.is-scrolled{background:rgba(255,255,255,.985);box-shadow:0 4px 10px rgba(22,32,26,.1),0 14px 40px rgba(22,32,26,.16)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand::before{content:"";width:15px;height:24px;background:var(--claustra);flex:none}
.brand-name{font-family:var(--ff-title);font-weight:700;font-size:clamp(19px,2vw,23px);letter-spacing:-.032em;line-height:1;white-space:nowrap}
.brand-name em{font-style:normal;color:var(--terracotta-ink)}
/* Emplacement du logo client (skill logo-client : 48–64px desktop, ≥40px mobile).
   Tant qu'aucun logo n'est fourni, le wordmark texte ci-dessus tient le rôle. */
.brand img{height:clamp(40px,4vw,54px);width:auto}

.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px)}
.nav a{text-decoration:none;font-size:14.5px;font-weight:500;padding:6px 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--terracotta);transition:width .16s ease-out}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--terracotta-ink)}

/* Sous-menu « Prestations » — nav GROUPÉE (ban : services listés à plat) */
.has-sub{position:relative}
.sub-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;font:inherit;font-size:14.5px;font-weight:500;color:inherit;cursor:pointer;font-family:var(--ff-body)}
.sub-btn svg{transition:transform .18s ease-out}
.has-sub.is-open .sub-btn svg{transform:rotate(180deg)}
.sub{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:264px;background:var(--paper);box-shadow:var(--shadow-2);
  padding:8px;display:none;border-top:3px solid var(--terracotta);
}
.has-sub.is-open .sub{display:block}
.sub a{display:block;padding:11px 14px;font-size:14.5px;white-space:normal}
.sub a::after{display:none}
.sub a:hover{background:var(--paper-2);color:var(--terracotta-ink)}
.header-tel{
  background:var(--garrigue);color:#fff;border-radius:999px;
  padding:0 20px;min-height:44px;display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap;flex:none;
  transition:background-color .18s ease-out;
}
.header-tel:hover{background:var(--terracotta-ink)}
.burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:0;background:transparent;cursor:pointer;flex:none;border-radius:50%}
.burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:background-color .15s ease-out}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:transform .2s ease-out,top .2s ease-out}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ══ HERO « LE SEUIL » ══════════════════════════════════════════
   Photo plein cadre NETTE (aucun voile, aucun texte posé dessus)
   + encart blanc opaque à cheval sur le bas de l'image.          */
.seuil{position:relative;background:var(--paper-2)}
.seuil-shot{position:relative;height:clamp(390px,52vw,640px);overflow:hidden;background:var(--paper-3)}
.seuil-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.seuil-stamp{
  position:absolute;right:var(--gut);top:clamp(82px,10vw,124px);
  background:var(--paper);padding:13px 18px;font-size:13px;font-weight:600;line-height:1.35;
  box-shadow:var(--shadow-3);max-width:200px;
}
.seuil-stamp b{display:block;font-family:var(--ff-title);font-size:26px;color:var(--terracotta-ink);letter-spacing:-.02em;line-height:1.1}
.seuil-card{
  position:relative;z-index:4;max-width:var(--wrap);
  margin-left:auto;margin-right:auto;margin-top:clamp(-140px,-13vw,-88px);
  width:calc(100% - 2 * var(--gut));
  background:var(--paper);
  padding:clamp(26px,3.4vw,50px) clamp(20px,3.2vw,50px) clamp(28px,3.4vw,50px);
  box-shadow:0 -3px 0 var(--terracotta),var(--shadow-3);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,52px);align-items:end;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--terracotta-ink);margin-bottom:15px;
}
.eyebrow::before{content:"";width:30px;height:12px;background:var(--claustra);flex:none}
.seuil-card h1{font-size:var(--fs-display);font-weight:700;max-width:15ch}
.lead{margin-top:19px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.62;color:var(--ink-2);max-width:52ch}
.cta-col{display:flex;flex-direction:column;gap:11px}
.cta-note{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:2px}

/* Bandeau de tête des pages intérieures (variante courte du seuil).
   ⚠️ La bande VISIBLE vaut : hauteur − recouvrement de l'encart − hauteur du header
   fixe. Avec 26vw et le recouvrement de l'accueil, il ne restait que 41 px de photo
   à 900 px de large (55 px à 1024) : un ruban où l'on ne distingue plus rien.
   Hauteur relevée + recouvrement propre à la variante → 140 à 190 px partout. */
.seuil--page .seuil-shot{height:clamp(300px,30vw,380px)}
.seuil--page .seuil-card{align-items:center;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);margin-top:clamp(-110px,-9vw,-70px)}
.seuil--page h1{font-size:clamp(28px,3.6vw,50px)}

/* ── Sections ──────────────────────────────────────────────────── */
.sec{padding:clamp(48px,6vw,86px) 0}
.sec--alt{background:var(--paper-2)}
.sec--dark{background:var(--garrigue);color:#fff}
.sec--dark .lead,.sec--dark p{color:rgba(255,255,255,.88)}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.sec-h{font-size:var(--fs-h2);max-width:20ch}
.sec-note{font-size:14.5px;color:var(--ink-2);max-width:36ch;line-height:1.55}
.sec--dark .sec-note{color:rgba(255,255,255,.8)}
.rule{height:26px;background:var(--claustra);opacity:.9}
.rule--sage{background:var(--claustra-sage)}

/* ── Lignes de prestations (section signature accueil) ─────────── */
.stack{display:grid;gap:clamp(10px,1.2vw,16px)}
.row{
  display:grid;grid-template-columns:clamp(104px,14vw,190px) 1fr auto;
  align-items:center;gap:clamp(16px,2.4vw,32px);
  /* Fond légèrement teinté : sur une section blanche, une ligne blanche n'a AUCUNE
     limite visible — la rangée se lisait comme un trou de grille (texte à gauche,
     flèche 400 px plus loin). Pas de filet : « lignes filetées + vignette » est
     un motif brûlé sur lde/perezelec/mht (DESIGN.md §5.4). */
  background:var(--paper-2);padding:clamp(12px,1.4vw,16px);
  text-decoration:none;
  transition:transform .18s ease-out,box-shadow .18s ease-out,background-color .18s ease-out;
}
.sec--alt .row{background:var(--paper)}
.row:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(22,32,26,.1)}
.row img{width:100%;height:clamp(80px,9.5vw,124px);object-fit:cover;outline:1px solid rgba(22,32,26,.08);outline-offset:-1px}
.row h3{font-size:clamp(19px,2vw,26px);font-weight:600}
.row p{font-size:14.5px;color:var(--ink-2);margin-top:5px;line-height:1.5;max-width:62ch}
.row .go{
  /* teinte translucide : lisible aussi bien sur une rangée claire que sur une
     rangée blanche (sections alternées) */
  width:40px;height:40px;border-radius:50%;background:rgba(22,32,26,.07);
  display:grid;place-items:center;color:var(--garrigue);flex:none;
  transition:background-color .18s ease-out,color .18s ease-out;
}
.row:hover .go{background:var(--terracotta);color:#fff}

/* ── Bande de faits (accueil) ──────────────────────────────────── */
.facts{display:flex;flex-wrap:wrap;gap:14px 44px;font-size:15.5px}
.facts li{display:inline-flex;align-items:center;gap:11px}
.facts li::before{content:"";width:8px;height:8px;background:var(--terracotta);flex:none}
.sec--dark .facts li::before{background:var(--sage)}

/* ── Split matière / texte (à propos, accueil) ─────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}
.split--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split figure{margin:0;position:relative}
.split figure img{width:100%;height:clamp(240px,32vw,430px);object-fit:cover}
.split figcaption{position:absolute;left:0;bottom:0;background:var(--paper);padding:10px 16px;font-size:13px;font-weight:600}
.split-body h2{font-size:var(--fs-h2);max-width:18ch;margin-bottom:15px}
.split-body p+p{margin-top:15px}
.split-body p{color:var(--ink-2);font-size:16px;line-height:1.65}
.sec--dark .split-body p{color:rgba(255,255,255,.88)}

/* ── Question / réponse éditoriale (pages service, §7) ─────────── */
.qa{border-top:1px solid var(--line)}
.qa-item{border-bottom:1px solid var(--line);padding:clamp(20px,2.6vw,30px) 0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:clamp(18px,3vw,46px)}
.qa-item h3{font-size:clamp(18px,1.9vw,24px);font-weight:600;max-width:22ch}
.qa-item p{color:var(--ink-2);font-size:15.5px;line-height:1.65}
.qa-item p+p{margin-top:12px}

/* ── Liste de points ───────────────────────────────────────────── */
/* ⚠️ PAS de `display:grid` sur le <li> : dans un conteneur grid, CHAQUE enfant
   devient un item — un <li> du type « <strong>50 km</strong> autour du village »
   se scinde en deux items, le gras part à droite et la suite tombe à la ligne
   suivante (constaté sur « L'entreprise en clair », à propos). Puce en absolu :
   le contenu reste un flux de texte normal, quel que soit le balisage interne. */
.points{display:grid;gap:12px}
.points li{position:relative;padding-left:23px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.points li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--terracotta)}
.points li strong{color:var(--ink)}
.sec--dark .points li strong{color:#fff}
.sec--dark .points li{color:rgba(255,255,255,.88)}
.sec--dark .points li::before{background:var(--sage)}

/* ── Carte de zone (contact — géographie, autorisée §7) ────────── */
.zone-map{background:var(--paper);padding:clamp(16px,2vw,26px);box-shadow:var(--shadow-1)}
.zone-map svg{width:100%;height:auto;display:block}
.zone-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.zone-list li{font-size:13.5px;padding:6px 13px;background:var(--paper-2);color:var(--ink-2)}

/* ── Formulaire ────────────────────────────────────────────────── */
.form{display:grid;gap:15px}
.field{display:grid;gap:7px}
.field label{font-size:13.5px;font-weight:600}
.field .opt{color:var(--ink-2);font-weight:400}
.field input,.field select,.field textarea{
  font:inherit;font-size:15.5px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);
  padding:13px 15px;min-height:52px;width:100%;border-radius:0;
  transition:border-color .16s ease-out;
}
.field textarea{min-height:130px;resize:vertical}
/* ⚠️ Ne JAMAIS remettre `outline:none` ici : `.field input:focus` (0-2-1) l'emporte
   sur le `:focus-visible` global (0-1-0) et supprimait l'anneau de focus au clavier
   sur tout le formulaire. La bordure colorée s'ajoute à l'anneau, elle ne le remplace pas. */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--terracotta-ink)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--terracotta-ink);outline-offset:2px}
.form-note{font-size:13px;color:var(--ink-2);line-height:1.55}

/* ── Bandeau CTA (motif claustra en fond) ──────────────────────── */
.cta-band{background:var(--garrigue-deep);color:#fff;position:relative;overflow:hidden;padding:clamp(42px,5.4vw,74px) 0}
.cta-band::before{content:"";position:absolute;inset:0 0 auto 0;height:30px;background:var(--claustra-sage);opacity:.75}
.cta-band-in{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta-band h2{font-size:var(--fs-h2);max-width:18ch}
.cta-band p{margin-top:12px;color:rgba(255,255,255,.85);max-width:46ch;font-size:15.5px}
.cta-band .cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ── Footer ────────────────────────────────────────────────────── */
/* Filet de séparation : le bandeau CTA et le pied de page ont le même fond ;
   sans lui, les deux se lisent comme un seul bloc sombre de 600 px et le CTA
   perd son statut de bandeau. */
.footer{background:var(--garrigue-deep);border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.82);padding:clamp(40px,5vw,64px) 0 30px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,54px)}
.footer h3{color:#fff;font-size:15px;font-weight:600;margin-bottom:14px;font-family:var(--ff-body);letter-spacing:0}
.footer a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .16s ease-out}
.footer a:hover{color:#fff;text-decoration:underline}
.footer li+li{margin-top:9px}
/* Emplacement du logo client en GRAND (skill logo-client : 240–400px) */
.footer-brand{font-family:var(--ff-title);font-weight:700;font-size:clamp(30px,4vw,46px);color:#fff;letter-spacing:-.03em;line-height:1}
.footer-brand em{font-style:normal;color:var(--terracotta-light)}
.footer-brand img{max-width:min(340px,80%);height:auto;margin-bottom:6px}
.footer-tag{margin-top:10px;color:rgba(255,255,255,.7);max-width:38ch;line-height:1.6}
.footer-bar{margin-top:clamp(30px,4vw,46px);padding-top:20px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.65)}

/* ── Mentions légales / pages de texte ─────────────────────────── */
.prose{max-width:74ch}
.prose h2{font-size:clamp(20px,2.2vw,27px);margin:clamp(30px,3.4vw,44px) 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2);font-size:15.5px;line-height:1.68}
.prose p+p{margin-top:12px}
.prose ul{margin-top:12px;display:grid;gap:9px}
/* même précaution que .points : puce en absolu, jamais de grid sur le <li> */
.prose li{position:relative;padding-left:20px;color:var(--ink-2);font-size:15.5px}
.prose li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--terracotta)}
.prose a{color:var(--terracotta-ink)}

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */
@media (max-width:1000px){
  /* ⚠️ `.seuil--page .seuil-card` (2 classes) l'emporte sur `.seuil-card` (1 classe) :
     une media query ne change PAS la spécificité. Sans ce sélecteur, les 6 pages
     intérieures gardaient leur hero en 2 colonnes en mobile et la colonne de CTA
     tombait à 87 px de large. */
  .seuil-card,.seuil--page .seuil-card{grid-template-columns:1fr;align-items:start;gap:22px}
  .split,.split--wide{grid-template-columns:1fr;gap:26px}
  .qa-item{grid-template-columns:1fr;gap:12px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .burger{display:inline-flex}
  .nav{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);box-shadow:var(--shadow-2);
    padding:8px;display:none;border-top:3px solid var(--terracotta);
  }
  .nav.is-open{display:flex}
  .nav a,.sub-btn{padding:14px 16px;font-size:16px;width:100%;text-align:left;justify-content:space-between}
  .nav>*+*{border-top:1px solid var(--paper-3)}
  .nav a::after{display:none}
  .has-sub{position:static}
  .sub{position:static;transform:none;box-shadow:none;border-top:0;padding:0 0 8px;min-width:0;background:var(--paper-2)}
  .sub a{padding-left:30px;font-size:15px}
  .header{padding-right:8px}
  .header-tel{padding:0 15px}
  .header-tel span{display:none}
}
@media (max-width:680px){
  .seuil-stamp{display:none}
  /* Bandeau Climatisation : la photo est en 16:6 alors que le bandeau devient
     presque carré en mobile. Recadré au centre, `cover` sortait l'unité
     extérieure du champ (il ne restait qu'un bout de ventilateur au bord
     gauche) — la page Climatisation se retrouvait sans climatiseur visible.
     On décale le point d'ancrage vers la gauche pour garder l'appareil entier. */
  .seuil-shot img[src*="hero-service-climatisation"]{object-position:12% 50%}
  .row{grid-template-columns:84px 1fr;gap:14px}
  .row .go{display:none}
  .row img{height:76px}
  .footer-grid{grid-template-columns:1fr}
  .cta-band-in{align-items:flex-start}
  .cta-band .btn,.cta-col .btn{width:100%}
}
@media (max-width:400px){
  .header{padding-left:13px}
  .brand::before{display:none}
  .header-tel{padding:0 13px;font-size:14px}
  /* Un libellé insécable (adresse email, numéro) ne doit jamais élargir son bouton
     au-delà de l'écran : padding réduit + coupure autorisée en dernier recours. */
  .btn{padding:0 16px;font-size:15px;overflow-wrap:anywhere}
}

/* ── Animations : liste FERMÉE (DESIGN.md §10) ─────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ── Impression ────────────────────────────────────────────────── */
@media print{
  .header,.cta-band,.burger{display:none}
  body{color:#000}
}