/* ── polices auto-hébergées ───────────────────────────────────
   Cardo et Raleway sont servies par le thème, jamais par Google : aucune
   adresse IP de visiteur ne part chez un tiers, et la mention
   correspondante disparaît de la politique de confidentialité.
   `font-display: swap` : le texte s'affiche tout de suite dans la police
   de repli, puis bascule — pas d'écran vide sur les grands titres. */

@font-face{
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cardo-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cardo-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
  font-family: 'Cardo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cardo-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cardo-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cardo-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/raleway-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/raleway-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/raleway-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/raleway-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/raleway-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ──────────────────────────────────────────────────────────────
   GARÔME — piste C, « Braise »
   Un seul canvas WebGL derrière le DOM. Chaque photo devient un
   plan 3D calé sur la position de son <img>, qui reste dans le
   HTML : le texte et les images sont du vrai document, le canvas
   n'est qu'une couche de rendu. Tout est en noir et blanc ; le
   curseur est une braise qui rend la couleur et déforme l'image
   comme un air chaud. Le scroll fait fléchir les plans.
   ────────────────────────────────────────────────────────────── */
:root{
  color-scheme: dark;

  --ink:   #0D0D0D;
  --ink-2: #1A1A1A;
  --bone:  #F5F0E8;
  --ember: #E24623;
  --ember-deep: #C93D1E;   /* survol des aplats — blanc dessus : 5,04:1 */
  /* Fond des boutons pleins : l'ember de marque 8 % plus sombre, le seul
     écart qui permette un label BLANC conforme (4,73:1 contre 4,09:1 sur
     #E24623). L'ember de marque reste inchangé partout ailleurs. */
  --ember-cta:  #D04020;

  /* opacités calées sur un contraste mesuré contre #0D0D0D :
     .78 → 10,8:1 · .62 → 7,2:1 · .50 → 4,9:1 (AA pour tout texte) */
  --bone-70: rgba(245,240,232,.78);
  --bone-50: rgba(245,240,232,.62);
  --bone-30: rgba(245,240,232,.50);
  --line:        rgba(245,240,232,.22);
  --line-2:      rgba(245,240,232,.12);
  --line-strong: rgba(245,240,232,.38);  /* bordures de champs : 3,5:1 */

  --display: "Cardo", "Cochin", Georgia, "Times New Roman", serif;
  --sans: "Raleway", "Helvetica Neue", Arial, sans-serif;

  --fs-mega: clamp(3rem, 11vw, 10.5rem);
  --fs-xxl:  clamp(2.2rem, 6vw, 5rem);
  --fs-xl:   clamp(1.7rem, 3.4vw, 2.8rem);
  --fs-l:    clamp(1.15rem, 2vw, 1.65rem);
  --fs-m:    clamp(1rem, 1.05vw, 1.1rem);
  --fs-s:    .9375rem;
  --fs-xs:   .6875rem;

  --gut: clamp(20px, 5.5vw, 100px);
  --sec: clamp(52px, 5vw, 80px);     /* jonction entre deux sections = 2 × --sec */
  --rule: 1px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,p,figure,figcaption,blockquote,dl,dd{ margin: 0; }
img{ display: block; max-width: 100%; }
a{ color: inherit; }
::selection{ background: var(--ember); color: var(--bone); }
:focus-visible{ outline: 2px solid var(--ember); outline-offset: 3px; }

/* le canvas est DERRIÈRE tout le contenu ; aucune section ne pose
   de fond opaque, sinon elle masquerait les plans */
#gl{
  position: fixed;
  top: 0; left: 0;
  /* un <canvas> est un élément remplacé : `inset: 0` ne l'étire PAS,
     il garderait sa taille intrinsèque (ses attributs width/height,
     donc × le device pixel ratio). La taille CSS doit être explicite. */
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}
html.gl-on #gl{ opacity: 1; }
.page{ position: relative; z-index: 2; }

/* quand le rendu WebGL tourne, l'image du DOM devient le simple
   gabarit du plan : elle garde sa place mais ne s'affiche plus */
html.gl-on [data-gl] img{ opacity: 0; }
/* le gabarit garde sa place mais devient transparent, sinon il
   peindrait par-dessus le canvas qui est en dessous de .page */
html.gl-on [data-gl]{ background: transparent; }
html.gl-on .video-frame{ background: transparent; }
[data-gl]{ position: relative; background: var(--ink-2); overflow: hidden; }
[data-gl] img{ width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }

/* ── primitives ──────────────────────────────────────────── */
.wrap{ padding-inline: var(--gut); }
.section{ padding-block: var(--sec); position: relative; }

.eyebrow{
  display: inline-flex; align-items: center; gap: .85em;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ember);
}
.eyebrow::before{
  content: ""; width: clamp(24px, 3.5vw, 54px); height: var(--rule);
  background: currentColor; flex: none;
}
.eyebrow--bone{ color: var(--bone-50); }

.display{
  font-family: var(--display); font-weight: 700;
  line-height: .92; letter-spacing: -.02em; text-wrap: balance;
}
.display em{ font-style: italic; font-weight: 400; color: var(--ember); }

.lede{ font-size: var(--fs-l); line-height: 1.45; color: var(--bone-70); max-width: 38ch; }
.copy{ color: var(--bone-70); max-width: 58ch; }
.copy + .copy{ margin-top: 1em; }

/* Cardo déborde sa boîte de ligne quand l'interligne est serré : à
   line-height .92 le `f` dépasse de .045em en haut et le `p` de .165em
   en bas. On agrandit la fenêtre de masquage et on compense par des
   marges négatives — la mise en page est strictement identique.
   `.lines` passe le titre en grid pour que ces marges ne fusionnent pas. */
.lines{ display: grid; }
.mask{ display: block; overflow: hidden; margin-block: -.10em -.24em; }
.mask > *{ display: block; padding-block: .10em .24em; }

.btn{
  --bg: var(--ember-cta);
  --fg: #FFFFFF;
  display: inline-flex; align-items: center; gap: .7em;
  padding: 1.05em 1.9em; background: var(--bg); color: var(--fg);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; border: var(--rule) solid var(--bg); cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease, gap .3s ease;
}
.btn:hover{ --bg: var(--ember-deep); gap: 1.1em; }
.btn--ghost{ --bg: transparent; --fg: var(--bone); border-color: var(--line); }
.btn--ghost:hover{ --bg: transparent; border-color: var(--ember); color: var(--ember); }

.link-ember{
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember); text-decoration: none;
  padding-bottom: .55em; border-bottom: var(--rule) solid var(--line);
  transition: gap .3s ease, border-color .3s ease;
}
.link-ember:hover{ gap: .95em; border-bottom-color: var(--ember); }

/* ── en-tête ─────────────────────────────────────────────── */
.head{
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: 18px; padding-inline: var(--gut);
  display: flex; align-items: center; gap: clamp(16px, 4vw, 52px);
  border-bottom: var(--rule) solid transparent;
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
}
.head.is-stuck{
  background: rgba(13,13,13,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line-2);
  padding-top: calc(11px + env(safe-area-inset-top, 0px)); padding-bottom: 11px;
}
.head .brand img{ width: clamp(118px, 12vw, 160px); }
.nav{
  display: flex; gap: clamp(14px, 2vw, 32px); margin-left: auto;
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
}
.nav a{ text-decoration: none; color: var(--bone-70); padding-block: .4em; position: relative; transition: color .25s ease; }
.nav a::after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: var(--rule); background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.nav a:hover{ color: var(--bone); }
.nav a:hover::after{ transform: scaleX(1); }
.head .btn{ flex: none; }
@media (max-width: 900px){ .nav{ display: none; } }

/* ── hero ────────────────────────────────────────────────── */
.hero{
  padding-top: clamp(108px, 13vh, 170px);
  padding-bottom: clamp(40px, 4.5vw, 70px);
  min-height: min(92svh, 880px);
  display: flex; align-items: flex-end;
}
.hero-grid{
  width: 100%; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: clamp(26px, 5vw, 76px); align-items: end;
}
.hero-title{ font-size: var(--fs-mega); margin-block: .22em .42em; }
.hero-title .l2{ padding-left: clamp(0px, 6vw, 130px); }
.hero-rule{
  height: 2px; background: var(--ember);
  transform-origin: left; width: min(400px, 58%);
  margin-bottom: clamp(18px, 3vw, 30px);
}
.hero-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2.4vw, 26px); margin-top: clamp(26px, 4vw, 44px); }
.hero-fig{ margin-bottom: clamp(0px, 2vw, 26px); }
.hero-fig [data-gl]{ aspect-ratio: 3 / 4; }
.hero-fig figcaption{
  margin-top: .9rem; font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--bone-30);
}
/* l'invitation ne s'affiche que si le rendu WebGL tourne vraiment */
.ember-hint{ display: none; }
html.gl-on .ember-hint{
  display: inline-flex; align-items: center; gap: .7em;
  margin-top: clamp(20px, 3vw, 30px);
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-30);
}
.ember-hint b{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember); flex: none;
  box-shadow: 0 0 0 0 rgba(226,70,35,.55);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(226,70,35,.5); }
  70%{ box-shadow: 0 0 0 14px rgba(226,70,35,0); }
  100%{ box-shadow: 0 0 0 0 rgba(226,70,35,0); }
}
@media (max-width: 900px){
  .hero{ min-height: 0; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-fig{ order: -1; max-width: 320px; }
  .hero-fig [data-gl]{ aspect-ratio: 4 / 5; }
  .hero-title .l2{ padding-left: 0; }
}

/* ── bande ───────────────────────────────────────────────── */
.ticker{
  border-block: var(--rule) solid var(--line);
  overflow: hidden; padding-block: clamp(13px, 2vw, 20px);
}
.ticker-track{ display: flex; width: max-content; animation: slide 36s linear infinite; }
.ticker-track span{
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.1;
  padding-inline: .55em; white-space: nowrap; color: var(--bone-50);
}
.ticker-track span em{ color: var(--ember); }
.ticker:hover .ticker-track{ animation-play-state: paused; }
@keyframes slide{ from{ transform: translate3d(0,0,0);} to{ transform: translate3d(-50%,0,0);} }

/* ── le chef ─────────────────────────────────────────────── */
.chef-grid{
  display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: clamp(32px, 6vw, 88px); align-items: start;
}
.chef-media{ position: relative; }
.chef-media .main{ aspect-ratio: 4 / 5; }
.chef-media .inset{
  position: absolute; right: clamp(-18px, -2vw, -6px); bottom: clamp(-26px, -4vw, -14px);
  width: clamp(110px, 30%, 206px); aspect-ratio: 4 / 5;
  border: 6px solid var(--ink);
}
.pull{
  font-family: var(--display); font-size: var(--fs-xl);
  font-weight: 400; line-height: 1.16; letter-spacing: -.01em;
  margin-block: clamp(20px, 3vw, 32px); text-wrap: pretty;
}
.pull b{ font-weight: 700; font-style: italic; color: var(--ember); }
.sig{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2em .8em;
  margin-top: clamp(24px, 4vw, 38px); padding-top: 1.3rem;
  border-top: var(--rule) solid var(--line);
}
.sig strong{ font-family: var(--display); font-size: var(--fs-l); font-weight: 700; }
.sig span{ font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-50); }

/* ── vidéo ───────────────────────────────────────────────── */
.video{ margin-top: clamp(44px, 5.5vw, 86px); }
.video-head{ display: grid; gap: .45rem; margin-bottom: clamp(18px, 2.2vw, 30px); }
.video-head h3{ font-size: var(--fs-xl); }

.video-frame{
  position: relative;
  aspect-ratio: 16 / 9;
  /* pleine largeur du contenant : le bloc est aligné sur le texte de la
     section qui le précède, pas rétréci au milieu */
  width: 100%;
  background: var(--ink-2);
  overflow: hidden;
}
/* l'image d'attente est un plan WebGL comme les autres : elle est en
   noir et blanc, la braise la réchauffe — et le clic l'allume vraiment */
.video-frame .video-poster{
  position: absolute; inset: 0;
  overflow: hidden;
}
.video-frame .video-poster img{ width: 100%; height: 100%; object-fit: cover; }
.video-frame::after{
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 50% 50%, rgba(13,13,13,.62), rgba(13,13,13,.12) 70%),
    linear-gradient(to top, rgba(13,13,13,.72), transparent 42%);
}

.video-play{
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(12px, 1.6vw, 18px);
  text-decoration: none;
  color: var(--bone);
}
.video-play__disc{
  display: grid; place-items: center;
  width: clamp(64px, 7vw, 92px); aspect-ratio: 1;
  border: 1px solid var(--ember);
  border-radius: 50%;
  color: var(--ember);
  background: rgba(13,13,13,.35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 0 0 rgba(226,70,35,.45);
  animation: braise 3s ease-out infinite;
}
.video-play__disc svg{ margin-left: .12em; width: 36%; height: auto; }
.video-play__label{
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--bone);
  display: inline-flex; align-items: center; gap: .6em;
  transition: color .3s ease;
}
.video-play:hover .video-play__disc{
  background: var(--ember-cta); color: #FFFFFF;
  transform: scale(1.06); animation: none;
}
.video-play:focus-visible{ outline-offset: -6px; }

/* ── modale vidéo ────────────────────────────────────────── */
.vmodal{
  border: 0; padding: 0; margin: auto;
  background: transparent; color: var(--bone);
  width: min(1180px, 92vw); max-width: 92vw;
  overflow: visible;
}
.vmodal::backdrop{ background: rgba(6,6,6,.94); }
.vmodal[open]{ animation: vmodal-in .45s cubic-bezier(.22,1,.36,1); }
@keyframes vmodal-in{ from{ opacity: 0; transform: translateY(14px) scale(.975); } }

.vmodal-stage{
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border: var(--rule) solid var(--line);
  overflow: hidden;
}
.vmodal-stage iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.vmodal-close{
  position: absolute; top: -46px; right: 0;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .5em .2em;
  background: none; border: 0; cursor: pointer;
  color: var(--bone-70);
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  transition: color .25s ease;
}
.vmodal-close span{ font-size: 1.15em; color: var(--ember); }
.vmodal-close:hover{ color: var(--bone); }
@media (max-width: 560px){ .vmodal-close{ top: -40px; letter-spacing: .14em; } }

/* repli si la lecture intégrée est refusée (aperçu d'artefact : les
   iframes y sont bloqués ; en production ce panneau n'apparaît jamais) */
.vmodal-fallback{
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center;
  gap: 1.2rem; padding: var(--gut); text-align: center;
  background: var(--ink);
}
.vmodal-fallback img{
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .22; filter: grayscale(1);
}
.vmodal-fallback p{ color: var(--bone-70); max-width: 44ch; font-size: var(--fs-s); }

html.vmodal-open, html.vmodal-open body{ overflow: hidden; }

/* ── lightbox galerie ────────────────────────────────────── */
.lbox{
  border: 0; padding: 0; margin: 0;
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  /* le voile est porté par le <dialog> lui-même, pas seulement par
     ::backdrop : il couvre alors de façon identique partout, et le clic
     dessus ferme (voir le gestionnaire de clic) */
  background: #070707; color: var(--bone); overflow: hidden;
}
.lbox::backdrop{ background: rgba(6,6,6,.96); }
.lbox[open]{ animation: lbox-in .4s cubic-bezier(.22,1,.36,1); }
@keyframes lbox-in{ from{ opacity: 0; } }

.lbox-stage{
  position: absolute; inset: 0;
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: clamp(6px, 2vw, 26px);
  padding: clamp(56px, 7vh, 86px) clamp(10px, 3vw, 34px) clamp(84px, 11vh, 110px);
}
.lbox-fig{ margin: 0; display: grid; justify-items: center; gap: 1rem; min-height: 0; }
.lbox-fig img{
  display: block; max-width: 100%; max-height: calc(100dvh - 210px);
  width: auto; height: auto; object-fit: contain;
  background: var(--ink-2);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1);
}
.lbox.is-swapping .lbox-fig img{ opacity: 0; transform: translateX(var(--dx, 0)); }

.lbox-meta{
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: .5rem 1.4rem; text-align: center;
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
}
.lbox-count{ color: var(--ember); font-weight: 600; font-variant-numeric: tabular-nums; }
.lbox-cap{ color: var(--bone-70); letter-spacing: .06em; text-transform: none;
  font-size: var(--fs-s); max-width: 54ch; }
.lbox-credit{ color: var(--bone-30); }
.lbox-credit a{ color: inherit; }
.lbox-credit a:hover{ color: var(--ember); }

.lbox-nav{
  display: grid; place-content: center;
  width: clamp(44px, 5vw, 60px); height: clamp(44px, 5vw, 60px);
  border: var(--rule) solid var(--line); border-radius: 50%;
  background: rgba(13,13,13,.6); color: var(--bone);
  cursor: pointer; transition: border-color .25s ease, background .25s ease;
}
.lbox-nav svg{ width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.lbox-nav:hover{ border-color: var(--ember); background: var(--ember-cta); }
.lbox-nav:focus-visible{ outline: 2px solid var(--ember); outline-offset: 3px; }

.lbox-close{
  position: absolute; top: clamp(14px, 2.4vh, 26px); right: clamp(12px, 3vw, 34px);
  z-index: 2;
  background: none; border: 0; color: var(--bone-70); cursor: pointer;
  font: inherit; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .5rem;
}
.lbox-close span{ font-size: 1.15em; color: var(--ember); }
.lbox-close:hover{ color: var(--bone); }
.lbox-close:focus-visible{ outline: 2px solid var(--ember); outline-offset: 4px; }

/* la pellicule : on voit où l'on est dans la série */
.lbox-film{
  position: absolute; left: 0; right: 0; bottom: clamp(14px, 2.5vh, 26px);
  display: flex; justify-content: center; gap: 8px; padding-inline: var(--gut);
}
.lbox-film button{
  width: 34px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: var(--line-strong); transition: background .25s ease;
}
.lbox-film button[aria-current="true"]{ background: var(--ember); }
.lbox-film button:hover{ background: var(--bone-50); }
.lbox-film button:focus-visible{ outline: 2px solid var(--ember); outline-offset: 4px; }

@media (max-width: 640px){
  .lbox-stage{ grid-template-columns: 1fr; padding-inline: 14px; }
  .lbox-nav{ position: absolute; bottom: clamp(50px, 8vh, 72px); z-index: 2; }
  .lbox-nav--prev{ left: 14px; }
  .lbox-nav--next{ right: 14px; }
  .lbox-fig img{ max-height: calc(100dvh - 240px); }
}
html.lbox-open, html.lbox-open body{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .lbox[open]{ animation: none; }
  .lbox-fig img{ transition: opacity .12s linear; }
  .lbox.is-swapping .lbox-fig img{ transform: none; }
}

@keyframes braise{
  0%   { box-shadow: 0 0 0 0 rgba(226,70,35,.45); }
  70%  { box-shadow: 0 0 0 22px rgba(226,70,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,70,35,0); }
}

@media (max-width: 880px){
  .chef-grid{ grid-template-columns: 1fr; gap: 56px; }
  .chef-media .inset{ right: 0; }
}

/* ── les offres ──────────────────────────────────────────── */
.offres-head{ margin-bottom: clamp(28px, 3.4vw, 52px); }
.offres-head h2{ font-size: var(--fs-xxl); margin-block: .3em .35em; }
.offre{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(26px, 5vw, 72px); align-items: center;
  padding-block: clamp(26px, 3vw, 46px);
  border-top: var(--rule) solid var(--line-2);
}
.offre:last-of-type{ border-bottom: var(--rule) solid var(--line-2); }
.offre [data-gl]{ aspect-ratio: 4 / 3; }
.offre:nth-of-type(odd) .offre-media{ order: 2; }
.offre-copy{ display: grid; gap: 1.1rem; justify-items: start; }
.offre-copy h3{ font-family: var(--display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.offre-copy .fit{
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ember); padding-top: .9rem; width: 100%;
  border-top: var(--rule) solid var(--line);
}
@media (max-width: 880px){
  .offre{ grid-template-columns: 1fr; }
  .offre:nth-of-type(odd) .offre-media{ order: 0; }
}

/* ── le nom ──────────────────────────────────────────────── */
.nom-banner{ aspect-ratio: 2 / 1; }
@media (max-width: 760px){ .nom-banner{ aspect-ratio: 4 / 3; } }
.nom-inner{ text-align: center; padding-top: clamp(30px, 3.6vw, 56px); }
.latin{
  font-family: var(--display); font-style: italic;
  font-size: var(--fs-l); line-height: 1.5; color: var(--bone-50);
  max-width: min(32ch, 100%); margin-inline: auto;
}
.latin cite{
  display: block; margin-top: 1rem;
  font-family: var(--sans); font-style: normal; font-size: var(--fs-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--bone-30);
}
.fuse{
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 10vw, 9.5rem); line-height: 1;
  letter-spacing: -.03em; white-space: nowrap; overflow: hidden;
  max-width: 100%; margin-block: clamp(22px, 3.2vw, 46px); padding-inline: 2px;
}
.fuse em{
  display: inline-block; overflow: hidden; white-space: pre;
  font-style: normal; color: var(--ember); vertical-align: baseline;
}
.defs{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr));
  gap: clamp(24px, 4vw, 54px); max-width: 880px; margin-inline: auto;
  text-align: left; padding-top: clamp(24px, 3.5vw, 40px);
  border-top: var(--rule) solid var(--line);
}
.defs dt{ font-family: var(--display); font-style: italic; font-weight: 700; font-size: var(--fs-l); color: var(--ember); margin-bottom: .4rem; }
.defs dd{ color: var(--bone-70); font-size: var(--fs-s); }
.nom-closer{
  max-width: 52ch; margin: clamp(24px, 3vw, 40px) auto 0;
  font-size: var(--fs-l); line-height: 1.45; color: var(--bone-70);
}
.nom-closer b{ font-family: var(--display); font-style: italic; font-weight: 400; color: var(--bone); }

/* ── galerie ─────────────────────────────────────────────── */
.galerie-head{
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(22px, 3vw, 36px);
}
.galerie-grid{
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: clamp(8px, 1vw, 14px);
  /* le décalage se fait par le centrage, pas par une seconde rangée :
     un `grid-row: span 2` sur six images n'en remplissait que deux et
     laissait une rangée presque vide sous la galerie */
  align-items: center;
}
/* chaque vignette est un bouton : focalisable au clavier, annoncé comme
   une commande, et toujours la cible du plan WebGL (`[data-gl]`) */
.gal-item{
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: var(--ink-2); color: inherit; font: inherit;
  cursor: zoom-in; overflow: hidden; position: relative;
  -webkit-appearance: none; appearance: none;
}
.gal-item img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-item:focus-visible{ outline: 2px solid var(--ember); outline-offset: 3px; }
.gal-item::after{
  /* la loupe n'apparaît qu'au survol : rien ne se pose sur l'image au repos */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(13,13,13,.55) 0 46px, rgba(13,13,13,0) 47px);
  opacity: 0; transition: opacity .3s ease;
}
.gal-item .zoom{
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 30px; height: 30px; stroke: var(--bone); stroke-width: 1.6;
  fill: none; opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.gal-item:hover::after, .gal-item:focus-visible::after,
.gal-item:hover .zoom, .gal-item:focus-visible .zoom{ opacity: 1; }

.galerie-grid [data-gl]{ aspect-ratio: 3 / 4; }
.galerie-grid [data-gl]:nth-child(1),
.galerie-grid [data-gl]:nth-child(4){ aspect-ratio: 3 / 4.9; }
@media (max-width: 900px){
  .galerie-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); align-items: stretch; }
  .galerie-grid [data-gl]:nth-child(1),
  .galerie-grid [data-gl]:nth-child(4){ aspect-ratio: 3 / 4; }
}

/* ── témoignages ─────────────────────────────────────────── */
.avis-head{ margin-bottom: clamp(24px, 3vw, 44px); max-width: 60ch; }
.avis-head h2{ font-size: var(--fs-xxl); margin-block: .3em 0; }
.avis-featured{
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.8fr);
  gap: clamp(24px, 4vw, 60px); align-items: end;
  padding-bottom: clamp(24px, 3vw, 40px); margin-bottom: clamp(24px, 3vw, 40px);
  border-bottom: var(--rule) solid var(--line);
}
@media (max-width: 860px){ .avis-featured{ grid-template-columns: 1fr; align-items: start; } }
.avis-featured blockquote{
  font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.35; color: var(--bone); text-wrap: pretty;
}
.avis-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px; background: var(--line-2); border: var(--rule) solid var(--line-2); }
@media (max-width: 900px){ .avis-grid{ grid-template-columns: 1fr; } }
.avis-card{ background: var(--ink); padding: clamp(24px, 3.2vw, 42px); display: flex; flex-direction: column; gap: 1.4rem; }
.avis-card blockquote{ font-family: var(--display); font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.5; color: var(--bone-70); text-wrap: pretty; }
blockquote::before{ content: "«"; color: var(--ember); font-size: 1.45em; line-height: 0; vertical-align: -.2em; margin-right: .17em; }
.who{ display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1.3rem; border-top: var(--rule) solid var(--line); }
.avis-featured .who{ border-top: 0; padding-top: 0; margin-top: 0; }
.who img{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; filter: grayscale(1); flex: none; background: var(--ink-2); }
.who b{ display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
.who span{ display: block; font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--bone-50); }

/* ── devis ───────────────────────────────────────────────── */
.devis{ border-top: var(--rule) solid var(--line); }
.devis-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(34px, 6vw, 88px); align-items: start; }
@media (max-width: 860px){ .devis-grid{ grid-template-columns: 1fr; } }
.devis h2{ font-size: var(--fs-xxl); margin-block: .3em .45em; }
.form{ display: grid; gap: clamp(14px, 1.6vw, 20px); }
.row{ display: grid; grid-template-columns: 1fr 1fr; gap: inherit; }
@media (max-width: 560px){ .row{ grid-template-columns: 1fr; } }
.field{ display: grid; gap: .5rem; min-width: 0; }
.field label{ font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-50); }
.field input, .field select, .field textarea{
  width: 100%; background: transparent; border: 0;
  border-bottom: var(--rule) solid var(--line-strong); color: var(--bone);
  font-family: var(--sans); font-size: var(--fs-m); font-weight: 300;
  padding: .7em 0; border-radius: 0; transition: border-color .3s ease;
}
.field select option{ background: var(--ink-2); color: var(--bone); }
.field textarea{ resize: vertical; min-height: 94px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-bottom-color: var(--ember); }
.form-foot{ display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; }
.form-note{ font-size: var(--fs-xs); color: var(--bone-30); letter-spacing: .08em; }
.form-ok{ border-left: 2px solid var(--ember); background: var(--ink-2); padding: 1rem 1.2rem; font-size: var(--fs-s); color: var(--bone-70); }
.devis-aside [data-gl]{ aspect-ratio: 3 / 4; margin-bottom: clamp(24px, 3.5vw, 38px); }
.devis-aside dl{ display: grid; gap: 1.6rem; }
.devis-aside dt{ font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ember); margin-bottom: .4rem; }
.devis-aside dd{ color: var(--bone-70); font-size: var(--fs-s); }

/* ── pied ────────────────────────────────────────────────── */
.foot{ border-top: var(--rule) solid var(--line); padding-block: clamp(38px, 4.2vw, 60px) clamp(22px, 3vw, 34px); }
.foot-grid{ display: grid; grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr)); gap: clamp(26px, 4vw, 60px); align-items: start; }
@media (max-width: 760px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .foot-grid{ grid-template-columns: 1fr; } }
.foot-brand img{ width: clamp(150px, 16vw, 198px); margin-bottom: 1.2rem; }
.foot-brand p{ color: var(--bone-50); font-size: var(--fs-s); max-width: 30ch; }
.foot-col h4{ font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-30); margin-bottom: 1rem; font-weight: 600; }
.foot-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot-col a{ text-decoration: none; color: var(--bone-70); font-size: var(--fs-s); transition: color .25s ease; }
.foot-col a:hover{ color: var(--ember); }
.foot-bottom{
  margin-top: clamp(36px, 5vw, 62px); padding-top: 1.3rem;
  border-top: var(--rule) solid var(--line-2);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 1.5rem;
  font-size: var(--fs-xs); letter-spacing: .1em; color: var(--bone-30);
}
.foot-bottom a{ color: var(--bone-30); text-decoration: none; }
.foot-bottom a:hover{ color: var(--ember); }
.foot-legal{ display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* texte réservé aux lecteurs d'écran : trois liens « Découvrir » identiques
   dans la page, il leur faut leur destination */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ── intro « allumage » (injectée par le JS) ─────────────── */
.ign-veil{ position: fixed; inset: 0; z-index: 300; background: var(--ink); pointer-events: none; }
.ign-core{
  position: fixed; inset: 0; z-index: 301;
  display: grid; place-content: center; justify-items: center;
  gap: clamp(16px, 2.4vw, 26px); padding-inline: var(--gut);
  pointer-events: none; text-align: center;
}
.ign-core .tag{ font-size: var(--fs-xs); font-weight: 600; letter-spacing: .4em; text-transform: uppercase; color: var(--bone-30); opacity: 0; }

/* Un seul logo. L'amphore qu'il contient est découpée dans le même fichier
   (garome-mark.svg = le logo recadré sur son pictogramme) et sert de masque :
   la chaleur monte DANS le tracé, puis l'amphore rejoint sa place exacte
   dans le mot, qui se découvre derrière elle. Rien n'est jamais posé
   par-dessus le logo. */
.ign-logo{ position: relative; width: min(50vw, 400px); }
.ign-logo > img{ display: block; width: 100%; height: auto; }

/* calée au pixel sur l'amphore du logo : même origine, même hauteur,
   70 / 673 de sa largeur (unités du viewBox). Le JS ne fait que la
   grossir puis la reposer ici. */
.ign-amphora{
  position: absolute; left: 0; top: 0;
  width: calc(70 / 673 * 100%);
  aspect-ratio: 70 / 127;
  transform-origin: 0 0;
}
.ign-amphora span{
  position: absolute; inset: 0;
  /* Le chemin du masque est posé par le JS (--ign-mark), parce qu'il
     dépend de l'endroit d'où la feuille est servie : à la racine dans la
     maquette, dans assets/css/ sous WordPress. Un chemin relatif écrit
     ici serait juste d'un côté et faux de l'autre. Le repli vaut pour la
     maquette seule, et n'est jamais atteint puisque l'intro est injectée
     par le JS. */
  -webkit-mask: var(--ign-mark, url(assets/garome-mark.svg)) center / contain no-repeat;
          mask: var(--ign-mark, url(assets/garome-mark.svg)) center / contain no-repeat;
}
/* seule couche NON masquée : un halo serré autour du pictogramme */
.ign-amphora .halo{
  position: absolute; inset: -34%;
  -webkit-mask: none; mask: none;
  background: radial-gradient(closest-side circle at 50% 54%,
    rgba(226,70,35,.5) 0%, rgba(226,70,35,.14) 55%, rgba(226,70,35,0) 100%);
  opacity: 0;
}
.ign-amphora .vessel{ background: rgba(245,240,232,.26); }
.ign-amphora .heat{ overflow: hidden; }
.ign-amphora .heat i{
  position: absolute; left: -10%; right: -10%; bottom: 0;
  /* deux fois la hauteur du pictogramme : le cœur clair du dégradé est
     donc exactement à mi-course, et son trajet (yPercent 62 → -28) le
     fait traverser tout le tracé, du pied au col. */
  height: 200%;
  background: linear-gradient(to top,
    rgba(226,70,35,0) 0%, #E24623 30%, #FFC9A6 50%, #E24623 70%, rgba(226,70,35,0) 100%);
}
.ign-amphora .glow{ background: var(--ember); opacity: 0; }
html.ign-lock, html.ign-lock body{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track{ animation: none; }
  .ember-hint b{ animation: none; }
}

/* ══════════════════════════════════════════════════════════
   PAGES INTÉRIEURES — offres, mentions légales, confidentialité
   Même grammaire que la home : mêmes jetons, mêmes masques de
   titre, mêmes plans WebGL. Rien de nouveau, un agencement.
   ══════════════════════════════════════════════════════════ */
.ipage-hero{
  padding-top: clamp(96px, 12vh, 150px);
  padding-bottom: var(--sec);
}
.ipage-grid{
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
@media (max-width: 900px){ .ipage-grid{ grid-template-columns: 1fr; align-items: start; } }
.ipage-num{
  font-family: var(--display); font-size: clamp(42px, 6vw, 74px);
  line-height: 1; color: var(--ember); font-style: italic;
  display: block; margin-bottom: .2em;
}
.ipage-hero h1{ font-size: var(--fs-xxl); margin-block: .08em .3em; }
.ipage-hero .lede{ max-width: 46ch; }
.ipage-hero .fit{
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ember); padding-top: .9rem; margin-top: 1.4rem;
  border-top: var(--rule) solid var(--line); max-width: 46ch;
}
.ipage-media[data-gl]{ aspect-ratio: 4 / 5; }
.ipage-back{
  display: flex; width: fit-content; align-items: center; gap: .55rem;
  font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone-50); text-decoration: none; margin-bottom: clamp(18px, 2.4vw, 30px);
}
.ipage-back:hover{ color: var(--ember); }
.ipage-back .arrow{ transition: transform .3s ease; }
.ipage-back:hover .arrow{ transform: translateX(-4px); }

.ipage-body{ border-top: var(--rule) solid var(--line); padding-top: var(--sec); }
.ipage-cols{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(30px, 5vw, 72px); align-items: start;
}
@media (max-width: 860px){ .ipage-cols{ grid-template-columns: 1fr; } }
.ipage-cols h2{ font-size: var(--fs-xl); margin-bottom: .5em; }
.ipage-cols h3{ font-size: var(--fs-l); margin-bottom: .5em; }
.ipage-cols p + h3{ margin-top: 1.6em; }
.ipage-cols p{ color: var(--bone-70); font-size: var(--fs-m); margin-bottom: 1em; max-width: 56ch; }

.incl{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line-2); border-block: var(--rule) solid var(--line-2); }
.incl li{
  background: var(--ink); padding: 1.05rem 0 1.05rem 2.1rem; position: relative;
  color: var(--bone-70); font-size: var(--fs-s);
}
.incl li::before{
  content: ""; position: absolute; left: .35rem; top: 1.5rem;
  width: 10px; height: 10px; background: var(--ember);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.badges{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(22px, 3vw, 32px); }
.badge{
  border: var(--rule) solid var(--line); padding: .55rem .95rem;
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-50);
}

.ipage-cta{
  border-top: var(--rule) solid var(--line); padding-top: var(--sec);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
}
.ipage-cta h2{ font-size: var(--fs-xl); max-width: 22ch; }

.others{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(14px, 2vw, 26px); }
@media (max-width: 700px){ .others{ grid-template-columns: 1fr; } }
.other{
  display: grid; gap: .6rem; padding: clamp(20px, 2.6vw, 30px);
  border: var(--rule) solid var(--line); text-decoration: none;
  transition: border-color .3s ease, background .3s ease;
}
.other:hover{ border-color: var(--ember); background: var(--ink-2); }
.other b{ font-family: var(--display); font-size: var(--fs-l); font-weight: 400; color: var(--bone); }
.other span{ color: var(--bone-50); font-size: var(--fs-s); }

/* ── pages légales ───────────────────────────────────────── */
.legal{ max-width: 72ch; }
.legal h2{ font-size: var(--fs-l); margin-block: clamp(34px, 4vw, 52px) .55em; }
.legal h2:first-of-type{ margin-top: 0; }
.legal p, .legal li{ color: var(--bone-70); font-size: var(--fs-s); margin-bottom: .85em; }
.legal ul{ padding-left: 1.2rem; }
.legal a{ color: var(--bone); }
.legal a:hover{ color: var(--ember); }
.legal dl{ display: grid; gap: .9rem; margin-bottom: 1.2em; }
.legal dt{ font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ember); }
.legal dd{ margin: .25rem 0 0; color: var(--bone-70); font-size: var(--fs-s); }
.todo{
  display: inline-block; border: var(--rule) dashed var(--ember);
  padding: .15rem .5rem; color: var(--ember);
  font-size: .92em; letter-spacing: .06em;
}

/* ── classes nées de styles en ligne ─────────────────────────
   Un style en ligne dans la maquette devient une règle que le thème
   WordPress peut reproduire à l'identique. Sans ça, le gabarit PHP et
   la maquette divergent d'une marge et la comparaison au pixel part en
   fumée sur des écarts qui n'en sont pas. */
.chef-titre{ font-size: var(--fs-xxl); margin-top: .3em; }
.copy--suite{ margin-top: 1.1em; }
.nom-inner .eyebrow{ margin-inline: auto; }
.nom-inner .latin{ margin-top: 1.4rem; }
.devis-lede{ margin-bottom: clamp(24px, 3.5vw, 38px); }
.others--spaced{ margin-top: clamp(18px, 2.4vw, 30px); }
.btn-row{ display: flex; flex-wrap: wrap; gap: 1rem; }
.legal-maj{
  margin-top: 2.5em; color: var(--bone-30);
  font-size: var(--fs-xs); letter-spacing: .08em;
}

/* champ-piège du formulaire : hors écran, jamais lu, jamais tabulable */
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }