/* ============ fontes ============ */
  @font-face {
    font-family: "Circular Std";
    src: url("/assets/fonts/CircularStd-Book.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Circular Std";
    src: url("/assets/fonts/CircularStd-Medium.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Circular Std";
    src: url("/assets/fonts/CircularStd-Bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/assets/fonts/PlusJakartaSans-latin.woff2") format("woff2");
    font-weight: 200 800; font-style: normal; font-display: swap;
  }

  /* ============ tokens ============ */
  :root {
    --nuit: #101419;
    --blanc: #F2F5F8;
    --blanc-pur: #F2F5F8;
    --gris: #F2F5F8;
    --ink: #1C1F26;
    --ink-2: rgba(28, 31, 38, .62);
    --ink-inv: #F1F4F8;
    --ink-inv-2: rgba(241, 244, 248, .66);
    --bleu: #177CFA;
    --bleu-hover: #1269D8;
    --bleu-nuit: #57B1FB;
    --gradient: linear-gradient(162deg, #10CBFC 0%, #1394FA 50%, #262AFA 100%);
    --filet: rgba(0, 0, 0, .16);
    --filet-nuit: rgba(255, 255, 255, .18);
    --quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --quint: cubic-bezier(0.22, 1, 0.36, 1);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: "Circular Std", sans-serif;
    font-size: 17px; line-height: 25px; font-weight: 400;
    background: var(--blanc); color: var(--ink);
    padding: 12px;
  }
  ::selection { background: rgba(19, 148, 250, .15); }
  img, video, canvas { display: block; }
  img, svg, video, canvas {
    -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  }
  a { color: inherit; }

  /* ============ tuiles du catalogue ============ */
  .tuile {
    border-radius: 12px;
    padding: 96px 24px;
    margin-bottom: 12px;
    position: relative;
  }
  .tuile:last-child { margin-bottom: 0; }
  .tuile--nuit { background: var(--nuit); color: var(--ink-inv); }
  .tuile--blanc { background: var(--blanc); }
  .tuile--pur { background: var(--blanc-pur); }
  .tuile--gris { background: var(--gris); }

  .colonne { max-width: 800px; margin: 0 auto; }
  .large { max-width: 1264px; margin: 0 auto; }
  .centre { text-align: center; }
  .corps { max-width: 65ch; }
  .centre > .corps { margin-left: auto; margin-right: auto; text-align: left; }
  .muet { color: var(--ink-2); }
  .tuile--nuit .muet { color: var(--ink-inv-2); }

  h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.05; font-weight: 500; letter-spacing: -0.028em; }
  h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.07; font-weight: 500; letter-spacing: -0.03em; }
  h3 { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.02em; }
  .sous-titre { font-size: 22px; line-height: 30px; }

  .e-16 { margin-top: 16px; }
  .e-24 { margin-top: 24px; }
  .e-32 { margin-top: 32px; }
  .e-48 { margin-top: 48px; }
  .e-64 { margin-top: 64px; }

  /* ============ plaque d'inventaire ============ */
  .plaque {
    display: flex; justify-content: space-between; align-items: flex-start;
    font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: -0.5px;
    border-top: 1px solid var(--filet);
    padding-top: 10px; margin-top: 96px;
  }
  .tuile--nuit .plaque { border-top-color: var(--filet-nuit); }
  .plaque .fin { display: flex; gap: clamp(36px, 12vw, 160px); }
  .plaque .credit { display: flex; flex-direction: column; text-align: left; }
  .plaque .credit span:last-child { color: var(--ink-2); }
  .tuile--nuit .plaque .credit span:last-child { color: var(--ink-inv-2); }
  .losange {
    display: inline-block; width: 6px; height: 6px;
    background: var(--gradient); transform: rotate(45deg);
    margin-right: 8px;
  }

  /* ============ pilules ============ */
  .pilules { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .pilule {
    display: inline-flex; align-items: center;
    font-size: 17px; line-height: 1; font-weight: 400;
    padding: 11px 21px; border-radius: 980px;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: background-color 200ms var(--quart), border-color 200ms var(--quart);
  }
  .pilule--pleine { background: var(--bleu); color: #fff; }
  .pilule--pleine:hover { background: var(--bleu-hover); }
  .pilule--outline { border-color: var(--bleu); color: var(--bleu); background: transparent; }
  .pilule--outline:hover { background: rgba(28, 31, 38, .06); }
  .tuile--nuit .pilule--outline { border-color: var(--bleu-nuit); color: var(--bleu-nuit); }
  .tuile--nuit .pilule--outline:hover { background: rgba(241, 244, 248, .08); }

  /* ============ montage flou/net ============ */
  .montage {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 5px; height: 452px; background: #e8e8e8;
  }
  .tuile--nuit .montage { background: transparent; }
  .montage .aura {
    position: absolute; inset: -5%; width: 110%; height: 110%;
    object-fit: cover; filter: blur(8px); opacity: .95;
  }
  .montage--douce .aura { opacity: .6; }
  .montage .fenetre {
    position: absolute; z-index: 2; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 432px; max-width: 76%; aspect-ratio: 16 / 9;
    border-radius: 5px; overflow: hidden;
  }
  .montage .fenetre img { width: 100%; height: 100%; object-fit: cover; }
  .montage--pano .fenetre { width: 560px; aspect-ratio: 21 / 9; }
  .montage--portrait { height: 560px; }
  .montage--portrait .fenetre { width: 280px; aspect-ratio: 1122 / 1402; }
  .montage--etape { height: 300px; }
  .montage--etape .fenetre { width: 320px; max-width: 82%; }

  /* ============ nav réelle (celle du hero Figma, fixée) ============ */
  /* à l'arrêt en haut : les éléments sont posés à leurs coordonnées Figma,
     sans fond. Dès qu'on scrolle : barre de verre compacte, filet bas,
     thème clair/sombre selon la section traversée. */
  .hnav {
    position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 100;
    color: #161617;
    font-family: "Plus Jakarta Sans", "Circular Std", sans-serif;
    transition: color 350ms ease;
  }
  .hnav::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 60px;
    background: rgba(251, 252, 254, 0);
    border-bottom: 1px solid rgba(22, 22, 23, 0);
    -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
    opacity: 0; pointer-events: none;
    transition: opacity 350ms ease, background-color 350ms ease, border-color 350ms ease;
  }
  html.defile .hnav::before {
    opacity: 1;
    background: rgba(242, 245, 248, .82);
    border-bottom-color: rgba(22, 22, 23, .08);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  html.defile[data-nav="nuit"] .hnav { color: #F1F4F8; }
  html.defile[data-nav="nuit"] .hnav::before {
    background: rgba(16, 20, 25, .72);
    border-bottom-color: rgba(255, 255, 255, .10);
  }
  .hnav a { position: absolute; color: inherit; text-decoration: none; }
  .hn-logo {
    left: 4.40%; top: 6.39svh;
    display: block;
    transition: top 350ms var(--quart);
  }
  .hn-logo img {
    display: block; height: 4.0807svh; width: auto;
    transition: filter 300ms ease;
  }
  .hn-lien {
    font-size: 1.0685svh; line-height: 144.8%; font-weight: 500; letter-spacing: 0.10em;
    top: 9.0833svh; opacity: 1;
    transition: top 350ms var(--quart), font-size 350ms var(--quart), opacity 200ms ease;
  }
  .hn-lien:hover { opacity: .6; }
  .hn-1 { left: 78.9953%; }
  .hn-2 { left: 85.4747%; }
  .hn-3 { left: 92.6112%; }
  html.defile .hn-logo { top: 17px; }
  html.defile .hn-logo img { height: 26px; }
  html.defile[data-nav="nuit"] .hn-logo img { filter: invert(1); }
  html.defile .hn-lien { top: 23px; font-size: 12px; }
  @media (max-width: 700px) { .hn-1, .hn-2 { display: none; } }

  /* ============ (00) hero Figma ============ */
  /* la frame 3840x2160 EST l'écran : X en cqw (px/38.40), Y et corps de
     texte en cqh (px/21.60). Le hero occupe exactement un viewport ; sur
     du 16:9 le rendu est identique à la frame au pixel près. */
  #couverture {
    margin: -12px -12px 12px; border-radius: 0; padding: 0;
    height: 100svh; min-height: 480px;
    container-type: size;
    position: relative; overflow: hidden;
    background: #EAF0F7; color: #161617;
    font-family: "Plus Jakarta Sans", "Circular Std", sans-serif;
  }
  #couverture .fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  #couverture .fondu {
    position: absolute; left: 0; right: 0; bottom: 0; height: 12cqh; z-index: 1;
    background: linear-gradient(180deg, rgba(242, 245, 248, 0) 0%, #F2F5F8 96%);
  }
  #couverture .el { position: absolute; z-index: 2; margin: 0; color: #161617; text-decoration: none; }
  #couverture .h-soc {
    font-size: 1.0685cqh; line-height: 144.8%; font-weight: 500; letter-spacing: 0.10em;
    transition: opacity 200ms ease; opacity: 1;
  }
  #couverture .h-soc:hover { opacity: .6; }
  #couverture .h-titre {
    /* non spécifié dans les infos Figma : calé sur le screen (cap 207px frame,
       largeur 1076px frame) via les métriques réelles de la fonte */
    left: 4.70cqw; top: 35.01cqh;
    font-size: 12.611cqh; line-height: 1; font-weight: 650; letter-spacing: 0.1704em;
  }
  #couverture .h-sub {
    left: 4.7010cqw; top: 50.6116cqh;
    font-size: 2.0185cqh; line-height: 144.8%; font-weight: 300; letter-spacing: 0.19em;
  }
  #couverture .h-sub strong { font-weight: 600; }
  #couverture .h-trait { left: 4.6974cqw; top: 58.7227cqh; width: 1.75cqw; height: 0.139cqh; min-height: 1.5px; background: #161617; }
  #couverture .h-para { left: 4.6987cqw; top: 62.2532cqh; font-size: 1.2106cqh; line-height: 144.8%; font-weight: 400; }
  #couverture .h-cta {
    left: 4.6974cqw; top: 72.0514cqh;
    font-size: 1.1014cqh; line-height: 144.8%; font-weight: 500; letter-spacing: 0.15em;
    display: inline-flex; gap: 1.0cqw; align-items: flex-start;
    /* hitbox stable qui couvre aussi le trait dessous */
    padding-bottom: 1.2cqh;
  }
  #couverture .h-cta::after {
    content: ""; position: absolute; left: 0; right: 0; top: 1.8579cqh;
    height: 0.139cqh; min-height: 1.5px; background: #161617;
  }
  #couverture .h-cta .fleche-boite {
    letter-spacing: 0; font-size: 1.40cqh; line-height: 1; transform: translateY(-8%);
    display: inline-block; overflow: hidden;
  }
  #couverture .h-cta .fleche-rail { position: relative; display: inline-flex; }
  #couverture .h-cta .fleche-rail .f2 { position: absolute; left: -130%; top: 0; }
  @keyframes cta-vol { to { transform: translateX(130%); } }
  #couverture .h-cta:hover .fleche-rail { animation: cta-vol 550ms var(--quint) forwards; }
  @keyframes cta-ligne {
    0% { transform: scaleX(1); transform-origin: right; }
    45% { transform: scaleX(0); transform-origin: right; }
    55% { transform: scaleX(0); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
  }
  #couverture .h-cta:hover::after { animation: cta-ligne 700ms var(--quint); }
  #couverture .h-socs {
    position: absolute; z-index: 2;
    left: 4.7042cqw; top: 92.0602cqh;
    display: flex; gap: 2.5cqw;
  }
  #couverture .h-socs .h-soc { position: static; }

  /* ============ (01) à propos : frame Figma 1260.43x709.37 = l'écran ============ */
  /* X en % (px/12.6043), Y et tailles en svh (px/7.0937), origine canvas (174.5/1564.3, 138) soustraite */
  .apropos {
    position: relative; overflow: hidden;
    height: 100svh; min-height: 480px;
    margin: clamp(48px, 9svh, 128px) -12px clamp(40px, 8svh, 112px);
    background: #F2F5F8;
    font-family: "Plus Jakarta Sans", "Circular Std", sans-serif;
  }
  .ap-item { display: contents; }
  .ap-fond-cadre {
    position: absolute; inset: 0; overflow: hidden;
    /* masque en coordonnées de SECTION : 0 % d'image au bord haut, pleine à 16 % de l'écran */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 97%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 97%);
  }
  .ap-fond {
    position: absolute; left: 0; top: -5.5289svh;
    width: 100%; height: 127.438svh; object-fit: cover;
  }
  .ap-el { position: absolute; margin: 0; }
  .ap-titre {
    left: 4.3517%; top: 19.462svh;
    font-family: "Circular Std", sans-serif; font-weight: 500;
    font-size: 7.3474svh; line-height: 93%; letter-spacing: -0.05em;
    color: #161617;
  }
  .ap-trait { left: 4.4025%; top: 36.411svh; width: 2.063%; height: 0.352svh; min-height: 2px; background: #177CFA; }
  .ap-intro { left: 4.3517%; top: 40.570svh; font-size: 2.1019svh; line-height: 156.2%; font-weight: 500; color: #454545; }
  .ap-ico { width: 2.8562%; height: auto; }
  .ap-ico-fleur { left: 4.4144%; top: 59.234svh; }
  .ap-ico-calque { left: 4.4073%; top: 75.334svh; }
  .ap-sep { left: 8.6074%; width: 1px; height: 6.344svh; background: #D6D8DD; }
  .ap-sep-1 { top: 56.935svh; }
  .ap-sep-2 { top: 72.380svh; }
  .ap-label {
    font-family: "Circular Std", sans-serif; font-weight: 500;
    font-size: 1.7171svh; line-height: 156.2%; color: #161617;
  }
  .ap-label-1 { left: 10.1973%; top: 56.969svh; }
  .ap-label-2 { left: 10.3845%; top: 71.689svh; }
  .ap-note { font-size: 1.4562svh; line-height: 165.5%; font-weight: 500; color: #787878; }
  .ap-note-1 { left: 10.1640%; top: 60.386svh; }
  .ap-note-2 { left: 10.1640%; top: 78.807svh; }
  .ap-kicker {
    left: 4.2081%; top: 94.382svh;
    font-family: "Circular Std", sans-serif; font-weight: 500;
    font-size: 1.2405svh; line-height: 156.2%; letter-spacing: 0.25em;
    color: #177CFA;
  }


  /* ============ apparitions ============ */
  .rev {
    opacity: 0; transform: translateY(14px);
    transition: opacity 600ms var(--quint), transform 600ms var(--quint);
    transition-delay: var(--rd, 0ms);
    will-change: opacity, transform;
  }
  .rev--o { transform: none; }
  .vu .rev { opacity: 1; transform: none; }

  /* ============ (02) méthode : frame Figma 1263.56x711.01 = l'écran ============ */
  /* X en % (px/12.6356), Y et tailles en svh (px/7.1101), pitch de cartes 340.2 */
  .methode {
    position: relative; overflow: hidden;
    height: 100svh; min-height: 480px;
    margin: 0 -12px 12px;
    background: #0B0E12;
    color: #FAFBFF;
    font-family: "Plus Jakarta Sans", "Circular Std", sans-serif;
  }
  .me-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .me-el { position: absolute; margin: 0; }
  .me-titre {
    left: 0; right: 0; top: 13.343svh; text-align: center;
    font-family: "Circular Std", sans-serif; font-weight: 500;
    font-size: 7.4324svh; line-height: 1.1;
    color: #FAFBFF;
  }
  .me-titre .point { color: #177CFA; }
  .me-sub {
    left: 0; right: 0; top: 22.344svh; text-align: center;
    font-size: 1.9423svh; line-height: 143.8%; letter-spacing: -0.023em;
    font-weight: 400; color: #A09E9E;
  }
  .me-cartes {
    left: 10.2884%; right: 10.3406%; top: 31.519svh; height: 50.492svh;
    display: flex; gap: 1.7614%;
  }
  .me-carte {
    position: relative; flex: 1;
    background: #171B1E;
    border: 0.64px solid #343638;
    border-radius: 0.6474vw;
  }
  .me-photo {
    position: absolute; left: 3.3798%; right: 3.3798%; top: 1.814svh; height: 29.254svh;
    overflow: hidden; border-radius: 0.4654vw;
  }
  .me-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .me-ligne {
    position: absolute; left: 4.186%; right: 4.186%; top: 33.394svh; margin: 0;
    display: flex; align-items: baseline;
    font-family: "Circular Std", sans-serif; font-weight: 400;
  }
  .me-num, .me-tiret {
    font-size: 1.5584svh; line-height: 143.8%; color: #177CFA;
  }
  /* largeurs en % de la rangée (91.628% de la carte) pour retomber sur les X Figma */
  .me-num { width: 4.8866%; flex: none; }
  .me-tiret { width: 3.1776%; flex: none; }
  .me-cat {
    font-size: 1.2869svh; line-height: 143.8%; color: #B2B2B4;
    text-transform: uppercase; white-space: nowrap;
  }
  .me-cat .chiffre { font-size: 1.0623em; }
  .me-h {
    position: absolute; left: 4.186%; right: 4.186%; top: 36.371svh;
    font-family: "Circular Std", sans-serif; font-weight: 400;
    font-size: 2.5921svh; line-height: 143.8%; color: #FAFBFF;
  }
  .me-p {
    position: absolute; left: 4.186%; right: 4.186%; top: 40.174svh;
    font-size: 1.5091svh; line-height: 165%; letter-spacing: -0.023em;
    font-weight: 400; color: #A09E9E;
  }
  /* comparateur avant/après (carte 03) : le trait se déplace et révèle le fil de fer */
  @property --pos { syntax: "<percentage>"; inherits: true; initial-value: 47%; }
  .me-slider { position: relative; width: 100%; height: 100%; --pos: 47%; cursor: ew-resize; touch-action: none; }
  /* invite : le trait balaye doucement tant que personne n'a touché */
  .me-slider:not(.actif) { animation: me-glisse 3.4s ease-in-out 1.2s infinite; }
  @keyframes me-glisse {
    0%, 100% { --pos: 47%; }
    50% { --pos: 56%; }
  }
  .me-slider .poignee {
    position: absolute; left: var(--pos); top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(24px, 4.1svh, 34px); height: clamp(24px, 4.1svh, 34px);
    border-radius: 50%; background: #FFFFFF;
    display: flex; align-items: center; justify-content: center; gap: 3px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
    pointer-events: none;
  }
  .me-slider .poignee svg { width: 38%; height: auto; display: block; }
  .me-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .me-slider .avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .me-slider .barre {
    position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
    background: #FFFFFF; transform: translateX(-50%);
  }
  .me-slider:focus-visible { outline: 1px solid #177CFA; outline-offset: 2px; }

  /* ============ (03) RedLine, scène épinglée ============ */
  /* la scène (100svh) ne bouge pas pendant la traversée : les cartes montent
     par transforms amortis, donc aucun cran de molette n'est visible.
     Chrome : frame Figma 1261.99x710.66, X en vw (px/12.6199), Y en svh (px/7.1066) */
  #redline { margin: 0 -12px 12px; padding: 0; border-radius: 0; }
  .rl-layout { position: relative; width: 100%; height: calc(100svh + 1306px); }
  .rl-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .rl-chrome { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .rl-chrome a { pointer-events: auto; }
  .rl-titre {
    position: absolute; left: 4.4272vw; top: 40.149svh; margin: 0;
    font-family: "Circular Std", sans-serif; font-weight: 500;
    font-size: 8.4190svh; line-height: 93%; letter-spacing: -0.05em;
    color: #161617;
  }
  /* tailles internes en svh (un seul axe) : les blocs gardent leurs proportions
     sur tous les écrans ; seuls les ancrages X restent en vw */
  .rl-badge {
    position: absolute; left: 4.2378vw; top: 50.272svh;
    width: max-content; height: 3.6107svh; box-sizing: border-box;
    border: 0.76px solid #177CFA; border-radius: 980px;
    display: flex; align-items: center; gap: 1.5620svh;
    padding: 0 1.4494svh 0 2.1052svh;
    text-decoration: none;
  }
  .rl-badge span {
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
    font-size: 1.5070svh; line-height: 1; letter-spacing: 0.14em;
    color: #177CFA; white-space: nowrap;
  }
  .rl-badge svg { width: 1.0062svh; height: auto; flex: none; }
  .rl-sous {
    position: absolute; left: 4.4232vw; top: 56.708svh; margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
    font-size: 1.5844svh; line-height: 156.2%;
    color: #454545; white-space: nowrap;
  }
  .rl-explorer {
    position: absolute; left: 79.7534vw; top: 50.109svh;
    text-decoration: none;
    display: flex; align-items: center;
  }
  .rl-explorer .cercle { display: block; height: 4.2214svh; width: auto; }
  .rl-explorer .trait {
    width: 1.4774svh; height: 1.5px; background: #177CFA;
    margin: 0 0.8288svh 0 1.1454svh; flex: none;
  }
  .rl-explorer .texte {
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
    font-size: 1.5070svh; line-height: 156.2%; letter-spacing: 0.14em;
    color: #177CFA; white-space: nowrap;
  }
  /* badge non cliquable : plus de retour au survol */
  /* explorer : la flèche décolle du cercle et revient par le coin opposé,
     le cercle se dilate, le tiret s'étire et pousse le texte */
  .rl-fleche { transform-box: fill-box; transform-origin: center; }
  @keyframes rl-vol {
    0% { transform: translate(0, 0); opacity: 1; }
    45% { transform: translate(10px, -10px); opacity: 0; }
    55% { transform: translate(-10px, 10px); opacity: 0; }
    100% { transform: translate(0, 0); opacity: 1; }
  }
  .rl-explorer:hover .rl-fleche { animation: rl-vol 600ms var(--quint); }
  /* le scale porte sur le svg entier : rien n'est rogné, la flèche reste clippée dedans */
  .rl-explorer .cercle { transition: transform 500ms var(--quint); }
  .rl-explorer:hover .cercle { transform: scale(1.08); }
  .rl-explorer .trait { transition: width 500ms var(--quint); }
  .rl-explorer:hover .trait { width: 2.4svh; }
  .rl-stack { position: absolute; inset: 0; }
  .rl-wrap {
    position: absolute; top: 0; left: calc(50% - 400px);
    width: 800px; height: 452px;
    will-change: transform;
  }
  .rl-wrap:nth-child(1) { z-index: 1; }
  .rl-wrap:nth-child(2) { z-index: 2; }
  .rl-wrap:nth-child(3) { z-index: 3; }
  .rl-wrap:nth-child(4) { z-index: 4; }
  .rl-wrap:nth-child(4) .rl-card { background: var(--blanc-pur); }
  .rl-card { width: 100%; height: 100%; transform-origin: center center; }
  .rl-media { position: relative; isolation: isolate; width: 100%; height: 452px; overflow: hidden; border-radius: 5px; background: #e8e8e8; }
  .rl-media .aura { position: absolute; inset: -5%; width: 110%; height: 110%; max-width: none; object-fit: cover; opacity: .95; filter: blur(8px); pointer-events: none; }
  .rl-fenetre {
    position: absolute; z-index: 2; top: 50%; left: 50%;
    width: 432px; height: 256px; transform: translate(-50%, -50%);
    border-radius: 5px; overflow: hidden; pointer-events: none;
  }
  .rl-fenetre img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 1199.98px) {
    .rl-layout { height: auto; }
    .rl-stage { position: static; height: auto; overflow: visible; padding: 64px 18px; }
    .rl-chrome { position: static; inset: auto; }
    .rl-chrome > * { position: static; }
    .rl-titre { font-size: 44px; }
    .rl-badge { display: inline-flex; width: max-content; height: auto; gap: 10px; padding: 8px 14px; margin-top: 16px; }
    .rl-badge span { font-size: 11px; }
    .rl-badge svg { width: 8px; }
    .rl-sous { margin-top: 12px; font-size: 13px; white-space: normal; }
    .rl-explorer { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 40px; }
    .rl-explorer .cercle { height: 30px; width: auto; }
    .rl-explorer .trait { width: 12px; height: 1.5px; margin: 0; }
    .rl-explorer .texte { font-size: 11px; }
    .rl-stack { position: static; inset: auto; display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
    .rl-wrap { position: static; left: auto; width: min(800px, 100%); height: auto; transform: none !important; }
    .rl-wrap .rl-card { transform: none !important; }
    .rl-media { height: min(452px, 72vw); }
    .rl-fenetre { width: min(432px, 76%); height: auto; aspect-ratio: 432 / 256; }
  }
  @media (max-width: 810px) {
    .rl-titre { font-size: 36px; }
  }

  /* ============ (04) construction : frame Figma 1958.45x1102.21 = l'écran ============ */
  /* X en % (px/19.5845), Y et tailles en svh (px/11.0221), origines canvas 53812.07 et 55838.74 / -1925.67 */
  .constru {
    position: relative; overflow: hidden;
    height: 100svh; min-height: 480px;
    margin: 0 -12px clamp(48px, 9svh, 128px);
    background: #F2F5F8;
    font-family: "Plus Jakarta Sans", "Circular Std", sans-serif;
  }
  .co-el { position: absolute; margin: 0; }
  .co-row { display: contents; }
  .co-titre {
    left: 0; right: 0; text-align: center; top: 8.741svh;
    font-family: "Circular Std", sans-serif; font-weight: 500;
    font-size: 7.1075svh; line-height: 93%; letter-spacing: -0.05em;
    color: #161617;
  }
  .co-trait {
    left: 50%; transform: translateX(-50%); top: 16.872svh;
    width: 1.6237%; height: 0.181svh; min-height: 1.5px;
    background: #177CFA;
  }
  .co-sub {
    left: 0; right: 0; text-align: center; top: 18.893svh;
    font-size: 1.5342svh; line-height: 146.7%; font-weight: 500;
    color: #6C6C6C;
  }
  .co-photo {
    left: 15.0119%; top: 24.253svh;
    width: 70.0275%; height: 42.278svh;
    border-radius: 2.5404svh; overflow: hidden;
  }
  .co-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .co-sep { left: 15.0119%; width: 70.0275%; height: 1px; background: #D9DEE4; }
  .co-sep.s1 { top: 68.364svh; }
  .co-sep.s2 { top: 74.989svh; }
  .co-sep.s3 { top: 81.613svh; }
  .co-sep.s4 { top: 88.238svh; }
  .co-logo { left: 15.9494%; height: 3.3569svh; width: auto; }
  .co-logo.l1 { top: 70.108svh; }
  .co-logo.l2 { top: 76.733svh; }
  .co-logo.l3 { top: 83.358svh; }
  .co-logo.l4 { top: 89.983svh; }
  .co-h {
    left: 19.7248%;
    font-family: "Circular Std", sans-serif; font-weight: 500;
    font-size: 2.5485svh; line-height: 93%; letter-spacing: -0.05em;
    color: #161617;
  }
  .co-h.h1 { top: 70.788svh; }
  .co-h.h2 { top: 77.413svh; }
  .co-h.h3 { top: 84.038svh; }
  .co-h.h4 { top: 90.663svh; }
  .co-p {
    left: 41.0007%;
    font-size: 1.4743svh; line-height: 146.7%; font-weight: 500;
    color: #6C6C6C;
  }
  .co-p.p1 { top: 71.524svh; }
  .co-p.p2 { top: 78.149svh; }
  .co-p.p3 { top: 84.774svh; }
  .co-p.p4 { top: 91.399svh; }
  .co-num {
    left: 82.3153%;
    font-family: "Circular Std", sans-serif; font-weight: 500;
    font-size: 2.5485svh; line-height: 93%; letter-spacing: -0.05em;
    color: #161617;
  }
  .co-num.n1 { top: 70.788svh; }
  .co-num.n2 { top: 77.413svh; }
  .co-num.n3 { top: 84.038svh; }
  .co-num.n4 { top: 90.663svh; }

  /* ============ (05) manifeste : frame Figma 1672x941 = l'écran ============ */
  /* X en % (px/16.72), Y et tailles en svh (px/9.41), origine spec 61066.6 / -1821.83 */
  .manif {
    position: relative; overflow: hidden;
    height: 100svh; min-height: 480px;
    margin: 0 -12px 12px;
    background: #070C24;
    font-family: "Circular Std", sans-serif;
  }
  .ma-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ma-el { position: absolute; margin: 0; }
  .ma-kicker {
    left: 10.827%; top: 21.549svh;
    font-weight: 500; font-size: 1.7981svh; line-height: 93%; letter-spacing: 0.29em;
    color: #177CFA;
  }
  .ma-citation {
    left: 10.570%; top: 30.697svh;
    font-weight: 500; font-size: 11.188svh; line-height: 93%; letter-spacing: -0.05em;
    color: #FAFBFF;
  }
  .ma-sign {
    left: 10.754%; top: 76.781svh;
    display: flex; align-items: baseline;
    color: #FAFBFF;
  }
  .ma-sign .atlas { font-weight: 500; font-size: 2.2827svh; line-height: 93%; letter-spacing: -0.05em; }
  .ma-sign .point {
    width: 0.797svh; height: 0.797svh; border-radius: 50%;
    background: #177CFA; align-self: center; margin-left: 1.063svh; flex: none;
  }
  .ma-sign .texte {
    margin-left: 1.987svh;
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 400;
    font-size: 2.1764svh; line-height: 93%; letter-spacing: -0.04em;
  }

  /* ============ (06) questions : frame Figma 1672x941 = l'écran ============ */
  /* X en % (px/16.72), Y et tailles en svh (px/9.41), origine spec 65723.4 / -1816.99 ;
     le fond (monolithes + filet bas) est dans l'image, export 2x pleine frame */
  .quest {
    position: relative; overflow: hidden;
    height: 100svh; min-height: 480px;
    margin: 0 -12px 12px;
    background: #F2F5F8;
    font-family: "Circular Std", sans-serif;
  }
  .qu-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .qu-el, .qu-item { position: absolute; margin: 0; }
  .qu-kicker {
    left: 7.458%; top: 24.148svh;
    font-weight: 500; font-size: 1.3199svh; line-height: 146.7%; letter-spacing: 0.41em;
    color: #6C6C6C;
  }
  .qu-titre {
    left: 7.494%; top: 28.561svh;
    font-weight: 700; font-size: 10.745svh; line-height: 93%; letter-spacing: -0.05em;
    color: #161617;
  }
  .qu-sub {
    left: 7.685%; top: 50.711svh;
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
    font-size: 2.1870svh; line-height: 146.7%;
    color: #6C6C6C;
  }
  .qu-cta {
    left: 7.685%; top: 60.868svh;
    display: flex; align-items: center;
    text-decoration: none;
  }
  .qu-fleche-boite { width: 1.8066svh; overflow: hidden; display: inline-block; flex: none; }
  .qu-fleche-rail { position: relative; display: inline-flex; }
  .qu-cta .fleche { width: 1.8066svh; height: auto; display: block; }
  .qu-cta .f2 { position: absolute; left: -140%; top: 0; }
  @keyframes qu-vol { to { transform: translateX(140%); } }
  .qu-cta:hover .qu-fleche-rail { animation: qu-vol 550ms var(--quint) forwards; }
  .qu-cta > span:last-child {
    margin-left: 2.306svh;
    font-weight: 500; font-size: 1.3199svh; line-height: 146.7%; letter-spacing: 0.13em;
    color: #6C6C6C;
    transition: color 300ms ease, transform 500ms var(--quint);
  }
  .qu-cta:hover > span:last-child { color: #161617; transform: translateX(0.35svh); }
  .qu-item { display: flex; align-items: center; top: 72.029svh; }
  .qu-item.i1 { left: 7.4767%; }
  .qu-item.i2 { left: 22.7255%; }
  .qu-item.i3 { left: 37.9186%; }
  .qu-ico { height: 3.6132svh; width: 3.6132svh; object-fit: contain; flex: none; }
  .qu-ico--double { position: relative; display: block; }
  .qu-ico--double .cadre { width: 100%; height: 100%; display: block; }
  .qu-ico--double .pupille {
    position: absolute; inset: 0; margin: auto;
    width: 85.3%; height: 85.3%;
  }
  .qu-txt { margin-left: 2.7205svh; }
  .qu-lab { margin: 0; font-weight: 400; font-size: 1.3199svh; line-height: 146.7%; color: #161617; }
  .qu-slab { margin: 0.117svh 0 0; font-weight: 400; font-size: 1.3199svh; line-height: 146.7%; color: #939393; }
  /* centrés sur l'axe de la rangée d'items (centre 73.965svh) */
  .qu-vsep { left: 19.7518%; top: 71.415svh; width: 1px; height: 5.101svh; background: #D2D2D2; }
  .qu-vsep.v2 { left: 34.9133%; }

  /* ============ (07) footer : grille propre, rythme 8px ============ */
  /* marges latérales alignées sur la grille du site (4.83vw), tous les
     écarts verticaux sur l'échelle 8/16/24/32/40/48/56 */
  .pied-page {
    position: relative;
    margin: 0 -12px -12px;
    padding: 48px 4.83vw 24px;
    background: #F2F5F8;
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
  }
  .pp-trait { height: 1px; background: #D9D9D9; border: none; margin: 0; }
  .pp-grille {
    display: grid;
    grid-template-columns: minmax(200px, 1.1fr) 1fr 1.3fr 1fr;
    margin-top: 40px;
  }
  .pp-marque { padding-right: 48px; }
  .pp-logo { width: 96px; height: auto; display: block; }
  .pp-slogan { margin: 16px 0 0; font-size: 14px; line-height: 1.448; color: #6C6C6C; }
  .pp-col { border-left: 1px solid #D9D9D9; padding-left: 48px; }
  .pp-titre { margin: 0; font-size: 12px; line-height: 1.448; letter-spacing: 0.17em; color: #161617; }
  .pp-liste { list-style: none; margin: 16px 0 0; padding: 0; }
  .pp-liste li { font-size: 14px; line-height: 1.448; color: #6C6C6C; }
  .pp-liste li + li { margin-top: 8px; }
  .pp-liste a { color: inherit; text-decoration: none; transition: color 200ms ease; }
  .pp-liste a:hover { color: #161617; }
  .pp-grille + .pp-trait { margin-top: 56px; }
  .pp-legal {
    display: flex; gap: 48px;
    margin: 16px 0 0;
    font-size: 12px; line-height: 1.448; color: #6C6C6C;
  }
  .pp-legal .c { font-size: 13px; }

  /* ============ divers ============ */
  @media (max-width: 810px) {
    .tuile { padding: 48px 18px; }
    .plaque { margin-top: 64px; }
  }

  /* ============ adaptation petits écrans : les compos frame passent en flux ============ */
  @media (max-width: 900px) {
    /* hero */
    #couverture {
      height: auto; min-height: 100svh;
      container-type: normal;
      display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
      padding: 96px 20px 40px;
    }
    #couverture .el { position: static; }
    #couverture .h-titre { font-size: clamp(56px, 16vw, 104px); letter-spacing: 0.13em; }
    #couverture .h-sub { margin-top: 14px; font-size: 14px; letter-spacing: 0.16em; }
    #couverture .h-trait { margin-top: 16px; width: 26px; height: 2px; }
    #couverture .h-para { margin-top: 18px; font-size: 13px; }
    #couverture .h-cta { margin-top: 26px; font-size: 12px; }
    #couverture .h-cta::after { top: 22px; height: 1.5px; }
    #couverture .h-cta .fleche { font-size: 16px; }
    #couverture .h-socs { position: static; display: flex; gap: 24px; margin-top: 40px; }
    #couverture .h-soc { font-size: 11px; }
    #couverture .fondu { height: 90px; }

    /* à propos */
    .apropos {
      height: auto; min-height: 0;
      display: flex; flex-direction: column; align-items: flex-start;
      padding: 64px 20px 48px;
      margin-top: 48px;
    }
    .apropos .ap-el { position: static; }
    .ap-kicker { order: -1; margin-bottom: 16px; font-size: 11px; }
    .ap-titre { font-size: clamp(30px, 8.6vw, 44px); }
    .ap-trait { margin-top: 16px; width: 26px; height: 2px; }
    .ap-intro { margin-top: 18px; font-size: 15px; }
    .ap-fond-cadre {
      position: static; order: 1; inset: auto; overflow: visible;
      width: calc(100% + 40px); margin: 28px -20px 2px;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
    }
    .ap-fond { position: static; width: 100%; height: auto; }
    .ap-item {
      order: 2;
      display: grid; grid-template-columns: 36px 1fr;
      column-gap: 16px; row-gap: 4px;
      margin-top: 28px;
    }
    .ap-item .ap-ico { grid-row: 1 / span 2; width: 36px; align-self: start; }
    .ap-item .ap-sep { display: none; }
    .ap-item .ap-label { font-size: 12px; }
    .ap-item .ap-note { font-size: 11.5px; }

    /* méthode */
    .methode { height: auto; min-height: 0; padding: 64px 20px 56px; }
    .methode .me-el { position: static; }
    .me-titre { font-size: 34px; }
    .me-sub { margin-top: 12px; font-size: 14px; }
    .me-cartes { margin-top: 36px; height: auto; flex-direction: column; gap: 16px; }
    .me-carte { padding: 12px 14px 22px; border-radius: 8px; }
    .me-carte > * { position: static; }
    .me-photo { height: 220px; margin-bottom: 14px; border-radius: 6px; }
    .me-ligne { display: flex; align-items: baseline; gap: 7px; }
    .me-num, .me-tiret { width: auto; font-size: 11px; }
    .me-cat { font-size: 10px; }
    .me-h { margin-top: 8px; font-size: 17px; }
    .me-p { margin-top: 8px; font-size: 12px; }

    /* construction */
    .constru { height: auto; min-height: 0; padding: 64px 20px 48px; display: flex; flex-direction: column; }
    .constru .co-el { position: static; }
    .co-titre { font-size: clamp(30px, 8.6vw, 44px); }
    .co-trait { margin: 16px auto 0; width: 26px; height: 2px; transform: none; }
    .co-sub { margin-top: 14px; font-size: 13px; }
    .co-photo { width: 100%; height: auto; margin-top: 28px; border-radius: 14px; }
    .co-row {
      display: grid; grid-template-columns: 30px 1fr auto;
      column-gap: 12px; row-gap: 4px; align-items: start;
      padding: 18px 0; border-bottom: 1px solid #D9DEE4;
    }
    .constru .co-row:first-of-type { border-top: 1px solid #D9DEE4; margin-top: 26px; }
    .co-row .co-sep { display: none; }
    .co-logo { height: 26px; width: auto; grid-row: 1 / span 2; }
    .co-h { font-size: 17px; grid-column: 2; }
    .co-p { font-size: 12px; grid-column: 2; }
    .co-num { font-size: 17px; grid-column: 3; grid-row: 1; }

    /* manifeste */
    .manif { height: auto; min-height: 0; padding: 72px 20px 64px; }
    .manif .ma-el { position: static; }
    .ma-kicker { font-size: 11px; }
    .ma-citation { margin-top: 18px; font-size: clamp(34px, 9vw, 52px); }
    .ma-sign { margin-top: 28px; flex-wrap: wrap; }
    .ma-sign .atlas { font-size: 15px; }
    .ma-sign .point { width: 6px; height: 6px; margin-left: 8px; }
    .ma-sign .texte { margin-left: 12px; font-size: 13px; }

    /* questions */
    .quest { height: auto; min-height: 0; padding: 72px 20px 56px; }
    .quest .qu-el, .quest .qu-item { position: static; }
    .qu-fond { position: absolute; }
    .qu-kicker { font-size: 11px; }
    .qu-titre { margin-top: 14px; font-size: clamp(38px, 11vw, 56px); }
    .qu-sub { margin-top: 14px; font-size: 14px; }
    .qu-cta { margin-top: 22px; width: max-content; }
    .qu-fleche-boite, .qu-cta .fleche { width: 15px; }
    .qu-cta > span:last-child { margin-left: 12px; font-size: 11px; }
    .qu-item { margin-top: 26px; }
    .qu-ico { height: 28px; width: 28px; }
    .qu-txt { margin-left: 14px; }
    .qu-lab, .qu-slab { font-size: 12px; }
    .qu-vsep { display: none; }

    /* footer */
    .pied-page { padding: 40px 20px 24px; }
    .pp-grille { grid-template-columns: 1fr; margin-top: 32px; }
    .pp-marque { padding-right: 0; }
    .pp-col { border-left: none; padding-left: 0; margin-top: 32px; }
    .pp-logo { width: 84px; }
    .pp-grille + .pp-trait { margin-top: 40px; }
    .pp-legal { gap: 32px; }

    /* nav */
    .hn-logo { left: 20px; top: 18px; }
    .hn-logo img { height: 28px; }
    .hn-3 { left: auto; right: 20px; top: 26px; font-size: 10px; }
  }

  /* ============ garde mobile : le site se visite sur ordinateur ============ */
  .garde-mobile { display: none; }
  @media (max-width: 900px) {
    html, body { overflow: hidden !important; height: 100%; }
    .garde-mobile {
      display: block;
      position: fixed; inset: 0; z-index: 9999;
      background: #F2F5F8;
      color: #161617; font-family: "Circular Std", sans-serif;
      overflow: hidden;
    }
    .gm-fond {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: 76% 100%;
    }
    .gm-voile {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(242, 245, 248, .85) 0%, rgba(242, 245, 248, .5) 32%, rgba(242, 245, 248, .15) 55%, rgba(242, 245, 248, 0) 75%);
      pointer-events: none;
    }
    /* maquette 945x1633 = l'écran : X et tailles en vw (px/9.45), Y en svh (px/16.33) */
    .garde-mobile > *:not(.gm-fond):not(.gm-voile) { position: absolute; margin: 0; }
    .gm-logo {
      left: 0; right: 0; top: 5.21svh;
      display: flex; flex-direction: column; align-items: center;
      animation: gm-entre 700ms var(--quint) both;
    }
    .gm-logo img { height: 8.47vw; width: auto; }
    .gm-kicker {
      left: 8.25vw; top: 25.41svh;
      display: flex; align-items: center; gap: 3.4vw;
      font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
      font-size: 2.22vw; letter-spacing: 0.22em;
      color: #8B9DAF;
      animation: gm-entre 700ms var(--quint) 120ms both;
    }
    .gm-kicker::before { content: ""; width: 6.56vw; height: 1.5px; background: #AAB9CB; }
    .gm-titre {
      left: 8.25vw; top: 28.78svh;
      font-weight: 500; font-size: 8.68vw; line-height: 1.12; letter-spacing: -0.03em;
      animation: gm-entre 700ms var(--quint) 240ms both;
    }
    .gm-titre .bleu { color: #9DAEC6; }
    .gm-tiret {
      left: 8.25vw; top: 46.66svh;
      width: 3.6vw; height: 0.53vw; min-height: 2px; background: #161617;
      animation: gm-entre 700ms var(--quint) 330ms both;
    }
    .gm-texte {
      left: 8.25vw; top: 50.34svh; max-width: 42vw;
      font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
      font-size: 3.17vw; line-height: 1.33;
      color: #3A424B;
      animation: gm-entre 700ms var(--quint) 420ms both;
    }
    .gm-note {
      left: 8.25vw; top: 87.08svh;
      display: flex; align-items: center; gap: 2.54vw;
      font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
      font-size: 2.86vw; letter-spacing: 0.2em;
      color: #8B9DAF;
      animation: gm-entre 700ms var(--quint) 520ms both;
    }
    .gm-note svg { width: 3.7vw; height: auto; flex: none; }
    .gm-pied {
      left: 8.25vw; right: 8.25vw; top: 93.69svh; text-align: center;
      animation: gm-entre 700ms var(--quint) 600ms both;
    }
    .gm-pied::before { content: ""; display: block; height: 1px; background: rgba(22, 22, 23, .14); }
    .gm-pied p {
      margin: 1.84svh 0 0;
      font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
      font-size: 2.54vw; letter-spacing: 0.24em; color: #8B95A3;
    }
  }
  @keyframes gm-entre {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rev { opacity: 1; transform: none; transition: none; }
    #couverture .h-cta:hover .fleche-rail, #couverture .h-cta:hover::after,
    .rl-explorer:hover .rl-fleche, .qu-cta:hover .qu-fleche-rail { animation: none; }
    .gm-logo, .gm-kicker, .gm-titre, .gm-tiret, .gm-texte, .gm-note, .gm-pied { animation: none; }
    .rl-explorer .trait, .rl-explorer .cercle circle { transition: none; }
    .rl-card { transform: none !important; }
    .me-slider:not(.actif) { animation: none; }
  }