/* ==========================================================================
   STREETFOOT : Design system
   Structure & motion inspirés de houseofyellow.nl, palette de la charte SF.
   Charte : NOIR #0D0B0D · BLANC #FFFFFF · GRIS FONCÉ #4D5659 · ORANGE #F25C05
   ========================================================================== */

/* --- Kanit : police d'affichage (titres, boutons, accents) --------------- */
/* Inter servie depuis notre domaine : aucun appel à Google Fonts,
   donc aucune IP de visiteur transmise à un tiers (RGPD). */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kanit servie depuis notre domaine, comme Inter : aucun appel à Google Fonts. */
@font-face{
  font-family:'Kanit';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/kanit-latin-ext-700-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Kanit';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/kanit-latin-700-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  /* Charte */
  --noir:#0D0B0D;
  --blanc:#FFFFFF;
  --gris:#4D5659;
  --orange:#F25C05;

  /* Dérivés fonctionnels (teintes de la charte, pas de nouvelle couleur) */
  --noir-90:rgba(13,11,13,.9);
  --noir-60:rgba(13,11,13,.6);
  --noir-20:rgba(13,11,13,.2);
  --blanc-60:rgba(255,255,255,.6);
  --blanc-20:rgba(255,255,255,.2);
  --blanc-10:rgba(255,255,255,.1);
  --orange-dark:#C94A04;

  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
*:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
::selection{background:var(--orange);color:var(--noir)}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
html.menu-open,html.menu-open body{overflow:hidden}

body{
  max-width:100vw;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.875vw;
  line-height:1.5;
  font-weight:400;
  color:var(--noir);
  background:var(--noir);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
.display,.h1,.h2,.h3,.eyebrow,.btn,.tag,.stat-num{
  font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;
  text-transform:uppercase;
}
.display{font-size:4.6vw;line-height:1.0;letter-spacing:.005em}
.h1{font-size:3.6vw;line-height:1.02}
.h2{font-size:2.9vw;line-height:1.06}
.h3{font-size:1.5vw;line-height:1.12}
.h4{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.05vw;line-height:1.15}

.eyebrow{font-family:'Inter',sans-serif;font-size:.75vw;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.eyebrow .num{font-variant-numeric:tabular-nums}

.lead{font-size:1.125vw;line-height:1.45;font-weight:500}
.text{font-size:.875vw;line-height:1.55}
.text-s{font-size:.75vw;line-height:1.5}
.text p+p{margin-top:1em}
.muted{opacity:.6}


/* ==========================================================================
   UTILITAIRES
   ========================================================================== */
.lead-narrow{max-width:32vw;margin-top:1.6vw}
.mt-s{margin-top:.8vw}.mt-m{margin-top:1.6vw}.mt-l{margin-top:2.1vw}
.mb-m{margin-bottom:1.6vw}
.center{text-align:center}
.soft{opacity:.7}.faint{opacity:.45}
.square--dark{background:var(--noir)}
.on-dark{color:var(--blanc)}
.s-orange .soft,.s-light .soft{opacity:.75}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{padding:0 2.5vw}
.wrap-s{padding:0 12vw}
.section{padding:8vw 0;position:relative}
.grain{position:absolute;inset:0;background-image:url('../img/noise.png');opacity:.18;pointer-events:none;mix-blend-mode:overlay;z-index:0}
.section>.wrap{position:relative;z-index:1}

.s-dark{background:var(--noir);color:var(--blanc)}
.s-light{background:var(--blanc);color:var(--noir)}
.s-orange{background:var(--orange);color:var(--noir)}
.s-gris{background:var(--gris);color:var(--blanc)}

/* ==========================================================================
   RÉVÉLATIONS AU SCROLL
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(1.6vw);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.09s}
[data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal-delay="3"]{transition-delay:.27s}
[data-reveal-delay="4"]{transition-delay:.36s}

.split-line{display:block;overflow:hidden;padding-right:.12em}
.split-line .w{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease)}
.split.in .split-line .w{transform:none}

/* ==========================================================================
   BOUTONS (pilule + marquee au survol, façon HOY)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.9vw;
  font-size:.75vw;letter-spacing:.06em;
  line-height:2.9vw;height:2.9vw;padding:0 1.35vw;
  border-radius:2vw;overflow:hidden;cursor:pointer;
  background:var(--orange);color:var(--noir);
  box-shadow:inset 0 0 0 1px transparent;
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.btn .lbl{position:relative;display:block;overflow:hidden;height:2.9vw}
.btn .lbl span{display:block;transition:transform .4s var(--ease)}
.btn .lbl span+span{position:absolute;top:100%;left:0;white-space:nowrap}
.btn:hover .lbl span{transform:translateY(-100%)}
.btn .ic{width:1.05vw;flex:0 0 auto;transition:transform .45s var(--ease)}
.btn .ic path{fill:currentColor}
.btn:hover .ic{transform:rotate(180deg)}
.btn:hover{background:var(--noir);color:var(--orange)}

.btn--dark{background:var(--noir);color:var(--orange)}
.btn--dark:hover{background:transparent;color:var(--noir);box-shadow:inset 0 0 0 1px var(--noir)}
.s-dark .btn--dark:hover,.s-gris .btn--dark:hover{color:var(--blanc);box-shadow:inset 0 0 0 1px var(--blanc)}
.btn--light{background:var(--blanc);color:var(--noir)}
.btn--light:hover{background:var(--orange);color:var(--noir)}
.btn--ghost{background:transparent;box-shadow:inset 0 0 0 1px currentColor;color:inherit}
.btn--ghost:hover{background:var(--orange);color:var(--noir);box-shadow:inset 0 0 0 1px var(--orange)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{position:fixed;inset:0 0 auto 0;height:4.9vw;line-height:4.9vw;z-index:60;color:var(--blanc);
  transition:height .35s var(--ease),line-height .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:transparent;transition:background .35s}
.hdr.scrolled{background:var(--noir);color:var(--blanc)}
.hdr.scrolled::after{background:var(--blanc-20)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between}

.hdr-nav ul{display:flex;gap:2.2vw}
.hdr-nav a{position:relative;display:inline-flex;align-items:center;min-height:24px;line-height:1.4;font-size:.8125vw;font-weight:500;
  opacity:0;transform:translateY(-1vw);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
.loaded .hdr-nav li:nth-child(1) a{transition-delay:.05s}
.loaded .hdr-nav li:nth-child(2) a{transition-delay:.11s}
.loaded .hdr-nav li:nth-child(3) a{transition-delay:.17s}
.loaded .hdr-nav li:nth-child(4) a{transition-delay:.23s}
.loaded .hdr-nav li:nth-child(5) a{transition-delay:.29s}
.loaded .hdr-nav a,.loaded .hdr-brand,.loaded .hdr-right{opacity:1;transform:none}
.hdr-nav a::after{content:"";position:absolute;left:auto;right:0;bottom:-.25vw;width:0;height:2px;background:var(--orange);
  transition:width .35s var(--ease),left .35s var(--ease),right .35s var(--ease)}
.hdr-nav a:hover::after,.hdr-nav a.is-active::after{width:100%;left:0;right:auto}
.hdr-nav a.is-active{color:var(--orange)}

.hdr-brand{display:flex;align-items:center;gap:.55vw;min-height:24px;opacity:0;transform:translateY(-1vw);
  transition:opacity .5s .34s var(--ease),transform .5s .34s var(--ease)}
.hdr-brand .mark{width:2.1vw;height:auto;flex:0 0 auto}
.hdr-brand .wordmark{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.15vw;letter-spacing:.02em;line-height:1}
.hdr-brand .wordmark em{font-style:normal;color:var(--orange)}

.hdr-right{display:flex;align-items:center;gap:1.4vw;opacity:0;transform:translateY(-1vw);
  transition:opacity .5s .42s var(--ease),transform .5s .42s var(--ease)}
.hdr-social{display:flex;gap:1vw;font-size:1.05vw;line-height:1}
.hdr-social a{transition:color .3s,opacity .3s}
.hdr-social a:hover{color:var(--orange)}

.burger{display:none;align-items:center;gap:.6vw;font-size:.8125vw;font-weight:500}
.burger .bars{position:relative;width:26px;height:16px}
.burger .bars i{position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .3s,top .3s var(--ease)}
.burger .bars i:nth-child(1){top:0}
.burger .bars i:nth-child(2){top:7px}
.burger .bars i:nth-child(3){top:14px}
.burger.open .bars i:nth-child(1){top:7px;transform:rotate(45deg)}
.burger.open .bars i:nth-child(2){opacity:0}
.burger.open .bars i:nth-child(3){top:7px;transform:rotate(-45deg)}

/* Menu mobile */
.menu{position:fixed;inset:0;z-index:55;background:var(--noir);color:var(--blanc);
  padding:22vw 6.9vw 10vw;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);overflow-y:auto}
.menu.open{opacity:1;pointer-events:auto}
.menu li{border-bottom:1px solid var(--blanc-20)}
.menu ul a{display:block;padding:3.5vw 0;font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;font-size:8vw;line-height:1;
  opacity:0;transform:translateX(-3vw);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.menu.open ul a{opacity:1;transform:none}
.menu.open li:nth-child(1) a{transition-delay:.10s}
.menu.open li:nth-child(2) a{transition-delay:.15s}
.menu.open li:nth-child(3) a{transition-delay:.20s}
.menu.open li:nth-child(4) a{transition-delay:.25s}
.menu.open li:nth-child(5) a{transition-delay:.30s}
.menu.open li:nth-child(6) a{transition-delay:.35s}
.menu-foot{margin-top:12vw;display:flex;gap:6vw}
.menu-foot a{font-family:'Inter',sans-serif;text-transform:uppercase;font-size:3.2vw;letter-spacing:.14em;font-weight:600;opacity:.65}

/* ==========================================================================
   HERO : le mur graffé
   ========================================================================== */
.hero{position:relative;height:100vh;height:100svh;min-height:44vw;overflow:hidden;background:var(--noir);color:var(--blanc)}
.hero-bg{position:absolute;inset:0;transform:scale(1.08);opacity:0;transition:opacity 1.1s var(--ease),transform 1.4s var(--ease)}
.loaded .hero-bg{opacity:1;transform:scale(1)}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,11,13,.55) 0%,rgba(13,11,13,.12) 30%,rgba(13,11,13,.18) 52%,rgba(13,11,13,.80) 84%,rgba(13,11,13,.95) 100%)}
.hero .grain{opacity:.14;mix-blend-mode:soft-light;z-index:1}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(13,11,13,.88) 0%,rgba(13,11,13,.62) 26%,rgba(13,11,13,0) 52%)}

.hero .hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-top:6vw;padding-bottom:4vw}
.hero-title{max-width:46vw}
.hero-title .display{color:var(--blanc)}
.hero-title .display em{font-style:normal;color:var(--orange)}
.hero-eyebrow{color:var(--orange);margin-bottom:1.6vw}
.hero-sub{max-width:26vw;margin-top:1.4vw;color:var(--blanc);opacity:.85}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75vw;margin-top:2.2vw}

.hero-side{position:absolute;right:2.5vw;bottom:9vw;width:16vw;text-align:right;z-index:2}
.hero-stats{display:flex;gap:2.4vw;margin-top:2.4vw;flex-wrap:wrap}
.hero-stats .st{display:flex;flex-direction:column;gap:.2vw}
.stat-num{font-size:2.25vw;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.stat-num,.step-n{letter-spacing:.01em}
.hero-stats .lb{font-size:.72vw;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

.scroll-hint{position:absolute;left:50%;bottom:2vw;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.6vw;font-size:max(12px,.7vw);letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.scroll-hint .line{width:1px;height:3vw;background:linear-gradient(180deg,var(--orange),transparent);animation:scrollpulse 2s ease-in-out infinite}
@keyframes scrollpulse{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ==========================================================================
   INTRO / MANIFESTE
   ========================================================================== */
.cols{display:flex;gap:2.5vw}
.col-num{width:16vw;flex:0 0 auto}
.col-main{flex:1}
.col-aside{width:20vw;flex:0 0 auto}

.square{display:block;width:1vw;height:1vw;border-radius:.12vw;background:var(--orange);margin-bottom:1vw}

/* ==========================================================================
   ÉTAPES (sticky scroll)
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25vw;margin-top:4vw}
.step{position:relative;padding:2vw 1.75vw;border-radius:.75vw;background:var(--blanc-10);
  border:1px solid var(--blanc-20);overflow:hidden;transition:background .4s var(--ease),transform .4s var(--ease)}
.s-light .step{background:rgba(13,11,13,.04);border-color:var(--noir-20)}
.step:hover{background:var(--orange);color:var(--noir);transform:translateY(-.4vw)}
.step:hover .step-n,.step:hover .step-txt{color:var(--noir);opacity:1}
.step-n{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;font-size:max(26px,3vw);line-height:1;color:var(--orange);font-variant-numeric:tabular-nums;margin-bottom:1.4vw;transition:color .4s}
.step h3{margin-bottom:.6vw}
.step-txt{opacity:.7;transition:opacity .4s,color .4s}

/* ==========================================================================
   VALEURS (cartes image)
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1vw;margin-top:3.5vw}
.card{position:relative;border-radius:.75vw;overflow:hidden;min-height:20vw;display:flex;flex-direction:column;justify-content:flex-end;padding:1.55vw;color:var(--blanc)}
.card-bg{position:absolute;inset:0}
.card-bg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,13,.15),rgba(13,11,13,.88))}
.card:hover .card-bg img{transform:scale(1.06)}
.card-body{position:relative;z-index:1}
.card-body h3{margin-bottom:.6vw}
.card-body p{opacity:.82}
.card .square{margin-bottom:1.2vw}

/* ==========================================================================
   GRILLE ARTICLES / LIENS
   ========================================================================== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1vw;margin-top:3vw}
.tile{display:block;color:inherit}

/* Ces conteneurs sont des <span> : sans display:block, aspect-ratio est ignoré
   et les éléments positionnés s'ancrent sur une boîte inline écrasée. */
.tile-media{display:block;position:relative;border-radius:.75vw;overflow:hidden;aspect-ratio:4/3}
.grid3--home{max-width:58vw;margin:3vw auto 0}
.grid3--home .tile-media{aspect-ratio:1/1}
.grid3--compact{gap:.85vw}
.grid3--compact .tile-media{aspect-ratio:16/11}
.grid3--compact .tile-body{padding-top:.9vw}
.grid3--compact .h3{font-size:max(13px,1.05vw)}

/* Page blog : sections resserrées pour entrevoir la suivante */
.pg-blog .phero{min-height:24vw}
.pg-blog .section{padding:5.5vw 0}
.pg-blog .cta-final{padding-top:5.5vw}
@media all and (max-width:1080px){
  .pg-blog .phero{padding:11vw 0 5vw}
}
@media all and (max-width:640px){
  .pg-blog .phero{padding:22vw 0 8vw}
}

/* Page partenariats : hero réduit, photo recadrée sur les visages */
.pg-partenariats .phero{min-height:22vw}
@media all and (max-width:1080px){
  .pg-partenariats .phero{padding:10vw 0 4vw}
}
@media all and (max-width:640px){
  .pg-partenariats .phero{min-height:0;padding:24vw 0 8vw}
}
.tile-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform .9s var(--ease)}
.tile-media::after{content:"";position:absolute;inset:0;background:var(--noir);
  opacity:.18;transition:opacity .45s var(--ease)}

.tile-tags{position:absolute;top:1.1vw;left:1.1vw;right:1.1vw;z-index:2;
  display:flex;flex-wrap:wrap;gap:.45vw}
.tag{background:var(--blanc);color:var(--noir);font-size:.68vw;letter-spacing:.1em;
  line-height:2vw;padding:0 1vw;border-radius:1.2vw;white-space:nowrap;
  transform:translateY(0);transition:transform .45s var(--ease)}
.tag--perso{background:var(--orange);color:var(--noir);align-self:flex-start;text-transform:uppercase}
.tag--team{background:var(--blanc);color:var(--noir);align-self:flex-start;text-transform:uppercase}
.s-light .tag--team{background:var(--noir);color:var(--blanc)}

.perso-input{width:100%;font-family:'Inter',sans-serif;font-size:max(13px,.85vw);
  padding:.6vw .8vw;border-radius:.4vw;border:1px solid var(--blanc-20);
  background:rgba(255,255,255,.06);color:var(--blanc)}
.s-light .perso-input{background:rgba(13,11,13,.04);border-color:var(--noir-20);color:var(--noir)}
.perso-input::placeholder{color:var(--blanc-60)}
.s-light .perso-input::placeholder{color:var(--gris)}
.perso-input:focus{outline:none;border-color:var(--orange)}
select.perso-input{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F25C05' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7vw center;background-size:1vw;padding-right:2.2vw}
.perso-input option{background:var(--noir);color:var(--blanc)}
.s-light .perso-input option{background:var(--blanc);color:var(--noir)}

.tile-btn{display:block;position:absolute;left:1.1vw;right:1.1vw;bottom:1.1vw;z-index:2;
  opacity:0;transform:translateY(.8vw);
  transition:opacity .4s var(--ease),transform .45s var(--ease)}
.tile-btn .btn{display:flex;width:100%;justify-content:center}

.tile-body{display:block;padding-top:1.1vw}
.tile-body .h3{display:block;transform:translateY(0);transition:transform .45s var(--ease)}
.tile-body .rule{display:block;height:1px;background:currentColor;opacity:.2;
  margin:1vw 0;position:relative}
.tile-body .rule::after{content:"";position:absolute;right:0;top:0;height:100%;width:0;
  background:var(--orange);opacity:1;
  transition:width .5s var(--ease),left .5s var(--ease),right .5s var(--ease)}
.tile-meta{display:flex;gap:1.2vw;font-size:.72vw}
.tile-meta .k{opacity:.4;margin-right:.4vw}

/* Survol : un seul mouvement lisible, pas cinq en même temps.
   Les étiquettes restent en place, elles informent. */
.tile:hover .tile-media img,.tile:focus-visible .tile-media img{transform:scale(1.06)}
.tile:hover .tile-media::after,.tile:focus-visible .tile-media::after{opacity:.5}
.tile:hover .tag,.tile:focus-visible .tag{transform:translateY(-.25vw)}
.tile:hover .tile-btn,.tile:focus-visible .tile-btn{opacity:1;transform:translateY(0)}
.tile:hover .tile-body .h3,.tile:focus-visible .tile-body .h3{transform:translateY(-.15vw)}
.tile:hover .rule::after,.tile:focus-visible .rule::after{width:100%;left:0;right:auto}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{overflow:hidden;white-space:nowrap;display:flex}
.marquee-track{display:flex;flex:0 0 auto;animation:marq 9s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.marquee-band{background:var(--orange);color:var(--noir);padding:1.1vw 0;overflow:hidden}
.marquee-band .it{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.9vw;line-height:1;padding:0 1.6vw;display:inline-flex;align-items:center;gap:1.6vw}
.marquee-band .it::after{content:"";width:.55vw;height:.55vw;border-radius:.08vw;background:var(--noir);display:inline-block}

.langs{padding:5vw 0}
.langs-head{margin-bottom:2.6vw}
.langs .marquee-track{animation-duration:58s}
.langs .it{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 2vw;position:relative;opacity:.28;
  transition:opacity .35s var(--ease),color .35s var(--ease)}
.langs .it::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:.4vw;height:.4vw;border-radius:.06vw;background:var(--orange);opacity:.5}
.langs .it .w{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:2.4vw;line-height:1.15;color:var(--noir)}
.langs .it .c{font-size:.72vw;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;margin-top:.35vw;color:var(--noir);opacity:.55;white-space:nowrap}
.langs .it:hover{opacity:1}
.langs .it:hover .w{color:var(--orange)}

/* ==========================================================================
   TÉMOIGNAGES
   ========================================================================== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25vw;margin-top:3vw}
.quote{background:var(--blanc-10);border:1px solid var(--blanc-20);border-radius:.75vw;padding:1.75vw;display:flex;flex-direction:column;gap:1.2vw}
.s-light .quote{background:rgba(13,11,13,.04);border-color:var(--noir-20)}
.quote p{flex:1}
.quote .who{font-size:.75vw;letter-spacing:.12em;text-transform:uppercase;color:var(--blanc);font-weight:600}
.s-light .quote .who{color:var(--noir)}
.quote .stars{color:var(--blanc);letter-spacing:.15em;font-size:.8vw}
.s-light .quote .stars{color:var(--orange)}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta-final{text-align:left}
.cta-final .h2{max-width:44vw}
.cta-final .btns{display:flex;gap:.75vw;margin-top:2.2vw;flex-wrap:wrap}

/* ==========================================================================
   FOOTER (révélé par le scroll, façon HOY)
   ========================================================================== */
.page{position:relative;z-index:2;background:var(--noir)}
.ftr{position:fixed;left:0;right:0;bottom:0;z-index:1;background:var(--orange);color:var(--noir);padding-top:4vw}
.ftr-mark{width:9vw;height:auto;margin:0 auto 3vw}
.ftr-cols{display:flex;gap:2.5vw;padding-bottom:5vw}
.ftr-col{flex:1}
.ftr-col h4{margin-bottom:.8vw}
.ftr-col a{opacity:1;transition:opacity .3s}
.ftr-col a:hover{opacity:.5}
.ftr-bot{border-top:1px solid var(--noir-20);padding:1.25vw 0;display:flex;justify-content:space-between;font-size:max(12px,.75vw)}

/* ==========================================================================
   CURSEUR
   ========================================================================== */
.cursor{position:fixed;top:0;left:0;width:.6vw;height:.6vw;margin:-.3vw 0 0 -.3vw;border-radius:.12vw;background:var(--orange);
  z-index:100;pointer-events:none;opacity:0;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s,border-radius .3s}
.cursor.on{opacity:1}
.cursor.big{width:2.8vw;height:2.8vw;margin:-1.4vw 0 0 -1.4vw;border-radius:2vw;mix-blend-mode:difference}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ==========================================================================
   LISIBILITÉ : ombres portées
   Tout texte posé sur une image reçoit une ombre douce et large : elle reste
   invisible sur aplat mais garantit le contraste sur n'importe quelle photo.
   ========================================================================== */
.on-image{
  text-shadow:0 .08em .5em rgba(13,11,13,.85),
              0 .02em .12em rgba(13,11,13,.75);
}
 /* Garde-fou : un élément qui porte son propre fond opaque n'a jamais besoin
   d'ombre de texte. Sans cette règle, .on-image se propage aux pastilles
   blanches et salit du noir sur blanc. */
.tag,.btn,.store,.signup-done,.gauge,.mapcard,.consentbox,.field input,
.on-image .tag,.on-image .btn{text-shadow:none}

.on-image-strong{
  text-shadow:0 .1em .7em rgba(13,11,13,.95),
              0 .03em .18em rgba(13,11,13,.9),
              0 0 .04em rgba(13,11,13,.6);
}
.hero-title .display,.hero-sub,.hero-eyebrow,.hero-stats,.scroll-hint{
  text-shadow:0 .08em .6em rgba(13,11,13,.9), 0 .02em .14em rgba(13,11,13,.8);
}
.card-body,.hdr:not(.scrolled) .hdr-nav a,
.hdr:not(.scrolled) .hdr-brand .wordmark,.hdr:not(.scrolled) .hdr-social{
  text-shadow:0 .06em .45em rgba(13,11,13,.8), 0 .02em .1em rgba(13,11,13,.7);
}
.hdr:not(.scrolled) .hdr-brand .mark,.hdr:not(.scrolled) .hdr-social svg{
  filter:drop-shadow(0 .05em .35em rgba(13,11,13,.85));
}
/* ==========================================================================
   BADGES DES STORES (visuels officiels Apple / Google)
   ========================================================================== */
.stores{display:flex;flex-wrap:wrap;gap:.9vw;align-items:center}
.store{display:block;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.store img{height:3.4vw;width:auto;display:block;
  filter:drop-shadow(0 .3vw .9vw rgba(13,11,13,.55))}
.store:hover{transform:translateY(-.2vw)}
.store:active{transform:translateY(0)}
/* ==========================================================================
   ICÔNES SOCIALES
   ========================================================================== */
.hdr-social a{display:inline-flex;align-items:center;justify-content:center;
  width:max(24px,1.5vw);height:max(24px,1.5vw)}
.hdr-social svg{width:100%;height:auto;fill:currentColor;transition:fill .3s}
.soc-list{display:flex;gap:1vw}
.soc-list a{display:inline-flex;align-items:center;justify-content:center;
  width:2.6vw;height:2.6vw;border-radius:50%;background:var(--noir);color:var(--orange);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.soc-list a:hover{background:var(--blanc);color:var(--noir);transform:translateY(-.2vw)}
.soc-list svg{width:45%;height:auto;fill:currentColor}
/* ==========================================================================
   INSCRIPTION NOUVELLE APPLI
   Les couleurs du formulaire sont pilotées par des variables, réglées selon
   le fond de section : sur l'orange de la charte, l'accent devient le noir
   (un orange sur orange serait illisible).
   ========================================================================== */
.signup{
  position:relative;
  --f-bg:rgba(255,255,255,.06);
  --f-bd:var(--blanc-20);
  --f-bd-on:var(--orange);
  --f-accent:var(--orange);
  --f-err:#FF6B6E;
}
.s-light.signup{--f-bg:rgba(13,11,13,.04);--f-bd:var(--noir-20);--f-err:#C42B2E}
.s-orange.signup{
  --f-bg:rgba(255,255,255,.94);
  --f-bd:rgba(13,11,13,.28);
  --f-bd-on:var(--noir);
  --f-accent:var(--noir);
  --f-err:#7A1E00;
}
.signup-grid{display:flex;gap:2.5vw;align-items:flex-start;margin-top:3vw;
  padding-left:18.5vw}  /* aligné sous le titre, comme les autres blocs */
.signup-form{flex:1;max-width:34vw}
.signup-side{width:26vw;flex:0 0 auto}
.field{position:relative;margin-bottom:1vw}
.field label{display:block;font-size:.72vw;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;opacity:.75;margin-bottom:.45vw}
.field .req{color:var(--f-accent);font-weight:700}
.field input{
  width:100%;font-family:'Inter',sans-serif;font-size:.95vw;line-height:1.4;
  color:var(--noir);background:var(--f-bg);
  border:1px solid var(--f-bd);border-radius:.4vw;
  padding:.85vw 1vw;transition:border-color .25s,box-shadow .25s;
}
.s-dark .field input,.s-gris .field input{color:var(--blanc)}
.field input::placeholder{color:currentColor;opacity:.4}
.field input:focus{outline:none;border-color:var(--f-bd-on);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--f-bd-on) 30%, transparent)}
.field.invalid input{border-color:var(--f-err);box-shadow:0 0 0 2px color-mix(in srgb, var(--f-err) 25%, transparent)}
.field .err{display:block;font-size:.72vw;font-weight:600;color:var(--f-err);margin-top:.35vw;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .25s,max-height .25s}
.field.invalid .err{opacity:1;max-height:3vw}
.consent{display:flex;gap:.7vw;align-items:flex-start;margin:1.2vw 0 1.6vw;cursor:pointer}
.consent input{appearance:none;flex:0 0 auto;width:1.15vw;height:1.15vw;margin-top:.12vw;
  background:var(--f-bg);border:1px solid var(--f-bd);border-radius:.15vw;position:relative;
  cursor:pointer;transition:background .2s,border-color .2s}
.consent input:checked{background:var(--f-accent);border-color:var(--f-accent)}
.consent input:checked::after{content:"";position:absolute;left:32%;top:10%;
  width:26%;height:56%;border:solid var(--blanc);border-width:0 .16vw .16vw 0;transform:rotate(45deg)}
.s-orange .consent input:checked::after{border-color:var(--orange)}
.consent.invalid input{border-color:var(--f-err);box-shadow:0 0 0 2px color-mix(in srgb, var(--f-err) 25%, transparent)}
.consent > span{font-size:.8vw;line-height:1.45;opacity:.92}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup-submit{border:none;font-family:inherit}
.signup-note{font-size:.72vw;opacity:.6;margin-top:1vw}
/* Compteur d'engouement */
.gauge{border:1px solid var(--f-bd);border-radius:.75vw;padding:1.9vw;background:var(--f-bg)}
.s-orange .gauge{background:rgba(13,11,13,.06);border-color:rgba(13,11,13,.3)}
.gauge-label{font-size:.72vw;letter-spacing:.16em;text-transform:uppercase;opacity:.7;font-weight:600}
.gauge-num{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;font-size:4.2vw;line-height:1;
  color:var(--f-accent);margin:.5vw 0 .3vw;font-variant-numeric:tabular-nums}
.gauge-sub{font-size:.82vw;opacity:.75}
.gauge-bar{height:.45vw;border-radius:.45vw;background:var(--f-bd);margin-top:1.4vw;overflow:hidden}
.s-orange .gauge-bar{background:rgba(13,11,13,.18)}
.gauge-bar i{display:block;height:100%;width:0;background:var(--f-accent);
  border-radius:.45vw;transition:width 1.2s var(--ease)}
.gauge-goal{display:flex;justify-content:space-between;font-size:.72vw;opacity:.6;margin-top:.6vw}
/* État après envoi */
.signup-done{display:none;border-radius:.75vw;border:1px solid var(--f-accent);
  background:var(--f-bg);padding:2vw}
.s-orange .signup-done{background:rgba(13,11,13,.06)}
.signup.sent .signup-done{display:block}
.signup.sent .signup-form form{display:none}
.signup-done .h3{color:var(--f-accent);margin-bottom:.6vw}
/* lien secondaire du hero (sous les badges) */
.hero-alt{display:inline-block;padding:.3em 0;min-height:24px;margin-top:1.3vw;font-size:.85vw;letter-spacing:.02em;
  color:var(--blanc);opacity:.8;border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:.15vw;transition:color .3s,border-color .3s,opacity .3s;
  text-shadow:0 .06em .45em rgba(13,11,13,.9)}
.hero-alt strong{font-weight:600;color:var(--orange)}
.hero-alt:hover{opacity:1;border-color:var(--orange)}
.hero-cta{flex-direction:column;align-items:flex-start}


/* ==========================================================================
   CARTE DE FRANCE
   Tracé et points générés depuis les données officielles (tools/build_map.py).
   ========================================================================== */
.mapwrap{display:flex;gap:3vw;align-items:flex-start;margin-top:3.5vw;padding-left:16vw}
.mapstage{position:relative;flex:1;max-width:43vw}
.mapsvg{width:100%;height:auto;overflow:visible}
.maploading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.8vw;opacity:.4}
.mapwrap.ready .maploading{display:none}

.mapoutline{stroke:var(--blanc);stroke-width:1.6;opacity:.22;
  stroke-linejoin:round;stroke-dasharray:6000;stroke-dashoffset:6000}
.mapwrap.ready .mapoutline{animation:mapdraw 2.4s var(--ease) forwards}
@keyframes mapdraw{to{stroke-dashoffset:0}}

.mapdots circle{fill:var(--orange);opacity:0;transform-box:fill-box;transform-origin:center}
.mapwrap.ready .mapdots circle{animation:dotin .5s var(--ease) forwards, dotpulse 3.2s ease-in-out infinite}
@keyframes dotin{from{opacity:0;transform:scale(.2)}to{opacity:.9;transform:scale(1)}}
@keyframes dotpulse{0%,100%{opacity:.55}50%{opacity:1}}
.mapdots circle.amiens{fill:var(--blanc)}

/* halo respirant sur les grosses villes */
.mapdots circle.halo{fill:var(--orange);opacity:.16}
.mapwrap.ready .mapdots circle.halo{animation:halo 3.6s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(1);opacity:.14}50%{transform:scale(1.9);opacity:0}}

/* joueurs fictifs autour du visiteur */
.mapghosts circle{fill:var(--blanc);opacity:0}
.mapghosts circle.on{animation:ghost 4.5s ease-in-out infinite}
@keyframes ghost{0%{opacity:0;transform:translateY(0)}
  20%{opacity:.85}70%{opacity:.5}100%{opacity:0;transform:translateY(-4px)}}

/* position du visiteur : point radar */
.mapme{opacity:0;transition:opacity .5s var(--ease)}
.mapme.on{opacity:1}
.mapme .me-core{fill:var(--blanc);stroke:var(--orange);stroke-width:2.5}
.mapme .me-ring{fill:none;stroke:var(--orange);stroke-width:2;transform-box:fill-box;transform-origin:center}
.mapme.on .me-ring{animation:radar 2.6s ease-out infinite}
.mapme.on .me-ring:nth-child(2){animation-delay:.85s}
.mapme.on .me-ring:nth-child(3){animation-delay:1.7s}
@keyframes radar{0%{transform:scale(.3);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.mapme text{fill:var(--blanc);font-family:'Inter',sans-serif;font-size:20px;font-weight:600;
  paint-order:stroke;stroke:rgba(13,11,13,.85);stroke-width:5px}

.mapside{width:24vw;flex:0 0 auto}
.mapcard{border:1px solid var(--blanc-20);border-radius:.75vw;padding:1.7vw;background:rgba(255,255,255,.05)}
.mapcard-label{font-size:.72vw;letter-spacing:.16em;text-transform:uppercase;opacity:.55;font-weight:600}
.mapcard-city{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:2vw;line-height:1.1;color:var(--orange);margin:.5vw 0 .6vw}
.mapcard-note{font-size:.78vw;line-height:1.5;opacity:.7}
.mapcard.denied .mapcard-city{color:var(--blanc);opacity:.5}

.maplegend{margin-top:1.6vw;display:flex;flex-direction:column;gap:.7vw;
  font-size:.75vw;opacity:.7}
.maplegend li{display:flex;align-items:center;gap:.7vw}
.lg{width:.7vw;height:.7vw;border-radius:50%;flex:0 0 auto}
.lg-city{background:var(--orange)}
.lg-amiens{background:var(--blanc)}
.lg-me{background:var(--blanc);box-shadow:0 0 0 .18vw var(--orange)}

/* ==========================================================================
   BANDEAU DE CONSENTEMENT (RGPD)
   ========================================================================== */
.consentbar{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:1.25vw 2.5vw 1.6vw;
  display:flex;justify-content:flex-end;pointer-events:none}
.consentbar[hidden]{display:none}
.consentbox{pointer-events:auto;width:30vw;background:var(--noir);color:var(--blanc);
  border:1px solid var(--blanc-20);border-radius:.9vw;padding:1.7vw;
  box-shadow:0 1.5vw 4vw rgba(0,0,0,.6);
  transform:translateY(1.5vw);opacity:0;
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
.consentbar.in .consentbox{transform:none;opacity:1}
.consentbox .h4{color:var(--orange);margin-bottom:.7vw}
.consentlist{margin:1.2vw 0 1.4vw;display:flex;flex-direction:column;gap:.9vw}
.consentlist li{display:flex;gap:.8vw;align-items:flex-start;font-size:.75vw;line-height:1.45;opacity:.85}
.consentlist strong{font-weight:600}
.consentlist em{font-style:normal;opacity:.55}
.consentsw{position:relative;flex:0 0 auto;width:2.2vw;height:1.2vw;margin-top:.1vw;cursor:pointer}
.consentsw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.consentsw i{position:absolute;inset:0;border-radius:1.2vw;background:var(--blanc-20);
  transition:background .25s var(--ease)}
.consentsw i::after{content:"";position:absolute;top:.15vw;left:.15vw;width:.9vw;height:.9vw;
  border-radius:50%;background:var(--blanc);transition:transform .25s var(--ease)}
.consentsw input:checked+i{background:var(--orange)}
.consentsw input:checked+i::after{transform:translateX(1vw);background:var(--noir)}
.consentsw.is-locked i{background:var(--orange);opacity:.55}
.consentsw.is-locked i::after{transform:translateX(1vw);background:var(--noir)}
.consentbtns{display:flex;flex-wrap:wrap;gap:.6vw}
.consentbtns .btn{flex:1 1 auto;justify-content:center}
.consentnote{font-size:.68vw;opacity:.45;margin-top:.9vw}
.ftr-bot a{text-decoration:underline;text-underline-offset:.2em}


/* ==========================================================================
   LISIBILITÉ : plancher de taille
   Les tailles en vw descendaient sous 10 px sur petits écrans. max() garde
   l'échelle fluide sur grand écran et pose un minimum lisible partout.
   ========================================================================== */
body{font-size:max(14px,.875vw)}
.text{font-size:max(14px,.875vw)}
.text-s{font-size:max(13px,.75vw)}
.lead{font-size:max(16px,1.125vw)}
.eyebrow{font-size:max(12px,.75vw)}
.btn{font-size:max(13px,.75vw)}
.tag{font-size:max(12px,.68vw)}
.hdr-nav a{font-size:max(13px,.8125vw)}
.field label,.gauge-label,.mapcard-label{font-size:max(12px,.72vw)}
.field .err,.signup-note,.gauge-goal,.consentnote,.maploading{font-size:max(12px,.72vw)}
.gauge-sub,.mapcard-note,.consent > span,.consentlist li{font-size:max(13px,.8vw)}
.quote .who,.quote .stars,.maplegend{font-size:max(12px,.75vw)}
.hero-stats .lb{font-size:max(12px,.72vw)}
.langs .it .c{font-size:max(12px,.72vw)}

/* ==========================================================================
   CONTRASTES
   Valeurs relevées puis corrigées pour atteindre le seuil WCAG AA.
   ========================================================================== */
.soft{opacity:.78}
.faint{opacity:.6}
.langs .it{opacity:.6}
.langs .it .c{opacity:1;color:var(--noir)}
.langs .it:hover{opacity:1}
.tile-meta .k{opacity:.6}
.req{color:currentColor;font-weight:700}
.signup-note{opacity:.8}
.gauge-label{opacity:.85}
.gauge-sub{opacity:.9}
.gauge-goal{opacity:.9}
.field label{opacity:.85}
.mapcard-label{opacity:.75}
.mapcard-note{opacity:.85}
.maplegend{opacity:.85}
.consentlist li{opacity:1}
.consentnote{opacity:.6}
.hero-alt{opacity:1}

/* ==========================================================================
   CIBLES TACTILES : 24 px minimum (WCAG 2.2)
   ========================================================================== */
.ftr-col .text a,.ftr-bot a{display:inline-block;padding:.35em 0;min-height:24px}
.maplegend li{min-height:24px}
.consent{min-height:44px;align-items:center}
.consent input{width:max(24px,1.15vw);height:max(24px,1.15vw)}

/* Lien d'évitement */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);
  color:var(--noir);padding:.9em 1.4em;font-weight:600;border-radius:0 0 .5vw 0}
.skip:focus{left:0}

/* ==========================================================================
   FAITS DU HERO (remplacent les chiffres non vérifiés)
   ========================================================================== */
.hero-free{margin-top:1.1vw;font-size:max(12px,.75vw);letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--orange)}

/* Relances vers les stores en cours de page */
.steps-cta{display:flex;align-items:center;gap:1.6vw;flex-wrap:wrap;margin-top:3vw;
  padding-left:18.5vw}
.steps-cta .lead{margin:0}
.map-cta{margin-top:1.8vw;padding-top:1.6vw;border-top:1px solid var(--blanc-20)}
.map-cta .text-s{opacity:.75;margin-bottom:.9vw}
.map-cta .store img{height:2.9vw}

/* ==========================================================================
   BARRE DE TÉLÉCHARGEMENT PERSISTANTE
   ========================================================================== */
.dlbar{position:fixed;left:0;right:0;bottom:0;z-index:65;
  background:var(--noir);border-top:1px solid var(--blanc-20);
  transform:translateY(110%);transition:transform .45s var(--ease)}
.dlbar[hidden]{display:none}
.dlbar.in{transform:none}
.dlbar-in{display:flex;align-items:center;gap:1.6vw;padding:.9vw 2.5vw;color:var(--blanc)}
.dlbar-txt{flex:1;display:flex;flex-direction:column;line-height:1.25}
.dlbar-txt strong{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:max(15px,1.2vw);font-weight:400}
.dlbar-txt span{font-size:max(12px,.72vw);opacity:.7}
.dlbar .store img{height:2.6vw}
.dlbar-close{width:2.2vw;height:2.2vw;min-width:32px;min-height:32px;border-radius:50%;
  color:var(--blanc);font-size:1.4vw;line-height:1;opacity:.5;
  transition:opacity .3s,background .3s}
.dlbar-close:hover{opacity:1;background:var(--blanc-10)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{margin-top:3vw;padding-left:18.5vw;max-width:78vw}
.faq-item{border-top:1px solid var(--noir-20)}
.faq-item:last-child{border-bottom:1px solid var(--noir-20)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:2vw;
  padding:1.4vw 0;cursor:pointer;list-style:none;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:max(16px,1.25vw);line-height:1.25}
.faq-ic{position:relative;flex:0 0 auto;width:1.1vw;height:1.1vw;min-width:16px;min-height:16px}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;
  background:var(--orange);transform:translateY(-50%);transition:transform .3s var(--ease)}
.faq-ic::after{transform:translateY(-50%) rotate(90deg)}
.faq-item[open] .faq-ic::after{transform:translateY(-50%) rotate(0deg)}
.faq-a{padding:0 0 1.6vw;max-width:46vw}


/* ==========================================================================
   PAGES SECONDAIRES
   ========================================================================== */

/* Hero de page intérieure : plus bas que celui de l'accueil, l'image reste
   un décor et non le sujet. */
/* Page article de blog */
.article{max-width:44vw;margin:0 auto}
.article-body h2{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;
  font-size:max(19px,1.5vw);color:var(--blanc);margin:2.2vw 0 .8vw;text-transform:none}
.s-light .article-body h2{color:var(--noir)}
.article-body p{margin-bottom:1.1vw}
.article-body p:first-of-type{margin-top:0}
.article-body .stores{display:flex;gap:.8vw;flex-wrap:wrap}
.article-body .stores img{height:2.6vw;min-height:34px;width:auto}
.article-body h3{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;
  font-size:max(16px,1.15vw);color:var(--blanc);margin:1.8vw 0 .6vw;text-transform:none}
.s-light .article-body h3{color:var(--noir)}
.article-figure{margin:1.8vw 0;border-radius:.75vw;overflow:hidden}
.article-figure img{width:100%;height:auto;display:block;max-height:32vw;object-fit:cover}

.phero{position:relative;min-height:34vw;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--noir);color:var(--blanc);padding:12vw 0 5vw}
.phero-bg{position:absolute;inset:0}
.phero-bg img{width:100%;height:100%;object-fit:cover}
.phero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(13,11,13,.92) 0%,rgba(13,11,13,.7) 34%,rgba(13,11,13,.35) 68%),
             linear-gradient(0deg,rgba(13,11,13,.9) 0%,rgba(13,11,13,0) 55%)}
.phero .grain{opacity:.14;mix-blend-mode:soft-light}
.phero-in{position:relative;z-index:2}
.phero-eyebrow{color:var(--orange);margin-bottom:1.4vw;
  text-shadow:0 .06em .5em rgba(13,11,13,.9)}
.phero .h1{max-width:44vw;text-shadow:0 .08em .6em rgba(13,11,13,.9),0 .02em .14em rgba(13,11,13,.8)}
.phero-lead{max-width:32vw;margin-top:1.4vw;opacity:.88;
  text-shadow:0 .06em .5em rgba(13,11,13,.9)}

/* Récit : texte + image */
.story,.offer{display:flex;gap:2.5vw;align-items:flex-start;margin-top:3vw;padding-left:18.5vw}
.story-txt,.offer-txt{flex:1;max-width:34vw}
.story-img,.offer-img{width:26vw;flex:0 0 auto;margin:0;border-radius:.75vw;overflow:hidden;aspect-ratio:4/5}
.story-img img,.offer-img img{width:100%;height:100%;display:block;object-fit:cover}
.offer{align-items:center}
.story-img--h,.offer-img--h{width:34vw;aspect-ratio:3/2}
.offer-img--amb{aspect-ratio:6/5}

/* Étiquettes d'atouts */
.chips{display:flex;flex-wrap:wrap;gap:.5vw;margin-top:1.4vw}
.chip{font-size:max(12px,.7vw);letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  line-height:2.2vw;padding:0 1.1vw;border-radius:1.4vw;
  border:1px solid currentColor;opacity:.75}

.contact-img{margin:0;border-radius:.75vw;overflow:hidden}
.contact-img img{width:100%;height:auto;display:block}

/* Champs longs et listes déroulantes, alignés sur les champs texte */
.field select,.field textarea{
  width:100%;font-family:'Inter',sans-serif;font-size:max(14px,.95vw);line-height:1.4;
  color:var(--noir);background:var(--f-bg);border:1px solid var(--f-bd);
  border-radius:.4vw;padding:.85vw 1vw;transition:border-color .25s,box-shadow .25s}
.field textarea{resize:vertical;min-height:8vw}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.2vw) 55%,calc(100% - .85vw) 55%;
  background-size:.4vw .4vw,.4vw .4vw;background-repeat:no-repeat}
.s-dark .field select,.s-dark .field textarea,
.s-gris .field select,.s-gris .field textarea{color:var(--blanc)}
.field select:focus,.field textarea:focus{outline:none;border-color:var(--f-bd-on);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--f-bd-on) 30%, transparent)}
.field.invalid select,.field.invalid textarea{border-color:var(--f-err)}

/* Panier */
.cart-open{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:max(24px,1.6vw);height:max(24px,1.6vw)}
.cart-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:max(20px,1.4vw);height:max(20px,1.4vw);padding:0 .3vw;border-radius:1.4vw;
  background:var(--orange);color:var(--noir);font-size:max(12px,.65vw);font-weight:700;line-height:1}


/* ==========================================================================
   BOUTIQUE
   ========================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:.8vw;margin-top:3vw}
.pcard{border-radius:.75vw;overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid var(--blanc-20);display:flex;flex-direction:column;
  transition:transform .45s var(--ease),background .45s var(--ease)}
.s-light .pcard{background:rgba(13,11,13,.04);border-color:var(--noir-20)}
.pcard:hover{transform:translateY(-.4vw)}
/* Maillots : dos au survol, avant/arrière au clic */
.jersey-flip{position:relative}
.jersey-flip .img-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s var(--ease)}
.jersey-flip:hover .img-back{opacity:1}
.jersey-flip .flip-hint{
  position:absolute;left:50%;bottom:.8vw;transform:translateX(-50%);
  background:rgba(13,11,13,.75);color:var(--blanc);font-size:max(10px,.68vw);
  padding:.35vw .9vw;border-radius:2vw;opacity:0;transition:opacity .3s ease;white-space:nowrap;pointer-events:none;
}
.jersey-flip:hover .flip-hint{opacity:1}

/* Zoom produit (lightbox) */
.lightbox-overlay{
  display:none;position:fixed;inset:0;z-index:300;background:rgba(13,11,13,.92);
  align-items:center;justify-content:center;padding:5vw;cursor:zoom-out;gap:1.5vw;
}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:min(80vw,600px);max-height:82vh;border-radius:.75vw;
  box-shadow:0 2vw 5vw rgba(0,0,0,.5);cursor:default}
.lightbox-overlay img[hidden]{display:none}
.lightbox-close{
  position:absolute;top:3vw;right:3vw;width:2.6vw;height:2.6vw;min-width:38px;min-height:38px;
  border-radius:50%;border:1px solid var(--blanc-20);background:rgba(255,255,255,.06);color:var(--blanc);
  font-size:1.6vw;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lightbox-close:hover{background:var(--orange);border-color:var(--orange);color:var(--noir)}

.pcard-media{aspect-ratio:1/1;overflow:hidden;background:var(--noir);
  display:flex;align-items:center;justify-content:center}
.pcard-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform .9s var(--ease)}
/* Les visuels d'équipement remplissent la vignette, comme les autres produits. */
.pcard--wide .pcard-media{aspect-ratio:3/2}
.pcard--wide .pcard-media img{object-fit:cover}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.pcard-body{padding:.85vw;display:flex;flex-direction:column;gap:.35vw;flex:1}
.pcard-body .btn{align-self:flex-start;margin-top:auto}
.pcard-price{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;font-size:max(16px,1vw);
  line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.pgrid .h3{font-size:max(12.5px,.95vw)}
.pgrid .text-s{font-size:max(10.5px,.68vw)}
.pgrid .btn{font-size:max(10px,.64vw);padding:.5vw .85vw}

.sticker-lot-banner{display:flex;align-items:center;gap:1.1vw;margin-top:3vw;padding:1.1vw 1.4vw;
  border-radius:.7vw;background:var(--noir);color:var(--blanc)}
.s-light .sticker-lot-banner{background:var(--noir)}
.sticker-lot-banner .ic{flex:none;width:1.4vw;height:1.4vw;color:var(--orange)}
.sticker-lot-banner .ic svg{width:100%;height:100%;fill:currentColor}
.sticker-lot-banner strong{display:block;font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;
  font-size:max(15px,1.05vw);margin-bottom:.15vw}
.sticker-lot-banner span{display:block;font-size:max(12px,.8vw);opacity:.7}

/* Stickers : ligne swipeable horizontale */
.sticker-swipe-wrap{margin-top:2.2vw;margin-left:-2.5vw;margin-right:-2.5vw;padding:0 2.5vw}
.sticker-swipe{display:flex;gap:.8vw;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:.6vw;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.sticker-swipe::-webkit-scrollbar{height:4px}
.sticker-swipe::-webkit-scrollbar-thumb{background:var(--blanc-20);border-radius:4px}
.s-light .sticker-swipe::-webkit-scrollbar-thumb{background:var(--noir-20)}
.sticker-swipe .pcard{flex:0 0 11vw;scroll-snap-align:start}
.sticker-swipe .pcard-body{padding:.8vw;gap:.35vw}
.sticker-swipe .h3{font-size:max(12px,.85vw);line-height:1.2}
.sticker-swipe .btn{font-size:max(10px,.65vw);padding:.45vw .75vw}
.sticker-swipe .perso-input{font-size:max(11px,.72vw);padding:.4vw .6vw}
.sticker-swipe .tag--perso{font-size:max(9px,.6vw);line-height:1.7vw;padding:0 .8vw}

/* Tiroir du panier */
.cart-overlay{position:fixed;inset:0;z-index:74;background:rgba(13,11,13,.7);opacity:0;
  transition:opacity .35s var(--ease)}
.cart-overlay[hidden]{display:none}
.cart-overlay.in{opacity:1}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:75;width:26vw;min-width:320px;
  background:var(--noir);color:var(--blanc);border-left:1px solid var(--blanc-20);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .45s var(--ease)}
.cart-drawer[hidden]{display:none}
.cart-drawer.in{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:1vw;
  padding:1.6vw;border-bottom:1px solid var(--blanc-20)}
.cart-close{width:max(32px,2.2vw);height:max(32px,2.2vw);border-radius:50%;color:var(--blanc);
  font-size:max(20px,1.4vw);line-height:1;opacity:.6;transition:opacity .3s,background .3s}
.cart-close:hover{opacity:1;background:var(--blanc-10)}
.cart-items{flex:1;overflow-y:auto;padding:1.6vw}
.cart-foot{padding:1.6vw;border-top:1px solid var(--blanc-20);display:flex;
  flex-direction:column;gap:.8vw}
.cart-sub{display:flex;justify-content:space-between;align-items:baseline;
  font-size:max(13px,.85vw)}
.cart-sub strong{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;font-size:max(18px,1.5vw);
  font-weight:400;color:var(--orange)}
.cart-foot .btn{justify-content:center}

/* Grille de designs de maillots */
.designs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25vw;margin-top:3vw;
  padding-left:18.5vw}
.design{margin:0;border-radius:.75vw;overflow:hidden}
.design img{width:100%;height:auto;display:block}

.cards-2{grid-template-columns:repeat(2,1fr)}
.phero-cta{margin-top:2vw}

@media all and (max-width:1080px){
  body{font-size:max(12px,1.296vw)}
  .text{font-size:max(12px,1.296vw)}.text-s{font-size:max(12px,1.111vw)}.lead{font-size:max(12px,1.667vw)}
  .display{font-size:6.6vw}.h1{font-size:5vw}.h2{font-size:4.1vw}.h3{font-size:2.4vw}.h4{font-size:max(12px,1.8vw)}
  .eyebrow{font-size:max(12px,1.111vw)}
  .wrap{padding:0 3.704vw}.wrap-s{padding:0 10vw}
  .section{padding:11vw 0}
  .hdr{height:7.3vw;line-height:7.3vw}
  .hdr-nav ul{gap:2.6vw}.hdr-nav a{font-size:max(12px,1.2vw)}
  .hdr-brand .wordmark{font-size:max(12px,1.8vw)}.hdr-brand .mark{width:3.2vw}
  .btn{font-size:max(12px,1.111vw);height:4.1vw;line-height:4.1vw;padding:0 2vw;border-radius:3vw;gap:1.2vw}
  .btn .lbl{height:4.1vw}.btn .ic{width:1.7vw}
  .hero-title{max-width:74vw}
  .hero-sub{max-width:44vw}
  .hero-alt{font-size:max(12px,1.25vw);margin-top:2vw}
  .lead-narrow{max-width:46vw;margin-top:2.4vw}
  .mt-s{margin-top:1.2vw}.mt-m{margin-top:2.4vw}.mt-l{margin-top:3.2vw}.mb-m{margin-bottom:2.4vw}
  .hero-side{display:none}
  .stat-num{font-size:3.4vw}.hero-stats .lb{font-size:max(12px,1.05vw)}
  .steps,.cards,.grid3,.quotes{grid-template-columns:repeat(2,1fr);gap:1.85vw}
  .col-num{width:12vw}.col-aside{width:24vw}
  .tag{font-size:max(12px,1vw);line-height:3.1vw;padding:0 1.6vw}
  .tile-meta{font-size:max(12px,1.05vw)}
  .marquee-band .it{font-size:3vw}
  .langs{padding:8vw 0}
  .langs .it{padding:0 3vw;opacity:.6}
  .langs .it .w{font-size:3.6vw}
  .langs .it .c{font-size:max(12px,1.05vw)}
  .ftr-mark{width:14vw}

  .pgrid{grid-template-columns:repeat(3,1fr);gap:1.85vw}
  .pcard-body{padding:2.2vw}
  .sticker-swipe .pcard{flex:0 0 17vw}
  .sticker-swipe-wrap{margin-left:-3.7vw;margin-right:-3.7vw;padding:0 3.7vw}
  .designs{padding-left:14.8vw;gap:1.85vw}
  .cart-drawer{width:42vw}

  .phero{min-height:44vw;padding:16vw 0 7vw}
  .phero .h1{max-width:70vw}
  .phero-lead{max-width:52vw}
  .story,.offer{padding-left:14.8vw;gap:3.7vw}
  .story-txt,.offer-txt{max-width:none}
  .story-img,.offer-img{width:30vw}
  .chip{line-height:3.2vw;padding:0 1.8vw}
  .field select,.field textarea{font-size:max(15px,1.5vw);padding:1.3vw 1.5vw}
  .field textarea{min-height:14vw}

  .hero-free{margin-top:1.8vw}
  .steps-cta{padding-left:14.8vw;gap:2.4vw}
  .map-cta .store img{height:4vw}
  .dlbar-in{padding:1.4vw 3.704vw;gap:2.4vw}
  .dlbar .store img{height:4vw}
  .faq-list{padding-left:14.8vw;max-width:none}
  .faq-a{max-width:60vw}

  /* carte + consentement */
  .mapwrap{padding-left:14.8vw;gap:3.7vw}
  .mapstage{max-width:44vw}
  .mapside{width:28vw}
  .mapcard{padding:2.6vw;border-radius:1.1vw}
  .mapcard-label{font-size:max(12px,1.05vw)}
  .mapcard-city{font-size:2.8vw}
  .mapcard-note{font-size:max(12px,1.15vw)}
  .maplegend{font-size:max(12px,1.1vw);gap:1.2vw;margin-top:2.6vw}
  .lg{width:1.1vw;height:1.1vw}
  .maploading{font-size:max(12px,1.2vw)}
  .consentbox{width:44vw;padding:2.6vw;border-radius:1.3vw}
  .consentlist li{font-size:max(12px,1.15vw)}
  .consentsw{width:3.4vw;height:1.9vw}
  .consentsw i::after{width:1.45vw;height:1.45vw;top:.22vw;left:.22vw}
  .consentsw input:checked+i::after,.consentsw.is-locked i::after{transform:translateX(1.5vw)}
  .consentnote{font-size:max(12px,1.05vw)}

  /* nouveaux blocs */
  .store img{height:5vw}
  .stores{gap:1.4vw}
  .hdr-social a{width:max(24px,2.2vw);height:max(24px,2.2vw)}
  .soc-list a{width:4vw;height:4vw}
  .signup-grid{gap:3.7vw;padding-left:14.8vw}
  .signup-form{max-width:none}
  .signup-side{width:32vw}
  .field label{font-size:max(12px,1.05vw)}
  .field input{font-size:max(12px,1.5vw);padding:1.3vw 1.5vw;border-radius:.6vw}
  .field .err{font-size:max(12px,1vw)}
  .consent input{width:max(24px,1.7vw);height:max(24px,1.7vw)}
  .consent span{font-size:max(12px,1.15vw)}
  .gauge{padding:2.8vw;border-radius:1.1vw}
  .gauge-label{font-size:max(12px,1.05vw)}
  .gauge-num{font-size:6vw}
  .gauge-sub{font-size:max(12px,1.2vw)}
  .gauge-goal{font-size:max(12px,1.05vw)}
  .signup-note{font-size:max(12px,1.05vw)}
}

@media all and (max-width:640px){
  body{font-size:3.6vw;line-height:1.55}
  .article{max-width:100%}
  .article-body h2{font-size:5.6vw;margin:8vw 0 3vw}
  .article-body h3{font-size:4.6vw;margin:6vw 0 2.5vw}
  .article-body p{margin-bottom:4vw}
  .article-body .stores img{height:11vw}
  .article-figure{margin:6vw 0;border-radius:2.5vw}
  .article-figure img{max-height:none}
  .lightbox-overlay{flex-direction:column;padding:8vw 5vw;overflow-y:auto}
  .lightbox-overlay img{max-width:88vw;max-height:40vh}
  /* --- HERO mobile : bloc unique, le contenu commande la hauteur --- */
  .hero{height:auto;min-height:0}
  .hero .hero-inner{justify-content:flex-start;padding-top:30vw;padding-bottom:14vw}
  .hero-title{max-width:100%}
  .hero-eyebrow{margin-bottom:4vw}
  .hero-sub{max-width:100%;margin-top:5vw}
  .hero-cta{margin-top:7vw;gap:3vw}
  .hero-alt{font-size:max(12px,3.4vw);margin-top:5vw}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:7vw 4vw;margin-top:9vw}
  .stat-num{font-size:8vw}
  .hero-stats .lb{font-size:max(12px,2.8vw);letter-spacing:.1em}
  .scroll-hint{display:none}

  /* rien ne doit dépasser en largeur */
  .lead-narrow{max-width:100%;margin-top:5vw}
  .mt-s{margin-top:2.5vw}.mt-m{margin-top:5vw}.mt-l{margin-top:7vw}
  .mb-m{margin-bottom:5vw}

  /* le hero se déroule au lieu d'être contraint */

  .text{font-size:3.6vw}.text-s{font-size:max(12px,3.2vw)}.lead{font-size:4.2vw}
  .display{font-size:10.5vw;line-height:1}.h1{font-size:8.4vw}.h2{font-size:7.4vw}.h3{font-size:5vw}.h4{font-size:4.2vw}
  .eyebrow{font-size:max(12px,3vw);letter-spacing:.18em}
  .wrap{padding:0 6.9vw}.wrap-s{padding:0 6.9vw}
  .section{padding:20vw 0}

  .hdr{height:18.8vw;line-height:18.8vw}
  .hdr-nav,.hdr-social{display:none}
  .hdr-right .btn{display:none}
  .burger{display:inline-flex;font-size:max(12px,3.2vw);gap:2.6vw;letter-spacing:.12em;text-transform:uppercase}
  .hdr-brand .wordmark{font-size:5vw}.hdr-brand .mark{width:9vw}
  .hdr.menu-active{background:var(--noir)}

  .btn{font-size:max(12px,3.4vw);height:11.5vw;line-height:11.5vw;padding:0 5.2vw;border-radius:8vw;gap:3vw}
  .btn .lbl{height:11.5vw}.btn .ic{width:5vw}


  .cols{display:block}
  .col-num,.col-aside{width:100%}
  .col-num{margin-bottom:5vw}
  .col-aside{margin-top:8vw}
  .square{width:3vw;height:3vw;border-radius:.4vw;margin-bottom:4vw}

  .steps,.cards,.grid3,.quotes{grid-template-columns:1fr;gap:4vw;margin-top:9vw}
  .grid3--home{max-width:100%}
  .step{padding:6vw 5.5vw;border-radius:2.5vw}
  .step-n{font-size:11vw;margin-bottom:4vw}
  .card{min-height:52vw;padding:6vw;border-radius:2.5vw}
  .tile-media{border-radius:2.5vw}
  .tile-tags{top:3.4vw;left:3.4vw;gap:1.6vw;opacity:1!important;transform:none!important}
  .tag{font-size:max(12px,2.9vw);line-height:8vw;padding:0 4vw;border-radius:4vw}
  .tile-btn{position:static;opacity:1;transform:none;margin-top:4vw}
  .tile-body{padding-top:4vw}
  .tile-body .rule{margin:4vw 0}
  .tile-meta{gap:5vw;font-size:max(12px,3vw)}
  .quote{padding:6vw;border-radius:2.5vw;gap:4vw}
  .quote .who,.quote .stars{font-size:max(12px,3vw)}

  .marquee-band{padding:4vw 0}
  .marquee-band .it{font-size:7vw;padding:0 4vw;gap:4vw}
  .marquee-band .it::after{width:2vw;height:2vw}
  .langs{padding:14vw 0}
  .langs-head{margin-bottom:8vw}
  .langs .it{padding:0 5vw;opacity:.6}
  .langs .it .w{font-size:8vw}
  .langs .it .c{font-size:max(12px,2.6vw);margin-top:1.4vw}
  .langs .it::after{width:1.4vw;height:1.4vw}

  .cta-final .h2{max-width:100%}
  .cta-final .btns{margin-top:8vw;gap:3vw}
  .cta-final .btns .btn{width:100%;justify-content:center}

  .ftr{position:relative}
  .page{margin-bottom:0!important}
  .ftr-mark{display:none}
  .ftr{padding-top:14vw}
  .ftr-cols{display:grid;grid-template-columns:1fr 1fr;gap:8vw 5vw;padding-bottom:12vw}
  .ftr-col h4{margin-bottom:3vw}
  .ftr-bot{display:block;font-size:max(12px,3vw);padding:5vw 0}
  .ftr-bot span+span{display:block;margin-top:2vw}

  .pgrid{grid-template-columns:1fr;gap:5vw;margin-top:9vw}
  .pcard{border-radius:2.5vw}
  .pcard-body{padding:6vw;gap:3vw}
  .pcard-body .btn{width:100%;justify-content:center}
  .sticker-swipe .pcard{flex:0 0 38vw}
  .sticker-swipe-wrap{margin-left:-6.9vw;margin-right:-6.9vw;padding:0 6.9vw}
  .sticker-lot-banner{flex-direction:column;align-items:flex-start;gap:2vw;padding:4vw}
  .designs{grid-template-columns:1fr;padding-left:0;gap:5vw;margin-top:9vw}
  .design{border-radius:2.5vw}
  .cards-2{grid-template-columns:1fr}
  .cart-drawer{width:100%;min-width:0}
  .cart-head,.cart-items,.cart-foot{padding:6vw}
  .phero-cta{margin-top:7vw}
  .phero-cta .store{flex:1 1 42%}
  .phero-cta .store img{height:13vw;margin:0 auto}

  .phero{min-height:0;padding:32vw 0 12vw}
  .phero .h1,.phero-lead{max-width:100%}
  .phero-eyebrow{margin-bottom:4vw}
  .phero-lead{margin-top:5vw}
  .story,.offer{display:block;padding-left:0;margin-top:8vw}
  .story-txt,.offer-txt{max-width:100%}
  .story-img,.offer-img{width:100%;margin-top:7vw;border-radius:2.5vw}
  .chips{gap:2vw;margin-top:5vw}
  .chip{line-height:9vw;padding:0 4.5vw;border-radius:5vw}
  .contact-img{border-radius:2.5vw}
  .field select,.field textarea{font-size:16px;padding:3.6vw 4vw;border-radius:1.8vw}
  .field textarea{min-height:36vw}
  .field select{background-position:calc(100% - 5vw) 55%,calc(100% - 3.5vw) 55%;
    background-size:1.6vw 1.6vw,1.6vw 1.6vw}
  .cart-open{width:9vw;height:9vw}
  .cart-badge{min-width:6vw;height:6vw;font-size:max(12px,3vw)}

  .hero-free{margin-top:5vw;letter-spacing:.14em}
  .steps-cta{display:block;padding-left:0;margin-top:9vw}
  .steps-cta .lead{margin-bottom:5vw}
  .map-cta{margin-top:6vw;padding-top:5vw}
  .map-cta .text-s{margin-bottom:3vw}
  .map-cta .store img{height:13vw}
  .dlbar-in{padding:3vw 5vw;gap:3vw;flex-wrap:wrap}
  .dlbar-txt{flex:1 1 100%;flex-direction:row;align-items:baseline;gap:2vw;margin-bottom:1vw}
  .dlbar .stores{flex:1;gap:2.4vw}
  .dlbar .store{flex:1 1 42%}
  .dlbar .store img{height:11vw;margin:0 auto}
  .dlbar-close{position:absolute;top:2vw;right:3vw;width:9vw;height:9vw;font-size:5vw}
  .faq-list{padding-left:0;margin-top:8vw}
  .faq-item summary{padding:5vw 0;gap:5vw}
  .faq-ic{width:4vw;height:4vw}
  .faq-a{padding-bottom:5vw;max-width:none}

  /* carte + consentement */
  .mapwrap{display:block;padding-left:0;margin-top:8vw}
  .mapstage{max-width:100%}
  .mapside{width:100%;margin-top:7vw}
  .mapcard{padding:6vw;border-radius:2.5vw}
  .mapcard-label{font-size:max(12px,2.9vw)}
  .mapcard-city{font-size:7.5vw;margin:2.5vw 0 2vw}
  .mapcard-note{font-size:max(12px,3.2vw)}
  .mapcard .btn{width:100%;justify-content:center}
  .maplegend{font-size:max(12px,3.2vw);gap:2.6vw;margin-top:6vw}
  .lg{width:3vw;height:3vw}
  .lg-me{box-shadow:0 0 0 .8vw var(--orange)}
  .maploading{font-size:max(12px,3.2vw)}
  .mapme text{font-size:30px}

  .consentbar{padding:0;display:block}
  .consentbox{width:100%;border-radius:3.5vw 3.5vw 0 0;padding:7vw 6.9vw 8vw;
    border-left:none;border-right:none;border-bottom:none}
  .consentbox .h4{margin-bottom:3vw}
  .consentlist{margin:5vw 0 6vw;gap:4vw}
  .consentlist li{font-size:max(12px,3.2vw);gap:3vw}
  .consentsw{width:9vw;height:5vw;margin-top:.6vw}
  .consentsw i{border-radius:5vw}
  .consentsw i::after{width:3.8vw;height:3.8vw;top:.6vw;left:.6vw}
  .consentsw input:checked+i::after,.consentsw.is-locked i::after{transform:translateX(4vw)}
  .consentbtns{gap:2.5vw}
  .consentbtns .btn{flex:1 1 100%}
  .consentnote{font-size:max(12px,2.9vw);margin-top:4vw}

  /* nouveaux blocs */
  .stores{gap:3vw;width:100%}
  .store{flex:1 1 42%}
  .store img{height:13vw;margin:0 auto}
  .hdr-social a{width:max(24px,6vw);height:max(24px,6vw)}
  .soc-list{gap:3.4vw}
  .soc-list a{width:12vw;height:12vw}
  .signup-grid{display:block;margin-top:8vw;padding-left:0}
  .signup-form{max-width:100%}
  .signup-side{width:100%;margin-top:8vw}
  .field{margin-bottom:4vw}
  .field label{font-size:max(12px,2.9vw);margin-bottom:1.6vw}
  .field input{font-size:16px;padding:3.6vw 4vw;border-radius:1.8vw}
  .field .err{font-size:max(12px,2.9vw)}
  .field.invalid .err{max-height:12vw}
  .consent{gap:2.6vw;margin:5vw 0 6vw}
  .consent input{width:max(24px,4.6vw);height:max(24px,4.6vw);border-radius:.7vw}
  .consent input:checked::after{border-width:0 .7vw .7vw 0}
  .consent span{font-size:max(12px,3.2vw)}
  .signup-submit{width:100%;justify-content:center}
  .signup-note{font-size:max(12px,2.9vw);margin-top:4vw}
  .gauge{padding:6.5vw;border-radius:2.5vw}
  .gauge-label{font-size:max(12px,2.9vw)}
  .gauge-num{font-size:15vw;margin:2.5vw 0 1.5vw}
  .gauge-sub{font-size:max(12px,3.2vw)}
  .gauge-bar{height:1.6vw;margin-top:5vw}
  .gauge-goal{font-size:max(12px,2.9vw);margin-top:2.4vw}
  .signup-done{padding:6.5vw;border-radius:2.5vw}
}

/* Entre 641 et 900 px, en-tête, marque et bouton ne tiennent plus sur une
   ligne : les réseaux sociaux, secondaires, cèdent la place. */
@media all and (min-width:641px) and (max-width:900px){
  .hdr-social{display:none}
  .hdr-nav ul{gap:1.8vw}
  .hdr .wrap{padding:0 2.6vw}
}


/* ==========================================================================
   MANIFESTE : photos de la communauté
   ========================================================================== */
.manifeste-photos{margin-top:3.5vw;padding-left:18.5vw}
.mph-carousel{position:relative}
.mph-track{display:flex;gap:1.25vw;list-style:none;margin:0;padding:0;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.mph-track::-webkit-scrollbar{display:none}
.mph-track:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.manifeste-photos .mph{flex:0 0 calc((100% - 1.25vw)/2.35);scroll-snap-align:start;
  overflow:hidden;border-radius:.75vw;background:var(--blanc-10);aspect-ratio:16/10}
.manifeste-photos .mph img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:center 30%;transition:transform .9s var(--ease)}
.manifeste-photos .mph:hover img{transform:scale(1.04)}
.mph-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:3vw;height:3vw;min-width:38px;min-height:38px;border-radius:50%;cursor:pointer;
  background:var(--orange);border:0;transition:background .3s var(--ease),opacity .3s var(--ease)}
.mph-nav::before{content:"";position:absolute;top:50%;left:50%;width:.7vw;height:.7vw;min-width:9px;min-height:9px;
  border:solid var(--noir);border-width:2px 2px 0 0}
.mph-prev{left:-1.5vw}
.mph-prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.mph-next{right:-1.5vw}
.mph-next::before{transform:translate(-70%,-50%) rotate(45deg)}
.mph-nav:hover{background:var(--blanc)}
.mph-nav[disabled]{opacity:.25;pointer-events:none}
.manifeste-photos .mph-cap{display:block;font-size:max(12px,.78vw);line-height:1.5;opacity:.6;margin-top:1.2vw}

/* ==========================================================================
   MAQUETTES DE L'APPLI (section « Du téléchargement au coup d'envoi »)
   ========================================================================== */
.steps--app .step{display:flex;flex-direction:column}
.phone{width:100%;max-width:min(12vw,185px);margin:0 auto 2vw;position:relative;
  font-size:max(8.5px,.53vw);line-height:1.35;
  padding:.45em;border-radius:2.6em;background:#0D0B0D;
  box-shadow:0 1.4em 3em rgba(13,11,13,.28),inset 0 0 0 1px rgba(255,255,255,.14)}
.phone-notch{position:absolute;top:1.1em;left:50%;transform:translateX(-50%);
  width:4.4em;height:.7em;border-radius:1em;background:#000;z-index:2}
.phone-screen{position:relative;border-radius:2.2em;overflow:hidden;background:#17141a;
  color:#fff;text-align:left;display:flex;flex-direction:column;gap:.8em;
  padding:2.6em 1.1em 1.6em;aspect-ratio:9/18.4}
.ph-top{display:flex;justify-content:space-between;align-items:center;
  font-size:.85em;font-weight:600;opacity:.65}
.ph-sig{display:flex;gap:.25em;align-items:flex-end}
.ph-sig i{display:block;width:.3em;background:currentColor;border-radius:.1em}
.ph-sig i:nth-child(1){height:.35em}.ph-sig i:nth-child(2){height:.6em}.ph-sig i:nth-child(3){height:.85em}
.ph-brand{display:flex;align-items:center;gap:.45em}
.ph-brand img{width:1.6em;height:auto}
.ph-brand span{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;font-size:.95em;letter-spacing:.02em}
.ph-title{font-family:'Kanit','Inter',sans-serif;font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:2.1em;line-height:1;margin-top:.2em}
.ph-title--s{font-size:1.5em}
.ph-sub{font-size:.95em;opacity:.65}
.ph-input{border:1px solid rgba(255,255,255,.18);border-radius:.9em;padding:.85em 1em;
  font-size:.95em;opacity:.55;background:rgba(255,255,255,.05)}
.ph-btn{margin-top:auto;background:var(--orange);color:#0D0B0D;border-radius:2em;
  text-align:center;padding:.9em 1em;font-weight:600;font-size:.95em}
.ph-foot{text-align:center;font-size:.85em;opacity:.5}
.ph-search{display:flex;align-items:center;gap:.5em;background:rgba(255,255,255,.08);
  border-radius:2em;padding:.75em 1em;font-size:.95em}
.ph-pin{width:.55em;height:.55em;border-radius:50%;background:var(--orange);flex:0 0 auto}
.ph-chips{display:flex;flex-wrap:wrap;gap:.4em}
.ph-chips span{font-size:.8em;padding:.45em .8em;border-radius:2em;
  border:1px solid rgba(255,255,255,.2);opacity:.7;white-space:nowrap}
.ph-chips span.on{background:var(--orange);border-color:var(--orange);color:#0D0B0D;opacity:1;font-weight:600}
.ph-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:1em;padding:.85em .9em;display:flex;flex-direction:column;gap:.45em}
.ph-card--ghost{opacity:.4}
.ph-card-top{display:flex;justify-content:space-between;align-items:center;gap:.5em}
.ph-card-t{font-weight:600;font-size:.95em}
.ph-slot{font-size:.8em;color:var(--orange);white-space:nowrap;font-weight:600}
.ph-meta{font-size:.85em;opacity:.6}
.ph-avs{display:flex;align-items:center;gap:.25em}
.ph-avs i{width:1.4em;height:1.4em;border-radius:50%;background:linear-gradient(140deg,#4D5659,#0D0B0D);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);display:block}
.ph-avs span{font-size:.8em;opacity:.6;margin-left:.2em}
.ph-banner{background:var(--orange);color:#0D0B0D;border-radius:.8em;padding:.7em .9em;
  font-weight:700;font-size:.95em;text-align:center}
.ph-team{display:flex;flex-direction:column;gap:.55em;margin-top:.2em}
.ph-team-row{display:flex;align-items:center;gap:.6em;font-size:.9em}
.ph-team-row i{width:1.5em;height:1.5em;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,#4D5659,#0D0B0D);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.ph-team-row em{margin-left:auto;font-style:normal;font-size:.85em;opacity:.5}

@media all and (max-width:1080px){
  .manifeste-photos{padding-left:0}
  .phone{max-width:min(19vw,190px);font-size:max(8.5px,1vw)}
}
@media all and (max-width:640px){
  .manifeste-photos{grid-template-columns:1fr;gap:3vw;margin-top:8vw}
  .manifeste-photos .mph{border-radius:2.5vw}
  .manifeste-photos .mph--tall{height:auto;aspect-ratio:4/3}
  .manifeste-photos .mph-cap{font-size:max(12px,3.2vw);margin-top:1vw}
  .phone{max-width:175px;font-size:10px;margin-bottom:6vw}
}

/* Étapes : 3 colonnes alignées jusqu'en tablette, carrousel sur mobile */
@media all and (max-width:1080px){
  .steps--app{grid-template-columns:repeat(3,1fr)}
  .steps--app .step{padding:2.4vw 1.9vw}
  .manifeste-photos{padding-left:0}
  .mph-prev{left:1.5vw}.mph-next{right:1.5vw}
}
@media all and (max-width:640px){
  .manifeste-photos{margin-top:8vw}
  .mph-track{gap:3vw}
  .manifeste-photos .mph{flex:0 0 100%;border-radius:2.5vw}
  .manifeste-photos .mph-cap{font-size:max(12px,3.2vw);margin-top:4vw}
  .mph-nav{width:11vw;height:11vw}
  .mph-prev{left:3vw}.mph-next{right:3vw}

  .steps--app{display:flex;gap:4vw;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-left:-5.5vw;margin-right:-5.5vw;padding:0 5.5vw}
  .steps--app::-webkit-scrollbar{display:none}
  .steps--app .step{flex:0 0 78%;scroll-snap-align:center}
  .steps--app .phone{max-width:78%;font-size:2.8vw;margin:0 auto 5vw}
}