/* ==========================================================================
   LIBERTY BOSS v2 - Design system nocturne
   Type    : Clash Display (titres) + Switzer (texte), self-hostees
   Couleur : noir chaud + blanc casse chaud + UN accent, le rose Liberty
   Matiere : grain photographique fixe sur toute la page
   Motion  : revelations pilotees par le defilement en CSS natif.
             Aucune classe JS n'est necessaire pour afficher le contenu :
             si le script echoue, tout reste lisible.
   Themes  : la page est sombre. UN seul bloc clair, la mission.
   ========================================================================== */

@import url("fonts.css");

/* --------------------------------------------------------------- tokens -- */
:root {
  --noir: #0b0a0c;           /* fond */
  --noir-2: #131114;         /* surface */
  --noir-3: #1c191e;         /* surface elevee */
  --blanc: #f4f0ec;          /* texte principal, 18:1 sur le fond */
  --gris: #a8a0a6;           /* texte secondaire, 7.3:1 sur le fond */
  --gris-faible: #6f686d;    /* mentions, 3.6:1, jamais pour du texte courant */

  --rose: #ff3d6e;           /* accent unique, 5.7:1 sur le fond */
  --rose-ink: #0b0a0c;       /* texte SUR le rose, 5.9:1 */

  --ligne: rgb(244 240 236 / 0.13);
  --ligne-forte: rgb(244 240 236 / 0.28);
  --bord-champ: #8a848b;     /* bordure de champ : 3.9:1, seuil composant 3:1 */

  /* le bloc clair, unique inversion de la page */
  --clair-bg: #f4f0ec;
  --clair-fg: #0b0a0c;
  --clair-gris: #56505a;
  --clair-ligne: rgb(11 10 12 / 0.14);

  --r-control: 999px;        /* pilule : commandes interactives uniquement */
  --r-surface: 0;            /* surfaces et medias : angle vif */

  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1480px;
  --section-y: clamp(5rem, 11vw, 11rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--noir);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: "Switzer", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--noir-2); }

h1, h2, h3 {
  font-family: "Clash Display", "Switzer", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }

::selection { background: var(--rose); color: var(--rose-ink); }

/* Les <symbol> du sprite ne portent pas d'attribut fill : sans cette regle les
   icones se peignent en noir par defaut, invisibles sur le fond sombre. */
svg { fill: currentColor; }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
/* L'anneau doit contraster avec le fond QU'IL TOUCHE, pas avec le fond de page.
   Sur l'aplat rose il devient encre, sur le bloc clair il fonce. */
.on-rose :focus-visible { outline-color: var(--rose-ink); }
.clair :focus-visible { outline-color: #b0003f; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rose); color: var(--rose-ink); padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* La matiere : un grain fixe, hors flux, jamais sur un conteneur qui scrolle.
   Sur fond noir il donne au site sa texture de papier photo. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.06; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ typo utils -- */
.display {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(2.6rem, min(8.6vw, 12.5vh), 7.5rem);
  line-height: 0.95; letter-spacing: -0.035em;
  overflow-wrap: break-word;
}
.h2 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  letter-spacing: -0.03em; line-height: 1.02;
}
.h3 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.16; font-weight: 600; }
.lead { font-size: clamp(1.08rem, 1.35vw, 1.3rem); line-height: 1.6; color: var(--gris); max-width: 46ch; }
.body { color: var(--gris); max-width: 62ch; }
.pop { color: var(--rose); }
.eyebrow {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--gris);
  display: flex; align-items: center; gap: 0.75rem;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--rose); flex: none; }

/* ------------------------------------------------------------- controls -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  white-space: nowrap;
  font-family: "Switzer", sans-serif; font-size: 0.98rem; font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
              color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--pop { background: var(--rose); color: var(--rose-ink); }
.btn--pop:hover { background: var(--blanc); color: var(--noir); }

.btn--ghost { background: transparent; color: var(--blanc); border-color: var(--ligne-forte); }
.btn--ghost:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }

.btn[aria-disabled="true"] { opacity: 0.55; cursor: default; pointer-events: none; }

/* sur le bloc clair et sur l'aplat rose, les commandes s'inversent */
.clair .btn--ghost { color: var(--clair-fg); border-color: rgb(11 10 12 / 0.3); }
.clair .btn--ghost:hover { background: var(--clair-fg); color: var(--clair-bg); border-color: var(--clair-fg); }
.on-rose .btn--ink { background: var(--rose-ink); color: var(--blanc); }
.on-rose .btn--ink:hover { background: var(--blanc); color: var(--rose-ink); }
.on-rose .btn--ghost { color: var(--rose-ink); border-color: rgb(11 10 12 / 0.45); }
.on-rose .btn--ghost:hover { background: var(--rose-ink); color: var(--blanc); border-color: var(--rose-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: sticky; top: 0; z-index: 50; height: 72px;
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--noir) 88%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.nav[data-stuck="true"] { border-bottom-color: var(--ligne); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }

.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Clash Display", sans-serif; font-weight: 700;
  font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase;
  text-decoration: none; color: var(--blanc); white-space: nowrap;
}
.brand__mark {
  width: 24px; height: 24px; flex: none; background: var(--rose);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.nav__links { display: flex; align-items: center; gap: clamp(0.85rem, 1.5vw, 1.5rem); }
.nav__links a {
  font-size: 0.92rem; font-weight: 500; text-decoration: none; color: var(--gris);
  transition: color 0.2s var(--ease); white-space: nowrap;
}
.nav__links a:hover { color: var(--blanc); }
.nav .btn { padding: 0.68rem 1.15rem; font-size: 0.88rem; }

.burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--ligne-forte);
  border-radius: var(--r-control); cursor: pointer; color: var(--blanc);
}
.burger span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: currentColor; transition: transform 0.3s var(--ease);
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 72px 0 0; z-index: 45; background: var(--noir);
  padding: var(--pad); display: none; flex-direction: column; gap: 0.25rem; overflow-y: auto;
}
.drawer[data-open="true"] { display: flex; }
.drawer a {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(1.8rem, 7.5vw, 2.4rem); letter-spacing: -0.03em;
  text-decoration: none; color: var(--blanc);
  padding-block: 0.45rem; border-bottom: 1px solid var(--ligne);
}
.drawer .btn { margin-top: 1.5rem; width: 100%; }

html.menu-ouvert { overflow: hidden; }
@media (max-width: 1359px) { .nav__links { display: none; } .burger { display: inline-flex; } }
@media (min-width: 1360px) {
  html.menu-ouvert { overflow: visible; }
  .drawer[data-open="true"] { display: none; }
}
@media (max-width: 700px) { .nav__in > .btn { display: none; } .nav { height: 64px; } .drawer { inset-block-start: 64px; } }

/* ----------------------------------------------------------------- hero -- */
.hero { padding-top: clamp(1.25rem, 2.2vw, 2.5rem); padding-bottom: clamp(2rem, 4vw, 4rem); position: relative; }
.hero__eyebrow { margin-bottom: clamp(0.9rem, 1.6vw, 1.4rem); }
.hero h1 { margin-bottom: clamp(1.25rem, 2.4vw, 2.25rem); }
.hero__base {
  display: grid; gap: clamp(2rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}
.hero .lead { margin-bottom: clamp(1.6rem, 2.5vw, 2.1rem); }
@media (max-width: 900px) { .hero__base { grid-template-columns: 1fr; } .hero { padding-top: 1.25rem; } }

/* lecteur video : facade legere, l'iframe n'est injectee qu'au clic */
.player { position: relative; }
.player__frame {
  position: relative; overflow: hidden; border-radius: var(--r-surface);
  aspect-ratio: 16 / 9; max-height: 44vh; background: var(--noir-2);
  border: 1px solid var(--ligne);
}
.player__frame img { width: 100%; height: 100%; object-fit: cover; }
.player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__play {
  position: absolute; inset: auto auto 1.15rem 1.15rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1.35rem 0.8rem 1rem;
  background: var(--rose); color: var(--rose-ink);
  border: 0; border-radius: var(--r-control); cursor: pointer;
  font-family: "Switzer", sans-serif; font-weight: 600; font-size: 0.95rem;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.player__play svg { width: 15px; height: 15px; flex: none; }
.player__play:hover { transform: translateY(-2px); background: var(--blanc); }
/* Etat indisponible : fond plein plutot qu'opacite, sinon le libelle se melange
   a l'affiche et tombe sous le seuil. Le bouton reste focusable, c'est la regle
   pour aria-disabled : l'etat doit rester atteignable au clavier. */
.player__play[aria-disabled="true"] {
  background: var(--noir); color: var(--blanc);
  border: 1px solid var(--ligne-forte); cursor: default;
}
.player__note { margin-top: 0.85rem; font-size: 0.86rem; color: var(--gris); }

/* -------------------------------------------------------------- marquee -- */
.ribbon {
  border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne);
  padding-block: 1.1rem; overflow: hidden; background: var(--noir-2);
}
.ribbon__track { display: flex; width: max-content; gap: 2.5rem; animation: slide 46s linear infinite; }
.ribbon:hover .ribbon__track, .ribbon:focus-within .ribbon__track { animation-play-state: paused; }
.ribbon__track span {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem); letter-spacing: 0.02em;
  text-transform: uppercase; white-space: nowrap;
  display: flex; align-items: center; gap: 2.5rem; color: var(--blanc);
}
.ribbon__track span::after {
  content: ""; width: 7px; height: 7px; background: var(--rose); flex: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon { overflow-x: auto; } .ribbon__track { animation: none; } }

/* ------------------------------------------------------------ 2 colonnes -- */
.split {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
}
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split h2 { margin-bottom: 1.4rem; }
.split .body + .body { margin-top: 1.1rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split__media img { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------- manifeste -- */
/* Le moment de respiration de la page. La hierarchie est PORTEE PAR LA COULEUR,
   pas par une animation : la mise en place est en gris, la chute en blanc, le
   mot cle en rose. Aucune dependance a une mecanique de defilement, donc le
   texte est peint dans tous les cas.
   Une version animee mot a mot a ete tentee et retiree : impossible de prouver
   qu'elle se peignait, le risque d'un texte invisible en production n'en valait
   pas la peine. */
.manifeste {
  background: var(--noir);
  border-block: 1px solid var(--ligne);
  padding-block: clamp(5rem, 12vw, 9rem);
}
.manifeste__in { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.manifeste__filet {
  position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 2px;
  background: linear-gradient(180deg, var(--rose), rgb(255 61 110 / 0.05));
}
.manifeste__texte {
  margin: 0; padding-left: clamp(1.5rem, 3vw, 3rem);
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(1.75rem, 4.4vw, 4rem);
  line-height: 1.16; letter-spacing: -0.028em;
  max-width: 26ch;
}
/* la mise en place, en retrait */
.manifeste__mot { color: var(--gris); }
/* la chute, pleine lumiere : c'est elle qu'on doit retenir */
.manifeste__mot--fort { color: var(--blanc); }
.manifeste__mot--pop { color: var(--rose); }
.manifeste__saut { display: block; height: clamp(1rem, 2.2vw, 2rem); }

/* La signature manuscrite : le manifeste cesse d'etre une declaration anonyme
   pour devenir un engagement personnel. Police de signature auto-hebergee. */
.signature {
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  display: grid; gap: 0.2rem; justify-items: start;
}
.signature__nom {
  font-family: "Signature", "Clash Display", cursive;
  font-size: clamp(2.8rem, 5.2vw, 4.4rem);
  line-height: 1.15; color: var(--blanc);
  /* les deliés de cette police sont tres fins : un leger contour evite qu'ils
     disparaissent au rendu sur fond noir */
  -webkit-text-stroke: 0.4px var(--blanc);
  padding-bottom: 0.15em;
}
.signature__marque {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--gris);
}

/* -------------------------------------------------------- les 2 offres -- */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.path {
  display: flex; flex-direction: column;
  border: 1px solid var(--ligne); background: var(--noir-2);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.path:hover { border-color: var(--ligne-forte); transform: translateY(-4px); background: var(--noir-3); }
.path__media { overflow: hidden; }
.path__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: scale 0.6s var(--ease); }
.path:hover .path__media img { scale: 1.04; }
.path__in { padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.path__q {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem); letter-spacing: -0.02em; line-height: 1.3;
}
.path__in p { color: var(--gris); font-size: 1rem; }
.path__in .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

.selectivite {
  margin-top: clamp(2rem, 3vw, 2.75rem); padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--rose); background: var(--noir-2);
  color: var(--gris); max-width: 76ch; font-size: 0.98rem;
}
.selectivite strong { color: var(--blanc); font-weight: 600; }

/* ---------------------------------------------------------------- bento -- */
.bento {
  display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne);
  grid-template-columns: repeat(6, 1fr); margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.cell {
  background: var(--noir); padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.8rem; min-height: 220px;
  position: relative; overflow: hidden;
}
.cell h3 { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.cell__ico { width: 26px; height: 26px; color: var(--rose); margin-bottom: auto; }
.cell--a { grid-column: span 3; grid-row: span 2; padding: 0; min-height: 380px; }
.cell--a .cell__inner {
  position: relative; z-index: 2; padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.8rem; height: 100%;
}
.cell--a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cell--a .cell__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(11 10 12 / 0.3) 0%, rgb(11 10 12 / 0.9) 65%);
}
.cell--a h3 { color: #fff; position: relative; }
.cell--b, .cell--c, .cell--d, .cell--e { grid-column: span 3; }
.cell--tint { background: var(--noir-2); }
.cell--rose { background: var(--rose); }
.cell--rose h3 { color: var(--rose-ink); }
.cell--rose .cell__ico { color: var(--rose-ink); }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .cell--a, .cell--b, .cell--c, .cell--d, .cell--e { grid-column: 1 / -1; grid-row: auto; }
  .cell--a { min-height: 320px; }
}

/* ------------------------------------- les 7 piliers, defilement lateral -- */
/* Unique mecanique signature du site. Sur petit ecran elle redevient une
   pile verticale : pas de defilement horizontal impose au doigt. */
.piliers { border-block: 1px solid var(--ligne); }
.piliers__head { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.piliers__head h2 { max-width: 24ch; }
.piliers__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 420px);
  gap: clamp(1rem, 1.6vw, 1.5rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: var(--pad);
  /* Pas de scroll-behavior fluide ici : mesure faite, sur un conteneur a
     accrochage tout defilement fluide, CSS comme JS, est annule et revient a
     zero. Les commandes precedent/suivant defilent donc d'un coup, ce que
     l'accrochage rend de toute facon naturel. */
  padding-inline: var(--pad); padding-bottom: 1.5rem;
  scrollbar-width: thin; scrollbar-color: var(--ligne-forte) transparent;
}
.pilier {
  scroll-snap-align: start;
  border: 1px solid var(--ligne); background: var(--noir-2);
  padding: clamp(1.5rem, 2.2vw, 2rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.pilier:hover { border-color: var(--ligne-forte); background: var(--noir-3); }
.pilier__n {
  font-family: "Clash Display", sans-serif; font-weight: 700; font-size: 0.85rem;
  color: var(--rose); letter-spacing: 0.06em;
}
.pilier p { color: var(--gris); font-size: 0.97rem; }
.pilier strong { color: var(--blanc); font-weight: 600; }
.piliers__aide { margin-top: 0.5rem; font-size: 0.86rem; color: var(--gris); }
.piliers__cmd { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.piliers__cmd button {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--blanc);
  border: 1px solid var(--ligne-forte); border-radius: var(--r-control); cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.piliers__cmd button:hover { background: var(--blanc); color: var(--noir); }
.piliers__cmd button svg { width: 18px; height: 18px; }
.piliers__cmd button:first-child svg { transform: rotate(180deg); }
@media (max-width: 760px) { .piliers__cmd { display: none; } }
@media (max-width: 760px) {
  .piliers__rail {
    grid-auto-flow: row; grid-auto-columns: auto;
    overflow-x: visible; scroll-snap-type: none; padding-inline: 0; padding-bottom: 0;
  }
  .piliers__aide { display: none; }
}

/* ----------------------------------------------------------- communaute -- */
.band { position: relative; overflow: hidden; }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.band__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--noir) 0%, rgb(11 10 12 / 0.75) 50%, rgb(11 10 12 / 0.45) 100%);
}
.band__in { position: relative; z-index: 1; padding-block: clamp(5rem, 10vw, 8.5rem); }
.band__in h2 { max-width: 15ch; margin-bottom: 1.3rem; }
.band__in p { color: var(--gris); max-width: 54ch; }

.perks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--ligne); border: 1px solid var(--ligne);
  margin-top: clamp(2rem, 3vw, 2.75rem);
}
.perk { background: var(--noir); padding: clamp(1.4rem, 2.2vw, 2rem); display: flex; flex-direction: column; gap: 0.7rem; }
.perk__ico { width: 24px; height: 24px; color: var(--rose); }
.perk p { font-size: 1rem; color: var(--blanc); max-width: 34ch; }
@media (max-width: 880px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .perks { grid-template-columns: 1fr; } }

.closing { margin-top: clamp(2rem, 3.5vw, 3rem); display: grid; gap: 1.4rem; }
.closing-note {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.25;
  max-width: 34ch;
}

/* ------------------------------------------ mission, unique bloc clair -- */
.clair { background: var(--clair-bg); color: var(--clair-fg); }
.clair h2, .clair h3 { color: var(--clair-fg); }
.clair .body, .clair p { color: var(--clair-gris); }
.mission__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mission__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mission__grid .body + .body { margin-top: 1.1rem; }
.clair .mission__statement {
  margin-top: clamp(3rem, 6vw, 5.5rem); padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--clair-ligne);
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(1.8rem, 4.4vw, 3.8rem); letter-spacing: -0.032em; line-height: 1.04;
  color: var(--clair-fg); max-width: 20ch;
}
.clair .mission__statement em { font-style: normal; color: #d1004a; }
@media (max-width: 860px) { .mission__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- avis, galerie -- */
.wall:empty { display: none; }
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.35rem); margin-top: clamp(2rem, 3vw, 2.5rem); }
.wall__item {
  border: 1px solid var(--ligne); background: var(--noir-2);
  padding: clamp(1.35rem, 2vw, 1.85rem); display: flex; flex-direction: column; gap: 1rem; min-height: 210px;
}
.wall__item blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.wall__who { margin-top: auto; font-size: 0.88rem; color: var(--gris); }
.wall__who strong { display: block; color: var(--blanc); font-weight: 600; font-size: 0.95rem; }
@media (max-width: 880px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wall { grid-template-columns: 1fr; } }

.galerie {
  display: grid; gap: clamp(0.6rem, 1vw, 0.9rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 17vw, 230px);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.galerie__item { margin: 0; overflow: hidden; background: var(--noir-2); position: relative; border: 1px solid var(--ligne); }
.galerie__item img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.7s var(--ease); }
.galerie__item:hover img { scale: 1.05; }
.galerie__item--large { grid-column: span 2; grid-row: span 2; }
.galerie__item--large .player__frame { aspect-ratio: auto; max-height: none; height: 100%; border: 0; }
.galerie__item--large .player__play { inset: auto auto 1rem 1rem; }
.galerie__note { margin-top: 1.25rem; font-size: 0.88rem; color: var(--gris); }
@media (max-width: 760px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 30vw, 190px); }
  .galerie__item--large { grid-column: span 2; grid-row: span 2; }
  .galerie__item:last-of-type { grid-column: span 2; }
}

/* etat d'attente assume, langage commun des contenus a venir */
.slot {
  border: 1px dashed var(--ligne-forte); background: var(--noir-2);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 0.9rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); min-height: 210px;
}
.slot__ico { width: 40px; height: 40px; padding: 9px; color: var(--rose-ink); background: var(--rose); flex: none; }
.slot__label { font-size: 1rem; font-weight: 600; }
.slot__hint { font-size: 0.86rem; color: var(--gris); margin-top: 0.35rem; max-width: 30ch; }

/* --------------------------------------------------------------- CTA rose -- */
.cta { background: var(--rose); color: var(--rose-ink); }
.cta h2 { color: var(--rose-ink); max-width: 16ch; }
.cta p { color: var(--rose-ink); max-width: 52ch; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cta__etapes { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.cta__etapes li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.97rem; color: var(--rose-ink); }
.cta__etapes svg { width: 18px; height: 18px; flex: none; margin-top: 0.28rem; }
.cta__note { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(11 10 12 / 0.25); font-size: 0.95rem; }
@media (max-width: 860px) { .cta__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- footer -- */
.foot { border-top: 1px solid var(--ligne); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem); }
.foot h3 { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--gris); font-family: "Switzer", sans-serif; margin-bottom: 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.foot a { color: var(--gris); text-decoration: none; font-size: 0.95rem; transition: color 0.2s var(--ease); }
.foot a:hover { color: var(--blanc); }
.foot__brand p { color: var(--gris); max-width: 34ch; margin-top: 1rem; font-size: 0.95rem; }
.foot__base { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--ligne); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: 0.86rem; color: var(--gris); }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ formulaire -- */
.form-page { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.form-aside { position: sticky; top: 110px; }
.form-aside h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 1.2rem; }
.form-aside ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.9rem; }
.form-aside li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--gris); font-size: 0.97rem; }
.form-aside li svg { width: 18px; height: 18px; flex: none; color: var(--rose); margin-top: 0.28rem; }
@media (max-width: 900px) { .form-page { grid-template-columns: 1fr; } .form-aside { position: static; } }

.field { display: grid; gap: 0.5rem; margin-bottom: 1.4rem; }
.field label { font-size: 0.92rem; font-weight: 600; }
.field .hint { font-size: 0.84rem; color: var(--gris); }
.field input, .field select, .field textarea {
  font-family: "Switzer", sans-serif; font-size: 1rem; color: var(--blanc);
  background: var(--noir-2); border: 1px solid var(--bord-champ);
  border-radius: var(--r-surface); padding: 0.85rem 1rem; width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--gris); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--blanc); box-shadow: 0 0 0 3px rgb(244 240 236 / 0.22);
}
.field .err { font-size: 0.85rem; color: var(--rose); font-weight: 500; display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--rose); }
.field[data-invalid="true"] .err { display: block; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .field--row { grid-template-columns: 1fr; } }

.radios { display: grid; gap: 0.6rem; }
.radio {
  display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--bord-champ); padding: 0.9rem 1rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.radio:hover { border-color: var(--blanc); }
.radio input { width: auto; margin-top: 0.28rem; accent-color: var(--rose); flex: none; }
.radio span { font-size: 0.97rem; }
.radio small { display: block; color: var(--gris); font-size: 0.87rem; margin-top: 0.15rem; }
.radio:has(input:checked) { border-color: var(--rose); background: rgb(255 61 110 / 0.09); }

.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9rem; color: var(--gris); }
.consent input { width: auto; margin-top: 0.25rem; accent-color: var(--rose); flex: none; }
.consent a { color: var(--blanc); }

/* etat d'envoi du formulaire */
.form-envoi { display: none; margin-top: 1rem; padding: 1rem 1.25rem; border-left: 2px solid var(--rose); background: var(--noir-2); font-size: 0.94rem; color: var(--gris); }
.form-envoi[data-etat="erreur"] { display: block; }
.form-envoi[data-etat="erreur"] strong { color: var(--blanc); display: block; margin-bottom: 0.3rem; }
button[data-envoi="1"] { opacity: 0.7; pointer-events: none; }

/* ----------------------------------------------------------- page legale -- */
.prose { max-width: 68ch; }
.prose h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; }
.prose h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-top: 2.75rem; margin-bottom: 0.85rem; }
.prose p, .prose li { color: var(--gris); }
.prose p + p { margin-top: 1rem; }
.prose ul { padding-left: 1.15rem; display: grid; gap: 0.5rem; margin: 1rem 0 0; }
.prose strong { color: var(--blanc); }

/* --------------------------------------------------------------- reveal -- */
/* Revelations pilotees par le defilement, en CSS natif. Le contenu est
   VISIBLE par defaut : si le navigateur ne sait pas animer sur le scroll,
   ou si le JS ne s'execute pas, rien ne disparait. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    @keyframes apparition {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
  }
}


/* ==========================================================================
   WIDGETS FLOTTANTS : assistant (bas gauche) et WhatsApp (bas droite)
   Injectes par widgets.js. Sans JS ils n'existent pas, le site reste complet.
   ========================================================================== */
.wdg { position: fixed; bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 70; }
.wdg--gauche { left: clamp(1rem, 2.5vw, 1.75rem); }
.wdg--droite { right: clamp(1rem, 2.5vw, 1.75rem); }

/* --- lanceurs --- */
.wdg__btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  height: 56px; padding: 0 1.35rem;
  border: 1px solid var(--ligne-forte); border-radius: var(--r-control);
  background: var(--noir-2); color: var(--blanc); cursor: pointer;
  font-family: "Switzer", sans-serif; font-size: 0.94rem; font-weight: 600;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.9);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wdg__btn:hover { transform: translateY(-2px); background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.wdg__btn:active { transform: translateY(0) scale(0.98); }
.wdg__btn svg { width: 20px; height: 20px; flex: none; }

/* WhatsApp garde sa couleur de marque : c'est un repere universel */
.wdg__btn--wa { background: #25d366; color: #08130c; border-color: #25d366; width: 56px; padding: 0; justify-content: center; }
.wdg__btn--wa:hover { background: #1fb457; color: #08130c; border-color: #1fb457; }
.wdg__btn--wa svg { width: 26px; height: 26px; }

.wdg__pastille {
  position: absolute; top: -4px; right: -4px; width: 12px; height: 12px;
  background: var(--rose); border-radius: 50%; border: 2px solid var(--noir);
}
@media (max-width: 560px) {
  .wdg__btn { height: 52px; width: 52px; padding: 0; justify-content: center; }
  .wdg__btn .wdg__libelle { display: none; }
}

/* --- panneau de l'assistant --- */
.wdg__panneau {
  position: fixed; bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 68px);
  left: clamp(1rem, 2.5vw, 1.75rem);
  width: min(380px, calc(100vw - 2rem));
  max-height: min(560px, calc(100vh - 8rem));
  display: none; flex-direction: column;
  background: var(--noir-2); border: 1px solid var(--ligne-forte);
  box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.95);
  z-index: 71;
}
.wdg__panneau[data-ouvert="true"] { display: flex; }

.wdg__tete {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--ligne);
}
.wdg__tete .marque {
  width: 26px; height: 26px; flex: none; background: var(--rose);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.wdg__tete h2 {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: 1rem; letter-spacing: -0.01em; margin: 0; flex: 1;
}
.wdg__tete p { font-size: 0.76rem; color: var(--gris); margin-top: 0.1rem; }
.wdg__fermer {
  width: 32px; height: 32px; flex: none; display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--ligne); border-radius: var(--r-control);
  color: var(--blanc); cursor: pointer; font-size: 1rem; line-height: 1;
}
.wdg__fermer:hover { background: var(--blanc); color: var(--noir); }

.wdg__fil {
  flex: 1; overflow-y: auto; padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  scrollbar-width: thin; scrollbar-color: var(--ligne-forte) transparent;
}
.wdg__msg { max-width: 92%; font-size: 0.93rem; line-height: 1.55; }
.wdg__msg--bot { color: var(--blanc); background: var(--noir-3); border: 1px solid var(--ligne); padding: 0.75rem 0.9rem; align-self: flex-start; }
.wdg__msg--moi { color: var(--rose-ink); background: var(--rose); padding: 0.6rem 0.9rem; align-self: flex-end; font-weight: 600; }
.wdg__msg a { color: var(--rose); font-weight: 600; }
.wdg__msg strong { color: var(--blanc); }

.wdg__choix { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0 1.1rem 1.1rem; }
.wdg__choix button {
  font-family: "Switzer", sans-serif; font-size: 0.85rem; font-weight: 500;
  padding: 0.5rem 0.85rem; border-radius: var(--r-control);
  border: 1px solid var(--ligne-forte); background: transparent; color: var(--blanc);
  cursor: pointer; text-align: left;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.wdg__choix button:hover { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }

.wdg__pied { border-top: 1px solid var(--ligne); padding: 0.85rem 1.1rem; font-size: 0.78rem; color: var(--gris); }
.wdg__pied a { color: var(--blanc); }

.wdg__saisie { display: flex; gap: 0.5rem; padding: 0.85rem 1.1rem; border-top: 1px solid var(--ligne); }
.wdg__saisie input {
  flex: 1; font-family: "Switzer", sans-serif; font-size: 0.9rem; color: var(--blanc);
  background: var(--noir); border: 1px solid var(--bord-champ); padding: 0.6rem 0.8rem;
}
.wdg__saisie input:focus-visible { outline: none; border-color: var(--blanc); box-shadow: 0 0 0 3px rgb(244 240 236 / 0.18); }
.wdg__saisie button {
  width: 40px; flex: none; background: var(--rose); color: var(--rose-ink);
  border: 0; border-radius: var(--r-control); cursor: pointer;
}
.wdg__saisie button svg { width: 16px; height: 16px; margin: 0 auto; }

@media (max-width: 560px) {
  .wdg__panneau { left: 1rem; right: 1rem; width: auto; bottom: calc(1rem + 64px); }
}
/* le panneau ouvert ne doit pas cohabiter avec la bulle WhatsApp sur petit ecran */
@media (max-width: 560px) {
  body[data-chat="ouvert"] .wdg--droite { display: none; }
}

/* ============================================================ rajouts 09-2026
   Section Programme / Formations (remplace les modules video) et formulaire
   d'avis. Aucun token nouveau : memes variables que le reste du systeme.      */
.formations{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--ligne);border:1px solid var(--ligne);
  margin-top:clamp(2rem,3vw,2.75rem);
}
.formation{
  background:var(--noir);padding:clamp(1.4rem,2.2vw,2rem);
  display:flex;flex-direction:column;gap:.7rem;
}
.formation__ico{width:26px;height:26px;color:var(--rose)}
.formation h3{
  font-family:"Clash Display",sans-serif;font-weight:600;
  font-size:clamp(1.05rem,1.4vw,1.25rem);letter-spacing:-.01em;line-height:1.15;
}
.formation p{font-size:.95rem;color:var(--gris);line-height:1.55}
@media(max-width:900px){.formations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.formations{grid-template-columns:1fr}}

/* Formulaire d'avis : reprend l'ecriture des champs du site */
.avis-form{margin-top:clamp(2rem,3vw,2.5rem);display:grid;gap:1rem;max-width:640px}
.avis-form label{display:grid;gap:.45rem;font-size:.9rem;color:var(--gris)}
.avis-form input,.avis-form textarea{
  font:inherit;font-size:1rem;color:var(--blanc);background:var(--noir-2);
  border:1px solid var(--bord-champ);padding:.72rem .85rem;border-radius:0;
}
.avis-form input:focus-visible,.avis-form textarea:focus-visible{
  outline:2px solid var(--rose);outline-offset:1px;border-color:var(--rose);
}
.avis-form textarea{min-height:120px;resize:vertical}
.avis-form .btn{justify-self:start}
.avis-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Cadrage des piliers : la ligne de lecture respire, hauteur homogene */
.pilier p{line-height:1.6}

/* ============================================================ demande cliente
   09-2026 : corps de texte justifie sur toute la page. Cesure automatique
   (la page est en lang="fr") pour eviter les espacements trop larges du
   justifie. On ne justifie que le texte courant : jamais les titres, la nav,
   les boutons, les eyebrows ni les libelles de champ.                        */
.lead, .body, .selectivite, .galerie__note,
.path__in p, .pilier p, .perk p, .formation p,
.band__in p, .closing .body, .mission__grid p, .cta__grid p,
.foot__brand p, .wall__item blockquote,
.offre__detail p, .offre__renvoi {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ============================================================ rajouts 10-2026
   Section Formations & Accompagnements (remplace la grille des 11 themes) :
   5 offres reelles avec prix, selecteur de devise CHF/EUR, biographie reelle
   et texte de mission au mot pres. Memes tokens que le reste du systeme.      */

/* fin du bloc mission : les deux lignes de signature, sous la grande citation */
.clair .mission__signature {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  font-size: 0.95rem; font-weight: 600; color: var(--clair-gris);
  line-height: 1.6;
}

/* Les liens internes (menu, renvois "Decouvrir Liberty Boss") visent des
   ancres : sans cette marge, le header colle de 72px recouvre le haut de la
   cible. scroll-margin n'agit QUE sur le positionnement d'ancrage. */
[id] { scroll-margin-top: 88px; }

/* en-tete de la section formations : le selecteur de devise vit SOUS l'intro,
   dans la colonne de lecture. Constate en prod le 01/10 : range a droite en
   flex space-between, il flottait seul a 400px du texte sur grand ecran et
   passait sous le header au defilement. */
.devise {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap;
}
.devise__toggle {
  display: inline-flex; padding: 3px; flex: none;
  background: var(--noir-2); border: 1px solid var(--ligne-forte);
  border-radius: var(--r-control);
}
.devise__btn {
  font-family: "Switzer", sans-serif; font-size: 0.85rem; font-weight: 600;
  padding: 0.5rem 1.1rem; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--gris); cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.devise__btn[aria-pressed="true"] { background: var(--rose); color: var(--rose-ink); }
.devise__note { margin: 0; font-size: 0.8rem; color: var(--gris); max-width: 46ch; }

/* grille des 5 offres, meme recette que .bento : hairlines 1px entre cellules */
.offres {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
  background: var(--ligne); border: 1px solid var(--ligne);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
#offre-clone-ia, #offre-tiktok-shop, #offre-marketing-pro, #offre-coaching { grid-column: span 2; }
#offre-liberty-boss { grid-column: span 4; }

.offre {
  background: var(--noir); display: flex; flex-direction: column;
}
.offre--pop { outline: 1px solid var(--rose); outline-offset: -1px; }
.offre__card {
  padding: clamp(1.5rem, 2.2vw, 2rem); display: flex; flex-direction: column; gap: 0.75rem; flex: 1;
}
.offre__card h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.015em;
}
.offre--pop .offre__card h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); }

.offre__badge {
  align-self: flex-start; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 0.4rem 0.75rem; border: 1px solid var(--ligne-forte); color: var(--gris);
}
.offre__badge--pop { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }

.offre__tagline { color: var(--gris); font-size: 0.97rem; }
.offre__meta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--rose); text-transform: uppercase; }

.offre__prix { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.3rem; }
.offre__prix-ancien { font-size: 0.95rem; color: var(--gris-faible); }
.offre__prix-actuel {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -0.02em; color: var(--blanc);
}
.offre--pop .offre__prix-actuel { color: var(--rose); }
.offre__unique { margin-top: -0.4rem; font-size: 0.8rem; color: var(--gris); }

.offre__benefices { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.offre__benefices li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; color: var(--gris); }
.offre__benefices svg { width: 16px; height: 16px; flex: none; margin-top: 0.22rem; color: var(--rose); }

/* Les libelles de CTA sont le verbatim du mail de Sarah ("Je deviens mon
   propre pilote marketing pro - 1'950 CHF") : trop longs pour tenir en
   nowrap dans une carte, ils se replient proprement au centre. */
.offre__cta {
  margin-top: auto; align-self: flex-start;
  max-width: 100%; white-space: normal; flex-wrap: wrap;
  justify-content: center; text-align: center; line-height: 1.4;
  row-gap: 0.1rem;
}

/* detail complet, replie par defaut : natif, fonctionne sans JS */
.offre__plus { border-top: 1px solid var(--ligne); }
.offre__plus summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1.5rem, 2.2vw, 2rem);
  font-size: 0.85rem; font-weight: 600; color: var(--gris);
  transition: color 0.2s var(--ease);
}
.offre__plus summary::-webkit-details-marker { display: none; }
.offre__plus summary:hover { color: var(--blanc); }
.offre__chev { width: 14px; height: 14px; flex: none; transform: rotate(90deg); transition: transform 0.25s var(--ease); }
.offre__plus[open] .offre__chev { transform: rotate(-90deg); }

.offre__detail {
  padding: 0 clamp(1.5rem, 2.2vw, 2rem) clamp(1.5rem, 2.2vw, 2rem);
  display: grid; gap: 0.9rem; font-size: 0.93rem; color: var(--gris);
}
.offre__detail ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.offre__detail strong { color: var(--blanc); font-weight: 600; }
.offre__resultat {
  font-family: "Clash Display", sans-serif; font-weight: 600; letter-spacing: -0.01em;
  font-size: 1rem; color: var(--blanc);
}
.offre--pop .offre__resultat { color: var(--rose); }
.offre__renvoi { font-size: 0.88rem; }
.offre__renvoi a { color: var(--rose); font-weight: 600; text-decoration: none; white-space: nowrap; }
.offre__renvoi a svg { width: 12px; height: 12px; margin-left: 0.15rem; }

/* mention demandee par le mail formations sous les CTA : "Prix normal : X CHF" */
.offre__prix-normal { margin: 0.65rem 0 0; font-size: 0.8rem; color: var(--gris); }

/* ------------------------------------------------------------------ */
/* narratif 08.09 (sections #apprendre, #equipe, #partage)             */
/* Texte a gauche, composition animee collee (sticky) a droite.        */
/* ------------------------------------------------------------------ */
.duo {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.duo__visuel { position: sticky; top: 110px; }

.statement {
  margin: clamp(2.4rem, 5vw, 3.8rem) 0 clamp(1.6rem, 3vw, 2.4rem);
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(1.75rem, 4.2vw, 3.1rem); line-height: 1.08;
  letter-spacing: 0.005em; color: var(--blanc); max-width: 22ch; text-wrap: balance;
}
.statement .pop { color: var(--rose); }
.statement--pop { color: var(--rose); max-width: 28ch; }

/* trait qui se dessine sous "trouver des clients" ; trace par defaut,
   anime seulement quand le navigateur sait suivre le defilement */
.pop--trait { position: relative; }
.pop--trait::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em;
  height: 0.085em; background: var(--rose); transform-origin: left;
}

/* --- scene "IA" : mot geant + pilules flottantes ------------------- */
.chips { position: relative; height: clamp(420px, 44vw, 560px); }
.chips__fond {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Clash Display", sans-serif; font-weight: 600; line-height: 1;
  font-size: clamp(11rem, 24vw, 19rem);
  color: transparent; -webkit-text-stroke: 1.5px var(--ligne-forte);
  user-select: none;
}
.chips__fond::after {
  content: "IA"; position: absolute; inset: 0; display: grid; place-items: center;
  -webkit-text-stroke: 1.5px var(--rose); color: transparent; opacity: 0;
}
.chip {
  position: absolute; padding: 0.5rem 0.95rem; white-space: nowrap;
  background: var(--noir-2); border: 1px solid var(--ligne-forte);
  border-radius: var(--r-control);
  font-size: 0.85rem; font-weight: 600; color: var(--gris);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease);
}
.chip:hover { background: var(--rose); border-color: var(--rose); color: var(--rose-ink); }
.chip--pop { color: var(--blanc); border-color: var(--rose); }
.c1  { top: 5%;  left: 6%; }
.c2  { top: 12%; right: 5%; }
.c3  { top: 30%; left: 1%; }
.c4  { top: 26%; right: 1%; }
.c5  { top: 47%; left: 9%; }
.c6  { top: 43%; right: 10%; }
.c7  { top: 64%; left: 1%; }
.c8  { top: 60%; right: 3%; }
.c9  { top: 79%; left: 12%; }
.c10 { top: 75%; right: 14%; }
.c11 { bottom: 3%; left: 4%; }
.c12 { bottom: 6%; right: 2%; }

/* --- pile de cartes : la litanie question / reponse ----------------- */
.cartes-qr { list-style: none; margin: 0; padding: 0.5rem 0 0; display: grid; gap: 1.05rem; }
.carte-qr {
  padding: 1.15rem 1.35rem;
  background: var(--noir-2); border: 1px solid var(--ligne-forte);
  transform: rotate(var(--rot, 0deg)) translateX(var(--dx, 0));
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.carte-qr:nth-child(1) { --rot: -1.3deg; --dx: 4px; }
.carte-qr:nth-child(2) { --rot: 1.5deg;  --dx: -6px; }
.carte-qr:nth-child(3) { --rot: -0.8deg; --dx: 10px; }
.carte-qr:nth-child(4) { --rot: 1.1deg;  --dx: -2px; }
.carte-qr:hover { transform: rotate(0deg) translateX(0) translateY(-4px); border-color: var(--rose); }
.carte-qr strong {
  display: block; margin-bottom: 0.3rem;
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: 1.22rem; color: var(--blanc);
}
.carte-qr span { color: var(--gris); font-size: 0.95rem; }

/* --- constellation : le reseau de Sarah ----------------------------- */
/* geometrie par variables : rayons et longueurs de liens suivent le
   meme jeu, et le mobile redefinit simplement le jeu (pas de scale) */
.reseau { display: grid; place-items: center; }
.reseau__scene {
  --ry-h: 225px;  /* rayon vertical haut/bas */
  --dx-d: 150px; --dy-d: 160px; /* decalages des diagonales */
  --rx-c: 160px;  /* rayon lateral */
  --lh: 225px; --ld: 219px; --lc: 160px; /* longueurs des liens */
  /* width:100% (et non 480px fixe) : un width fixe aurait un min-content
     de 480 qui elargirait la grille .duo et toute la page en mobile */
  position: relative; width: 100%; max-width: 480px; height: 560px;
}
.reseau__coeur {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 108px; height: 108px;
  border-radius: 50%; background: var(--rose); color: var(--rose-ink);
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.15rem;
}
.reseau__coeur::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 1px solid var(--rose); opacity: 0.45;
}
.reseau__noeud {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 0.45rem 0.9rem;
  background: var(--noir-2); border: 1px solid var(--ligne-forte);
  border-radius: var(--r-control);
  font-size: 0.82rem; font-weight: 600; color: var(--gris);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.reseau__noeud:hover { color: var(--blanc); border-color: var(--rose); }
.n1 { left: 50%;                        top: calc(50% - var(--ry-h)); }
.n2 { left: calc(50% + var(--dx-d));    top: calc(50% - var(--dy-d)); }
.n3 { left: calc(50% + var(--rx-c));    top: 50%; }
.n4 { left: calc(50% + var(--dx-d));    top: calc(50% + var(--dy-d)); }
.n5 { left: 50%;                        top: calc(50% + var(--ry-h)); }
.n6 { left: calc(50% - var(--dx-d));    top: calc(50% + var(--dy-d)); }
.n7 { left: calc(50% - var(--rx-c));    top: 50%; }
.n8 { left: calc(50% - var(--dx-d));    top: calc(50% - var(--dy-d)); }
.reseau__lien {
  position: absolute; left: 50%; top: 50%; height: 1px;
  background: linear-gradient(90deg, var(--rose), var(--ligne-forte));
  transform-origin: 0 50%; opacity: 0.55;
}
.l1 { width: var(--lh); transform: rotate(-90deg); }
.l2 { width: var(--ld); transform: rotate(-46.8deg); }
.l3 { width: var(--lc); transform: rotate(0deg); }
.l4 { width: var(--ld); transform: rotate(46.8deg); }
.l5 { width: var(--lh); transform: rotate(90deg); }
.l6 { width: var(--ld); transform: rotate(133.2deg); }
.l7 { width: var(--lc); transform: rotate(180deg); }
.l8 { width: var(--ld); transform: rotate(-133.2deg); }

/* --- echelle en crescendo ------------------------------------------- */
.echelle {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  font-family: "Clash Display", sans-serif; font-weight: 600; color: var(--blanc);
}
.echelle li { line-height: 1.32; }
.echelle li:nth-child(1) { font-size: clamp(1.02rem, 1.7vw, 1.25rem); opacity: 0.5; }
.echelle li:nth-child(2) { font-size: clamp(1.1rem, 1.9vw, 1.4rem);  opacity: 0.58; }
.echelle li:nth-child(3) { font-size: clamp(1.18rem, 2.1vw, 1.55rem); opacity: 0.66; }
.echelle li:nth-child(4) { font-size: clamp(1.26rem, 2.3vw, 1.7rem);  opacity: 0.74; }
.echelle li:nth-child(5) { font-size: clamp(1.34rem, 2.5vw, 1.85rem); opacity: 0.82; }
.echelle li:nth-child(6) { font-size: clamp(1.42rem, 2.7vw, 2rem);    opacity: 0.9; }
.echelle li:nth-child(7) { font-size: clamp(1.5rem, 2.9vw, 2.15rem);  opacity: 1; }
.echelle__fin {
  margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gris);
}

/* --- vie des compositions (jamais sous reduced-motion) -------------- */
@media (prefers-reduced-motion: no-preference) {
  .chip { animation: flotte 7s ease-in-out infinite alternate; }
  .c2, .c5, .c8, .c11 { animation-duration: 8.4s; animation-delay: -2.2s; }
  .c3, .c6, .c9, .c12 { animation-duration: 6.2s; animation-delay: -3.6s; }
  .c4, .c7, .c10      { animation-duration: 9.1s; animation-delay: -1.1s; }
  .chips__fond::after { animation: respire 7s ease-in-out infinite; }
  .coeur { display: inline-block; animation: bat 1.9s ease-in-out infinite; }
  .reseau__coeur::after { animation: onde 3.2s ease-out infinite; }
  .reseau__lien { animation: scintille 4.4s ease-in-out infinite alternate; }
  .l2, .l5, .l8 { animation-delay: -1.6s; }
  .l3, .l6 { animation-delay: -2.9s; }

  @keyframes flotte { from { transform: translateY(-7px); } to { transform: translateY(8px); } }
  @keyframes respire { 0%, 100% { opacity: 0; } 50% { opacity: 0.55; } }
  @keyframes bat {
    0%, 48%, 100% { transform: scale(1); }
    12% { transform: scale(1.22); }
    24% { transform: scale(1); }
    36% { transform: scale(1.12); }
  }
  @keyframes onde { from { transform: scale(0.82); opacity: 0.5; } to { transform: scale(1.4); opacity: 0; } }
  @keyframes scintille { from { opacity: 0.3; } to { opacity: 0.8; } }

  @supports (animation-timeline: view()) {
    .pop--trait::after {
      animation: trait linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 45%;
    }
    @keyframes trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* --- repli : une colonne, compositions compactes --------------------- */
@media (max-width: 1080px) {
  /* minmax(0,...) obligatoire : "1fr" seul vaut minmax(auto,1fr) et le
     min-content de la scene reseau (480px) elargirait toute la grille */
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo__visuel { position: static; }
  .chips { height: 380px; max-width: 540px; }
  .chips__fond { font-size: clamp(9rem, 38vw, 13rem); }
  /* pleine largeur : plus de rotation (nth-child pour matcher la
     specificite des reglages desktop, sinon ils gagnent) */
  .carte-qr:nth-child(n) { --rot: 0deg; --dx: 0px; }
}
@media (max-width: 560px) {
  .chips { height: 320px; }
  .c5, .c10 { display: none; } /* desserre la scene sur petit ecran */
  /* constellation compacte : meme geometrie, petit jeu de rayons */
  .reseau__scene {
    --ry-h: 150px; --dx-d: 100px; --dy-d: 105px; --rx-c: 102px;
    --lh: 150px; --ld: 145px; --lc: 102px;
    height: 375px;
  }
  .reseau__coeur { width: 84px; height: 84px; font-size: 1rem; }
  .reseau__noeud { font-size: 0.72rem; padding: 0.35rem 0.65rem; }
}

/* biographie : depliant du texte integral + signature */
.bio__plus { margin-top: 1.5rem; border-bottom: 1px solid var(--ligne); }
.bio__sign {
  font-family: "Signature", "Clash Display", cursive;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1.15; color: var(--blanc);
}
.bio__sign span {
  display: block; margin-top: 0.3rem;
  font-family: "Switzer", sans-serif; font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris);
}

@media (max-width: 900px) {
  .offres { grid-template-columns: 1fr; }
  #offre-clone-ia, #offre-tiktok-shop, #offre-marketing-pro, #offre-liberty-boss, #offre-coaching { grid-column: 1 / -1; }
}