/* ═══════════════════════════════════════════════════════════════════════
   LA REFONTE (octobre 2026) — le socle commun des pages refaites.
   Maquettes : Figma « Castflow - Refonte » (3jl86a8xvqEQ4buKiN7ATs).
   Première page passée : /a-propos/ (cadre 1159:3).

   Une page y entre en posant .rf-page sur <body> et en chargeant ce
   fichier + /assets/js/refonte.js. Tout est préfixé rf- : rien ici ne
   touche une page qui n'a pas la classe.

   Écrit en CSS, pas en classes Tailwind : la feuille Tailwind du site est
   pré-compilée, une valeur libre inventée après coup n'y existe pas.
   Les cotes sont celles de la maquette à 1440 px, au pixel.

   SOMMAIRE
     1. Jetons            couleurs, courbes, durées
     2. Mise en page      .rf-section, .rf-h2, grilles
     3. Cartes            .rf-carte, principes, portes, articles
     4. Appels à l'action .rf-cta (la pilule au rond fléché), bandeau noir
     5. Mouvement         entrées au défilement, titres mot à mot, survols
     6. Raccords          ce que la page reprend du site (ouverture, pied)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ─────────────────────────────────────────────────────────── */
.rf-page{
  --rf-fond:#f5f6f7; --rf-encre:#111110; --rf-teal:#007692;
  --rf-gris:#6b747c; --rf-corps:#3f4750;
  /* la courbe du site (.reveal, .card-lift) : un départ franc, une longue pose */
  --rf-courbe:cubic-bezier(.22,1,.36,1);
  /* un léger dépassement, réservé aux petits objets (autocollants, ronds) */
  --rf-ressort:cubic-bezier(.34,1.45,.64,1);
  --rf-pas:90ms;                      /* écart entre deux voisins d'une grille */
  background:var(--rf-fond); color:var(--rf-encre);
}

/* ── 2. Mise en page ───────────────────────────────────────────────────── */
/* Les marges latérales suivent celles des sections du site, pour que les
   colonnes restent alignées sur la barre et sur l'ouverture. */
.rf-section{margin-top:72px; padding-inline:16px}
.rf-section__in{max-width:1300px; margin-inline:auto}
@media (min-width:640px){ .rf-section{padding-inline:24px} }
@media (min-width:768px){ .rf-section{margin-top:96px; padding-inline:40px} }
@media (min-width:1024px){ .rf-section{margin-top:120px; padding-inline:64px} }
@media (min-width:1280px){ .rf-section{padding-inline:96px} }

/* Le titre de section : une phrase en encre, sa suite en gris. */
.rf-h2{max-width:1000px; margin:0 auto; text-align:center; text-wrap:balance;
  font-size:clamp(30px, 6.4vw, 48px); font-weight:500; line-height:1.08;
  letter-spacing:-.03em; color:var(--rf-encre)}
.rf-h2__suite{color:var(--rf-gris)}
.rf-sous-titre{margin-top:28px}
@media (min-width:768px){
  .rf-h2{line-height:52px}        /* 48 × 1,08, arrondi comme dans la maquette */
  .rf-sous-titre{margin-top:44px}
}

.rf-grille2, .rf-grille3{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:900px){
  .rf-grille2{grid-template-columns:1fr 1fr; gap:24px}
  .rf-grille3{grid-template-columns:repeat(3, 1fr); gap:24px}
}

/* L'ouverture centrée d'une page (contact) : surtitre, grand titre en deux
   tons, chapeau. */
.rf-ouverture{display:flex; flex-direction:column; align-items:center; gap:24px;
  padding:56px 16px 0; text-align:center}
.rf-h1{font-size:clamp(42px, 10.5vw, 76px); font-weight:500; line-height:1.03;
  letter-spacing:-.035em; color:var(--rf-encre); text-wrap:balance}
.rf-h1 .rf-h2__suite{display:block}
.rf-chapo{max-width:640px; font-size:18px; line-height:1.45; color:var(--rf-corps)}
@media (min-width:768px){
  .rf-ouverture{padding-top:96px}
  .rf-chapo{font-size:21px}
}

/* L'ouverture de l'accueil (1150:6) : deux lignes, un mot en teal par ligne,
   deux entrées, et quatre pastilles blanches qui flottent autour du titre. */
.rf-h1__ligne{display:block}
.rf-teal{color:var(--rf-teal)}
.rf-accueil{position:relative; gap:26px}
.rf-chapo--large{max-width:760px}
.rf-accueil__entrees{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding-top:10px}
.rf-accueil__entrees .rf-cta{align-self:auto}
.rf-pastilles{display:none}
@media (min-width:768px){ .rf-accueil{padding-top:104px} }
@media (min-width:1100px){
  .rf-pastilles{display:block; position:absolute; inset:0; pointer-events:none}
  .rf-pastille{position:absolute; display:flex; align-items:center; justify-content:center; width:48px; height:48px;
    border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.1); transform:rotate(var(--r))}
  .rf-pastille img{width:auto; height:26px}
  /* posées depuis le centre de la page, aux cotes de la maquette à 1440 */
  .rf-pastille--1{left:calc(50% - 528.5px); top:239.8px; --r:10deg}
  .rf-pastille--2{left:calc(50% - 398.9px); top:368.4px; --r:-8deg}
  .rf-pastille--3{left:calc(50% + 473.5px); top:216px; --r:-9deg}
  .rf-pastille--4{left:calc(50% + 356.9px); top:380.7px; --r:7deg}
}

/* Deux sections qui respirent plus que les autres (témoignage, puis blogue) :
   216 au lieu de 120 dans la maquette de l'accueil. */
@media (min-width:768px){ .rf-section--ample{margin-top:144px} }
@media (min-width:1024px){ .rf-section--ample{margin-top:216px} }

/* Les sections du blogue sont à 72 l'une de l'autre (1270:3), pas à 120. */
@media (min-width:1024px){ .rf-page--blogue .rf-section--serre{margin-top:72px} .rf-page--blogue .cf-pied{padding-top:72px} }

/* Les filtres en pilule (blogue, 1270:32) : un fond blanc, le choix en noir. */
.rf-filtres{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.rf-seg{display:flex; gap:4px; max-width:100%; padding:6px; overflow-x:auto; border-radius:999px; background:#fff;
  scrollbar-width:none}
.rf-seg::-webkit-scrollbar{display:none}
.rf-seg__b{flex:none; padding:11px 18px; border:0; border-radius:999px; background:transparent;
  font:inherit; font-size:14px; font-weight:500; line-height:1; color:var(--rf-encre); white-space:nowrap; cursor:pointer;
  transition:background-color .25s ease, color .25s ease}
.rf-seg__b:hover{background:rgba(17,17,16,.05)}
.rf-seg__b[aria-pressed="true"]{background:var(--rf-encre); color:#fff}
.rf-seg__b:focus-visible{outline:2px solid var(--rf-teal); outline-offset:2px}

/* ── 3. Cartes ─────────────────────────────────────────────────────────── */
.rf-carte{position:relative; background:#fff; border-radius:28px}
@media (min-width:768px){ .rf-carte{border-radius:40px} }

/* Les surtitres en capitales espacées et les numéros de carte */
.rf-surtitre, .rf-num{font-size:14px; font-weight:500; letter-spacing:.04em; color:var(--rf-teal)}
.rf-surtitre{line-height:1; text-transform:uppercase}
.rf-num{line-height:18px}

/* — Principe : numéro, autocollant, titre, une phrase */
.rf-principe{display:flex; flex-direction:column; padding:28px 24px 30px}
.rf-principe__tete{display:flex; justify-content:space-between; align-items:flex-start; height:72px}
/* l'ombre de l'autocollant est dans son SVG et déborde de son gabarit de
   1,75 px : on le rentre d'autant pour que le dessin tombe sur la marge */
.rf-principe__tete img{flex:none; margin-right:-1.75px}
.rf-principe h3{margin-top:28px; font-size:26px; font-weight:500; line-height:1.15; letter-spacing:-.025em}
.rf-principe p{margin-top:16px; font-size:17px; line-height:1.5; color:var(--rf-corps)}
@media (min-width:768px){
  .rf-principe{min-height:301px; padding:40px 44px 44px}
  .rf-principe h3{margin-top:40px; font-size:32px}
}

/* — Porte : une des deux entrées (acteurs en blanc, agences en noir) */
.rf-porte{display:flex; flex-direction:column; gap:20px; padding:32px 24px}
.rf-porte__texte{flex:1; display:flex; flex-direction:column; gap:20px}
.rf-porte h3{max-width:440px; font-size:clamp(28px, 6vw, 40px); font-weight:500;
  line-height:1.08; letter-spacing:-.03em}
.rf-porte ul{display:flex; flex-direction:column; gap:10px; padding:8px 0 28px;
  font-size:19px; line-height:1.4; color:var(--rf-corps)}
.rf-porte .rf-sticker{position:absolute; top:28px; right:24px}
.rf-porte--noire{background:var(--rf-encre); color:#fff}
.rf-porte--noire .rf-surtitre{color:rgba(255,255,255,.6)}
.rf-porte--noire ul{color:rgba(255,255,255,.72)}
/* Téléphone : l'autocollant rapetisse et le surtitre lui garde sa place,
   pour que le titre passe dessous sans le toucher. */
@media (max-width:767px){
  .rf-porte .rf-sticker{top:32px; width:auto; height:48px}
  .rf-porte .rf-sticker--personne, .rf-porte .rf-sticker--immeuble{top:26px; right:18px; height:60px}
  .rf-porte .rf-surtitre{min-height:48px; padding-right:72px; line-height:1.3}
}
@media (min-width:768px){
  .rf-porte{min-height:488px; padding:48px}
  .rf-porte .rf-sticker{top:44px; right:48px}
}

/* — Porte courte (contact, 1236:32) : 400 de haut, une phrase au lieu de la
   liste, le bouton posé en bas. */
.rf-porte__phrase{max-width:470px; font-size:19px; line-height:1.4; color:var(--rf-corps)}
@media (min-width:768px){ .rf-porte--courte{min-height:400px} }

/* — Porte moyenne (accueil, 1150:372) : 448 de haut. À propos en blanc avec
   l'équipe en éventail (.rf-eventail--porte, plus bas) ; Contact en teal uni. */
.rf-porte--uni{background:var(--rf-teal); color:#fff}
.rf-porte--uni .rf-surtitre{color:rgba(255,255,255,.7)}
@media (min-width:768px){ .rf-porte--moyenne{min-height:448px} }

/* — Chiffre (accueil, 1150:279) */
.rf-chiffre{display:flex; flex-direction:column; gap:6px; padding:28px 24px 32px}
.rf-chiffre__n{font-size:64px; font-weight:500; line-height:1; letter-spacing:-.04em; white-space:nowrap}
.rf-chiffre__de{font-size:15px; line-height:1.4; color:var(--rf-gris)}
.rf-chiffre__t{padding-top:36px; font-size:20px; font-weight:500; line-height:1.25; letter-spacing:-.015em}
@media (min-width:900px){
  .rf-chiffre{padding:40px}
  .rf-chiffre__n{font-size:clamp(64px, 6.1vw, 88px)}
  .rf-chiffre__t{padding-top:64px; font-size:22px}
}

/* — Témoignage (accueil, 1233:1166) : le logo de l'agence, puis sa phrase */
.rf-temoin{display:grid; grid-template-columns:minmax(0, 1fr); gap:16px}
.rf-temoin__agence{display:flex; flex-direction:column; justify-content:space-between; gap:32px; padding:32px 24px}
.rf-temoin__agence img{width:220px; height:184px; max-width:100%; object-fit:contain; object-position:left center}
.rf-temoin__agence p{display:flex; flex-direction:column; gap:6px}
.rf-temoin__agence strong{font-size:22px; font-weight:500; line-height:1.2; letter-spacing:-.015em}
.rf-temoin__agence span{font-size:16px; line-height:1.3; color:var(--rf-gris)}
.rf-temoin__citation{display:flex; align-items:center; margin:0; padding:36px 24px; border-radius:28px;
  background:linear-gradient(180deg, #258fba, #1f5e7b)}
.rf-temoin__citation p{max-width:680px; font-size:24px; font-weight:500; line-height:1.18; letter-spacing:-.03em;
  color:rgba(255,255,255,.75)}
.rf-temoin__citation strong{font-weight:500; color:#fff}
@media (min-width:1024px){
  .rf-temoin{grid-template-columns:400px minmax(0, 1fr); gap:24px}
  .rf-temoin__agence{height:420px; padding:48px}
  .rf-temoin__citation{height:420px; padding:64px 72px; border-radius:40px}
  .rf-temoin__citation p{font-size:36px}
}

/* — Les cartes de casting de l'accueil (1150:136) : celles du hub, en grand
   (--k:1, 400 px) et avec un dégradé plus vif. Elles arrivent toutes faites
   de /api/castings/cartes ; la carte elle-même est dans castings.css (cfk-). */
.rf-castings{list-style:none; margin-bottom:0; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:20px;
  align-items:start; --k:.9}
.rf-castings[hidden]{display:none}
/* --vif : le dégradé plus clair de la maquette de l'accueil. Ailleurs (castings
   similaires d'une fiche), la carte garde le bleu du hub. */
.rf-castings--vif .cfk__haut{background:linear-gradient(180deg, #258fba, #1f5e7b)}
@media (min-width:640px){ .rf-castings{grid-template-columns:repeat(2, minmax(0, 1fr)); --k:.78} }
@media (min-width:1000px){ .rf-castings{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; --k:.7} }
@media (min-width:1240px){ .rf-castings{--k:.86} }
@media (min-width:1440px){
  .rf-castings{--k:1}
  .rf-castings:empty{min-height:400px}
}
@media (min-width:1024px){ .rf-centre.rf-centre--loin{margin-top:96px} }

/* — Porte avec visuel (maquette de l'accueil refait, 1150:81) : 680 de haut,
   le visuel posé dans les 180 du bas et rogné par la carte. --teal : la carte
   des acteurs en dégradé, texte blanc. Sans --teal : carte blanche. */
.rf-porte--visuel{overflow:hidden; padding-bottom:232px}
.rf-porte--visuel h3{color:#000}
.rf-porte--visuel ul{color:rgba(71,71,71,.72)}
.rf-porte--teal{background:linear-gradient(180deg, #258fba, #1f5e7b); color:#fff}
.rf-porte--teal h3, .rf-porte--teal ul, .rf-porte--teal .rf-surtitre{color:#fff}
.rf-porte--courte.rf-porte--teal{background:linear-gradient(180deg, #258fba, #1f5e7b)}
.rf-porte--courte.rf-porte--teal .rf-surtitre{color:rgba(255,255,255,.7)}
.rf-porte--teal .rf-porte__phrase{color:rgba(255,255,255,.78)}
@media (min-width:768px){
  /* 680 tout rond, comme la maquette : le texte y dépasse de 8 px de son cadre
     (marge basse de la liste), le bouton reste à 380 */
  .rf-porte--visuel{height:680px; padding-bottom:248px}
  .rf-porte--visuel .rf-porte__texte{min-height:0}
  /* les deux SVG ont 8 px de marge autour du dessin, pour que leur ombre
     ne soit pas rognée : d'où les − 8 */
  .rf-porte .rf-sticker--personne{top:47px; right:38px}
  .rf-porte .rf-sticker--immeuble{top:40px; right:36px}
}
/* Le visuel garde sa largeur de maquette (612) et reste centré : sur
   téléphone, la carte en montre le milieu. */
.rf-porte__visuel{position:absolute; left:50%; bottom:0; width:612px; margin-left:-306px;
  pointer-events:none}
@media (max-width:767px){
  .rf-porte--visuel{padding-bottom:168px}
  .rf-porte__visuel{transform:scale(.62); transform-origin:50% 100%}
}
.rf-telephones{height:206px}            /* 680 − 474 */
.rf-portable{height:208px}              /* 680 − 472 */
.rf-tel{position:absolute; width:168px; height:346px; overflow:hidden; border-radius:32px; will-change:transform; backface-visibility:hidden; isolation:isolate;
  background:#0e0f11}
.rf-tel::before{content:""; position:absolute; inset:6px; border-radius:25px;
  background:linear-gradient(180deg, #258fba, #1f5e7b)}
.rf-tel::after{content:""; position:absolute; top:16px; left:59px; width:50px; height:11px;
  border-radius:100px; background:#0e0f11}
.rf-tel img{position:absolute; top:110px; height:78px; width:auto}
.rf-tel--gauche{left:124.77px; top:30.79px; transform:rotate(-10deg)}
.rf-tel--gauche img{left:41.75px}
.rf-tel--droit{left:316.68px; top:59.96px; transform:rotate(10deg)}
.rf-tel--droit img{left:39.04px}
.rf-tel--centre{left:222px; top:14px}
.rf-tel--centre::after{height:10px}
.rf-tel--centre img{top:118px; left:36px; width:96px; height:28.14px}
.rf-portable__ecran{position:absolute; left:107px; top:0; width:392px; height:231.315px;
  overflow:hidden; border-radius:15.892px; background:#0e0f11}
.rf-portable__ecran::before{content:""; position:absolute; inset:10.595px; border-radius:7.063px;
  background:linear-gradient(180deg, #258fba, #1f5e7b)}
.rf-portable__ecran img{position:absolute; left:94.03px; top:98.44px; width:221px; height:34px}
.rf-portable__socle{position:absolute; left:73px; top:231.315px; width:460px; height:12px;
  border-radius:2px 2px 10px 10px; background:linear-gradient(#dbe0e5, #b2bac2)}

/* — Le formulaire de contact (1236:109) : une carte, coordonnées à gauche,
   champs à droite. */
.rf-contact{display:flex; flex-direction:column; gap:40px; padding:28px 20px 32px;
  border-radius:28px; background:#fff}
.rf-coord__rang{display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:24px 0; border-bottom:1px solid rgba(17,17,16,.08);
  font-size:22px; font-weight:500; line-height:1.2; letter-spacing:-.02em; color:var(--rf-encre)}
.rf-coord__rang:first-child{padding-top:0}
.rf-coord__rang > a{color:inherit; text-decoration:none; transition:color .3s ease}
.rf-coord__rang > a:hover{color:var(--rf-teal)}
.rf-coord__label{font-family:"Geist Mono", ui-monospace, monospace; font-size:13px; font-weight:500;
  line-height:1; letter-spacing:.04em; text-transform:uppercase; color:var(--rf-gris)}
.rf-coord__rang--equipe{gap:16px; border-bottom:0; padding-bottom:0}

.rf-champs{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.rf-champs__rangee{display:grid; grid-template-columns:1fr; gap:20px; width:100%}
.rf-champ{display:flex; flex-direction:column; gap:8px; width:100%}
.rf-champ--sujet{gap:10px}
.rf-champ label, .rf-champ__titre{font-size:14px; font-weight:500; line-height:1; color:var(--rf-encre)}
.rf-champ input, .rf-champ textarea{width:100%; border:0; background:var(--rf-fond);
  font:inherit; font-size:15px; color:var(--rf-encre); outline:2px solid transparent;
  outline-offset:0; transition:outline-color .25s ease, background-color .25s ease}
.rf-champ input{height:50px; padding:0 20px; border-radius:999px}
.rf-champ textarea{display:block; height:140px; min-height:96px; padding:16px 20px;
  border-radius:20px; line-height:1.4; resize:vertical}
.rf-champ input::placeholder, .rf-champ textarea::placeholder{color:var(--rf-gris); opacity:1}
.rf-champ input:focus-visible, .rf-champ textarea:focus-visible{outline-color:var(--rf-teal); background:#fff}
.rf-puces{display:flex; flex-wrap:wrap; gap:8px}
.rf-puce{padding:10px 16px; border:0; border-radius:999px; background:var(--rf-fond);
  font:inherit; font-size:14px; font-weight:500; line-height:1; color:var(--rf-encre); cursor:pointer;
  transition:background-color .25s ease, color .25s ease}
.rf-puce[aria-pressed="true"]{background:var(--rf-encre); color:#fff}
.rf-puce:focus-visible{outline:2px solid var(--rf-teal); outline-offset:2px}
.rf-accord{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.45;
  color:var(--rf-corps); cursor:pointer}
.rf-accord input{flex:none; appearance:none; -webkit-appearance:none; width:18px; height:18px;
  margin:1px 0 0; border:1.5px solid #d9dee3; border-radius:5px; background:#fff; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease}
.rf-accord input:checked{border-color:var(--rf-teal); background:var(--rf-teal)
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 9.5l3 3 6-7'/></svg>") center/15px no-repeat}
.rf-accord input:focus-visible{outline:2px solid var(--rf-teal); outline-offset:2px}
.rf-accord a{color:var(--rf-teal); text-decoration:none}
.rf-accord a:hover{text-decoration:underline}
@media (min-width:640px){ .rf-champs__rangee{grid-template-columns:1fr 1fr; gap:16px} }
@media (min-width:1024px){
  .rf-contact{flex-direction:row; align-items:flex-start; gap:72px; padding:64px; border-radius:40px}
  .rf-coord{flex:none; width:400px}
  .rf-coord__rang{font-size:26px}
  .rf-coord__rang:first-child{padding-top:24px}
}

/* — L'équipe en éventail : quatre cartes tenues comme une main de cartes.
   Chaque carte tourne autour d'un même point, loin sous elle (300 % de sa
   hauteur) : c'est ce qui dessine l'arc. --a est son angle. Le pas entre
   deux cartes (≈ 77 px pour 112 de large) laisse voir chaque visage. */
.rf-eventail{position:relative; display:block; width:100%; max-width:400px; height:196px;
  text-decoration:none}
.rf-jeu{position:absolute; top:12px; left:50%; width:112px; height:150px; margin-left:-56px;
  overflow:hidden; border-radius:16px; background:var(--rf-fond);
  box-shadow:0 0 0 1px rgba(17,17,16,.1), 0 12px 24px -12px rgba(17,17,16,.28);
  transform-origin:50% 300%; transform:rotate(var(--a))}
.rf-jeu--1{--a:-18deg} .rf-jeu--2{--a:-6deg} .rf-jeu--3{--a:6deg} .rf-jeu--4{--a:18deg}
.rf-jeu img{position:absolute; left:50%; bottom:-2px; width:auto; height:76%; max-width:none;
  transform:translateX(-50%)}
.rf-jeu--4 img{height:92%; bottom:-16%}
.rf-jeu__nom{position:absolute; top:10px; left:12px; font-size:12px; font-weight:500;
  line-height:1; letter-spacing:0; color:#0c222c}
.rf-eventail:focus-visible{outline:2px solid var(--rf-teal); outline-offset:6px; border-radius:18px}
/* Dans la carte À propos de l'accueil : le même jeu, un peu plus petit. Sur
   téléphone il suit le titre ; sur ordinateur il se pose en bas à droite de la
   carte, à côté du bouton, sans toucher à sa hauteur de 448. */
.rf-eventail--porte{height:158px; margin:-4px 0 4px}
.rf-eventail--porte .rf-jeu{width:88px; height:118px; margin-left:-44px; border-radius:13px}
.rf-eventail--porte .rf-jeu__nom{top:8px; left:9px; font-size:11px}
@media (min-width:768px){
  .rf-eventail--porte{position:absolute; right:20px; bottom:64px; width:300px; margin:0}
}
@media (max-width:400px){
  .rf-eventail{height:160px}
  .rf-jeu{width:88px; height:118px; margin-left:-44px; border-radius:13px}
  .rf-jeu__nom{top:8px; left:9px; font-size:11px}
}

/* — Les questions en accordéon (1236:182) */
.rf-faq{padding:8px 24px; border-radius:28px; background:#fff}
.rf-faq details{padding:24px 0; border-bottom:1px solid rgba(17,17,16,.08)}
.rf-faq details:last-child{border-bottom:0}
.rf-faq summary{display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-size:18px; font-weight:500; line-height:1.3; letter-spacing:-.01em; color:var(--rf-encre);
  cursor:pointer; list-style:none}
.rf-faq summary::-webkit-details-marker{display:none}
.rf-faq summary:focus-visible{outline:2px solid var(--rf-teal); outline-offset:6px; border-radius:6px}
/* le + devient − : la barre verticale se couche */
.rf-faq__signe{position:relative; flex:none; width:16px; height:16px; color:var(--rf-teal)}
.rf-faq__signe::before, .rf-faq__signe::after{content:""; position:absolute; top:7px; left:1px;
  width:14px; height:2px; border-radius:2px; background:currentColor}
.rf-faq__signe::after{transform:rotate(90deg)}
.rf-faq details[open] .rf-faq__signe::after{transform:none}
.rf-faq p{max-width:960px; margin-top:12px; font-size:16px; line-height:1.45; color:var(--rf-corps)}
@media (min-width:768px){
  .rf-faq{padding:16px 56px; border-radius:40px}
  .rf-faq details{padding:28px 0}
  .rf-faq summary{min-height:28px; font-size:21px}
  .rf-faq p{font-size:17px}
}

/* — Article du blogue */
.rf-article{display:flex; flex-direction:column; overflow:hidden; border-radius:28px;
  background:#fff; color:inherit; text-decoration:none}
.rf-article__img{aspect-ratio:400/240; overflow:hidden}
.rf-article__img img{display:block; width:100%; height:100%; object-fit:cover}
.rf-article__texte{flex:1; display:flex; flex-direction:column; gap:14px; padding:28px 28px 32px}
.rf-article__rubrique{font-size:13px; font-weight:500; line-height:1; letter-spacing:.04em;
  text-transform:uppercase; color:var(--rf-teal)}
.rf-article h3{flex:1; min-height:56px; font-size:22px; font-weight:500; line-height:1.25; letter-spacing:-.015em}
.rf-article__lire{display:inline-flex; align-items:center; gap:6px; font-size:15px;
  font-weight:500; line-height:1.4; color:var(--rf-gris)}
.rf-article__lire svg{width:14px; height:14px}
.rf-centre{display:flex; justify-content:center; margin-top:44px}
.rf-centre[hidden]{display:none}

/* — Le blogue (1270:53 et 1270:68) : la carte « à la une », puis la grille.
   Dans la grille, le titre a deux ou trois lignes : la carte s'étire à la
   hauteur de sa rangée et « Lire l'article » reste en bas. */
.rf-une{display:grid; grid-template-columns:minmax(0, 1fr); overflow:hidden; border-radius:28px; background:#fff;
  color:inherit; text-decoration:none}
.rf-une[hidden], .rf-article[hidden]{display:none}
.rf-une__img{aspect-ratio:640/440; overflow:hidden}
.rf-une__img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--rf-courbe)}
.rf-une__texte{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; padding:28px 24px 32px}
.rf-une h2{max-width:496px; font-size:clamp(28px, 6vw, 40px); font-weight:500; line-height:1.08; letter-spacing:-.03em}
.rf-une__resume{max-width:496px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-size:19px; line-height:1.4; color:var(--rf-corps)}
.rf-une__meta{font-size:14px; line-height:1.45; color:var(--rf-gris)}
.rf-une .rf-cta{margin-top:8px}
.rf-une:focus-visible{outline:2px solid var(--rf-teal); outline-offset:3px}
@media (min-width:1024px){
  .rf-une{grid-template-columns:640fr 608fr; min-height:445px; border-radius:40px}
  .rf-une__img{aspect-ratio:auto; min-height:440px}
  .rf-une__texte{padding:56px}
}
.rf-blogue{align-items:stretch}
.rf-article--blogue .rf-article__texte{justify-content:space-between; gap:14px}
.rf-article--blogue h3{flex:none; min-height:56px}
.rf-article__tete{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13px; line-height:1; color:var(--rf-gris)}
.rf-blogue__vide{margin-top:44px; padding:32px 24px; border-radius:28px; background:#fff; font-size:16px; color:var(--rf-corps);
  text-align:center}
.rf-blogue__vide[hidden]{display:none}
@keyframes rf-arrive{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.rf-article.is-neuf{animation:rf-arrive .6s var(--rf-courbe) both; animation-delay:calc(var(--n, 0) * 40ms)}

/* ── 4. Appels à l'action ──────────────────────────────────────────────── */
/* La pilule de 52 px au rond fléché. Trois teintes :
   --teal (sur blanc)  --blanc (sur noir ou teal)  --noir (sur le fond gris).

   Le survol est celui des boutons de /talent/ (talent/v2.css, « LE BOUTON QUI
   S'INVERSE ») : le bouton est dessiné deux fois, et la version inversée
   (.rf-cta__sur, copiée par refonte.js) est révélée par un cercle qui s'ouvre
   depuis le rond fléché jusqu'à couvrir toute la pilule. Chaque pixel n'a
   qu'une paire fond/texte : le texte reste lisible à mi-course.
   Teal → blanc, noir → blanc, blanc → teal ; le rond s'inverse avec. */
.rf-cta{position:relative; z-index:0; overflow:hidden; display:inline-flex; align-items:center;
  justify-content:space-between; align-self:flex-start; gap:16px; height:52px;
  padding:0 8px 0 26px; border-radius:999px; font-size:16px; font-weight:500; line-height:1;
  letter-spacing:-.01em; white-space:nowrap; text-decoration:none; cursor:pointer;
  border:0; font-family:inherit; -webkit-appearance:none; appearance:none}
.rf-cta__rond{position:relative; flex:none; width:36px; height:36px; border-radius:50%}
.rf-cta__rond svg{position:absolute; inset:10px; width:16px; height:16px}
/* Libellé dessiné quand il contient le mot-symbole Castflow (sa police n'est
   pas sur le site) : tracés exportés de Figma, en currentColor. */
.rf-cta__mot{display:block; flex:none}
/* en anglais : « Discover » en texte, suivi du logo seul */
.rf-cta__mot--texte{display:inline-flex; align-items:center; gap:5px; line-height:24px}
.rf-cta__mot--texte svg{display:block; flex:none}
/* Le calque du dessus reste un rectangle sans arrondi : c'est le bouton, par
   son overflow, qui découpe la pilule. Deux bords arrondis empilés laissent un
   liseré de la couleur du dessous (relevé sur /talent/). */
.rf-cta__sur{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:space-between; gap:inherit; padding:inherit; white-space:nowrap;
  clip-path:circle(0px at calc(100% - 26px) 50%)}
.rf-cta--teal{background:var(--rf-teal); color:#fff}
.rf-cta--teal .rf-cta__rond{background:#fff; color:var(--rf-teal)}
.rf-cta--teal .rf-cta__sur{background:#fff; color:var(--rf-teal)}
.rf-cta--teal .rf-cta__sur .rf-cta__rond{background:var(--rf-teal); color:#fff}
.rf-cta--blanc{background:#fff; color:var(--rf-encre)}
.rf-cta--blanc .rf-cta__rond{background:var(--rf-encre); color:#fff}
.rf-cta--blanc .rf-cta__sur{background:var(--rf-teal); color:#fff}
.rf-cta--blanc .rf-cta__sur .rf-cta__rond{background:#fff; color:var(--rf-teal)}
/* blanc au texte teal (sur la carte teal) : l'inversion passe au noir, un
   teal se fondrait dans la carte */
.rf-cta--blanc-teal{background:#fff; color:var(--rf-teal)}
.rf-cta--blanc-teal .rf-cta__rond{background:var(--rf-teal); color:#fff}
.rf-cta--blanc-teal .rf-cta__sur{background:var(--rf-encre); color:#fff}
.rf-cta--blanc-teal .rf-cta__sur .rf-cta__rond{background:#fff; color:var(--rf-encre)}
.rf-cta--ombre{box-shadow:0 4px 4px rgba(0,0,0,.25)}
.rf-cta--noir{background:var(--rf-encre); color:#fff}
.rf-cta--noir .rf-cta__rond{background:#fff; color:var(--rf-encre)}
.rf-cta--noir .rf-cta__sur{background:#fff; color:var(--rf-encre)}
.rf-cta--noir .rf-cta__sur .rf-cta__rond{background:var(--rf-encre); color:#fff}
/* --vers-teal : sur une carte blanche, un bouton noir qui deviendrait blanc
   disparaîtrait ; il passe au teal */
.rf-cta--vers-teal .rf-cta__sur{background:var(--rf-teal); color:#fff}
.rf-cta--vers-teal .rf-cta__sur .rf-cta__rond{background:#fff; color:var(--rf-teal)}
.rf-cta:focus-visible, .rf-article:focus-visible{outline:2px solid var(--rf-teal); outline-offset:3px}
.rf-porte--noire .rf-cta:focus-visible, .rf-porte--teal .rf-cta:focus-visible, .rf-bandeau .rf-cta:focus-visible{outline-color:#fff}
@media (max-width:399px){ .rf-cta{gap:12px; padding-left:20px; font-size:15px} }

/* — Le bandeau noir de fin de page */
.rf-bandeau{display:flex; flex-direction:column; align-items:flex-start; gap:32px;
  padding:40px 24px; border-radius:28px; background:var(--rf-encre); color:#fff}
.rf-bandeau h2{font-size:clamp(30px, 6.4vw, 48px); font-weight:500; line-height:1.08; letter-spacing:-.03em}
@media (min-width:768px){ .rf-bandeau h2{line-height:52px} }
.rf-bandeau h2 .rf-h2__suite{color:rgba(255,255,255,.55)}
/* Deux boutons de même rang : acteur en blanc, agence en teal (maquette
   1159:268). Côte à côte dès qu'il y a la place, sinon l'un sous l'autre. */
.rf-bandeau__action{flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:12px}
@media (min-width:1024px){
  .rf-bandeau{flex-direction:row; align-items:center; gap:40px; padding:72px 80px; border-radius:40px}
  .rf-bandeau h2{flex:1; min-width:0}
  /* contact (1236:239) : les deux boutons l'un sous l'autre, le titre sur une ligne */
  .rf-bandeau__action--pile{flex-direction:column; align-items:flex-start}
}

/* ── 5. Mouvement ──────────────────────────────────────────────────────── */
/* Rien ne bouge tant que le script n'a pas posé .rf-js sur <html> (il ne le
   fait pas en « réduire les animations »). Sans script, la page est lisible.

   ENTRÉES — poser data-rf sur un bloc : il monte de 28 px en fondu quand il
   entre dans l'écran. data-rf="echelle" : il grandit aussi (bandeaux).
   Sur un parent, data-rf-groupe décale ses enfants l'un après l'autre.
   Une fois posé, le bloc perd data-rf : le survol reprend la main sur son
   transform, sans hériter du délai d'entrée. */
.rf-js [data-rf]{opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--rf-courbe) calc(var(--rf-i, 0) * var(--rf-pas)),
             transform 1.1s var(--rf-courbe) calc(var(--rf-i, 0) * var(--rf-pas));
  will-change:opacity, transform}
.rf-js [data-rf="echelle"]{transform:translateY(28px) scale(.965)}
.rf-js [data-rf].rf-vu{opacity:1; transform:none}

/* TITRES — data-rf-titre : chaque mot monte de derrière sa ligne, l'un après
   l'autre. Le script découpe les mots ; le masque dépasse un peu en haut et
   en bas pour ne rogner ni les accents ni les jambages. */
.rf-mot{display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.14em .12em .16em; margin:-.14em -.12em -.16em}   /* large sur les côtés : à .04em, le bord rond d'un « c » ou d'un « e » était rogné selon l'écran */
.rf-mot > span{display:inline-block; transform:translateY(118%);
  transition:transform 1s var(--rf-courbe) calc(var(--rf-m, 0) * 55ms)}
.rf-vu .rf-mot > span{transform:none}
/* Le titre reste caché entre le premier affichage et son découpage, sinon on
   le verrait entier une fraction de seconde. */
.rf-js [data-rf-titre]{visibility:hidden}
.rf-js [data-rf-titre].rf-pret{visibility:visible}

/* SURVOLS — seulement avec une vraie souris. */
.rf-survol{transition:transform .5s var(--rf-courbe), box-shadow .5s var(--rf-courbe)}
.rf-sticker{transition:transform .6s var(--rf-ressort)}
.rf-article__img img{transition:transform .9s var(--rf-courbe)}
.rf-tel, .rf-portable__ecran, .rf-portable__socle{transition:transform .8s var(--rf-courbe)}
/* Les pastilles de l'accueil flottent, chacune à son rythme. */
@keyframes rf-flotte{
  0%, 100%{transform:translateY(0) rotate(var(--r))}
  50%{transform:translateY(-9px) rotate(calc(var(--r) + 3deg))}
}
.rf-pastille{animation:rf-flotte 7s ease-in-out infinite}
.rf-pastille--2{animation-duration:8.4s; animation-delay:-2s}
.rf-pastille--3{animation-duration:9.2s; animation-delay:-4s}
.rf-pastille--4{animation-duration:7.8s; animation-delay:-1s}
/* L'éventail : fermé (les quatre cartes l'une sur l'autre) tant qu'il n'est
   pas entré dans l'écran, puis il s'ouvre carte après carte. */
.rf-jeu{transition:transform .9s var(--rf-courbe)}
.rf-jeu--2{transition-delay:50ms} .rf-jeu--3{transition-delay:100ms} .rf-jeu--4{transition-delay:150ms}
.rf-js .rf-eventail:not(.rf-vu) .rf-jeu{transform:rotate(0deg)}
.rf-faq__signe::after{transition:transform .4s var(--rf-courbe)}
.rf-faq details::details-content{block-size:0; overflow:hidden;
  transition:block-size .5s var(--rf-courbe), content-visibility .5s allow-discrete}
.rf-faq details[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){ .rf-faq{interpolate-size:allow-keywords} }
.rf-article__lire{transition:color .3s ease}
.rf-article__lire svg{opacity:0; transform:translateX(-6px);
  transition:opacity .3s ease, transform .5s var(--rf-courbe)}
/* Les cotes du survol sont celles de /talent/ : 780 ms pour le cercle, et le
   fond du bouton bascule sur celui du calque au bout de ces 780 ms, pour ne
   rien laisser percer au bord une fois le balayage fini. Au retour, sans délai. */
.rf-cta{transition:transform .42s cubic-bezier(.16,1,.3,1),
  box-shadow .55s cubic-bezier(.16,1,.3,1), background-color 0s linear 0s}
.rf-cta__sur{transition:clip-path .78s cubic-bezier(.16,1,.3,1)}
@media (hover:hover) and (pointer:fine){
  .rf-survol:hover{transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(17,17,16,.25)}
  .rf-survol:hover .rf-sticker{transform:rotate(-8deg) scale(1.08)}
  .rf-article:hover .rf-article__img img{transform:scale(1.05)}
  .rf-une:hover .rf-une__img img{transform:scale(1.04)}
  /* la grande carte est le lien : son bouton s'inverse quand on la survole */
  .rf-une:hover .rf-cta{transform:translateY(-2px); background:var(--rf-teal); box-shadow:0 14px 30px rgba(10,10,10,.22);
    transition:transform .42s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1), background-color 0s linear .78s}
  .rf-une:hover .rf-cta__sur{clip-path:circle(145% at calc(100% - 26px) 50%)}
  /* l'éventail s'écarte et monte ; la carte survolée sort du jeu */
  .rf-eventail:hover .rf-jeu{transform:rotate(calc(var(--a) * 1.28)) translateY(-8px); transition-delay:0s}
  .rf-eventail .rf-jeu:hover{transform:rotate(calc(var(--a) * 1.28)) translateY(-26px)}
  /* les portes : les téléphones s'écartent en montant, le portable monte */
  .rf-porte--visuel:hover .rf-tel--gauche{transform:translate(-30px, -22px) rotate(-14deg)}
  .rf-porte--visuel:hover .rf-tel--droit{transform:translate(30px, -22px) rotate(14deg)}
  .rf-porte--visuel:hover .rf-tel--centre{transform:translateY(-28px)}
  .rf-porte--visuel:hover .rf-portable__ecran,
  .rf-porte--visuel:hover .rf-portable__socle{transform:translateY(-28px)}
  .rf-article:hover .rf-article__lire{color:var(--rf-teal)}
  .rf-article:hover .rf-article__lire svg{opacity:1; transform:none}
  /* le cercle part du rond fléché et couvre toute la pilule */
  /* L'ombre est noire pour les trois teintes : le halo teal de /talent/ faisait
     « basse qualité » au goût du PO (6 oct. 2026). */
  .rf-cta:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(10,10,10,.22);
    transition:transform .42s cubic-bezier(.16,1,.3,1),
      box-shadow .55s cubic-bezier(.16,1,.3,1), background-color 0s linear .78s}
  .rf-cta:hover .rf-cta__sur{clip-path:circle(145% at calc(100% - 26px) 50%)}
  .rf-cta--teal:hover, .rf-cta--noir:hover{background:#fff}
  .rf-cta--blanc:hover{background:var(--rf-teal)}
  .rf-cta--blanc-teal:hover{background:var(--rf-encre)}
  .rf-cta--vers-teal:hover{background:var(--rf-teal)}
}
@media (prefers-reduced-motion:reduce){
  /* on garde l'inversion du bouton, on retire le mouvement */
  .rf-survol, .rf-sticker, .rf-article__img img, .rf-article__lire svg,
  .rf-cta, .rf-cta:hover, .rf-cta__sur,
  .rf-tel, .rf-portable__ecran, .rf-portable__socle,
  .rf-jeu, .rf-faq__signe::after, .rf-faq details::details-content{transition:none}
  .rf-pastille, .rf-article.is-neuf{animation:none}
  .rf-une__img img{transition:none}
  .rf-survol:hover, .rf-survol:hover .rf-sticker, .rf-cta:hover,
  .rf-article:hover .rf-article__img img{transform:none}
}

/* ── 6. Raccords ───────────────────────────────────────────────────────── */
/* Les sections reprises du site (équipe, questions) gardent leur balisage et
   leurs animations ; seuls l'arrondi et l'ombre changent. */
.rf-r28{border-radius:28px}
.rf-r24{border-radius:24px}
.rf-repris{max-width:1138px; margin:44px auto 0}
/* L'équipe à quatre : deux par rangée sur tablette, quatre de front sur
   ordinateur. Là, les fiches font 608 de haut (maquette 1159:124) : le texte
   garde 341,5 sous la photo et le LinkedIn se pose en bas, à 24 du bord. */
@media (min-width:1024px){
  .rf-equipe4{grid-template-columns:repeat(4, 1fr)}
  .rf-equipe4 > div > .p-6{min-height:341.5px}
}
@media (min-width:1024px){
  .rf-repris--equipe{margin-top:100px}
  .rf-repris--questions{margin-top:108px}
}

/* L'ouverture de /a-propos/ passe du crème au gris de la refonte, et ne
   garde plus sa marge basse : c'est la section suivante qui pose l'écart. */
.rf-page .cf-apropos{background:transparent; padding-bottom:0}
.rf-page .reveal-5{transition-delay:.4s}

/* L'ouverture à quatre portraits (maquette 1159:46). Les étiquettes empilent
   le nom et le rôle. Sur ordinateur : la carte titre, puis trois portraits de
   213 × 366 en haut, Sasha et la Mission (sur deux colonnes) dessous, 24
   d'écart. Les dessins sont placés en % de leur carte, comme dans styles.css. */
.cf-apropos--quatre .cf-apropos__nom{flex-direction:column; align-items:flex-start; gap:2px;
  padding:8px 14px; border-radius:16px}
.cf-apropos--quatre .cf-apropos__nom strong{line-height:22.5px}
.cf-apropos--quatre .cf-apropos__nom span{line-height:19.5px}
/* Sasha est dessinée plus près : son dessin déborde en bas et sur les côtés */
.cf-apropos--quatre .cf-apropos__portrait img{max-width:none}
.cf-apropos--quatre .cf-apropos__portrait--sasha img{top:22%; left:-.23%; width:100.46%; height:99.37%}
@media (min-width:600px) and (max-width:1023px){
  .cf-apropos--quatre .cf-apropos__mission{grid-column:1 / -1; aspect-ratio:auto; min-height:280px}
}
@media (min-width:1024px){
  .cf-apropos--quatre .cf-apropos__grille{grid-template-columns:536.875fr 213fr 213fr 213fr; gap:24px}
  .cf-apropos--quatre .cf-apropos__portrait{aspect-ratio:213 / 366}
  .cf-apropos--quatre .cf-apropos__portrait img{top:18.033%; height:81.967%}
  .cf-apropos--quatre .cf-apropos__portrait--julien  img{left:-14%;     width:128.003%}
  .cf-apropos--quatre .cf-apropos__portrait--charbel img{left:-19.094%; width:138.189%}
  .cf-apropos--quatre .cf-apropos__portrait--jules   img{left:-14.886%; width:129.772%}
  .cf-apropos--quatre .cf-apropos__portrait--sasha   img{top:18.579%; left:-27.863%; width:155.726%; height:98.361%}
  .cf-apropos--quatre .cf-apropos__mission{grid-column:span 2; aspect-ratio:auto}
  .cf-apropos--quatre .cf-apropos__mission strong{max-width:390px}
}

/* Le pied : même écart que les sections, mêmes marges latérales. */
.rf-page .cf-pied{padding:72px 16px 32px}
.rf-page .cf-pied__carte{max-width:1300px; border:0}
@media (min-width:640px){ .rf-page .cf-pied{padding-inline:24px} }
@media (min-width:768px){ .rf-page .cf-pied{padding-top:96px; padding-inline:40px} }
@media (min-width:1024px){ .rf-page .cf-pied{padding-top:120px; padding-inline:64px} }
@media (min-width:1280px){ .rf-page .cf-pied{padding-inline:96px} }


/* ═══════════════════════════════════════════════════════════════════════
   CASTFLOW STUDIO — la page produit des agences (/studio/)
   Figma « Castflow - Refonte », cadre 1250:558. Tout est sous
   .rf-page--studio ou dans des classes propres (rf-studio__, rf-bento, rf-demo,
   rf-qui…). Les sections sont à 96 l'une de l'autre.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .rf-page--studio .rf-section{margin-top:96px}
  .rf-page--studio .cf-pied{padding-top:96px}
}
/* les titres de cette page reviennent à la ligne comme dans la maquette, sans équilibrage */
.rf-page--studio .rf-h2{text-wrap:wrap}
.rf-mono{font-family:"Geist Mono", ui-monospace, monospace; font-size:14px; font-weight:500; line-height:1;
  letter-spacing:.04em; text-transform:uppercase; color:var(--rf-gris)}
.rf-mono--teal{font-size:12px; letter-spacing:.06em; color:var(--rf-teal)}

/* — Ouverture */
.rf-studio__ouverture{gap:22px}
.rf-studio__logo{width:212px; height:32px}
.rf-h1--studio{font-size:clamp(38px, 9.4vw, 68px)}
@media (min-width:768px){ .rf-studio__ouverture{padding-top:72px} }

/* — La visite de l'app : l'ORDINATEUR ENTIER.
   Le composant est celui du site (.cf-app, styles.css + main.js). Ici la
   fenêtre de l'app devient l'écran d'un portable : un cadre noir de 14, un
   socle gris dessous. --p vaut 1 px de la maquette (écran de 1092 de large).
   Les cartes en relief du composant ne sont pas montrées (la maquette ne garde
   que les trois étiquettes, posées sur l'écran aux mêmes endroits pour chaque
   page de l'app). */
.rf-studio__visite .rf-h2{max-width:1200px}
.rf-h2__suite--ligne{display:block}
.rf-studio__indice{margin-top:8px; text-align:center; font-size:18px; line-height:1.45; color:var(--rf-corps)}
@media (min-width:768px){
  .rf-page--studio .rf-studio__visite{margin-top:56px}
  .rf-studio__indice{font-size:21px}
}
.rf-studio__visite .cf-app{--w:min(1092px, calc(100vw - 172px)); margin-top:56px}
.rf-studio__visite .cf-app__pastilles{gap:4px; padding:6px; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,.08);
  -webkit-backdrop-filter:none; backdrop-filter:none}
.rf-studio__visite .cf-app__pastilles button{height:36px; color:var(--rf-encre)}
.rf-studio__visite .cf-app__pastilles button[aria-pressed="true"]{background:var(--rf-encre); color:#fff}
/* L'ordinateur dépasse puis se pose : --pose va de 0 (il est remonté sous l'ouverture,
   titre et onglets invisibles) à 1 (tout est en place). Posé par le script de la page. */
[data-rf-pose] .cf-app__defil{transform:translateY(calc((1 - var(--pose, 1)) * var(--pose-d, 0px) * -1)); will-change:transform; position:relative; z-index:6}
[data-rf-pose] > .rf-section__in, [data-rf-pose] .cf-app__pastilles{opacity:calc((var(--pose, 1) - .25) / .6)}
[data-rf-pose]:not(.est-pose) .cf-app__pastilles{pointer-events:none}
[data-rf-pose][style]:not(.est-pose) .cf-app__legende{opacity:0}
.rf-studio__visite .cf-app__relief{display:none}
.rf-studio__visite .cf-app__plateau::before{display:none}
@media (min-width:1200px){
  .rf-studio__visite .cf-app__defil{padding-block:42px 32px}   /* 28 + 14 de cadre ; 14 de cadre + 18 de socle */
  .rf-studio__visite .cf-app__plan{--p:calc(100cqw / 1092)}
  .rf-studio__visite .cf-app__plan::before{content:""; position:absolute; inset:calc(var(--p) * -14); z-index:-1;
    border-radius:calc(var(--p) * 26); background:#111110}
  .rf-studio__visite .cf-app__plan::after{content:""; position:absolute; top:calc(100% + var(--p) * 14);
    left:calc(var(--p) * -78); width:calc(var(--p) * 1248); height:calc(var(--p) * 18);
    border-radius:calc(var(--p) * 2) calc(var(--p) * 2) calc(var(--p) * 16) calc(var(--p) * 16);
    background:
      linear-gradient(rgba(17,17,16,.22), rgba(17,17,16,.22)) 50% 0 / calc(var(--p) * 170) calc(var(--p) * 7) no-repeat,
      linear-gradient(#dbe0e5, #b2bac2)}
  .rf-studio__visite .cf-app__fenetre{border-radius:calc(var(--p) * 12); box-shadow:none}
  /* les trois étiquettes, aux places de la maquette (1250:8163 à 8169) */
  .rf-studio__visite .cf-app__legende:nth-of-type(4){left:74% !important; top:-3.4% !important}   /* à cheval sur le haut du cadre : dégage les boutons de l'app */
  .rf-studio__visite .cf-app__legende:nth-of-type(5){left:82.6% !important; top:75% !important}
  .rf-studio__visite .cf-app__legende:nth-of-type(6){left:-7.14% !important; top:63.5% !important}
  .rf-studio__visite .cf-app__etiquette{gap:calc(var(--p) * 8); height:auto; padding:calc(var(--p) * 9) calc(var(--p) * 14) calc(var(--p) * 9) calc(var(--p) * 12);
    background:#111110; font-size:calc(var(--p) * 12); letter-spacing:.04em; box-shadow:none}
  .rf-studio__visite .cf-app__etiquette::before{content:""; flex:none; width:calc(var(--p) * 7); height:calc(var(--p) * 7);
    border-radius:50%; background:#2dd4a7}
  .rf-studio__visite .cf-app__etiquette b{display:inline; width:auto; height:auto; background:none; font-size:inherit; font-weight:500}
}

/* — La bande de preuve */
.rf-preuves{list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:20px}
.rf-preuves li{display:flex; align-items:center; gap:14px; font-size:15px; line-height:1.45; color:var(--rf-corps)}
.rf-preuves img{flex:none; width:52px; height:43px; object-fit:contain}
.rf-preuves strong{flex:none; font-size:40px; font-weight:500; line-height:1; letter-spacing:-.03em; color:var(--rf-encre)}
.rf-preuves span{max-width:280px}
.rf-preuves li + li span{max-width:220px}
@media (min-width:1024px){ .rf-preuves{margin-top:56px; display:flex; justify-content:space-between; gap:24px} }

/* — Problème et solution */
.rf-avant, .rf-apres{display:flex; flex-direction:column; padding:32px 24px}
.rf-avant{gap:20px}
.rf-avant__etapes{list-style:none; margin:0; padding:0}
.rf-avant__etapes li{display:flex; gap:20px; padding:20px 0; border-bottom:1px solid rgba(17,17,16,.08);
  font-size:19px; line-height:1.45; color:var(--rf-corps)}
.rf-avant__etapes li:last-child{border-bottom:0}
.rf-avant__etapes b{flex:none; font-family:"Geist Mono", ui-monospace, monospace; font-size:14px; font-weight:500;
  line-height:1.8; letter-spacing:.04em; color:var(--rf-teal)}
.rf-avant__etapes span{max-width:440px}
.rf-avant__fin span{font-weight:500; color:var(--rf-encre)}
.rf-apres{gap:24px; background:linear-gradient(180deg, #258fba, #1f5e7b); color:#fff}
.rf-apres .rf-mono{color:rgba(255,255,255,.7)}
.rf-apres h3{font-size:clamp(26px, 5.6vw, 36px); font-weight:500; line-height:1.1; letter-spacing:-.03em}
.rf-apres ul{list-style:none; margin:auto 0 0; padding:24px 0 0; display:flex; flex-direction:column; gap:14px}
.rf-apres li{display:flex; align-items:center; gap:14px; font-size:22px; font-weight:500; line-height:1.2; letter-spacing:-.015em}
.rf-apres svg{flex:none; width:26px; height:26px}
@media (min-width:768px){
  .rf-avant, .rf-apres{min-height:589px; padding:48px}
  .rf-avant{gap:40px}
}

/* — Les cinq modes : les cartes du site, dans le cadre de la refonte */
.rf-h2--large{max-width:1100px}
.rf-studio__sous{margin:32px auto 0; text-align:center}
.rf-studio__sous--long{max-width:none; margin-top:20px}
.rf-studio__modes .cf-modes__axe{margin:32px 0 0; max-width:none}
.rf-studio__modes .cf-modes__cartes{margin-top:32px}
.rf-studio__modes .cf-mode__etapes{margin-top:16px}
.rf-studio__accord{margin-top:32px; text-align:center; font-size:19px; font-weight:500; line-height:1.4; color:var(--rf-encre)}
@media (min-width:1024px){
  .rf-page--studio .rf-studio__modes{margin-top:146px; padding-bottom:50px}
  .rf-studio__accord{font-size:21px}
}

/* — Le bento de confiance (1250:836) : 816 + 408, puis 408 + 816 */
.rf-bento{display:grid; grid-template-columns:minmax(0, 1fr); gap:16px}
.rf-bento__case{display:flex; flex-direction:column; margin:0; border-radius:28px; background:#fff}
.rf-bento h3{font-size:28px; font-weight:500; line-height:1.1; letter-spacing:-.03em; color:var(--rf-encre)}
.rf-bento__temoin{gap:32px; justify-content:space-between; padding:36px 24px; background:var(--rf-encre); color:#fff}
.rf-bento__temoin p{max-width:656px; font-size:clamp(22px, 4.6vw, 32px); font-weight:500; line-height:1.25; letter-spacing:-.03em}
.rf-bento__temoin strong{font-weight:500; color:#73d1e5}
.rf-bento__temoin footer{display:flex; align-items:center; gap:18px}
.rf-bento__tuile{flex:none; padding:8px 10px; border-radius:16px; background:#fff}
.rf-bento__tuile img{display:block; width:72px; height:60px; object-fit:contain}
.rf-bento__temoin footer b{display:block; font-size:20px; font-weight:500; line-height:1.2; letter-spacing:-.01em}
.rf-bento__temoin footer i{display:block; margin-top:4px; font-style:normal; font-size:15px; line-height:1.45; color:rgba(255,255,255,.6)}
.rf-bento__prix, .rf-bento__import{gap:10px; padding:32px 24px}
.rf-bento__prix > p:not([class]), .rf-bento__import > p:not([class]){font-size:15px; line-height:1.45; color:var(--rf-corps)}
.rf-bento__montant{margin-top:auto; padding-top:10px; font-size:72px; font-weight:500; line-height:1; letter-spacing:-.04em;
  color:var(--rf-encre); white-space:nowrap}
.rf-bento__unite{font-size:16px; font-weight:500; line-height:1.45; color:var(--rf-corps)}
.rf-bento__note{font-size:14px; line-height:1.45; color:var(--rf-corps)}
.rf-bento__note--gris{color:var(--rf-gris)}
.rf-bento__import{gap:14px}
.rf-bento__import ol{list-style:none; margin:0; padding:0}
.rf-bento__import li{display:flex; gap:12px; padding-top:12px; margin-top:14px; font-size:15px; font-weight:500; line-height:1.4; color:var(--rf-encre)}
.rf-bento__import li:first-child{margin-top:0}
.rf-bento__import li b{flex:none; font-family:"Geist Mono", ui-monospace, monospace; font-size:13px; font-weight:500;
  line-height:1.5; color:var(--rf-teal)}
.rf-bento__import .rf-cta{margin-top:auto}
.rf-bento__import ol{margin-bottom:28px}
.rf-bento__secu{gap:16px; padding:32px 24px; background:var(--rf-encre); color:#fff}
.rf-bento__secu .rf-mono{font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.6)}
.rf-bento__secu h3{max-width:700px; font-size:clamp(28px, 5.6vw, 36px); color:#fff}
.rf-bento__secu h3 .rf-h2__suite{color:rgba(255,255,255,.55)}
.rf-bento__intro{max-width:700px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.7)}
.rf-bento__secu dl{margin:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:20px 24px}
.rf-bento__secu dl div{padding-top:16px; border-top:1px solid rgba(255,255,255,.14)}
.rf-bento__secu dt{font-size:16px; font-weight:500; line-height:1.3}
.rf-bento__secu dd{margin:6px 0 0; font-size:13px; line-height:1.45; color:rgba(255,255,255,.6)}
.rf-bento__fin{margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
.rf-bento__fin p{flex:1 1 300px; max-width:400px; font-size:15px; font-weight:500; line-height:1.45}
.rf-bento__fin .rf-cta{align-self:auto}
.rf-bento__lien{flex-basis:100%; font-size:14px; font-weight:500; line-height:1.45; color:rgba(255,255,255,.7); text-decoration:none}
.rf-bento__lien:hover{color:#fff}
.rf-bento__secu .rf-cta:focus-visible{outline-color:#fff}
@media (min-width:700px){ .rf-bento__secu dl{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (min-width:1024px){
  /* deux rangées 2/3 + 1/3 puis 1/3 + 2/3 : 816 et 408 à 1248 de large */
  .rf-bento{display:flex; flex-wrap:wrap; gap:24px}
  .rf-bento__case{flex:0 0 calc((100% - 24px) / 3)}
  .rf-bento__case{border-radius:36px}
  .rf-bento__temoin{flex-basis:calc((100% - 24px) * 2 / 3); min-height:396px; gap:40px; padding:64px 80px 56px; border-radius:40px}
  .rf-bento__prix{min-height:396px; padding:40px 40px 14px}
  .rf-bento__import{min-height:756px; padding:40px}
  .rf-bento__secu{flex-basis:calc((100% - 24px) * 2 / 3); min-height:756px; padding:40px 48px}
}

/* — Démo et appel final (1250:895) */
.rf-demo{padding:36px 24px 32px; border-radius:28px; color:#fff;
  background:linear-gradient(26.92deg, #111110 21.705%, #003d4d 99.225%)}
.rf-demo__haut{display:grid; grid-template-columns:minmax(0, 1fr); gap:32px}
.rf-demo__appel{display:flex; flex-direction:column; align-items:flex-start; gap:18px}
.rf-demo h2{max-width:520px; font-size:clamp(32px, 7vw, 52px); font-weight:500; line-height:1.1; letter-spacing:-.03em}
.rf-demo__p1{max-width:520px; font-size:18px; line-height:1.45; color:rgba(255,255,255,.7)}
.rf-demo__p2{max-width:520px; font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-.01em}
.rf-demo__p2 span{color:rgba(255,255,255,.55)}
.rf-demo__p3{max-width:520px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.6)}
.rf-demo__action{display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-top:12px;
  font-size:14px; font-weight:500; line-height:1.45; color:rgba(255,255,255,.7)}
.rf-demo__action .rf-cta{align-self:auto}
.rf-demo .rf-cta:focus-visible{outline-color:#fff}
.rf-demo__verra{align-self:start; display:flex; flex-direction:column; gap:14px; padding:28px 24px; border-radius:28px;
  background:rgba(255,255,255,.06)}
.rf-demo__verra .rf-mono{font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.6)}
.rf-demo__verra ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.rf-demo__verra li{display:flex; gap:12px; font-size:15px; font-weight:500; line-height:1.4}
.rf-demo__verra svg{flex:none; width:18px; height:18px; margin-top:1px}
.rf-demo__petit{font-size:13px; line-height:1.45; color:rgba(255,255,255,.55)}
.rf-demo__relances{margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12);
  display:grid; grid-template-columns:minmax(0, 1fr); gap:28px}
.rf-demo__relances p{font-size:15px; font-weight:500; line-height:1.45}
.rf-demo__form{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:12px}
.rf-demo__form input[type="email"]{width:240px; max-width:100%; height:38px; padding:0 18px; border:0; border-radius:999px;
  background:rgba(255,255,255,.1); font:inherit; font-size:14px; color:#fff; outline:2px solid transparent;
  transition:outline-color .25s ease}
.rf-demo__form input::placeholder{color:rgba(255,255,255,.55); opacity:1}
.rf-demo__form input:focus-visible{outline-color:#73d1e5}
.rf-demo__form button, .rf-demo__lien{display:inline-flex; gap:8px; padding:0; border:0; background:none; font:inherit;
  font-size:14px; font-weight:500; line-height:1.45; color:#fff; text-decoration:none; cursor:pointer}
.rf-demo__lien{margin-top:12px}
.rf-demo__form button span, .rf-demo__lien span{transition:transform .4s var(--rf-courbe)}
.rf-demo__form button:hover span, .rf-demo__lien:hover span{transform:translateX(4px)}
.rf-demo__form button:focus-visible, .rf-demo__lien:focus-visible{outline:2px solid #fff; outline-offset:4px; border-radius:4px}
.rf-demo__ps{max-width:1000px; margin-top:28px; font-size:13px; line-height:1.45; color:rgba(255,255,255,.5)}
.rf-demo__ps a{color:inherit; text-decoration:none}
.rf-demo__ps a:hover{color:#fff}
@media (min-width:1024px){
  .rf-demo{padding:72px 72px 48px; border-radius:40px}
  .rf-demo__haut{grid-template-columns:minmax(0, 1fr) 488px; gap:64px}
  .rf-demo__verra{padding:32px}
  .rf-demo__relances{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px}
}

/* — Julien et les questions (1250:943) */
.rf-qui{display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; align-items:start}
.rf-qui__julien{display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:28px 24px; border-radius:28px}
.rf-qui__portrait{position:relative; width:144px; height:158.4px; overflow:hidden; border-radius:16.8px}
.rf-qui__portrait img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover}
.rf-qui__julien h3{font-size:28px; font-weight:500; line-height:1.1; letter-spacing:-.03em}
.rf-qui__julien p{font-size:15px; line-height:1.45; color:var(--rf-corps)}
.rf-qui__julien .rf-qui__ecrire{font-size:14px; font-weight:500; color:var(--rf-encre)}
.rf-qui__ecrire a{color:var(--rf-teal); text-decoration:none}
.rf-qui__ecrire a:hover{text-decoration:underline}
.rf-qui__questions h2{font-size:clamp(28px, 6vw, 36px); font-weight:500; line-height:1.1; letter-spacing:-.03em; color:var(--rf-encre)}
.rf-faq--studio{margin-top:20px}
.rf-faq--studio p{max-width:680px}
@media (min-width:768px){ .rf-faq--studio{padding:16px 40px} }
@media (min-width:1024px){
  .rf-qui{grid-template-columns:384px minmax(0, 1fr)}
  .rf-qui__julien{padding:36px; border-radius:36px}
}

/* — Les articles du bas : une image et un titre */
.rf-article--titre .rf-article__texte{gap:0}
.rf-article--titre h3{flex:none; min-height:0}
@media (min-width:900px){ .rf-article--titre{min-height:384px} }


/* ═══════════════════════════════════════════════════════════════════════
   ENTRE TÉLÉPHONE ET ORDINATEUR (600 à 1439 px)
   Les maquettes sont dessinées à 1440 et à 390. Entre les deux, les blocs
   gardaient les cotes de l'ordinateur dans une place trop étroite. Chaque
   règle ci-dessous ne vaut que pour sa tranche de largeurs.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Portes : le titre et le surtitre laissent la place de l'autocollant */
@media (min-width:768px) and (max-width:1439px){
  .rf-porte h3{max-width:none; padding-right:112px}
  .rf-porte .rf-surtitre{padding-right:88px; line-height:1.3}
}
@media (min-width:900px) and (max-width:1199px){
  .rf-porte{padding:40px}
  .rf-porte--visuel{padding-bottom:248px}   /* la réserve du visuel, que la ligne du dessus écraserait */
  .rf-porte .rf-sticker{top:36px; right:36px}
  .rf-porte h3{font-size:32px; padding-right:100px}
  .rf-porte ul, .rf-porte__phrase{font-size:17px}
  .rf-principe{padding:36px 36px 40px}
}

/* la porte avec visuel grandit avec son texte au lieu de rester à 680 : sinon
   le bouton glisse sous les téléphones dès que le titre prend une ligne de plus */
@media (min-width:768px) and (max-width:1439px){
  .rf-porte--visuel{height:auto; min-height:680px}
}

/* — Chiffres : trois de front dès qu'ils tiennent, au lieu de trois bandes */
@media (min-width:700px) and (max-width:899px){
  .rf-grille3:has(> .rf-chiffre){grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px}
  .rf-chiffre{padding:28px 22px 30px}
  .rf-chiffre__n{font-size:clamp(44px, 6.6vw, 60px)}
  .rf-chiffre__t{padding-top:28px; font-size:18px}
}
@media (min-width:900px) and (max-width:1199px){
  .rf-chiffre{padding:32px 28px}
  .rf-chiffre__n{font-size:clamp(56px, 6vw, 72px)}
  .rf-chiffre__t{padding-top:44px; font-size:20px}
}

/* — Articles : en bandes (image à gauche) sur tablette pour les trois du bas
   de page, deux de front dans la liste du blogue */
@media (min-width:640px) and (max-width:899px){
  .rf-grille3:has(> .rf-article):not(.rf-blogue) .rf-article{flex-direction:row; align-items:stretch}
  .rf-grille3:has(> .rf-article):not(.rf-blogue) .rf-article__img{flex:0 0 38%; aspect-ratio:auto; min-height:176px}
  .rf-grille3:has(> .rf-article):not(.rf-blogue) .rf-article__texte{justify-content:center}
  .rf-grille3:has(> .rf-article):not(.rf-blogue) .rf-article h3{flex:none; min-height:0}
  .rf-blogue{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px}
}
@media (min-width:900px) and (max-width:1199px){
  .rf-article__texte{padding:24px 22px 26px}
  .rf-article h3{font-size:19px}
}

/* — Témoignage : la phrase suit la largeur de sa carte */
@media (min-width:1024px) and (max-width:1339px){
  .rf-temoin{grid-template-columns:minmax(0, 340px) minmax(0, 1fr)}
  .rf-temoin__agence{padding:40px}
  .rf-temoin__citation{padding:44px 48px}
  .rf-temoin__citation p{font-size:clamp(25px, 2.5vw, 33px)}
}

/* — Castings de l'accueil : à deux colonnes, le troisième se centre dessous */
@media (min-width:640px) and (max-width:999px){
  .rf-castings > li:last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:calc(50% - 10px)}
}

/* — Bandeau de fin : le titre sur sa ligne, les boutons dessous, tant que
   les deux ne tiennent pas côte à côte */
@media (min-width:1024px) and (max-width:1239px){
  .rf-bandeau{flex-direction:column; align-items:flex-start; gap:32px; padding:56px 64px}
  .rf-bandeau h2{flex:none}
  .rf-bandeau__action--pile{flex-direction:row}
}

/* — Contact : coordonnées au-dessus du formulaire tant que deux colonnes
   écrasent les champs */
@media (min-width:1024px) and (max-width:1239px){
  .rf-contact{flex-direction:column; gap:48px; padding:48px}
  .rf-coord{width:100%}
}

/* — À propos : la carte titre sur toute la largeur, les quatre portraits de
   front, puis la mission */
@media (min-width:1024px) and (max-width:1279px){
  .cf-apropos--quatre .cf-apropos__grille{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px}
  .cf-apropos--quatre .cf-apropos__titre{grid-row:auto; grid-column:1 / -1}
  .cf-apropos--quatre .cf-apropos__mission{grid-column:1 / -1; min-height:240px}
}
/* sur téléphone, deux portraits par rangée au lieu de quatre l'un sous l'autre */
@media (max-width:599px){
  .cf-apropos--quatre .cf-apropos__grille{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
  .cf-apropos--quatre .cf-apropos__titre, .cf-apropos--quatre .cf-apropos__mission{grid-column:1 / -1}
  .cf-apropos--quatre .cf-apropos__nom{padding:6px 10px; border-radius:12px}
  .cf-apropos--quatre .cf-apropos__nom strong{font-size:14px; line-height:20px}
  .cf-apropos--quatre .cf-apropos__nom span{font-size:12px; line-height:17px}
  /* cartes plus hautes, comme sur ordinateur, pour que l'étiquette ne couvre pas le visage */
  .cf-apropos--quatre .cf-apropos__portrait{aspect-ratio:213 / 330}
  .cf-apropos--quatre .cf-apropos__portrait img{top:24%; height:76%}
  .cf-apropos--quatre .cf-apropos__portrait--julien  img{left:-10%; width:120%}
  .cf-apropos--quatre .cf-apropos__portrait--charbel img{left:-14%; width:128%}
  .cf-apropos--quatre .cf-apropos__portrait--jules   img{left:-10%; width:120%}
  .cf-apropos--quatre .cf-apropos__portrait--sasha   img{top:26%; left:-22%; width:144%; height:90%}
  .cf-apropos--quatre .cf-apropos__mission{aspect-ratio:auto; min-height:220px}
}

/* — Studio */
@media (min-width:768px) and (max-width:899px){
  .rf-avant, .rf-apres{min-height:0}
  .rf-apres ul{margin-top:0}
}
@media (min-width:1024px){
  /* la mosaïque en grille : un tiers / deux tiers, sans arrondi qui fasse passer une case à la ligne */
  .rf-bento{display:grid; grid-template-columns:minmax(0, 408fr) minmax(0, 384fr) minmax(0, 408fr)}   /* 816 | 408 puis 408 | 816 à 1440 */
  .rf-bento__temoin, .rf-bento__secu{grid-column:span 2}
  .rf-bento__temoin{grid-column:1 / span 2}
  .rf-bento__import{grid-column:1}
}
@media (min-width:1024px) and (max-width:1279px){
  .rf-bento__temoin{padding:48px 48px 44px}
  .rf-bento__prix, .rf-bento__import{padding:32px}
  .rf-bento__montant{font-size:60px}
  .rf-bento__secu{padding:36px 40px}
  .rf-demo{padding:56px 48px 40px}
  .rf-demo__haut{grid-template-columns:minmax(0, 1fr) minmax(0, 400px); gap:40px}
  .rf-demo h2{font-size:42px}
  .rf-qui{grid-template-columns:320px minmax(0, 1fr)}
}
@media (min-width:1024px) and (max-width:1279px){
  .rf-bento__import .rf-cta{max-width:100%; gap:10px; padding-left:18px; font-size:14px; white-space:nowrap}
}


/* ═══════════════════════════════════════════════════════════════════════
   SÉCURITÉ ET PÉRENNITÉ — /securite/ et /en/securite/
   Figma « Castflow - Refonte », cadre 1296:3. Classes rf-sec__.
   Écrit pour le téléphone en premier ; les cotes de la maquette (1440) arrivent
   à partir de 1024, avec un palier tablette entre les deux.
   ═══════════════════════════════════════════════════════════════════════ */
.rf-sec__ouverture{gap:20px}
.rf-sec__h1{font-size:clamp(38px, 9.4vw, 66px); line-height:1.08; letter-spacing:-.035em}
.rf-sec__chapo{max-width:860px; margin-top:4px}
.rf-sec__sur{text-align:center}
.rf-sec__h2{max-width:1100px; margin-top:20px; text-wrap:wrap}
.rf-page--securite .rf-carte h3{font-weight:500; letter-spacing:-.02em; color:var(--rf-encre)}

/* — Les quatre questions : la note teal se pose en bas de la carte */
.rf-sec__q{display:flex; flex-direction:column; padding:28px 24px}
.rf-sec__q h3{font-size:22px; line-height:1.25}
.rf-sec__q p{margin-top:16px; font-size:16px; line-height:1.45; color:var(--rf-corps)}
.rf-sec__q .rf-sec__note{margin-top:auto; padding-top:16px; font-size:15px; font-weight:500; line-height:1.45; color:var(--rf-teal)}

/* — Propriété : la citation en noir, trois promesses empilées */
.rf-sec__citation{display:flex; flex-direction:column; justify-content:space-between; gap:28px; margin:0; padding:32px 24px;
  background:var(--rf-encre); color:#fff}
.rf-sec__citation blockquote{margin:0; font-size:clamp(20px, 5.4vw, 26px); font-weight:500; line-height:1.28; letter-spacing:-.02em}
.rf-sec__citation figcaption{font-size:15px; font-weight:500; line-height:1.45; color:rgba(255,255,255,.6)}
.rf-sec__pile{display:flex; flex-direction:column; gap:16px}
.rf-sec__promesse{flex:1; padding:24px}
.rf-sec__promesse > div{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px}
.rf-sec__promesse h3{font-size:21px; line-height:1.3}
.rf-sec__promesse img{flex:none; width:auto; height:40px}
.rf-sec__promesse p{margin-top:10px; font-size:16px; line-height:1.45; color:var(--rf-corps)}

/* — Garantie d'exportation */
.rf-sec__eng{padding:28px 24px 32px}
.rf-sec__eng b{display:block; font-size:48px; font-weight:500; line-height:1; letter-spacing:-.04em; color:var(--rf-teal)}
.rf-sec__eng h3{margin-top:28px; font-size:22px; line-height:1.3}
.rf-sec__eng p{margin-top:12px; font-size:16px; line-height:1.45; color:var(--rf-corps)}
.rf-sec__savoir{display:grid; gap:10px; margin-top:24px; padding:28px 24px; border-radius:28px; background:#e9e9e9}
.rf-sec__savoir h3{font-size:22px; font-weight:500; line-height:26px; letter-spacing:-.015em}
.rf-sec__savoir p{font-size:16px; line-height:1.45; color:var(--rf-corps)}

/* — Si Castflow disparaît : le calendrier en quatre étapes */
.rf-sec__intro{max-width:860px; margin:20px auto 0; text-align:center; font-size:18px; line-height:1.5; color:var(--rf-corps)}
.rf-sec__calendrier{display:grid; grid-template-columns:minmax(0, 1fr); gap:16px}
.rf-sec__etape{padding:28px 24px 32px}
.rf-sec__jour{display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(0,118,146,.1);
  font-family:"Geist Mono", ui-monospace, monospace; font-size:13px; font-weight:500; line-height:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--rf-teal)}
.rf-sec__etape h3{margin-top:28px; font-size:24px; line-height:1.18}
.rf-sec__etape p{margin-top:10px; font-size:15px; line-height:1.45; color:var(--rf-corps)}
.rf-sec__etape--noire{background:var(--rf-encre)}
.rf-page--securite .rf-sec__etape--noire h3{color:#fff}
.rf-sec__etape--noire p{color:rgba(255,255,255,.7)}
.rf-sec__etape--noire .rf-sec__jour{background:rgba(255,255,255,.14); color:#fff}
.rf-sec__appui{max-width:900px; margin:32px auto 0; text-align:center; font-size:17px; font-weight:500; line-height:1.45; color:var(--rf-encre)}

/* — La confidentialité, en clair */
.rf-sec__ou{padding:28px 24px 32px}
.rf-sec__ou h3{font-size:24px; line-height:1.25; letter-spacing:-.025em}
.rf-sec__ou p{margin-top:16px; font-size:16px; line-height:1.45; color:var(--rf-corps)}
.rf-sec__ou .rf-sec__petit{font-size:15px; line-height:1.45; color:var(--rf-gris)}
.rf-sec__ou--teal{background:linear-gradient(180deg, #258fba, #1f5e7b)}
.rf-page--securite .rf-sec__ou--teal h3, .rf-sec__ou--teal p{color:#fff}
.rf-sec__ou--teal .rf-sec__petit{color:rgba(255,255,255,.78)}
.rf-sec__ia{margin-top:16px; padding:32px 24px; background:var(--rf-encre); color:#fff}
.rf-page--securite .rf-sec__ia h3{font-size:24px; line-height:1.25; letter-spacing:-.025em; color:#fff}
.rf-sec__ia ul{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.rf-sec__ia li{padding:12px 18px; border-radius:999px; background:rgba(255,255,255,.12); font-size:14px; font-weight:500; line-height:16px}
.rf-sec__ia p{max-width:900px; margin-top:24px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.65)}
.rf-sec__suite{margin-top:16px}
.rf-sec__durees, .rf-sec__mesures{padding:28px 24px}
.rf-sec__durees h3, .rf-sec__mesures h3{font-size:23px; line-height:32px; letter-spacing:-.025em}
.rf-sec__durees dl{margin:16px 0 0}
.rf-sec__durees dl div{display:flex; justify-content:space-between; gap:24px; padding:16px 0; border-bottom:1px solid rgba(17,17,16,.08);
  font-size:15px; line-height:22px}
.rf-sec__durees dl div:last-child{border-bottom:0; padding-bottom:0}
.rf-sec__durees dt{flex:1 1 0; max-width:250px; color:var(--rf-corps)}
.rf-sec__durees dd{flex:1 1 0; max-width:240px; margin:0; text-align:right; font-weight:500; color:var(--rf-encre)}
.rf-sec__mesures ul{list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.rf-sec__mesures li{display:flex; gap:12px; font-size:14.5px; line-height:21px; color:var(--rf-corps)}
.rf-sec__mesures svg{flex:none; width:20px; height:20px}
.rf-sec__documents{max-width:820px; margin:48px auto 0; text-align:center; font-size:15px; line-height:22px; color:var(--rf-corps)}
.rf-sec__liens{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.rf-sec__liens .rf-cta{align-self:auto; max-width:100%; white-space:normal; text-align:left}
.rf-sec__version{margin:14px 0; font-size:14px; line-height:20px; color:var(--rf-gris)}

/* — Le bloc de fin : la question et le responsable */
.rf-sec__fin{display:grid; grid-template-columns:minmax(0, 1fr); gap:32px; padding:40px 24px; border-radius:28px;
  background:var(--rf-encre); color:#fff}
.rf-sec__fin-texte{display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.rf-sec__fin h2{font-size:clamp(30px, 7vw, 44px); font-weight:500; line-height:1.09; letter-spacing:-.03em}
.rf-sec__fin h2 .rf-h2__suite{color:rgba(255,255,255,.55)}
.rf-sec__fin-texte p{font-size:17px; line-height:25px; color:rgba(255,255,255,.72)}
.rf-sec__fin .rf-cta{margin-top:8px; align-self:auto}
.rf-sec__fin .rf-cta:focus-visible{outline-color:#fff}
.rf-sec__ecrire{font-size:15px; font-weight:500; line-height:22px; color:#fff; text-decoration:none}
.rf-sec__ecrire:hover{text-decoration:underline; text-underline-offset:3px}
.rf-sec__responsable{align-self:center; display:flex; flex-direction:column; gap:8px; padding:28px 24px; border-radius:28px;
  background:rgba(255,255,255,.08); font-style:normal}
.rf-sec__responsable .rf-mono{font-size:12px; line-height:17px; letter-spacing:.06em; color:rgba(255,255,255,.6)}
.rf-sec__responsable strong{margin-top:12px; font-size:20px; font-weight:500; line-height:26px; letter-spacing:-.015em}
.rf-sec__coord{font-size:16px; font-weight:500; line-height:23px}
.rf-sec__coord a{color:inherit; text-decoration:none}
.rf-sec__coord a:hover{text-decoration:underline; text-underline-offset:3px}
.rf-sec__responsable small{font-size:14px; line-height:20px; color:rgba(255,255,255,.6)}
.rf-sec__coord + small{margin-top:20px}

@media (min-width:640px){
  .rf-sec__calendrier{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .rf-sec__intro{font-size:20px; line-height:30px}
}
@media (min-width:768px){
  .rf-sec__ouverture{gap:24px; padding-top:88px}
  .rf-sec__chapo{font-size:21px; line-height:30px}
  .rf-sec__q, .rf-sec__eng, .rf-sec__ou, .rf-sec__durees, .rf-sec__mesures{padding:44px}
  .rf-sec__q h3{font-size:28px; line-height:1.15; letter-spacing:-.025em}
  .rf-sec__q p, .rf-sec__eng p, .rf-sec__ou p{font-size:17px}
  .rf-sec__ou .rf-sec__petit{font-size:15px}
  .rf-sec__ia p{font-size:16px}
  .rf-sec__appui{font-size:19px}
  .rf-sec__intro{font-size:21px; line-height:1.45}
  .rf-sec__citation{padding:48px}
  .rf-sec__promesse{padding:32px 36px}
  .rf-sec__promesse h3{font-size:24px; line-height:1.2}
  .rf-sec__eng{padding-top:40px}
  .rf-sec__eng b{font-size:56px}
  .rf-sec__eng h3{margin-top:36px; font-size:26px; line-height:1.2}
  .rf-sec__savoir{grid-template-columns:240px minmax(0, 1fr); gap:40px; margin-top:44px; padding:36px 44px}
  .rf-sec__q .rf-sec__note{padding-top:35px}
  .rf-sec__etape{padding:32px 28px 36px}
  .rf-sec__etape h3{margin-top:40px}
  .rf-sec__appui{margin-top:44px}
  .rf-sec__ou h3, .rf-page--securite .rf-sec__ia h3{font-size:30px; line-height:1.18}
  .rf-sec__ia{margin-top:24px; padding:48px 56px}
  .rf-sec__suite{margin-top:24px}
  .rf-sec__durees h3, .rf-sec__mesures h3{font-size:28px}
  .rf-sec__fin{padding:56px 48px; border-radius:40px}
  .rf-sec__responsable{padding:32px}
}
@media (min-width:1024px){
  .rf-sec__pile{gap:24px}
  .rf-sec__citation{min-height:643px}
  .rf-sec__fin{grid-template-columns:minmax(0, 560fr) minmax(0, 456fr); gap:72px; align-items:center; min-height:550px; padding:72px 80px}
}
@media (min-width:1200px){
  .rf-sec__calendrier{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px}
  .rf-sec__etape{min-height:269px}
}
/* entre tablette et ordinateur : les cartes à deux colonnes gardent des marges plus serrées */
@media (min-width:900px) and (max-width:1199px){
  .rf-sec__q, .rf-sec__eng, .rf-sec__ou, .rf-sec__durees, .rf-sec__mesures{padding:32px}
  .rf-sec__citation{padding:36px}
  .rf-sec__promesse{padding:26px 28px}
  .rf-sec__q h3{font-size:23px}
  .rf-sec__q p, .rf-sec__eng p, .rf-sec__ou p{font-size:16px}
  .rf-sec__ou h3, .rf-page--securite .rf-sec__ia h3{font-size:25px}
  .rf-sec__promesse h3, .rf-sec__eng h3{font-size:22px}
  .rf-sec__durees h3, .rf-sec__mesures h3{font-size:23px}
}

/* Les étiquettes de l'ordinateur de /studio/ (7 octobre 2026) : une note teal en bas
   de casse, avec un autocollant Castflow. Ni numéro, ni pastille verte, ni capitales
   espacées (ça faisait gabarit généré) ; le blanc, lui, se perdait sur l'écran blanc. */
.rf-studio__visite .cf-app__etiquette{height:auto; gap:8px; padding:7px 14px 7px 9px; border:0; border-radius:999px;
  background:#007692; color:#fff; font-size:13px; font-weight:500; line-height:1.2; letter-spacing:-.005em; text-transform:none;
  box-shadow:0 8px 20px rgba(0,60,75,.28)}
.rf-studio__visite .cf-app__etiquette::before, .rf-studio__visite .cf-app__etiquette b{display:none}
.rf-studio__visite .cf-app__etiquette img{flex:none; width:auto; height:22px}
/* la note prend la largeur de son texte, même quand elle dépasse du bord de l'ordinateur */
.rf-studio__visite .cf-app__legende, .rf-studio__visite .cf-app__pop, .rf-studio__visite .cf-app__etiquette{width:max-content; max-width:none}
@media (min-width:1200px){
  .rf-studio__visite .cf-app__etiquette{gap:calc(var(--p) * 9); padding:calc(var(--p) * 7) calc(var(--p) * 16) calc(var(--p) * 7) calc(var(--p) * 10);
    background:#007692; font-size:calc(var(--p) * 14); letter-spacing:-.005em; box-shadow:0 calc(var(--p) * 8) calc(var(--p) * 22) rgba(0,60,75,.3)}
  .rf-studio__visite .cf-app__etiquette img{height:calc(var(--p) * 26)}
}

/* À propos : sans le surtitre « À propos », le titre garde l'écart sous le logo. */
.rf-page .cf-apropos__titre h1{margin-top:32px}

/* La carte avec visuel grandit avec son texte à toutes les largeurs (la description de
   l'app acteur fait maintenant trois phrases longues). */
@media (min-width:768px){ .rf-porte--visuel{height:auto; min-height:680px} }

/* ═══════════════════════════════════════════════════════════════════════
   L'OUVERTURE DE L'ACCUEIL (maquette 1334:1977, 7 octobre 2026)
   Le texte à gauche ; à droite, une scène de 707 × 920 : le fond en dégradé
   (600 de large, décalé de 107), le téléphone de l'app acteur et trois cartes
   de casting penchées. Les cartes sont celles du hub (.cfk) à l'échelle --k.
   Toutes les cotes de la scène sont celles de la maquette ; c'est « zoom »
   qui la réduit quand la place manque.
   ═══════════════════════════════════════════════════════════════════════ */
.rf-hero{padding:36px 16px 0}
.rf-hero__in{max-width:1248px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:44px}
.rf-hero__texte{display:flex; flex-direction:column; align-items:center; text-align:center}
.rf-hero__h1{font-size:clamp(40px, 10vw, 64px); line-height:1.04; letter-spacing:-.035em; text-wrap:nowrap}
.rf-hero__chapo{max-width:500px; margin-top:20px; font-size:18px; line-height:1.5}
.rf-hero__entrees{padding-top:26px}
.rf-hero__visuel{flex:none; zoom:.46}
.rf-hero__scene{position:relative; width:707px; height:920px}
.rf-hero__fond{position:absolute; left:107px; top:0; width:600px; height:920px; border-radius:40px;
  background:linear-gradient(180deg, #258fba, #1f5e7b)}
.rf-hero .rf-hero__carte{position:absolute; border-radius:28px; cursor:default}
.rf-hero .rf-hero__carte .cfk__titre{min-height:0; -webkit-line-clamp:1}
.rf-hero .rf-hero__carte .cfk__haut{background:linear-gradient(180deg, #258fba, #1f5e7b)}
.rf-hero .rf-hero__carte .cfk__ex{white-space:nowrap}
.rf-hero .rf-hero__carte--theatre, .rf-hero__carte--second, .rf-hero__carte--figu{transform:translate(-50%, -50%);
  box-shadow:0 28px 56px -12px rgba(0,0,0,.3)}
.rf-hero .rf-hero__carte--theatre{--k:.425; left:572.5px; top:182.8px; width:170px; rotate:14deg}
.rf-hero .rf-hero__carte--second{--k:.64; left:562.6px; top:557.8px; width:256px; rotate:7deg}
.rf-hero .rf-hero__carte--figu{--k:.575; left:131.7px; top:625.6px; width:230px; rotate:-8deg}
.rf-hero__tel{position:absolute; left:252px; top:110px; width:310px; height:629.118px; overflow:hidden; border-radius:51.059px;
  background:#111110; box-shadow:0 36.471px 72.941px -18.235px rgba(0,0,0,.18)}
.rf-hero__ecran{position:absolute; left:9.12px; top:9.12px; width:291.765px; height:610.882px; overflow:hidden; border-radius:41.941px;
  background:#f5f6f7}
.rf-hero__ilot{position:absolute; left:102.12px; top:10.94px; width:87.529px; height:23.706px; border-radius:11.853px; background:#111110}
.rf-hero__app{position:absolute; left:18.24px; top:52.88px; font-size:20.059px; font-weight:500; line-height:1; letter-spacing:-.02em; color:#111110}
.rf-hero__sous{position:absolute; left:18.24px; top:78.41px; font-size:11.853px; line-height:1; color:#6b747c}
.rf-hero .rf-hero__carte--fond{--k:.6; left:25.53px; top:136.76px; width:239.976px; opacity:.55; box-shadow:0 8px 21.5px rgba(0,0,0,.12)}
.rf-hero .rf-hero__carte--devant{--k:.638; left:18.24px; top:113.06px; width:255.294px; box-shadow:0 8.6px 22.8px rgba(0,0,0,.12)}
.rf-hero__rond{position:absolute; top:461.35px; display:flex; align-items:center; justify-content:center; width:49.235px; height:49.235px;
  border-radius:50%; background:#fff; box-shadow:0 5.471px 14.588px rgba(0,0,0,.1)}
.rf-hero__rond--non{left:80.24px} .rf-hero__rond--oui{left:162.29px}
.rf-hero__rond svg{width:20px; height:20px}
.rf-hero__onglets{position:absolute; left:0; top:541.59px; width:291.765px; height:69.294px; display:flex; justify-content:space-between;
  padding:12.765px 25.529px 0; background:#fff; font-size:11.853px; font-weight:500; line-height:1; color:#6b747c}
.rf-hero__onglets span{display:flex; flex-direction:column; align-items:center; gap:5.471px}
.rf-hero__onglets span::before{content:""; width:16.412px; height:2.735px; border-radius:1.824px; background:transparent}
.rf-hero__onglets .est-actif{color:#111110}
.rf-hero__onglets .est-actif::before{background:#007692}
/* les trois cartes flottent doucement, chacune à son rythme */
.rf-js .rf-hero .rf-hero__carte--theatre{animation:rf-hero-flotte 7s ease-in-out infinite}
.rf-js .rf-hero .rf-hero__carte--second{animation:rf-hero-flotte 6s ease-in-out -2s infinite}
.rf-js .rf-hero .rf-hero__carte--figu{animation:rf-hero-flotte 8s ease-in-out -4s infinite}
@keyframes rf-hero-flotte{0%,100%{translate:0 0} 50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){ .rf-hero__carte{animation:none !important} }

@media (min-width:400px){ .rf-hero__visuel{zoom:.5} }
@media (min-width:480px){ .rf-hero__visuel{zoom:.62} }
@media (min-width:768px){ .rf-hero{padding-inline:40px} .rf-hero__visuel{zoom:.85} .rf-hero__chapo{font-size:19px} }
@media (min-width:1100px){
  .rf-hero{padding:28px 64px 0}
  .rf-hero__in{flex-direction:row; align-items:flex-start; justify-content:space-between; gap:0}
  .rf-hero__texte{flex:1 1 0; min-width:0; align-items:flex-start; text-align:left; padding-top:110px}
  .rf-hero__h1{font-size:54px}
  .rf-hero__chapo{width:440px; margin-top:22px; font-size:17px}
  .rf-hero__entrees{justify-content:flex-start; flex-wrap:nowrap}
  .rf-hero__visuel{zoom:.6}
}
@media (min-width:1280px){
  .rf-hero{padding-inline:96px}
  .rf-hero__texte{padding-top:140px}
  .rf-hero__h1{font-size:60px}
  .rf-hero__chapo{width:480px; font-size:18px}
  .rf-hero__visuel{zoom:.77}
}
@media (min-width:1440px){
  .rf-hero__texte{padding-top:180px}
  .rf-hero__h1{font-size:72px; letter-spacing:-2.52px}
  .rf-hero__chapo{width:500px; margin-top:24px; font-size:19px}
  .rf-hero__entrees{padding-top:30px}
  .rf-hero__visuel{zoom:1}
}

/* ═══════════════════════════════════════════════════════════════════════
   L'OUVERTURE QUI DÉFILE (accueil, 15 octobre 2026)
   Figma « Castflow d'abord » : l'ouverture 1543:4732 devient la carte
   1544:4836 au premier geste de défilement. Le mouvement est dans
   assets/js/accueil-ia.js, qui pose .rf-ia--anime au bureau (1100 px et
   plus, sans « réduire les animations »).
   Sans cette classe : l'ouverture, la carte et le bandeau l'un sous l'autre.
   ═══════════════════════════════════════════════════════════════════════ */
.rf-ia__cadre{display:none}
.rf-ia__agences{margin-top:22px; font-size:16px; line-height:1.4; color:var(--rf-gris)}
.rf-ia__agences a{color:var(--rf-encre); font-weight:500; text-decoration:underline; text-underline-offset:3px}
.rf-ia__agences a:hover{color:var(--rf-teal)}
.rf-ia__carte{position:relative; max-width:1248px; margin:64px 16px 0; padding:32px 24px 40px; border-radius:40px;
  background:linear-gradient(180deg, #258fba, #1f5e7b); color:#fff}
.rf-ia__texte{display:flex; flex-direction:column; gap:20px; max-width:516px}
.rf-ia__carte .rf-surtitre{color:#fff}
.rf-ia__titre{font-size:clamp(28px, 6vw, 40px); font-weight:500; line-height:1.08; letter-spacing:-.03em; color:#fff}
.rf-ia__points{display:flex; flex-direction:column; gap:10px; padding:4px 0 12px; font-size:19px; line-height:1.4; color:#fff}
.rf-ia__sticker{position:absolute; top:26px; right:18px; height:60px; width:auto}
.rf-ia__studio{display:flex; flex-direction:column; align-items:flex-start; gap:20px; max-width:1248px; margin:16px 16px 0;
  padding:32px 24px; border-radius:40px; background:#fff}
.rf-ia__studio-texte{display:flex; flex-direction:column; gap:12px}
.rf-ia__studio-titre{font-size:24px; font-weight:500; line-height:1.2; letter-spacing:-.02em; color:var(--rf-encre)}
@media (min-width:768px){
  .rf-ia__carte{margin:80px 40px 0; padding:48px}
  .rf-ia__sticker{top:44px; right:48px; height:auto}
  .rf-ia__studio{flex-direction:row; align-items:center; justify-content:space-between; margin:24px 40px 0; padding:40px 48px}
  .rf-ia__studio-titre{font-size:28px}
}
@media (min-width:1100px){
  .rf-ia__carte, .rf-ia__studio{margin-inline:auto}
}

/* — Au bureau, la scène : 1248 de large, haute d'un écran, réduite par
     --ia-s quand la place manque. Un geste lance l'animation (accueil-ia.js).
     Cotes de départ = l'ouverture en ligne (cadre 600 × 920 à 648, 120). */
.rf-ia--anime{height:100vh; min-height:640px}
.rf-ia--anime .rf-ia__colle{position:relative; height:100%; overflow:hidden}
.rf-ia--anime .rf-ia__scene{position:relative; width:1248px; height:100%; margin:0 auto;
  transform:scale(var(--ia-s, 1)); transform-origin:50% 0}
.rf-ia--anime .rf-ia__cadre{display:block; position:absolute; left:648px; top:120px; width:600px; height:920px;
  border-radius:40px; background:linear-gradient(180deg, #258fba, #1f5e7b)}
.rf-ia--anime .rf-ia__ouverture{position:absolute; inset:0; padding:0}
.rf-ia--anime .rf-ia__ouverture .rf-hero__in{display:block; max-width:none; height:100%}
.rf-ia--anime .rf-ia__heros{position:absolute; left:0; top:299px; width:600px; padding:0; align-items:flex-start; text-align:left}
.rf-ia--anime .rf-ia__heros .rf-hero__h1{font-size:72px; letter-spacing:-2.52px}
.rf-ia--anime .rf-ia__heros .rf-hero__chapo{width:500px; margin-top:24px; font-size:19px}
.rf-ia--anime .rf-ia__heros .rf-hero__entrees{padding-top:30px; justify-content:flex-start}
.rf-ia--anime .rf-ia__visuel{position:absolute; left:541px; top:120px; zoom:1; transform-origin:0 0; transition:none}
.rf-ia--anime .rf-ia__visuel .rf-hero__fond{display:none}
.rf-ia--anime .rf-ia__carte{position:absolute; left:0; top:120px; width:1248px; height:600px; max-width:none; margin:0;
  padding:48px; background:none; pointer-events:none}
.rf-ia--anime .rf-ia__sticker{top:44px; left:520px; right:auto; height:auto; transform-origin:50% 60%}
.rf-ia--anime .rf-ia__studio{position:absolute; left:0; top:744px; width:1248px; max-width:none; margin:0; pointer-events:none}
.rf-ia--anime .rf-ia__studio-cta{transform-origin:100% 50%}
/* tant que le script n'a pas dessiné la première image, la fin reste cachée */
.rf-ia--anime .rf-ia__carte .rf-ia__pas, .rf-ia--anime .rf-ia__sticker, .rf-ia--anime .rf-ia__studio{opacity:0}
.rf-ia--anime .rf-hero__carte, .rf-ia--anime .rf-ia__pas{transition:none}

/* ═══════════════════════════════════════════════════════════════════════
   LES DEUX APPLIS, CASTFLOW D'ABORD (/a-propos/, Figma 1562:73, 16 oct. 2026)
   Au bureau : la grande carte des acteurs (860 × 560) et, à côté, une colonne
   de 364 : la petite carte Castflow Studio et la carte « 0 % ». Le visuel est
   la scène de l'ouverture de l'accueil (téléphone + cartes), réduite.
   ═══════════════════════════════════════════════════════════════════════ */
.rf-apps{display:grid; grid-template-columns:1fr; gap:16px}
.rf-apps__grande{overflow:hidden; display:flex; flex-direction:column; padding:32px 24px 0; border-radius:40px;
  background:linear-gradient(180deg, #258fba, #1f5e7b); color:#fff}
.rf-apps__texte{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:20px; max-width:400px}
.rf-apps__texte .rf-surtitre{color:#fff; padding-right:72px}
.rf-apps__texte h3{font-size:clamp(28px, 6vw, 40px); font-weight:500; line-height:1.08; letter-spacing:-.03em; color:#fff}
.rf-apps__texte ul{display:flex; flex-direction:column; gap:10px; padding:4px 0 12px; font-size:18px; line-height:1.4; color:#fff}
.rf-apps__sticker{position:absolute; top:26px; right:18px; height:60px; width:auto; z-index:1}
/* la scène garde ses cotes (707 × 920) et se réduit ; la carte la rogne */
.rf-apps .rf-apps__visuel{position:relative; height:300px; margin:8px -24px 0; padding:0; pointer-events:none}
.rf-apps__visuel .rf-hero__scene{position:absolute; left:50%; top:0; zoom:.55; transform:translateX(-50%)}
.rf-apps__colonne{display:grid; grid-template-columns:1fr; gap:16px}
.rf-apps__studio, .rf-apps__zero{display:flex; flex-direction:column; gap:12px; padding:32px; border-radius:40px}
.rf-apps__studio{color:var(--rf-encre); text-decoration:none}
.rf-apps__studio-titre{font-size:24px; font-weight:500; line-height:1.2; letter-spacing:-.02em}
.rf-apps__lien{margin-top:auto; padding-top:20px; font-size:16px; font-weight:500}
.rf-apps__studio:hover .rf-apps__lien{color:var(--rf-teal)}
.rf-apps__zero{background:#e6f2f7}
.rf-apps__chiffre{font-size:64px; font-weight:500; line-height:1; letter-spacing:-.04em; color:var(--rf-teal)}
.rf-apps__zero p:last-child{font-size:17px; line-height:1.45; color:var(--rf-corps)}
@media (min-width:768px){
  .rf-apps__grande{padding:48px 48px 0}
  .rf-apps__sticker{top:44px; right:48px; height:auto}
  .rf-apps .rf-apps__visuel{height:360px; margin:16px -48px 0}
  .rf-apps__visuel .rf-hero__scene{zoom:.66}
  .rf-apps__colonne{grid-template-columns:1fr 1fr; gap:24px}
  .rf-apps__studio, .rf-apps__zero{padding:40px; min-height:268px}
  .rf-apps__studio-titre{font-size:26px}
}
@media (min-width:1100px){
  .rf-apps{grid-template-columns:minmax(0, 860fr) minmax(0, 364fr); gap:24px}
  .rf-apps__grande{display:block; height:560px; padding:48px}
  .rf-apps__texte ul{font-size:19px; max-width:330px}
  .rf-apps .rf-apps__visuel{position:absolute; left:auto; right:24px; top:174px; width:467px; height:auto; margin:0}
  .rf-apps__visuel .rf-hero__scene{position:relative; left:auto; transform:none}
  .rf-apps .rf-hero .rf-hero__carte--figu{top:470px}
  .rf-apps__colonne{grid-template-columns:1fr; grid-template-rows:1fr 1fr}
  .rf-apps__studio, .rf-apps__zero{min-height:0}
}