/* ═══════════════════════════════════════════════════════════
   PISTACHIA — pages internes (SEO)
   Complète styles.css : les tokens, le dock et le footer
   viennent de la feuille principale, on n'ajoute ici que la
   mise en page éditoriale des pages secondaires.
   ═══════════════════════════════════════════════════════════ */

.page { position: relative; z-index: 2; }
.wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-tight { width: min(820px, 100%); margin: 0 auto; padding: 0 var(--gutter); }

/* ─── fil d'ariane ─── */
.crumb { padding-top: 120px; }
.crumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.crumb li::after { content: '—'; margin-left: 8px; opacity: 0.45; }
.crumb li:last-child::after { content: ''; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ─── titre de page ─── */
.page-hero { padding-block: 46px clamp(52px, 8vh, 112px); }
.page-hero h1 {
  font-size: clamp(38px, 6.4vw, 92px);
  line-height: 1.02; letter-spacing: -0.035em;
  max-width: 17ch;
}
.lede {
  margin-top: 30px; max-width: 58ch;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.38;
}
.page-hero .mono { margin-bottom: 26px; }

/* ─── sections ─── */
.sec { padding-block: clamp(46px, 7vh, 96px); }
.sec-head { max-width: 62ch; margin-bottom: 44px; }
.sec-head h2 {
  font-size: clamp(28px, 3.9vw, 50px);
  line-height: 1.06; letter-spacing: -0.03em;
  margin-top: 16px;
}
.sec-head .sub { margin-top: 18px; font-size: 18px; line-height: 1.45; max-width: 56ch; color: var(--ash); }
.prose p { max-width: 58ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.52; }
.prose p + p { margin-top: 20px; }
.prose strong { font-weight: 500; }
.hair { height: 1px; background: var(--ink-faint); border: 0; }

/* grille éditoriale : le chapô à gauche, le corps à droite */
@media (min-width: 1000px) {
  .sec-split { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
  .sec-split .sec-head { margin-bottom: 0; max-width: 34ch; }
  .sec-split .qa { border-top: 0; }
  .sec-split .qa > div:first-child { padding-top: 0; }
}

/* ─── grilles de tuiles ─── */
.tiles { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.tiles-2 { grid-template-columns: repeat(2, 1fr); }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tile {
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.tile h3 { font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -0.02em; line-height: 1.16; }
.tile p { font-size: 16px; line-height: 1.46; color: var(--ash); }
.tile .mono { color: var(--ash); }

/* ─── étapes numérotées ─── */
.steps { display: grid; gap: 2px; }
.step {
  display: grid; grid-template-columns: 110px 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding: 34px 0; border-top: 1px solid var(--ink-faint);
}
.step:last-child { border-bottom: 1px solid var(--ink-faint); }
.step-n { font-size: clamp(40px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.04em; opacity: 0.26; }
.step h3 { font-size: clamp(22px, 2.6vw, 33px); letter-spacing: -0.025em; }
.step p { margin-top: 12px; max-width: 58ch; font-size: 17px; line-height: 1.5; color: var(--ash); }

/* ─── chaînes de workflow ─── */
.flows { display: grid; gap: clamp(12px, 1.4vw, 18px); grid-template-columns: repeat(3, 1fr); }
.flow {
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
}
.flow h3 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 20px; }
.flow ol { list-style: none; counter-reset: f; }
.flow li {
  position: relative; padding-left: 26px; padding-bottom: 16px;
  font-size: 16px; line-height: 1.35;
}
.flow li::before {
  content: ''; position: absolute; left: 4px; top: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.flow li:not(:last-child)::after {
  content: ''; position: absolute; left: 7.25px; top: 18px; bottom: 2px;
  width: 1px; background: var(--ink-faint);
}
.flow li:last-child { padding-bottom: 0; }
.flow li:last-child::before { background: var(--ink); }

/* ─── questions ─── */
.qa { border-top: 1px solid var(--ink-faint); }
.qa > div { border-bottom: 1px solid var(--ink-faint); padding: 28px 0; }
.qa h3 { font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.02em; }
.qa p { margin-top: 12px; max-width: 62ch; font-size: 17px; line-height: 1.5; color: var(--ash); }

/* ─── bande anthracite (conversion) ─── */
.band-dark {
  background: var(--lime); color: var(--lime-ink);
  padding: clamp(88px, 13vh, 172px) var(--gutter);
  margin-top: clamp(40px, 6vh, 82px);
  text-align: center;
}
.band-dark h2 {
  font-size: clamp(32px, 5.4vw, 76px);
  line-height: 1.03; letter-spacing: -0.035em;
  max-width: 20ch; margin: 18px auto 0;
}
.band-dark .mono { opacity: 0.66; }
.band-dark p.t { margin: 26px auto 0; max-width: 54ch; font-size: 18px; line-height: 1.48; opacity: 0.82; }
.band-cta {
  display: inline-block; margin-top: 38px;
  background: var(--bone); color: var(--ink);
  padding: 16px 26px; border-radius: var(--radius);
  font-size: 17px;
  transition: filter .3s;
}
.band-cta:hover { filter: brightness(0.94); }
.band-dark .fine { margin-top: 22px; opacity: 0.6; }

/* ─── maillage interne ─── */
.cross { padding-block: clamp(52px, 8vh, 112px) clamp(14px, 2vh, 28px); }
.cross-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 30px; }
.cross-list a {
  display: block; padding: 24px 0; border-top: 1px solid var(--ink-faint);
  font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.02em;
}
.cross-list a span { display: block; margin-top: 8px; }

/* ─── état vide (blog) ─── */
.empty {
  border: 1px dashed rgba(var(--ink-rgb), 0.3);
  border-radius: var(--radius);
  padding: clamp(36px, 6vw, 72px);
  text-align: center;
}
.empty h2 { font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -0.03em; }
.empty p { margin: 18px auto 0; max-width: 48ch; color: var(--ash); font-size: 17px; line-height: 1.5; }
.topics { margin-top: 42px; display: grid; gap: 2px; text-align: left; }
.topics li { border-top: 1px solid var(--ink-faint); padding: 18px 0; font-size: 18px; line-height: 1.45; }

/* ─── navigation SEO du footer (accueil + pages internes) ─── */
.footer-nav {
  max-width: 1180px; margin: clamp(56px, 9vh, 122px) auto 0; padding-top: 22px;
  border-top: 1px solid var(--ink-faint);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 28px; text-align: left;
}
.footer-nav h2 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ash); margin-bottom: 14px; }
.footer-nav ul { display: grid; gap: 9px; }
.footer-nav a { font-size: 16px; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer .footer-bottom { margin-top: clamp(40px, 6vh, 82px); }

/* ─── apparitions au scroll ─── */
/* Le masquage est conditionné à `html.js` : sans JavaScript (ou si pages.js
   ne se charge pas), tout le contenu reste visible. */
html.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js .rv.in { opacity: 1; transform: none; }

/* ─── contenu légal ─── */
.legal h2 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.025em; margin-top: 48px; }
.legal p, .legal li { max-width: 68ch; font-size: 17px; line-height: 1.55; margin-top: 14px; }
.legal ul { list-style: disc; padding-left: 22px; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 900px) {
  .crumb { padding-top: 92px; }
  .page-hero { padding-block: 34px clamp(40px, 6vh, 78px); }
  .sec { padding-block: clamp(34px, 5vh, 66px); }
  .tiles-3, .flows, .cross-list, .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .step { grid-template-columns: 74px 1fr; padding: 26px 0; }
  .band-dark { padding: clamp(66px, 10vh, 130px) var(--gutter); }
}
@media (max-width: 560px) {
  .tiles-2, .tiles-3, .flows, .cross-list { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 22px; }
  .page-hero h1 { max-width: none; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .step-n { opacity: 0.22; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MISE EN SCÈNE — « le système s'exécute »
   Un seul langage de mouvement sur toutes les pages internes :
   ce qui arrive est DÉCOUVERT par un rideau de lames (citation
   de l'accueil), ce qui explique est TRACÉ au fil du scroll.
   `--p` = progression d'entrée 0→1, `--q` = traversée -1→1 ;
   les deux valent leur état final par défaut, donc sans JS la
   page est complète et immobile.
   ═══════════════════════════════════════════════════════════ */

[data-scrub] { --p: 1; --q: 0; }

/* ─── rideau de lames ───
   NB : la classe s'appelle `curtain` et non `reveal` — `.reveal`
   existe déjà dans styles.css (opacity:0 jusqu'à `.in-view`, posé
   par app.js qui ne tourne pas ici) et rendait le bloc invisible. */
.curtain { position: relative; overflow: hidden; background: var(--white); }
.curtain > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blades { position: absolute; inset: 0; display: grid; pointer-events: none; }
.blades i {
  background: var(--bone);
  transform-origin: top; transform: scaleY(0);
  transition: transform .72s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 52ms);
}
/* état fermé, uniquement quand le script est là pour rouvrir */
html.js .curtain:not(.in) .blades i { transform: scaleY(1); transition: none; }
html.js .curtain > img { transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .curtain:not(.in) > img { transform: scale(1.07); }

/* ─── en-tête de page : le texte à gauche, la photographie à droite ─── */
.page-hero .ph-text { min-width: 0; }
.page-hero .ph-viz { position: relative; }
.page-hero .ph-viz .curtain { aspect-ratio: 4 / 5; border-radius: var(--radius); }
.page-hero .ph-cap {
  position: absolute; left: 0; bottom: -30px;
  color: var(--ash);
}

@media (min-width: 1000px) {
  .page-hero .ph-grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(36px, 5vw, 92px); align-items: end;
  }
  .page-hero h1 { max-width: 15ch; }
  .lede { margin-bottom: 8px; }
}
@media (max-width: 999px) {
  .page-hero .ph-viz { margin-top: 38px; }
  .page-hero .ph-viz .curtain { aspect-ratio: 16 / 10; }
  .page-hero .ph-cap { position: static; margin-top: 12px; }
}

/* ─── bande photographique pleine largeur ─── */
/* pleine largeur sans 100vw : la section n'est pas dans .wrap, donc
   la barre de défilement ne peut pas créer de débordement. */
.strip-sec { padding: clamp(46px, 7vh, 96px) 0; }
.strip-sec > p { margin-bottom: clamp(18px, 2.4vh, 30px); }
.strip { position: relative; width: 100%; overflow: hidden; }
.strip .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.strip figure { position: relative; overflow: hidden; aspect-ratio: 5 / 4; background: var(--white); }
.strip img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12) translateY(calc(var(--q) * var(--d) * 1px));
}
.strip .blades { grid-template-columns: repeat(12, 1fr); }
.strip .blades i {
  transition: none;
  transform: scaleY(clamp(0, calc(1.15 - var(--p) * 1.85 + var(--i) * 0.055), 1));
}
.strip figcaption {
  position: absolute; left: 12px; bottom: 10px;
  color: #fff; mix-blend-mode: difference;
}
@media (max-width: 720px) {
  .strip .row { grid-template-columns: repeat(2, 1fr); }
  .strip figure { aspect-ratio: 1; }
  .strip figcaption { display: none; }
}

/* ─── schéma : le diagramme se trace pendant qu'on lit ─── */
.schema { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
.schema-figure {
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: var(--radius);
  padding: clamp(14px, 2vw, 26px);
}
.schema-figure svg { display: block; width: 100%; height: auto; }
.schema-title { font-size: clamp(24px, 3.1vw, 38px); letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 28px; max-width: 18ch; }
.schema-legend li { padding: 20px 0; border-top: 1px solid var(--ink-faint); }
.schema-legend li:first-child { border-top: 0; padding-top: 0; }
.schema-legend b {
  display: block; margin-bottom: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--ash);
}
.schema-legend span { display: block; max-width: 46ch; font-size: 17px; line-height: 1.45; }
@media (min-width: 1000px) {
  .schema { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); }
  .schema-portrait { grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr); }
}
/* tracé : les traits se dessinent, les nœuds s'allument dans l'ordre */
.schema svg { --n: 8; }
.schema svg [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: clamp(0, calc(1 - (var(--p) * var(--n) - var(--i))), 1);
}
.schema svg [data-pop] {
  transform-box: fill-box; transform-origin: center;
  transform: scale(clamp(0, calc(var(--p) * var(--n) - var(--i)), 1));
}

/* ─── chaînes : le flux s'exécute au fil du scroll ─── */
.flow ol { position: relative; }
.flow ol::before, .flow ol::after {
  content: ''; position: absolute; left: 7.5px; top: 8px; bottom: 14px; width: 1px;
}
.flow ol::before { background: var(--ink-faint); }
.flow ol::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--p)); }
.flow li::before {
  background: var(--white);
  transform: scale(clamp(0.72, calc(var(--p) * var(--n) - var(--i) + 0.25), 1));
}
.flow li .dot {
  position: absolute; left: 7.5px; top: 10.5px;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--ink);
  transform: scale(clamp(0, calc(var(--p) * var(--n) - var(--i) - 0.1), 1));
}
.flow li:last-child .dot { background: var(--lime-src, #a8ff9a); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.flow li:last-child::before { border-color: var(--ink); }

/* ─── méthode : le filet de chaque étape se trace ─── */
.step { position: relative; }
.step::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--ink); transform-origin: left;
  transform: scaleX(clamp(0, calc(var(--p) * var(--n) - var(--i)), 1));
}
.step .step-n { opacity: calc(0.1 + 0.26 * clamp(0, calc(var(--p) * var(--n) - var(--i)), 1)); }

/* ─── maillage interne : chaque destination montre son visage ─── */
.cross-list { grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.cross-list a { border-top: 0; padding: 0; }
.cross-list a:hover { padding-left: 0; }
.cross-thumb {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--radius); background: var(--white); margin-bottom: 14px;
}
.cross-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1), filter .7s var(--ease-out);
}
.cross-list a:hover .cross-thumb img { transform: scale(1.05); }
.cross-list a span { margin-top: 6px; }
@media (max-width: 720px) { .cross-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cross-list { grid-template-columns: 1fr; } }

/* ─── mouvement réduit : tout est là, plus rien ne bouge ─── */
@media (prefers-reduced-motion: reduce) {
  [data-scrub] { --p: 1 !important; --q: 0 !important; }
  .schema svg [data-draw] { stroke-dashoffset: 0 !important; }
  .schema svg [data-pop] { transform: none !important; }
  .blades { display: none !important; }
  html.js .curtain > img { transform: none !important; transition: none !important; }
  .strip img { transform: scale(1.12) !important; }
  .cross-thumb img { transition: none !important; }
}

/* ─── titres : la ligne se découvre, elle n'apparaît pas ─── */
.sec-head[data-scrub] h2 {
  clip-path: inset(0 0 calc((1 - var(--p)) * 105%) 0);
  transform: translateY(calc((1 - var(--p)) * 14px));
}
/* ─── tuiles : elles se posent dans l'ordre de lecture ─── */
.tiles[data-scrub] .tile,
.flows[data-scrub] .flow {
  --on: clamp(0, calc(var(--p) * var(--n) - var(--i)), 1);
  opacity: var(--on);
  transform: translateY(calc((1 - var(--on)) * 22px));
}
.qa[data-scrub] > div {
  --on: clamp(0, calc(var(--p) * var(--n) - var(--i)), 1);
  opacity: calc(0.12 + 0.88 * var(--on));
}
@media (prefers-reduced-motion: reduce) {
  .sec-head[data-scrub] h2 { clip-path: none !important; transform: none !important; }
  .tiles[data-scrub] .tile, .flows[data-scrub] .flow, .qa[data-scrub] > div {
    opacity: 1 !important; transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MARQUE — le bloc pistache + logotype.
   Les deux fichiers fournis sont détourés : on s'en sert comme
   MASQUES, ce qui laisse la couleur pilotée par des tokens (un
   seul vert dans l'identité, le mot toujours en anthracite) et
   garde un tracé net à toutes les tailles.
   Les pseudo-éléments sont obligatoires : content.js réécrit le
   texte du wordmark avec textContent et effacerait un enfant
   réel. Le texte reste dans l'arbre d'accessibilité (font-size
   nul ne le retire pas), il est simplement invisible.
   ═══════════════════════════════════════════════════════════ */
:root { --mark: #a8ff9a; }

.dock-wordmark, .loader-wordmark {
  --lock-mark: 20px;          /* hauteur de la pistache */
  --lock-word: 11px;          /* hauteur du logotype */
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0; line-height: 0;
}
.loader-wordmark { --lock-mark: 26px; --lock-word: 14px; gap: 12px; }

.dock-wordmark::before, .loader-wordmark::before,
.dock-wordmark::after,  .loader-wordmark::after {
  content: ''; flex: none; display: block;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
/* la pistache — ratio 267 × 320 */
.dock-wordmark::before, .loader-wordmark::before {
  width: calc(var(--lock-mark) * 0.834); height: var(--lock-mark);
  background-color: var(--mark);
  -webkit-mask-image: url('images/mark.png'); mask-image: url('images/mark.png');
}
/* le logotype — ratio 850 × 94 */
.dock-wordmark::after, .loader-wordmark::after {
  width: calc(var(--lock-word) * 9.043); height: var(--lock-word);
  background-color: var(--ink);
  -webkit-mask-image: url('images/wordmark.png'); mask-image: url('images/wordmark.png');
}
@media (max-width: 900px) { .dock-wordmark { --lock-mark: 18px; --lock-word: 10px; gap: 8px; } }

/* sans masque CSS (très anciens moteurs) : les PNG s'affichent tels quels */
@supports not ((-webkit-mask-image: url('i.png')) or (mask-image: url('i.png'))) {
  .dock-wordmark::before, .loader-wordmark::before { background: url('images/mark.png') center / contain no-repeat; }
  .dock-wordmark::after,  .loader-wordmark::after  { background: url('images/wordmark.png') center / contain no-repeat; }
}

/* ─── signature de pied de page : le logotype, dévoilé de gauche à droite ─── */
.footer-name {
  /* le texte est neutralisé de trois façons : les lettres découpées par le
     script sont retirées, la taille est nulle, la couleur transparente —
     aucun mode de défaillance ne peut le faire apparaître sur le logotype.
     Le nom accessible reste porté par aria-label. */
  font-size: 0; line-height: 0; color: transparent; white-space: normal;
  width: min(100%, 980px); margin: 7vh auto 0;
  height: clamp(42px, 8vw, 118px);
  background-color: var(--ink);
  -webkit-mask: url('images/wordmark.png') center / contain no-repeat;
          mask: url('images/wordmark.png') center / contain no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease-out);
}
html.js .footer-name:not(.in-view) { clip-path: inset(0 100% 0 0); }
.footer-name .ch, .footer-name .chi { display: none; }
@supports not ((-webkit-mask-image: url('i.png')) or (mask-image: url('i.png'))) {
  .footer-name { background: url('images/wordmark.png') center / contain no-repeat; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-name { clip-path: none !important; transition: none !important; }
}

/* ─── respiration anthracite en milieu de page ───
   La bande photographique bascule sur fond sombre, découpée en
   diagonale comme la bande devise de l'accueil. Deux temps sombres
   par page : celui-ci au milieu, la conversion à la fin. */
.band-alt { position: relative; z-index: 2; }
.band-alt .diag { height: clamp(38px, 6vw, 92px); }
/* Le fond sombre doit être porté par un conteneur PLEINE LARGEUR.
   Posé directement sur la section, il s'arrêtait à la largeur de
   `.wrap` (1180 px) et laissait deux bandes vertes sur les côtés,
   alors que les diagonales, elles, traversaient tout l'écran. */
.band-alt-in { background: var(--lime); color: var(--lime-ink); }
.band-alt-in > .strip-sec { padding: clamp(8px, 1vh, 16px) 0 clamp(40px, 6vh, 84px); }
.band-alt .strip-sec > p { color: var(--lime-ink); opacity: 0.66; }
.band-alt .strip figure { background: var(--lime); }
.band-alt .blades i { background: var(--lime); }
/* les textes secondaires se teintent depuis le fond, jamais en gris */
.band-alt .ash, .band-alt .sub { color: rgba(255, 255, 255, 0.62); }
/* les cartes restent claires : on leur rend leur encre sombre */
.band-alt .tile, .band-alt .flow, .band-alt .schema-figure { color: var(--ink); }
.band-alt .tile p { color: var(--ash); }



/* ═══════════════════════════════════════════════════════════
   BENTO CLIQUABLE — chaque pilier de l'accueil mène à sa page.
   Le lien est posé par home.js APRÈS content.js, qui réécrit le
   contenu de la grille et effacerait tout enfant ajouté avant.
   ═══════════════════════════════════════════════════════════ */
.bento-grid .card { position: relative; transition: border-color .45s var(--ease-out); }
.bento-grid .card:has(.card-go):hover { border-color: rgba(var(--ink-rgb), 0.3); }
.bento-grid .card-img img { transition: transform .8s var(--ease-out); }
.bento-grid .card:has(.card-go):hover .card-img img { transform: scale(1.03); }

.card-go {
  position: absolute; inset: 0; z-index: 2;
  border-radius: var(--radius);
}
.card-go span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.card-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* la flèche : l'affordance visible qu'une tuile se clique */
.bento-grid figcaption { position: relative; padding-right: 30px; }
.card-arrow {
  position: absolute; right: 0; top: 2px;
  font-family: var(--mono); font-size: 15px; line-height: 1;
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
  opacity: 0.35;
}
.bento-grid .card:hover .card-arrow { opacity: 1; transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) {
  .bento-grid .card-img img, .card-arrow { transition: none !important; }
  .bento-grid .card:hover .card-img img { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   RELANCES EN COURS DE LECTURE
   Une ligne posée sur un filet, entre deux sections : la question
   à gauche, l'action à droite. Assez présente pour être vue en
   parcourant, assez sobre pour ne pas couper la lecture.
   ═══════════════════════════════════════════════════════════ */
.inline-cta { border-top: 1px solid var(--ink); }
.inline-cta > a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
  padding-block: clamp(22px, 2.8vh, 34px);
}
.inline-cta .q {
  font-size: clamp(19px, 2.1vw, 27px);
  letter-spacing: -0.022em; line-height: 1.3; max-width: 32ch;
}
.inline-cta .go {
  position: relative; flex: none; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em;
  text-transform: uppercase;
}
.inline-cta .go::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-inout);
}
.inline-cta > a:hover .go::after { transform: scaleX(1); transform-origin: left; }
.inline-cta > a:hover .q { opacity: 0.72; }
.inline-cta .q { transition: opacity .4s var(--ease-out); }
@media (max-width: 640px) {
  .inline-cta > a { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .inline-cta .q, .inline-cta .go::after { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   BANDEAU DE CONSENTEMENT
   Barre basse plutôt que fenêtre modale : elle n'interrompt pas
   la lecture. Les deux boutons ont la même géométrie et le même
   niveau — refuser doit coûter le même geste qu'accepter.
   ═══════════════════════════════════════════════════════════ */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--lime); color: var(--lime-ink);
  padding: clamp(16px, 2vh, 22px) var(--gutter);
  transform: translateY(100%);
  transition: transform .62s cubic-bezier(0.16, 1, 0.3, 1);
}
.consent.in { transform: translateY(0); }
.consent-in {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 48px);
}
.consent-txt { font-size: 15px; line-height: 1.45; max-width: 74ch; opacity: 0.88; }
.consent-txt a { text-decoration: underline; text-underline-offset: 3px; }
.consent-act { display: flex; gap: 10px; flex: none; }
.consent-act button {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 11px 22px; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent; color: var(--lime-ink);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.consent-act button:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.consent-act button[data-consent="granted"] {
  background: var(--mark); border-color: var(--mark); color: var(--ink);
}
.consent-act button[data-consent="granted"]:hover { filter: brightness(0.94); background: var(--mark); }
.consent-act button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) {
  .consent-in { flex-direction: column; align-items: stretch; gap: 16px; }
  .consent-act button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   FORMULAIRE « CE QUI VOUS PREND DU TEMPS »
   Deux champs, une question. Décliné sur fond vert (pied de page
   de l'accueil) et sur fond anthracite (bande de conversion).
   ═══════════════════════════════════════════════════════════ */
.ask { width: min(560px, 100%); margin: clamp(26px, 4vh, 44px) auto 0; text-align: left; }
.ask-q {
  font-size: clamp(19px, 2.1vw, 25px); letter-spacing: -0.022em; line-height: 1.24;
  margin-bottom: 20px;
}
.ask-f { display: block; margin-bottom: 14px; }
.ask-f > span {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; opacity: 0.6;
}
.ask input[type="email"], .ask textarea {
  width: 100%; font: inherit; font-size: 16px; color: inherit;
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: var(--radius);
  padding: 13px 14px;
  transition: border-color .3s var(--ease-out);
}
.ask textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
.ask input::placeholder, .ask textarea::placeholder { color: inherit; opacity: 0.38; }
.ask input:focus, .ask textarea:focus { outline: none; border-color: currentColor; }
.ask button[type="submit"] {
  font: inherit; font-size: 16px; cursor: pointer; margin-top: 8px;
  padding: 14px 26px; border-radius: var(--radius); border: 1px solid transparent;
  background: var(--ink); color: var(--bone);
  transition: filter .3s var(--ease-out);
}
.ask button[type="submit"]:hover:not(:disabled) { filter: brightness(1.35); }
.ask button[type="submit"]:disabled { opacity: 0.55; cursor: default; }
.ask button:focus-visible, .ask input:focus-visible, .ask textarea:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px;
}
/* le piège à robots : présent dans le DOM, hors de l'écran et du parcours clavier */
.ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ask-note { margin-top: 16px; font-size: 13px; line-height: 1.5; opacity: 0.6; }
.ask-note a { text-decoration: underline; text-underline-offset: 3px; }
.ask-state { margin-top: 14px; font-size: 15px; line-height: 1.45; min-height: 1.45em; }
.ask-state[data-type="ok"] { color: var(--mark); font-weight: 500; }
.ask-state[data-type="ko"] { color: inherit; opacity: 0.95; text-decoration: underline; text-underline-offset: 4px; }
.ask.sent .ask-q, .ask.sent .ask-f, .ask.sent button, .ask.sent .ask-note { display: none; }

/* ─── sur la bande anthracite ─── */
.band-dark .ask input, .band-dark .ask textarea { border-color: rgba(255, 255, 255, 0.3); }
.band-dark .ask button[type="submit"] { background: var(--mark); color: var(--ink); }
.band-dark .ask button[type="submit"]:hover:not(:disabled) { filter: brightness(0.94); }
.band-dark .ask-state[data-type="ok"] { color: var(--mark); }

/* ─── dans le pied de page vert de l'accueil ─── */
.footer .ask { margin-top: clamp(30px, 5vh, 56px); }
.footer .ask button[type="submit"] { background: var(--ink); color: #fff; }
.footer .ask-state[data-type="ok"] { color: var(--ink); }