/* ═══════════════════════════════════════════════════════════════
   LAURA FARI — DESIGN SYSTEM v4
   Registre : studio de design contemporain.
   Même palette, même typographies. Échelle, vide et asymétrie revus.
   « Le beau attire l'œil, le bien pensé le retient. »
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs ─────────────────────────────────────────────── */
  --blanc:       #FFFFFF;
  --chocolat:    #2A1E18;   /* fond sombre, texte sur clair */
  --bleu-poudre: #7BA3B8;   /* accent SUR chocolat */
  --bleu-dense:  #507C94;   /* accent SUR blanc — AA 4,51:1 */
  --canvas:      #F4F4F4;
  --creme:       #FFFFFF;   /* alias — le crème n'existe plus */
  --creme-alt:   #FAFAFA;
  --beige:       #F4F4F4;
  --sable:       #7BA3B8;
  --sable-vif:   #507C94;   /* accent texte sur clair — AA 4.52:1 */
  --noir:        #2A1E18;   /* chocolat — chaleur de marque */
  --encre:       #2A1E18;   /* = chocolat. Jamais de noir pur (règle de charte) */
  --encre-2:     #3E2C23;   /* chocolat éclairci, survols */
  --bleu:        #7BA3B8;   /* poudre — réservé aux fonds sombres */
  --bleu-clair:  #9DBECF;   /* sur fond sombre, respire mieux */
  --bleu-lien:   #507C94;   /* liens & accents sur fond clair — AA */
  --gris:        #6E6E6E;
  --gris-light:  #9A9A9A;
  --gris-border: #EAEAEA;
  --trait:       rgba(0,0,0,.13);
  --trait-clair: rgba(0,0,0,.08);
  --texte:       #3C3C3C;
  --verre:       rgba(255,255,255,.035);
  --verre-bord:  rgba(255,255,255,.08);

  /* ── Typographies ─────────────────────────────────────────── */
  /* Deux polices. Pas trois. Réf. Charte DA v3. */
  --serif: 'Instrument Serif', Georgia, serif;   /* romain ET italique */
  --sans:  'Figtree', 'Helvetica Neue', Arial, sans-serif;

  /* ── Échelle typographique — contraste extrême assumé ────── */
  --t-micro:   10px;                          /* labels, indices */
  --t-petit:   13px;
  --t-corps:   17px;
  --t-lead:    clamp(18px, 1.5vw, 21px);
  --t-carte:   clamp(21px, 1.9vw, 25px);
  --t-section: clamp(38px, 5vw, 68px);
  --t-display: clamp(52px, 8vw, 124px);       /* les grands moments */

  /* ── Rythme — la respiration d'un studio ─────────────────── */
  --gutter:  6vw;
  --maxw:    1320px;
  --maxw-texte: 68ch;
  --section: clamp(5.5rem, 11vh, 9rem);
  --bloc:    clamp(3rem, 6vh, 5rem);

  /* ── Formes ───────────────────────────────────────────────── */
  --r-fin:   3px;
  --r-carte: 6px;
  --r-bloc:  10px;
  --r-pilule: 100px;

  /* ── Mouvement ────────────────────────────────────────────── */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--creme);
  color: var(--noir);
  font-size: var(--t-corps);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--sans); cursor: pointer; }
::selection { background: var(--bleu-dense); color: var(--creme); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.mesure { max-width: var(--maxw-texte); }

/* ══ TYPOGRAPHIE ════════════════════════════════════════════ */

/* Label — le minuscule qui fait contraste avec l'énorme */
.eyebrow {
  font-size: var(--t-micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gris-light);
  font-weight: 400;
  display: block;
  margin-bottom: 2rem;
}
.eyebrow-sable { color: var(--bleu-dense); }

/* Indice numéroté — élément graphique à part entière */
.indice {
  font-family: var(--serif);
  font-size: var(--t-micro);
  letter-spacing: .3em;
  color: var(--bleu-dense);
  display: block;
  margin-bottom: 1.5rem;
}

/* Display — le grand moment typographique */
.h-display {
  font-family: var(--sans);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -0.065em;
  color: var(--noir);
  text-transform: lowercase;
}
.h-display em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--bleu-lien);
  font-size: 1.18em;
  letter-spacing: -0.045em;
  text-transform: none;
}
.h-display strong { font-weight: 700; display: block; }
/* un mot italique AU MILIEU d'une ligne — pas sur sa propre ligne */
.h-display strong em { display: inline; }

/* Titre de section */
.h-section {
  font-family: var(--sans);
  font-size: var(--t-section);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -0.055em;
  text-transform: lowercase;
  color: var(--noir);
}
.h-section em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--bleu-lien);
}
.h-section-light { color: var(--creme); }
.section-dark .h-section em { color: var(--bleu-clair); }

.h-carte {
  font-family: var(--sans);
  font-size: var(--t-carte);
  font-weight: 700;
  color: var(--noir);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.h-carte em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.18em; letter-spacing: -0.03em; text-transform: none; color: var(--bleu-lien); }

.lead {
  font-size: var(--t-lead);
  color: var(--gris);
  font-weight: 300;
  line-height: 1.75;
  max-width: 58ch;
}
.section-dark .lead { color: #9A9A9A; }

.trait { width: 40px; height: 1px; background: var(--noir); margin: 2rem 0; }
.trait-sable { background: var(--bleu-dense); }

/* ══ NAVIGATION ═════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--trait-clair);
  transition: border-color .3s;
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
}
.nav-logo { display: flex; align-items: center; gap: 13px; }
.nav-logo svg { flex-shrink: 0; transition: opacity .3s; }
.nav-logo:hover svg { opacity: .62; }
.nav-logo-text { display: flex; flex-direction: column; gap: 3px; }
.nav-logo-name {
  font-family: var(--serif); font-size: 25px; font-weight: 400;
  letter-spacing: .05em; color: var(--noir); line-height: 1;
}
.nav-logo-name em { font-style: italic; font-weight: 300; }
.nav-logo-tag {
  font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gris-light); font-weight: 400;
}
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
  font-size: 13.5px; color: var(--gris); font-weight: 400;
  letter-spacing: .01em; transition: color .3s; position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--noir); transition: width .4s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--noir); }

.nav-cta {
  font-family: var(--serif); font-size: 21px; font-style: italic;
  font-weight: 300; color: var(--noir); letter-spacing: .01em;
  position: relative; transition: opacity .3s;
}
.nav-cta::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 0; height: 1px; background: var(--bleu-dense); transition: width .45s var(--ease);
}
.nav-cta:hover { opacity: .6; }
.nav-cta:hover::after { width: 100%; }

.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.nav-burger span { display: block; width: 22px; height: 1px; background: var(--noir); transition: transform .3s; }

/* ══ FIL D'ARIANE ═══════════════════════════════════════════ */
.breadcrumb { border-bottom: 1px solid var(--trait-clair); font-size: 11.5px; color: var(--gris-light); letter-spacing: .04em; }
.breadcrumb-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gutter); }
.breadcrumb a { color: var(--gris-light); transition: color .25s; }
.breadcrumb a:hover { color: var(--noir); }
.breadcrumb-sep { margin: 0 10px; opacity: .5; }

/* ══ BOUTONS ════════════════════════════════════════════════ */
.btn-primary, .btn-secondary, .btn-light {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 34px; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: var(--r-pilule); transition: all .35s var(--ease);
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--noir); color: var(--creme); border-color: var(--noir); }
.btn-primary:hover { background: var(--encre); border-color: var(--encre); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(42,30,24,.18); }
.btn-secondary { background: transparent; color: var(--noir); border-color: var(--trait); }
.btn-secondary:hover { border-color: var(--noir); transform: translateY(-2px); }
.btn-light { background: var(--creme); color: var(--encre); border-color: var(--creme); }
.btn-light:hover { background: var(--beige); border-color: var(--beige); transform: translateY(-2px); }

.btn-text {
  font-size: 13px; color: var(--noir); font-weight: 400; letter-spacing: .02em;
  position: relative; padding-bottom: 3px; display: inline-block;
}
.btn-text::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px; background: var(--bleu-dense); transition: background .3s, transform .4s var(--ease);
  transform-origin: right;
}
.btn-text:hover::after { background: var(--noir); transform: scaleX(.4); transform-origin: left; }
.section-dark .btn-text { color: var(--creme); }

/* ══ SECTIONS ═══════════════════════════════════════════════ */
.section { padding: var(--section) 0; }
.section-alt { background: var(--creme-alt); }
.section-dark { background: var(--encre); position: relative; }
.section-border { border-bottom: 1px solid var(--trait-clair); }
.section-dark .eyebrow { color: #6E6E6E; }

/* En-tête de section — asymétrique, la respiration du studio */
.sec-head { max-width: 60ch; margin-bottom: var(--bloc); }
.sec-head-large { max-width: 78ch; }
.sec-head-split {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem;
  align-items: end; margin-bottom: var(--bloc); max-width: none;
}

/* ══ GRILLES ════════════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--trait-clair); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--trait-clair); }
/* Asymétrie éditoriale */
.grid-edito { display: grid; grid-template-columns: 1.35fr 1fr; gap: 5rem; align-items: center; }
.grid-edito-inv { grid-template-columns: 1fr 1.35fr; }

/* ══ CARTES ═════════════════════════════════════════════════ */
.card {
  background: var(--creme); padding: 2.5rem;
  border-radius: var(--r-carte); position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card-bord { border: 1px solid var(--trait-clair); }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(42,30,24,.09); }
.card-verre { background: var(--verre); border: 1px solid var(--verre-bord); backdrop-filter: blur(10px); }
.card-verre .h-carte { color: var(--creme); }
.card-p { font-size: 14.5px; color: var(--gris); font-weight: 300; line-height: 1.8; }
.card-verre .card-p { color: #9A9A9A; }
.card-num {
  font-family: var(--serif); font-size: 52px; font-weight: 300;
  color: var(--beige); line-height: 1; margin-bottom: 1rem;
}
.card-verre .card-num { color: var(--bleu-dense); opacity: .55; }

/* ══ BADGES ═════════════════════════════════════════════════ */
.badge {
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris-light); border: 1px solid var(--trait);
  padding: 6px 14px; display: inline-block; border-radius: var(--r-pilule);
}
.badge-sable { border-color: var(--bleu-dense); color: var(--bleu-dense); }

/* ══ TEXTURE — grille + halo, la profondeur du hero ═════════ */
.texture { position: relative; overflow: hidden; }
.texture::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--trait-clair) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait-clair) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 20%, transparent 78%);
}
.texture > * { position: relative; z-index: 1; }
.halo::after {
  content: ''; position: absolute; pointer-events: none;
  width: 62vw; height: 62vw; max-width: 800px; max-height: 800px;
  top: -18%; right: -14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(123,163,184,.16) 0%, rgba(123,163,184,0) 66%);
  z-index: 0;
}
.section-dark.texture::before {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}
.section-dark.halo::after { background: radial-gradient(circle, rgba(123,163,184,.11) 0%, rgba(123,163,184,0) 66%); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  🔒  BAS DU SITE — VERROUILLÉ                                ║
   ║      Du « On en parle ? » jusqu'à la fin du footer.          ║
   ║                                                              ║
   ║  Validé par Laura le 5 septembre 2026.                       ║
   ║  NE PAS MODIFIER sans demande explicite de sa part.          ║
   ║                                                              ║
   ║  Ce qui fonctionne dedans, et qui doit se retrouver ailleurs ║
   ║  sur le site : fond chocolat · Instrument Serif en grand ·   ║
   ║  label minuscule très espacé · texte secondaire à faible     ║
   ║  contraste · grille simple · filet fin · beaucoup de vide.   ║
   ║  Sobre, pas bavard.                                          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Le CTA qui précède le footer ─────────────────────────── */
.cta-final { text-align: center; }
.cta-final .h-section { max-width: 20ch; margin-inline: auto; }
.cta-final .lead { margin: 1.75rem auto 3rem; max-width: 52ch; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-note { font-size: 12px; color: var(--gris); font-weight: 300; margin-top: 2.25rem; letter-spacing: .04em; }

/* ── Le footer ────────────────────────────────────────────── */
/* (bloc d'origine ci-dessous — ne pas toucher)                */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  (suite du bloc verrouillé)                                     ║
   ║                                                              ║
   ║  Validé par Laura le 5 septembre 2026.                       ║
   ║  NE PAS MODIFIER sans demande explicite de sa part.          ║
   ║                                                              ║
   ║  Ce bloc est la référence de ce qui fonctionne :             ║
   ║  fond chocolat · Instrument Serif en grand · label minuscule ║
   ║  très espacé · texte secondaire à faible contraste · grille  ║
   ║  simple en 3 colonnes · filet fin · beaucoup de vide.        ║
   ║  Sobre, pas bavard.                                          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ══ FOOTER ═════════════════════════════════════════════════ */
.footer { background: var(--encre); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: calc(var(--section) * .72) var(--gutter) 3.5rem;
  display: grid; grid-template-columns: 2fr repeat(3, minmax(9rem, 1fr));
  gap: clamp(2rem, 3.5vw, 3.5rem);
}
.footer-logo-name {
  font-family: var(--serif); font-size: 34px; font-weight: 400;
  color: var(--creme); letter-spacing: .04em; display: block; margin-bottom: 6px;
}
.footer-logo-name em { font-style: italic; font-weight: 300; }
.footer-bio { font-size: 14px; color: var(--gris-light); font-weight: 300; line-height: 1.85; max-width: 42ch; }
.footer-col-title {
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gris); font-weight: 400; display: block; margin-bottom: 1.75rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.footer-col ul li a { font-size: 13.5px; color: var(--gris-light); font-weight: 300; transition: color .25s; }
.footer-col ul li a:hover { color: var(--creme); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.05); }
.footer-bottom-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 1.5rem var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.footer-copy { font-size: 11px; color: var(--gris); font-weight: 300; letter-spacing: .02em; }
.footer-legal { display: flex; gap: 1.75rem; }
.footer-legal a { font-size: 11px; color: var(--gris); font-weight: 300; transition: color .25s; }
.footer-legal a:hover { color: #9A9A9A; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  🔒  FIN DU BLOC VERROUILLÉ                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ══ COOKIES & RETOUR HAUT ══════════════════════════════════ */
/* Bandeau cookies — discret par construction.
   Il était centré, large de 720 px et posé au milieu de l'écran : sur la
   page d'accueil il masquait l'outil d'analyse, c'est-à-dire la seule
   chose qu'on demande au visiteur de faire. Il se range maintenant en bas
   à gauche, étroit, et laisse le centre libre. */
.lf-cookie-banner {
  display: none; position: fixed; bottom: 18px; left: 18px;
  z-index: 9999; background: rgba(20,16,13,.94); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08); padding: .95rem 1.1rem;
  align-items: flex-start; gap: .85rem; flex-direction: column;
  width: calc(100% - 36px); max-width: 330px; border-radius: var(--r-bloc);
  box-shadow: 0 16px 44px rgba(0,0,0,.34);
}
.lf-cookie-text strong { font-size: 12px; color: var(--creme); display: block; margin-bottom: .25rem; }
.lf-cookie-text p { font-size: 11.5px; color: #9A9A9A; font-weight: 300; line-height: 1.55; }
.lf-cookie-text a { color: var(--bleu-clair); }
.lf-cookie-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.lf-cookie-btn {
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 9px 15px; cursor: pointer;
  border: 1px solid; border-radius: var(--r-pilule); transition: all .3s;
}
.lf-cookie-accept { background: var(--creme); color: var(--encre); border-color: var(--creme); }
.lf-cookie-accept:hover { background: var(--beige); }
.lf-cookie-essential { background: transparent; color: #9A9A9A; border-color: rgba(255,255,255,.12); }
.lf-cookie-essential:hover { color: var(--creme); border-color: rgba(255,255,255,.28); }

#back-to-top {
  position: fixed; bottom: 30px; right: 30px; width: 46px; height: 46px;
  background: var(--noir); color: var(--creme); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all .4s var(--ease);
  z-index: 999; font-size: 17px; border-radius: var(--r-pilule);
}
#back-to-top.visible { opacity: 1; visibility: visible; }
#back-to-top:hover { background: var(--encre); transform: translateY(-3px); }

/* ══ RÉVÉLATION ═════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* ══ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width: 1100px) {
  :root { --gutter: 5vw; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .sec-head-split, .grid-edito, .grid-edito-inv { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
  .footer-inner > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --section: 4rem; --bloc: 2.5rem; --t-display: clamp(42px, 11vw, 62px); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { gap: 2.5rem; }
}
@media (max-width: 768px) {
  :root { --gutter: 6vw; }
  /* Une seule colonne : à deux, les listes du pied de page
     dépassaient la largeur de l'écran et faisaient déborder
     toutes les pages du site. */
  .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bio { max-width: none; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .grid-4 { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .card { padding: 1.75rem; }
  .lf-cookie-banner { left: 50%; transform: translateX(-50%); bottom: 12px; }
  .lf-cookie-actions { margin-left: 0; width: 100%; }
  .lf-cookie-btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   SIGNATURES DA v3 — portées de l'Instagram vers le web
   Réf. : reseaux/prompt-claude-design-posts.md
   ═══════════════════════════════════════════════════════════════ */

/* ── Rappel des règles ─────────────────────────────────────────
   · Jamais noir/blanc pur — toujours chocolat #2A1E18 / crème #FFFFFF
   · Jamais de dégradé décoratif
   · Jamais de majuscules dans les titres (sauf labels 11px)
   · Trois registres de fond : crème · chocolat · sable
   ─────────────────────────────────────────────────────────────── */



/* ══ TROIS REGISTRES DE FOND ════════════════════════════════ */
.reg-creme    { background: var(--creme);      color: var(--chocolat); }
.reg-chocolat { background: var(--chocolat);   color: var(--creme); }
.reg-bleu    { background: var(--bleu-poudre); color: var(--chocolat); }
.reg-canvas   { background: var(--canvas);     color: var(--chocolat); }

.reg-chocolat .lead,
.reg-chocolat .card-p { color: rgba(255,255,255,.62); }
.reg-bleu .lead      { color: rgba(42,30,24,.72); }

/* ══ LABEL — capitales fines, très discrètes ════════════════ */
.label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  display: block;
}
.reg-creme .label, .reg-canvas .label { color: rgba(42,30,24,.5); }
.reg-chocolat .label                  { color: rgba(255,255,255,.42); }
.reg-bleu .label                     { color: rgba(42,30,24,.58); }

/* ══ STICKER — le label tourné, signature DA ════════════════ */
.sticker {
  display: inline-block;
  background: var(--bleu);
  color: var(--chocolat);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .01em;
  padding: 7px 16px;
  border-radius: 5px;
  transform: rotate(-2.5deg);
  transition: transform .4s var(--ease);
}
.sticker-droit  { transform: rotate(2deg); }
.sticker-bleu  { background: var(--bleu-poudre); }
.sticker-creme  { background: var(--creme); }
a:hover > .sticker, .sticker:hover { transform: rotate(0deg); }

/* ══ TITRE — minuscules + UN SEUL mot italique ══════════════
   Règle de la charte : « minuscules. un mot italique. de la matière. » */
.titre-mixte {
  font-family: var(--sans);
  font-size: clamp(38px, 5.6vw, 82px);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -0.065em;
  text-transform: lowercase;
}
.titre-mixte em, .titre-mixte .i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: -0.045em;
  text-transform: none;
  color: var(--bleu-lien);
}
.reg-creme .titre-mixte, .reg-bleu .titre-mixte, .reg-canvas .titre-mixte { color: var(--chocolat); }
.reg-chocolat .titre-mixte { color: var(--creme); }
.reg-chocolat .titre-mixte em, .reg-chocolat .titre-mixte .i { color: var(--bleu-poudre); }
.titre-mixte .i-bleu2 { color: var(--bleu-dense); }
.reg-chocolat .titre-mixte .i-bleu2 { color: var(--bleu-poudre); }

/* ══ FILET — le trait fin sous les titres ═══════════════════ */
.filet { width: 170px; height: 1px; margin: 2rem 0; }
.reg-creme .filet, .reg-bleu .filet, .reg-canvas .filet { background: var(--chocolat); }
.reg-chocolat .filet { background: rgba(255,255,255,.35); }

/* ══ MOT GÉANT — coupé par le cadre, ton sur ton ════════════ */
.mot-geant-zone { position: relative; overflow: hidden; }
.mot-geant {
  position: absolute;
  left: -0.06em;
  bottom: -0.34em;
  font-size: clamp(140px, 25vw, 400px);
  line-height: .78;
  letter-spacing: -0.045em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.mot-geant-serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.mot-geant-sans { font-family: var(--sans); font-weight: 700; text-transform: lowercase; }
.mot-geant-droite { left: auto; right: -0.06em; }
/* ton sur ton — à peine perceptible, c'est le principe */
.reg-chocolat .mot-geant { color: rgba(255,255,255,.045); }
.reg-creme .mot-geant    { color: rgba(42,30,24,.045); }
.reg-bleu .mot-geant    { color: rgba(42,30,24,.075); }
.reg-canvas .mot-geant   { color: rgba(0,0,0,.07); }
.mot-geant-zone > *:not(.mot-geant) { position: relative; z-index: 1; }

/* ══ BLOC CTA — aplat chocolat plein, bord à bord ═══════════ */
.bloc-cta {
  background: var(--chocolat);
  padding: 2.25rem 2.5rem;
  margin: 2.5rem 0;
}
.bloc-cta-q {
  font-size: 17px;
  font-weight: 400;
  color: rgba(255,255,255,.82);
  margin-bottom: .5rem;
}
.bloc-cta-t {
  font-family: var(--sans);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--bleu);
  line-height: 1.05;
  margin-bottom: .75rem;
}
.bloc-cta-l { font-size: 15px; color: rgba(255,255,255,.42); font-weight: 300; }
.bloc-cta-l a { color: rgba(255,255,255,.62); transition: color .25s; }
.bloc-cta-l a:hover { color: var(--creme); }
.reg-bleu .bloc-cta, .reg-creme .bloc-cta { background: var(--chocolat); }
.reg-chocolat .bloc-cta { background: var(--bleu-poudre); }
.reg-chocolat .bloc-cta-q { color: rgba(42,30,24,.78); }
.reg-chocolat .bloc-cta-t { color: var(--chocolat); }
.reg-chocolat .bloc-cta-l { color: rgba(42,30,24,.55); }

/* ══ GRAIN — texture soft-light discrète ════════════════════ */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2; opacity: .5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ══ RESPIRATION — le vide massif de la DA ══════════════════ */
.souffle      { padding: clamp(6rem, 14vh, 11rem) 0; }
.souffle-bas  { padding-bottom: clamp(9rem, 22vh, 17rem); }

@media (max-width: 768px) {
  .mot-geant { font-size: clamp(96px, 34vw, 200px); }
  .bloc-cta { padding: 1.75rem 1.5rem; }
  .souffle { padding: 4rem 0; }
  .souffle-bas { padding-bottom: 7rem; }
}

/* ── Le bleu poudre reprend la main sur fond sombre ─────────── */
.section-dark .h-display em,
.reg-chocolat .h-display em,
.manifeste span,
.qui-citation span   { color: var(--bleu-clair); }
.sticker             { background: var(--bleu-poudre); }
a.lien-accent        { color: var(--bleu-lien); border-bottom: 1px solid var(--bleu-lien); }
.section-dark a.lien-accent { color: var(--bleu-clair); border-color: var(--bleu-clair); }

/* ── 3e registre : le bleu en fond plein ────────────────────────
   Règle absolue : sur fond bleu, le texte est en CHOCOLAT.
   La crème sur bleu tombe à 2,59:1 — illisible. */
.reg-bleu { background: var(--bleu-poudre); color: var(--chocolat); }
.reg-bleu .label       { color: rgba(42,30,24,.58); }
.reg-bleu .lead        { color: rgba(42,30,24,.74); }
.reg-bleu .h-section,
.reg-bleu .titre-mixte { color: var(--chocolat); }
.reg-bleu .h-section em,
.reg-bleu .titre-mixte em { color: var(--chocolat); }
.reg-bleu .filet       { background: var(--chocolat); }
.reg-bleu .mot-geant   { color: rgba(42,30,24,.075); }
.reg-bleu .bloc-cta    { background: var(--chocolat); }
.reg-bleu .btn-primary { background: var(--chocolat); border-color: var(--chocolat); color: var(--creme); }
.reg-bleu .sticker     { background: var(--creme); }

/* ═══════════════════════════════════════════════════════════════
   EN-TÊTE — mot · menu · langue · analyse · devis
   ═══════════════════════════════════════════════════════════════ */
.hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--chocolat); border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}
.hd-in {
  max-width: 1240px; margin-inline: auto;
  padding: 22px clamp(1.25rem,4vw,3rem);
  display: flex; align-items: center; gap: clamp(1rem,2.5vw,2.25rem);
  transition: padding .4s var(--ease);
}
.hd.fixe {
  background: rgba(42,30,24,.9);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(255,255,255,.08);
}
.hd.fixe .hd-in { padding-block: 14px; }

/* mot-marque */
.hd-mot {
  font-family: var(--serif); font-style: italic; font-size: 26px;
  color: var(--blanc); line-height: 1; letter-spacing: -.01em;
  flex-shrink: 0; transition: opacity .3s;
}
.hd-mot:hover { opacity: .7; }

/* navigation */
.hd-nav { display: flex; gap: 1.875rem; align-items: center; margin-inline: auto; }
.hd-nav a {
  font-size: 13px; font-weight: 400; color: rgba(255,255,255,.6);
  position: relative; padding-block: 4px; transition: color .3s; white-space: nowrap;
}
.hd-nav a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--bleu); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.hd-nav a:hover, .hd-nav a.active { color: var(--blanc); }
.hd-nav a:hover::after, .hd-nav a.active::after { transform: scaleX(1); transform-origin: left; }

/* bloc de droite */
.hd-act { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* langue */
.hd-lang { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.16);
           border-radius: 100px; padding: 3px; margin-right: .375rem; }
.hd-lang a {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  padding: 5px 10px; border-radius: 100px; color: rgba(255,255,255,.45);
  transition: background .25s, color .25s;
}
.hd-lang a.on { background: rgba(255,255,255,.12); color: var(--blanc); }
.hd-lang a:not(.on):hover { color: rgba(255,255,255,.8); }

/* les deux actions */
.hd-b {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 100px; white-space: nowrap;
  transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease);
}
.hd-b2 { color: var(--blanc); border: 1px solid rgba(255,255,255,.26); }
.hd-b2:hover { border-color: rgba(255,255,255,.6); }
.hd-b1 { background: var(--bleu); color: var(--chocolat); border: 1px solid var(--bleu); }
.hd-b1:hover { background: var(--bleu-clair); border-color: var(--bleu-clair); transform: translateY(-1px); }

.hd-burger { display: none; flex-direction: column; gap: 5px; background: none;
             border: none; padding: 6px; margin-left: .5rem; }
.hd-burger span { display: block; width: 22px; height: 1px; background: var(--blanc); }

@media (max-width: 1180px) { .hd-nav { gap: 1.25rem; } .hd-nav a { font-size: 12.5px; } }
@media (max-width: 1040px) {
  .hd-nav { display: none; }
  .hd-mot { margin-right: auto; }
  .hd-burger { display: flex; }
}
@media (max-width: 700px) { .hd-b2, .hd-lang { display: none; } }
@media (max-width: 420px) { .hd-b { font-size: 10px; padding: 10px 15px; } .hd-mot { font-size: 22px; } }

/* L'en-tête est fixe : on décale le corps de sa hauteur.
   Seul un .hero repasse dessous, pour que le fond sombre file jusqu'en haut. */
/* L'en-tête est fixe : le corps est décalé de sa hauteur. */
body { padding-top: 74px; }

/* Pages à hero sombre : le hero remonte sous l'en-tête, qui devient
   transparent tant qu'on n'a pas défilé. Ailleurs il reste solide. */
.hero, .ph, .rh { margin-top: -74px; padding-top: calc(74px + clamp(2rem,5vh,4rem)) !important; }
body:has(.hero, .ph, .rh) .hd:not(.fixe) {
  background: transparent; border-bottom-color: transparent;
}
@media (max-width: 480px) { body { padding-top: 66px; }
  .hero, .ph, .rh { margin-top: -66px; padding-top: calc(66px + 2rem) !important; } }

/* Le sélecteur de langue : EN n'existe pas encore, on l'affiche en retrait
   plutôt qu'en lien mort. */
.hd-lang-off { opacity:.38; cursor:default; user-select:none; }


/* ═══════════════════════════════════════════════════════════════
   COMPOSANTS PARTAGÉS — ajoutés le 8 octobre 2026
   Ces briques ont d'abord été écrites dans la page d'accueil, puis
   recopiées de page en page. Elles vivent ici désormais : une seule
   définition, six pages qui s'en servent. Toute retouche se fait à
   un seul endroit.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ RÉSULTATS ══════════════════════════════════════════════
   La page expliquait longuement avant de rien prouver. Trois
   chiffres relevés sur des projets réels passent devant. */
.r-g { display:grid; gap:1rem; margin-top:clamp(2rem,5vh,3rem); }
@media (min-width:760px) { .r-g { grid-template-columns:repeat(3,1fr) } }
.r-c { background:var(--blanc); border:1px solid var(--gris-border); border-radius:16px;
      overflow:hidden; display:flex; flex-direction:column;
      transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.r-c:hover { transform:translateY(-5px); border-color:var(--bleu);
      box-shadow:0 20px 48px rgba(42,30,24,.10); }
.r-h { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
      padding:1.15rem 1.25rem .35rem; }
.r-h b { font-size:17px; font-weight:700; letter-spacing:-.025em; text-transform:lowercase; }
.r-h span { font-size:10px; letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
      color:var(--bleu-lien); background:rgba(80,124,148,.1); padding:.28rem .6rem;
      border-radius:100px; font-weight:700; }
.r-v { padding:.4rem 1.25rem .2rem; }
.r-v svg { display:block; width:100%; height:72px; }
.r-s { display:flex; gap:1.1rem; padding:.5rem 1.25rem 0; flex-wrap:wrap; }
.r-s div b { display:block; font-size:22px; font-weight:700; letter-spacing:-.04em;
      line-height:1; color:var(--chocolat); }
.r-s div small { font-size:9px; letter-spacing:.1em; text-transform:uppercase;
      color:var(--gris-light); white-space:nowrap; display:block; margin-top:.2rem; }
.r-p { padding:.95rem 1.25rem 1.3rem; font-size:13.5px; line-height:1.55; color:var(--gris);
      margin-top:auto; }
.r-p b { color:var(--chocolat); font-weight:600; }


/* ═══ PROBLÈMES en cartes ════════════════════════════════════ */
/* La grille s'ajuste au nombre de cartes : quatre sur l'accueil,
   trois sur les pages de prestation. Une grille figée à quatre
   colonnes laissait un trou à droite quand il n'y en avait que trois. */
.pbn { display:grid; gap:1rem; margin-top:clamp(2rem,5vh,3rem);
      grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); }
.pbc { background:linear-gradient(162deg,var(--encre-2),var(--chocolat)); border:1px solid rgba(255,255,255,.08);
      border-radius:16px; padding:1.35rem 1.25rem; min-height:186px;
      display:flex; flex-direction:column; transition:transform .5s var(--ease); }
.pbc:hover { transform:translateY(-6px) rotate(-.5deg); }
.pbc h3 { font-size:18px; font-weight:700; letter-spacing:-.025em; text-transform:lowercase;
      color:var(--blanc); margin:0 0 .5rem; line-height:1.2; }
.pbc p { font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.55); margin-bottom:auto; }
.pbc .nu { align-self:flex-end; font-size:10px; letter-spacing:.18em;
      color:rgba(255,255,255,.26); margin-top:.7rem; }


/* ═══ PRESTATIONS en cartes produit ══════════════════════════ */
.svn { display:grid; gap:1rem; margin-top:clamp(2rem,5vh,3rem); }
@media (min-width:640px) { .svn { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1020px) { .svn { grid-template-columns:repeat(3,1fr) } }
.svc { background:var(--blanc); border:1px solid var(--gris-border); border-radius:16px;
      padding:1.4rem 1.35rem 1.25rem; display:flex; flex-direction:column; gap:.55rem;
      transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.svc:hover { transform:translateY(-5px); border-color:var(--bleu);
      box-shadow:0 20px 48px rgba(42,30,24,.10); }
.svc-h { display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem; }
.svc-h h3 { font-size:21px; font-weight:700; letter-spacing:-.03em; text-transform:lowercase;
      line-height:1.1; }
.svc-h h3 em { font-family:var(--serif); font-style:italic; font-weight:400;
      color:var(--bleu-lien); }
.svc-prix { flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.04em;
      color:var(--bleu-lien); background:rgba(80,124,148,.1); border-radius:100px;
      padding:.34rem .7rem; white-space:nowrap; }
.svc > p { font-size:14px; color:var(--gris); line-height:1.5; }
.svc ul { list-style:none; display:grid; gap:.38rem; margin-top:.2rem; }
.svc li { font-size:13.5px; color:var(--gris); display:flex; gap:.5rem; line-height:1.45; }
.svc li::before { content:'✦'; color:var(--bleu-lien); font-size:9px; flex:0 0 auto;
      margin-top:.35em; }
.svc-pied { margin-top:auto; padding-top:.9rem; border-top:1px solid var(--gris-border);
      display:flex; align-items:center; justify-content:space-between; gap:.6rem;
      font-size:12.5px; color:var(--gris-light); }
.svc-pied i { font-style:normal; color:var(--bleu-lien); font-weight:600; letter-spacing:.02em; }
.svc:hover .svc-pied i { text-decoration:underline; }
.hero-app-in { border-radius:12px; overflow:hidden;
                   box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.hero-suite { text-align:center; padding-block:2.25rem clamp(3rem,6vh,4.5rem); }
.hero-suite a { display:inline-flex; align-items:center; gap:.5rem;
                    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
                    color:rgba(255,255,255,.55); transition:color .25s; }
.hero-suite a:hover { color:var(--blanc); }


/* ═══ POUR QUI — deux cartes franches ════════════════════════ */
.pqn { display:grid; gap:1rem; margin-top:clamp(2rem,5vh,3rem); }
@media (min-width:760px) { .pqn { grid-template-columns:repeat(2,1fr) } }
.pqc { border-radius:16px; padding:1.5rem 1.4rem; border:1px solid var(--gris-border);
      background:var(--blanc); display:flex; flex-direction:column; gap:.3rem;
      transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.pqc:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(42,30,24,.09); }
.pqc.oui { border-color:var(--bleu); box-shadow:0 0 0 1px var(--bleu) inset; }
.pqc h3 { font-size:21px; font-weight:700; letter-spacing:-.03em; text-transform:lowercase; }
.pqc h3 em { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--bleu-lien); }
.pqc.non h3 em { color:var(--gris-light); }
.pqc ul { list-style:none; display:grid; gap:.55rem; margin-top:.9rem; }
.pqc li { font-size:14.5px; color:var(--gris); display:flex; gap:.6rem; line-height:1.45; }
.pqc li::before { flex:0 0 auto; width:18px; height:18px; border-radius:50%; font-size:10px;
      display:grid; place-items:center; margin-top:.1em; }
.pqc.oui li::before { content:'✓'; background:rgba(80,124,148,.12); color:var(--bleu-lien); }
.pqc.non li::before { content:'✕'; background:var(--canvas); color:var(--gris-light); }
/* On écarte des attentes, jamais des gens : ceux qui démarrent de zéro
   sont les bienvenus, et la page doit le dire noir sur blanc. */
.pq-note { margin-top:1.3rem; font-size:14.5px; color:var(--gris); text-align:center; }
.pq-note a { color:var(--bleu-lien); font-weight:600; border-bottom:1px solid transparent;
      transition:border-color .3s; }
.pq-note a:hover { border-color:var(--bleu-lien); }


/* ═══ COMPARAISON — ligne à ligne, alignée ═══════════════════ */
.cmp { margin-top:clamp(2rem,5vh,3rem); border:1px solid rgba(255,255,255,.14);
      border-radius:16px; overflow:hidden; }
.cmp-l { display:grid; grid-template-columns:1fr; gap:.2rem;
      border-top:1px solid rgba(255,255,255,.1); }
.cmp-l:first-child { border-top:0; }
.cmp-l > div { padding:.95rem 1.2rem; font-size:14px; line-height:1.45; }
.cmp-l .ail { color:rgba(255,255,255,.42); }
.cmp-l .ici { color:var(--blanc); background:rgba(123,163,184,.07); }
.cmp-l.tt > div { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
      padding-block:.7rem; }
.cmp-l.tt .ail { color:rgba(255,255,255,.34); }
.cmp-l.tt .ici { color:var(--bleu-clair); font-weight:700; }
@media (min-width:720px) { .cmp-l { grid-template-columns:1fr 1fr; gap:0 } }


/* ═══ TARIFS — cartes d'abonnement ═══════════════════════════ */
.pxg { display:grid; gap:1rem; margin-top:clamp(2rem,5vh,3rem); align-items:stretch; }
@media (min-width:860px) { .pxg { grid-template-columns:repeat(3,1fr) } }
.pxc { border-radius:18px; padding:1.6rem 1.45rem 1.5rem; display:flex; flex-direction:column;
      gap:.5rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.13);
      transition:transform .5s var(--ease), border-color .5s; position:relative; }
.pxc:hover { transform:translateY(-5px); border-color:var(--bleu); }
.pxc.socle { background:var(--blanc); border-color:var(--blanc); color:var(--encre); }
.pxc.socle::before { content:'le plus pris'; position:absolute; top:-11px; left:1.45rem;
      background:var(--bleu); color:var(--chocolat); font-size:10px; font-weight:700;
      letter-spacing:.14em; text-transform:uppercase; padding:.26rem .7rem; border-radius:100px; }
.pxc .et { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
      color:var(--bleu-clair); }
.pxc.socle .et { color:var(--bleu-lien); }
.pxc h3 { font-size:25px; font-weight:700; letter-spacing:-.035em; text-transform:lowercase;
      line-height:1; }
.pxc .px { font-size:clamp(34px,4.4vw,44px); font-weight:700; letter-spacing:-.045em;
      line-height:1; margin-top:.3rem; }
.pxc .px small { font-size:.34em; font-weight:400; letter-spacing:0; opacity:.55; }
.pxc ul { list-style:none; display:grid; gap:.42rem; margin:.9rem 0 1.2rem; flex:1; }
.pxc li { font-size:14px; line-height:1.45; display:flex; gap:.55rem;
      color:rgba(255,255,255,.62); }
.pxc.socle li { color:var(--gris); }
.pxc li::before { content:'✓'; color:var(--bleu); flex:0 0 auto; font-size:11px; margin-top:.2em; }
.pxc.socle li::before { color:var(--bleu-lien); }
.pxc .bt { display:block; text-align:center; border-radius:100px; padding:.85rem 1rem;
      font-size:13.5px; font-weight:600; transition:.35s var(--ease); }
.pxc .bt.pl { background:var(--bleu); color:var(--chocolat); }
.pxc .bt.pl:hover { background:var(--bleu-clair); }
.pxc .bt.sd { border:1px solid rgba(255,255,255,.22); color:var(--blanc); }
.pxc .bt.sd:hover { border-color:var(--bleu); color:var(--bleu-clair); }
.px-note { margin-top:1.6rem; font-size:13px; color:rgba(255,255,255,.44); text-align:center; }
.px-note b { color:var(--bleu-clair); font-weight:700; }


/* ═══ FAQ — un bloc, des lignes qui s'ouvrent ════════════════ */
.faqn { margin-top:clamp(2rem,5vh,3rem); max-width:54rem; margin-inline:auto;
      border:1px solid var(--gris-border); border-radius:16px; overflow:hidden;
      background:var(--blanc); }
.fqn { border-top:1px solid var(--gris-border); }
.fqn:first-child { border-top:0; }
.fqn-q { padding:1.1rem 1.3rem; display:flex; justify-content:space-between; gap:1rem;
      align-items:center; font-size:16px; font-weight:600; letter-spacing:-.015em;
      cursor:pointer; transition:background .3s; }
.fqn-q:hover { background:var(--creme-alt); }
.fqn-q::after { content:'+'; font-size:20px; color:var(--bleu-lien); flex:0 0 auto;
      transition:transform .4s var(--ease); }
.fqn.open .fqn-q::after { transform:rotate(45deg); }
.fqn-a { max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.fqn-a p { padding:0 1.3rem 1.2rem; font-size:14.5px; line-height:1.65; color:var(--gris); }




/* ═══ MÉTHODE EN BOUCLE ══════════════════════════════════════
   Les cinq étapes sur un fil, et un panneau qui montre ce que
   chacune produit. On clique, le panneau suit. */
.bcl { margin-top:clamp(2rem,5vh,3rem); display:grid; gap:clamp(1.6rem,4vw,3rem); }
@media (min-width:980px) { .bcl { grid-template-columns:.88fr 1.12fr; align-items:start } }

.bcl-e { position:relative; display:grid; gap:.7rem; padding-left:3.1rem; }
.bcl-fil { position:absolute; left:1.07rem; top:1.4rem; bottom:1.4rem; width:2px;
      background:rgba(255,255,255,.12); border-radius:2px; }
.bcl-fil i { position:absolute; inset:0 0 auto 0; height:0; border-radius:2px;
      background:linear-gradient(180deg,var(--bleu),var(--bleu-lien));
      transition:height .7s var(--ease); }

.et { position:relative; text-align:left; width:100%; cursor:pointer;
      background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
      border-radius:14px; padding:1rem 1.15rem; display:grid; gap:.3rem;
      transition:background .45s var(--ease), border-color .45s, transform .45s var(--ease),
                 opacity .45s; opacity:.5; }
.et:hover { opacity:.8; transform:translateX(3px); }
.et.on { opacity:1; background:var(--blanc); border-color:var(--blanc);
      transform:translateX(6px); box-shadow:0 14px 38px rgba(0,0,0,.26); }
.et .pt { position:absolute; left:-2.03rem; top:1.15rem; width:14px; height:14px;
      border-radius:50%; background:var(--chocolat); border:2px solid rgba(255,255,255,.22);
      transition:.45s var(--ease); }
.et.on .pt { background:var(--bleu); border-color:var(--bleu);
      box-shadow:0 0 0 5px rgba(123,163,184,.18); }
.et.faite .pt { background:var(--bleu-lien); border-color:var(--bleu-lien); }
.et-h { display:flex; align-items:baseline; gap:.6rem; }
.et-n { font-family:var(--serif); font-size:21px; color:var(--bleu-clair); line-height:1; }
.et.on .et-n { color:var(--bleu-lien); }
.et-t { font-size:18px; font-weight:700; letter-spacing:-.028em; text-transform:lowercase;
      color:var(--blanc); }
.et.on .et-t { color:var(--encre); }
.et-f { margin-left:auto; font-size:14px; color:rgba(255,255,255,.3); transition:.45s; }
.et.on .et-f { color:var(--bleu-lien); transform:translateX(3px); }
.et-d { font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.52); }
.et.on .et-d { color:var(--gris); }
.et-m { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
      color:rgba(255,255,255,.3); }
.et.on .et-m { color:var(--bleu-lien); }

/* Le panneau qui suit — il doit tenir debout tout seul :
   ce qu'on obtient, trois chiffres, ce qui est inclus, et la
   destination commune aux cinq étapes. */
.bcl-v { position:sticky; top:6rem; border-radius:18px; overflow:hidden;
      background:radial-gradient(120% 90% at 78% 6%, rgba(123,163,184,.16) 0%, transparent 58%),
                 linear-gradient(168deg,var(--encre-2),var(--chocolat));
      border:1px solid rgba(255,255,255,.1); }
.v-h { padding:1.4rem 1.5rem .9rem; display:flex; align-items:center; gap:1rem;
      flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.08); }
.v-h .et-no { font-size:10px; letter-spacing:.2em; text-transform:uppercase;
      color:rgba(255,255,255,.38); }
.v-h .et-du { margin-left:auto; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
      color:var(--bleu-clair); background:rgba(123,163,184,.14); border-radius:100px;
      padding:.32rem .75rem; white-space:nowrap; }
.v-t { padding:1.1rem 1.5rem .2rem; }
.v-t span { font-size:10px; letter-spacing:.2em; text-transform:uppercase;
      color:rgba(255,255,255,.38); }
.v-t b { display:block; font-size:clamp(23px,2.6vw,30px); font-weight:700; letter-spacing:-.035em;
      color:var(--blanc); margin-top:.4rem; line-height:1.12; }
.v-s { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; padding:1.1rem 1.5rem 0; }
.v-s div { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
      border-radius:12px; padding:.8rem .8rem .85rem; }
.v-s b { display:block; font-size:clamp(20px,2.4vw,27px); font-weight:700; letter-spacing:-.04em;
      color:var(--blanc); line-height:1; }
.v-s small { font-size:9px; letter-spacing:.11em; text-transform:uppercase;
      color:rgba(255,255,255,.4); display:block; margin-top:.4rem; line-height:1.4; }
.v-i { padding:1.2rem 1.5rem 1.3rem; display:grid; gap:.5rem; }
.v-i em { font-style:normal; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
      color:rgba(255,255,255,.38); }
.v-i p { font-size:14px; line-height:1.5; color:rgba(255,255,255,.66); display:flex; gap:.6rem; }
.v-i p::before { content:'✓'; color:var(--bleu); flex:0 0 auto; font-size:11px; margin-top:.25em; }
.v-f { border-top:1px solid rgba(255,255,255,.08); padding:1.1rem 1.5rem 1.3rem;
      background:rgba(0,0,0,.18); display:grid; gap:.6rem; }
.v-f em { font-style:normal; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
      color:var(--bleu-clair); }
.v-f p { font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.74); }
.v-f a { justify-self:start; font-size:13px; font-weight:600; color:var(--chocolat);
      background:var(--bleu); border-radius:100px; padding:.6rem 1.15rem;
      transition:background .35s var(--ease); }
.v-f a:hover { background:var(--bleu-clair); }
.v-av { height:3px; background:rgba(255,255,255,.1); }
.v-av i { display:block; height:100%; width:20%;
      background:linear-gradient(90deg,var(--bleu-lien),var(--bleu));
      transition:width .7s var(--ease); }
@media (max-width:979px) { .bcl-v { position:static } }







/* ═══ PHRASE RÉVÉLÉE AU SCROLL ═══════════════════════════════ */
.dit { font-size:clamp(21px,3.3vw,40px); font-weight:700; letter-spacing:-.032em;
      line-height:1.28; max-width:30ch; margin:clamp(2.2rem,5vh,3.2rem) auto 0;
      text-align:center; }
.dit w { color:rgba(255,255,255,.16); transition:color .35s var(--ease); }
.dit w.on { color:var(--blanc); }
.dit w.ac.on { color:var(--bleu-clair); }
.sec.noir .h-section em { color:var(--bleu-clair); }



/* ═══ CAS CLIENT — version claire ════════════════════════════
   Le bloc d'origine était écrit en blanc pour un fond chocolat, et
   le carré bleu tenait lieu d'image faute d'en avoir une. Ici : une
   carte lisible, et la phrase de conclusion traitée comme une
   citation plutôt que comme un aplat de couleur. */
.casx { display:grid; gap:clamp(1.6rem,4vw,2.6rem); margin-top:clamp(2rem,5vh,3rem); }
@media (min-width:900px) { .casx { grid-template-columns:1.15fr .85fr; align-items:center } }
.casx-l { background:var(--blanc); border:1px solid var(--gris-border); border-radius:16px;
      overflow:hidden; }
.casx-l > div { padding:1.15rem clamp(1.1rem,3vw,1.5rem); border-top:1px solid var(--gris-border); }
.casx-l > div:first-child { border-top:0; }
.casx-l b { display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
      color:var(--bleu-lien); margin-bottom:.45rem; }
.casx-l p { font-size:15px; line-height:1.6; color:var(--gris); }
.casx-c { border-left:2px solid var(--bleu-lien); padding-left:clamp(1.1rem,3vw,1.6rem); }
.casx-c p { font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.9vw,34px);
      line-height:1.25; color:var(--chocolat); }
.casx-c span { display:block; margin-top:.9rem; font-size:10px; letter-spacing:.2em;
      text-transform:uppercase; color:var(--gris-light); font-family:var(--sans); font-style:normal; }


/* ═══ LIVRABLES — liste éditoriale, pas huit rectangles ═══════
   Huit cartes identiques alignées ne hiérarchisent rien : elles
   donnent huit fois le même poids à huit choses inégales. Ici,
   des filets, des numéros en serif, et de l'air. */
.lvn { margin-top:clamp(2.2rem,5vh,3.2rem); display:grid; gap:0 clamp(2.5rem,6vw,5rem); }
@media (min-width:820px) { .lvn { grid-template-columns:1fr 1fr } }
.lvn > div { display:grid; grid-template-columns:auto 1fr; gap:0 clamp(1rem,2.5vw,1.6rem);
      padding:clamp(1.1rem,2.6vw,1.5rem) 0; border-bottom:1px solid var(--gris-border); }
.lvn > div:last-child, .lvn > div:nth-last-child(2):nth-child(odd) { border-bottom:0; }
.lvn em { font-style:normal; font-family:var(--serif); font-size:clamp(21px,2.4vw,27px);
      color:var(--bleu-lien); line-height:1; padding-top:.1em; }
.lvn b { font-size:clamp(16px,1.9vw,18px); font-weight:700; letter-spacing:-.02em;
      color:var(--chocolat); line-height:1.3; }
.lvn p { grid-column:2; font-size:14px; line-height:1.6; color:var(--gris); margin-top:.3rem; }

/* ═══ MÉTHODE — une frise, pas des cartes dans un cadre ══════ */
.etn { margin-top:clamp(2.4rem,6vh,3.6rem); display:grid; gap:clamp(1.6rem,3vw,2rem);
      position:relative; }
/* La grille s'ajuste au nombre d'étapes : quatre sur les pages de
   prestation, trois sur la page de l'outil. Figée à quatre, elle
   laissait une colonne vide à droite et décalait tout le bloc. */
@media (min-width:780px) { .etn { grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)) } }
/* Le filet reliait les deux bords de la grille : avec trois étapes
   sur quatre colonnes possibles, il pendait dans le vide à droite.
   Chaque étape trace maintenant son propre segment vers la suivante,
   et la dernière n'en trace pas. */
.etn > div { position:relative; padding-top:clamp(0px,3vw,2.2rem); }
.etn > div::before { content:''; position:absolute; left:0; top:0; width:15px; height:15px;
      border-radius:50%; background:var(--creme-alt); border:1px solid var(--gris-border);
      display:none; z-index:1; }
.etn > div::after { content:''; position:absolute; left:15px; top:7px; height:1px;
      right:calc(-1 * clamp(1.6rem,3vw,2rem)); background:var(--gris-border); display:none; }
.etn > div:last-child::after { content:none; }
@media (min-width:780px) {
  .etn > div::before, .etn > div::after { display:block }
}
.etn > div:first-child::before { background:var(--bleu-lien); border-color:var(--bleu-lien); }
.etn em { font-style:normal; font-family:var(--serif); font-size:clamp(23px,2.6vw,30px);
      color:var(--bleu-lien); display:block; line-height:1; margin-bottom:.5rem; }
.etn b { display:block; font-size:clamp(18px,2.2vw,22px); font-weight:700; letter-spacing:-.03em;
      text-transform:lowercase; color:var(--chocolat); margin-bottom:.45rem; }
.etn p { font-size:14px; line-height:1.6; color:var(--gris); }
.etn small { display:block; margin-top:.7rem; font-size:10px; letter-spacing:.18em;
      text-transform:uppercase; color:var(--gris-light); }

/* ═══ SITUATIONS — à plat, sans dégradé qui bave ═════════════ */
.pbc { background:rgba(255,255,255,.045) !important; border-color:rgba(255,255,255,.1) !important; }
.pbc:hover { background:rgba(255,255,255,.075) !important; transform:translateY(-4px) !important; }


/* ═══ SANS / AVEC — le comparatif qui vend ════════════════════
   Deux cartes face à face : l'état actuel, pâle et barré, et ce
   qu'on obtient, en chaud et coché. C'est le bloc qui fait le
   plus de travail commercial sur une page de prestation. */
.sa { display:grid; gap:clamp(1rem,2.5vw,1.6rem); margin-top:clamp(2.2rem,5vh,3.2rem); }
@media (min-width:820px) { .sa { grid-template-columns:1fr 1fr } }
.sa > div { border-radius:20px; padding:clamp(1.5rem,3.5vw,2.2rem); }
.sa-av { background:var(--creme-alt); border:1px solid var(--gris-border); }
.sa-ap { background:radial-gradient(130% 100% at 85% 0%, rgba(123,163,184,.18) 0%, transparent 58%),
            linear-gradient(165deg,var(--encre-2),var(--chocolat));
         border:1px solid rgba(255,255,255,.1); }
.sa .sa-et { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.2em;
      text-transform:uppercase; padding:.32rem .75rem; border-radius:100px; margin-bottom:1rem; }
.sa-av .sa-et { background:var(--gris-border); color:var(--gris); }
.sa-ap .sa-et { background:var(--bleu); color:var(--chocolat); }
.sa h3 { font-size:clamp(21px,2.7vw,28px); font-weight:700; letter-spacing:-.035em;
      line-height:1.15; margin-bottom:1.2rem; }
.sa-av h3 { color:var(--chocolat); }
.sa-ap h3 { color:var(--blanc); }
.sa ul { list-style:none; display:grid; gap:.7rem; }
.sa li { display:flex; gap:.75rem; font-size:15px; line-height:1.5; }
.sa li::before { flex:0 0 auto; width:20px; height:20px; border-radius:50%; font-size:10px;
      display:grid; place-items:center; margin-top:.1em; font-weight:700; }
.sa-av li { color:var(--gris-light); }
.sa-av li::before { content:'✕'; background:var(--gris-border); color:var(--gris-light); }
.sa-ap li { color:rgba(255,255,255,.78); }
.sa-ap li::before { content:'✓'; background:var(--bleu); color:var(--chocolat); }
.sa-pied { margin-top:1.4rem; padding-top:1.1rem; font-size:13.5px; }
.sa-av .sa-pied { border-top:1px solid var(--gris-border); color:var(--gris-light); }
.sa-ap .sa-pied { border-top:1px solid rgba(255,255,255,.12); color:var(--bleu-clair); }

/* Les sections sombres prennent de la chaleur, comme le hero. */
.sec.noir { background:radial-gradient(120% 90% at 82% 4%, rgba(123,163,184,.14) 0%, transparent 55%),
            linear-gradient(170deg,var(--encre-2) 0%, var(--chocolat) 60%) !important; }


/* ═══ NOTE SOUS LES TARIFS ════════════════════════════════════
   C'était un paragraphe nu sous les cartes, avec un lien de la
   même couleur que le texte — donc invisible. Un encadré, une
   phrase, un bouton. */
.px-hors { margin-top:clamp(1.6rem,4vh,2.4rem); display:flex; align-items:center;
      justify-content:space-between; gap:1.25rem; flex-wrap:wrap;
      border:1px solid rgba(255,255,255,.14); border-radius:16px;
      padding:1.25rem clamp(1.25rem,3vw,1.75rem); }
.px-hors p { font-size:clamp(14.5px,1.7vw,17px); color:rgba(255,255,255,.78); margin:0;
      max-width:52ch; line-height:1.55; }
.px-hors p b { color:var(--blanc); font-weight:700; }
.px-hors .bt { flex:0 0 auto; }


/* ═══════════════════════════════════════════════════════════════
   GABARIT DE SECTION — déplacé ici le 8 octobre 2026
   Ces quatre classes vivaient dans le style local de l'accueil et
   des pages de prestation. Les sections ajoutées sur d'autres
   pages n'avaient donc ni marge, ni largeur maximale, ni centrage :
   le contenu courait d'un bord à l'autre de l'écran.
   ═══════════════════════════════════════════════════════════════ */
.wrap { width:100%; max-width:1180px; margin-inline:auto;
      padding-inline:clamp(1.5rem,5vw,3.5rem); }
.sec  { padding-block:clamp(4.5rem,9vh,7rem); }
.sec.noir { color:var(--blanc); }
.sec.gris { background:#FAFAFA; }
.tete { text-align:center; max-width:44rem; margin:0 auto clamp(2.75rem,5vh,4rem); }
.tete h2 { margin-inline:auto; }
.tete .lead { margin:1.25rem auto 0; font-size:16.5px; }
.lb { font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
      color:var(--gris-light); display:block; margin-bottom:1.125rem; font-weight:400; }
.sec.noir .lb { color:rgba(255,255,255,.4); }
.sec.noir .lead { color:rgba(255,255,255,.58); }
.cta-c { text-align:center; margin-top:clamp(2.5rem,5vh,3.5rem); }