/* Refonte de l'accueil (29/09/2026).
   Ambiance claire, or et noir : fonds ivoire et porcelaine, filets et italiques or, quelques
   titres chromes (noir sur fond clair, argent sur image). Peu de fonds noirs.
   Les scenes epinglees lisent --rf (0 -> 1), ecrit par assets/js/refonte.js, qui pose
   html.rf-js. Sans cette classe (pas de script, ou mouvement reduit) : tout a plat, lisible.
   Regle : jamais de transform ni d'overflow:hidden sur un parent de .rf-colle (casse sticky). */

/* Pinyon Script (titres manuscrits des trois temps et de l'academie) : servie par le site, pas par Google
   (aucune requete externe, RGPD ; la politique de securite n'autorise que les polices du site). Licence OFL. */
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/pinyon-script-400.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; }

/* Accueil : un seul fond creme d'une section a l'autre (aucune ligne de separation). */
body { background: var(--rf-creme); }

:root {
  --rf-air: clamp(96px, 12vw, 150px);
  --rf-marge: clamp(20px, 6vw, 96px);
  --rf-lecture: 640px;
  --rf-arrondi: clamp(14px, 1.6vw, 24px);
  --rf-h2: clamp(2.6rem, 6.4vw, 6.4rem);
  --rf-h3: clamp(1.9rem, 3vw, 2.6rem);
  --rf-creme: #f7f3ec;
  --rf-or-vif: #a8834a;
  --rf-or-degrade: linear-gradient(100deg, #7a5a2c 0%, #b8924f 22%, #e9d39c 45%, #fbf0cf 52%, #c9a45e 64%, #8a6732 100%);
  --rf-chrome-noir: linear-gradient(180deg, #8d8d8d 0%, #3b3b3b 30%, #0b0b0b 49%, #1c1c1c 52%, #6f6f6f 70%, #cfcfcf 84%, #2e2e2e 100%);
  --rf-chrome-argent: linear-gradient(180deg, #ffffff 0%, #e4e4e4 30%, #9c9c9c 48%, #f2f2f2 54%, #bdbdbd 72%, #ffffff 100%);
}

/* Textes precieux : degrades decoupes dans les lettres */
.rf-or { font-style: italic; background: var(--rf-or-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-chrome { background: var(--rf-chrome-noir); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-chrome-clair { background: var(--rf-chrome-argent); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.rf-ornement { display: block; width: 120px; height: 1px; margin: 2.4rem auto 0; background: var(--rf-or-degrade); }

.rf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rf-surtitre { font-family: var(--sans); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--rf-or-vif); margin: 0 0 1.4rem; }
.rf-intro { max-width: 980px; margin: 0 auto; padding: var(--rf-air) var(--rf-marge) calc(var(--rf-air) * .6); text-align: center; }
.rf-intro--gauche { text-align: left; margin: 0; max-width: 1100px; }
.rf-intro h2, .rf-academie__tete h2, .rf-contact__titre, .rf-volet__intro h2 {
  font-family: var(--serif); font-weight: 300; font-size: var(--rf-h2); line-height: .98; letter-spacing: -.02em; margin: 0 0 2rem;
}
.rf-intro h2 em, .rf-contact__titre em, .rf-volet__intro h2 em, .rf-volet__texte h3 em { display: block; font-style: italic; }
.rf-intro p:not(.rf-surtitre) { max-width: var(--rf-lecture); margin: 0 auto; font-size: 1.12rem; color: var(--encre-douce); }
.rf-intro--gauche p:not(.rf-surtitre) { margin: 0; }
.rf-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.2rem; }
.rf-lien { display: inline-flex; gap: .7rem; align-items: baseline; padding-bottom: .35rem; border-bottom: 1px solid var(--rf-or-vif);
  color: inherit; text-decoration: none; letter-spacing: .06em; transition: gap .3s ease; }
.rf-lien:hover, .rf-lien:focus-visible { gap: 1.1rem; }
.rf-suite { text-align: center; padding: 3rem var(--rf-marge) 0; color: var(--encre-douce); }
.rf-compteur { font-family: var(--sans); font-size: .78rem; letter-spacing: .2em; color: var(--rf-or-vif); margin: 0 0 1rem; }

/* Scenes epinglees ------------------------------------------------------------------ */
[data-rf] { position: relative; }
[data-rf="colle"] { overflow-x: clip; }
.rf-colle { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* Volet diagonal (skill transitions-diagonales, version section) --------------------- */
/* --q : avancement de la scene k (0 cachee sous le bord bas, 1 plein ecran). */
.rf-volet__scene, .rf-volet__fil { position: absolute; inset: 0; --q: clamp(0, calc(var(--rf, 0) * (var(--n) - 1) * 1.15 - (var(--k) - 1)), 1); --d: 26vw; }
/* Chaque scene est son propre plan : le texte d'une scene ne traverse jamais la suivante. */
.rf-volet__scene { isolation: isolate; z-index: calc(var(--k) * 2 + 1); }
.rf-volet__fil { z-index: calc(var(--k) * 2); }
.rf-volet__scene[style*="--k:0"] { --q: 1; }
.rf-volet__scene--d:not([style*="--k:0"]) { clip-path: polygon(0 calc(100% + var(--d) - var(--q) * (100% + var(--d))), 100% calc(100% - var(--q) * (100% + var(--d))), 100% 100%, 0 100%); }
.rf-volet__scene--g { clip-path: polygon(0 calc(100% - var(--q) * (100% + var(--d))), 100% calc(100% + var(--d) - var(--q) * (100% + var(--d))), 100% 100%, 0 100%); }
/* Le filet or : la meme forme, quelques pixels plus haut, sous la scene. */
.rf-volet__fil { background: var(--rf-or-degrade); }
.rf-volet__fil--d { clip-path: polygon(0 calc(100% + var(--d) - var(--q) * (100% + var(--d)) - 5px), 100% calc(100% - var(--q) * (100% + var(--d)) - 5px), 100% 100%, 0 100%); }
.rf-volet__fil--g { clip-path: polygon(0 calc(100% - var(--q) * (100% + var(--d)) - 5px), 100% calc(100% + var(--d) - var(--q) * (100% + var(--d)) - 5px), 100% 100%, 0 100%); }
.rf-volet__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--q) * .12)); }

/* 1. Arrivee : la video, puis l'intro creme monte en diagonale */
.rf-arrivee { background: var(--nuit); }
.rf-arrivee__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + var(--rf, 0) * .1)); }
.rf-arrivee__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,16,.3), rgba(13,14,16,.1) 40%, rgba(13,14,16,.7)); }
.rf-arrivee__texte { position: absolute; inset: auto var(--rf-marge) 14svh; text-align: center; color: var(--ivoire); }
.rf-arrivee .rf-surtitre { color: #e2cc97; }
.rf-arrivee__titre { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 8.6vw, 9rem); line-height: .94; letter-spacing: -.03em; margin: 0; }
.rf-arrivee__titre span, .rf-arrivee__titre em { display: block; }
.rf-arrivee__phrase { max-width: 560px; margin: 1.6rem auto 0; font-size: 1.1rem; color: rgba(242,241,238,.88); }
.rf-volet--ouverture .rf-volet__scene--g { background: var(--rf-creme); display: grid; place-items: center; }
.rf-volet__intro { max-width: 980px; padding: 0 var(--rf-marge); text-align: center;
  opacity: clamp(0, calc((var(--q) - .55) * 3), 1); transform: translateY(calc((1 - var(--q)) * 60px)); }
.rf-volet__intro p:not(.rf-surtitre) { max-width: var(--rf-lecture); margin: 0 auto; font-size: 1.12rem; color: var(--encre-douce); }

/* 2. Triptyque : le portrait central grandit, les cotes s'ecartent et pivotent */
.rf-triptyque { height: 230svh; background: var(--rf-creme); }
.rf-triptyque .rf-colle { display: grid; place-items: center; }
.rf-triptyque figure { grid-area: 1 / 1; margin: 0; width: min(30vw, 36svh); aspect-ratio: 9 / 16; border-radius: var(--rf-arrondi); overflow: hidden; }
.rf-triptyque img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-triptyque__centre { z-index: 2; transform: scale(calc(1 + var(--rf, 0) * 1.9)); border-radius: calc(var(--rf-arrondi) * (1 - var(--rf, 0))); }
.rf-triptyque__cote--g { transform: translate(calc(-1 * (24vw + var(--rf, 0) * 12vw)), calc(var(--rf, 0) * -14svh)) rotate(calc(-5deg * (1 - var(--rf, 0)))) scale(.86); }
.rf-triptyque__cote--d { transform: translate(calc(24vw + var(--rf, 0) * 12vw), calc(var(--rf, 0) * 14svh)) rotate(calc(5deg * (1 - var(--rf, 0)))) scale(.86); }

/* 3. Deux metiers : la premiere carte entre par la gauche, la seconde par la droite */
.rf-metiers { padding-bottom: var(--rf-air); background: var(--rf-creme); overflow-x: clip; }
.rf-metier { position: relative; margin: 0 var(--rf-marge) clamp(24px, 3vw, 40px); height: 90svh; min-height: 520px;
  border-radius: var(--rf-arrondi); overflow: hidden; color: var(--ivoire); --e: clamp(0, calc(var(--rf, 0) * 2.4), 1); }
.rf-js .rf-metier--gauche { transform: translateX(calc((1 - var(--e)) * -18vw)) rotate(calc((1 - var(--e)) * -2deg)); opacity: calc(.3 + var(--e) * .7); }
.rf-js .rf-metier--droite { transform: translateX(calc((1 - var(--e)) * 18vw)) rotate(calc((1 - var(--e)) * 2deg)); opacity: calc(.3 + var(--e) * .7); }
.rf-metier__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rf-metier::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13,14,16,.66)); }
.rf-metier__texte { position: absolute; z-index: 1; bottom: clamp(28px, 5vw, 64px); max-width: 520px; }
.rf-metier--gauche .rf-metier__texte { left: clamp(24px, 5vw, 72px); }
.rf-metier--droite .rf-metier__texte { right: clamp(24px, 5vw, 72px); }
.rf-metier .rf-surtitre { color: #e2cc97; }
.rf-metier h3 { font-family: var(--serif); font-weight: 300; font-size: var(--rf-h3); line-height: 1.05; margin: 0 0 1rem; }
.rf-metier p:not(.rf-surtitre) { color: rgba(242,241,238,.9); margin: 0 0 1.6rem; }
.rf-metier .rf-lien { border-color: #e2cc97; }

/* 4. Bandes : deux rangs inclines qui filent en sens contraires (diagonale) */
.rf-bandes { background: var(--rf-creme); padding: 14svh 0; overflow: hidden; }
.rf-bandes__incline { transform: rotate(-7deg); display: grid; gap: 22px; width: 130vw; margin-left: -15vw; }
.rf-bande { display: flex; gap: 22px; width: max-content; }
.rf-bande figure { margin: 0; height: clamp(180px, 30vh, 320px); border-radius: 16px; overflow: hidden; flex: none; }
.rf-bande img, .rf-bande video { height: 100%; width: auto; display: block; }
.rf-js .rf-bande--1 { transform: translateX(calc(-45% + var(--rf, 0) * 40%)); }
.rf-js .rf-bande--2 { transform: translateX(calc(-5% - var(--rf, 0) * 40%)); }

/* 5. Les soins : scene « image qui s'ouvre » : le logo Φ, sur creme, s'ouvre en deux */
.rf-soins { background: var(--rf-creme); padding-bottom: 0; }  /* la plongee suit sans coupure */
/* .ouv.rf-ouv : ouverture.css se charge apres cette feuille, il faut une specificite superieure. */
.ouv.rf-ouv { --ouv-bg: var(--rf-creme); --ouv-fg: var(--encre);
  --ouv-font-title: var(--serif); --ouv-font-copy: var(--sans);
  --ouv-title-size: clamp(30px, 3.5vw, 66px); --ouv-title-weight: 300;
  --ouv-copy-size: clamp(16px, 1.45vw, 22px); --ouv-copy-line: 1.55; --ouv-title-copy-gap: 40px;
  --ouv-label-size: 12px; --ouv-thumb-w: clamp(200px, 19vw, 290px); --ouv-thumb-h: clamp(267px, 25.3vw, 387px); --ouv-clearance: 44px;
  /* Bande restante a l'ouverture (une moitie du logo + marge) : posee en px par refonte.js,
     car ouverture.js ne sait pas lire un calc(). Chaque moitie s'arrete entiere contre le bord. */
  --ouv-edge-visible: 222px; --ouv-item: 100vh; }
/* Le logo s'affiche entier (contain) : le fond de l'image est le creme de la section, invisible. */
.rf-ouv .ouv-half img { object-fit: contain; background: var(--rf-creme); }
.rf-ouv .ouv-label { color: var(--rf-or-vif); letter-spacing: .24em; }
/* Un demi-espace de chaque cote : quand les deux moities se rejoignent, les mots ne collent pas. */
.rf-ouv .ouv-title .ouv-part--left { padding-right: .18em; }
.rf-ouv .ouv-title .ouv-part--right { padding-left: .18em; }
.rf-ouv .ouv-title .ouv-part { background: var(--rf-chrome-noir); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-ouv .ouv-copy { color: var(--encre-douce); }
.rf-ouv .ouv-thumb { box-shadow: 0 30px 60px -30px rgba(60,45,20,.45); border-radius: 8px; }
.rf-ouv .ouv-thumb img { border-radius: 8px; }
/* Ecrans moyens : les textes doivent tenir entre les deux moities du logo, arretees aux bords. */
@media (min-width: 768px) and (max-width: 1360px) {
  .ouv.rf-ouv { --ouv-title-size: 3.1vw; --ouv-copy-size: 14.5px; --ouv-thumb-w: 17vw; --ouv-thumb-h: 22.6vw; --ouv-clearance: 30px; }
}
@media (max-width: 767px) {
  .ouv.rf-ouv { --ouv-title-size: 18px; --ouv-copy-size: 14px; --ouv-thumb-w: 128px; --ouv-thumb-h: 171px; --ouv-clearance: 16px; --ouv-edge-visible: 67px; }
}

/* 6. Cinq soins en images : la video grandit en entrant par un cote */
.rf-passages { background: var(--porcelaine); }
.rf-passage { height: 190svh; --e: clamp(0, calc(var(--rf, 0) * 1.8), 1); }
.rf-passage__media { position: absolute; inset: 0; display: grid; place-items: center; }
.rf-passage__media video { width: calc(70% + var(--e) * 30%); height: calc(70% + var(--e) * 30%);
  object-fit: cover; border-radius: calc(42px * (1 - var(--e)) + 3px); }
.rf-js .rf-passage--gauche video { transform: translateX(calc((1 - var(--e)) * -26vw)); }
.rf-js .rf-passage--droite video { transform: translateX(calc((1 - var(--e)) * 26vw)); }
.rf-js .rf-passage--diagonale video { transform: translate(calc((1 - var(--e)) * -22vw), calc((1 - var(--e)) * 22svh)) rotate(calc((1 - var(--e)) * -4deg)); }
/* Pas de cadre : le texte est ecrit a meme la video, sur un voile degrade. */
.rf-passage__voile { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,14,16,0) 35%, rgba(13,14,16,.72) 100%), linear-gradient(90deg, rgba(13,14,16,.45), transparent 60%); }
.rf-passage--gauche .rf-passage__voile, .rf-passage--diagonale .rf-passage__voile {
  background: linear-gradient(180deg, rgba(13,14,16,0) 35%, rgba(13,14,16,.72) 100%), linear-gradient(270deg, rgba(13,14,16,.45), transparent 60%); }
.rf-js .rf-passage__voile { opacity: clamp(0, calc((var(--rf, 0) - .22) * 4), 1); }
.rf-passage__texte { position: absolute; z-index: 1; left: var(--rf-marge); right: var(--rf-marge); bottom: 8svh; color: var(--ivoire); }
.rf-passage--gauche .rf-passage__texte, .rf-passage--diagonale .rf-passage__texte { text-align: right; }
.rf-passage__texte .rf-surtitre { color: #e2cc97; margin-bottom: 1.2rem; }
.rf-passage__texte .rf-compteur { display: inline; margin: 0 .9rem 0 0; color: #e2cc97; opacity: .8; }
/* Grand titre : chaque mot monte de son masque, l'un apres l'autre, au fil du defilement. */
.rf-passage__titre { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 7.4vw, 8rem); line-height: .95; letter-spacing: -.025em;
  margin: 0 0 1.6rem; max-width: 14ch; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.rf-passage--gauche .rf-passage__titre, .rf-passage--diagonale .rf-passage__titre { margin-left: auto; }
.rf-mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.rf-mot > span { display: inline-block; }
.rf-js .rf-mot > span { --t: clamp(0, calc((var(--rf, 0) - .26) * 7 - var(--i) * .35), 1);
  transform: translateY(calc((1 - var(--t)) * 105%)) rotate(calc((1 - var(--t)) * 6deg)); opacity: calc(.2 + var(--t) * .8); }
.rf-passage__desc, .rf-passage__faits, .rf-passage__texte .rf-lien { max-width: 540px; }
.rf-passage--gauche :is(.rf-passage__desc, .rf-passage__faits), .rf-passage--diagonale :is(.rf-passage__desc, .rf-passage__faits) { margin-left: auto; }
.rf-passage__desc { font-size: 1.12rem; line-height: 1.6; margin: 0 0 1.2rem; color: rgba(242,241,238,.92); }
.rf-passage__faits { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .95rem; }
.rf-passage--gauche .rf-passage__faits, .rf-passage--diagonale .rf-passage__faits { justify-content: flex-end; }
.rf-passage__faits li + li::before { content: "·"; margin-right: 1.4rem; color: #e2cc97; }
.rf-passage__faits li + li { color: #e2cc97; }
.rf-passage__texte .rf-lien { border-color: #e2cc97; }
.rf-js .rf-passage__texte :is(.rf-surtitre, .rf-passage__desc, .rf-passage__faits, .rf-lien) {
  opacity: clamp(0, calc((var(--rf, 0) - .42) * 5), 1); transform: translateY(calc((1 - clamp(0, calc((var(--rf, 0) - .42) * 5), 1)) * 20px)); }

/* 7. Vos besoins : colonnes a filet or */
.rf-besoins { padding-bottom: var(--rf-air); background: var(--rf-creme); }
.rf-besoins .rf-intro { padding-left: var(--rf-marge); }
.rf-besoins__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem 5%; padding: 0 var(--rf-marge); }
.rf-besoin { display: block; padding-top: 1.3rem; border-top: 1px solid var(--rf-or-vif); color: inherit; text-decoration: none; }
.rf-besoin__nom { display: block; font-family: var(--serif); font-size: 1.8rem; line-height: 1.1; margin-bottom: .6rem; }
.rf-besoin__texte { display: block; color: var(--encre-douce); font-size: .98rem; }
.rf-besoin:hover .rf-besoin__nom { font-style: italic; color: var(--rf-or-vif); }

/* 8. Le deroule : trois scenes en volet diagonal */
.rf-volet--deroule .rf-volet__scene { color: var(--ivoire); }
.rf-volet--deroule .rf-volet__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,14,16,.62), rgba(13,14,16,.1) 60%); }
.rf-volet__texte { position: absolute; z-index: 1; left: var(--rf-marge); bottom: 10svh; max-width: 640px;
  opacity: clamp(0, calc((var(--q) - .6) * 3), 1); transform: translateX(calc((1 - var(--q)) * -40px)); }
.rf-volet__texte h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 5.4vw, 5.4rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 1.4rem; }
.rf-volet__texte .rf-surtitre { color: #e2cc97; }
.rf-volet__texte p:not(.rf-surtitre) { color: rgba(242,241,238,.9); max-width: 520px; }

/* 9. L'academie : le cadre s'ouvre du tiers au plein ecran, puis le ruban des formations defile */
.rf-academie { background: var(--rf-creme); padding-bottom: var(--rf-air); }
.rf-academie__scene { height: 620svh; --ouvre: clamp(0, calc(var(--rf, 0) / .22), 1); --pan: clamp(0, calc((var(--rf, 0) - .34) / .62), 1); }
.rf-academie__cadre { position: absolute; inset: 0; }
.rf-academie__cadre img { width: 100%; height: 100%; object-fit: cover; }
.rf-js .rf-academie__cadre img {
  clip-path: inset(calc((1 - var(--ouvre)) * 33%) calc((1 - var(--ouvre)) * 33%) round calc((1 - var(--ouvre)) * 24px));
  filter: brightness(calc(1 - clamp(0, (var(--rf, 0) - .22) * 6, 1) * .55)); }
.rf-academie__tete { position: absolute; z-index: 1; left: var(--rf-marge); top: 11svh; max-width: 760px; color: var(--ivoire); }
.rf-js .rf-academie__tete { opacity: clamp(0, calc((var(--rf, 0) - .2) * 8), 1); transform: translateY(calc(var(--pan) * -8svh)); }
.rf-academie__tete h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); margin-bottom: 1.2rem; }
.rf-academie__tete h2 em { display: inline; }
.rf-academie__tete .rf-surtitre { color: #e2cc97; }
.rf-academie__tete p:not(.rf-surtitre) { color: rgba(242,241,238,.9); max-width: 540px; }
.rf-ruban { position: absolute; z-index: 2; left: 0; bottom: 5svh; display: flex; gap: 24px; padding: 0 var(--rf-marge); width: max-content; }
.rf-js .rf-ruban { transform: translateX(calc(var(--pan) * (-100% + 100vw))); opacity: clamp(0, calc((var(--rf, 0) - .3) * 10), 1); }
.rf-formation { display: grid; grid-template-columns: 150px 1fr; gap: 1.4rem; width: min(560px, 80vw); padding: 1.2rem;
  background: rgba(250,250,248,.96); border-radius: var(--rf-arrondi); color: var(--encre); border-top: 2px solid var(--rf-or-vif); }
.rf-formation__image { width: 150px; height: 170px; object-fit: cover; border-radius: 10px; }
.rf-formation h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.05; margin: 0 0 .6rem; }
.rf-formation p { margin: 0 0 .7rem; font-size: .93rem; color: var(--encre-douce); }
.rf-formation .rf-compteur { margin-bottom: .5rem; }
.rf-formation .rf-formation__prix { font-family: var(--serif); font-size: 1.35rem; color: var(--rf-or-vif); }

/* 10. Avis (affiche seulement avec de vrais avis) */
.rf-avis { height: calc(var(--rf-n, 3) * 110svh); background: var(--rf-creme); }
.rf-avis .rf-colle { display: grid; place-items: center; text-align: center; padding: 0 var(--rf-marge); }
.rf-avis__citation { grid-area: 1 / 1; margin: 0; max-width: 900px; opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.rf-avis__citation.est-active { opacity: 1; transform: none; }
.rf-avis__citation p { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1.15; margin: 0 0 1.4rem; }
.rf-avis__citation footer { color: var(--rf-or-vif); letter-spacing: .12em; font-size: .85rem; }
.rf-avis__nav { position: absolute; bottom: 8svh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; }
.rf-avis__nav button { background: none; border: 1px solid var(--rf-or-vif); color: inherit; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.rf-avis__nav svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.rf-avis__nav circle { fill: none; stroke: var(--rf-or-vif); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* 12. Contact */
.rf-contact { text-align: center; padding: var(--rf-air) var(--rf-marge); background: var(--rf-creme); }
.rf-contact__titre { font-size: clamp(3rem, 9vw, 8.8rem); }
.rf-contact p:not(.rf-surtitre) { max-width: 560px; margin: 0 auto; color: var(--encre-douce); }

/* Telephone ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .rf-triptyque figure { width: 44vw; }
  .rf-triptyque__cote--g { transform: translate(calc(-1 * (30vw + var(--rf, 0) * 20vw)), calc(var(--rf, 0) * -10svh)) rotate(calc(-5deg * (1 - var(--rf, 0)))) scale(.8); }
  .rf-triptyque__cote--d { transform: translate(calc(30vw + var(--rf, 0) * 20vw), calc(var(--rf, 0) * 10svh)) rotate(calc(5deg * (1 - var(--rf, 0)))) scale(.8); }
  .rf-metier { height: 78svh; }
  .rf-metier--droite .rf-metier__texte, .rf-metier--gauche .rf-metier__texte { left: 22px; right: 22px; }
  .rf-bandes__incline { transform: rotate(-9deg); gap: 14px; }
  .rf-bande { gap: 14px; }
  .rf-bande figure { height: 150px; border-radius: 12px; }
  .rf-passage__media video { width: calc(80% + var(--e) * 20%); height: calc(46% + var(--e) * 54%); }
  .rf-passage__texte { left: 18px; right: 18px; bottom: 5svh; }
  .rf-passage__titre { font-size: clamp(2.3rem, 10.5vw, 3.2rem); margin-bottom: 1rem; }
  .rf-passage__desc { font-size: .95rem; }
  .rf-passage__faits { font-size: .85rem; }
  .rf-besoins__grille { grid-template-columns: 1fr; gap: 2rem; }
  .rf-volet__scene, .rf-volet__fil { --d: 40vw; }
  .rf-volet__texte { right: var(--rf-marge); bottom: 7svh; }
  .rf-volet__texte p:not(.rf-surtitre) { font-size: .95rem; }
  .rf-volet--deroule .rf-volet__scene::after { background: linear-gradient(180deg, rgba(13,14,16,.05) 30%, rgba(13,14,16,.75)); }
  .rf-academie__tete { top: 10svh; right: var(--rf-marge); }
  .rf-academie__tete p:not(.rf-surtitre) { font-size: .95rem; }
  .rf-formation { grid-template-columns: 96px 1fr; width: 84vw; gap: 1rem; padding: 1rem; }
  .rf-formation__image { width: 96px; height: 130px; }
  .rf-formation h3 { font-size: 1.35rem; }
  .rf-formation p { font-size: .86rem; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .rf-besoins__grille { grid-template-columns: repeat(2, 1fr); }
}

/* Sans script ou en mouvement reduit : tout a plat, rien ne bouge, tout reste lisible */
html:not(.rf-js) [data-rf] { height: auto !important; }
html:not(.rf-js) .rf-colle { position: relative; height: auto; min-height: 100svh; }
html:not(.rf-js) .rf-volet .rf-colle { min-height: 0; }
html:not(.rf-js) .rf-volet__scene { position: relative; min-height: 100svh; clip-path: none; --q: 1; }
html:not(.rf-js) .rf-volet__fil { display: none; }
html:not(.rf-js) .rf-triptyque .rf-colle { display: flex; justify-content: center; gap: 2vw; padding: 4rem var(--rf-marge); min-height: 0; }
html:not(.rf-js) .rf-triptyque figure { transform: none; }
html:not(.rf-js) .rf-passage .rf-colle { min-height: 0; display: grid; gap: 1.5rem; padding: 2rem var(--rf-marge); }
html:not(.rf-js) .rf-passage__media, html:not(.rf-js) .rf-passage__texte { position: relative; inset: auto; }
html:not(.rf-js) .rf-passage__media video { width: 100%; height: auto; }
html:not(.rf-js) .rf-passage__voile { display: none; }
html:not(.rf-js) .rf-passage__texte { color: var(--encre); text-align: left; }
html:not(.rf-js) .rf-passage__desc { color: var(--encre-douce); }
html:not(.rf-js) .rf-bande { flex-wrap: wrap; width: auto; }
html:not(.rf-js) .rf-bandes__incline { transform: none; width: auto; margin: 0 var(--rf-marge); }
html:not(.rf-js) .rf-academie__scene .rf-colle { min-height: 0; }
html:not(.rf-js) .rf-academie__cadre { position: relative; height: 70svh; }
html:not(.rf-js) .rf-academie__cadre img { filter: brightness(.5); }
html:not(.rf-js) .rf-ruban { position: relative; width: auto; flex-wrap: wrap; padding: 2rem var(--rf-marge); bottom: auto; }
html:not(.rf-js) .rf-avis__citation { opacity: 1; transform: none; margin-bottom: 3rem; }

/* 6. Plongee (dans la scene du logo) puis preambule noir de la scene des videos : voir refonte.js.
   La scene du logo s'allonge de PAUSE + ZOOM + NOIR (0,6 + 2,4 + 1 ecran) ; le meme Φ grossit vers sa barre noire,
   ce voile finit le noir. La scene des videos remonte d'un ecran (-100vh) sur ce noir : aucun bord
   ne defile ; elle commence par son propre voile noir ou le titre degrossit, puis s'efface. */
.ouv.rf-ouv .ouv-shell { height: calc(100vh + var(--ouv-hold) + var(--ouv-split) + var(--ouv-text-delay) +
  (var(--ouv-item) * var(--ouv-count)) + var(--ouv-exit-close) + 400vh); }  /* PAUSE .6 + ZOOM 2.4 + NOIR 1 */
.rf-zoom { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 21; visibility: hidden; pointer-events: none; }  /* le zoom, dessine par refonte.js */
.rf-noir { position: absolute; inset: 0; z-index: 25; background: #070707; opacity: 0; pointer-events: none; }
.rf-hr { margin-top: -100vh; }
.rf-hr__noir { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: #070707; pointer-events: none; }
.rf-hr__titre { text-align: center; color: var(--ivoire); padding: 0 var(--rf-marge); will-change: transform, opacity; opacity: 0; }
.rf-hr__titre .rf-surtitre { color: #e2cc97; }
.rf-hr__titre h2 { font-family: var(--serif); font-weight: 300; font-size: var(--rf-h2); line-height: .98; letter-spacing: -.02em; margin: 0 0 2rem; }
.rf-hr__titre h2 em { display: block; }
.rf-hr__titre p:not(.rf-surtitre) { max-width: var(--rf-lecture); margin: 0 auto; font-size: 1.12rem; color: rgba(242,241,238,.78); }
/* Sans script ou mouvement reduit : pas de plongee ni de voile, la scene suit simplement. */
html:not(.rf-js) .ouv.rf-ouv .ouv-shell { height: calc(100vh + var(--ouv-hold) + var(--ouv-split) + var(--ouv-text-delay) +
  (var(--ouv-item) * var(--ouv-count)) + var(--ouv-exit-close)); }
html:not(.rf-js) .rf-hr { margin-top: 0; }
html:not(.rf-js) .rf-hr__noir { opacity: 0; }
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  /* Mouvement reduit sur telephone : la video reste epinglee pendant le preambule, les etapes passent ensuite dessus. */
  .rf-hr .hr__sticky { position: sticky; top: 0; }
  .rf-js .rf-hr .hr__etapes { margin-top: 160vh; position: relative; z-index: 9; }
  .rf-js .rf-hr .hr__contenu { top: 160vh; }
}

/* 6 bis. Cinq soins filmes : skill hero-retrecit (assets/css/hero-retrecit.css), aux couleurs du site.
   La video de l'epilation retrecit en carte, les quatre autres soins arrivent en vignettes puis
   grandissent un a un ; le texte est toujours ecrit par-dessus la video, en grand. */
.rf-passages { padding-bottom: 0; }
.rf-hr { --hr-fond: var(--rf-creme); --hr-encre: var(--encre); font-family: var(--sans); }
.hr.rf-hr { --hr-texte-taille: clamp(170px, 19vw, 300px); }
@media (max-width: 1023px) { .hr.rf-hr { --hr-texte-taille: 124px; } }
/* Le nom du site en texte plein (fonce autour de la video, blanc dessus) ; au survol de la souris,
   chaque lettre se creuse et garde son contour or, comme les titres du site. */
.rf-hr .hr__bandeau { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; text-transform: none; pointer-events: auto; }
.rf-hr .hr__bandeau--dehors { opacity: 1; color: var(--encre); }
.rf-hr .hr__bandeau--verre { color: #fff; }
.rf-hr .hr__bandeau--verre .hr__rangee { background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; }
.rf-hr .hr__bandeau .lettre { display: inline-block; cursor: default; padding: 0; flex: none; }  /* .hr__rangee span ajoute un espace apres chaque phrase : pas apres chaque lettre */
.rf-hr .hr__bandeau .lettre.est-creuse { color: transparent; -webkit-text-stroke: .012em var(--rf-or-vif); }
.rf-hr .hr__bandeau--verre .lettre.est-creuse { -webkit-text-stroke-color: #f3dfaa; }
.rf-hr .hr__voile { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0) 30%, rgba(0,0,0,.35)),
  linear-gradient(270deg, rgba(0,0,0,.5), rgba(0,0,0,0) 55%); }
.rf-hr .hr__accroche { left: 58vw; right: 5vw; top: auto; bottom: 7vh; max-width: none; }
.rf-hr .hr__contenu { top: 0; bottom: auto; height: 100vh; }
.rf-hr .hr__surtitre { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1rem; color: #e2cc97; }
.rf-hr .hr__contenu--fonce .hr__surtitre, .rf-hr .hr__contenu--fonce .hr__faits { color: var(--rf-or-vif); }
.rf-hr .hr__titre { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 4.4vw, 5rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 1.2rem; }
.rf-hr .hr__texte { font-size: 1.05rem; line-height: 1.6; margin: 0 0 1rem; max-width: 34em; }
.rf-hr .hr__faits { font-size: .92rem; margin: 0 0 1.2rem; color: #e2cc97; }
.rf-hr .hr__lien { display: inline-flex; gap: .7rem; padding-bottom: .3rem; border-bottom: 1px solid currentColor; color: inherit;
  text-decoration: none; letter-spacing: .06em; pointer-events: auto; }
.rf-hr .hr__adresse { display: none; }
.rf-hr .hr__photo img { border-radius: 8px; }
.rf-hr .hr__etape video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rf-hr .hr__etape-num { color: #e2cc97; }
.rf-hr .hr__etape-titre { font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 6.6vw, 7.4rem); line-height: .95; letter-spacing: -.025em; margin: 0 0 1.4rem; }
.rf-hr .hr__etape-desc { font-size: 1.1rem; max-width: 34em; margin: 0 0 1rem; }
.rf-hr .hr__etape-faits { font-size: .95rem; margin: 0 0 1.2rem; color: #e2cc97; }
.rf-hr .hr__etape .hr__lien { color: #fff; }
.rf-hr .hr__etapes--epingle .hr__etape-texte { left: 6vw; bottom: 9vh; max-width: 58vw; }
.rf-hr .hr__etapes--epingle a { pointer-events: auto; }
@media (max-width: 1023px) {
  .rf-hr .hr__accroche { left: 20px; right: 20px; bottom: 6svh; }
  .rf-hr .hr__contenu { height: 100svh; }
  .rf-hr .hr__voile { background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,0) 30%, rgba(0,0,0,.7)); }
  .rf-hr .hr__titre { font-size: clamp(2.2rem, 9vw, 3rem); }
  .rf-hr .hr__texte { font-size: .95rem; }
  .rf-hr .hr__etape { height: 88svh; }
  .rf-hr .hr__etape-titre { font-size: clamp(2.2rem, 9.5vw, 3.2rem); }
  .rf-hr .hr__etape-desc { font-size: .95rem; }
}

/* 8. Le deroule : « Les trois temps » (skill trois-mondes, assets/css/trois-mondes.css), aux couleurs
   du site. Sous le bandeau : nom du temps, accroche or, description (le modele n'affichait que le nom). */
.rf-tm { background: #070707; font-family: var(--sans); }
.rf-tm .tm__titre-script { background: var(--rf-or-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .15em; }
.rf-tm .tm__titre-caps { font-family: var(--serif); color: var(--ivoire); }
.rf-tm .tm__mondes { top: 59vh; bottom: 2vh; height: auto; font-size: inherit; }
.rf-tm .tm__mondes li { display: flex; flex-direction: column; align-items: center; padding: 0 var(--rf-marge); }
.rf-tm .tm__nom { font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 5.2vw, 88px); line-height: 1; letter-spacing: -.01em; margin: 0 0 .9rem; color: var(--ivoire); }
.rf-tm .tm__accroche { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.7vw, 1.6rem); margin: 0 0 1rem; color: #e2cc97; }
.rf-fondu { height: 45vh; }
.rf-fondu--vers-noir { background: linear-gradient(180deg, var(--rf-creme), #070707); }
.rf-fondu--vers-creme { background: linear-gradient(180deg, #070707, var(--rf-creme)); }
.rf-tm .tm__desc { max-width: 640px; margin: 0; font-size: 1.02rem; line-height: 1.65; color: rgba(242,241,238,.78); }
.rf-tm .tm__compteur { left: 6vw; top: auto; bottom: 7vh; margin: 0; width: 88px; height: 88px; }
.rf-tm .tm__compteur .tm__trace { stroke: #e2cc97; }
@media (max-width: 767px) {
  .rf-tm .tm__mondes { top: 57vh; }
  .rf-tm .tm__nom { font-size: 38px; margin-bottom: .5rem; }
  .rf-tm .tm__accroche { font-size: 1.05rem; margin-bottom: .6rem; }
  .rf-tm .tm__desc { font-size: .9rem; line-height: 1.55; }
  .rf-tm .tm__compteur { left: 50%; top: auto; bottom: 2.5vh; margin-left: -26px; width: 52px; height: 52px; }
}

/* 9. L'academie : skill tenets-horizontal (assets/css/tenets.css), aux couleurs du site. Partie
   horizontale courte (consigne d'Elrick) : les 7 formations en cartes cliquables serrees. */
.rf-tn { background: var(--rf-creme); color: var(--encre); font-family: var(--sans); }
.rf-tn .tn__item, .rf-tn .tn__carte { background: var(--rf-creme); }
.rf-tn .tn__item--intro { background: none; }
.rf-tn .tn__carte-titre, .rf-tn .tn-caps { font-family: var(--serif); }
.rf-tn .tn__carte-titre { background: var(--rf-chrome-noir); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-tn .tn-script { background: var(--rf-or-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .12em; }
.rf-tn .tn__formations { display: flex; align-items: center; gap: 1.3vw; padding: 0 6vw 0 5vw; box-sizing: border-box; }
.rf-tn .tn__formations-tete { flex: 0 0 22vw; margin-right: 2.5vw; }
.rf-tn .tn__formations-titre { margin: 0 0 1.6rem; font-size: 5.4vw; font-weight: 300; line-height: 1; }
.rf-tn .tn__formations-titre .tn-script { display: block; font-size: .62em; }
.rf-tn .tn__formations-titre .tn-caps { display: block; font-size: .56em; padding: .12em 0 0 .6em; }
.rf-tn .tn__formations-tete > p:not(.rf-surtitre):not(.tn__formations-titre) { margin: 0 0 1.8rem; font-size: .98rem; line-height: 1.65; color: var(--encre-douce); }
.tn__formation { flex: 0 0 16.5vw; min-width: 220px; display: flex; flex-direction: column; color: inherit; text-decoration: none;
  background: var(--porcelaine); border-radius: 14px; overflow: hidden; border-top: 2px solid var(--rf-or-vif);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.tn__formation:hover, .tn__formation:focus-visible { transform: translateY(-8px); box-shadow: 0 26px 50px -30px rgba(60,45,20,.5); }
.tn__formation-image { display: block; aspect-ratio: 4 / 4.2; overflow: hidden; }
.tn__formation-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.tn__formation:hover .tn__formation-image img { transform: scale(1.06); }
.tn__formation-num { margin: 1rem 1.1rem 0; font-size: .7rem; letter-spacing: .2em; color: var(--rf-or-vif); }
.tn__formation-nom { margin: .45rem 1.1rem .5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.45vw, 1.6rem); line-height: 1.08; }
.tn__formation-texte { margin: 0 1.1rem; font-size: .82rem; line-height: 1.55; color: var(--encre-douce);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tn__formation-pied { margin: auto 1.1rem 1.1rem; padding-top: .9rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; border-top: 1px solid var(--filet-or); }
.tn__formation-prix { font-family: var(--serif); font-size: 1.15rem; color: var(--rf-or-vif); white-space: nowrap; }
.tn__formation-lien { font-size: .72rem; letter-spacing: .06em; white-space: nowrap; }
/* Mouvement reduit sur telephone : les formations s'empilent en grille. */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .rf-tn .tn__formations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 8vh 20px; }
  .rf-tn .tn__formations-tete { grid-column: 1 / -1; margin: 0 0 2vh; }
  .rf-tn .tn__formations-titre { font-size: 64px; }
  .tn__formation { min-width: 0; }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) { .rf-tn .tn__formations { grid-template-columns: 1fr; } }
/* Telephone et tablette anime (01/10/2026) : l'en-tete puis les sept cartes defilent a l'horizontale. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .rf-tn .tn__formations { gap: 5vw; padding: 0 8vw 0 7vw; }
  .rf-tn .tn__formations-tete { flex: 0 0 78vw; margin-right: 4vw; }
  .rf-tn .tn__formations-titre { font-size: 15vw; }
  .tn__formation { flex: 0 0 72vw; min-width: 0; }
}
/* « ACADÉMIE » tient sur une ligne (le modele etait regle pour « PRINCIPES », plus etroit a l'accent pres) */
.rf-tn .tn__carte-titre { font-size: 16.2vw; white-space: nowrap; left: 0; right: 0; hyphens: none; }
@media (max-width: 1023px) { .rf-tn .tn__carte-titre { font-size: 17vw; } }