/* ==========================================================================
   Tillap — nouvelle direction artistique multi-pages (proposition v15)
   Mobile-first : base ~360 px, élargissement par min-width.
   Titres : Big Shoulders uniquement (jamais de serif dans les titres).
   Corps  : Inter.
   Line-height des titres ≥ 1.12 : les accents (É, Ô…) ne chevauchent
   plus la ligne du dessus.
   Fonts auto-hébergées (assets/fonts/) : le CSP de test.tillap.com impose
   font-src/style-src 'self' — pas de Google Fonts CDN.
   ========================================================================== */

@font-face{
  font-family:'Big Shoulders';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/big-shoulders.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Palette DA */
  --violet:#6C5CE7;
  --violet-fonce:#4A36BE;
  --violet-texte:#5643D6;
  --btn-a:#5A46DB;
  --btn-b:#7B68EE;
  --rose:#E86FA8;
  --orange:#F2A45B;
  --vert:#4DBA91;
  --vert-fonce:#0E7A52;
  --bleu:#6387F2;
  --encre:#102A43;
  --corps:#334E68;
  --discret:#627184;
  --faible:#98A1B2;
  --fond:#FFFFFF;
  --fond-alt:#F7F6FC;
  --fond-violet:#F2EFFE;
  --ligne:#E9E7F1;
  --ligne-violette:#E3DCFC;
  --ligne-forte:#DDDDDD;
  --nuit:#102A43;
  --degrade-texte:linear-gradient(105deg,#6C5CE7 8%,#E86FA8 58%,#F2A45B 100%);
  --degrade-texte-nuit:linear-gradient(105deg,#A593F3 8%,#E86FA8 58%,#F2A45B 100%);
  --degrade-btn:linear-gradient(105deg,#5A46DB,#7B68EE);
  --ombre-violette:0 8px 20px rgba(108,92,231,.28);
  --ombre-carte:0 1px 2px rgba(16,42,67,.04);
  --radius:16px;

  /* Alias de compatibilité pour la section « Ce qui change » reprise de la
     prod telle quelle (ses règles utilisent ces variables) */
  --cream:#FFFFFF;
  --cream-2:#F7F6FB;
  --card:#FFFFFF;
  --ink:#15131C;
  --ink-soft:#4A4750;
  --muted:#8B8794;
  --coral:#6C5CE7;
  --coral-dark:#5643D6;
  --peach-light:#EDEAFE;
  --mint-dark:#6C5CE7;
  --line:#E7E4F3;

  --lh-titre:1.12;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--corps);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;font-size:16px} /* ≥16px : pas de zoom iOS */
a{color:var(--violet-fonce);text-decoration-color:#A593F3;text-underline-offset:2px}
a:hover{color:var(--btn-a)}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
[hidden]{display:none !important} /* un display:grid/flex d'auteur ne doit jamais révéler un panneau masqué */

.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
/* Garde-fou grid : une piste « auto » s'élargit au max-content et déborde
   du viewport — toutes les grilles partent d'une colonne minmax(0,1fr). */
.grid,.hero-grid,.offre-teaser,.qui-grid,.fam-hero-grid,.contact-grid,.legal-grid,.mod-grid,.socle-cols,.foot-grid,.foot-plan-grid{grid-template-columns:minmax(0,1fr)}
.section{padding:clamp(44px,6vw,84px) 0}
.section--alt{background:var(--fond-alt);border-top:1px solid var(--ligne)}
.section--alt-bas{border-bottom:1px solid var(--ligne)}

/* ---------- Titres : une seule police, hauteur de ligne respirante ---------- */
.titre{
  font-family:'Big Shoulders',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.004em;
  line-height:var(--lh-titre);
  color:var(--encre);
  margin:0;
  text-wrap:balance;
}
.titre--hero{font-size:clamp(2.5rem,9vw,4.9rem);margin:18px 0 20px}
.titre--page{font-size:clamp(2.3rem,8vw,4.2rem);margin:16px 0 18px}
.titre--section{font-size:clamp(1.85rem,6vw,2.9rem)}
.titre--sous{font-size:clamp(1.5rem,5vw,2.2rem)}
.titre em,.titre .grad{
  font-style:normal;
  background:var(--degrade-texte);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.titre--nuit{color:#fff}
.titre--nuit em,.titre--nuit .grad{background:var(--degrade-texte-nuit);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Pastille de section (eyebrow) */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Big Shoulders',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.84rem;
  color:var(--violet-fonce);
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet)}
.eyebrow--rose::before{background:var(--rose)}
.eyebrow--orange::before{background:var(--orange)}
.eyebrow--vert::before{background:var(--vert)}
.eyebrow--bleu::before{background:var(--bleu)}
.eyebrow--nuit{color:#C8BDF9}

.lead{font-size:1.08rem;color:var(--discret);max-width:36em;margin:0 0 28px}
.lead--large{max-width:52em}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 28px;border-radius:999px;border:0;
  font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.12rem;text-decoration:none;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.btn--primaire{background:var(--degrade-btn);color:#fff;box-shadow:0 6px 16px rgba(108,92,231,.28)}
.btn--primaire:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(108,92,231,.34);color:#fff}
.btn--secondaire{background:#fff;color:var(--encre);border:1.5px solid #C9C9CE}
.btn--secondaire:hover{border-color:var(--encre);transform:translateY(-2px);color:var(--encre)}
.btn--compact{min-height:45px;padding:8px 22px;font-size:.98rem}
.btn:active{transform:translateY(0)}
.btn .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none;animation:dotPulse 2s infinite}

@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}55%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@keyframes msIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes etoilePop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* ---------- Bandeau offre de lancement ---------- */
.bandeau{background:linear-gradient(105deg,#5A46DB,#7B68EE);color:#fff;font-size:.82rem;text-align:center}
.bandeau .wrap{padding-top:7px;padding-bottom:7px;line-height:1.5}
.bandeau .prix-flash{font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:.95rem;white-space:nowrap}
.bandeau s.prix-flash{opacity:.75}
.bandeau .b-nowrap{white-space:nowrap}
.bandeau-pastille{
  display:inline-flex;align-items:center;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;
  padding:2px 12px;font-size:.78rem;white-space:nowrap;margin-top:2px;
}
@media (min-width:720px){
  .bandeau .wrap{display:flex;align-items:center;justify-content:center;gap:4px 14px;flex-wrap:wrap;line-height:1.35}
  .bandeau-pastille{margin-top:0}
}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--ligne)}
.header-in{display:flex;align-items:center;height:55px;gap:14px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand-logo{height:45px;width:auto;display:block}
.mainnav{display:none;gap:6px;font-weight:600;font-size:.95rem}
.mainnav a{text-decoration:none;color:var(--ink-soft);padding:.55em 1.1em;border-radius:999px;white-space:nowrap;transition:background .15s ease,color .15s ease}
.mainnav a:hover{color:var(--encre);background:var(--fond-alt)}
.mainnav a.active{color:var(--violet-texte);background:#EDEAFE}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.header-account{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;
  color:var(--ink-soft);text-decoration:none;padding:.55em .5em;border-radius:999px;white-space:nowrap;
}
.header-account svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;flex:none}
.header-account:hover{color:var(--encre)}
.header-account span{display:none}
.burger{
  width:45px;height:45px;border:1.5px solid var(--ligne);background:#fff;border-radius:999px;
  display:grid;place-items:center;color:var(--encre);flex:none;
}
.burger span{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .28s ease,opacity .18s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .28s ease}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.nav-open .burger span{transform:rotate(45deg)}
body.nav-open .burger span::before{transform:translateY(6px) rotate(-90deg)}
body.nav-open .burger span::after{transform:translateY(-6px) rotate(-90deg);opacity:0}

/* Menu mobile plein écran */
.msheet{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;background:#fff}
.msheet.on{display:flex}
.msheet-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-bottom:1px solid var(--ligne);flex:none}
.msheet-head .brand-logo{height:38px}
.msheet-close{width:42px;height:42px;display:grid;place-items:center;border:1.5px solid var(--ligne);border-radius:999px;background:#fff;color:var(--encre)}
.msheet-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.msheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 28px}
.msheet.on .msheet-body>*{animation:msIn .42s cubic-bezier(.22,1,.36,1) both}
.msheet.on .msheet-body>*:nth-child(2){animation-delay:.06s}
.ms-links{display:grid;gap:2px;margin-bottom:22px}
.ms-links a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--encre);font-size:1.02rem;font-weight:600;padding:14px 8px;border-bottom:1px solid var(--ligne);min-height:48px}
.ms-links a svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ms-cta{display:grid;gap:10px}
.ms-cta .btn{width:100%}

@media (min-width:1020px){
  .burger{display:none}
  .mainnav{display:flex}
  .header-in{gap:26px}
  .header-account span{display:inline}
}

/* ---------- Hero accueil ---------- */
.hero{
  background-color:#fff;
  background-image:
    radial-gradient(circle at 8% 92%,rgba(108,92,231,.14),transparent 34%),
    radial-gradient(circle at 96% 84%,rgba(232,111,168,.13),transparent 36%),
    radial-gradient(circle at 90% 4%,rgba(242,164,91,.12),transparent 32%);
  padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px);
}
.hero-grid{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.badges{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.88rem;color:var(--corps)}
.badges span{display:inline-flex;align-items:center;gap:.45em}
.badges i{width:6px;height:6px;border-radius:50%;flex:none;font-style:normal}
.badges .b-vert{background:var(--vert)}
.badges .b-bleu{background:var(--bleu)}
.badges .b-orange{background:var(--orange)}

/* Visuel hero : site + fiche Google + pastilles de métiers variés (pas BTP-only) */
.hero-visual{position:relative;max-width:520px;margin:0 auto;width:100%}
.mock{
  background:#fff;border:1px solid var(--ligne-forte);border-radius:14px;
  box-shadow:0 12px 40px rgba(16,42,67,.07);overflow:hidden;
}
.mock-bar{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--ligne);background:#FAFAFC}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#C9C9CE}
.mock-bar .mock-url{flex:1;height:16px;border-radius:8px;background:#F0EEF7;margin-left:6px;position:relative;overflow:hidden}
.mock-bar .mock-url::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:balayage 3.2s ease-in-out infinite}
@keyframes balayage{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.mock-body{padding:20px;display:grid;gap:10px;align-content:start;min-height:190px}
.mock-line{height:12px;border-radius:6px;background:var(--ligne)}
.mock-line--titre{height:26px;width:64%;background:#C8BDF9;opacity:.55}
.mock-line--w88{width:88%}
.mock-line--w72{width:72%}
.mock-btn{height:28px;width:38%;border-radius:999px;background:var(--violet);opacity:.9;margin-top:6px}
.mock-fiche{
  position:absolute;right:-2%;bottom:-12%;width:38%;min-width:132px;
  border-radius:18px;box-shadow:0 12px 40px rgba(16,42,67,.1);
}
.mock-fiche .mock-body{padding:12px;gap:7px;min-height:118px}
.mock-fiche .mock-line{height:8px}
.mock-fiche .mock-line--rose{height:14px;width:70%;background:#FDECF4}
.mock-fiche .mock-stars{color:#F0A500;font-size:11px;letter-spacing:1px;line-height:1}
.mock-fiche .mock-btn{height:16px;width:60%;background:var(--rose);opacity:.85;margin-top:4px}
.hero-chips{position:absolute;left:-4%;top:-6%;display:grid;gap:8px;z-index:2}
.hero-chip{
  display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--ligne);
  border-radius:999px;padding:7px 13px;font-size:.78rem;font-weight:600;color:var(--corps);
  box-shadow:0 6px 18px rgba(16,42,67,.08);animation:flotte 5s ease-in-out infinite;
}
.hero-chip i{width:7px;height:7px;border-radius:50%;flex:none;font-style:normal}
.hero-chip:nth-child(2){animation-delay:-1.6s;margin-left:22px}
.hero-chip:nth-child(3){animation-delay:-3.1s;margin-left:6px}
.hero-chip:nth-child(4){animation-delay:-2.2s;margin-left:30px}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
@media (max-width:560px){
  .hero-chips{position:static;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
  .hero-chip{animation:none;margin-left:0 !important}
}

/* ---------- Sections d'en-tête génériques ---------- */
.head-section{margin-bottom:36px;max-width:640px}
.head-section .titre{margin-top:12px}
.head-section--centre{margin-left:auto;margin-right:auto;text-align:center}
.head-split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px;max-width:none}
.head-split .titre{margin-top:12px}
.lien-fleche{font-weight:600;text-decoration:none;color:var(--violet-fonce);display:inline-flex;align-items:center;gap:8px}

/* Hero de page intérieure */
.page-hero{
  background-color:var(--fond-alt);
  background-image:
    radial-gradient(circle at 4% 96%,rgba(108,92,231,.16),transparent 34%),
    radial-gradient(circle at 98% 10%,rgba(242,164,91,.14),transparent 32%),
    radial-gradient(circle at 80% 96%,rgba(232,111,168,.14),transparent 34%);
  padding:clamp(40px,5vw,68px) 0;border-bottom:1px solid var(--ligne);
}
.page-hero .lead{margin-bottom:0}

/* ---------- Cartes famille (accueil + types-d-activite) ---------- */
.grid{display:grid;gap:18px}
.grid--familles{grid-template-columns:1fr}
@media (min-width:640px){.grid--familles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grid--familles{grid-template-columns:repeat(3,minmax(0,1fr))}}

.fam-card{
  display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--ligne);
  border-radius:var(--radius);padding:22px;box-shadow:var(--ombre-carte);text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.fam-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(16,42,67,.22);border-color:#D9D3FF;color:inherit}
.fam-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fam-num{
  font-family:'Big Shoulders',sans-serif;font-weight:800;font-size:1.9rem;line-height:1;
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;
}
.fam-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:5px 10px;border:1px solid;
}
.fam-badge i{width:6px;height:6px;border-radius:50%;font-style:normal}
.fam-badge--ok{background:#E7F5EE;color:var(--vert-fonce);border-color:#BFE3D3}
.fam-badge--ok i{background:var(--vert-fonce)}
.fam-badge--soon{background:#FCF4E6;color:#8A5406;border-color:#EBD9BC}
.fam-badge--soon i{background:var(--orange)}
.fam-nom{font-family:'Big Shoulders',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.4rem;line-height:1.08;color:var(--encre);margin:0 0 8px}
.fam-meta{margin:0 0 8px;font-size:.86rem;color:var(--discret)}
.fam-hook{margin:0;font-size:.92rem;color:var(--corps)}
.fam-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--ligne);display:flex;align-items:center;justify-content:space-between;gap:12px}
.fam-prix{font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:1.02rem;color:var(--encre);font-variant-numeric:tabular-nums}
.fam-prix small{font-family:'Inter',sans-serif;font-weight:400;font-size:.82rem;color:var(--discret)}
.fam-go{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--ligne-violette);background:var(--fond-violet);
  color:var(--violet-fonce);display:grid;place-items:center;flex:none;transition:background .15s ease,color .15s ease;
}
.fam-card:hover .fam-go{background:var(--violet);color:#fff}
.fam-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fam-accent-bar{display:block;height:3px;border-radius:2px;margin-top:14px}

/* Mini-cartes de l'accueil (« Six familles, 88 métiers ») */
.grid--mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:760px){.grid--mini{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.grid--mini{grid-template-columns:repeat(6,minmax(0,1fr))}}
.mini-card{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:16px 18px;box-shadow:var(--ombre-carte);text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease}
.mini-card:hover{transform:translateY(-2px);border-color:#D9D3FF;color:inherit}
.mini-statut{display:flex;align-items:center;gap:7px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--discret);margin-bottom:10px}
.mini-statut i{width:7px;height:7px;border-radius:50%;font-style:normal}
.mini-nom{font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.18rem;line-height:1.12;color:var(--encre);margin:0 0 6px}
.mini-compte{margin:0;font-size:.84rem;color:var(--discret)}

/* ---------- Méthode (3 étapes) ---------- */
.grid--3{grid-template-columns:1fr;gap:20px}
@media (min-width:760px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step-card{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:26px;box-shadow:var(--ombre-carte)}
.step-num{font-family:'Big Shoulders',sans-serif;font-weight:800;font-size:2.6rem;line-height:1;margin:0 0 12px}
.step-card h3{font-size:1.12rem;font-weight:650;color:var(--encre);margin:0 0 10px}
.step-card p{margin:0;font-size:.96rem;color:var(--discret)}

/* ==========================================================================
   SECTION « CE QUI CHANGE AVEC TILLAP » — REPRISE DE LA PROD TELLE QUELLE
   (règles ci-dessous copiées de tillap.com ; seules les variables sont
   remappées, voir les alias en haut de fichier)
   ========================================================================== */
#changement{background:var(--cream-2)}
.chg-eyebrow{display:flex;justify-content:center;margin-bottom:14px}
.chg-eyebrow .eyebrow{font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.13em;color:var(--coral-dark)}
.chg-eyebrow .eyebrow::before{content:none}
.chg-eyebrow svg{width:14px;height:14px;stroke:var(--coral-dark);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chg-titre{text-align:center;font-size:clamp(1.8rem,4vw,2.5rem);max-width:640px;margin:0 auto 14px}
.chg-sub{text-align:center;color:var(--muted);max-width:600px;margin:0 auto 44px;font-size:1.02rem}
.vs-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;max-width:960px;margin:0 auto}
.vs-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:26px;
  padding:24px 18px 20px;box-shadow:0 14px 34px -20px rgba(10,37,64,.24);
}
.vs-card.is-tillap{border-color:#D9D3FF}
.vs-tag{
  position:absolute;top:-12px;left:22px;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;
}
.vs-tag.is-tillap{color:#fff;background:var(--coral);border-color:var(--coral)}
.vs-head{display:flex;align-items:center;gap:12px}
.vs-av{
  width:38px;height:38px;flex:none;border-radius:50%;background:var(--cream-2);color:var(--muted);
  font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.vs-av.is-tillap{background:var(--coral);color:#fff}
.vs-nom{font-size:17px;font-weight:700;color:var(--ink);margin:0}
.vs-sub{font-size:12.5px;color:var(--muted);margin:1px 0 0}
.vs-stars{margin:16px 0 0;font-size:14px;color:#F0A500;letter-spacing:1px}
.vs-stars span{color:var(--ink);font-size:13.5px;font-weight:600;letter-spacing:0;margin-left:6px}
.vs-stars-off{color:var(--line)}
.vs-stars-off span{color:var(--muted);font-weight:500}
.vs-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.vs-shot{aspect-ratio:4/3;border-radius:10px;background:var(--cream-2);display:flex;align-items:center;justify-content:center}
.vs-shot svg{width:22px;height:22px;stroke:#C3CBD6;fill:none;stroke-width:1.6}
.vs-shot.is-tillap{background:var(--peach-light)}
.vs-shot.is-tillap svg{stroke:var(--coral)}
.vs-list{list-style:none;padding:0;margin:18px 0 0}
.vs-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--muted);padding:8px 0}
.vs-list b{color:var(--coral-dark);font-weight:650}
.vs-list svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:var(--muted);fill:none;stroke-width:1.8}
.is-tillap .vs-list li{color:var(--ink-soft)}
.is-tillap .vs-list svg{stroke:var(--coral)}
.vs-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:18px}
.vs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;
  font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:14px;padding:12px;
}
.vs-btn.is-primary{background:var(--coral);color:#fff;border-color:var(--coral)}
.vs-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.vs-foot{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.5}
.vs-arrow{
  width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto;
}
.vs-arrow svg{
  width:18px;height:18px;stroke:var(--coral);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);
}
.vs-note{margin:30px 0 0;text-align:center;font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.vs-note-bureau{display:none}
.vs-cta{margin-top:36px;text-align:center}
@media (min-width:640px){
  .vs-card{padding:26px 24px 22px}
}
@media (min-width:900px){
  .vs-grid{grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}
  .vs-arrow svg{transform:none}
  .vs-note-bureau{display:inline}
  .vs-note-mobile{display:none}
}
/* Le CTA de la section prod utilise .btn-coral : alias vers le bouton DA */
.btn-coral{background:var(--coral);color:#fff;box-shadow:var(--ombre-violette)}
.btn-coral:hover{background:var(--coral-dark);color:#fff}
.vs-cta .btn{font-family:'Inter',sans-serif;font-size:.98rem;letter-spacing:0;text-transform:none;min-height:0;padding:.95em 1.9em}
/* ---------- fin de la section reprise de la prod ---------- */

/* ---------- Offre en deux lignes (accueil) ---------- */
.offre-teaser{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
.prix-card{background:var(--fond-alt);border:1px solid var(--ligne);border-radius:18px;padding:26px}
.prix-ligne{display:flex;align-items:baseline;gap:12px;margin:18px 0 4px;flex-wrap:wrap}
.prix-valeur{font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--encre);font-variant-numeric:tabular-nums}
.prix-valeur--petite{font-size:2.2rem}
.prix-barre{font-family:'Big Shoulders',sans-serif;font-weight:700;color:var(--discret);font-size:1.3rem}
.prix-note{font-size:.86rem;color:var(--discret)}
.prix-sep{border-top:1px solid var(--ligne-violette);margin-top:14px;padding-top:14px}
.alerte-vert{margin:18px 0 0;font-size:.86rem;color:var(--vert-fonce);background:#E7F5EE;border:1px solid #BFE3D3;border-radius:10px;padding:10px 12px}
@media (min-width:900px){.offre-teaser{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* ---------- Qui fait le travail (fond nuit) ---------- */
.qui{background:var(--nuit);color:#C8BDF9}
.qui-grid{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
.qui-txt p{margin:0 0 14px}
.qui-sign{font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:0}
/* Photo : format carré respecté (la source est 768×768) — jamais étirée */
.qui-photo{position:relative;margin:0 14px 14px 0;max-width:380px}
.qui-photo::after{
  content:"";position:absolute;inset:0;transform:translate(14px,14px);border-radius:22px;
  background:var(--degrade-texte-nuit);
}
.qui-photo img{
  position:relative;z-index:1;border-radius:18px;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;object-position:center 22%;
}
@media (min-width:900px){.qui-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

/* ---------- CTA final ---------- */
.cta-final{
  background-color:var(--fond-alt);
  background-image:
    radial-gradient(circle at 10% 100%,rgba(108,92,231,.14),transparent 38%),
    radial-gradient(circle at 90% 0%,rgba(242,164,91,.13),transparent 34%),
    radial-gradient(circle at 96% 96%,rgba(232,111,168,.14),transparent 36%);
  border-top:1px solid var(--ligne);padding:clamp(52px,6vw,88px) 0;text-align:center;
}
.cta-final .titre{margin:0 0 14px}
.cta-final p{color:var(--discret);margin:0 auto 26px;max-width:44em}
.cta-final .hero-cta{justify-content:center;margin-bottom:0}

/* ---------- Footer ---------- */
.footer{background:var(--fond-violet);border-top:1px solid var(--ligne-violette);padding:clamp(40px,4vw,60px) 0 28px}
.ariane{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.76rem;color:var(--discret);
  padding-bottom:18px;margin-bottom:28px;border-bottom:1px solid var(--ligne-violette);
}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0}
.ariane li{display:inline-flex;align-items:center;gap:6px}
.ariane li+li::before{content:"›";color:var(--faible)}
.ariane a{text-decoration:none;color:var(--discret);font-weight:500}
.ariane a:hover{color:var(--violet-fonce)}
.ariane [aria-current]{color:var(--encre);font-weight:600;text-decoration:none}
.foot-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:640px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.foot-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}}
.foot-intro p{font-size:.86rem;color:var(--discret);margin:0 0 18px}
.foot-logo{height:38px;width:auto;margin-bottom:14px}
.foot-titre{font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--discret);margin:0 0 12px}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot-col a{font-size:.86rem;color:var(--corps);text-decoration:none}
.foot-col a:hover{color:var(--violet-fonce)}
.foot-col .soon{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faible)}
.foot-socials{display:flex;gap:8px}
.foot-socials a{width:36px;height:36px;border-radius:50%;border:1px solid var(--ligne-forte);background:#fff;display:grid;place-items:center;text-decoration:none;color:var(--corps)}
.foot-socials a:hover{border-color:var(--violet);color:var(--violet-fonce)}
.foot-socials svg{width:16px;height:16px;fill:currentColor}
.foot-plan{margin-top:36px;padding-top:28px;border-top:1px solid var(--ligne-violette)}
.foot-plan-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:640px){.foot-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.foot-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.foot-plan-groupe p{font-size:.86rem;font-weight:650;color:var(--encre);margin:0 0 10px}
.foot-plan-groupe div{display:flex;flex-wrap:wrap;gap:4px 12px}
.foot-plan-groupe a{font-size:.8rem;color:var(--discret);text-decoration:none}
.foot-plan-groupe a:hover{color:var(--violet-fonce)}
.foot-plan-note{margin:22px 0 0;font-size:.8rem;color:var(--faible)}
.foot-copy{margin-top:28px;padding-top:18px;border-top:1px solid var(--ligne-violette);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.76rem;color:var(--faible)}

/* ---------- Pages famille ---------- */
.fam-hero-grid{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:960px){.fam-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.statut-pill{
  display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;border-radius:999px;padding:6px 12px;border:1px solid;
}
.statut-pill i{width:6px;height:6px;border-radius:50%;font-style:normal}
.statut-pill--ok{background:#E7F5EE;color:var(--vert-fonce);border-color:#BFE3D3}
.statut-pill--ok i{background:var(--vert-fonce)}
.statut-pill--soon{background:#FCF4E6;color:#8A5406;border-color:#EBD9BC}
.statut-pill--soon i{background:var(--orange)}
.fam-side{display:grid;gap:12px;align-content:start}
.side-card{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:20px}
.side-card--nuit{background:var(--nuit);border-color:var(--nuit);color:#C8BDF9}
.side-titre{font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;color:var(--discret);margin:0 0 12px}
.side-card--nuit p{margin:0;font-size:.92rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:.84rem;font-weight:600;color:var(--encre);background:#EDF1FF;border:1px solid #D6E0FF;
  border-radius:999px;padding:6px 12px;
}
.meta-ligne{font-size:.86rem;color:var(--discret);margin:0}

/* Sous-groupes de métiers */
.grid--metiers{grid-template-columns:1fr;gap:20px}
@media (min-width:760px){.grid--metiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.grid--metiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sg-card{background:#FAFAFC;border:1px solid var(--ligne);border-radius:var(--radius);padding:22px}
.sg-titre{font-family:'Big Shoulders',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.05rem;color:var(--encre);margin:0 0 14px}
.sg-liste{display:grid;gap:8px}
.sg-liste a,.sg-liste span{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--corps);text-decoration:none}
.sg-liste a:hover{color:var(--violet-fonce)}
.sg-liste i{width:5px;height:5px;border-radius:50%;flex:none;font-style:normal}

/* ---------- Modules recommandés (sections enrichies des pages famille) ---------- */
.mod-section{margin-bottom:clamp(36px,5vw,56px)}
.mod-card{
  background:#fff;border:1px solid var(--ligne);border-radius:22px;overflow:hidden;
  box-shadow:0 14px 34px -22px rgba(16,42,67,.25);
}
.mod-grid{display:grid}
@media (min-width:960px){
  .mod-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mod-card--flip .mod-demo{order:2}
}
.mod-demo{
  position:relative;background:var(--fond-alt);border-bottom:1px solid var(--ligne);
  padding:clamp(20px,3vw,32px);display:flex;align-items:center;justify-content:center;min-height:300px;
}
@media (min-width:960px){.mod-demo{border-bottom:0;border-right:1px solid var(--ligne)}
  .mod-card--flip .mod-demo{border-right:0;border-left:1px solid var(--ligne)}
}
.mod-txt{padding:clamp(24px,3.4vw,38px)}
.mod-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mod-prix{font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:1.05rem;color:var(--encre);white-space:nowrap;font-variant-numeric:tabular-nums}
.mod-titre{font-family:'Big Shoulders',sans-serif;font-weight:800;text-transform:uppercase;line-height:var(--lh-titre);font-size:clamp(1.5rem,3vw,2rem);color:var(--encre);margin:0 0 12px}
.mod-txt p{margin:0 0 14px;color:var(--discret);font-size:.97rem}
.mod-txt p strong{color:var(--corps)}
.mod-points{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;font-size:.92rem;color:var(--corps)}
.mod-points li{display:flex;gap:10px}
.mod-points svg{width:16px;height:16px;flex:none;margin-top:4px;stroke:var(--vert-fonce);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.badge{
  display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:4px 10px;border:1px solid;
}
.badge--reco{color:var(--violet-fonce);background:var(--fond-violet);border-color:var(--ligne-violette)}
.badge--soon{color:#8A5406;background:#FCF4E6;border-color:#EBD9BC}
.badge--inclus{color:var(--vert-fonce);background:#E7F5EE;border-color:#BFE3D3}
.badge .badge-dot{width:6px;height:6px;border-radius:50%;background:#B8791A;flex:none;animation:dotPulseSoon 2s infinite}
@keyframes dotPulseSoon{0%,100%{box-shadow:0 0 0 0 rgba(184,121,26,.45)}55%{box-shadow:0 0 0 6px rgba(184,121,26,0)}}
.mod-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.mod-note{font-size:.8rem;color:var(--faible);margin:14px 0 0}

/* Autres modules de la famille (liste compacte) */
.mod-mini-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.mod-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.mod-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mod-mini{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px}
.mod-mini-tete{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.mod-mini-nom{font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.02rem;color:var(--encre)}
.mod-mini p{margin:0;font-size:.86rem;color:var(--discret)}
.mod-mini .badge{align-self:flex-start}

/* ---------- Démos interactives (CSS/SVG + JS) ---------- */
.demo{width:100%;max-width:420px;background:#fff;border:1px solid var(--ligne-forte);border-radius:16px;overflow:hidden;box-shadow:0 10px 28px -14px rgba(16,42,67,.18)}
.demo-tete{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--ligne);background:#FAFAFC}
.demo-tete i{width:8px;height:8px;border-radius:50%;background:#C9C9CE}
.demo-tete span{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:.64rem;color:var(--faible);text-transform:uppercase;letter-spacing:.08em}
.demo-corps{padding:16px}

/* Démo galerie (portfolio) */
.demo-scene{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;
  display:flex;align-items:flex-end;transition:background .4s ease;
}
.demo-scene-fig{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;display:flex;align-items:flex-end}
.demo-scene-fig.actif{opacity:1}
.demo-scene svg{position:absolute;inset:0;width:100%;height:100%}
.demo-legende{
  position:relative;margin:10px 10px 4px;background:rgba(255,255,255,.92);border:1px solid var(--ligne);
  border-radius:9px;padding:6px 10px;font-size:.76rem;font-weight:600;color:var(--encre);
  display:inline-flex;gap:7px;align-items:center;backdrop-filter:blur(2px);
}
.demo-legende i{width:7px;height:7px;border-radius:50%;font-style:normal}
.demo-pouces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.demo-pouce{
  border:2px solid var(--ligne);border-radius:10px;padding:9px 8px;background:#fff;cursor:pointer;
  font-size:.72rem;font-weight:600;color:var(--discret);text-align:left;line-height:1.3;
  transition:border-color .15s ease,color .15s ease;min-height:44px;
}
.demo-pouce:hover{border-color:#C8BDF9}
.demo-pouce.actif{border-color:var(--violet);color:var(--encre)}
.demo-pouce i{display:block;width:100%;height:5px;border-radius:3px;margin-bottom:7px;font-style:normal}

/* Démo avant/après (curseur) */
.demo-ap{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;user-select:none}
.demo-ap-calque{position:absolute;inset:0}
.demo-ap-calque svg{width:100%;height:100%}
.demo-ap-apres{clip-path:inset(0 0 0 var(--ap,52%))}
.demo-ap-ligne{position:absolute;top:0;bottom:0;left:var(--ap,52%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(16,42,67,.15);pointer-events:none}
.demo-ap-poignee{
  position:absolute;top:50%;left:var(--ap,52%);transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--ligne-forte);box-shadow:0 4px 12px rgba(16,42,67,.22);
  display:grid;place-items:center;pointer-events:none;
}
.demo-ap-poignee svg{width:16px;height:16px;stroke:var(--violet-fonce);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.demo-ap-etq{position:absolute;top:10px;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:4px 10px;pointer-events:none}
.demo-ap-etq--avant{left:10px;background:rgba(16,42,67,.72);color:#fff}
.demo-ap-etq--apres{right:10px;background:var(--violet);color:#fff}
.demo-ap input[type="range"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;
  -webkit-appearance:none;appearance:none;
}
.demo-ap input[type="range"]:focus-visible~.demo-ap-poignee{outline:3px solid var(--violet);outline-offset:2px}

/* Démo devis guidé (urgence / projet) */
.seg{display:inline-flex;gap:4px;padding:4px;background:var(--fond-alt);border:1px solid var(--ligne);border-radius:999px;margin-bottom:14px}
.seg button{
  min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--corps);
  font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.92rem;
}
.seg button.actif{background:var(--violet);color:#fff}
.demo-questions{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.demo-questions li{
  display:flex;gap:11px;align-items:flex-start;background:var(--fond-alt);border:1px solid var(--ligne);
  border-radius:10px;padding:10px 12px;font-size:.86rem;color:var(--corps);animation:fadeSwap .3s ease both;
}
.demo-questions li:nth-child(2){animation-delay:.05s}
.demo-questions li:nth-child(3){animation-delay:.1s}
.demo-questions li:nth-child(4){animation-delay:.15s}
.demo-questions b{
  flex:none;width:21px;height:21px;border-radius:50%;background:var(--fond-violet);color:var(--violet-fonce);
  font-size:.68rem;display:grid;place-items:center;margin-top:1px;
}
.demo-envoi{margin-top:12px;font-size:.78rem;color:var(--vert-fonce);display:flex;gap:8px;align-items:center}
.demo-envoi svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Démo carte / menu (onglets) */
.onglets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.onglets button{
  min-height:40px;padding:0 15px;border-radius:999px;border:1.5px solid var(--ligne);background:#fff;
  font-weight:600;font-size:.86rem;color:var(--corps);
}
.onglets button.actif{background:#FFF1DF;border-color:var(--orange);color:#8A5406}
.demo-plats{display:grid;gap:2px}
.demo-plat{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 2px;border-bottom:1px dashed var(--ligne);font-size:.88rem;animation:fadeSwap .3s ease both}
.demo-plat:nth-child(2){animation-delay:.05s}
.demo-plat:nth-child(3){animation-delay:.1s}
.demo-plat:last-child{border-bottom:0}
.demo-plat span{color:var(--corps)}
.demo-plat b{font-family:'Big Shoulders',sans-serif;font-weight:700;color:var(--encre);white-space:nowrap;font-variant-numeric:tabular-nums}
.demo-plat small{display:block;font-size:.74rem;color:var(--faible)}

/* Démo réservation (créneaux) */
.creneaux{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.creneau{
  min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--ligne-forte);background:#fff;
  font-weight:600;font-size:.9rem;color:var(--corps);transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.creneau:hover{border-color:#C8BDF9}
.creneau.actif{background:var(--violet);border-color:var(--violet);color:#fff}
.demo-resa-msg{
  font-size:.82rem;color:var(--discret);background:var(--fond-alt);border:1px solid var(--ligne);
  border-radius:10px;padding:10px 12px;margin:0;min-height:44px;transition:color .2s ease;
}
.demo-resa-msg.ok{color:var(--vert-fonce);background:#E7F5EE;border-color:#BFE3D3}

/* Démo catalogue (filtres) */
.demo-filtres{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.demo-filtres button{min-height:38px;padding:0 13px;border-radius:999px;border:1.5px solid var(--ligne);background:#fff;font-weight:600;font-size:.8rem;color:var(--corps)}
.demo-filtres button.actif{background:var(--fond-violet);border-color:var(--violet);color:var(--violet-fonce)}
.demo-produits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.demo-produit{border:1px solid var(--ligne);border-radius:10px;padding:10px;animation:fadeSwap .25s ease both}
.demo-produit i{display:block;height:6px;width:60%;border-radius:3px;margin-bottom:8px;font-style:normal}
.demo-produit b{display:block;font-size:.78rem;color:var(--encre);line-height:1.35}
.demo-produit span{font-size:.72rem;color:var(--faible)}
.demo-produit.cache{display:none}

/* Démo avis Google (prochainement) */
.demo-avis{display:flex;gap:16px;align-items:center}
.demo-qr{
  width:84px;height:84px;flex:none;border-radius:12px;border:1px solid var(--ligne);
  background:
    repeating-conic-gradient(var(--encre) 0 25%,#fff 0 50%) 0 0/16px 16px;
  image-rendering:pixelated;opacity:.85;
}
.demo-avis-corps{flex:1}
.demo-etoiles{color:#F0A500;font-size:1.05rem;letter-spacing:2px;line-height:1}
.demo-etoiles span{display:inline-block;animation:etoilePop .5s ease both}
.demo-avis-txt{font-size:.8rem;color:var(--discret);margin:8px 0 0}

/* ---------- Configurateur (page offre, version par étapes) ---------- */
.cfg{max-width:900px;margin:0 auto}
.stepper{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.stepper-btn{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:0;cursor:pointer;text-align:left}
.stepper-num{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:'Big Shoulders',sans-serif;font-weight:700;border:1.5px solid var(--ligne-forte);
  background:#fff;color:var(--faible);transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.stepper-btn[data-etat="fait"] .stepper-num{background:var(--ligne-violette);border-color:var(--violet);color:var(--violet-fonce)}
.stepper-btn[data-etat="courant"] .stepper-num{background:var(--violet);border-color:var(--violet);color:#fff}
.stepper-lbl{font-weight:600;font-size:.92rem;color:var(--faible)}
.stepper-btn[data-etat="fait"] .stepper-lbl,.stepper-btn[data-etat="courant"] .stepper-lbl{color:var(--encre)}
.stepper-trait{flex:1;min-width:16px;height:1px;background:var(--ligne);align-self:center}
.cfg-etape{animation:fadeSwap .32s ease both}
.cfg-etape[hidden]{display:none}
.cfg-titre{font-family:'Big Shoulders',sans-serif;font-weight:800;text-transform:uppercase;line-height:var(--lh-titre);font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--encre);margin:0 0 8px}
.cfg-sub{color:var(--discret);margin:0 0 24px}

.choix-familles{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.choix-familles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.choix-fam{
  text-align:left;display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;
  background:#fff;border:2px solid var(--ligne-forte);transition:border-color .15s ease,background .15s ease;
}
.choix-fam:hover{border-color:#C8BDF9}
.choix-fam.actif{border-color:var(--violet);background:var(--fond-violet)}
.choix-fam .fam-num{width:44px;height:44px;font-size:1.5rem;border-radius:12px}
.choix-fam-nom{display:block;font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.06rem;color:var(--encre);line-height:1.12}
.choix-fam-statut{display:block;font-size:.8rem;color:var(--discret);margin-top:4px}
.choix-fam.actif .choix-fam-statut{color:var(--violet-fonce)}

.champ{margin-top:24px;max-width:420px}
.champ label{display:block;font-weight:600;margin-bottom:8px;color:var(--encre)}
.champ select,.champ input[type="email"],.champ input[type="text"],.champ input[type="tel"],.champ textarea{
  width:100%;min-height:48px;padding:10px 14px;background:#FAFAFC;border:1px solid #C9C9CE;
  border-radius:10px;color:var(--encre);
}
.champ select:focus,.champ input:focus,.champ textarea:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.champ textarea{min-height:110px;resize:vertical}

.socle-bandeau{
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;background:var(--fond-violet);
  border:1px solid #C8BDF9;border-radius:16px;padding:22px;margin-bottom:24px;
}
.socle-prix{display:flex;align-items:baseline;gap:10px}
.socle-prix .prix-valeur{font-size:2.6rem}
.socle-sep{width:1px;height:44px;background:#C8BDF9}
.socle-launch{margin-left:auto}
.socle-cols{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:820px){.socle-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.socle-liste-titre{font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;color:var(--violet-fonce);margin:0 0 12px}
.socle-liste{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.94rem;color:var(--corps)}
.socle-liste li{display:flex;gap:10px}
.socle-liste i{width:6px;height:6px;border-radius:50%;margin-top:9px;flex:none;font-style:normal}
.garanties{background:#FAFAFC;border:1px solid var(--ligne);border-radius:12px;padding:16px;margin-top:20px}
.garanties p{margin:0;font-size:.88rem;color:var(--discret)}
.garanties .socle-liste-titre{color:var(--encre);font-size:.8rem;margin-bottom:8px}
.compte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:340px}
.compte div{background:#F4F1FF;border:1px solid #DCD4FF;border-radius:14px;padding:8px 4px;text-align:center}
.compte b{display:block;font-family:'Big Shoulders',sans-serif;font-size:1.3rem;font-weight:700;color:var(--violet-texte);font-variant-numeric:tabular-nums;line-height:1.1}
.compte span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8B85A3;line-height:1.3;margin-top:2px}

.opt-groupes{display:grid;gap:28px}
.opt-groupe-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.opt-groupe-tete i{width:9px;height:9px;border-radius:50%;font-style:normal}
.opt-groupe-tete h3{font-family:'Big Shoulders',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.2rem;color:var(--encre);margin:0}
.opt-groupe-tete span{font-size:.86rem;color:var(--discret)}
.opt-cartes{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.opt-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt-carte{
  text-align:left;display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:14px;
  background:#fff;border:1.5px solid var(--ligne-forte);transition:border-color .15s ease,background .15s ease;
}
.opt-carte:hover{border-color:#C8BDF9}
.opt-carte.actif{border-color:var(--violet);background:var(--fond-violet)}
.opt-carte:disabled{background:#FAFAFC;border-color:var(--ligne);cursor:not-allowed}
.opt-case{
  width:26px;height:26px;flex:none;border-radius:8px;margin-top:2px;display:grid;place-items:center;
  background:#fff;border:2px solid #C9C9CE;color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.opt-carte.actif .opt-case{background:var(--violet);border-color:var(--violet);color:#fff}
.opt-case svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.opt-corps{flex:1;min-width:0}
.opt-tete{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.opt-nom{font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.04rem;color:var(--encre)}
.opt-carte:disabled .opt-nom{color:var(--discret)}
.opt-prix{font-family:'Big Shoulders',sans-serif;font-weight:700;color:var(--encre);white-space:nowrap;font-variant-numeric:tabular-nums}
.opt-carte:disabled .opt-prix{color:var(--discret)}
.opt-resume{display:block;font-size:.88rem;color:var(--discret);margin-top:6px}
.opt-carte .badge{margin-top:10px}

.recap-card{background:#fff;border:1px solid var(--ligne-forte);border-radius:18px;padding:24px;max-width:620px}
.recap-lignes{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.recap-lignes li{display:flex;justify-content:space-between;gap:14px;font-size:.94rem;color:var(--corps)}
.recap-lignes li b{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--encre);font-weight:600}
.recap-lignes s{color:var(--faible)}
.recap-total{border-top:1px solid var(--ligne-forte);padding-top:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.recap-total-lbl{font-weight:650;color:var(--encre)}
.recap-total-valeurs{display:flex;gap:16px;align-items:baseline}
.recap-creation{font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:2rem;color:var(--encre);font-variant-numeric:tabular-nums}
.recap-mensuel{font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:1.4rem;color:var(--violet-fonce);font-variant-numeric:tabular-nums}
.recap-eco{margin:10px 0 18px;font-size:.86rem;color:var(--vert-fonce);font-weight:600}
.recap-tva{margin:16px 0 0;font-size:.8rem;color:var(--faible)}
.recap-actions{display:grid;gap:10px;margin-top:12px}
.recap-actions .btn{width:100%}
.cfg-nav{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--ligne)}
.cfg-total-encours{font-size:.86rem;color:var(--discret)}
.cfg-total-encours strong{font-family:'Big Shoulders',sans-serif;font-size:1.1rem;color:var(--encre)}
.cfg-total-encours .m{color:var(--violet-fonce)}
.f-status{margin:10px 0 0;font-size:.86rem;text-align:center}
.f-status:empty{display:none}
.f-status.err{color:#B3261E}
.f-status.ok{color:var(--vert-fonce)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--corps);cursor:pointer;margin:14px 0}
.consent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--violet)}
.cfg-aviser{
  background:#FCF4E6;border:1px solid #EBD9BC;border-radius:14px;padding:16px;margin-bottom:18px;
  font-size:.92rem;color:#8A5406;
}
.cfg-aviser strong{color:#8A5406}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:32px}
@media (min-width:960px){.contact-grid{grid-template-columns:1.1fr .9fr}}
.contact-card{background:#fff;border:1px solid var(--ligne-forte);border-radius:18px;padding:24px;box-shadow:var(--ombre-carte)}
.cstepper{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cstepper span.rond{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:.9rem;
  border:1.5px solid var(--ligne-forte);background:#fff;color:var(--faible);
}
.cstepper span.rond[data-etat="fait"]{background:var(--ligne-violette);border-color:var(--violet);color:var(--violet-fonce)}
.cstepper span.rond[data-etat="courant"]{background:var(--violet);border-color:var(--violet);color:#fff}
.cstepper span.trait{flex:1;height:2px;background:var(--ligne)}
.progress-note{font-size:.82rem;color:var(--faible);margin:0 0 24px}
.radio-carte{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1.5px solid var(--ligne-forte);border-radius:12px;cursor:pointer}
.radio-carte:hover{border-color:#C8BDF9}
.radio-carte input{margin-top:3px;width:18px;height:18px;accent-color:var(--violet);flex:none}
.radio-carte b{display:block;font-weight:650;color:var(--encre)}
.radio-carte small{display:block;font-size:.88rem;color:var(--discret);margin-top:2px}
.radio-cartes{display:grid;gap:10px}
.pill-choix{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.pill-choix button{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ligne-forte);background:#fff;color:var(--encre);font-weight:600}
.pill-choix button.actif{background:var(--fond-violet);border-color:var(--violet);color:var(--violet-fonce)}
.contact-side{display:grid;gap:14px;align-content:start}
.contact-side .side-card p{margin:0 0 8px;font-size:.94rem}
.contact-side .side-card p:last-child{margin-bottom:0}

/* ---------- Réalisations ---------- */
.grid--real{grid-template-columns:1fr;gap:20px}
@media (min-width:700px){.grid--real{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grid--real{grid-template-columns:repeat(3,minmax(0,1fr))}}
.real-card{background:#fff;border:1px solid var(--ligne);border-radius:16px;overflow:hidden;box-shadow:var(--ombre-carte);display:flex;flex-direction:column}
.real-visuel{
  aspect-ratio:16/10;border-bottom:1px solid var(--ligne);display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#F4F2FB 0 8px,#FAFAFC 8px 16px);
}
.real-visuel span{font-family:ui-monospace,Menlo,monospace;font-size:.7rem;color:var(--faible);text-transform:uppercase;letter-spacing:.08em}
.real-corps{padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1}
.real-nom{font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.14rem;color:var(--encre);margin:12px 0 4px}
.real-meta{margin:0 0 14px;font-size:.86rem;color:var(--discret)}
.real-lien{font-size:.88rem;font-weight:600;text-decoration:none;color:var(--violet-fonce);margin-top:auto}
.real-note{margin:26px 0 0;font-size:.86rem;color:var(--faible);font-family:ui-monospace,Menlo,monospace}

/* ---------- Sur-mesure ---------- */
.grid--4{grid-template-columns:1fr;gap:18px}
@media (min-width:640px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sm-card{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:24px}
.sm-num{font-family:'Big Shoulders',sans-serif;font-weight:800;font-size:1.6rem}
.sm-card h3{font-family:'Big Shoulders',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.16rem;color:var(--encre);margin:10px 0 8px}
.sm-card p{margin:0;font-size:.92rem;color:var(--discret)}
.sm-table-conteneur{margin-top:32px;background:#fff;border:1px solid var(--ligne);border-radius:18px;overflow-x:auto}
.sm-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.sm-table th{text-align:left;padding:14px 18px;font-family:'Big Shoulders',sans-serif;font-weight:700;text-transform:uppercase;font-size:.82rem;color:var(--discret);border-bottom:1px solid #C9C9CE}
.sm-table th.violet{color:var(--violet-fonce)}
.sm-table td{padding:14px 18px;border-bottom:1px solid var(--ligne);color:var(--corps)}
.sm-table td:first-child{color:var(--corps)}
.sm-table td:not(:first-child){color:var(--encre)}
.sm-table tr:last-child td{border-bottom:0}

/* ---------- Pages légales ---------- */
.legal-grid{display:grid;gap:36px}
@media (min-width:900px){.legal-grid{grid-template-columns:240px minmax(0,1fr)}}
.legal-sommaire{align-self:start}
@media (min-width:900px){.legal-sommaire{position:sticky;top:80px}}
.legal-sommaire ol{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:.88rem}
.legal-sommaire a{color:var(--corps);text-decoration:none}
.legal-sommaire a:hover{color:var(--violet-fonce)}
.legal-corps{max-width:68ch}
.legal-corps section{margin-bottom:26px}
.legal-corps h2{font-family:'Big Shoulders',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.3rem;line-height:var(--lh-titre);color:var(--encre);margin:0 0 10px}
.legal-corps p{margin:0 0 8px}
.legal-corps p:last-child{margin-bottom:0}
.legal-corps .note{font-size:.92rem;color:var(--discret)}
.legal-corps ul{margin:0 0 8px;padding-left:22px}

/* ---------- Divers ---------- */
.centre{text-align:center}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.note-douce{font-size:.92rem;color:var(--discret)}
.email-bloc{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:20px;max-width:460px}
.email-bloc form{display:flex;gap:10px;flex-wrap:wrap}
.email-bloc input{flex:1;min-width:180px;min-height:48px;padding:0 14px;background:#FAFAFC;border:1px solid #C9C9CE;border-radius:10px;color:var(--encre)}
.email-bloc .btn{min-height:48px;font-size:1rem}
.email-bloc .confid{margin:10px 0 0;font-size:.78rem;color:var(--faible)}

/* Révélation au scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .reveal{opacity:1;transform:none}
  .hero-chip{animation:none}
  .btn .dot,.badge .badge-dot{animation:none}
}