/* Site de Jérémy Vega, version 5 : d'après steven.com. Mode clair (#eef1f3, gris #2b2b2b, objectif argent)
   par défaut, mode sombre (#121212, blanc) à l'interrupteur ; une couleur par rubrique. */

@font-face { font-family: "Host Grotesk"; src: url("fonts/host-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 300 800; font-display: swap; 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; }
@font-face { font-family: "Host Grotesk"; src: url("fonts/host-grotesk-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; 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; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }

:root {
  --encre: #121212;
  --fond: #121212; --fond-rvb: 18, 18, 18;
  --texte: #ffffff; --rvb: 255, 255, 255;
  --gris: #8d8d8d;
  --trait: rgba(255, 255, 255, .16);
  --ombre-objectif: rgba(0, 0, 0, .55);
  --jaune: #ffdd4b; --rouge: #ff5541; --vert: #51b75a; --bleu: #5595ff;
  --marge: clamp(20px, 4vw, 64px);
  --etroite: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --ressort: cubic-bezier(.22, 1, .36, 1);
}
/* Mode clair, relevé sur steven.com : fond #eef1f3, texte #2b2b2b, métal argenté */
:root[data-theme="clair"] {
  --fond: #eef1f3; --fond-rvb: 238, 241, 243;
  --texte: #2b2b2b; --rvb: 43, 43, 43;
  --gris: #6c7179;
  --trait: rgba(43, 43, 43, .16);
  --ombre-objectif: rgba(55, 58, 64, .26);
  --jaune: #e4bd10;
}
* { box-sizing: border-box; }
html { background: var(--fond); }
body { margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte); font-family: "Host Grotesk", Arial, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.45; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--texte); outline-offset: 4px; }
body.est-fige { overflow: hidden; }

/* ---------- Chargement ---------- */
.chargement { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #fff; color: var(--encre); transition: opacity .5s ease; }
.chargement__logo { display: flex; align-items: center; gap: .14em; font-weight: 800; font-size: clamp(30px, 5vw, 64px); letter-spacing: .01em; }
.chargement__mot { transition: opacity .45s ease, filter .45s ease; }
.chargement__point { width: .62em; height: .62em; border-radius: 50%; background: var(--encre); }
.chargement__trait { position: absolute; left: 50%; top: 50%; width: clamp(320px, 52vw, 680px); translate: -54% -42%; overflow: visible; }
.chargement__trait path { stroke-dasharray: 700; stroke-dashoffset: 700; animation: trace-charge 1.6s cubic-bezier(.6,0,.2,1) .2s forwards; }
@keyframes trace-charge { 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -700; } }
.chargement__compte { position: absolute; bottom: 28px; left: 50%; translate: -50% 0; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.chargement.est-vide .chargement__mot, .chargement.est-vide .chargement__trait, .chargement.est-vide .chargement__compte { opacity: 0; filter: blur(6px); transition: opacity .45s ease, filter .45s ease; }
.chargement.est-vide .chargement__point { opacity: 0; }
/* Le point du logo, repris en grand : il glisse au centre puis grandit jusqu'à noircir l'écran */
.disque { position: fixed; z-index: 91; width: 10px; height: 10px; border-radius: 50%; background: var(--encre); pointer-events: none; display: none; }

/* ---------- Barre ---------- */
.barre { position: fixed; z-index: 60; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--marge); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--texte); }
.marque { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 14px; }
.marque i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.heure { display: flex; gap: 14px; color: rgba(var(--rvb), .6); font-weight: 400; font-variant-numeric: tabular-nums; }
.barre__menu { justify-self: end; font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.menu { position: fixed; z-index: 55; inset: 0; display: grid; align-content: center; justify-items: center; gap: 4px; background: rgba(var(--fond-rvb), .97); }
.menu[hidden] { display: none; }
.menu a { font-family: var(--etroite); font-weight: 700; font-size: clamp(44px, 8vw, 96px); line-height: .95; text-transform: uppercase; color: rgba(var(--rvb), .4); transition: color .25s ease; }
.menu a:hover { color: var(--texte); }

/* ---------- Accueil : l'objectif ---------- */
.accueil { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; perspective: 1100px; }
.accueil[hidden] { display: none; }
.objectif { z-index: 1; opacity: var(--b, 0); scale: calc(.86 + var(--b, 0) * .14); position: relative; --taille: min(70vh, 80vw, 760px); width: var(--taille); height: var(--taille); perspective: 1400px; translate: 0 -2vh; }
.objectif__corps { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ressort); }
.objectif__corps { will-change: transform; }
/* Chaque anneau est un calque à part, gardé en mémoire par le navigateur : le tourner ou l'agrandir
   ne coûte presque rien. Aucun flou ni ombre calculés en direct : l'ombre est un disque fixe dessous. */
.calque { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.calque svg { display: block; width: 100%; height: 100%; overflow: visible; color: rgba(var(--rvb), .5); }
.objectif__ombre { position: absolute; left: 4%; top: 6%; width: 92%; height: 92%; border-radius: 50%; box-shadow: 0 40px 70px var(--ombre-objectif); }
/* Le métal : mêmes dégradés pour les deux modes, couleurs réglées ici (arête claire, face, creux, ombre) */
.m-arete { stop-color: #4a4a4a; } .m-clair { stop-color: #2d2d2d; } .m-moyen { stop-color: #1a1a1a; } .m-ombre { stop-color: #0a0a0a; }
.r-0 { stop-color: #fff; stop-opacity: 0; } .r-1 { stop-color: #fff; stop-opacity: .07; }
[data-theme="clair"] .m-arete { stop-color: #ffffff; } [data-theme="clair"] .m-clair { stop-color: #dfe3e9; }
[data-theme="clair"] .m-moyen { stop-color: #b7bdc8; } [data-theme="clair"] .m-ombre { stop-color: #858d9a; }
[data-theme="clair"] .r-1 { stop-opacity: .55; }
.rebord { fill: none; stroke: rgba(var(--rvb), .1); stroke-width: 1.2; }
.equerres path { fill: none; stroke: rgba(var(--rvb), .4); stroke-width: 1.4; }
.objectif.est-arrive .calque--ext { animation: tour-ext 2.2s var(--ressort) both; }
.objectif.est-arrive .calque--int { animation: tour-int 2.2s var(--ressort) both; }
@keyframes tour-ext { from { transform: rotate(-150deg); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(0); } }
@keyframes tour-int { from { transform: rotate(160deg); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(0); } }
.calque--fleches { animation: tourne 40s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
/* Une part survolée se soulève : elle grossit vers l'extérieur, s'éclaire et projette son ombre */
.part { cursor: pointer; pointer-events: visiblePainted; transform-origin: 500px 500px; transition: transform .45s var(--ressort); }
.part.est-survolee { transform: scale(1.045); }
/* L'ombre de la part soulevée : une copie sombre décalée vers le bas, qui apparaît au survol (pas de flou) */
.ombre-part { fill: var(--ombre-objectif); opacity: 0; transform: translate(0, 12px); transition: opacity .45s ease; }
.part.est-survolee .ombre-part { opacity: .9; }
.part.est-survolee .reflet { opacity: 1; }
.part--ext.est-survolee { transform: scale(1.025); }
.part:active { transform: scale(1.01); transition-duration: .12s; }
.reflet { pointer-events: none; opacity: .7; transition: opacity .45s ease; }
.nom { fill: rgba(var(--rvb), .78); font-size: 25px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; pointer-events: none; transition: fill .35s ease; }
[data-theme="clair"] .nom { fill: #4d535c; }
.nom--ext { font-size: 27px; letter-spacing: .5em; }
.objectif.est-survole .nom { fill: rgba(var(--rvb), .28); }
.objectif.est-survole .est-survolee .nom { fill: var(--texte); }
/* La bulle de verre au centre : petite au repos, elle remplit le creux de l'objectif au survol */
.bulle { position: absolute; left: 50%; top: 50%; width: 56%; height: 56%; translate: -50% -50%; border-radius: 50%; overflow: hidden; cursor: pointer; will-change: transform;
  transform: scale(.24); transition: transform .9s var(--ressort); background: #0b0b0b;
  box-shadow: 0 0 0 3px rgba(var(--rvb), .08), 0 0 0 6px rgba(255,255,255,.35), 0 26px 50px var(--ombre-objectif); }
.objectif.est-survole .bulle { transform: scale(.98); }
.bulle video, .bulle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.15; opacity: 0; transition: opacity .5s ease; }
.bulle video.est-vue, .bulle img.est-vue { opacity: 1; }
.bulle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.45), rgba(255,255,255,0) 24%), radial-gradient(circle, transparent 56%, rgba(255,255,255,.18) 86%, rgba(0,0,0,.35) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 -18px 40px rgba(0,0,0,.35); }
.objectif.est-arrive .bulle { animation: bulle-nait 1.4s var(--ressort) .5s both; }
@keyframes bulle-nait { from { transform: scale(0); } }
.accueil__bas { position: absolute; left: var(--marge); right: var(--marge); bottom: 34px; display: grid; gap: 28px; justify-items: start; pointer-events: none; }
.accueil__bas > * { pointer-events: auto; }
h1 { font-family: var(--etroite); font-weight: 700; font-size: clamp(38px, 4.6vw, 66px); line-height: .92; text-transform: uppercase; letter-spacing: -.005em; }
.lien-rond { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; }
.lien-rond span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(var(--rvb), .4); font-size: 20px; line-height: 1; transition: background-color .3s ease, color .3s ease; }
.lien-rond:hover span { background: var(--texte); color: var(--fond); }
/* Apparition de l'accueil après le chargement */
.accueil .accueil__bas { opacity: var(--b, 0); translate: 0 calc((1 - var(--b, 0)) * 20px); }

/* ---------- La plongée dans la bulle (d'après steven.com) ----------
   script.js fait tourner l'objectif en le rapprochant, avec des copies décalées qui le traînent
   (effet de flou de vitesse) ; la bulle grossit et se floute ; le voile fond le tout dans la couleur du fond. */
.objectif__echo { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.objectif__echo * { pointer-events: none !important; }
/* dans les copies, rien ne bouge à l'intérieur : chacune reste une seule image floutée une fois */
.objectif__echo .calque { will-change: auto; animation: none !important; }
.accueil.est-plonge .accueil__bas { opacity: 0; transition: opacity .3s ease; }
.voile { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(circle at 50% 48%, rgba(var(--fond-rvb), .2) 0%, var(--fond) 55%); }
[data-theme="clair"] .voile { background: radial-gradient(circle at 50% 48%, #ffffff 0%, var(--fond) 70%); }

/* ---------- Clair / sombre ---------- */
.theme { position: fixed; z-index: 60; right: var(--marge); bottom: 30px; width: 48px; height: 26px; border-radius: 99px; border: 2px solid var(--texte); padding: 3px; }
.theme span { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--texte); transition: translate .35s var(--ressort), background-color .35s ease; }
[data-theme="clair"] .theme span { translate: 22px 0; background: var(--texte); }

/* ---------- Pages de rubrique ---------- */
.rubrique[hidden] { display: none; }
.r-heros { position: relative; height: 100vh; height: 100svh; display: grid; place-items: end center; padding-bottom: 14vh; overflow: hidden; }
.r-heros__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.r-heros::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 45%, rgba(var(--fond-rvb), 0) 30%, rgba(var(--fond-rvb), .75) 85%), linear-gradient(to top, var(--fond) 0%, rgba(var(--fond-rvb), .2) 40%, rgba(var(--fond-rvb), .35) 100%); }
[data-theme="clair"] .r-heros::before { background: radial-gradient(ellipse at 50% 42%, rgba(var(--fond-rvb), .15) 25%, rgba(var(--fond-rvb), .8) 85%), linear-gradient(to top, var(--fond) 0%, rgba(var(--fond-rvb), .55) 35%, rgba(var(--fond-rvb), .3) 100%); }
.r-titre { position: relative; z-index: 2; display: grid; justify-items: center; font-family: var(--etroite); font-weight: 700; font-size: clamp(64px, 10.5vw, 164px); line-height: .84; text-transform: uppercase; text-align: center; letter-spacing: -.005em; }
.r-titre > span { display: block; overflow: hidden; }
.r-trait { position: absolute; left: 50%; top: 52%; width: 120%; translate: -52% -50%; overflow: visible; pointer-events: none; }
.r-trait path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; }
.rubrique.est-entree .r-trait path { transition: stroke-dashoffset 1.3s cubic-bezier(.6,0,.2,1) .7s; stroke-dashoffset: 0; }
.rubrique .r-titre > span { opacity: 0; translate: 0 40px; }
.rubrique.est-entree .r-titre > span { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate .9s var(--ressort); }
.rubrique.est-entree .r-titre > span + span { transition-delay: .12s; }
.r-descendre { position: absolute; z-index: 2; left: 50%; bottom: 30px; translate: -50% 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(var(--rvb), .4); font-size: 18px; line-height: 1; padding-bottom: 6px; }
.r-retour { position: fixed; z-index: 30; left: var(--marge); bottom: 30px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent); background: radial-gradient(circle, #2a2a2a 30%, #111 32%, #111 46%, #3a3a3a 48%, #1a1a1a 62%); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.r-retour i { width: 8px; height: 8px; border-radius: 50%; background: var(--texte); }
.r-phrase { padding: clamp(80px, 12vw, 150px) var(--marge) clamp(60px, 8vw, 100px); }
.r-phrase p { max-width: 16em; font-size: clamp(34px, 4.6vw, 68px); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
.r-phrase em { font-style: normal; color: var(--accent); }
.r-duo { margin: 0 var(--marge); padding: 36px 0 clamp(70px, 9vw, 120px); border-top: 1px solid var(--trait); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
.r-etiquette { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; max-width: 14em; }
.r-texte { max-width: 30em; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: rgba(var(--rvb), .85); }
.r-images { margin: 0 var(--marge); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.r-images figure { display: grid; gap: 10px; }
.r-images__grande { grid-column: 1 / -1; }
.r-images img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; filter: grayscale(.2); }
.r-images__grande img { aspect-ratio: 16 / 8; }
.r-images figcaption { font-size: 12px; color: rgba(var(--rvb), .6); }
.r-liste { margin: 0 var(--marge); padding-top: clamp(90px, 11vw, 140px); }
.r-liste h3 { margin-bottom: clamp(36px, 5vw, 60px); text-align: center; font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.r-liste details { border-top: 1px solid var(--trait); }
.r-liste details:last-child { border-bottom: 1px solid var(--trait); }
.r-liste summary { list-style: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 28px; align-items: center; gap: 16px; padding: 26px 0; cursor: pointer; }
.r-liste summary::-webkit-details-marker { display: none; }
.r-liste__num { font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; }
.r-liste__nom { font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; letter-spacing: -.01em; }
.r-liste__bouton { padding: 8px 16px; border-radius: 99px; border: 1px solid rgba(var(--rvb), .35); font-size: 12px; white-space: nowrap; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.r-liste summary:hover .r-liste__bouton { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.r-liste__chevron { justify-self: end; font-size: 18px; transition: rotate .35s var(--ressort); }
.r-liste details[open] .r-liste__chevron { rotate: 180deg; }
.r-liste__corps { display: grid; grid-template-columns: 44px 160px minmax(0, 1fr); gap: 8px 16px; padding: 0 0 30px; }
.r-liste__corps > * { grid-column: 3; }
.r-liste__corps .r-etiquette { grid-column: 2; grid-row: 1 / span 2; color: var(--gris); }
.r-liste__corps p:not(.r-etiquette) { max-width: 40em; color: rgba(var(--rvb), .82); }
.r-liste__corps ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.r-liste__corps li { padding: 6px 12px; border-radius: 99px; background: rgba(var(--rvb), .07); font-size: 12px; }
.r-liste__corps:not(:has(.r-etiquette)) > p { grid-column: 2 / -1; }
.r-appel { margin: clamp(90px, 11vw, 140px) var(--marge) 0; display: grid; gap: 20px; justify-items: start; }
.r-appel__titre { font-family: var(--etroite); font-weight: 700; font-size: clamp(48px, 7vw, 104px); line-height: .9; text-transform: uppercase; }
.r-appel__titre em { font-style: normal; color: var(--accent); }
.r-suivant { display: grid; justify-items: center; gap: 18px; margin-top: clamp(110px, 14vw, 180px); padding: clamp(70px, 10vw, 130px) var(--marge) clamp(90px, 12vw, 150px); border-top: 1px solid var(--trait); }
.r-suivant__mot { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.r-suivant__titre { display: grid; justify-items: center; font-family: var(--etroite); font-weight: 700; font-size: clamp(60px, 10vw, 150px); line-height: .84; text-transform: uppercase; transition: color .35s ease; }
.pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 24px var(--marge) 30px calc(var(--marge) + 64px); font-size: 12px; color: rgba(var(--rvb), .45); border-top: 1px solid var(--trait); }
.pied[hidden] { display: none; }
.pied a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  .barre { grid-template-columns: 1fr auto; }
  .heure { display: none; }
  .objectif { translate: 0 -10vh; }
  .nom { font-size: 28px; letter-spacing: .22em; }
  .nom--ext { font-size: 30px; letter-spacing: .36em; }
  .r-duo { grid-template-columns: minmax(0, 1fr); }
  .r-images { grid-template-columns: minmax(0, 1fr); }
  .r-liste summary { grid-template-columns: 30px minmax(0, 1fr) 24px; }
  .r-liste__bouton { display: none; }
  .r-liste__corps { grid-template-columns: 30px minmax(0, 1fr); }
  .r-liste__corps > *, .r-liste__corps .r-etiquette { grid-column: 2; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chargement, .disque { display: none !important; }
  .rubrique .r-titre > span { opacity: 1; translate: none; filter: none; }
  .r-trait path { stroke-dashoffset: 0; }
}

/* ---------- La plongée en WebGL (plongee.js) ---------- */
.plongee { position: fixed; inset: 0; z-index: 50; width: 100%; height: 100%; display: none; pointer-events: none; transition: opacity .38s ease; }
.plongee.est-active { display: block; }
.plongee.est-effacee { opacity: 0; }
/* le titre de l'accueil se désagrège lettre par lettre, dans le désordre */
.lettre { transition: opacity .07s linear; }
.est-desagrege .lettre { opacity: 0; }

/* ---------- La scène des rubriques (scene.js), d'après « Creator Tech » de steven.com ---------- */
.r-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.r-scene__image { position: absolute; left: -2%; top: -2%; width: 104%; height: 104%; object-fit: cover; will-change: translate; }
.r-heros.a-une-scene .r-heros__film { display: none; }
/* avec la scène, le voile ne garde que le bas, pour que le titre se lise */
.r-heros.a-une-scene::before { z-index: 2; background: linear-gradient(to top, var(--fond) 0%, rgba(var(--fond-rvb), .6) 22%, rgba(var(--fond-rvb), 0) 50%); }
.vignette { position: absolute; width: clamp(140px, 13vw, 200px); padding: 10px 12px; border-radius: 6px; display: grid; gap: 3px;
  background: #fbfbfb; color: #2b2b2b; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
  font-size: 11px; line-height: 1.35; filter: grayscale(1) blur(var(--flou, 0)); will-change: translate;
  transform: translate(-50%, -50%) scale(var(--echelle, 1)); animation: flotte 7s ease-in-out var(--retard, 0s) infinite alternate; }
@keyframes flotte { from { transform: translate(-50%, -50%) scale(var(--echelle, 1)) rotate(-.6deg); } to { transform: translate(-50%, -58%) scale(var(--echelle, 1)) rotate(.6deg); } }
.vignette b { font-weight: 600; font-size: 11.5px; }
.vignette span { color: #555; }
.vignette em { font-style: normal; font-weight: 600; font-size: 15px; }
.vignette i { font-style: normal; font-size: 10px; color: #888; }
[data-theme="sombre"] .vignette { background: #1d1d1d; color: #e6e6e6; border-color: rgba(255, 255, 255, .08); }
[data-theme="sombre"] .vignette span { color: #aaa; }
.r-scene__poussiere { position: absolute; inset: 0; width: 100%; height: 100%; }
.r-scene__trait { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 720px) {
  .vignette:nth-of-type(3), .vignette:nth-of-type(6) { display: none; }
  .vignette { width: 120px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .vignette { animation: none; } }

/* ---------- « Reprenez votre temps » derrière l'objectif ---------- */
/* --p va de 0 (arrivée : petite, inclinée, cachée derrière l'objectif) à 1 (droite, en bas à gauche, devant le
   cercle extérieur) ; --dx / --dy : le décalage entre sa place finale et le centre de l'objectif */
.mur { position: absolute; left: var(--marge); bottom: 104px; z-index: 0; margin: 0; pointer-events: none; will-change: transform, opacity;
  font-family: var(--etroite); font-weight: 700; font-size: clamp(48px, 5.2vw, 96px); line-height: .9; letter-spacing: -.005em;
  text-transform: uppercase; white-space: nowrap; color: var(--texte); transform-origin: 50% 50%;
  transform: translate(calc(var(--dx, 0px) * (1 - var(--p, 0))), calc(var(--dy, 0px) * (1 - var(--p, 0))))
             rotateX(calc((1 - var(--p, 0)) * 32deg)) rotateY(calc((1 - var(--p, 0)) * 18deg)) scale(calc(.5 + var(--p, 0) * .5)); }
.mur--devant { z-index: 2; opacity: clamp(0, calc((var(--p, 0) - .45) * 3.4), 1); }
/* le creux de l'objectif est plein : on ne voit pas la phrase à travers */
.objectif__trou { position: absolute; left: 21.5%; top: 21.5%; width: 57%; height: 57%; border-radius: 50%; background: rgba(var(--fond-rvb), .86); }
.accueil__piste { height: 0; }   /* 16/10 : la phrase ne sort plus de derrière l'objectif, elle est en place dès l'arrivée */
.accueil__piste[hidden] { display: none; }

/* ---------- Le fond de l'accueil : la photo nette, puis floue et voilée au défilement ---------- */
.decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.decor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.decor__net { transform: scale(calc(1 + var(--a, 0) * .05)); will-change: transform; }
.decor__flou { opacity: var(--a, 0); transform: scale(1.06); will-change: opacity; }
.decor__voile { position: absolute; inset: 0; background: var(--fond); opacity: calc(var(--a, 0) * .32); will-change: opacity; }
.objectif:not(.est-visible) { pointer-events: none; }
.mur { opacity: clamp(0, calc(var(--p, 0) * 6), 1); }
.mur--devant { opacity: clamp(0, calc((var(--p, 0) - .45) * 3.4), 1); }

/* ---------- La méthode : la grande phrase, le paysage, les cinq étapes, qui suis-je ---------- */
.r-phrase--grande p { max-width: 20em; font-size: clamp(32px, 4.2vw, 62px); }
.r-images--seule { grid-template-columns: minmax(0, 1fr); }
.r-images--seule img { filter: none; aspect-ratio: 16 / 8; }

/* Les cinq étapes (site 1, « Méthode, en deux temps ») : la pile d'icônes au centre qui monte, se déploie
   en colonne et va se poser ; puis le trait descend le rail central et fait apparaître chaque étape.
   script : etapes.js. Couleurs passées aux variables de la v5 (clair et sombre). */
.r-etapes { margin: 0 var(--marge); padding-top: clamp(90px, 11vw, 140px); }
.r-etapes > h3 { margin-bottom: clamp(20px, 3vw, 40px); text-align: center; font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.parcours { --avance: 0; position: relative; max-width: 1120px; margin: 40px auto 0; }
.parcours__rail { position: absolute; left: 50%; top: var(--rail-haut, 0); height: var(--rail-hauteur, 100%); width: 2px; translate: -50% 0; border-radius: 2px; background: rgba(var(--rvb), .14); transition: opacity .5s ease; }
.parcours__trait { position: absolute; inset: 0 0 auto; height: calc(var(--avance) * 100%); border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.parcours__liste { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.etape { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; padding: clamp(32px, 4vw, 52px) clamp(20px, 4vw, 56px); border-radius: 56px; background: transparent; transition: background-color .45s ease, box-shadow .45s ease; }
.etape__icone { position: relative; z-index: 5; will-change: translate, scale; display: grid; place-items: center; width: clamp(76px, 8vw, 100px); aspect-ratio: 1; border-radius: 28px;
  background: #fff; color: #161719; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .06); transition: background .45s ease, color .45s ease, box-shadow .45s ease; }
.parcours.en-pile .etape__icone, .etape.est-atteinte .etape__icone { background: radial-gradient(circle at 50% 35%, #4a4b4f, #161719 70%); color: #fff; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.etape__icone svg { width: 38%; height: 38%; }
.js .etape__texte, .js .etape__num, .js .etape__noeud { transition-property: opacity, translate, scale, width, height, border-radius, border-color, background, box-shadow; transition-duration: .5s, .6s, .4s, .35s, .35s, .35s, .35s, .35s, .35s; }
.js .etape:not(.est-atteinte) .etape__texte, .js .etape:not(.est-atteinte) .etape__num, .js .etape:not(.est-atteinte) .etape__noeud { opacity: 0; }
.js .etape:not(.est-atteinte) .etape__texte { translate: 24px 0; }
.js .etape:nth-child(even):not(.est-atteinte) .etape__texte { translate: -24px 0; }
.js .etape:not(.est-atteinte) .etape__noeud { scale: .6; }
.parcours.en-pile .parcours__rail { opacity: 0; }
.etape.est-atteinte { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 50px -36px rgba(0, 0, 0, .35); }
[data-theme="sombre"] .etape.est-atteinte { background: #1b1b1b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.etape__media { grid-column: 1; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 18px; }
.etape__texte { grid-column: 3; grid-row: 1; justify-self: start; max-width: 400px; }
.etape:nth-child(even) .etape__media { grid-column: 3; justify-self: start; }
.etape:nth-child(even) .etape__texte { grid-column: 1; justify-self: end; text-align: right; }
.etape__noeud { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--fond); border: 1.5px solid rgba(var(--rvb), .2); }
.etape__noeud i { width: 0; height: 0; border-radius: 50%; background: #161719; transition: width .35s ease, height .35s ease; }
.etape.est-atteinte .etape__noeud { width: 42px; height: 42px; border-radius: 13px; border-color: transparent;
  background: radial-gradient(circle, #fff 0 52%, transparent 53%), conic-gradient(from 200deg, var(--accent), #2b2b2b, #c9ced6, var(--accent)); box-shadow: 0 0 18px var(--accent); }
.etape.est-atteinte .etape__noeud i { width: 10px; height: 10px; }
.etape__num { display: grid; place-items: center; min-width: 40px; height: 36px; padding: 0 8px; border-radius: 10px; background: #fff; color: #2b2b2b; font-size: 17px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.etape.est-atteinte .etape__num { background: var(--fond); color: var(--texte); }
.etape h3 { font-size: clamp(21px, 2vw, 27px); font-weight: 500; letter-spacing: -0.02em; }
.etape p { margin: 8px 0 0; color: var(--gris); font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.5; }
@media (max-width: 760px) {
  .parcours__rail { left: 31px; }
  .etape { grid-template-columns: 30px minmax(0, 1fr); column-gap: 18px; row-gap: 16px; padding: 22px 18px; border-radius: 28px; }
  .etape__noeud, .etape:nth-child(even) .etape__noeud { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: 30px; }
  .etape__media, .etape:nth-child(even) .etape__media { grid-column: 2; grid-row: 1; justify-self: start; }
  .etape__texte, .etape:nth-child(even) .etape__texte { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; }
  .etape.est-atteinte .etape__noeud { width: 34px; height: 34px; border-radius: 11px; }
  .etape__icone { width: 64px; border-radius: 20px; }
}

/* Qui suis-je */
.r-moi { margin: clamp(110px, 13vw, 170px) var(--marge) 0; padding-top: 40px; border-top: 1px solid var(--trait); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.r-moi__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 28% 30%; border-radius: 4px; }
.r-moi__texte { display: grid; gap: 18px; justify-items: start; }
.r-moi__texte h3 { font-family: var(--etroite); font-weight: 700; font-size: clamp(44px, 5vw, 76px); line-height: .9; text-transform: uppercase; }
.r-moi__phrase { max-width: 26em; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.35; letter-spacing: -.01em; }
.r-moi__phrase em { font-style: normal; color: var(--accent); }
[data-theme="clair"] #r-methode .r-moi__phrase em, [data-theme="clair"] #r-methode .r-phrase em { color: #c9a20a; }
.r-moi__faits { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--gris); }
.r-moi__faits li::before { content: "— "; }
@media (max-width: 720px) { .r-moi { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Les exemples : liste qui s'ouvre au survol (d'après expand-on-hover-list.framer.website) ----------
   Au repos : numéro, titre en gris, flèche ronde. Au survol (ou au toucher, script.js) : le titre passe en
   couleur du texte, la description se déplie, un écran d'exemple arrive à droite, penché, avec son ombre. */
.r-depli { margin: 0 var(--marge); padding-top: clamp(90px, 11vw, 140px); }
.r-depli > h3 { margin-bottom: clamp(36px, 5vw, 60px); text-align: center; font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.depli__liste { max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.depli { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 44px; column-gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--trait); cursor: pointer; outline: none; }
.depli__num { font-family: var(--etroite); font-weight: 700; font-size: 26px; line-height: 1.15; color: rgba(var(--rvb), .35); transition: color .4s ease; }
.depli__titre { margin: 0; font-family: var(--etroite); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; text-transform: uppercase; color: rgba(var(--rvb), .35); transition: color .4s ease; }
.depli__plus { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ressort); }
.depli__plus > div { overflow: hidden; }
.depli__plus p { max-width: 30em; padding-top: 12px; font-size: 16px; line-height: 1.5; color: rgba(var(--rvb), .78); opacity: 0; translate: 0 8px; transition: opacity .4s ease .1s, translate .5s var(--ressort) .1s; }
.depli__fleche { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--texte); color: var(--fond); font-size: 18px; transition: background-color .4s ease, rotate .5s var(--ressort); }
/* l'écran d'exemple : absent au repos, il prend sa place à l'ouverture */
.depli__maquette { width: 0; height: 0; opacity: 0; transition: opacity .35s ease; }
.depli__maquette .ecran { transform: translateY(16px) rotate(-6deg) scale(.86); transition: transform .6s var(--ressort); }
.depli.est-ouvert .depli__num, .depli.est-ouvert .depli__titre { color: var(--texte); }
.depli.est-ouvert .depli__plus { grid-template-rows: 1fr; }
.depli.est-ouvert .depli__plus p { opacity: 1; translate: 0 0; }
.depli.est-ouvert .depli__fleche { background: var(--c); color: #fff; rotate: -45deg; }
.depli.est-ouvert .depli__maquette { width: 320px; height: auto; opacity: 1; transition: opacity .45s ease .12s; }
.depli.est-ouvert .depli__maquette .ecran { transform: rotate(-3deg); }
@media (hover: hover) {
  .depli__liste:hover .depli:not(:hover) { /* les autres restent au repos */ }
}

/* L'écran d'exemple : une carte d'application, en données fictives, une couleur par exemple (--c) */
.ecran { width: 300px; margin: 6px 0 18px; padding: 16px; border-radius: 22px; background: #fff; color: #1d1d1f; font-size: 12.5px; line-height: 1.4;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .05); border-top: 5px solid var(--c); text-align: left; }
.ecran p { margin: 0; }
.ecran__puce { display: inline-block; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 75%, #000); font-size: 10.5px; font-weight: 600; }
.ecran__titre { margin-top: 10px !important; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ecran__titre b { color: var(--c); }
.ecran__sous { margin-top: 2px !important; color: #6b6f76; font-size: 12px; }
.ecran__lignes, .ecran__canaux, .ecran__fiche { margin: 12px 0 0; padding: 0; list-style: none; }
.ecran__lignes li, .ecran__fiche li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #eef0f2; font-weight: 600; }
.ecran__lignes small, .ecran__fiche small { display: block; font-weight: 400; color: #6b6f76; font-size: 11px; }
.ecran__lignes em { font-style: normal; text-align: right; }
.ecran__fiche li { justify-content: flex-start; align-items: baseline; }
.ecran__fiche small { width: 64px; flex: none; }
.ecran__fiche em { font-style: normal; color: var(--c); }
.ecran__message { margin-top: 12px; padding: 11px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, #fff); }
.ecran__mini { margin-bottom: 5px !important; font-size: 10.5px; font-weight: 600; color: color-mix(in srgb, var(--c) 75%, #000); }
.ecran__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ecran__boutons span { display: grid; place-items: center; height: 34px; border-radius: 10px; border: 1px solid #dfe2e6; font-weight: 600; }
.ecran__boutons .plein { background: var(--c); border-color: var(--c); color: #fff; }
.ecran__chat { display: grid; gap: 8px; margin-top: 12px; }
.ecran__chat p { max-width: 84%; padding: 8px 11px; border-radius: 14px; }
.bulle-client { justify-self: end; background: #eef0f2; border-bottom-right-radius: 4px; }
.bulle-agent { background: var(--c); color: #fff; border-bottom-left-radius: 4px; }
.ecran__creneaux { display: flex; gap: 6px; margin-top: 10px; }
.ecran__creneaux span { flex: 1; text-align: center; padding: 6px 0; border-radius: 9px; border: 1px solid #dfe2e6; font-weight: 600; }
.ecran__creneaux .pris { background: var(--c); border-color: var(--c); color: #fff; }
.ecran__ok { margin-top: 12px !important; padding: 8px 10px; border-radius: 10px; background: #e9f8ef; color: #127a3e; font-weight: 600; font-size: 11.5px; }
.ecran__canaux li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #eef0f2; font-weight: 600; }
.ecran__canaux i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ecran__canaux em { margin-left: auto; font-style: normal; font-weight: 400; color: #6b6f76; }
.ecran__alerte { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 10%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); font-weight: 600; font-size: 11.5px; }
.ecran__vocal { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 12px; border-radius: 99px; background: #f3f4f6; }
.ecran__vocal .lecture { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font-size: 9px; }
.ecran__vocal .onde { display: flex; align-items: center; gap: 3px; flex: 1; }
.ecran__vocal .onde i { width: 3px; border-radius: 2px; background: var(--c); height: 8px; }
.ecran__vocal .onde i:nth-child(3n) { height: 16px; } .ecran__vocal .onde i:nth-child(4n) { height: 12px; }
.ecran__vocal small { color: #6b6f76; }
.ecran__planning { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.ecran__planning span { padding: 7px 6px; border-radius: 10px; background: #f3f4f6; font-weight: 600; font-size: 11px; text-align: center; }
.ecran__planning small { display: block; font-weight: 400; color: var(--c); }
.ecran__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.ecran__chiffres div { padding: 9px 8px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, #fff); }
.ecran__chiffres small { display: block; color: #6b6f76; font-size: 10px; line-height: 1.2; }
.ecran__chiffres b { font-size: 17px; }
.ecran__objectif { margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.ecran__objectif small { grid-column: 1 / -1; color: #6b6f76; }
.ecran__objectif span { height: 8px; border-radius: 99px; background: #eef0f2; overflow: hidden; }
.ecran__objectif span i { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.ecran__objectif b { color: var(--c); }

@media (max-width: 760px) {
  .depli { grid-template-columns: 34px minmax(0, 1fr) 40px; }
  .depli__maquette { grid-column: 2 / -1; grid-row: 2; }
  .depli.est-ouvert .depli__maquette { width: auto; }
  .ecran { width: min(300px, 100%); }
}
@media (prefers-reduced-motion: reduce) { .depli__plus, .depli__maquette .ecran { transition: none; } }

/* ---------- Comment ça marche : la boîte à outils ----------
   Une liste de grands noms. Au survol, l'exemple de l'outil apparaît derrière le nom et suit la souris
   (script.js règle --x et --y) ; le nom reste lisible par-dessus. */
.r-survol { margin: 0 var(--marge); padding-top: clamp(90px, 11vw, 140px); }
.r-survol > h3 { margin-bottom: clamp(36px, 5vw, 60px); text-align: center; font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.survol { max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.survol__ligne { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: baseline; column-gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--trait); cursor: default; }
.survol__num { position: relative; z-index: 2; font-family: var(--etroite); font-weight: 700; font-size: 22px; color: rgba(var(--rvb), .35); }
.survol__nom { position: relative; z-index: 2; font-family: var(--etroite); font-weight: 700; font-size: clamp(40px, 6vw, 92px); line-height: .95; text-transform: uppercase; color: rgba(var(--rvb), .35); transition: color .3s ease; pointer-events: none; }
.survol__phrase { position: relative; z-index: 2; max-width: 16em; text-align: right; font-size: 14px; color: var(--gris); transition: color .3s ease; pointer-events: none; }
.survol__apercu { position: absolute; z-index: 1; left: 0; top: 0; pointer-events: none; opacity: 0; translate: var(--x, 50%) var(--y, 50%);
  transition: opacity .25s ease; will-change: translate, opacity; }
.survol__apercu .ecran { margin: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.85); transition: transform .45s var(--ressort); }
.survol__ligne.est-survolee { z-index: 3; }
.survol__ligne.est-survolee .survol__nom, .survol__ligne.est-survolee .survol__num { color: var(--texte); }
.survol__ligne.est-survolee .survol__apercu { opacity: 1; }
.survol__ligne.est-survolee .survol__apercu .ecran { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
.ecran__table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 11.5px; }
.ecran__table th { text-align: left; font-weight: 500; color: #6b6f76; padding: 4px 4px; border-bottom: 1px solid #eef0f2; }
.ecran__table td { padding: 6px 4px; border-bottom: 1px solid #eef0f2; font-weight: 600; }
.ecran__table tr.neuf td { background: color-mix(in srgb, var(--c) 12%, #fff); }
.ecran__table .vert { color: #127a3e; } .ecran__table .orange { color: #c2620b; }
.ecran__montant { margin-top: 10px !important; font-size: 30px; font-weight: 700; color: var(--c); letter-spacing: -.02em; }
@media (hover: none), (max-width: 760px) {
  .survol__ligne { grid-template-columns: 34px minmax(0, 1fr); }
  .survol__phrase { grid-column: 2; text-align: left; }
  .survol__apercu { position: static; grid-column: 2; translate: none; display: none; opacity: 1; }
  .survol__apercu .ecran { transform: rotate(-2deg); margin: 14px 0 6px; }
  .survol__ligne.est-survolee .survol__apercu { display: block; }
  .survol__ligne.est-survolee .survol__apercu .ecran { transform: rotate(-2deg); }
}

/* Boîte à outils, version du 15/10 au soir (demande de Jérémy) : les noms en noir ; la phrase, cachée au repos,
   sort de derrière le nom au survol et vient se fixer au centre de la ligne. Les écrans d'exemple sont gardés
   dans le code mais désactivés : pour les remettre, ajouter la classe avec-apercus à .survol. */
.survol:not(.avec-apercus) .survol__apercu { display: none !important; }
.survol__ligne { grid-template-columns: 56px minmax(0, 1fr); padding: 20px 0; }
.survol__nom { font-size: clamp(36px, 4.6vw, 72px); color: var(--texte); position: relative; z-index: 3; }
.survol__num { color: rgba(var(--rvb), .35); }
.survol__phrase { position: absolute; z-index: 1; left: 52%; top: 50%; max-width: 22em; text-align: left;
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.3; font-weight: 500; color: var(--texte);
  opacity: 0; filter: blur(6px); transform: translate(-45%, -50%) scale(.92);
  transition: opacity .35s ease, filter .45s ease, transform .6s var(--ressort); }
.survol__phrase::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--c); vertical-align: .1em; }
.survol__ligne.est-survolee .survol__phrase { opacity: 1; filter: none; transform: translate(0, -50%) scale(1); }
.survol__ligne.est-survolee .survol__num { color: var(--c); }
@media (hover: none), (max-width: 760px) {
  .survol__ligne { grid-template-columns: 34px minmax(0, 1fr); }
  .survol__phrase { position: static; grid-column: 2; transform: none; max-height: 0; overflow: hidden; margin-top: 0; transition: opacity .35s ease, filter .45s ease, max-height .45s ease, margin .45s ease; }
  .survol__ligne.est-survolee .survol__phrase { transform: none; max-height: 120px; margin-top: 8px; }
}

/* Intertitre et texte des blocs « duo » un peu plus gros (demande du 15/10) */
.r-duo .r-etiquette { font-size: 14.5px; max-width: 16em; }
.r-duo .r-texte { max-width: 32em; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; }

/* ---------- Réserver un appel : dans la barre, et à la fin de chaque rubrique ---------- */
.barre__droite { justify-self: end; display: flex; align-items: center; gap: 22px; }
.barre__appel { padding: 9px 16px; border-radius: 99px; background: var(--texte); color: var(--fond); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: transform .25s var(--ressort), box-shadow .25s ease; }
.barre__appel:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.bouton-appel { display: inline-flex; align-items: center; gap: 14px; padding: 15px 18px 15px 26px; border-radius: 99px; background: var(--texte); color: var(--fond); font-size: 15px; font-weight: 600; transition: transform .25s var(--ressort), box-shadow .25s ease; }
.bouton-appel span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent, var(--texte)); color: #fff; font-size: 17px; line-height: 1; }
.bouton-appel:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); }
.r-cta { margin: clamp(110px, 13vw, 170px) var(--marge) 0; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); border-radius: 28px; background: rgba(var(--rvb), .05); display: grid; gap: 18px; justify-items: start; }
.r-cta__titre { font-family: var(--etroite); font-weight: 700; font-size: clamp(40px, 5.6vw, 84px); line-height: .92; text-transform: uppercase; }
.r-cta__titre em { font-style: normal; color: var(--accent); }
[data-theme="clair"] #r-methode .r-cta__titre em { color: #c9a20a; }
@media (max-width: 720px) { .barre__appel { padding: 8px 12px; font-size: 11.5px; } .barre__droite { gap: 14px; } }

/* ---------- Prix : les deux offres en plus grand, le titre qui roule, le bouton qui sautille ---------- */
#r-prix .r-liste summary { grid-template-columns: 56px minmax(0, 1fr) auto 32px; padding: 34px 0; }
#r-prix .r-liste__num { font-size: 15px; }
#r-prix .r-liste__nom { font-size: clamp(26px, 3vw, 42px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
#r-prix .r-liste__bouton { padding: 10px 20px; font-size: 15px; }
#r-prix .r-liste__chevron { font-size: 24px; }
#r-prix .r-liste__corps { grid-template-columns: 56px 200px minmax(0, 1fr); gap: 10px 20px; padding-bottom: 40px; }
#r-prix .r-liste__corps .r-etiquette { font-size: 16px; }
#r-prix .r-liste__corps p:not(.r-etiquette) { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
#r-prix .r-liste__corps ul { gap: 10px; margin-top: 16px; }
#r-prix .r-liste__corps li { padding: 9px 16px; font-size: 15px; }
@media (max-width: 720px) {
  #r-prix .r-liste summary { grid-template-columns: 34px minmax(0, 1fr) 24px; padding: 26px 0; }
  #r-prix .r-liste__corps { grid-template-columns: 34px minmax(0, 1fr); }
}
/* Titre de l'appel : il s'écrit au clavier, lettre par lettre, avec un curseur (voir script.js) */
.frappe__mot { display: inline-block; white-space: nowrap; }
.frappe__l { visibility: hidden; }
.frappe__l.est-tapee { visibility: visible; }
.frappe__curseur { display: inline-block; width: .07em; height: .82em; margin: 0 .03em; vertical-align: -.02em; background: var(--accent); animation: clignote-frappe 1s steps(1) infinite; }
@keyframes clignote-frappe { 50% { opacity: 0; } }
/* Le bouton sautille toutes les 2 secondes : deux petits bonds, puis il se repose (repris du site 1) */
.bouton-appel[data-sautille] { animation: sautille 2s cubic-bezier(.3, 0, .3, 1) .6s infinite; }
.bouton-appel[data-sautille]:hover { animation-play-state: paused; }
@keyframes sautille {
  0%, 30%, 100% { translate: 0 0; }
  8% { translate: 0 -10px; }
  16% { translate: 0 0; }
  22% { translate: 0 -5px; }
}
@media (prefers-reduced-motion: reduce) { .bouton-appel[data-sautille] { animation: none; } }

/* ---------- Accueil : l'ombre des deux anneaux, comme posés au sol ----------
   Deux couronnes floues aux rayons des anneaux (outils-objectif.py : 285-370 et 398-466 sur 500),
   décalées vers le bas. Un dégradé, pas un filtre : rien à recalculer quand la page bouge. */
.objectif::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  translate: 9% 19%; scale: 1.06 .78;   /* soleil en haut à gauche : l'ombre part vers la droite */
  background: radial-gradient(circle closest-side,
    transparent 51%, rgba(var(--ombre-sol), .16) 56%, rgba(var(--ombre-sol), .30) 63%, rgba(var(--ombre-sol), .16) 71%, transparent 76%,
    transparent 79%, rgba(var(--ombre-sol), .18) 83%, rgba(var(--ombre-sol), .34) 88%, rgba(var(--ombre-sol), .18) 94%, transparent 100%);
  transition: opacity .3s ease;
}
:root { --ombre-sol: 30, 34, 40; }
.objectif.est-en-plongee::before { opacity: 0; }

/* Mode sombre : la même ombre au sol, mais en lumière blanche */
:root[data-theme="sombre"] { --ombre-sol: 255, 255, 255; }
:root[data-theme="sombre"] .objectif::before { opacity: .8; }
:root[data-theme="sombre"] .objectif.est-en-plongee::before { opacity: 0; }

/* « Suivant » : le titre reste noir ; curseur posé dessus, un trait de la couleur de la rubrique suivante
   traverse les lettres et les colore à mesure qu'il passe ; arrivé au bout, la rubrique s'ouvre (script.js).
   --s va de 0 à 1. */
.r-suivant__titre { position: relative; }
.r-suivant__couleur { position: absolute; inset: 0; display: grid; justify-items: center; color: var(--accent-suivant); pointer-events: none;
  clip-path: inset(-10% calc((1 - var(--s, 0)) * 100%) -10% 0); }
.r-suivant__trait { position: absolute; left: 50%; top: 50%; width: 120%; translate: -50% -50%; overflow: visible; pointer-events: none; }
.r-suivant__trait path { fill: none; stroke: var(--accent-suivant); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: calc(700 - var(--s, 0) * 700); }

/* « Reprenez votre temps. » se défait en particules au survol (d'après particle-button.framer.website,
   réglage « Circles · Classic ») : voir script.js. La copie de devant reçoit le survol. */
.accueil .mur--devant { pointer-events: auto; cursor: default; }
.particules-phrase { position: fixed; z-index: 3; pointer-events: none; display: none; }

/* ---------- Relecture sur téléphone (16/10) ---------- */
/* 1. Les accents des grands titres (le É de MÉTHODE) dépassaient de la case qui fait monter les mots : on
   agrandit la case vers le haut sans déplacer le texte */
.r-titre > span { padding-top: .18em; margin-top: -.18em; }
@media (max-width: 720px) {
  /* 2. la barre du haut prend un fond : le contenu ne passe plus sous le nom ni sous les boutons
     (3. c'est aussi ce qui recouvre maintenant le rond « descendre » quand on fait défiler) */
  .barre { padding-top: 14px; padding-bottom: 14px; background: rgba(var(--fond-rvb), .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  body:has(.accueil:not([hidden])) .barre { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* 4. deux cartes seulement, rangées sur les bords, au-dessus des épaules du personnage */
  .vignette:nth-of-type(2), .vignette:nth-of-type(5) { display: none; }
  .vignette { width: 104px; font-size: 9px; padding: 8px 9px; }
  .vignette em { font-size: 13px; }
  .vignette:nth-of-type(1) { left: 60px !important; top: 17% !important; }
  .vignette:nth-of-type(4) { left: calc(100% - 60px) !important; top: 25% !important; }
  /* 5. le prix de chaque offre reste visible, sous son nom */
  #r-prix .r-liste summary { grid-template-columns: 34px minmax(0, 1fr) 24px; row-gap: 12px; }
  #r-prix .r-liste__bouton { display: inline-block; grid-column: 2; grid-row: 2; justify-self: start; padding: 7px 14px; font-size: 13px; }
  #r-prix .r-liste__chevron { grid-column: 3; grid-row: 1; }
}

/* Photos de Jérémy (17/10) : portrait de « Qui suis-je » en paysage (la photo d'origine est petite, 508 px :
   on la montre entière plutôt que recadrée et agrandie) ; deux photos côte à côte dans « Comment ça marche » ;
   l'atelier en grand dans « Le prix » */
.r-moi__photo img { aspect-ratio: 3 / 2; object-position: 50% 40%; max-width: 560px; }
.r-images--duo { margin-top: clamp(90px, 11vw, 140px); max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 var(--marge); }
.r-images--duo img { filter: none; aspect-ratio: 3 / 2; }
.r-images--atelier { margin-top: clamp(70px, 9vw, 110px); }
.r-images--atelier img { object-position: 50% 45%; }
.r-images__texte { align-self: center; display: grid; gap: 16px; padding-right: clamp(0px, 3vw, 40px); }
.r-images__texte p:not(.r-etiquette) { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -.01em; }
.r-images__texte em { font-style: normal; color: var(--accent); }
/* « Vos agents sont prêts. Et vous ? » tient sur une ligne sur ordinateur (17/10) */
@media (min-width: 721px) { .r-appel__titre { font-size: clamp(40px, 5.4vw, 92px); white-space: nowrap; } }
/* lien vers les mentions légales dans le menu : la loi demande qu'elles soient faciles à trouver, accueil compris */
.menu .menu__legal { margin-top: 28px; }
.menu .menu__legal a { font-family: inherit; font-weight: 500; font-size: 13px; line-height: 1.4; text-transform: none; letter-spacing: .02em; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; }
/* sous chaque bouton « Prendre rendez-vous » : les deux autres façons de me joindre, en discret (17/10) */
.autres-contacts { margin-top: -4px; font-size: 14px; color: var(--gris); }
.autres-contacts a { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }