/* ==========================================================================
   ISZI — Feuille de style du site

   Direction artistique : "editorial de nuit".
   Un serif de mode (Fraunces) porte toute la page. Le fond alterne le noir
   profond et un creme sombre, pour respirer. Une seule couleur, l'or chaud,
   posee avec parcimonie — jamais en texte sur fond clair, ou elle devient
   illisible. Le reste est a l'encre ou a la craie.

   Regle de couleur, verifiee a la mesure :
   - sur NOIR  : l'or peut etre du texte (8,2:1).
   - sur CREME : l'or n'est JAMAIS du texte (1,95:1). Il ne sert que d'aplat
                 (bouton) ou de filet. Pour un accent textuel sur creme, on
                 utilise l'or fonce --gold-ink (#7D642E, 4,6:1).
   ========================================================================== */

/* ------------------------------------------------------------- Fontes --- */

/* Auto-hebergees : aucun appel a Google Fonts. */

@font-face {
  font-family: 'Fraunces';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/dm-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/dm-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ------------------------------------------------------------- Tokens --- */

:root {
  /* Les deux fonds sombres, pour alterner sans que ce soit un tunnel noir. */
  --ink:     #0B0B0D;   /* noir profond, fond hero et blocs forts */
  --ink-2:   #141317;   /* noir legerement chaud, bloc alternatif */

  /* Les deux fonds clairs. */
  --cream:   #F1EBE0;   /* creme sombre, fond des sections aerees */
  --cream-2: #E8E1D3;   /* creme creuse, panneaux poses dessus */

  /* Craie : les valeurs de texte clair, sur fond sombre. */
  --chalk:   #F4EEE6;   /* texte principal sur noir */
  --chalk-2: #B9B2A8;   /* texte secondaire sur noir */
  --chalk-3: #8A8175;   /* etiquettes, mono, sur noir */
  --line-d:  #241F18;   /* filets sur noir */
  --line-d2: #322C22;   /* filets un peu plus clairs sur noir */

  /* Encre : les valeurs de texte sombre, sur fond clair. */
  --ink-t:   #1A1712;   /* texte principal sur creme */
  --ink-t2:  #5C554A;   /* texte secondaire sur creme */
  --ink-t3:  #6A6356;   /* etiquettes sur creme : calibre pour passer 4,5:1
                            sur les deux fonds clairs, y compris les panneaux. */
  --line-l:  #D8CFBE;   /* filets sur creme */
  --line-l2: #C9BFA9;   /* filets plus marques sur creme */

  /* L'or, l'accent unique. */
  --gold:      #C9A24B;   /* l'or vif : aplats, filets, texte SUR NOIR */
  --gold-hi:   #DAB968;   /* survol des boutons or */
  --gold-ink:  #79612D;   /* or fonce : seul or lisible en TEXTE SUR CREME.
                            Cale sur le PIRE des deux fonds clairs (les panneaux
                            --cream-2), pas seulement sur le fond de section. */
  --gold-soft: rgba(201, 162, 75, .12);  /* lavis discret */

  --shell: min(1280px, 100% - 2.5rem);
  --r-sm: 2px;   /* la piste A est quasi sans arrondi : plus editorial */
  --r-md: 3px;

  --t: 200ms cubic-bezier(.4, 0, .2, 1);
  --t-cue: 1100ms cubic-bezier(.16, 1, .3, 1);

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 50px -20px rgba(0,0,0,.55);
  --shadow-l: 0 1px 2px rgba(26,23,18,.05), 0 24px 56px -22px rgba(26,23,18,.22);
}

/* -------------------------------------------------------------- Reset --- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold); color: var(--ink); }

/* --------------------------------------------------------- Typographie -- */

/* Fraunces est le visage du site. On l'utilise en finesse (poids 300-400) et
   tres grand : c'est ce qui donne le ton magazine plutot que blog. L'italique
   de Fraunces est dramatique, on s'en sert pour un mot par titre, pas plus. */

h1, h2, h3, h4 { margin: 0; }

.display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.9rem, 7.5vw, 6.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 400; }

.h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.h2 em { font-style: italic; font-weight: 400; }

.h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

p { margin: 0; }

.lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.68;
  color: var(--chalk-2);
  max-width: 52ch;
  text-wrap: pretty;
}

.small { font-size: .9375rem; line-height: 1.6; }

/* La regie : mono, majuscules. Etiquettes, jalons, chiffres. */
.reg {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chalk-3);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.8rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .6; }

/* ------------------------------------------------------------- Layout --- */

.shell { width: var(--shell); margin-inline: auto; }

.section { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }

/* Les deux themes de section. Par defaut le site est sombre ; une section
   .section--light bascule tout son contenu en valeurs d'encre sur creme.
   C'est l'alternance qui rend le site digeste. */
.section--light {
  background: var(--cream);
  color: var(--ink-t);
}
.section--light .lede { color: var(--ink-t2); }
.section--light .eyebrow { color: var(--gold-ink); }
.section--light .eyebrow::before { background: var(--gold-ink); }
.section--light .reg { color: var(--ink-t3); }

.section--ink2 { background: var(--ink-2); }

.head { max-width: 60ch; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.head .lede { margin-top: 1.2rem; }

/* Ecart par defaut des grilles de cartes. Il etait a 1px : les cartes se
   touchaient sur toutes les pages sauf celles ou l'ecart etait force a la main. */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 760px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ----------------------------------------------------------- Boutons ---- */

/* Deux boutons : l'or plein (action principale) et le contour. Sur l'or,
   le texte est a l'encre (8,2:1). Presque pas d'arrondi. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: 'Instrument Sans', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-hi); }

/* Contour : sur fond sombre par defaut. */
.btn--line { background: transparent; border-color: var(--line-d2); color: var(--chalk); }
.btn--line:hover { border-color: var(--chalk-3); }

/* Contour sur fond clair. */
.section--light .btn--line { border-color: var(--line-l2); color: var(--ink-t); }
.section--light .btn--line:hover { border-color: var(--ink-t); }

.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* Sur mobile, les boutons s'empilent : en flex ils gardaient la largeur de
   leur libelle, ce qui donnait deux boutons de tailles differentes l'un sous
   l'autre. En grille, ils font tous la meme largeur. La barre d'appel fixe
   du bas n'est pas concernee, elle a sa propre regle. */
@media (max-width: 620px) {
  .btn-row { display: grid; grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
}

.link-gold {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--gold);
  transition: gap var(--t);
}
.section--light .link-gold { color: var(--gold-ink); }
.link-gold:hover { gap: .85rem; }

/* --------------------------------------------------------------- Hero --- */

.hero { position: relative; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 7vw, 6rem); }
.hero__inner { position: relative; z-index: 2; }

.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: end; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.35fr .9fr; } }

.hero .display { margin-bottom: 0; }
.hero .lede { margin-top: 2rem; }
.hero .btn-row { margin-top: 2.5rem; }

/* Le cadre visuel : portrait a cote du titre, comme une page de magazine.
   Tant que la video/photo n'est pas la, il porte une lueur doree — un mur
   eclaire avant l'arrivee du public. */
.frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--ink-2);
}
.frame__video, .frame__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
}
.frame__video { opacity: 0; transition: opacity 900ms ease; }
.frame__video.is-playing { opacity: 1; }
.frame__hold {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 30% 25%, rgba(201,162,75,.28), transparent 70%),
    radial-gradient(70% 60% at 75% 80%, rgba(201,162,75,.14), transparent 72%),
    var(--ink-2);
}
.frame__cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--chalk); text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

/* Hero des pages interieures : pas de portrait, titre pleine largeur. */
.hero--page { padding-block: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 4vw, 4rem); }
.hero--page .hero__grid { grid-template-columns: 1fr; }
.hero--page .display { font-size: clamp(2.6rem, 6vw, 5rem); }
.hero--page .lede { max-width: 56ch; }

/* Hero plein cadre : la video occupe tout le bloc, le texte passe dessus.
   Le contraste est tenu par un voile degrade, dense a gauche (le texte) et
   ouvert a droite (la video reste visible). Mesure a l'appui : titre creme
   sur les zones les plus claires de la video >= 4,5:1. */
.hero--cover { padding-block: 0; min-height: min(80vh, 720px); display: flex; align-items: center; }
.hero--cover .hero__inner { width: var(--shell); padding-block: clamp(3.5rem, 8vw, 7rem); }
.hero--cover .hero__grid { grid-template-columns: 1fr; }
.hero--cover .display,
.hero--cover .lede { max-width: 40ch; }
.hero--cover .lede { color: var(--chalk); }

.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); }
.hero__bg .frame__hold { position: absolute; inset: 0; }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1000ms ease;
}
.hero__video.is-playing { opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,11,13,.96) 0%, rgba(11,11,13,.9) 38%, rgba(11,11,13,.52) 64%, rgba(11,11,13,.2) 100%),
    linear-gradient(180deg, rgba(11,11,13,.68) 0%, rgba(11,11,13,.42) 22%, rgba(11,11,13,.08) 52%, rgba(11,11,13,0) 100%);
}
/* Sur mobile le texte prend toute la largeur : le voile devient vertical. */
@media (max-width: 760px) {
  .hero__scrim {
    background: linear-gradient(180deg, rgba(11,11,13,.86) 0%, rgba(11,11,13,.66) 42%, rgba(11,11,13,.28) 72%, rgba(11,11,13,.12) 100%);
  }
}

/* La bande de chiffres, posee juste sous le hero video, sur le noir. */
.figs-band { padding-block: clamp(2rem, 3.5vw, 3rem); }
.figs--flush { border-top: 0; padding-top: 0; margin-top: 0; }

/* ------------------------------------------------------------ Chiffres -- */

.figs {
  display: flex; flex-wrap: wrap;
  gap: 0 clamp(1.5rem, 3.5vw, 3.5rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--line-d);
}
/* Sur mobile, le flex enroulait les quatre chiffres sans gouttiere verticale
   et sans alignement de colonnes. Une grille 2x2 remet tout d'aplomb. */
@media (max-width: 760px) {
  .figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.25rem; }
  .fig { padding-block: 0; }
  /* Reduit sur telephone : a 2,1rem, "30 -> 2 000" se coupait en deux lignes
     dans une colonne de moitie d'ecran. nowrap garantit qu'aucun chiffre ne
     se scinde, quel que soit le libelle. */
  .fig__n { font-size: 1.55rem; white-space: nowrap; }
}
.section--light .figs { border-top-color: var(--line-l); }
.fig { padding-block: .4rem; }
.fig__n {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 340;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
}
.section--light .fig__n { color: var(--ink-t); }
.fig__l {
  display: block; margin-top: .5rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--chalk-3); max-width: 18ch; line-height: 1.5;
}
.section--light .fig__l { color: var(--ink-t3); }

/* -------------------------------------------------------- Les postes ---- */

/* Fiche technique : les quatre postes ne sont pas une sequence, donc pas de
   numeros. Filets fins, titres en Fraunces. */
.postes { border-top: 1px solid var(--line-d); }
.section--light .postes { border-top-color: var(--line-l); }

.poste {
  display: grid; gap: .5rem 2.5rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--line-d);
}
.section--light .poste { border-bottom-color: var(--line-l); }
@media (min-width: 860px) { .poste { grid-template-columns: 16rem 1fr; align-items: baseline; } }

.poste__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.1;
  color: var(--chalk);
}
.section--light .poste__name { color: var(--ink-t); }
.poste__desc { color: var(--chalk-2); font-size: .9688rem; line-height: 1.65; max-width: 60ch; }
.section--light .poste__desc { color: var(--ink-t2); }

/* ------------------------------------------ Signature : la conduite ----- */

/* Gardee de l'ancienne DA, passee en editorial : jalons a la regie, faits en
   Fraunces, filet or degrade. Etape 1..4, Jour J, Apres — aucune date imposee. */
.runsheet { position: relative; margin: 0; padding: 0; list-style: none; }
.runsheet::before {
  content: ""; position: absolute; left: 0; top: .8rem; bottom: 2rem; width: 1px;
  background: linear-gradient(180deg, var(--gold), var(--gold) 55%, var(--line-d) 100%);
}
.section--light .runsheet::before {
  background: linear-gradient(180deg, var(--gold), var(--gold) 55%, var(--line-l) 100%);
}
@media (min-width: 780px) { .runsheet::before { left: 8rem; } }

.run { position: relative; padding: 0 0 2.5rem 1.7rem; }
@media (min-width: 780px) {
  .run { display: grid; grid-template-columns: 8rem 1fr; padding-left: 0; }
  .run__body { padding-left: 2.75rem; }
}

.run::after {
  content: ""; position: absolute; left: -3px; top: .5rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); border: 1.5px solid var(--gold);
}
.section--light .run::after { background: var(--cream); }
@media (min-width: 780px) { .run::after { left: calc(8rem - 3px); } }

.run__time {
  display: block; margin-bottom: .5rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.section--light .run__time { color: var(--gold-ink); }
@media (min-width: 780px) { .run__time { margin-bottom: 0; padding-top: .15rem; } }

.run__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: 1.3rem; letter-spacing: -.01em; line-height: 1.15;
  margin-bottom: .4rem; color: var(--chalk);
}
.section--light .run__title { color: var(--ink-t); }

/* La limite de longueur de ligne compte autant que la couleur : au-dela de
   75 caracteres, l'oeil perd la ligne suivante. */
.run__text { font-size: .9375rem; line-height: 1.65; color: var(--chalk-2); max-width: 62ch; }
.section--light .run__text { color: var(--ink-t2); }

.run--soft::after { border-color: var(--chalk-3); }
.section--light .run--soft::after { border-color: var(--line-l2); }

/* Conduite accompagnee d'une image verticale unique. L'image est au format
   9/16 et sa largeur est reglee par --shot-w pour que sa hauteur corresponde
   a peu pres a celle du deroule qu'elle accompagne (--shot-w x 16/9).
   Sous 1060 px elle disparait : empilee, elle allongerait la page pour rien,
   et les memes visuels restent dans la galerie et les bandeaux. */
.withshot { display: block; }
.withshot__img { display: none; }

/* Seuil haut : sous 1240 px, la colonne de texte devient trop etroite, elle
   se reenroule et le deroule s'allonge — l'image a hauteur fixe ne suit plus.
   Mieux vaut alors laisser la conduite occuper toute la largeur. */
@media (min-width: 1240px) {
  .withshot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--shot-w, 20rem);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: center;
  }
  .withshot__img {
    display: block;
    margin: 0;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--ink-2);
  }
  .withshot__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* -------------------------------------------------------- Les univers --- */

/* Trois lignes pleine largeur. Plus de couleur par univers : l'or unique.
   Au survol, la ligne s'eclaire d'un lavis d'or et se decale. */
.unis { border-top: 1px solid var(--line-d); }
.section--light .unis { border-top-color: var(--line-l); }

.uni {
  position: relative;
  display: grid; gap: .5rem 2.5rem;
  padding: 2.2rem 1.5rem 2.2rem 0;
  border-bottom: 1px solid var(--line-d);
  text-decoration: none; overflow: hidden; isolation: isolate;
  transition: padding-left var(--t);
}
.section--light .uni { border-bottom-color: var(--line-l); }
@media (min-width: 860px) { .uni { grid-template-columns: 20rem 1fr auto; align-items: center; } }

.uni::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(24rem 24rem at var(--mx, 82%) var(--my, 50%), var(--gold-soft), transparent 60%);
  opacity: 0; transition: opacity var(--t-cue);
}
.uni:hover { padding-left: 1.5rem; }
.uni:hover::before { opacity: 1; }
@media (hover: none) {
  .uni::before { background: linear-gradient(90deg, var(--gold-soft), transparent 72%); }
}

.uni__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  letter-spacing: -.015em; line-height: 1.05; color: var(--chalk);
}
.section--light .uni__name { color: var(--ink-t); }
.uni__desc { color: var(--chalk-2); font-size: .9375rem; line-height: 1.6; max-width: 52ch; }
.section--light .uni__desc { color: var(--ink-t2); }
.uni__go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-d2); color: var(--chalk);
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.section--light .uni__go { border-color: var(--line-l2); color: var(--ink-t); }
.uni:hover .uni__go { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ------------------------------------------------------------- Cartes --- */

.card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 1.8rem;
  background: var(--ink-2);
  border: 1px solid var(--line-d);
  border-radius: var(--r-md);
  transition: border-color var(--t);
}
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 90% at 100% 0%, var(--gold-soft), transparent 66%);
}
.card:hover { border-color: var(--line-d2); }
.card .h3 { margin-bottom: .6rem; color: var(--chalk); }
.card p { color: var(--chalk-2); font-size: .9375rem; line-height: 1.65; }
.card .reg { display: block; margin-bottom: .8rem; color: var(--gold); }

.section--light .card {
  background: var(--cream-2);
  border-color: var(--line-l);
}
.section--light .card:hover { border-color: var(--line-l2); }
.section--light .card .h3 { color: var(--ink-t); }
.section--light .card p { color: var(--ink-t2); }
.section--light .card .reg { color: var(--gold-ink); }

/* ---------------------------------------------------------- Les listes -- */

.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.checks li {
  display: grid; grid-template-columns: 16px 1fr; gap: .9rem; align-items: start;
  font-size: .9375rem; line-height: 1.6; color: var(--chalk-2);
}
.section--light .checks li { color: var(--ink-t2); }
.checks svg { width: 16px; height: 16px; color: var(--gold); margin-top: 5px; }
.section--light .checks svg { color: var(--gold-ink); }

/* ------------------------------------------------------------ Galerie --- */

/* Galerie en mosaique : le format de la tuile suit celui du media. Une video
   16/9 dans un cadre portrait serait rognee des deux cotes ; les tuiles larges
   s'etendent donc sur deux colonnes, les portraits gardent leur hauteur. */
.gallery { display: grid; gap: 2px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--ink-2); margin: 0;
}
.tile--wide { aspect-ratio: 16 / 10; grid-column: span 2; }
.tile--full { aspect-ratio: 16 / 7; grid-column: 1 / -1; }
@media (max-width: 899px) {
  .tile--wide, .tile--full { grid-column: 1 / -1; }
  .tile--full { aspect-ratio: 16 / 10; }
}

/* Image et texte cote a cote : pour les portraits hauts, qu'un bandeau
   pleine largeur rognerait trop. L'image garde ses proportions. */
.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: .85fr 1fr; } }
.split__img { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; }
.split__img img { width: 100%; height: auto; display: block; }
.split__img figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem .9rem .8rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk);
  background: linear-gradient(180deg,
    rgba(11,11,13,0) 0%, rgba(11,11,13,.5) 34%, rgba(11,11,13,.9) 66%, rgba(11,11,13,.96) 100%);
}
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
/* La video de tuile apparait en fondu quand elle demarre ; avant, c'est la
   lueur doree qui occupe le cadre, comme dans le hero. */
.tile video { position: absolute; inset: 0; opacity: 0; transition: opacity 800ms ease; z-index: 1; }
.tile video.is-playing { opacity: 1; }
.tile__hold {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(201,162,75,.22), transparent 70%),
    var(--ink-2);
}
.tile__ph {
  position: absolute; inset: 0; display: grid; place-content: center; padding: 1rem; text-align: center;
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(201,162,75,.22), transparent 70%),
    var(--ink-2);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-3);
}
.tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 2.6rem .9rem .85rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk);
  background: linear-gradient(180deg,
    rgba(11,11,13,0) 0%, rgba(11,11,13,.5) 34%, rgba(11,11,13,.88) 62%, rgba(11,11,13,.95) 100%);
}

/* Bandeau image pleine largeur : une respiration visuelle entre deux sections
   de texte. L'image parle a la place d'un paragraphe de plus. */
.band {
  position: relative;
  height: clamp(340px, 52vh, 620px);
  overflow: hidden;
  background: var(--ink-2);
}
.band img { width: 100%; height: 100%; object-fit: cover; }
.band__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(180deg, transparent, rgba(11,11,13,.86) 72%);
}
.band__cap .reg { color: var(--chalk); }
.band__cap p {
  margin-top: .5rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--chalk);
  max-width: 26ch;
}

/* ---------------------------------------------------------- Figure ----- */

/* Une image posee dans une section, avec sa legende a la regie. */
.shot { margin: 0; }
.shot img { width: 100%; border-radius: var(--r-md); }
.shot figcaption {
  margin-top: .8rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--chalk-3);
}
.section--light .shot figcaption { color: var(--ink-t3); }

/* ---------------------------------------------------------- Formulaire -- */

.form-card {
  padding: clamp(1.5rem, 2.5vw, 2.2rem);
  background: var(--cream-2);
  border: 1px solid var(--line-l);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-l);
  color: var(--ink-t);
}
.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.field > label {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-t2);
}
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem .95rem;
  background: var(--cream);
  border: 1px solid var(--line-l2);
  border-radius: var(--r-sm);
  color: var(--ink-t);
  font: inherit; font-size: 1rem;
  transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.field textarea { min-height: 108px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857C6B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px;
  padding-right: 2.5rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-t3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field input[type="date"] { min-height: 48px; }
@media (min-width: 620px) { .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } }

/* Par defaut le site est sombre : la note prend une valeur de craie. Elle ne
   repasse a l'encre que dans une section claire ou dans le formulaire. */
.form-note { margin-top: .9rem; font-size: .75rem; line-height: 1.55; color: var(--chalk-3); }
.form-note a { color: var(--chalk-2); }
.section--light .form-note, .form-card .form-note { color: var(--ink-t3); }
.section--light .form-note a, .form-card .form-note a { color: var(--ink-t2); }
.form-error {
  display: none; margin-bottom: 1.1rem; padding: .75rem .9rem;
  border: 1px solid #C08A6A; border-radius: var(--r-sm);
  background: #F6E9E0; color: #7A3B1E; font-size: .875rem;
}
.form-error.is-visible { display: block; }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ Bandeau --- */

/* Bloc final. Toujours a l'encre (noir profond), quel que soit le theme de la
   section qui precede : c'est le point d'arret. */
.cta-band {
  position: relative; overflow: hidden;
  padding: clamp(2.75rem, 5vw, 4.5rem);
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--chalk);
}
.cta-band__inner { position: relative; z-index: 2; }
.cta-band .h2 { color: var(--chalk); margin-bottom: 1rem; max-width: 22ch; }
.cta-band .lede { color: var(--chalk-2); margin-bottom: 2.2rem; }
/* Le bandeau est toujours a l'encre, meme pose dans une section claire :
   il annule le theme clair pour ses propres elements. Sans ca, le bouton
   de telephone tombait a 1,1:1, invisible. */
.cta-band .eyebrow { color: var(--gold); }
.cta-band .eyebrow::before { background: var(--gold); }
.cta-band .reg { color: var(--chalk-3); }
.cta-band .btn--line { border-color: #3A444E; color: var(--chalk); }
.cta-band .btn--line:hover { border-color: var(--chalk); }
.cta-band .h2, .cta-band .h3 { color: var(--chalk); }
.cta-band p { color: var(--chalk-2); }

.cta-band__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 60% at 82% 20%, rgba(201,162,75,.22), transparent 70%),
    radial-gradient(30% 50% at 12% 90%, rgba(201,162,75,.12), transparent 72%);
}

/* ------------------------------------------------------------- Header --- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,11,13,.72);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background-color var(--t);
}
.site-header.is-stuck { border-bottom-color: var(--line-d); background: rgba(11,11,13,.9); }

.site-header__inner {
  width: var(--shell); margin-inline: auto; height: 74px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem; font-weight: 400; letter-spacing: -.01em;
  text-decoration: none; color: var(--chalk);
}
.brand__tag {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .5625rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--chalk-3);
}

.nav { display: none; align-items: center; gap: 1.8rem; }
.nav a {
  position: relative; padding-block: .3rem;
  font-size: .9375rem; font-weight: 500; color: var(--chalk-2);
  text-decoration: none; transition: color var(--t);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.nav a:hover { color: var(--chalk); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--chalk); }

.header__cta { display: none; }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px;
  background: transparent; border: 1px solid var(--line-d2); border-radius: var(--r-sm); cursor: pointer;
}
.burger span { height: 1.5px; background: var(--chalk); transition: transform var(--t), opacity var(--t); }
.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-nav {
  display: none; border-top: 1px solid var(--line-d); background: var(--ink);
  padding: 1.2rem 0 1.6rem;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { width: var(--shell); margin-inline: auto; padding: 0; list-style: none; display: grid; gap: .2rem; }
.mobile-nav a {
  display: block; padding: .7rem 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem; font-weight: 400; color: var(--chalk);
  text-decoration: none; border-bottom: 1px solid var(--line-d);
}
.mobile-nav .btn { margin-top: 1rem; }
/* .mobile-nav a est plus specifique que .btn--gold : sans ces deux lignes,
   le bouton dore herite du texte creme et tombe a 2:1. */
.mobile-nav a.btn--gold { color: var(--ink); }
.mobile-nav a.btn--line { color: var(--chalk); }

@media (min-width: 960px) {
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }
}

/* ------------------------------------------------------------- Footer --- */

.site-footer { background: var(--ink-2); color: var(--chalk-2); padding-block: 4rem 2.2rem; }
.site-footer .brand { color: var(--chalk); }
.footer__top { display: grid; gap: 2.5rem; margin-bottom: 2.75rem; }
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } }
.footer__blurb { margin-top: 1rem; font-size: .9375rem; line-height: 1.6; color: var(--chalk-3); max-width: 40ch; }
.footer__title {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--chalk-3);
  margin-bottom: 1rem;
}
.footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.footer__list a, .footer__list span {
  font-size: .9375rem; color: var(--chalk-2); text-decoration: none; transition: color var(--t);
}
.footer__list a:hover { color: var(--gold); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center;
  padding-top: 1.6rem; border-top: 1px solid var(--line-d);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-3);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer__legal a { color: var(--chalk-3); text-decoration: none; }
.footer__legal a:hover { color: var(--gold); }

/* -------------------------------------------------------- Barre mobile -- */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; gap: .5rem;
  padding: .65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(11,11,13,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-d);
}
.callbar .btn { flex: 1; padding-block: .8rem; }
body { padding-bottom: 74px; }
@media (min-width: 960px) { .callbar { display: none; } body { padding-bottom: 0; } }

/* ------------------------------------------------------------ Contenu --- */

.prose { max-width: 70ch; }
.prose h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: 1.6rem; letter-spacing: -.01em; margin: 2.75rem 0 .9rem;
  color: var(--ink-t);
}
.prose h3 { font-weight: 600; font-size: 1.0625rem; margin: 1.8rem 0 .5rem; color: var(--ink-t); }
.prose p, .prose li { color: var(--ink-t2); font-size: .9375rem; line-height: 1.7; }
.prose p { margin-bottom: .9rem; }
.prose ul { padding-left: 1.1rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--gold-ink); text-underline-offset: 3px; }
.prose strong { color: var(--ink-t); font-weight: 600; }

/* ------------------------------------------------- Mouvement : sobriete - */

/* Une seule animation : l'envoi lumiere du hero (la lueur doree qui monte).
   Aucune apparition au defilement. */
.cta-band__glow, .frame__hold { opacity: 0; animation: cue var(--t-cue) 200ms forwards; }
@keyframes cue { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cta-band__glow, .frame__hold { opacity: 1; }
}