:root{
  --encre:#12151c;
  --texte-doux:#4c5566;
  --fond:#ffffff;
  --surface:#f4f6fa;
  --bord:#dfe4ec;

  --nuit:#0c1220;
  --nuit-surface:#161d2e;
  --nuit-bord:#26304a;
  --creme:#eef1f7;
  --creme-doux:rgba(238,241,247,.66);

  --accent:#2f5fed;
  --accent-fonce:#1f43c9;
  --accent-clair:#e7edfd;
  --accent-vif:#3868ff;

  --succes:#1f9d63;
  --rayon:6px;
  --rayon-lg:14px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--encre);background:var(--fond);
  line-height:1.55;font-size:17px;
}
img{max-width:100%;display:block}
a{color:var(--accent-fonce)}
.conteneur{max-width:1080px;margin:0 auto;padding:0 24px}
.lien-evitement{position:absolute;left:-999px;top:0;background:#fff;padding:10px;z-index:100}
.lien-evitement:focus{left:10px}

.kicker{display:inline-flex;align-items:baseline;gap:.6em;font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-vif);margin:0 0 1.1em}
.kicker .num{font-family:var(--serif);font-style:italic;opacity:.7}

/* ---------- en-tete ---------- */
.en-tete{background:var(--nuit);border-bottom:1px solid var(--nuit-bord);position:sticky;top:0;z-index:50}
.en-tete .conteneur{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:24px;flex-wrap:wrap}
.logo a{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--creme);text-decoration:none;letter-spacing:-.01em}
.logo span{color:var(--accent-vif)}
.navigation-principale ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.navigation-principale a{text-decoration:none;color:var(--creme-doux);font-weight:600;font-size:.92rem;letter-spacing:.01em;
  padding-bottom:4px;border-bottom:2px solid transparent}
.navigation-principale a:hover{color:var(--creme)}
.navigation-principale a[aria-current]{color:var(--creme);border-color:var(--accent-vif)}
.en-tete-droite{display:flex;align-items:center;gap:18px}
.bouton-nav{background:var(--accent-vif);color:#fff!important;padding:.6em 1.25em;border-radius:var(--rayon);
  font-weight:700;font-size:.86rem;white-space:nowrap;text-decoration:none!important}
.bouton-nav:hover{background:var(--accent-fonce)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--creme);
  padding:88px 0 96px;
  background:
    radial-gradient(680px 520px at 88% -10%,rgba(56,104,255,.30),transparent 68%),
    radial-gradient(560px 420px at -8% 118%,rgba(56,104,255,.14),transparent 68%),
    var(--nuit);
}
.hero .conteneur{position:relative;z-index:1;max-width:820px}
.hero .kicker{color:var(--accent-vif)}
.hero h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 .45em;font-weight:600}
.hero h1 em{color:var(--accent-vif);font-style:normal}
.hero .intro{font-size:1.18rem;color:var(--creme-doux);max-width:52ch;margin:0 0 2em}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:2.4em}
.hero .preuve{display:flex;gap:28px;flex-wrap:wrap;font-size:.88rem;color:var(--creme-doux);
  border-top:1px solid var(--nuit-bord);padding-top:1.5em}
.hero .preuve strong{color:var(--creme);display:block;font-family:var(--serif);font-size:1.3rem;font-weight:700}

.bouton{display:inline-block;padding:.9em 1.6em;border-radius:var(--rayon);font-weight:700;text-decoration:none;
  font-size:1rem;border:2px solid transparent;transition:transform .15s ease,background .15s ease}
.bouton-principal{background:var(--accent-vif);color:#fff}
.bouton-principal:hover{background:var(--accent-fonce);transform:translateY(-1px)}
.bouton-fantome{background:transparent;color:var(--creme);border-color:var(--nuit-bord)}
.bouton-fantome:hover{border-color:var(--creme-doux)}
.bouton-secondaire{background:none;color:var(--accent-fonce);border-color:var(--accent-fonce)}
.bouton-secondaire:hover{background:var(--accent-clair)}

/* ---------- pitch produit (accueil) ---------- */
.pitch-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--bord);
  border:1px solid var(--bord);border-radius:var(--rayon-lg);overflow:hidden;margin-top:1em}
.pitch-item{background:var(--surface);padding:32px 28px}
.pitch-item .num{font-family:var(--serif);font-size:1.7rem;color:var(--accent-vif);display:block;margin-bottom:.5em;font-weight:700}
.pitch-item h3{font-size:1.05rem;margin:0 0 .4em}
.pitch-item p{font-size:.94rem;color:var(--texte-doux);margin:0}

.bandeau-produit{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.bandeau-produit .visuel{background:var(--nuit);border-radius:var(--rayon-lg);padding:34px;color:var(--creme)}
.bandeau-produit .visuel .prix-flash{font-family:var(--serif);font-size:3rem;font-weight:700;margin:.2em 0}
.bandeau-produit .visuel .prix-flash small{font-size:1rem;font-weight:400;color:var(--creme-doux)}
.bandeau-produit .visuel ul{list-style:none;padding:0;margin:1.2em 0 0;display:grid;gap:.6em;font-size:.94rem;color:var(--creme-doux)}
.bandeau-produit .visuel ul li{padding-left:1.5em;position:relative}
.bandeau-produit .visuel ul li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--accent-vif);border-radius:2px;transform:rotate(45deg)}

/* ---------- sections generales ---------- */
section{padding:84px 0}
section.alt{background:var(--surface);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
section.sombre{background:var(--nuit);color:var(--creme)}
section.sombre .kicker{color:var(--accent-vif)}
section.sombre h2{color:var(--creme)}
section.sombre .sous-titre-section{color:var(--creme-doux)}
.entete-section{max-width:640px;margin:0 0 3em}
h2{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 .35em;letter-spacing:-.01em;font-weight:600}
.sous-titre-section{color:var(--texte-doux);max-width:58ch;margin:0;font-size:1.08rem}
.entete-page{background:var(--nuit);color:var(--creme);padding:64px 0 56px}
.entete-page .kicker{color:var(--accent-vif)}
.entete-page h1{font-family:var(--serif);font-size:clamp(2rem,4.4vw,2.9rem);margin:0 0 .3em;font-weight:600}
.entete-page p{color:var(--creme-doux);max-width:56ch;font-size:1.1rem;margin:0}

/* ---------- tarifs ---------- */
.argument-tarif{max-width:640px;margin:0 0 3.2em}
.argument-tarif p{font-size:1.08rem;color:var(--texte-doux)}
.grille-tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin:0 0 2.4em;align-items:start}
.carte-tarif{background:var(--fond);border:1px solid var(--bord);border-radius:var(--rayon-lg);padding:40px 34px;position:relative;display:flex;flex-direction:column}
.carte-tarif.mise-en-avant{border-color:var(--succes);border-width:2px;box-shadow:0 0 0 4px rgba(31,157,99,.12)}
.carte-tarif .etiquette{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-vif)}
.carte-tarif.mise-en-avant .etiquette{color:var(--succes)}
.carte-tarif .cadence{font-size:.92rem;color:var(--texte-doux);margin:.6em 0 1.1em}
.carte-tarif .prix{font-family:var(--serif);font-size:2.6rem;font-weight:700;margin:0;letter-spacing:-.01em}
.carte-tarif .prix small{font-size:.98rem;font-weight:400;color:inherit;opacity:.65}
.carte-tarif .detail{font-size:.9rem;color:var(--texte-doux);margin:.5em 0 0}
.carte-tarif .badge-eco{position:absolute;top:-12px;right:24px;background:var(--succes);color:#fff;
  font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:100px;letter-spacing:.03em}
.carte-tarif .inclus-carte{list-style:none;padding:16px 0 0;margin:1.5em 0 0;display:grid;gap:.65em;font-size:.92rem;
  color:var(--texte-doux);border-top:1px solid var(--bord);flex-grow:1}
.carte-tarif .inclus-carte li{padding-left:1.5em;position:relative}
.carte-tarif .inclus-carte li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;
  background:var(--accent-vif);border-radius:2px;transform:rotate(45deg)}
.carte-tarif.mise-en-avant .inclus-carte li::before{background:var(--succes)}
.carte-tarif .cta-carte{display:block;text-align:center;margin-top:1.8em}

.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:2.6em}
.deux-colonnes h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--texte-doux);margin:0 0 1em}
.liste-inclus{list-style:none;padding:0;margin:0;display:grid;gap:.7em}
.liste-inclus li{padding-left:1.7em;position:relative;font-size:1rem}
.liste-inclus li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--accent-vif);border-radius:2px;transform:rotate(45deg)}
.liste-exclus{list-style:none;padding:0;margin:0;display:grid;gap:.7em;color:var(--texte-doux)}
.liste-exclus li{padding-left:1.7em;position:relative;font-size:.98rem}
.liste-exclus li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--bord)}

/* ---------- grille numerotee ---------- */
.grille-numerotee{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;
  background:var(--bord);border:1px solid var(--bord);border-radius:var(--rayon-lg);overflow:hidden;margin-top:1em}
.item-numerote{background:var(--fond);padding:30px 26px}
.item-numerote .num{font-family:var(--serif);font-size:1.6rem;color:var(--accent-vif);display:block;margin-bottom:.5em;font-weight:700}
.item-numerote h3{font-size:1.02rem;margin:0 0 .35em}
.item-numerote p{font-size:.92rem;color:var(--texte-doux);margin:0}

/* ---------- exemples ---------- */
.grille-demos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.carte-demo{border:1px solid var(--bord);border-radius:var(--rayon-lg);padding:0;background:var(--fond);
  text-decoration:none;color:var(--encre);display:block;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.carte-demo:hover{border-color:var(--accent-vif);transform:translateY(-2px);box-shadow:0 10px 26px rgba(18,21,28,.08)}
.carte-demo .vignette{height:130px;background:linear-gradient(135deg,var(--swatch-1,var(--accent)) 0%,var(--swatch-2,var(--accent-fonce)) 100%);
  display:flex;align-items:center;justify-content:center}
.carte-demo .vignette span{color:#fff;font-family:var(--serif);font-size:1.9rem;font-weight:700;opacity:.95}
.carte-demo .corps{padding:22px 24px}
.carte-demo strong{display:block;font-size:1.1rem;margin-bottom:.15em}
.carte-demo .meta{color:var(--texte-doux);font-size:.9rem}
.etiquette-demo{display:inline-block;margin-top:.9em;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--texte-doux);border-top:1px solid var(--bord);padding-top:.7em;width:100%}

/* ---------- etapes ---------- */
.grille-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;margin-top:1em}
.etape .num{font-family:var(--serif);font-size:2.4rem;color:var(--accent-vif);opacity:.85;display:block;margin-bottom:.25em;font-weight:700}
.etape h3{margin:0 0 .35em;font-size:1.1rem}
.etape p{margin:0;color:var(--texte-doux)}
section.sombre .etape p{color:var(--creme-doux)}

/* ---------- differenciateurs + profil ---------- */
.grille-diff{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--nuit-bord);
  border:1px solid var(--nuit-bord);border-radius:var(--rayon-lg);overflow:hidden;margin-bottom:3.5em}
.diff-item{background:var(--nuit-surface);padding:26px 24px}
.diff-item h3{margin:0 0 .3em;font-size:1rem;color:var(--creme)}
.diff-item p{margin:0;font-size:.9rem;color:var(--creme-doux)}

.bloc-profil{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap}
.bloc-profil .texte{flex:1;min-width:280px}
.bloc-profil .texte p{color:var(--creme-doux);font-size:1.05rem}
.bloc-profil .texte strong{color:var(--creme)}
.bloc-profil .coordonnees{background:var(--nuit-surface);border:1px solid var(--nuit-bord);border-radius:var(--rayon-lg);padding:26px;min-width:230px}
.bloc-profil .coordonnees p{margin:0 0 .7em;font-size:.95rem;color:var(--creme-doux)}
.bloc-profil .coordonnees a{font-weight:700;color:var(--creme)}

/* ---------- faq ---------- */
.faq{display:grid;gap:2px;background:var(--bord);border:1px solid var(--bord);border-radius:var(--rayon-lg);overflow:hidden}
.faq details{background:var(--fond);padding:22px 26px}
.faq summary{font-weight:700;cursor:pointer;list-style:none;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent-vif);font-weight:700;font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.9em 0 0;color:var(--texte-doux)}

/* ---------- contact final / page contact ---------- */
.contact-final{color:var(--creme);text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(620px 480px at 50% -15%,rgba(56,104,255,.28),transparent 70%),var(--nuit)}
.contact-final .conteneur{position:relative;z-index:1}
.contact-final .kicker{justify-content:center;color:var(--accent-vif)}
.contact-final h2{color:var(--creme)}
.contact-final .sous-titre-section{color:var(--creme-doux);margin:0 auto 2em}
.grille-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:3em;text-align:left}
.carte-contact{background:var(--fond);border:1px solid var(--bord);border-radius:var(--rayon-lg);padding:26px}
.carte-contact h3{margin:0 0 .3em;font-size:1rem}
.carte-contact p{margin:0;color:var(--texte-doux);font-size:.94rem}
.carte-contact a{font-weight:700}

/* ---------- formulaire de contact ---------- */
.formulaire-contact{max-width:640px}
.formulaire-contact .champ{margin-bottom:1.3em}
.formulaire-contact .deux{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.formulaire-contact label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.45em;color:var(--encre)}
.formulaire-contact .optionnel{font-weight:400;color:var(--texte-doux)}
.formulaire-contact input,.formulaire-contact textarea{width:100%;padding:.85em 1em;border-radius:var(--rayon);
  border:1px solid var(--bord);background:var(--fond);color:var(--encre);font-family:var(--sans);font-size:1rem}
.formulaire-contact input:focus,.formulaire-contact textarea:focus{outline:2px solid var(--accent-vif);outline-offset:1px}
.formulaire-contact textarea{min-height:130px;resize:vertical}
.formulaire-contact .bouton{border:none;cursor:pointer;font-size:1rem}
.formulaire-contact .note-envoi{font-size:.86rem;color:var(--texte-doux);margin-top:1em}
.separateur-ou{display:flex;align-items:center;gap:16px;margin:3.2em 0;color:var(--texte-doux);font-size:.86rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.separateur-ou::before,.separateur-ou::after{content:"";flex:1;height:1px;background:var(--bord)}

/* ---------- commande / selecteur de formule ---------- */
.selecteur-formule{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.4em 0 2.8em}
.option-formule{display:block;border:2px solid var(--bord);border-radius:var(--rayon-lg);padding:22px 22px;
  cursor:pointer;background:var(--fond);position:relative;transition:border-color .15s,box-shadow .15s}
.option-formule input{position:absolute;top:20px;right:20px;width:18px;height:18px;accent-color:var(--accent-vif)}
.option-formule .nom{font-weight:700;display:block;margin-bottom:.5em;font-size:.92rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--texte-doux)}
.option-formule .prix{font-family:var(--serif);font-size:1.5rem;font-weight:700;display:block}
.option-formule .prix small{font-size:.85rem;font-weight:400;color:var(--texte-doux)}
.option-formule:has(input:checked){border-color:var(--accent-vif);box-shadow:0 0 0 3px var(--accent-clair)}
.bloc-paiement{background:var(--surface);border:1px solid var(--bord);border-radius:var(--rayon-lg);
  padding:32px 30px;margin-bottom:3em}
.bloc-paiement h3{margin:0 0 .5em;font-size:1.15rem}
.bloc-paiement p{color:var(--texte-doux);margin:0 0 1.3em;max-width:56ch}
.bloc-paiement .etapes-paiement{list-style:none;padding:0;margin:0 0 1.6em;display:grid;gap:.6em;color:var(--texte-doux);font-size:.94rem}
.bloc-paiement .etapes-paiement li{padding-left:1.8em;position:relative}
.bloc-paiement .etapes-paiement li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  background:var(--accent-vif);border-radius:2px;transform:rotate(45deg)}

/* ---------- a propos : recit + visuels ---------- */
.avatar-mp{width:104px;height:104px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 32% 28%,var(--accent-vif),var(--accent-fonce) 72%);
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);
  font-size:2.1rem;font-weight:700;box-shadow:0 10px 26px rgba(31,67,201,.28)}
.entete-profil{display:flex;align-items:center;gap:24px;margin-bottom:2.2em;flex-wrap:wrap}
.entete-profil .qui{color:var(--texte-doux)}
.entete-profil .qui strong{display:block;color:var(--encre);font-family:var(--serif);font-size:1.3rem;font-weight:700}
.recit{display:grid;gap:2.6em;margin:0 0 3.6em}
.recit-etape{display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start}
.recit-etape .marque{width:64px;height:64px;border-radius:50%;background:var(--accent-clair);color:var(--accent-fonce);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.5rem;font-weight:700;flex-shrink:0}
.recit-etape h3{margin:.2em 0 .4em;font-size:1.15rem}
.recit-etape p{color:var(--texte-doux);margin:0;max-width:62ch;font-size:1.02rem}
@media(max-width:560px){
  .recit-etape{grid-template-columns:48px 1fr}
  .recit-etape .marque{width:48px;height:48px;font-size:1.1rem}
  .formulaire-contact .deux{grid-template-columns:1fr}
}

/* ---------- pied de page ---------- */
.pied-de-page{background:var(--nuit);border-top:1px solid var(--nuit-bord);color:var(--creme-doux);padding:40px 0}
.pied-de-page p{margin:0;color:var(--creme-doux);font-size:.92rem}
.pied-de-page a{color:var(--creme-doux);text-decoration:none}
.pied-de-page a:hover{color:var(--creme)}
.liens-legaux{list-style:none;display:flex;gap:22px;flex-wrap:wrap;padding:0;margin:.9em 0 0;font-size:.88rem}

/* ---------- pages documents (legal) ---------- */
.entete-page-annexe{background:var(--nuit);color:var(--creme);padding:44px 0}
.entete-page-annexe h1{font-family:var(--serif);margin:0;font-weight:600}
.section-document{padding:48px 0}
.boite-legale h2{font-size:1.15rem;margin:1.6em 0 .4em}
.boite-legale h2:first-child{margin-top:0}
.boite-legale p,.boite-legale li{color:var(--texte-doux)}
.boite-legale table{border-collapse:collapse;width:100%;margin:1em 0}
.boite-legale th,.boite-legale td{border:1px solid var(--bord);padding:10px 12px;text-align:left;font-size:.95rem}
.boite-legale th{background:var(--surface)}

@media(max-width:760px){
  .deux-colonnes{grid-template-columns:1fr}
  .bandeau-produit{grid-template-columns:1fr}
  .hero{padding:60px 0 68px}
}
@media(max-width:640px){
  .en-tete .conteneur{flex-direction:column;align-items:flex-start}
  .navigation-principale ul{gap:16px;row-gap:8px}
  .bloc-profil{flex-direction:column}
}