/* ===========================================================
   LA FERME TRÉMONT — DESIGN SYSTEM
   Le luxe du silence : crème, sauge, terracotta, encre.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap');

:root{
  /* — Palette — */
  --creme:        #F3ECDF;
  --papier:       #FAF6ED;
  --creme-fonce:  #E8DFCD;
  --encre:        #2A2620;
  --encre-douce:  #5A5247;
  --sauge:        #6C7556;
  --terracotta:   #8A623E;
  --filet:        #D6C9B1;

  /* — Échelle d'espacement (8/16/24/40/64/96/128) — */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;

  /* — Typo — */
  --serif:'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* — Largeur — */
  --maxw: 1320px;
  --gutter: clamp(24px, 6vw, 96px);

  /* — Easing — */
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0}

html{
  background:var(--creme);
  color:var(--encre);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--creme);
  min-height:100vh;
  /* clip (et non hidden) : empêche le débordement horizontal SANS créer de conteneur de défilement
     — sinon Safari casse position:sticky (le récapitulatif de la page Réserver ne suivait plus). */
  overflow-x:clip;
}

/* paper grain — subtle */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(42,38,32,.012) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(42,38,32,.012) 0 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  z-index:1;
  mix-blend-mode:multiply;
}

img{display:block; max-width:100%; height:auto}

a{ color:inherit; text-decoration:none}
/* Lien éditable RETIRÉ dans l'admin (classe posée par nav.js applyLinks) : rendu comme du texte
   simple, quel que soit le style de lien de la page (ex. terracotta + soulignement du carnet
   d'adresses). !important car certaines pages ciblent « .zone a » avec une spécificité supérieure. */
a.ft-nolink{ color:inherit !important; text-decoration:none !important; border-bottom:0 !important; cursor:auto !important; }

/* — Typographie — */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  font-style:normal;
  letter-spacing:-.005em;
  line-height:1.05;
  color:var(--encre);
}
h1{ font-size:clamp(32px, 4.6vw, 56px); }
h2{ font-size:clamp(24px, 2.8vw, 36px); line-height:1.1;}
h3{ font-size:clamp(20px, 1.9vw, 26px); line-height:1.2;}
h4{ font-size:clamp(17px, 1.3vw, 20px); }

p{ max-width:64ch; font-weight:300; }
.lead{ font-size:1.125rem; line-height:1.7; color:var(--encre-douce); }
em, .italic{ font-style:italic; font-family:var(--serif); }

.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-weight:500;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--encre-douce);
}

.serif{ font-family:var(--serif); font-weight:400; }
.italic-serif{ font-family:var(--serif); font-style:italic; font-weight:400; }

/* — Boutons — */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--sans);
  font-weight:400;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--encre);
  padding:16px 30px;
  border:1px solid var(--encre);
  background:transparent;
  cursor:pointer;
  transition:background .35s var(--ease-out-expo), color .35s var(--ease-out-expo);
  border-radius:0;
}
.btn:hover{ background:var(--encre); color:var(--creme); }

.btn--filled{
  background:var(--encre); color:var(--creme);
}
.btn--filled:hover{ background:transparent; color:var(--encre);}

.btn--ghost{ border-color:var(--filet); color:var(--encre-douce);}
.btn--ghost:hover{ background:var(--encre); color:var(--creme); border-color:var(--encre);}

.btn .arrow{ display:inline-block; width:18px; height:1px; background:currentColor; position:relative; margin-left:6px;}
.btn .arrow::after{ content:''; position:absolute; right:0; top:-3px; width:8px; height:8px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg);}

/* — Liens texte — */
.tlink{
  color:var(--terracotta);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  transition:opacity .25s ease;
}
.tlink:hover{ opacity:.6; }

/* — Conteneurs / layout — */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  position:relative;
  z-index:2;
}
.wrap--narrow{ max-width:880px;}
.wrap--wide{ max-width:1480px; margin:0 auto; } /* centré même utilisé sans .wrap (évènements, galerie) */

.section{ padding: clamp(72px, 12vh, 128px) 0; }
.section--tight{ padding: clamp(48px, 8vh, 96px) 0; }
.section--alt{ background:var(--creme-fonce); }

/* — Filets / divisions — */
.hairline{
  width:100%;
  height:1px;
  background:var(--filet);
  border:0;
}
.divider{ width:48px; height:1px; background:var(--filet); margin: var(--s4) 0;}

/* — Grille pratique — */
.cols{ display:grid; gap:var(--s4); }
/* Desktop par défaut puis dégradation desktop-first (cohérente avec le reste du fichier).
   Les colonnes s'effondrent AU MÊME seuil que le burger (940px) → suppression de la zone
   morte tablette (avant : colonnes créées à min-width:880 mais nav en burger dès 940). */
.cols-2{ grid-template-columns:1fr 1fr; gap:var(--s5); }
.cols-3{ grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:1024px){
  .cols-3{ grid-template-columns:repeat(2,1fr); }
  .cols[style*="repeat(3"]{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:940px){
  .cols-2{ grid-template-columns:1fr !important; gap:var(--s4) !important; }
  .cols[style*="2fr 1fr"],
  .cols[style*="1fr 2fr"]{ grid-template-columns:1fr !important; gap:var(--s3) !important; }
}

/* ============== HEADER ============== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:22px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
  transition:background .4s ease;
}
.site-header > *{ pointer-events:auto; }

.site-header.on-photo{ color:var(--creme);}
.site-header.on-photo .lang a, .site-header.on-photo .contact-link{ color:var(--creme);}

.site-header.scrolled{
  background:rgba(250,246,237,.95); /* opaque : masque le contenu qui défile derrière (chevauchement logo/titre) */
  backdrop-filter:saturate(120%) blur(20px);
  border-bottom:1px solid rgba(214,201,177,.4);
  transition: background .8s var(--ease-out-expo), border-color .8s ease, color .6s ease;
}
.site-header{ transition: background .8s var(--ease-out-expo), border-color .8s ease, color .6s ease; }

.brand-mark{
  display:flex; align-items:center; gap:12px;
  font-family:var(--serif);
  font-size:18px; line-height:1;
  letter-spacing:.01em;
}
/* Logo manuscrit vectorisé — masque coloré par currentColor (s'adapte : crème sur photo, encre sur fond clair) */
.brand-logo{
  display:block;
  /* logo natif 2314×690 (ratio 3,35 — retouche 20/07 : maison épaissie au niveau du lettrage,
     lettrage aligné sur le trait du bas de la maison) ; UNE seule image (maison+texte dans le même SVG)
     → les deux ne peuvent jamais se décaler entre formats ; contraint par la hauteur du bloc */
  width: clamp(180px, 18vw, 210px);
  height: 52px;
  background-color: currentColor;
  /* ?v=3 : force le rafraîchissement du logo chez les navigateurs qui gardent l'ancien en cache */
  -webkit-mask: url(assets/logo/logo.svg?v=3) left center / contain no-repeat;
          mask: url(assets/logo/logo.svg?v=3) left center / contain no-repeat;
}
.site-header.on-photo .brand-mark{ color:var(--creme); }
.site-header.scrolled .brand-mark{ color:var(--encre); }
@media (max-width:560px){
  .brand-logo{ width: clamp(130px, 42vw, 168px); height: 40px; }
}

.top-right{
  display:flex; align-items:center; gap:24px;
  font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.lang{ display:inline-flex; gap:8px;}
.lang a{ color:inherit; opacity:.5; transition:opacity .25s;}
.lang a.active{ opacity:1;}
.lang a:hover{ opacity:1;}
.lang .sep{ opacity:.3;}

.contact-link{
  color:inherit; opacity:.85;
  padding:8px 14px;
  border:1px solid transparent;
  transition: opacity .25s, background .3s var(--ease-out-expo), border-color .3s ease, color .3s ease;
}
.contact-link:hover{
  opacity:1;
  background:var(--creme);
  color:var(--encre);
  border-color:var(--creme);
}
.site-header.scrolled .contact-link:hover{
  background:var(--encre);
  color:var(--creme);
  border-color:var(--encre);
}

/* Bouton Instagram du header (retour client 18/06) — même famille visuelle que .contact-link */
.insta-link{
  color:inherit; opacity:.85;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid transparent;
  transition: opacity .25s, background .3s var(--ease-out-expo), border-color .3s ease, color .3s ease;
}
.insta-link svg{ display:block; }
.insta-link:hover{ opacity:1; background:var(--creme); color:var(--encre); border-color:var(--creme); }
.site-header.scrolled .insta-link:hover{ background:var(--encre); color:var(--creme); border-color:var(--encre); }
.mobile-menu .insta-link{ font-size:18px; color:var(--encre-douce); padding:0; }

/* nav center (hub) — used inline per page where needed */
/* Groupe gauche : logo + menu, espacés ; le menu est dans le flux (plus de centrage absolu → plus de chevauchement avec FR/EN) */
.header-left{
  display:flex; align-items:center;
  gap: clamp(28px, 4vw, 60px);
}
.hub-nav{
  display:flex; gap: clamp(22px, 2.6vw, 40px); align-items:center;
  font-family:var(--sans); font-size:13px;
  letter-spacing:.22em; text-transform:uppercase;
  color:inherit;
  transition:color .6s ease;
}
.hub-nav .item{ position:relative; padding:14px 10px; cursor:pointer; }
.hub-nav .item > a,
.hub-nav .item > .item-title{
  color:inherit; opacity:.85; transition:opacity .25s;
  display:inline-block;
}
.hub-nav .item:hover > a,
.hub-nav .item:hover > .item-title{ opacity:1; }

/* Sous-menu en VERRE DÉPOLI : crème semi-transparente + flou (norme glassmorphism).
   Lisible (texte encre foncé), laisse deviner la photo derrière, sans cartouche blanc opaque. */
.submenu{
  position:absolute; top:calc(100% - 8px); left:50%;
  transform:translateX(-50%) translateY(-10px);
  padding:16px 26px;
  display:flex; flex-direction:column; gap:13px; align-items:center;
  min-width:210px; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .4s ease, transform .5s var(--ease-out-expo);
  z-index:66;
  background:rgba(250,246,237,.70);
  -webkit-backdrop-filter:blur(22px) saturate(115%);
          backdrop-filter:blur(22px) saturate(115%);
  border:1px solid rgba(255,255,255,.45);
  border-radius:2px;
  box-shadow:0 18px 44px -22px rgba(42,38,32,.5);
}
/* Accessibilité : si l'utilisateur réduit la transparence, fond plein */
@media (prefers-reduced-transparency: reduce){
  .submenu{ background:var(--papier); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
/* zone-tampon invisible pour ne pas perdre le survol entre le titre et le sous-menu */
.submenu::before{
  content:''; position:absolute;
  top:-16px; left:-20px; right:-20px; height:18px;
}
.hub-nav .item:hover .submenu,
.hub-nav .item:focus-within .submenu{
  opacity:1; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.submenu a{
  font-family:var(--serif);
  font-size:18px; letter-spacing:0;
  text-transform:none; color:var(--encre);   /* texte foncé, lisible sur le verre dépoli clair */
  transition:color .25s;
  white-space:nowrap;
}
.submenu a:hover{ color:var(--terracotta); }

.hub-nav.on-photo{ color:var(--creme);}

/* ============== HERO ============== */
.hero{
  position:relative;
  min-height: 100vh;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  color:var(--creme);
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:0;
  z-index:0;
}
.hero__media .ph{ width:100%; height:100%; }
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(42,38,32,.45) 0%, rgba(42,38,32,.15) 30%, rgba(42,38,32,.55) 100%);
  z-index:1;
}
.hero__inner{ position:relative; z-index:2; text-align:center; padding: 0 24px;}

.hero--tall{ min-height:100vh;}
.hero--mid{ min-height:72vh; }
.hero--short{ min-height:54vh; }

.hero h1{ color:var(--creme); font-size:clamp(46px, 7vw, 96px); line-height:1.02;}
.hero .lead{ color:var(--creme); opacity:.9;}

/* ============== PLACEHOLDER IMAGES ============== */
.ph{
  position:relative;
  background:
    linear-gradient(135deg, rgba(108,117,86,.16), rgba(138,98,62,.10) 60%, rgba(42,38,32,.18)),
    repeating-linear-gradient(45deg, #d8cdb4 0 2px, #cdc1a6 2px 4px);
  color:var(--encre);
  display:flex; align-items:flex-end; justify-content:flex-start;
  overflow:hidden;
  border:0;
}
.ph::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(243,236,223,.35), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(42,38,32,.25), transparent 65%);
  mix-blend-mode:overlay;
}
.ph .ph-label{
  position:relative; z-index:2;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre);
  background:var(--papier);
  border:1px solid var(--filet);
  padding:4px 8px;
  margin:14px;
  opacity:.55;
}
.ph > img.photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
  opacity:0;
  transition: opacity .4s ease;
}
.ph > img.photo.is-loaded{
  opacity:1;
}
.ph > img.photo.is-loaded ~ .ph-label{ display:none; }
/* légende éditable affichée sur la vignette de galerie (créée par nav.js si activée dans l'admin) */
.ph .ph-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  margin:0; padding:16px 14px 12px;
  font-family:var(--sans); font-size:13px; line-height:1.32; letter-spacing:.01em;
  color:var(--creme);
  background:linear-gradient(transparent, rgba(42,38,32,.74));
  pointer-events:none;
}
.ph--dark{
  background:
    linear-gradient(135deg, rgba(108,117,86,.5), rgba(138,98,62,.3) 60%, rgba(42,38,32,.7)),
    repeating-linear-gradient(45deg, #4a4538 0 2px, #3d382d 2px 4px);
}
.ph--green{
  background:
    linear-gradient(135deg, rgba(108,117,86,.4), rgba(108,117,86,.2)),
    repeating-linear-gradient(45deg, #8a9472 0 2px, #7c8666 2px 4px);
}
.ph--rust{
  background:
    linear-gradient(135deg, rgba(138,98,62,.45), rgba(138,98,62,.2)),
    repeating-linear-gradient(45deg, #b88a64 0 2px, #a87a56 2px 4px);
}
.ph--cream{
  background:
    linear-gradient(135deg, rgba(243,236,223,.6), rgba(214,201,177,.4)),
    repeating-linear-gradient(45deg, #ede4cf 0 2px, #e5dcc4 2px 4px);
}

/* aspect ratios */
.ar-1{ aspect-ratio:1/1;}
.ar-43{ aspect-ratio:4/3;}
.ar-34{ aspect-ratio:3/4;}
.ar-169{ aspect-ratio:16/9;}
.ar-32{ aspect-ratio:3/2;}
.ar-45{ aspect-ratio:4/5;}
.ar-21{ aspect-ratio:2/1;}

/* ============== FOOTER ============== */
.site-footer{
  border-top:1px solid var(--filet);
  padding: var(--s5) 0 var(--s4);
  margin-top: var(--s6);
  background:var(--creme);
  position:relative; z-index:2;
}
.footer-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--s3) var(--s4);
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--encre-douce);
}
.footer-row .links{ justify-content:center; }
.footer-row a{ color:inherit; transition:color .25s;}
.footer-row a:hover{ color:var(--encre);}
.footer-row .links{ display:flex; flex-wrap:wrap; gap:var(--s3);}
.footer-name{ font-family:var(--serif); font-size:16px; letter-spacing:0; text-transform:none; color:var(--encre-douce); opacity:.7;}

/* ============== ANIMATIONS ============== */
@media (prefers-reduced-motion:no-preference){
  .fade-in{ opacity:0; transform:translateY(12px); transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);}
  .fade-in.visible{ opacity:1; transform:none;}
}

/* ============== UTIL ============== */
.center{ text-align:center;}
.mt-1{margin-top:var(--s1)} .mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)}
.mb-3{margin-bottom:var(--s3)} .mb-4{margin-bottom:var(--s4)} .mb-5{margin-bottom:var(--s5)}

.facts{ display:flex; flex-wrap:wrap; gap:var(--s4) var(--s5); margin-top:var(--s4);}
.fact .num{ font-family:var(--serif); font-size:42px; line-height:1; display:block;}
.fact .lab{ font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--encre-douce); margin-top:8px; display:block;}

/* hospitality icon stroke */
.icon{ width:18px; height:18px; stroke:currentColor; stroke-width:1.5; fill:none; }

/* card */
.card{
  background:var(--papier);
  border:1px solid var(--filet);
  padding: var(--s4);
}

/* ============== BURGER (mobile) ============== */
.burger{
  display:none;
  width:36px; height:36px;
  background:transparent; border:0; padding:0;
  cursor:pointer; position:relative;
  margin-left:4px;
}
.burger span{
  display:block; width:22px; height:1px;
  background:currentColor;
  position:absolute; left:7px;
  transition:transform .3s var(--ease-out-expo);
}
.burger span:nth-child(1){ top:12px; }
.burger span:nth-child(2){ top:18px; }
.burger span:nth-child(3){ top:24px; }
.burger:hover span{ opacity:.7; }
.site-header.on-photo .burger{ color:var(--creme); }
.site-header.scrolled .burger{ color:var(--encre); }

/* ============== MOBILE MENU OVERLAY ============== */
.mobile-menu{
  position:fixed; inset:0;
  z-index:100;
  background:var(--creme);
  display:flex; flex-direction:column;
  padding:80px clamp(24px, 8vw, 56px) 40px;
  overflow-y:auto;
  opacity:0; pointer-events:none;
  transform:translateY(-12px);
  /* AUDIT 29/08 — `visibility:hidden` ajouté. `opacity:0` + `pointer-events:none` masquent le menu
     à l'œil et à la souris, mais PAS au clavier : ses dix liens restaient focalisables. Un visiteur
     au clavier voyait son curseur de focus disparaître pendant dix pressions de Tab au milieu de la
     page, et ses Entrée déclenchaient des navigations qu'il n'avait pas demandées. Seul
     `visibility:hidden` (ou l'attribut `inert`) retire réellement un nœud de l'ordre de tabulation.
     La transition reste fluide : `visibility` est ajoutée à la liste des propriétés animées. */
  visibility:hidden;
  transition:opacity .4s var(--ease-out-expo), transform .4s var(--ease-out-expo), visibility .4s;
}
.mobile-menu.is-open{
  opacity:1; pointer-events:auto; transform:none; visibility:visible;
}
.mobile-menu__close{
  position:absolute; top:24px; right:24px;
  width:40px; height:40px;
  background:transparent; border:0; padding:0;
  cursor:pointer;
  color:var(--encre);
}
.mobile-menu__close span{
  display:block; width:22px; height:1px;
  background:currentColor;
  position:absolute; left:9px; top:19px;
  transform-origin:center;
}
.mobile-menu__close span:nth-child(1){ transform:rotate(45deg); }
.mobile-menu__close span:nth-child(2){ transform:rotate(-45deg); }
.mobile-menu__close:hover{ opacity:.7; }
.mobile-menu__nav{
  display:flex; flex-direction:column;
  gap:32px;
  margin-top:auto; margin-bottom:auto;
}
.mobile-menu__section{
  display:flex; flex-direction:column;
  gap:14px;
  padding-bottom:24px;
  border-bottom:1px solid var(--filet);
}
.mobile-menu__section:last-child{ border-bottom:0; }
.mobile-menu__eyebrow{
  font-family:var(--sans); font-weight:500;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--encre-douce);
  margin-bottom:4px;
}
.mobile-menu__section a{
  font-family:var(--serif); font-size:24px;
  color:var(--encre);
  letter-spacing:0;
  transition:color .25s ease;
}
.mobile-menu__section a:hover,
.mobile-menu__section a:focus{ color:var(--terracotta); }
.mobile-menu__footer-section a{ font-size:18px; color:var(--encre-douce); }

/* Bascule vers le burger dès qu'il y aurait risque de tassement (menu en ligne + utilitaires) */
@media (max-width:940px){
  .hub-nav{ display:none; }
  .burger{ display:block; }
  .top-right .contact-link{ display:none; }
  .top-right .insta-link{ display:none; }
}

/* Mode édition : un nom de carte d'adresses VIDÉ garde une cible de clic pour être restauré
   (sans ça, le h4 vide fait 0 px de haut → impossible de re-cliquer pour re-saisir un nom). */
body.ft-edit .addr h4[data-i18n]:empty { min-height: 1.3em; outline: 1px dashed rgba(42,38,32,.35); outline-offset: 2px; cursor: text; }
body.ft-edit .addr h4[data-i18n]:empty::before { content: '(nom vidé — cliquer pour restaurer)'; font-size: 12px; font-family: var(--sans); color: var(--encre-douce); opacity: .8; pointer-events: none; }
body.ft-edit .addr h4[data-i18n].ft-editing::before { content: none; }

/* ============== MOBILE / RESPONSIVE ============== */
@media (max-width:720px){
  .hub-nav{ display:none; }
  .site-header{ padding:16px 20px;}
  .burger{ display:block; }
  .top-right{ gap:14px; }
  .top-right .contact-link{ display:none; }
  .top-right .insta-link{ display:none; }
  .footer-row{ flex-direction:column; align-items:center; text-align:center; gap:18px;}
  .footer-row .links{ gap:14px var(--s3); justify-content:center; }
  .section{ padding: clamp(56px, 10vh, 96px) 0; }
  .hero h1{ font-size:clamp(40px, 11vw, 64px); }
  .hero .lead{ font-size:15px; }
  .facts{ gap:var(--s3) var(--s4); }
  .fact .num{ font-size:32px; }
  .cols-2{ grid-template-columns:1fr !important; gap:var(--s4) !important;}
  .cols-3{ grid-template-columns:1fr !important;}
  /* Inline grids overrides */
  .cols[style*="repeat(3"]{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--s2) !important;
  }
  .cols[style*="2fr 1fr"],
  .cols[style*="1fr 2fr"]{
    grid-template-columns: 1fr !important;
    gap: var(--s3) !important;
  }
  .wrap, .wrap--narrow, .wrap--wide{ padding: 0 24px; }
}
@media (max-width:480px){
  .hero h1{ font-size:clamp(36px, 10vw, 48px); }
  .mobile-menu__section a{ font-size:22px; }
  .footer-row{ font-size:11px; }
  /* boutons : marge de sécurité contre les libellés longs en écran étroit (sans casser sur 2 lignes) */
  .btn{ padding:14px 22px; letter-spacing:.14em; max-width:100%; }
  /* Ultra-mobile: 3-col inline → 1 col (sélecteur général : couvre aussi les grilles imbriquées) */
  .cols[style*="repeat(3"]{
    grid-template-columns: 1fr !important;
  }
  .wrap, .wrap--narrow, .wrap--wide{ padding: 0 20px; }
  .fact .num{ font-size:28px; }
}