/* ---------------------------------------------------------------------------
   Gabriel Lechemin · feuille de style
   Charte Chevreuil, palette option B : beige commun, un accent vif et une
   encre sombre par page. Platypi, seule famille.

   Règle unique de réserve : sur un aplat de couleur, texte et signes prennent
   le beige. Les cinq couleurs suivent la même règle, l'orange compris (choix
   de Vie du 07/08). Aucune variable ne module cette couleur : un aplat porte
   `color: var(--beige)`, sans exception par espace.
   --------------------------------------------------------------------------- */

@font-face { font-family: Platypi; src: url(/polices/Platypi-Regular.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-RegularItalic.woff2) format('woff2');
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-Medium.woff2) format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-SemiBold.woff2) format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-Bold.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Platypi; src: url(/polices/Platypi-LightItalic.woff2) format('woff2');
  font-weight: 300; font-style: italic; font-display: swap; }

:root {
  --beige: #FFDECB;
  --beige-clair: #FFF1E7;
  --beige-fonce: #F7CDB4;
  --neutre: #1F1A17;
  --marron: #5C341D;

  --spirale: #12818C;   --spirale-encre: #03484E;
  --vagues: #5C32BA;    --vagues-encre: #1D0B46;
  --rayons: #670686;    --rayons-encre: #3E0052;
  --flamme: #F23B01;    --flamme-encre: #521400;
  --diamant: #1800AC;   --diamant-encre: #0B0052;

  /* réglés page par page par l'attribut data-espace */
  --accent: var(--neutre);
  --encre: var(--neutre);

  /* Le fond des cartes. Il vaut le beige clair sur une bande beige, et il
     devient une ombre translucide dès qu'une section passe en aplat de
     couleur : une seule variable suffit alors à retourner toutes les cartes
     de la page, plutôt qu'une exception par composant. */
  --carte: var(--beige-clair);

  /* Le grain des fonds, celui de ses peintures. Il se pose sur le corps de la
     page et sur chaque bande de couleur, pour qu'un aplat garde de la matière. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E");

  --marge: clamp(1.25rem, 4vw, 3.5rem);
  --large: 1320px;
  /* la distance entre le bord du contenu et le bord de la fenêtre : ce qu'il
     faut reprendre en marge négative pour qu'une image déborde jusqu'au bord */
  --gouttiere-page: max(var(--marge), (100vw - var(--large)) / 2);
  --texte: 68ch;
  --rond: 14px;
  --rond-grand: 26px;
  --rond-bouton: 9px;   /* les boutons sont anguleux, jamais des pilules */
  --temps: 620ms;
  --courbe: cubic-bezier(.22, .61, .36, 1);
  /* la courbe des apparitions : un départ franc, une arrivée qui s'éteint
     longtemps. C'est elle qui donne le glissé plutôt que le saut. */
  --souple: cubic-bezier(.16, 1, .3, 1);
}

[data-espace="permaculture"] { --accent: var(--spirale); --encre: var(--spirale-encre); }
[data-espace="emotionnel"]   { --accent: var(--vagues);  --encre: var(--vagues-encre); }
[data-espace="portails"]     { --accent: var(--rayons);  --encre: var(--rayons-encre); }
[data-espace="clarte"]       { --accent: var(--flamme);  --encre: var(--flamme-encre); }
[data-espace="organisation"] { --accent: var(--diamant); --encre: var(--diamant-encre); }
[data-espace="accueil"]      { --accent: var(--neutre);  --encre: var(--neutre); }

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--beige);
  color: var(--encre);
  font-family: Platypi, Georgia, serif;
  font-size: clamp(1.02rem, .42vw + .92rem, 1.16rem);
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  /* Les images qui débordent jusqu'au bord dépassent de quelques points quand
     une barre de défilement est là. `clip` les rogne sans faire du corps un
     conteneur de défilement, ce que `hidden` aurait fait : la colonne collante
     des sections se serait alors calée sur le corps plutôt que sur la fenêtre,
     et elle se décrochait de son texte. */
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.06; letter-spacing: -.018em; }
figure, blockquote, ul, ol { margin: 0; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--beige); }

/* un grain très léger, la matière des fonds grainés de ses peintures */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: var(--grain);
}
body > * { position: relative; z-index: 1; }

.contenu { width: min(100% - 2 * var(--marge), var(--large)); margin-inline: auto; }
.etroit { max-width: var(--texte); }
.centre { text-align: center; margin-inline: auto; }

.surtitre {
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .24em; opacity: .72; margin: 0 0 1.1rem;
}

.signe { display: block; width: 100%; height: 100%; }
.signe svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------ en-tête */

/* Le bandeau prend l'aplat de la page : turquoise sur la Permaculture, violet
   sur la Transformation, orange sur les Labos, presque noir sur l'accueil. Tout
   ce qu'il porte passe donc en réserve beige, selon la règle unique. La couleur
   propre de chaque espace revient dans son signe, au survol, sur la pastille
   beige : le bandeau dit où l'on est, les signes disent où l'on peut aller. */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--accent) 93%, transparent);
  color: var(--beige);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid color-mix(in srgb, black 24%, transparent);
  transition: box-shadow var(--temps) var(--courbe);
}
.entete.pose { box-shadow: 0 14px 42px -26px rgba(31, 26, 23, .9); }

.entete-barre {
  width: min(100% - 2 * var(--marge), var(--large));
  margin-inline: auto;
  display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.6rem);
  min-height: 74px;
}

.marque { display: flex; align-items: center; gap: .62rem; text-decoration: none; flex: 0 0 auto; }
.marque .sceau-mini {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--beige); color: var(--accent);
  display: grid; place-items: center; padding: 5px;
  transition: transform var(--temps) var(--courbe), background var(--temps) var(--courbe);
}
/* le tiroir garde son fond beige : le sceau y reprend l'encre */
.tiroir .marque .sceau-mini { background: var(--neutre); color: var(--beige); }
.marque:hover .sceau-mini { transform: rotate(-6deg) scale(1.06); }
.marque-nom { font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; }

.espaces { display: flex; align-items: center; gap: .28rem; margin-left: auto; }

.bouton-espace {
  --c: var(--neutre);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .78rem .42rem .46rem;
  border-radius: var(--rond-bouton); text-decoration: none;
  /* un demi-gras plutôt qu'un maigre : la réserve beige sur un aplat vif tient
     mieux la petite taille, sans exception de couleur */
  font-size: .85rem; font-weight: 600; line-height: 1.15; white-space: nowrap;
  color: var(--beige);
  position: relative; isolation: isolate;
  transition: color 300ms var(--courbe);
}
.bouton-espace::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--beige); opacity: 0; transform: scale(.86);
  transition: opacity 320ms var(--courbe), transform 320ms var(--courbe);
}
.bouton-espace .pastille {
  width: 27px; height: 27px; flex: 0 0 auto; border-radius: 7px;
  background: color-mix(in srgb, var(--beige) 20%, transparent); color: var(--beige);
  display: grid; place-items: center; padding: 4px;
  transition: transform 320ms var(--courbe), background 320ms var(--courbe), color 320ms var(--courbe);
}
.bouton-espace:is(:hover, :focus-visible, [aria-current="page"]) { color: var(--neutre); }
.bouton-espace:is(:hover, :focus-visible, [aria-current="page"])::before { opacity: 1; transform: scale(1); }
.bouton-espace:is(:hover, :focus-visible, [aria-current="page"]) .pastille {
  background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c);
}
.bouton-espace:is(:hover, :focus-visible) .pastille { transform: rotate(-8deg); }

.bouton-espace[data-c="spirale"] { --c: var(--spirale); }
.bouton-espace[data-c="vagues"]  { --c: var(--vagues); }
.bouton-espace[data-c="rayons"]  { --c: var(--rayons); }
.bouton-espace[data-c="flamme"]  { --c: var(--flamme); }
.bouton-espace[data-c="diamant"] { --c: var(--diamant); }

.langue {
  flex: 0 0 auto; margin-left: .3rem;
  display: inline-flex; align-items: center; gap: .34rem;
  padding: .38rem .72rem; border-radius: var(--rond-bouton); text-decoration: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  border: 1px solid color-mix(in srgb, var(--beige) 44%, transparent);
  transition: background 300ms var(--courbe), color 300ms var(--courbe), border-color 300ms var(--courbe);
}
.langue:hover { background: var(--beige); color: var(--neutre); border-color: var(--beige); }
/* dans le pied du tiroir, le fond est beige : le bouton reprend l'encre */
.tiroir .langue { border-color: color-mix(in srgb, var(--neutre) 26%, transparent); }
.tiroir .langue:hover { background: var(--neutre); color: var(--beige); border-color: var(--neutre); }

.ouvrir-menu { display: none; flex: 0 0 auto; margin-left: auto; padding: .5rem .8rem;
  border-radius: var(--rond-bouton); border: 1px solid color-mix(in srgb, var(--beige) 44%, transparent);
  font-size: .85rem; font-weight: 600; }
.ouvrir-menu .barres { display: inline-block; width: 17px; height: 2px; background: currentColor;
  position: relative; vertical-align: middle; margin-right: .45rem; }
.ouvrir-menu .barres::before, .ouvrir-menu .barres::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px; background: currentColor; }
.ouvrir-menu .barres::before { top: -5px; }
.ouvrir-menu .barres::after { top: 5px; }

/* le tiroir mobile */
.tiroir {
  position: fixed; inset: 0; z-index: 80; background: var(--beige);
  display: flex; flex-direction: column; padding: var(--marge);
  transform: translateY(-101%); transition: transform 520ms var(--courbe);
  overflow-y: auto;
}
.tiroir[data-ouvert="oui"] { transform: none; }
.tiroir-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.fermer-menu { font-size: 1.7rem; line-height: 1; padding: .3rem .6rem;
  border-radius: var(--rond-bouton); }
.tiroir-liste { display: grid; gap: .6rem; }
.tiroir-lien {
  --c: var(--neutre);
  display: flex; align-items: center; gap: .9rem; text-decoration: none;
  padding: .95rem 1.1rem; border-radius: var(--rond);
  background: var(--c); color: var(--beige);
  font-size: 1.12rem; font-weight: 600;
  transform: translateY(14px); opacity: 0;
  transition: transform 460ms var(--courbe), opacity 460ms var(--courbe);
}
.tiroir[data-ouvert="oui"] .tiroir-lien { transform: none; opacity: 1; }
.tiroir-lien .pastille { width: 34px; height: 34px; flex: 0 0 auto; color: var(--beige); }
.tiroir-lien[data-c="spirale"] { --c: var(--spirale); }
.tiroir-lien[data-c="vagues"]  { --c: var(--vagues); }
.tiroir-lien[data-c="rayons"]  { --c: var(--rayons); }
.tiroir-lien[data-c="flamme"]  { --c: var(--flamme); }
.tiroir-lien[data-c="diamant"] { --c: var(--diamant); }
.tiroir-pied { margin-top: auto; padding-top: 2rem; display: flex; gap: 1rem; align-items: center; }

/* -------------------------------------------------------------------- hero */

/* Le hero : image plein cadre, texte calé à gauche, sceau dans le coin bas
   droit, à cheval sur le bord. La place du sceau et de ses flèches est
   réservée sous le cadre par le padding. */
.hero {
  position: relative;
  padding: clamp(.9rem, 2vw, 1.5rem) 0 0;
}
.hero-cadre {
  position: relative; width: min(100% - 2 * var(--marge), 1560px);
  margin-inline: auto;
  aspect-ratio: 16 / 8.4;
  min-height: 460px; max-height: 78vh;
  border-radius: var(--rond-grand);
  background: var(--neutre);
  overflow: hidden;   /* le sceau vit en dehors du cadre, dans .hero */
}

.diapos { position: absolute; inset: 0; }
.diapo {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1500ms var(--courbe);
}
.diapo img { width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 9000ms linear; }
.diapo[data-actif="oui"] { opacity: 1; }
.diapo[data-actif="oui"] img { transform: scale(1); }

/* le voile porte à gauche, là où le texte se pose */
.hero-voile {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--neutre) 90%, transparent) 0%,
                    color-mix(in srgb, var(--neutre) 78%, transparent) 26%,
                    color-mix(in srgb, var(--neutre) 44%, transparent) 52%,
                    color-mix(in srgb, var(--neutre) 12%, transparent) 76%,
                    transparent 92%),
    linear-gradient(to top, color-mix(in srgb, var(--neutre) 62%, transparent) 0%,
                    color-mix(in srgb, var(--neutre) 18%, transparent) 38%,
                    transparent 66%),
    radial-gradient(58% 78% at 96% 104%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 70%);
}

.hero-texte {
  position: absolute; inset: auto 0 0 0;
  padding: 0 clamp(1.2rem, 4vw, 3.6rem) clamp(2.6rem, 5vw, 4.4rem);
  color: var(--beige); text-align: left;
  max-width: 68%;
}
.hero-texte .surtitre { opacity: .84; }
.hero-texte h1 {
  font-size: clamp(2.2rem, 4.9vw, 4rem);
  /* le retour à la ligne vient du texte lui-même : la coupure est choisie,
     jamais subie. Aucune largeur maximale ne vient la contrarier. */
  white-space: pre-line; margin-bottom: .46em; max-width: 100%;
  text-shadow: 0 3px 40px rgba(0, 0, 0, .45);
}
.hero-texte .chapo {
  max-width: 50ch;
  font-size: clamp(.98rem, .44vw + .88rem, 1.14rem); line-height: 1.55;
  opacity: .93; text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}
.hero-bouton {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: clamp(1.2rem, 2.4vw, 1.9rem);
  padding: .82rem 1.7rem; border-radius: var(--rond-bouton);
  background: var(--beige); color: var(--encre);
  font-size: .96rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
  transition: transform 340ms var(--courbe), background 340ms var(--courbe),
              color 340ms var(--courbe), gap 340ms var(--courbe);
}
.hero-bouton span { font-size: 1.2em; line-height: 0; }
.hero-bouton:hover { transform: translateY(-3px); gap: .95rem;
  background: var(--accent); color: var(--beige); }
[data-espace="accueil"] .hero-bouton:hover { background: var(--marron); color: var(--beige); }

/* en haut à droite du cadre : le coin bas droit revient au sceau */
.hero-puces { position: absolute; top: clamp(1rem, 2vw, 1.7rem);
  right: clamp(1rem, 2.4vw, 2rem); display: flex; gap: .5rem; z-index: 3; }
.hero-puce { width: 30px; height: 3px; border-radius: 3px; padding: 0;
  background: color-mix(in srgb, var(--beige) 40%, transparent);
  transition: background 400ms var(--courbe), width 400ms var(--courbe); }
.hero-puce[aria-current="true"] { background: var(--beige); width: 46px; }

/* Le sceau, encastré dans le coin bas droit du cadre.

   Le principe de meawisdom : le carré ne se pose pas sur l'image, il occupe une
   découpe du rectangle. Le sceau est donc collé au coin (right et bottom à 0)
   et prend le rayon du cadre sur ce coin, qu'il épouse exactement. Sa gouttière
   beige (box-shadow de la couleur du fond) déborde de tous les côtés, mais le
   cadre la rogne : il n'en reste que le L intérieur, en haut et à gauche, qui
   donne l'impression que le rectangle est creusé. */
.sceau {
  --taille: clamp(112px, 11vw, 156px);
  --gouttiere: clamp(10px, 1.05vw, 16px);
  position: absolute; z-index: 20;
  right: 0; bottom: 0;
  width: var(--taille); height: var(--taille);
  display: grid; place-items: center; padding: clamp(18px, 1.8vw, 26px);
  border-radius: 22px 0 var(--rond-grand) 0;
  background: var(--accent); color: var(--beige);
  box-shadow: 0 0 0 var(--gouttiere) var(--beige);
  text-decoration: none;
  transition: background 420ms var(--courbe), border-radius 420ms var(--courbe);
  view-transition-name: sceau;
}
.sceau .signe { transition: transform 620ms var(--courbe); }
.sceau:hover .signe { transform: rotate(-7deg) scale(1.06); }
.sceau:focus-visible { outline: 3px solid var(--beige); outline-offset: -6px; }

/* la barre de passage à la page suivante, sous le carrousel, sur téléphone */
.barre-suite { display: none; }
.suite-lien {
  --c: var(--neutre);
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem 1rem .8rem .8rem;
  border-radius: var(--rond); text-decoration: none;
  background: var(--c); color: var(--beige);
  box-shadow: 0 16px 34px -24px color-mix(in srgb, var(--c) 90%, black);
  transition: transform 320ms var(--courbe);
}
.suite-lien:active { transform: scale(.985); }
.suite-lien .pastille {
  width: 40px; height: 40px; flex: 0 0 auto; padding: 7px;
  border-radius: 10px; color: var(--beige);
  background: color-mix(in srgb, var(--beige) 18%, transparent);
}
.suite-mots { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.suite-quoi { font-size: .64rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; opacity: .72; }
.suite-nom { font-size: 1.02rem; font-weight: 700; }
.suite-fleche { margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; }
.suite-fleche svg { width: 100%; height: 100%; }
.suite-lien[data-c="spirale"] { --c: var(--spirale); }
.suite-lien[data-c="vagues"]  { --c: var(--vagues); }
.suite-lien[data-c="rayons"]  { --c: var(--rayons); }
.suite-lien[data-c="flamme"]  { --c: var(--flamme); }
.suite-lien[data-c="diamant"] { --c: var(--diamant); }
.suite-lien[data-c="accueil"] { --c: var(--neutre); }

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(3.6rem, 8vw, 7.5rem) 0; position: relative; }
.section + .section { padding-top: 0; }
.section-tete { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-tete .chapo { max-width: 46ch; }
.section-tete.centre { margin-inline: auto; text-align: center; }
.section-tete h2 { font-size: clamp(1.85rem, 3.4vw, 2.95rem); margin-bottom: .5rem; color: var(--accent); }
[data-espace="clarte"] .section-tete h2 { color: var(--encre); }
.section-tete .chapo { opacity: .84; margin-top: .9rem; }

.trait { width: 62px; height: 4px; border-radius: 4px; background: var(--accent); margin-bottom: 1.5rem; }
.section-tete.centre .trait { margin-inline: auto; }

/* L'entame d'une section : son rang dans la page, puis le filet. Numéroter les
   sections donne à la page une allure de sommaire plutôt que d'enfilade de
   blocs, et le lecteur sait toujours où il en est. */
.entame { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.entame .trait { margin-bottom: 0; width: 48px; }
.rang {
  font-size: .74rem; font-weight: 700; letter-spacing: .2em;
  color: var(--accent); opacity: .55; font-variant-numeric: tabular-nums;
}
[data-espace="clarte"] .rang { color: var(--encre); }

/* ------------------------------------------------- les respirations claires

   Le fond des sections reste le beige commun. Retour de Vie du 07/08 : les
   bandes de couleur pleine largeur faisaient « trop de couleur d'un coup ». Il
   ne reste qu'un ton, `clair`, un beige à peine plus pâle, pour deux
   respirations par page. La couleur vit maintenant dans les cases du bento. */

.section[data-ton="clair"] { background: var(--beige-clair); }
.section[data-ton] > .contenu { position: relative; z-index: 1; }
.section[data-ton]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply; opacity: .42; background-image: var(--grain);
}
/* sur un fond plus pâle, une carte claire se distinguerait mal : elle prend le
   beige commun, l'écart entre les deux se maintient */
.section[data-ton="clair"] > .contenu { --carte: var(--beige); }

.section[data-ton] + .section,
.section + .section[data-ton] { padding-top: clamp(3.6rem, 8vw, 7.5rem); }
.section[data-ton="clair"] + .section[data-ton="clair"] { padding-top: 0; }

.phrase-forte {
  font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.32; font-weight: 500;
  font-style: italic; max-width: 30ch; color: var(--accent);
}
[data-espace="clarte"] .phrase-forte { color: var(--encre); }

.deux-colonnes {
  display: grid; gap: clamp(1.8rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start;
}

/* les cinq portes */
.portes { display: grid; gap: clamp(.9rem, 1.6vw, 1.35rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.porte {
  --c: var(--neutre);
  position: relative; display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border-radius: var(--rond-grand); text-decoration: none;
  background: var(--carte);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  overflow: hidden; isolation: isolate;
  transition: transform 480ms var(--courbe), box-shadow 480ms var(--courbe), color 420ms var(--courbe);
}
.porte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c);
  clip-path: inset(100% 0 0 0); transition: clip-path 560ms var(--courbe);
}
.porte:hover { transform: translateY(-8px); color: var(--beige);
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--c) 92%, black); }
.porte:hover::before { clip-path: inset(0 0 0 0); }
.porte-signe { width: 54px; height: 54px; color: var(--c); transition: color 420ms var(--courbe), transform 560ms var(--courbe); }
.porte:hover .porte-signe { color: var(--beige); transform: rotate(-8deg) scale(1.08); }
.porte h3 { font-size: 1.22rem; line-height: 1.2; }
.porte p { font-size: .96rem; line-height: 1.5; opacity: .88; margin: 0; }
.porte .qui {
  margin-top: auto; padding-top: .5rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .62;
}
.porte[data-c="spirale"] { --c: var(--spirale); }
.porte[data-c="vagues"]  { --c: var(--vagues); }
.porte[data-c="rayons"]  { --c: var(--rayons); }
.porte[data-c="flamme"]  { --c: var(--flamme); }
.porte[data-c="diamant"] { --c: var(--diamant); }

/* l'entrée par le besoin */
.besoins { display: grid; gap: .7rem; }
.besoin {
  --c: var(--neutre);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: clamp(.9rem, 2vw, 1.6rem); align-items: center;
  padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--rond); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--neutre) 14%, transparent);
  background: color-mix(in srgb, var(--carte) 70%, transparent);
  transition: background 380ms var(--courbe), border-color 380ms var(--courbe),
              transform 380ms var(--courbe);
}
.besoin:hover { transform: translateX(8px); border-color: var(--c);
  background: color-mix(in srgb, var(--c) 9%, var(--carte)); }
.besoin-signe { width: 44px; height: 44px; color: var(--c); }
.besoin h3 { font-size: 1.1rem; margin-bottom: .18rem; }
.besoin p { font-size: .93rem; opacity: .78; margin: 0; }
.besoin .aller { font-size: 1.5rem; opacity: .35; transition: opacity 380ms var(--courbe), transform 380ms var(--courbe); }
.besoin:hover .aller { opacity: 1; transform: translateX(5px); color: var(--c); }
.besoin[data-c="spirale"] { --c: var(--spirale); }
.besoin[data-c="vagues"]  { --c: var(--vagues); }
.besoin[data-c="rayons"]  { --c: var(--rayons); }
.besoin[data-c="flamme"]  { --c: var(--flamme); }
.besoin[data-c="diamant"] { --c: var(--diamant); }

/* témoignages */
.voix { display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.temoignage {
  padding: clamp(1.5rem, 2.4vw, 2.1rem); border-radius: var(--rond-grand);
  background: var(--carte);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: transform 480ms var(--courbe), box-shadow 480ms var(--courbe);
}
.temoignage:hover { transform: translateY(-6px);
  box-shadow: 0 26px 54px -34px color-mix(in srgb, var(--accent) 80%, black); }
.temoignage .guillemet { width: 34px; height: 34px; color: var(--accent); opacity: .5; }
.temoignage blockquote { margin: 0; font-size: 1.02rem; line-height: 1.58; font-style: italic; }
.temoignage figcaption { margin-top: auto; font-size: .88rem; }
.temoignage .qui-nom { font-weight: 700; display: block; }
.temoignage .qui-quoi { opacity: .68; }

/* « Pour qui » vit maintenant dans deux cases du bento, plus bas dans ce
   fichier : la phrase sur l'aplat, le signe de la page dans la case voisine. */

/* les trois formes */
.formes { display: grid; gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.forme {
  position: relative; padding: clamp(1.6rem, 2.6vw, 2.3rem);
  border-radius: var(--rond-grand);
  background: var(--accent); color: var(--beige);
  overflow: hidden;
}
.forme::after {
  content: ""; position: absolute; right: -32px; bottom: -32px; width: 150px; height: 150px;
  background: currentColor; opacity: .1; border-radius: 50%;
}
.forme h3 { font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 1rem; opacity: .82; }
.forme p { font-size: .99rem; line-height: 1.56; margin: 0; }

/* listes et colonnes */
.liste-signes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.liste-signes li { display: flex; align-items: flex-start; gap: .8rem;
  padding: .8rem 1rem; border-radius: var(--rond);
  background: var(--carte);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); }
.liste-signes .puce { width: 22px; height: 22px; flex: 0 0 auto; margin-top: .16rem; color: var(--accent); }

.colonnes { display: grid; gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.colonne { padding: clamp(1.4rem, 2.2vw, 2rem); border-radius: var(--rond-grand);
  background: var(--carte);
  border-top: 5px solid var(--accent); }
.colonne h3 { font-size: 1.18rem; margin-bottom: .7rem; color: var(--accent); }
[data-espace="clarte"] .colonne h3 { color: var(--encre); }
.colonne p { font-size: .97rem; line-height: 1.55; margin: 0; }

/* bloc à fournir */
.a-fournir {
  position: relative; padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--rond-grand);
  border: 2px dashed color-mix(in srgb, var(--accent) 46%, transparent);
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--accent) 5%, transparent) 0 14px,
    transparent 14px 28px);
}
.a-fournir .etiquette {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: .34rem .8rem; border-radius: calc(var(--rond-bouton) - 3px);
  background: var(--accent); color: var(--beige); margin-bottom: 1rem;
}
.a-fournir .etiquette::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; animation: battement 2.4s ease-in-out infinite; }
.a-fournir p { margin: 0; font-size: 1rem; line-height: 1.55; }
.a-fournir .note { margin-top: .9rem; font-size: .84rem; opacity: .62; font-style: italic; }
@keyframes battement { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* tableau en pleine largeur */
.tableau-plein { position: relative; }
.tableau-plein figure { border-radius: var(--rond-grand); overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 50%, color-mix(in srgb, var(--accent) 30%, var(--neutre)), var(--neutre));
  padding: clamp(1.4rem, 3vw, 2.6rem); }
.tableau-plein img { width: auto; max-width: min(100%, 720px); margin-inline: auto;
  height: clamp(300px, 54vh, 600px); object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .5)); }
.tableau-plein figcaption { margin-top: .9rem; font-size: .86rem; opacity: .66;
  font-style: italic; text-align: center; }

/* parcours */
.parcours { display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
.parcours-photo { border-radius: var(--rond-grand); overflow: hidden; position: relative;
  background:
    radial-gradient(80% 62% at 50% 88%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--beige-clair), var(--beige-fonce)); }
.parcours-photo::after {
  content: ""; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  width: 74%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.parcours-photo img { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4;
  object-fit: contain; object-position: center bottom; padding: 8% 6% 0; }
.chiffres { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 2.6rem); margin: 1.8rem 0; }
.chiffre .nombre { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1;
  color: var(--accent); display: block; }
[data-espace="accueil"] .chiffre .nombre { color: var(--marron); }
.chiffre .quoi { font-size: .82rem; letter-spacing: .06em; opacity: .72; }
.valeurs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.valeur { font-size: .8rem; font-weight: 600; padding: .34rem .82rem;
  border-radius: calc(var(--rond-bouton) - 2px);
  border: 1px solid color-mix(in srgb, var(--encre) 24%, transparent); }

/* vidéo */
.video { position: relative; border-radius: var(--rond-grand); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--neutre); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-legende { margin-top: .7rem; font-size: .84rem; opacity: .68; }
.videos { display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.video-carte { display: flex; flex-direction: column; gap: .7rem; }
.video-carte h3 { font-size: 1.02rem; }
.video-carte .duree { font-size: .78rem; opacity: .6; letter-spacing: .08em; }

/* agenda, peintures, écrits */
.peintures { display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .peintures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .peintures { grid-template-columns: minmax(0, 1fr); } }
.toile { position: relative; border-radius: var(--rond); overflow: hidden;
  background: var(--neutre); text-decoration: none; display: block; isolation: isolate; }
.toile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform 900ms var(--courbe), filter 700ms var(--courbe); }
.toile:hover img { transform: scale(1.06); }
.toile-info { position: absolute; inset: auto 0 0 0; padding: 1.5rem 1rem .9rem;
  background: linear-gradient(to top, rgba(20, 12, 8, .88), transparent);
  color: var(--beige); }
.toile-info .nom { font-weight: 600; font-size: .98rem; display: block; }
.toile-info .prix { font-size: .78rem; opacity: .8; }

.ecrits { display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ecrit { display: flex; flex-direction: column; gap: .6rem; text-decoration: none;
  padding: clamp(1.2rem, 2vw, 1.7rem); border-radius: var(--rond-grand);
  background: var(--carte);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  transition: transform 420ms var(--courbe), border-color 420ms var(--courbe); }
.ecrit:hover { transform: translateY(-6px); border-color: var(--accent); }
.ecrit .date { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.ecrit h3 { font-size: 1.08rem; line-height: 1.24; }
.ecrit p { font-size: .93rem; opacity: .8; margin: 0; }
.ecrit .lire { margin-top: auto; padding-top: .6rem; font-size: .84rem; font-weight: 600;
  color: var(--accent); }
[data-espace="clarte"] .ecrit .lire { color: var(--encre); }

.ressources { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ressources a { display: flex; align-items: baseline; gap: 1rem; text-decoration: none;
  padding: .85rem 1.1rem; border-radius: var(--rond);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  transition: background 340ms var(--courbe), padding-left 340ms var(--courbe); }
.ressources a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); padding-left: 1.5rem; }
.ressources .date { margin-left: auto; font-size: .78rem; opacity: .6; white-space: nowrap; }

/* appel et formulaire */
.appel { background: var(--accent); color: var(--beige); border-radius: var(--rond-grand);
  padding: clamp(2rem, 5vw, 4rem); position: relative; overflow: hidden; }
.appel::after { content: ""; position: absolute; right: -90px; top: -90px; width: 320px; height: 320px;
  border-radius: 50%; background: currentColor; opacity: .07; }
.appel h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-bottom: .6rem; }
.appel .chapo { opacity: .88; max-width: 46ch; }
.formulaire { display: grid; gap: .8rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.champ { display: flex; flex-direction: column; gap: .38rem; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  opacity: .8; }
.champ input, .champ textarea, .champ select {
  font: inherit; font-size: .98rem; color: var(--beige);
  background: color-mix(in srgb, black 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--beige) 32%, transparent);
  border-radius: 10px; padding: .78rem .9rem; width: 100%;
  transition: border-color 300ms var(--courbe), background 300ms var(--courbe);
}
.champ select option { color: var(--neutre); }
.champ input::placeholder, .champ textarea::placeholder { color: color-mix(in srgb, var(--beige) 55%, transparent); }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; border-color: var(--beige); background: color-mix(in srgb, black 26%, transparent); }
.champ textarea { min-height: 118px; resize: vertical; }
.envoyer { grid-column: 1 / -1; justify-self: start; margin-top: .4rem;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .92rem 1.9rem; border-radius: var(--rond-bouton);
  background: var(--beige); color: var(--accent); font-weight: 700; font-size: 1rem;
  transition: transform 340ms var(--courbe), box-shadow 340ms var(--courbe); }
[data-espace="clarte"] .envoyer { color: var(--encre); }
.envoyer:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .6); }
.note-maquette { grid-column: 1 / -1; font-size: .8rem; opacity: .72; font-style: italic; margin-top: .2rem; }

/* bandeau de passage entre espaces */
.passage { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.passage-lien { --c: var(--neutre); display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.2rem; border-radius: var(--rond); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); color: var(--c);
  font-weight: 600; font-size: .96rem;
  transition: background 340ms var(--courbe), color 340ms var(--courbe); }
.passage-lien:hover { background: var(--c); color: var(--beige); }
.passage-lien .pastille { width: 30px; height: 30px; flex: 0 0 auto; }
.passage-lien[data-c="spirale"] { --c: var(--spirale); }
.passage-lien[data-c="vagues"]  { --c: var(--vagues); }
.passage-lien[data-c="rayons"]  { --c: var(--rayons); }
.passage-lien[data-c="flamme"]  { --c: var(--flamme); }
.passage-lien[data-c="diamant"] { --c: var(--diamant); }
.passage-lien[data-c="accueil"] { --c: var(--neutre); }

/* ----------------------------------------------------------------- pied */

.pied { background: var(--neutre); color: var(--beige); margin-top: clamp(3rem, 7vw, 6rem);
  padding: clamp(2.6rem, 6vw, 4.6rem) 0 2rem; }
.pied a { text-decoration: none; opacity: .82; transition: opacity 300ms var(--courbe); }
.pied a:hover { opacity: 1; }
.pied-haut { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pied h3 { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  opacity: .6; margin-bottom: 1rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .48rem; font-size: .95rem; }
.pied-marque { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.pied-marque .sceau-mini { width: 44px; height: 44px; border-radius: 11px;
  background: var(--beige); color: var(--neutre); display: grid; place-items: center; padding: 7px; }
.pied-signature { font-size: 1.05rem; font-weight: 500; max-width: 26ch; opacity: .86; }
.pied-bas { margin-top: clamp(2.2rem, 5vw, 3.4rem); padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--beige) 18%, transparent);
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center;
  font-size: .82rem; opacity: .72; }
.pied-bas .droite { margin-left: auto; display: flex; gap: 1.2rem; }

/* -------------------------------------------------------------- animations */

/* L'apparition au défilement. Trois choses bougent ensemble : la montée, le
   fondu, et une mise au point qui se fait. Le flou léger qui se lève est ce qui
   donne le poids : l'élément arrive de loin plutôt que de glisser à plat. La
   transformation dure plus longtemps que le fondu, donc le mouvement se pose
   après que l'élément est devenu lisible. */
.monte { opacity: 0; transform: translateY(26px) scale(.988); filter: blur(6px); }
.monte.vu {
  opacity: 1; transform: none; filter: none;
  transition: opacity 760ms var(--souple), transform 1150ms var(--souple),
              filter 640ms var(--souple);
}
/* un filtre laisse un contexte d'empilement derrière lui : la colonne collante
   s'en passe, elle monte et se fond seulement */
.editorial-tete.monte { filter: none; }

.monte.d1.vu { transition-delay: 70ms; }
.monte.d2.vu { transition-delay: 140ms; }
.monte.d3.vu { transition-delay: 210ms; }
.monte.d4.vu { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .monte { opacity: 1; transform: none; filter: none; }
  .diapo img { transition: none; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* transitions de page */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sortir 320ms var(--courbe) both; }
::view-transition-new(root) { animation: entrer 460ms var(--courbe) both; }
@keyframes sortir { to { opacity: 0; transform: translateY(-10px); } }
@keyframes entrer { from { opacity: 0; transform: translateY(16px); } }
::view-transition-group(sceau) { animation-duration: 620ms; }

/* --------------------------------------------------------------- réactivité */

@media (max-width: 1240px) {
  .bouton-espace .nom { display: none; }
  .bouton-espace { padding: .34rem; }
  .marque-nom { display: none; }
}

@media (max-width: 900px) {
  .entete-barre .espaces, .entete-barre .langue { display: none; }
  .ouvrir-menu { display: inline-flex; align-items: center; }
  .marque-nom { display: inline; }
  .deux-colonnes, .parcours { grid-template-columns: minmax(0, 1fr); }
  .parcours-photo { max-width: 380px; }
  .barre-suite { display: block;
    width: min(100% - 2 * var(--marge), var(--large));
    margin: .8rem auto 0; }
}

@media (max-width: 700px) {
  .hero { padding-top: .6rem; }
  .hero-cadre { aspect-ratio: 4 / 5; min-height: 0; max-height: none;
    border-radius: 20px; }
  .hero-texte { padding-bottom: clamp(2rem, 6vw, 3rem); max-width: 100%; }
  .hero-texte h1 { font-size: clamp(1.85rem, 8.2vw, 2.6rem); max-width: 100%; }
  .hero-texte .chapo { font-size: .95rem; line-height: 1.5; max-width: 32ch; }
  .hero-texte .surtitre { font-size: .6rem; letter-spacing: .1em; line-height: 1.6;
    margin-bottom: .8rem; }
  .hero-bouton { padding: .72rem 1.3rem; font-size: .9rem; }
  .sceau { --taille: 84px; --gouttiere: 10px; padding: 15px;
    border-radius: 16px 0 20px 0; }

  .besoin { grid-template-columns: 34px minmax(0, 1fr); }
  .besoin .aller { display: none; }
  .besoin-signe { width: 34px; height: 34px; }
  .tableau-plein img { height: clamp(240px, 44vh, 380px); }
  .pied-bas .droite { margin-left: 0; }
}

@media (max-width: 430px) {
  .hero-cadre { aspect-ratio: 3 / 4; }
  .surtitre { letter-spacing: .18em; font-size: .68rem; }
}

/* ---------------------------------------------------------------------------
   V2 · les signes sans cadre

   Retour de Chevreuil du 07/08 : le carré de couleur derrière chaque signe
   venait de la planche de démonstration des fonds colorés, jamais d'une règle
   de la charte. Ici les signes vivent nus, dans leur couleur, et gagnent la
   taille que le cadre leur prenait.
   --------------------------------------------------------------------------- */

/* la marque : le vrai logo, nu, et bien plus grand. Sur le bandeau de couleur
   il passe en réserve beige ; dans le tiroir, qui reste beige, il reprend l'encre. */
[data-variante="v2"] .marque .sceau-mini {
  width: 52px; height: 52px; padding: 0; border-radius: 0;
  background: none; color: var(--beige);
}
[data-variante="v2"] .tiroir .marque .sceau-mini { background: none; color: var(--neutre); }
[data-variante="v2"] .marque { gap: .75rem; }
[data-variante="v2"] .pied-marque .sceau-mini {
  width: 56px; height: 56px; padding: 0; border-radius: 0;
  background: none; color: var(--beige);
}

/* le menu : le picto nu, en réserve sur le bandeau, dans sa couleur sur la
   pastille beige du survol et de la page courante */
[data-variante="v2"] .bouton-espace .pastille {
  width: 32px; height: 32px; padding: 0; border-radius: 0;
  background: none; color: var(--beige);
}
[data-variante="v2"] .bouton-espace:is(:hover, :focus-visible, [aria-current="page"]) .pastille {
  background: none; color: var(--c);
}
[data-variante="v2"] .bouton-espace { gap: .42rem; padding: .38rem .8rem .38rem .5rem; }

/* le tiroir de téléphone : même geste, en plus grand */
[data-variante="v2"] .tiroir-lien .pastille { width: 44px; height: 44px; padding: 0; }

/* l'encart de passage : le signe seul, en grand, sans cadre plus clair */
[data-variante="v2"] .suite-lien .pastille {
  width: 54px; height: 54px; padding: 0; border-radius: 0;
  background: none; color: var(--beige);
}
[data-variante="v2"] .suite-lien { padding: .85rem 1.1rem; gap: 1rem; }

/* le sceau du hero : le carré prend le beige du fond, le signe prend sa
   couleur. Le coin du rectangle devient une vraie échancrure, et le signe s'y
   pose comme sur une page. */
[data-variante="v2"] .sceau {
  background: var(--beige);
  color: var(--accent);
  padding: clamp(10px, 1.1vw, 16px);
}
[data-variante="v2"] .sceau:focus-visible { outline-color: var(--accent); }

/* le repère de version, discret, dans le pied */
.pied-bas .droite a[title] { font-weight: 700; letter-spacing: .08em; }

/* V2 · « Ouvrir de nouvelles portes », à la place des cinq portes de la V1.
   Le titre tient la colonne de gauche, la liste numérotée déroule à droite,
   chaque ligne séparée par un filet. Les cinq espaces se présentent plus bas,
   dans « Escalader ? Plonger ? Marcher sur des braises ? ». */

.aide {
  display: grid; gap: clamp(1.8rem, 4vw, 4.5rem);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
}
.aide-tete h2 { font-size: clamp(1.85rem, 3.2vw, 2.8rem); color: var(--accent);
  margin-bottom: .8rem; text-wrap: balance; }
.aide-tete .chapo { opacity: .86; }
.aide-signature { margin-top: 1.4rem; font-size: .92rem; font-style: italic; opacity: .62;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--encre) 18%, transparent); }

.aide-liste { list-style: none; margin: 0; padding: 0; counter-reset: aide; }
.aide-liste li {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.2rem); align-items: baseline;
  padding: clamp(.95rem, 1.8vw, 1.35rem) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}
.aide-liste li:first-child { padding-top: 0; }
.aide-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.aide-rang {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  color: var(--accent); opacity: .55;
}
.aide-mot {
  font-size: clamp(1.06rem, .5vw + .96rem, 1.32rem); line-height: 1.4;
  font-weight: 500; text-wrap: pretty;
}

@media (max-width: 900px) {
  .aide { grid-template-columns: minmax(0, 1fr); }
  .aide-liste li { grid-template-columns: 2.6rem minmax(0, 1fr); }
}

/* V2 · l'entrée par le besoin reprend le remplissage des cinq portes de la V1.
   La barre est horizontale, l'aplat vient donc de la gauche plutôt que du bas,
   dans le sens où le bouton glisse déjà. Le ::before est en z-index négatif
   sous un parent isolé : il se peint au-dessus du fond de la barre et sous son
   contenu, ce qui laisse le texte passer en réserve. */
[data-variante="v2"] .besoin {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 480ms var(--courbe), box-shadow 480ms var(--courbe),
              border-color 420ms var(--courbe), color 420ms var(--courbe);
}
[data-variante="v2"] .besoin::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c);
  clip-path: inset(0 100% 0 0); transition: clip-path 560ms var(--courbe);
}
[data-variante="v2"] .besoin:is(:hover, :focus-visible) {
  color: var(--beige); border-color: var(--c);
  background: color-mix(in srgb, var(--carte) 70%, transparent);
  box-shadow: 0 24px 48px -30px color-mix(in srgb, var(--c) 92%, black);
}
[data-variante="v2"] .besoin:is(:hover, :focus-visible)::before { clip-path: inset(0 0 0 0); }
[data-variante="v2"] .besoin-signe {
  transition: color 420ms var(--courbe), transform 560ms var(--courbe);
}
[data-variante="v2"] .besoin:is(:hover, :focus-visible) .besoin-signe {
  color: var(--beige); transform: rotate(-8deg) scale(1.08);
}
[data-variante="v2"] .besoin:is(:hover, :focus-visible) p { opacity: .92; }
[data-variante="v2"] .besoin:is(:hover, :focus-visible) .aller { color: var(--beige); opacity: 1; }

/* le titre de section garde ses retours à la ligne choisis */
.section-tete h2 { white-space: pre-line; text-wrap: balance; }

/* ---------------------------------------------------------------------------
   La page sous le hero · deuxième passe, retours de Vie du 07/08

   Ce qui est gardé : le bloc « rang · titre · texte · photo », le seul qu'il
   ait retenu. Il change de côté d'une section à la suivante, et son titre se
   pose sur une carte de la couleur de la page.

   Ce qui est écarté : les bandes de couleur pleine largeur (« trop de couleur
   d'un coup ») et les photos teintées en duotone (« pas très joli »). La
   couleur vit désormais dans des cases, à la manière du cadre du hero, et les
   photos gardent leurs vraies couleurs.

   Ce qui est ajouté : le signe de la page en très grand derrière le texte, à
   très faible opacité, et une grille bento aux cases inégales.
   --------------------------------------------------------------------------- */

/* --------------------------------------------------------- le bloc éditorial */

.editorial {
  position: relative;
  display: grid; gap: clamp(1.6rem, 4vw, 4.2rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
}
/* le bandeau fait 74 px : la colonne du titre se colle juste en dessous */
.editorial-tete { grid-column: 1; grid-row: 1;
  position: sticky; top: calc(74px + clamp(1.4rem, 3vw, 2.6rem)); }
.editorial-corps { grid-column: 2; grid-row: 1;
  font-size: clamp(1.04rem, .45vw + .94rem, 1.2rem); }
.editorial-corps p { max-width: 56ch; }

.editorial-tete h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.95rem); margin-bottom: .5rem;
  color: var(--accent); text-wrap: balance;
}
[data-espace="clarte"] .editorial-tete h2 { color: var(--encre); }
.editorial-tete .phrase-forte { margin-top: 1.3rem; max-width: 24ch; }
.editorial-tete .chapo { margin-top: .9rem; max-width: 40ch; opacity: .84; }

/* Le titre sur une carte de couleur, le fond de la section restant beige.
   Réservé aux sections qui portent de la vraie matière : la couleur signale le
   fond, et elle ne dirait plus rien si chaque titre la prenait. */
/* Pas de `position` ici : la carte hérite du `sticky` de `.editorial-tete`. Une
   déclaration `relative` l'écraserait, et le `top` du collant deviendrait un
   décalage sec de 116 px qui décroche la carte de son texte. */
.tete-aplat {
  background: var(--accent); border-radius: var(--rond-grand);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  overflow: hidden;
  color: var(--beige);
}
.editorial-tete.tete-aplat h2 { color: var(--beige); }
.tete-aplat .trait { background: var(--beige); }
.tete-aplat .rang { color: var(--beige); opacity: .62; }
.tete-aplat .phrase-forte { color: var(--beige); opacity: .92; }
.tete-aplat .chapo { color: var(--beige); }

/* l'image quitte sa colonne et court jusqu'au bord de la fenêtre */
.editorial-photo {
  grid-column: 2; grid-row: 2; margin: 0;
  margin-right: calc(-1 * var(--gouttiere-page));
  border-radius: var(--rond-grand) 0 0 var(--rond-grand);
  overflow: hidden; position: relative; background: var(--neutre);
}
.editorial-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.editorial-photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.4rem 1.3rem 1rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--neutre) 88%, transparent), transparent);
  color: var(--beige); font-size: .8rem; opacity: .84;
}

/* une section sur deux passe le titre à droite, avec son image */
.editorial[data-cote="droite"] { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.editorial[data-cote="droite"] .editorial-tete { grid-column: 2; }
.editorial[data-cote="droite"] .editorial-corps { grid-column: 1; }
.editorial[data-cote="droite"] .editorial-photo {
  grid-column: 1;
  margin-right: 0; margin-left: calc(-1 * var(--gouttiere-page));
  border-radius: 0 var(--rond-grand) var(--rond-grand) 0;
}

/* le signe de la page, en très grand, derrière le texte */
.filigrane-fond {
  display: block; position: absolute; z-index: -1; pointer-events: none;
  width: min(46vw, 540px); aspect-ratio: 1;
  top: 50%; translate: 0 -50%; right: -9%;
  color: var(--accent); opacity: .07;
}
.editorial[data-cote="droite"] .filigrane-fond { right: auto; left: -9%; }

/* ---------------------------------------------------------------- le bento */

/* Six colonnes, des cases inégales qui tombent juste. Les largeurs viennent de
   la table BENTO de construire.py, pour que le motif soit le même partout. */
.bento {
  display: grid; gap: clamp(.7rem, 1.4vw, 1.15rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.b2 { grid-column: span 2; }
.b3 { grid-column: span 3; }
.b4 { grid-column: span 4; }
.b6 { grid-column: span 6; }

.bloc {
  position: relative; overflow: hidden;
  border-radius: var(--rond-grand);
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  display: flex; flex-direction: column; gap: .9rem;
}
.bloc.bloc-clair {
  background: var(--carte);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.bloc.bloc-couleur { background: var(--accent); color: var(--beige); border: 0; }
.bloc.bloc-couleur h2,
.bloc.bloc-couleur h3,
.bloc.bloc-couleur .phrase-forte { color: var(--beige); }
.bloc.bloc-couleur .trait { background: var(--beige); }
.bloc.bloc-couleur .rang,
.bloc.bloc-couleur .colonne-rang { color: var(--beige); opacity: .62; }
.bloc.bloc-couleur .guillemet { color: var(--beige); opacity: .5; }

.bloc.bloc-photo { padding: 0; background: var(--neutre); min-height: 220px; display: block; }
.bloc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bloc-photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.6rem 1.3rem 1.1rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--neutre) 88%, transparent), transparent);
  color: var(--beige); font-size: .8rem; opacity: .86;
}

/* --------------------------------------------------------- la déclaration */

.declaration .bloc { min-height: clamp(250px, 27vw, 400px); }
.declaration .bloc-couleur { justify-content: flex-end; }
.declaration-phrase {
  margin: 0; position: relative; z-index: 1;
  font-size: clamp(1.22rem, 2.1vw, 1.85rem); line-height: 1.28;
  font-weight: 500; font-style: italic; text-wrap: balance;
}
.filigrane-bloc {
  display: block; position: absolute; z-index: 0;
  top: -14%; right: -8%; width: 58%; aspect-ratio: 1;
  color: var(--beige); opacity: .17;
}

/* le signe de la page, plein, dans sa propre case */
.signe-carte {
  display: block; margin: auto;
  width: min(100%, 170px); aspect-ratio: 1; color: var(--accent);
}
.bloc-clair:has(.signe-carte) { min-height: 190px; }

/* --------------------------------------------- ce qui vit dans les cases */

.colonne.bloc { border-top: 0; }
.colonne-rang {
  display: block; margin-bottom: .1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  color: var(--accent); opacity: .55; font-variant-numeric: tabular-nums;
}
[data-espace="clarte"] .colonne-rang { color: var(--encre); }
.colonne.bloc h3 { margin-bottom: 0; }
.colonne.bloc p { margin: 0; }

.temoignage.bloc { gap: 1.1rem; }
.temoignage.bloc-couleur .qui-quoi { opacity: .8; }
.voix .b6 blockquote, .voix .b4 blockquote { font-size: clamp(1.1rem, 1.7vw, 1.42rem); line-height: 1.44; }

.videos .video-carte { display: flex; flex-direction: column; gap: .7rem; }

/* les trois formes gardent leurs aplats, décalés en escalier */
.forme:nth-child(even) { background: var(--encre); }
@media (min-width: 940px) {
  .formes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .formes > :nth-child(2) { margin-top: clamp(1.2rem, 3.4vw, 3rem); }
  .formes > :nth-child(3) { margin-top: clamp(2.4rem, 6.8vw, 6rem); }
  .colonnes { align-items: start; }
  .colonnes > :nth-child(2) { margin-top: clamp(1rem, 2.6vw, 2.2rem); }
  .colonnes > :nth-child(3) { margin-top: clamp(2rem, 5.2vw, 4.4rem); }
}

/* la liste : des lignes filetées, deux colonnes */
.liste-signes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.6rem, 4vw, 3.6rem); }
.liste-signes li {
  background: none; border: 0; border-radius: 0; align-items: center;
  padding: clamp(.85rem, 1.6vw, 1.15rem) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 16%, transparent);
}
.liste-signes .puce { margin-top: 0; }

/* les ressources se remplissent par la gauche */
.ressources a { position: relative; isolation: isolate; overflow: hidden; }
.ressources a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  clip-path: inset(0 100% 0 0); transition: clip-path 520ms var(--courbe);
}
.ressources a:is(:hover, :focus-visible) {
  background: none; color: var(--beige); border-color: var(--accent); padding-left: 1.5rem;
}
.ressources a:is(:hover, :focus-visible)::before { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------- réactivité */

@media (max-width: 940px) {
  .editorial,
  .editorial[data-cote="droite"] { grid-template-columns: minmax(0, 1fr); }
  .editorial-tete,
  .editorial[data-cote="droite"] .editorial-tete { position: static; grid-column: 1; grid-row: auto; }
  .editorial-corps,
  .editorial[data-cote="droite"] .editorial-corps { grid-column: 1; grid-row: auto; }
  .editorial-photo,
  .editorial[data-cote="droite"] .editorial-photo { grid-column: 1; grid-row: auto; }
  .filigrane-fond { width: min(78vw, 460px); opacity: .05; }
}

@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .b2, .b3, .b4, .b6 { grid-column: 1 / -1; }
  .declaration .bloc { min-height: 0; }
  .declaration .bloc-photo { min-height: clamp(220px, 56vw, 340px); }
}

@media (max-width: 700px) {
  .liste-signes { grid-template-columns: minmax(0, 1fr); }
  .editorial-photo img { aspect-ratio: 4 / 3; }
}