/* ============================================================
   KOI — Communaute
   Systeme de design releve sur moreland.webflow.io (28/10/2026) :
   memes variables de typographie, rayons, espacements et couleurs.
   Seules deux choses changent : la police (Google Sans au lieu de
   Geist) et la couleur de marque (orange KOI au lieu du lavande).
   ============================================================ */

:root {
  /* ---- couleurs (identiques a Moreland, sauf --brand) ---- */
  --primary-bg: #fcfcfd;
  --secondary-bg: #f3f4f7;
  --secondary-bg-mute: #f3f4f7cc;
  --black: #17181c;
  --bg-dark: #28292d;
  --dark-divider: #363a43;
  --body-text: #525866;
  --secondary-text: #717784;
  --mute: #8a909c;
  --nav-link: #4e5360;
  --divider: #e6e9ef;
  --input-border: #dde1e8;
  --black-soft: #00000014;
  --white-soft: #ffffff80;
  --primary-soft: #f7f6f514;

  --brand: #e34400;
  --brand-dark: #a93300;
  --brand-soft: #ffe7dc;
  --accent-1: #d7e9ff;
  --accent-2: #f4e7c7;
  --accent-3: #e5a2a2;
  --accent-4: #a2bfe5;

  /* ---- typographie ---- */
  --font: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  --h-big: 96px;
  --h1: 64px;
  --h2: 48px;
  --h3: 40px;
  --h4: 32px;
  --h5: 28px;
  --h6: 24px;
  --t-big: 80px;
  --t-xxl: 24px;
  --t-xl: 20px;
  --t-l: 18px;
  --t-m: 16px;
  --t-s: 14px;
  --t-sm: 12px;

  /* interlignages et chasses, releves un par un sur Moreland */
  --lh-h1: 1.1em;  --ls-h1: -.042em;
  --lh-h2: 1.1em;  --ls-h2: -.042em;
  --lh-h3: 1.1em;  --ls-h3: -.041em;
  --lh-h4: 1.25em; --ls-h4: .5px;
  --lh-h5: 1.2em;  --ls-h5: -.05em;
  --lh-h6: 1.3em;  --ls-h6: -.05em;
  --ls-l: -.01em;
  --ls-m: -.025em;
  --ls-xl: -.02em;
  --ls-xxl: -.025em;

  /* ---- rayons ---- */
  --r-xxs: 4px;
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 16px;
  --r-bouton: 18px;
  --r-l: 24px;
  --r-xl: 32px;
  --r-xxl: 44px;

  /* ---- espacements ---- */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-s: 12px;
  --sp-m: 16px;
  --sp-l: 20px;
  --sp-xl: 24px;
  --sp-xxl: 28px;
  --sp-2xl: 32px;
  --sp-3xl: 36px;
  --sp-4xl: 40px;
  --sp-5xl: 44px;
  --sp-6xl: 48px;
  --sp-7xl: 64px;
  --sp-8xl: 80px;
  --sp-9xl: 120px;
  --sp-10xl: 160px;
}

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

/* Lenis pilote le defilement : le natif doit rester en "auto". */
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--primary-bg);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: 1.5;
  letter-spacing: var(--ls-m);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
h1 { font-size: var(--h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
h5 { font-size: var(--h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
h6 { font-size: var(--h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }
p { margin: 0; color: var(--body-text); }

a { color: inherit; text-decoration: none; }

/* Moreland n impose aucune largeur maximale : le conteneur occupe
   toute la fenetre, avec 32px de marge de chaque cote. */
.conteneur {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-2xl);
}

.section { padding: var(--sp-9xl) 0 var(--sp-10xl); }
.section--court { padding: var(--sp-9xl) 0; }
.section--sombre { background: var(--black); color: #fff; }
.section--gris { background: var(--secondary-bg); }

/* ============================================ boutons (roulement) */
/* Moreland empile deux copies du libelle : au survol, les lettres de
   la copie du haut montent de -100% une par une (GSAP), et celles de
   la copie du bas prennent leur place. */
.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  height: 48px;
  padding: var(--sp-s) var(--sp-m);
  border: 1px solid transparent;
  border-radius: var(--r-bouton);
  font-family: var(--font);
  font-size: var(--t-m);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--ls-m);
  cursor: pointer;
  overflow: hidden;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.bouton__libelle {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.15em;
}
.bouton__ligne { display: block; white-space: nowrap; }
.bouton__ligne--bis { position: absolute; left: 0; top: 100%; }
.bouton__lettre { display: inline-block; will-change: transform; }

.bouton--marque { background: var(--brand); color: #fff; }
.bouton--marque:hover { background: var(--brand-dark); }
.bouton--noir { background: var(--black); color: #fff; }
.bouton--noir:hover { background: var(--bg-dark); }
.bouton--blanc { background: var(--primary-bg); color: var(--black); }
.bouton--blanc:hover { background: var(--secondary-bg); }
.bouton--contour { background: transparent; border-color: var(--divider); color: var(--black); }
.bouton--contour:hover { background: var(--secondary-bg); }
.bouton--contour-clair { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.bouton--contour-clair:hover { background: rgba(255,255,255,.1); }

/* ================================================== navigation */
/* Chez Moreland la barre est en "absolute" : elle reste en haut de la
   page et disparait des qu on descend. */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  padding: var(--sp-2xl) var(--sp-2xl) 0;
}
.nav__marque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: var(--sp-xs) var(--sp-m);
  border-radius: var(--r-xs);
  background: var(--primary-bg);
}
.nav__marque img { height: 30px; width: auto; }
.nav__liens {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  height: 56px;
  padding: var(--sp-xs) var(--sp-s);
  border-radius: var(--r-xs);
  background: var(--primary-bg);
  font-size: var(--t-m);
  letter-spacing: var(--ls-m);
  color: var(--nav-link);
}
.nav__liens a { padding: 0 var(--sp-xs); white-space: nowrap; transition: color .2s ease; }
.nav__liens a:hover { color: var(--black); }
.nav__actions { display: flex; gap: var(--sp-xs); }

/* ======================================================== hero */
/* 100vh, contenu cale en bas, deux voiles degrades : un depuis la
   gauche (268deg, noir .9) et un depuis le bas (noir .7). */
.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black);
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__voile {
  position: absolute;
  inset: 0 30% 0 0;
  /* Un cran plus clair que chez Moreland : leur photo n a personne
     dans le coin gauche, la notre si. A .9 le visage disparaissait. */
  background: linear-gradient(268deg, rgba(0,0,0,0), rgba(0,0,0,0) 34%, rgba(0,0,0,.72));
}
.hero__voile-bas {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 280px;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0) 28%, rgba(0,0,0,.7));
}
.hero__corps {
  position: relative;
  width: 100%;
  padding: 0 var(--sp-2xl) var(--sp-6xl);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6xl);
}
.hero__texte { max-width: 780px; color: #fff; }
.hero h1 { margin: 0 0 var(--sp-xl); color: #fff; }
.hero__accroche {
  max-width: 560px;
  margin-bottom: var(--sp-2xl);
  font-size: var(--t-l);
  line-height: 1.5;
  letter-spacing: var(--ls-l);
  color: rgba(255,255,255,.78);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); }
.hero__carte {
  flex: none;
  width: 320px;
  padding: var(--sp-l);
  border-radius: var(--r-l);
  background: var(--primary-bg);
}
.hero__carte-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-s);
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--mute);
}
.hero__carte p { font-size: var(--t-m); line-height: 1.5; letter-spacing: var(--ls-m); color: var(--body-text); }
.hero__carte-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-m);
  font-size: var(--t-m);
  color: var(--brand);
}

/* ======================================================= intro */
/* Le grand paragraphe d introduction : chez Moreland il est en taille
   h4 et ses lettres s allument une a une au fil du defilement. */
/* Meme fond que la section suivante : les deux ne forment plus
   qu un seul bloc sombre sous l accueil. */
.intro { padding: calc(var(--sp-10xl) + var(--sp-4xl)) 0; }
.intro__texte {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: #fff;
}

/* ============================================ en-tete de section */
.entete { margin-bottom: var(--sp-7xl); }
.entete h2 { max-width: 820px; }
.entete--centre { text-align: center; }
.entete--centre h2 { margin-left: auto; margin-right: auto; }

/* ============================================== le groupe (sombre) */
.groupe { display: grid; grid-template-columns: 380px 1fr; gap: var(--sp-7xl); }
.groupe__menu { position: sticky; top: var(--sp-4xl); align-self: start; }
.groupe__menu ul { margin: 0; padding: 0; border-top: 1px solid var(--dark-divider); }
.groupe__menu li {
  list-style: none;
  padding: var(--sp-m) 0;
  border-bottom: 1px solid var(--dark-divider);
  font-size: var(--t-m);
  letter-spacing: var(--ls-m);
  color: rgba(255,255,255,.5);
  transition: color .3s ease;
}
.groupe__menu li.actif { color: #fff; }
.groupe__cartes { display: flex; flex-direction: column; gap: var(--sp-2xl); }

/* Carte Moreland : cadre clair de 4px, media a gauche, panneau gris
   a droite (rayon 12 a l interieur, 32px de marge). */
.carte-groupe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xxs);
  padding: var(--sp-xxs);
  border-radius: var(--r-m);
  background: var(--primary-bg);
  color: var(--black);
}
.carte-groupe__image {
  position: relative;
  min-height: 420px;
  border-radius: var(--r-s);
  overflow: hidden;
}
.carte-groupe__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-groupe__texte {
  padding: var(--sp-2xl);
  border-radius: var(--r-s);
  background: var(--secondary-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carte-groupe__num {
  font-family: var(--mono);
  font-size: var(--t-s);
  color: var(--mute);
  margin-bottom: var(--sp-l);
}
.carte-groupe h4 { margin-bottom: var(--sp-m); font-weight: 500; }
.carte-groupe p { font-size: var(--t-l); line-height: 1.5; letter-spacing: var(--ls-l); }

/* ================================================= comment entrer */
/* Mecanique Moreland : trois cartes en escalier, chacune "collante"
   a 84px du haut. En descendant, la premiere se fige, puis la
   deuxieme et la troisieme la rattrapent : l escalier se referme en
   une rangee. La hauteur de la grille (500 + 450 de decalage) donne
   a chaque carte la course necessaire pour glisser. */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-m);
  height: 950px;
}
.etape {
  position: sticky;
  top: 84px;
  height: 500px;
  padding: var(--sp-xl);
  border-radius: var(--r-l);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.etape:nth-child(1) { background: var(--brand-soft); }
.etape:nth-child(2) { background: var(--accent-1); margin-top: 250px; }
.etape:nth-child(3) { background: var(--accent-2); margin-top: 450px; }
.etape h4 { font-weight: 500; }
.etape p { color: var(--black); font-size: var(--t-m); line-height: 1.5; letter-spacing: var(--ls-m); }
.etape__num {
  display: block;
  margin-bottom: var(--sp-s);
  font-family: var(--mono);
  font-size: var(--t-s);
  color: rgba(23,24,28,.5);
}

/* Glyphe central : meme langage que Moreland, des carres arrondis
   assembles, en aplat noir, sur 118px de cote. */
.etape__ico { display: flex; align-items: center; justify-content: center; height: 118px; }
.etape__ico svg { width: 118px; height: 118px; display: block; }

/* ==================================================== accordeons */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7xl); align-items: start; }
.accordeon { border-top: 1px solid var(--divider); }
.accordeon__item { border-bottom: 1px solid var(--divider); }
.accordeon__tete {
  display: flex;
  align-items: center;
  gap: var(--sp-m);
  width: 100%;
  padding: var(--sp-xl) 0;
  background: none;
  border: 0;
  font-family: var(--font);
  font-size: var(--h6);
  line-height: var(--lh-h6);
  letter-spacing: var(--ls-h6);
  color: var(--black);
  text-align: left;
  cursor: pointer;
}
.accordeon__fleche {
  flex: none;
  width: 24px; height: 24px;
  margin-left: auto;
  display: grid; place-items: center;
  color: var(--mute);
}
.accordeon__fleche svg { width: 16px; height: 16px; display: block; }
.accordeon__corps { overflow: hidden; height: 0; }
.accordeon__corps p {
  padding: 0 var(--sp-6xl) var(--sp-xl) 0;
  font-size: var(--t-l);
  line-height: 1.5;
  letter-spacing: var(--ls-l);
}

/* =============================== carrousel "ce qui fait la difference"
   Mise en page relevee sur la section "blogs" de moreland.webflow.io :
   titre a gauche, fleches en haut a droite, piste qui deborde du bord
   droit. Les cartes passent en format vertical 9/16.
   Valeurs d origine : carte rayon 24px, voile interieur 24px de marge,
   pastilles mono 14px arrondies a 44px, bloc texte noir #17181c rayon
   16px, photo qui passe a l echelle 1,05 au survol.                   */

.carrousel-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-7xl);
}
.carrousel-tete h2 { max-width: 820px; margin: 0; }

.carrousel-nav { display: flex; flex: none; align-items: center; gap: var(--sp-xs); }
.carrousel-fleche {
  height: 40px;
  padding: 0 var(--sp-m);
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--black);
  font-family: var(--font);
  font-size: var(--t-m);
  letter-spacing: var(--ls-m);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.carrousel-fleche--prec { text-decoration: underline; }
.carrousel-fleche--suiv { background: var(--black); color: #fff; }
.carrousel-fleche--prec:hover { background: var(--black); color: #fff; text-decoration: none; }
.carrousel-fleche--suiv:hover { background: var(--brand); }
.carrousel-fleche[disabled] { opacity: .35; cursor: default; }
.carrousel-fleche[disabled]:hover { background: transparent; color: var(--black); }
.carrousel-fleche--suiv[disabled]:hover { background: var(--black); color: #fff; }

/* La piste defile horizontalement. On masque la barre de defilement :
   on tire la piste a la souris ou au doigt. "pan-y" laisse le
   defilement vertical de la page intact sur telephone. */
.carrousel {
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: var(--sp-2xl);
  cursor: grab;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrousel::-webkit-scrollbar { display: none; }
.carrousel--prise { cursor: grabbing; }
/* Pendant la prise, on neutralise le survol et la selection de texte. */
.carrousel--prise * { user-select: none; }
.carrousel--prise .carte-arg__photo { transform: none !important; }

.carrousel__piste {
  display: flex;
  gap: var(--sp-m);
  width: max-content;
  padding-right: var(--sp-2xl);
}

.carte-arg {
  position: relative;
  flex: none;
  width: 360px;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--black);
}
.carte-arg__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.carte-arg:hover .carte-arg__photo { transform: scale(1.05); }

.carte-arg__contenu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5xl);
  padding: var(--sp-xl);
}
.carte-arg__meta { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
/* Le prenom du membre filme, a cote du numero de carte. */
.pastille--nom { background: var(--black); color: #fff; }

/* Le bouton de son, pose en haut a droite de la carte. Les videos
   demarrent muettes : c est la seule facon d avoir une lecture
   automatique acceptee par les navigateurs. Un clic rend le son. */
.carte-arg__son {
  position: absolute;
  top: var(--sp-xl); right: var(--sp-xl);
  z-index: 2;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(23, 24, 28, .55);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .25s ease, transform .25s ease;
}
.carte-arg__son:hover { background: var(--brand); transform: scale(1.06); }
.carte-arg__ico { width: 19px; height: 19px; }
/* Muette : on montre le haut-parleur barre. Sonore : les ondes. */
.carte-arg__ico--son { display: none; }
.carte-arg--sonore .carte-arg__ico--muet { display: none; }
.carte-arg--sonore .carte-arg__ico--son { display: block; }
.carte-arg--sonore .carte-arg__son { background: var(--brand); }
.pastille {
  padding: var(--sp-xs) var(--sp-s);
  border-radius: var(--r-xxl);
  background: var(--secondary-bg-mute);
  color: var(--black);
  font-family: var(--mono);
  font-size: var(--t-s);
  line-height: 1.5;
  text-transform: uppercase;
}

.carte-arg__bloc {
  padding: var(--sp-xl);
  border-radius: var(--r-m);
  background: var(--black);
  color: #fff;
}
.carte-arg__bloc h3 {
  margin: 0;
  font-size: var(--h6);
  line-height: var(--lh-h6);
  letter-spacing: var(--ls-h6);
  font-weight: 400;
  color: #fff;
}
/* Le texte se deplie au survol. L astuce des lignes de grille
   (0fr -> 1fr) permet d animer une hauteur "auto" sans JavaScript. */
.carte-arg__repli {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22,.61,.36,1);
}
.carte-arg__repli-int { overflow: hidden; }
.carte-arg:hover .carte-arg__repli { grid-template-rows: 1fr; }
.carte-arg__repli p {
  margin: var(--sp-m) 0 0;
  font-size: var(--t-m);
  line-height: 1.5;
  letter-spacing: var(--ls-m);
  color: var(--divider);
}
/* Sans survol possible (telephone, tablette), le texte reste ouvert. */
@media (hover: none) {
  .carte-arg__repli { grid-template-rows: 1fr; }
}

/* ====================================================== pour qui
   Section claire : pas de photo de fond, le telephone detoure et les
   pastilles noires se posent directement sur le fond de page. */
.pourqui-bloc { position: relative; overflow: hidden; }
/* Les deux colonnes se touchent presque : le telephone a gauche, les
   pastilles juste a cote, pour que l ensemble forme un seul bloc. */
.pourqui { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items: center; }
.pourqui__bloc + .pourqui__bloc { margin-top: var(--sp-6xl); }
/* Le bloc est centre dans sa colonne, mais son contenu reste cale
   a gauche : toutes les pastilles demarrent sur la meme verticale. */
.pourqui__texte { justify-self: start; width: 100%; max-width: 620px; }
/* Chaque critere devient une pastille noire autonome, avec sa coche
   a gauche. */
.pourqui ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-xs);
}
.pourqui li {
  display: inline-flex; align-items: center; gap: var(--sp-s);
  width: fit-content; max-width: 100%;
  padding: var(--sp-s) var(--sp-l) var(--sp-s) var(--sp-s);
  border-radius: var(--r-xxl);
  background: var(--black);
  color: #fff;
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: var(--ls-m);
  text-align: left;
}
/* La coche : un rond a la couleur de la marque, toujours a gauche. */
.pourqui li::before {
  content: "✓";
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; line-height: 1;
}
.pourqui__actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-top: var(--sp-2xl); }

/* ---- la colonne de gauche : le telephone, detoure ----
   L image est un PNG transparent : pas de cadre, pas de fond. Une
   ombre portee suit le contour du telephone et le pose sur la page. */
/* Le telephone est coupe net en bas sur la photo d origine. On le
   cale donc sur le bord bas de la section (la marge negative annule
   le padding) : la coupe tombe pile sur la limite, comme s il sortait
   du cadre. */
.pourqui__image {
  justify-self: end; align-self: end;
  width: 100%; max-width: 620px;
  margin-bottom: calc(-1 * var(--sp-10xl));
}
.pourqui__image img {
  display: block;
  width: 100%; height: auto;
  filter: drop-shadow(0 34px 54px rgba(23, 24, 28, .28));
}

/* =================================================== appel final */
.final { text-align: center; }
.final h2 { max-width: 820px; margin: 0 auto var(--sp-2xl); color: #fff; }
.final__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-s); }

/* ==================================================== calendrier
   Section sombre : la photo d ambiance passe en fond, un faux
   ordinateur portable au premier plan sert de cadre au calendrier.  */
.rdv { position: relative; overflow: hidden; color: #fff; }
.rdv__fond {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* La photo est deja sombre : un voile leger suffit a faire ressortir
   le titre blanc sans eteindre les lampes. */
.rdv__corps { position: relative; z-index: 1; }
.rdv h2 { color: #fff; }

/* ---- faux portable ----
   Le but n est pas de poser un rectangle blanc sur la photo mais de
   faire croire que la machine est dans la piece. Trois choses y
   participent : le capot prend la lumiere chaude des lampes sur sa
   droite et reste sombre a gauche ; l ecran projette un halo clair
   autour de lui ; une ombre de contact l ancre sur le meuble.       */
.portable { position: relative; max-width: 920px; margin: 0 auto; }

/* Halo : la lumiere que l ecran renvoie dans la piece, plus la
   retombee orangee des lampes situees a droite du cadre. */
.portable__lueur {
  position: absolute;
  inset: -16% -12% -20%;
  pointer-events: none;
  background:
    radial-gradient(62% 58% at 50% 48%, rgba(232,238,250,.26), rgba(232,238,250,0) 72%),
    radial-gradient(70% 60% at 84% 24%, rgba(255,150,60,.26), rgba(255,150,60,0) 72%);
}

.portable__capot {
  position: relative;
  padding: var(--sp-xl) var(--sp-s) var(--sp-s);
  border-radius: 20px 20px var(--r-xxs) var(--r-xxs);
  /* Sombre a gauche, rechauffe a droite : le meme eclairage que la
     photo de fond. */
  background: linear-gradient(118deg, #17181c 0%, #24252a 44%, #37312c 80%, #4a3b2e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,226,196,.18),
    inset -1px 0 0 rgba(255,176,106,.14),
    inset 1px 0 0 rgba(255,255,255,.05),
    0 2px 3px rgba(0,0,0,.45),
    0 44px 90px rgba(0,0,0,.6);
}
.portable__camera {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #45474e;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
}
.portable__dalle {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xxs);
  overflow: auto;
  background: var(--primary-bg);
  overscroll-behavior: contain;
}
.portable__cal { min-height: 100%; }

/* Reflet de la vitre : un voile tres leger, oblique, qui prend la
   couleur des lampes dans l angle haut droit. "pointer-events: none"
   pour que les clics atteignent quand meme le calendrier. */
.portable__reflet {
  position: absolute;
  inset: var(--sp-xl) var(--sp-s) var(--sp-s);
  border-radius: var(--r-xxs);
  pointer-events: none;
  background:
    linear-gradient(104deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 19%),
    radial-gradient(110% 95% at 90% 4%, rgba(255,158,80,.13), rgba(255,158,80,0) 52%),
    linear-gradient(rgba(0,0,0,0) 66%, rgba(12,9,6,.08));
}

/* Le socle deborde du capot, comme la base d un vrai portable, avec
   l encoche centrale qui sert a soulever l ecran. Metal rechauffe
   a droite, la ou sont les lampes. */
.portable__socle {
  position: relative;
  width: calc(100% + 56px);
  height: 14px;
  margin-left: -28px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(104deg, #7f828b 0%, #c4c3c2 46%, #d9c6b0 88%, #bba58d 100%);
  box-shadow: 0 16px 26px rgba(0,0,0,.5);
}
.portable__encoche {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 7px;
  border-radius: 0 0 8px 8px;
  background: rgba(0,0,0,.24);
}

/* Ombre de contact : c est elle qui pose la machine sur le meuble. */
.portable__ombre {
  position: absolute;
  left: 2%; right: 2%;
  bottom: -30px;
  height: 64px;
  pointer-events: none;
  background:
    radial-gradient(50% 52% at 50% 0%, rgba(0,0,0,.72), rgba(0,0,0,0) 72%),
    radial-gradient(42% 70% at 50% 0%, rgba(255,150,70,.16), rgba(255,150,70,0) 75%);
}


/* ========================================================== pied */
.pied { background: var(--black); color: #fff; padding: var(--sp-10xl) 0 var(--sp-2xl); overflow: hidden; }
.pied__haut { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-6xl); padding-bottom: var(--sp-7xl); }
.pied h5 { margin-bottom: var(--sp-m); font-weight: 500; }
.pied p { color: rgba(255,255,255,.6); font-size: var(--t-m); line-height: 1.5; letter-spacing: var(--ls-m); }
.pied__col h6 {
  margin: 0 0 var(--sp-m);
  font-family: var(--mono);
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--mute);
}
.pied__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-s); }
.pied__col a { color: rgba(255,255,255,.72); font-size: var(--t-m); letter-spacing: var(--ls-m); }
.pied__col a:hover { color: #fff; }

/* Bandeau defilant du pied : deux copies qui glissent de -100% en 30s. */
.pied__bandeau { overflow: hidden; margin: var(--sp-7xl) 0 var(--sp-6xl); }
.pied__defile { display: flex; gap: var(--sp-6xl); width: max-content; }
.pied__mot {
  flex: none;
  font-size: clamp(90px, 15vw, 200px);
  line-height: .9;
  letter-spacing: -.042em;
  color: rgba(255,255,255,.1);
  user-select: none;
  white-space: nowrap;
}
.pied__bas {
  display: flex; flex-wrap: wrap; gap: var(--sp-m);
  justify-content: space-between;
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--dark-divider);
  font-size: var(--t-s);
  color: var(--mute);
}

/* ======================================= etats initiaux animation */
/* Poses en CSS pour eviter tout clignotement avant que GSAP demarre.
   Sans JS (ou en mouvement reduit), la classe n est jamais ajoutee
   et tout reste visible. */
html.koi-anim [data-reveal] { opacity: 0; transform: translateY(2%); }
html.koi-anim [data-reveal="carte"] { transform: translateY(5%); }
.koi-lettre { display: inline-block; }

/* ==================================================== responsive */
@media (max-width: 1200px) {
  :root { --h1: 52px; --h2: 40px; --h3: 34px; --h4: 28px; --h5: 24px; --h6: 20px;
          --sp-9xl: 88px; --sp-10xl: 110px; }
  .groupe { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .groupe__menu { position: static; }
  .groupe__menu ul { display: flex; flex-wrap: wrap; gap: var(--sp-m); border: 0; }
  .groupe__menu li { border: 0; padding: 0; }
  .hero__carte { display: none; }
  .hero__voile { inset: 0; }
  /* Plus l ecran est etroit, plus la photo est rognee sur les cotes.
     On decale le cadrage vers la droite pour garder un visage dans
     l image au lieu du mur entre les deux fauteuils. */
  .hero__photo { object-position: 72% center; }
  .duo, .pourqui { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  /* Une seule colonne : le telephone passe sous les pastilles et sort
     par le bas de la section, pour que sa coupe ne tombe pas en plein
     milieu du contenu. */
  .pourqui__image { order: 2; max-width: 420px; }
  .pourqui__texte { order: 1; }
  .carte-arg { width: 320px; }
  .etapes { grid-template-columns: 1fr; height: auto; gap: var(--sp-m); }
  .etape, .etape:nth-child(2), .etape:nth-child(3) {
    position: static; margin-top: 0; height: auto; min-height: 380px;
  }
  .pied__haut { grid-template-columns: 1fr 1fr; }
}

/* Sous 900px les liens du menu se serrent et passent a la ligne :
   on garde seulement le logo et le bouton. */
@media (max-width: 900px) {
  .nav__liens { display: none; }
}

@media (max-width: 760px) {
  :root { --h1: 40px; --h2: 32px; --h4: 24px; --sp-9xl: 64px; --sp-10xl: 80px; --sp-7xl: 40px; --sp-2xl: 20px; }
  .nav { padding-top: var(--sp-m); }
  .hero__photo { object-position: 81% center; }
  .carte-groupe { grid-template-columns: 1fr; }
  .carte-groupe__image { min-height: 240px; }
  .hero__corps { padding-bottom: var(--sp-4xl); }
  .hero__actions .bouton { flex: 1 1 100%; }
  .intro { padding: var(--sp-9xl) 0; }
  .intro__texte { font-size: var(--h5); }
  /* Sur telephone, des pastilles plus compactes pour qu un critere
     tienne sur une ou deux lignes. */
  .pourqui li { font-size: var(--t-m); padding: var(--sp-xs) var(--sp-m) var(--sp-xs) var(--sp-xs); }
  .pourqui li::before { width: 24px; height: 24px; font-size: 12px; }
  .carrousel-tete { flex-direction: column; align-items: flex-start; gap: var(--sp-xl); }
  .carte-arg { width: min(78vw, 300px); }
  .carte-arg__contenu { padding: var(--sp-m); gap: var(--sp-2xl); }
  .carte-arg__bloc { padding: var(--sp-m); }
  .accordeon__corps p { padding-right: 0; }
  .pied__haut { grid-template-columns: 1fr; gap: var(--sp-2xl); }
/* Un portable n a plus de sens sur telephone : on garde juste le
     calendrier sur une carte blanche, a sa hauteur naturelle. */
  .portable__capot { padding: 0; border-radius: var(--r-m); background: none; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
  .portable__camera, .portable__socle { display: none; }
  .portable__reflet { inset: 0; border-radius: var(--r-m); }
  .portable__dalle { aspect-ratio: auto; min-height: 560px; overflow: visible; border-radius: var(--r-m); }
}