/* BISPOT — feuille de style commune du site public (docs/website/).
   Direction « Affiche » (docs/DESIGN_SYSTEM.md, ADR-176) : mêmes tokens que
   l'application, recopiés de design/tokens.json. Aplats, pas d'ombre, rayon 8,
   jamais de pilule ni de capitales. Chaque page ajoute ses styles propres dans
   un <style>. */

:root{
  --bg:#EEF2EE;
  --band:#DCE5E0;
  --surface:#F8FAF7;
  --border:#C8D3CE;
  --ink:#14233C;
  --ink-soft:#3E4F5E;
  --brand:#0F4C5C;          /* marque, non textuel et texte (9:1 sur surface) */
  --brand-text:#0F4C5C;
  --brand-soft:#D3EDE0;
  --action:#14233C;         /* bouton principal */
  --on-action:#EEF2EE;
  --poster:#0F4C5C;         /* aplat de l'affiche */
  --on-poster:#F1F5EF;
  --on-poster-soft:#CFE6DB;
  --ring:#9ED9BC;           /* l'anneau du rendez-vous, rien d'autre */
  --mint:#9ED9BC;
  --sky:#A9C8E8;
  --on-alt:#14233C;
  --on-ink-accent:#9ED9BC;  /* accent lisible sur un fond --ink */
  --success:#2E7D5B;
  --error:#B3261E;
  --error-soft:#F9DEDB;
  --error-on-ink:#F2827A;
  /* Personnes : dans l'ordre de saisie, mêmes valeurs en sombre. */
  --p1:#F0CB5C; --p2:#A9C8E8; --p3:#C9B8E8; --p4:#F2A58E; --p5:#BFD89A; --p6:#E3C9A0;
  --on-person:#0F4C5C;
  --shadow:none;
  --display-width:112%;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C1820;
    --band:#13252E;
    --surface:#13252E;
    --border:#2C4550;
    --ink:#E9F0EC;
    --ink-soft:#B3C2BD;
    --brand:#9ED9BC;
    --brand-text:#9ED9BC;
    --brand-soft:#1E3B36;
    --action:#9ED9BC;
    --on-action:#0C1820;
    --poster:#135868;
    --mint:#24483F;
    --sky:#233B55;
    --on-alt:#E9F0EC;
    --on-ink-accent:#0F4C5C;  /* le bloc --ink devient clair en sombre */
    --success:#7BCBA2;
    --error:#F2827A;
    --error-soft:#3E2224;
    --error-on-ink:#B3261E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C1820;
  --band:#13252E;
  --surface:#13252E;
  --border:#2C4550;
  --ink:#E9F0EC;
  --ink-soft:#B3C2BD;
  --brand:#9ED9BC;
  --brand-text:#9ED9BC;
  --brand-soft:#1E3B36;
  --action:#9ED9BC;
  --on-action:#0C1820;
  --poster:#135868;
  --mint:#24483F;
  --sky:#233B55;
  --on-alt:#E9F0EC;
  --on-ink-accent:#0F4C5C;
  --success:#7BCBA2;
  --error:#F2827A;
  --error-soft:#3E2224;
  --error-on-ink:#B3261E;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
h1,h2,h3,h4{
  font-family:'Archivo', 'Karla', sans-serif;
  font-stretch:var(--display-width);
  font-weight:800;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
p{margin:0;}
a{color:inherit;}
button{font:inherit; color:inherit;}
.mono{font-family:'Karla', sans-serif; font-variant-numeric:tabular-nums;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
@media (max-width:600px){ .wrap{padding:0 18px;} }
.eyebrow{
  font-family:'Karla', sans-serif; font-variant-numeric:tabular-nums;
  font-size:0.85rem;
  letter-spacing:0.02em;
  color:var(--brand-text);
  font-weight:700;
}
.muted{color:var(--ink-soft);}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:6px;}
.skip-link{
  position:absolute; left:-999px; top:8px;
  background:var(--ink); color:var(--bg);
  padding:8px 14px; border-radius:8px; z-index:100;
}
.skip-link:focus{left:8px;}

/* ---- header ---- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 28px;
  max-width:1080px; margin:0 auto;
  position:relative;                  /* ancre du panneau de menu mobile */
}
@media (max-width:600px){ .nav{padding:14px 18px;} }
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Archivo', 'Karla', sans-serif;
  font-stretch:var(--display-width);
  font-weight:800;
  font-size:1.15rem;
  text-decoration:none;
  white-space:nowrap;                 /* « BISPOT » ne doit jamais se couper */
}
.brand-mark{
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.brand-mark img{width:100%; height:100%; display:block;}
.nav-links{
  display:flex; gap:26px; align-items:center;
  font-size:0.92rem; font-weight:500;
}
.nav-links a{
  text-decoration:none;
  color:var(--ink-soft);
  transition:color .15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--brand-text);}
.nav-links a[aria-current="page"]{color:var(--ink); border-bottom:3px solid var(--brand);}

/* Bouton de menu : affiché seulement quand la barre de liens ne tient plus.
   Avant ADR-102, les liens disparaissaient purement et simplement sous 860 px
   et la navigation devenait inaccessible sur téléphone. */
.nav-toggle{
  display:none;
  background:transparent; border:1px solid var(--border);
  border-radius:8px; width:44px; height:44px;
  align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink); flex-shrink:0;
}
.nav-toggle svg{width:22px; height:22px;}
.nav-toggle .fermer{display:none;}
.nav-toggle[aria-expanded="true"] .ouvrir{display:none;}
.nav-toggle[aria-expanded="true"] .fermer{display:block;}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  .nav-links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    padding:8px 18px 16px;
  }
  .nav-links[data-ouvert]{display:flex;}
  .nav-links a{
    padding:14px 4px;                 /* cible tactile confortable */
    border-bottom:1px solid var(--border);
    font-size:1rem;
  }
  .nav-links a:last-child{border-bottom:none;}
  .nav-links a[aria-current="page"]{border-bottom:1px solid var(--border);}
}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--action); color:var(--on-action);
  padding:9px 18px; border-radius:8px;
  font-size:0.88rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
  transition:transform .15s ease;
}
.nav-cta:hover{transform:translateY(-1px);}
.nav-cta svg{width:16px; height:16px;}
/* « Soutenir » à côté d'« Essayer » : bouton à contour, marqué de l'anneau. */
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav-soutien, .nav-espace{
  display:inline-flex; align-items:center; gap:7px;
  border:2px solid var(--brand); color:var(--ink);
  padding:7px 14px; border-radius:8px;
  font-size:0.88rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
  transition:transform .15s ease;
}
.nav-soutien:hover, .nav-espace:hover{transform:translateY(-1px);}
/* « Mon espace » (l'app dans le navigateur, ADR-218) : montré par site.js
   seulement si l'app est en ligne ; `display` l'emporterait sur `hidden`. */
[data-espace][hidden]{display:none !important;}
.nav-soutien svg{width:14px; height:14px; color:var(--brand);}
.nav-actions a[aria-current="page"]{outline:3px solid var(--brand); outline-offset:2px;}
.nav-links .menu-seul{display:none;}
@media (max-width:560px){
  /* En-tête chargé sur un téléphone : marque + menu + actions ne tiennent pas
     sur une ligne et le nom de marque se coupait. Les boutons passent dans le
     menu. */
  .nav-actions{display:none;}
  .nav-links .menu-seul{display:block; font-weight:700; color:var(--ink);}
}

/* ---- buttons ---- */
.btn-primary{
  background:var(--action);
  color:var(--on-action);
  border:none; cursor:pointer;
  padding:14px 26px;
  border-radius:8px;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Archivo', 'Karla', sans-serif;
  font-stretch:106%;
  min-height:52px;
  transition:background .15s ease;
}
.btn-primary:hover{background:var(--brand);}
.btn-primary:disabled{opacity:.55; cursor:default;}
.btn-secondary{
  background:transparent;
  color:var(--ink);
  padding:14px 6px;
  font-weight:600;
  text-decoration:none;
  border:none; border-bottom:2px solid var(--border);
  border-radius:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-secondary:hover{border-color:var(--ink);}
.btn-ghost{
  background:var(--surface);
  color:var(--ink);
  border:2px solid var(--ink);
  padding:11px 18px;
  border-radius:8px;
  font-weight:600; font-size:0.92rem;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .15s ease;
}
.btn-ghost:hover{background:var(--brand-soft);}
.btn-ghost svg{width:16px; height:16px;}

/* ---- sections ---- */
section{padding:72px 0;}
@media (max-width:600px){ section{padding:52px 0;} }
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
.section-head h2{font-size:clamp(1.7rem, 3.2vw, 2.3rem); margin-top:10px;}
.section-head p{color:var(--ink-soft); margin-top:14px; font-size:1.05rem;}
.band{
  background:var(--band);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* ---- cards & badges ---- */
.card{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:8px;
  padding:28px 24px;
}
.card.lift{border-color:var(--ink);}
.badge{
  font-family:'Karla', sans-serif; font-variant-numeric:tabular-nums;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--brand-text);
  background:var(--brand-soft);
  border-radius:6px;
  padding:4px 10px;
  height:fit-content;
  /* Les étiquettes de critère sont des phrases depuis qu'elles reprennent les
     libellés de l'application : elles doivent pouvoir se replier. */
  display:inline-block;
  line-height:1.35;
}
.badge.coral{color:var(--brand-text); background:var(--brand-soft);}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 14px;
  font-size:0.9rem;
  font-weight:600;
}
.pill svg{width:18px; height:18px; stroke:var(--brand-text); flex-shrink:0;}

/* ---- faq ---- */
.faq{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.faq-item{border:1px solid var(--border); border-radius:8px; background:var(--surface); padding:4px 22px;}
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; font-weight:700; font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';
  font-family:'Karla', sans-serif; font-variant-numeric:tabular-nums;
  font-size:1.3rem; color:var(--brand-text);
  transition:transform .2s ease; flex-shrink:0; margin-left:12px;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{color:var(--ink-soft); padding-bottom:18px; margin-top:-6px; font-size:0.95rem;}

/* ---- captures de l'application ---- */
.shots{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  max-width:880px; margin:0 auto;
}
@media (max-width:760px){
  /* Deux écrans côte à côte plutôt qu'une colonne : trois vignettes empilées
     à pleine largeur pousseraient le reste de la page hors de vue. */
  .shots{grid-template-columns:repeat(2, 1fr); gap:18px; max-width:420px;}
  .shots li:last-child{display:none;}
}
.shots li{list-style:none; text-align:center;}
.phone{
  /* `display:block` obligatoire : un <span> en ligne autour d'une image en
     bloc laisse dépasser une barre sous le cadre (l'espace réservé à la ligne
     de base). */
  display:block;
  border:8px solid var(--ink);
  border-radius:8px;
  overflow:hidden;
  background:var(--ink);
  line-height:0;
}
.phone img{width:100%; height:auto; display:block;}
.shots figcaption{
  margin-top:14px; font-size:0.9rem; color:var(--ink-soft); line-height:1.45;
  text-wrap:balance;
}
.shots b{display:block; color:var(--ink); font-weight:700;}

/* ---- inscription « prévenez-moi » ---- */
.signup-card{
  background:var(--ink); color:var(--bg);
  border-radius:8px; padding:38px 34px;
  max-width:760px; margin:0 auto; text-align:center;
}
@media (max-width:600px){ .signup-card{padding:28px 20px;} }
.signup-card h2{color:var(--bg); font-size:clamp(1.4rem, 2.8vw, 1.9rem); font-weight:600; margin-top:8px;}
.signup-card .eyebrow{color:var(--on-ink-accent);}
.signup-card > p{
  color:color-mix(in srgb, var(--bg) 78%, transparent);
  margin-top:12px; max-width:54ch; margin-left:auto; margin-right:auto;
}
.signup-form{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:22px;
}
/* `display:flex` l'emporterait sur la règle par défaut de `[hidden]` : sans
   cette ligne, le formulaire resterait visible après une inscription réussie. */
.signup-form[hidden]{display:none;}
.signup-form input{
  font:inherit; font-size:1rem; color:var(--ink);
  background:var(--bg); border:1px solid transparent; border-radius:8px;
  padding:14px 16px; min-width:min(320px, 100%); flex:1; max-width:380px;
}
.signup-form input:focus-visible{outline:3px solid var(--brand); outline-offset:2px;}
.signup-form button{flex-shrink:0;}
.signup-status{
  margin-top:16px; font-weight:600; min-height:1.4em;
  color:color-mix(in srgb, var(--bg) 88%, transparent);
}
.signup-status.error{color:var(--error-on-ink);}
.signup-note{
  margin-top:14px; font-size:0.82rem;
  color:color-mix(in srgb, var(--bg) 62%, transparent);
  max-width:56ch; margin-left:auto; margin-right:auto;
}
.signup-note a{color:inherit;}

/* ---- notice ---- */
.notice{
  background:var(--band);
  border:2px solid var(--border);
  border-radius:8px;
  padding:14px 18px;
  font-size:0.92rem;
  color:var(--ink-soft);
}

/* ---- footer ---- */
.site-footer{padding:48px 0 40px; border-top:1px solid var(--border); margin-top:40px;}
.footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap; font-size:0.88rem; color:var(--ink-soft);}
.footer-links a{text-decoration:none;}
.footer-links a:hover{color:var(--brand-text);}
/* Devises de BISPOT (ADR-219), sous la marque. */
.footer-devise{font-size:0.85rem; color:var(--ink-soft); margin-top:8px; line-height:1.45;}
.footer-note{font-size:0.8rem; color:var(--ink-soft); margin-top:20px; max-width:640px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important; animation:none !important;}
}

/* ---- signature : disques, droites, anneau (docs/DESIGN_SYSTEM.md) ---- */
.poster{
  background:var(--poster); color:var(--on-poster);
  border-radius:8px; padding:28px 26px;
}
.poster h2, .poster h3{color:var(--on-poster);}
.poster .eyebrow{color:var(--ring);}
.person{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  font-family:'Archivo', 'Karla', sans-serif; font-stretch:var(--display-width);
  font-weight:800; font-size:0.85rem; color:var(--on-person); background:var(--p1);
}
.signup-card .btn-primary{background:var(--on-ink-accent); color:var(--ink);}