/* remy.paris V2 (15/11/2026, Rémy : « on revoit mon site ? une V2 plus cool » ; « garder, en plus vivant »).
   Couche chargée seulement par apercu-v2.php (RP_V2) par-dessus index.php : mêmes textes, mêmes images, même admin.
   Animations : transform et opacity seulement ; tout se coupe avec prefers-reduced-motion. */
:root{--ease:cubic-bezier(.16,1,.3,1)}

/* Accueil : le nom monte lettre par lettre */
.v2 h1{font-size:clamp(64px,10.5vw,148px);line-height:1.02;letter-spacing:-.025em;margin:18px 0 26px}
.v2 h1 .l{display:inline-block;transform:translateY(105%);opacity:0;transition:transform 1s var(--ease),opacity .6s ease;transition-delay:calc(var(--i) * 38ms + 120ms)}
.v2 h1 .ligne{display:inline-block;overflow:hidden;padding-bottom:.08em;vertical-align:bottom}
.v2.pret h1 .l{transform:none;opacity:1}
.v2 .lead{font-size:21px}

/* Photo : rideau qui se lève, puis léger relief au défilement */
.v2 .hero-photo{clip-path:inset(100% 0 0 0 round 22px);transition:clip-path 1.3s var(--ease) .25s}
.v2.pret .hero-photo{clip-path:inset(0 0 0 0 round 22px)}
.v2 .hero-photo img{transform:scale(1.14);transition:transform 1.8s var(--ease) .25s}
.v2.pret .hero-photo img{transform:scale(1.02)}
.v2 .hero-photo .badge{opacity:0;transform:translateY(18px);transition:opacity .8s ease 1.1s,transform .9s var(--ease) 1.1s}
.v2.pret .hero-photo .badge{opacity:1;transform:none}
.v2 .hero-photo{overflow:visible}
@supports (animation-timeline: scroll()){
  .v2 .hero-photo>img{animation:v2-relief linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  @keyframes v2-relief{to{transform:scale(1.02) translateY(46px)}}
}

/* Titres de section : dévoilés par le bas */
.v2 .sec-head h2,.v2 .hire h2,.v2 .contact h2{clip-path:inset(0 0 100% 0);transform:translateY(28px);transition:clip-path 1s var(--ease) .1s,transform 1s var(--ease) .1s}
.v2 .rv.in h2,.v2 .rv.in .hire h2{clip-path:inset(0 0 -20% 0);transform:none}
.v2 section{padding:112px 0}

/* Carrière : la ligne du temps se trace au défilement */
.v2 .timeline{position:relative}
.v2 .timeline::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:2px;background:var(--accent);transform-origin:top;transform:scaleY(0);border-radius:2px}
@supports (animation-timeline: view()){
  .v2 .timeline::before{animation:v2-trace linear both;animation-timeline:view();animation-range:entry 20% exit 60%}
  @keyframes v2-trace{to{transform:scaleY(1)}}
}
.v2 .timeline li{transition:background .3s ease,padding-left .4s var(--ease)}
.v2 .timeline li:hover{background:linear-gradient(90deg,rgba(31,79,209,.05),transparent 70%);padding-left:12px}

/* Voyages : galerie plus immersive, apparition en cascade */
.v2 .gallery{gap:16px}
.v2 .gallery figure{border-radius:18px;transition:transform .6s var(--ease),box-shadow .6s ease}
.v2 .gallery figure:nth-child(4n+2){transform:translateY(28px)}
.v2 .gallery figure:nth-child(4n+4){transform:translateY(14px)}
.v2 .gallery figure.rv{transition:opacity .9s ease,transform .9s var(--ease),box-shadow .6s ease;transition-delay:calc(var(--i,0) * 70ms)}
.v2 .gallery figure:hover{box-shadow:0 22px 44px rgba(31,79,209,.16)}
.v2 .gallery figure:hover img{transform:scale(1.07)}
.v2 .gallery img{transition:transform 1.1s var(--ease)}
.v2 .gallery figcaption{transform:translateY(6px);opacity:.92;transition:transform .5s var(--ease)}
.v2 .gallery figure:hover figcaption{transform:none}

/* Réalisations : grandes images en rideau, cartes qui se soulèvent */
.v2 .work-img{clip-path:inset(10% 10% 10% 10% round 18px);transition:clip-path 1.2s var(--ease)}
.v2 .rv.in .work-img,.v2 .rv.in.work-img{clip-path:inset(0 0 0 0 round 18px)}
.v2 .work-img>img:not(.logo-tile){transform:scale(1.16);transition:transform 1.6s var(--ease)}
.v2 .rv.in .work-img>img:not(.logo-tile){transform:scale(1)}
.v2 .work-mini{transition:transform .5s var(--ease)}
.v2 .work-mini:hover{transform:translateY(-6px)}
.v2 .work-mini:hover .work-img{box-shadow:0 26px 50px rgba(31,79,209,.18)}
.v2 .work h3{font-size:48px}

/* Clients : chaque vignette prend sa couleur au survol */
.v2 .ref{border-radius:16px;padding:0 0 12px;transition:transform .45s var(--ease)}
.v2 .ref .shot{transition:transform .6s var(--ease),box-shadow .6s ease,border-radius .6s var(--ease)}
.v2 .ref:hover{transform:translateY(-4px)}
.v2 .ref:hover .shot{transform:scale(1.03);box-shadow:0 20px 40px color-mix(in srgb,var(--b) 35%,transparent);border-radius:20px}
.v2 .ref .picto{transition:transform .6s var(--ease)}
.v2 .ref:hover .picto{transform:rotate(-6deg) scale(1.08)}
.v2 .refs .ref.rv{transition-delay:calc(var(--i,0) * 50ms)}

/* Boutons : appui physique */
.v2 .btn{transition:transform .25s var(--ease),background .2s,color .2s,box-shadow .25s}
.v2 .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,20,20,.12)}
.v2 .btn:active{transform:translateY(0) scale(.98)}

/* Contact : grande adresse */
.v2 .contact .mail{font-size:clamp(28px,4.4vw,56px)}

/* Chiffres qui comptent */
.v2 [data-v2-n]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .v2 h1 .l,.v2 .hero-photo,.v2 .hero-photo img,.v2 .hero-photo .badge,.v2 .sec-head h2,.v2 .hire h2,.v2 .contact h2,.v2 .work-img,.v2 .work-img>img,.v2 .gallery figure,.v2 .gallery img{transition:none!important;animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
  .v2 .timeline::before{animation:none;transform:scaleY(1)}
}
@media (max-width:700px){
  .v2 h1{font-size:clamp(56px,17vw,84px)}
  .v2 section{padding:80px 0}
  .v2 .gallery figure:nth-child(n){transform:none}
  .v2 .timeline::before{left:-10px}
  .v2 .work h3{font-size:36px}
}

/* ============ V2, 2e passe (15/11/2026, Rémy : « t'as pas changé grand chose », « aligne le menu », « refais passer ça par-dessus ») ============ */
/* Un seul gabarit pour le menu et le contenu : le logo s'aligne sur le nom */
.v2{--w:1240px}
.v2 .wrap{max-width:var(--w);padding-left:40px;padding-right:40px}
.v2 nav.wrap{padding-left:40px;padding-right:40px}
.v2 .logo{margin-left:0;padding-left:0}

/* Menu : pilule flottante en verre dépoli (approximation web, backdrop-filter) */
.v2 header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;top:12px}
.v2 header nav{height:60px;margin-top:12px;background:rgba(251,250,247,.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(20,20,20,.08);border-radius:999px;box-shadow:0 10px 30px rgba(31,79,209,.08),inset 0 1px 0 rgba(255,255,255,.7);padding-left:28px;padding-right:12px;max-width:calc(var(--w) - 48px)}
.v2 header.scrolled nav{box-shadow:0 14px 36px rgba(31,79,209,.12),inset 0 1px 0 rgba(255,255,255,.7)}
@media (prefers-reduced-transparency:reduce){.v2 header nav{background:#fbfaf7}}

/* Le badge des pays repasse par-dessus la photo : le rideau est sur l'image, plus sur le cadre */
.v2 .hero-photo{clip-path:none!important;overflow:visible}
.v2 .hero-photo>img{clip-path:inset(100% 0 0 0 round 26px);transition:clip-path 1.3s var(--ease) .25s,transform 1.8s var(--ease) .25s;border-radius:26px}
.v2.pret .hero-photo>img{clip-path:inset(0 0 0 0 round 26px)}
.v2 .hero-photo .badge{z-index:3}

/* Accueil plein écran, nom immense */
.v2 .hero{grid-template-columns:1.15fr .85fr;gap:56px;min-height:calc(100dvh - 84px);padding:64px 0 72px;align-items:center}
.v2 h1{font-size:clamp(72px,11.5vw,176px);line-height:.98;margin:14px 0 30px}
.v2 .hero-photo>img{max-height:none;height:min(78dvh,760px);aspect-ratio:auto;width:100%}

/* Titres de section : grands, numéro en bleu */
.v2 .sec-head{grid-template-columns:1fr;gap:10px;margin-bottom:56px}
.v2 .sec-head .num{color:var(--accent);font-weight:600;letter-spacing:.14em}
.v2 h2{font-size:clamp(46px,7.2vw,104px);line-height:.98;letter-spacing:-.02em}
.v2 .sec-head p{font-size:18px;max-width:60ch;margin-top:18px}

/* Voyages : mosaïque avec une photo en vedette (12 cases pleines sur 4 colonnes) */
.v2 .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:16px}
.v2 .gallery figure{transform:none!important}
.v2 .gallery figure img{height:100%;aspect-ratio:auto}
.v2 .gallery figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.v2 .gallery figure:nth-child(6){grid-column:span 2}

/* Parcours : chiffres énormes, en bleu */
.v2 .stats b{font-size:clamp(64px,8vw,120px);color:var(--accent);letter-spacing:-.02em}
.v2 .stats div{border-top-width:3px}
.v2 .steps li{border-radius:24px;padding:34px;transition:transform .5s var(--ease),box-shadow .5s ease}
.v2 .steps li:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(31,79,209,.12)}

/* Réalisations : images plus grandes */
.v2 .work{grid-template-columns:1.35fr .65fr;gap:56px;margin-bottom:96px}
.v2 .work-img>img:not(.logo-tile){aspect-ratio:16/11}
.v2 .work h3{font-size:clamp(40px,4.6vw,64px)}

/* « Me solliciter » : un bloc de couleur franc, une seule fois sur la page */
.v2 #hire{background:var(--accent);border-top:0;color:#fff;padding:120px 0}
.v2 #hire>.wrap>.num{color:rgba(255,255,255,.75)!important}
.v2 #hire .hire{box-shadow:0 40px 90px rgba(9,26,82,.35);border:0}
.v2 #hire .ref b{color:#fff}.v2 #hire .ref span{color:rgba(255,255,255,.75)}.v2 #hire .ref em{color:#cfdcff}
.v2 #hire .ref .shot{border-color:rgba(255,255,255,.18)}
.v2 #hire .refs{margin-top:28px}
/* bande des clients qui défile (une seule sur la page) */
.v2 .defile{overflow:hidden;margin:72px -40px 8px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.v2 .defile div{display:flex;gap:56px;width:max-content;animation:v2-defile 48s linear infinite;font:400 clamp(34px,4vw,56px)/1.2 var(--serif);white-space:nowrap}
.v2 .defile span:nth-child(even){font-style:italic;color:#cfdcff}
@keyframes v2-defile{to{transform:translateX(-50%)}}
.v2 .defile:hover div{animation-play-state:paused}

/* Contact : l'adresse en très grand */
.v2 .contact{padding:160px 0}
.v2 .contact h2{font-size:clamp(56px,9vw,136px)}
.v2 .contact .mail{font-size:clamp(32px,5.6vw,80px)}

@media (prefers-reduced-motion:reduce){.v2 .defile div{animation:none}.v2 .hero-photo>img{clip-path:none!important;transition:none!important}}
@media (max-width:900px){
  .v2 .wrap,.v2 nav.wrap{padding-left:18px;padding-right:18px}
  .v2 header nav{margin:8px 10px 0;padding-left:18px}
  .v2 .hero{grid-template-columns:1fr;min-height:0;gap:36px}
  .v2 .hero-photo>img{height:auto;aspect-ratio:4/5}
  .v2 .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .v2 .gallery figure:nth-child(6){grid-column:span 2}
  .v2 .work{grid-template-columns:1fr}
  .v2 .defile{margin-left:-18px;margin-right:-18px}
}
/* 3e retouche (15/11/2026) : le logo s'aligne exactement sur le nom (la pilule déborde de sa marge intérieure) ;
   le titre de la carte « Me solliciter » reste à l'encre (la section bleue passe le texte en blanc) */
.v2 header nav.wrap{max-width:calc(var(--w) - 24px);padding-left:28px;padding-right:12px}
.v2 #hire .hire{color:var(--ink)}
@media (max-width:900px){.v2 header nav.wrap{max-width:none;padding-left:18px}}
/* 4e retouche (15/11/2026) : la pilule du menu a exactement le gabarit du contenu (même largeur, même marge) : le logo tombe pile sur le nom */
.v2 header nav.wrap{max-width:var(--w);padding-left:40px;padding-right:14px}
@media (max-width:900px){.v2 header nav.wrap{max-width:none;padding-left:18px}}
/* 5e retouche (15/11/2026, Rémy : « l accueil dépasse, remets-le dans les clous ») : le menu prend sa vraie place (marge sur l en-tête,
   pas sur la pilule, sinon il recouvre le haut de l accueil), et l accueil tient dans la hauteur de l écran */
.v2 header{top:0;padding-top:12px}
.v2 header nav{margin-top:0}
.v2 .hero{min-height:calc(100dvh - 72px);padding:40px 0 48px;gap:48px}
.v2 h1{font-size:clamp(64px,min(10vw,15dvh),160px);margin:12px 0 22px}
.v2 .lead{font-size:clamp(17px,1.4vw,20px)}
.v2 .cta{margin-top:28px}
.v2 .hero-photo>img{height:min(calc(100dvh - 72px - 88px),720px)}
@media (max-width:900px){.v2 .hero{min-height:0;padding:28px 0 40px}.v2 .hero-photo>img{height:auto}}
/* 6e retouche : l accueil garde la marge latérale du gabarit (le nom s aligne sur le logo et sur les sections) */
.v2 .hero{padding-left:40px;padding-right:40px}
@media (max-width:900px){.v2 .hero{padding-left:18px;padding-right:18px}}
/* 7e retouche (15/11/2026, Rémy : « la bande des clients : toute la largeur, légèrement en biais ») : un ruban blanc qui déborde
   des deux côtés de l écran, incliné, sur le bloc bleu ; la section coupe ce qui dépasse (pas de défilement de côté) */
.v2 #hire{overflow:hidden}
.v2 .defile{width:112vw;margin:120px 0 100px calc(50% - 56vw);transform:rotate(-2.2deg);background:#fbfaf7;padding:18px 0;mask-image:none;-webkit-mask-image:none;
  box-shadow:0 18px 40px rgba(9,26,82,.28)}
.v2 .defile div{color:var(--ink)}
.v2 .defile span:nth-child(even){color:var(--accent)}
@media (max-width:900px){.v2 .defile{margin:80px 0 64px calc(50% - 56vw);padding:12px 0}}
/* 15/11/2026, Rémy : « mets un cadre blanc : c'est horrible » (vignettes posées sur le bleu) */
.v2 #hire .refs{background:#fbfaf7;border-radius:24px;padding:32px;box-shadow:0 30px 70px rgba(9,26,82,.3)}
.v2 #hire .ref b{color:var(--ink)}.v2 #hire .ref span{color:var(--muted)}.v2 #hire .ref .mark{color:var(--t)}.v2 #hire .ref em{color:var(--accent)}
.v2 #hire .ref .shot{border-color:var(--line)}
@media (max-width:900px){.v2 #hire .refs{padding:16px;border-radius:18px}}
/* 15/11/2026, Rémy : « décale le cadre sur mobile » : le cadre des pays descend sous la photo au lieu de cacher la personne */
@media (max-width:900px){.v2 .hero-photo{margin-bottom:64px}.v2 .hero-photo .badge{left:16px;right:16px;bottom:-52px;max-width:none}}