/* Wobjok — site vitrine. Charte « goutte » : crème / encre / violet (accent rare).
   Règles : 09-BONNES-PRATIQUES-SITE.md */

@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --creme: #F4F0E8; --creme-clair: #FAF8F3; --papier: #EBE5D9;
  --encre: #1B1715; --encre-80: #3A3430; --encre-60: #6B645E; --encre-40: #9A928A;
  --trait: #DED6C8; --trait-fort: #C9BFAE;
  --violet: #9B6FBA; --violet-fonce: #8A5DAA; --mauve: #B894C9; --mauve-doux: #EDE3F2; --prune: #6B4A82;
  --fait: #4F6B3F; --alerte: #A8432F;

  --titre: "Hanken Grotesk", system-ui, sans-serif;
  --texte: "Figtree", system-ui, sans-serif;
  --fs-h1: clamp(3rem, 6.2vw + .4rem, 6rem);
  --fs-h2: clamp(2.25rem, 4vw + .3rem, 4rem);
  --fs-h3: clamp(1.75rem, 2.4vw + .4rem, 2.75rem);
  --fs-lead: clamp(1.125rem, .6vw + .95rem, 1.375rem);

  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --conteneur: 1200px;
  --gouttiere: clamp(20px, 5vw, 48px);
  --section: clamp(96px, 12vw, 168px);
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --z-nav: 20; --z-skip: 40;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 400 18px/1.6 var(--texte); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.evitement { position: absolute; left: 12px; top: -60px; z-index: var(--z-skip); background: var(--encre); color: var(--creme); padding: 10px 16px; border-radius: var(--r-md); text-decoration: none; transition: top 200ms var(--ease); }
.evitement:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--r-md); border: 0;
  font: 600 17px/1 var(--texte); text-decoration: none; cursor: pointer; transition: background-color 250ms var(--ease), transform 150ms var(--ease), color 250ms var(--ease); }
.btn:active { transform: translateY(1px); }
.btn--principal { background: var(--violet); color: var(--encre); }
.btn--principal:hover { background: var(--violet-fonce); color: var(--creme-clair); }
.btn--encre { background: var(--encre); color: var(--creme); }
.btn--encre:hover { background: var(--encre-80); }
.btn--contour { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.btn--contour:hover { background: var(--encre); color: var(--creme); }
.btn--petit { min-height: 44px; padding: 0 18px; font-size: 15px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; min-height: 44px; }
.lien-fleche svg { width: 18px; height: 18px; transition: transform 250ms var(--ease); }
.lien-fleche:hover svg { transform: translateX(4px); }
.lien-fleche span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 300ms var(--ease); padding-bottom: 2px; }
.lien-fleche:hover span { background-size: 100% 1.5px; }
.lien-fleche:has(small) { flex-wrap: wrap; column-gap: 10px; row-gap: 0; }
.lien-fleche small { font: 500 15px var(--texte); color: var(--encre-60); }
.mention { font-size: 15px; color: var(--encre-60); }

/* ---------- Navigation ---------- */
/* La barre est une pilule qui flotte au-dessus de la page */
.nav { position: sticky; top: 0; z-index: var(--z-nav); padding: 10px var(--gouttiere) 0; }
.nav .nav__in { display: flex; align-items: center; gap: 40px; min-height: 66px; max-width: var(--conteneur); padding: 0 12px 0 26px; border-radius: 999px;
  background: rgb(250 248 243 / .86); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px);
  box-shadow: 0 0 0 1px rgb(27 23 21 / .07), 0 12px 32px -20px rgb(27 23 21 / .35); transition: box-shadow 300ms var(--ease); }
.nav.is-scrolled .nav__in { box-shadow: 0 0 0 1px rgb(27 23 21 / .09), 0 16px 36px -18px rgb(27 23 21 / .42); }
.nav__logo { position: relative; display: block; flex: none; width: 114px; height: 34px; transition: width 500ms var(--ease); }
.nav__logo img { position: absolute; left: 0; top: 0; height: 34px; width: auto; }
/* En descendant, le logotype se replie vers la gauche et ne laisse que la goutte */
.nav__logotype { clip-path: inset(0 0 0 0); transition: clip-path 500ms var(--ease), opacity 300ms var(--ease) 150ms; }
.nav__symbole { opacity: 0; transform: scale(.5) rotate(-20deg); transform-origin: 50% 50%; transition: opacity 300ms var(--ease), transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.nav--compacte .nav__logo { width: 34px; }
.nav--compacte .nav__logotype { clip-path: inset(0 100% 0 0); opacity: 0; transition: clip-path 450ms var(--ease), opacity 250ms var(--ease) 200ms; }
.nav--compacte .nav__symbole { opacity: 1; transform: none; transition-delay: 150ms; }
.nav__liens { display: flex; align-items: center; gap: clamp(24px, 9vw - 88px, 30px); list-style: none; margin: 0; padding: 0; }
.nav__liens a { display: inline-block; white-space: nowrap; text-decoration: none; font-weight: 500; font-size: 18px; color: var(--encre-80); padding: 8px 0; transition: color 200ms var(--ease); }
.nav__liens a:hover, .nav__liens a[aria-current="page"] { color: var(--encre); }
.nav__liens a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--violet); }
.nav__groupe { position: relative; }
.nav__ouvrir { display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; border: 0; background: none; font: 500 18px/1.6 var(--texte); color: var(--encre-80); white-space: nowrap; cursor: pointer; transition: color 200ms var(--ease); }
.nav__ouvrir svg { width: 12px; height: 12px; transition: transform 250ms var(--ease); }
.nav__ouvrir:hover, .nav__groupe.ouvert .nav__ouvrir, .nav__ouvrir--actif { color: var(--encre); }
.nav__ouvrir--actif { box-shadow: inset 0 -2px 0 var(--violet); }
.nav__groupe.ouvert .nav__ouvrir svg { transform: rotate(180deg); }
.nav__sous { position: absolute; top: calc(100% + 16px); left: -16px; min-width: 250px; margin: 0; padding: 8px; list-style: none; display: grid; gap: 2px; background: var(--creme-clair); border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgb(27 23 21 / .07), 0 16px 36px -18px rgb(27 23 21 / .42); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 200ms var(--ease), transform 250ms var(--ease), visibility 0s linear 250ms; }
.nav__sous::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; } /* pont pour le survol */
.nav__groupe.ouvert .nav__sous { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__liens .nav__sous a { display: block; padding: 11px 14px; border-radius: var(--r-md); font-size: 17px; box-shadow: none; }
.nav__liens .nav__sous a:hover { background: var(--mauve-doux); color: var(--encre); }
.nav__liens .nav__sous a[aria-current="page"] { background: var(--mauve-doux); color: var(--prune); box-shadow: none; }
.nav__droite { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav__droite .btn { white-space: nowrap; }
.nav__connexion { white-space: nowrap; text-decoration: none; font-weight: 500; font-size: 18px; color: var(--encre-80); }
.nav__connexion:hover { color: var(--encre); }
.nav__menu { display: none; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(64px, 10vw, 128px); }
.hero h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.03em; }
.hero h1 .ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ligne > span { display: inline-block; white-space: nowrap; }
@media (max-width: 700px) {
  .hero h1 { text-wrap: balance; }
  .hero h1 .ligne { display: inline; overflow: visible; }
  .hero h1 .ligne > span { display: inline; white-space: normal; }
}
.nav__cta-court { display: none; }
@media (max-width: 480px) { .nav__cta-long { display: none; } .nav__cta-court { display: inline; } }
.goutte-point { display: inline-block; width: .3em; height: .3em; margin-left: .04em; vertical-align: baseline; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(32px, 4vw, 48px); }
.hero .mention { margin-top: 16px; }
.hero__visuel { margin-top: clamp(56px, 8vw, 96px); margin-right: calc(-1 * var(--gouttiere)); }

/* ---------- Emplacements de captures ---------- */
.capture { position: relative; border-radius: var(--r-xl); background: var(--creme-clair); box-shadow: 0 1px 2px rgb(27 23 21 / .05), 0 8px 8px -6px rgb(27 23 21 / .06); overflow: hidden; }
.capture__barre { display: flex; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--trait); }
.capture__barre span { width: 10px; height: 10px; border-radius: 50%; background: var(--trait-fort); }
.capture__corps { aspect-ratio: 16 / 9.4; display: grid; place-items: center; background: var(--papier); }
.capture__corps img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.capture__note { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 24px; color: var(--encre-60); font-size: 15px; max-width: 34ch; }
.capture__note b { font: 600 13px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--prune); background: var(--mauve-doux); padding: 7px 10px; border-radius: 999px; }
.telephone { width: min(300px, 78vw); margin-inline: auto; border-radius: 44px; background: var(--encre); padding: 12px; }
.telephone .capture__corps { aspect-ratio: 9 / 19; border-radius: 34px; }

/* ---------- Problème : questions en boucle ---------- */
.probleme { background: var(--encre); color: var(--creme); padding-block: var(--section); margin-top: var(--section); }
.questions { position: relative; min-height: 2.4em; font: 600 var(--fs-h2)/1.08 var(--titre); letter-spacing: -0.025em; perspective: 1200px; perspective-origin: 30% 0; }
.question { position: absolute; inset: 0 auto auto 0; max-width: 36ch; margin: 0; font: inherit; text-wrap: balance;
  opacity: 0; transform: translate3d(0, 40px, 60px); filter: blur(4px); }
.question.devant { opacity: 1; transform: none; filter: none; transition: opacity 700ms var(--ease), transform 900ms var(--ease), filter 700ms var(--ease); }
.question.derriere { opacity: .1; transform: translate3d(0, -2.2em, -900px); filter: blur(4px); color: var(--mauve);
  transition: opacity 1000ms var(--ease), transform 1100ms var(--ease), filter 1000ms var(--ease); }
.question.parti { opacity: 0; transform: translate3d(0, -3em, -1300px); filter: blur(6px); transition: opacity 600ms ease, transform 900ms ease, filter 600ms ease; }
.reperes { display: flex; gap: 6px; margin-top: 40px; }
.reperes span { width: 32px; height: 3px; border-radius: 2px; background: rgb(244 240 232 / .2); transition: background-color 400ms var(--ease); }
.reperes span.on { background: var(--mauve); }

/* ---------- Solution ---------- */
.solution { padding-top: var(--section); }
.titre-section { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.025em; max-width: 22ch; }
.titre-section .attenue { color: var(--encre-40); }
#titre-solution { max-width: none; }
#titre-solution .attenue { display: block; }
.parcours { position: relative; margin-top: clamp(56px, 7vw, 88px); }
.parcours__ligne { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--trait); }
.parcours__progres { position: absolute; left: 0; top: 13px; height: 2px; width: 100%; background: var(--fait); transform-origin: left; transform: scaleX(var(--p, 0)); }
.parcours__goutte { position: absolute; top: 0; left: 0; width: 28px; height: 28px; transform: translateX(calc(var(--p, 0) * (var(--w, 0px) - 28px))); }
.parcours ol { list-style: none; margin: 0; padding: 0; position: relative; height: 84px; }
.parcours li { position: absolute; top: 0; left: calc(var(--k) * 33.333%); transform: translateX(calc(var(--k) * -33.333%)); white-space: nowrap; padding-top: 52px; font: 600 clamp(18px, 1.6vw, 22px)/1.25 var(--titre); color: var(--encre-40); transition: color 400ms var(--ease); }
.parcours li:nth-child(1) { --k: 0; } .parcours li:nth-child(2) { --k: 1; } .parcours li:nth-child(3) { --k: 2; } .parcours li:nth-child(4) { --k: 3; }
.parcours li::before { content: ""; position: absolute; top: 9px; left: calc(var(--k) * 33.333%); transform: translateX(calc(var(--k) * -33.333%)); width: 10px; height: 10px; border-radius: 50%; background: var(--creme); box-shadow: inset 0 0 0 2px var(--trait-fort); transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.parcours li.atteint::before { background: var(--fait); box-shadow: none; }
.parcours li.atteint { color: var(--encre); }
.solution__branche { margin-top: 40px; font-size: var(--fs-lead); color: var(--encre-60); max-width: 46ch; }
.solution__branche strong { color: var(--encre); font-weight: 600; }
.solution__visuel { margin-top: clamp(56px, 7vw, 88px); }

/* ---------- Bénéfices en zigzag ---------- */
.benefices { padding-top: var(--section); display: grid; gap: clamp(96px, 11vw, 160px); }
.benefice { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.benefice:nth-child(even) { grid-template-columns: 7fr 5fr; }
.benefice:nth-child(even) .benefice__texte { order: 2; }
.benefice h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.benefice__texte :is(h2, h3) + p { margin-top: 18px; font-size: var(--fs-lead); color: var(--encre-60); max-width: 34ch; }

/* ---------- Preuve ---------- */
.preuve { padding-top: var(--section); }
.preuve__bloc { border-top: 1px solid var(--trait-fort); padding-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.preuve__bloc p { font-size: var(--fs-lead); color: var(--encre-60); max-width: 40ch; }
.preuve__bloc p strong { color: var(--encre); font-weight: 600; }

/* ---------- Appel final ---------- */
.final { padding-block: var(--section); text-align: left; }
.final__carte { background: var(--mauve-doux); border-radius: var(--r-xl); padding: clamp(48px, 7vw, 104px) clamp(28px, 6vw, 88px); }
.final h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.025em; max-width: 22ch; }
.final .hero__actions { margin-top: 40px; }
.final .lien-fleche { color: var(--prune); }
.final .mention { margin-top: 16px; color: var(--prune); }

/* ---------- Pied de page ---------- */
/* Pied de page : une bande compacte, les pages et le légal */
.pied { border-top: 1px solid var(--trait); padding-block: 20px; font-size: 13px; color: var(--encre-60); }
.pied__bande { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.pied__logo { display: flex; flex: none; }
.pied__logo img { height: 18px; width: auto; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pied__legal { margin-left: auto; }
.pied__legal li:last-child { color: var(--encre-40); }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pages intérieures ---------- */
.page-tete { padding-top: clamp(56px, 8vw, 112px); }
.page-tete h1 { font-size: clamp(2.75rem, 5vw + .4rem, 5rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 16ch; }
.page-tete > p:not(.conditions) { margin-top: 20px; font-size: var(--fs-lead); color: var(--encre-60); max-width: 44ch; }

/* Offres */
/* Offres : les deux offres l'une sous l'autre (production puis BAT). Une barre collante les nomme toutes les deux,
   s'allume sur celle qu'on lit et fait défiler jusqu'à l'autre. La carte populaire reste au centre du regard */
.page-tete--offres { padding-top: clamp(40px, 5vw, 72px); }
.tarifs__tete { margin-bottom: clamp(20px, 2.4vw, 28px); }
.choix-offre { position: sticky; top: 86px; z-index: 5; display: flex; margin-bottom: clamp(40px, 5vw, 56px); pointer-events: none; }
.choix-offre__rail { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--trait), 0 14px 30px -20px rgb(27 23 21 / .45); pointer-events: auto; }
.choix-offre__rail::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--encre); transition: transform .45s var(--ease); }
.tarifs[data-actif="bat"] .choix-offre__rail::before { transform: translateX(100%); }
.choix-offre a { position: relative; z-index: 1; display: grid; place-items: center; min-height: 48px; padding: 0 28px; border-radius: 999px; font: 600 16px var(--texte); color: var(--encre); text-decoration: none; white-space: nowrap; transition: color .3s; }
.choix-offre a[aria-current="true"] { color: var(--creme); }
.tarifs__panneau { scroll-margin-top: 168px; }
.tarifs__panneau + .tarifs__panneau { margin-top: clamp(64px, 7vw, 96px); }
.tarifs__titre { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: clamp(48px, 5vw, 64px); }
.tarifs__cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
/* Les cartes secondaires rétrécissent vers la populaire ; l'écart visible reste de 12 px et le groupe reste centré */
.tarifs__cartes--suivi { transform: translateX(calc(7.2px + 2%)); }
.tarif { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 30px 30px; border-radius: var(--r-xl); background: #fff; box-shadow: inset 0 0 0 1px var(--trait); }
.tarif--cote-g { transform: translateX(8px) scale(.94); transform-origin: right center; }
.tarif--cote-d { transform: translateX(-8px) scale(.94); transform-origin: left center; }
.tarif--loin { transform: translateX(calc(-16px - 6%)) scale(.94); }
.tarif--fort { z-index: 1; transform: translateY(-20px); box-shadow: inset 0 0 0 2px var(--violet), 0 32px 64px -32px rgb(107 74 130 / .5); }
.tarif__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--violet); color: var(--encre); font: 600 14px var(--texte); white-space: nowrap; }
.tarif__badge svg { width: 14px; height: 14px; }
.tarif__nom { font: 600 20px/1.2 var(--titre); letter-spacing: 0; }
.tarif__prix { margin-top: 20px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.tarif__prix b { font: 600 3.5rem/1 var(--titre); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tarif--fort .tarif__prix b { color: var(--violet); }
.tarif__prix small { font: 500 15px var(--texte); color: var(--encre-60); }
.tarif__prix--devis b { font-size: 2.75rem; }
.tarif ul { align-self: stretch; margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; text-align: left; font-size: 16px; line-height: 1.35; }
.tarif li, .tarifs__inclus li { display: flex; gap: 12px; align-items: flex-start; }
.tarif .coche, .tarifs__inclus .coche { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--violet); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tarif .btn { width: 100%; margin-top: auto; }
.tarif > :nth-last-child(2) { margin-bottom: 32px; }
.tarifs__inclus { max-width: 980px; margin: clamp(36px, 4vw, 48px) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 16px 48px; font-size: 16.5px; line-height: 1.35; }
.conditions { margin-top: clamp(48px, 5vw, 64px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; color: var(--encre-60); font-size: 16px; }
.conditions span { display: inline-flex; gap: 8px; align-items: center; }
.conditions svg { width: 16px; height: 16px; }

/* FAQ */
.faq { padding-top: var(--section); display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); }
.faq h2 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.faq details { border-top: 1px solid var(--trait-fort); }
.faq details:last-child { border-bottom: 1px solid var(--trait-fort); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font: 600 19px/1.35 var(--titre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 20px; height: 20px; transition: transform 300ms var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 48px 24px 0; color: var(--encre-60); }

/* FAQ en cartes cliquables, filtrables par thème */
.faq2 { padding-top: var(--section); }
.faq2__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.faq2 h2 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.faq2--page { padding-top: clamp(56px, 8vw, 112px); }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--creme-clair); box-shadow: inset 0 0 0 1px var(--trait-fort); font: 600 15px var(--texte); color: var(--encre-80); cursor: pointer; transition: background-color 250ms var(--ease), color 250ms var(--ease), box-shadow 250ms var(--ease); }
.filtre:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--creme); box-shadow: none; }
/* Réponses détaillées : deux colonnes au plus (une seule sur tablette), pour qu'une réponse tienne en quelques lignes */
.cartes-q { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); gap: 16px; align-items: start; }
.carte-q { border-radius: var(--r-lg); background: var(--creme-clair); box-shadow: inset 0 0 0 1px var(--trait); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease), transform 300ms var(--ease); }
.carte-q:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--trait-fort), 0 8px 8px -6px rgb(27 23 21 / .08); }
.carte-q[open] { background: var(--mauve-doux); box-shadow: inset 0 0 0 1.5px var(--violet); transform: none; }
.carte-q[hidden] { display: none; }
.carte-q summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; padding: 24px; min-height: 148px; align-content: space-between; }
.carte-q summary::-webkit-details-marker { display: none; }
.carte-q__theme { grid-column: 1; font-size: 13px; font-weight: 600; color: var(--prune); }
.carte-q__q { grid-column: 1; font: 600 20px/1.3 var(--titre); letter-spacing: -0.01em; }
.carte-q__plus { grid-column: 2; grid-row: 1 / 3; align-self: end; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--creme); transition: transform 300ms var(--ease), background-color 300ms var(--ease); }
.carte-q__plus svg { width: 18px; height: 18px; }
.carte-q:hover .carte-q__plus { background: var(--violet); color: var(--encre); }
.carte-q[open] .carte-q__plus { transform: rotate(45deg); background: var(--violet); color: var(--encre); }
.carte-q p { padding: 0 24px 24px; color: var(--encre-80); animation: deplie 400ms var(--ease); }
@keyframes deplie { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq2__autre { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--encre-60); }
.faq2__autre .lien-fleche { color: var(--prune); }

/* Texte long (à propos, légal) */
.texte-long { padding-top: clamp(40px, 5vw, 64px); max-width: 68ch; }
.texte-long h2 { font-size: clamp(1.5rem, 1.4vw + .9rem, 2rem); line-height: 1.2; letter-spacing: -0.015em; margin: 56px 0 16px; }
.texte-long h3 { font-size: 1.25rem; margin: 32px 0 10px; }
.texte-long p, .texte-long li { color: var(--encre-80); }
.texte-long p + p { margin-top: 16px; }
.texte-long ul { padding-left: 1.2em; display: grid; gap: 8px; }
.texte-long .maj { color: var(--encre-40); font-size: 15px; }
/* Notre équipe (equipe.html) : le composant « team section » transmis, aux couleurs Wobjok.
   En-tête centré, membres centrés sans cadre. Au survol, comme dans le composant : le bloc grandit à peine,
   une vague violette monte du bas, la photo prend un anneau violet et zoome, puis l'info et les contacts apparaissent. */
.equipe { padding-top: clamp(56px, 8vw, 112px); }
.equipe__tete { text-align: center; }
.equipe__tete h1 { font-size: clamp(2.75rem, 5vw + .4rem, 5rem); line-height: 1.04; letter-spacing: -0.03em; }
.equipe__tete p { margin: 20px auto 0; max-width: 46ch; font-size: var(--fs-lead); color: var(--encre-60); }
@media (min-width: 901px) { .equipe__tete p { max-width: none; } .equipe__tete p span { display: block; } }
.equipe__liste { list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.membre { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(32px, 3.2vw, 48px) clamp(24px, 3vw, 40px) clamp(28px, 2.8vw, 40px); border-radius: 24px; transition: transform 300ms var(--ease); }
.membre__vague { position: absolute; inset: auto 0 0 0; z-index: -1; height: 50%; border-radius: 9999px 9999px 0 0; background: linear-gradient(to top, rgb(155 111 186 / .22), rgb(155 111 186 / 0)); transform: scaleY(0); transform-origin: bottom; transition: transform 500ms var(--ease) calc(var(--i, 0) * 50ms); }
.membre__photo { width: clamp(144px, 12vw, 176px); aspect-ratio: 1; flex: none; border-radius: 50%; overflow: hidden; border: 4px solid transparent; background: none; transition: transform 500ms var(--ease) calc(var(--i, 0) * 100ms), border-color 500ms var(--ease) calc(var(--i, 0) * 100ms); }
.membre__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: transform 500ms var(--ease); }
.membre__nom { margin-top: 20px; font-size: clamp(1.375rem, .5vw + 1.1rem, 1.625rem); line-height: 1.2; letter-spacing: -0.015em; }
.membre__role { margin-top: 4px; color: var(--encre-60); }
/* La description reste visible : c'est elle qui installe la confiance. Le survol garde la vague et le cadre de la photo */
.membre__infos { flex: 1; display: flex; flex-direction: column; align-items: center; margin-top: 16px; }
.membre__infos p { font-size: 16px; line-height: 1.5; color: var(--encre-80); max-width: 44ch; }
.membre__liens { display: flex; justify-content: center; gap: 4px; margin-top: auto; padding-top: 8px; }
.membre__liens a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--encre-60); transition: color 200ms var(--ease); }
.membre__liens a:hover { color: var(--violet); }
.membre__liens svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .membre:hover { transform: scale(1.02); }
  .membre:hover .membre__vague { transform: none; }
  .membre:hover .membre__photo { transform: scale(1.05); border-color: var(--violet); }
  .membre:hover .membre__photo img { transform: scale(1.1); }
  .membre:hover .membre__infos { opacity: 1; }
}
.membre:has(a:focus-visible) .membre__vague { transform: none; }
.membre:has(a:focus-visible) .membre__photo { border-color: var(--violet); }
.membre:has(a:focus-visible) .membre__infos { opacity: 1; }
/* Écran tactile : pas de survol, l'info et les contacts sont visibles d'emblée */
@media (hover: none) { .membre__infos { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .membre, .membre__vague, .membre__photo, .membre__photo img, .membre__infos { transition: none; }
}
/* Fil d'Ariane des pages internes : il rappelle d'un coup d'œil où est l'accueil */
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; padding: 14px 0 0; list-style: none; font-size: 15px; color: var(--encre-60); }
.ariane li + li::before { content: "/"; margin-right: 10px; color: var(--trait-fort); }
.ariane a { display: inline-block; padding-block: 11px; color: var(--encre-60); text-decoration: none; }
.ariane a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.ariane li[aria-current] { color: var(--encre); }
main > .ariane + * { padding-top: clamp(24px, 3vw, 48px); }

/* Badge SKEMA : sous l'équipe (centré) et sous la lettre des fondateurs */
.badge-skema { display: inline-flex; align-items: center; gap: 18px; margin: 0; padding: 14px 24px 14px 20px; border-radius: var(--r-lg); background: var(--creme-clair); box-shadow: inset 0 0 0 1px var(--trait); }
.badge-skema img { width: 108px; height: auto; }
.badge-skema span { display: grid; font-size: 14px; line-height: 1.35; color: var(--encre-60); }
.badge-skema b { font: 600 16px var(--texte); color: var(--encre); }
.equipe__badge { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.lettre .badge-skema { margin-top: clamp(40px, 5vw, 56px); }

/* À propos : la lettre des fondateurs (structure Basecamp). Une colonne de lecture, signée, sans animation. */
.lettre { max-width: 720px; margin-inline: auto; padding-top: clamp(56px, 8vw, 112px); }
.lettre h1 { font-size: clamp(2.75rem, 5vw + .4rem, 5rem); line-height: 1.04; letter-spacing: -0.03em; }
.lettre h1 .fort { color: var(--prune); }
@media (min-width: 901px) { .lettre h1 span { display: block; white-space: nowrap; } }
.lettre__resume { margin-top: 24px; font-size: var(--fs-lead); color: var(--encre-60); max-width: 44ch; }
.lettre__corps { margin-top: clamp(48px, 5vw, 64px); display: grid; gap: 20px; }
.lettre__corps p { color: var(--encre-80); max-width: 62ch; }
.lettre__corps .lettre__ouverture { font: 600 var(--fs-lead)/1.45 var(--texte); color: var(--encre); }
.lettre__corps strong { color: var(--encre); font-weight: 600; }
.signature { margin-top: 40px; display: flex; align-items: center; gap: 16px; }
.signature__photos { display: flex; flex: none; }
.signature__photos img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--creme); }
.signature__photos img + img { margin-left: -14px; }
.signature b { display: block; font: 600 18px/1.3 var(--texte); }
.signature span { color: var(--encre-60); font-size: 16px; }
.lettre__suite { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 4px 32px; }
.lettre__suite .lien-fleche { color: var(--prune); }

/* Démo : le texte à gauche, l'agenda à droite. Jour, puis heure, puis le bouton s'allume */
.demo { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); padding-top: clamp(56px, 8vw, 112px); padding-bottom: var(--section); align-items: start; }
.demo h1 { font-size: clamp(2.5rem, 3.4vw + .6rem, 4rem); line-height: 1.04; letter-spacing: -0.03em; }
@media (min-width: 901px) { .demo h1 span { display: block; white-space: nowrap; } }
.demo__intro p { margin-top: 20px; font-size: var(--fs-lead); color: var(--encre-60); max-width: 34ch; }
.agenda { background: var(--creme-clair); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 44px); display: grid; gap: 28px; box-shadow: inset 0 0 0 1px var(--trait); }
.agenda__repli a { color: var(--prune); font-weight: 600; }
.js .agenda__repli { display: none; }
.agenda__bloc, .agenda__ok, .agenda__info { display: none; }
.js .agenda__bloc { display: grid; gap: 14px; }
.js .agenda__ok { display: inline-flex; justify-self: start; }
.js .agenda__info { display: block; }
.agenda__etape { font: 600 17px var(--texte); }
.agenda__jours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.agenda__heures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.agenda__jours button, .agenda__heures button { min-height: 52px; border: 0; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--trait-fort); color: var(--encre); font: 500 16px/1.2 var(--texte); cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease); }
.agenda__jours button { display: grid; gap: 2px; padding: 10px 4px; }
.agenda__heures button { padding: 0 4px; white-space: nowrap; }
@media (max-width: 480px) { .agenda__heures button { font-size: 15px; } }
.agenda__jours small { font-size: 13px; color: var(--encre-60); }
.agenda__jours small:first-child { text-transform: capitalize; }
.agenda__jours b { font: 600 20px var(--titre); }
.agenda__jours button:hover, .agenda__heures button:hover { box-shadow: inset 0 0 0 1.5px var(--violet); }
.agenda__jours button[aria-pressed="true"], .agenda__heures button[aria-pressed="true"] { background: var(--encre); color: var(--creme); box-shadow: none; }
.agenda__jours button[aria-pressed="true"] small { color: var(--trait-fort); }
.agenda__heures:not(.pret) { opacity: .45; pointer-events: none; }
.agenda__ok[aria-disabled="true"] { background: var(--trait); color: var(--encre-60); cursor: not-allowed; }
.agenda__info { margin-top: -14px; font-size: 14px; color: var(--encre-60); }

/* 404 */
.introuvable { min-height: 70dvh; display: grid; align-content: center; gap: 24px; padding-block: var(--section); }
.introuvable h1 { font-size: var(--fs-h2); letter-spacing: -0.025em; max-width: 16ch; }

/* ---------- Apparitions au défilement ---------- */
/* Seuls les éléments situés SOUS l'écran au chargement sont masqués (classe posée par le script) :
   ce qui est visible d'emblée ne dépend jamais d'une animation. */
[data-apparait].attend { opacity: 0; transform: translateY(24px); }
[data-apparait].attend.vu { opacity: 1; transform: none; transition: opacity 500ms var(--ease), transform 500ms var(--ease); transition-delay: var(--delai, 0ms); }

/* ---------- Mobile ---------- */
/* Menu replié tant que les liens + « Se connecter » + le bouton ne tiennent pas sur une ligne */
@media (max-width: 1240px) {
  .nav__liens { display: none; }
  .nav__droite .nav__connexion { display: none; }
  .nav__menu { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; margin-left: 4px; }
  .nav .nav__in { padding: 0 6px 0 20px; gap: 16px; }
  .nav.ouvert .nav__liens { display: grid; position: absolute; top: calc(100% + 8px); left: var(--gouttiere); right: var(--gouttiere); background: var(--creme-clair); padding: 12px 24px 20px; gap: 4px; border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgb(27 23 21 / .07), 0 16px 36px -18px rgb(27 23 21 / .42); }
  .nav.ouvert .nav__liens a { display: block; padding: 12px 0; font-size: 20px; }
  .nav.ouvert .nav__groupe + li, .nav.ouvert li + .nav__groupe { margin-top: 8px; }
  .nav__ouvrir { pointer-events: none; padding: 10px 0 0; font: 600 13px var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-60); box-shadow: none; }
  .nav__ouvrir--actif { color: var(--prune); box-shadow: none; }
  .nav__ouvrir svg { display: none; }
  .nav__sous, .nav__groupe.ouvert .nav__sous { position: static; min-width: 0; padding: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav__sous::before { display: none; }
  .nav.ouvert .nav__liens .nav__sous a { padding: 10px 0; font-size: 20px; border-radius: 0; background: none; }
  .nav.ouvert .nav__liens .nav__sous a[aria-current="page"] { color: var(--prune); }
}
@media (max-width: 900px) {
  .benefice, .benefice:nth-child(even), .preuve__bloc, .faq, .demo { grid-template-columns: 1fr; }
  .benefice:nth-child(even) .benefice__texte { order: 0; }
  .parcours ol { height: auto; display: grid; grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .parcours li { position: static; transform: none; white-space: normal; }
  .parcours li::before { display: none; }
  .parcours__ligne, .parcours__progres, .parcours__goutte { display: none; }
  .parcours li { padding-top: 12px; border-top: 2px solid var(--trait); }
  .parcours li.atteint { border-top-color: var(--fait); }
  .hero__visuel { margin-right: 0; }
  
  .tarifs__cartes { grid-template-columns: 1fr; gap: 28px; }
  .tarifs__cartes--suivi, .tarif--cote-g, .tarif--cote-d, .tarif--loin, .tarif--fort { transform: none; }
  .tarif { padding: 36px 24px 24px; }
  .choix-offre, .choix-offre__rail { width: 100%; max-width: 420px; }
  .choix-offre a { padding: 0 10px; font-size: 15px; }
  .tarifs__inclus { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 14px; }
}
@media (max-width: 600px) { .equipe__liste { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 480px) {
  body { font-size: 17px; }
  .nav__droite .btn { padding: 0 14px; font-size: 14px; }
  .hero__actions .action { width: 100%; }
  .hero__actions .btn { width: 100%; padding-inline: 14px; line-height: 1.15; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .questions { min-height: 0; perspective: none; display: grid; gap: 20px; }
  .question { position: static; opacity: 1; transform: none; filter: none; }
  .reperes { display: none; }
}