/* DASIGS : feuille de styles du site.
   Ordre : polices, variables, base, en-tête et menu, ouverture, sections de l'accueil
   (manifeste, groupe, repères, métiers, président, directeur, audiences, approche, horizon,
   contact), pages des mots du président et du directeur, pied de page, animations.
   Tout le contenu reste lisible sans JavaScript : les états de départ des animations ne
   sont posés que sous html.js, et jamais sous html.calme (« réduire les animations »).
   Propriétés logiques (inline/block) partout, pour préparer l'arabe. */

/* ---------- Polices (hébergées sur le site, licence OFL) ---------- */
/* Newsreader (Production Type, OFL) : taille optique figée à 60 pour alléger les
   fichiers (outils/LISEZMOI.md) ; graisses de 300 à 600. Cormorant Garamond, prévue au
   rapport, a été écartée : ses accents circonflexes flottent très haut en grand corps. */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italique.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
/* sous-ensemble : seulement les lettres du nom arabe de DASIGS et de celui de son président */
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/assets/fonts/noto-naskh-arabe-noms.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --nuit: #111a2b;
  --nuit-2: #17213a;
  --marine: #1c2539;
  --bleu: #005699;
  --bleu-clair: #9cc3e6;
  --or: #b1790c;
  --or-clair: #dcab52;
  --or-fonce: #855905;
  --sable: #f4efe6;
  --pierre: #ebe3d5;
  --dore: #e4bd70;
  --blanc: #fbf8f2;
  --encre: #1c2539;
  --gris: #586274;
  --brume: #b8c1cf;
  --ligne-claire: rgba(28, 37, 57, 0.14);
  --ligne-sombre: rgba(232, 236, 244, 0.16);

  --serif: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --arabe: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;

  --marge: clamp(16px, 5vw, 72px);
  --largeur: 1360px;
  --entete: 76px;
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --courbe-volet: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  /* fond animé de la page (« de l'aube à l'or »), piloté par le script */
  --fond: var(--nuit);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--encre);
  font: 400 1.0625rem/1.65 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* coupe horizontale sur main et non sur body (celle de body est reportée sur la fenêtre) */
main { display: block; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
::selection { background: var(--or-clair); color: var(--nuit); }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100;
  padding: 10px 16px; background: var(--sable); color: var(--encre); border-radius: 4px;
  transform: translateY(-160%); transition: transform 0.2s;
}
.evitement:focus { transform: none; }

.surtitre {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 28px;
  font: 500 0.75rem/1.4 var(--sans);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--or-fonce);
}
.surtitre .num { font-variant-numeric: tabular-nums; }
.surtitre .num::after {
  content: ""; display: inline-block; vertical-align: middle;
  inline-size: 36px; block-size: 1px; margin-inline-start: 14px;
  background: currentColor; opacity: 0.6;
}
.sombre .surtitre { color: var(--or-clair); }
.titre {
  font: 400 clamp(2.15rem, 5.3vw, 4.6rem)/1.02 var(--serif);
  letter-spacing: -0.012em;
  text-wrap-style: balance;
}
.titre em, .manifeste__titre em, .citation em { font-style: italic; }
.chapeau { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; max-width: 38em; }
.legende {
  font: 400 0.6875rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.72; margin: 0;
}
.arabe { font-family: var(--arabe); font-weight: 500; letter-spacing: 0; text-transform: none; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; padding-block: 10px;
  border-block-end: 1px solid currentColor;
}
.lien-fleche::after {
  content: ""; inline-size: 26px; block-size: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M0 4.5h24M20 1l4 3.5L20 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 9'%3E%3Cpath d='M0 4.5h24M20 1l4 3.5L20 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.5s var(--courbe);
}
.lien-fleche:hover::after { transform: translateX(6px); }

/* Les sections ont leur propre fond ; avec le script, le fond de la page prend le relais
   et passe d'une teinte à l'autre au défilement. */
.sombre { color: var(--blanc); }
.clair { color: var(--encre); }
[data-fond="nuit"] { background: var(--nuit); }
[data-fond="sable"] { background: var(--sable); }
[data-fond="pierre"] { background: var(--pierre); }
[data-fond="or"] { background: var(--dore); }
html.atmosphere body { background: var(--fond); }
html.atmosphere [data-fond] { background: transparent; }

/* ---------- Éventail (logo redessiné, provisoire) ---------- */
.eventail { color: var(--or-clair); overflow: visible; }
.eventail__lame, .eventail__socle { fill: var(--lame, #eef2f7); }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  block-size: var(--entete);
  padding-inline: var(--marge);
  color: var(--blanc);
  --lame: #eef2f7;
  transition: background-color 0.5s, color 0.5s, box-shadow 0.5s, transform 0.6s var(--courbe);
}
.entete::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(10, 15, 27, 0.55), rgba(10, 15, 27, 0));
  transition: opacity 0.5s;
}
.entete.est-defile { background: rgba(244, 239, 230, 0.9); color: var(--encre); --lame: var(--bleu); box-shadow: 0 1px 0 var(--ligne-claire); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .entete.est-defile { background: rgba(244, 239, 230, 0.78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.entete.est-defile::before { opacity: 0; }
.entete.est-cache { transform: translateY(-100%); }
.page-lettre .entete:not(.est-defile) { color: var(--encre); --lame: var(--bleu); }
.page-lettre .entete:not(.est-defile)::before { opacity: 0; }

.entete__marque { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-inline-end: auto; }
.entete__marque .eventail { inline-size: 34px; block-size: 43px; }
.entete__nom { display: grid; line-height: 1; }
.entete__nom b { font: 500 1.375rem/1 var(--serif); letter-spacing: 0.16em; }
.entete__nom small { font: 500 0.5625rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; margin-block-start: 5px; }

.entete__nav ul { display: flex; gap: clamp(18px, 2.2vw, 34px); list-style: none; margin: 0; padding: 0; }
.entete__nav a {
  position: relative; text-decoration: none;
  font: 500 0.78rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  padding-block: 8px; white-space: nowrap;
}
.entete__nav a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--courbe);
}
.entete__nav a:hover::after, .entete__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.entete__langue {
  display: inline-grid; place-items: center; inline-size: 42px; block-size: 42px;
  border: 1px solid currentColor; border-radius: 50%;
  font: 500 0.75rem/1 var(--sans); letter-spacing: 0.08em; text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.entete__langue:hover { background: currentColor; }
.entete__langue:hover span { color: var(--nuit); }
.entete.est-defile .entete__langue:hover span, .page-lettre .entete__langue:hover span { color: var(--sable); }
.entete__menu {
  display: none; align-items: center; gap: 10px;
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font: 500 0.78rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}
.entete__menu i { position: relative; inline-size: 22px; block-size: 8px; }
.entete__menu i::before, .entete__menu i::after {
  content: ""; position: absolute; inset-inline: 0; block-size: 1.5px; background: currentColor;
  transition: transform 0.4s var(--courbe), inset-block-start 0.4s var(--courbe);
}
.entete__menu i::before { inset-block-start: 0; }
.entete__menu i::after { inset-block-start: 6.5px; }
.menu-ouvert .entete__menu i::before { inset-block-start: 3.25px; transform: rotate(45deg); }
.menu-ouvert .entete__menu i::after { inset-block-start: 3.25px; transform: rotate(-45deg); }

/* six liens : la barre complète demande 1 272 px en français et 1 291 px en anglais à
   1280 px d'écran ; en dessous de 1360 px, le menu prend le relais */
@media (max-width: 1359px) {
  .entete__nav { display: none; }
  .entete__menu { display: inline-flex; }
  .entete { gap: 18px; }
}

/* Menu plein écran (téléphone et tablette) */
.menu {
  position: fixed; inset: 0; z-index: 35;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--entete) + 24px) var(--marge) 40px;
  background: var(--nuit); color: var(--blanc);
  overflow: hidden;
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0 0 auto; padding: 0; }
.menu li { border-block-end: 1px solid var(--ligne-sombre); overflow: hidden; }
.menu nav a {
  display: flex; align-items: baseline; gap: 14px;
  padding-block: 14px; text-decoration: none;
  font: 400 clamp(1.9rem, 8vw, 3rem)/1.05 var(--serif);
}
.menu nav a span { font: 500 0.75rem/1 var(--sans); letter-spacing: 0.14em; color: var(--or-clair); }
.menu__bas { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-block-start: 32px; font-size: 0.875rem; color: var(--brume); }
.menu__bas p { margin: 0; }
.menu-ouvert .entete { color: var(--blanc); --lame: #eef2f7; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-ouvert .entete::before { opacity: 0; }

/* ---------- Ouverture : l'éventail s'ouvre (première visite de la session) ---------- */
.ouverture { display: none; }
.js.intro .ouverture {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; align-content: center; gap: 26px;
  background: var(--nuit); color: var(--blanc);
  overflow: hidden;
  /* filet de sécurité : si le script ne démarre pas, le voile s'efface tout seul */
  animation: ouverture-secours 0.6s ease 2.4s forwards;
}
.ouverture .eventail { inline-size: clamp(110px, 14vw, 160px); block-size: auto; --lame: #eef2f7; }
/* le script révèle l'éventail une fois replié : pas d'éventail ouvert qui clignote avant */
.js.intro .ouverture .eventail, .js.intro .ouverture__nom, .js.intro .ouverture__sous { opacity: 0; }
.ouverture__nom { font: 500 clamp(2rem, 4vw, 2.75rem)/1 var(--serif); letter-spacing: 0.32em; margin: 0; padding-inline-start: 0.32em; }
.ouverture__sous { font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--brume); margin: -12px 0 0; }
@keyframes ouverture-secours { to { opacity: 0; visibility: hidden; } }

/* ---------- 1. Manifeste ---------- */
.manifeste {
  position: relative; min-block-size: 100vh; min-block-size: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  color: var(--blanc); background: var(--nuit);
  isolation: isolate; overflow: hidden;
}
.manifeste__media, .manifeste__voile { position: absolute; inset: 0; z-index: -1; }
.manifeste__media img, .manifeste__media video {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover;
}
.manifeste__media video { opacity: 0; transition: opacity 1.2s ease; }
.manifeste__media video.est-pret { opacity: 1; }
.manifeste__voile {
  background:
    linear-gradient(to top, rgba(10, 15, 27, 0.82) 0%, rgba(10, 15, 27, 0.35) 42%, rgba(10, 15, 27, 0.05) 70%, rgba(10, 15, 27, 0.35) 100%),
    linear-gradient(to right, rgba(10, 15, 27, 0.45), rgba(10, 15, 27, 0) 60%);
}
.manifeste__contenu {
  align-self: end;
  padding: calc(var(--entete) + 40px) var(--marge) clamp(36px, 6vh, 64px);
  max-inline-size: calc(var(--largeur) + 2 * var(--marge));
  inline-size: 100%; margin-inline: auto;
}
.manifeste__surtitre {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  font: 500 0.75rem/1.5 var(--sans); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--or-clair); margin: 0 0 22px;
}
.manifeste__surtitre .arabe { font-size: 1.25rem; line-height: 1; color: var(--blanc); opacity: 0.85; }
.manifeste__titre {
  font: 400 clamp(2.5rem, 7.2vw, 7.4rem)/1 var(--serif);
  letter-spacing: -0.025em;
}
.manifeste__titre em { color: var(--or-clair); }
.ligne { display: block; overflow: hidden; padding-block-end: 0.06em; margin-block-end: -0.06em; }
.ligne > span { display: block; }
.manifeste__soustitre { margin: 26px 0 0; max-inline-size: 30em; font-size: clamp(1rem, 1.3vw, 1.1875rem); color: rgba(251, 248, 242, 0.86); }
.manifeste__bas {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--marge) 22px;
  border-block-start: 1px solid rgba(251, 248, 242, 0.18);
}
.defiler { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.defiler i { position: relative; inline-size: 1px; block-size: 34px; background: rgba(251, 248, 242, 0.3); overflow: hidden; }
.defiler i::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 40%; background: var(--or-clair); animation: defiler 2.2s var(--courbe) infinite; }
@keyframes defiler { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
.manifeste__bas .legende { margin-inline-start: auto; }
.pause {
  display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px;
  border: 1px solid rgba(251, 248, 242, 0.5); border-radius: 50%; background: none; cursor: pointer;
}
.pause svg { inline-size: 12px; block-size: 12px; fill: currentColor; }
.pause .icone-lecture { display: none; }
.pause[aria-pressed="true"] .icone-lecture { display: block; }
.pause[aria-pressed="true"] .icone-pause { display: none; }
.pause[hidden] { display: none; }

/* entrée du manifeste en CSS : rien n'attend le script, le titre s'affiche tout de suite */
.js:not(.calme) .manifeste__titre .ligne > span { animation: monter 1.15s var(--courbe) both; }
.js:not(.calme) .manifeste__titre .ligne:nth-child(2) > span { animation-delay: 0.12s; }
.js:not(.calme) .manifeste__surtitre, .js:not(.calme) .manifeste__soustitre, .js:not(.calme) .manifeste__bas { animation: apparaitre 1.2s ease both 0.45s; }
.js.intro:not(.calme) .manifeste__titre .ligne > span { animation-delay: 1.15s; }
.js.intro:not(.calme) .manifeste__titre .ligne:nth-child(2) > span { animation-delay: 1.27s; }
.js.intro:not(.calme) .manifeste__surtitre, .js.intro:not(.calme) .manifeste__soustitre, .js.intro:not(.calme) .manifeste__bas { animation-delay: 1.6s; }
@keyframes monter { from { transform: translateY(105%); } to { transform: none; } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 2. Le groupe et la carte Djeddah–Dakar ---------- */
.groupe { position: relative; }
.groupe__scene {
  display: grid; gap: 40px; align-items: center;
  padding-block: clamp(96px, 14vh, 150px) clamp(72px, 10vh, 110px);
}
.groupe__texte p { color: rgba(251, 248, 242, 0.82); max-inline-size: 34em; }
.groupe__texte .titre { color: var(--blanc); margin-block-end: 28px; }
.carte { position: relative; }
.carte__svg { inline-size: 100%; block-size: auto; overflow: visible; }
.carte__terre { fill: none; stroke: rgba(156, 195, 230, 0.5); stroke-width: 4; stroke-linecap: round; }
.carte__pays { fill: none; stroke-width: 4.6; stroke-linecap: round; }
.carte__pays--sen, .carte__pays--sau { stroke: var(--or-clair); }
.carte__route-fond { fill: none; stroke: rgba(220, 171, 82, 0.18); stroke-width: 1.2; stroke-dasharray: 2 6; }
.carte__route { fill: none; stroke: var(--or-clair); stroke-width: 2; stroke-linecap: round; }
.carte__point { fill: var(--or-clair); }
.carte__onde { fill: none; stroke: var(--or-clair); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: onde 2.6s ease-out infinite; }
.carte__ville text { fill: var(--blanc); font: 500 15px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.carte__mobile { fill: #fff; filter: drop-shadow(0 0 6px rgba(220, 171, 82, 0.9)); }
.js:not(.calme) .carte__mobile { opacity: 0; }
@keyframes onde { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.4); opacity: 0; } }
.carte__chiffres {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px clamp(22px, 4vw, 56px);
  margin: 26px 0 0; padding: 22px 0 0; border-block-start: 1px solid var(--ligne-sombre);
}
.carte__chiffres div { display: grid; gap: 4px; }
.carte__chiffres dt { font: 500 0.6875rem/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brume); }
.carte__chiffres dd { margin: 0; font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--serif); color: var(--blanc); }
@media (min-width: 960px) {
  .groupe__scene { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 90px); }
  /* sur grand écran, la scène reste en place pendant que la ligne se trace */
  .js:not(.calme) .groupe { block-size: 210vh; }
  .js:not(.calme) .groupe__scene { position: sticky; inset-block-start: 0; min-block-size: 100vh; padding-block: calc(var(--entete) + 40px) 48px; }
}

/* ---------- 3. Repères (frise horizontale sur grand écran) ---------- */
.reperes { position: relative; color: var(--blanc); }
.reperes__scene { padding-block: clamp(72px, 10vh, 120px); }
.reperes__entete { display: grid; gap: 18px; margin-block-end: clamp(40px, 6vh, 64px); }
.reperes__entete .titre { color: var(--blanc); max-inline-size: 22ch; }
.reperes__aide { color: var(--brume); font-size: 0.9375rem; margin: 0; }
.frise { list-style: none; margin-block: 0; padding-block: 0; display: grid; gap: 0; }
.frise__etape { position: relative; padding: 26px 0 30px 34px; border-inline-start: 1px solid var(--ligne-sombre); }
.frise__etape::before {
  content: ""; position: absolute; inset-inline-start: -5px; inset-block-start: 36px;
  inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--nuit); border: 1px solid var(--or-clair);
}
.frise__etape--dasigs::before { background: var(--or-clair); box-shadow: 0 0 0 6px rgba(220, 171, 82, 0.18); }
.frise__annee { display: block; font: 400 clamp(3rem, 6vw, 5.5rem)/1 var(--serif); color: var(--or-clair); font-variant-numeric: lining-nums; letter-spacing: -0.01em; }
.frise__etape h3 { font: 400 1.375rem/1.25 var(--serif); margin: 12px 0 8px; }
.frise__etape p { margin: 0; color: rgba(251, 248, 242, 0.78); font-size: 0.96875rem; max-inline-size: 30em; }
@media (min-width: 960px) {
  .js:not(.calme) .reperes__scene { position: sticky; inset-block-start: 0; block-size: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: calc(var(--entete) + 24px) 40px; }
  .js:not(.calme) .frise {
    display: flex; gap: 0; inline-size: max-content;
    padding-inline: var(--marge) 20vw;
    will-change: transform;
  }
  .js:not(.calme) .frise__etape {
    inline-size: clamp(300px, 28vw, 420px); flex: none;
    padding: 34px 40px 0 0; border-inline-start: 0; border-block-start: 1px solid var(--ligne-sombre);
  }
  .js:not(.calme) .frise__etape::before { inset-inline-start: 0; inset-block-start: -5px; }
  .js:not(.calme) .frise__etape--dasigs { inline-size: clamp(340px, 32vw, 480px); }
  .js:not(.calme) .frise__etape--dasigs .frise__annee { font-size: clamp(5rem, 9vw, 8.5rem); }
  .reperes__entete { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
@media (min-width: 960px) { .js.calme .frise, html:not(.js) .frise { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } }

/* ---------- 4. Les deux portes : BTP et hôtellerie ---------- */
.metiers { color: var(--blanc); padding-block: clamp(80px, 12vh, 130px) 0; }
.metiers__entete { display: grid; gap: 0; margin-block-end: clamp(36px, 6vh, 60px); }
.metiers__entete .titre { color: var(--blanc); max-inline-size: 18ch; }
.portes { display: grid; gap: 2px; }
.porte {
  position: relative; isolation: isolate; overflow: hidden;
  min-block-size: 132vw; display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--blanc);
}
.porte__media { position: absolute; inset: 0; z-index: -1; background: var(--nuit-2); }
.porte__media img, .porte__media video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.porte__media img { transform: scale(1.04); transition: transform 1.6s var(--courbe), filter 1s; }
.porte__media video { opacity: 0; transition: opacity 0.8s; }
.porte.joue .porte__media video { opacity: 1; }
.porte__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 15, 27, 0.92) 0%, rgba(10, 15, 27, 0.6) 45%, rgba(10, 15, 27, 0.15) 75%, rgba(10, 15, 27, 0.3) 100%);
}
.porte__contenu { padding: 30px var(--marge) 34px; }
.porte__num { display: block; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.2em; color: var(--or-clair); margin-block-end: 18px; }
.porte h3 { font: 400 clamp(2rem, 4.2vw, 3.6rem)/1.02 var(--serif); max-inline-size: 13ch; }
.porte__accroche { margin: 16px 0 0; color: rgba(251, 248, 242, 0.85); max-inline-size: 30em; }
.porte__liste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; border-block-start: 1px solid var(--ligne-sombre); }
.porte__liste li { display: grid; gap: 2px; padding-block: 12px; border-block-end: 1px solid var(--ligne-sombre); }
.porte__liste b { font: 500 0.8125rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.porte__liste span { font-size: 0.9375rem; color: rgba(251, 248, 242, 0.74); }
.porte__note { margin: 18px 0 0; font-size: 0.875rem; color: var(--or-clair); }
.porte .legende { position: absolute; inset-block-start: 20px; inset-inline-end: var(--marge); }
@media (min-width: 720px) { .porte { min-block-size: 92vw; } }
@media (min-width: 1024px) {
  .portes { display: flex; block-size: min(92vh, 900px); min-block-size: 640px; gap: 2px; }
  .porte { flex: 1 1 0; min-block-size: 0; transition: flex-grow 1.1s var(--courbe); }
  .porte__contenu { padding: 40px clamp(28px, 3.4vw, 56px) 44px; }
  .porte__liste { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .porte .legende { inset-inline-end: clamp(28px, 3.4vw, 56px); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .portes:hover .porte { flex-grow: 0.78; }
  .portes .porte:hover, .portes .porte:focus-within { flex-grow: 1.3; }
  .porte:hover .porte__media img { transform: scale(1); }
  .porte__liste span { transition: color 0.6s; }
  .porte:not(:hover):not(:focus-within) .porte__liste span { color: rgba(251, 248, 242, 0.55); }
}

/* ---------- 5. Le président ---------- */
/* fond propre (pas de data-fond) : le passage de la nuit au sable se fait sous le directeur,
   jamais derrière ce texte clair (il y deviendrait illisible) */
.president { position: relative; color: var(--blanc); background: var(--nuit); padding-block: clamp(96px, 14vh, 160px); overflow: hidden; }
/* « Dar Al Salam » en très grand, en filigrane ; il glisse au défilement */
.president__filigrane {
  position: absolute; inset-block-start: clamp(24px, 5vh, 56px); left: 50%;
  margin: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: clamp(7rem, 22vw, 21rem); line-height: 1; color: var(--or-clair); opacity: 0.06;
}
.president__grille { position: relative; display: grid; gap: clamp(56px, 7vw, 110px); align-items: center; }
.president .citation p { font-size: clamp(1.75rem, 2.8vw, 2.7rem); line-height: 1.16; }
.president .citation em { color: var(--or-clair); }
.president .signature { margin-block-end: 30px; }
.president .signature::before { background: var(--or-clair); }
.president .signature__titre { color: var(--brume); }
.president__photo { margin: 0; }
.president__monture { position: relative; }
/* filet doré décalé vers le haut, en miroir de celui du directeur */
.president__monture::before { content: ""; position: absolute; inset: -14px -14px 14px 14px; border: 1px solid var(--or-clair); pointer-events: none; }
.js:not(.calme) .president__monture::before { opacity: 0; transition: opacity 1.2s ease 1s; }
.js:not(.calme) .president__monture.est-visible::before { opacity: 1; }
.president__cadre { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--nuit-2); }
.president__cadre img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.president figcaption {
  display: flex; align-items: baseline; gap: 12px; margin-block-start: 16px;
  font: 400 0.875rem/1.5 var(--sans); color: var(--brume);
}
.president figcaption::before { content: ""; flex: none; inline-size: 28px; block-size: 1px; background: var(--or-clair); transform: translateY(-0.3em); }
@media (min-width: 960px) {
  .president__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .president__monture::before { inset: -22px -22px 22px 22px; }
}

/* ---------- 6. Le directeur ---------- */
.directeur { color: var(--encre); padding-block: clamp(96px, 14vh, 160px); }
.directeur__grille { display: grid; gap: clamp(36px, 5vw, 90px); align-items: center; }
.portrait { margin: 0; position: relative; inline-size: 100%; max-inline-size: 440px; }
/* filet doré décalé derrière la photo ; il paraît une fois le volet levé */
.portrait::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--or); pointer-events: none; }
.js:not(.calme) .portrait::before { opacity: 0; transition: opacity 1.2s ease 0.9s; }
.js:not(.calme) .portrait.est-visible::before { opacity: 1; }
.portrait__cadre { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--pierre); }
.portrait__cadre img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.citation { margin: 0; }
.citation p {
  margin: 0;
  font: 400 clamp(1.9rem, 3.9vw, 3.45rem)/1.12 var(--serif);
  letter-spacing: -0.01em; text-wrap-style: pretty;
}
.signature { display: grid; gap: 4px; margin: 34px 0 34px; padding-block-start: 22px; position: relative; }
.signature::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 64px; block-size: 1px; background: var(--or); transform-origin: left; }
.js:not(.calme) .signature::before { transform: scaleX(0); transition: transform 1.4s var(--courbe) 0.2s; }
.js:not(.calme) .signature.est-visible::before { transform: scaleX(1); }
.signature__nom { font: italic 400 1.625rem/1.2 var(--serif); }
.signature__titre { font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
/* nom arabe sous la signature latine */
.signature__arabe { justify-self: start; font-size: 1.375rem; line-height: 1.5; color: var(--or-fonce); margin-block: -2px 4px; }
.sombre .signature__arabe { color: var(--or-clair); }
/* portrait au carré, avec sa légende sous le filet doré (en-tête du mot du président) */
.portrait--carre .portrait__cadre { aspect-ratio: 1 / 1; }
.portrait--legende { margin-block-end: 52px; }
.portrait--legende figcaption {
  position: absolute; inset-block-start: calc(100% + 30px); inset-inline: 0;
  display: flex; align-items: baseline; gap: 12px;
  font: 400 0.875rem/1.5 var(--sans); color: var(--gris);
}
.portrait--legende figcaption::before { content: ""; flex: none; inline-size: 28px; block-size: 1px; background: var(--or); transform: translateY(-0.3em); }
@media (min-width: 900px) {
  .directeur__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .portrait { max-inline-size: 500px; }
  .portrait::before { inset: 22px -22px -22px 22px; }
  .portrait--legende figcaption { inset-block-start: calc(100% + 38px); }
}

/* ---------- 7. Audiences : photos réelles, légendes factuelles ---------- */
.audiences { color: var(--encre); padding-block: clamp(24px, 4vh, 48px) clamp(96px, 14vh, 160px); }
.audiences__entete .titre { max-inline-size: 18ch; margin-block-end: 24px; }
.audiences__une { margin-block: clamp(48px, 8vh, 80px) 0; }
.audiences__cadre { position: relative; overflow: hidden; background: var(--pierre); }
.audiences__cadre img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.audiences__une .audiences__cadre { aspect-ratio: 4 / 3; }
.audiences__une img { object-position: 50% 25%; }
.audiences__duo { display: grid; gap: clamp(40px, 5vw, 64px); align-items: start; margin-block-start: clamp(48px, 8vh, 96px); }
.audiences__photo { margin: 0; }
.audiences__photo .audiences__cadre, .lettre__photo .audiences__cadre { aspect-ratio: 3 / 2; }
.audiences figcaption, .lettre__photo figcaption {
  display: flex; align-items: baseline; gap: 12px; margin-block-start: 14px;
  font: 400 0.875rem/1.5 var(--sans); color: var(--gris);
}
.audiences figcaption::before, .lettre__photo figcaption::before { content: ""; flex: none; inline-size: 28px; block-size: 1px; background: var(--or); transform: translateY(-0.3em); }
/* état de départ de l'ouverture de la grande photo (le script l'anime) */
.js:not(.calme) .audiences__une .audiences__cadre { clip-path: inset(10% 14% 10% 14%); }
.js:not(.calme) .audiences__une img { transform: scale(1.22); }
@media (min-width: 900px) {
  .audiences__une .audiences__cadre { aspect-ratio: 16 / 9; }
  .audiences__duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .audiences__photo--decale { margin-block-start: clamp(80px, 14vh, 160px); }
}

/* ---------- 8. Notre approche ---------- */
.approche { position: relative; color: var(--encre); padding-block: clamp(96px, 14vh, 160px); overflow: hidden; }
.approche__plan { position: absolute; inset-block-start: 24px; inset-inline-end: -26vw; inline-size: min(1100px, 110vw); opacity: 0.4; pointer-events: none; }
.plan { inline-size: 100%; block-size: auto; overflow: visible; }
.plan .trait { fill: none; stroke: var(--bleu); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plan .trait--axe { stroke-width: 0.9; opacity: 0.5; }
.plan .trait--fin { stroke-width: 1.1; }
.plan .trait--bulle { stroke-width: 1.1; }
.plan__poteaux rect { fill: var(--bleu); opacity: 0.8; }
.plan__textes text { fill: var(--bleu); font: 500 13px var(--sans); text-anchor: middle; letter-spacing: 0.06em; }
.approche > .conteneur { position: relative; }
.approche__entete { max-inline-size: 760px; margin-block-end: clamp(48px, 8vh, 80px); }
.approche__entete .titre { margin-block-end: 24px; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: etape; }
.etape { position: relative; padding: 26px 0 28px; border-block-start: 1px solid var(--ligne-claire); background: linear-gradient(to bottom, rgba(235, 227, 213, 0.9), rgba(235, 227, 213, 0.6)); }
.etape__num { display: block; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.2em; color: var(--or-fonce); margin-block-end: 18px; }
.etape h3 { font: 400 clamp(1.7rem, 2.6vw, 2.25rem)/1.1 var(--serif); margin-block-end: 10px; }
.etape p { margin: 0; color: var(--gris); max-inline-size: 26em; }
.modeles { margin-block-start: clamp(64px, 10vh, 110px); }
.modeles__titre { font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--or-fonce); margin-block-end: 22px; }
.modeles__liste { margin: 0; display: grid; gap: 2px; }
.modele { background: var(--blanc); padding: 28px 26px 30px; display: grid; gap: 12px; align-content: start; }
.modele dt { display: grid; gap: 6px; }
.modele dt b { font: 400 clamp(2.6rem, 4vw, 3.4rem)/1 var(--serif); color: var(--bleu); letter-spacing: 0.02em; }
.modele dt span { font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.modele dd { margin: 0; color: var(--gris); font-size: 0.96875rem; }
@media (min-width: 760px) {
  .etapes { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .modeles__liste { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) { .etapes { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 9. Au service de Sénégal 2050 ---------- */
.horizon { position: relative; color: var(--encre); padding-block: clamp(96px, 14vh, 160px); overflow: hidden; }
.horizon__image { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 50%; display: none; }
/* l'image se fond dans le fond de la page, quelle que soit sa teinte du moment */
.horizon__image img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.horizon__image .legende { position: absolute; inset-block-end: 18px; inset-inline-end: 20px; z-index: 1; color: var(--blanc); }
.horizon .conteneur { position: relative; }
.horizon__entete { max-inline-size: 660px; }
.horizon .surtitre { color: var(--marine); }
.horizon .titre { margin-block-end: 24px; }
.chiffres { list-style: none; margin: clamp(48px, 8vh, 80px) 0 0; padding: 0; display: grid; gap: 0; max-inline-size: 760px; }
.chiffre { padding-block: 22px 26px; border-block-start: 1px solid rgba(28, 37, 57, 0.22); display: grid; gap: 4px 24px; }
.chiffre__valeur { margin: 0; font: 400 clamp(3.2rem, 6vw, 5.2rem)/0.95 var(--serif); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.chiffre__valeur small { font-size: 0.5em; letter-spacing: 0; margin-inline-start: 0.08em; }
.chiffre__unite { margin: 0; font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.chiffre__texte { margin: 0; color: rgba(28, 37, 57, 0.8); max-inline-size: 30em; }
.sources { margin: 34px 0 0; font-size: 0.8125rem; color: rgba(28, 37, 57, 0.72); max-inline-size: 52em; }
@media (min-width: 760px) {
  .chiffre { grid-template-columns: 18.5rem minmax(0, 1fr); align-items: baseline; }
  .chiffre__valeur { grid-row: span 2; }
}
@media (min-width: 1100px) { .horizon__image { display: block; } }

/* ---------- 10. Contact ---------- */
.contact { color: var(--blanc); padding-block: clamp(96px, 14vh, 150px); }
.contact__grille { display: grid; gap: clamp(48px, 6vw, 110px); }
.contact .titre { color: var(--blanc); margin-block-end: 22px; }
.contact__invitation > p { color: rgba(251, 248, 242, 0.8); max-inline-size: 30em; }
.coordonnees { margin: 40px 0 0; display: grid; gap: 22px; }
.coordonnees div { display: grid; gap: 6px; padding-block-start: 16px; border-block-start: 1px solid var(--ligne-sombre); }
.coordonnees dt { font: 500 0.6875rem/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-clair); }
.coordonnees dd { margin: 0; font-size: 1.0625rem; }
.coordonnees a { text-decoration: none; border-block-end: 1px solid var(--ligne-sombre); }
.coordonnees a:hover { border-color: currentColor; }
.formulaire { display: grid; gap: 22px; align-content: start; }
.champ { display: grid; gap: 8px; }
.champ label, .champ legend { font: 500 0.6875rem/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brume); }
.champ input, .champ select, .champ textarea {
  inline-size: 100%; font: 400 1.0625rem/1.5 var(--sans); color: var(--blanc);
  background: transparent; border: 0; border-block-end: 1px solid rgba(251, 248, 242, 0.35);
  padding: 10px 0 12px; border-radius: 0; transition: border-color 0.3s;
}
.champ select { -webkit-appearance: none; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23dcab52' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center / 12px no-repeat; padding-inline-end: 28px; }
.champ select option { color: var(--encre); }
.champ textarea { resize: vertical; min-block-size: 120px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--or-clair); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { box-shadow: 0 2px 0 var(--or-clair); }
.champ--erreur input, .champ--erreur textarea { border-color: #f0a08c; }
.champ__erreur { font-size: 0.8125rem; color: #f3b3a3; margin: 0; }
.accord + .champ__erreur { margin-block-start: -12px; padding-inline-start: 30px; }
.deux-champs { display: grid; gap: 22px; }
.accord { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 0.875rem; color: rgba(251, 248, 242, 0.8); }
.accord input { inline-size: 18px; block-size: 18px; margin: 3px 0 0; accent-color: var(--or-clair); }
.formulaire__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.bouton {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 28px; border: 1px solid var(--or-clair); border-radius: 999px;
  background: var(--or-clair); color: var(--nuit);
  font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.bouton:hover { background: transparent; color: var(--or-clair); }
.bouton:disabled { opacity: 0.45; cursor: not-allowed; }
.formulaire__note { margin: 0; font-size: 0.8125rem; color: var(--brume); max-inline-size: 36em; }
.formulaire__retour { margin: 0; padding: 14px 16px; border: 1px solid var(--or-clair); color: var(--blanc); font-size: 0.9375rem; }
.formulaire__retour:empty { display: none; }
.formulaire__note a { color: var(--blanc); }
/* piège à robots : hors de l'écran (vers la gauche, ce qui n'élargit pas la page) */
.champ-piege { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
@media (min-width: 680px) { .deux-champs { grid-template-columns: 1fr 1fr; } }
/* version sans formulaire (interrupteur « courriel » de construire.py) : liens d'appel */
.contact__actions { list-style: none; margin: 0; padding: 0; align-self: end; border-block-end: 1px solid var(--ligne-sombre); }
.contact__actions a { display: grid; gap: 10px; padding-block: clamp(22px, 3.4vh, 34px); text-decoration: none; border-block-start: 1px solid var(--ligne-sombre); position: relative; }
.contact__actions a::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: -1px; inline-size: 100%; block-size: 1px; background: var(--or-clair); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--courbe); }
.contact__actions a:hover::after, .contact__actions a:focus-visible::after { transform: none; }
.contact__actions span { font: 500 0.6875rem/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-clair); }
.contact__actions b { font: 400 clamp(1.8rem, 4vw, 3.2rem)/1.08 var(--serif); letter-spacing: -0.01em; font-variant-numeric: lining-nums; white-space: nowrap; transition: color 0.4s; }
.contact__actions a:hover b { color: var(--or-clair); }
@media (min-width: 1000px) { .contact__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---------- Pages : mot du président, mot du directeur ---------- */
.page-lettre body { background: var(--sable); }
.lettre-entete { color: var(--encre); padding-block: calc(var(--entete) + clamp(40px, 7vh, 80px)) clamp(56px, 8vh, 90px); }
.lettre-entete__grille { display: grid; gap: clamp(36px, 5vw, 80px); align-items: end; }
.fil { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-fonce); }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.lettre-entete h1 { font: 400 clamp(2.8rem, 7vw, 6.4rem)/0.98 var(--serif); letter-spacing: -0.02em; }
.lettre-entete h1 em { font-style: italic; color: var(--or); }
.lettre-entete__chapeau { margin: 28px 0 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-inline-size: 32em; color: var(--gris); }
.lettre-entete .signature { margin-block-end: 0; }
.js:not(.calme) .lettre-entete h1 .ligne > span { animation: monter 1.15s var(--courbe) both 0.1s; }
.js:not(.calme) .lettre-entete h1 .ligne:nth-child(2) > span { animation-delay: 0.22s; }
.js:not(.calme) .lettre-entete .fil, .js:not(.calme) .lettre-entete__chapeau, .js:not(.calme) .lettre-entete .signature { animation: apparaitre 1.1s ease both 0.5s; }
.js:not(.calme) .lettre-entete .portrait__cadre { animation: volet-haut 1.4s var(--courbe-volet) both 0.15s; }
.js:not(.calme) .lettre-entete .portrait__cadre img { animation: zoom-sortie 1.9s var(--courbe) both 0.15s; }
@keyframes volet-haut { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes zoom-sortie { from { transform: scale(1.18); } to { transform: none; } }
@media (min-width: 900px) {
  .lettre-entete__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lettre-entete .portrait { justify-self: end; inline-size: 100%; max-inline-size: 460px; }
}

.lettre { color: var(--encre); padding-block: clamp(56px, 9vh, 110px) clamp(80px, 12vh, 140px); border-block-start: 1px solid var(--ligne-claire); }
.lettre__grille { display: grid; gap: 48px; }
.lettre__corps { max-inline-size: 40rem; font-size: 1.125rem; line-height: 1.75; }
.lettre__corps h2 { font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--or-fonce); margin: 56px 0 16px; }
.lettre__corps h2:first-child { margin-block-start: 0; }
.lettre__corps p { margin: 0 0 1.1em; }
.lettrine::first-letter { float: inline-start; font: 400 5.4em/0.8 var(--serif); margin: 0.06em 0.08em 0 0; color: var(--bleu); }
.exergue {
  margin: 56px 0; padding: 34px 0 30px; border-block: 1px solid var(--ligne-claire);
  font: italic 400 clamp(1.8rem, 3.4vw, 2.6rem)/1.16 var(--serif); color: var(--bleu);
}
.exergue p { margin: 0; }
.lettre__photo { margin: 56px 0; }
.lettre__fin { margin-block-start: 56px; display: grid; gap: 6px; }
.lettre__fin .signature__nom { font-size: 2.1rem; }
.lettre__fin .trait-or { display: block; inline-size: 120px; block-size: 1px; background: var(--or); margin-block: 6px 10px; transform-origin: left; }
.lettre__lieu { font-size: 0.9375rem; color: var(--gris); }
.marge-encadre { align-self: start; border-block-start: 1px solid var(--encre); padding-block-start: 18px; font-size: 0.9375rem; }
.marge-encadre h2 { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 14px; }
.marge-encadre dl { margin: 0; display: grid; gap: 14px; }
.marge-encadre dt { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.marge-encadre dd { margin: 2px 0 0; font: 400 1.25rem/1.3 var(--serif); }
.marge-encadre__sources { margin: 22px 0 0; padding-block-start: 14px; border-block-start: 1px solid var(--ligne-claire); font-size: 0.8125rem; line-height: 1.55; color: var(--gris); }
@media (min-width: 1000px) {
  .lettre__grille { grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(60px, 8vw, 140px); }
  .marge-encadre { position: sticky; inset-block-start: calc(var(--entete) + 32px); }
}
.progression { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 45; block-size: 2px; background: var(--or); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.suite { background: var(--nuit); color: var(--blanc); }
.suite__grille { display: grid; }
.suite a {
  display: grid; gap: 10px; padding: clamp(44px, 7vh, 70px) var(--marge); text-decoration: none;
  border-block-start: 1px solid var(--ligne-sombre);
  transition: background-color 0.5s;
}
.suite a:hover { background: var(--nuit-2); }
.suite a span { font: 500 0.75rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--or-clair); }
.suite a b { font: 400 clamp(2rem, 4vw, 3.4rem)/1.05 var(--serif); }
@media (min-width: 800px) { .suite__grille { grid-template-columns: 1fr 1fr; } .suite a + a { border-inline-start: 1px solid var(--ligne-sombre); } }

/* ---------- Pied de page ---------- */
.pied { background: #0c1322; color: var(--brume); padding-block: clamp(64px, 9vh, 96px) 28px; font-size: 0.9375rem; }
.pied__haut { display: grid; gap: 40px; padding-block-end: 48px; border-block-end: 1px solid var(--ligne-sombre); }
.pied__marque { display: flex; align-items: center; gap: 16px; color: var(--blanc); }
.pied__marque img { inline-size: 52px; block-size: auto; }
.pied__marque b { display: block; font: 500 1.75rem/1 var(--serif); letter-spacing: 0.16em; }
.pied__marque small { display: block; margin-block-start: 6px; font: 500 0.625rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brume); }
.pied__marque .arabe { display: block; margin-block-start: 8px; font-size: 1.0625rem; color: var(--or-clair); }
.pied__colonnes { display: grid; gap: 28px; }
.pied h2 { font: 500 0.6875rem/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-clair); margin: 0 0 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pied a { text-decoration: none; color: var(--blanc); }
.pied a:hover { text-decoration: underline; }
.pied p { margin: 0; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding-block-start: 24px; font-size: 0.8125rem; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pied__credit a { color: var(--brume); }
.pied__credit a:hover { color: var(--blanc); }
@media (min-width: 900px) {
  .pied__haut { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .pied__colonnes { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- États de départ des animations (posés seulement avec le script) ---------- */
/* lignes découpées par SplitText : le masque garde la place des jambages (g, p, q) */
.sl-mask { padding-block: 0.14em; margin-block: -0.14em; }
.js:not(.calme) [data-apparition] { opacity: 0; transform: translateY(26px); }
.js:not(.calme) [data-volet] { clip-path: inset(100% 0 0 0); }
.js:not(.calme) [data-volet="battants"] { clip-path: inset(0 50% 0 50%); }
.js:not(.calme) [data-volet] img { transform: scale(1.18); }
.anime-pret [data-apparition], .anime-pret [data-volet] { will-change: auto; }

/* « Réduire les animations » : rien ne bouge, tout est visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .carte__onde { display: none; }
}