/* ============================================================
   DELF & more — feuille de style
   Palette et typographie : voir DESIGN.md / BRIEF.md
   ============================================================ */

/* ---------- Polices (hébergées sur le site) ---------- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2");
}
/* Noto Naskh Arabic : limitée aux plages arabes, le latin retombe sur Jost / Playfair */
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-naskh-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-naskh-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/noto-naskh-arabic-arabic-600-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ---------- Jetons ---------- */
:root {
  /* primitifs */
  --marine: #1b2a4a;
  --marine-fonce: #142038;
  --or: #c9a74d;
  --or-clair: #e6d3a1;
  --or-sombre: #85691f;
  --blanc: #ffffff;
  --brume: #eef1f6;
  --encre: #33405a;
  --encre-2: #5b6679;
  --ciel: #dbe2ee;      /* texte courant sur marine */
  --ciel-2: #a8b4c9;    /* texte secondaire sur marine */
  --filet-clair: rgba(27, 42, 74, 0.16);
  --filet-or: rgba(201, 167, 77, 0.45);

  /* typographie */
  --f-titre: "Playfair Display", "Noto Naskh Arabic", georgia, serif;
  --f-texte: "Jost", "Noto Naskh Arabic", system-ui, sans-serif;
  --fs-body: 1.125rem;          /* 18 px */
  --lh-body: 1.65;
  --fs-h1: clamp(1.9rem, 1.2rem + 3vw, 3.1rem);
  --fs-h2: clamp(1.65rem, 1.2rem + 1.9vw, 2.4rem);
  --fs-h3: 1.25rem;
  --fs-small: 0.9375rem;        /* 15 px */
  --mesure: 27em;               /* ~65 caractères en Jost */

  /* espacement (échelle 8) */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem;
  --s-6: 3rem;  --s-8: 4rem; --s-12: 6rem;  --s-16: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-reveal: 0.8s;

  --focus: var(--or-sombre);
}

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

/* en-tête collant : hauteur pleine (--head-h) et bande compacte visible au défilement (--head-c) */
:root { --head-h: 5.25rem; --head-c: 4rem; }
@media (min-width: 1200px) {
  :root { --head-h: 6.5rem; --head-c: 4.5rem; }
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-c) + 1rem);
}
@media (max-width: 1199px) {
  /* la barre d'action mobile ne masque jamais l'élément ciblé ou focalisé */
  html { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
html.menu-open { overflow: hidden; }
[hidden] { display: none !important; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--encre);
  background: var(--blanc);
  text-rendering: optimizeLegibility;
}
@media (max-width: 599px) {
  :root { --fs-body: 1.0625rem; } /* 17 px */
}

/* Arabe : Naskh, corps 20 px, interligne 1,9 */
html[lang="ar"] {
  --f-titre: "Noto Naskh Arabic", "Playfair Display", georgia, serif;
  --f-texte: "Noto Naskh Arabic", "Jost", system-ui, sans-serif;
  --fs-body: 1.25rem;           /* 20 px */
  --lh-body: 1.9;
  --fs-h3: 1.375rem;
  --fs-small: 1.125rem;
  --mesure: 24em;
}
html[lang="ar"] body { font-weight: 400; }
html[lang="ar"] h1, html[lang="ar"] h2 { font-weight: 600; }
html[lang="ar"] h1 { line-height: 1.7; }
html[lang="ar"] h2 { line-height: 1.7; }
bdi { unicode-bidi: isolate; }

h1, h2, h3 { margin: 0; color: inherit; }
h1 { font-family: var(--f-titre); font-size: var(--fs-h1); font-weight: 500; line-height: 1.22; letter-spacing: 0.002em; text-wrap: balance; }
h2 { font-family: var(--f-titre); font-size: var(--fs-h2); font-weight: 500; line-height: 1.25; text-wrap: balance; }
h3 { font-family: var(--f-texte); font-size: var(--fs-h3); font-weight: 500; line-height: 1.4; }

p { margin: 0; max-width: var(--mesure); }
p + p { margin-block-start: 1em; }
ul, ol, dl, figure, blockquote { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.2s var(--ease); }

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

.skip {
  position: absolute;
  inset-inline-start: var(--s-2);
  inset-block-start: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--or-clair);
  color: var(--marine);
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  font-weight: 500;
  transition: inset-block-start 0.2s var(--ease);
}
.skip:focus-visible { inset-block-start: 0; }

.wrap {
  max-width: 71.25rem; /* 1140 px */
  margin-inline: auto;
  padding-inline: max(1.5rem, env(safe-area-inset-left)) ;
  padding-inline-end: max(1.5rem, env(safe-area-inset-right));
}
@media (min-width: 900px) {
  .wrap { padding-inline: 3rem; }
}

section { padding-block: var(--section-y); }
.lede { margin-block: var(--s-3) 0; color: var(--encre-2); }

/* sections sombres */
.on-dark, .hero, .method, .close {
  --focus: var(--or-clair);
  background: var(--marine);
  color: var(--ciel);
}
.hero .lede, .method .lede { color: var(--ciel-2); }
.hero h1, .hero h2, .method h2, .method h3, .close h2 { color: var(--blanc); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn > span { display: block; }
.btn-gold { background: var(--or); color: #14203a; }
.btn-gold:hover { background: var(--or-clair); }
.btn-sm { min-height: 2.75rem; padding: 0.5rem 1.25rem; font-size: 1rem; white-space: nowrap; }

.link-soft {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--or-clair);
  font-weight: 400;
  text-decoration-color: var(--filet-or);
}
.link-soft:hover { text-decoration-color: var(--or-clair); }

/* ---------- En-tête (collant, compact au défilement) ----------
   Hauteur constante : seule la bande basse (--head-c) reste visible une fois
   l'en-tête collé (top négatif). Le compactage ne fait que translater la ligne
   et réduire le logo : aucun décalage de mise en page. */
.site-head {
  --focus: var(--or-clair);
  position: sticky;
  top: calc(var(--head-c) - var(--head-h));
  z-index: 50;
  height: calc(var(--head-h) + env(safe-area-inset-top));
  padding-block-start: env(safe-area-inset-top);
  background: var(--marine);
  transition: box-shadow 0.3s var(--ease);
}
.site-head.is-compact { box-shadow: 0 1px 0 rgba(201, 167, 77, 0.3); }
.head-row {
  position: relative;
  z-index: 2;
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.3s var(--ease);
}
.is-compact .head-row { transform: translateY(calc((var(--head-h) - var(--head-c)) / 2)); }
.brand { display: inline-flex; flex: none; border-radius: 4px; }
.brand img {
  width: 3.5rem;
  height: 3.5rem;
  transform-origin: left center;
  transition: scale 0.3s var(--ease);
}
html[dir="rtl"] .brand img { transform-origin: right center; }
.is-compact .brand img { scale: 0.75; }
@media (min-width: 1200px) {
  .head-row { gap: 1.5rem; }
  .brand img { width: 4.5rem; height: 4.5rem; }
  .is-compact .brand img { scale: 0.68; }
}

/* navigation principale (desktop) */
.main-nav { display: none; }
.main-nav ul { list-style: none; display: flex; align-items: center; gap: 0.125rem; }
.main-nav a,
.menu-links a { position: relative; text-decoration: none; }
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.625rem;
  color: var(--ciel);
  font-size: 1rem;
  white-space: nowrap;
}
.main-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0.625rem;
  inset-block-end: 0.375rem;
  height: 1px;
  background: var(--or);
  scale: 0 1;
  transition: scale 0.3s var(--ease);
}
.main-nav a:hover { color: var(--or-clair); }
.main-nav a[aria-current] { color: var(--or-clair); }
.main-nav a[aria-current]::after { scale: 1 1; }
html[lang="ar"] .main-nav a { font-size: 1.0625rem; }

.langs { display: flex; align-items: center; gap: 0.125rem; margin-inline-start: auto; }
.langs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  color: var(--ciel);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.langs a:hover { color: var(--or-clair); }
.langs a[aria-current="page"] {
  color: var(--or-clair);
  box-shadow: inset 0 0 0 1px var(--filet-or);
}
.langs .lang-ar { font-family: "Noto Naskh Arabic", var(--f-texte); }

.head-cta { display: none; }

.menu-toggle {
  display: none;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--filet-or);
  border-radius: 999px;
  background: transparent;
  color: var(--ciel);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
html.js .menu-toggle { display: inline-flex; }
.menu-toggle:hover { color: var(--or-clair); border-color: var(--or); }
.menu-icon { position: relative; width: 1.125rem; height: 0.75rem; }
.menu-icon i {
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: translate 0.3s var(--ease), rotate 0.3s var(--ease);
}
.menu-icon i:first-child { top: 0.125rem; }
.menu-icon i:last-child { bottom: 0.125rem; }
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child { translate: 0 0.1875rem; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child { translate: 0 -0.1875rem; rotate: -45deg; }

@media (min-width: 1200px) {
  .main-nav { display: block; margin-inline-start: auto; }
  .langs { margin-inline-start: 0; }
  .head-cta { display: inline-flex; }
  html.js .menu-toggle { display: none; }
}
@media (max-width: 379px) {
  .menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-toggle { padding: 0; width: 2.75rem; justify-content: center; }
}

/* panneau plein écran (mobile et tablette) */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: calc(var(--head-h) + env(safe-area-inset-top)) calc(2rem + env(safe-area-inset-bottom));
  background: var(--marine);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.menu-panel.open { opacity: 1; }
.menu-links { list-style: none; border-block-start: 1px solid rgba(219, 226, 238, 0.14); }
.menu-links li { border-block-end: 1px solid rgba(219, 226, 238, 0.14); }
.menu-links a {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  font-family: var(--f-titre);
  font-size: 1.625rem;
  color: var(--blanc);
}
.menu-links a:hover, .menu-links a[aria-current] { color: var(--or-clair); }
.menu-cta { margin-block-start: var(--s-4); max-width: none; }
.menu-cta .btn { width: 100%; }
@media (min-width: 1200px) {
  .menu-panel { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(1.5rem, 4vw, 4rem) var(--section-y); }
.hero-grid {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
.hero-sub { margin-block-start: var(--s-3); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem); color: var(--ciel); }
.hero-actions {
  margin-block-start: var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.proof-line { font-size: 1rem; color: var(--ciel-2); padding-inline-start: 1.75rem; }
@media (max-width: 599px) {
  /* bouton pleine largeur, preuve centrée dessous */
  .hero-actions, .hero-cta { align-items: stretch; }
  .hero-actions .link-soft { align-self: flex-start; }
  .proof-line { padding-inline-start: 0; text-align: center; max-width: none; }
}
.session {
  margin-block-start: var(--s-4);
  padding-inline-start: var(--s-2);
  border-inline-start: 2px solid var(--or);
  color: var(--ciel);
  font-size: 1.0625rem;
}
.session p { max-width: none; text-wrap: balance; }
.session p + p { margin-block-start: 0.375rem; }
.session strong { color: var(--or-clair); font-weight: 500; }
.session-link {
  font-size: 1rem;
  color: var(--ciel);
  text-decoration-color: var(--filet-or);
}
.session-link:hover { color: var(--or-clair); text-decoration-color: var(--or-clair); }

.hero-figure { max-width: 26.875rem; margin-inline: auto; width: 100%; }
.arch {
  position: relative;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: 6px;
  border-end-end-radius: 6px;
}
.arch picture, .arch img {
  border-radius: inherit;
  width: 100%;
}
.arch::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  translate: 0.875rem 0.875rem;
  border: 1px solid var(--or);
  border-radius: inherit;
  pointer-events: none;
}
html[dir="rtl"] .arch::before { translate: -0.875rem 0.875rem; }
.hero-figure figcaption {
  margin-block-start: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  text-align: center;
}
.hero-figure figcaption strong { font-family: var(--f-titre); font-weight: 500; font-size: 1.25rem; color: var(--blanc); letter-spacing: 0.01em; }
.hero-figure figcaption span { color: var(--ciel-2); font-size: 1rem; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-8); }
  .hero-figure { margin-inline: 0 0.875rem; }
}

/* ---------- Pour qui ---------- */
.quali { background: var(--blanc); }
.quali-cols {
  margin-block-start: var(--s-6);
  display: grid;
  gap: var(--s-3);
}
.quali-col {
  border: 1px solid var(--filet-clair);
  border-radius: 8px;
  padding: var(--s-4);
}
.quali-col.yes { border-block-start: 3px solid var(--or); }
.quali-col.no { border-block-start: 3px solid var(--ciel-2); }
.quali-col h3 { color: var(--marine); }
.quali-col ul { list-style: none; margin-block-start: var(--s-3); display: grid; gap: var(--s-2); }
.quali-col li { display: flex; gap: 0.875rem; align-items: baseline; max-width: var(--mesure); }
.quali-col .pt { flex: none; translate: 0 0.3em; }
.quali-col.yes .pt { color: var(--or); }
.quali-col.no .pt { color: var(--ciel-2); }
@media (min-width: 820px) {
  .quali-cols { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

/* ---------- Méthode D.E.L.F. ---------- */
.method h2, .method .lede { text-align: center; margin-inline: auto; }
.steps {
  position: relative;
  margin-block-start: var(--s-8);
  margin-inline: auto;
  max-width: 46rem;
  display: grid;
  gap: var(--s-8);
}
.steps-line {
  position: absolute;
  inset-block: 1rem 1rem;
  inset-inline-start: calc(var(--letter-w) / 2);
  width: 1px;
  background: var(--or);
  opacity: 0.55;
  transform-origin: top center;
}
.steps { --letter-w: clamp(4.5rem, 3rem + 8vw, 7.5rem); }
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--letter-w) 1fr;
  gap: var(--s-3);
  align-items: start;
}
.step-letter {
  font-family: "Playfair Display", georgia, serif;
  font-weight: 400;
  font-size: clamp(4.25rem, 2.6rem + 8vw, 7rem);
  line-height: 1;
  color: var(--or);
  text-align: center;
  background: var(--marine);
  padding-block: 0.375rem;
  position: relative;
  z-index: 1;
}
.step-when {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--or-clair);
}
.step-body h3 { margin-block-start: 0.25rem; font-family: var(--f-titre); font-weight: 500; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.step-body p:last-child { margin-block-start: 0.625rem; color: var(--ciel); }
.promise {
  margin: var(--s-12) auto 0;
  padding-block-start: var(--s-6);
  max-width: 26em;
  text-align: center;
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  line-height: 1.6;
  color: var(--or-clair);
  position: relative;
}
html[lang="ar"] .promise { font-style: normal; }
.promise::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 4rem;
  height: 1px;
  background: var(--or);
}
html[dir="rtl"] .promise::before { translate: 50% 0; }

/* ---------- Programme ---------- */
.program { background: var(--brume); }
.program h2 { color: var(--marine); }
.program-list { margin-block-start: var(--s-6); border-block-start: 1px solid var(--filet-clair); }
.program-row {
  display: grid;
  gap: 0.25rem var(--s-4);
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--filet-clair);
}
.program-row dt { font-weight: 500; color: var(--marine); }
.program-row dd { margin: 0; color: var(--encre); max-width: var(--mesure); }
@media (min-width: 720px) {
  .program-row { grid-template-columns: 13rem 1fr; }
}

/* ---------- Témoignages ---------- */
.proof { background: var(--blanc); }
.proof h2 { color: var(--marine); }
.proof-featured {
  margin-block-start: var(--s-6);
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
blockquote p {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);
  line-height: 1.65;
  color: var(--encre);
}
html[lang="ar"] blockquote p { font-style: normal; line-height: 1.9; }
figcaption { font-size: 1rem; }
.quote-main figcaption, .quote-card figcaption {
  margin-block-start: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.75rem;
}
.quote-main figcaption > bdi, .quote-card figcaption > bdi {
  font-weight: 500;
  color: var(--marine);
}
.quote-meta { color: var(--encre-2); }
.quote-meta::before { content: "· "; color: var(--or); }
.tr-note { flex-basis: 100%; font-size: var(--fs-small); color: var(--encre-2); font-style: italic; }
html[lang="ar"] .tr-note { font-style: normal; }

.doc {
  background: #faf6eb;
  border: 1px solid var(--filet-or);
  border-radius: 4px;
  padding: 0.875rem;
  max-width: 33rem;
  justify-self: center;
}
.doc img { border-radius: 2px; }
.doc figcaption { margin-block-start: 0.75rem; font-size: var(--fs-small); color: var(--encre-2); max-width: var(--mesure); }
@media (min-width: 960px) {
  .proof-featured { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
}

.proof-grid {
  margin-block-start: var(--s-6);
  display: grid;
  gap: var(--s-3);
}
.quote-card {
  background: var(--brume);
  border-radius: 8px;
  padding: var(--s-4);
}
.quote-card blockquote p { font-size: 1.1875rem; }
@media (min-width: 820px) {
  .proof-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

.video-block { margin-block-start: var(--s-8); }
.video-frame {
  position: relative;
  max-width: 47.5rem;
  margin-inline: auto;
  border-radius: 8px;
  overflow: hidden;
  background: var(--marine-fonce);
}
.video-frame video { width: 100%; }
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5rem;
  height: 5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 32, 56, 0.72);
  color: var(--or-clair);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), scale 0.2s var(--ease);
}
.video-play:hover { background: rgba(20, 32, 56, 0.9); scale: 1.04; }
.video-play svg { translate: 2px 0; }
.video-block figcaption {
  margin: var(--s-3) auto 0;
  max-width: var(--mesure);
  text-align: center;
  color: var(--encre-2);
  font-size: 1.0625rem;
}
html[lang="ar"] .video-block figcaption { font-size: var(--fs-small); }

/* ---------- Formatrice ---------- */
.bio { background: var(--brume); }
.bio-grid { display: grid; gap: var(--s-6); align-items: start; }
.bio-figure { max-width: 21.25rem; margin-inline: auto; width: 100%; }
.bio .arch::before { border-color: var(--or); opacity: 0.75; }
.bio h2 { color: var(--marine); }
.bio-copy > .reveal + .reveal { margin-block-start: var(--s-3); }
.bio-copy h2 + p { margin-block-start: var(--s-3); }
.bio-langs, .bio-follow { margin-block-start: var(--s-4); }
.bio-langs h3, .bio-follow h3 { color: var(--marine); font-size: 1.0625rem; }
.chips {
  list-style: none;
  margin-block-start: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.chips li {
  border: 1px solid rgba(27, 42, 74, 0.3);
  border-radius: 999px;
  padding: 0.375rem 1rem;
  font-size: 1rem;
  color: var(--marine);
}
.chips li[lang="ar"] { font-family: "Noto Naskh Arabic", var(--f-texte); }
.socials {
  list-style: none;
  margin-block-start: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--marine);
  font-weight: 500;
  text-decoration-color: var(--filet-or);
}
.socials a:hover { color: var(--or-sombre); }
.socials svg { color: var(--or-sombre); }
@media (min-width: 900px) {
  .bio-grid { grid-template-columns: 21.25rem 1fr; gap: var(--s-12); }
  .bio-figure { margin-inline: 0.875rem 0; }
  html[dir="rtl"] .bio-figure { margin-inline: 0 0.875rem; }
}

/* ---------- Rejoindre ---------- */
.join { background: var(--blanc); }
.join h2 { color: var(--marine); }
.join-steps {
  list-style: none;
  counter-reset: none;
  margin-block-start: var(--s-6);
  display: grid;
  gap: var(--s-4);
}
.join-steps li { border-block-start: 1px solid var(--filet-clair); padding-block-start: var(--s-3); }
.join-num {
  display: block;
  font-family: "Playfair Display", georgia, serif;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--or);
}
.join-steps h3 { margin-block-start: 0.75rem; color: var(--marine); }
.join-steps p { margin-block-start: 0.5rem; color: var(--encre); }
@media (min-width: 820px) {
  .join-steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}

.guarantee {
  position: relative;
  overflow: hidden;
  margin-block-start: var(--s-8);
  max-width: 46rem;
  margin-inline: auto;
  background: var(--marine);
  color: var(--ciel);
  border-radius: 10px;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --focus: var(--or-clair);
}
.guarantee .wave {
  position: absolute;
  inset-inline: -2%;
  inset-block-end: 0.625rem;
  width: 104%;
  height: 4.5rem;
  color: var(--or);
  opacity: 0.3;
}
.guarantee h3 {
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  color: var(--or-clair);
}
.guarantee p { margin-block-start: var(--s-2); position: relative; }

/* ---------- FAQ ---------- */
.faq { background: var(--brume); }
.faq h2 { color: var(--marine); }
.faq-list { margin-block-start: var(--s-6); display: grid; gap: 0.75rem; }
.faq-list details {
  background: var(--blanc);
  border: 1px solid var(--filet-clair);
  border-radius: 8px;
}
.faq-list summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 1.125rem 1.375rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--marine);
  border-radius: 8px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .plus { flex: none; color: var(--or-sombre); transition: rotate 0.3s var(--ease); }
.faq-list details[open] .plus { rotate: 45deg; }
.faq-a { padding: 0 1.375rem 1.25rem; }
.faq-a p { max-width: var(--mesure); }
/* ouverture fluide (navigateurs qui savent interpoler la hauteur) */
@supports (interpolate-size: allow-keywords) {
  .faq-list details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility 0.35s allow-discrete, block-size 0.35s var(--ease);
  }
  .faq-list details[open]::details-content { block-size: auto; }
  :root { interpolate-size: allow-keywords; }
}

/* ---------- Appel final ---------- */
.close { text-align: center; }
.close h2 { max-width: 22em; margin-inline: auto; }
.close-cta { margin-block-start: var(--s-4); max-width: none; }

/* ---------- Pied de page : plan du site ---------- */
.site-foot {
  --focus: var(--or-clair);
  background: var(--marine-fonce);
  color: var(--ciel-2);
  padding-block: var(--s-8) max(var(--s-4), env(safe-area-inset-bottom));
  font-size: 1rem;
}
.foot-grid { display: grid; gap: var(--s-6) var(--s-4); }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.foot-brand img { width: 4rem; height: 4rem; }
.foot-copy { color: var(--ciel-2); }
.foot-title {
  font-family: var(--f-texte);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--or-clair);
  margin-block-end: 0.5rem;
}
.foot-col ul { list-style: none; }
.site-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--ciel);
  text-decoration-color: rgba(219, 226, 238, 0.4);
}
.site-foot a:hover { color: var(--or-clair); }
.foot-phone { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; }
.foot-wa svg { color: var(--or-clair); flex: none; }
.foot-bottom {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-2);
  border-block-start: 1px solid rgba(219, 226, 238, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s-4);
}
.foot-bottom a { color: var(--ciel-2); }
.site-foot > .foot-bottom { margin-block-start: 0; padding-block-start: 0; border: 0; }
.back-top svg { flex: none; }
@media (min-width: 600px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .foot-grid { grid-template-columns: 1.1fr 1fr 1fr 1.15fr; }
  .foot-brand { grid-column: auto; }
  .site-foot a { min-height: 2.375rem; }
}

/* ---------- Barre d'action mobile ---------- */
.mbar {
  --focus: var(--or-clair);
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding:
    0.75rem max(1rem, env(safe-area-inset-right))
    calc(0.75rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: var(--marine-fonce);
  box-shadow: 0 -1px 0 rgba(201, 167, 77, 0.35);
  translate: 0 110%;
  visibility: hidden;
  transition: translate 0.35s var(--ease), visibility 0s linear 0.35s;
}
.mbar.show { translate: 0 0; visibility: visible; transition: translate 0.35s var(--ease), visibility 0s; }
.mbar .btn { flex: 1; min-height: 3rem; padding-block: 0.625rem; }
.mbar-wa {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--filet-or);
  color: var(--or-clair);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.mbar-wa:hover { border-color: var(--or-clair); }
@media (min-width: 1200px) {
  .mbar { display: none !important; }
}

/* ---------- Page 404 ---------- */
.site-head-simple { position: relative; top: auto; }
.nf {
  --focus: var(--or-clair);
  background: var(--marine);
  color: var(--ciel);
  padding-block: var(--s-8) var(--section-y);
  min-height: 70svh;
}
.nf-code {
  font-family: "Playfair Display", georgia, serif;
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  line-height: 1;
  color: var(--or);
}
.nf h1 { margin-block-start: var(--s-3); color: var(--blanc); max-width: 18em; }
.nf-text { margin-block-start: var(--s-3); }
.nf-actions { margin-block-start: var(--s-4); }
.nf-langs { list-style: none; margin-block-start: var(--s-3); display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.nf-langs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--or-clair);
  text-decoration-color: var(--filet-or);
}
.nf-langs a[lang="ar"] { font-family: "Noto Naskh Arabic", var(--f-texte); font-size: 1.125rem; }

/* ---------- Mentions légales ---------- */
.legal-main { padding-block: var(--s-8); }
.legal-main h1 { color: var(--marine); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
.legal-main h2 { color: var(--marine); font-size: 1.5rem; margin-block-start: var(--s-6); }
.legal-main p { margin-block-start: var(--s-2); }
.legal-main a { color: var(--marine); }

/* ============================================================
   MOTION — uniquement avec JavaScript et sans reduced-motion.
   Sans JS, tout le contenu est visible immédiatement.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  html.js .reveal {
    opacity: 0;
    translate: 0 1.25rem;
    transition:
      opacity var(--t-reveal) var(--ease),
      translate var(--t-reveal) var(--ease),
      rotate var(--t-reveal) var(--ease);
    transition-delay: var(--d, 0s);
  }
  html.js .reveal.in { opacity: 1; translate: 0 0; }

  /* attestation : se pose de -3° à -1,2° */
  html.js .doc.reveal { rotate: -3deg; }
  html.js .doc.reveal.in { rotate: -1.2deg; }
  html:not(.js) .doc, html.js .doc.in { rotate: -1.2deg; }

  /* cascade du hero au chargement */
  html.js .cascade { opacity: 0; }
  html.js.loaded .cascade {
    animation: rise 0.8s var(--ease) forwards;
  }
  html.js.loaded .c1 { animation-delay: 0.05s; }
  html.js.loaded .c2 { animation-delay: 0.17s; }
  html.js.loaded .c3 { animation-delay: 0.29s; }
  html.js.loaded .c4 { animation-delay: 0.41s; }

  /* portrait : masque de bas en haut, puis filet de l'arche */
  html.js .hero .arch img { clip-path: inset(100% 0 0 0); }
  html.js.loaded .hero .arch img {
    animation: unveil 0.9s var(--ease) 0.35s forwards;
  }
  html.js .hero .arch::before { opacity: 0; scale: 0.985; }
  html.js.loaded .hero .arch::before {
    animation: filet 0.8s var(--ease) 1.1s forwards;
  }

  /* filet vertical de la méthode : se trace au défilement */
  html.js .steps-line { scale: 1 0; transition: scale 1.6s var(--ease) 0.2s; }
  html.js .steps.in .steps-line { scale: 1 1; }

  @keyframes rise {
    from { opacity: 0; translate: 0 1.25rem; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes unveil {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  @keyframes filet {
    from { opacity: 0; scale: 0.985; }
    to { opacity: 1; scale: 1; }
  }
}

/* l'attestation garde sa pose finale même sans motion */
@media (prefers-reduced-motion: reduce) {
  .doc { rotate: -1.2deg; }
  html { scroll-behavior: auto; }
  .mbar, .mbar.show, .menu-panel, .head-row, .brand img, .site-head, .menu-icon i { transition: none; }
}