@font-face{font-family:Fraunces;src:url('/public/fonts/fraunces-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/public/fonts/inter-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* ── Base commune : jetons Atelier, surchargés par page (body.pg-*) ── */
:root{
  --ff-d:Fraunces,Georgia,'Times New Roman',serif;
  --ff-s:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --atelier-bg:#F7F1E3;--atelier-elevated:#FDFAF2;--atelier-ink:#1F2A24;--atelier-green:#2D6A4F;--atelier-green-ink:#1B4332;--atelier-muted:#56625B;
  --bg:var(--atelier-bg);--surface:var(--atelier-elevated);--ink:var(--atelier-ink);--muted:var(--atelier-muted);
  --accent:var(--atelier-green);--accent-ink:var(--atelier-green-ink);--on-accent:#fff;
  --line:rgba(27,67,50,.16);--focus:#1B4332;
  --r:14px;--r-lg:24px;--ease:cubic-bezier(.22,.7,.2,1);
  --hd:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--ff-s);overflow-x:clip;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{display:block;height:auto}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
h1,h2,h3{word-spacing:.06em}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 32px,var(--w,1200px));margin-inline:auto}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:currentColor;stroke:none}

/* L'en-tête vit dans header.css, le lien d'évitement, le pied et le message de démo dans chrome.css :
   composants partagés avec les pages vitrines hors landing (blog, pages légales…), indépendants des feuilles de page. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:99px;border:2px solid transparent;background:var(--btn-bg,var(--accent));color:var(--btn-ink,var(--on-accent));font-weight:700;font-size:1rem;text-decoration:none;line-height:1.1;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border-color:currentColor}
.btn .ic{width:1.1em;height:1.1em}

/* ── Cadres d'écrans ── */
.ph{position:relative;margin:0;filter:drop-shadow(0 22px 30px rgba(20,30,25,.28)) drop-shadow(0 4px 8px rgba(20,30,25,.18))}
.ph img{width:100%;aspect-ratio:560/1151;height:auto}
.win{margin:0;background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(20,30,25,.18);box-shadow:0 30px 60px -20px rgba(20,30,25,.35),0 6px 16px rgba(20,30,25,.14)}
.win-bar{display:flex;gap:6px;padding:10px 14px;background:#EDE7D6;border-bottom:1px solid rgba(20,30,25,.12)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#C9C1AB}
.win img{width:100%}
figcaption.cap{font-size:.85rem;color:var(--muted);padding-top:10px;line-height:1.4}

/* ── Modes de jeu (composant d'onglets, habillé par page) ── */
.tabs [role=tablist]{display:flex;flex-wrap:wrap;gap:8px}
.tabs [role=tab]{min-height:44px;padding:0 18px;border-radius:99px;border:1.5px solid currentColor;background:transparent;font-weight:700;font-size:.95rem}
.tabs [role=tab][aria-selected=true]{background:var(--tab-on-bg,var(--ink));color:var(--tab-on-ink,var(--bg));border-color:var(--tab-on-bg,var(--ink))}
.tabs [role=tabpanel][hidden]{display:none}

/* ── Prix (blocs dynamiques) ── */
.dyn-note{font-size:.9rem;color:var(--muted);max-width:60ch}


/* ── Boutons « démo » : <button> habillé comme .btn ; sans JS ils sont inutiles (le compte se crée par « Créer un compte ») ── */
button.btn{font-family:inherit;cursor:pointer}
.btn:disabled{opacity:.6;cursor:progress;transform:none}

/* ── Barème lu en direct (rendu serveur, voir landingV4.js) ── */
.pb{margin-top:10px;display:flex;flex-direction:column;gap:10px;padding-top:6px;min-width:0}
.pb-fig{font:800 clamp(1.5rem,3.4vw,1.9rem)/1.1 var(--ff-s);letter-spacing:-.02em;color:var(--ink)}
.pb-fig strong{font-weight:inherit}
.pb-unit{font-size:.9rem;font-weight:600;color:var(--muted);letter-spacing:0}
.pb-old{font-size:1rem;font-weight:500;color:var(--muted)}
.pb-sub{font-size:.92rem;color:var(--muted);margin-top:-6px}
.pb-list{display:flex;flex-direction:column;gap:6px;font-size:.95rem;line-height:1.45}
.pb-list li{position:relative;padding-left:22px}
.pb-list li::before{content:"";position:absolute;left:2px;top:.52em;width:9px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg) translateY(-2px)}
.pb-list strong{font-weight:700}
.pb-eur{color:var(--muted);font-size:.88em}
.pb-cta{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 20px;border-radius:99px;border:2px solid currentColor;font-weight:700;font-size:.95rem;text-decoration:none;color:var(--ink);transition:background-color .18s var(--ease),color .18s var(--ease)}
.pb-cta:hover{background:var(--ink);color:var(--bg)}
.pb-na .pb-fig{font-size:1.15rem}
.pb-note{font-size:.9rem;color:var(--muted)}

/* ── Compteurs réels (bandeau de l'accueil) et pied de page ── */
.ribbon .cnt strong{font-variant-numeric:tabular-nums;font-weight:800}

/* ── Images de téléphone / fenêtre : jamais de texte alternatif visible pendant le chargement (voir landing.js « phones ») ── */
.ph img,.win img,.m-ph img,.uv-ph img,.loupe img,.hero-photo img{color:transparent;font-size:0}
.js .ph img:not(.is-ready),.js .win img:not(.is-ready),.js .m-ph img:not(.is-ready),.js .uv-ph img:not(.is-ready),.js .loupe img:not(.is-ready),.js .hero-photo img:not(.is-ready){visibility:hidden}

/* ── Révélations (uniquement avec JS) ── */
.js [data-r]{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-r].is-in{opacity:1;transform:none}
.js [data-r][data-d="1"]{transition-delay:.08s}.js [data-r][data-d="2"]{transition-delay:.16s}.js [data-r][data-d="3"]{transition-delay:.24s}.js [data-r][data-d="4"]{transition-delay:.32s}

/* ── Univers de mise en scène, site de l'organisateur, offre (partagés par les 5 pages) ── */
.univers{padding:72px 0 64px}
.uv-head{display:grid;gap:14px}
.uv-lead{color:var(--muted);max-width:60ch;font-size:1.1rem;line-height:1.65}
.uv-facts{display:grid;gap:12px;margin-top:6px;max-width:64ch}
.uv-facts li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.uv-facts .ic{width:22px;height:22px;margin-top:2px;color:var(--ink)}
.uv-ph{margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--surface);aspect-ratio:400/866;box-shadow:0 18px 30px -16px rgba(20,30,25,.45)}
.uv-ph img{width:100%;height:100%;object-fit:cover}
.uv-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:32px 16px 24px;scroll-padding-inline:16px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.uv-card{flex:0 0 min(62vw,230px);scroll-snap-align:start}
.uv-card h3{margin-top:14px;font:700 1.15rem/1.2 var(--ff-d)}
.uv-card p{margin-top:4px;color:var(--muted);font-size:.93rem;line-height:1.45}
.uv-tag{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:99px;border:1.5px solid currentColor;font:700 .72rem/1.4 var(--ff-s);letter-spacing:.02em;vertical-align:middle}
.uv-feats{display:grid;gap:44px;margin-top:36px}
.uv-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:380px}
.uv-ph2{margin-top:28px}
.uv-feat h3{margin-top:18px;font:700 1.5rem/1.15 var(--ff-d)}
.uv-feat p{margin-top:6px;color:var(--muted);max-width:30ch}
.sitepro{padding:24px 0 80px}
.sp-grid{display:grid;gap:36px;align-items:center}
.sp-copy{display:grid;gap:14px;justify-items:start}
.sp-copy .btn{margin-top:10px}
.offre{padding:72px 0 80px}
.of-lead{margin-top:14px;color:var(--muted);max-width:56ch;font-size:1.1rem}
.of-grid{display:grid;gap:16px;margin-top:32px}
.of-card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1.5px solid var(--line)}
.of-card h3{font:700 1.35rem/1.15 var(--ff-d)}
.of-price{font:800 1.5rem/1.15 var(--ff-s);letter-spacing:-.02em}
.of-price strong{font-weight:800}
.of-unit{font-size:.92rem;font-weight:600;color:var(--muted);letter-spacing:0}
.of-eur{font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0}
.of-card .of-price .of-eur{display:block;margin-top:2px}
.sp-fig figcaption{padding:10px 14px 12px;background:#fff;color:var(--muted);font-size:.85rem}
.of-na{font:500 .95rem/1.4 var(--ff-s);color:var(--muted)}
.of-try{font-weight:600}
.of-merit{margin-top:20px;display:grid;gap:20px;padding:24px;border-radius:var(--r-lg);border:2px solid var(--ink)}
.of-merit h3{font:700 1.35rem/1.15 var(--ff-d);margin-bottom:10px}
.of-merit p+p{margin-top:8px}
.of-merit p{max-width:62ch}
.of-legal{font-size:.92rem;color:var(--muted)}
.of-legal a,.of-more a{text-underline-offset:3px;font-weight:600}
.founders{display:flex;width:fit-content;max-width:100%;align-items:center;gap:12px;align-self:start;padding:14px 20px;border-radius:99px;background:var(--ink);color:var(--bg);line-height:1.35}
.founders .ic{width:22px;height:22px}
.founders strong{font-weight:800}
.offre-s{padding:56px 0 64px}
.of-mini{display:grid;gap:12px;margin-top:22px}
.of-mini li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.of-mini .ic{width:22px;height:22px;margin-top:2px;color:var(--ink)}
.of-rule{margin-top:20px;max-width:62ch}
.offre-s .founders{margin-top:16px}
.of-more{margin-top:16px}
@media(min-width:900px){
  .univers{padding:96px 0 80px}
  .uv-strip{padding-inline:calc((100vw - min(100vw - 32px,var(--w,1200px)))/2);scroll-padding-inline:calc((100vw - min(100vw - 32px,var(--w,1200px)))/2)}
  .uv-card{flex-basis:230px}
  .uv-feats{grid-template-columns:repeat(3,1fr);gap:32px}
  .sp-grid{grid-template-columns:.85fr 1.15fr;gap:56px}
  .of-grid{grid-template-columns:repeat(3,1fr)}
  .of-grid.of-n4{grid-template-columns:repeat(2,1fr)}
  .of-merit{grid-template-columns:1.6fr auto;align-items:center;gap:32px}
  .offre{padding:96px 0 96px}
}

@media(min-width:1200px){.of-grid.of-n4{grid-template-columns:repeat(4,1fr)}}


@media(min-width:1180px){
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r]{opacity:1;transform:none}
}
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}

/* ── Liens vers l'offre clé en main (accueil, entreprises, tourisme) ── */
.pick-cle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:14px;padding:18px 24px;border-radius:20px;border:1.5px solid var(--ink);text-decoration:none;background:var(--surface);transition:transform .2s var(--ease),background .2s}
.pick-cle:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--ink) 5%,var(--surface))}
.pick-cle .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;min-height:44px}
.cle-band{padding:18px 0;background:var(--surface);border-block:1px solid var(--line)}
.cb-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.cb-in p{max-width:60ch}