/* =========================================================
   Comwere – feuille de style unique (direction C)
   Pour retoucher : changer d'abord les variables ci-dessous.
   ========================================================= */
:root{
  /* Couleurs */
  --ink:#080A1A;        /* fond principal */
  --ink-2:#0F1330;      /* surfaces (cartes, formulaires) */
  --ink-3:#171C42;      /* surfaces relevées */
  --line:#262C5E;       /* bordures */
  --text:#EEF0FF;       /* texte principal */
  --muted:#A9B0D6;      /* texte secondaire (contraste AA sur --ink et --ink-2) */
  --blue:#6F82FF;
  --violet:#B77CFF;
  --rose:#FF7DB1;
  --amber:#FFC971;      /* focus clavier, étiquettes */
  --on-grad:#0B0820;    /* texte posé sur le dégradé */
  --grad:linear-gradient(110deg,var(--blue),var(--violet) 55%,var(--rose));

  /* Typographie (polices hébergées sur le site, dossier /fonts) */
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Formes et mise en page */
  --r:18px;             /* arrondi des cartes */
  --max:1120px;         /* largeur maximale du contenu */
  --header-h:68px;
}

@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--ink);color:var(--text);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:#1a1200;padding:10px 16px;border-radius:8px;z-index:100;font-weight:600}
.skip:focus{left:8px}
.wrap{width:min(var(--max),100% - 32px);margin-inline:auto}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.3rem,6vw,4rem);max-width:16ch}
h2{font-size:clamp(1.9rem,4.4vw,3rem);max-width:20ch}
h3,.h3{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;line-height:1.15}
p{max-width:62ch}
.lead{color:var(--muted);font-size:1.15rem;margin-top:18px}
.muted{color:var(--muted)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
section{padding:clamp(64px,10vw,120px) 0;position:relative}
.kicker{font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-bottom:14px}
.more{margin-top:32px}
.more a{color:var(--text);font-weight:600;text-underline-offset:4px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 1rem var(--body);text-decoration:none;padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;min-height:48px;transition:transform .2s,box-shadow .2s,background .2s}
.btn-main{background:var(--grad);color:var(--on-grad);box-shadow:0 10px 40px -10px rgba(183,124,255,.7)}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 14px 44px -8px rgba(255,125,177,.7)}
.btn-ghost{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- En-tête ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(8,10,26,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(38,44,94,.6)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);gap:16px}
.logo{font:800 1.5rem var(--display);text-decoration:none;letter-spacing:-.03em}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav ul{display:flex;gap:28px;list-style:none;padding:0}
.nav ul a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.98rem;padding:6px 0}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--text)}
.nav ul a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:8px;text-decoration-thickness:2px}
.nav .btn{padding:10px 20px;min-height:44px;font-size:.95rem}
/* Téléphone : le menu passe sur une seconde ligne, défilable si besoin */
@media(max-width:820px){
  .nav{flex-wrap:wrap;row-gap:0;padding-top:10px}
  .nav nav{order:3;width:100%;overflow-x:auto}
  .nav ul{gap:22px;padding:8px 0 12px}
  .nav ul a{font-size:.95rem;white-space:nowrap;display:inline-block;padding:8px 0}
  html{scroll-padding-top:130px}
}

/* ---------- Héros (accueil) ---------- */
.hero{padding-top:clamp(48px,8vw,96px);overflow:hidden}
.hero::before,.hero::after,.page-head::before{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.hero::before{width:520px;height:520px;background:var(--blue);top:-180px;left:-160px}
.hero::after{width:460px;height:460px;background:var(--rose);opacity:.28;right:-140px;top:120px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(2.5rem,6.6vw,4.75rem);max-width:13ch}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-note{margin-top:20px;color:var(--muted);font-size:.95rem}
.hero h1,.hero .lead,.hero .actions,.hero-note,.mock{animation:in .8s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{animation-delay:.1s}.hero .actions{animation-delay:.2s}.hero-note{animation-delay:.3s}.mock{animation-delay:.25s}
@keyframes in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Maquette de navigateur (illustration) */
.mock{background:var(--ink-2);border:1px solid var(--line);border-radius:20px;box-shadow:0 40px 90px -30px rgba(111,130,255,.55),0 0 0 1px rgba(255,255,255,.03) inset;transform:rotate(1.5deg)}
.bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)}
.bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.bar b{margin-left:10px;flex:1;background:var(--ink);border-radius:999px;padding:3px 14px;font:500 .78rem var(--body);color:var(--muted);overflow:hidden;white-space:nowrap}
.scr{padding:22px;display:grid;gap:14px}
.scr .t{height:26px;width:70%;border-radius:8px;background:var(--grad)}
.scr .l{height:10px;border-radius:6px;background:var(--ink-3);width:90%}
.scr .l.short{width:64%}
.scr .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.scr .c{height:74px;border-radius:12px;background:var(--ink-3);border:1px solid var(--line)}
.scr .c:nth-child(2){background:linear-gradient(160deg,var(--ink-3),#3a2a6e)}
.scr .b{height:34px;width:120px;border-radius:999px;background:var(--amber)}
.mock-cap{padding:0 22px 18px;color:var(--muted);font-size:.85rem}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}.mock{transform:none}}

/* ---------- En-tête des pages intérieures ---------- */
.page-head{padding-bottom:clamp(24px,4vw,48px);overflow:hidden}
.page-head::before{width:480px;height:480px;background:var(--blue);opacity:.35;top:-240px;left:-180px}
.page-head .wrap{position:relative;z-index:1}

/* ---------- Bandeau de promesses ---------- */
.promises{padding:0 0 clamp(48px,8vw,96px)}
.promises ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.promises li{border-top:1px solid var(--line);padding-top:20px;color:var(--muted)}
.promises b{display:block;color:var(--text);font:700 1.15rem var(--display);margin-bottom:6px}
@media(max-width:900px){.promises ul{grid-template-columns:1fr}}

/* ---------- Cartes / offres ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:14px}
.card > p{color:var(--muted)}
.card.pop{background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box,var(--grad) border-box;border:1.5px solid transparent}
.price{font:800 2.4rem var(--display);letter-spacing:-.03em;color:var(--text)!important}
.price small{display:block;font:500 .88rem var(--body);color:var(--muted);letter-spacing:0}
.delay{font-size:.92rem}
.card .btn{margin-top:auto}
.tag{align-self:flex-start;font-size:.8rem;font-weight:600;background:rgba(255,201,113,.12);color:var(--amber);padding:4px 12px;border-radius:999px}
.fine{margin-top:26px;color:var(--muted);font-size:.95rem}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}

/* Listes à coches */
.checks{padding:0;list-style:none;display:grid;gap:10px;color:var(--muted);margin-top:6px}
.checks li{padding-left:26px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg) translateY(-2px)}
.checks.no li::before{content:"×";border:0;width:auto;height:auto;top:-.08em;transform:none;color:var(--rose);font:700 1.3rem/1 var(--display)}

/* Deux colonnes */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.two h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:20px}
.two p{color:var(--muted);margin-top:16px}
.alt{background:linear-gradient(180deg,transparent,var(--ink-2) 30%,var(--ink-2) 70%,transparent)}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:40px}}

/* ---------- Méthode (frise qui se remplit au défilement) ---------- */
.steps{list-style:none;padding:0;margin-top:56px;display:grid;gap:0;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:var(--line)}
.steps::after{content:"";position:absolute;left:23px;top:8px;width:2px;height:var(--p,0%);background:var(--grad);max-height:calc(100% - 16px)}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:26px;padding-bottom:40px;counter-increment:s}
.steps li:last-child{padding-bottom:0}
.dot{width:48px;height:48px;border-radius:50%;background:var(--ink);border:2px solid var(--line);display:grid;place-items:center;font:700 1.1rem var(--display);position:relative;z-index:1;transition:border-color .4s,color .4s}
.dot::before{content:counter(s)}
.steps li.on .dot{border-color:var(--violet);color:var(--violet)}
.steps h2,.steps h3{margin:8px 0 6px;font-size:1.3rem;max-width:none}
.steps p{color:var(--muted)}

/* ---------- Exemples (captures des modèles) ---------- */
.demos{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.demos.four{grid-template-columns:repeat(4,1fr)}
.demo{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .2s,border-color .2s}
.demo:hover{transform:translateY(-3px);border-color:var(--violet)}
.demo img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--line);background:var(--ink-3)}
.demo .in{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.demo .tag{margin-bottom:4px}
.demo h2,.demo h3{font-size:1.25rem;max-width:none}
.demo h2 a,.demo h3 a{text-decoration:none}
.demo h2 a::after,.demo h3 a::after{content:"";position:absolute;inset:0}  /* toute la carte est cliquable */
.demo p{color:var(--muted);font-size:.98rem}
.demo .sector{color:var(--text);font-weight:600;font-size:.92rem}
@media(max-width:1000px){.demos.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.demos,.demos.four{grid-template-columns:1fr}}

/* Encadré d'information */
.note-box{margin-top:32px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:12px;padding:18px 22px;background:rgba(255,201,113,.05);color:var(--muted)}
.note-box p + p{margin-top:10px}
.note-box strong{color:var(--text)}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;display:grid;gap:12px;max-width:820px}
details{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:0 24px}
summary{cursor:pointer;list-style:none;font:600 1.08rem var(--body);padding:20px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:48px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:500 1.7rem/1 var(--display);color:var(--violet);transition:transform .25s;flex-shrink:0}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);padding-bottom:22px}

/* ---------- Appel à l'action / contact ---------- */
.contact{background:linear-gradient(180deg,transparent,var(--ink-2))}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.cta .lead{margin-top:14px}
.mail{margin-top:22px;color:var(--muted)}
.mail a{color:var(--text);font-weight:600}
.cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.cgrid h2{font-size:1.4rem;margin:28px 0 10px}
.cgrid h2:first-child{margin-top:0}
@media(max-width:900px){.cgrid{grid-template-columns:1fr;gap:36px}}

/* Formulaire */
form{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:grid;gap:18px}
label{font-weight:600;font-size:.95rem;display:grid;gap:8px}
label span{font-weight:400;color:var(--muted)}
input,textarea,select{font:inherit;color:var(--text);background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-height:48px;width:100%}
input:focus,textarea:focus,select:focus{outline:3px solid var(--amber);outline-offset:1px;border-color:transparent}
textarea{min-height:130px;resize:vertical}
.small{font-size:.88rem;color:var(--muted)}
.small a{color:var(--text)}
.status{color:var(--muted);font-size:.92rem}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* champ piège anti-robots */

/* ---------- Pages de texte (mentions, confidentialité, à propos) ---------- */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:44px 0 14px;max-width:none}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted)}
.prose p + p{margin-top:12px}
.prose ul{padding-left:1.2em;display:grid;gap:8px;margin-top:10px}
.prose a{color:var(--text)}
.todo{background:rgba(255,201,113,.14);color:var(--amber);border-radius:6px;padding:1px 6px;font-weight:600}

/* ---------- Pied de page ---------- */
footer{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px}
footer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{text-decoration:none;display:inline-block;padding:4px 0}
footer a:hover{color:var(--text);text-decoration:underline}

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