/* theme deck : bold-punchy */
/* THÈME : Bold Punchy — contraste fort, orange électrique, typo massive. */
:root {
  --bg:#fffdf7; --bg-alt:#fff2e6; --ink:#16130f; --muted:#6b5f54;
  --accent:#ff4d1c; --accent-2:#ffb800; --accent-ink:#ffffff;
  --card-bg:#ffffff; --nav-bg:rgba(255,253,247,.82); --nav-blur:10px;
  --footer-bg:#16130f; --footer-ink:#fbeede;
  --font-display:'Archivo',sans-serif; --font-body:'Archivo',sans-serif; --weight-display:900;
  --radius:8px; --radius-lg:14px;
  --border:2px solid #16130f;
  --shadow:6px 6px 0 #16130f;
  --shadow-lg:12px 12px 0 #16130f;
  --maxw:1180px; --section-pad:92px;
}
.btn-primary:hover { box-shadow:8px 8px 0 #16130f; }
h1,h2 { letter-spacing:-0.04em; }

/* tokens `da` du client, par-dessus le theme */
:root {
  --accent:#1e8fb0;
  --accent-2:#4babc8;
  --bg:#fbfdfe;
  --bg-alt:#eef7fa;
  --ink:#16130f;
  --muted:#6b5f54;
  --border-color:#d9e6ec;
  --font-display:'Archivo',sans-serif;
  --font-body:'Archivo',sans-serif;
  --border:1px solid #d9e6ec;
}

/* ===== base.css (landing-deck) ===== */
/* ============================================================================
   LANDING-DECK — base.css
   STRUCTURE COMMUNE. AUCUNE COULEUR NI POLICE EN DUR.
   Tout passe par des variables CSS redéfinies dans themes/<nom>.css.
   Contrat de variables attendu (voir README.md) :
     Couleurs : --bg --bg-alt --ink --muted --accent --accent-2 --accent-ink
                --card-bg --card-border --nav-bg --footer-bg --footer-ink
     Typo     : --font-display --font-body --weight-display
     Forme    : --radius --radius-lg --shadow --shadow-lg --border
     Divers   : --maxw --section-pad --nav-blur
   base.css ne fait QUE consommer ces variables (jamais de #hex ici).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* COUPER LE DEBORDEMENT HORIZONTAL SANS CASSER LA BARRE COLLANTE (09/09/2026).
     Ces deux lignes se lisent ensemble, ne jamais en retirer une seule.

     LE FAIT, ET IL SUFFIT A JUSTIFIER CES DEUX LIGNES. `overflow-x: hidden` sur le
     `body` ou sur `html` casse `position: sticky` : c'est un defaut connu, reproduit
     partout, et il n'existe pas avec `clip`. Notre `.nav` est `sticky` et enfant direct
     du `body`. C'est la seule anomalie trouvee sur cette page apres avoir passe les six
     regles iOS du skill, toutes conformes.

     L'EXPLICATION, DOUTEE PUIS MESUREE (lire les deux paragraphes qui suivent). On lit partout
     que `overflow-x: hidden` force le calcul de `overflow-y: auto` sur le meme element,
     que le `body` devient une BOITE DE DEFILEMENT, et qu'un `sticky` prend cette boite
     pour repere au lieu de la fenetre. MAIS une autre regle CSS s'y oppose : quand
     `html` est en `overflow: visible` -- c'est notre cas, aucune regle `html{overflow}`
     dans cette feuille -- l'`overflow` du `body` est PROPAGE au viewport, et le `body`
     lui-meme redevient `visible`. Si cette propagation s'applique, le `body` n'est une
     boite de defilement dans AUCUN moteur et l'explication ci-dessus est fausse ; le
     defaut iOS serait alors un autre bug WebKit, que `clip` corrige peut-etre quand
     meme, mais pas pour cette raison.

     MESURE FAITE, ET ELLE TRANCHE (CEO, 09/09/2026 a 16h29). Sur les deux pages SERVIES
     d'Issou Debouchage, qui portaient encore `hidden` seul, a 390 px :
     `/debouchage-wc` et `/debouchage-evier` rendent tous deux **`body hidden/auto`**.
     `overflow-y` CALCULE a `auto` : la propagation vers le viewport ne s'applique donc
     PAS, et le `body` est bien une boite de defilement. **L'explication ci-dessus est la
     bonne**, et le paragraphe qui la donnait pour douteuse est corrige par cette mesure.
     Reserve residuelle, honnete et mineure : un navigateur peut rendre la valeur
     specifiee la ou la propagation joue sur la valeur utilisee. Elle ne change rien au
     correctif.

     CE QUE FRED A VU, le 09/09/2026 a 16h07 (capture
     `inocom-os/logs/telegram-images/2026-09-09-160737_953.jpg`, page /fenetres de Gautier,
     iPhone) : le corps de la page etait defile jusqu'a « Pourquoi passer par nous »,
     et derriere la barre translucide de Safari on voyait encore la PHOTO DU HERO,
     c'est-a-dire le HAUT du document. Cette image seule est COMPATIBLE avec
     l'explication, elle ne l'isole pas : un `sticky` qui decroche pour d'autres raisons
     WebKit donne la meme chose. C'est la mesure du 16h29, pas la capture, qui tranche.
     Troisieme fois que ce genre de defaut arrive (26/07, 08/09, 09/09).

     POURQUOI `clip` ET PAS AUTRE CHOSE. `overflow-x: clip` coupe le debordement SANS
     creer de boite de defilement, et il laisse `overflow-y` a `visible` : quelle que
     soit la lecture retenue ci-dessus, il retire la seule anomalie de la page sans rien
     rendre. Deplacer le `hidden` sur `html` ne reglerait rien, ca deplacerait le
     probleme d'un cran.

     POURQUOI LES DEUX LIGNES. Un navigateur qui ne connait pas `clip` ignore la seconde
     et garde `hidden` : le debordement reste coupe partout, et c'est non negociable
     (le `overflow-x` avait ete pose pour ca). Les autres ecrasent avec `clip`.

     CE QUE LES CONTROLES NE VOIENT PAS, et il faut le savoir avant d'en ajouter un :
     `check_page_mobile.sh` regarde les couleurs, la translucidite, le grain et le
     `::before` -- pas la chaine des ancetres d'un `sticky`. `qa_visuelle.sh` mesure dans
     Chromium sans tete, qui ne reproduit pas le defilement de Safari sur iOS. Les deux
     etaient VERTS sur la page que Fred a trouvee cassee.

     ET CE QUE CELLE-CI NE PROUVE PAS. Cette correction n'a ete verifiee sur AUCUN
     iPhone au moment ou elle est ecrite. Elle retire une anomalie reelle ; elle ne
     constate pas la disparition du defaut. Tant qu'une capture iPhone apres defilement
     n'a pas ete faite, ne pas ecrire ailleurs que le sujet est clos. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---- Typo ---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display, 700);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p  { margin: 0; }

.accent { color: var(--accent); }
.serif-accent { font-family: var(--font-display); font-style: italic; color: var(--accent); }

/* ---- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw, 1180px);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: var(--section-pad, 96px) 0; position: relative; }
.section-alt { background: var(--bg-alt); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head p { color: var(--muted); margin-top: 18px; font-size: 1.1rem; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius, 12px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn-ghost { background: transparent; color: var(--ink); border: var(--border); }
.btn-ghost:hover { background: var(--card-bg); transform: translateY(-3px); }
.btn-lg { padding: 18px 40px; font-size: 1.05rem; }

/* ---- Navbar -------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* Barre 100 % OPAQUE, jamais rgba, jamais backdrop-filter (regle Inocom du 26/07/2026,
     reposee ici a la source le 08/09/2026). Sur iOS le flou d'arriere-plan ne s'applique pas
     toujours : il ne reste alors qu'un voile a 82 % et le contenu de la page se LIT A TRAVERS
     la barre pendant le defilement. Fred l'a signale le 08/09 sur le monitor, capture a
     l'appui ; le funnel-builder a trouve le meme defaut le meme soir dans ce deck, donc chez
     TOUS les clients qu'il sert. Corrige ICI et non par une surcharge : une surcharge laisse
     la regle translucide dans la feuille, ou le prochain lecteur la croit encore active.
     `--nav-bg` reste defini par les themes, il ne sert simplement plus a la barre.
     Controle : scripts/check_page_mobile.sh sur la page GENEREE. */
  background: var(--bg);
  border-bottom: var(--border);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; }
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 0.95rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.nav-burger { display: none; font-size: 1.5rem; color: var(--ink); }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--card-bg); border: var(--border);
  font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-bottom: 26px;
}
.hero-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.hero h1 { margin-bottom: 22px; }
.hero-sub { font-size: 1.2rem; color: var(--muted); max-width: 540px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-visual {
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-lg, 24px);
  background-image: var(--img, linear-gradient(135deg, var(--accent), var(--accent-2)));
  background-size: cover; background-position: center;
  border: var(--border);
  box-shadow: var(--shadow-lg);
}

/* ---- Logos band ---------------------------------------------------------- */
.logos { padding: 44px 0; border-top: var(--border); border-bottom: var(--border); }
.logos-label { text-align: center; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 26px; }
.logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 56px; }
.logos-row span { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink); opacity: .42; transition: opacity .2s; }
.logos-row span:hover { opacity: .85; }

/* ---- Features grid ------------------------------------------------------- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
  background: var(--card-bg); border: var(--border); border-radius: var(--radius-lg, 20px);
  padding: 32px; transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.feature-icon {
  width: 48px; height: 48px; border-radius: var(--radius, 12px);
  display: grid; place-items: center; margin-bottom: 20px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { color: var(--muted); font-size: 0.98rem; }

/* ---- Split (image + texte alternés) -------------------------------------- */
.split .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split + .split { padding-top: 0; }
.split-media {
  aspect-ratio: 5 / 4; border-radius: var(--radius-lg, 24px);
  background-image: var(--img, linear-gradient(135deg, var(--accent-2), var(--accent)));
  background-size: cover; background-position: center;
  border: var(--border); box-shadow: var(--shadow);
}
.split-reverse .split-media { order: 2; }
.split-body .eyebrow { margin-bottom: 14px; }
.split-body h2 { margin-bottom: 18px; }
.split-body p { color: var(--muted); margin-bottom: 18px; }
.split-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; color: var(--ink); font-weight: 500; }
.split-list li::before {
  content: '✓'; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; margin-top: 2px;
}

/* ---- Testimonials -------------------------------------------------------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testi-card {
  background: var(--card-bg); border: var(--border); border-radius: var(--radius-lg, 20px);
  padding: 30px; display: flex; flex-direction: column;
}
.testi-featured { grid-column: span 3; padding: 46px; position: relative; overflow: hidden; }
.testi-featured::before {
  content: '\201C'; position: absolute; top: -30px; right: 20px;
  font-family: var(--font-display); font-size: 200px; line-height: 1;
  color: var(--accent); opacity: 0.12;
}
.testi-card .stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 16px; font-size: 0.95rem; }
.testi-quote { font-size: 1.05rem; line-height: 1.55; margin-bottom: 22px; color: var(--ink); }
.testi-featured .testi-quote { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-family: var(--font-display); font-weight: 500; line-height: 1.4; max-width: 80%; }
.testi-author { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.testi-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.testi-author b { display: block; font-size: 0.95rem; }
.testi-author small { color: var(--muted); font-size: 0.85rem; }

/* ---- Stats --------------------------------------------------------------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .num {
  font-family: var(--font-display); font-weight: var(--weight-display, 800);
  font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -0.04em;
  color: var(--accent);
}
.stat .label { color: var(--muted); margin-top: 10px; font-size: 0.95rem; }

/* ---- Pricing ------------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card {
  background: var(--card-bg); border: var(--border); border-radius: var(--radius-lg, 20px);
  padding: 36px 30px; display: flex; flex-direction: column;
}
.price-card.featured {
  background: var(--ink); color: var(--bg);
  transform: scale(1.03); box-shadow: var(--shadow-lg); position: relative; z-index: 2;
}
.price-card.featured h3, .price-card.featured .price { color: var(--bg); }
.price-card.featured .price-feat li { color: color-mix(in srgb, var(--bg) 78%, var(--ink)); }
.price-tag { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.price-card .price { font-family: var(--font-display); font-weight: var(--weight-display, 800); font-size: 3rem; letter-spacing: -0.03em; margin: 6px 0 4px; }
.price-card .price small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.price-desc { color: var(--muted); font-size: 0.92rem; margin-bottom: 24px; }
.price-feat { margin-bottom: 28px; flex: 1; }
.price-feat li { display: flex; gap: 10px; padding: 8px 0; font-size: 0.95rem; color: var(--ink); border-bottom: var(--border); }
.price-feat li::before { content: '✓'; color: var(--accent); font-weight: 800; }
.price-card .btn { width: 100%; }
.price-card.featured .btn-ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }

/* ---- FAQ (accordéon) ----------------------------------------------------- */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: var(--border); }
.faq-q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 24px 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink);
}
.faq-q .sign { flex: none; width: 26px; height: 26px; border-radius: 50%; border: var(--border); display: grid; place-items: center; color: var(--accent); font-size: 1.2rem; transition: transform .25s; }
.faq-item.open .faq-q .sign { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { color: var(--muted); padding: 0 4px 24px; font-size: 1rem; }

/* ---- CTA final ----------------------------------------------------------- */
.cta-final { text-align: center; }
.cta-box {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-lg, 28px); padding: clamp(48px, 7vw, 84px) 32px;
  position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.cta-box h2 { color: var(--accent-ink); max-width: 720px; margin: 0 auto 18px; }
.cta-box p { color: color-mix(in srgb, var(--accent-ink) 82%, transparent); max-width: 540px; margin: 0 auto 32px; font-size: 1.15rem; }
.cta-box .btn-primary { background: var(--accent-ink); color: var(--accent); }
.cta-box .btn-primary:hover { box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--accent-ink) 50%, transparent); }

/* ---- Footer -------------------------------------------------------------- */
.footer { background: var(--footer-bg); color: var(--footer-ink); padding: 64px 0 32px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid color-mix(in srgb, var(--footer-ink) 14%, transparent); }
.footer-brand .nav-logo { font-size: 1.4rem; margin-bottom: 14px; display: inline-block; }
.footer-brand p { color: color-mix(in srgb, var(--footer-ink) 65%, transparent); max-width: 280px; font-size: 0.95rem; }
.footer-col h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: .55; margin-bottom: 16px; }
.footer-col a { display: block; color: color-mix(in srgb, var(--footer-ink) 72%, transparent); padding: 6px 0; font-size: 0.94rem; transition: color .2s; }
.footer-col a:hover { color: var(--footer-ink); }
.footer-bottom { padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: color-mix(in srgb, var(--footer-ink) 55%, transparent); font-size: 0.86rem; }

/* ---- Hero : badges de stats flottants (pattern Lead Gen / SaaS) ---------- */
.hero-visual { position: relative; }
.hero-stat {
  position: absolute; display: flex; align-items: center; gap: 11px;
  background: var(--card-bg); border: var(--border); border-radius: 16px;
  padding: 12px 16px; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-stat .ico {
  width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
}
.hero-stat .ico svg { width: 18px; height: 18px; }
.hero-stat b { font-family: var(--font-display); font-weight: var(--weight-display, 700); font-size: 1.1rem; line-height: 1; display: block; }
.hero-stat small { color: var(--muted); font-size: 0.74rem; }
.hero-stat--tr { top: 18px; right: 16px; }
.hero-stat--bl { bottom: 20px; left: 16px; }

/* ---- Lead Gen : section photo/texte + carte formulaire ------------------- */
.lead .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; }
.lead-body h2 { margin: 14px 0 18px; }
.lead-body > p { color: var(--muted); margin-bottom: 22px; font-size: 1.08rem; }
.form-card {
  background: var(--card-bg); border: var(--border); border-radius: var(--radius-lg, 22px);
  padding: 34px; box-shadow: var(--shadow-lg);
}
.form-card h3 { margin-bottom: 6px; }
.form-card .sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; padding: 13px 15px; border-radius: var(--radius, 12px);
  border: var(--border); background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 0.96rem;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form-card .btn { width: 100%; margin-top: 8px; }
.form-note { text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 12px; }

/* ---- Reveal on scroll ---------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; }
  .features-grid, .testimonials-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .testi-featured { grid-column: span 2; }
  .price-card.featured { transform: none; }
  .lead .container { grid-template-columns: 1fr; gap: 36px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .split .container { grid-template-columns: 1fr; gap: 32px; }
  .split-reverse .split-media { order: 0; }
  .features-grid, .testimonials-grid, .pricing-grid { grid-template-columns: 1fr; }
  .testi-featured, .testi-featured .testi-quote { grid-column: auto; max-width: 100%; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero-actions .btn, .cta-box .btn { width: 100%; }
}

/* ===== bloc du gabarit t-localservice ===== */

/* ---- Spécifique t-localservice : cabinet dentaire ---- */
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.95rem; color: var(--ink);
  padding: 9px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: var(--border);
}
.nav-phone svg { width: 16px; height: 16px; color: var(--accent); }

/* Hero : badges de confiance en pastilles */
.trust-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.trust-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--card-bg); border: var(--border);
  font-size: 0.84rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow);
}
.trust-pill .ico {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.trust-pill .ico svg { width: 15px; height: 15px; }
.trust-pill b { font-family: var(--font-display); font-weight: var(--weight-display, 700); }

/* Infos pratiques */
.info-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; }
.info-card {
  background: var(--card-bg); border: var(--border);
  border-radius: var(--radius-lg, 20px); padding: 32px;
}
.info-card h3 { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.info-card h3 .ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.info-card h3 .ico svg { width: 20px; height: 20px; }
.hours-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: var(--border);
  font-size: 0.96rem;
}
.hours-list li:last-child { border-bottom: none; }
.hours-list li span:first-child { color: var(--ink); font-weight: 600; }
.hours-list li span:last-child { color: var(--muted); }
.hours-list li.closed span:last-child { color: var(--accent); font-weight: 700; }
.info-map {
  width: 100%; aspect-ratio: 16 / 8;
  border-radius: var(--radius, 14px); overflow: hidden;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--bg-alt)), color-mix(in srgb, var(--accent-2) 22%, var(--bg-alt)));
  border: var(--border); position: relative;
  display: grid; place-items: center; margin-bottom: 22px;
}
.info-map .pin {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--card-bg); border: var(--border);
  border-radius: 999px; padding: 10px 16px;
  font-weight: 700; font-size: 0.9rem; box-shadow: var(--shadow-lg);
}
.info-map .pin svg { width: 17px; height: 17px; color: var(--accent); }
.info-line { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
.info-line .ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.info-line .ico svg { width: 16px; height: 16px; }
.info-line small { display: block; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 2px; }
.info-line b { font-family: var(--font-display); font-weight: var(--weight-display, 700); font-size: 1.02rem; }

/* Hero gauche : titre serré */
.hero-eyebrow { margin-bottom: 14px; }

@media (max-width: 960px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
  .gallery-row { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .nav-phone { display: none; }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
  .gallery-row { grid-template-columns: 1fr 1fr; }
}


/* ===== Complements Inocom (hors deck) ===== */
/* Le deck cache TOUT le contenu (.reveal{opacity:0}) et le revele au scroll par un
   IntersectionObserver : sans JS, la page est blanche, et ni un robot d'indexation ni un
   lecteur d'ecran ne scrollent. La charge est donc inversee : visible par defaut, anime
   seulement si le script a pose `html.js`. Piege trouve par le CEO le 07/09/2026. */
.reveal { opacity:1; transform:none; }
html.js .reveal { opacity:0; transform:translateY(34px); }
html.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { html.js .reveal { opacity:1; transform:none; } }
.logo-texte { font-family: var(--font-display); font-weight: var(--weight-display,700); font-size: 1.15rem; letter-spacing: -.02em; }
/* La barre est un flex : un <a> qui ne contient qu'une image en width:auto n'a aucune
   largeur intrinseque et s'ecrase a ZERO. Le logo d'Issou etait charge (180x180) et rendu
   en 0x0 -- invisible, sans erreur, sans image cassee. Il faut une hauteur EXPLICITE sur
   l'image et `flex:none` sur le lien. (CEO, 07/09/2026, mesure au navigateur : la balise
   etait la, le fichier repondait en 200, et la case faisait 0 pixel.) */
.nav-logo { flex: none; display: inline-flex; align-items: center; }
/* ---- Bandeau de reassurance (CEO, 07/09/2026) ----
   Remplace .logos-row du deck, prevu pour des logos et non pour du texte. Grille
   reguliere, pictogramme accentue, fait en gras et precision en dessous : la meme
   information devient lisible d'un coup d'oeil au lieu de quatre phrases grises. */
.reassure { padding: 40px 0; border-top: var(--border); border-bottom: var(--border);
            background: var(--bg-alt, var(--bg)); }
.reassure-label { text-align: center; color: var(--muted); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 26px; }
.reassure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.reassure-item { display: flex; gap: 12px; align-items: flex-start;
  background: var(--card-bg, transparent); border: var(--border);
  border-radius: var(--radius, 12px); padding: 16px 18px; min-width: 0; }
.reassure-ico { flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent); }
.reassure-ico svg { width: 18px; height: 18px; }
.reassure-item > div { min-width: 0; }
.reassure-item b { display: block; font-family: var(--font-display);
  font-weight: var(--weight-display, 700); font-size: .98rem; color: var(--ink);
  line-height: 1.25; margin-bottom: 3px; }
.reassure-item span { display: block; color: var(--muted); font-size: .86rem; line-height: 1.4; }
@media (max-width: 960px) { .reassure-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reassure-grid { grid-template-columns: 1fr; } }
.nav-logo img { height: 40px; width: auto; max-height: none; display: block; }
/* Le deck masque le telephone de la barre sous 960px (`.nav-phone{display:none}`) : sur un
   site vitrine c'est logique, sur une landing d'urgence c'est le contraire de ce qu'on veut.
   Un visiteur dont les WC debordent arrive au telephone, et Fred a tranche « optimiser pour
   l'appel ». On le garde donc visible, en pastille compacte sous 640px pour qu'il tienne a
   cote du logo. (CEO, 07/09/2026, trouve en mesurant la barre au telephone.) */
@media (max-width: 960px) {
  .nav-phone { display: inline-flex !important; align-items: center; gap: 6px; }
}
/* Dans la barre, sous 960px, on garde le TELEPHONE et on retire le bouton de devis :
   les deux ensemble font 409px pour un ecran de 390, et le second sort de l'ecran. Le
   devis reste accessible par la barre fixe du bas, qui porte deja les deux actions.
   Mesure : nav-cta jusqu'a 409px, detecte par qa_visuelle.py. */
@media (max-width: 960px) {
  .nav-cta .btn:not(.nav-phone) { display: none; }
  .nav .container { gap: 10px; }
}
/* La barre fixe du bas debordait de 19px : ses deux boutons plus les marges depassaient
   la largeur utile. On la contraint et on laisse les boutons se partager la place. */
.sticky-cta { max-width: 100%; box-sizing: border-box; gap: 8px; }
.sticky-cta .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }

@media (max-width: 520px) {
  .nav-phone { font-size: .86rem; padding: 8px 12px; }
  .nav-logo img { height: 30px; }
}
.lead-form .field textarea { width:100%; padding:13px 15px; border:var(--border); border-radius:var(--radius,12px); background:var(--bg); color:var(--ink); font-family:inherit; font-size:.98rem; resize:vertical; }
.lead-form .form-note { display:flex; align-items:center; justify-content:center; gap:6px; }
.split-list li > span { min-width:0; }
.hero-media { position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; opacity:.10; }
.hero { position:relative; overflow:hidden; }
.step-num { font-family: var(--font-display); font-weight: var(--weight-display,700); font-size:1.05rem; }
.zone-villes { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.zone-villes span { padding:8px 14px; border-radius:999px; border:var(--border); background:var(--card-bg); font-size:.86rem; font-weight:600; }
.zone-villes span.main { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.info-map-live { width:100%; aspect-ratio:16/8; border:0; border-radius:var(--radius,14px); }
.tel-big { display:block; font-family:var(--font-display); font-weight:var(--weight-display,700); font-size:clamp(1.5rem,3vw,2rem); color:var(--accent); margin:6px 0 14px; letter-spacing:-.02em; }
/* Barre d'appel fixe en mobile : le levier de conversion n°1 sur un metier d'urgence. */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--card-bg); border-top:var(--border); box-shadow:0 -10px 30px -18px rgba(0,0,0,.4); }
.sticky-cta .btn { flex:1; justify-content:center; }
@media (max-width:820px){ .sticky-cta { display:flex; } body { padding-bottom:76px; } }
@media print { .sticky-cta { display:none; } }