/* ==========================================================================
   OGAM STUDIO – styles
   ========================================================================== */

@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face {
  font-family: "Adumu";
  src: url("../assets/Adumu.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs */
  --c-yellow: #F4CF6C;   /* Home */
  --c-orange: #FBB454;   /* Incipit */
  --c-cream:  #F8F2DF;
  --c-blue:   #DBEBFF;   /* Mis en avant */
  --c-blue-line: #52A8F0;
  --c-ink:    #111111;
  --c-accent: #F2470B;

  /* Typo */
  --f-display: "Adumu", system-ui, sans-serif;
  --f-text: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Cartes superposées */
  --card-radius: clamp(1.75rem, 4vw, 3rem);
  --card-overlap: var(--card-radius); /* de combien une carte mord sur la précédente */

  /* Unité de hauteur stable sur mobile (ne bouge pas quand la barre d'adresse se rétracte) */
  --svh: 1vh;

  /* Home + bandeau incipit : la Home se bloque quand son contenu (astérisque + titre) est visible,
     le bandeau occupe le reste de l'écran */
  --stick: var(--hdr);                                    /* décalage des titres collés (0 quand le header est rangé) */
  --hdr: 4.8rem;                                          /* hauteur du header (mesurée en JS) */
  --title-fs: clamp(2.25rem, 7.2vw, 6.5rem);              /* taille du titre */
  --mark-size: clamp(3.5rem, 6vw, 5.5rem);                /* astérisque décoratif */
  --home-v: calc(var(--hdr) + 1rem + var(--mark-size) + 1rem + 2.1 * var(--title-fs) + 3rem);
  --band-h: clamp(11.5rem, calc(100 * var(--svh) - var(--home-v)), calc(30 * var(--svh)));
  --home-lock: calc(var(--band-h) - var(--card-overlap));  /* la Home se bloque quand le bandeau s'épingle */
  --incipit-step: calc(28 * var(--svh));                  /* distance de scroll par phrase */
}
@supports (height: 1svh) { :root { --svh: 1svh; } }
html.hdr-hidden { --stick: 0px; }

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

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

body {
  margin: 0;
  background: var(--c-yellow);
  color: var(--c-ink);
  font-family: var(--f-text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
h1, p { margin: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .3s ease, box-shadow .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
/* Le header se range quand on descend et revient dès qu'on remonte */
.site-header.is-hidden { transform: translateY(-110%); }
/* Une fois la page scrollée, la barre prend le fond jaune pour rester lisible sur toutes les cartes */
.site-header.is-scrolled { background: var(--c-yellow); box-shadow: 0 2px 18px rgba(0, 0, 0, .08); }

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: 90rem;
  margin: 0 auto;
  padding: .9rem clamp(1rem, 3vw, 2.5rem);
}
.site-header__side { display: flex; align-items: center; gap: .6rem; }
.site-header__side--right { justify-content: flex-end; }

.site-header__logo { display: block; line-height: 0; }
.site-header__logo img {
  width: auto;
  height: clamp(34px, 3.6vw, 48px);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.site-header__logo:hover img { transform: scale(1.06) rotate(-2deg); }
.site-header__logo:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 4px; border-radius: 4px; }

/* Boutons « pilule » */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1.4rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease, color .2s ease;
}
.pill:hover { transform: translateY(-2px); }
.pill:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.pill--light  { background: var(--c-cream); color: var(--c-ink); }
.pill--light:hover { background: #fff; }
.pill--accent { background: var(--c-accent); color: #fff; }
.pill--accent:hover { background: #d93d05; }

/* Réseaux sociaux : pastilles noires, pictos jaunes */
.socials { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.social {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-yellow);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), color .2s ease;
}
.social:hover { transform: translateY(-2px) rotate(-8deg); color: var(--c-cream); }
.social:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Cartes : chaque section est une carte qui se superpose à la précédente.
   La carte Home reste collée en haut (sticky) pendant que la suivante
   glisse par-dessus.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.card + .card { margin-top: calc(var(--card-overlap) * -1); }

/* z-index croissant : chaque carte passe au-dessus de la précédente */
.card--home     { z-index: 1; }
.card--incipit  { z-index: 2; }
.card--projects { z-index: 3; }
.card--featured { z-index: 4; }
.card--faq      { z-index: 5; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   1. HOME
   -------------------------------------------------------------------------- */
.card--home {
  position: sticky;
  top: calc(var(--home-lock) * -1);   /* remonte jusqu'à l'épinglage du bandeau, puis se bloque */
  height: 100vh;
  height: calc(100 * var(--svh));
  background: var(--c-yellow);
  border-radius: 0;
  overflow: hidden;
}

.home__vector {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;          /* le vecteur est affiché en entier, jamais rogné en bas */
  transform: translateY(-6%);
  pointer-events: none;
}

/* Contenu centré dans la partie de la Home qui reste visible une fois bloquée */
.home__content {
  position: absolute;
  inset: var(--home-lock) 0 0 0;
  padding: var(--hdr) 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.home__mark {
  flex: none;
  width: var(--mark-size);
  height: auto;
}

.home__title {
  font-family: var(--f-display);
  font-weight: normal;
  font-size: var(--title-fs);
  line-height: 1.02;
  letter-spacing: .005em;
  color: var(--c-ink);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   2. INCIPIT : un bandeau collé en bas d'écran pendant que la Home est bloquée.
   La carte fait (2 × bandeau + n × pas de scroll) de haut : le bandeau reste
   épinglé tant que toutes les phrases n'ont pas été affichées, puis la carte
   Projets vient le recouvrir.
   -------------------------------------------------------------------------- */
.card--incipit {
  --n: 3;                                   /* nombre de phrases */
  z-index: 2;
  border-radius: 0;
  height: calc(var(--band-h) * 2 + var(--n) * var(--incipit-step));
}

.incipit__band {
  position: sticky;
  top: calc(100vh - var(--band-h));
  top: calc(100 * var(--svh) - var(--band-h));
  height: var(--band-h);
  display: grid;
  place-items: center;
  padding: 0 1.25rem;
  container-type: inline-size;   /* permet d'adapter la police à la largeur du bandeau (cqw) */
  background: var(--c-orange);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  /* 2e ombre : prolonge l'orange sous le bandeau si la barre d'adresse mobile se rétracte */
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .06), 0 8rem 0 0 var(--c-orange);
}

/* Les trois phrases occupent la même cellule de grille : elles se remplacent */
.incipit__stage {
  display: grid;
  width: 100%;
}

/* Chaque phrase tient sur UNE ligne, centrée dans le bandeau.
   --fit = largeur de la phrase la plus longue (en em, icône comprise) :
   la police s'adapte à la largeur du bandeau pour qu'elle ne passe jamais à la ligne. */
.incipit__item {
  --fit: 24;
  grid-area: 1 / 1;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  white-space: nowrap;
  font-family: var(--f-display);
  font-size: min(3.6rem, calc((100vw - 3rem) / var(--fit)));
  font-size: min(3.6rem, calc(100cqw / var(--fit)));
  line-height: 1.08;
  text-align: center;
  color: var(--c-ink);
  /* sans JS : seule la dernière phrase est affichée */
  opacity: 0;
  visibility: hidden;
}
.incipit__item--last { opacity: 1; visibility: visible; }

.incipit__icon {
  flex: none;
  height: 1.3em;
  width: auto;
}

.incipit__text { display: block; }

.hl--grey   { color: #A89E8A; }
.hl--orange { color: var(--c-accent); }
.hl--cream  { color: var(--c-cream); }

.incipit__sub {
  display: block;
  margin-top: .35em;
  font-size: .5em;
  line-height: 1.15;
}

/* Avec JS : on pilote l'affichage séquentiel via des classes */
.js .incipit__item {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40%);
  filter: blur(6px);
  transition:
    opacity .6s ease,
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .6s ease,
    visibility 0s linear .8s;
}
.js .incipit__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition-delay: 0s;
}
.js .incipit__item.is-past {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-40%);
  filter: blur(6px);
}

/* Petite rotation du logo à chaque apparition */
.js .incipit__icon { transform: rotate(-90deg); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.js .is-active .incipit__icon { transform: none; }

/* --------------------------------------------------------------------------
   3. PROJETS
   -------------------------------------------------------------------------- */
.card--incipit + .card--projects { margin-top: calc(var(--band-h) * -1); }  /* recouvre le bandeau */
.card--projects {
  --px: clamp(1rem, 4vw, 3rem);
  background: var(--c-cream);
  padding: clamp(2rem, 4vw, 3.5rem) var(--px)
           calc(var(--card-overlap) + clamp(2.5rem, 6vw, 5rem));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .06);
}

/* Filtre : IRL | projets | digital.
   Il se colle sous le header pendant que les cartes défilent dessous ;
   « projets » est centré sur la page (colonnes 1fr | auto | 1fr). */
.projects__filters {
  position: sticky;
  top: var(--stick);
  transition: top .4s cubic-bezier(.2,.8,.2,1);
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: clamp(1.75rem, 9vw, 8.5rem);
  margin: 0 calc(var(--px) * -1) clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(.75rem, 2vw, 1.5rem) var(--px) 1.1rem;
  background: var(--c-cream);
}
/* petit fondu sous la barre : les cartes passent dessous en douceur */
.projects__filters::after,
.faq__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1.25rem;
  background: linear-gradient(var(--c-cream), rgba(248, 242, 223, 0));
  pointer-events: none;
}
.filter[data-filter="irl"]     { justify-self: end; }
.filter[data-filter="digital"] { justify-self: start; }

.filter {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 6vw, 4.75rem);
  line-height: 1;
  color: var(--c-yellow);
  transition: color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.filter:hover { color: var(--c-orange); }
.filter.is-active { color: var(--c-ink); transform: scale(1.12); cursor: default; }
.filter:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 6px; border-radius: 6px; }

/* Grille */
.projects__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 76rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  transition: opacity .2s ease;
}
.projects__grid.is-switching { opacity: 0; }

.project[hidden] { display: none; }
.project { animation: project-in .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes project-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.project__media { display: block; border-radius: 1rem; overflow: hidden; }
.project__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 13;
  object-fit: cover;
  background: var(--c-orange);        /* placeholder */
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.project__media:hover .project__img { transform: scale(1.03); }

/* Survol : une vague de couleur part du point du curseur et recouvre l'image,
   puis ses couleurs défilent en continu (palette Ogam). */
.project__media { position: relative; isolation: isolate; }
.project__media::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--c-yellow), #FF6B00, var(--c-blue-line), var(--c-yellow));
  background-size: 300% 100%;
  background-repeat: repeat-x;
  opacity: .92;
  clip-path: circle(0 at var(--mx, 50%) var(--my, 50%));
  transition: clip-path 1.1s cubic-bezier(.2,.8,.2,1);
  animation: project-hue 4s linear infinite;
}
@keyframes project-hue { to { background-position: -300% 0; } }

/* Cards avec images : la 2e image se dévoile en cercle depuis le curseur,
   et se referme dès que le survol cesse (retour à la 1re image). */
.project__media--swap::after { display: none; }
.project__img--alt {
  position: absolute; inset: 0;
  height: 100%;
  z-index: 1;
  clip-path: circle(0 at var(--mx, 50%) var(--my, 50%));
  transition: clip-path 1.1s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) {
  .project__media--swap:hover .project__img--alt { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
}
@media (hover: hover) {
  .project__media:hover::after { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
}

.project__meta {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: .9rem;
}
.project__logo { flex: none; width: 2.4rem; height: 2.4rem; }
.project__info { flex: 1; min-width: 0; }
.project__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: normal;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.05;
  color: var(--c-ink);
}
.project__cat {
  margin-top: .15rem;
  font-size: 1rem;
  color: #6B8CB8;
}

.project__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  background: #FF6B00;
  color: #fff;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
}
.project__btn:hover { transform: translate(2px, -2px) rotate(8deg); background: var(--c-accent); }
.project__btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   4. MIS EN AVANT  (section épinglée, pilotée par le scroll)
   -------------------------------------------------------------------------- */
.card--featured {
  background: var(--c-blue);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .06);
  /* 100vh visible + 70vh de scroll par onglet supplémentaire */
  height: calc(100vh + (var(--n) - 1) * 70vh);
  height: calc(100svh + (var(--n) - 1) * 70svh);
}

.featured__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--card-overlap) + 3rem) clamp(1rem, 4vw, 3rem) 3rem;
}

/* Ligne pointillée verticale au centre de l'écran */
.featured__pin::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dotted var(--c-blue-line);
  pointer-events: none;
}

.featured__inner {
  --tab-fs: clamp(1.75rem, 5.2vw, 4.5rem);
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;                 /* colonne de droite alignée sur le haut du menu */
  column-gap: clamp(1.5rem, 5vw, 5rem);
}

.featured__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .15em; container-type: inline-size; }

.featured__tab {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-display);
  white-space: nowrap;                                  /* un onglet reste toujours sur une ligne… */
  font-size: min(var(--tab-fs), calc(100cqw / 7));       /* …et se réduit si la colonne est trop étroite */
  line-height: 1.12;
  color: #6E7781;
  transition: color .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.featured__tab:hover { color: #46505C; }
.featured__tab.is-active { color: var(--c-ink); }
.featured__tab:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 4px; border-radius: 6px; }

.featured__side { padding-left: clamp(0rem, 1vw, 1rem); }

/* Mot de 5 astérisques : centré verticalement sur la 1re ligne du menu, texte juste en dessous */
.featured__glyphs {
  --glyph-h: clamp(1.8rem, calc(var(--tab-fs) * .58), 3rem);
  display: flex;
  align-items: center;
  gap: calc(var(--glyph-h) * .5);
  margin-top: calc((var(--tab-fs) * 1.12 - var(--glyph-h)) / 2);
  margin-bottom: 1.4rem;
  color: var(--c-ink);
}
.glyph {
  flex: none;
  height: var(--glyph-h);
  width: calc(var(--glyph-h) * 119 / 134);
  overflow: visible;
  transition: transform .2s ease, opacity .2s ease;
}
/* pendant le brouillage */
.glyph.is-spinning { opacity: .55; transform: scale(.82) rotate(-6deg); }
/* à l'atterrissage */
.glyph.is-landed { animation: glyph-pop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes glyph-pop {
  from { transform: scale(.6) rotate(-20deg); }
  to   { transform: none; }
}

/* Les panneaux se superposent dans la même cellule : un seul visible à la fois */
.featured__panels { display: grid; }
.featured__panel {
  grid-area: 1 / 1;
  align-self: start;
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  font-weight: 300;
  line-height: 1.55;
  max-width: 30rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  /* sortie rapide… */
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.featured__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* …entrée juste après, pour ne jamais voir deux textes en même temps */
  transition: opacity .4s ease .18s, transform .6s cubic-bezier(.2,.8,.2,1) .18s, visibility 0s linear 0s;
}
.featured__panel p + p { margin-top: 1.1em; }
.featured__panel strong { font-weight: 600; }

.featured__actions { display: flex; align-items: stretch; gap: .5rem; margin-top: 2rem; }

/* Boutons : libellé (jaune, texte blanc Adumu) + carré orange avec flèche */
.btn,
.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.4rem;
  border-radius: .5rem;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
}
.btn:hover, .btn-arrow:hover { transform: translateY(-2px); }
.btn:focus-visible, .btn-arrow:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }

.btn--cta {
  min-width: clamp(11rem, 16vw, 13.5rem);
  padding: 0 1.75rem;
  background: var(--c-yellow);
  color: #fff;
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1;
  white-space: nowrap;
}
.btn--cta:hover { background: #efc24f; }

.btn-arrow {
  width: 3.4rem;
  background: #FF6B00;
  color: #fff;
}
.btn-arrow:hover { background: var(--c-accent); transform: translate(2px, -2px); }

/* Sans JavaScript : l'incipit n'est pas épinglé (la dernière phrase seule est affichée) */
html:not(.js) .card--incipit { height: auto; }
html:not(.js) .incipit__band { position: static; }

/* Sans JavaScript : tout est empilé et lisible, sans épinglage */
html:not(.js) .card--featured { height: auto; }
html:not(.js) .featured__pin { position: static; height: auto; }
html:not(.js) .featured__inner { grid-template-columns: 1fr; }
html:not(.js) .featured__pin::before { display: none; }
html:not(.js) .featured__glyphs { display: none; }
html:not(.js) .featured__panels { gap: 2rem; }
html:not(.js) .featured__panel { grid-area: auto; opacity: 1; visibility: visible; transform: none; }

/* --------------------------------------------------------------------------
   5. FAQ  « Quoi encore ? »
   -------------------------------------------------------------------------- */
.card--faq {
  background: var(--c-cream);
  padding: calc(var(--card-overlap) + clamp(1.5rem, 4vw, 3rem)) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .06);
}

.faq__inner { max-width: 62rem; margin: 0 auto; }

.faq__title {
  position: sticky;                 /* le titre reste collé sous le header pendant que les questions défilent */
  top: var(--stick);
  transition: top .4s cubic-bezier(.2,.8,.2,1);
  z-index: 5;
  margin: 0 0 clamp(1rem, 2.8vw, 2.4rem);
  padding: clamp(.75rem, 2vw, 1.5rem) 0 .9rem;
  background: var(--c-cream);
  text-align: center;
  font-family: var(--f-display);
  font-weight: normal;
  font-size: clamp(2rem, 4.8vw, 3.75rem);
  line-height: 1;
  color: var(--c-ink);
}

.faq__item + .faq__item { margin-top: .95rem; }
.faq__q { margin: 0; font: inherit; }

/* Barre de question */
.faq__btn {
  appearance: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.7rem clamp(1.1rem, 3vw, 2rem);
  border-radius: .6rem;
  background: #FF6B00;
  color: #fff;
  font-family: var(--f-text);
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}
.faq__btn:hover { background: #F25F00; }
.faq__btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }

/* Icône + qui devient − à l'ouverture */
.faq__icon {
  position: relative;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__btn[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__btn[aria-expanded="true"] .faq__icon::before { transform: translate(-50%, -50%) rotate(180deg); }

/* Réponse : dépliage animé (hauteur 0 → auto via grid) */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s;
}
.faq__answer-inner { overflow: hidden; min-height: 0; }
.faq__answer p {
  margin: 0;
  padding: 1.25rem clamp(1.1rem, 3vw, 2rem) .75rem;
  max-width: 52rem;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  line-height: 1.5;
  color: var(--c-ink);
}
.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

/* Sans JavaScript : toutes les réponses sont visibles */
html:not(.js) .faq__answer { grid-template-rows: 1fr; visibility: visible; }
html:not(.js) .faq__icon { display: none; }

/* --------------------------------------------------------------------------
   FOOTER : « Passe nous voir » (fond crème) + carte jaune.
   La route noire et le cycliste chevauchent les deux zones.
   -------------------------------------------------------------------------- */
.site-footer {
  --cy-h: clamp(6.5rem, 16.5vw, 14rem);      /* hauteur du cycliste */
  --road-y: 6.2vw;                           /* profondeur de la route sous le haut de la carte jaune, là où roule le cycliste */
  position: relative;
  z-index: 6;
  background: var(--c-cream);
}

/* Zone « Passe nous voir » */
.labs {
  min-height: calc(var(--cy-h) - var(--road-y) + 1rem);
  padding: clamp(2rem, 4vw, 3.25rem) 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.labs__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: normal;
  font-size: clamp(1.6rem, 3.3vw, 3rem);
  line-height: 1.1;
  color: var(--c-ink);
}
.labs__address {
  margin: .35rem 0 0;
  font-size: clamp(.95rem, 1.7vw, 1.35rem);
  font-weight: 300;
  color: var(--c-ink);
}

/* Carte jaune */
.footer__card {
  position: relative;
  background: var(--c-yellow);
  border-radius: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem) 0 0;
  padding: clamp(5.5rem, 10.4vw, 11rem) clamp(1.25rem, 5.5vw, 5rem) clamp(2.5rem, 4vw, 3.5rem);
}

/* Route : tracé SVG étiré sur toute la largeur, le haut de la carte tombe à 45/130 de sa hauteur */
.footer__road {
  position: absolute;
  left: 0;
  top: -4.11vw;
  width: 100%;
  height: 11.87vw;
  overflow: visible;
  pointer-events: none;
}
.footer__road path { stroke-width: 6px; }

.footer__cyclist {
  position: absolute;
  left: clamp(.75rem, 4.5vw, 4rem);
  top: calc(var(--road-y) - var(--cy-h));    /* les roues reposent sur la route */
  height: var(--cy-h);
  width: auto;
  pointer-events: none;
}
/* le cycliste arrive de la gauche quand le footer entre à l'écran */
.js .footer__cyclist { opacity: 0; transform: translateX(-35vw); transition: transform 1.5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.js .footer__cyclist.is-in { opacity: 1; transform: none; }

.footer__grid {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.footer__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--c-ink);
}
.footer__tagline {
  margin: .6rem 0 0;
  max-width: 22rem;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 300;
  line-height: 1.2;
}
.footer__brand .socials { margin-top: 1.1rem; }

.footer__legal {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  font-size: .8rem;
  font-weight: 300;
}
.footer__legal a { color: inherit; text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; }
.footer__legal a:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; border-radius: 2px; }

/* Inscription à la communauté */
.footer__join-title {
  margin: 0 0 1.1rem;
  font-family: var(--f-display);
  font-weight: normal;
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
  line-height: 1.05;
  color: #fff;
}
.newsletter { display: grid; gap: 1.1rem; justify-items: start; }
.newsletter__input {
  width: 100%;
  height: 3.4rem;
  padding: 0 1.1rem;
  border: 2px solid transparent;
  border-radius: .7rem;
  background: #fff;
  color: var(--c-ink);
  font: 400 .95rem var(--f-text);
}
.newsletter__input::placeholder { color: #444; opacity: 1; }
.newsletter__input:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.newsletter__input[aria-invalid="true"] { border-color: var(--c-accent); }
.newsletter__btn {
  appearance: none;
  border: 0;
  height: 3.4rem;
  padding: 0 1.6rem;
  border-radius: .7rem;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--f-display);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
}
.newsletter__btn:hover { background: #d93d05; transform: translateY(-2px); }
.newsletter__btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.newsletter__status { margin: 0; min-height: 1.3em; font-size: .85rem; font-weight: 400; color: var(--c-ink); }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --hdr: 3.9rem; }
  .site-header__bar { gap: .5rem; padding: .7rem 1rem; }
  .site-header__side, .socials { gap: .4rem; }
  .pill { height: 2.1rem; padding: 0 .9rem; font-size: .8rem; }
  .social { width: 2.1rem; height: 2.1rem; }
  .social svg { width: 17px; height: 17px; }
  .site-header__logo img { height: 30px; }
  /* sur mobile le vecteur est recadré sur les côtés (hauteur fixe, largeur rognée) */
  .home__vector { height: 72%; object-fit: cover; object-position: 35% center; transform: none; }

  .projects__grid { grid-template-columns: 1fr; }
  .project__img { aspect-ratio: 4 / 5; }

  .faq__btn { padding: 1.25rem 1rem; gap: 1rem; }
  .faq__icon { width: 1.6rem; height: 1.6rem; }

  /* Mis en avant : onglets au-dessus, texte dessous (séparateur pointillé horizontal) */
  .featured__pin { padding: calc(var(--hdr) + .5rem) 1rem 1.5rem; }
  .featured__pin::before { display: none; }
  .featured__inner { --tab-fs: clamp(1.6rem, 8.5vw, 2.4rem); grid-template-columns: 1fr; row-gap: 1.25rem; }
  .featured__side { padding: 1.25rem 0 0; border-top: 2px dotted var(--c-blue-line); }
  .featured__glyphs { --glyph-h: 1.9rem; margin-top: 0; margin-bottom: 1.1rem; }
  .featured__panels { min-height: 19rem; }
  .featured__panel { font-size: .9rem; }
  .featured__actions { margin-top: 1.25rem; }
  .btn--cta { min-width: 0; flex: 1 1 auto; padding: 0 1rem; font-size: 1.15rem; }
}

/* Écrans courts (petits téléphones) : on resserre la section épinglée pour que tout tienne à l'écran */
@media (max-width: 640px) and (max-height: 720px) {
  .featured__inner { --tab-fs: clamp(1.4rem, 7.4vw, 1.9rem); row-gap: .9rem; }
  .featured__side { padding-top: .9rem; }
  .featured__glyphs { --glyph-h: 1.55rem; margin-bottom: .85rem; }
  .featured__panel { font-size: .84rem; line-height: 1.45; }
  .featured__panel p + p { margin-top: .8em; }
  .featured__actions { margin-top: 1rem; }
  .btn, .btn-arrow { height: 3rem; }
  .btn-arrow { width: 3rem; }
  .featured__panels { min-height: 0; }
}

/* Très petit écran : pas la place pour les icônes à côté du logo centré (elles restent dans le footer) */
@media (max-width: 520px) {
  .site-header .socials { display: none; }
}

@media (max-width: 900px) {
  /* le cycliste passe sous le texte « Passe nous voir » */
  .labs { min-height: 0; padding-bottom: calc(var(--cy-h) - var(--road-y) + 1rem); }
  .footer__grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .footer__join { max-width: 22rem; }
}

@media (max-width: 900px) and (min-width: 641px) {
  .projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .incipit__item,
  .js .incipit__icon,
  .site-header, .site-header__logo img, .pill, .social,
  .newsletter__btn, .js .footer__cyclist,
  .faq__btn, .faq__icon::before, .faq__icon::after, .faq__answer,
  .filter, .featured__tab, .featured__panel, .project__img, .btn, .btn-arrow, .glyph { transition: none; }
  .glyph.is-landed { animation: none; }
  .project { animation: none; }
  .project__media::after { animation: none; transition: none; }
  .project__img--alt { transition: none; }
}

/* ==========================================================================
   PAGES INTERNES
   ========================================================================== */
.page-inner { background: var(--c-cream); }

/* Header transparent (il garde son contenu, mais ne prend jamais de fond) */
.page-inner .site-header.is-scrolled { background: transparent; box-shadow: none; }
.page-inner .pill--light { background: var(--c-yellow); }
.page-inner .pill--light:hover { background: #efc24f; }

/* --------------------------------------------------------------------------
   Pile de cartes dépilée au scroll
   -------------------------------------------------------------------------- */
.deck {
  --deck-gap: clamp(.75rem, 2vw, 1.5rem);
  position: relative;
  height: calc(100 * var(--svh) + (var(--n) - 1) * 80 * var(--svh));
  background: var(--c-cream);
}
.deck__stage {
  position: sticky;
  top: 0;
  height: calc(100 * var(--svh));
  padding: calc(var(--hdr) + .5rem) var(--deck-gap) var(--deck-gap);
  overflow: hidden;
}
.dcard {
  position: absolute;
  inset: calc(var(--hdr) + .75rem) var(--deck-gap) calc(var(--deck-gap) + 2.75rem);
  max-width: var(--deck-max, 64rem);
  margin-inline: auto;
  border-radius: var(--card-radius);
  padding: clamp(1.5rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 .6rem 2rem rgba(0,0,0,.08);
  transform-origin: 50% 50%;
  will-change: transform;
}
.dcard--orange { background: var(--c-orange); }
.dcard--yellow { background: var(--c-yellow); }
.dcard--cream  { background: var(--c-cream); }
.dcard--orange:first-child { align-items: center; text-align: center; }

/* Sans JS : les cartes s'empilent simplement les unes sous les autres */
html:not(.js) .deck { height: auto; padding: 5.5rem 0 1rem; }
html:not(.js) .deck__stage { position: static; height: auto; overflow: visible; display: grid; gap: 1rem; }
html:not(.js) .dcard { position: relative; inset: auto; width: 100%; min-height: 24rem; }

/* Carte 1 */
.dcard__mark { width: clamp(3rem, 5.5vw, 5rem); height: auto; margin-bottom: clamp(.5rem, 1.5vh, 1.25rem); }
.dcard__title {
  font-family: var(--f-display);
  font-weight: normal;
  font-size: clamp(2.6rem, 8vw, 7.5rem);
  line-height: .95;
  margin: 0 0 clamp(.75rem, 2vh, 1.75rem);
}
.dcard__lead { max-width: 42rem; font-size: clamp(.95rem, 1.6vw, 1.3rem); font-weight: 300; line-height: 1.5; }
.dcard__nav { display: flex; justify-content: center; gap: .75rem; margin-top: clamp(1rem, 3vh, 2.25rem); }
.round {
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  border: 0; background: var(--c-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
}
.round:hover { background: var(--c-accent); transform: scale(1.06); }
.round:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.round--prev svg { transform: scaleX(-1); }

/* Carte 2 */
.dcard--yellow { align-items: center; text-align: center; }
.dcard__statement {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4.4vw, 4rem);
  line-height: 1.05;
  max-width: 16em;
}
.hl-o { color: #FF6B00; }
.hl-c { color: var(--c-cream); }

/* Carte 3 */
.dcard__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 4vw, 4rem); align-items: center; height: 100%; }
.dcard__photo {
  height: 100%; max-height: 34rem; min-height: 12rem;
  border-radius: calc(var(--card-radius) * .6);
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.35) 0 14%, transparent 15%),
    radial-gradient(circle at 68% 40%, rgba(255,255,255,.28) 0 12%, transparent 13%),
    linear-gradient(160deg, #cfc7b2, #9c9482);
}
.dcard__copy { font-size: clamp(.9rem, 1.3vw, 1.1rem); font-weight: 300; line-height: 1.5; }
.dcard__copy p + p { margin-top: .9em; }
.dcard__h2 { font-size: clamp(1.4rem, 2.8vw, 2.4rem); line-height: 1.15; font-weight: 600; margin: 0 0 1em; }
.hl-b { color: #527FBA; }
.hl-o2 { color: #FF6B00; font-weight: 600; }
.dcard__btn { margin-top: 1.5rem; }

/* Carte 4 */
.dcard--social { align-items: center; }
.bigsocials { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.75rem, 2.5vw, 2rem); flex-wrap: wrap; justify-content: center; }
.bigsocial {
  display: flex; align-items: center; justify-content: center;
  width: clamp(6.5rem, 20vw, 14rem); aspect-ratio: 1;
  border-radius: 22%;
  background: #FF6B00; color: var(--c-cream);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.bigsocial svg { width: 52%; height: 52%; }
.bigsocial:hover { transform: translateY(-4px) rotate(-4deg); }
.bigsocial:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 4px; }

@media (max-width: 760px) {
  .dcard__split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 36%) auto; align-content: center; }
  .dcard__photo { min-height: 0; }
  .dcard__copy { font-size: .85rem; line-height: 1.4; }
  .dcard__h2 { font-size: 1.3rem; margin-bottom: .6em; }
  .dcard__btn { margin-top: 1rem; height: 3rem; }
  .round { width: 3.2rem; height: 3.2rem; }
}

/* --------------------------------------------------------------------------
   Page Stories (cartes avec image à droite)
   -------------------------------------------------------------------------- */
.dcard--blue { background: var(--c-blue); }
.dcard__nav--bottom {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 1.75rem);
  transform: translateX(-50%);
  margin: 0; z-index: 3;
}
.dcard--hero { padding-bottom: 6rem; }
.dcard--yellow .dcard__statement { margin-bottom: 3rem; }

.dcard--split { text-align: left; align-items: flex-start; justify-content: center; padding-left: clamp(1.5rem, 7vw, 6rem); padding-bottom: 5.5rem; }
.dcard__copy--left { max-width: 40%; position: relative; z-index: 2; }
.dcard__copy--left p { font-size: clamp(.9rem, 1.35vw, 1.2rem); }
.dcard__h2--light { color: #fff; }
.hl-r  { color: var(--c-accent); font-weight: 600; }
.hl-c2 { color: #fff; font-weight: 600; }

.dcard__fig {
  position: absolute; z-index: 1;
  right: clamp(1rem, 5vw, 5rem); top: 50%;
  height: 74%; width: auto; max-width: 48%;
  object-fit: contain;
  transform: translateY(-52%);
}
.dcard__fig--cut { top: auto; bottom: 0; right: clamp(.5rem, 3vw, 3rem); height: 94%; max-width: 46%; transform: none; object-position: bottom right; }

.stsocials { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; gap: 1rem; }
.stsocial {
  display: flex; align-items: center; justify-content: center;
  width: clamp(3.4rem, 5vw, 4.4rem); aspect-ratio: 1;
  border-radius: 22%; background: var(--c-ink); color: #fff;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.stsocial svg { width: 52%; height: 52%; }
.stsocial:hover { transform: translateY(-3px) rotate(-6deg); }
.stsocial:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 760px) {
  .dcard--split { padding: 1.5rem 1.25rem 6rem; justify-content: flex-start; }
  .dcard__copy--left { max-width: 100%; }
  .dcard__copy--left p { font-size: .88rem; line-height: 1.42; }
  .dcard__fig { top: auto; bottom: 4.6rem; right: .75rem; height: 50%; max-width: 70%; transform: none; }
  .dcard__fig--cut { bottom: 0; right: 0; height: 52%; max-width: 62%; }
  .dcard__nav--bottom { left: 1.25rem; transform: none; }
  .dcard--hero, .dcard--yellow { padding-bottom: 5rem; }
}

.stores { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.stores + .stsocials { margin-top: 1rem; }
.store {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 3.4rem; padding: 0 1.1rem 0 .95rem;
  border-radius: .75rem; background: var(--c-ink); color: #fff; text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
}
.store svg { width: 1.6rem; height: 1.6rem; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.1; }
.store small { font-size: .62rem; font-weight: 300; letter-spacing: .02em; }
.store b { font-size: 1rem; font-weight: 600; }
.store:hover { transform: translateY(-2px); background: #2a2a2a; }
.store:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) {
  .store { height: 3rem; padding: 0 .85rem 0 .75rem; }
  .store b { font-size: .9rem; }
  .stores { gap: .5rem; margin-top: 1rem; }
  .stsocial { width: 3rem; }
}

/* --------------------------------------------------------------------------
   Page Ogam Cubes (cartes de texte)
   -------------------------------------------------------------------------- */
.hl-b2 { color: #527FBA; }
.hl-c3 { color: var(--c-cream); font-weight: 600; }
.dcard--center { align-items: center; justify-content: center; text-align: center; }
.dcard--text { align-items: flex-start; justify-content: center; text-align: left; padding-inline: clamp(1.5rem, 7vw, 6rem); }
.dcard__copy--wide { max-width: 46rem; font-size: clamp(.9rem, 1.35vw, 1.15rem); line-height: 1.5; }
.dcard--center .dcard__copy--wide p + p, .dcard--text .dcard__copy--wide p + p { margin-top: 1em; }
.dcard__h2--display { font-family: var(--f-display); font-weight: normal; font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1; margin: 0 0 clamp(.9rem, 2.5vh, 1.75rem); color: var(--c-ink); }
.dcard__list { list-style: none; margin: 0; padding: 0; max-width: 46rem; font-size: clamp(.9rem, 1.35vw, 1.15rem); line-height: 1.5; font-weight: 300; }
.dcard__list li + li { margin-top: 1em; }
.dcard__list li span { margin-right: .35em; }
.dcard__free { margin-top: 1.25em; font-weight: 600; color: var(--c-accent); font-size: clamp(.95rem, 1.4vw, 1.2rem); }
.dcard__mail { color: var(--c-cream); font-weight: 600; word-break: break-word; }
.dcard__mail:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.dcard__copy--wide strong { font-weight: 600; }
@media (max-width: 760px) {
  .dcard--text, .dcard--center { padding: 1.5rem 1.25rem; }
  .dcard__copy--wide, .dcard__list { font-size: .8rem; line-height: 1.4; }
  .dcard__h2--display { font-size: 1.9rem; margin-bottom: .7rem; }
  .dcard__list li + li, .dcard--text .dcard__copy--wide p + p, .dcard--center .dcard__copy--wide p + p { margin-top: .75em; }
}

/* Flèches de navigation présentes sur toutes les cartes : on réserve la place en bas */
.dcard { padding-bottom: 5.5rem; }
.dcard--center { text-align: center; }

/* --------------------------------------------------------------------------
   Page Diggers (cartes noires et blanches)
   -------------------------------------------------------------------------- */
.dcard--black { background: #000; color: #fff; }
.dcard--white { background: #fff; }
.dcard--black .round { background: #fff; color: #000; }
.dcard--black .round:hover { background: var(--c-orange); }
.dcard--black .round:focus-visible { outline-color: #fff; }
.dcard--black .dcard__title { color: #fff; }
.dcard__mark--inv { filter: invert(1); }
.hl-y { color: var(--c-orange); }
.dcard--black .dcard__lead { color: #fff; }
.dcard__h2--sm { font-size: clamp(1.2rem, 2.2vw, 1.9rem); }

/* anneaux décoratifs de la 1re carte */
.dg__ring { position: absolute; width: clamp(3rem, 6vw, 5.5rem); height: auto; opacity: .85; pointer-events: none; animation: dg-pulse 5s ease-in-out infinite; }
.dg__ring--a { left: 17%; top: 38%; }
.dg__ring--b { right: 17%; top: 14%; animation-delay: -1.7s; }
.dg__ring--c { right: 28%; bottom: 22%; animation-delay: -3.3s; }
@keyframes dg-pulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: .4; } }

/* cadre image + éléments flottants */
.dcard__figbox {
  position: absolute; z-index: 1;
  right: clamp(1rem, 5vw, 5rem); top: 50%;
  height: 78%; aspect-ratio: var(--ar);
  max-width: 50%;
  transform: translateY(-52%);
}
.dcard__figbox--wide { height: 64%; max-width: 52%; }
.dcard__figbox > img:first-child { width: 100%; height: 100%; object-fit: contain; }
.dg__q { position: absolute; width: 17%; height: auto; animation: dg-float 4.5s ease-in-out infinite; }
.dg__q--a { left: -6%; top: 14%; }
.dg__q--b { right: -4%; top: 6%; animation-delay: -1.5s; width: 15%; }
.dg__q--c { right: -6%; top: 62%; animation-delay: -3s; }
@keyframes dg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.7rem); } }

.dcard--black .stsocial { background: transparent; color: #fff; }
.dcard--black .stsocial:focus-visible { outline-color: #fff; }
.dcard--black .stsocial svg { width: 70%; height: 70%; }

.dg__brand { position: absolute; z-index: 1; right: clamp(1.5rem, 9vw, 9rem); top: 46%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 3vh, 2rem); }
.dg__d { width: clamp(5rem, 11vw, 9.5rem); height: auto; }
.dg__word { width: clamp(11rem, 25vw, 22rem); height: auto; }

@media (prefers-reduced-motion: reduce) { .dg__ring, .dg__q { animation: none; } }
@media (max-width: 760px) {
  .dcard__figbox { top: auto; bottom: 4.8rem; right: 50%; transform: translateX(50%); height: 48%; max-width: 86%; }
  .dcard__figbox--wide { height: 44%; }
  .dg__brand { top: auto; bottom: 5.5rem; right: 50%; transform: translateX(50%); flex-direction: row; gap: 1rem; }
  .dg__d { width: 3.6rem; }
  .dg__word { width: 9.5rem; }
  .dg__ring--a { left: 6%; top: 24%; } .dg__ring--b { right: 6%; top: 10%; } .dg__ring--c { right: 14%; bottom: 20%; }
}
.dcard--hero { align-items: center; text-align: center; }
.dcard--white { align-items: center; text-align: center; }
.dcard--white .dcard__statement { max-width: 11.5em; }

/* --------------------------------------------------------------------------
   Page Mon petit herbier (cartes vertes)
   -------------------------------------------------------------------------- */
.dcard--green { background: #76BA3B; color: #fff; }
.dcard--green .dcard__title, .dcard--green .dcard__lead { color: #fff; }
.dcard--green .dcard__copy--left p { color: #fff; }
.dcard--green .dcard__copy--left strong { color: #fff; }
.dcard--green .round:focus-visible { outline-color: #fff; }
.hl-g { color: #76BA3B; }
.dcard--white .dcard__copy--left strong.hl-g { color: #76BA3B; }
.hb__garden { position: absolute; left: clamp(1rem, 4vw, 4rem); bottom: 0; height: 44%; width: auto; max-width: 34%; object-fit: contain; object-position: left bottom; pointer-events: none; }
.hb__book { position: absolute; left: -78%; bottom: 10%; width: 82%; height: auto; }
.hb__brand { top: 47%; gap: clamp(.5rem, 2vh, 1.25rem); }
.hb__acorn { width: clamp(7rem, 17vw, 15rem); height: auto; }
.hb__title { width: clamp(9rem, 17vw, 15rem); height: auto; }
@media (max-width: 760px) {
  .hb__garden { height: 30%; max-width: 40%; left: .75rem; }
  .hb__book { left: -42%; width: 60%; bottom: 4%; }
  .hb__brand { flex-direction: column; bottom: 5.5rem; gap: .4rem; }
  .hb__acorn { width: 6.5rem; } .hb__title { width: 8rem; }
}
.dcard--split.dcard--white { text-align: left; align-items: flex-start; }
.page-herbier .dcard__title { font-size: clamp(2rem, 6.2vw, 5.75rem); }
.page-herbier .hb__garden { height: 40%; max-width: 27%; left: clamp(.75rem, 2.5vw, 2.5rem); }
.page-herbier .hb__book { left: -64%; width: 70%; bottom: 8%; }
.page-herbier .dcard__h2 { text-wrap: balance; }
@media (max-width: 760px) {
  .page-herbier .hb__garden { bottom: 4.6rem; height: 26%; max-width: 38%; }
  .page-herbier .hb__book { left: -40%; width: 56%; }
}

img.dcard__photo { width: 100%; object-fit: cover; background: none; border-radius: calc(var(--card-radius) * .6); }

/* Pages internes : images plus grandes, plus proches du texte (desktop) */
@media (min-width: 761px) {
  .dcard__fig { height: 82%; max-width: 52%; top: 47%; right: clamp(.75rem, 3vw, 3rem); }
  .dcard__fig--cut { height: 96%; max-width: 52%; right: clamp(.5rem, 2vw, 2rem); }
  .dcard__figbox { height: 84%; max-width: 54%; top: 47%; right: clamp(.75rem, 3vw, 3rem); }
  .dcard__figbox--wide { height: 72%; max-width: 56%; }
}

/* Herbier : pictos blancs sans carré, bouton « projets » */
.dcard--green .stsocial { background: transparent; color: #fff; }
.dcard--green .stsocial svg { width: 74%; height: 74%; }
.stsocials { align-items: center; }
.hb__projects { height: clamp(3.2rem, 4.6vw, 4rem); min-width: 0; padding: 0 1.75rem; font-family: var(--f-display); font-size: 1.05rem; background: var(--c-yellow); color: #fff; }

/* Pages internes : texte plus large vers le centre, image plus proche */
@media (min-width: 761px) {
  .dcard__copy--left { max-width: 47%; }
  .dcard__fig { max-width: 50%; right: clamp(.5rem, 2vw, 2rem); }
  .dcard__fig--cut { right: clamp(.25rem, 1.5vw, 1.5rem); }
  .dcard__figbox { max-width: 52%; right: clamp(.5rem, 2vw, 2rem); }
  .dcard__figbox--wide { max-width: 54%; }
}

/* Herbier : ajustements pages 3, 4, 5 */
.page-herbier .hb__book { position: static; display: block; width: clamp(8rem, 15vw, 13rem); height: auto; margin-top: 1.5rem; left: auto; bottom: auto; }
.dcard__nav--bottom .hb__projects {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.6rem; padding: 0 2rem; border-radius: 999px;
  background: var(--c-ink); color: #fff; text-decoration: none;
  font-family: var(--f-display); font-size: 1.1rem; line-height: 1;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
}
.dcard__nav--bottom .hb__projects:hover { background: var(--c-accent); transform: scale(1.06); }
.dcard__nav--bottom .hb__projects:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (min-width: 761px) {
  .page-herbier .dcard__figbox.hb__fig3 { right: clamp(3rem, 10vw, 9rem); }
  .page-herbier .dcard__figbox.hb__fig4 { height: 74.5%; right: clamp(3rem, 11vw, 10rem); }
}
@media (max-width: 760px) {
  .page-herbier .hb__book { width: 6rem; margin-top: .6rem; }
}
.page-herbier .dcard__nav--bottom:has(.hb__projects) { left: 50%; right: auto; transform: translateX(-50%); }

.hb__fig3 > img:first-child { transform: rotate(5deg); }
.hb__fig4 > img:first-child { transform: rotate(3deg); }

/* Stories : ajustements */
.page-stories .st__p7 .stsocial { background: transparent; color: #fff; }
.page-stories .st__p7 .stsocial svg { width: 74%; height: 74%; }
.page-stories .st__p7 .stsocials { flex-wrap: wrap; gap: .5rem; }
.page-stories .st__p3 .dcard__h2 { font-size: clamp(1.3rem, 2.5vw, 2.15rem); }
@media (min-width: 761px) {
  .page-stories .st__p3 .dcard__fig--cut { height: 104%; bottom: -2%; }
  .page-stories .st__p5 .dcard__fig { right: clamp(3rem, 9vw, 8rem); }
  .page-stories .st__p6 .dcard__fig { height: 68%; right: clamp(2rem, 7vw, 6rem); }
}
@media (min-width: 761px) {
  .dcard__fig.dcard__fig--cut { top: auto; bottom: 0; }
  .page-stories .st__p3 .dcard__fig--cut { height: 100%; bottom: 0; }
}

/* Stories : ajustements 2 */
.page-stories .dcard__nav--bottom:has(.hb__projects) { left: 50%; right: auto; transform: translateX(-50%); }
@media (min-width: 761px) {
  .page-stories .st__p3 .dcard__fig--cut { height: 88%; bottom: 0; }
  .page-stories .st__p5 .dcard__fig { right: clamp(.75rem, 2.5vw, 2.5rem); }
  .page-stories .st__p5 .dcard__copy--left { max-width: 44%; }
  .page-stories .st__p6 .dcard__fig { height: 60%; }
}
@media (min-width: 761px) {
  .page-stories .st__p6 .dcard__fig { right: clamp(.75rem, 3vw, 3rem); }
  .page-stories .st__p6 .dcard__copy--left { max-width: 40%; }
}

/* Cubes */
.dcard__nav--bottom:has(.hb__projects) { left: 50%; right: auto; transform: translateX(-50%); }
.cu__p4 .dcard__list { max-width: 36rem; font-size: clamp(1rem, 1.6vw, 1.35rem); }
@media (max-width: 760px) { .cu__p4 .dcard__list { max-width: none; font-size: .8rem; } }
.page-cubes .dcard__nav--bottom { left: 50%; right: auto; transform: translateX(-50%); }

/* Ajustements : cubes, stories, diggers */
.cu__p4 .dcard__list { max-width: 43.2rem; }
@media (max-width: 760px) { .cu__p4 .dcard__list { max-width: none; } }
.st__p2 .dcard__statement { margin-bottom: 0; }
.st__p2 { padding-bottom: clamp(1.5rem, 4vw, 4rem); }
.page-diggers .dcard__nav--bottom:has(.hb__projects) { left: 50%; right: auto; transform: translateX(-50%); }
@media (min-width: 761px) { .page-diggers .dg__p3 .dcard__figbox { right: clamp(3rem, 10vw, 9rem); } }
.dcard--black .dcard__nav--bottom .hb__projects { background: #fff; color: #000; }
.dcard--black .dcard__nav--bottom .hb__projects:hover { background: var(--c-accent); color: #fff; }

/* --------------------------------------------------------------------------
   Page Ogam for Europa
   -------------------------------------------------------------------------- */
.dcard--closing { align-items: center; }
.eu__logo { font-family: var(--f-display); font-size: clamp(2rem, 4.4vw, 3.8rem); letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1; margin-bottom: 1.25rem; }

/* Carte Horizon : fond coloré qui dérive lentement */
.dcard--horizon {
  color: #fff;
  background: #3a9fc9;
  isolation: isolate;
}
.dcard--horizon::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background:
    radial-gradient(38% 45% at 12% 88%, #f26a1b 0 55%, transparent 100%),
    radial-gradient(34% 40% at 88% 14%, #f58a2e 0 50%, transparent 100%),
    radial-gradient(40% 50% at 60% 70%, #1f8fc0 0 55%, transparent 100%),
    radial-gradient(35% 40% at 30% 20%, #5db6d8 0 55%, transparent 100%);
  filter: blur(36px) saturate(1.1);
  animation: eu-drift 18s ease-in-out infinite alternate;
}
@keyframes eu-drift { to { transform: translate(4%, -3%) rotate(6deg) scale(1.08); } }
.dcard--horizon .dcard__nav .round { background: var(--c-ink); }
.eu__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; height: 100%; padding-bottom: 1rem; }
.eu__copy { font-size: clamp(.85rem, 1.25vw, 1.1rem); line-height: 1.5; font-weight: 300; text-align: left; }
.eu__copy p + p { margin-top: .9em; }
.eu__copy .dcard__btn { margin-top: 1.5rem; }

/* Diaporama */
.eu__show { position: relative; justify-self: center; height: 100%; max-height: 100%; aspect-ratio: 3 / 4; max-width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.eu__frame { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; border-radius: calc(var(--card-radius) * .55); overflow: hidden; transform: rotate(2.5deg); box-shadow: 0 .8rem 2.2rem rgba(0,0,0,.28); background: #1b2a33; }
.eu__slide { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.7,0,.2,1); z-index: 1; }
.eu__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); transition: transform 6s linear; }
.eu__slide.is-active { clip-path: inset(0); z-index: 3; }
.eu__slide.is-active img { transform: scale(1); }
.eu__slide.is-prev { clip-path: inset(0); z-index: 2; }
.eu__dots { display: flex; gap: .5rem; margin-top: 1rem; }
.eu__dots button { position: relative; width: 2.2rem; height: .32rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.45); overflow: hidden; cursor: pointer; }
.eu__dots button::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.eu__dots button.is-active::after { animation: eu-fill var(--eu-dur, 4.5s) linear forwards; }
.eu__show.is-paused .eu__dots button.is-active::after { animation-play-state: paused; }
@keyframes eu-fill { to { transform: scaleX(1); } }
.eu__dots button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Dernière carte */
.eu__close { display: grid; grid-template-columns: auto auto; gap: clamp(2rem, 8vw, 8rem); align-items: center; justify-content: center; text-align: left; }
.eu__close .dcard__h2 { max-width: 10em; font-size: clamp(1.4rem, 2.6vw, 2.3rem); margin-bottom: 1.5rem; }
.eu__socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.eu__social { display: flex; align-items: center; justify-content: center; width: clamp(3.4rem, 5.5vw, 4.6rem); aspect-ratio: 1; border-radius: 22%; background: var(--c-ink); color: #fff; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.eu__social svg { width: 52%; height: 52%; }
.eu__social:hover { transform: translateY(-3px) rotate(-6deg); }
.eu__social:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.eu__badge { width: clamp(9rem, 20vw, 16rem); aspect-ratio: 1; border-radius: 12%; background: #000; color: var(--c-cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-family: var(--f-display); text-transform: uppercase; line-height: .9; }
.eu__badge-ogam { position: relative; font-size: clamp(2.6rem, 6vw, 5rem); }
.eu__badge-ogam small { position: absolute; right: -.55em; bottom: .05em; font-size: .22em; transform: rotate(90deg); letter-spacing: .1em; }
.eu__badge-europa { font-size: clamp(2.1rem, 4.8vw, 4rem); }
.eu__badge img { width: 18%; height: auto; margin-top: .7rem; filter: invert(1); }
.page-europa .dcard__nav--bottom:has(.hb__projects), .page-europa .dcard__nav--bottom { left: 50%; right: auto; transform: translateX(-50%); }

@media (max-width: 760px) {
  .eu__grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; align-content: start; }
  .eu__copy { font-size: .78rem; line-height: 1.38; }
  .eu__logo { font-size: 1.6rem; margin-bottom: .6rem; }
  .eu__copy p + p { margin-top: .6em; }
  .eu__copy .dcard__btn { margin-top: .9rem; height: 2.8rem; }
  .eu__show { height: 100%; }
  .eu__close { grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; text-align: center; }
  .eu__socials { justify-content: center; }
  .eu__badge { width: 9rem; }
  .page-europa .dcard--horizon { padding: 1.25rem 1.25rem 4.5rem; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .dcard--horizon::before { animation: none; }
  .eu__slide, .eu__slide img { transition: none; }
  .eu__dots button.is-active::after { animation: none; transform: scaleX(1); }
}

/* Logos fournis */
img.eu__logo { display: block; width: clamp(9rem, 17vw, 15rem); height: auto; margin-bottom: 1.25rem; }
img.eu__badge { display: block; width: clamp(9rem, 20vw, 16rem); height: auto; aspect-ratio: 1; background: none; border-radius: 0; }
@media (max-width: 760px) { img.eu__logo { width: 7.5rem; margin-bottom: .6rem; } img.eu__badge { width: 9rem; } }
.faq__answer-inner a { color: #FF6B00; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }

/* Europa : ajustements */
.eu__show { --eu-dur: 2.8s; }
img.eu__logo { margin-inline: auto; }
.eu__close .dcard__h2 { max-width: none; }
@media (min-width: 761px) {
  .page-europa .dcard--hero .dcard__title { font-size: clamp(2rem, 6.2vw, 5.75rem); white-space: nowrap; }
  .page-europa .dcard--hero .dcard__lead { max-width: 52rem; }
  img.eu__badge { width: clamp(12rem, 27vw, 22rem); }
  .eu__close .dcard__h2 { white-space: nowrap; }
}
@media (max-width: 760px) { img.eu__badge { width: 11rem; } }

/* --------------------------------------------------------------------------
   Page Contact : lettre + enveloppe d'introduction
   -------------------------------------------------------------------------- */
.page-contact { background: var(--c-cream); }
.contact { background: var(--c-cream); }
.contact__stage {
  position: relative;
  min-height: calc(100 * var(--svh, 1vh));
  padding: calc(var(--hdr) + 1rem) var(--deck-gap, 1rem) 2rem;
  display: grid; place-items: center;
  overflow: hidden;
}
.letter {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--deck-max, 64rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 5vw, 4.5rem);
  border-radius: var(--card-radius, 1.5rem);
  background: var(--c-cream);
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 .6rem 2rem rgba(0,0,0,.12);
  animation: letter-out 3.2s cubic-bezier(.65,0,.25,1) both;
}
.letter__title { font-family: var(--f-display); font-weight: normal; white-space: nowrap; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1; margin: 0 0 1rem; }
.letter__intro p { font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.35; max-width: 20rem; }
.letter__cta { margin-top: 1.1rem; font-weight: 600; }
.cform { display: grid; gap: .9rem; }
.cform__field {
  width: 100%; border: 2px solid transparent; border-radius: .7rem; background: #fff; color: var(--c-ink);
  padding: 1rem 1.1rem; font: 400 .95rem var(--f-text);
}
.cform__field::placeholder { color: #555; opacity: 1; }
.cform__field--msg { min-height: 9.5rem; resize: vertical; }
.cform__field:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.cform__field[aria-invalid="true"] { border-color: var(--c-accent); }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cform__status { margin: 0; min-height: 1.3em; font-size: .85rem; flex: 1; }
.cform__btn {
  appearance: none; border: 0; height: 3.4rem; padding: 0 1.8rem; border-radius: .7rem;
  background: var(--c-accent); color: #fff; font-family: var(--f-display); font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
}
.cform__btn:hover { background: #d93d05; transform: translateY(-2px); }
.cform__btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.cform__btn[disabled] { opacity: .6; cursor: progress; }

/* Enveloppe */
.env {
  --ew: clamp(17rem, 56vw, 30rem);
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: var(--ew); aspect-ratio: 3 / 2;
  margin: calc(var(--ew) / -3) 0 0 calc(var(--ew) / -2);
  perspective: 1400px; pointer-events: none;
  animation: env-life 3.2s cubic-bezier(.65,0,.25,1) both;
}
.env__back, .env__front, .env__flap { position: absolute; inset: 0; }
.env__back { background: #E7B94F; border-radius: .8rem; box-shadow: 0 1rem 2.4rem rgba(0,0,0,.22); z-index: 1; }
.env__front {
  z-index: 4; border-radius: .8rem; background: var(--c-orange);
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 -2px 0 rgba(0,0,0,.08));
}
.env__flap {
  z-index: 5; height: 62%; bottom: auto; transform-origin: 50% 0;
  background: #F2A33C; border-radius: .8rem .8rem 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: flap-open 3.2s cubic-bezier(.65,0,.25,1) both;
  backface-visibility: visible;
}
.env__seal { position: absolute; left: 50%; bottom: 14%; width: 14%; height: auto; transform: translateX(-50%); }

/* Chronologie (3,2 s) : 0-12 % l'enveloppe apparaît · 14-34 % le rabat s'ouvre · 36-72 % la lettre sort et grandit · 62-92 % l'enveloppe tombe */
@keyframes env-life {
  0%   { opacity: 0; transform: translateY(2rem) scale(.85); }
  12%  { opacity: 1; transform: none; }
  62%  { opacity: 1; transform: none; }
  92%  { opacity: 0; transform: translateY(55vh) rotate(6deg); }
  100% { opacity: 0; transform: translateY(55vh) rotate(6deg); visibility: hidden; }
}
@keyframes flap-open {
  0%, 14% { transform: rotateX(0); z-index: 5; }
  24%     { z-index: 5; }
  25%     { z-index: 0; }
  34%, 100% { transform: rotateX(180deg); z-index: 0; }
}
@keyframes letter-out {
  0%, 30% { transform: translateY(6vh) scale(.36); opacity: 1; clip-path: inset(0 0 0 0 round 1.5rem); }
  48%     { transform: translateY(-9vh) scale(.38); }
  80%     { transform: translateY(0) scale(.98); }
  100%    { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .env { display: none; }
  .letter { animation: none; }
}
@media (max-width: 760px) {
  .letter { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1.25rem; }
  .letter__intro p { max-width: none; }
  .contact__stage { align-items: start; }
}

/* --------------------------------------------------------------------------
   Pages légales (mentions légales, politique de confidentialité)
   -------------------------------------------------------------------------- */
.page-legal { background: var(--c-cream); }
.legal { background: var(--c-cream); padding: calc(var(--hdr) + clamp(2rem, 6vw, 5rem)) 1.25rem clamp(3rem, 8vw, 6rem); }
.legal__inner { max-width: 46rem; margin: 0 auto; }
.legal__title { font-family: var(--f-display); font-weight: normal; text-align: center; font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1; margin: 0 0 clamp(2rem, 5vw, 3.5rem); }
.legal__block + .legal__block { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.legal__block h2 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 600; margin: 0 0 .5rem; color: var(--c-ink); }
.legal__block p { font-size: clamp(.92rem, 1.25vw, 1.05rem); line-height: 1.6; font-weight: 400; }
.legal__block a { color: #FF6B00; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.legal__block a:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Bandeau cookies
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed; z-index: 1000; left: 1rem; bottom: 1rem;
  width: min(36rem, calc(100vw - 2rem));
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 1.1rem;
  background: var(--c-orange); color: var(--c-cream);
  box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.22);
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.cookie[hidden] { display: none; }
.cookie.is-open { opacity: 1; transform: none; }
.cookie__title { font-family: var(--f-display); font-weight: normal; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.1; margin: 0 0 .8rem; color: var(--c-cream); }
.cookie__text { font-size: clamp(.85rem, 1.3vw, .98rem); line-height: 1.4; font-weight: 400; margin: 0 0 1.1rem; color: var(--c-cream); }
.cookie__text a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.cookie__btn {
  appearance: none; border: 0; height: 3.1rem; padding: 0 1.9rem; border-radius: .7rem;
  font-family: var(--f-display); font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
}
.cookie__btn--yes { background: var(--c-accent); color: #fff; }
.cookie__btn--yes:hover { background: #d93d05; transform: translateY(-2px); }
.cookie__btn--no { background: var(--c-cream); color: var(--c-orange); }
.cookie__btn--no:hover { background: #fff; transform: translateY(-2px); }
.cookie a:focus-visible, .cookie__btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.footer__cookies { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.footer__cookies:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (max-width: 520px) { .cookie { left: .5rem; right: .5rem; bottom: .5rem; width: auto; } .cookie__btn { flex: 1; padding: 0 1rem; } }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }

/* Pages légales : listes, tableau, bouton */
.legal__block ul { margin: .5rem 0 .75rem 1.25rem; padding: 0; list-style: disc; }
.legal__block li { font-size: clamp(.92rem, 1.25vw, 1.05rem); line-height: 1.6; }
.legal__block li + li { margin-top: .4rem; }
.legal__block p + p, .legal__block p + .legal__table, .legal__table + p { margin-top: .85rem; }
.legal__table { overflow-x: auto; border-radius: .6rem; background: #fff; }
.legal__table table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 32rem; }
.legal__table th, .legal__table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.legal__table th { font-weight: 600; background: rgba(0,0,0,.04); }
.legal__table tr:last-child td { border-bottom: 0; }
.legal__btn { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: #FF6B00; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.legal__btn:focus-visible, .legal__table:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.page-legal .legal__title { font-size: clamp(1.9rem, 5vw, 4rem); }

/* --------------------------------------------------------------------------
   Page Actualités : un fil qui se dessine au scroll, des cartes qui surgissent
   -------------------------------------------------------------------------- */
.page-news, .news { background: var(--c-cream); }
.news { padding: calc(var(--hdr) + clamp(1.5rem, 5vw, 4rem)) 0 clamp(4rem, 10vw, 8rem); overflow-x: clip; }
.news__head { text-align: center; padding: 0 1.25rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.news__title { font-family: var(--f-display); font-weight: normal; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1; margin: 0 0 1rem; }
.news__lead { max-width: 26rem; margin: 0 auto; font-size: clamp(.95rem, 1.5vw, 1.15rem); line-height: 1.4; }

.feed { position: relative; max-width: 86rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.feed__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.feed__line { fill: none; stroke: #111; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.feed__line--ghost { stroke: rgba(0,0,0,.14); stroke-width: 3; stroke-dasharray: 2 12; }
.feed__node { fill: #111; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.8,.64,1); }
.feed__node.is-on { transform: scale(1); }
.feed__list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
.feed__item { position: relative; display: flex; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 761px) { .feed__item + .feed__item { margin-top: clamp(-4.5rem, -4vw, -2rem); } }
.feed__item--left { justify-content: flex-start; }
.feed__item--right { justify-content: flex-end; }
.feed__date { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--f-display); font-size: clamp(1.1rem, 2vw, 1.7rem); line-height: 1; white-space: nowrap; }
.feed__item--left .feed__date { left: calc(50% + 3.4rem); }
.feed__item--right .feed__date { right: calc(50% + 3.4rem); }
.feed__end { position: relative; z-index: 1; text-align: center; font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 2.2rem); margin: 3.5rem 0 0; }

.ncard {
  position: relative; width: min(42rem, 46%);
  display: flex; align-items: center; gap: 1.25rem;
  padding: clamp(1.1rem, 2.4vw, 1.9rem); border-radius: 1.4rem;
  box-shadow: 0 .5rem 1.6rem rgba(0,0,0,.14);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, opacity .5s ease;
  --rest: -.8deg;
}
.feed__item--right .ncard { --rest: .8deg; }
.ncard:hover { transform: translateY(-5px) rotate(0deg); box-shadow: 0 1rem 2.2rem rgba(0,0,0,.2); }
.ncard--orange { background: var(--c-accent); color: var(--c-cream); padding-right: clamp(7rem, 13vw, 10rem); }
.ncard--white  { background: #fff; color: var(--c-ink); }
.ncard--black  { background: #000; color: #fff; }
.ncard__body { flex: 1 1 auto; min-width: 0; }
.ncard__title { font-family: var(--f-display); font-weight: normal; font-size: clamp(.82rem, 1.45vw, 1.55rem); line-height: 1.05; margin: 0 0 .35rem; white-space: nowrap; }
.ncard__sub { font-family: var(--f-display); font-size: clamp(.75rem, 1vw, .9rem); margin: 0 0 .7rem; }
.ncard__text { font-size: clamp(.8rem, 1.05vw, .92rem); line-height: 1.4; margin: 0 0 1rem; }
.ncard__text em { font-style: italic; }
.ncard__btn { display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1.1rem; border-radius: .6rem; font-family: var(--f-display); font-size: .85rem; line-height: 1; text-decoration: none; transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .2s ease; }
.ncard__btn:hover { transform: translateY(-2px); filter: brightness(.95); }
.ncard__btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.ncard__btn--cream { background: var(--c-cream); color: var(--c-accent); }
.ncard__btn--orange { background: var(--c-accent); color: #fff; }
.ncard__btn--white { background: #fff; color: #000; }
.ncard__phones { flex: none; width: clamp(7rem, 13vw, 10.5rem); height: auto; }
.ncard__tile { flex: none; width: clamp(3.6rem, 6vw, 5rem); height: auto; border-radius: .8rem; }
.ncard__photo {
  position: absolute; right: -2.2rem; top: -1.6rem; width: clamp(7rem, 13vw, 10.5rem); height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: .9rem; box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.28); transform: rotate(5deg);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}
.ncard:hover .ncard__photo { transform: rotate(1deg) scale(1.04); }
.ncard:hover .ncard__tile { transform: rotate(-6deg); }
.ncard__tile { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

/* Entrée : les cartes surgissent de leur côté, avec un petit rebond */
.js .ncard { opacity: 0; transform: translateX(var(--from, 3rem)) rotate(var(--tilt, 4deg)) scale(.9); }
.js .feed__item--left .ncard { --from: -3rem; --tilt: -4deg; }
.js .ncard.is-in { opacity: 1; transform: rotate(var(--rest)); transition: transform .9s cubic-bezier(.34,1.45,.64,1), opacity .5s ease, box-shadow .3s ease; }
.js .ncard.is-in:hover { transform: translateY(-5px) rotate(0deg); }
.js .feed__date { opacity: 0; transform: translateY(-50%) scale(.7); transition: opacity .4s ease .15s, transform .6s cubic-bezier(.34,1.56,.64,1) .15s; }
.js .feed__item.is-in .feed__date { opacity: 1; transform: translateY(-50%); }

@media (max-width: 760px) {
  .feed { padding-inline: 1.1rem; }
  .feed__item { display: block; padding-left: 2.2rem; margin-bottom: 3rem; }
  .feed__date { position: static; display: block; transform: none; margin-bottom: .6rem; font-size: 1.1rem; }
  .js .feed__date, .js .feed__item.is-in .feed__date { transform: none; }
  .ncard { width: 100%; flex-wrap: wrap; }
  .ncard--orange { padding-right: clamp(1.1rem, 2.4vw, 1.9rem); padding-bottom: 7rem; }
  .ncard__photo { right: .9rem; top: auto; bottom: -1.2rem; width: 6.5rem; }
  .ncard__phones { width: 8rem; margin: 0 auto; }
  .js .feed__item--left .ncard, .js .ncard { --from: 2rem; --tilt: 3deg; }

}
@media (prefers-reduced-motion: reduce) {
  .js .ncard, .js .feed__date { opacity: 1; transform: none; transition: none; }
  .js .feed__date { transform: translateY(-50%); }
  .ncard__photo, .ncard__tile { transition: none; }
}
html:not(.js) .feed__svg { display: none; }

/* Actualités : cartes avec visuel qui déborde (comme « La Chasse aux balais ») */
.ncard--bleed { padding-right: clamp(7.5rem, 14vw, 11rem); }
.ncard--bleed .ncard__phones {
  position: absolute; right: -2.4rem; top: -1.8rem; width: clamp(8rem, 15vw, 12rem); height: auto;
  transform: rotate(5deg); filter: drop-shadow(0 .6rem .9rem rgba(0,0,0,.28));
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}
.ncard--bleed:hover .ncard__phones { transform: rotate(1deg) scale(1.05); }
.ncard--green { background: #76BA3B; color: #fff; padding-right: clamp(7.5rem, 14vw, 11rem); }
.ncard__btn--cream-green { background: #fff; color: #4e8a1d; }
.ncard__hedgehog {
  position: absolute; right: -2.2rem; bottom: -1.6rem; width: clamp(8rem, 15vw, 12rem); height: auto;
  transform: rotate(-4deg); filter: drop-shadow(0 .6rem .9rem rgba(0,0,0,.25));
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}
.ncard--green:hover .ncard__hedgehog { transform: rotate(2deg) scale(1.06) translateY(-4px); }
@media (max-width: 760px) {
  .ncard--bleed { padding-right: clamp(1.1rem, 2.4vw, 1.9rem); padding-bottom: 7.5rem; }
  .ncard--bleed .ncard__phones { right: .6rem; top: auto; bottom: -1.2rem; width: 8rem; margin: 0; }
  .ncard--green { padding-right: clamp(1.1rem, 2.4vw, 1.9rem); padding-bottom: 6.5rem; }
  .ncard__hedgehog { right: .6rem; bottom: -1rem; width: 7.5rem; }
}

/* Actualités : bouton d'ouverture, carte Stories */
.feed__cta {
  position: relative; z-index: 2; display: block; width: fit-content; max-width: 100%;
  margin: 0 auto clamp(1.75rem, 4vw, 3rem); padding: clamp(.8rem, 1.6vw, 1.1rem) clamp(1.4rem, 3.5vw, 3rem);
  border-radius: 1rem; background: var(--c-accent); color: var(--c-cream); text-align: center; text-decoration: none;
  font-family: var(--f-display); font-size: clamp(.95rem, 2.6vw, 1.9rem); line-height: 1.1;
  box-shadow: 0 .5rem 1.4rem rgba(0,0,0,.14);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
}
.feed__cta:hover { transform: translateY(-3px) rotate(-1deg); background: #d93d05; }
.feed__cta:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 4px; }
.ncard--peach { background: #F8B659; color: var(--c-ink); padding-right: clamp(7.5rem, 14vw, 11rem); }
.ncard__btn--ink { background: #111; color: #fff; }
.ncard__girl { position: absolute; right: clamp(1rem, 2.5vw, 2rem); bottom: 0; width: clamp(5.5rem, 10vw, 8rem); height: auto; transform: translateY(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1); border-bottom-right-radius: 0; }
.ncard--peach:hover .ncard__girl { transform: translateY(-8px) rotate(-2deg); }
.feed__end { max-width: 22rem; margin-inline: auto; line-height: 1.15; }
@media (max-width: 760px) {
  .feed__cta { margin-left: 0; margin-right: auto; }
  .ncard--peach { padding-right: clamp(1.1rem, 2.4vw, 1.9rem); padding-bottom: 1.5rem; }
  .ncard__girl { position: static; width: 5.5rem; margin: .5rem 0 -1.5rem auto; display: block; }
  .ncard--peach { flex-wrap: wrap; }
  .ncard--peach .ncard__body { flex-basis: 100%; }
}

/* Header : bouton actu, pictos RS aux couleurs du fond, créativité en bleu, bouton actus */
.site-header__side--right { gap: .6rem; }
.page-inner .social { color: var(--c-cream); }
.page-inner .social:hover { color: #fff; }
.hl--blue { color: #527FBA; }
.news__head { margin-bottom: clamp(1rem, 2.2vw, 1.6rem); }
.feed__cta { margin-bottom: clamp(3rem, 6.5vw, 5rem); }
.ncard--yellow { background: var(--c-yellow); color: var(--c-ink); }
.feed { padding-top: clamp(.5rem, 2vw, 1.5rem); }
.ncard__tile--horizon { display: grid; place-items: center; aspect-ratio: 1; height: auto; background: url("../assets/news-horizon-bg.webp") center/cover; box-shadow: 0 .3rem .9rem rgba(0,0,0,.12); }
.ncard__tile--horizon img { width: 78%; height: auto; }
.ncard--horizon { background: #F55B48 url("../assets/news-horizon-bg.webp") center 18%/cover; color: #fff; position: relative; }
.ncard--horizon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(245,91,72,.82) 0%, rgba(245,91,72,.6) 55%, rgba(245,91,72,.25) 100%); }
.ncard--horizon > * { position: relative; }
.ncard--horizon .ncard__title { color: #BCD2EE; }
.ncard__tile--logo { width: clamp(5rem, 9vw, 7.5rem); height: auto; border-radius: 0; background: none; box-shadow: none; align-self: center; }
.ncard--blue { background: var(--c-blue); color: var(--c-ink); }
.ncard__tile--glyph { width: clamp(3.2rem, 5vw, 4.4rem); background: var(--c-yellow); padding: .9rem .7rem; border-radius: 50%; box-sizing: border-box; aspect-ratio: 1; object-fit: contain; }

/* Ajustements : FAQ, cycliste, header des pages internes, contact (cœur) */
.faq__answer p { max-width: none; }
.footer__cyclist { top: calc(var(--road-y) - var(--cy-h) - clamp(.35rem, .9vw, .9rem)); }
.page-inner .site-header, .page-inner .site-header.is-scrolled { background: var(--c-cream); }
.page-inner .site-header.is-scrolled { box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.ncard__tile--glyph { width: clamp(5.5rem, 9vw, 8rem); height: auto; aspect-ratio: auto; background: none; padding: 0; border-radius: 0; align-self: center; object-fit: contain; }
.letter { animation: none; }
.heart { display: block; margin-top: 1.6rem; padding: 0; border: 0; background: none; cursor: pointer; width: clamp(3.2rem, 5vw, 4.2rem); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.heart img { width: 100%; height: auto; pointer-events: none; }
.heart:hover { transform: scale(1.08); }
.heart:active { transform: scale(.92); }
.heart:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 4px; border-radius: 50%; }
.heart__sky { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.heart__fly { position: absolute; width: var(--s, 2rem); height: auto; opacity: 0; will-change: transform, opacity;
  animation: heart-fly var(--d, 2.2s) cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes heart-fly {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); }
  12%  { opacity: 1; }
  50%  { transform: translate(var(--x1, 20px), calc(var(--rise, 50vh) * -.5)) scale(1) rotate(var(--r, 10deg)); }
  100% { opacity: 0; transform: translate(var(--x2, -20px), calc(var(--rise, 50vh) * -1)) scale(1.15) rotate(calc(var(--r, 10deg) * -1)); }
}
@media (prefers-reduced-motion: reduce) { .heart__fly { animation-duration: .01s; } }

/* Section « mis en avant » : fond orange vif, titres blancs */
.card--featured { background: #F8B659; }
.featured__pin::before { border-left-color: rgba(255,255,255,.55); }
.featured__tab { color: rgba(255,255,255,.55); }
.featured__tab:hover { color: rgba(255,255,255,.85); }
.featured__tab.is-active { color: #fff; }
.featured__tab:focus-visible { outline-color: #fff; }
.featured__side { border-top-color: rgba(255,255,255,.55); }
.card--featured .btn-arrow { background: var(--c-ink); }
.card--featured .btn-arrow:hover { background: #fff; color: var(--c-ink); }
.card--featured .btn:focus-visible, .card--featured .btn-arrow:focus-visible { outline-color: #fff; }
.card--featured .btn--cta { background: var(--c-accent); }
.card--featured .btn--cta:hover { background: #d93d05; }
.letter__cta { margin-top: 0; font-weight: 600; }
.heart { position: relative; }
.heart__tip {
  position: absolute; left: calc(100% + .6rem); top: 50%; z-index: 5; white-space: nowrap;
  padding: .55rem .9rem; border-radius: .8rem; background: var(--c-ink); color: #fff;
  font: 500 .85rem/1 var(--f-text); text-align: left;
  opacity: 0; transform: translate(-6px, -50%) scale(.92); transform-origin: left center; pointer-events: none;
  transition: opacity .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.heart__tip::before { content: ""; position: absolute; right: 100%; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right-color: var(--c-ink); }
.heart:hover .heart__tip, .heart:focus-visible .heart__tip { opacity: 1; transform: translate(0, -50%) scale(1); }
@media (max-width: 760px) { .heart__tip { white-space: normal; width: 9.5rem; } }
.card--featured .btn--cta, .card--featured .btn-arrow { background: var(--c-cream); color: var(--c-ink); }
.card--featured .btn--cta:hover, .card--featured .btn-arrow:hover { background: #fff; color: var(--c-ink); }
.card--featured .featured__panel strong { color: var(--c-cream); }
.card--featured .btn--cta { background: var(--c-cream); color: #F8B659; }
.card--featured .btn--cta:hover { background: #fff; color: #F8B659; }
.card--featured .btn-arrow { background: #FF6B00; color: #fff; }
.card--featured .btn-arrow:hover { background: var(--c-accent); color: #fff; }

/* ==========================================================================
   MOBILE : menu, bandeau, mis en avant, pages projets, actu, contact
   ========================================================================== */
.burger, .mnav { display: none; }
@media (max-width: 640px) {
  /* Menu : projets + actu passent dans un panneau */
  .site-header__side--left .pill, .site-header__side--right .pill--light { display: none; }
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%; background: var(--c-yellow); cursor: pointer;
  }
  .burger span { display: block; width: 14px; height: 2px; border-radius: 2px; background: var(--c-ink); transition: transform .3s ease, opacity .2s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .burger:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
  .mnav[hidden] { display: none; }
  .mnav {
    display: grid; gap: .4rem; position: absolute; left: 1rem; top: calc(100% - .2rem); min-width: 12rem;
    padding: .9rem; border-radius: 1.1rem; background: var(--c-cream); box-shadow: 0 .8rem 2rem rgba(0,0,0,.18);
    animation: mnav-in .25s cubic-bezier(.2,.8,.2,1);
  }
  .mnav a { display: block; padding: .65rem .9rem; border-radius: .7rem; font-family: var(--f-display); font-size: 1.25rem; line-height: 1; color: var(--c-ink); text-decoration: none; }
  .mnav a:hover, .mnav a:focus-visible { background: var(--c-yellow); outline: none; }

  @keyframes mnav-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
  .site-header .socials { display: flex; }

  /* Bandeau des phrases moins haut */
  :root { --band-h: clamp(6.5rem, calc(100 * var(--svh) - var(--home-v)), 17 * var(--svh)); }

  /* Mis en avant : moins de hauteur */
  .card--featured { height: calc(var(--pin-h) + (var(--n) - 1) * 38svh); --pin-h: min(100svh, 37rem); }
  .featured__pin { height: var(--pin-h); }
  .featured__panels { min-height: 0; }

  /* Pages projets : textes centrés */
  .dcard--split, .dcard--text, .dcard--center, .dcard--hero, .dcard--yellow { text-align: center; align-items: center; }
  .dcard--split { justify-content: center; }
  .dcard--split .dcard__copy--left, .dcard--split .dcard__copy { max-width: 100%; text-align: center; }
  .dcard__copy--wide { margin-inline: auto; text-align: center; }
  .dcard__list { text-align: center; margin-inline: auto; }
  .stsocials, .stores { justify-content: center; }

  /* Actualités : pas d'images */
  .ncard > img, .ncard__photo, .ncard__tile, .ncard__phones, .ncard__girl, .ncard__hedgehog { display: none !important; }
  .ncard--bleed, .ncard--green, .ncard--peach { padding-bottom: 1.5rem; padding-right: clamp(1.1rem, 2.4vw, 1.9rem); }

  /* Contact : cœur à gauche de la carte, bouton envoyer à droite */
  .cform__row { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
  .cform__status { order: -2; flex: 1 0 100%; }
  .cform__row .heart { margin: 0; width: 3rem; order: -1; }
  .cform__row .heart__tip { left: 0; right: auto; top: auto; bottom: calc(100% + .6rem); transform: translateY(6px) scale(.92); transform-origin: bottom left; }
  .cform__row .heart__tip::before { left: 1rem; right: auto; top: 100%; margin: 0; border-color: transparent; border-top-color: var(--c-ink); }
  .cform__row .heart:hover .heart__tip, .cform__row .heart:focus-visible .heart__tip { transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
  /* cartes avec image : le texte est centré dans la zone libre au-dessus de l'image */
  .dcard--split:has(> .dcard__fig, > .dcard__figbox) > .dcard__copy--left {
    position: absolute; left: 1.25rem; right: 1.25rem; top: calc(var(--hdr) + .25rem); height: calc(42% - var(--hdr));
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  }
}

/* Page 404 */
.nf { min-height: calc(100 * var(--svh)); display: grid; place-items: center; padding: calc(var(--hdr) + 2rem) 1.25rem 3rem; background: var(--c-cream); }
.nf__stage { text-align: center; max-width: 60rem; }
.nf__glyph { width: clamp(3.5rem, 8vw, 5.5rem); height: auto; margin: 0 auto 1rem; animation: nf-lost 4.5s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes nf-lost { 0%, 100% { transform: rotate(-14deg); } 25% { transform: rotate(10deg) translateY(-6px); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(16deg) translateY(-3px); } }
.nf__title { margin: 0; white-space: nowrap; font-family: var(--f-display); font-weight: normal; font-size: clamp(2.4rem, 10vw, 6.5rem); line-height: 1; }
.nf__text { margin: 1.4rem auto 0; max-width: 30rem; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.45; }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; }
.nf__btn { display: inline-flex; align-items: center; height: 3rem; padding: 0 1.4rem; border-radius: .6rem; background: var(--c-accent); color: #fff; font-family: var(--f-display); font-size: 1.15rem; text-decoration: none; transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
.nf__btn:hover { transform: translateY(-2px) rotate(-1deg); background: #d93d05; }
.nf__btn--ghost { background: var(--c-yellow); color: var(--c-ink); }
.nf__btn--ghost:hover { background: #efc24f; }
.nf__btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .nf__glyph { animation: none; } }

/* Ajustements herbier / stories / diggers / morning / europa */
.hb__fig3 > img:first-child, .hb__fig4 > img:first-child { transform: none; }
@keyframes dg-pulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: .4; } }
.dg__ring { animation-duration: 2.4s; }
@media (min-width: 761px) {
  .page-stories .st__p5 .dcard__fig { right: clamp(5rem, 14vw, 13rem); }
  .page-diggers .dcard--white.dcard--split .dcard__figbox { right: clamp(5rem, 14vw, 13rem); }
}
.dcard--social .stsocials { justify-content: center; margin: 0; gap: 1.25rem; }
.dcard--social .stsocial { background: transparent; color: var(--c-ink); width: clamp(3.4rem, 5vw, 4.4rem); }
.dcard--social .stsocial svg { width: 74%; height: 74%; }
.dcard--social .stsocial:focus-visible { outline-color: var(--c-ink); }
.eu__social { background: transparent; color: var(--c-ink); }
.eu__social svg { width: 74%; height: 74%; }
.dcard--social .dcard__nav--bottom .hb__projects { background: var(--c-ink); color: #fff; }
@media (min-width: 761px) {
  .page-herbier .dcard__figbox.hb__fig3, .page-herbier .dcard__figbox.hb__fig4 { height: auto; width: 44%; max-width: 44%; right: clamp(1.5rem, 5vw, 5rem); }
  .page-diggers .dcard--white.dcard--split .dcard__figbox { right: clamp(3rem, 9vw, 9rem); max-width: 42%; }
}
@media (min-width: 761px) {
  .page-diggers .dcard--white.dcard--split .dcard__figbox { right: clamp(2rem, 6vw, 6rem); }
  .page-diggers .dcard--white.dcard--split .dcard__copy--left { max-width: 36%; }
}

/* ==========================================================================
   MOBILE (lot 3) : indicateur « scroll », textes, ajustements par page, accueil
   ========================================================================== */
@keyframes scroll-hint { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; } 50% { transform: translateY(.4rem) rotate(45deg); opacity: 1; } }
@media (max-width: 760px) {
  /* flèches précédent / suivant -> indicateur « scroll » */
  .dcard__nav .round { display: none; }
  .dcard__nav:not(:has(.hb__projects)) {
    left: 50%; right: auto; transform: translateX(-50%);
    flex-direction: column; align-items: center; gap: .15rem; pointer-events: none; color: var(--c-ink);
  }
  .dcard__nav:not(:has(.hb__projects))::before { content: "scroll"; font-family: var(--f-display); font-size: .95rem; letter-spacing: .05em; line-height: 1; }
  .dcard__nav:not(:has(.hb__projects))::after {
    content: ""; width: .75rem; height: .75rem; margin-top: .1rem;
    border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; border-radius: 1px;
    transform: rotate(45deg); animation: scroll-hint 1.6s ease-in-out infinite;
  }
  .dcard--black .dcard__nav:not(:has(.hb__projects)), .dcard--horizon .dcard__nav:not(:has(.hb__projects)) { color: #fff; }

  /* textes centrés, colonne plus étroite, police un peu plus grande */
  .dcard__copy, .dcard__copy--left, .dcard__copy--wide { max-width: 19.5rem; margin-inline: auto; text-align: center; }
  .dcard__copy p, .dcard__copy--left p, .dcard__copy--wide p, .dcard__list { font-size: .95rem; line-height: 1.45; }
  .dcard__lead { max-width: 19.5rem; margin-inline: auto; font-size: 1rem; }
  .dcard__split .dcard__btn { display: flex; width: fit-content; margin: 1rem auto 0; }

  /* dernières slides avec marque : texte remonté, marque au-dessus du bouton */
  .dcard--split:has(> .dg__brand) > .dcard__copy--left {
    position: absolute; left: 1.25rem; right: 1.25rem; top: calc(var(--hdr) + 1rem);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; max-width: none;
  }
  .dcard--split:has(> .dg__brand) > .dcard__copy--left .dcard__h2 { max-width: 19.5rem; }
  .dg__brand { bottom: 7.75rem; }
  .page-herbier .hb__brand { bottom: 7.75rem; }

  /* Stories 4-6 : image centrée */
  .page-stories .deck__stage > .dcard:nth-child(n+4):nth-child(-n+6) .dcard__figbox,
  .page-stories .deck__stage > .dcard:nth-child(n+4):nth-child(-n+6) .dcard__fig { left: 50%; right: auto; transform: translateX(-50%); }

  /* Cubes 3-5 : police plus grande */
  .page-cubes .deck__stage > .dcard:nth-child(n+3):nth-child(-n+5) .dcard__copy--wide,
  .page-cubes .deck__stage > .dcard:nth-child(n+3):nth-child(-n+5) .dcard__copy--wide p,
  .page-cubes .deck__stage > .dcard:nth-child(n+3):nth-child(-n+5) .dcard__list { font-size: 1.02rem; line-height: 1.42; }
  .page-cubes .deck__stage > .dcard:nth-child(n+3):nth-child(-n+5) .dcard__copy--wide, .page-cubes .dcard__list { max-width: 21rem; }

  /* Diggers : cercles plus près du centre */
  .dg__ring--a { left: 18%; top: 30%; } .dg__ring--b { right: 18%; top: 20%; } .dg__ring--c { right: 26%; bottom: 27%; }

  /* Europa : toute la carte Horizon est cliquable, bouton masqué */
  .page-europa .dcard--horizon .dcard__btn { position: static; display: block; width: 0; height: 0; min-width: 0; margin: 0; padding: 0; border: 0; background: none; font-size: 0; line-height: 0; overflow: visible; }
  .page-europa .dcard--horizon .dcard__btn::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .page-europa .dcard--horizon .eu__dots { position: relative; z-index: 3; }
  img.eu__badge { margin-top: 1.6rem; }

  /* Contact : carte plus basse */
  .contact__stage { padding-top: calc(var(--hdr) + 3.25rem); }

  /* Actualités : card Chasse aux balais moins haute en bas */
  .ncard--orange { padding-bottom: 1.5rem; }
}

/* Accueil mobile : titre centré, pas de bandeau « phrases », section suivante visible, bas du « mis en avant » protégé */
@media (max-width: 640px) {
  .card--incipit { display: none; }
  .card--home { position: relative; top: 0; height: calc(100 * var(--svh) - 3.25rem); }
  .home__content { inset: 0; padding: 0 1.25rem; transform: translateY(2.75rem); }
  .card--incipit + .card--projects, .card--home + .card--projects { margin-top: calc(var(--card-overlap) * -1); position: relative; z-index: 2; }
  .featured__pin { padding-bottom: calc(var(--card-overlap) + 4.75rem); }
  .card--featured { --pin-h: min(100svh, 41rem); }
}

/* Mobile : Diggers et Mon petit herbier — images centrées et remontées */
@media (max-width: 760px) {
  .page-diggers .dcard__figbox, .page-herbier .dcard__figbox { left: 50%; right: auto; transform: translateX(-50%); bottom: 6.25rem; }
  .page-diggers .dg__brand, .page-herbier .dg__brand { left: 50%; right: auto; transform: translateX(-50%); flex-direction: column; align-items: center; gap: .75rem; bottom: 9.25rem; width: max-content; }
  .page-diggers .dg__d { width: 4.2rem; } .page-diggers .dg__word { width: 10rem; }
  .page-herbier .hb__acorn { width: 6.5rem; } .page-herbier .hb__title { width: 8rem; }
}

/* Mobile : contenu centré dans l'espace restant au-dessus de « scroll » / du bouton */
@media (max-width: 760px) {
  .dcard--text, .dcard--center, .dcard--hero, .dcard--yellow, .dcard--social { padding-bottom: 5.75rem; }
  .dcard--split:has(> .dg__brand) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem;
    padding: calc(var(--hdr) + .5rem) 1.25rem 6.25rem;
  }
  .dcard--split:has(> .dg__brand) > .dcard__copy--left { position: static; left: auto; right: auto; top: auto; }
  .page-diggers .dg__brand, .page-herbier .dg__brand { position: static; transform: none; left: auto; right: auto; bottom: auto; }
}

/* ---- Ogam morning : dernière slide (logo à gauche, réseaux à droite) ---- */
.dcard--mclose .eu__close { grid-template-columns: auto auto; gap: clamp(2.5rem, 9vw, 9rem); }
.dcard--mclose .mclose__logo { display: block; width: clamp(11rem, 24vw, 19rem); height: auto; }
.dcard--mclose .eu__close .dcard__h2 { white-space: normal; max-width: none; }
.dcard--mclose .eu__social { background: transparent; color: var(--c-ink); }
.dcard--mclose .hb__projects { background: var(--c-ink); color: #fff; }
@media (max-width: 760px) {
  .dcard--mclose .eu__close { grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; text-align: center; }
  .dcard--mclose .mclose__logo { width: 9.5rem; }
  .dcard--mclose .eu__socials { justify-content: center; }
}

/* Mobile : Diggers, Stories, Mon petit herbier — texte plus étroit, plus gros, remonté ; images remontées */
@media (max-width: 640px) {
  .page-diggers .dcard--split:has(> .dcard__fig, > .dcard__figbox) > .dcard__copy--left,
  .page-stories .dcard--split:has(> .dcard__fig, > .dcard__figbox) > .dcard__copy--left,
  .page-herbier .dcard--split:has(> .dcard__fig, > .dcard__figbox) > .dcard__copy--left {
    top: calc(var(--hdr) - .75rem); height: calc(36% - var(--hdr) + .75rem); left: 2.25rem; right: 2.25rem; max-width: none;
  }
  .page-diggers .dcard__copy--left p, .page-stories .dcard__copy--left p, .page-herbier .dcard__copy--left p,
  .page-diggers .dcard__copy p, .page-stories .dcard__copy p, .page-herbier .dcard__copy p {
    max-width: 16.5rem; margin-inline: auto; font-size: 1.1rem; line-height: 1.4;
  }
  .page-stories .dcard__copy--left .dcard__h2, .page-stories .dcard__copy--left h2 { max-width: 16.5rem; margin-inline: auto; }

  /* images remontées */
  .page-diggers .dcard__figbox, .page-herbier .dcard__figbox { bottom: 6.5rem; }
  .page-stories .dcard__figbox { bottom: 6rem; }
  .page-herbier .dcard__fig, .page-diggers .dcard__fig { bottom: 6.5rem; }
}

/* Mobile : dernière slide Diggers / Herbier — texte et marque plus hauts */
@media (max-width: 760px) {
  .page-diggers .dcard--split:has(> .dg__brand), .page-herbier .dcard--split:has(> .dg__brand) {
    padding-bottom: 7.25rem; padding-top: calc(var(--hdr) + .5rem); gap: 3rem;
  }
}

/* Mobile Stories : textes longs — on laisse de la place en réduisant un peu les images */
@media (max-width: 640px) {
  .page-stories .dcard__copy--left p { font-size: 1.02rem; max-width: 17.25rem; }
  .page-stories .dcard--split:has(> .dcard__fig, > .dcard__figbox) > .dcard__copy--left { height: calc(40% - var(--hdr) + .75rem); }
  .page-stories .dcard__figbox { bottom: 7.25rem; height: 43%; }
  .page-stories .dcard__fig { bottom: 0; height: 52%; width: auto; }
}
@media (max-width: 640px) {
  .page-stories .dcard__fig.dcard__fig--cut, .page-stories .st__p3 .dcard__fig--cut { bottom: 0; top: auto; height: 50%; width: auto; max-width: 62%; right: 0; }
}
@media (max-width: 640px) {
  .page-stories .deck__stage .dcard .dcard__fig:not(.dcard__fig--cut) { top: auto; bottom: 7.25rem; height: 43%; width: auto; max-width: 86%; }
}
@media (max-width: 640px) { .page-stories .deck__stage .st__p6 .dcard__fig:not(.dcard__fig--cut) { height: auto; width: 78%; } }

/* Mobile accueil : le fond de page (zones hors contenu : barre système, rebond) est crème, pas jaune */
@media (max-width: 640px) {
  html:has(.card--home) { background-color: var(--c-cream); }
}
@media (max-width: 640px) { .card--projects .projects__grid { margin-top: 2.25rem; } }

/* Ogam Labs : mention « soon » sur le titre */
.labs__name { position: relative; display: inline-block; }
.soon {
  position: absolute; top: -.55em; right: -.2em; transform: translate(60%, -45%) rotate(8deg);
  padding: .22em .6em .26em; border-radius: 999px;
  background: var(--c-accent); color: #fff;
  font-family: var(--f-display); font-size: .42em; line-height: 1; letter-spacing: .04em; text-transform: lowercase;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
  animation: soon-wiggle 3.2s ease-in-out infinite;
}
@keyframes soon-wiggle { 0%, 100% { transform: translate(60%, -45%) rotate(8deg); } 50% { transform: translate(60%, -55%) rotate(3deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .soon { animation: none; } }
@media (max-width: 640px) { .soon { right: 0; top: auto; bottom: calc(100% + .1em); transform: rotate(6deg); animation: none; font-size: .5em; } }

/* Mobile : dernière slide Stories — texte centré entre le haut de la carte et la tête de la figure */
@media (max-width: 640px) {
  .page-stories .dcard--split.st__p7:has(> .dcard__fig, > .dcard__figbox) > .dcard__copy--left { top: calc(var(--hdr) + 3.5rem); height: auto; justify-content: flex-start; }
}