/* ==========================================================================
   Onsightlab — site vitrine « motion design » (02/10/2026)
   Le site parle la langue visuelle de l'APPLICATION (mode sombre) : mêmes couleurs, mêmes rayons, mêmes ressorts, et ses
   composants recréés en HTML (nœud d'arbre, cercle de statut, carte « prochaine étape », goulet, notes de 1 à 5, effectif,
   barre du bas). Les valeurs viennent de assets/css/main.css et dark-mode.css de l'app — les reprendre là-bas si elles changent.
   ========================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --fond: #0c0c12; --fond-2: #111118; --carte: #1c1c28; --carte-2: #24243a; --champ: #2c2c40; --bord: #2a2a3c; --bord-2: #3a3a52;
  --titre: #eeeef5; --txt: #cacae0; --doux: #a8a8c8;
  --acc: #5E73EB; --acc-clair: #8b9cf6; --violet: #7C3AED; --acc-a: 94, 115, 235; --violet-a: 124, 58, 237;
  --grad: linear-gradient(135deg, #5E73EB, #7C3AED);
  --ok: #2ecc71; --ok-a: 46, 204, 113; --cours: #f1c40f; --cours-a: 241, 196, 15; --retard: #e74c3c; --retard-a: 231, 76, 60;
  --r-s: 8px; --r: 12px; --r-l: 16px; --r-xl: 20px;
  --mo-tap: .09s; --mo-court: .15s; --mo-normal: .22s; --mo-ample: .34s; --mo-lent: .6s;
  --ease-entree: cubic-bezier(.2, .9, .3, 1); --ease-doux: cubic-bezier(.4, 0, .2, 1); --ressort: cubic-bezier(.34, 1.56, .64, 1); --ressort-pression: cubic-bezier(.34, 1.4, .6, 1);
  --tete: 68px; --barre: 0px; --large: 1180px;
  /* ce qui dépend de la tonalité (voir « LES DEUX TONALITÉS », en fin de feuille) */
  --verre: rgba(12, 12, 18, .72); --lisere: rgba(255, 255, 255, .05); --survol: rgba(255, 255, 255, .06); --champ-survol: #33334a;
  --grad-texte: linear-gradient(120deg, #8b9cf6 0%, #5E73EB 40%, #a47bff 100%); --carte-fort: linear-gradient(180deg, #23234a, var(--carte) 60%);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--tete) + 12px); scroll-behavior: smooth; overflow-x: clip; }
html.calme { scroll-behavior: auto; }
body { margin: 0; background: var(--fond); color: var(--txt); font: 400 1rem/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: var(--barre); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--acc-clair); outline-offset: 3px; border-radius: 6px; }
.ic { width: 1.25em; height: 1.25em; flex: none; display: block; }
.saut { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r); background: var(--titre); color: var(--fond); font-weight: 700; transition: top var(--mo-court); }
.saut:focus { top: 12px; }
.conteneur { width: min(100% - 40px, var(--large)); margin-inline: auto; }
.conteneur--etroit { width: min(100% - 40px, 860px); }
main { overflow-x: clip; }

/* ---------- les textes ---------- */
.sur { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc-clair); }
.sur::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--grad); }
.titre { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.1rem); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: var(--titre); text-wrap: balance; }
.titre--3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.titre--xl { font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem); }
.marque-t { background: var(--grad-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); color: var(--txt); max-width: 62ch; }
.tetiere { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(28px, 4vw, 48px); }
.section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.section--nuit { background: var(--fond-2); border-block: 1px solid var(--lisere); }

/* ---------- les boutons : ceux de l'app (survol −1 px + halo, pression à .97) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 20px; border-radius: var(--r); font-weight: 700; font-size: .92rem; line-height: 1.2; white-space: nowrap;
  transition: transform var(--mo-court) var(--ressort-pression), box-shadow var(--mo-court), background var(--mo-court), border-color var(--mo-court); }
.btn:active { transform: scale(.97); transition-duration: var(--mo-tap); }
.btn--plein { background: var(--grad); color: #fff; box-shadow: 0 6px 16px -6px rgba(var(--acc-a), .6); }
.btn--plein:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgba(var(--acc-a), .8); }
.btn--contour { border: 1.5px solid var(--bord-2); color: var(--titre); background: rgba(255, 255, 255, .02); }
.btn--contour:hover { border-color: var(--acc); transform: translateY(-1px); }
.btn--discret { color: var(--txt); }
.btn--discret:hover { color: var(--titre); background: var(--survol); }
.btn--gris { background: var(--champ); color: var(--titre); }
.btn--grand { min-height: 52px; padding: 14px 26px; font-size: 1rem; border-radius: 14px; }

/* ---------- l'en-tête ---------- */
.tete { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--tete); background: var(--verre); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--lisere); }
.tete__in { width: min(100% - 32px, 1280px); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 20px; }
.marque img { height: 30px; width: auto; }
.nav { display: flex; gap: 4px; margin-inline: auto; }
.nav a { padding: 8px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--txt); transition: color var(--mo-court), background var(--mo-court); }
.nav a:hover { color: var(--titre); background: var(--survol); }
.tete__fin { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav + .tete__fin { margin-left: 0; }
.langue { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(var(--acc-a), .1); border: 1px solid rgba(var(--acc-a), .22); }
.langue__lien { padding: 5px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--doux); transition: color var(--mo-court), background var(--mo-court); }
.langue__lien:hover { color: var(--titre); }
.langue__lien.is-on { background: var(--grad); color: #fff; }
.tete__fil { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.tete__fil i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad); }

/* ---------- les entrées au défilement ---------- */
.js [data-vue] { opacity: 0; transform: translateY(22px); }
.js [data-vue].is-vu { opacity: 1; transform: none; transition: opacity var(--mo-lent) var(--ease-entree), transform var(--mo-lent) var(--ease-entree); transition-delay: var(--d, 0s); }
.calme [data-vue] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- les composants de l'app ---------- */
.rond { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--titre); }
.rond .ic { width: 20px; height: 20px; }
.rond--s { width: 24px; height: 24px; } .rond--s .ic { width: 13px; height: 13px; }
.rond--ok { border: 3px solid var(--ok); color: var(--ok); background: rgba(var(--ok-a), .08); }
.rond--attente, .rond--verrou { border: 2px solid var(--bord-2); color: var(--doux); background: var(--fond-2); }
.rond--pct { --c: var(--acc); background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--bord-2) 0); transition: --p 1s var(--ease-doux); }
.rond--pct::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--fond-2); }
.rond--pct i, .rond--pct .ic { position: relative; font-style: normal; }
.rond--xl { width: 76px; height: 76px; font-size: 1.35rem; } .rond--xl::before { inset: 6px; }
.etiq { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 6px; font-size: .62rem; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
.etiq--goulet { background: rgba(var(--cours-a), .16); color: var(--cours); }
.etiq--jour { background: var(--grad); color: #fff; border-radius: 999px; padding: 6px 11px; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: .8rem; font-weight: 800; }
.avatar--s { width: 26px; height: 26px; font-size: .68rem; } .avatar--l { width: 52px; height: 52px; font-size: 1.1rem; }
.jauge { height: 6px; border-radius: 3px; background: var(--bord); overflow: hidden; }
.jauge i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: 3px; background: var(--grad); transition: width var(--mo-lent) var(--ease-doux); }
.jauge--or i { background: linear-gradient(90deg, #f1c40f, #f5a623); }

/* le nœud de l'arbre */
.noeud { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r); background: var(--carte); border: 1.5px solid var(--bord); transition: border-color var(--mo-ample), box-shadow var(--mo-ample), background var(--mo-ample), opacity var(--mo-ample); }
.noeud__t { display: grid; gap: 2px; min-width: 0; }
.noeud__t b { font-size: .84rem; font-weight: 700; color: var(--titre); line-height: 1.25; }
.noeud__t small { font-size: .72rem; color: var(--doux); }
.noeud__t .etiq { justify-self: start; margin-top: 4px; transition: opacity var(--mo-normal), transform var(--mo-normal); }
.noeud.is-ok { border-color: rgba(var(--ok-a), .7); box-shadow: 0 0 0 1px rgba(var(--ok-a), .12), 0 8px 26px -16px rgba(var(--ok-a), .8); }
.noeud.is-ok .rond--pct { --c: var(--ok); --p: 100; }
.noeud.is-ok .rond--pct i, .noeud:not(.is-ok) .rond--pct .ic { display: none; }
.noeud.is-ok .rond--pct .ic { color: var(--ok); animation: pop .28s var(--ressort); }
.noeud.is-goulet { border-color: var(--cours); box-shadow: 0 0 0 1px rgba(var(--cours-a), .25), 0 0 34px -10px rgba(var(--cours-a), .55); }
.noeud.is-goulet .rond--pct { --c: var(--cours); }
.noeud:not(.is-goulet) .etiq--goulet { display: none; }
.noeud.is-verrou { opacity: .72; }
.noeud.is-verrou .ic--tiret, .noeud:not(.is-verrou) .ic--verrou { display: none; }
.noeud.is-ouvert { border-color: var(--acc); box-shadow: 0 0 0 1px rgba(var(--acc-a), .25), 0 0 30px -10px rgba(var(--acc-a), .8); }
.noeud.is-ouvert .rond { border-color: var(--acc); color: var(--acc-clair); animation: pop .38s var(--ressort); }
@keyframes pop { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.16); opacity: 1; } 100% { transform: scale(1); } }

/* la carte « prochaine étape » */
.etape { display: grid; gap: 10px; padding: 16px 18px 18px; border-radius: var(--r-l); background: linear-gradient(180deg, #20203a, var(--carte)); border: 1.5px solid rgba(var(--acc-a), .45); border-left-width: 3px; box-shadow: 0 18px 50px -24px rgba(var(--acc-a), .7); }
.etape__sur { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-clair); }
.etape__titre { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; font-size: 1rem; font-weight: 800; color: var(--titre); line-height: 1.3; }
.etape__titre b { flex: none; font-size: 1.3rem; line-height: 1; } .etape__titre small { font-size: .7rem; color: var(--doux); }
.etape__info { font-size: .76rem; color: var(--doux); }
.etape__mot { display: flex; gap: 10px; font-size: .78rem; color: var(--txt); line-height: 1.45; }
.etape__mot b { color: var(--titre); } .etape__mot q { quotes: "«\00a0" "\00a0»"; }
.etape__btn { width: 100%; pointer-events: none; }
.carte-app { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r); background: var(--carte); border: 1.5px solid var(--bord); }
.carte-app > span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.carte-app b { font-size: .88rem; font-weight: 700; color: var(--titre); line-height: 1.3; }
.carte-app small { font-size: .7rem; color: var(--doux); }
.carte-app--but { border-left: 3px solid var(--acc); } .carte-app--but > .ic:first-child { color: var(--acc-clair); }
.carte-app--but small { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.carte-app .ic--fin { color: var(--doux); width: 16px; height: 16px; }
.carte-app--alerte, .carte-app--info { flex-wrap: wrap; position: relative; padding-right: 44px; }
.carte-app--alerte { border-color: rgba(var(--retard-a), .7); } .carte-app--info { border-color: rgba(var(--acc-a), .55); }
.carte-app--alerte .btn, .carte-app--info .btn { flex-basis: 100%; min-height: 38px; pointer-events: none; }
.pastille-n { position: absolute; right: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-style: normal; font-weight: 800; color: #fff; background: var(--retard); }
.pastille-n--bleu { background: var(--acc); }

/* l'écran de l'app (cadre des scènes) */
.ecran { border-radius: var(--r-xl); background: var(--fond-2); border: 1px solid var(--bord); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03), 0 0 120px -30px rgba(var(--violet-a), .45); padding: 18px; }
.ecran__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ecran__tete > b { font-size: 1.02rem; font-weight: 800; color: var(--titre); }
.ecran__onglets { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--carte); }
.ecran__onglets i { padding: 5px 11px; border-radius: 8px; font-size: .7rem; font-style: normal; font-weight: 700; color: var(--doux); }
.ecran__onglets i.is-on { background: var(--carte-2); color: var(--acc-clair); }
.ecran__ic { display: inline-flex; align-items: center; gap: 10px; color: var(--doux); }
.ecran__ligne { font-size: .78rem; color: var(--doux); margin-bottom: 8px; } .ecran__ligne b { color: var(--titre); }

/* ---------- le haut de page ---------- */
.hero { position: relative; padding: calc(var(--tete) + clamp(36px, 6vw, 84px)) 0 clamp(56px, 7vw, 100px); overflow: hidden; }
.hero__fond { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 78% 30%, rgba(var(--violet-a), .28), transparent 70%), radial-gradient(45% 45% at 12% 8%, rgba(var(--acc-a), .22), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 44px 100%;
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero__texte { display: grid; gap: 18px; justify-items: start; }
.pastille { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(var(--acc-a), .1); border: 1px solid rgba(var(--acc-a), .28); font-size: .78rem; font-weight: 600; color: var(--txt); transition: border-color var(--mo-court), background var(--mo-court); }
.pastille:hover { border-color: var(--acc); background: rgba(var(--acc-a), .16); }
.pastille__v { padding: 4px 10px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 700; } .pastille .ic { width: 14px; height: 14px; color: var(--doux); }
.hero__titre { font-size: clamp(2.6rem, 1.2rem + 5vw, 4.5rem); line-height: .98; font-weight: 900; letter-spacing: -.04em; color: var(--titre); }
.hero__titre > span { display: block; }
.hero__chapo { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 700; color: var(--titre); line-height: 1.3; }
.hero__lead { max-width: 52ch; color: var(--txt); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__preuves { display: grid; gap: 6px; font-size: .84rem; color: var(--doux); }
.hero__preuves li { display: flex; align-items: center; gap: 8px; } .hero__preuves .ic { color: var(--ok); width: 16px; height: 16px; }
.js .hero [data-vue]:nth-child(2) { --d: .06s; } .js .hero [data-vue]:nth-child(3) { --d: .12s; } .js .hero [data-vue]:nth-child(4) { --d: .2s; } .js .hero [data-vue]:nth-child(5) { --d: .26s; } .js .hero [data-vue]:nth-child(6) { --d: .32s; } .js .hero [data-vue]:nth-child(7) { --d: .38s; }

.hero__scene { position: relative; padding-bottom: 60px; }
.ecran--arbre { padding-bottom: 112px; }
.js .hero__scene[data-vue] { transform: translateY(40px) scale(.96); }
.arbre { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px clamp(34px, 5vw, 64px); margin-top: 16px; }
.arbre__col { display: grid; gap: 12px; align-content: start; position: relative; z-index: 1; }
.arbre__col--2 { padding-top: 0; } .arbre__col--2 .noeud:nth-of-type(2) { margin-top: 62px; } .arbre__col--2 .noeud:nth-of-type(3) { margin-top: 62px; }
.arbre__niv { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); min-height: 30px; }
.arbre__niv small { display: block; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--doux); opacity: .8; }
.arbre__fleches { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fl { fill: none; stroke: var(--bord-2); stroke-width: 1.6; stroke-dasharray: 5 5; marker-end: url(#pointe); transition: stroke var(--mo-ample); }
.fl.is-ok { stroke: var(--acc); stroke-dasharray: none; stroke-width: 2; }
.js .arbre .noeud { opacity: 0; transform: translateY(12px) scale(.97); }
.js .is-vu .arbre .noeud { opacity: 1; transform: none; transition: opacity var(--mo-ample) var(--ease-entree) calc(.25s + var(--i, 0) * .09s), transform var(--mo-ample) var(--ressort) calc(.25s + var(--i, 0) * .09s), border-color var(--mo-ample), box-shadow var(--mo-ample); }
.js .is-vu .arbre .noeud.is-verrou { opacity: .72; }
.js .arbre .fl { opacity: 0; } .js .is-vu .arbre .fl { opacity: 1; transition: opacity .5s 1s, stroke var(--mo-ample); }
.etape--flotte { position: absolute; right: -18px; bottom: 0; width: min(340px, 78%); z-index: 3; animation: flotte 6s ease-in-out infinite; }
.js .hero__scene .etape--flotte { opacity: 0; transform: translateY(30px); }
.js .hero__scene.is-vu .etape--flotte { opacity: 1; transform: none; transition: opacity var(--mo-lent) var(--ease-entree) 1.1s, transform var(--mo-lent) var(--ressort) 1.1s; }
@keyframes flotte { 50% { translate: 0 -8px; } }

/* ---------- la promesse ---------- */
.promesse { position: relative; height: 240vh; }
.promesse__colle { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.calme .promesse { height: auto; padding: clamp(64px, 9vw, 130px) 0; } .calme .promesse__colle { position: static; height: auto; }
.promesse__t { font-size: clamp(1.5rem, .9rem + 2.7vw, 2.9rem); line-height: 1.22; font-weight: 800; letter-spacing: -.02em; color: var(--titre); max-width: 24em; }
.promesse__t .mot { opacity: .14; }
.promesse__s { margin-top: 26px; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 600; color: var(--acc-clair); }

/* ---------- les onglets : le contrôle segmenté de l'app ---------- */
.onglets { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--carte); border: 1px solid var(--bord); margin-bottom: clamp(22px, 3vw, 36px); max-width: 100%; }
.onglets__b { padding: 11px 22px; border-radius: 10px; font-size: .9rem; font-weight: 700; color: var(--doux); white-space: nowrap; transition: color var(--mo-court), background var(--mo-normal), transform var(--mo-tap); }
.onglets__b:hover { color: var(--titre); } .onglets__b:active { transform: scale(.97); }
.onglets__b.is-on { background: var(--carte-2); color: var(--acc-clair); box-shadow: inset 0 0 0 1px rgba(var(--acc-a), .35); }
.onglets--s .onglets__b { padding: 9px 20px; }

/* ---------- pour qui ---------- */
.qui { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.qui.is-on { display: grid; animation: arrive var(--mo-ample) var(--ease-entree); }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } }
.qui__texte { display: grid; gap: 18px; justify-items: start; }
.coches { display: grid; gap: 12px; } .coches li { display: flex; gap: 12px; align-items: flex-start; color: var(--txt); } .coches .rond { margin-top: 1px; }
.qui__app { display: grid; gap: 12px; padding: clamp(16px, 2.4vw, 26px); border-radius: var(--r-xl); background: var(--fond-2); border: 1px solid var(--bord); box-shadow: 0 40px 100px -50px rgba(var(--violet-a), .8); }
.js [data-vue="pile"].is-vu > * { animation: arrive var(--mo-lent) var(--ease-entree) backwards; } .js [data-vue="pile"].is-vu > :nth-child(2) { animation-delay: .12s; } .js [data-vue="pile"].is-vu > :nth-child(3) { animation-delay: .24s; }
.effectif { display: grid; gap: 8px; }
.effectif__l { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--carte); border: 1.5px solid var(--bord); }
.effectif__l > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; } .effectif__l b { font-size: .88rem; color: var(--titre); } .effectif__l small { font-size: .72rem; color: var(--doux); } .effectif__l strong { color: var(--titre); font-weight: 700; }
.effectif__l.is-urgent { border-color: rgba(var(--retard-a), .7); }
.trait { display: block; height: 3px; border-radius: 2px; margin-top: 4px; background: linear-gradient(90deg, var(--acc) calc(var(--p) * 1%), var(--bord) 0); } .trait--or { background: linear-gradient(90deg, var(--cours) calc(var(--p) * 1%), var(--bord) 0); } .trait--rouge { background: linear-gradient(90deg, var(--retard) calc(var(--p) * 1%), var(--bord) 0); }
.age { font-size: .64rem; font-style: normal; font-weight: 800; padding: 3px 7px; border-radius: 6px; } .age--ok { background: rgba(var(--ok-a), .14); color: var(--ok); } .age--tard { background: rgba(var(--retard-a), .14); color: #ff7b6b; }

/* ---------- le moteur : section épinglée, le téléphone change d'écran au défilement ---------- */
.moteur { position: relative; height: 520vh; background: var(--fond-2); border-block: 1px solid rgba(255, 255, 255, .04); }
.moteur__colle { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.moteur__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: var(--tete); }
.moteur__texte { display: grid; gap: 18px; justify-items: start; }
.temps { display: grid; gap: 6px; width: 100%; margin-top: 8px; counter-reset: t; }
.temps__i { border-radius: var(--r-l); border: 1.5px solid transparent; padding: 4px 16px; transition: background var(--mo-ample), border-color var(--mo-ample); }
.temps__i button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 0; text-align: left; }
.temps__i i { font-style: normal; font-size: .74rem; font-weight: 800; letter-spacing: .08em; color: var(--doux); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--bord-2); flex: none; transition: all var(--mo-ample) var(--ressort); }
.temps__i b { font-size: 1.05rem; font-weight: 700; color: var(--doux); transition: color var(--mo-ample); }
.temps__i p { display: grid; grid-template-rows: 0fr; font-size: .92rem; color: var(--txt); padding-left: 44px; transition: grid-template-rows var(--mo-ample) var(--ease-doux), padding var(--mo-ample), opacity var(--mo-ample); opacity: 0; overflow: hidden; }
.temps__i.is-on { background: var(--carte); border-color: rgba(var(--acc-a), .4); }
.temps__i.is-on i { background: var(--grad); border-color: transparent; color: #fff; transform: scale(1.08); } .temps__i.is-on b { color: var(--titre); }
.temps__i.is-on p { grid-template-rows: 1fr; padding-bottom: 14px; opacity: 1; } .temps__i p { min-height: 0; }
.temps__i.is-fait i { border-color: var(--ok); color: var(--ok); }
.moteur__scene { display: grid; place-items: center; perspective: 1700px; }
.telephone { position: relative; width: min(340px, 100%); height: min(660px, calc(100svh - var(--tete) - 60px)); border-radius: 46px; background: #07070b; padding: 12px; box-shadow: 0 0 0 1.5px #32324a, 0 0 0 6px #101018, 0 50px 120px -40px #000, 0 0 140px -30px rgba(var(--violet-a), .6); display: flex; flex-direction: column; }
.telephone__ile { position: absolute; left: 50%; top: 22px; width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: #000; z-index: 4; }
.telephone__ecran { position: relative; flex: 1; border-radius: 36px 36px 0 0; background: var(--fond-2); overflow: hidden; }
.telephone__barre { display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 14px 14px; border-radius: 0 0 36px 36px; background: #15151f; border-top: 1px solid var(--bord); color: var(--doux); }
.telephone__barre span { display: grid; place-items: center; height: 34px; } .telephone__barre .is-on .ic { color: #fff; padding: 6px; width: 32px; height: 32px; border-radius: 10px; background: var(--grad); }
.vue { position: absolute; inset: 0; padding: 58px 16px 16px; display: grid; gap: 11px; align-content: start; opacity: 0; transform: translateX(26px) scale(.98); transition: opacity var(--mo-ample) var(--ease-doux), transform var(--mo-ample) var(--ease-doux); pointer-events: none; }
.vue.is-on { opacity: 1; transform: none; } .vue.is-passee { transform: translateX(-26px) scale(.98); }
.vue .ecran__tete { margin-bottom: 2px; }
.vue__note { font-size: .7rem; color: var(--doux); line-height: 1.4; } .vue__sur { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); margin-top: 4px; }
.vue__btn { pointer-events: none; }
.mini-arbre { display: grid; justify-items: stretch; } .mini-arbre .noeud { padding: 9px 12px; }
.lien { justify-self: start; margin-left: 31px; width: 0; height: 16px; border-left: 2px dashed var(--bord-2); } .lien--plein { border-left: 2px solid var(--acc); } .lien--pointille { opacity: .7; }
.vue[data-vue-app="0"] .noeud, .vue[data-vue-app="0"] .lien { opacity: 0; transform: translateY(10px); }
.vue[data-vue-app="0"].is-on .noeud, .vue[data-vue-app="0"].is-on .lien { opacity: 1; transform: none; transition: opacity var(--mo-ample) calc(var(--i) * .1s), transform var(--mo-ample) var(--ressort) calc(var(--i) * .1s); }
.vue[data-vue-app="0"].is-on .noeud.is-verrou { opacity: .72; }
.critere { display: grid; gap: 7px; } .critere p { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .critere b { font-size: .8rem; color: var(--titre); } .critere small { font-size: .62rem; font-weight: 700; color: var(--doux); }
.critere small.is-change { color: var(--acc-clair); }
.notes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.notes i { display: grid; place-items: center; height: 34px; border-radius: var(--r-s); background: var(--carte); border: 1.5px solid var(--bord); font-style: normal; font-size: .78rem; font-weight: 700; color: var(--doux); transition: all var(--mo-normal) var(--ressort); }
.notes i.is-avant { border-style: dashed; border-color: var(--bord-2); color: var(--titre); }
.notes i.is-on { background: rgba(var(--acc-a), .2); border-color: var(--acc); color: #fff; transform: scale(1.06); }
.bilan { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: var(--r); background: rgba(var(--ok-a), .08); border: 1.5px solid rgba(var(--ok-a), .45); } .bilan > span:last-child { display: grid; gap: 2px; } .bilan b { font-size: .78rem; color: var(--titre); } .bilan small { font-size: .68rem; color: var(--doux); }
.cible { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r-l); background: var(--carte); border: 1.5px solid var(--bord); } .cible > span:last-child { display: grid; gap: 2px; } .cible b { font-size: .92rem; color: var(--titre); } .cible small { font-size: .72rem; color: var(--doux); }
.goulet { display: grid; gap: 8px; justify-items: start; padding: 13px 14px; border-radius: var(--r-l); background: rgba(var(--cours-a), .07); border: 1.5px solid rgba(var(--cours-a), .5); } .goulet p { font-size: .74rem; line-height: 1.5; color: var(--txt); } .goulet b { color: var(--titre); }
.chemin { display: grid; border-radius: var(--r-l); background: var(--carte); border: 1.5px solid var(--bord); padding: 4px; }
.chemin li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 1.5px solid transparent; } .chemin b { flex: 1; font-size: .78rem; font-weight: 700; color: var(--titre); } .chemin i { font-style: normal; font-size: .76rem; font-weight: 800; color: var(--doux); }
.chemin .is-goulet { background: rgba(var(--cours-a), .09); border-color: rgba(var(--cours-a), .6); } .chemin .is-goulet i { color: var(--cours); }
.num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: var(--fond); background: var(--cours); } .num--bleu { background: var(--grad); color: #fff; }
.vue[data-vue-app="2"] .chemin li { opacity: 0; transform: translateX(-10px); } .vue[data-vue-app="2"].is-on .chemin li { opacity: 1; transform: none; transition: opacity var(--mo-ample) calc(.25s + var(--i) * .12s), transform var(--mo-ample) var(--ressort) calc(.25s + var(--i) * .12s); }
.vue[data-vue-app="2"] .goulet { opacity: 0; transform: scale(.94); } .vue[data-vue-app="2"].is-on .goulet { opacity: 1; transform: none; transition: opacity var(--mo-ample) .15s, transform var(--mo-ample) var(--ressort) .15s; }
.vue .jauge i { width: 0; } .vue.is-on .jauge i { width: calc(var(--p) * 1%); transition-delay: .3s; }
.vue .rond--xl { --p: 0; } .vue.is-on .rond--xl { --p: 50; transition-delay: .2s; }

/* ---------- les fonctionnalités ---------- */
.rang { display: flex; align-items: center; gap: 16px; margin: clamp(30px, 4vw, 52px) 0 18px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-clair); }
.rang::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bord-2), transparent); }
.rang:first-of-type { margin-top: 0; }
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fonction { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-l); background: var(--carte); border: 1.5px solid var(--bord); transition: border-color var(--mo-normal), transform var(--mo-normal) var(--ressort-pression), box-shadow var(--mo-normal); }
.fonction:hover { border-color: rgba(var(--acc-a), .6); transform: translateY(-3px); box-shadow: 0 22px 50px -30px rgba(var(--acc-a), .9); }
.fonction__ic { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: rgba(var(--acc-a), .14); color: var(--acc-clair); }
.fonction h4 { font-size: 1.02rem; font-weight: 700; color: var(--titre); } .fonction p { font-size: .9rem; color: var(--txt); } .fonction p b { color: var(--titre); }
.grille .fonction:nth-child(3n+2) { --d: .07s; } .grille .fonction:nth-child(3n) { --d: .14s; }
.rythme { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 4px; }
.rythme i { height: 26px; border-radius: 7px; background: var(--fond-2); border: 1.5px solid var(--bord); } .rythme i.is-on { background: var(--grad); border-color: transparent; } .rythme i.is-jour { border: 2px solid var(--violet); }
.barres { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: 4px; } .barres i { flex: 1; height: calc(var(--h) * 1%); border-radius: 4px 4px 2px 2px; background: var(--grad); opacity: .85; transform-origin: 50% 100%; }
.js .fonction .barres i { transform: scaleY(0); } .js .fonction.is-vu .barres i { transform: none; transition: transform var(--mo-lent) var(--ressort) calc(.2s + var(--i, 0) * .04s); }
.notes--demo { margin-top: 4px; }

/* ---------- l'interface : dix écrans à faire glisser ---------- */
.defile { display: flex; gap: clamp(18px, 3vw, 36px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(20px, calc((100vw - var(--large)) / 2)) 26px; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.defile::-webkit-scrollbar { display: none; } .defile.is-tire { cursor: grabbing; scroll-snap-type: none; }
.plan { flex: none; width: clamp(220px, 24vw, 280px); scroll-snap-align: center; display: grid; gap: 14px; }
.plan img { width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); transition: transform var(--mo-ample) var(--ressort-pression); user-select: none; -webkit-user-drag: none; }
.plan:hover img { transform: translateY(-6px); }
.plan figcaption { display: grid; gap: 4px; } .plan i { font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: var(--acc-clair); } .plan b { font-size: 1rem; color: var(--titre); } .plan span { font-size: .84rem; color: var(--doux); }
.defile__pied .jauge { max-width: 260px; }

/* ---------- les tarifs ---------- */
.bascule { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 26px; } .bascule .onglets { margin: 0; } .bascule__note { font-size: .88rem; font-weight: 600; color: var(--ok); }
.offres { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.offre { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 18px; border-radius: var(--r-l); background: var(--carte); border: 1.5px solid var(--bord); }
.offre--fort { border-color: var(--acc); background: var(--carte-fort); box-shadow: 0 30px 70px -40px rgba(var(--acc-a), 1); }
.offre__essai { position: absolute; top: -11px; left: 18px; }
.offre h3 { font-size: 1.05rem; font-weight: 800; color: var(--titre); }
.offre__prix { display: flex; align-items: baseline; gap: 4px; color: var(--titre); } .offre__prix b { font-size: 2.3rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; } .offre__prix span { font-size: 1.2rem; font-weight: 800; } .offre__prix small { font-size: .74rem; color: var(--doux); margin-left: 4px; }
.offre__but { font-size: .84rem; font-weight: 600; color: var(--acc-clair); min-height: 2.6em; }
.offre ul { display: grid; gap: 9px; flex: 1; align-content: start; font-size: .82rem; }
.offre li { position: relative; padding-left: 22px; line-height: 1.45; } .offre li::before { content: ""; position: absolute; left: 0; top: .32em; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ok); background: radial-gradient(circle, var(--ok) 0 2.6px, transparent 3.2px); }
.offre li.is-plus { color: var(--titre); font-weight: 700; } .offre li.is-plus::before { border-color: var(--acc); background: radial-gradient(circle, var(--acc) 0 2.6px, transparent 3.2px); }
.offre .btn { width: 100%; }
.paiement { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: .84rem; color: var(--doux); } .paiement .ic { color: var(--ok); } .paiement b { color: var(--titre); }

/* ---------- notre histoire ---------- */
.histoire { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; } .histoire .tetiere { margin: 0; position: sticky; top: calc(var(--tete) + 30px); }
.histoire__texte { display: grid; gap: 18px; font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); } .histoire__texte p:first-child { font-size: 1.25em; font-weight: 700; color: var(--titre); line-height: 1.4; }
.histoire__signe { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--bord); } .histoire__signe span:last-child { display: grid; } .histoire__signe b { color: var(--titre); font-size: 1rem; } .histoire__signe small { font-size: .82rem; color: var(--doux); }

/* ---------- la FAQ ---------- */
.onglets--4 { display: grid; width: 100%; }
.faq { display: none; gap: 10px; } .faq.is-on { display: grid; animation: arrive var(--mo-ample) var(--ease-entree); }
.plie { border-radius: var(--r-l); background: var(--carte); border: 1.5px solid var(--bord); transition: border-color var(--mo-normal); }
.plie[open] { border-color: rgba(var(--acc-a), .5); }
.plie summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 700; color: var(--titre); cursor: pointer; list-style: none; }
.plie summary::-webkit-details-marker { display: none; }
.plie summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.2px solid var(--acc-clair); border-bottom: 2.2px solid var(--acc-clair); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--mo-normal) var(--ressort); }
.plie[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.plie__in { padding: 0 20px 20px; color: var(--txt); font-size: .96rem; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.contact__texte { display: grid; gap: 16px; justify-items: start; } .contact__fils { display: grid; gap: 12px; } .contact__accroche { color: var(--txt); margin-bottom: 6px; }
.fil { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-l); background: var(--carte); border: 1.5px solid var(--bord); transition: border-color var(--mo-normal), transform var(--mo-normal) var(--ressort-pression); }
.fil:hover { border-color: var(--acc); transform: translateY(-2px); } .fil > span:nth-child(2) { display: grid; flex: 1; } .fil b { color: var(--titre); } .fil small { color: var(--doux); font-size: .82rem; }
.fil__ic { width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center; background: var(--grad); color: #fff; } .fil em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--acc-clair); }

/* ---------- l'appel final ---------- */
.appel { position: relative; padding: clamp(80px, 10vw, 150px) 0; text-align: center; overflow: hidden; background: radial-gradient(60% 90% at 50% 100%, rgba(var(--violet-a), .4), transparent 70%), radial-gradient(40% 60% at 50% 0%, rgba(var(--acc-a), .2), transparent 70%), var(--fond-2); border-top: 1px solid rgba(255, 255, 255, .05); }
.appel__in { display: grid; gap: 18px; justify-items: center; } .appel .lead { margin-inline: auto; } .appel .hero__actions { justify-content: center; }

/* ---------- le pied ---------- */
.pied { background: var(--fond); border-top: 1px solid rgba(255, 255, 255, .06); padding: 54px 0 26px; font-size: .9rem; }
.pied__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.pied__marque { display: grid; gap: 12px; justify-items: start; align-content: start; } .pied__marque img { height: 30px; width: auto; } .pied__marque p { color: var(--doux); }
.pied__reseaux { display: flex; gap: 8px; } .pied__reseaux a { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: var(--carte); border: 1px solid var(--bord); color: var(--txt); transition: color var(--mo-court), border-color var(--mo-court); } .pied__reseaux a:hover { color: #fff; border-color: var(--acc); }
.pied__col { display: grid; gap: 10px; align-content: start; justify-items: start; } .pied__col a:not(.btn) { color: var(--txt); transition: color var(--mo-court); } .pied__col a:not(.btn):hover { color: var(--titre); }
.pied__app .btn { width: 100%; } .pied__bas { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--bord); color: var(--doux); font-size: .8rem; }

/* ---------- la barre du bas (téléphone) : celle de l'app ---------- */
.barre { display: none; }

/* ---------- la page 404 ---------- */
.perdu { min-height: 86vh; display: grid; place-items: center; padding: calc(var(--tete) + 40px) 0 80px; text-align: center; }
.perdu__in { display: grid; gap: 20px; justify-items: center; } .perdu__noeud { opacity: 1 !important; width: min(280px, 100%); text-align: left; } .perdu .lead { margin-inline: auto; } .perdu .hero__actions { justify-content: center; }

/* ==========================================================================
   Écrans moyens et téléphones
   ========================================================================== */
@media (max-width: 1180px) {
  .offres { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(250px, 78vw); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 14px 20px 18px; scrollbar-width: none; }
  .offres::-webkit-scrollbar { display: none; } .offre { scroll-snap-align: center; }
}
@media (min-width: 700px) and (max-width: 1180px) { .offres { grid-auto-columns: minmax(250px, 300px); } }
@media (max-width: 980px) {
  .nav, .tete__connexion { display: none; }
  .hero__in, .qui, .histoire, .contact { grid-template-columns: minmax(0, 1fr); }
  .hero__scene { max-width: 560px; margin-inline: auto; width: 100%; }
  .histoire .tetiere { position: static; }
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grille .fonction { --d: 0s; }
  .pied__in { grid-template-columns: 1fr 1fr; }
  /* le moteur : le texte en haut (une seule étape visible), le téléphone dessous */
  .moteur__colle { align-items: stretch; }
  .moteur__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding-top: calc(var(--tete) + 14px); padding-bottom: calc(var(--barre) + 14px); height: 100%; align-items: start; }
  .moteur__texte { gap: 8px; } .moteur__texte .titre { font-size: 1.35rem; } .moteur__texte .sur { display: none; }
  .temps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
  .temps__i { padding: 0; border: 0; background: none !important; display: contents; }
  .temps__i button { justify-content: center; padding: 6px 0; border-radius: 999px; border: 1.5px solid var(--bord); grid-row: 1; } .temps__i button b { display: none; } .temps__i button i { border: 0; width: auto; height: auto; transform: none !important; background: none !important; }
  .temps__i.is-on button { background: var(--grad); border-color: transparent; } .temps__i.is-on button i { color: #fff; }
  .temps__i p { grid-column: 1 / -1; grid-row: 2; padding: 0 !important; display: none; font-size: .86rem; } .temps__i.is-on p { display: block; opacity: 1; }
  .temps__i p::before { content: attr(data-titre); display: block; font-weight: 800; color: var(--titre); font-size: 1rem; margin-bottom: 2px; }
  .moteur__scene { min-height: 0; height: 100%; align-items: start; }
  .telephone { height: 100%; max-height: 600px; width: min(310px, 100%); }
}
@media (max-width: 760px) {
  :root { --tete: 60px; --barre: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .marque img { height: 26px; } .tete__fin .btn--plein { min-height: 38px; padding: 8px 14px; font-size: .84rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .arbre { gap: 10px 26px; } .noeud { padding: 9px 10px; gap: 9px; } .noeud__t b { font-size: .76rem; } .rond { width: 32px; height: 32px; font-size: .7rem; } .rond .ic { width: 17px; height: 17px; }
  .ecran { padding: 14px; } .ecran__onglets { display: none; }
  .etape--flotte { position: relative; right: auto; width: 100%; margin-top: 12px; animation: none; } .hero__scene { padding-bottom: 0; }
  .grille { grid-template-columns: minmax(0, 1fr); }
  .onglets { display: grid; width: 100%; } .onglets__b { padding: 11px 8px; font-size: .84rem; } .onglets--4 { grid-template-columns: 1fr 1fr; grid-auto-flow: row; } .onglets--s { width: auto; display: inline-grid; }
  .pied__in { grid-template-columns: 1fr; } .pied { padding-bottom: 20px; }
  .barre { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--barre); padding: 8px 6px env(safe-area-inset-bottom, 0px); background: rgba(21, 21, 31, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--bord); }
  .barre__lien { display: grid; justify-items: center; align-content: start; gap: 3px; font-size: .62rem; font-weight: 600; color: var(--doux); }
  .barre__ic { width: 36px; height: 32px; border-radius: 10px; display: grid; place-items: center; transition: transform var(--mo-tap), background var(--mo-normal); } .barre__ic .ic { width: 20px; height: 20px; }
  .barre__lien:active .barre__ic { transform: scale(.86); }
  .barre__lien.is-on { color: var(--titre); } .barre__lien.is-on .barre__ic { background: var(--grad); color: #fff; }
  .barre__lien--app { color: var(--acc-clair); } .barre__lien--app .barre__ic { box-shadow: inset 0 0 0 1.5px rgba(var(--acc-a), .6); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } }

/* l'évaluation : « inchangé » devient « modifié » quand la note bouge */
.critere__etat .e-apres { display: none; color: var(--acc-clair); }
.critere.is-change .e-avant { display: none; } .critere.is-change .e-apres { display: inline; }
/* l'arbre du haut de page repart du début : un souffle, pas un saut */
.arbre.is-retour { opacity: .25; transition: opacity .35s; } .arbre { transition: opacity .5s; }
@media (max-width: 760px) { .ecran--arbre { padding-bottom: 14px; } }
/* le téléphone du « moteur » sur petit écran : tout doit tenir dans la hauteur disponible */
@media (max-width: 980px) { .vue { gap: 8px; padding: 50px 14px 12px; } .vue__note { display: none; } .notes i { height: 30px; } .vue .etape { padding: 12px 14px 14px; gap: 8px; } .mini-arbre .noeud { padding: 7px 10px; } .lien { height: 10px; } }
.vue[data-vue-app="2"] { gap: 9px; } .vue[data-vue-app="2"] .goulet { padding: 10px 12px; gap: 6px; } .vue[data-vue-app="2"] .cible { padding: 11px 12px; } .vue[data-vue-app="2"] .chemin li { padding: 7px 9px; }

/* ==========================================================================
   Les pages de texte (conditions, confidentialité, cookies, journal des versions)
   Le texte vient du dépôt de l'application avec ses propres classes (st-privacy, st-log) : elles sont habillées ici,
   aux couleurs sombres du site. Aucune feuille de style n'est reprise du texte.
   ========================================================================== */
.texte__tete { position: relative; padding: calc(var(--tete) + clamp(36px, 6vw, 72px)) 0 clamp(26px, 4vw, 44px); background: radial-gradient(60% 120% at 80% 0%, rgba(var(--violet-a), .22), transparent 70%), var(--fond-2); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.texte__tete .conteneur { display: grid; gap: 14px; justify-items: start; }
.ariane { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--doux); } .ariane a:hover { color: var(--titre); } .ariane .ic { width: 12px; height: 12px; }
.doc { padding: clamp(32px, 5vw, 60px) 0 clamp(64px, 8vw, 110px); font-size: .98rem; line-height: 1.75; color: var(--txt); }
.doc a { color: var(--acc-clair); text-decoration: underline; text-decoration-color: rgba(var(--acc-a), .45); text-underline-offset: 3px; } .doc a:hover { text-decoration-color: currentColor; }
.doc strong { color: var(--titre); font-weight: 600; }
.doc .st-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: .84rem; color: var(--doux); margin-bottom: 26px; }
.doc .st-intro { font-size: 1.04rem; color: var(--txt); margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--bord); }
.doc .st-section { margin-bottom: 40px; } .doc .st-section p { margin-bottom: 12px; } .doc .st-section p:last-child { margin-bottom: 0; }
.doc h2 { font-size: 1.16rem; font-weight: 800; color: var(--titre); letter-spacing: -.01em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bord); scroll-margin-top: calc(var(--tete) + 16px); }
.doc .st-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .88rem; display: block; overflow-x: auto; }
.doc .st-table th { text-align: left; padding: 10px 14px; background: var(--carte); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); border-bottom: 1px solid var(--bord); white-space: nowrap; }
.doc .st-table td { padding: 11px 14px; border-bottom: 1px solid var(--bord); vertical-align: top; line-height: 1.6; min-width: 150px; } .doc .st-table tr:last-child td { border-bottom: 0; }
.doc .st-notice { background: rgba(var(--acc-a), .09); border-left: 3px solid var(--acc); padding: 14px 18px; margin: 16px 0; font-size: .9rem; border-radius: 0 var(--r) var(--r) 0; }
.doc .st-rights, .doc .st-log ul { display: grid; margin: 14px 0; }
.doc .st-rights li, .doc .st-log li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid rgba(255, 255, 255, .05); } .doc .st-rights li:last-child, .doc .st-log li:last-child { border-bottom: 0; }
.doc .st-rights li::before, .doc .st-log li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 8px; height: 2px; border-radius: 2px; background: var(--acc); }
.doc .btn { text-decoration: none; }
/* le journal des versions : un jour = une entrée, comme une frise */
.doc .st-release { position: relative; margin: 0 0 44px; padding: 22px 22px 22px 26px; border-radius: var(--r-l); background: var(--carte); border: 1.5px solid var(--bord); scroll-margin-top: calc(var(--tete) + 16px); }
.doc .st-release::before { content: ""; position: absolute; left: -1.5px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--grad); }
.doc .st-release-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; border: 0; padding: 0; margin: 0 0 8px; }
.doc .st-release-v { font-size: 1.3rem; font-weight: 800; color: var(--titre); letter-spacing: -.02em; } .doc .st-release-date { font-size: .84rem; font-weight: 500; color: var(--doux); }
.doc .st-release-tag { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--acc-clair); background: rgba(var(--acc-a), .14); padding: 4px 10px; border-radius: 999px; }
.doc .st-release-sum { color: var(--txt); margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--bord); }
.doc h3.st-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 1.02rem; font-weight: 800; color: var(--titre); margin: 30px 0 8px; padding-top: 22px; border-top: 1px solid var(--bord); }
.doc .st-release-head + h3.st-sub { margin-top: 14px; padding-top: 0; border-top: 0; } .doc h3.st-sub + .st-release-sum { border-bottom: 0; padding-bottom: 0; margin-bottom: 4px; }
.doc h4 { font-size: .72rem; font-weight: 800; color: var(--acc-clair); text-transform: uppercase; letter-spacing: .1em; margin: 22px 0 6px; }
.doc .st-foot { font-size: .86rem; color: var(--doux); margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--bord); }
.doc__demo, .formulaire__demo { display: none; } .demo .doc__demo { display: block; }

/* ---------- le formulaire de contact : un fil de la messagerie de l'app ---------- */
.contact { align-items: start; }
.formulaire { display: grid; gap: 14px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r-xl); background: var(--fond-2); border: 1px solid var(--bord); box-shadow: 0 40px 100px -50px rgba(var(--violet-a), .8); }
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bulle { display: flex; align-items: flex-end; gap: 10px; font-size: .9rem; } .bulle > span:last-child { padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: var(--carte); border: 1px solid var(--bord); color: var(--titre); max-width: 34ch; }
.champ { display: grid; gap: 6px; } .champ > span { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.champ input, .champ textarea { width: 100%; padding: 13px 14px; border-radius: var(--r); background: var(--champ); border: 1.5px solid transparent; color: var(--titre); font: inherit; transition: border-color var(--mo-court), background var(--mo-court), box-shadow var(--mo-court); }
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:hover, .champ textarea:hover { background: var(--champ-survol); }
.champ input:focus, .champ textarea:focus { outline: 0; border-color: var(--acc); box-shadow: 0 0 0 4px rgba(var(--acc-a), .2); }
.formulaire .btn { justify-self: start; } .formulaire .btn[disabled] { opacity: .6; pointer-events: none; }
.formulaire__etat { min-height: 1.5em; font-size: .9rem; color: var(--doux); } .formulaire__etat.is-ok { color: var(--ok); font-weight: 600; } .formulaire__etat.is-erreur { color: #ff8a7a; font-weight: 600; }
.contact__fils { margin-top: 6px; }

/* ---------- le pied : « gérer mes cookies » est un bouton qui ressemble aux liens ---------- */
.pied__lien { color: var(--txt); text-align: left; transition: color var(--mo-court); } .pied__lien:hover { color: var(--titre); }

/* ---------- le bandeau de cookies : une carte de l'app, en bas, jamais plein écran ---------- */
.cookies { position: fixed; z-index: 80; left: 16px; right: 16px; bottom: calc(var(--barre) + 16px); max-width: 720px; margin-inline: auto; display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: var(--r-l); background: rgba(28, 28, 40, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1.5px solid rgba(var(--acc-a), .45); box-shadow: 0 30px 80px -20px #000; animation: arrive var(--mo-ample) var(--ease-entree); }
.cookies[hidden] { display: none; }
.cookies__txt { flex: 1; font-size: .84rem; line-height: 1.5; color: var(--txt); } .cookies__titre { font-size: .95rem; font-weight: 800; color: var(--titre); margin-bottom: 2px; } .cookies__txt a { color: var(--acc-clair); text-decoration: underline; text-underline-offset: 3px; }
.cookies__choix { display: flex; gap: 8px; flex: none; } .cookies__choix .btn { min-height: 42px; }

/* ---------- la proposition de langue ---------- */
.avis { position: fixed; z-index: 70; right: 16px; top: calc(var(--tete) + 12px); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 999px; background: rgba(28, 28, 40, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1.5px solid rgba(var(--acc-a), .45); box-shadow: 0 20px 50px -20px #000; font-size: .86rem; color: var(--titre); animation: arrive var(--mo-ample) var(--ease-entree) .6s backwards; }
.avis[hidden], .avis [hidden] { display: none; } .avis .btn { min-height: 36px; padding: 6px 14px; font-size: .82rem; border-radius: 999px; }
.avis__non { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--doux); } .avis__non:hover { color: var(--titre); background: rgba(255, 255, 255, .08); } .avis__non .ic { width: 16px; height: 16px; }

@media (max-width: 980px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .cookies { flex-direction: column; align-items: stretch; gap: 12px; left: 10px; right: 10px; bottom: calc(var(--barre) + 10px); } .cookies__choix .btn { flex: 1; }
  .avis { left: 10px; right: 10px; border-radius: var(--r-l); justify-content: space-between; } .avis p { flex: 1; }
  .doc .st-release { padding: 18px 16px 18px 20px; }
}

/* ==========================================================================
   LE MOUVEMENT (02/10/2026) — profondeur, scènes épinglées, typographie cinétique. Piloté par assets/js/main.js.
   ========================================================================== */

/* ---------- le ciel du haut de page (toile peinte par le script) ---------- */
.hero__fond canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- le titre : lettre par lettre, chacune pivotant sur son axe bas ---------- */
.js .hero__titre[data-vue] { opacity: 1; transform: none; }
.hero__titre { perspective: 900px; }
.hero__titre .mot-l { display: inline-block; white-space: nowrap; }
.hero__titre.is-decoupe .lettre { display: inline-block; transform-origin: 50% 100%; opacity: 0; transform: rotateX(-92deg) translateY(.18em); animation: lettre .72s var(--ease-entree) forwards; animation-delay: calc(.12s + var(--n) * 22ms); }
.hero__titre.is-decoupe .marque-t .lettre { color: #7f90f6; }          /* le dégradé du parent ne traverse pas une lettre en cours de rotation : couleur pleine pendant l'entrée */
.hero__titre.is-pose .lettre { animation: none; opacity: 1; transform: none; color: inherit; }
@keyframes lettre { to { opacity: 1; transform: none; } }

/* ---------- la carte de l'arbre : inclinée, elle suit le pointeur ; la carte « prochaine étape » flotte devant ---------- */
.hero__scene { perspective: 1500px; }
.ecran--arbre { transform: rotateY(-7deg) rotateX(3deg); transform-style: preserve-3d; will-change: transform; }
.etape--flotte { will-change: transform; }
.calme .ecran--arbre { transform: none; }

/* ---------- la promesse : une phrase géante, épinglée, qui s'allume mot après mot ---------- */
.promesse__t { font-size: clamp(1.7rem, 1rem + 3.3vw, 3.5rem); line-height: 1.16; }
.js .promesse__s { opacity: 0; } .calme .promesse__s { opacity: 1; }

/* ---------- le téléphone du moteur : il vient à vous ---------- */
.telephone { will-change: transform; transform-style: preserve-3d; }
.moteur__texte { will-change: transform, opacity; }

/* ---------- le bandeau de typographie géante ---------- */
.bandeau { overflow: hidden; padding: clamp(34px, 5vw, 74px) 0 clamp(20px, 3vw, 44px); background: var(--fond-2); }
.bandeau__piste { display: inline-flex; align-items: center; gap: .32em; white-space: nowrap; font-size: clamp(4.4rem, 13vw, 12rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; will-change: transform; transform-origin: 0 50%; }
.bandeau__piste span { color: transparent; -webkit-text-stroke: 1.5px rgba(var(--acc-a), .55); padding-right: .04em; }
.bandeau__piste span:nth-of-type(5n+1) { color: var(--titre); -webkit-text-stroke: 0; }
.bandeau__piste span:nth-of-type(5n+4) { background: var(--grad-texte); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
.bandeau__piste i { flex: none; width: .2em; height: .2em; border-radius: 50%; background: var(--grad); }

/* ---------- les cartes : elles arrivent de la profondeur, puis basculent vers le pointeur avec un reflet ---------- */
.js .grille [data-vue]:not(.is-vu), .js .offres [data-vue]:not(.is-vu) { transform: perspective(900px) translate3d(0, 36px, -240px) rotateX(16deg); transform-origin: 50% 0; }
[data-bascule] { position: relative; }
[data-bascule]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--rx, 50%) var(--ry, 50%), rgba(255, 255, 255, .13), transparent 62%); transition: opacity var(--mo-normal); }
[data-bascule].is-survol::after { opacity: 1; }
[data-bascule].is-survol { transition-duration: .09s, var(--mo-normal), var(--mo-normal); will-change: transform; }
.btn[data-aimant] { transition: transform .4s var(--ressort), box-shadow var(--mo-court), background var(--mo-court), border-color var(--mo-court); }
.btn[data-aimant].is-aimante { transition-duration: .09s, var(--mo-court), var(--mo-court), var(--mo-court); }

/* ---------- l'interface, épinglée (grand écran) : l'éventail se redresse, puis les écrans défilent à l'horizontale ---------- */
.galerie--epingle { padding: 0; }
.galerie--epingle .galerie__colle { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--tete); }
.galerie--epingle .tetiere { margin-bottom: clamp(14px, 2.4vh, 30px); }
.galerie--epingle .defile { overflow: visible; scroll-snap-type: none; cursor: default; will-change: transform; padding-top: 30px; padding-bottom: 10px; }
.galerie--epingle .plan { width: min(250px, calc((100vh - 480px) / 1.99)); min-width: 150px; transform-origin: 50% 110%; will-change: transform; }
.galerie--epingle .plan:hover img { transform: none; }
.plan figcaption { transition: opacity var(--mo-ample); } .galerie--epingle .plan.is-plie figcaption { opacity: 0; }
.galerie--epingle .defile__pied { margin-top: 6px; }

/* ==========================================================================
   LES DEUX TONALITÉS — la page bascule du sombre au clair (les deux modes de l'app) au fil du défilement, puis revient
   au sombre pour l'appel final. Aucun composant ne sait dans quelle tonalité il est : seules les variables changent.
   Ajouter une section demain = lui donner data-ton, rien d'autre.
   ========================================================================== */
body[data-ton="clair"] {
  --fond: #F7F7FF; --fond-2: #EEEFFB; --carte: #ffffff; --carte-2: #eef2ff; --champ: #F0F0F8; --champ-survol: #e7e7f4; --bord: #E2E2EE; --bord-2: #c9c9de;
  --titre: #1b1b2d; --txt: #50506a; --doux: #6b6b84; --acc-clair: #4759d2; --ok: #1f9d57; --ok-a: 31, 157, 87;
  --verre: rgba(247, 247, 255, .8); --lisere: rgba(20, 20, 70, .09); --survol: rgba(20, 20, 70, .06);
  --grad-texte: linear-gradient(120deg, #5E73EB 0%, #7C3AED 100%); --carte-fort: linear-gradient(180deg, #eceeff, #ffffff 62%);
}
/* la bascule : une demi-seconde, pas plus — toute interpolation entre le noir et le blanc passe par le gris */
body, .tete, .section, .appel, .pied, .bandeau { transition: background-color .5s var(--ease-doux), border-color .5s var(--ease-doux), color .5s var(--ease-doux); }
main :where(h2, h3, h4, p, li, span, b, small, summary, label, em, strong), .tete :where(a), .pied :where(a, p, button) { transition: color .5s var(--ease-doux); }
.offre, .plie, .formulaire, .fil, .onglets, .fonction { transition: background-color .5s var(--ease-doux), border-color .5s var(--ease-doux), transform var(--mo-normal) var(--ressort-pression), box-shadow var(--mo-normal); }
.logo-clair { display: none; } body[data-ton="clair"] .logo-sombre { display: none; } body[data-ton="clair"] .logo-clair { display: block; }
body[data-ton="clair"] .offre, body[data-ton="clair"] .plie, body[data-ton="clair"] .fil { box-shadow: 0 10px 30px -18px rgba(40, 40, 110, .35); }
body[data-ton="clair"] .offre--fort { box-shadow: 0 30px 70px -36px rgba(var(--acc-a), .9); }
body[data-ton="clair"] [data-bascule]::after { background: radial-gradient(260px circle at var(--rx, 50%) var(--ry, 50%), rgba(var(--acc-a), .1), transparent 62%); }
body[data-ton="clair"] .appel { background: radial-gradient(60% 90% at 50% 100%, rgba(var(--violet-a), .16), transparent 70%), var(--fond-2); }
body[data-ton="clair"] .formulaire__etat.is-erreur { color: #c73a2c; }
/* ce qui reste sombre quelle que soit la tonalité : les bandeaux posés par-dessus la page et la barre du bas (celle de l'app) */
.cookies, .avis, .barre { --fond: #0c0c12; --fond-2: #111118; --carte: #1c1c28; --carte-2: #24243a; --champ: #2c2c40; --bord: #2a2a3c; --bord-2: #3a3a52; --titre: #eeeef5; --txt: #cacae0; --doux: #a8a8c8; --acc-clair: #8b9cf6; --survol: rgba(255, 255, 255, .06); color: var(--txt); }

@media (max-width: 980px) {
  .ecran--arbre { transform: none; }
  .promesse { height: 200vh; }
}
@media (prefers-reduced-motion: reduce) { .promesse { height: auto; padding: clamp(64px, 9vw, 130px) 0; } .promesse__colle { position: static; height: auto; } .promesse__s { opacity: 1 !important; } }
/* le fond « aurore » peint toute la zone : les halos et le quadrillage de repli s'effacent */
.fond-aurore .hero__fond { background: none; }
.hero__fond canvas { display: block; }
/* la carte de l arbre : un verre sombre, le fond anime transparait a travers */
.fond-aurore .ecran--arbre, .fond-trames .ecran--arbre { background: rgba(17, 17, 24, .78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }

/* ==========================================================================
   LES SCÈNES EN PHOTOS (02/10/2026, deuxième écriture) — pilotées par assets/js/main.js
   ========================================================================== */

/* ---------- L'OUVERTURE : photo plein écran → téléphone → quatre temps. Une seule scène épinglée. ---------- */
.ouverture { position: relative; height: 640vh; background: var(--fond); }
.ouv { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #08080d; }
.ouv__ciel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ouv__photos { position: absolute; inset: 0; background: #08080d; will-change: clip-path, opacity; }
.sport { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; clip-path: inset(0 0 0 100%); }
.sport.is-on { clip-path: inset(0); z-index: 1; }
.sport.is-entre { clip-path: inset(0); z-index: 2; transition: clip-path 1.15s cubic-bezier(.7, 0, .2, 1); }
.sport picture, .sport img { display: block; width: 100%; height: 100%; }
.sport img { object-fit: cover; transform-origin: 60% 55%; }
.sport.is-on img, .sport.is-entre img { animation: zoom-lent 9s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes zoom-lent { from { transform: scale(1.09); } to { transform: scale(1); } }
.sport--nb img { filter: sepia(1) hue-rotate(188deg) saturate(1.5) brightness(.82) contrast(1.05); }      /* la photo en noir et blanc prend le bleu de la marque */
.sport::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 8, 13, .62) 0%, rgba(8, 8, 13, 0) 20%, rgba(8, 8, 13, 0) 60%, rgba(8, 8, 13, .88) 100%), linear-gradient(120deg, rgba(var(--acc-a), .2), rgba(var(--violet-a), .16)); }
.ouv__voile { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(90deg, rgba(8, 8, 13, .95) 0%, rgba(8, 8, 13, .84) 26%, rgba(8, 8, 13, .4) 50%, rgba(8, 8, 13, 0) 68%); }

/* les repères : un point sur le corps de l'athlète, un trait, la carte de la compétence */
.calque { position: absolute; inset: 0; z-index: 3; transition: opacity var(--mo-normal); }
.ouv.is-morph .calque { opacity: 0; }
.repere { position: absolute; left: var(--u); top: var(--v); width: 0; height: 0; }
.repere__point { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--acc-clair); box-shadow: 0 0 0 4px rgba(var(--acc-a), .3), 0 0 22px rgba(var(--acc-a), 1); transform: scale(0); }
.repere__point::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid currentColor; color: rgba(255, 255, 255, .7); animation: onde 2.6s ease-out infinite; animation-delay: calc(var(--i) * .4s); }
.repere__point.is-ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(var(--ok-a), .3), 0 0 22px rgba(var(--ok-a), 1); }
.repere__point.is-goulet { background: var(--cours); box-shadow: 0 0 0 4px rgba(var(--cours-a), .3), 0 0 26px rgba(var(--cours-a), 1); }
.repere__point.is-verrou { background: #b9b9d2; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
@keyframes onde { from { transform: scale(.55); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.repere__trait { position: absolute; left: 0; top: -.75px; width: var(--l); height: 1.5px; transform-origin: 0 50%; transform: rotate(var(--a)) scaleX(0); background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .45)); }
.repere__carte { position: absolute; left: calc(cos(var(--a)) * var(--l)); top: calc(sin(var(--a)) * var(--l)); transform: translate(0, -50%) scale(.82); transform-origin: 0 50%; opacity: 0; white-space: nowrap; min-width: 168px;
  background: rgba(17, 17, 26, .74); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); }
.repere--g .repere__carte { transform: translate(-100%, -50%) scale(.82); transform-origin: 100% 50%; }
.sport.is-on .repere__point { transform: scale(1); transition: transform .5s var(--ressort) calc(.25s + var(--i) * .18s); }
.sport.is-on .repere__trait { transform: rotate(var(--a)) scaleX(1); transition: transform .55s var(--ease-entree) calc(.45s + var(--i) * .18s); }
.sport.is-on .repere__carte { opacity: 1; transform: translate(0, -50%) scale(1); transition: opacity .35s calc(.75s + var(--i) * .18s), transform .55s var(--ressort) calc(.75s + var(--i) * .18s); }
.sport.is-on .repere--g .repere__carte { transform: translate(-100%, -50%) scale(1); }
.repere .noeud.is-verrou { opacity: 1; }

/* le texte du haut de page, puis celui du moteur, au même endroit */
.ouv__in { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; pointer-events: none; }
.ouv__texte, .ouv__moteur { pointer-events: auto; display: grid; gap: 18px; justify-items: start; max-width: 600px; padding-top: var(--tete); will-change: transform, opacity; }
.ouv__moteur { max-width: 520px; }
.js .ouv__moteur { opacity: 0; visibility: hidden; }
.ouv__texte .hero__lead { color: rgba(238, 238, 245, .86); }
.btn--verre { color: #fff; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn--verre:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); }
.js .ouv__texte > * { opacity: 0; transform: translateY(22px); animation: arrive-doux .8s var(--ease-entree) forwards; }
.js .ouv__texte > :nth-child(1) { animation-delay: .1s; } .js .ouv__texte > :nth-child(2) { animation-delay: .18s; } .js .ouv__texte > :nth-child(3) { animation-delay: .2s; opacity: 1; transform: none; animation: none; }
.js .ouv__texte > :nth-child(4) { animation-delay: .75s; } .js .ouv__texte > :nth-child(5) { animation-delay: .85s; } .js .ouv__texte > :nth-child(6) { animation-delay: .95s; } .js .ouv__texte > :nth-child(7) { animation-delay: 1.05s; }
@keyframes arrive-doux { to { opacity: 1; transform: none; } }

/* les trois sports : la photo change seule, la barre montre le temps qui reste */
.ouv__sports { position: absolute; z-index: 5; right: max(20px, calc((100vw - var(--large)) / 2)); bottom: 34px; display: flex; gap: 12px; }
.ouv__sports button { display: grid; gap: 8px; min-width: 96px; text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); transition: color var(--mo-court); }
.ouv__sports button:hover, .ouv__sports button.is-on { color: #fff; }
.ouv__sports i { position: relative; display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.ouv__sports i::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.ouv__sports .is-on i::after { animation: remplir var(--duree, 6.8s) linear forwards; }
@keyframes remplir { to { transform: scaleX(1); } }

/* le téléphone : la maquette réelle (968 × 1920), dimensionnée par sa HAUTEUR — ses proportions ne changent jamais */
.ouv__app { position: absolute; z-index: 4; right: max(6vw, calc((100vw - var(--large)) / 2 + 60px)); top: calc(50% + var(--tete) / 2); height: min(78vh, 760px); aspect-ratio: 968 / 1920; transform: translateY(-50%); opacity: 0; pointer-events: none; perspective: 1700px; }
.ouv__tel { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; filter: drop-shadow(0 46px 60px rgba(0, 0, 0, .65)) drop-shadow(0 0 90px rgba(var(--violet-a), .4)); }
.ouv__tel img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translateX(22px); transition: opacity .45s var(--ease-doux), transform .65s var(--ease-entree); }
.ouv__tel img.is-on { opacity: 1; transform: none; } .ouv__tel img.is-passee { transform: translateX(-22px); }
/* ce que chaque temps met en avant : un composant de l'app, sorti de l'écran */
.sortie { position: absolute; z-index: 2; right: 78%; top: 24%; width: max(250px, 74%); opacity: 0; transform: translate3d(50px, 14px, 0) scale(.88); transition: opacity .35s var(--ease-doux), transform .65s var(--ressort); }
.ouv.is-moteur .sortie.is-on { opacity: 1; transform: none; transition-delay: .18s; }
.sortie[data-sortie="1"] { top: 37%; } .sortie[data-sortie="2"] { top: 27%; } .sortie[data-sortie="3"] { top: 30%; }
.sortie > * { box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .9), 0 0 60px -14px rgba(var(--acc-a), .7); background-color: rgba(26, 26, 38, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sortie .noeud { padding: 14px 16px; } .sortie .noeud__t b { font-size: .95rem; } .sortie .rond { width: 44px; height: 44px; font-size: .9rem; }
.critere--carte { padding: 14px 16px; border-radius: var(--r-l); border: 1.5px solid rgba(var(--acc-a), .5); } .critere--carte b { font-size: .92rem; } .critere--carte .notes i { height: 38px; }
.sortie .goulet { border-radius: var(--r-l); } .sortie .goulet p { font-size: .8rem; }
.sortie .etape { background: linear-gradient(180deg, rgba(38, 38, 72, .95), rgba(26, 26, 38, .95)); }

/* ---------- LES TERRAINS : la bande des sports ---------- */
.terrains { position: relative; background: var(--fond); }
.terrains__colle { padding: clamp(72px, 9vw, 128px) 0; overflow: hidden; }
.terrains--epingle .terrains__colle { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: var(--tete) 0 0; }
.terrains__tete { display: grid; gap: 12px; justify-items: start; margin-bottom: clamp(40px, 7vh, 76px); }
.terrains__piste { display: flex; align-items: flex-start; gap: clamp(20px, 2.6vw, 40px); padding: 0 max(20px, calc((100vw - var(--large)) / 2)) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.terrains__piste::-webkit-scrollbar { display: none; } .terrains__piste.is-tire { cursor: grabbing; scroll-snap-type: none; }
.terrains--epingle .terrains__piste { overflow: visible; scroll-snap-type: none; cursor: default; will-change: transform; width: max-content; }
.terrain { position: relative; flex: none; width: min(520px, 80vw); margin: 0; scroll-snap-align: center; }
.terrains--epingle .terrain { width: min(540px, 62vh); }
.terrain__photo { position: relative; z-index: 1; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; background: var(--carte); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.terrain__photo img { width: 116%; max-width: none; height: 100%; margin-left: -8%; object-fit: cover; will-change: transform; user-select: none; -webkit-user-drag: none; }
.terrain__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 13, 0) 55%, rgba(8, 8, 13, .55) 100%), linear-gradient(120deg, rgba(var(--acc-a), .16), rgba(var(--violet-a), .12)); }
.terrain__nom { position: absolute; z-index: 0; left: -.04em; top: -.66em; font-size: clamp(3.6rem, 9vw, 7.6rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(var(--acc-a), .55); pointer-events: none; will-change: transform; }
.terrain figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; } .terrain figcaption b { flex-basis: 100%; font-size: 1.2rem; font-weight: 800; color: var(--titre); }
.mini { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--carte); border: 1px solid var(--bord); font-size: .78rem; font-weight: 600; color: var(--titre); }
.mini i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); } .mini.is-ok i { background: var(--ok); } .mini.is-goulet { border-color: rgba(var(--cours-a), .6); } .mini.is-goulet i { background: var(--cours); box-shadow: 0 0 10px rgba(var(--cours-a), .9); }
.terrain--fin { display: grid; gap: 14px; align-content: center; justify-items: start; aspect-ratio: auto; min-height: 300px; padding: clamp(22px, 3vw, 36px); width: min(400px, 80vw); border-radius: var(--r-xl); border: 1.5px solid rgba(var(--acc-a), .45); background: linear-gradient(160deg, rgba(var(--acc-a), .16), rgba(var(--violet-a), .1)); color: var(--txt); }
.terrains--epingle .terrain--fin { width: 400px; align-self: stretch; }
.terrain__compte { display: flex; align-items: baseline; gap: 12px; } .terrain__compte b { font-size: clamp(4rem, 7vw, 6rem); font-weight: 900; letter-spacing: -.04em; line-height: .9; background: var(--grad-texte); -webkit-background-clip: text; background-clip: text; color: transparent; } .terrain__compte span { font-weight: 700; color: var(--titre); }

/* ---------- POUR QUI : deux portes, deux photos ---------- */
.portes { display: flex; gap: 16px; min-height: 580px; }
.porte { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; border: 1px solid var(--bord); cursor: pointer; transition: flex-grow .7s cubic-bezier(.6, 0, .2, 1), border-color var(--mo-ample); }
.porte.is-on { flex-grow: 1.9; border-color: rgba(var(--acc-a), .55); cursor: default; }
.porte__photo { position: absolute; inset: 0; z-index: -1; }
.porte__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: saturate(.5) brightness(.42); transition: transform 1.4s var(--ease-entree), filter .7s var(--ease-doux); }
.porte.is-on .porte__photo img { transform: scale(1); filter: saturate(1) brightness(.78); }
.porte__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 13, .1) 0%, rgba(8, 8, 13, .55) 42%, rgba(8, 8, 13, .94) 100%); }
.porte__in { display: grid; gap: 16px; align-content: end; justify-items: start; height: 100%; padding: clamp(22px, 3vw, 40px); color: #e6e6f2; }
.porte__in .titre { color: #fff; } .porte__in .lead { color: rgba(238, 238, 245, .88); } .porte .coches li { color: rgba(238, 238, 245, .9); }
.porte .coches, .porte .btn { display: none; }
.porte.is-on .coches { display: grid; animation: arrive var(--mo-lent) var(--ease-entree) .15s backwards; } .porte.is-on .btn { display: inline-flex; animation: arrive var(--mo-lent) var(--ease-entree) .25s backwards; }
.porte:not(.is-on) .lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- LE GOULET ---------- */
.goulot { position: relative; height: 270vh; background: var(--fond-2); border-block: 1px solid var(--lisere); }
.goulot__colle { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: flex-start; padding-top: calc(var(--tete) + clamp(28px, 7vh, 80px)); }
.goulot__toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.goulot__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: start; }
.goulot__texte { display: grid; gap: 16px; justify-items: start; max-width: 700px; }
.goulot__jauge { display: grid; gap: 4px; justify-items: end; text-align: right; }
.goulot__jauge b { font-size: clamp(3.4rem, 7vw, 6.4rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; color: var(--cours); transition: color var(--mo-lent); }
.goulot__jauge small { font-size: .86rem; color: var(--doux); }
.goulot.is-ouvert .goulot__jauge b { color: var(--ok); }
.etiq--acquis { background: rgba(var(--ok-a), .16); color: var(--ok); }
.calme .goulot { height: auto; } .calme .goulot__colle { position: relative; height: 80vh; }

/* ---------- LA VISITE GUIDÉE ---------- */
.visite { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: stretch; }
.visite__chapitres { display: grid; gap: 2px; align-content: start; }
.chapitre button { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 8px; width: 100%; padding: 9px 14px 11px; text-align: left; border-radius: var(--r); border: 1.5px solid transparent; transition: background var(--mo-normal), border-color var(--mo-normal); }
.chapitre i { grid-row: 1 / span 2; padding-top: 3px; font-style: normal; font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--doux); }
.chapitre b { font-size: .96rem; font-weight: 700; color: var(--doux); transition: color var(--mo-normal); }
.chapitre span { grid-column: 2; display: none; font-size: .84rem; line-height: 1.45; color: var(--txt); }
.chapitre button:hover b { color: var(--titre); }
.chapitre.is-on button { background: var(--carte); border-color: rgba(var(--acc-a), .45); } .chapitre.is-on b { color: var(--titre); } .chapitre.is-on i { color: var(--acc-clair); } .chapitre.is-on span { display: block; animation: arrive var(--mo-ample) var(--ease-entree); }
.chapitre__barre { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--bord); overflow: hidden; opacity: 0; }
.chapitre__barre::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--k, 0)); }
.chapitre.is-on .chapitre__barre { opacity: 1; }
.visite__scene { position: relative; min-height: min(640px, 74vh); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--bord); background: radial-gradient(70% 60% at 50% 40%, rgba(var(--violet-a), .3), transparent 70%), radial-gradient(50% 50% at 20% 90%, rgba(var(--acc-a), .18), transparent 70%), #08080d; }
/* la caméra ne grossit PAS une texture (transform: scale rendait l'écran flou une fois zoomé) : elle change la taille réelle du téléphone,
   le navigateur redessine donc l'image à chaque pas, nette à toutes les échelles. */
.visite__camera { position: absolute; left: 0; top: 0; width: 280px; height: 556px; contain: layout; transition: left 1.2s cubic-bezier(.65, 0, .18, 1), top 1.2s cubic-bezier(.65, 0, .18, 1), width 1.2s cubic-bezier(.65, 0, .18, 1), height 1.2s cubic-bezier(.65, 0, .18, 1); }
.visite__tel { position: relative; width: 100%; height: 100%; }
.visite__tel img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s var(--ease-doux); }
.visite__tel img.is-on { opacity: 1; }
/* la zone regardée : le reste de l'écran s'assombrit autour d'elle */
.visite__zone { position: absolute; border-radius: 10px; box-shadow: 0 0 0 2000px rgba(8, 8, 13, 0); outline: 1px solid rgba(255, 255, 255, 0); opacity: 0; transition: box-shadow .7s var(--ease-doux), outline-color .7s, opacity .4s, left 1s cubic-bezier(.65, 0, .18, 1), top 1s cubic-bezier(.65, 0, .18, 1), width 1s cubic-bezier(.65, 0, .18, 1), height 1s cubic-bezier(.65, 0, .18, 1); pointer-events: none; }
.visite__zone.is-on { opacity: 1; box-shadow: 0 0 0 2000px rgba(8, 8, 13, .5); outline-color: rgba(255, 255, 255, .5); }
.visite__doigt { position: absolute; width: 11%; aspect-ratio: 1; margin: -5.5% 0 0 -5.5%; border-radius: 50%; background: rgba(255, 255, 255, .28); border: 2px solid #fff; opacity: 0; transform: scale(.3); pointer-events: none; }
.visite__doigt.is-touche { animation: touche .75s var(--ease-entree); }
@keyframes touche { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(.8); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.visite__legende { display: none; position: absolute; left: 12px; right: 64px; bottom: 12px; padding: 12px 14px; border-radius: var(--r-l); background: rgba(17, 17, 26, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--bord); }
.visite__legende i { display: block; font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .12em; color: var(--acc-clair); } .visite__legende b { display: block; font-size: .96rem; color: #fff; } .visite__legende span { display: block; min-height: 4.2em; font-size: .8rem; line-height: 1.4; color: #cacae0; }
.visite__lecture { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(17, 17, 26, .8); border: 1.5px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform var(--mo-court) var(--ressort-pression), border-color var(--mo-court); }
.visite__lecture:hover { border-color: #fff; transform: scale(1.06); } .visite__lecture .ic { width: 18px; height: 18px; }
.visite__lecture .ic--lecture, .visite__lecture.is-pause .ic--pause { display: none; } .visite__lecture.is-pause .ic--lecture { display: block; }

/* ---------- notre histoire : la photo de terrain, le portrait ---------- */
.histoire__gauche { display: grid; gap: 26px; align-content: start; position: sticky; top: calc(var(--tete) + 30px); } .histoire .histoire__gauche .tetiere { position: static; }
.histoire__photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 70px -40px rgba(20, 20, 80, .6); } .histoire__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.histoire__portrait { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---------- l'appel final : une photo de nuit ---------- */
.appel--photo { isolation: isolate; }
.appel__photo { position: absolute; inset: 0; z-index: -1; } .appel__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.appel__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--fond-2) 0%, rgba(17, 17, 24, .55) 45%, rgba(17, 17, 24, .9) 100%), radial-gradient(60% 90% at 50% 100%, rgba(var(--violet-a), .45), transparent 70%); }
body[data-ton="clair"] .appel__photo { opacity: .25; }

/* ==========================================================================
   Écrans moyens et téléphones
   ========================================================================== */
@media (max-width: 980px) {
  .ouv__in { align-items: flex-end; } .ouv__texte { padding: 0 0 calc(var(--barre) + 92px); gap: 12px; }
  .ouv__voile { background: linear-gradient(180deg, rgba(8, 8, 13, .3) 0%, rgba(8, 8, 13, 0) 22%, rgba(8, 8, 13, .7) 50%, rgba(8, 8, 13, .96) 72%); }
  .ouv__in--moteur { align-items: flex-start; } .ouv__moteur { padding-top: calc(var(--tete) + 14px); gap: 8px; max-width: none; width: 100%; } .ouv__moteur .sur { display: none; } .ouv__moteur .titre { font-size: 1.3rem; }
  .ouv__app { right: auto; left: 50%; top: auto; bottom: calc(var(--barre) + 10px); height: min(56svh, 540px); transform: translateX(-50%); }
  .sortie { display: none; }
  .ouv__sports { left: 20px; right: 20px; bottom: calc(var(--barre) + 22px); } .ouv__sports button { flex: 1; min-width: 0; }
  .repere--bureau { display: none; }
  .repere { --l: 54px !important; } .repere__carte { min-width: 0; padding: 7px 10px; gap: 8px; } .repere__carte .noeud__t b { font-size: .7rem; } .repere__carte .noeud__t small, .repere__carte .etiq { display: none; } .repere__carte .rond { width: 26px; height: 26px; font-size: .6rem; }
  .portes { flex-direction: column; min-height: 0; } .porte, .porte.is-on { flex: none; cursor: default; } .porte .coches { display: grid; } .porte .btn { display: inline-flex; } .porte__photo img { transform: none; filter: saturate(.9) brightness(.6); } .porte__in { padding-top: 160px; } .porte:not(.is-on) .lead { display: block; }
  .goulot__in { grid-template-columns: minmax(0, 1fr); } .goulot__jauge { justify-items: start; text-align: left; }
  .visite { grid-template-columns: minmax(0, 1fr); } .visite__scene { order: -1; min-height: min(640px, 76svh); }
  .visite__chapitres { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .visite__chapitres::-webkit-scrollbar { display: none; }
  .chapitre { flex: none; } .chapitre button { display: block; padding: 8px 14px 12px; border-color: var(--bord); border-radius: 999px; } .chapitre i { display: inline; padding: 0; margin-right: 6px; } .chapitre b { font-size: .82rem; white-space: nowrap; } .chapitre.is-on span, .chapitre span { display: none; }
  .visite__legende { display: block; }
  .histoire__gauche { position: static; }
}
@media (max-width: 760px) {
  .ouv__texte .hero__lead, .ouv__texte .hero__preuves { display: none; }
  .ouv__texte .hero__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; } .ouv__texte .hero__actions .btn { flex: none; min-height: 48px; padding: 10px 8px; font-size: .86rem; white-space: normal; text-align: center; }
  .terrain__nom { top: -.6em; }
}
@media (prefers-reduced-motion: reduce) { .sport img { animation: none !important; } }
/* fenêtres basses (ordinateurs portables) : le texte du moteur tient sous l'en-tête */
@media (min-width: 981px) and (max-height: 780px) {
  .ouv__moteur { gap: 10px; max-width: 560px; } .ouv__moteur .titre { font-size: 2rem; } .temps { gap: 2px; margin-top: 2px; } .temps__i button { padding: 6px 0; } .temps__i.is-on p { padding-bottom: 10px; } .temps__i p { font-size: .86rem; }
  .ouv__texte { gap: 12px; } .hero__titre { font-size: clamp(2.4rem, 1rem + 4.4vw, 3.8rem); }
  .terrains__tete { margin-bottom: clamp(30px, 6vh, 50px); } .terrains--epingle .terrain { width: min(480px, 58vh); }
}


/* ==========================================================================================================
   TROISIÈME PASSE (02/10, soir) — retours du fondateur, et l'air de fitonist-app.webflow.io : une idée par écran,
   des items de l'app qui surgissent à côté de la ligne allumée, une entrée en tuiles.
   ========================================================================================================== */

/* ---------- L'ENTRÉE (page de préchargement) : tout en CSS, le rideau se lève même sans script ---------- */
.entree { display: none; }
.js:not(.calme):not(.direct) .entree { display: grid; place-items: center; position: fixed; inset: 0; z-index: 400; overflow: hidden;
  background: radial-gradient(80% 70% at 12% 0%, #8fa4ff 0%, rgba(143, 164, 255, 0) 60%), radial-gradient(70% 70% at 100% 100%, #9a4dff 0%, rgba(154, 77, 255, 0) 62%), linear-gradient(135deg, #5E73EB 0%, #6a58ec 55%, #7C3AED 100%);
  animation: entree-leve .8s cubic-bezier(.76, 0, .18, 1) 1.8s both; }
@keyframes entree-leve { from { clip-path: inset(0 0 0 0 round 0 0 0 0); } to { clip-path: inset(0 0 100% 0 round 0 0 64px 64px); visibility: hidden; } }
.entree { --t: clamp(78px, 7.6vw, 112px); }
.entree__tuiles { display: grid; grid-template-columns: repeat(2, var(--t)); gap: 10px; animation: entree-groupe 2.5s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes entree-groupe { 0%, 36% { transform: rotate(0deg) scale(1); opacity: 1; } 56%, 71% { transform: rotate(45deg) scale(1); opacity: 1; } 100% { transform: rotate(45deg) scale(1.7); opacity: 0; } }
.entree__t { width: var(--t); height: var(--t); border-radius: calc(var(--t) * .3); display: grid; place-items: center; background: #0b0b12; color: #fff; box-shadow: 0 24px 44px -20px rgba(10, 10, 50, .7); animation: entree-tuile .6s var(--ressort) both; }
.entree__t > * { animation: entree-contre 2.5s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes entree-contre { 0%, 36% { transform: rotate(0deg); } 56%, 100% { transform: rotate(-45deg); } }
@keyframes entree-tuile { from { transform: scale(0) rotate(-24deg); opacity: 0; } }
.entree__t--logo { animation: entree-logo .9s cubic-bezier(.6, 0, .2, 1) both; } .entree__t--logo img { width: 66%; height: 66%; border-radius: 24%; }
@keyframes entree-logo { 0% { transform: translate(calc(var(--t) / 2 + 5px), calc(var(--t) / 2 + 5px)) scale(0); } 28%, 44% { transform: translate(calc(var(--t) / 2 + 5px), calc(var(--t) / 2 + 5px)) scale(1.14); } 100% { transform: none; } }
.entree__t--arbre { animation-delay: .46s; color: #9aa9ff; } .entree__t--goulet { animation-delay: .56s; } .entree__t--ok { animation-delay: .66s; color: var(--ok); }
.entree__t .ic { width: 46%; height: 46%; }
.entree__rond { width: 52%; height: 52%; border-radius: 50%; background: conic-gradient(var(--cours) 60%, #2c2c3e 0); -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%); mask: radial-gradient(circle, transparent 46%, #000 48%); }
.entree__mot { position: absolute; left: 0; right: 0; bottom: 13vh; text-align: center; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); font-weight: 700; letter-spacing: .01em; color: #fff; animation: entree-mot 2.3s var(--ease-doux) both; }
@keyframes entree-mot { 0%, 30% { opacity: 0; transform: translateY(12px); } 48%, 74% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
/* la page attend que le rideau se lève pour jouer son haut de page */
.js:not(.calme):not(.direct) .hero__titre.is-decoupe .lettre { animation-delay: calc(1.95s + var(--n) * 22ms); }
.js:not(.calme):not(.direct) .ouv__texte > :nth-child(1) { animation-delay: 1.9s; } .js:not(.calme):not(.direct) .ouv__texte > :nth-child(2) { animation-delay: 1.98s; }
.js:not(.calme):not(.direct) .ouv__texte > :nth-child(4) { animation-delay: 2.55s; } .js:not(.calme):not(.direct) .ouv__texte > :nth-child(5) { animation-delay: 2.65s; }
.js:not(.calme):not(.direct) .ouv__texte > :nth-child(6) { animation-delay: 2.75s; } .js:not(.calme):not(.direct) .ouv__texte > :nth-child(7) { animation-delay: 2.85s; }

/* ---------- les deux boutons du haut de page : une icône chacun ---------- */
.btn .ic { width: 18px; height: 18px; flex: none; transition: transform var(--mo-normal) var(--ressort); }
.hero__actions .btn { gap: 10px; } .hero__actions .btn--plein:hover .ic { transform: translateX(4px); } .hero__actions .btn--verre .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #fff; color: #14142a; box-sizing: content-box; }
.hero__actions .btn--verre:hover .ic { transform: scale(1.12); }

/* ---------- LA PROMESSE : une idée par ligne ---------- */
.promesse { height: 320vh; background: radial-gradient(50% 40% at 50% 50%, rgba(var(--violet-a), .16), transparent 70%), var(--fond); }
.promesse__in { display: grid; justify-items: center; text-align: center; gap: clamp(14px, 2.4vh, 26px); }
.promesse__lignes { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; gap: clamp(2px, .8vh, 10px); }
.pl { display: flex; justify-content: center; }
.pl__mot { position: relative; display: inline-block; }
.pl__mot > b { display: block; font-size: min(clamp(2.5rem, 1rem + 6.2vw, 6.2rem), 12vh); line-height: 1.04; font-weight: 800; letter-spacing: -.04em; color: var(--titre); opacity: .13; transform: scale(.94); transition: opacity .45s var(--ease-doux), transform .6s var(--ressort); text-wrap: balance; }
.pl.is-fait .pl__mot > b { opacity: .34; transform: scale(.97); }
.pl.is-on .pl__mot > b { opacity: 1; transform: scale(1.04); background: linear-gradient(100deg, #fff 0%, #dfe4ff 45%, #a9b6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl--goulet.is-on .pl__mot > b { background-image: linear-gradient(100deg, #fff 0%, #ffe9a6 55%, var(--cours) 100%); }
.puce { position: absolute; z-index: 2; top: 50%; display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px 9px 10px; border-radius: 18px; background: rgba(26, 26, 38, .94); border: 1.5px solid var(--bord-2);
  box-shadow: 0 26px 50px -26px #000, 0 0 44px -16px rgba(var(--acc-a), .75); font-size: .86rem; font-weight: 700; line-height: 1.2; color: #f3f3ff; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(calc(-50% + 18px)) scale(.6) rotate(var(--r, 0deg)); transition: opacity .2s var(--ease-doux), transform .3s var(--ease-doux); }
.puce--g { right: calc(100% + clamp(18px, 2.6vw, 44px)); --r: -5deg; margin-top: -.9em; } .puce--d { left: calc(100% + clamp(18px, 2.6vw, 44px)); --r: 4deg; margin-top: .9em; }
.pl.is-on .puce { opacity: 1; transform: translateY(-50%) rotate(var(--r, 0deg)); transition: opacity .3s var(--ease-doux) .08s, transform .65s var(--ressort) .08s; } .pl.is-on .puce--d { transition-delay: .2s; }
.puce .rond { width: 32px; height: 32px; font-size: .68rem; } .puce .rond .ic { width: 16px; height: 16px; } .puce .rond em { position: relative; font-style: normal; }
.rond--or { --c: var(--cours); } .rond--cible { background: var(--grad); color: #fff; }
.pl--goulet .puce { border-color: rgba(var(--cours-a), .6); box-shadow: 0 26px 50px -26px #000, 0 0 44px -14px rgba(var(--cours-a), .7); }
.crans { display: inline-flex; gap: 4px; } .crans i { width: 15px; height: 15px; border-radius: 5px; background: #2e2e44; } .crans i.is-on { background: var(--grad); }
.crans--jauge i { width: 22px; height: 7px; border-radius: 4px; } .crans--jauge i.is-on { background: var(--ok); }
.promesse__t { font-size: clamp(1.05rem, .9rem + .9vw, 1.6rem); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--txt); max-width: 30em; margin-top: clamp(6px, 1.6vh, 18px); }
.promesse__s { margin-top: 0; }
.js .promesse__t, .js .promesse__s { opacity: 0; } .calme .promesse__t, .calme .promesse__s { opacity: 1; }
.calme .pl__mot > b { opacity: 1; transform: none; } .calme .puce { display: none; }
@media (max-width: 1180px) {       /* plus assez de place sur les côtés : les items se posent au-dessus et au-dessous du mot */
  .puce--g { right: auto; left: 50%; top: auto; bottom: calc(100% - .5em); margin: 0; translate: -62% 0; } .puce--d { left: 50%; top: calc(100% - .5em); margin: 0; translate: -38% 0; }
  .puce { transform: translateY(18px) scale(.6) rotate(var(--r, 0deg)); } .pl.is-on .puce { transform: rotate(var(--r, 0deg)); }
  .promesse__lignes { gap: clamp(10px, 2.6vh, 26px); }
}
@media (max-width: 760px) { .promesse { height: 280vh; } .puce { font-size: .76rem; padding: 7px 11px 7px 8px; border-radius: 14px; gap: 8px; } .puce .rond { width: 26px; height: 26px; } .puce--d { display: none; } .puce--g { translate: -50% 0; }
  .pl__mot > b { font-size: min(clamp(2.3rem, 12vw, 3.4rem), 9vh); } .promesse__lignes { gap: clamp(22px, 4.4vh, 40px); } }
@media (prefers-reduced-motion: reduce) { .pl__mot > b { opacity: 1; transform: none; } .puce { display: none; } .promesse { height: auto; } .promesse__t { opacity: 1 !important; } }

/* ---------- les lettres en contour : la police variable superpose des tracés (la barre du A, la boucle du e) et le contour les montrait.
   Le remplissage, peint APRÈS le contour à la couleur du fond, les recouvre : il ne reste que le tour de la lettre. ---------- */
.bandeau__piste span { color: var(--fond-2); -webkit-text-stroke: 3px rgba(var(--acc-a), .62); paint-order: stroke fill; }
.bandeau__piste span:nth-of-type(5n+1) { color: var(--titre); -webkit-text-stroke: 0; }
.bandeau__piste span:nth-of-type(5n+4) { color: transparent; -webkit-text-stroke: 0; }
.terrain__nom { color: var(--fond); -webkit-text-stroke: 3px rgba(var(--acc-a), .62); paint-order: stroke fill; }

/* ---------- les noms des sports ne se chevauchent plus : chacun tient dans la largeur de SA carte ---------- */
.terrain { container-type: inline-size; }
.terrain__nom { left: 0; top: -.7em; font-size: clamp(2.4rem, 5vw, 4.8rem); font-size: 16.5cqw; max-width: none; }
.terrains__tete { margin-bottom: clamp(58px, 9.5vh, 100px); }
@media (max-width: 760px) { .terrain__nom { top: -.66em; } .terrains__tete { margin-bottom: 56px; } }

/* ---------- LE GOULET : de l'air sous le texte (le couloir se place dans la hauteur restante), et un fond à plusieurs plans ---------- */
.goulot { background: #0d0d15; }
.goulot__colle { padding-top: calc(var(--tete) + clamp(20px, 5vh, 62px)); }
.goulot__fond { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.1s var(--ease-doux);
  background: radial-gradient(44% 46% at 60% var(--gy, 72%), rgba(var(--cours-a), .2), transparent 72%), radial-gradient(54% 60% at 4% 0%, rgba(var(--violet-a), .34), transparent 70%), radial-gradient(40% 52% at 100% var(--gy, 72%), rgba(var(--acc-a), .26), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%); }
.goulot__fond--ok { opacity: 0; background: radial-gradient(64% 52% at 76% var(--gy, 72%), rgba(var(--ok-a), .24), transparent 72%), radial-gradient(54% 60% at 4% 0%, rgba(var(--acc-a), .32), transparent 70%), radial-gradient(40% 50% at 30% var(--gy, 72%), rgba(var(--acc-a), .16), transparent 72%); }
.goulot.is-ouvert .goulot__fond { opacity: 0; } .goulot.is-ouvert .goulot__fond--ok { opacity: 1; }
.goulot__grille { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.6px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 58% at 60% var(--gy, 72%), #000 8%, transparent 76%); mask-image: radial-gradient(70% 58% at 60% var(--gy, 72%), #000 8%, transparent 76%); }
.goulot__texte .lead { max-width: 36em; }
@media (min-width: 981px) and (max-height: 780px) { .goulot__texte { gap: 10px; } .goulot .titre--xl { font-size: clamp(1.9rem, 1rem + 2.6vw, 3rem); } .goulot__jauge b { font-size: clamp(3rem, 5vw, 4.6rem); } }

/* ---------- les boutons des réseaux ---------- */
.fil { position: relative; isolation: isolate; overflow: hidden; gap: 16px; padding: 16px 18px; border-radius: 20px; }
.fil::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fil-g); opacity: .5; transition: opacity .4s var(--ease-doux); }
.fil::after { content: ""; position: absolute; z-index: -1; top: -60%; bottom: -60%; left: -40%; width: 34%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg) translateX(-140%); transition: transform .9s var(--ease-doux); }
.fil--insta { --fil-g: linear-gradient(115deg, rgba(249, 206, 52, .16), rgba(238, 42, 123, .16) 48%, rgba(98, 40, 215, .2)); --fil-c: #ee2a7b; }
.fil--fb { --fil-g: linear-gradient(115deg, rgba(24, 119, 242, .22), rgba(24, 119, 242, .05)); --fil-c: #1877f2; }
.fil:hover { border-color: var(--fil-c); transform: translateY(-3px); box-shadow: 0 22px 44px -26px var(--fil-c); } .fil:hover::before { opacity: 1; } .fil:hover::after { transform: skewX(-18deg) translateX(520%); }
.fil__ic { width: 50px; height: 50px; border-radius: 16px; box-shadow: 0 10px 22px -10px var(--fil-c); transition: transform .5s var(--ressort); } .fil__ic .ic { width: 24px; height: 24px; }
.fil--insta .fil__ic { background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); } .fil--fb .fil__ic { background: #1877f2; }
.fil:hover .fil__ic { transform: rotate(-8deg) scale(1.1); }
.fil b { font-size: 1.02rem; }
.fil em { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: var(--titre); color: var(--fond); font-size: .8rem; font-weight: 800; transition: background var(--mo-normal), color var(--mo-normal); }
.fil em::after { content: "→"; transition: transform var(--mo-normal) var(--ressort); } .fil:hover em { background: var(--fil-c); color: #fff; } .fil:hover em::after { transform: translateX(4px); }
.pied__reseaux { gap: 10px; }
.pied__reseaux .reseau { position: relative; overflow: hidden; width: 46px; height: 46px; border-radius: 50%; background: transparent; border: 1.5px solid var(--bord-2); color: var(--titre); transition: transform .45s var(--ressort), border-color var(--mo-normal), color var(--mo-normal), box-shadow var(--mo-normal); }
.pied__reseaux .reseau::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; transform: scale(0); transition: transform .45s var(--ressort); }
.reseau--insta::before { background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); } .reseau--fb::before { background: #1877f2; }
.pied__reseaux .reseau .ic { position: relative; } .pied__reseaux .reseau:hover { color: #fff; border-color: transparent; transform: translateY(-4px); box-shadow: 0 14px 26px -12px rgba(var(--violet-a), .9); } .pied__reseaux .reseau:hover::before { transform: scale(1); }

/* ---------- de l'appel final au pied de page : plus de marche. La photo et la lueur s'éteignent dans la couleur du pied. ---------- */
.appel--photo { border-top: 0; background: var(--fond); padding-bottom: clamp(110px, 13vw, 190px); }
.appel__photo::after { background: linear-gradient(180deg, var(--fond-2) 0%, rgba(17, 17, 24, .55) 38%, rgba(13, 13, 19, .8) 66%, var(--fond) 96%), radial-gradient(56% 60% at 50% 62%, rgba(var(--violet-a), .42), transparent 72%); }
main:has(> .appel--photo:last-child) + .pied { border-top-color: transparent; padding-top: 30px; }

/* ---------- le retour en haut : un rond qui se remplit avec le défilement ---------- */
.remonter { display: none; }
.js .remonter { display: grid; place-items: center; position: fixed; z-index: 60; right: 18px; bottom: calc(var(--barre) + 18px); width: 50px; height: 50px; border-radius: 50%; color: #fff;
  background: rgba(17, 17, 26, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 34px -16px #000;
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8); transition: opacity .3s var(--ease-doux), transform .45s var(--ressort), visibility 0s .3s; }
.js .remonter.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease-doux), transform .45s var(--ressort); }
.remonter svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .remonter circle { fill: none; stroke-width: 2.5; }
.remonter circle:first-child { stroke: rgba(255, 255, 255, .16); } .remonter circle:last-child { stroke: url(#g-marque); stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--p, 0))); }
.remonter .ic { position: relative; width: 20px; height: 20px; transform: rotate(-90deg); transition: transform var(--mo-normal) var(--ressort); } .remonter:hover .ic { transform: rotate(-90deg) translateX(3px); }
.remonter:hover { background: rgba(40, 40, 70, .92); }
/* retouches après tournage : items de la promesse plus présents, nom du sport entier au-dessus de sa carte */
.puce { font-size: .98rem; padding: 11px 18px 11px 12px; border-radius: 20px; gap: 12px; } .puce .rond { width: 38px; height: 38px; font-size: .76rem; } .puce .rond .ic { width: 19px; height: 19px; }
.crans i { width: 17px; height: 17px; } .crans--jauge i { width: 26px; height: 8px; }
.terrain__nom { top: -.9em; } .terrains__tete { margin-bottom: clamp(84px, 12.5vh, 124px); }
@media (max-width: 760px) { .puce { font-size: .78rem; padding: 7px 11px 7px 8px; border-radius: 14px; gap: 8px; } .puce .rond { width: 26px; height: 26px; font-size: .62rem; } .terrain__nom { top: -.9em; } .terrains__tete { margin-bottom: 70px; } }
/* le formulaire en tonalité claire : les champs avaient la couleur de leur carte — on ne voyait plus où écrire */
body[data-ton="clair"] .champ input, body[data-ton="clair"] .champ textarea { background: #fff; border-color: var(--bord-2); }
body[data-ton="clair"] .champ input:hover, body[data-ton="clair"] .champ textarea:hover { border-color: #a9a9c6; }
body[data-ton="clair"] .champ input:focus, body[data-ton="clair"] .champ textarea:focus { border-color: var(--acc); }
/* bande des sports non épinglée (téléphone, mouvement réduit) : elle défile à l'horizontale, donc elle rogne ce qui dépasse en hauteur —
   le nom du sport se loge dans une marge haute de la bande, au lieu de dépasser au-dessus d'elle */
.terrains:not(.terrains--epingle) .terrains__piste { padding-top: min(84px, 13vw); } .terrains:not(.terrains--epingle) .terrains__tete { margin-bottom: 14px; }
/* la promesse, centrée à la verticale : le centre se compte SOUS l'en-tête (et au-dessus de la barre du bas), et seulement sur ce qui se voit —
   les deux phrases de fin sont hors du flux tant qu'elles sont éteintes ; quand elles s'allument, l'ensemble remonte de la moitié de leur hauteur */
.promesse__colle { padding-top: var(--tete); padding-bottom: var(--barre); }
.promesse__in { position: relative; will-change: transform; }
.promesse__fin { display: grid; justify-items: center; gap: clamp(8px, 1.6vh, 16px); }
.js:not(.calme) .promesse__fin { position: absolute; left: 0; right: 0; top: 100%; padding-top: clamp(18px, 3.4vh, 38px); }
.promesse__t { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .js .promesse__fin { position: static; padding-top: 0; } }
/* le nom du sport : dans le flux, calé sur le bord gauche de sa carte, un espace net entre le bas des lettres et la photo */
.terrain__nom { position: static; display: block; top: auto; left: auto; margin: 0 0 calc(.11em + 14px); transform: none !important; will-change: auto; }
.terrains__tete { margin-bottom: clamp(26px, 4.6vh, 54px); }
.terrains:not(.terrains--epingle) .terrains__piste { padding-top: 0; } .terrains:not(.terrains--epingle) .terrains__tete { margin-bottom: clamp(26px, 5vw, 44px); }
@media (max-width: 760px) { .terrain__nom { top: auto; } .terrains__tete { margin-bottom: 28px; } }
@media (min-width: 981px) and (max-height: 780px) { .terrains__tete { margin-bottom: clamp(18px, 3.4vh, 30px); } .terrains--epingle .terrain { width: min(460px, 51vh); } }


/* ==========================================================================================================
   QUATRIÈME PASSE (02/10, nuit) — « chaque hero doit arriver avec une animation » : arrivées en panneau, titres qui se
   lèvent, cartes qui basculent ; la promesse mot à mot puis en particules ; quatre fonds animés ; bandeau plus petit.
   ========================================================================================================== */

/* ---------- LES ARRIVÉES : chaque section est un panneau (la forme est posée par le script, image par image) ---------- */
:where(.arrive) { position: relative; z-index: 1; background-color: var(--fond); }
.arrive__bord { position: absolute; z-index: 6; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent 4%, rgba(var(--acc-a), .75) 30%, rgba(var(--violet-a), .75) 70%, transparent 96%); opacity: 0; pointer-events: none; }
.ouv, .promesse__colle, .terrains__colle, .goulot__colle { transform-origin: 50% 34%; }
.promesse__colle, .terrains__colle { overflow: hidden; }

/* ---------- les titres : chaque mot monte de derrière un cache ---------- */
.is-coupe .mm { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .04em .16em 0; margin: -.08em -.04em -.16em 0; }
.is-coupe .mm__i { display: inline-block; transform: translateY(118%) rotate(6deg); transform-origin: 0 100%; }
.is-coupe.is-leve .mm__i { transform: none; transition: transform .9s cubic-bezier(.2, .82, .2, 1) calc(var(--n) * 45ms); }
.is-coupe:not(.is-pose) .marque-t .mm__i { color: var(--acc-clair); -webkit-text-fill-color: var(--acc-clair); }      /* le dégradé du parent ne traverse pas un mot en mouvement */
.is-coupe.is-pose .mm, .is-coupe.is-pose .mm__i { display: inline; overflow: visible; padding: 0; margin: 0; transform: none; transition: none; }

/* ---------- les cartes de fonctionnalités : elles basculent en 3D, leur icône se dessine ---------- */
.js:not(.calme) .grille .fonction.is-vu { animation: carte-leve 1s cubic-bezier(.2, .9, .25, 1) var(--d, 0s) backwards; }
@keyframes carte-leve { from { opacity: 0; transform: perspective(900px) rotateX(-26deg) translateY(64px) scale(.93); } }
.grille .fonction { transform-origin: 50% 0; }
.js:not(.calme) .fonction .fonction__ic { transform: scale(.3) rotate(-30deg); opacity: 0; }
.js:not(.calme) .fonction.is-vu .fonction__ic { transform: none; opacity: 1; transition: transform .7s var(--ressort) calc(var(--d, 0s) + .3s), opacity .3s calc(var(--d, 0s) + .3s); }
.js:not(.calme) .fonction .fonction__ic .ic { stroke-dasharray: 96; stroke-dashoffset: 96; }
.js:not(.calme) .fonction.is-vu .fonction__ic .ic { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-doux) calc(var(--d, 0s) + .45s); }
.js:not(.calme) .rang[data-vue]::after { transform: scaleX(0); transform-origin: 0 50%; } .js:not(.calme) .rang.is-vu::after { transform: none; transition: transform 1.2s var(--ease-entree) .25s; }
.grille .fonction:nth-child(3n+2) { --d: .1s; } .grille .fonction:nth-child(3n) { --d: .2s; }

/* ---------- le bandeau : plus petit, et en tête du panneau des fonctionnalités (avec la trame derrière) ---------- */
.section--bandeau { padding-top: 0; overflow: hidden; }
.section--bandeau > .conteneur { position: relative; margin-top: clamp(34px, 4.6vw, 70px); }
.bandeau { position: relative; background: transparent; padding: clamp(44px, 6vw, 86px) 0 0; }
.bandeau__piste { font-size: clamp(2.8rem, 7.6vw, 6.6rem); }
.bandeau__piste span { -webkit-text-stroke-width: 2.4px; }
.section__trame { position: absolute; inset: 0 0 auto 0; width: 100%; height: min(860px, 100%); display: block; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }

/* ---------- la scène de la visite : elle arrive couchée (le script la redresse) ; les anneaux tournent derrière le téléphone ---------- */
.visite__scene { transform-origin: 50% 100%; will-change: transform; }
.visite__fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- le haut de page : la photo passe au-dessus du téléphone pour devenir son écran ---------- */
.ouv.is-ecran .ouv__photos { z-index: 5; }

/* ---------- LA PROMESSE : un mot à la fois, qui se remplit ; puis des particules écrivent la suite ---------- */
.promesse { height: 440vh; background: var(--fond); }
.promesse__ciel, .promesse__toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.promesse__toile { z-index: 2; }
.promesse__in { position: relative; z-index: 1; transform: none !important; }
.js:not(.calme) .promesse__lignes { --mot: min(clamp(3.2rem, 1rem + 9.4vw, 10rem), 23vh); position: relative; display: block; width: 100%; height: calc(var(--mot) * 1.16); margin: clamp(30px, 8vh, 90px) 0; }
.js:not(.calme) .pl { position: absolute; inset: 0; display: grid; place-items: center; visibility: hidden; will-change: transform, opacity; }
.js:not(.calme) .pl__mot > b { position: relative; font-size: var(--mot); line-height: 1.08; white-space: nowrap; opacity: 1; transform: none; transition: none; background: none; color: var(--fond); -webkit-text-stroke: 2.5px rgba(var(--acc-a), .8); paint-order: stroke fill; }
.js:not(.calme) .pl.is-on .pl__mot > b, .js:not(.calme) .pl--goulet.is-on .pl__mot > b { background: none; color: var(--fond); transform: none; }
.js:not(.calme) .pl__mot > b::after { content: attr(data-mot); position: absolute; inset: 0; -webkit-text-stroke: 0 transparent; background: linear-gradient(100deg, #fff 0%, #e2e6ff 50%, #a9b6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; clip-path: inset(-12% calc((1 - var(--f, 0)) * 100%) -22% -2%); }
.js:not(.calme) .pl__mot > b::before { content: ""; position: absolute; z-index: 1; top: 6%; bottom: 4%; left: calc(var(--f, 0) * 100%); width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 24px 5px rgba(var(--acc-a), .95); opacity: calc(min(var(--f, 0), 1 - var(--f, 0)) * 14); }
.js:not(.calme) .pl--goulet .pl__mot > b { -webkit-text-stroke-color: rgba(var(--cours-a), .85); }
.js:not(.calme) .pl--goulet .pl__mot > b::after { background-image: linear-gradient(100deg, #fff 0%, #ffe9a6 50%, var(--cours) 100%); }
.js:not(.calme) .pl--goulet .pl__mot > b::before { box-shadow: 0 0 24px 5px rgba(var(--cours-a), .95); }
/* les deux items de l'app : au-dessus à gauche, au-dessous à droite du mot */
.promesse .pl .puce { top: auto; bottom: auto; left: auto; right: auto; margin: 0; translate: none; transform: translateY(18px) scale(.6) rotate(var(--r, 0deg)); }
.promesse .pl .puce--g { right: 54%; bottom: calc(100% + 2px); } .promesse .pl .puce--d { left: 54%; top: calc(100% + 2px); display: inline-flex; }
.promesse .pl.is-on .puce { opacity: 1; transform: rotate(var(--r, 0deg)); }
/* la phrase de fin est écrite par les particules ; le texte reste dans la page pour les lecteurs d'écran et les moteurs */
.js:not(.calme) .promesse__fin { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .promesse { height: 420vh; }
  .js:not(.calme) .promesse__lignes { --mot: min(clamp(2.5rem, 13.4vw, 3.6rem), 11vh); height: calc(var(--mot) * 2.3); }
  .js:not(.calme) .pl__mot > b { white-space: normal; -webkit-text-stroke-width: 2px; }
  .promesse .pl .puce--g { right: auto; left: 50%; translate: -50% 0; } .promesse .pl .puce--d { left: 50%; translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) { .promesse { height: auto; } }

/* ---------- l'appel final : son haut se fond dans la section d'avant (plus de marche) ---------- */
.appel__photo::after { background: linear-gradient(180deg, var(--fond) 0%, rgba(12, 12, 18, .92) 14%, rgba(17, 17, 24, .56) 46%, rgba(13, 13, 19, .8) 70%, var(--fond) 96%), radial-gradient(56% 60% at 50% 62%, rgba(var(--violet-a), .42), transparent 72%); }
.appel__photo img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 74%, transparent 100%); }
.appel--photo { padding-top: clamp(120px, 14vw, 210px); }
/* les fonctionnalités : un fond plus sombre (demande du fondateur), la trame à peine levée derrière le titre */
.section--bandeau { background: #0a0a0f; border-top-color: transparent; }
.section--bandeau .bandeau__piste span { color: #0a0a0f; } .section--bandeau .bandeau__piste span:nth-of-type(5n+1) { color: var(--titre); } .section--bandeau .bandeau__piste span:nth-of-type(5n+4) { color: transparent; }
body[data-ton="clair"] .section--bandeau { background: var(--fond-2); }
/* sous chaque sport, les deux compétences tiennent sur UNE ligne (la seconde se coupe par « … » si la carte est étroite) */
.terrain figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: start; gap: 8px; }
.terrain figcaption b { grid-column: 1 / -1; }
.terrain .mini { display: block; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terrain .mini i { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; }
/* les repères : une carte peut partir à gauche sur grand écran seulement (--gb) ou sur téléphone seulement (--gm), et prendre
   un autre angle et une autre longueur sur téléphone (--am, --lm) */
@media (min-width: 981px) { .repere--gb .repere__carte { transform: translate(-100%, -50%) scale(.82); transform-origin: 100% 50%; } .sport.is-on .repere--gb .repere__carte { transform: translate(-100%, -50%) scale(1); } }
/* (20/10/2026) 980 px et non plus 760 : la tablette en hauteur est cadrée comme le téléphone (main.js, cadrer) */
@media (max-width: 980px) {
  .repere__trait { width: var(--lm, var(--l)); transform: rotate(var(--am, var(--a))) scaleX(0); } .sport.is-on .repere__trait { transform: rotate(var(--am, var(--a))) scaleX(1); }
  .repere__carte { left: calc(cos(var(--am, var(--a))) * var(--lm, var(--l))); top: calc(sin(var(--am, var(--a))) * var(--lm, var(--l))); }
  .repere--gm .repere__carte { transform: translate(-100%, -50%) scale(.82); transform-origin: 100% 50%; } .sport.is-on .repere--gm .repere__carte { transform: translate(-100%, -50%) scale(1); }
}
/* le moteur, par-dessus le sol de l'arbre : chaque temps repose sur une plaque sombre et floutée, et son libellé est clair —
   un texte gris posé directement sur un fond qui bouge n'était pas lisible (remarque du fondateur sur le contraste) */
.ouv__moteur .temps__i { background: rgba(9, 9, 15, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .07); }
.ouv__moteur .temps__i b { color: #d9d9ea; } .ouv__moteur .temps__i i { color: #c2c2d8; border-color: #55557a; }
.ouv__moteur .temps__i.is-on { background: rgba(26, 26, 38, .94); border-color: rgba(var(--acc-a), .5); } .ouv__moteur .temps__i.is-on b { color: #fff; } .ouv__moteur .temps__i.is-on i { color: #fff; }
.ouv__moteur .temps__i p { color: #dcdcec; }
.ouv__moteur .titre, .ouv__moteur .sur { text-shadow: 0 2px 16px rgba(8, 8, 13, .95), 0 0 44px rgba(8, 8, 13, .85); }
.ouv__brume { pointer-events: none; }
/* les temps du moteur qui ne sont pas ouverts : une pastille sombre derrière le libellé seulement (pas une plaque de toute la hauteur réservée) */
.ouv__moteur .temps__i:not(.is-on) { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
.ouv__moteur .temps__i:not(.is-on) button { width: auto; padding: 7px 18px 7px 8px; margin-left: -8px; border-radius: 999px; background: rgba(9, 9, 15, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* LA BANDE DES SPORTS, aérée : le nom du sport est plus petit ; les compétences ne sont plus sous la photo mais dans un voile
   qui monte AU SURVOL (le nom, puis les deux compétences, l'un après l'autre). Sur un écran tactile, le voile est toujours là. */
.terrain__nom { font-size: clamp(1.6rem, 3vw, 2.6rem); font-size: 9.2cqw; margin: 0 0 calc(.1em + 10px); -webkit-text-stroke-width: 2.2px; }
.terrain { position: relative; }
.terrain__photo { transition: transform .6s var(--ease-entree), box-shadow .5s var(--ease-doux); }
.terrain__photo img { transition: scale .9s var(--ease-entree), filter .5s var(--ease-doux); }
.terrain__photo::after { transition: opacity .45s var(--ease-doux); background: linear-gradient(180deg, rgba(8, 8, 13, 0) 30%, rgba(8, 8, 13, .93) 100%), linear-gradient(120deg, rgba(var(--acc-a), .3), rgba(var(--violet-a), .24)); opacity: 0; }
.terrain__photo::before { content: "+"; position: absolute; z-index: 2; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; font-weight: 500; line-height: 1; color: #fff; background: rgba(12, 12, 18, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1.5px solid rgba(255, 255, 255, .3); transition: transform .5s var(--ressort), background var(--mo-normal), border-color var(--mo-normal); }
.terrain figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding: clamp(14px, 4cqw, 24px); pointer-events: none; }
.terrain figcaption > * { opacity: 0; transform: translateY(18px); transition: opacity .3s var(--ease-doux), transform .4s var(--ease-doux); }
.terrain figcaption b { font-size: clamp(1.2rem, 6cqw, 1.9rem); letter-spacing: -.02em; color: #fff; }
.terrain .mini { background: rgba(20, 20, 30, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
.terrain:hover .terrain__photo, .terrain.is-survol .terrain__photo { transform: translateY(-6px); box-shadow: 0 50px 90px -40px rgba(var(--violet-a), .8), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.terrain:hover .terrain__photo img, .terrain.is-survol .terrain__photo img { scale: 1.07; filter: saturate(1.1); }
.terrain:hover .terrain__photo::after, .terrain.is-survol .terrain__photo::after { opacity: 1; }
.terrain:hover .terrain__photo::before, .terrain.is-survol .terrain__photo::before { transform: rotate(135deg); background: var(--acc); border-color: transparent; }
.terrain:hover figcaption > *, .terrain.is-survol figcaption > * { opacity: 1; transform: translateY(-6px); transition: opacity .4s var(--ease-doux) calc(.08s + var(--o, 0) * .09s), transform .65s var(--ressort) calc(.08s + var(--o, 0) * .09s); }
.terrain figcaption > :nth-child(2) { --o: 1; } .terrain figcaption > :nth-child(3) { --o: 2; }
@media (hover: none) { .terrain__photo::after { opacity: 1; } .terrain__photo::before { display: none; } .terrain figcaption > * { opacity: 1; transform: none; } }
.calme .terrain figcaption > * { opacity: 1; transform: none; } .calme .terrain__photo::after { opacity: 1; }
.terrains__tete { margin-bottom: clamp(30px, 5vh, 60px); }
/* les titres n'entrent pas tous de la même façon : « vif » = les mots sont lancés de la droite et freinent ; « lettres » = chaque lettre bascule */
.is-coupe[data-anim="vif"] .mm, .is-coupe[data-anim="lettres"] .mm { overflow: visible; }
.is-coupe[data-anim="vif"] .mm__i { transform: translateX(90px) skewX(-22deg); opacity: 0; }
.is-coupe[data-anim="vif"].is-leve .mm__i { transform: none; opacity: 1; transition: transform .75s var(--ressort) calc(var(--n) * 60ms), opacity .22s linear calc(var(--n) * 60ms); }
.is-coupe[data-anim="lettres"] .mm { perspective: 700px; } .is-coupe[data-anim="lettres"] .mm__i { transform: none; }
.is-coupe[data-anim="lettres"] .ll { display: inline-block; transform-origin: 50% 100%; transform: rotateX(-94deg) translateY(.2em); opacity: 0; }
.is-coupe[data-anim="lettres"].is-leve .ll { transform: none; opacity: 1; transition: transform .7s var(--ease-entree) calc(var(--k) * 17ms), opacity .2s linear calc(var(--k) * 17ms); }
.is-coupe[data-anim="lettres"]:not(.is-pose) .marque-t .ll { color: var(--acc-clair); -webkit-text-fill-color: var(--acc-clair); }
.is-coupe.is-pose .ll { display: inline; transform: none; transition: none; opacity: 1; }
.porte { will-change: transform; }
/* le bandeau : les jambages (g, p) étaient coupés par le bas de la bande */
.bandeau { padding-bottom: clamp(16px, 2.4vw, 34px); } .bandeau__piste { line-height: 1.2; padding-bottom: .08em; }

/* ==========================================================================================================
   LA PARTIE CLAIRE S'ANIME AUSSI (le fondateur : « il faut animer la partie blanche aussi ») : un fond de lueurs qui
   dérivent, des offres qui se lèvent en éventail, la photo de l'histoire qui s'ouvre, les questions qui entrent des deux
   côtés, le formulaire qui pivote. Tout part de « is-la » (la section entre à l'écran) ou de « is-vu ».
   ========================================================================================================== */
#pricing, #about, #faq, #contact { overflow: clip; }
#pricing::after, #about::after, #faq::after, #contact::after { content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease-doux);
  background: radial-gradient(30% 26% at 16% 22%, rgba(94, 115, 235, .26), transparent 70%), radial-gradient(28% 26% at 84% 16%, rgba(124, 58, 237, .2), transparent 70%), radial-gradient(36% 30% at 62% 86%, rgba(94, 115, 235, .2), transparent 70%), radial-gradient(22% 20% at 30% 70%, rgba(164, 123, 255, .16), transparent 70%);
  animation: lueurs 18s ease-in-out infinite alternate; }
#about::after, #contact::after { animation-duration: 23s; animation-direction: alternate-reverse; }
body[data-ton="clair"] #pricing::after, body[data-ton="clair"] #about::after, body[data-ton="clair"] #faq::after, body[data-ton="clair"] #contact::after { opacity: 1; }
#pricing > .conteneur, #about > .conteneur, #faq > .conteneur, #contact > .conteneur { position: relative; z-index: 1; }
@keyframes lueurs { from { transform: translate3d(-3%, 2%, 0) rotate(-3deg) scale(1); } to { transform: translate3d(4%, -3%, 0) rotate(5deg) scale(1.12); } }
.calme #pricing::after, .calme #about::after, .calme #faq::after, .calme #contact::after { animation: none; }

/* les offres : elles se lèvent en éventail, celle du milieu d'abord ; l'offre mise en avant respire */
.js:not(.calme) .offres .offre.is-vu { animation: offre-leve 1s cubic-bezier(.2, .9, .25, 1.05) var(--od, 0s) backwards; }
.offres .offre:nth-child(1) { --rz: -9deg; --tx: -60px; --od: .24s; } .offres .offre:nth-child(2) { --rz: -4.5deg; --tx: -30px; --od: .12s; } .offres .offre:nth-child(3) { --rz: 0deg; --tx: 0px; --od: 0s; }
.offres .offre:nth-child(4) { --rz: 4.5deg; --tx: 30px; --od: .12s; } .offres .offre:nth-child(5) { --rz: 9deg; --tx: 60px; --od: .24s; }
@keyframes offre-leve { from { opacity: 0; transform: translate3d(var(--tx, 0), 110px, 0) rotate(var(--rz, 0deg)) scale(.86); } }
.js:not(.calme) .offre.is-vu li { animation: glisse-d .5s var(--ease-entree) backwards; animation-delay: calc(var(--od, 0s) + .5s); }
.js:not(.calme) .offre.is-vu li:nth-child(2) { animation-delay: calc(var(--od, 0s) + .56s); } .js:not(.calme) .offre.is-vu li:nth-child(3) { animation-delay: calc(var(--od, 0s) + .62s); } .js:not(.calme) .offre.is-vu li:nth-child(4) { animation-delay: calc(var(--od, 0s) + .68s); }
.js:not(.calme) .offre.is-vu li:nth-child(n+5) { animation-delay: calc(var(--od, 0s) + .74s); }
.js:not(.calme) .offre--fort { position: relative; } .js:not(.calme) .offre--fort::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: var(--grad); opacity: .0; filter: blur(22px); animation: souffle 3.6s ease-in-out infinite; }
@keyframes souffle { 0%, 100% { opacity: .18; transform: scale(.98); } 50% { opacity: .5; transform: scale(1.03); } }
@keyframes glisse-d { from { opacity: 0; transform: translateX(-16px); } }

/* l'histoire : la photo s'ouvre comme un volet, les paragraphes entrent l'un après l'autre, le portrait rebondit */
.js:not(.calme) .histoire__photo.is-vu { animation: volet 1.25s cubic-bezier(.7, 0, .2, 1) backwards; }
.js:not(.calme) .histoire__photo.is-vu img { animation: recul 1.6s var(--ease-entree) backwards; }
@keyframes volet { from { clip-path: inset(0 100% 0 0 round 28px); } to { clip-path: inset(0 0 0 0 round 28px); } }
@keyframes recul { from { transform: scale(1.3); } }
.js:not(.calme) .histoire__texte.is-vu > p { animation: glisse-g .8s var(--ease-entree) backwards; }
.js:not(.calme) .histoire__texte.is-vu > p:nth-child(2) { animation-delay: .14s; } .js:not(.calme) .histoire__texte.is-vu > p:nth-child(3) { animation-delay: .28s; } .js:not(.calme) .histoire__texte.is-vu > p:nth-child(4) { animation-delay: .42s; }
.js:not(.calme) .histoire__texte.is-vu .histoire__portrait { animation: rebond .8s var(--ressort) .7s backwards; }
@keyframes glisse-g { from { opacity: 0; transform: translateX(46px); } }
@keyframes rebond { from { transform: scale(0) rotate(-30deg); } }

/* les questions : elles entrent des deux côtés, en alternance (et rejouent quand on change d'onglet) */
.js:not(.calme) #faq.is-la .faq.is-on .plie { animation: plie-g .7s var(--ressort) backwards; }
.js:not(.calme) #faq.is-la .faq.is-on .plie:nth-child(even) { animation-name: plie-d; }
#faq .plie:nth-child(2) { animation-delay: .08s; } #faq .plie:nth-child(3) { animation-delay: .16s; } #faq .plie:nth-child(4) { animation-delay: .24s; } #faq .plie:nth-child(5) { animation-delay: .32s; } #faq .plie:nth-child(n+6) { animation-delay: .4s; }
@keyframes plie-g { from { opacity: 0; transform: translateX(-70px) rotate(-2deg); } } @keyframes plie-d { from { opacity: 0; transform: translateX(70px) rotate(2deg); } }

/* le contact : le formulaire pivote vers nous, les deux réseaux arrivent de la gauche */
.js:not(.calme) .formulaire.is-vu { animation: pivote 1.1s cubic-bezier(.2, .85, .25, 1) backwards; transform-origin: 100% 50%; }
@keyframes pivote { from { opacity: 0; transform: perspective(1300px) rotateY(-26deg) translate3d(90px, 0, 0); } }
.js:not(.calme) .contact__fils.is-vu .fil { animation: fil-entre .8s var(--ressort) .15s backwards; } .js:not(.calme) .contact__fils.is-vu .fil + .fil { animation-delay: .3s; }
@keyframes fil-entre { from { opacity: 0; transform: translateX(-80px) rotate(-3deg); } }
/* le titre du moteur : l'ombre portée traversait la partie en dégradé (un texte « transparent » laisse voir son ombre) et l'assombrissait */
.ouv__moteur .titre .marque-t { text-shadow: none; background-image: linear-gradient(120deg, #d3daff 0%, #aebbff 45%, #d2bbff 100%); filter: drop-shadow(0 2px 12px rgba(8, 8, 13, .8)); }
/* les noms des sports : un peu d'air entre les lettres (leurs contours se touchaient) */
.terrain__nom { letter-spacing: .035em; }
/* les cartes de fonctionnalités, AU SURVOL (l'inclinaison avec reflet a été refusée) : la carte monte, un filet de la marque se trace
   en haut de gauche à droite, la pastille de l'icône se remplit du dégradé et pivote, le titre avance d'un cran */
.fonction { position: relative; overflow: hidden; }
.fonction::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease-entree); }
.fonction:hover::before { transform: scaleX(1); }
.fonction:hover { transform: translateY(-6px); border-color: rgba(var(--acc-a), .5); box-shadow: 0 30px 56px -34px rgba(var(--acc-a), .8); }
.fonction__ic { transition: background-color .35s var(--ease-doux), color .35s var(--ease-doux), transform .55s var(--ressort), box-shadow .35s; }
.fonction:hover .fonction__ic { background: var(--grad); color: #fff; transform: rotate(-8deg) scale(1.14); box-shadow: 0 10px 22px -10px rgba(var(--violet-a), .9); }
.fonction h4 { transition: transform .45s var(--ease-entree), color .3s; } .fonction:hover h4 { transform: translateX(5px); }
.fonction p { transition: color .3s; } .fonction:hover p { color: var(--titre); }

/* ==========================================================================================================
   FINITIONS DE LA PARTIE CLAIRE (demande du fondateur) : une trame de points en coin, des offres qui ont du relief, une
   photo d'histoire encadrée, des questions qui réagissent, un formulaire soigné. Même langage de survol que les cartes
   sombres : la carte monte et un filet de la marque se trace en haut.
   ========================================================================================================== */
#pricing::before, #about::before, #faq::before, #contact::before { content: ""; position: absolute; z-index: 0; top: 0; right: 0; width: min(620px, 60%); height: 460px; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease-doux);
  background-image: radial-gradient(rgba(94, 115, 235, .34) 1.1px, transparent 1.7px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(90% 90% at 100% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(90% 90% at 100% 0%, #000 0%, transparent 72%); }
#about::before, #contact::before { right: auto; left: 0; -webkit-mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, transparent 72%); }
body[data-ton="clair"] #pricing::before, body[data-ton="clair"] #about::before, body[data-ton="clair"] #faq::before, body[data-ton="clair"] #contact::before { opacity: 1; }

/* les offres */
.offre { position: relative; background-image: linear-gradient(90deg, #5E73EB, #7C3AED); background-repeat: no-repeat; background-size: 0 3px; background-position: 0 0;
  transition: background-size .55s var(--ease-entree), background-color .5s var(--ease-doux), border-color .4s var(--ease-doux), transform .5s var(--ressort-pression), box-shadow .4s var(--ease-doux); }
.offre:hover { background-size: 100% 3px; transform: translateY(-8px); border-color: rgba(var(--acc-a), .5); box-shadow: 0 36px 64px -38px rgba(var(--acc-a), .75); }
body[data-ton="clair"] .offre { border-color: #e2e3f3; box-shadow: inset 0 1px 0 #fff, 0 20px 44px -30px rgba(40, 40, 110, .4); }
body[data-ton="clair"] .offre:hover { border-color: rgba(var(--acc-a), .55); box-shadow: inset 0 1px 0 #fff, 0 40px 70px -40px rgba(var(--acc-a), .7); }
.offre--fort { background-size: 100% 3px; transform: translateY(-10px); }
.offre--fort:hover { transform: translateY(-16px); }
body[data-ton="clair"] .offre--fort { border-color: rgba(var(--acc-a), .6); box-shadow: inset 0 1px 0 #fff, 0 44px 80px -40px rgba(var(--acc-a), .85); }
.offre--fort .offre__prix b { background: var(--grad-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offre h3 { letter-spacing: -.01em; }
.offre .btn { transition: transform var(--mo-court) var(--ressort-pression), box-shadow var(--mo-court), background var(--mo-court), border-color var(--mo-court), color var(--mo-court); }
.offre:hover .btn--contour { border-color: var(--acc); color: var(--acc-clair); }

/* le choix mois / an et les onglets de la FAQ : l'onglet choisi prend le dégradé */
body[data-ton="clair"] .onglets { background: #fff; border-color: #e2e3f3; box-shadow: 0 12px 30px -22px rgba(40, 40, 110, .45); }
body[data-ton="clair"] .onglets__b.is-on { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(var(--acc-a), .9); }
.onglets__b { transition: background var(--mo-normal), color var(--mo-normal), box-shadow var(--mo-normal), transform var(--mo-court) var(--ressort-pression); } .onglets__b:not(.is-on):hover { transform: translateY(-1px); color: var(--acc-clair); }

/* l'histoire : la photo est posée sur un aplat de la marque, la première phrase est mise en exergue, la signature est une carte */
.histoire__photo { position: relative; z-index: 0; }
body[data-ton="clair"] .histoire__photo { box-shadow: 18px 18px 0 -3px rgba(var(--acc-a), .2), -10px -10px 0 -3px rgba(var(--violet-a), .12), 0 40px 70px -36px rgba(40, 40, 110, .55); }
.histoire__photo img { transition: transform 1.2s var(--ease-entree); } .histoire__photo:hover img { transform: scale(1.05); }
.histoire__texte > p:first-child { padding-left: 20px; border-left: 3px solid var(--acc); border-image: linear-gradient(180deg, #5E73EB, #7C3AED) 1; }
.histoire__signe { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px 12px 12px; border-radius: 999px; background: var(--carte); border: 1.5px solid var(--bord); box-shadow: 0 18px 36px -24px rgba(40, 40, 110, .5); transition: transform .45s var(--ressort), box-shadow .3s; }
.histoire__signe:hover { transform: translateY(-3px); }
.histoire__portrait { box-shadow: 0 0 0 3px var(--carte), 0 0 0 5px rgba(var(--acc-a), .5); }

/* les questions : celle qui est ouverte porte un filet de la marque à gauche ; les autres avancent d'un cran au survol */
.plie { background-image: linear-gradient(180deg, #5E73EB, #7C3AED); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .45s var(--ease-entree), border-color .3s var(--ease-doux), box-shadow .3s var(--ease-doux), transform .4s var(--ressort-pression), background-color .5s var(--ease-doux); }
.plie:hover { transform: translateX(5px); border-color: rgba(var(--acc-a), .45); }
.plie[open] { background-size: 4px 100%; border-color: rgba(var(--acc-a), .5); box-shadow: 0 24px 46px -32px rgba(var(--acc-a), .75); transform: none; }
.plie summary { transition: color .25s; } .plie:hover summary, .plie[open] summary { color: var(--acc-clair); }

/* le contact : la carte du formulaire a un liseré de la marque, les champs répondent */
.formulaire { position: relative; overflow: hidden; }
.formulaire::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
body[data-ton="clair"] .formulaire { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: #e2e3f3; box-shadow: 0 50px 90px -50px rgba(var(--violet-a), .7), 0 20px 40px -30px rgba(40, 40, 110, .4); }
body[data-ton="clair"] .champ input, body[data-ton="clair"] .champ textarea { box-shadow: 0 1px 2px rgba(40, 40, 110, .06); }
body[data-ton="clair"] .champ input:focus, body[data-ton="clair"] .champ textarea:focus { box-shadow: 0 0 0 4px rgba(var(--acc-a), .18); }
.champ > span { transition: color .25s; } .champ:focus-within > span { color: var(--acc-clair); }
.contact__accroche { font-weight: 600; }
/* la toile des grains (WebGL) sous celle du texte net */
.promesse__grains { z-index: 2; } .promesse__toile:not(.promesse__grains) { z-index: 3; }
.goulot__in { will-change: opacity, transform; }
/* l'escalade : la photo d'origine est en noir et blanc — on lui rend ses couleurs par zones (ciel et mer bleus, forêt verte, roche ocre,
   peau), en ne teintant que la couleur : le relief et la lumière restent ceux de la photo */
.sport--nb img { filter: contrast(1.06) brightness(.94); }
.sport--nb picture { position: relative; }
.sport--nb picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color;
  background: radial-gradient(3.2% 9% at 65.6% 60.5%, #c58c66 0%, #c58c66 60%, rgba(197, 140, 102, 0) 100%),
    radial-gradient(64% 36% at 22% 96%, #3c7a46 0%, #3c7a46 58%, rgba(60, 122, 70, 0) 100%),
    linear-gradient(107deg, rgba(176, 131, 90, 0) 0%, rgba(176, 131, 90, 0) 62%, #b0835a 67%, #b0835a 100%),
    radial-gradient(66% 40% at 74% 0%, #a57b55 0%, #a57b55 72%, rgba(165, 123, 85, 0) 100%),
    linear-gradient(180deg, #3f7fdc 0%, #5b94e2 55%, #6fa3e6 100%); }
/* la promesse : les items surgissent tout de suite (plus de retard) — en défilant vite on ne les voyait pas */
.promesse .pl.is-on .puce { transition: opacity .18s var(--ease-doux), transform .45s var(--ressort); } .promesse .pl.is-on .puce--d { transition-delay: .06s; }
/* les petites icônes des fonctionnalités vivent : elles flottent doucement et, de temps en temps, s'effacent et se retracent (chaque colonne à son tour) ; au survol, tout de suite */
.js:not(.calme) .fonction.is-vu .fonction__ic .ic { animation: icone-trace 7.5s var(--ease-doux) 2.4s infinite, icone-flotte 4.2s ease-in-out 1.6s infinite; }
.js:not(.calme) .grille .fonction:nth-child(3n+2).is-vu .fonction__ic .ic { animation-delay: 4.3s, 2.2s; } .js:not(.calme) .grille .fonction:nth-child(3n).is-vu .fonction__ic .ic { animation-delay: 6.2s, 2.8s; }
.js:not(.calme) .fonction.is-vu:hover .fonction__ic .ic { animation: icone-trace 1.5s var(--ease-doux) infinite, icone-flotte 1.2s ease-in-out infinite; }
@keyframes icone-trace { 0%, 100% { stroke-dashoffset: 0; } 5% { stroke-dashoffset: 96; } 20% { stroke-dashoffset: 0; } }
@keyframes icone-flotte { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px) rotate(-5deg) scale(1.06); } }
/* LE HERO 2 EN PLEIN JOUR (demande du fondateur : un voyage de jour, pas un « cimetière hanté ») : ciel bleu, nuages blancs. Le texte
   passe en blanc franc avec une ombre bleu nuit ; la partie en dégradé du titre devient claire (un bleu sur du bleu ne se lisait pas). */
.ouv { background: #1c4aa8; }
.ouv__moteur .sur { color: #fff; } .ouv__moteur .sur::before { background: #fff; }
.ouv__moteur .titre { color: #fff; text-shadow: 0 2px 18px rgba(10, 30, 96, .75), 0 0 46px rgba(10, 30, 96, .6); }
.ouv__moteur .titre .marque-t { background-image: linear-gradient(120deg, #ffffff 0%, #fff3c4 55%, #ffd76a 100%); filter: drop-shadow(0 2px 14px rgba(10, 30, 96, .7)); }
.ouv__moteur .temps__i:not(.is-on) button { background: rgba(10, 22, 66, .66); }
.ouv__moteur .temps__i.is-on { background: rgba(12, 20, 52, .9); border-color: rgba(255, 255, 255, .28); }
.ouv__tel { filter: drop-shadow(0 46px 60px rgba(8, 24, 80, .6)) drop-shadow(0 0 70px rgba(255, 255, 255, .3)); }
/* une photo qui commence plus à droite que l'écran : son bord gauche se fond dans la nuit du voile (jamais d'arête visible) */
/* ⚠ elle ne se fond plus dans le noir (cela s'ajoutait au voile du texte : une ombre « doublée » sur cette seule photo) mais dans son
   propre prolongement : la même image, en miroir à gauche de son bord et floutée, glissée dessous. Le voile, le haut et le bas sombres
   couvrent aussi ce prolongement ; le balayage d'entrée l'inclut (clip-path jusqu'à -100 %). */
.sport__fond { display: none; }
@media (min-width: 761px) {
  .sport--fondu picture { position: relative; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%); }
  .sport--fondu .sport__fond { display: block; position: absolute; z-index: 0; top: 0; bottom: 0; left: -100%; width: 200%; overflow: hidden; }
  .sport--fondu .sport__fond > span { position: absolute; inset: -60px; display: flex; filter: blur(28px) saturate(1.05); }
  .sport--fondu .sport__fond img { flex: none; width: 50%; height: 100%; object-fit: cover; animation: none !important; transform: none; }
  .sport--fondu .sport__fond img:first-child { transform: scaleX(-1); }
  .sport--fondu::after { left: -100%; }
  .sport--fondu.is-on, .sport--fondu.is-entre { clip-path: inset(0 0 0 -100%); }
}

/* ==========================================================================================================
   LA PARTIE CLAIRE, REVUE (le fondateur : « le jeu de couleur et les effets sur la partie claire laissent à désirer »).
   Le blanc lavande est remplacé par UN CIEL DE JOUR — le même que celui du hero 2 : la page raconte la nuit, puis le jour.
   Les cartes sont en verre dépoli posées sur ce ciel ; l'offre mise en avant est en dégradé plein, texte blanc ;
   de grandes lueurs (bleu, violet, pêche, cyan) et deux jeux d'anneaux dérivent derrière.
   ========================================================================================================== */
body[data-ton="clair"] {
  --fond: #edf3ff; --fond-2: #e4edff; --carte: rgba(255, 255, 255, .74); --carte-2: #e6eeff; --champ: #f4f8ff; --champ-survol: #eaf1ff; --bord: rgba(255, 255, 255, .96); --bord-2: #c3d0f0;
  --titre: #0e1a3f; --txt: #3a476b; --doux: #5a678a; --acc-clair: #2f4fe0; --ok: #12965a; --ok-a: 18, 150, 90;
  --verre: rgba(236, 243, 255, .8); --lisere: rgba(30, 60, 160, .1); --survol: rgba(30, 60, 160, .07);
  --grad-texte: linear-gradient(120deg, #2850e6 0%, #7C3AED 100%); --carte-fort: linear-gradient(160deg, #4f6bf0, #7C3AED);
}
#pricing::after, #about::after, #faq::after, #contact::after { inset: -14%;
  background:
    radial-gradient(circle at 86% 16%, transparent 0 148px, rgba(47, 79, 224, .2) 149px 150.5px, transparent 151.5px), radial-gradient(circle at 86% 16%, transparent 0 228px, rgba(47, 79, 224, .13) 229px 230.5px, transparent 231.5px), radial-gradient(circle at 86% 16%, transparent 0 318px, rgba(124, 58, 237, .1) 319px 320.5px, transparent 321.5px),
    radial-gradient(circle at 12% 84%, transparent 0 118px, rgba(124, 58, 237, .18) 119px 120.5px, transparent 121.5px), radial-gradient(circle at 12% 84%, transparent 0 198px, rgba(47, 79, 224, .12) 199px 200.5px, transparent 201.5px),
    radial-gradient(30% 28% at 16% 20%, rgba(120, 170, 255, .62), transparent 70%), radial-gradient(28% 26% at 84% 14%, rgba(190, 160, 255, .5), transparent 70%), radial-gradient(34% 30% at 64% 88%, rgba(255, 208, 180, .5), transparent 70%), radial-gradient(24% 22% at 30% 72%, rgba(150, 228, 255, .42), transparent 70%),
    linear-gradient(180deg, #d9e7ff 0%, #edf3ff 46%, #f4efff 100%); }
/* le verre */
body[data-ton="clair"] .offre, body[data-ton="clair"] .plie, body[data-ton="clair"] .fil, body[data-ton="clair"] .formulaire, body[data-ton="clair"] .onglets, body[data-ton="clair"] .histoire__signe {
  background-color: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-color: rgba(255, 255, 255, .96);
  box-shadow: inset 0 1px 0 #fff, 0 28px 56px -34px rgba(36, 66, 170, .55), 0 2px 6px -2px rgba(36, 66, 170, .1); }
body[data-ton="clair"] .offre:hover, body[data-ton="clair"] .plie:hover, body[data-ton="clair"] .fil:hover { background-color: rgba(255, 255, 255, .9); border-color: rgba(var(--acc-a), .5); box-shadow: inset 0 1px 0 #fff, 0 44px 76px -40px rgba(47, 79, 224, .75); }
body[data-ton="clair"] .plie[open] { background-color: rgba(255, 255, 255, .92); }
/* l'offre mise en avant : dégradé plein, tout en blanc, un reflet qui passe */
body[data-ton="clair"] .offre--fort { --titre: #fff; --txt: rgba(255, 255, 255, .92); --doux: rgba(255, 255, 255, .78); --acc-clair: #fff; --ok: #b9ffd9; --bord: rgba(255, 255, 255, .3); --bord-2: rgba(255, 255, 255, .4);
  background: linear-gradient(160deg, #3f62f2 0%, #6a4ff0 52%, #8a3cf0 100%); border-color: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 50px 90px -38px rgba(74, 86, 235, .95); -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-ton="clair"] .offre--fort:hover { background: linear-gradient(160deg, #4a6cf6 0%, #7458f4 52%, #9446f4 100%); border-color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 60px 100px -40px rgba(74, 86, 235, 1); }
body[data-ton="clair"] .offre--fort .offre__prix b { background: none; -webkit-text-fill-color: #fff; color: #fff; }
body[data-ton="clair"] .offre--fort .btn { background: #fff; color: #2f4fe0; border-color: #fff; box-shadow: 0 14px 26px -14px rgba(10, 20, 80, .6); } body[data-ton="clair"] .offre--fort .btn:hover { transform: translateY(-2px); }
body[data-ton="clair"] .offre--fort .offre__essai { background: #fff; color: #2f4fe0; }
.offre--fort::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .26) 50%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 130% 0; animation: reflet 5.5s ease-in-out 1.5s infinite; }
@keyframes reflet { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -40% 0; } }
.calme .offre--fort::after { animation: none; }
/* les onglets choisis, les champs, la photo */
body[data-ton="clair"] .onglets__b.is-on { background: linear-gradient(135deg, #3f62f2, #7C3AED); }
body[data-ton="clair"] .champ input, body[data-ton="clair"] .champ textarea { background: rgba(255, 255, 255, .92); border-color: #c8d4f2; }
body[data-ton="clair"] .histoire__photo { box-shadow: 18px 18px 0 -3px rgba(47, 79, 224, .22), -12px -12px 0 -3px rgba(124, 58, 237, .14), 0 44px 76px -36px rgba(36, 66, 170, .6); }
body[data-ton="clair"] .tete { box-shadow: 0 10px 30px -22px rgba(36, 66, 170, .6); }
body[data-ton="clair"] .sur { color: #2f4fe0; }
/* l'offre en dégradé : la liste en blanc franc */
body[data-ton="clair"] .offre--fort li, body[data-ton="clair"] .offre--fort li b, body[data-ton="clair"] .offre--fort h3, body[data-ton="clair"] .offre--fort p { color: #fff; }
/* L'OFFRE MISE EN AVANT, RÉPARÉE (« c'est quoi cette horreur ») : le filet tracé au survol des offres avait remplacé SON fond — elle était
   devenue transparente, et son halo flou se voyait au travers. Elle a de nouveau un fond plein dans les deux tonalités, et le halo est retiré. */
.offre--fort::before { display: none !important; }
.offre.offre--fort { background: linear-gradient(180deg, #2a2a58 0%, #1c1c28 62%); border-color: rgba(var(--acc-a), .6); }
.offre.offre--fort:hover { background: linear-gradient(180deg, #32326a 0%, #20202e 62%); }
body[data-ton="clair"] .offre.offre--fort { --titre: #fff; --txt: rgba(255, 255, 255, .94); --doux: rgba(255, 255, 255, .8); --acc-clair: #fff; --ok: #b9ffd9;
  background: linear-gradient(160deg, #3f62f2 0%, #6a4ff0 52%, #8a3cf0 100%); border-color: rgba(255, 255, 255, .55); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 46px 80px -40px rgba(74, 86, 235, .95); }
body[data-ton="clair"] .offre.offre--fort:hover { background: linear-gradient(160deg, #4a6cf6 0%, #7458f4 52%, #9446f4 100%); border-color: #fff; }
body[data-ton="clair"] .offre.offre--fort :is(h3, p, li, small, span, b) { color: #fff; }
body[data-ton="clair"] .offre.offre--fort .offre__prix b { background: none; -webkit-text-fill-color: #fff; }
body[data-ton="clair"] .offre.offre--fort .btn { background: #fff; color: #2f4fe0; border-color: #fff; } body[data-ton="clair"] .offre.offre--fort .btn :is(span, b) { color: #2f4fe0; }
body[data-ton="clair"] .offre.offre--fort .offre__essai { background: #fff; color: #2f4fe0; }

/* HERO 2 — UNE VRAIE VIDÉO (survol d'une mer de nuages au soleil rasant, Pexels n° 4288029, choisie par le fondateur) : elle remplace
   le ciel calculé. L'arbre de compétences se trace par-dessus, sur la mer de nuages (toile transparente). Le texte est blanc,
   ombré de nuit ; la partie en dégradé du titre prend l'or du soleil. */
.ouv { background: #0b0b12; }
.ouv__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 42% 50%; pointer-events: none; }
.calme .ouv__video { display: none; }
.ouv__moteur .titre { text-shadow: 0 2px 18px rgba(8, 8, 13, .8), 0 0 46px rgba(8, 8, 13, .6); }
.ouv__moteur .titre .marque-t { background-image: linear-gradient(120deg, #ffffff 0%, #ffe9b0 50%, #ffc76a 100%); filter: drop-shadow(0 2px 14px rgba(8, 8, 13, .75)); }
.ouv__moteur .temps__i:not(.is-on) button { background: rgba(9, 9, 15, .66); }
.ouv__moteur .temps__i.is-on { background: rgba(20, 20, 30, .92); border-color: rgba(255, 255, 255, .24); }
.ouv__tel { filter: drop-shadow(0 46px 60px rgba(0, 0, 0, .6)) drop-shadow(0 0 70px rgba(255, 210, 140, .22)); }
/* hero 2 sur téléphone : le texte est posé sur la vidéo claire des nuages → une nuit dégradée derrière lui (jamais de texte gris sur fond clair) */
/* (20/10/2026, « sur tablette… texte difficile à lire (fond clair) ») : la tablette en hauteur aussi — même mise en page que le téléphone jusqu’'à 980 px */
@media (max-width: 980px) {
  .ouv__moteur { position: relative; isolation: isolate; }
  /* (20/10/2026, « dégradé trop brutal ») la nuit finissait en 30 % de sa hauteur : elle descend 170 px sous le texte et s'éteint sur une courbe douce (le téléphone, posé au-dessus, n'en est pas assombri) */
  .ouv__moteur::before { content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--tete) - 20px) -20px -170px; background: linear-gradient(180deg, rgba(8, 8, 13, .92) 0%, rgba(8, 8, 13, .88) 60%, rgba(8, 8, 13, .84) 63%, rgba(8, 8, 13, .73) 70%, rgba(8, 8, 13, .55) 77%, rgba(8, 8, 13, .36) 83%, rgba(8, 8, 13, .17) 90%, rgba(8, 8, 13, .05) 95%, rgba(8, 8, 13, 0) 100%); pointer-events: none; }
  .ouv__moteur .temps__i p { color: #fff; }
}

/* LES QUATRE TEMPS DU HERO 2, À LA MANIÈRE DE FITONIST (demande du fondateur : « un défilement comme cette section de fitonist ») :
   une rangée de quatre icônes ; celle du temps en cours grossit dans un rond aux couleurs de la marque, cerclé d'un anneau qui se
   remplit avec le défilement ; dessous, le GRAND titre du temps et son texte. Le téléphone, à droite, change d'écran.
   Grand écran seulement : sur téléphone, les quatre pastilles numérotées restent. */
.temps__i button .ic { display: none; }
@media (min-width: 981px) {
  #temps { display: grid; grid-template-columns: repeat(4, auto) 1fr; grid-template-rows: 116px auto; align-items: center; justify-items: start; column-gap: 16px; row-gap: 6px; margin-top: 4px; }
  #temps .temps__i { display: contents; }
  #temps .temps__i button { grid-row: 1; position: relative; display: grid; place-items: center; width: 62px; height: 62px; padding: 0; margin: 0; border-radius: 50%; color: #fff; background: rgba(10, 12, 26, .5); border: 1.5px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: width .6s var(--ressort), height .6s var(--ressort), background-color .35s var(--ease-doux), border-color .35s, box-shadow .35s, transform .3s var(--ressort); }
  #temps .temps__i button:hover { border-color: #fff; transform: translateY(-3px); }
  #temps .temps__i button i { display: none; }
  #temps .temps__i button b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }      /* le libellé reste lu par les lecteurs d'écran */
  #temps .temps__i button .ic { display: block; width: 27px; height: 27px; opacity: .82; transition: width .6s var(--ressort), height .6s var(--ressort), opacity .3s; }
  #temps .temps__i.is-fait button { border-color: rgba(var(--ok-a), .85); } #temps .temps__i.is-fait button .ic { color: #7ff0ad; opacity: 1; }
  #temps .temps__i.is-on button { width: 104px; height: 104px; margin: 0 6px; background: linear-gradient(135deg, #5E73EB, #7C3AED); border-color: transparent; box-shadow: 0 24px 46px -18px rgba(var(--violet-a), 1), inset 0 1px 0 rgba(255, 255, 255, .3); transform: none; }
  #temps .temps__i.is-on button .ic { width: 46px; height: 46px; opacity: 1; color: #fff; }
  #temps .temps__i.is-on button::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(#fff calc(var(--k, 0) * 360deg), rgba(255, 255, 255, .24) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
  /* le grand titre (repris du libellé par le script : data-titre) et le texte du temps en cours */
  #temps .temps__i p { grid-row: 2; grid-column: 1 / -1; display: none; width: 100%; min-height: 10.6em; padding: 22px 26px 24px; border-radius: 24px; font-size: 1.02rem; line-height: 1.55; color: #eceef8; opacity: 1; overflow: visible;
    background: rgba(9, 9, 15, .56); border: 1.5px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  #temps .temps__i p::before { content: attr(data-titre); display: block; margin-bottom: 10px; font-size: clamp(2rem, .9rem + 2.3vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; color: #fff; }
  #temps .temps__i.is-on p { display: block; padding: 22px 26px 24px; animation: temps-entre .65s var(--ease-entree) backwards; }
  #temps .temps__i.is-on p::before { animation: temps-titre .7s var(--ressort) backwards; }
  .ouv__moteur { gap: 14px; }
}
@keyframes temps-entre { from { opacity: 0; transform: translateY(26px); } }
@keyframes temps-titre { from { opacity: 0; transform: translateX(-34px); } }
@media (min-width: 981px) and (max-height: 780px) { #temps { grid-template-rows: 96px auto; } #temps .temps__i button { width: 52px; height: 52px; } #temps .temps__i.is-on button { width: 84px; height: 84px; } #temps .temps__i.is-on button .ic { width: 38px; height: 38px; }
  #temps .temps__i p, #temps .temps__i.is-on p { padding: 16px 20px 18px; font-size: .92rem; min-height: 9.4em; } #temps .temps__i p::before { font-size: 1.9rem; margin-bottom: 6px; } }
/* le grand titre du temps tient sur UNE ligne dans les trois langues : le bloc ne change plus de hauteur d'un temps à l'autre (il sautait) */
@media (min-width: 981px) { #temps .temps__i p::before { font-size: clamp(1.7rem, .8rem + 1.7vw, 2.4rem); white-space: nowrap; } #temps .temps__i p, #temps .temps__i.is-on p { min-height: 10.4em; } }
@media (min-width: 981px) and (max-height: 780px) { #temps .temps__i p::before { font-size: 1.7rem; } #temps .temps__i p, #temps .temps__i.is-on p { min-height: 9.6em; } }
/* tennis : le fond de CETTE photo (un grillage sombre) est plus foncé que la piste ou le rocher des deux autres : sous le voile du texte,
   l'ombre paraissait « doublée » entre le texte et le joueur. On éclaircit la photo dans cette zone seulement (mesuré : même niveau que
   les deux autres). La bande est calée sur l'ÉCRAN (--dx = décalage de la photo, posé par cadrer), pas sur la photo. */
@media (min-width: 761px) {
  .sport--fondu::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(-1 * var(--dx, 0px)); width: 100vw; pointer-events: none;
    -webkit-backdrop-filter: brightness(1.85) saturate(1.15); backdrop-filter: brightness(1.85) saturate(1.15);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .7) 18%, #000 27%, #000 33%, rgba(0, 0, 0, .5) 43%, rgba(0, 0, 0, .14) 51%, transparent 58%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .7) 18%, #000 27%, #000 33%, rgba(0, 0, 0, .5) 43%, rgba(0, 0, 0, .14) 51%, transparent 58%); }
}

/* ==========================================================================================================
   LE GOULET, SIMPLIFIÉ (le fondateur : « on oublie ce type d'animation… fais juste en sorte que ce soit une belle animation d'entrée »).
   Plus de tunnel ni de caméra. Quand la section entre à l'écran : le couloir se déroule de gauche à droite, le pourcentage
   arrive en rebond, le texte monte ligne après ligne, les lueurs s'allument.
   ========================================================================================================== */
.js:not(.calme) #bottleneck .goulot__toile { clip-path: inset(0 100% 0 0); }
.js:not(.calme) #bottleneck.is-la .goulot__toile { clip-path: inset(0 0 0 0); transition: clip-path 1.5s cubic-bezier(.7, 0, .2, 1) .25s; }
.js:not(.calme) #bottleneck .goulot__fond, .js:not(.calme) #bottleneck .goulot__grille { opacity: 0; }
.js:not(.calme) #bottleneck.is-la .goulot__fond:not(.goulot__fond--ok), .js:not(.calme) #bottleneck.is-la .goulot__grille { opacity: 1; transition: opacity 1.4s var(--ease-doux) .2s; }
.js:not(.calme) #bottleneck.is-la.is-ouvert .goulot__fond:not(.goulot__fond--ok) { opacity: 0; } .js:not(.calme) #bottleneck.is-la.is-ouvert .goulot__fond--ok { opacity: 1; transition: opacity 1.1s var(--ease-doux); }
.js:not(.calme) #bottleneck .goulot__texte > .sur, .js:not(.calme) #bottleneck .goulot__texte > .lead { opacity: 0; transform: translateY(26px); }
.js:not(.calme) #bottleneck.is-la .goulot__texte > .sur { opacity: 1; transform: none; transition: opacity .6s var(--ease-doux) .1s, transform .8s var(--ease-entree) .1s; }
.js:not(.calme) #bottleneck.is-la .goulot__texte > .lead { opacity: 1; transform: none; transition: opacity .7s var(--ease-doux) .55s, transform .9s var(--ease-entree) .55s; }
.js:not(.calme) #bottleneck .goulot__jauge { opacity: 0; transform: scale(.5) rotate(-8deg); transform-origin: 100% 0; }
.js:not(.calme) #bottleneck.is-la .goulot__jauge { opacity: 1; transform: none; transition: opacity .4s var(--ease-doux) .7s, transform .9s var(--ressort) .7s; }

/* ==========================================================================================================
   LA PARTIE CLAIRE : DES TRANSITIONS QUI SE VOIENT, UN FOND PROPRE À CHAQUE SECTION (le fondateur : « les animations entre les
   hero clairs sont nulles », « plus de créativité sur les backgrounds, mets des images s'il le faut »).
   · Entre deux sections : une VAGUE aux couleurs de la marque monte avec la section qui arrive, puis se retire (--r, posé par le
     script : 1 quand la section entre, 0 quand elle est en place). Sa forme change à chaque section.
   · Chaque section a sa couleur de ciel (bleu, pêche, lavande, menthe) et son décor en images, qui dérive avec le défilement :
     tarifs = l'athlète dans les starting-blocks ; histoire = le nom de la marque en lettres géantes ; questions = trois photos
     rondes qui flottent ; contact = un terrain de football qui remonte du bas de la section.
   ========================================================================================================== */
.arrive[data-ton="clair"] > .arrive__bord { height: calc(var(--r, 0) * 26vh); opacity: 1 !important; background: linear-gradient(90deg, #3f62f2 0%, #7C3AED 55%, #b06bff 100%); border-radius: 0 0 50% 50% / 0 0 100% 100%; box-shadow: 0 24px 50px -20px rgba(74, 86, 235, .7); }
#about > .arrive__bord { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 22%); background: linear-gradient(90deg, #7C3AED 0%, #ff8f5a 100%); }
#faq > .arrive__bord { border-radius: 0 0 100% 0 / 0 0 100% 0; background: linear-gradient(90deg, #3f62f2 0%, #a47bff 100%); }
#contact > .arrive__bord { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 22%, 0 100%); background: linear-gradient(90deg, #17b890 0%, #3f62f2 100%); }
/* le ciel de chaque section */
#pricing { --ciel: linear-gradient(180deg, #d5e5ff 0%, #edf3ff 50%, #f2f0ff 100%); --l1: 120, 170, 255; --l2: 190, 160, 255; }
#about { --ciel: linear-gradient(180deg, #fff1e4 0%, #fff6ee 46%, #f3f0ff 100%); --l1: 255, 190, 150; --l2: 255, 214, 170; }
#faq { --ciel: linear-gradient(180deg, #ece8ff 0%, #f4f1ff 50%, #e9f1ff 100%); --l1: 176, 150, 255; --l2: 140, 180, 255; }
#contact { --ciel: linear-gradient(180deg, #e2f6f1 0%, #eef7fb 46%, #e6edff 100%); --l1: 120, 220, 196; --l2: 130, 176, 255; }
#pricing::after, #about::after, #faq::after, #contact::after { background:
    radial-gradient(circle at 86% 16%, transparent 0 148px, rgba(47, 79, 224, .16) 149px 150.5px, transparent 151.5px), radial-gradient(circle at 86% 16%, transparent 0 238px, rgba(47, 79, 224, .1) 239px 240.5px, transparent 241.5px),
    radial-gradient(circle at 12% 84%, transparent 0 118px, rgba(124, 58, 237, .14) 119px 120.5px, transparent 121.5px),
    radial-gradient(32% 28% at 16% 20%, rgba(var(--l1), .6), transparent 70%), radial-gradient(30% 26% at 84% 14%, rgba(var(--l2), .5), transparent 70%), radial-gradient(34% 30% at 64% 90%, rgba(var(--l1), .42), transparent 70%),
    var(--ciel); }
#pricing > .conteneur, #about > .conteneur, #faq > .conteneur, #contact > .conteneur { z-index: 2; }
/* les décors */
.decor { position: absolute; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease-doux); will-change: translate; }
body[data-ton="clair"] .decor { opacity: var(--vu, 1); }
.decor--depart { --vu: .92; top: 0; right: 0; width: min(62%, 980px); height: min(52vh, 500px); object-fit: cover; object-position: 50% 46%;
  -webkit-mask-image: radial-gradient(118% 122% at 100% 0%, #000 26%, transparent 72%); mask-image: radial-gradient(118% 122% at 100% 0%, #000 26%, transparent 72%); }
.js:not(.calme) #pricing .decor--depart { scale: 1.16; } .js:not(.calme) #pricing.is-la .decor--depart { scale: 1; transition: opacity .9s var(--ease-doux), scale 2.4s var(--ease-entree); }
.decor--mot { top: 3%; left: 2%; white-space: nowrap; font-style: normal; font-size: clamp(7rem, 21vw, 21rem); font-weight: 900; letter-spacing: -.05em; line-height: .9; }
.decor--mot::before { content: attr(data-mot); background: linear-gradient(90deg, rgba(124, 58, 237, .13), rgba(255, 143, 90, .16)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.decor--bulle { --vu: 1; width: var(--t); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 34px 60px -30px rgba(36, 66, 170, .7), 0 0 0 8px rgba(255, 255, 255, .75), 0 0 0 9.5px rgba(47, 79, 224, .18); animation: bulle-flotte 7s ease-in-out infinite alternate; }
.decor--bulle img { width: 100%; height: 100%; object-fit: cover; }
.decor--b1 { --t: clamp(150px, 15vw, 250px); left: 3.5%; top: 18%; } .decor--b1 img { object-position: 45% 40%; }
.decor--b2 { --t: clamp(120px, 12vw, 200px); right: 4.5%; top: 12%; animation-duration: 8.5s; animation-delay: -3s; } .decor--b2 img { object-position: 62% 40%; }
.decor--b3 { --t: clamp(96px, 9vw, 150px); right: 11%; bottom: 9%; animation-duration: 6s; animation-delay: -1.5s; } .decor--b3 img { object-position: 55% 30%; }
@keyframes bulle-flotte { from { transform: translateY(-12px) rotate(-2deg); } to { transform: translateY(12px) rotate(2deg); } }
.js:not(.calme) #faq .decor--bulle { scale: 0; } .js:not(.calme) #faq.is-la .decor--bulle { scale: 1; transition: opacity .9s var(--ease-doux), scale .9s var(--ressort) .2s; } .js:not(.calme) #faq.is-la .decor--b2 { transition-delay: 0s, .38s; } .js:not(.calme) #faq.is-la .decor--b3 { transition-delay: 0s, .56s; }
.decor--bas { --vu: .5; left: 0; bottom: 0; width: 100%; height: 52%; object-fit: cover; object-position: 50% 34%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 45%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 45%, #000 100%); }
@media (max-width: 1280px) { .decor--bulle { display: none; } }
@media (max-width: 760px) { .decor--depart { width: 100%; height: 300px; --vu: .5; } .decor--mot { font-size: 30vw; top: 1%; } .decor--bas { height: 36%; } .arrive[data-ton="clair"] > .arrive__bord { height: calc(var(--r, 0) * 16vh); } }
.calme .decor--bulle { animation: none; }
/* réglages après tournage : le mot géant plus discret derrière le titre, la photo du contact plus basse et plus légère (les deux réseaux restent lisibles) */
.decor--mot::before { background-image: linear-gradient(90deg, rgba(124, 58, 237, .09), rgba(255, 143, 90, .12)); }
.decor--bas { --vu: .4; height: 42%; }
/* téléphone, hero 2 : les pastilles 01 02 03 04 se chevauchaient — une règle écrite pour le grand écran (bouton rétréci, décalé de 8 px à gauche)
   s'appliquait aussi ici. Chaque pastille reprend toute la largeur de sa colonne, sans décalage. */
@media (max-width: 980px) {
  #temps { column-gap: 8px; }
  #temps .temps__i button, #temps .temps__i:not(.is-on) button { width: 100%; margin: 0; padding: 7px 0; justify-content: center; border-radius: 999px; }
  #temps .temps__i:not(.is-on) button { background: rgba(9, 9, 15, .66); border: 1.5px solid rgba(255, 255, 255, .22); }
}
/* visite guidée : le bouton pause passe dans le coin HAUT droit de la scène (demande du fondateur) ; la légende du téléphone reprend toute la largeur */
.visite__lecture { top: 14px; bottom: auto; z-index: 3; }
.visite__legende { right: 12px; }
/* TÉLÉPHONE ET TABLETTE, hero 2 : les mêmes icônes que sur grand écran (demande du fondateur) à la place des pastilles 01 – 04 :
   quatre ronds, celui du temps en cours grossit en dégradé avec son anneau de progression ; le titre et le texte dessous. */
@media (max-width: 980px) {
  #temps { display: grid; grid-template-columns: repeat(4, auto) 1fr; grid-template-rows: 72px auto; align-items: center; justify-items: start; column-gap: 12px; row-gap: 0; margin-top: 0; }
  #temps .temps__i { display: contents; }
  #temps .temps__i button, #temps .temps__i:not(.is-on) button { grid-row: 1; position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; margin: 0; border-radius: 50%; color: #fff; background: rgba(10, 12, 26, .62); border: 1.5px solid rgba(255, 255, 255, .28);
    transition: width .6s var(--ressort), height .6s var(--ressort), background-color .35s var(--ease-doux), border-color .35s, box-shadow .35s; }
  #temps .temps__i button i { display: none; }
  #temps .temps__i button .ic { display: block; width: 21px; height: 21px; opacity: .85; transition: width .6s var(--ressort), height .6s var(--ressort), opacity .3s; }
  #temps .temps__i.is-fait button { border-color: rgba(var(--ok-a), .85); } #temps .temps__i.is-fait button .ic { color: #7ff0ad; opacity: 1; }
  #temps .temps__i.is-on button { width: 62px; height: 62px; margin: 0 5px; background: linear-gradient(135deg, #5E73EB, #7C3AED); border-color: transparent; box-shadow: 0 16px 30px -14px rgba(var(--violet-a), 1), inset 0 1px 0 rgba(255, 255, 255, .3); }
  #temps .temps__i.is-on button .ic { width: 29px; height: 29px; opacity: 1; color: #fff; }
  #temps .temps__i.is-on button::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(#fff calc(var(--k, 0) * 360deg), rgba(255, 255, 255, .26) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
  #temps .temps__i.is-on p { animation: temps-entre .55s var(--ease-entree) backwards; }
}
/* petit téléphone : le téléphone de la scène recouvrait la fin du texte — il est un peu plus bas, le texte un peu plus petit */
@media (max-width: 760px) and (max-height: 780px) { .ouv__app { height: min(45svh, 540px); } #temps .temps__i p { font-size: .8rem; line-height: 1.45; } #temps { grid-template-rows: 64px auto; } }
/* téléphone : le téléphone de la scène ne recouvre plus la dernière ligne du texte (il était à 56 % de la hauteur) */
@media (max-width: 760px) { .ouv__app { height: min(47svh, 540px); } }
@media (max-width: 760px) and (max-height: 780px) { .ouv__app { height: min(45svh, 540px); } }
/* téléphone et tablette : le logo, le choix de langue et le bouton d'inscription se répartissent sur toute la largeur de l'en-tête
   (ils étaient serrés à gauche : le menu, masqué, comptait encore pour la règle qui colle le groupe de droite au menu) */
@media (max-width: 980px) { .tete__in { justify-content: space-between; gap: 10px; } .tete__fin { display: contents; } }

/* ==========================================================================================================
   FLUIDITÉ DU DÉFILEMENT (demande du fondateur). Le flou d'arrière-plan (backdrop-filter) est recalculé à chaque image dès que
   ce qu'il y a dessous bouge — or dessous il y a une vidéo, des toiles animées, des lueurs qui dérivent. Il est retiré des
   éléments nombreux ou posés sur un fond animé, remplacé par un fond un peu plus opaque : même aspect, bien moins de calcul.
   (Il reste sur l'en-tête, la barre du bas et les deux petits boutons ronds.)
   ========================================================================================================== */
.ouv__moteur .temps__i, .ouv__moteur .temps__i:not(.is-on) button, #temps .temps__i button, #temps .temps__i p, .sortie > *, .terrain .mini, .terrain__photo::before, .repere__carte { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (min-width: 981px) { #temps .temps__i p { background: rgba(9, 9, 15, .76); } #temps .temps__i button { background: rgba(10, 12, 26, .74); } #temps .temps__i.is-on button { background: linear-gradient(135deg, #5E73EB, #7C3AED); } }
body[data-ton="clair"] .offre, body[data-ton="clair"] .plie, body[data-ton="clair"] .fil, body[data-ton="clair"] .formulaire, body[data-ton="clair"] .onglets, body[data-ton="clair"] .histoire__signe { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, .9); }
body[data-ton="clair"] .offre.offre--fort { -webkit-backdrop-filter: none; backdrop-filter: none; }
.terrain .mini { background: rgba(20, 20, 30, .92); } .terrain__photo::before { background: rgba(12, 12, 18, .78); }
/* TÉLÉPHONE, hero 2 : LA MAQUETTE LA PLUS GRANDE POSSIBLE (demande du fondateur). Elle n'est plus calée en bas de l'écran à une hauteur
   fixe : elle part juste sous le texte (--haut, posé par le script), prend presque toute la largeur et déborde sous le bas de l'écran
   (on en voit les deux tiers du haut, en grand, au lieu de la voir entière en petit). */
@media (max-width: 760px) {
  .ouv__app { top: var(--haut, 44svh); bottom: auto; left: 50%; right: auto; height: auto; width: min(88vw, 420px); transform: translateX(-50%); }
  #temps .temps__i p { min-height: 7.7em; }
}

/* VISITE GUIDÉE : la barre de progression en haut du cadre (toute la largeur, un segment par écran) et les deux flèches dans le coin haut
   gauche (demande du fondateur). Sur téléphone et tablette les bulles sous le cadre sont retirées : la légende, la barre et les flèches suffisent. */
.visite__barre { position: absolute; z-index: 3; left: 14px; right: 14px; top: 12px; display: flex; gap: 5px; }
.visite__barre i { flex: 1; height: 3px; border-radius: 2px; background-color: rgba(255, 255, 255, .24); background-image: linear-gradient(90deg, #8b9cf6, #a47bff); background-repeat: no-repeat; background-size: calc(var(--k, 0) * 100%) 100%; }
.visite__fleches { position: absolute; z-index: 3; left: 14px; top: 28px; display: flex; gap: 8px; }
.visite__fl { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(17, 17, 26, .8); border: 1.5px solid rgba(255, 255, 255, .25); transition: transform var(--mo-court) var(--ressort-pression), border-color var(--mo-court), background var(--mo-court); }
.visite__fl:hover { border-color: #fff; transform: scale(1.06); background: rgba(40, 40, 70, .92); } .visite__fl:active { transform: scale(.94); }
.visite__fl .ic { width: 20px; height: 20px; } .visite__fl--prec .ic { transform: rotate(180deg); }
.visite__lecture { top: 28px; }
@media (max-width: 980px) { .visite__chapitres { display: none; } }

/* ==========================================================================================================
   LE HERO SUIT LE HAUT DU TEXTE, sur téléphone (04/10/2026). Le titre tient sur 2 lignes en anglais, 3 en espagnol, 4 en
   français : le bloc de texte, ancré en bas, commence donc plus ou moins haut — et l'étiquette du sprint se retrouvait
   derrière le sur-titre français. main.js (cadrer) mesure le haut du texte (--tt, en % de la hauteur) : le voile s'y accroche
   (en anglais, 45,6 % : exactement le dégradé d'avant), et chaque photo remonte de --decal, relâché (--kd) quand elle se
   referme dans l'écran du téléphone.
   ========================================================================================================== */
@media (max-width: 980px) {   /* (20/10/2026) tablette en hauteur comprise */
  .sport { translate: 0 calc(var(--decal, 0px) * var(--kd, 1)); }
  /* (20/10/2026, « dégradé trop brutal ») la rampe droite marquait un bord : courbe douce (sinus) du milieu de la photo jusqu’'un peu sous le haut du texte, puis la nuit */
  .ouv__voile { background: linear-gradient(180deg, rgba(8, 8, 13, .3) 0%, rgba(8, 8, 13, .12) calc(var(--tt, 45.6%) * .2), rgba(8, 8, 13, 0) calc(var(--tt, 45.6%) * .48 + (var(--tt, 45.6%) * .52 + 12%) * 0), rgba(8, 8, 13, 0.045) calc(var(--tt, 45.6%) * .48 + (var(--tt, 45.6%) * .52 + 12%) * 0.15), rgba(8, 8, 13, 0.169) calc(var(--tt, 45.6%) * .48 + (var(--tt, 45.6%) * .52 + 12%) * 0.3), rgba(8, 8, 13, 0.346) calc(var(--tt, 45.6%) * .48 + (var(--tt, 45.6%) * .52 + 12%) * 0.45), rgba(8, 8, 13, 0.537) calc(var(--tt, 45.6%) * .48 + (var(--tt, 45.6%) * .52 + 12%) * 0.6), rgba(8, 8, 13, 0.7) calc(var(--tt, 45.6%) * .48 + (var(--tt, 45.6%) * .52 + 12%) * 0.75), rgba(8, 8, 13, 0.8) calc(var(--tt, 45.6%) * .48 + (var(--tt, 45.6%) * .52 + 12%) * 0.9), rgba(8, 8, 13, 0.82) calc(var(--tt, 45.6%) * .48 + (var(--tt, 45.6%) * .52 + 12%) * 1), rgba(8, 8, 13, .96) calc(var(--tt, 45.6%) + 26.4%)); }
}

/* ==========================================================================================================
   PAGESPEED (07/10/2026) — plus aucun décalage de mise en page au chargement.
   · Chaque photo du haut de page est cadrée par main.js (cadrer). Sa position passe par `translate` (--gx, --gy) : une
     transformation n'est pas un décalage de mise en page, et elle ne recalcule rien. Sur téléphone s'y ajoute la remontée
     (--decal × --kd) qui s'y trouvait déjà.
   · Tant que le cadrage n'est pas posé, les photos ne se montrent pas (elles apparaissaient mal cadrées, puis sautaient).
   · La photo « fondue » (tennis) : son voile, son prolongement et sa bande claire se posaient en % de sa largeur ou par
     --dx ; ils passent eux aussi par `translate`, pour la même raison.
   · Les noms de sport en lettres creuses (décor, aria-hidden) : leur texte vient de data-nom. Un texte de la couleur du
     fond était compté comme un défaut de contraste alors que personne n'a à le lire (le nom lisible est dans la légende).
   ========================================================================================================== */
.sport { translate: var(--gx, 0px) var(--gy, 0px); }
@media (max-width: 980px) { .sport { translate: var(--gx, 0px) calc(var(--gy, 0px) + var(--decal, 0px) * var(--kd, 1)); } }   /* (20/10/2026) tablette en hauteur comprise */
.js .ouv__photos:not(.is-cadre) { visibility: hidden; }
@media (min-width: 761px) {
  .sport--fondu .sport__fond { left: 0; translate: -50% 0; }
  .sport--fondu::after { left: 0; width: 200%; translate: -50% 0; }
  .sport--fondu::before { left: 0; translate: calc(-1 * var(--dx, 0px)) 0; }
}
.terrain__nom::before { content: attr(data-nom); }