/* =========================================================================
   ASJ CONSEIL — VERSION 2 (esprit du communiqué de presse)
   Blanc épuré · teal signature · pas de dégradé multicolore · typo Bariol
   ========================================================================= */

/* ---------- Polices auto-hébergées (Bariol, licence webfont Atipo) — RGPD : aucun CDN externe ---------- */
@font-face { font-family: "Bariol"; src: url("assets/fonts/bariol-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Bariol"; src: url("assets/fonts/bariol-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bariol"; src: url("assets/fonts/bariol-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Couleur signature (teal de la charte / du CP) + neutres */
  --teal:     #00b1b7;
  --teal-700: #0a7276;   /* boutons, bandeau événement */
  --teal-900: #0f3331;   /* footer profond, nature/Auvergne */
  --grad-h:   linear-gradient(90deg, #7246ff 0%, #656dff 28%, #00b1b7 55%, #7fd328 80%, #ffe600 100%); /* dégradé charte — touches (soulignés) */

  --ink:    #1d1c21;
  --body:   #54535a;
  --muted:  #9c9c9f;
  --line:   #e7e6e9;
  --g3:     #d8d7d9;
  --surface:#ffffff;     /* fonds blancs — pas de gris en conteneur */
  --white:  #ffffff;

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Bariol", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--font); background: var(--white); color: var(--body); font-size: 1.0625rem; line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Helpers ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; }
.section--soft { background: var(--surface); }

h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); line-height: 1.06; letter-spacing: -0.015em; font-weight: 700; }
.display { font-size: clamp(2.6rem, 6.2vw, 5.2rem); font-weight: 700; letter-spacing: -0.03em; }
.display .thin { font-weight: 300; color: var(--teal); }
h2.title { font-size: clamp(2rem, 4vw, 3.25rem); }
p { color: var(--body); }

.eyebrow { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; }
/* "grad-text" : accent teal (le dégradé est réservé aux soulignés/filets) */
.grad-text { color: var(--teal); }

/* Soulignés dégradé sous les titres — touche de la charte graphique */
.formation .title::after, .reviews-head .title::after, .methodo .intro h2::after { content: ""; display: block; width: 72px; height: 3px; border-radius: 2px; background: var(--grad-h); margin: 1.1rem auto 0; }
.actu .title::after, .clients h2::after, .contact .title::after, .newsletter h2::after { content: ""; display: block; width: 72px; height: 3px; border-radius: 2px; background: var(--grad-h); margin: 1.1rem 0 0; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 0.85rem 1.8rem; border-radius: 999px; cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s, color 0.35s, border-color 0.35s;
}
.pill--grad { background: var(--teal-700); color: var(--white); border: 1.5px solid var(--teal-700); }
.pill--grad:hover { background: var(--teal); border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,177,183,0.5); }
.pill--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--g3); }
.pill--ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.pill--white { background: var(--white); color: var(--teal-900); border: none; }
.pill--white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.25); }
.nav .pill{ height: 34px; padding: 0 1.15rem; font-size: 0.82rem; color: var(--white); }
.nav .pill:hover { color: var(--white); }

.link-arrow { font-weight: 700; font-size: 0.9rem; color: var(--ink); display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.3s var(--ease); }
.link-arrow::after { content: "→"; transition: transform 0.3s var(--ease); }
.link-arrow:hover { color: var(--teal); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Placeholders / images ---------- */
.ph { position: relative; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; min-height: 220px; }
.ph::before { content: ""; position: absolute; inset: 0; background: var(--teal); opacity: 0.06; }
.ph::after { content: attr(data-label); position: relative; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; z-index: 1; }
.ph img.pos-bottom { object-position: center bottom; }
.ph img.pos-top { object-position: center top; }
.ph:has(img)::before, .ph:has(img)::after { content: none; }

/* Formes de marque (filets) — teal discret, sans dégradé */
.brand-shape { position: absolute; pointer-events: none; z-index: 0; opacity: 0.55; }
.brand-shape svg { display: block; }
.brand-shape path, .brand-shape line, .brand-shape circle, .brand-shape rect { stroke: url(#sbgrad); fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); transition: background 0.4s var(--ease), box-shadow 0.4s, padding 0.4s; }
.site-header.scrolled { background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); padding-block: 0.75rem; }
body.solid-nav .site-header { background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.brand-logo { height: 46px; width: auto; display: block; }
.site-header.scrolled .brand-logo { height: 40px; transition: height 0.4s var(--ease); }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a { font-size: 0.92rem; font-weight: 500; color: var(--ink); transition: color 0.25s; }
.nav a:hover { color: var(--teal); }
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-btn { font: inherit; font-size: 0.92rem; font-weight: 500; color: var(--ink); background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 0.3rem; transition: color 0.25s; }
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { color: var(--teal); }
.nav-dd-caret { font-size: 0.7em; transition: transform 0.25s var(--ease); }
.nav-dd.open .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 224px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 44px -22px rgba(15,51,49,0.4); padding: 0.4rem; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); z-index: 200; }
.nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-menu a { padding: 0.55rem 0.8rem; border-radius: 8px; font-size: 0.88rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.nav-dd-menu a:hover { background: rgba(0,177,183,0.08); color: var(--teal-700); }
.offre { scroll-margin-top: 96px; }
.form-cat { scroll-margin-top: 96px; }
.nav .lkd { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--g3); border-radius: 50%; }
.nav .lkd:hover { border-color: var(--teal); color: var(--teal); }
.burger { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(7rem, 15vh, 10rem); padding-bottom: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero .eyebrow { display: block; text-align: center; margin-bottom: clamp(2rem, 4.5vw, 3.2rem); }
.hero .eyebrow--normal { font-size: 0.78rem; }
.hero .eyebrow--grand { font-size: clamp(0.95rem, 1.6vw, 1.3rem); letter-spacing: 0.18em; }
.hero .eyebrow--xl { font-size: clamp(1.1rem, 2.2vw, 1.75rem); letter-spacing: 0.14em; }
.hero h1 { max-width: 16ch; color: var(--ink); }
.hero-side p { font-size: 1.15rem; max-width: 42ch; }
.hero-cta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.baseline { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.5rem; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--teal); }

/* ---------- Hero « Le chemin » (choix cliente, 09/09) ----------
   Un sentier en pointillés traverse le bas du hero, une boule le parcourt, et
   les mots de la baseline sont posés SUR le fil. Positions calculées sur la
   courbe elle-même (voir R.hero dans build.js), pas réglées à l'œil.
   Le SVG s'étire (preserveAspectRatio="none") : un % de la boîte correspond
   donc au même % du tracé, quelle que soit la largeur de l'écran. */
.hero--trail { padding-top: clamp(4.8rem, 10vh, 7.5rem); padding-bottom: clamp(1rem, 2.2vh, 2.5rem); }
/* halos de couleur très doux en fond (« le fondu bleuté et doux » qu'elle aimait) */
.hero--trail::before, .hero--trail::after { content: ""; position: absolute; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; border-radius: 50%; filter: blur(70px); opacity: 0.16; pointer-events: none; z-index: 0; }
.hero--trail::before { background: var(--teal); top: -8%; left: -12%; }
.hero--trail::after { background: #656dff; bottom: -18%; right: -10%; opacity: 0.13; }
.hero--trail > .wrap { position: relative; z-index: 1; }
.hero--trail .display { font-size: clamp(2rem, min(4.6vw, 7vh), 3.8rem); }
.hero--trail .hero-side p { font-size: 1.08rem; }

.hero-trail { position: relative; margin-top: clamp(0.8rem, 2.2vh, 2rem); }
.hero-trail svg { display: block; width: 100%; height: clamp(100px, 15vh, 190px); }
/* le fil : pointillés fins et discrets */
.trail-line { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.5 8; opacity: 0.5; vector-effect: non-scaling-stroke; }
.trail-walker { filter: drop-shadow(0 2px 6px rgba(10,114,118,0.35)); }
/* les jalons, centrés sur le fil */
.trail-chip { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.05rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; white-space: nowrap;
  color: var(--ink); border: 1.5px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-h) border-box;
  box-shadow: 0 14px 30px -18px rgba(10,114,118,0.55);
  animation: trailGlow 9s var(--ease) infinite; }
.trail-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad-h); flex: none; }
/* chaque mot s'allume quand la boule arrive dessus */
@keyframes trailGlow {
  0%   { background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-h) border-box; color: var(--ink); transform: translate(-50%, -50%) scale(1); box-shadow: 0 14px 30px -18px rgba(10,114,118,0.55); }
  4%   { background: linear-gradient(var(--teal-700), var(--teal-700)) padding-box, var(--grad-h) border-box; color: var(--white); transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 18px 34px -16px rgba(10,114,118,0.8); }
  14%  { background: linear-gradient(var(--teal-700), var(--teal-700)) padding-box, var(--grad-h) border-box; color: var(--white); transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 18px 34px -16px rgba(10,114,118,0.8); }
  24%  { background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-h) border-box; color: var(--ink); transform: translate(-50%, -50%) scale(1); box-shadow: 0 14px 30px -18px rgba(10,114,118,0.55); }
  100% { background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-h) border-box; color: var(--ink); transform: translate(-50%, -50%) scale(1); box-shadow: 0 14px 30px -18px rgba(10,114,118,0.55); }
}
/* Positions des 3 jalons, relevées sur la courbe (calcul dans build.js).
   Elles sont ici et pas en style inline, sinon la règle mobile plus bas
   ne pourrait jamais les surcharger. */
.trail-chip--1 { left: 34%; top: 69.9%; animation-delay: 3.02s; }
.trail-chip--2 { left: 56%; top: 56.5%; animation-delay: 5.08s; }
.trail-chip--3 { left: 78%; top: 60.2%; animation-delay: 7.12s; }
/* Sur petit écran, les 3 pastilles resserrées se chevaucheraient : on les
   réétale sur le fil (positions elles aussi relevées sur la courbe). */
@media (max-width: 880px) {
  /* tout est empilé : on resserre pour que le hero tienne à l'écran */
  .hero--trail { padding-top: clamp(4.2rem, 8vh, 5.5rem); }
  .hero--trail .hero-side p { font-size: 1rem; }
  .hero-trail svg { height: clamp(90px, 12vh, 140px); }
  .trail-chip { font-size: 0.78rem; padding: 0.36rem 0.75rem; }
  .trail-chip--1 { left: 17%; top: 52.6%; animation-delay: 1.41s; }
  .trail-chip--2 { left: 50%; top: 61.4%; animation-delay: 4.51s; }
  .trail-chip--3 { left: 83%; top: 57.0%; animation-delay: 7.59s; }
}
/* accessibilité : si la personne a demandé moins d'animations, tout se fige */
@media (prefers-reduced-motion: reduce) {
  .trail-chip { animation: none; }
  .trail-walker { display: none; }
}


/* ---------- Présentation ---------- */
/* Photo « ferrée » sur la hauteur du texte (retour cliente 31/08, retour au parti d'origine) */
.presentation .pres-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: stretch; }
/* min-width:0 : le bandeau certifs (piste max-content) ne doit pas faire exploser la colonne */
.presentation .pres-grid > * { min-width: 0; }
.presentation .intro-name { font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.3rem); color: var(--ink); line-height: 1.15; margin-bottom: 1.4rem; letter-spacing: -0.02em; }
.presentation .ph { height: 100%; min-height: 380px; width: 100%; }
.presentation .pres-affil { margin-top: 1rem; font-size: 0.96rem; }
.presentation .pres-affil p { margin: 0; }
.presentation .pres-more { margin-top: 0.4rem; }
.presentation .pres-more > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--teal); font-weight: 700; font-size: 0.96rem; list-style: none; text-underline-offset: 2px; }
.presentation .pres-more > summary:hover { color: var(--teal-700); text-decoration: underline; }
.presentation .pres-more > summary::-webkit-details-marker { display: none; }
.presentation .pres-more > summary::after { content: "\25be"; transition: transform 0.25s var(--ease); }
.presentation .pres-more[open] > summary::after { transform: rotate(180deg); }
.presentation .pres-more-body { margin-top: 0.8rem; }
.presentation .pres-more-body p { margin: 0 0 0.8rem; }
.presentation .pres-more-body p:last-child { margin-bottom: 0; }
.presentation .pres-affil a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; transition: color 0.25s; }
.presentation .pres-affil a:hover { color: var(--teal-700); }

/* Repli « En savoir plus » : méthodologie + déontologie derrière la présentation */
.pres-fold > summary { list-style: none; cursor: pointer; text-align: center; padding: 0 0 3.5rem; }
.pres-fold > summary::-webkit-details-marker { display: none; }
.pres-fold > summary .pill { display: inline-block; }
.pres-fold .fold-open { display: none; }
.pres-fold[open] .fold-closed { display: none; }
.pres-fold[open] .fold-open { display: inline; }
/* flèche : invite à dérouler, se retourne une fois ouvert */
.pres-fold .fold-chev { display: inline-block; color: var(--teal); transition: transform 0.25s var(--ease); }
.pres-fold[open] .fold-chev { transform: rotate(180deg); }
.pres-fold[open] > summary { padding-bottom: 1.5rem; }

/* ---------- Offres ---------- */
.offres { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.offre { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.offre--flip .offre-media { order: -1; }
.offre .ph { aspect-ratio: 3/2; }
.offre h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 1rem; }
.offre p { max-width: 46ch; margin-bottom: 1.8rem; }

/* ---------- Bandeau événement (teal plein) ---------- */
/* Carte événement intégrée à la grille actu (le « carré ») */
.actu-card.event-card { background: var(--teal-700); color: var(--white); border-radius: 16px; padding: 1.8rem; display: flex; flex-direction: column; }
.actu-card.event-card .cat { color: rgba(255,255,255,0.85); }
.actu-card.event-card h3 { color: var(--white); font-size: 1.35rem; margin: 0.5rem 0; }
.actu-card.event-card .when { font-weight: 700; letter-spacing: 0.02em; color: var(--white); font-size: 0.95rem; }
.actu-card.event-card .what { color: rgba(255,255,255,0.92); font-size: 0.95rem; margin: 0.6rem 0 0; flex: 1; }
.actu-card.event-card .pill { margin-top: 1.4rem; align-self: flex-start; }
/* événement AVEC affiche : image en tête de carte, corps teal dessous (sans affiche : carte teal inchangée) */
.actu-card.event-card.has-media { padding: 0; }
.actu-card.event-card .ev-media { aspect-ratio: 3/2; overflow: hidden; border-radius: 16px 16px 0 0; }
.actu-card.event-card .ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actu-card.event-card .ev-body { display: flex; flex-direction: column; flex: 1; }
.actu-card.event-card.has-media .ev-body { padding: 1.3rem 1.8rem 1.8rem; }
/* Événement à la Une (bloc event_banner avec affiche) */
.section.event { padding-block: clamp(1.6rem, 3.5vw, 2.4rem); }
.event .event-card { display: flex; gap: clamp(1.4rem, 4vw, 2.8rem); align-items: center; background: rgba(0,177,183,0.06); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.3rem, 3vw, 2rem); }
.event .event-aff { flex: 0 0 auto; }
.event .event-aff img { display: block; width: clamp(180px, 30vw, 290px); border-radius: 14px; box-shadow: 0 18px 40px -24px rgba(15,51,49,0.45); }
.event .event-body { flex: 1; min-width: 0; }
.event .event-body h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin: 0.25rem 0 0.5rem; }
.event .event-body .when { font-weight: 700; color: var(--teal-700); font-size: 0.98rem; margin-bottom: 0.55rem; }
.event .event-body .what { color: var(--body); font-size: 1rem; margin: 0 0 1.2rem; }
@media (max-width: 720px) {
  .event .event-card { flex-direction: column; align-items: flex-start; }
  .event .event-aff img { width: 100%; max-width: 340px; margin-inline: auto; }
}
/* Cartes actu cliquables (teaser -> page article) */
.actu-card-link { text-decoration: none; color: inherit; display: block; }
.actu-card-link .actu-card { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.actu-card-link:hover .actu-card { transform: translateY(-4px); }
.actu-card-link:hover .actu-card h3 { color: var(--teal-700); }
/* Page article (/actu/<slug>) */
.article-page { padding-block: clamp(6rem, 12vw, 8rem) clamp(3rem, 7vw, 5rem); }
.article-head { max-width: 720px; }
.article-back { display: inline-block; font-size: 0.9rem; font-weight: 700; color: var(--teal-700); text-decoration: none; margin-bottom: 1.6rem; padding: 0.35rem 0; }
.article-back:hover { text-decoration: underline; }
.article-meta { display: flex; gap: 1rem; align-items: center; font-size: 0.85rem; margin-bottom: 0.8rem; }
.article-cat { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.article-date { color: var(--body); }
.article-title { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.article-cover { margin: clamp(1.8rem, 4vw, 2.6rem) auto; max-width: 720px; }
.article-cover img { width: 100%; border-radius: 18px; display: block; }
.article-body { max-width: 720px; font-size: 1.08rem; line-height: 1.75; }
.article-body p { margin: 0 0 1.2rem; }
.article-body h2 { font-size: 1.5rem; margin: 2rem 0 0.8rem; }
.article-body h3 { font-size: 1.2rem; margin: 1.6rem 0 0.6rem; }
.article-body ul, .article-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: 0.4rem; }
.article-body blockquote { border-left: 3px solid var(--teal); padding-left: 1.2rem; margin: 1.4rem 0; color: var(--ink); font-style: italic; }
.article-body a { color: var(--teal-700); text-decoration: underline; }

/* ---------- Méthodo + étapes ---------- */
.methodo { text-align: center; position: relative; }
.methodo .intro { max-width: 62ch; margin: 0 auto; }
.methodo .intro h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 1.1rem; }
.methodo .method-tag { font-weight: 700; color: var(--teal); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(3rem, 6vw, 5rem); text-align: left; }
.step-num { width: 60px; height: 60px; border-radius: 50%; background: var(--teal); color: var(--white); display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.4rem; }
.step h3 { font-size: 1.25rem; margin-bottom: 0.8rem; line-height: 1.2; }
.step p { font-size: 0.98rem; }
.methodo .methodo-deonto { max-width: 64ch; margin: clamp(2rem, 4vw, 2.8rem) auto 0; text-align: center; font-size: 0.92rem; color: var(--body); }
.methodo .methodo-deonto p { margin: 0; }
.methodo .methodo-deonto a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.methodo .methodo-deonto a:hover { color: var(--teal); }
.methodo-cta{ text-align:center; margin-top:clamp(2.5rem,5vw,4rem); }

/* ---------- Formation ---------- */
.formation .title { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.form-cat { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.form-cat > h3 { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); position: relative; }
.form-cat > h3::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; border-radius: 2px; background: var(--grad-h); }
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.f-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; display: flex; flex-direction: column; transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s; }
.f-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -28px rgba(10,114,118,0.4); border-color: transparent; }
.f-picto { width: 46px; height: 46px; border-radius: 12px; background: rgba(0,177,183,0.09); display: grid; place-items: center; margin-bottom: 1.1rem; color: var(--teal); transition: background 0.35s, color 0.35s; }
.f-card:hover .f-picto { background: var(--teal); color: var(--white); }
.f-card h4 { font-size: 1.15rem; font-weight: 700; line-height: 1.12; margin-bottom: 0.25rem; }
.f-card .f-sub { font-size: 0.85rem; font-weight: 700; color: var(--teal); margin-bottom: 0.8rem; }
.f-card p { font-size: 0.95rem; flex: 1; margin-bottom: 1.2rem; }
.f-card .f-tbd { color: var(--muted); }
.form-feature { background: rgba(0,177,183,0.06); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 14px; padding: 1.6rem 1.8rem; margin-top: clamp(1rem, 3vw, 2rem); }
.form-feature h4 { font-size: 1.25rem; font-weight: 700; margin: 0.3rem 0 0.5rem; }
.form-feature p { font-size: 0.95rem; margin: 0; }
.form-feature a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color 0.25s; }
.form-feature a:hover { color: var(--teal-700); }
.form-cta{ text-align:center; margin-top:clamp(2rem,4vw,3.5rem); }

/* ---------- Actu ---------- */
.actu .title { margin-bottom: 0.6rem; }
/* Carrousel actu : défilement horizontal qui s'arrête au bout (pas de boucle). 3 cartes visibles sur desktop. */
/* Carrousels : pas de scroll-snap (double mouvement avec les flèches) ; sur desktop le
   défilement se fait aux flèches uniquement (pas de capture du scroll/trackpad). */
/* ⚠️ overflow-y TOUJOURS hidden : sans ça, overflow-x seul crée un conteneur de scroll
   vertical qui avale la molette et bloque la navigation de la page (bug récurrent, interdit) */
.actu-carousel { display: flex; gap: 2rem; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
/* souris/trackpad : le carrousel ne capture pas le scroll de la page, il se pilote aux flèches ; au doigt (mobile), le glissement reste actif */
@media (hover: hover) and (pointer: fine) { .actu-carousel, .reass-carousel { overflow-x: hidden; } }
.actu-carousel > .actu-card, .actu-carousel > .actu-card-link, .actu-carousel > .c2 { flex: 0 0 clamp(270px, 31%, 360px); }
.actu-carousel::-webkit-scrollbar { display: none; }
.actu-card .ph { aspect-ratio: 3/2; margin-bottom: 1.2rem; }
.actu-card .cat { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.actu-card h3 { font-size: 1.25rem; margin: 0.6rem 0; line-height: 1.22; }
.actu-card .actu-excerpt { font-size: 0.95rem; color: var(--body); line-height: 1.55; margin: 0 0 0.7rem; }
.actu-card .date { font-size: 0.88rem; color: var(--muted); }

/* ---------- Actu : cartes v2 + flèches (proposition 1 validée) ---------- */
/* Navigation slider (modèle validé par la cliente, 31/08) : sous le carrousel, centrée,
   flèches rondes + points de position */
.actu-nav { display: flex; gap: 0.9rem; justify-content: center; align-items: center; margin-top: 1.4rem; }
.actu-nav > button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--teal-700); font-size: 1.1rem; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; flex: none; }
.actu-nav > button:hover { background: var(--teal-700); color: var(--white); border-color: var(--teal-700); }
.actu-nav .dots { display: flex; gap: 0.55rem; align-items: center; }
.dot-btn { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; background: var(--line); cursor: pointer; transition: background 0.25s, transform 0.25s; }
.dot-btn.on { background: var(--teal-700); transform: scale(1.2); }
.dot-btn:hover { background: var(--teal); }
.c2 { background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.c2:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -30px rgba(10,114,118,0.45); }
.c2-media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--surface); }
.c2-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.c2:hover .c2-media img { transform: scale(1.04); }
.c2-chip { position: absolute; left: 0.9rem; bottom: 0.9rem; background: var(--white); color: var(--teal-700); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.35); }
.c2-chip.chip-ev { background: var(--teal-700); color: var(--white); }
/* Affiches d'événement : montrées en entier, jamais rognées (retour cliente 31/08) */
.c2-media--affiche { background: var(--teal-900); }
.c2-media--affiche img { object-fit: contain; }
.c2-media.ev-fallback { background: var(--teal-700); }
.c2-media.ev-fallback::before { content: "#"; position: absolute; right: 0.4rem; top: -2.2rem; font-size: 8rem; font-weight: 700; color: rgba(255,255,255,0.09); }
.c2-body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; flex: 1; }
.c2-body h3 { font-size: 1.2rem; line-height: 1.25; margin: 0; }
.c2-excerpt { font-size: 0.95rem; color: var(--body); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-date { font-weight: 700; font-size: 0.88rem; color: var(--teal-700); margin: 0; }
.c2-body .pill { margin-top: auto; } /* CTA calés à la même hauteur sur toutes les cartes (retour cliente 30/08) */
.c2-foot { margin-top: auto; padding-top: 0.6rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--muted); width: 100%; }
.c2-read { color: var(--teal); font-weight: 700; transition: transform 0.3s var(--ease); }
.c2:hover .c2-read { transform: translateX(4px); }

/* ---------- Clients ---------- */
.clients .clients-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.clients h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.1rem; }
.clients .logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.logo-cell { aspect-ratio: 3/2; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--white); transition: border-color 0.3s; }
.logo-cell:hover { border-color: var(--g3); }

/* ---------- Avis Google ---------- */
.reviews-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reviews-head .title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.g-badge { display: inline-flex; align-items: center; gap: 0.8rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 1.2rem; }
.g-logo { width: 26px; height: 26px; flex: none; }
.g-rating { display: flex; align-items: center; gap: 0.4rem; }
.g-rating strong { font-size: 1.25rem; color: var(--ink); }
.g-count { font-size: 0.8rem; color: var(--muted); }
.stars { color: #fbbc04; letter-spacing: 2px; font-size: 1rem; line-height: 1; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; display: flex; flex-direction: column; gap: 0.85rem; transition: transform 0.35s var(--ease), box-shadow 0.35s; }
.review-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -28px rgba(10,114,118,0.35); }
.review-card header { display: flex; align-items: center; gap: 0.7rem; }
.avatar { width: 42px; height: 42px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.r-name { font-weight: 700; color: var(--ink); }
.r-date { font-size: 0.8rem; color: var(--muted); }
.g-mark { width: 18px; height: 18px; margin-left: auto; flex: none; }
.review-card p { font-size: 0.95rem; color: var(--body); margin: 0; }
.reviews-all { display: inline-flex; margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Réassurance fusionnée : intro clients + marquee logos + carrousel témoignages/avis */
.reass-clients { text-align: center; max-width: 62ch; margin: 0 auto clamp(1.5rem, 3vw, 2rem); }
/* Labels « Témoignages » / « Mes clients » agrandis (retour cliente 31/08) */
.reviews-head .eyebrow, .reass-clients .creds-label { font-size: 0.92rem; }
.reass-clients p { margin: 0.4rem 0 0; }
.reass .logo-marquee { margin-bottom: clamp(2rem, 4vw, 3rem); }
.reass-carousel { display: flex; align-items: stretch; gap: 1.5rem; overflow-x: auto; overflow-y: hidden; padding: 0.5rem 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.reass-carousel::-webkit-scrollbar { display: none; }
.reass-carousel > article { flex: 0 0 clamp(270px, 31%, 360px); margin: 0; }
.temoignage .t-label { display: block; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--teal); margin-bottom: 0.6rem; }

/* « Lire la suite » : fin des textes longs repliée (details natif, sans JS) */
.txt-more > summary { list-style: none; cursor: pointer; color: var(--teal); font-weight: 700; font-size: 0.9rem; margin-top: 0.4rem; }
.txt-more > summary::-webkit-details-marker { display: none; }
.txt-more > summary::after { content: " \25be"; }
.txt-more > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.txt-more[open] > summary { display: none; }
.temoignage .quote-text.q-open::after { content: none; }
.temoignage .quote-text.q-close::before { content: none; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact .title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0.5rem 0 0.8rem; }
.contact-info { margin-top: 1.5rem; display: grid; gap: 0.7rem; }
.contact-info li { color: var(--body); }
.contact-form { display: grid; gap: 1rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.9rem 1.2rem; border-radius: 12px; border: 1.5px solid var(--g3); background: var(--white); font-family: var(--font); font-size: 1rem; color: var(--ink); resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--teal); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form button { justify-self: start; }
.form-status { font-size: 0.9rem; color: var(--body); min-height: 1.2em; margin: 0; }
.form-status.ok  { color: var(--teal-700); font-weight: 700; }
.form-status.err { color: #b3261e; }
.contact-form button[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--surface); position: relative; overflow: hidden; }
.newsletter .nl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; z-index: 2; }
.newsletter h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin: 0.7rem 0 0.6rem; }
.newsletter p { max-width: 44ch; }
.nl-form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.nl-form input { flex: 1; min-width: 220px; padding: 0.9rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--g3); background: var(--white); font-family: var(--font); font-size: 0.98rem; color: var(--ink); }
.nl-form input:focus { outline: none; border-color: var(--teal); }
.nl-form input::placeholder { color: var(--muted); }
.nl-note { font-size: 0.8rem; color: var(--muted); margin-top: 0.9rem; }
.nl-hash { right: -2%; top: 50%; transform: translateY(-50%); width: 240px; height: 240px; }

/* ---------- Footer (teal profond) ---------- */
/* Footer condensé (retour cliente 31/08) : présentation pleine largeur, interlignes resserrés */
.site-footer { background: var(--teal-900); color: rgba(255,255,255,0.72); padding-block: clamp(1.5rem, 3vw, 2.2rem) 1rem; }
.footer-top { margin-bottom: 1rem; }
.footer-top h2 { color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.6rem; }
.footer-top p { color: rgba(255,255,255,0.65); line-height: 1.5; }
.footer-social { margin-top: 0.8rem; display: flex; gap: 1rem; }
.footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; display: grid; place-items: center; color: var(--white); transition: all 0.3s; }
.footer-social a:hover { background: var(--teal); border-color: var(--teal); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.14); }
.footer-cols h4 { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin-bottom: 0.6rem; font-weight: 700; }
.footer-cols a, .footer-cols p { display: block; color: rgba(255,255,255,0.65); font-size: 0.95rem; line-height: 1.45; margin-bottom: 0.25rem; transition: color 0.25s; }
.footer-cols a:hover { color: var(--white); }
.footer-eco { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1rem; padding: 0.55rem 1rem; border-radius: 999px; font-size: 0.82rem; color: rgba(255,255,255,0.92); border: 1.5px solid transparent; background: linear-gradient(var(--teal-900), var(--teal-900)) padding-box, var(--grad-h) border-box; }
.footer-eco svg { color: rgba(255,255,255,0.8); flex: none; }
.footer-bottom { text-align: center; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.85rem; color: rgba(255,255,255,0.5); }

/* ---------- Cartouche « Site éco-conçu » (home, dépliable) ---------- */
.eco { padding: 0 0 clamp(2rem, 4vw, 3rem); text-align: center; scroll-margin-top: 6rem; }
.eco-corner { position: absolute; right: clamp(1.2rem, 3vw, 2.6rem); bottom: 1.3rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--ink); border: 1.5px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-h) border-box; transition: box-shadow 0.25s; }
.eco-corner svg { color: var(--teal); flex: none; }
.eco-corner:hover { box-shadow: 0 10px 24px -16px rgba(10,114,118,0.6); }
.eco-badge > summary { list-style: none; cursor: pointer; display: inline-block; }
.eco-badge > summary::-webkit-details-marker { display: none; }
.eco-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1.2rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--ink); border: 1.5px solid transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-h) border-box; transition: box-shadow 0.25s; }
.eco-pill svg { color: var(--teal); flex: none; }
.eco-chev { color: var(--teal); font-size: 0.8em; transition: transform 0.25s var(--ease); } /* indique que le cartouche se déplie */
.eco-badge[open] .eco-chev { display: inline-block; transform: rotate(180deg); }
.eco-badge > summary:hover .eco-pill { box-shadow: 0 10px 24px -16px rgba(10,114,118,0.6); }
.eco-panel { max-width: 720px; margin: 1.5rem auto 0; text-align: left; border: 1px solid var(--line); border-radius: 18px; padding: 1.8rem 2rem; background: var(--surface); }
.eco-panel h3 { font-size: 1.25rem; margin: 0 0 0.8rem; }
.eco-panel p { font-size: 0.95rem; line-height: 1.65; }
.eco-stats { font-weight: 700; color: var(--teal-700); margin-top: 1rem; }

/* ---------- Reveal + reduced-motion ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .presentation .pres-grid, .offre, .clients .clients-grid, .newsletter .nl-grid, .contact-grid { grid-template-columns: 1fr; }
  .offre--flip .offre-media { order: 0; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .steps, .review-grid { grid-template-columns: 1fr; }
  /* colonne unique : photo recadrée 4/5 centrée (sinon height:100% écrase le cadrage), et EN PREMIER */
  .presentation .ph { order: -1; height: auto; aspect-ratio: 4/5; max-width: 340px; margin: 0 auto; min-height: 0; }
}
@media (max-width: 720px) {
  .nav { position: fixed; top: 0; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.1rem; background: #fff; padding: 4.8rem var(--gutter) 2rem; box-shadow: 0 26px 44px -26px rgba(15,51,49,0.5); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform 0.35s var(--ease); max-height: 100vh; overflow-y: auto; z-index: 90; }
  body.nav-open .nav { transform: translateY(0); }
  .nav > a { padding: 0.85rem 0.2rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav .pill { align-self: flex-start; margin-top: 1rem; height: auto; padding: 0.7rem 1.4rem; font-size: 0.95rem; }
  .nav .lkd { margin-top: 0.8rem; }
  .nav-dd { display: block; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-dd-btn { width: 100%; justify-content: space-between; padding: 0.85rem 0.2rem; font-size: 1.05rem; }
  .nav-dd-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0.5rem 0.9rem; min-width: 0; display: none; }
  .nav-dd.open .nav-dd-menu { display: flex; }
  .nav-dd-menu a { padding: 0.55rem 0.4rem; font-size: 0.98rem; }
  .brand { position: relative; z-index: 110; }
  .burger { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--g3); border-radius: 10px; background: transparent; cursor: pointer; position: relative; z-index: 110; }
  body.nav-open .burger { border-color: var(--teal); color: var(--teal); }
  .footer-cols, .card-grid, .clients .logos { grid-template-columns: 1fr 1fr; }
  .hero h1 { max-width: none; }
  .eco-corner { position: static; align-self: center; margin-top: 2rem; }
}


/* ---------- Touches charte : puces + filets dégradé ---------- */
.baseline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad-h); flex: none; }
.hero .eyebrow::after { content: ""; display: block; width: 72px; height: 3px; border-radius: 2px; background: var(--grad-h); margin: 0.9rem auto 0; }
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-h); }

/* ---------- Formation : menu compact, détail au clic (option C validée) ---------- */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; align-items: start; }
.menu-grid .cat-label { grid-column: 1 / -1; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--teal); margin-top: 1.2rem; scroll-margin-top: 96px; }
.menu-grid .cat-label:first-child { margin-top: 0; }
/* Tuile formation ouverte (retour 30/08) : texte visible, « Lire la suite » si long */
.mc-open { border: 1px solid var(--line); border-radius: 14px; background: var(--white); padding: 1.1rem 1.2rem 1.2rem; transition: box-shadow 0.25s, border-color 0.25s; }
.mc-open:hover { box-shadow: 0 18px 36px -26px rgba(10,114,118,0.5); border-color: var(--teal); }
.mc-open h4 { margin: 0 0 0.15rem; font-size: 1rem; }
.mc-open .f-sub { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.55rem; }
.mc-open p { font-size: 0.95rem; color: var(--body); line-height: 1.55; margin: 0; }
.mc-picto { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); color: var(--teal); display: grid; place-items: center; margin-bottom: 0.7rem; }
/* Tuile « mise en avant » (champ Storyblok) : fond teal plein, texte et picto blancs,
   placée en tête du carrousel */
.mc-open--star { border: 2px solid var(--teal-700); background: var(--teal-700); }
.mc-open--star h4 { color: var(--white); }
.mc-open--star .f-sub { color: rgba(255,255,255,0.85); }
.mc-open--star p { color: rgba(255,255,255,0.9); }
.mc-open--star .mc-picto { background: transparent; border-color: rgba(255,255,255,0.45); color: var(--white); }
.mc-open--star .txt-more > summary { color: var(--white); }
.mc-open--star:hover { border-color: var(--teal); }

/* ---------- Parcours phare (carte premium bordure dégradée, V2 validée) ---------- */
/* Chapo formation : plus gros et en teal (retour cliente 31/08) */
.form-chapo { text-align: center; max-width: 62ch; margin: 0 auto clamp(1.2rem, 2.5vw, 1.8rem); font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--teal-700); line-height: 1.5; }
/* Encart parcours « proposition D » : carte scindée, objectifs numérotés à droite,
   liseré teal signature épaissi (retour cliente 31/08 ; dégradé multicolore écarté) */
.form-parcours { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; border: 2.5px solid var(--teal); border-radius: 20px; background: var(--white); box-shadow: 0 26px 52px -38px rgba(10,114,118,0.45); padding: 2rem 2.2rem; margin: 0.5rem 0 clamp(2.2rem, 4.5vw, 3.2rem); }
.form-parcours h4 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0.3rem 0 0.7rem; }
.fp-left p { font-size: 0.95rem; margin-bottom: 1.2rem; }
.fp-left .f-sub { font-weight: 700; font-size: 0.85rem; }
.fp-steps { list-style: none; padding: 0; margin: 0; }
.fp-steps li { display: flex; gap: 0.9rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px dashed var(--line); font-size: 0.95rem; color: var(--body); }
.fp-steps li:last-child { border-bottom: none; }
.fp-steps .num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--grad-h); color: #fff; font-weight: 700; font-size: 0.85rem; display: grid; place-items: center; transform: translateY(0.3rem); }
@media (max-width: 800px) { .form-parcours { grid-template-columns: 1fr; } }
/* Intertitre formation (« Préparer les leaders de demain »), éditable dans Storyblok.
   Remonté juste sous le chapo, avant l'encart parcours (retour cliente 31/08). */
.form-cards-title { text-align: center; font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin: 0 0 clamp(1.4rem, 2.5vw, 2rem); }
.form-cards-title::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--grad-h); margin: 0.7rem auto 0; }
.form-carousel > .mc { flex: 0 0 clamp(250px, 27%, 320px); }

/* Listes des offres : puces rondes dégradé charte (remplacent les ✓ saisis, retour cliente 31/08) */
.offre-list { list-style: none; padding: 0; margin: 0.9rem 0 0; }
.offre-list li { position: relative; padding-left: 1.35rem; margin-bottom: 0.5rem; }
.offre-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-h); }

/* ---------- Titre section offres ---------- */
.offres-title { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.offres-title::after { content: ""; display: block; width: 72px; height: 3px; border-radius: 2px; background: var(--grad-h); margin: 1.1rem auto 0; }

/* Assessment First / DISC (#8) */
.assess-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.assess-grid--flip > :first-child { order: 1; }
@media (max-width: 860px) { .assess-grid--flip > :first-child { order: 0; } }
.assess .title { margin: 0.6rem 0 1rem; font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.assess .title + p, .assess p { margin-bottom: 1.6rem; }
.assess-cards { display: flex; flex-direction: column; gap: 1rem; }
.assess-visual img { width: 100%; border-radius: 18px; display: block; }
.assess-card { background: rgba(0,177,183,0.05); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 14px; padding: 1.3rem 1.5rem; }
.assess-card strong { display: block; font-size: 1.15rem; color: var(--ink); margin-bottom: 0.25rem; }
.assess-card span { font-size: 0.92rem; color: var(--body); }
@media (max-width: 860px) { .assess-grid { grid-template-columns: 1fr; } }

/* Déontologie : Comment choisir son coach (#9) */
.deonto-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.deonto .title { margin: 0.6rem 0 1rem; font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.deonto-list { display: flex; flex-direction: column; gap: 1rem; }
.deonto-list li { position: relative; padding-left: 1.8rem; font-size: 0.98rem; line-height: 1.55; color: var(--body); }
.deonto-list li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 10px; height: 10px; border-radius: 3px; background: var(--grad-h); }
.deonto-list strong { color: var(--ink); }
@media (max-width: 860px) { .deonto-grid { grid-template-columns: 1fr; } }

/* ---------- Clients : carrousel de logos ---------- */
.clients-intro { max-width: 62ch; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.clients-intro h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); width: max-content; animation: logo-scroll 45s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track img { width: 120px; height: 56px; object-fit: contain; object-position: center; opacity: 0.82; transition: opacity 0.3s; }
.logo-track img:hover { opacity: 1; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } .logo-marquee { overflow-x: auto; overflow-y: hidden; -webkit-mask-image: none; mask-image: none; } }
.clients h2::after { margin: 1.1rem auto 0; }

/* ---------- Qui suis-je : diplômes & certifications ---------- */
.creds { margin-top: 1.5rem; }
.creds-label { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 1rem; }
/* Certifications : même bandeau défilant que les logos clients, piste un peu plus rapide
   (moins de logos). Taille = celle des clients (120x56). */
.creds-marquee { margin-top: 0.2rem; }
.creds-marquee .logo-track { animation-duration: 28s; }

/* ---------- Témoignages ---------- */
.temoignages-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.temoignages-head .eyebrow { display: block; margin-bottom: 0.8rem; }
.temoignages-head .title::after { content: ""; display: block; width: 72px; height: 3px; border-radius: 2px; background: var(--grad-h); margin: 1.1rem auto 0; }
.temoignage-grid { columns: 2; column-gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.temoignage { break-inside: avoid; margin: 0 0 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem 1.8rem; box-shadow: 0 10px 34px -26px rgba(0,0,0,0.3); }
.temoignage .quote-text::before { content: "«\00A0"; color: var(--teal); font-weight: 700; }
.temoignage .quote-text::after { content: "\00A0»"; color: var(--teal); font-weight: 700; }
.temoignage p { color: var(--body); font-size: 0.98rem; line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .temoignage-grid { columns: 1; } }

/* ---------- Bandeau cookies (consentement) ---------- */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; max-width: 760px; margin-inline: auto; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px -20px rgba(0,0,0,0.35); padding: 1.25rem 1.4rem; }
.cookie-banner[hidden] { display: none; }
.cookie-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.cookie-text { flex: 1 1 320px; margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--body); }
.cookie-text a { color: var(--teal); text-decoration: underline; }
.cookie-actions { display: flex; flex-shrink: 0; gap: 0.7rem; }
.cookie-actions .pill { padding: 0.7rem 1.4rem; font-size: 0.9rem; }
.cookie-reopen { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
@media (max-width: 560px) { .cookie-actions { width: 100%; } .cookie-actions .pill { flex: 1; justify-content: center; } }

/* ---------- pages légales ---------- */
.legal-page { padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.legal-wrap { max-width: 820px; }
.legal-title { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 0.4rem; }
.legal-updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 2.5rem; }
.legal-body { color: var(--body); }
.legal-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 2.6rem; margin-bottom: 0.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.legal-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body h3 { font-size: 1.15rem; margin-top: 1.8rem; margin-bottom: 0.5rem; }
.legal-body p { margin-bottom: 1rem; }
.legal-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal-body a:hover { color: var(--teal-700); }
.legal-body strong { color: var(--ink); font-weight: 700; }
.legal-body ul { margin: 0 0 1.2rem 1.2rem; }
.legal-body li { margin-bottom: 0.5rem; padding-left: 0.2rem; }
.legal-body li::marker { color: var(--teal); }
.legal-body hr { border: none; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.legal-table { overflow-x: auto; margin: 0 0 1.4rem; }
.legal-table table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; }
.legal-table th { background: rgba(0,177,183,0.06); color: var(--ink); font-weight: 700; }
.legal-table p { margin: 0; }

/* =========================================================================
   Blocs sélectionnés (juin 2026)
   ========================================================================= */
.mk-lead { font-size: 1.08rem; color: var(--body); max-width: 60ch; }
.mk-eyebrow { font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.mk-h { font-size: clamp(1.8rem, 3.4vw, 2.7rem); color: var(--ink); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0.6rem 0; }
.mk-center { text-align: center; }
.mk-center .mk-lead { margin-inline: auto; }
.mk-cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* annonce */
.nb-ann { background: var(--teal-900); color: #fff; text-align: center; padding: 0.75rem 1rem; font-size: 0.92rem; }
.nb-ann a { color: #fff; text-decoration: underline; }

/* citation */
.nb-cite { text-align: center; max-width: 700px; margin: 0 auto; }
.nb-cite blockquote { font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 300; color: var(--ink); line-height: 1.35; }
.nb-cite .who { margin-top: 1rem; font-weight: 700; color: var(--teal); font-size: 0.9rem; }

/* tarifs */
.nb-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
.nb-price { border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; text-align: center; background: var(--white); }
.nb-price.hot { border-color: var(--teal); box-shadow: 0 16px 40px -28px rgba(0,177,183,0.6); position: relative; }
.nb-price.hot::before { content: "Populaire"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--teal-700); color: #fff; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 999px; }
.nb-price h5 { font-size: 1.05rem; color: var(--ink); }
.nb-price .amt { font-size: 1.9rem; font-weight: 700; color: var(--ink); margin: 0.3rem 0; }
.nb-price-period { font-size: 0.8rem; color: var(--muted); }
.nb-price ul { list-style: none; text-align: left; font-size: 0.85rem; margin: 0.9rem 0 1.1rem; padding: 0; }
.nb-price li { padding: 0.22rem 0 0.22rem 1.4rem; position: relative; }
.nb-price li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

/* feature */
.mk-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.2rem; }
.mk-feat .mk-ic { width: 48px; height: 48px; border-radius: 13px; background: rgba(0,177,183,0.1); display: grid; place-items: center; color: var(--teal); margin-bottom: 0.9rem; }
.mk-feat h4 { font-size: 1.12rem; color: var(--ink); margin-bottom: 0.3rem; }
.mk-feat p { font-size: 0.92rem; color: var(--body); }

/* réassurance */
.nb-trust { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; }
.nb-trust > div { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.nb-trust .ic { color: var(--teal); display: grid; place-items: center; }

/* stats */
.mk-stats { background: var(--teal-900); }
.mk-stats .mk-eyebrow { color: #7fd8da; }
.mk-stats .mk-h { color: #fff; }
.mk-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2rem; }
.mk-stat .n { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.mk-stat .l { font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-top: 0.4rem; }

/* timeline */
.mk-tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: 2.2rem; }
.mk-tl-item { border-top: 2px solid var(--line); padding-top: 1rem; position: relative; }
.mk-tl-item::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); }
.mk-tl-item .yr { font-weight: 700; color: var(--teal); font-size: 0.95rem; }
.mk-tl-item h4 { font-size: 1.05rem; color: var(--ink); margin: 0.2rem 0 0.25rem; }
.mk-tl-item p { font-size: 0.88rem; color: var(--body); }

/* bento */
.mk-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; gap: 1rem; margin-top: 2rem; }
.bento-cell { border-radius: 18px; overflow: hidden; position: relative; border: 1px solid var(--line); background: var(--white); padding: 1.3rem; display: flex; flex-direction: column; justify-content: flex-end; }
.bento-img { grid-row: span 2; border: none; padding: 0; }
.bento-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento-wide { grid-column: span 2; background: var(--surface); }
.bento-teal { background: var(--teal-700); color: #fff; border: none; }
.bento-cell .tag { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.bento-cell h4 { font-size: 1.15rem; color: var(--ink); margin-top: 0.2rem; }
.bento-teal h4, .bento-teal .n { color: #fff; }
.bento-teal .tag { color: rgba(255,255,255,0.8); }
.bento-cell .n { font-size: 2.2rem; font-weight: 700; color: var(--teal); letter-spacing: -0.03em; line-height: 1; }
.bento-quote { font-size: 1.15rem; font-weight: 300; color: var(--ink); line-height: 1.35; }

/* faq */
.nb-faq { margin-top: 1.4rem; }
.nb-faq-item { border: 1px solid var(--line); border-radius: 12px; padding: 0.95rem 1.2rem; margin-bottom: 0.65rem; background: var(--white); }
.nb-faq-q { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--ink); cursor: pointer; gap: 1rem; }
.nb-faq-q .plus { color: var(--teal); font-size: 1.3rem; line-height: 1; }
.nb-faq-a { font-size: 0.92rem; margin-top: 0.55rem; color: var(--body); }

/* texte multi-colonnes */
.wf-multicol { column-gap: 2.4rem; color: var(--body); margin-top: 1.2rem; }
.wf-multicol.c1 { columns: 1; }
.wf-multicol.c2 { columns: 2; }
.wf-multicol.c3 { columns: 3; }
.wf-multicol p { margin-bottom: 0.8rem; break-inside: avoid; }

/* grille de contenu */
.wf-grid { display: grid; gap: 1.5rem 2.2rem; margin-top: 1.4rem; }
.wf-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.wf-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.wf-item h4 { font-size: 1.02rem; color: var(--ink); margin-bottom: 0.25rem; }
.wf-item p { font-size: 0.9rem; color: var(--body); }

/* texte + média / liste */
.mk-mt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
.mk-mt .ph { aspect-ratio: 4/3; }
.mk-mt-h { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.mk-mt-txt p { color: var(--body); }
.wf-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.wf-li { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.wf-li:first-child { padding-top: 0; }
.wf-li h5 { font-size: 1rem; color: var(--ink); }
.wf-li p { font-size: 0.88rem; color: var(--body); margin: 0.2rem 0; }
.wf-li .meta { font-size: 0.8rem; color: var(--muted); }

/* texte riche */
.mk-rich { max-width: 680px; margin: 0 auto; }
.mk-rich-h { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.mk-rich h3 { font-size: 1.25rem; color: var(--ink); margin: 1.6rem 0 0.5rem; }
.mk-rich p { color: var(--body); margin-bottom: 0.9rem; }
.mk-rich ul { margin: 0 0 0.9rem 1.2rem; color: var(--body); }
.mk-rich li { margin-bottom: 0.35rem; }
.mk-rich blockquote { border-left: 3px solid var(--teal); padding-left: 1.1rem; font-size: 1.15rem; font-weight: 300; color: var(--ink); margin: 1.2rem 0; }

/* avec témoignage */
.mk-ct { max-width: 720px; margin: 0 auto; }
.mk-ct-h { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.mk-ct > p { color: var(--body); margin-bottom: 0.9rem; }
.mk-ct .tmo { margin: 1.6rem 0; padding: 1.3rem 1.5rem; background: var(--surface); border-left: 3px solid var(--teal); border-radius: 12px; }
.mk-ct .tmo blockquote { font-size: 1.2rem; font-weight: 300; color: var(--ink); line-height: 1.4; }
.mk-ct .tmo .by { margin-top: 0.7rem; font-weight: 700; color: var(--teal); font-size: 0.88rem; }

/* avec visuel collant (sticky) */
.mk-sticky { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.mk-sticky .sticky-media { position: sticky; top: 6rem; }
.mk-sticky .ph { aspect-ratio: 3/4; }
.mk-sticky-h { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.mk-sticky .sticky-body > :first-child { margin-top: 0; }
.mk-sticky .sticky-body h3 { font-size: 1.2rem; color: var(--ink); margin: 1.4rem 0 0.4rem; }
.mk-sticky .sticky-body p { color: var(--body); margin-bottom: 0.9rem; }

@media (max-width: 760px) {
  .mk-feat-grid, .mk-stat-grid { grid-template-columns: 1fr 1fr; }
  .nb-grid3, .wf-grid.g3, .wf-grid.g2 { grid-template-columns: 1fr; }
  .mk-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .mk-tl { grid-template-columns: 1fr 1fr; }
  .mk-mt, .wf-list { grid-template-columns: 1fr; }
  .wf-multicol.c2, .wf-multicol.c3 { columns: 1; }
  .mk-sticky { grid-template-columns: 1fr; }
  .mk-sticky .sticky-media { position: static; }
}

/* ===== Catalogue de blocs (/reference) — habillage interne, pas les blocs eux-mêmes ===== */
.ref-page { background: #f3efe9; padding-bottom: 4rem; }
.ref-head { max-width: 780px; text-align: center; padding: 3.4rem 1.5rem 1.6rem; }
.ref-head .ref-kicker { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--teal); }
.ref-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .6rem 0 .8rem; color: var(--ink); }
.ref-head p { font-size: 1.02rem; color: var(--body); margin: 0 auto; max-width: 60ch; }
.ref-head .ref-note { font-size: .82rem; color: var(--muted); margin-top: .9rem; }
.ref-block { max-width: 1140px; margin: 0 auto 1.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px -34px rgba(0,0,0,.3); }
.ref-bar { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ref-bar h2 { font-size: 1.05rem; color: var(--ink); margin: 0; }
.ref-bar code { font-size: .74rem; color: var(--teal-700); background: rgba(0,177,183,.1); border-radius: 999px; padding: .15rem .55rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ref-bar .ref-desc { font-size: .86rem; color: var(--muted); flex: 1 1 100%; margin-top: .1rem; }
.ref-frame { position: relative; }
.ref-frame .reveal { opacity: 1; transform: none; }
.ref-frame .section { padding-block: 2rem; }