/* Kalidou Bâ, v2. Parti pris : épuré veut dire une idée par écran.
   L'ouverture ne montre que lui et la balance qu'il tient ; le reste de la page est court.
   Une seule famille (Schibsted Grotesk, dessinée pour un groupe de presse : ce sont des
   chroniques), trois graisses. Le bleu nuit de son logo porte la page ; l'or n'existe que
   sur la balance, un bouton et quelques traits. Inspiré de KADO : peu de choses, beaucoup
   de noir, un objet qui flotte au-dessus des mains. */

:root {
  --encre: oklch(0.21 0.035 255);
  --encre-2: oklch(0.26 0.035 255);
  --encre-fond: oklch(0.17 0.03 255);
  --encre-filigrane: oklch(0.25 0.035 255);
  --or: oklch(0.79 0.11 82);
  --or-vif: oklch(0.86 0.10 85);
  --blanc: oklch(0.96 0.005 255);
  --gris: oklch(0.74 0.02 255);
  --clair: oklch(0.965 0.004 255);
  --texte: var(--encre);
  --texte-2: oklch(0.46 0.02 255);
  --trait-clair: oklch(0.88 0.008 255);
  --trait-sombre: oklch(1 0 0 / 0.1);

  --police: 'Schibsted Grotesk', system-ui, sans-serif;
  --gouttiere: clamp(20px, 5vw, 80px);
  --air: clamp(96px, 12vw, 184px);
  --entete: 72px;
  --sortie: cubic-bezier(.16, 1, .3, 1);   /* ease-out-expo */

  --z-entete: 20;
  --z-menu: 30;
  --z-video: 40;
  --z-voile: 50;
  --ressort-doux: cubic-bezier(0.22, 1, 0.36, 1);   /* soft-blur-in, focus-blur-resolve */
  --kado: cubic-bezier(0.16, 0.84, 0.28, 1);        /* l'apparition de KADO */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--entete); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--encre); color: var(--blanc);
  font: 400 1.125rem/1.68 var(--police);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, ol, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; border-radius: 6px; }
h1, h2 { font-weight: 600; letter-spacing: -0.025em; line-height: 1; text-wrap: balance; }
h2 { font-size: clamp(2rem, 2.2vw + 1.2rem, 3.25rem); }

.evitement { position: absolute; left: -9999px; top: 8px; z-index: var(--z-video); background: var(--or); color: var(--encre); padding: 12px 18px; font-weight: 600; }
.evitement:focus { left: 8px; }

/* ---------- en-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: var(--z-entete); height: var(--entete);
  display: flex; align-items: center; gap: 32px; padding: 0 var(--gouttiere);
  transition: background-color .4s, box-shadow .4s;
}
.entete.defile { background: oklch(0.21 0.035 255 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--trait-sombre); }
.entete__marque { display: grid; place-items: center; width: 48px; height: 48px; margin-left: -11px; margin-right: auto; }
.entete__marque img { width: 26px; }
.entete__nav { display: flex; gap: clamp(20px, 2.2vw, 32px); }
.entete__nav a { font-size: .9375rem; font-weight: 500; color: var(--gris); text-decoration: none; padding: 14px 0; white-space: nowrap; transition: color .2s; }
.entete__nav a:hover { color: var(--blanc); }
/* Bordure d'or qui tourne (le bouton de KADO) : un dégradé conique tourne derrière, un cœur encre
   posé par-dessus ne laisse voir qu'un liseré de 1 px. Rotation par transform : marche partout. */
.pastille {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  background: oklch(0.79 0.11 82 / .35);
}
.pastille::before { content: ''; position: absolute; z-index: -2; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--or) 80%, var(--or-vif) 86%, transparent 94%); animation: tourner 3.6s linear infinite; }
.pastille::after { content: ''; position: absolute; z-index: -1; inset: 1px; border-radius: inherit; background: var(--encre); transition: background-color .25s; }
.pastille:hover::after { background: var(--or); }
.pastille:hover { color: var(--encre); }
@keyframes tourner { to { transform: rotate(1turn); } }
.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; pointer-events: none; }
.progression i { display: block; height: 100%; background: linear-gradient(90deg, var(--or), var(--or-vif)); transform-origin: left; transform: scaleX(var(--lu, 0)); }
.entete__menu { display: none; width: 48px; height: 48px; margin-right: -12px; place-content: center; gap: 7px; }
.entete__menu i { display: block; width: 22px; height: 1.5px; background: var(--blanc); transition: transform .3s var(--sortie); }
.entete__menu[aria-expanded="true"] i:first-child { transform: translateY(4.25px) rotate(45deg); }
.entete__menu[aria-expanded="true"] i:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* Le menu s'ouvre SOUS l'en-tête : la croix reste là pour le refermer. Les liens se posent en bas ;
   sur un écran court ils défilent au lieu de sortir par le haut (marge auto, pas d'alignement en bas). */
.menu { position: fixed; inset: var(--entete) 0 0; z-index: var(--z-menu); background: var(--encre); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gouttiere) calc(56px + env(safe-area-inset-bottom)); }
.menu[hidden] { display: none; }
.menu nav { display: grid; width: 100%; margin-top: auto; }
.menu a { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--trait-sombre); }
@media (max-height: 640px) { .menu { padding-bottom: calc(28px + env(safe-area-inset-bottom)); } .menu a { font-size: 1.625rem; padding: 10px 0; } }
.entete.menu-ouvert { background: var(--encre); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.menu a:last-child { color: var(--or); border: 0; }

/* ---------- ouverture ---------- */
.ouverture {
  position: relative; overflow: hidden; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--entete) + 8px) var(--gouttiere) max(36px, env(safe-area-inset-bottom));
  background: radial-gradient(70% 55% at 50% 36%, oklch(0.29 0.04 255), transparent 72%), var(--encre);
}
/* La figure garde les proportions du portrait recadré : la balance se place en % de lui.
   Ses mains sont à 40-56 % de la hauteur, écartées de 65 % de la largeur ; la balance fait
   60 % de large et son fléau passe sous le menton. */
.figure { position: relative; align-self: center; height: min(74svh, 136vw); aspect-ratio: 1302 / 1920; }
.figure__portrait { width: 100%; height: 100%; -webkit-mask-image: linear-gradient(#000 64%, transparent 97%); mask-image: linear-gradient(#000 64%, transparent 97%); }
.balance { position: absolute; left: 20%; top: 24.3%; width: 60%; aspect-ratio: 1; filter: drop-shadow(0 16px 22px oklch(0.12 0.03 255 / .55)); }
.balance__calque { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.balance__fleau { transform-origin: 50% 20.78%; }
.balance__plateau--g { transform-origin: 16.21% 23.87%; }
.balance__plateau--d { transform-origin: 83.79% 23.87%; }
.ouverture__texte { position: relative; margin-top: -9svh; }
.ouverture h1 { font-size: clamp(2.75rem, 4.6vw + 1rem, 5rem); }
.ouverture__sur { font-size: 1rem; font-weight: 500; color: var(--or); margin-bottom: 14px; }
.ouverture__chapo { margin-top: 14px; max-width: 30ch; color: var(--gris); line-height: 1.6; }

/* L'entrée de l'ouverture ne part qu'une fois le voile retiré (classe « entree » posée par le
   script du <head> s'il n'y a pas de voile, par site.js sinon). */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.entree) .figure, html.js:not(.entree) .ouverture__texte { opacity: 0; }
  html.entree .figure__portrait { animation: apparaitre 1.2s var(--sortie) both; }
  html.entree .balance { animation: venir 1.4s .45s var(--sortie) both, flotter 6s 1.9s ease-in-out infinite; }
  html.entree .ouverture h1 { animation: apparaitre 1s .25s var(--sortie) both; }
  html.entree .ouverture__sur { animation: apparaitre 1s .15s var(--sortie) both; }
  html.entree .ouverture__chapo { animation: apparaitre 1s .4s var(--sortie) both; }
}
@keyframes apparaitre { from { opacity: 0; filter: blur(10px); transform: translateY(14px); } }
@keyframes venir { from { opacity: 0; transform: translateY(-18px) scale(.96); } }
@keyframes flotter { 50% { transform: translateY(-1.6%); } }

/* ---------- sa phrase ---------- */
.phrase { padding: var(--air) var(--gouttiere); }
.phrase blockquote { max-width: 1100px; }
.phrase p { font-size: clamp(2rem, 3.4vw + .8rem, 3.75rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }
.phrase p.mots-prets span { opacity: .16; filter: blur(3px); transition: opacity .45s linear, filter .45s linear; }
.phrase p.mots-prets span.vu { opacity: 1; filter: none; }
.phrase footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 40px; font-size: .9375rem; color: var(--gris); }
.lien-video { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 500; color: var(--or); }
.lien-video i { width: 36px; height: 36px; border-radius: 50%; border: 1px solid oklch(0.79 0.11 82 / .7); position: relative; transition: background-color .25s; }
.lien-video i::after { content: ''; position: absolute; left: 14px; top: 11px; width: 10px; height: 14px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lien-video:hover i { background: oklch(0.79 0.11 82 / .14); }

/* ---------- bandes claires ---------- */
.clair { background: var(--clair); color: var(--texte); }
/* Son mot : une lettre. Premier paragraphe en grand, la suite au corps de lecture, sa signature. */
.mot { padding: var(--air) var(--gouttiere) calc(var(--air) * .55); }
.mot__corps { max-width: 760px; }
.mot h2 { margin-bottom: 36px; }
.lettre > p:first-child { font-size: clamp(1.375rem, .9vw + 1rem, 1.75rem); line-height: 1.45; letter-spacing: -0.01em; }
.lettre .deplier__contenu p { font-size: 1.1875rem; line-height: 1.7; max-width: 60ch; margin-top: 20px; }
.lettre__signature { display: flex; align-items: center; gap: 14px; margin-top: 36px; font-weight: 600; }
.lettre__signature::before { content: ''; width: 40px; height: 1.5px; background: var(--or); }

.bio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: start; padding: calc(var(--air) * .45) var(--gouttiere) var(--air); }
.bio__cadre { max-width: 460px; }
.bio__photo { width: 100%; max-width: 460px; aspect-ratio: 1008 / 1400; object-fit: cover; border-radius: 18px; }
.bio h2 { margin-bottom: 32px; }
.bio p { font-size: clamp(1.1875rem, .5vw + 1rem, 1.375rem); line-height: 1.55; max-width: 36ch; }
.bio p + p, .bio .deplier__contenu p { margin-top: 16px; }
/* les intertitres de la bio : le filet d'or de la signature, au-dessus */
.bio h3 { margin: 56px 0 0; font-size: clamp(1.5rem, 1vw + 1.05rem, 1.875rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.bio h3::before { content: ''; display: block; width: 40px; height: 1.5px; margin-bottom: 18px; background: var(--or); }
.bio h3 + p { margin-top: 16px; }

/* Solidarité : la bande la plus sombre de la page, sa phrase en grand, puis deux vidéos de ses actions à Kaolack. */
.solidarite { display: grid; gap: clamp(40px, 5vw, 72px); padding: var(--air) var(--gouttiere); background: var(--encre-fond); }
.solidarite blockquote { margin: 32px 0 0; }
.solidarite blockquote p { max-width: 15ch; font-size: clamp(1.75rem, 2.6vw + .9rem, 3.25rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.solidarite blockquote footer { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-size: .9375rem; color: var(--gris); }
.solidarite blockquote footer::before { content: ''; flex: none; width: 40px; height: 1.5px; background: var(--or); }
.solidarite__corps > p { max-width: 46ch; font-size: clamp(1.125rem, .4vw + 1rem, 1.3125rem); line-height: 1.6; color: oklch(1 0 0 / .86); }
.solidarite__corps > p + p { margin-top: 16px; }
.solidarite__videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 560px; margin-top: 40px; }
.solidarite__videos a { display: grid; align-content: start; gap: 10px; color: var(--blanc); text-decoration: none; }
.solidarite__image { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--encre-2); }
.solidarite__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sortie); }
.solidarite__lecture { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--or); transition: background-color .25s; }
.solidarite__lecture::after { content: ''; position: absolute; left: 17px; top: 14px; width: 12px; height: 16px; background: var(--encre); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.solidarite__videos b { font-size: 1rem; font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.solidarite__videos small { margin-top: -4px; font-size: .8125rem; color: var(--gris); }
@media (hover: hover) { .solidarite__videos a:hover img { transform: scale(1.04); } .solidarite__videos a:hover .solidarite__lecture { background: var(--or-vif); } }

/* Dépliant : le texte d'abord, le bouton après ; replié seulement si le script tourne. */
.deplier__contenu[hidden] { display: none; }
.deplier__contenu:not([hidden]) { animation: deplier .5s var(--sortie); }
@keyframes deplier { from { opacity: 0; transform: translateY(-6px); } }
.deplier__bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 14px; font-weight: 600; color: var(--texte); }
.deplier__bouton::after { content: ''; width: 9px; height: 9px; border-right: 1.5px solid var(--or); border-bottom: 1.5px solid var(--or); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--sortie); }
.deplier__bouton[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }

/* Les chroniques : ses vidéos TikTok, en couvertures verticales comme dans l'application. */
.chroniques { padding: calc(var(--air) * .4) 0 var(--air); }
.chroniques__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; padding: 0 var(--gouttiere); }
.chroniques__tete h2 { flex: 1 0 100%; }
.chroniques__tete .fleches { margin-left: auto; }
.chroniques__tete p { max-width: 38ch; color: var(--texte-2); font-size: 1.125rem; }
.tiktok { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--encre); color: var(--blanc); text-decoration: none; font-weight: 600; font-size: .9375rem; transition: background-color .2s; }
.tiktok:hover { background: var(--encre-2); }
.tiktok svg { width: 18px; height: 18px; fill: currentColor; }
.tiktok small { font-weight: 500; font-size: .8125rem; color: var(--gris); }
.videos { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 36px var(--gouttiere) 8px; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; }
.videos::-webkit-scrollbar { display: none; }
.videos li { flex: 0 0 clamp(168px, 44vw, 236px); scroll-snap-align: start; }
.videos a { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--encre-2); color: var(--blanc); text-decoration: none; }
.videos img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sortie); }
.videos a:hover img { transform: scale(1.04); }
.video__lecture { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: oklch(0.21 0.035 255 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.video__lecture::after { content: ''; position: absolute; left: 14px; top: 11px; width: 10px; height: 14px; background: var(--blanc); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.video__legende { position: absolute; inset: auto 0 0; display: grid; gap: 6px; padding: 56px 14px 14px; background: linear-gradient(transparent, oklch(0.15 0.03 255 / .9)); }
.video__legende b { font-size: .9375rem; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.video__legende small { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .75rem; font-weight: 500; color: oklch(0.86 0.01 255); }
.video__legende small time, .video__legende small span { white-space: nowrap; }
.video__legende small span { color: var(--or-vif); }

/* ---------- parcours ---------- */
.parcours { padding: var(--air) 0; }
.parcours__tete { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 var(--gouttiere); margin-bottom: 40px; }
.fleches { display: none; gap: 10px; }
.fleches button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--trait-sombre); display: grid; place-items: center; transition: border-color .2s, opacity .2s; }
.fleches button:hover:not(:disabled) { border-color: var(--or); }
.fleches button:disabled { opacity: .3; cursor: default; }
.fleches svg { width: 22px; height: 22px; fill: none; stroke: var(--blanc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .fleches { display: flex; } }
.clair .fleches button { border-color: var(--trait-clair); }
.clair .fleches button:hover:not(:disabled) { border-color: var(--encre); }
.clair .fleches svg { stroke: var(--encre); }
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 0 var(--gouttiere) 8px; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail li { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; }
.rail img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--encre-2); }
.rail time { display: block; margin-top: 18px; font-size: .875rem; font-weight: 500; color: var(--or); }
.rail p { margin-top: 6px; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }

/* ---------- sur le terrain ----------
   Ses vidéos à lui (télévision, actions, débats), en liste plutôt qu'en troisième frise :
   une image, un titre, une durée. Le rond d'or est le seul ornement ; au téléphone il se pose
   sur l'image pour laisser toute la largeur au titre. */
.terrain { display: grid; gap: 40px; padding: var(--air) var(--gouttiere); }
.terrain__tete p { margin-top: 20px; max-width: 34ch; color: var(--gris); font-size: 1.125rem; line-height: 1.6; }
.terrain__liste { border-top: 1px solid var(--trait-sombre); }
.terrain__liste a { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--trait-sombre); color: var(--blanc); text-decoration: none; }
.terrain__image { grid-area: 1 / 1; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--encre-2); }
.terrain__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sortie); }
/* une vidéo couchée vient souvent de la télévision : on serre sur lui, le bandeau de la chaîne reste dessous */
.terrain__liste [data-format="paysage"] img { scale: 1.5; transform-origin: 50% 0; }
.terrain__texte { display: grid; gap: 6px; }
.terrain__texte b { font-size: clamp(1.0625rem, .55vw + .9rem, 1.375rem); font-weight: 500; line-height: 1.32; letter-spacing: -0.01em; text-wrap: pretty; }
.terrain__texte small { font-size: .875rem; font-weight: 500; color: var(--gris); }
.terrain__lecture { grid-area: 1 / 1; place-self: end; margin: 0 6px 6px 0; position: relative; width: 32px; height: 32px; border-radius: 50%;
  background: oklch(0.21 0.035 255 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .25s, border-color .25s; }
.terrain__lecture::after { content: ''; position: absolute; left: 12px; top: 10px; width: 9px; height: 12px; background: var(--blanc); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: background-color .25s; }
.terrain__liste a:hover img { transform: scale(1.05); }

/* ---------- en images ----------
   Une mosaïque en colonnes : chaque photo garde son cadrage d'origine (debout, assis, en pied),
   rien n'est recoupé. La légende ne s'affiche que dans la visionneuse. */
.images { padding: var(--air) var(--gouttiere); }
.chroniques + .images { padding-top: calc(var(--air) * .4); }   /* sans vidéo de terrain, les deux bandes claires se suivent */
.images__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(32px, 4vw, 56px); }
.images__tete p { max-width: 34ch; color: var(--texte-2); font-size: 1.125rem; line-height: 1.6; }
.mosaique { columns: 2; column-gap: 10px; }
.mosaique li { break-inside: avoid; margin-bottom: 10px; }
.mosaique a { display: block; border-radius: 12px; overflow: hidden; background: var(--trait-clair); cursor: zoom-in; }
.mosaique img { width: 100%; transition: transform .7s var(--sortie); }
@media (hover: hover) { .mosaique a:hover img { transform: scale(1.035); } }
/* Le même dévoilement de bas en haut que les autres photos, mais par un cache couleur de fond qui se
   retire : une image découpée à 100 % par son clip-path n'est jamais « visible », le chargement
   paresseux ne partait donc qu'à la révélation (mesuré : 0 vignette demandée à 200 px de l'écran). */
.mosaique a { position: relative; }
html.anime .mosaique [data-apparait="image"] img, html.anime .mosaique [data-apparait="image"]:not(.vu) img { clip-path: none; }
html.anime .mosaique a::after { content: ''; position: absolute; inset: 0; background: var(--clair); transform-origin: top; transition: transform 1.2s var(--sortie); }
html.anime .mosaique .vu a::after { transform: scaleY(0); }
html.anime .mosaique li:not(.vu) a { background: none; }   /* sinon l'arrondi du cadre dessine un fil gris sous le cache */
@media (min-width: 720px) { .mosaique { columns: 3; column-gap: 14px; } .mosaique li { margin-bottom: 14px; } }
@media (min-width: 1200px) { .mosaique { columns: 4; column-gap: 16px; } .mosaique li { margin-bottom: 16px; } }

/* ---------- contact et pied ---------- */
.contact { padding: var(--air) var(--gouttiere) calc(var(--air) * .7); border-top: 1px solid var(--trait-sombre); }
.contact h2 { font-size: clamp(2.5rem, 4vw + 1rem, 4.75rem); }
.compose { margin-top: 40px; max-width: 640px; }
.compose fieldset { border: 0; margin: 0; padding: 0; }
.compose legend { padding: 0; margin-bottom: 14px; font-size: .9375rem; color: var(--gris); }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix label { position: relative; }
.choix input { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; }
.choix span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid oklch(1 0 0 / .18); font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.choix span:hover { border-color: var(--or); }
.choix input:checked + span { background: var(--blanc); border-color: var(--blanc); color: var(--encre); }
.choix input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 3px; }
.champ { display: grid; gap: 10px; margin-top: 28px; max-width: 420px; }
.champ span { font-size: .9375rem; color: var(--gris); }
.champ input { height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid oklch(1 0 0 / .16); background: var(--encre-2); color: var(--blanc); font: inherit; font-size: 1.0625rem; }
.champ input::placeholder { color: oklch(0.66 0.02 255); }
.champ input:focus { outline: none; border-color: var(--or); }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; }
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--or); color: var(--encre); font-weight: 600; font-size: 1rem; text-decoration: none; transition: background-color .25s, transform .2s var(--sortie); }
.bouton:hover { background: var(--or-vif); }
.bouton:active { transform: scale(.97); }
.suivre { margin-top: 72px; max-width: 460px; }
.suivre h3 { margin: 0 0 6px; font-size: .9375rem; font-weight: 500; color: var(--gris); }
.reseaux li + li { border-top: 1px solid var(--trait-sombre); }
.reseaux a { display: grid; grid-template-columns: 20px minmax(0, 1fr) 10px; align-items: center; gap: 18px; min-height: 64px; padding: 10px 0; text-decoration: none; }
.reseaux svg { width: 20px; height: 20px; fill: currentColor; transition: color .2s; }
.reseaux span { display: grid; font-weight: 500; line-height: 1.3; }
.reseaux small { font-size: .875rem; font-weight: 400; color: var(--gris); overflow-wrap: anywhere; }
.reseaux a::after { content: ''; width: 8px; height: 8px; border-top: 1.5px solid var(--or); border-right: 1.5px solid var(--or); transform: rotate(45deg); transition: transform .3s var(--sortie); }
@media (hover: hover) { .reseaux a:hover svg { color: var(--or); } .reseaux a:hover::after { transform: translateX(3px) rotate(45deg); } }
@media (min-width: 1100px) {
  .contact { display: grid; grid-template-columns: minmax(0, 640px) minmax(280px, 400px); justify-content: space-between; column-gap: 64px; align-items: start; }
  .contact h2 { grid-column: 1 / -1; }
  .suivre { margin-top: 40px; }
}
.lien { font-weight: 500; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: oklch(0.79 0.11 82 / .6); min-height: 48px; display: inline-flex; align-items: center; }

.pied { background: var(--encre-fond); overflow: hidden; padding: 64px var(--gouttiere) calc(32px + env(safe-area-inset-bottom)); }
.pied__nom { font-size: clamp(4.25rem, 17vw, 17rem); font-weight: 700; letter-spacing: -0.045em; line-height: .78; color: var(--encre-filigrane); white-space: nowrap; margin-left: -0.04em; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; font-size: .875rem; color: var(--gris); }
.pied__bas a { text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; margin-block: -12px; }
.pied__bas a:hover { color: var(--or); }

/* ---------- vidéo : feuille noire pleine largeur ---------- */
.video { position: fixed; inset: 0; z-index: var(--z-video); background: #000; display: grid; place-content: center; }
.video[hidden] { display: none; }
.video video { width: min(100vw, 1100px); aspect-ratio: 16 / 9; }
.video[data-format="vertical"] video { width: auto; height: min(100dvh, 177.78vw); max-width: 100vw; aspect-ratio: 9 / 16; }
.video__fermer, .visionneuse__fermer { position: absolute; z-index: 1; top: 14px; right: 14px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid oklch(1 0 0 / .3); color: #fff; font-weight: 500; }

/* ---------- photo : la même feuille noire, la photo entière, la suite d'un glissement ---------- */
.visionneuse { position: fixed; inset: 0; z-index: var(--z-video); background: #000; color: #fff; display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: feuille .3s var(--sortie); }
.visionneuse[hidden] { display: none; }
.visionneuse__photo { position: relative; margin: 0; min-height: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* la boîte remplit la scène (en absolu : une hauteur en % ne se résout pas dans une rangée de grille), la photo s'y loge : la vignette affichée d'abord et la grande photo qui la remplace ont la même taille à l'écran */
.visionneuse__photo img { position: absolute; top: 76px; left: 12px; width: calc(100% - 24px); height: calc(100% - 84px); object-fit: contain; -webkit-user-drag: none; transition: transform .35s var(--sortie); }
.visionneuse__photo img.arrive { animation: arriver .45s var(--sortie); }
.visionneuse__bas { display: flex; align-items: center; gap: 12px 20px; padding: 12px var(--gouttiere) max(16px, env(safe-area-inset-bottom)); }
.visionneuse__legende { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: oklch(1 0 0 / .86); text-wrap: pretty; }
/* le compteur en haut, en face de « Fermer » : en bas, toute la largeur va à la légende */
.visionneuse__compte { position: absolute; top: 14px; left: var(--gouttiere); display: flex; align-items: center; min-height: 48px; font-size: .9375rem; font-weight: 500; color: oklch(1 0 0 / .62); font-variant-numeric: tabular-nums; white-space: nowrap; }
.visionneuse__fermer { right: var(--gouttiere); }   /* sur la marge des flèches, en face du compteur */
.visionneuse__fleches { display: flex; gap: 10px; }
.visionneuse__fleches button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid oklch(1 0 0 / .3); display: grid; place-items: center; transition: border-color .2s, opacity .2s; }
.visionneuse__fleches button:hover:not(:disabled) { border-color: var(--or); }
.visionneuse__fleches button:disabled { opacity: .3; cursor: default; }
.visionneuse__fleches svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes feuille { from { opacity: 0; } }
@keyframes arriver { from { opacity: 0; transform: translateX(calc(var(--sens, 0) * 28px)) scale(.985); } }

/* ---------- ordinateur ---------- */
@media (min-width: 960px) {
  .ouverture { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: 0;
    background: radial-gradient(42% 60% at 72% 42%, oklch(0.29 0.04 255), transparent 72%), var(--encre); }
  .figure { grid-column: 2; grid-row: 1; height: calc(100svh - var(--entete) - 16px); margin-right: 4vw; align-self: end; }
  .ouverture__texte { grid-column: 1; grid-row: 1; margin: 0 0 clamp(48px, 9vh, 96px); }
  .bio__cadre { position: sticky; top: calc(var(--entete) + 40px); }
  .solidarite { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
  .solidarite__tete { position: sticky; top: calc(var(--entete) + 48px); }
  .terrain { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
  .terrain__tete { position: sticky; top: calc(var(--entete) + 48px); }
  .terrain__liste a { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 28px; padding: 22px 0; }
  .terrain__lecture { grid-area: auto; place-self: center; width: 48px; height: 48px; margin: 0 0 0 12px; background: none; border: 1px solid oklch(0.79 0.11 82 / .7); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .terrain__lecture::after { left: 19px; top: 16px; width: 11px; height: 15px; background: var(--or); }
  .terrain__liste a:hover .terrain__lecture { background: var(--or); border-color: var(--or); }
  .terrain__liste a:hover .terrain__lecture::after { background: var(--encre); }
}

/* ---------- téléphone ---------- */
/* sept liens et la pastille tiennent sur une ligne à partir de 1100 px ; en dessous, le menu */
@media (max-width: 1099px) {
  .entete__nav, .pastille { display: none; }
  .entete__menu { display: grid; }
}
@media (max-width: 959px) {
  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio__photo, .bio__cadre { max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   L'OUVERTURE. Valeurs du catalogue animate-text :
   logo  : la part d'or se dessine en balayage circulaire, le K sort du flou
           (focus-blur-resolve : 760 ms, flou 14 px, montée 14 px, échelle 1,01) ;
   nom   : soft-blur-in lettre par lettre (900 ms, 25 ms d'écart, flou 12 px, montée 16 px) ;
   devise: per-word-crossfade (700 ms, 70 ms d'écart, montée 8 px).
   ===================================================================== */
.voile {
  position: fixed; inset: 0; z-index: var(--z-voile);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gouttiere);
  background: radial-gradient(60% 45% at 50% 42%, oklch(0.27 0.04 255), transparent 75%), var(--encre);
  transition: opacity .85s var(--sortie);
}
html:not(.js) .voile, html[data-ouverture="passee"] .voile { display: none; }
.voile.sort { opacity: 0; pointer-events: none; }
.voile.sort > * { transition: opacity .5s var(--sortie), filter .5s var(--sortie), transform .5s var(--sortie); opacity: 0; filter: blur(10px); transform: translateY(-12px); }

.voile__logo { position: relative; width: clamp(128px, 33vw, 172px); aspect-ratio: 437 / 520; }
.voile__or, .voile__k { position: absolute; inset: 0; width: 100%; height: 100%; }
@property --balaye { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.voile__or {
  -webkit-mask-image: conic-gradient(from 225deg at 50% 52%, #000 var(--balaye), transparent calc(var(--balaye) + 0.5deg));
  mask-image: conic-gradient(from 225deg at 50% 52%, #000 var(--balaye), transparent calc(var(--balaye) + 0.5deg));
  animation: balayer 1.25s .1s cubic-bezier(.65, 0, .35, 1) both, net 1.25s .1s var(--ressort-doux) both;
}
@keyframes balayer { from { --balaye: 0deg; } to { --balaye: 361deg; } }
@keyframes net { from { filter: blur(6px); } }
.voile__k { animation: focus .76s .55s var(--ressort-doux) both; }
@keyframes focus { from { opacity: 0; filter: blur(14px); transform: translateY(14px) scale(1.01); } }
/* le reflet : une bande de lumière découpée à la forme du logo */
.voile__reflet {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../img/embleme-or.png) center / contain no-repeat, url(../img/embleme-k.png) center / contain no-repeat;
  mask: url(../img/embleme-or.png) center / contain no-repeat, url(../img/embleme-k.png) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, oklch(1 0 0 / .85) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0;
  animation: reflet .95s 2.05s var(--sortie) both;
}
@keyframes reflet { to { background-position: -40% 0; } }

.voile__sur { margin-top: 30px; font-size: .9375rem; font-weight: 500; color: var(--or); animation: mot .7s 1.05s cubic-bezier(.16, 1, .3, 1) both; }
.voile__nom { margin-top: 6px; font-size: clamp(2.125rem, 7vw, 3.25rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
.voile__nom .l { display: inline-block; animation: lettre .9s var(--ressort-doux) both; animation-delay: calc(1.2s + var(--i) * 25ms); }
.voile__devise { margin-top: 14px; font-size: .875rem; color: var(--gris); }
.voile__devise span, .voile__devise i { display: inline-block; animation: mot .7s cubic-bezier(.16, 1, .3, 1) both; }
.voile__devise i { font-style: normal; color: var(--or); margin: 0 .4em; }
.voile__devise > :nth-child(1) { animation-delay: 1.6s; }  .voile__devise > :nth-child(2) { animation-delay: 1.67s; }
.voile__devise > :nth-child(3) { animation-delay: 1.74s; } .voile__devise > :nth-child(4) { animation-delay: 1.81s; }
.voile__devise > :nth-child(5) { animation-delay: 1.88s; } .voile__devise > :nth-child(6) { animation-delay: 1.95s; }
.voile__devise > :nth-child(7) { animation-delay: 2.02s; }
@keyframes lettre { from { opacity: 0; filter: blur(12px); transform: translateY(16px); } }
@keyframes mot { from { opacity: 0; transform: translateY(8px); } }
.voile__charge { position: absolute; left: 50%; bottom: calc(44px + env(safe-area-inset-bottom)); width: 120px; height: 1px; margin-left: -60px; background: var(--trait-sombre); overflow: hidden; }
.voile__charge i { display: block; height: 100%; background: var(--or); transform-origin: left; animation: charge 2.9s linear both; }
@keyframes charge { from { transform: scaleX(0); } }

/* La page arrive DEPUIS un flou pendant que le voile s'efface (le geste de KADO).
   ⚠️ « faite » ne déclare plus le filtre : un filter qui traîne sur un ancêtre décroche les
   éléments en position fixe. */
html[data-entree="encours"] body > :not(.voile) { filter: blur(16px); opacity: .35; }
html[data-entree="faite"] body > :not(.voile) { transition: filter 1s var(--sortie), opacity 1s var(--sortie); }

/* =====================================================================
   AU FIL DE LA PAGE. Rien n'est caché sans script : c'est le script qui arme
   l'état de départ (classe « anime » sur <html>), puis révèle à l'entrée.
   ===================================================================== */
html.anime [data-apparait]:not(.vu) { opacity: 0; transform: translateY(16px); filter: blur(10px); }
html.anime [data-apparait] { transition: opacity .82s var(--kado), transform .82s var(--kado), filter .82s var(--kado); transition-delay: var(--retard, 0s); }
html.anime [data-apparait].fini { filter: none; transition: none; }
/* les photos se dévoilent de bas en haut et se posent (pas de flou sur une grande image : trop cher sur téléphone) */
/* ⚠️ le découpage est posé sur l'IMAGE, l'observation sur son cadre : un élément entièrement
   découpé par son propre clip-path n'est jamais vu « visible » par IntersectionObserver. */
html.anime [data-apparait="image"]:not(.vu) { opacity: 1; filter: none; transform: none; }
html.anime [data-apparait="image"] img { transition: clip-path 1.2s var(--sortie), transform 1.4s var(--sortie); clip-path: inset(0 0 0 0 round 18px); }
html.anime [data-apparait="image"]:not(.vu) img { transform: scale(1.06); clip-path: inset(100% 0 0 0 round 18px); }
/* listes en cascade */
html.anime [data-cascade] > *:not(.vu) { opacity: 0; transform: translateY(18px); filter: blur(8px); }
html.anime [data-cascade] > * { transition: opacity .8s var(--kado), transform .8s var(--kado), filter .8s var(--kado); transition-delay: calc(var(--n, 0) * 80ms); }
html.anime [data-cascade] > .fini { filter: none; }
/* titres : soft-blur-in lettre par lettre */
html.anime [data-titre] .l { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(16px); }
html.anime [data-titre].vu .l { opacity: 1; filter: none; transform: none; transition: opacity .9s var(--ressort-doux), filter .9s var(--ressort-doux), transform .9s var(--ressort-doux); transition-delay: calc(var(--i) * 25ms); }
[data-titre] .m { display: inline-block; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .voile { display: none !important; }
  html[data-entree] body > * { filter: none !important; opacity: 1 !important; }
}