/* ============================================================
   revopro — landing (maquette Figma « Journal — Page 1 », 1304px)
   Tokens exacts : paper #F1EEE7 · ink #131311 · mut #8A867E
   rule #D9D5CA · night #111110 — Archivo (display) + Fragment Mono
   ============================================================ */

:root{
  --paper:#F1EEE7;
  --ink:#131311;
  --mut:#8A867E;
  --rule:#D9D5CA;
  --night:#111110;
  --strip:#DFDBD0;
  --lightrule:rgba(241,238,231,.28);
  --gutter:clamp(20px, 3.7vw, 48px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo','Helvetica Neue',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
sup{font-size:.4em}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- primitives typographiques ---------- */
/* demande : retrait de l'effet « code » — police d'écriture (Archivo) sur
   tout le texte du site, plus de monospace (la classe reste nommée .mono) */
.mono{
  font-family:'Archivo','Helvetica Neue',sans-serif;
  font-size:clamp(11px, .84vw, 12.5px);
  line-height:1.4;
  letter-spacing:normal;
}
.dim{color:var(--mut)}
.light{color:var(--paper)}
.u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.num{letter-spacing:.02em}
.grunge{filter:url(#grunge)}
.grunge-soft{filter:url(#grunge-soft)}
.chalk{filter:url(#chalk)}

/* ---------- révélations (chargement + scroll) ----------
   Volontairement PAS derrière prefers-reduced-motion :
   demande explicite d'animations à l'ouverture. */
.rv,.rv-img,.rv-blur{opacity:0}
.rv{transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv-blur{transform:translateY(30px);filter:blur(14px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1.1s var(--ease);transition-delay:var(--d,0s)}
.grunge.rv-blur,.grunge-soft.rv-blur{filter:blur(14px)}
.rv-img{clip-path:inset(0 0 100% 0);transform:scale(1.05);transition:opacity .9s var(--ease),clip-path 1.1s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,0s)}
.in .rv,.rv.in{opacity:1;transform:none}
.in .rv-blur,.rv-blur.in{opacity:1;transform:none;filter:blur(0)}
.in .grunge.rv-blur,.grunge.rv-blur.in{filter:url(#grunge)}
.in .grunge-soft.rv-blur,.grunge-soft.rv-blur.in{filter:url(#grunge-soft)}
.in .chalk.rv-blur,.chalk.rv-blur.in{filter:url(#chalk)}
.in .rv-img,.rv-img.in{opacity:1;clip-path:inset(0 0 0 0);transform:scale(1)}
.no-js .rv,.no-js .rv-img,.no-js .rv-blur{opacity:1;transform:none;clip-path:none}
.noanim *{transition:none!important;animation:none!important}
.noanim .rv,.noanim .rv-img,.noanim .rv-blur{opacity:1;transform:none;clip-path:none;filter:none}
.noanim .grunge{filter:url(#grunge)!important}
.noanim .grunge-soft{filter:url(#grunge-soft)!important}
.noanim .chalk{filter:url(#chalk)!important}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:clamp(18px,2.6vw,34px) var(--gutter) 0;
}
.brand{display:flex;align-items:flex-start;gap:12px}
.brand-mark{height:clamp(34px,3.1vw,42px);width:auto}
.brand-word{height:clamp(33px,3vw,40px);width:auto}
.brand-reg{font-size:13px;line-height:1;margin-top:-2px}
.nav-links{display:flex;gap:clamp(28px,7.5vw,110px);padding-top:6px}
.nav-links a:hover,.copy-mail:hover{text-decoration:underline;text-underline-offset:4px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:0 var(--gutter);max-width:1310px;margin:0 auto}
.hero-intro{
  margin-left:auto;
  /* largeur calée sur celle du groupe nav → bord gauche aligné sous « About » */
  width:min(445px,58%);
  /* .hero est plafonné à 1310px et centré ; on ressort le bloc jusqu'au bord droit
     pleine largeur (comme la nav) pour que « About » et le paragraphe s'alignent */
  margin-right:min(0px, (1310px - 100vw) / 2);
  padding-top:clamp(16px,2.2vw,32px);
}
.hero-intro .mono{max-width:46ch}
.hero-contact{margin-top:2.4em}
.hero-contact .u{display:inline-block;margin-top:.2em}

.ph{position:absolute;overflow:hidden;z-index:1}
.ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.ph-voile{
  left:calc(var(--gutter) - 18px);top:clamp(110px,14vw,185px);
  width:clamp(150px,26.7vw,348px);aspect-ratio:348/440;
}
.ph-profil{
  right:clamp(10px,3.5vw,46px);top:clamp(170px,24vw,320px);
  width:clamp(150px,26.5vw,346px);aspect-ratio:346/420;
}

.hero .num{
  position:relative;display:block;text-align:center;z-index:2;
  left:clamp(60px,11.5vw,150px);
  padding-top:clamp(110px,15vw,200px);
  font-size:clamp(13px,1.4vw,18px);
}
.display{
  position:relative;z-index:2;
  text-align:center;
  font-weight:500;
  font-size:clamp(46px,11.2vw,146px);
  line-height:.96;
  letter-spacing:-.035em;
  margin-top:.04em;
}
.display span{display:block}
.display .l2{color:#B3AEA4}   /* flou uniquement pendant la révélation d'ouverture */

/* --- robe : pleine largeur, fond cuit en #F1EEE7 dans l'image même ;
       le bas passe sous la section nuit et un long dégradé fait la
       transition au scroll --- */
.dress{
  position:relative;
  width:100vw;
  margin:clamp(-150px,-8vw,-40px) 0 -14vw calc(50% - 50vw);
  z-index:0;
}
.dress-in{
  position:relative;
  transform-origin:50% 68%;
  will-change:transform;
}
.dress-img{width:100%}
.dress-arm{
  position:absolute;inset:0;
  background-image:url('assets/hero-robe.webp');
  background-size:100% auto;background-repeat:no-repeat;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 11% 12% at 46.5% 61%, #000 52%, transparent 100%);
          mask-image:radial-gradient(ellipse 11% 12% at 46.5% 61%, #000 52%, transparent 100%);
  transform-origin:46.5% 54%;
  transform:rotate(var(--armtilt,0deg));
  will-change:transform;
}
/* texture cheveux pré-rasterisée en canvas (landing.js) —
   nette au repos (opacity 0), révélée uniquement pendant le scroll */
.dress-hair{
  position:absolute;inset:0;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 19% 20% at 41% 26%, #000 58%, transparent 100%);
          mask-image:radial-gradient(ellipse 19% 20% at 41% 26%, #000 58%, transparent 100%);
  transform-origin:52% 18%;
  will-change:transform,opacity;
  opacity:0;
}
.hair-tex{position:absolute;left:16%;top:4%;width:44%;height:40%}
.hair-tex canvas{width:100%;height:100%;display:block}
/* long fondu pleine largeur robe → section nuit : la transition occupe
   presque la moitié de l'image pour un passage au noir très progressif */
.dress-fade{
  position:absolute;
  left:0;width:100%;
  bottom:calc(14vw - 2px);height:clamp(340px,52vw,1020px);
  background:linear-gradient(180deg,
    rgba(17,17,16,0) 0%,
    rgba(17,17,16,.14) 30%,
    rgba(17,17,16,.42) 55%,
    rgba(17,17,16,.78) 78%,
    #111110 97%);
  pointer-events:none;
}

/* ============================================================
   (02) UN PRODUIT — bande nuit
   ============================================================ */
.produit{
  position:relative;z-index:1;   /* recouvre le bas de la robe (recadrage) */
  background:var(--night);
  color:var(--paper);
  padding:clamp(60px,9vw,150px) var(--gutter) clamp(70px,10vw,140px);
  text-align:center;
}
/* stats intégrées au noir : cellules à peine plus claires, filets lumière */
.stats{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(241,238,231,.04);color:var(--paper);
  border-top:1px solid var(--lightrule);border-bottom:1px solid var(--lightrule);
  margin:0 auto;max-width:1210px;
  text-transform:uppercase;
}
.stats li{
  padding:clamp(16px,2.9vw,38px) 8px;
  border-left:1px solid var(--lightrule);
  display:flex;align-items:center;justify-content:center;
}
.stats li:first-child{border-left:0}
.produit .num{display:block;text-align:right;max-width:1100px;margin:clamp(24px,3.6vw,48px) auto 0;font-size:clamp(13px,1.4vw,18px);color:var(--paper)}
.citation{
  font-weight:400;
  font-size:clamp(40px,9.8vw,128px);
  line-height:.98;
  letter-spacing:-.02em;
  color:#fff;
  margin-top:.1em;
}
.citation-src{margin-top:clamp(18px,2.4vw,32px);color:rgba(241,238,231,.55)}

/* ============================================================
   LA VISION
   ============================================================ */
.vision{
  position:relative;
  background:linear-gradient(180deg,var(--night) 0%,var(--night) 6%,var(--paper) 46%);
  padding:clamp(120px,18vw,240px) var(--gutter) clamp(140px,21vw,290px);
  min-height:clamp(820px,118vw,1800px);   /* le visage tient en entier */
  overflow:hidden;
  scroll-margin-top:40px;
}
.vision-face{
  position:absolute;
  right:-6%;
  top:clamp(150px,20vw,380px);
  width:clamp(360px,74%,1010px);
  opacity:0;                    /* apparition/disparition en fondu pilotée par landing.js */
  transform-origin:70% 40%;
  will-change:transform,opacity;
}
.vision-face img{width:100%}
.vision-txt{margin-top:clamp(200px,28vw,540px)}   /* « La vision / RevoPro® » au niveau de l'œil */
.vision-txt{position:relative;z-index:1;max-width:640px}
.vision-kick{
  font-weight:400;
  font-size:clamp(26px,3.6vw,47px);
  letter-spacing:-.01em;
}
.vision-brand{
  font-weight:500;
  font-size:clamp(42px,7.1vw,93px);
  letter-spacing:-.035em;
  line-height:1.04;
}
.vision-brand sup{font-size:.28em;vertical-align:super}
.vision-p{margin-top:clamp(14px,1.9vw,25px);color:#55524B}

/* ============================================================
   DERNIER PROJET
   ============================================================ */
.projet{padding:clamp(70px,10vw,140px) var(--gutter) 0}
.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;
  max-width:1210px;margin:0 auto;
}
.sec-title{
  font-weight:500;
  font-size:clamp(21px,2.3vw,30px);
  letter-spacing:-.02em;
}
.sec-head .mono:hover{color:var(--ink)}
.projet-scene{
  position:relative;
  max-width:1210px;margin:clamp(30px,4.6vw,60px) auto 0;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,4.6vw,60px);
}
.paren{
  font-weight:400;
  font-size:clamp(120px,26vw,340px);
  line-height:.9;
  transform:translateX(0);
  transition:transform .55s var(--ease);
}
.projet-scene:hover .paren-l,.projet-scene:focus-within .paren-l{transform:translateX(clamp(-34px,-2.5vw,-14px))}
.projet-scene:hover .paren-r,.projet-scene:focus-within .paren-r{transform:translateX(clamp(14px,2.5vw,34px))}
.projet-link{
  display:block;
  width:clamp(220px,35.2vw,458px);
  overflow:hidden;
}
.projet-link img{
  width:100%;filter:grayscale(1);
  transition:transform .8s var(--ease);
}
.projet-scene:hover .projet-link img{transform:scale(1.035)}
.projet-cat{position:absolute;left:clamp(0px,4vw,84px);top:44%;text-align:left}
.projet-num{position:absolute;right:clamp(0px,5.5vw,104px);top:47%}
.projet-cap{
  display:flex;justify-content:space-between;
  width:clamp(220px,35.2vw,458px);
  margin:14px auto 0;
}
.projet-cap a:hover{color:var(--ink)}

/* ============================================================
   MÉTHODE
   ============================================================ */
.methode{padding:clamp(70px,10vw,135px) var(--gutter) 0}
.steps{max-width:1210px;margin:clamp(24px,3.4vw,44px) auto 0}
.step{
  display:grid;
  grid-template-columns:56px 1fr minmax(260px,400px);
  gap:clamp(16px,3.4vw,44px);
  align-items:baseline;
  padding:clamp(18px,2.4vw,30px) 0;
  border-top:1px solid var(--rule);
}
.step:last-child{border-bottom:1px solid var(--rule)}
.step h3{font-weight:400;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.01em}
.step .mono{color:var(--mut)}

/* ============================================================
   OFFRES
   ============================================================ */
.offres{padding:clamp(70px,10vw,135px) var(--gutter) 0}
.otable{max-width:1210px;margin:clamp(24px,3.4vw,44px) auto 0}
.orow{
  display:grid;
  grid-template-columns:minmax(180px,360px) 1fr auto;
  gap:clamp(16px,3.4vw,44px);
  align-items:baseline;
  padding:clamp(18px,2.6vw,34px) 0;
  border-top:1px solid var(--rule);
}
.orow:last-child{border-bottom:1px solid var(--rule)}
.orow h3{font-weight:400;font-size:clamp(16px,1.6vw,21px);letter-spacing:-.01em}
.orow .mono{color:var(--mut);padding-right:24px}
.price{white-space:nowrap;text-transform:uppercase}

/* descriptions Méthode & Offres : police du hero (Archivo) en noir, sans effet mono */
.step p.mono,.orow p.mono{
  font-family:'Archivo','Helvetica Neue',sans-serif;
  color:var(--ink);
  letter-spacing:normal;
}

/* ============================================================
   JOURNAL
   ============================================================ */
.journal{padding:clamp(70px,10vw,135px) var(--gutter) clamp(90px,13vw,180px)}
.jlist{max-width:1210px;margin:clamp(24px,3.4vw,44px) auto 0}
.jrow{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:clamp(20px,4.6vw,60px);
  padding:clamp(16px,2.2vw,28px) 0;
  border-top:1px solid var(--rule);
  transition:opacity .3s;
}
.jrow:last-child{border-bottom:1px solid var(--rule)}
.jrow h3{font-weight:400;font-size:clamp(14.5px,1.4vw,18px);letter-spacing:-.005em;line-height:1.3}
.jrow:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.jrow .mono{white-space:nowrap}

/* ============================================================
   CONTACT — nuit, silhouettes
   ============================================================ */
.contact{
  position:relative;
  background:var(--night) url('assets/contact-silhouettes.webp') center 28%/cover no-repeat;
  min-height:clamp(560px,88vw,1240px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(80px,10vw,140px) var(--gutter);
  overflow:hidden;
}
.contact-title{
  color:#fff;
  font-weight:400;
  font-size:clamp(40px,9.8vw,128px);
  letter-spacing:-.02em;
  line-height:1.2;
  margin-top:clamp(150px,27vw,480px);   /* bloc juste sous la tête de la femme */
}
.contact-ghost{
  display:block;
  font-weight:500;
  font-size:clamp(64px,15.4vw,201px);
  letter-spacing:-.035em;
  line-height:1.05;
  color:rgba(241,238,231,.92);
  border-bottom:1px solid rgba(241,238,231,.65);
  padding-bottom:.06em;
  margin-top:-.1em;
  transition:color .5s var(--ease);
}
.contact-ghost:hover{color:#fff}
.contact-mail{color:var(--paper);margin-top:clamp(60px,10vw,150px)}

/* ============================================================
   FOOTER — wordmark géant
   ============================================================ */
.footer{
  position:relative;
  background:var(--paper);
  padding:clamp(70px,10.5vw,140px) 10px clamp(28px,4vw,52px);
}
.footer-reg{
  position:absolute;
  right:clamp(16px,3.4vw,44px);
  top:clamp(14px,2.4vw,32px);
  font-size:clamp(46px,7.7vw,100px);
  line-height:1;
  font-weight:400;
}
/* wordmark en texte animé (remplace l'image) : entrée lettre par lettre,
   chaque lettre monte de bas en haut, décalée dans le temps */
.footer-word{
  display:flex;justify-content:center;align-items:flex-end;
  overflow:hidden;
  font-family:'Space Grotesk','Archivo',sans-serif;
  font-weight:500;letter-spacing:-.02em;line-height:.82;
  color:#101010;
  font-size:min(25vw,338px);
}
.fw-l{
  display:inline-block;
  transform:translateY(115%);
  transition:transform .8s var(--ease);
  transition-delay:calc(var(--i) * .07s);
}
.footer.in .fw-l{transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   MOBILE — copie proportionnelle de la maquette Figma
   « Journal — Page 1 » (1304 × 9520). Conversion : 1px maquette
   = 100/1304 vw ≈ 0.0767vw. Les textes courants gardent un
   plancher lisible (max(px, vw)) ; la géométrie reste pure vw.
   Textes = version desktop (les libellés de la maquette sont
   obsolètes et comportent des coquilles).
   ============================================================ */
@media (max-width:760px){
  :root{--gutter:4.37vw}                          /* 57px maquette */

  /* ---- nav : une seule ligne, logo large (maquette y28-115) ---- */
  .nav{padding:2.1vw var(--gutter) 0}
  .brand{gap:5px}
  .brand-mark{height:4.2vw}
  .brand-word{height:3.9vw}
  .brand-reg{font-size:9px;margin-top:0}
  /* About proche du logo, horloge à droite (réglages manuels) */
  .nav-links{width:65vw;justify-content:space-between;gap:0;padding-top:1vw;
    flex-wrap:nowrap;align-items:baseline;font-size:10px}
  .nav-links .dim{font-size:9px;letter-spacing:.03em;white-space:nowrap}
  .nav .copy-mail{display:none}   /* le contact est déjà dans le bloc intro */

  /* filtres craie à l'échelle mobile (grain fin identique au desktop) */
  .chalk{filter:url(#chalk-m)}
  .grunge-soft{filter:url(#grunge-soft-m)}
  .in .chalk.rv-blur,.chalk.rv-blur.in{filter:url(#chalk-m)}
  .in .grunge-soft.rv-blur,.grunge-soft.rv-blur.in{filter:url(#grunge-soft-m)}
  .noanim .chalk{filter:url(#chalk-m)!important}
  .noanim .grunge-soft{filter:url(#grunge-soft-m)!important}

  /* ---- hero : réglages manuels (edit mobile) ---- */
  .hero-intro{padding-top:6vw;width:57vw}
  .hero-intro .mono{font-size:9.5px;line-height:1.75;max-width:none}
  .hero-contact{margin-top:1.8em}
  .ph-voile{                                       /* collée au bord gauche */
    left:0;top:29vw;
    width:28.5vw;aspect-ratio:325/404;
  }
  .ph-profil{                                      /* collé au bord droit, niveau titre */
    right:0;top:59vw;
    width:34.8vw;aspect-ratio:340/424;
  }
  /* (01) à 62% (maquette x831) via padding — pas de left : évite le débordement */
  .hero .num{left:0;text-align:left;padding-left:58vw;padding-top:11vw;font-size:max(10px,2.15vw)}
  .display{font-size:11.2vw}                      /* 146px */
  /* robe : la maquette zoome l'image (~1.2×) — robe pleine largeur,
     débord recadré à droite ; calques bras/cheveux désalignés → coupés */
  .dress{margin-top:-8vw;overflow:hidden}
  .dress-img{width:128vw;max-width:none;margin-left:-8vw}
  .dress-arm,.dress-hair{display:none}
  /* fondu robe → nuit : dégradé vertical + calque incliné qui noircit le
     coin bas-gauche (fond clair de la photo) sans effacer la silhouette */
  /* le fondu descend jusqu'au bas de la robe (bottom:0) : sans ça, l'ourlet
     noir pur de la robe dépasse sous le dégradé et forme une bande noire
     visible avant la bande nuit (02). height ↑ pour garder le haut du fondu. */
  .dress-fade{bottom:0;height:106vw;background:
    linear-gradient(34deg,
      #111110 0%,
      rgba(17,17,16,.72) 26%,
      rgba(17,17,16,0) 55%),
    linear-gradient(180deg,
      rgba(17,17,16,0) 0%,
      rgba(17,17,16,.16) 32%,
      rgba(17,17,16,.5) 58%,
      rgba(17,17,16,.82) 80%,
      #111110 96%)}

  /* ---- (02) un produit — bande nuit (stats y2186, cit y2494) ---- */
  /* padding-bas généreux : la bande noire tient plus longtemps avant
     de fondre vers la section « vision » */
  .produit{padding:0 var(--gutter) 34vw}
  .stats{font-size:8.5px;letter-spacing:.02em}
  .stats li{padding:3.4vw 2px}                    /* cellule h124 */
  .produit .num{padding-right:14.8vw;margin-top:11.8vw;font-size:max(10px,2.15vw)}
  .citation{font-size:9.8vw}                      /* 128px */
  .citation-src{margin-top:1.2vw;font-size:10px}

  /* ---- la vision (face x543→hors-cadre, texte x40/y3652) ---- */
  /* margin-top:-1px : la limite produit/vision tombe sur un sous-pixel
     (ex. 1134,59px) ; sans chevauchement, le fond clair du body (--paper)
     transparaît en un fin liseré. On fait mordre la vision d'1px (nuit sur
     nuit, invisible) pour fermer ce joint. */
  .vision{margin-top:-1px;padding:0 var(--gutter) 6vw;min-height:143vw;
    background:linear-gradient(180deg,var(--night) 0%,var(--night) 9%,var(--paper) 40%)}
  /* rect Figma 761×1477 collé au bord droit, image fill centrée (crop ±214px) */
  .vision-face{right:0;top:25.9vw;width:58.4vw;overflow:hidden}
  .vision-face img{width:139%;max-width:none;margin-left:-23%}
  .vision-txt{margin-top:63vw;margin-left:-1.27vw;max-width:none}
  .vision-kick{font-size:max(14px,3.6vw)}         /* 47px */
  .vision-brand{font-size:9.05vw}                 /* 118px */
  /* colonne étroite avant le visage, même taille que le texte d'entête */
  .vision-p{margin-top:1.8vw;font-size:9.5px;line-height:1.75;max-width:33vw}
  .vision-p br{display:none}

  /* ---- dernier projet (tête y4990, image 432-887 / y5023) ---- */
  .projet{padding:22.2vw var(--gutter) 0}
  .sec-title{font-size:max(16px,2.9vw)}           /* 38px */
  .sec-head{align-items:flex-start}
  .sec-head .mono{font-size:9.5px;text-align:right;max-width:45vw;padding-top:1vw;flex:none}
  .projet .sec-head{padding:0 2.1vw}              /* titre x84 */
  .projet-scene{margin-top:.3vw;gap:6.3vw;flex-wrap:nowrap}
  .paren{font-size:26vw}                          /* 340px */
  .projet-link{width:34.9vw}                      /* 455px */
  .projet-cat{left:1.5vw;top:47.8%;font-size:8px;max-width:17vw}
  .projet-num{right:1.5vw;top:51%;font-size:8px}
  .projet-cap{width:34.9vw;margin-top:3.3vw;font-size:10px}

  /* ---- méthode (titre 118px y6085, lignes y6234-6653) ---- */
  .methode{padding:24vw var(--gutter) 0}
  .methode .sec-title{font-size:9.05vw}           /* Méthode géant */
  /* label façon « (03) » en exposant à droite du titre géant (maquette) */
  .methode .sec-head .mono{max-width:32vw}
  .steps{margin-top:4.7vw}
  .step{grid-template-columns:6vw 1fr 52%;gap:3vw;padding:2.6vw 0 3.4vw}
  .step .n{font-size:9px}
  .step h3{font-size:max(15px,2.53vw)}            /* 33px */
  .step .mono{font-size:max(10.5px,1vw)}

  /* ---- offres (titre y6831, lignes y6890-7171) ---- */
  .offres{padding:13.6vw var(--gutter) 0}
  .otable{margin-top:4.5vw}
  .orow{grid-template-columns:31vw 1fr auto;gap:3vw;padding:2.8vw 0 3.4vw}
  .orow h3{font-size:max(14px,2.1vw)}             /* 27px */
  .orow .mono{padding-right:0;font-size:max(10.5px,1vw)}
  .price{font-size:10px}

  /* ---- journal (titre y7331, lignes y7377-7681) ---- */
  .journal{padding:12.3vw var(--gutter) 27.3vw}
  .jlist{margin-top:3.5vw}
  .jrow{padding:2.4vw 0;gap:5vw}
  .jrow h3{font-size:max(13px,1.7vw);max-width:75%}   /* 22px */
  .jrow .mono{font-size:9.5px}

  /* ---- contact (section y8037-9008, h971) ---- */
  .contact{min-height:74.5vw;padding:10vw var(--gutter)}
  .contact-title{margin-top:20vw;font-size:9.8vw}     /* Une vision ? 128px */
  .contact-ghost{font-size:11.5vw}                    /* Parlons-en. 150px */
  .contact-mail{margin-top:15vw;font-size:10.5px}

  /* ---- footer (® 93px, wordmark y9140-9385, bande y9403) ---- */
  .footer{padding:10.1vw .6vw 5.75vw}
  .footer-reg{right:1.2vw;top:3.1vw;font-size:9.5vw}

  /* ---- réglages manuels (mode édition mobile, base 390px) ---- */
  .nav .brand{translate:-1.03vw 2.82vw;width:34.87vw}
  .nav .nav-links{translate:3.85vw 2.82vw}
  /* « About » : bord gauche aligné sous le paragraphe d'intro,
     sur la même ligne que le logo et « Paris — CET » */
  .nav-links .rv a{display:inline-block;translate:2.05vw 0}
  #clock{translate:-6.92vw -.26vw;width:22.56vw}
  .hero .hero-intro{translate:.26vw 4.36vw}
  .hero .hero-intro p.mono:first-of-type{translate:3.08vw -4.87vw}
  .hero .hero-intro .hero-contact{translate:3.33vw -5.9vw}
  .hero .ph-voile{translate:4.87vw -11.03vw}
  .hero .ph-profil{translate:-2.05vw 1.54vw;width:27.18vw}
  .hero .num{translate:-2.82vw .51vw;width:65.64vw}
  .hero .display .l1{translate:-7.18vw 1.28vw}
  .hero .display .l2{translate:1.03vw 2.31vw}
  #vision .vision-kick{translate:-.51vw .51vw}
  #vision .vision-brand{translate:-1.28vw .77vw;width:36.41vw}
  #vision .vision-p{translate:-.51vw .77vw}
}

/* ============================================================
   AJUSTEMENTS PC — positions affinées en mode édition (?edit)
   Offsets via la propriété `translate` (indépendante de `transform`) :
   survit au reset de révélation (.rv.in{transform:none}) et préserve
   l'animation d'entrée. Réservé au desktop large.
   ============================================================ */
@media (min-width:1001px){
  .hero .hero-intro{translate:-33px -9px}
  .hero .num{translate:91px -100px}
  .hero .display{translate:10px -46px}
  .hero .display .l1{translate:-57px -93px}
  .hero .display .l2{translate:13px -76px}
  /* les calques animés (bras, cheveux) suivent le même décalage que la photo */
  .dress-img,.dress-arm,.dress-hair{translate:43px -84px}

  .nav .nav-links{translate:-64px 1px}

  .produit{translate:0 2px}
  /* cellules remontées via translate : masquer le cadre du conteneur resté vide */
  .produit .stats{background:none;border-color:transparent}
  .produit .stats li:nth-child(1){translate:1px -146px}
  .produit .stats li:nth-child(2){translate:0 -144px}
  .produit .stats li:nth-child(3){translate:2px -143px}
  .produit .stats li:nth-child(4){translate:4px -144px}

  .vision .vision-face img{translate:-112px 162px}
  .vision .vision-txt{translate:192px 252px}

  .footer .footer-reg{translate:-179px 90px}
}