/* ==========================================================================
   POPITA — prototype V1 · Design system (tokens, reset, typographie, utilitaires)
   Une famille typographique (Host Grotesk), trois univers, une structure.
   ========================================================================== */

@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:300 800;font-display:swap;src:url("../fonts/HostGrotesk-var.woff2") format("woff2")}
@font-face{font-family:"Host Grotesk";font-style:italic;font-weight:300 800;font-display:swap;src:url("../fonts/HostGrotesk-var-italic.woff2") format("woff2")}

:root{
  /* — Marque — valeurs officielles relevées sur la planche logos (jaune #FFD103, encre #282828, violet #4F3695) */
  --yellow:#FFD103;
  --yellow-strong:#E6B800;
  --yellow-soft:#FFF2B0;
  --ink:#282828;
  --ink-deep:#161616;
  --graphite:#3A3A3A;
  --purple:#4F3695;
  --purple-deep:#33256B;
  --purple-soft:#E9E4F6;
  --grey-soft:#ECEAE4;

  /* — Neutres — */
  --paper:#FFFFFF;
  --canvas:#FAF9F6;
  --paper-2:#F2F0E9;
  --line:#E6E2D6;
  --text:#282828;
  --muted:#67655F;

  /* — Échelle d'espacement — */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4.5rem; --sp-9:7rem;
  --gut:clamp(16px,4vw,48px);
  --maxw:1360px;
  --hdr-h:76px;

  /* — Rayons (modérés) — */
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  /* — Typographie — */
  --font:"Host Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-body:1.0625rem;
  --fs-small:.9rem;
  --fs-label:.75rem;
  --fs-lead:clamp(1.15rem,1.05rem + .5vw,1.5rem);
  --fs-h3:clamp(1.35rem,1.1rem + .9vw,2rem);
  --fs-h2:clamp(2.1rem,1.2rem + 4vw,4.6rem);
  --fs-h1:clamp(2.6rem,1.2rem + 6vw,6.4rem);
  --fs-display:clamp(2.7rem,.8rem + 6.5vw,7.4rem);

  /* — Mouvement — */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* — Ombres — */
  --sh-mega:0 40px 90px -24px rgba(16,16,16,.42),0 0 0 1px rgba(16,16,16,.05);
  --sh-card:0 18px 40px -22px rgba(16,16,16,.35);

  --focus:var(--purple);
}

/* — Univers : chaque bloc peut être « peint » aux couleurs d'un univers — */
.u-com{--u-bg:var(--yellow);--u-fg:var(--ink);--u-mute:rgba(40,40,40,.74);--u-line:rgba(40,40,40,.2);--u-btn-bg:var(--ink);--u-btn-fg:#fff;--u-accent:var(--ink);--u-soft:var(--yellow-soft);--u-deep:#E6B800;--focus:var(--purple-deep)}
.u-events{--u-bg:var(--ink);--u-fg:#fff;--u-mute:rgba(255,255,255,.74);--u-line:rgba(255,255,255,.18);--u-btn-bg:var(--yellow);--u-btn-fg:var(--ink);--u-accent:var(--yellow);--u-soft:var(--grey-soft);--u-deep:var(--ink-deep);--focus:var(--yellow)}
.u-pub{--u-bg:var(--purple);--u-fg:#fff;--u-mute:rgba(255,255,255,.8);--u-line:rgba(255,255,255,.22);--u-btn-bg:var(--yellow);--u-btn-fg:var(--ink);--u-accent:var(--yellow);--u-soft:var(--purple-deep);--u-deep:var(--purple-deep);--focus:var(--yellow)}
.u-portal{--u-bg:var(--canvas);--u-fg:var(--ink);--u-mute:var(--muted);--u-line:var(--line);--u-btn-bg:var(--ink);--u-btn-fg:#fff;--u-accent:var(--ink);--u-soft:var(--paper-2);--u-deep:var(--paper-2)}

/* — Reset — */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.55;color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--yellow);color:var(--ink)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:600;transition:top .2s}
.skip:focus{top:12px}

/* — Structure — */
.wrap{width:min(100% - 2*var(--gut),var(--maxw));margin-inline:auto}
.section{padding-block:clamp(84px,11vw,168px)}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.section--flush-top{padding-top:0}
.paper-2{background:var(--paper-2)}
.on-u{background:var(--u-bg);color:var(--u-fg)}
.on-dark{color:#fff}

/* — Typographie : gros titres éditoriaux, contrastes d'échelle — */
.t-display,.t-h1,.t-h2,.t-h3{font-weight:700;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.t-display{font-size:var(--fs-display);letter-spacing:-.05em;line-height:.98;font-weight:750}
.t-h1{font-size:var(--fs-h1);letter-spacing:-.045em;line-height:.95}
.t-h2{font-size:var(--fs-h2);line-height:.98}
.t-h3{font-size:var(--fs-h3);letter-spacing:-.03em;line-height:1.08}
.t-lead{font-size:var(--fs-lead);line-height:1.42;letter-spacing:-.012em;text-wrap:pretty}
.t-small{font-size:var(--fs-small)}
.t-muted{color:var(--muted)}
.t-mute-u{color:var(--u-mute)}
.t-body{max-width:62ch;text-wrap:pretty}
.t-body p+p{margin-top:1em}
.t-num{font-variant-numeric:tabular-nums}

/* Surlignage éditorial (esprit « engagée » du site actuel) : bloc de couleur posé derrière le mot */
.hl{--hl:var(--yellow);color:var(--ink);padding:0 .13em;margin:0 -.03em;background:linear-gradient(var(--hl),var(--hl)) 0 74%/100% .78em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl--ink{--hl:var(--ink);color:var(--yellow)}
.hl--purple{--hl:var(--purple);color:#fff}
.hl--white{--hl:#fff}

/* — Apparition au scroll (progressive : visible sans JS) — */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.js .rv.is-in{opacity:1;transform:none}
/* filet de sécurité : si le JS tarde, tout finit visible */
.js .rv:not(.is-in){animation:rvSafe .01s 2.8s forwards}
@keyframes rvSafe{to{opacity:1;transform:none}}
/* le hero ne dépend jamais du JS */
html.js .hero .rv{opacity:1;transform:none;animation:heroIn .9s var(--ease) both;animation-delay:calc(var(--d,0) * 90ms)}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .rv-mask{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.js .rv-mask.is-in{clip-path:inset(0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rv,.js .rv-mask{opacity:1;transform:none;clip-path:none}
}

/* — Mode « repérer les contenus fictifs » (prototype) — */
.show-ph [data-ph]{outline:2px dashed #d6336c;outline-offset:3px;position:relative}
.show-ph [data-ph]::after{content:"fictif";position:absolute;top:-10px;left:6px;background:#d6336c;color:#fff;font:700 10px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:3px 5px;border-radius:3px;z-index:5;pointer-events:none}

/* — composants utilisés — */
.btn{--bg:var(--u-btn-bg,var(--ink));--fg:var(--u-btn-fg,#fff);display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:52px;padding:0 1.6em;border-radius:var(--r-pill);background:var(--bg);color:var(--fg);font-weight:650;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;position:relative;isolation:isolate;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),color .25s}
.btn::before{content:"";position:absolute;inset:0;background:var(--hover,var(--yellow));transform:translateY(101%);transition:transform .35s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover,.btn:focus-visible{color:var(--hover-fg,var(--ink))}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn:active{transform:scale(.98)}
.btn--ink{--bg:var(--ink);--fg:#fff;--hover:var(--yellow)}
.btn--lg{min-height:64px;padding:0 2.2em;font-size:1.15rem}
.lnk{display:inline-flex;align-items:center;gap:.5em;font-weight:650;letter-spacing:-.01em;padding-block:.35em;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:background-size .35s var(--ease)}
.lnk .arr{transition:transform .3s var(--ease)}
.lnk:hover{background-size:0 2px;background-position:100% 100%}
.lnk:hover .arr{transform:translateX(5px)}
/* — pages — */
.sec-head{display:grid;gap:18px;max-width:1000px;margin-bottom:clamp(30px,4.6vw,64px)}
.sec-head--split{max-width:none;align-items:end}
@media (min-width:1000px){.sec-head--split{grid-template-columns:1.4fr 1fr}}
.uhero{background:var(--u-bg);color:var(--u-fg);overflow:hidden}
.uhero__in{display:grid;gap:clamp(28px,4vw,60px);padding-block:clamp(22px,3vw,40px) clamp(48px,7vw,104px)}
.uhero__t{margin:.45em 0 .5em;max-width:14ch}
.uhero__sub{max-width:40ch;color:var(--u-fg)}
.uhero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
@media (min-width:1000px){.uhero__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.tiles{display:grid;gap:12px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:clamp(300px,30vw,400px);padding:clamp(20px,2.2vw,30px);border-radius:var(--r-lg);overflow:hidden;color:var(--fg,var(--ink));background:var(--bg,var(--purple));isolation:isolate}
.tile>img{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:1/1;object-fit:cover;border-radius:100% 0 0 0;z-index:-1;transition:transform .9s var(--ease);transform-origin:100% 100%}
.tile:hover>img{transform:scale(1.08)}
.tile__t{max-width:11ch;font-size:clamp(1.7rem,1.1rem + 1.8vw,2.7rem);font-weight:760;letter-spacing:-.05em;line-height:.98}
.tile__d{max-width:42%;font-size:.95rem;line-height:1.35}
.tile--y{--bg:var(--yellow);--fg:var(--ink)}
.tile--p{--bg:var(--purple);--fg:#fff}
.tile--d{--bg:var(--purple-deep);--fg:#fff}
.tile--w{--bg:var(--purple-soft);--fg:var(--ink)}
@media (min-width:700px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.tiles{grid-template-columns:repeat(3,1fr)}}
@keyframes cartIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.xu{display:grid;gap:12px}
.xu a{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:240px;padding:clamp(20px,2.4vw,32px);border-radius:var(--r-lg);background:var(--u-bg);color:var(--u-fg);overflow:hidden;transition:transform .5s var(--ease)}
.xu a:hover{transform:translateY(-4px)}
.xu b{font-size:clamp(2.4rem,1.5rem + 3.4vw,4.6rem);font-weight:800;letter-spacing:-.06em;line-height:.88}
.xu p{max-width:30ch;font-size:1.02rem}
.xu span.lnk{align-self:flex-start;color:var(--u-fg)}
@media (min-width:800px){.xu{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   Page d'attente POPITA Pub — spécifique
   ========================================================================== */

/* Hero : logo à la place du collage, pas de menu */
.uhero--wait{display:flex;min-height:min(100svh,900px)}
.uhero--wait .uhero__in{width:min(100% - 2*var(--gut),var(--maxw));margin-inline:auto;align-content:center;align-items:center;padding-block:clamp(36px,6vw,96px)}
.uhero--wait .uhero__t{margin-top:0;max-width:13ch}
.uhero__wait{margin-top:clamp(20px,2.4vw,32px);max-width:40ch;color:var(--u-mute);font-size:.98rem}
.uhero__logo{display:flex;align-items:center;justify-content:center}
.uhero__logo img{width:min(100%,700px);height:auto}
@media (max-width:999px){
  .uhero__logo{order:-1;justify-content:flex-start}
  .uhero__logo img{width:min(72%,340px)}
}
@media (min-width:1000px){.uhero--wait .uhero__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
/* wrap posé sur .uhero__in : évite le double conteneur */
.uhero--wait .uhero__in.wrap{padding-inline:0}

/* Activités : informatives, pas de lien */
.tile{cursor:default}
.tile:hover>img{transform:none}

/* Passerelles vers POPITA Com / Events : on affiche l'adresse du site */
.xu a .lnk{font-size:.98rem}

/* Footer contact */
.pfoot{background:var(--ink-deep);color:#fff;--focus:var(--yellow)}
.pfoot__in{display:grid;gap:clamp(32px,5vw,56px);padding-block:clamp(72px,9vw,132px) clamp(48px,6vw,80px)}
@media (min-width:1000px){.pfoot__in{grid-template-columns:1.35fr 1fr;align-items:end}}
.pfoot__t{font-size:clamp(2.6rem,1.4rem + 5.6vw,6.4rem);font-weight:790;letter-spacing:-.055em;line-height:.94;text-wrap:balance}
.pfoot__info{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pfoot__phone{display:inline-block;padding:.12em .3em;background:var(--yellow);color:var(--ink);font-size:clamp(1.7rem,1.1rem + 2vw,2.6rem);font-weight:800;letter-spacing:-.03em;transition:background .2s}
.pfoot__phone:hover{background:#fff}
.pfoot address{font-style:normal;color:rgba(255,255,255,.8);line-height:1.7;font-size:1.05rem}
.pfoot__mail{font-weight:650;color:#fff;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;transition:background-size .3s var(--ease),color .2s}
.pfoot__mail:hover{background-size:0 1.5px;background-position:100% 100%;color:var(--yellow)}
.pfoot__soc{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:4px}
.pfoot__soc a{font-weight:650;color:var(--yellow);padding-block:4px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s var(--ease)}
.pfoot__soc a:hover{background-size:100% 1.5px}
.pfoot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding-block:22px 34px;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem;color:rgba(255,255,255,.62)}
.pfoot__legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pfoot--slim .pfoot__legal{border-top:0;padding-block:28px}

/* Mentions légales */
.pbar{background:var(--u-bg)}
.pbar__in{padding-block:18px}
.pbar img{width:clamp(140px,18vw,200px);height:auto}
.wrap--txt{max-width:780px}
.legal{padding-block:clamp(48px,7vw,104px)}
.legal h1{margin-bottom:.3em}
.legal__up{color:var(--muted);font-size:.92rem;margin-bottom:clamp(28px,4vw,48px)}
.legal h2{margin:2.2em 0 .6em}
.legal p{max-width:66ch;text-wrap:pretty}
.legal p+p{margin-top:1em}
.legal__back{margin-top:clamp(36px,5vw,64px)}
.todo{background:var(--yellow-soft);color:var(--ink);padding:.05em .3em;border-radius:3px}
.legal p a{font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.legal p a:hover{color:var(--purple)}
.legal .btn{text-decoration:none;color:#fff}
.pfoot__legal p{max-width:62ch}
.pfoot__legal p a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.pfoot__legal p a:hover{color:#fff;text-decoration-color:currentColor}