/* Généré par build/design.py — ne pas modifier à la main. */
:root {
  --c-papier-bg: #FBFAF7;
  --c-papier-fg: #16181B;
  --c-papier-dim: #5E646B;
  --c-papier-accent: #A83226;
  --c-papier-line: #E4DED3;
  --c-papier-on-accent: #FBFAF7;
  --c-sable-bg: #F1EBE1;
  --c-sable-fg: #16181B;
  --c-sable-dim: #5A6068;
  --c-sable-accent: #A83226;
  --c-sable-line: #DCD3C4;
  --c-sable-on-accent: #F1EBE1;
  --c-blanc-bg: #FFFFFF;
  --c-blanc-fg: #16181B;
  --c-blanc-dim: #5E646B;
  --c-blanc-accent: #A83226;
  --c-blanc-line: #E8E3DA;
  --c-blanc-on-accent: #FFFFFF;
  --c-encre-bg: #141619;
  --c-encre-fg: #FBFAF7;
  --c-encre-dim: #C3C7CB;
  --c-encre-accent: #E0796A;
  --c-encre-line: #2C3036;
  --c-encre-on-accent: #141619;
  --c-form-line: #788994;
  --c-form-line-strong: #10242E;
}
.t-papier {
  --bg: var(--c-papier-bg);
  --fg: var(--c-papier-fg);
  --dim: var(--c-papier-dim);
  --accent: var(--c-papier-accent);
  --line: var(--c-papier-line);
  --on-accent: var(--c-papier-on-accent);
  color: var(--fg);
}
.s-papier {
  --bg: var(--c-papier-bg);
  --fg: var(--c-papier-fg);
  --dim: var(--c-papier-dim);
  --accent: var(--c-papier-accent);
  --line: var(--c-papier-line);
  --on-accent: var(--c-papier-on-accent);
  background-color: var(--bg);
  color: var(--fg);
}
.t-sable {
  --bg: var(--c-sable-bg);
  --fg: var(--c-sable-fg);
  --dim: var(--c-sable-dim);
  --accent: var(--c-sable-accent);
  --line: var(--c-sable-line);
  --on-accent: var(--c-sable-on-accent);
  color: var(--fg);
}
.s-sable {
  --bg: var(--c-sable-bg);
  --fg: var(--c-sable-fg);
  --dim: var(--c-sable-dim);
  --accent: var(--c-sable-accent);
  --line: var(--c-sable-line);
  --on-accent: var(--c-sable-on-accent);
  background-color: var(--bg);
  color: var(--fg);
}
.t-blanc {
  --bg: var(--c-blanc-bg);
  --fg: var(--c-blanc-fg);
  --dim: var(--c-blanc-dim);
  --accent: var(--c-blanc-accent);
  --line: var(--c-blanc-line);
  --on-accent: var(--c-blanc-on-accent);
  color: var(--fg);
}
.s-blanc {
  --bg: var(--c-blanc-bg);
  --fg: var(--c-blanc-fg);
  --dim: var(--c-blanc-dim);
  --accent: var(--c-blanc-accent);
  --line: var(--c-blanc-line);
  --on-accent: var(--c-blanc-on-accent);
  background-color: var(--bg);
  color: var(--fg);
}
.t-encre {
  --bg: var(--c-encre-bg);
  --fg: var(--c-encre-fg);
  --dim: var(--c-encre-dim);
  --accent: var(--c-encre-accent);
  --line: var(--c-encre-line);
  --on-accent: var(--c-encre-on-accent);
  color: var(--fg);
}
.s-encre {
  --bg: var(--c-encre-bg);
  --fg: var(--c-encre-fg);
  --dim: var(--c-encre-dim);
  --accent: var(--c-encre-accent);
  --line: var(--c-encre-line);
  --on-accent: var(--c-encre-on-accent);
  background-color: var(--bg);
  color: var(--fg);
}

/* French Escale — feuille unique, sans dépendance externe.

   Direction : éditorial clair. Papier chaud, grande serif, un seul accent
   rouge, des photographies en collage plutôt qu'une image de fond unique.
   Le contraste vient des images, pas de la couleur du fond.

   Deux couches, strictement séparées :
   1. tout ce qui est ici, hors du bloc « prefers-reduced-motion:
      no-preference », décrit un site fixe, complet et lisible ;
   2. le mouvement (révélations, parallaxe, transitions de page) vit
      uniquement dans ce bloc, et disparaît donc entièrement si le visiteur a
      demandé moins d'animations.

   Les couleurs ne sont jamais écrites ici : elles viennent des variables
   générées par build/design.py, où leur contraste est calculé.
   Propriétés logiques partout : une seule base sert le RTL arabe. */

/* ---------- Polices, auto-hébergées ---------- */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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;
}
/* L'italique porte les mots mis en avant dans les titres */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-400-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  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: "Inter";
  src: url("fonts/inter-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

/* Repli calé sur la police définitive : mesuré au navigateur, Cormorant fait
   96,3 % de la largeur de Times New Roman et Inter 106,1 % de celle d'Arial.
   Sans cet ajustement, le texte se recompose à l'arrivée de la police. */
@font-face {
  font-family: "Serif repli";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 96.3%;
  font-weight: 500;
}
@font-face {
  font-family: "Sans repli";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 106.1%;
}

/* ---------- Bases ---------- */

:root {
  --serif: "Cormorant Garamond", "Serif repli", Georgia, serif;
  --sans: "Inter", "Sans repli", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --max: 1440px;
  --gut: clamp(1.25rem, 3.2vw, 3.25rem);
  --colonnes: 12;
  --gouttiere: clamp(1rem, 2vw, 2rem);
  --rythme: clamp(3.25rem, 5.5vw, 6.5rem);
  --touche: 44px;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --rideau: cubic-bezier(0.76, 0, 0.24, 1);
}

/* L'arabe ne prend jamais la serif latine : famille dédiée, interlignage large */
html[lang="ar"] {
  --serif: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", "Geeza Pro", serif;
  --sans: "Noto Sans Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

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

/* Le rognage horizontal est posé sur html, et en « clip » : « hidden » ferait
   de body un conteneur de défilement, ce qui désactive les animations liées
   au défilement des éléments qu'il contient. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.08rem);
  line-height: 1.7;
  background-color: var(--c-papier-bg);
  color: var(--c-papier-fg);
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--fg, var(--c-papier-fg));
  margin: 0 0 1rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 4.6vw, 5.2rem); line-height: 0.98; letter-spacing: -0.032em; }
h2 { font-size: clamp(1.75rem, 2.8vw, 3rem); line-height: 1.06; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.25rem, 1.5vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; }

/* Les mots mis en avant : italique et accent, comme dans une revue */
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--accent); }
h1 u, h2 u { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 1px; }

html[lang="ar"] h1 { line-height: 1.45; letter-spacing: 0; }
html[lang="ar"] h2 { line-height: 1.5; letter-spacing: 0; }
html[lang="ar"] h3 { line-height: 1.55; }
html[lang="ar"] body { line-height: 1.9; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
/* Grille partagée : 4 colonnes sur téléphone, 8 sur tablette, 12 au-delà.
   Toutes les compositions s'y alignent au lieu d'empiler des blocs égaux. */
.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gouttiere); }
@media (min-width: 768px) { .grille { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 1024px) { .grille { grid-template-columns: repeat(var(--colonnes), 1fr); } }
.section { padding-block: var(--rythme); }
/* Un filet fin ferme un chapitre clair : la page se lit par blocs au lieu de
   flotter. Jamais sur une surface sombre, jamais avant une photographie. */
.section--filet { border-block-end: 1px solid var(--line); }
.section--titre { padding-block-end: 0; }
.section--titre :last-child { margin-block-end: 0; }
.measure { max-width: 62ch; }
.centre { margin-inline: auto; text-align: center; }
.lede { max-width: 48ch; color: var(--dim); font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.28rem); }
.centre .lede { margin-inline: auto; }

.kicker {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.5rem;
}
html[lang="ar"] .kicker { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }

.note { font-size: 0.93rem; color: var(--dim); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 100;
  background-color: var(--c-encre-bg); color: var(--c-encre-fg);
  padding: 1rem 1.5rem; text-decoration: none;
}
.skip:focus { inset-inline-start: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent, var(--c-papier-accent));
  outline-offset: 3px;
}

/* ---------- En-tête ---------- */

.hdr { border-block-end: 1px solid transparent; position: sticky; inset-block-start: 0; z-index: 40;
  background-color: color-mix(in srgb, var(--bg) 88%, transparent); }
@supports (backdrop-filter: blur(6px)) {
  .hdr { background-color: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(10px); }
}
/* Posé : une simple ligne, jamais d'ombre portée */
.hdr--pose { border-block-end-color: var(--line); }
.hdr__in { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 78px; flex-wrap: wrap; padding-block: 0.5rem; }

.brand {
  font-family: var(--serif);
  font-size: 1.3rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: var(--fg); margin-inline-end: auto;
  display: inline-flex; align-items: center; min-height: var(--touche);
  word-spacing: 0.3em;
}
.brand span { color: var(--accent); }
html[lang="ar"] .brand { text-transform: none; letter-spacing: 0; font-size: 1.5rem; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; }
.nav a {
  color: var(--fg); text-decoration: none; font-size: 0.92rem;
  display: inline-flex; align-items: center; min-height: var(--touche);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }

.langs { display: flex; gap: 0.5rem; align-items: center; font-size: 0.82rem; }
.langs a {
  color: var(--dim); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touche); min-inline-size: var(--touche); padding-inline: 0.2rem;
}
.langs a:hover { color: var(--fg); }
.langs a[aria-current="true"] { color: var(--accent); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touche); padding: 0.95rem 2rem;
  text-decoration: none; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--accent); color: var(--accent); background-color: transparent;
}
html[lang="ar"] .btn { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.btn--solid { background-color: var(--accent); color: var(--on-accent); }
.btn--solid:hover { background-color: transparent; color: var(--accent); }
.btn--ghost:hover { background-color: var(--accent); color: var(--on-accent); }
.btn--dark { border-color: var(--fg); color: var(--fg); }
.btn--dark:hover { background-color: var(--fg); color: var(--bg); }
.btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-block-start: 2.5rem; }
.centre .btns { justify-content: center; }

/* ---------- Photographies ---------- */

/* Le cadre réserve sa place par aspect-ratio : aucune image ne peut décaler
   la page en arrivant. Le rognage passe par clip-path et non overflow, qui
   rendrait inactive la parallaxe liée au défilement. */
.photo { position: relative; clip-path: inset(0); background-color: var(--c-sable-bg); }
.photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.photo--portrait { aspect-ratio: 3 / 4; }
.photo--haute { aspect-ratio: 2 / 3; }
.photo--paysage { aspect-ratio: 16 / 9; }

/* ---------- Héros : collage éditorial ---------- */

.hero { padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem); position: relative; }
.hero__in { position: relative; text-align: center; max-width: 30ch; margin-inline: auto; }
.hero h1 { margin-block-end: 1.5rem; }
.hero .lede { margin-inline: auto; }

/* Téléphone : les vignettes forment une bande sous le titre, deux par ligne.
   Aucune image n'est posée derrière le texte, donc aucun risque de lisibilité. */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 3vw, 1.25rem); margin-block-start: clamp(2.5rem, 7vw, 4rem); }
.collage .vignette:nth-child(3) { grid-column: 1 / -1; }
.collage .vignette:nth-child(4) { display: none; }

/* Écran large : les quatre vignettes encadrent le titre, à des hauteurs
   différentes — la composition d'une double page de magazine. */
@media (min-width: 1024px) {
  /* Composition en médaillon : une image en bandeau au-dessus du titre, deux
     verticales qui bordent la page à gauche et à droite, une quatrième amorcée
     sous le pli. Les vignettes deviennent des cellules de la grille du héros
     (display: contents) : aucune position absolue, donc rien ne peut déborder
     d'un écran à l'autre. */
  .hero--collage { padding-block: clamp(1.5rem, 2.5vw, 2.5rem) clamp(2.5rem, 5vw, 4.5rem); }
  .hero--collage .wrap { inline-size: 100%; display: grid;
    grid-template-columns: repeat(var(--colonnes), 1fr);
    column-gap: var(--gouttiere); row-gap: clamp(1.25rem, 2.4vw, 2rem);
    align-items: start; }

  .hero--collage .hero__in { grid-column: 3 / 11; grid-row: 2; text-align: center; max-width: none; }
  .hero__in .lede { margin-inline: auto; max-width: 46ch; }
  .hero--collage .btns { justify-content: center; }

  .collage { display: contents; }
  /* Verticale de gauche, au bord de la page */
  .collage .vignette:nth-child(1) {
    grid-column: 1 / 3; grid-row: 1 / 3; align-self: center;
    margin-inline-start: calc(-1 * var(--gut));
  }
  /* Bandeau central, au-dessus du titre */
  .collage .vignette:nth-child(2) { grid-column: 5 / 9; grid-row: 1; }
  .collage .vignette:nth-child(2) .photo { aspect-ratio: 16 / 10; }
  /* Verticale de droite, au bord de la page */
  .collage .vignette:nth-child(3) {
    grid-column: 11 / 13; grid-row: 1 / 3; align-self: center;
    margin-inline-end: calc(-1 * var(--gut));
  }
  /* La quatrième image sortait sous les boutons : sur grand écran la
     composition se tient à trois, ce qui raccourcit d'autant le héros. */
  .collage .vignette:nth-child(4) { display: none; }
  /* Hauteurs bornées : le héros tient dans un écran sans pousser le contenu */
  .collage .vignette:nth-child(2) .photo { aspect-ratio: 16 / 9; max-block-size: min(32svh, 290px); }
  .collage .vignette:nth-child(1) .photo,
  .collage .vignette:nth-child(3) .photo { max-block-size: min(50svh, 440px); }
  .collage .photo { block-size: auto; inline-size: 100%; }
  .collage .vignette { block-size: auto; }
}

/* Héros des pages intérieures : un titre large, un chapô en colonne étroite */
@media (min-width: 1024px) {
  .hero--texte .wrap { display: grid; grid-template-columns: repeat(var(--colonnes), 1fr);
    column-gap: var(--gouttiere); align-items: end; }
  .hero--texte .kicker { grid-column: 1 / 13; }
  .hero--texte h1 { grid-column: 1 / 9; margin-block-end: 0; }
  .hero--texte .lede { grid-column: 9 / 13; margin-block-end: 0.6rem; }
}

/* ---------- Rangées photo + texte ---------- */

.rang { padding-block: clamp(2rem, 3.5vw, 3.5rem); }
.rang__in { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.rang__txt p { color: var(--dim); max-width: 46ch; }
.rang__n {
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.75rem;
}
html[lang="ar"] .rang__n { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }

@media (min-width: 1024px) {
  /* Trois compositions différentes sur la même grille : l'œil ne voit jamais
     deux fois le même rapport image / texte. */
  .rang__in { grid-template-columns: repeat(var(--colonnes), 1fr); column-gap: var(--gouttiere); align-items: center; }
  .rang .photo { grid-column: 1 / 7; }
  .rang .rang__txt { grid-column: 8 / 12; }
  .rang--inverse .photo { grid-column: 7 / 13; order: 2; }
  .rang--inverse .rang__txt { grid-column: 2 / 6; }
  .rang:last-child .photo { grid-column: 2 / 7; }
  .rang:last-child .rang__txt { grid-column: 8 / 13; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .rang__in { grid-template-columns: 1fr 1fr; }
  .rang--inverse .photo { order: 2; }
}

/* ---------- Photographie pleine largeur ---------- */

.pleine { inline-size: 100%; }
.photo--bandeau { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .photo--bandeau { aspect-ratio: 16 / 9; } }
@media (min-width: 1280px) { .photo--bandeau { aspect-ratio: 2.4 / 1; } }

/* Deux photographies dialoguent : une grande, une plus petite décalée */
.duo { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 1024px) {
  .duo { grid-template-columns: repeat(var(--colonnes), 1fr); column-gap: var(--gouttiere); align-items: end; }
  .duo__a { grid-column: 1 / 7; }
  .duo__b { grid-column: 8 / 12; padding-block-end: clamp(1.5rem, 4vw, 3.5rem); }
}

/* ---------- Bande pleine largeur ---------- */

/* Le texte est posé sur la photographie : un voile d'encre garantit le
   contraste quelle que soit l'image (paire « encre » mesurée dans design.py). */
.bande { position: relative; clip-path: inset(0); display: grid; }
.bande > * { grid-area: 1 / 1; }
.bande .photo { block-size: 100%; aspect-ratio: auto; }
/* Deux voiles : un fond général pour l'ambiance, et un renfort du côté du
   texte. Le second garantit le contraste même sur la partie la plus claire
   d'une photographie — ici de l'eau en plein soleil. */
/* Le voile doit être positionné : la photographie l'est (position: relative),
   et un élément positionné se peint au-dessus d'un élément statique, quel que
   soit l'ordre du document. Sans cette ligne, le voile passe sous l'image. */
.bande__voile {
  position: relative;
  background-image:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--c-encre-bg) 45%, transparent),
      color-mix(in srgb, var(--c-encre-bg) 65%, transparent)),
    linear-gradient(to right,
      color-mix(in srgb, var(--c-encre-bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--c-encre-bg) 78%, transparent) 50%,
      color-mix(in srgb, var(--c-encre-bg) 20%, transparent) 80%,
      transparent 100%);
}
[dir="rtl"] /* Le voile doit être positionné : la photographie l'est (position: relative),
   et un élément positionné se peint au-dessus d'un élément statique, quel que
   soit l'ordre du document. Sans cette ligne, le voile passe sous l'image. */
.bande__voile {
  position: relative;
  background-image:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--c-encre-bg) 45%, transparent),
      color-mix(in srgb, var(--c-encre-bg) 65%, transparent)),
    linear-gradient(to left,
      color-mix(in srgb, var(--c-encre-bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--c-encre-bg) 78%, transparent) 50%,
      color-mix(in srgb, var(--c-encre-bg) 20%, transparent) 80%,
      transparent 100%);
}
.bande__txt { position: relative; align-self: center; padding-block: clamp(3.5rem, 8vw, 6rem); }
.bande__txt .measure { max-width: 44ch; }

/* ---------- Cartes, listes, FAQ ---------- */

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.grid--espace { margin-block-start: clamp(1.75rem, 3vw, 2.5rem); }

.card { border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; }
.card__n { font-family: var(--serif); font-size: 2.4rem; color: var(--accent); line-height: 1; display: block; margin-block-end: 0.5rem; }
.card p { color: var(--dim); margin: 0; }

.days { list-style: none; margin: 0; padding: 0; }
.day { display: grid; grid-template-columns: 7rem 1fr; gap: clamp(1rem, 2vw, 2rem); padding-block: 1.5rem; border-block-start: 1px solid var(--line); }
.day:last-child { border-block-end: 1px solid var(--line); }
.day__n { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); padding-block-start: 0.5rem; }
html[lang="ar"] .day__n { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.day p { margin: 0; color: var(--dim); }
@media (max-width: 680px) { .day { grid-template-columns: 1fr; gap: 0.5rem; } }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { padding-inline-start: 2rem; margin-block-end: 0.9rem; position: relative; color: var(--dim); }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em;
  inline-size: 0.7rem; block-size: 0.38rem;
  border-inline-start: 1px solid var(--accent); border-block-end: 1px solid var(--accent);
  transform: rotate(-45deg);
}
.ticks--minus li::before { transform: none; block-size: 0; inline-size: 0.8rem; inset-block-start: 0.82em; border-inline-start: 0; border-block-end: 1px solid var(--dim); }

.faq { border-block-start: 1px solid var(--line); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding-block: 1.15rem; min-height: var(--touche);
  font-family: var(--serif); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  color: var(--fg); list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--dim); padding-block-end: 1.15rem; margin: 0; max-width: 72ch; }

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

.form { display: grid; gap: 1.5rem; }
.row { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
html[lang="ar"] .field label { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; min-height: var(--touche);
  color: var(--c-blanc-fg); background-color: var(--c-blanc-bg);
  border: 1px solid var(--c-form-line); padding: 0.85rem 0.95rem; border-radius: 0; inline-size: 100%;
}
.field textarea { min-block-size: 170px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-form-line-strong); outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.93rem; color: var(--dim); }
.check input { margin-block-start: 0.35rem; flex: none; inline-size: 20px; block-size: 20px; min-height: 0; }
.form button { font: inherit; cursor: pointer; }

/* Piège à robots : invisible pour un humain, rempli par les robots de spam */
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.contact-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.contact-list li { padding-block: 0.9rem; border-block-end: 1px solid var(--line); }
.contact-list a { color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--touche); }
.contact-list a:hover { color: var(--accent); }
.contact-list span { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-block-end: 0.2rem; }
html[lang="ar"] .contact-list span { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }

/* ---------- Pied de page ---------- */

.ftr { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; font-size: 0.93rem; color: var(--dim); }
.ftr h2 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-block-end: 1.25rem; }
html[lang="ar"] .ftr h2 { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.ftr a { color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--touche); }
.ftr a:hover { color: var(--accent); }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr__brand { font-family: var(--serif); font-size: 1.3rem; color: var(--fg); letter-spacing: 0.2em; text-transform: uppercase; word-spacing: 0.3em; }
html[lang="ar"] .ftr__brand { text-transform: none; letter-spacing: 0; }
.ftr__bot { margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between; font-size: 0.83rem; }

/* ---------- Sélecteur de langue, à la racine ---------- */

.picker { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gut); }
.picker h1 { font-size: clamp(2rem, 5vw, 3rem); }
.picker .btns { justify-content: center; }

/* ---------- Téléphone : compacité ---------- */

@media (max-width: 680px) {
  /* L'en-tête tient sur deux lignes — marque et langues, puis navigation.
     Sur trois lignes il repoussait le titre hors du premier écran.
     Les cibles restent à 44 px : c'est sur téléphone qu'elles comptent. */
  .hdr__in { min-height: 0; gap: 0 1rem; padding-block: 0.15rem 0.35rem; }
  .brand { font-size: 1.05rem; letter-spacing: 0.14em; }
  .langs { order: 2; margin-inline-start: auto; font-size: 0.78rem; gap: 0.1rem; }
  .nav { order: 3; flex-basis: 100%; gap: 1.15rem; }
  .nav a { font-size: 0.9rem; }

  .hero { padding-block: clamp(1.25rem, 3vh, 2rem) clamp(2rem, 5vh, 3rem); }
  .hero .lede { font-size: 1.02rem; }
  .collage { margin-block-start: clamp(1.5rem, 5vw, 2.25rem); }
  .rang__in { gap: 1.25rem; }
  .bande__txt { padding-block: clamp(3rem, 12vw, 4.5rem); }
}

/* ==========================================================================
   Couche 2 — le mouvement.
   Ignoré si le visiteur a demandé moins d'animations : le site reste alors
   complet, seulement immobile.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  html { scroll-behavior: smooth; interpolate-size: allow-keywords; }

  .hdr { transition: transform 0.6s var(--sortie), border-color 0.4s ease, background-color 0.4s ease; }
  .hdr--cache { transform: translateY(-101%); }

  .btn, .nav a, .langs a, .ftr a, .contact-list a, .faq summary {
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  }

  /* Transitions entre les pages : navigation réelle, pas de routeur client */
  @view-transition { navigation: auto; }
  .hdr { view-transition-name: entete; }
  ::view-transition-old(root) { animation: fondu-sortie 0.22s ease both; }
  ::view-transition-new(root) { animation: fondu-entree 0.32s ease both; }
  @keyframes fondu-sortie { to { opacity: 0; } }
  @keyframes fondu-entree { from { opacity: 0; transform: translateY(8px); } }

  /* Survols : filet qui se déplie, bouton qui se remplit par la gauche */
  .nav a, .contact-list a { position: relative; }
  .nav a::after, .contact-list a::after {
    content: ""; position: absolute; inset-block-end: 0.35rem; inset-inline: 0; block-size: 1px;
    background-color: var(--accent); transform: scaleX(0); transform-origin: inline-start;
    transition: transform 0.32s var(--sortie);
  }
  .nav a:hover::after, .nav a:focus-visible::after,
  .nav a[aria-current="page"]::after, .contact-list a:hover::after { transform: scaleX(1); }

  .btn { position: relative; overflow: clip; isolation: isolate; }
  .btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-color: var(--accent); transform: scaleX(0); transform-origin: inline-start;
    transition: transform 0.38s var(--sortie);
  }
  .btn--ghost:hover::before, .btn--ghost:focus-visible::before,
  .btn--dark:hover::before, .btn--dark:focus-visible::before { transform: scaleX(1); }
  .btn--ghost:hover, .btn--ghost:focus-visible,
  .btn--dark:hover, .btn--dark:focus-visible { color: var(--on-accent); }
  .btn--solid::before { background-color: var(--bg); }
  .btn--solid:hover::before, .btn--solid:focus-visible::before { transform: scaleX(1); }
  .btn--solid:hover, .btn--solid:focus-visible { color: var(--accent); }

  /* La photographie grandit légèrement sous le curseur, dans son cadre */
  .photo img { transition: transform 0.6s var(--sortie); }
  a:hover .photo img, .vignette:hover img { transform: scale(1.04); }

  /* La FAQ s'ouvre au lieu de sauter — hauteur animée, sans JavaScript */
  @supports (interpolate-size: allow-keywords) {
    .faq details::details-content {
      block-size: 0; overflow: clip;
      transition: block-size 0.36s ease, content-visibility 0.36s allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }
  .faq summary::after { transition: transform 0.3s ease, color 0.25s ease; }
  .faq details[open] summary::after { transform: rotate(180deg); }

  /* Entrée au chargement. Le titre ne bouge qu'en transformation, jamais en
     opacité : c'est l'élément chronométré pour le LCP, le masquer même
     brièvement retarderait la mesure. */
  .hero .kicker { animation: monte-doux 0.38s var(--sortie) both; }
  .hero h1 { animation: monte-titre 0.4s var(--sortie) both; }
  .hero .lede { animation: monte-doux 0.38s var(--sortie) 0.08s both; }
  .hero .btns { animation: monte-doux 0.38s var(--sortie) 0.16s both; }
  .collage .vignette { animation: monte-vignette 0.5s var(--sortie) both; }
  .collage .vignette:nth-child(2) { animation-delay: 0.08s; }
  .collage .vignette:nth-child(3) { animation-delay: 0.16s; }
  .collage .vignette:nth-child(4) { animation-delay: 0.24s; }
  @keyframes monte-doux { from { opacity: 0; transform: translateY(16px); } }
  @keyframes monte-titre { from { transform: translateY(20px); } }
  @keyframes monte-vignette { from { opacity: 0; transform: translateY(28px) scale(0.98); } }

  /* Révélations et parallaxe — pilotées par le défilement, sans JavaScript là
     où le navigateur sait le faire ; par IntersectionObserver ailleurs
     (classe .fx posée par escale.js). */
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: apparait linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 50%;
    }
    /* L'image se dévoile par un masque qui remonte, puis dérive dans son
       cadre : deux vitesses dans la même page. */
    .photo {
      animation: devoile linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    .photo img {
      animation: derive linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    /* Les vignettes du collage montent à des vitesses différentes */
    .collage .vignette:nth-child(odd) {
      animation: flotte-haut linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .collage .vignette:nth-child(even) {
      animation: flotte-bas linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .bande__txt {
      animation: remonte linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
  @keyframes apparait { from { opacity: 0; transform: translateY(24px); } }
  @keyframes devoile { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes derive { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }
  @keyframes flotte-haut { from { transform: translateY(70px); } to { transform: translateY(-70px); } }
  @keyframes flotte-bas { from { transform: translateY(-52px); } to { transform: translateY(52px); } }
  @keyframes remonte { from { transform: translateY(34px); } to { transform: translateY(-34px); } }

  .fx [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.38s ease, transform 0.38s var(--sortie); }
  .fx [data-reveal].est-la { opacity: 1; transform: none; }

  /* Curseur travaillé — pointeur fin uniquement, le curseur natif est conservé */
  @media (hover: hover) and (pointer: fine) {
    .curseur {
      position: fixed; inset-block-start: 0; inset-inline-start: 0;
      inline-size: 26px; block-size: 26px; border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--c-papier-accent) 70%, transparent);
      translate: calc(var(--x, -100) * 1px - 13px) calc(var(--y, -100) * 1px - 13px);
      transition: scale 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
      pointer-events: none; z-index: 60; opacity: 0;
    }
    .curseur--actif { opacity: 1; }
    .curseur--survol { scale: 1.9; background-color: color-mix(in srgb, var(--c-papier-accent) 12%, transparent); }
  }
}