/* =========================================================
   BATIVAL, design system
   Aligné sur le branding kit Batival.
   Rouge Batival #D32F2F, Noir de Structure #212121,
   Gris Technique #616161, Blanc de Fondation #FFFFFF.
   Titres Inter Bold, textes Open Sans.
   Radius : 4px (petits éléments) / 16px (cartes et médias).
   ========================================================= */

:root{
  /* Fonds : famille neutre dérivée du Noir de Structure */
  --bg:          #121212;
  --surface:     #1A1A1A;
  --surface-2:   #212121;   /* Noir de Structure */

  /* Gris Technique du kit, utilisé pour les filets et tracés */
  --grey-tech:   #616161;
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.20);

  /* Rouge Batival */
  --red:         #D32F2F;
  --red-hot:     #E53935;
  --red-soft:    rgba(211,47,47,.14);

  /* Le Rouge Batival sur fond noir plafonne à 3.8:1, suffisant pour les gros
     titres mais sous le seuil WCAG AA (4.5:1) en petits caractères. Cette
     variante éclaircie de la même famille atteint 5.4:1 et sert aux textes
     rouges de petite taille. */
  --red-text:    #EF5350;

  /* Textes : le Gris Technique est trop sombre sur fond noir pour du corps
     de texte (contraste < 4.5:1), on éclaircit dans la même famille neutre. */
  --text:        #FFFFFF;   /* Blanc de Fondation */
  --muted:       #BDBDBD;
  --muted-2:     #8E8E8E;

  /* Trame de plan révélée par le curseur */
  --plan-line:   rgba(255,255,255,.075);
  --plan-accent: rgba(211,47,47,.09);

  --f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container: 1240px;
  --r-card:    16px;
  --r-ui:      4px;
  --header-h:  72px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(211,47,47,.11), transparent 62%),
    radial-gradient(720px 480px at -5% 42%, rgba(255,255,255,.03), transparent 62%);
}

/* L'attribut `hidden` ne pose `display:none` qu'au niveau de la feuille de
   style du navigateur, la moins prioritaire de toutes. La moindre règle
   d'auteur déclarant un `display` l'annule — et ce design system en déclare
   partout : .btn en inline-flex, .booking__form en flex, .mega en grid.
   Sans cette ligne, masquer un élément depuis le JavaScript reste sans effet
   à l'écran. */
[hidden]{ display:none !important; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.08; letter-spacing:-.022em; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--red); color:#fff; }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:var(--r-ui); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:12px 20px;
  font-weight:600; border-radius:0 0 var(--r-ui) 0;
}
.skip-link:focus{ left:0; }

.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:24px;
  position:relative; z-index:1;
}
.anchor{ position:absolute; top:-110px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2B2B2B; border-radius:20px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#3F3F3F; }

/* =========================================================
   TRAME DE PLAN RÉVÉLÉE PAR LE CURSEUR
   Une trame technique couvre toute la page mais reste
   invisible : seul un disque autour du curseur la dévoile,
   comme si l'on éclairait le plan sous l'ouvrage fini.
   Le disque est décalé vers l'arrière du mouvement, ce qui
   donne au révélateur une légère inertie.
   ========================================================= */
.planreveal{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0;
  transition:opacity .7s var(--ease);
  background-image:
    radial-gradient(circle 170px at var(--cx,50%) var(--cy,50%), var(--plan-accent), transparent 70%),
    linear-gradient(var(--plan-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--plan-line) 1px, transparent 1px);
  background-size:100% 100%, 116px 116px, 116px 116px;
  -webkit-mask-image:radial-gradient(circle 300px at var(--cx,50%) var(--cy,50%), #000 0%, rgba(0,0,0,.4) 48%, transparent 74%);
  mask-image:radial-gradient(circle 300px at var(--cx,50%) var(--cy,50%), #000 0%, rgba(0,0,0,.4) 48%, transparent 74%);
}
.planreveal.is-on{ opacity:1; }

/* =========================================================
   ÉCRAN DE CHARGEMENT
   Masqué par défaut. Affiché uniquement si le script en tête
   de page a posé la classe .is-loading sur <html>.
   ========================================================= */
.loader{ display:none; }

.is-loading .loader{
  display:grid; place-items:center;
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  transition:opacity .55s var(--ease), visibility .55s;
  /* Filet de sécurité : si le script principal ne s'exécute jamais,
     le voile se retire quand même au bout de 5 secondes. */
  animation:loaderFailsafe 0s linear 5s forwards;
}
@keyframes loaderFailsafe{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
.is-loading .loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

.loader__inner{
  display:flex; flex-direction:column; align-items:center; gap:26px;
  padding:0 24px;
}

/* Sans symbole, le mot porte seul l'animation : il apparait en se resserrant. */
.loader__word{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.6rem, 5vw, 2.2rem);
  color:#fff; white-space:nowrap;
  animation:wordIn 1s var(--ease) .1s both;
}
@keyframes wordIn{
  from{ opacity:0; letter-spacing:.7em; }
  to{   opacity:1; letter-spacing:.26em; }
}

.loader__bar{
  display:block; width:180px; height:2px;
  background:rgba(255,255,255,.12); overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:100%;
  background:var(--red);
  transform-origin:left;
  animation:barFill 1.5s var(--ease) .2s both;
}
@keyframes barFill{
  from{ transform:scaleX(0); }
  to{   transform:scaleX(1); }
}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-ui);
  background:transparent;
  font-family:var(--f-display); font-weight:600; font-size:.94rem;
  cursor:pointer; overflow:hidden; white-space:nowrap;
  transition:transform .25s var(--ease), border-color .3s, background .3s, box-shadow .3s, color .3s;
}
.btn svg{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.btn:hover svg{ transform:translateX(4px); }
.btn span{ position:relative; z-index:2; }
.btn:active{ transform:translateY(1px) scale(.99); }

.btn--primary{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  box-shadow:0 10px 28px -14px rgba(211,47,47,.9);
}
.btn--primary::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, transparent 22%, rgba(255,255,255,.28) 50%, transparent 78%);
  transform:translateX(-130%);
  transition:transform .7s var(--ease);
}
.btn--primary:hover{
  background:var(--red-hot); border-color:var(--red-hot);
  transform:translateY(-2px);
  box-shadow:0 16px 38px -14px rgba(229,57,53,.95);
}
.btn--primary:hover::after{ transform:translateX(130%); }

.btn--ghost{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--text);
}
.btn--ghost:hover{
  border-color:rgba(211,47,47,.6);
  background:rgba(211,47,47,.12);
  transform:translateY(-2px);
}

.btn--lg{ padding:16px 28px; font-size:1rem; }
.btn--sm{ padding:10px 16px; font-size:.84rem; }
.btn--block{ display:flex; width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  border-bottom:1px solid transparent;
  transition:height .3s var(--ease), background .3s, border-color .3s;
}
.header.is-stuck{
  height:64px;
  background:rgba(11,12,16,.78);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.header__progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--red);
  transition:width .12s linear;
}
.header__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }

/* Logotype typographique seul. Le trait rouge sous le mot remplace le symbole
   et sert de rappel de marque. */
.logo{ display:inline-flex; align-items:center; }
.logo__word{
  position:relative;
  font-family:var(--f-display); font-weight:700; font-size:1.3rem;
  letter-spacing:.16em; line-height:1; padding-bottom:7px;
}
.logo__word::after{
  content:''; position:absolute; left:0; bottom:0; height:2px;
  width:26px; background:var(--red);
  transition:width .45s var(--ease);
}
.logo:hover .logo__word::after{ width:100%; }
.footer .logo__word{ font-size:1.45rem; }

.nav{ display:flex; align-items:center; gap:4px; }
.nav__link{
  position:relative; padding:9px 15px;
  font-size:.93rem; font-weight:600; color:var(--muted);
  transition:color .25s;
}
.nav__link::after{
  content:''; position:absolute; left:15px; right:15px; bottom:4px; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__link:hover, .nav__link.is-active{ color:#fff; }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); }
.nav__cta{ margin-left:14px; }

.burger{
  display:none;
  width:44px; height:44px; padding:0;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:var(--r-ui);
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:18px; height:1.5px; background:#fff;
  transition:transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:99;
  background:rgba(11,12,16,.97);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  padding:28px 24px 40px;
  display:flex; flex-direction:column; gap:22px;
  overflow-y:auto;
  animation:menuIn .3s var(--ease);
}
.mobile-menu[hidden]{ display:none; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-10px);} to{ opacity:1; transform:none;} }
.mobile-menu nav{ display:flex; flex-direction:column; }
.mobile-menu nav a{
  padding:17px 4px; border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-size:1.4rem; font-weight:600;
  transition:color .25s, padding-left .3s var(--ease);
}
.mobile-menu nav a:hover{ color:var(--red-text); padding-left:10px; }
.mobile-menu__addr{ color:var(--muted-2); font-size:.85rem; text-align:center; margin-top:auto; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:calc(var(--header-h) + 52px) 0 0;
  overflow:hidden;
  isolation:isolate;
}
.hero__grid{
  position:absolute; inset:-10% -5%; z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(115% 85% at 60% 20%, #000 12%, transparent 70%);
  -webkit-mask-image:radial-gradient(115% 85% at 60% 20%, #000 12%, transparent 70%);
  transform:translate3d(var(--px,0), var(--py,0), 0);
  transition:transform .6s var(--ease);
}
.hero__glow{
  position:absolute; z-index:-2;
  width:720px; height:720px; right:-200px; top:-250px;
  background:radial-gradient(circle, rgba(211,47,47,.24), transparent 62%);
  filter:blur(30px);
  animation:breathe 10s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.7; transform:scale(1);} 50%{ opacity:1; transform:scale(1.07);} }

.hero__inner{
  display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center;
  padding-bottom:56px;
}

.chip{
  display:inline-block;
  padding:8px 16px;
  border:1px solid var(--line); border-radius:100px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:.78rem; font-weight:600; letter-spacing:.05em; color:var(--muted);
}

.hero__title{
  margin:26px 0 0;
  /* Échelle calée pour que « notre engagement. » tienne sur une seule ligne :
     au-dessus, la coupure isole le mot « notre ». */
  font-size:clamp(2.2rem, 3.5vw, 3.15rem);
  text-transform:uppercase;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.grad{ color:var(--red); }

.hero__sub{
  margin-top:22px; max-width:54ch;
  color:var(--muted); font-size:clamp(1rem, 1.25vw, 1.08rem); font-weight:300;
}
.hero__actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }

/* Visuel du hero */
.shot{ margin:0; }
.shot__frame{
  position:relative;
  width:100%;
  /* Accordé au 16:9 de la vidéo, avec un très léger rognage latéral
     pour garder un peu de hauteur dans la composition. */
  aspect-ratio:16/10;
  max-height:min(58vh, 560px);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  background:linear-gradient(160deg, #1a1b21, #111111);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.95);
}
.shot__img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) brightness(1);
  transition:transform 1.1s var(--ease), filter .6s;
}
.shot:hover .shot__img{ transform:scale(1.04); filter:contrast(1.1) brightness(1.1); }
.shot__mesh{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(200deg, #000 5%, transparent 55%);
  -webkit-mask-image:linear-gradient(200deg, #000 5%, transparent 55%);
}
.shot__edge{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,12,16,.86) 2%, transparent 42%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.shot__frame.is-fallback::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(160deg, #242424 0%, #161616 55%, #101010 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 46px);
}

/* Bandeau défilant */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.018);
  overflow:hidden; padding:14px 0;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track{
  display:flex; align-items:center; gap:48px; width:max-content;
  animation:scrollX 36s linear infinite;
}
.ticker__track span{
  font-family:var(--f-display); font-size:.8rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2); white-space:nowrap;
}
@keyframes scrollX{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ position:relative; padding:118px 0; }
.section--tight{ padding:82px 0; }
.section--alt{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.022), transparent); }

.sec-head{ max-width:760px; margin:0 auto 56px; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red-text); font-weight:600;
}
.eyebrow i{ width:26px; height:1px; background:var(--red); display:block; }
.sec-title{ margin-top:16px; font-size:clamp(1.9rem, 3.4vw, 2.9rem); text-transform:uppercase; }
.sec-desc{ margin-top:20px; color:var(--muted); font-weight:300; font-size:1.02rem; max-width:65ch; }
.sec-desc--center{ margin-inline:auto; }

/* Halo rouge suivant le curseur */
.card-glow{ position:relative; overflow:hidden; }
.card-glow::before{
  content:''; position:absolute; inset:-1px; z-index:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(211,47,47,.15), transparent 62%);
  opacity:0; transition:opacity .4s;
}
.card-glow:hover::before{ opacity:1; }
.card-glow > *{ position:relative; z-index:1; }


/* =========================================================
   EXPERTISE
   ========================================================= */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

.xcard{
  padding:30px 26px 32px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:linear-gradient(170deg, rgba(30,30,36,.55), rgba(18,18,22,.32));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.xcard:hover{
  transform:translateY(-6px);
  border-color:rgba(211,47,47,.42);
  box-shadow:0 34px 70px -34px rgba(211,47,47,.5);
}
.xcard__icon{
  width:50px; height:50px; border-radius:var(--r-ui);
  display:grid; place-items:center;
  border:1px solid var(--line-strong);
  background:var(--red-soft);
  transition:border-color .4s, transform .4s var(--ease);
}
.xcard:hover .xcard__icon{ border-color:rgba(211,47,47,.6); transform:translateY(-2px); }
.xcard__icon svg{ width:24px; height:24px; fill:none; stroke:var(--red); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.xcard__title{ margin-top:22px; font-size:1.14rem; }
.xcard__desc{ margin-top:11px; color:var(--muted); font-size:.9rem; font-weight:300; }

.expertise__cta{
  margin-top:42px; padding:26px 30px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:radial-gradient(600px 220px at 82% 130%, rgba(211,47,47,.15), transparent 65%), rgba(255,255,255,.02);
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.expertise__cta p{ font-family:var(--f-display); font-size:1.12rem; font-weight:600; }

/* =========================================================
   PROCESSUS
   ========================================================= */
.timeline{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  padding-top:50px;
}
.timeline__rail{ position:absolute; top:18px; left:12.5%; right:12.5%; height:1px; background:var(--line); }
.timeline__rail i{ display:block; height:100%; width:0; background:var(--red); transition:width 1.4s var(--ease); }

.tstep{ position:relative; }
.tstep__node{
  position:absolute; top:-50px; left:50%; transform:translateX(-50%);
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-strong); background:var(--bg);
  transition:border-color .5s;
}
.tstep__node span{ width:9px; height:9px; border-radius:50%; background:#3F3F3F; transition:background .5s; }
.tstep.is-on .tstep__node{ border-color:rgba(211,47,47,.65); }
.tstep.is-on .tstep__node span{ background:var(--red); }

.tstep__card{
  height:100%; padding:28px 24px 26px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:linear-gradient(170deg, rgba(30,30,36,.55), rgba(18,18,22,.32));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.tstep__card:hover{
  transform:translateY(-5px);
  border-color:rgba(211,47,47,.4);
  box-shadow:0 30px 64px -34px rgba(211,47,47,.5);
}
.tstep__head{ display:flex; align-items:center; justify-content:space-between; }
.tstep__num{
  font-family:var(--f-display); font-weight:700; font-size:2rem; line-height:1;
  letter-spacing:-.04em; color:var(--red);
}
.tstep__icon{
  width:42px; height:42px; border-radius:var(--r-ui); display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}
.tstep__icon svg{ width:20px; height:20px; fill:none; stroke:var(--red); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tstep__title{ margin-top:20px; font-size:1.06rem; }
.tstep__desc{ margin-top:11px; color:var(--muted); font-size:.87rem; font-weight:300; }
.tstep__out{ margin-top:auto; padding-top:18px; display:block; font-size:.74rem; color:var(--muted-2); }

/* =========================================================
   PORTFOLIO
   ========================================================= */
.projects{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }

/* Nombre impair de projets : la dernière carte occupe toute la largeur plutôt
   que de laisser une cellule vide à côté d'elle. La règle s'adapte seule quand
   vous ajoutez ou retirez un projet, sans intervention. */
.projects > .project:last-child:nth-child(odd){ grid-column:1 / -1; }
.projects > .project:last-child:nth-child(odd) .project__media{ aspect-ratio:24/9; }
.project{
  position:relative;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface);
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.project:hover{
  transform:translateY(-6px);
  border-color:rgba(211,47,47,.4);
  box-shadow:0 36px 70px -36px rgba(211,47,47,.55);
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }

.project__media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(155deg, #1c1e24, #101116);
}
.project__media img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.04) brightness(1);
  transition:transform .8s var(--ease), filter .5s;
}
.project:hover .project__media img{ transform:scale(1.06); filter:contrast(1.1) brightness(1.12); }
.project__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,12,16,.9) 6%, transparent 52%);
}
.project__media.is-fallback{
  background:
    linear-gradient(155deg, #262626 0%, #171717 60%, #111111 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 40px);
}

.project__body{ padding:20px 22px 24px; position:relative; z-index:2; }
.project__name{ font-size:1.08rem; }
.project__loc{ margin-top:6px; color:var(--muted-2); font-size:.84rem; }

.project__overlay{
  position:absolute; inset:0; z-index:5;
  padding:26px 24px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:18px;
  background:linear-gradient(to top, rgba(11,12,16,.97) 28%, rgba(11,12,16,.78));
  opacity:0; transform:translateY(12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.project:hover .project__overlay,
.project:focus-within .project__overlay,
.project:focus .project__overlay{ opacity:1; transform:none; }
.project__lines{ display:flex; flex-direction:column; gap:13px; }
.project__lines div{ border-left:2px solid var(--red); padding-left:12px; }
.project__lines span{ display:block; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.project__lines b{ font-family:var(--f-display); font-size:.9rem; font-weight:600; }

.projects__note{ margin-top:28px; text-align:center; color:var(--muted-2); font-size:.86rem; }

/* Bandeau partenaires, en pied de la section portfolio */
.partners{ margin-top:76px; padding-top:56px; border-top:1px solid var(--line); }

/* Même traitement que les titres de section : Inter Bold, capitales, échelle fluide. */
.partners__title{
  text-align:center;
  font-size:clamp(1.9rem, 3.4vw, 2.9rem);
  text-transform:uppercase;
}
.partners__desc{
  margin:20px auto 38px; max-width:60ch; text-align:center;
  color:var(--muted); font-weight:300; font-size:1.02rem;
}
.marquee{
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{ display:flex; align-items:center; gap:64px; width:max-content; animation:scrollX 42s linear infinite; }

/* Les logos sont des silhouettes noires détourées : une seule inversion suffit
   à les passer en blanc sur fond sombre. Le plafond de largeur évite qu'un
   logo très allongé écrase optiquement les autres. */
.marquee__track img{
  flex:none;
  height:34px; width:auto; max-width:150px;
  object-fit:contain;
  filter:invert(1);
  opacity:.55;
  transition:opacity .35s;
}
.marquee__track img:hover{ opacity:1; }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* =========================================================
   CONTACT ET PRISE DE RDV
   ========================================================= */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; align-items:start; }
.contact__aside{ display:flex; flex-direction:column; gap:20px; }

.info{
  padding:30px 28px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:linear-gradient(170deg, rgba(30,30,36,.58), rgba(18,18,22,.34));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.info__title{ font-size:1.38rem; letter-spacing:.05em; }
.info__tag{ margin-top:6px; color:var(--red-text); font-size:.82rem; font-weight:600; }
.info__list{ margin-top:26px; display:flex; flex-direction:column; gap:20px; }
.info__list li{ display:flex; gap:14px; align-items:flex-start; }
.info__list svg{
  width:20px; height:20px; flex:none; margin-top:3px;
  fill:none; stroke:var(--red); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.info__list span{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.info__list b{ display:block; margin-top:4px; font-weight:600; font-size:.94rem; line-height:1.55; }
.info__list a{ transition:color .25s; }
.info__list a:hover{ color:var(--red-text); }

.map{
  position:relative; min-height:250px;
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
}
.map__svg{ width:100%; height:100%; min-height:250px; }
.map__ring{ transform-origin:212px 140px; animation:ringPulse 3.4s ease-out infinite; }
@keyframes ringPulse{
  0%{ transform:scale(.45); opacity:.85; }
  100%{ transform:scale(1.55); opacity:0; }
}
.map__pin{
  position:absolute; left:18px; bottom:18px;
  padding:12px 16px; border-radius:var(--r-ui);
  border:1px solid var(--line-strong);
  background:rgba(11,12,16,.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.map__pin b{ display:block; font-family:var(--f-display); font-size:.9rem; }
.map__pin span{ display:block; font-size:.78rem; color:var(--muted-2); margin-top:2px; }
.map__link{
  position:absolute; right:18px; top:18px;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:var(--r-ui);
  border:1px solid var(--line-strong);
  background:rgba(11,12,16,.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:.78rem; font-weight:600;
  transition:border-color .3s, background .3s;
}
.map__link svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.map__link:hover{ border-color:rgba(211,47,47,.6); background:rgba(211,47,47,.18); }

.booking{
  padding:34px 32px 32px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(211,47,47,.10), transparent 62%),
    linear-gradient(170deg, rgba(30,30,36,.7), rgba(18,18,22,.44));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 44px 90px -54px rgba(0,0,0,.9);
}
.booking__head{ padding-bottom:24px; border-bottom:1px solid var(--line); }
.booking__head h2,.booking__head h3{ font-size:1.34rem; }
.booking__head p{ margin-top:8px; color:var(--muted); font-size:.9rem; font-weight:300; max-width:52ch; }

.booking__form{ margin-top:26px; display:flex; flex-direction:column; gap:26px; }
.fset{ border:0; padding:0; margin:0; }
.fset legend{
  font-family:var(--f-display); font-weight:600; font-size:.95rem;
  margin-bottom:14px; padding:0;
}

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.pill input{ position:absolute; opacity:0; width:0; height:0; }
.pill span{
  display:inline-block; padding:11px 18px;
  border:1px solid var(--line); border-radius:100px;
  background:rgba(255,255,255,.03);
  font-size:.87rem; font-weight:600; color:var(--muted);
  cursor:pointer; transition:all .25s var(--ease);
}
.pill span:hover{ border-color:var(--line-strong); color:#fff; }
.pill input:checked + span{ border-color:var(--red); background:var(--red-soft); color:#fff; }
.pill input:focus-visible + span{ outline:2px solid var(--red); outline-offset:3px; }

.days{ display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-bottom:14px; }
.day input{ position:absolute; opacity:0; width:0; height:0; }
.day span{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 6px; border-radius:var(--r-ui);
  border:1px solid var(--line); background:rgba(255,255,255,.025);
  cursor:pointer; transition:all .25s var(--ease);
}
.day em{ font-style:normal; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.day b{ font-family:var(--f-display); font-size:1.26rem; line-height:1.2; }
.day i{ font-style:normal; font-size:.66rem; color:var(--muted-2); }
.day span:hover{ border-color:var(--line-strong); }
.day input:checked + span{ border-color:var(--red); background:var(--red-soft); }
.day input:checked + span em,
.day input:checked + span i{ color:#FF8A80; }
.day input:focus-visible + span{ outline:2px solid var(--red); outline-offset:3px; }

.slots{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.slot input{ position:absolute; opacity:0; width:0; height:0; }
.slot span{
  display:block; text-align:center; padding:11px 4px; border-radius:var(--r-ui);
  border:1px solid var(--line); background:rgba(255,255,255,.025);
  font-family:var(--f-display); font-size:.86rem; font-weight:600; color:var(--muted);
  cursor:pointer; transition:all .25s var(--ease);
}
.slot span:hover{ border-color:var(--line-strong); color:#fff; }
.slot input:checked + span{ border-color:var(--red); background:var(--red-soft); color:#fff; }
.slot input:focus-visible + span{ outline:2px solid var(--red); outline-offset:3px; }

/* Champs : libellé au-dessus */
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.82rem; font-weight:600; color:#d4d4d8; }
.field label i{ font-style:normal; color:var(--muted-2); font-weight:400; }
.field input,
.field textarea{
  width:100%; padding:13px 15px;
  border:1px solid var(--line-strong); border-radius:var(--r-ui);
  background:rgba(255,255,255,.04);
  color:#fff; font-family:var(--f-body); font-size:.92rem;
  transition:border-color .25s, background .25s;
  resize:vertical;
}
.field textarea{ min-height:96px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--red); background:rgba(211,47,47,.06);
}
.field.is-error input, .field.is-error textarea{ border-color:#ff5c5c; }

.err{ margin-top:9px; font-size:.82rem; color:#ff9b9b; display:none; }
.err.is-shown{ display:block; }

.booking__summary{
  padding:16px 20px; border-radius:var(--r-ui);
  border:1px dashed var(--line-strong); background:rgba(255,255,255,.02);
}
.booking__summary p{ font-family:var(--f-display); font-size:.96rem; font-weight:600; color:var(--muted); }
.booking__summary.is-ready{ border-style:solid; border-color:rgba(211,47,47,.5); background:var(--red-soft); }
.booking__summary.is-ready p{ color:#fff; }

.booking__legal{ font-size:.78rem; color:var(--muted-2); text-align:center; line-height:1.6; }

.booking__done{ padding:26px 4px 8px; text-align:center; animation:cardIn .45s var(--ease) both; }
.booking__check{
  width:62px; height:62px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(211,47,47,.55); background:var(--red-soft);
}
.booking__check svg{ width:28px; height:28px; fill:none; stroke:var(--red); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.booking__done h2,.booking__done h3{ font-size:1.28rem; }
.booking__done p{ margin:14px auto 24px; max-width:48ch; color:var(--muted); font-size:.92rem; font-weight:300; }
.booking__done .btn{ margin:0 auto 12px; }
.booking__done .btn--ghost{ display:inline-flex; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.018), transparent 40%);
  padding:70px 0 32px;
}
.footer__top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:44px;
  padding-bottom:46px; border-bottom:1px solid var(--line);
}
.footer__pitch{ margin:20px 0 22px; color:var(--muted); font-size:.9rem; font-weight:300; max-width:38ch; }
.footer__col{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.footer__ttl{
  font-family:var(--f-body); font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:16px;
}
.footer__col a{ font-size:.9rem; color:var(--muted); transition:color .25s, transform .25s var(--ease); }
.footer__col a:hover{ color:var(--red-text); transform:translateX(3px); }
.footer__col address{ font-style:normal; font-size:.9rem; color:var(--muted); line-height:1.75; }

.footer__bottom{ padding-top:26px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer__bottom p{ font-size:.82rem; color:var(--muted-2); }
.footer__legal{ display:flex; gap:24px; flex-wrap:wrap; }
.footer__legal a{ font-size:.82rem; color:var(--muted-2); transition:color .25s; }
.footer__legal a:hover{ color:var(--red-text); }

.totop{
  position:fixed; right:24px; bottom:24px; z-index:80;
  width:46px; height:46px; padding:0; border-radius:var(--r-ui);
  border:1px solid var(--line-strong);
  background:rgba(18,18,22,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:grid; place-items:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s, transform .3s var(--ease), visibility .3s, border-color .3s, background .3s;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ border-color:rgba(211,47,47,.6); background:rgba(211,47,47,.18); }
.totop svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* =========================================================
   RÉVÉLATION AU SCROLL
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--d, 0ms);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   PAGE MENTIONS LÉGALES
   ========================================================= */
.legal{ padding:calc(var(--header-h) + 76px) 0 100px; }
.legal__back{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.85rem; color:var(--muted); margin-bottom:26px; transition:color .25s;
}
.legal__back:hover{ color:var(--red-text); }
.legal__back svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.legal h1{ font-size:clamp(2rem, 4vw, 2.9rem); text-transform:uppercase; }
.legal .lead{ margin-top:16px; color:var(--muted); font-weight:300; max-width:65ch; }
.legal article{
  margin-top:22px; padding:28px 30px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:linear-gradient(170deg, rgba(30,30,36,.5), rgba(18,18,22,.28));
}
.legal article h2{ font-size:1.16rem; text-transform:uppercase; }
.legal article p, .legal article li{ margin-top:12px; color:var(--muted); font-size:.94rem; font-weight:300; max-width:70ch; }
.legal article li{ position:relative; padding-left:17px; }
.legal article li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:6px; height:6px; background:var(--red); transform:rotate(45deg);
}
.legal article a{ color:var(--red-text); }
.legal article a:hover{ text-decoration:underline; }

/* Carte : couleurs pilotées par le thème */
.map__ground{ fill:var(--map-ground); }
.map__road{ stroke:var(--map-road); }
.map__block{ fill:var(--map-block); stroke:var(--map-block-line); }
.map__water{ fill:var(--map-water); }

/* =========================================================
   THÈME CLAIR
   Activé par data-theme="light" sur <html>.
   Le rouge de marque et la structure ne changent pas ; seuls
   les fonds, les filets, les textes et les voiles s'inversent.
   ========================================================= */
:root{
  --ui-soft:   rgba(255,255,255,.04);
  --ui-softer: rgba(255,255,255,.025);
  --card-grad: linear-gradient(170deg, rgba(30,30,36,.55), rgba(18,18,22,.32));
  --card-grad-strong: linear-gradient(170deg, rgba(30,30,36,.7), rgba(18,18,22,.44));
  --panel-bg:  rgba(11,12,16,.82);
  --shadow-lg: 0 44px 90px -54px rgba(0,0,0,.9);
  --map-ground:#1C1C1C;
  --map-road:  #4A4A4A;
  --map-block: #1E1E1E;
  --map-block-line:#333333;
  --map-water: #171717;
}

:root[data-theme="light"]{
  --bg:          #F4F4F4;
  --surface:     #FFFFFF;
  --surface-2:   #EBEBEB;

  --line:        rgba(0,0,0,.11);
  --line-strong: rgba(0,0,0,.20);

  /* Sur fond clair, le Rouge Batival passe le seuil AA en petits
     caractères (4.5:1), mais de justesse. On le fonce d'un cran. */
  --red-text:    #C62828;
  --red-soft:    rgba(211,47,47,.10);

  --text:        #212121;   /* Noir de Structure */
  --muted:       #565656;
  --muted-2:     #6E6E6E;

  --plan-line:   rgba(0,0,0,.07);
  --plan-accent: rgba(211,47,47,.07);

  --ui-soft:   rgba(0,0,0,.035);
  --ui-softer: rgba(0,0,0,.022);
  --card-grad: linear-gradient(170deg, #FFFFFF, #FAFAFA);
  --card-grad-strong: linear-gradient(170deg, #FFFFFF, #F7F7F7);
  --panel-bg:  rgba(255,255,255,.88);
  --shadow-lg: 0 30px 60px -40px rgba(0,0,0,.28);

  --map-ground:#E7E7E7;
  --map-road:  #C4C4C4;
  --map-block: #DCDCDC;
  --map-block-line:#C9C9C9;
  --map-water: #D6DEE2;
}

[data-theme="light"] body::before{
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(211,47,47,.07), transparent 62%),
    radial-gradient(720px 480px at -5% 42%, rgba(0,0,0,.022), transparent 62%);
}

[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#C9C9C9; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#AFAFAF; }

/* Chrome de page */
[data-theme="light"] .header.is-stuck{ background:rgba(244,244,244,.82); }
[data-theme="light"] .mobile-menu{ background:rgba(244,244,244,.97); }
[data-theme="light"] .burger span{ background:var(--text); }
[data-theme="light"] .nav__link:hover,
[data-theme="light"] .nav__link.is-active{ color:var(--text); }
[data-theme="light"] .btn--ghost{ background:rgba(0,0,0,.035); }
[data-theme="light"] .btn--ghost:hover{ background:rgba(211,47,47,.10); }
[data-theme="light"] .totop{ background:rgba(255,255,255,.92); }
[data-theme="light"] .loader__word{ color:var(--text); }
[data-theme="light"] .loader__bar{ background:rgba(0,0,0,.10); }

/* Accueil */
[data-theme="light"] .hero__grid{
  background-image:
    linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px);
}
[data-theme="light"] .hero__glow{
  background:radial-gradient(circle, rgba(211,47,47,.14), transparent 62%);
}
[data-theme="light"] .chip{ background:rgba(0,0,0,.035); }
[data-theme="light"] .shot__frame{
  background:linear-gradient(160deg, #EDEDED, #E2E2E2);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.45);
}
[data-theme="light"] .shot__mesh{
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
}
[data-theme="light"] .shot__edge{
  background:linear-gradient(to top, rgba(255,255,255,.9) 1%, transparent 38%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
[data-theme="light"] .burger{ background:rgba(0,0,0,.035); }
[data-theme="light"] .tstep__icon{ background:rgba(0,0,0,.03); }
[data-theme="light"] .shot__frame.is-fallback::after{
  background:
    linear-gradient(160deg, #E4E4E4 0%, #D8D8D8 55%, #CFCFCF 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 46px);
}
[data-theme="light"] .ticker{ background:rgba(0,0,0,.02); }
[data-theme="light"] .section--alt{
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.028), transparent);
}

/* Cartes et blocs */
[data-theme="light"] .xcard,
[data-theme="light"] .tstep__card,
[data-theme="light"] .info,
[data-theme="light"] .legal article{
  background:var(--card-grad);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
[data-theme="light"] .booking{
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(211,47,47,.06), transparent 62%),
    var(--card-grad-strong);
  box-shadow:var(--shadow-lg);
}
[data-theme="light"] .expertise__cta{
  background:radial-gradient(600px 220px at 82% 130%, rgba(211,47,47,.09), transparent 65%), #FFFFFF;
}
[data-theme="light"] .tstep__node span{ background:#C4C4C4; }
[data-theme="light"] .marquee__track img{ filter:none; opacity:.5; }
[data-theme="light"] .marquee__track img:hover{ opacity:.9; }

/* Projets : le voile sur les visuels reste sombre, le texte y est blanc.
   Seul le raccord entre l'image et la carte doit s'éclaircir. */
[data-theme="light"] .project__media{ background:linear-gradient(155deg, #E4E4E4, #D6D6D6); }
[data-theme="light"] .project__media::after{
  background:linear-gradient(to top, rgba(255,255,255,.9) 0%, transparent 26%);
}
[data-theme="light"] .project__media.is-fallback{
  background:
    linear-gradient(155deg, #E4E4E4 0%, #D8D8D8 60%, #CFCFCF 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 40px);
}
[data-theme="light"] .project__overlay{
  background:linear-gradient(to top, rgba(255,255,255,.97) 28%, rgba(255,255,255,.86));
}

/* Contact */
[data-theme="light"] .map__pin,
[data-theme="light"] .map__link{ background:var(--panel-bg); }
[data-theme="light"] .map__link:hover{ background:rgba(211,47,47,.14); color:var(--text); }

/* Formulaire */
[data-theme="light"] .pill span,
[data-theme="light"] .day span,
[data-theme="light"] .slot span{ background:var(--ui-softer); }
[data-theme="light"] .pill span:hover,
[data-theme="light"] .slot span:hover{ color:var(--text); }
[data-theme="light"] .pill input:checked + span,
[data-theme="light"] .slot input:checked + span{ color:var(--red-text); }
[data-theme="light"] .day input:checked + span em,
[data-theme="light"] .day input:checked + span i{ color:var(--red-text); }
[data-theme="light"] .field label{ color:var(--text); }
[data-theme="light"] .field input,
[data-theme="light"] .field textarea{ background:#FFFFFF; color:var(--text); }
[data-theme="light"] .field input:focus,
[data-theme="light"] .field textarea:focus{ background:#FFFFFF; }
[data-theme="light"] .field.is-error input,
[data-theme="light"] .field.is-error textarea{ border-color:#C62828; }
[data-theme="light"] .err{ color:#C62828; }
[data-theme="light"] .booking__summary{ background:rgba(0,0,0,.022); }
[data-theme="light"] .booking__summary.is-ready p{ color:var(--text); }

/* Pied de page */
[data-theme="light"] .footer{
  background:linear-gradient(180deg, rgba(0,0,0,.022), transparent 40%);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1140px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  /* Trois blocs de texte tiennent sur une ligne jusqu'au seuil mobile ;
     passer à deux colonnes laisserait une carte orpheline sur la seconde ligne. */
  .timeline{ grid-template-columns:repeat(2,1fr); row-gap:62px; }
  .timeline__rail{ display:none; }
  .tstep__node{ position:static; transform:none; margin-bottom:16px; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:38px; }
}

@media (max-width:980px){
  :root{ --header-h:64px; }
  .nav{ display:none; }
  .burger{ display:flex; }
  .hero{ padding-top:calc(var(--header-h) + 52px); }
  .hero__inner{ grid-template-columns:1fr; gap:52px; padding-bottom:56px; }
  .shot__frame{ aspect-ratio:16/9; }
  .contact{ grid-template-columns:1fr; }
  .section{ padding:88px 0; }
}

@media (max-width:720px){
  .container{ padding-inline:18px; }
  .section{ padding:70px 0; }
  .section--tight{ padding:60px 0; }
  .hero__actions .btn{ width:100%; }
  .grid-4,.projects,.timeline{ grid-template-columns:1fr; }
  /* Sur une colonne, toutes les cartes reprennent le même format d'image. */
  .projects > .project:last-child:nth-child(odd) .project__media{ aspect-ratio:4/3; }
  .timeline{ row-gap:40px; }
  .booking{ padding:26px 20px; }
  .fgrid{ grid-template-columns:1fr; }
  .slots{ grid-template-columns:repeat(3,1fr); }
  .days{ grid-template-columns:repeat(3,1fr); }
  .expertise__cta{ flex-direction:column; align-items:stretch; }
  .expertise__cta .btn{ width:100%; }
  .footer__top{ grid-template-columns:1fr; gap:34px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .totop{ right:16px; bottom:16px; }
}

@media (max-width:420px){
  .logo__word{ font-size:1.1rem; letter-spacing:.13em; }
  .hero__title{ font-size:2.1rem; }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* Impression */
@media print{
  body{ background:#fff; color:#000; }
  .header,.totop,.ticker,.marquee,.hero__grid,.hero__glow{ display:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   PAGES INTÉRIEURES
   Composants ajoutés pour les pages de prestations, de zones
   et de réalisations. Écrits avec les jetons du design system,
   sans aucune couleur en dur, pour rester alignés sur la charte.
   ========================================================= */

strong{ font-weight:600; }

/* --- Accroche placée dans le H1 d'accueil.
       Reprend l'aspect de .chip, mais fait partie du titre :
       le mot-clé principal se trouve ainsi dans le H1. --- */
.hero__kicker{
  /* `block` la met sur sa propre ligne, `fit-content` lui rend la largeur
     de son texte : en inline-block, le titre repartait sur la même ligne
     et « Votre » se retrouvait collé à droite de la pastille. */
  display:block; width:fit-content; margin-bottom:24px;
  padding:8px 16px;
  border:1px solid var(--line); border-radius:100px;
  background:var(--ui-soft);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:var(--f-body); font-size:.78rem; font-weight:600;
  line-height:1.5; letter-spacing:.05em; text-transform:none;
  color:var(--muted);
}
.hero__title{ margin-top:0; }

/* --- Menu déroulant des prestations --- */
.nav{ position:relative; }
.nav__toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; font-family:inherit;
}
.nav__chev{
  width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__chev{ transform:rotate(180deg); }
.nav__toggle[aria-expanded="true"]{ color:var(--text); }
.nav__toggle[aria-expanded="true"]::after{ transform:scaleX(1); }

.mega{
  position:absolute; top:calc(100% + 12px); right:0;
  min-width:660px; max-width:min(760px, calc(100vw - 48px));
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;
  padding:26px 28px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--panel-bg);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow-lg);
  z-index:60;
  animation:megaIn .22s var(--ease) both;
}
.mega[hidden]{ display:none; }
@keyframes megaIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.mega__col{ display:flex; flex-direction:column; gap:9px; }
.mega__col--last{ border-left:1px solid var(--line); padding-left:24px; }
.mega__title{
  font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:5px;
}
.mega__col a{
  font-size:.9rem; color:var(--muted);
  transition:color .25s, transform .25s var(--ease);
}
.mega__col a:hover{ color:var(--red-text); transform:translateX(3px); }

.mobile-menu__head{
  margin:20px 0 4px;
  font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);
}
.mobile-menu__head:first-child{ margin-top:0; }
.mobile-menu nav a{ font-size:1rem; }

/* --- Fil d'Ariane --- */
.crumbs{ margin-bottom:26px; }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.crumbs li{ display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--muted-2); }
.crumbs li + li::before{
  content:''; width:5px; height:5px;
  border-top:1.5px solid var(--line-strong); border-right:1.5px solid var(--line-strong);
  transform:rotate(45deg);
}
.crumbs a{ color:var(--muted-2); transition:color .25s; }
.crumbs a:hover{ color:var(--red-text); }
.crumbs [aria-current="page"]{ color:var(--text); }

/* --- Bandeau de titre des pages intérieures --- */
.page-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:calc(var(--header-h) + 58px) 0 48px;
  border-bottom:1px solid var(--line);
}
.page-hero--slim{ padding-bottom:36px; }
.page-hero__inner{ max-width:76ch; }
.page-hero__kicker{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-text); margin-bottom:14px;
}
.page-hero__title{
  font-size:clamp(1.85rem, 3.3vw, 2.85rem);
  text-transform:uppercase; letter-spacing:-.028em; text-wrap:balance;
}
.page-hero__sub{
  margin-top:20px; max-width:68ch;
  color:var(--muted); font-size:1.02rem; font-weight:300; line-height:1.75;
}
.page-hero__actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }

/* --- Gabarit contenu + colonne latérale --- */
.page-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 320px;
  gap:56px; align-items:start;
}

/* --- Typographie de contenu --- */
.prose{ max-width:74ch; }
.prose--wide{ max-width:88ch; }
.prose h2{
  margin-top:46px;
  font-size:clamp(1.26rem, 2vw, 1.58rem);
  text-transform:uppercase; letter-spacing:-.02em;
}
.prose > h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.02rem; }
.prose p{
  margin-top:16px; color:var(--muted);
  font-size:1rem; font-weight:300; line-height:1.78;
}
.prose strong{ color:var(--text); font-weight:600; }
.prose > p > a,
.prose li > a,
.faq__body a{
  color:var(--red-text);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(211,47,47,.32);
  transition:text-decoration-color .25s;
}
.prose > p > a:hover,
.prose li > a:hover,
.faq__body a:hover{ text-decoration-color:var(--red-text); }

/* --- Liste à coches --- */
.ticks{ margin-top:22px; display:flex; flex-direction:column; gap:13px; }
.ticks li{
  position:relative; padding-left:29px;
  color:var(--muted); font-weight:300; font-size:.97rem; line-height:1.7;
}
.ticks li::before{
  content:''; position:absolute; left:3px; top:.55em;
  width:10px; height:6px;
  border-left:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(-45deg);
}
.ticks strong{ color:var(--text); font-weight:600; }

/* --- Étapes numérotées --- */
.steps{ margin-top:24px; counter-reset:step; display:flex; flex-direction:column; gap:14px; }
.steps li{
  counter-increment:step; position:relative;
  padding:22px 24px 24px 68px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--card-grad);
}
.steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:24px; top:21px;
  font-family:var(--f-display); font-weight:700; font-size:1.06rem; color:var(--red);
}
.steps h3{ font-size:1rem; }
.steps p{ margin-top:9px; color:var(--muted); font-size:.92rem; font-weight:300; line-height:1.7; }

/* --- Colonne latérale --- */
.side{
  position:sticky; top:calc(var(--header-h) + 24px);
  display:flex; flex-direction:column; gap:18px;
}
.side__card{
  padding:26px 24px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:radial-gradient(420px 200px at 100% 0%, rgba(211,47,47,.07), transparent 62%), var(--card-grad-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.side__title{
  font-family:var(--f-display); font-weight:700; font-size:1.02rem; letter-spacing:-.02em;
}
.side__text{ margin-top:12px; color:var(--muted); font-size:.9rem; font-weight:300; line-height:1.7; }
.side__card .btn{ margin-top:20px; }
.side__card p a{ color:var(--red-text); }
.side__links{
  padding:24px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--card-grad);
  display:flex; flex-direction:column; gap:11px;
}
.side__links .side__title{ margin-bottom:5px; }
.side__links a{
  font-size:.9rem; color:var(--muted);
  transition:color .25s, transform .25s var(--ease);
}
.side__links a:hover{ color:var(--red-text); transform:translateX(3px); }

/* --- Questions fréquentes --- */
.faq{ max-width:880px; margin-inline:auto; display:flex; flex-direction:column; gap:10px; }
.faq__item{
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--card-grad); overflow:hidden;
  transition:border-color .3s;
}
.faq__item[open]{ border-color:var(--line-strong); }
.faq__item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:20px 58px 20px 24px;
  font-family:var(--f-display); font-weight:600; font-size:1rem; letter-spacing:-.012em;
  transition:color .25s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--red-text); }
.faq__item summary::after{
  content:''; position:absolute; right:26px; top:50%; margin-top:-7px;
  width:9px; height:9px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq__body{ padding:0 26px 22px; }
.faq__body p{ color:var(--muted); font-size:.95rem; font-weight:300; line-height:1.78; }
.faq__body p + p{ margin-top:14px; }

/* --- Bandeau d'appel à l'action --- */
.ctaband{
  padding:32px 34px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:radial-gradient(620px 240px at 88% 130%, rgba(211,47,47,.10), transparent 65%), var(--card-grad-strong);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.ctaband__title{
  font-family:var(--f-display); font-weight:700; font-size:1.22rem; letter-spacing:-.02em;
}
.ctaband__text{ margin-top:8px; color:var(--muted); font-size:.94rem; font-weight:300; }

/* --- Cartes de renvoi compactes --- */
.minicards{ margin-top:24px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.minicard{
  display:block; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--card-grad);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.minicard:hover{
  transform:translateY(-4px);
  border-color:rgba(211,47,47,.42);
  box-shadow:0 24px 50px -30px rgba(211,47,47,.45);
}
.minicard h3{ font-size:.98rem; transition:color .3s; }
.minicard:hover h3{ color:var(--red-text); }
.minicard p{ margin-top:9px; color:var(--muted); font-size:.87rem; font-weight:300; line-height:1.65; }

/* --- Cartes de zones --- */
.zonecards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.zonecards--inline{ margin-top:24px; }
.zonecard{
  display:flex; flex-direction:column;
  padding:28px 26px 26px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--card-grad);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.zonecard:hover{
  transform:translateY(-6px);
  border-color:rgba(211,47,47,.42);
  box-shadow:0 34px 70px -34px rgba(211,47,47,.45);
}
.zonecard--static,
.zonecard--static:hover{ transform:none; border-color:var(--line); box-shadow:none; }
.zonecard h3{ font-size:1.1rem; }
.zonecard p{ margin-top:12px; color:var(--muted); font-size:.9rem; font-weight:300; line-height:1.7; }
.zonecard__go{
  margin-top:auto; padding-top:20px;
  font-size:.8rem; font-weight:600; color:var(--red-text);
  display:inline-flex; align-items:center; gap:7px;
}
.zonecard__go::after{ content:"\2192"; transition:transform .3s var(--ease); }
.zonecard:hover .zonecard__go::after{ transform:translateX(4px); }

/* --- Communes --- */
.communes{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.commune{
  padding:24px 22px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--card-grad);
}
.commune h3{ font-size:1rem; }
.commune p{ margin-top:11px; color:var(--muted); font-size:.87rem; font-weight:300; line-height:1.7; }
.commune > a{
  display:inline-block; margin-top:13px;
  font-size:.81rem; font-weight:600; color:var(--red-text);
}
.commune p a{ color:var(--red-text); text-decoration:underline; text-underline-offset:2px; }

/* --- Références en liste --- */
.reflist{ margin-top:24px; display:flex; flex-direction:column; gap:16px; }
.ref{
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:22px; align-items:center;
  padding:16px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--card-grad);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.ref:hover{
  transform:translateY(-4px);
  border-color:rgba(211,47,47,.42);
  box-shadow:0 26px 54px -32px rgba(211,47,47,.45);
}
.ref__media{
  border-radius:calc(var(--r-card) - 6px); overflow:hidden;
  aspect-ratio:4/3; background:var(--surface-2);
}
.ref__media img{ width:100%; height:100%; object-fit:cover; }
.ref__body h3{ font-size:1.04rem; transition:color .3s; }
.ref:hover .ref__body h3{ color:var(--red-text); }
.ref__loc{ margin-top:5px; color:var(--muted-2); font-size:.8rem; }
.ref__body p:last-child{ margin-top:11px; color:var(--muted); font-size:.9rem; font-weight:300; line-height:1.7; }

/* --- Visuel et caractéristiques d'une réalisation --- */
.pjshot{
  margin:0; border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; background:var(--surface-2);
}
.pjshot img{ width:100%; height:auto; }
.pjshot figcaption{
  padding:14px 20px; border-top:1px solid var(--line); background:var(--surface);
  font-size:.82rem; color:var(--muted-2);
}
.pjfacts{
  margin-top:20px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; background:var(--line);
}
.pjfacts > div{ padding:20px 22px; background:var(--surface); }
.pjfacts span{
  display:block; font-size:.63rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);
}
.pjfacts b{
  display:block; margin-top:7px;
  font-family:var(--f-display); font-size:.94rem; font-weight:600;
}
.pjfacts a{ color:var(--red-text); }

/* --- Comparaison en deux colonnes --- */
.compare{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.compare__col{
  padding:22px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--card-grad);
}
.compare__col:first-child{ border-color:rgba(211,47,47,.34); }
.compare__col h3{ font-size:1rem; }
.compare__col p{ margin-top:10px; color:var(--muted); font-size:.9rem; font-weight:300; line-height:1.7; }

/* --- Carte de prestation cliquable --- */
.xcard--link .xcard__title{ transition:color .3s; }
.xcard--link:hover .xcard__title{ color:var(--red-text); }

/* Une grille de quatre colonnes laisse une carte seule sur la dernière ligne
   dès que leur nombre vaut 4n+1, neuf par exemple. On lui fait alors occuper
   deux colonnes : la ligne se lit comme un choix, pas comme un reste.
   La règle se maintient d'elle-même si des prestations sont ajoutées.

   Elle est volontairement bornée au-dessus du seuil mobile : sur une grille
   d'une seule colonne, `span 2` ferait créer au navigateur une seconde colonne
   implicite, non dimensionnée, et disloquerait la mise en page. */
@media (min-width:721px){
  .grid-4 > .xcard:last-child:nth-child(4n+1){ grid-column:span 2; }
}

/* --- Bloc de présentation de l'accueil --- */
.intro{ display:grid; grid-template-columns:.78fr 1.22fr; gap:52px; align-items:start; }
.intro__head .sec-title{ margin-top:16px; }
.intro__body p:first-child{ margin-top:0; }

.sec-title--left{ text-align:left; margin-bottom:30px; }

/* --- Pied de page --- */
.footer__hours{ font-size:.86rem; color:var(--muted-2); line-height:1.6; }

/* --- Listes déroulantes du formulaire de demande d'offre --- */
.field select{
  padding:13px 40px 13px 15px;
  border:1px solid var(--line-strong); border-radius:var(--r-ui);
  background-color:var(--surface); color:var(--text);
  font:inherit; font-size:.94rem; line-height:1.4;
  appearance:none; -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted-2) 50%),
    linear-gradient(135deg, var(--muted-2) 50%, transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.field select:focus{ border-color:var(--red); outline:none; }

/* --- Pages légales : le bloc vit désormais dans une section --- */
.section .legal{ padding:0; }
.section .legal article:first-of-type{ margin-top:0; }

/* =========================================================
   RESPONSIVE DES PAGES INTÉRIEURES
   ========================================================= */
@media (max-width:1140px){
  .page-grid{ grid-template-columns:1fr; gap:40px; }
  .side{ position:static; }
  .side__links{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px; }
  .side__links .side__title{ grid-column:1 / -1; }
  .communes{ grid-template-columns:repeat(2,1fr); }
  .pjfacts{ grid-template-columns:repeat(2,1fr); }
  .intro{ grid-template-columns:1fr; gap:26px; }
}

@media (max-width:980px){
  .zonecards{ grid-template-columns:1fr; }
  .page-hero{ padding-top:calc(var(--header-h) + 46px); }
}

@media (max-width:720px){
  .minicards,.compare,.communes,.pjfacts,.side__links{ grid-template-columns:1fr; }
  .ref{ grid-template-columns:1fr; }
  .ref__media{ aspect-ratio:16/9; }
  .page-hero__actions .btn{ width:100%; }
  .ctaband{ padding:26px 22px; }
  .ctaband .btn{ width:100%; }
  .steps li{ padding:20px 20px 22px; }
  .steps li::before{ position:static; display:block; margin-bottom:9px; }
  .prose h2{ margin-top:38px; }
  .faq__item summary{ padding:18px 48px 18px 20px; font-size:.95rem; }
  .faq__body{ padding:0 20px 20px; }
}

/* Sur iOS, un champ de saisie dont le texte fait moins de 16 px déclenche un
   zoom automatique à la mise au point, et la page reste zoomée ensuite.
   On remonte donc à 16 px sur mobile, uniquement pour les champs. */
@media (max-width:720px){
  .field input,
  .field textarea,
  .field select{ font-size:16px; }
}
/* =========================================================
   PRESTATIONS À DEUX NIVEAUX
   Les métiers de tête portent leurs déclinaisons : Construction
   mène à l'immeuble et à la villa, Rénovation à l'appartement,
   la villa et l'immeuble. La hiérarchie est visible à l'écran
   comme dans le balisage, ce que les moteurs de recherche
   exploitent pour comprendre l'organisation du site.
   ========================================================= */

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* Une carte qui contient elle-même des liens ne peut pas être un lien :
   le titre porte donc le lien du métier, les déclinaisons suivent. */
.xcard--group .xcard__title a{ transition:color .3s; }
.xcard--group:hover .xcard__title a{ color:var(--red-text); }

.xcard__sub{
  margin-top:auto; padding-top:18px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px;
}
.xcard__sub li{ display:flex; }
.xcard__sub a{
  position:relative; padding-left:16px;
  font-size:.86rem; color:var(--muted);
  transition:color .25s, transform .25s var(--ease);
}
.xcard__sub a::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:6px;
  border-top:1.5px solid var(--line-strong); border-right:1.5px solid var(--line-strong);
  transform:rotate(45deg);
  transition:border-color .25s;
}
.xcard__sub a:hover{ color:var(--red-text); transform:translateX(3px); }
.xcard__sub a:hover::before{ border-color:var(--red); }

/* Les cartes sans déclinaison gardent leur description collée en bas,
   pour que les six cartes s'alignent malgré des hauteurs de texte inégales. */
.xcard--link .xcard__desc{ margin-bottom:auto; }

/* --- Deux niveaux dans le menu déroulant ---
   Les sélecteurs reprennent le contexte `.mega__col a` et
   `.mobile-menu nav a` : sans cela, une simple classe perdrait le
   combat de spécificité contre eux et la hiérarchie ne s'afficherait pas. */
.mega__col a.mega__lead{
  font-weight:600; color:var(--text);
}
.mega__col a.mega__sub{
  position:relative; padding-left:14px;
  font-size:.85rem; color:var(--muted);
}
.mega__col a.mega__sub::before{
  content:''; position:absolute; left:1px; top:.62em;
  width:6px; height:1px; background:var(--line-strong);
  transition:background .25s;
}
.mega__col a.mega__sub:hover::before{ background:var(--red); }
.mega__col a + a.mega__lead{ margin-top:12px; }

/* --- Deux niveaux dans le menu mobile --- */
.mobile-menu nav a.mobile-menu__sub{
  position:relative; padding-left:20px;
  font-size:.92rem; font-weight:400; color:var(--muted);
}
.mobile-menu nav a.mobile-menu__sub::before{
  content:''; position:absolute; left:4px; top:50%;
  width:9px; height:1px; background:var(--line-strong);
}
.mobile-menu nav a.mobile-menu__sub:hover{ padding-left:26px; }

@media (max-width:1140px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  /* Six cartes sur deux colonnes tombent juste : aucune règle d'orpheline
     n'est nécessaire ici, contrairement à la grille de quatre. */
}
@media (max-width:720px){
  .grid-3{ grid-template-columns:1fr; }
}

/* Piège à robots des formulaires : retiré du flux visuel sans être
   masqué par display:none, que certains robots détectent. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }