/* ===========================================================================
   DentalHub — Vitrine /solutions/ — Feuille de style dédiée
   Palette placeholder : à remplacer par la charte DentalHub (--brand / --accent).
   =========================================================================== */
:root{
  --brand:#0F6FB5;         /* [À COMPLÉTER] bleu principal */
  --brand-dark:#0B5490;
  --accent:#17B0A5;        /* [À COMPLÉTER] teal accent */
  --ink:#14202B;
  --muted:#5A6B78;
  --bg:#FFFFFF;
  --bg-soft:#F3F8FC;
  --line:#E2EAF1;
  --radius:14px;
  --shadow:0 8px 30px rgba(16,45,70,.08);
  --shadow-sm:0 3px 12px rgba(16,45,70,.07);
  --maxw:1140px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{line-height:1.15;margin:0 0 .4em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.6vw,3.35rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem)}
h3{font-size:1.18rem}
p{margin:0 0 1em}
.eyebrow{color:var(--brand);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin-bottom:.6em}
.lead{font-size:1.18rem;color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:1rem;
     padding:.85em 1.5em;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);background:var(--bg-soft)}
.btn-white{background:#fff;color:var(--brand-dark)}
.btn-white:hover{background:#eef6fd}
.btn-lg{padding:1em 1.9em;font-size:1.08rem}

/* Header */
.dh-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:.55em;font-weight:900;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink)}
.brand-logo{height:34px;width:auto}
.brand-fav{width:32px;height:32px;border-radius:9px;object-fit:cover;display:inline-block;vertical-align:middle;flex:none}
.dh-footer .brand-fav{width:30px;height:30px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-weight:900;font-size:1.3rem;color:var(--brand);letter-spacing:-.03em}
.brand-slogan{font-size:.52rem;font-weight:600;color:#aab4bd;letter-spacing:.03em;text-transform:none;margin-top:1px;white-space:nowrap}
.dh-footer .brand-name{color:#5aa8e6}
.dh-footer .brand-slogan{color:#8a99a6}
.brand-fallback{display:none;align-items:center;gap:.5em}
.brand .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:#fff;font-size:1rem}
.nav-links{display:flex;gap:26px;margin-left:18px}
.nav-links a{color:var(--muted);font-weight:600;font-size:.97rem}
.nav-links a:hover{color:var(--brand)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-weight:700;font-size:.85rem}
.lang a{padding:.4em .8em;color:var(--muted)}
.lang a.active{background:var(--brand);color:#fff}
.nav-login{color:var(--muted);font-weight:600;font-size:.97rem}
.nav-login:hover{color:var(--brand)}
.burger{display:none;background:none;border:0;cursor:pointer;font-size:1.5rem;color:var(--ink)}
/* === AJOUT 2026-09-15 === Le burger est un SVG, plus un caractère.
   Sa taille est donnée en « em » A DESSEIN : tous les paliers
   responsive ci-dessous règlent une font-size, parce que le bouton
   portait un glyphe. En em, ces réglages gardent le même effet sur
   l'icône — la cible tactile de 44 px et les ajustements par palier
   n'ont pas à être refaits. stroke:currentColor suit déjà var(--ink)
   par héritage. */
.burger svg{width:1em;height:1em;display:block;pointer-events:none}

/* Hero */
.hero{background:linear-gradient(180deg,var(--bg-soft),#fff);padding:64px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-note{margin-top:16px;color:var(--muted);font-size:.92rem}
.hero-visual{background:linear-gradient(135deg,var(--brand),var(--accent));border-radius:20px;box-shadow:var(--shadow);
     aspect-ratio:4/3;display:grid;place-items:center;color:#fff;text-align:center;padding:26px}
.hero-visual .ph strong{display:block;font-size:1.1rem;margin-bottom:.3em}
.hero-visual small{opacity:.85}
.hero-visual,.manager-visual{position:relative}
.hero-visual img,.manager-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* Galerie / aperçu en images */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shot{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.18s}
.shot:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--bg-soft)}
.shot figcaption{padding:14px 16px;font-weight:600;font-size:.92rem;color:var(--ink)}
.shot-empty img{display:none}
.shot-empty::before{content:"";display:block;aspect-ratio:16/10;background:linear-gradient(135deg,var(--brand),var(--accent));opacity:.18}

/* Stats strip */
.stats{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 26px;text-align:center;min-width:160px;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-size:1.7rem;color:var(--brand);letter-spacing:-.02em}
.stat span{color:var(--muted);font-size:.9rem}

/* Sections */
section.block{padding:72px 0}
.sec-head{max-width:720px;margin:0 auto 44px;text-align:center}

/* Icônes SVG */
.app-ico svg{width:26px;height:26px;color:var(--brand)}
.app-ico i{font-size:22px;line-height:1}
.stat b svg{width:26px;height:26px;color:var(--brand);vertical-align:middle}
.eyebrow svg{width:16px;height:16px;vertical-align:-3px;margin-right:2px}

/* Familles de modules */
.fam-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 20px}
.fam-head-2{margin-top:48px}
.fam-head p{margin:0;color:var(--muted);font-size:.98rem;flex:1;min-width:240px}
.fam-badge{display:inline-flex;align-items:center;gap:.5em;font-weight:800;font-size:1.05rem;padding:.5em 1em;border-radius:999px}
.fam-badge svg{width:20px;height:20px}
.fam-app{background:rgba(15,111,181,.1);color:var(--brand-dark)}
.fam-clin{background:rgba(23,176,165,.14);color:#0b7d75}

/* Apps / modules */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.app-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:.18s}
.app-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe0ee}
.app-ico{width:48px;height:48px;border-radius:12px;background:var(--bg-soft);display:grid;place-items:center;margin-bottom:14px}
.app-card h3{margin-bottom:.3em;font-size:1.08rem}
.app-card p{color:var(--muted);font-size:.92rem;margin:0}
.app-accent{position:absolute;left:0;right:0;bottom:0;height:4px}
.mod-badge{position:absolute;top:12px;right:12px;background:var(--brand);color:#fff;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:.25em .6em;border-radius:999px}
.mod-badge-ai{background:linear-gradient(135deg,#f0a500,#f0555f)}
/* Chips modules inclus (pages d'offres) */
.mod-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.mod-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5em 1em;font-weight:600;font-size:.92rem}
.mod-chip i{font-size:15px}

/* Manager de clinique */
.manager{background:var(--bg-soft)}
.manager-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.manager-visual{background:linear-gradient(135deg,var(--accent),var(--brand));border-radius:20px;box-shadow:var(--shadow);aspect-ratio:4/3;display:grid;place-items:center;color:#fff;text-align:center;padding:26px}
.manager-visual .ph strong{display:block;font-size:1.1rem;margin-bottom:.3em}
.manager-visual small{opacity:.85}
.check-list{list-style:none;padding:0;margin:22px 0}
.check-list li{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;font-size:1.02rem}
.check-list li svg{width:22px;height:22px;color:var(--accent);flex-shrink:0;margin-top:2px}
.hero-note svg{width:18px;height:18px;vertical-align:-4px;color:var(--brand)}

/* Calculateur ROI */
.roi-card{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.roi-inputs{padding:30px;display:grid;gap:16px}
.roi-inputs label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:600;color:var(--ink)}
.roi-inputs input{border:1px solid var(--line);border-radius:10px;padding:.7em .9em;font-size:1.05rem;font-weight:700;color:var(--ink);font-family:inherit}
.roi-inputs input:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.roi-output{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;padding:30px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.roi-label{font-size:.9rem;opacity:.9;text-transform:uppercase;letter-spacing:.05em}
.roi-year{display:block;font-size:2.8rem;font-weight:900;letter-spacing:-.03em;line-height:1.1;margin:.1em 0}
.roi-sub{font-size:.95rem;opacity:.9}
.roi-time{display:flex;align-items:center;gap:10px;font-size:.95rem;border-top:1px solid rgba(255,255,255,.2);padding-top:16px}
.roi-time svg{width:22px;height:22px;flex-shrink:0}
.roi-output .btn{margin-top:4px}

/* Sécurité / conformité */
.secu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.secu-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.secu-card .app-ico{background:rgba(15,111,181,.08)}
.secu-card h3{font-size:1.08rem;margin-bottom:.3em}
.secu-card p{color:var(--muted);font-size:.93rem;margin:0}

/* Tarifs */
#tarifs{background:var(--bg-soft)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative}
.plan.featured{border:2px solid var(--brand);box-shadow:var(--shadow)}
.plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.35em 1em;border-radius:999px}
.plan h3{font-size:1.35rem}
.plan-tagline{color:var(--muted);font-size:.95rem;margin:-.1em 0 .7em}
.btn-sub{white-space:normal;line-height:1.25;text-align:center}
.price-clinics{display:flex;align-items:center;gap:8px;color:var(--brand-dark);font-weight:700;font-size:.95rem;margin-bottom:14px}
.price-clinics svg{width:20px;height:20px;color:var(--brand);flex:none}
.plan .price{font-size:2.3rem;font-weight:900;letter-spacing:-.03em;margin:.2em 0 0}
.plan .price small{font-size:.9rem;font-weight:600;color:var(--muted)}
.plan .price-note{color:var(--muted);font-size:.85rem;margin-bottom:18px}
.plan ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px}
.plan li{position:relative;padding-left:28px;font-size:.96rem}
.plan li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--accent);font-weight:900}
.plan li.off{color:#a9b6c1}
.plan li.off::before{content:"\2013";color:#c7d2db}
.plan .btn{width:100%;margin-top:auto}
.tarif-note{text-align:center;color:var(--muted);font-size:.88rem;margin-top:22px}

/* FAQ */
.faq{max-width:800px;margin:0 auto}
details{border:1px solid var(--line);border-radius:12px;padding:2px 20px;margin-bottom:12px;background:#fff}
details summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:1.4rem;color:var(--brand);font-weight:400}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted);padding-bottom:16px;margin:0}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;text-align:center;padding:64px 0}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.88);max-width:560px;margin:0 auto 26px}

/* Footer */
.dh-footer{background:var(--ink);color:#c3ccd4;padding:48px 0 30px;font-size:.92rem}
.foot-grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;margin-bottom:30px}
.foot-brand{max-width:280px}
.dh-footer .brand{color:#fff}
.dh-footer a{color:#c3ccd4}
.dh-footer a:hover{color:#fff}
.foot-col h4{color:#fff;font-size:.95rem;margin:0 0 12px}
.foot-col a{display:block;margin-bottom:8px}
.foot-bottom{border-top:1px solid #2a3946;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:#8a99a6;font-size:.85rem}

/* Boutons complémentaires */
.btn svg{width:18px;height:18px}
.btn-sm{padding:.5em 1.1em;font-size:.9rem}
.btn-discover{background:#fff;color:var(--brand);border-color:var(--brand)}
.btn-discover:hover{background:var(--brand);color:#fff}
.plan-cta{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.plan-cta .btn{width:100%}

/* ===== Pages détail d'abonnement ===== */
.plan-hero{background:linear-gradient(180deg,var(--bg-soft),#fff);padding:40px 0 30px}
.plan-hero.is-featured{background:linear-gradient(180deg,#eaf4fb,#fff)}
.plan-back{display:inline-block;color:var(--muted);font-weight:600;font-size:.92rem;margin-bottom:18px}
.plan-back:hover{color:var(--brand)}
.plan-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:start}
.plan-hero h1{font-size:clamp(2rem,4vw,2.9rem)}
.badge-inline{display:inline-block;background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.35em 1em;border-radius:999px;margin-bottom:12px}
.plan-tagline{margin-bottom:.4em}
.plan-intro{color:var(--muted);font-size:1.05rem;max-width:560px}
.plan-price-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.plan-price-card .price{font-size:2.3rem;font-weight:900;letter-spacing:-.03em}
.plan-price-card .price small{font-size:.9rem;font-weight:600;color:var(--muted)}
.plan-price-card .price-note{color:var(--muted);font-size:.85rem;margin-bottom:16px}
.plan-who{border-top:1px solid var(--line);padding-top:16px;margin-bottom:18px}
.plan-who strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand);margin-bottom:6px}
.plan-who p{color:var(--muted);font-size:.95rem;margin:0}
.plan-price-card .btn{width:100%}
.plan-incl{max-width:760px}
.plan-benefits li{font-size:1.05rem}
.plan-compare-card{align-items:flex-start;justify-content:center;text-align:left}
.plan-compare-card .app-ico{width:48px;height:48px;border-radius:12px;background:var(--bg-soft);display:grid;place-items:center;margin-bottom:14px}
.plan-compare-card .btn{width:100%;margin-top:auto}

/* ===== Comparateur ===== */
.cmp-toggle{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);cursor:pointer;background:#fff;border:1px solid var(--line);padding:.6em 1em;border-radius:999px}
.cmp-toggle input{width:18px;height:18px;accent-color:var(--brand)}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.cmp-table{width:100%;border-collapse:collapse;min-width:680px;background:#fff}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
.cmp-table thead th{position:sticky;top:0;background:#fff;vertical-align:top;z-index:2}
.cmp-feat{text-align:left !important;font-weight:600;color:var(--ink);width:38%}
.cmp-plan-name{font-weight:900;font-size:1.15rem}
.cmp-plan-price{font-weight:800;color:var(--brand);margin:2px 0 10px}
.cmp-plan-price small{font-size:.75rem;color:var(--muted);font-weight:600}
.cmp-detail{display:block;margin-top:8px;font-size:.82rem;color:var(--brand);font-weight:700}
.cmp-featured{background:rgba(15,111,181,.05)}
.cmp-group td{background:var(--bg-soft);text-align:left !important;font-weight:800;color:var(--ink);font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}
.cmp-yes svg{width:22px;height:22px;color:var(--accent)}
.cmp-part svg{width:22px;height:22px;color:#f0a500}
.cmp-no{color:#c7d2db;font-size:1.3rem;font-weight:700}
.cmp-txt{font-weight:700;color:var(--ink);font-size:.92rem}
.cmp-hide{display:none}

/* ===== Visionneuse d'image (lightbox) ===== */
img.zoomable{cursor:zoom-in}
.img-modal{position:fixed;inset:0;z-index:300;background:rgba(10,22,33,.9);display:flex;align-items:center;justify-content:center;padding:32px;backdrop-filter:blur(4px);animation:imgfade .18s ease}
.img-modal[hidden]{display:none}
@keyframes imgfade{from{opacity:0}to{opacity:1}}
.img-modal-fig{margin:0;max-width:1100px;max-height:90vh;display:flex;flex-direction:column;gap:12px}
.img-modal-fig img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff}
.img-modal-fig figcaption{color:#fff;text-align:center;font-weight:600;font-size:1rem}
.img-modal-close{position:fixed;top:18px;right:24px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:2rem;line-height:1;cursor:pointer;transition:.18s}
.img-modal-close:hover{background:rgba(255,255,255,.25)}

/* ===== Bouton retour en haut ===== */
.to-top{position:fixed;right:20px;bottom:20px;z-index:150;width:48px;height:48px;border-radius:50%;
  background:var(--brand);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(15,111,181,.4);opacity:0;visibility:hidden;transform:translateY(12px);transition:.25s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand-dark)}
.to-top svg{width:22px;height:22px}

/* ===== Bandeau cookies ===== */
.cookie-banner{position:fixed;left:20px;bottom:20px;z-index:200;width:min(420px,calc(100vw - 40px));
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(16,45,70,.18);padding:22px 24px}
.cookie-banner[hidden]{display:none}
.cookie-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.cookie-head h3{margin:0;font-size:1.15rem}
.cookie-ico svg{width:26px;height:26px;color:#a97142}
.cookie-banner p{color:var(--muted);font-size:.92rem;margin:0 0 16px}
.cookie-banner a{color:var(--brand);text-decoration:underline}
.cookie-actions{display:flex;gap:12px}
.cookie-actions .btn{flex:1;padding:.7em 1em;font-size:.95rem;border-radius:10px}
.cookie-accept{background:#eaf2fb;color:var(--brand-dark);border-color:#eaf2fb}
.cookie-accept:hover{background:#d9e9fa}
.cookie-refuse{background:#fff;color:var(--ink);border-color:var(--line)}
.cookie-refuse:hover{border-color:var(--muted)}
@media (max-width:560px){ .cookie-banner{left:12px;right:12px;bottom:12px} }

/* Responsive */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .manager-grid{grid-template-columns:1fr;gap:30px}
  .plan-hero-grid{grid-template-columns:1fr;gap:24px}
  .apps{grid-template-columns:repeat(2,1fr)}
  .secu-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .roi-card{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:14px 22px;gap:14px;margin:0}
}
@media (max-width:560px){
  .apps{grid-template-columns:1fr}
  .secu-grid{grid-template-columns:1fr}
  .nav-right .nav-login{display:none}
}

/* =================================================================== *
   === AJOUT 2026-09-04 === Cohabitation avec la barre responsive du bas
   -------------------------------------------------------------------
   menu-responsive.php affiche une barre fixe de 64 px en dessous de
   992 px, en z-index 1040. Deux éléments de la vitrine sont fixés à
   « bottom:20px » et passeraient DERRIÈRE elle :

     .to-top       (z-index 150) — 48 px de haut : 44 px seraient
                    masqués, le bouton deviendrait inutilisable ;
     .cookie-banner(z-index 200) — son bas serait recouvert.

   On les remonte de la hauteur de la barre, en MOBILE SEULEMENT : la
   même borne (991.98px) que celle où la barre apparaît, pour que les
   deux règles basculent exactement ensemble.

   var(--dh-mobile-nav-height) vient de /css/responsive-menu.css, chargée
   par le menu. Le repli 64px couvre le cas où la barre ne serait pas
   incluse sur une page.
 * =================================================================== */
@media (max-width: 991.98px){
  .to-top{ bottom: calc(20px + var(--dh-mobile-nav-height, 64px)); }
  .cookie-banner{ bottom: calc(20px + var(--dh-mobile-nav-height, 64px)); }
}

/* =================================================================== *
   === CORRECTIF 2026-09-04 === Débordement horizontal de l'en-tête
   -------------------------------------------------------------------
   MESURÉ, pas estimé. À 360 px de large, la ligne .nav réclamait :

       marges .wrap  44
       .brand       142   (favicon 32 + 12 + texte 98)
       gap .nav      20
       .nav-right   270   (langue 82 + 14 + Souscrire 126 + 14 + burger 34)
       ------------------
       TOTAL        476   pour 360 px disponibles  ->  116 px de trop

   La page devenait donc plus large que l'écran, se décalait vers la
   droite, et TOUT ce qui est en position:fixed (la barre du bas) restait
   collé au viewport pendant que le contenu glissait. D'où le désaccord
   d'alignement, en haut comme en bas.

   Ce que j'avais supposé et qui était FAUX : que le slogan
   « Connect. Smile. Thrive. » imposait la largeur du bloc de marque. Il
   fait 98 px — exactement comme « DentalHub » au-dessus. Le masquer ne
   gagne pas un pixel. C'est la mesure qui l'a dit.

   On ne retire donc AUCUNE entrée : on resserre. Rien ne disparaît.
 * =================================================================== */
@media (max-width:640px){
  .wrap{padding:0 14px}                       /* -16 */
  .nav{gap:10px}                              /* -10 */
  .nav-right{gap:8px}                         /* -12 */

  /* Le bloc de marque : favicon et nom légèrement réduits. */
  .brand-fav{width:28px;height:28px}          /* -4  */
  .brand{gap:.4em}
  .brand-name{font-size:1.05rem}              /* -19 */
  .brand-slogan{font-size:.48rem}

  /* Le sélecteur de langue. */
  .lang{font-size:.78rem}
  .lang a{padding:.35em .6em}                 /* -14 */

  /* L'appel à l'action reste VISIBLE : il rétrécit, il ne disparaît pas. */
  .nav-right .btn{font-size:.9rem;padding:.7em 1em}   /* -40 */

  .burger{font-size:1.35rem;padding:1px 4px}  /* -6  */
}

/* -------------------------------------------------------------------
   Palier des téléphones (jusqu'à ~430 px). Il couvre la quasi-totalité
   des appareils réels : 320, 360, 390, 412 px.

   Il est monté de 360 à 430 px POUR RENDRE SA LARGEUR AU NOM DE LA
   MARQUE. Avec le palier précédent, « DentalHub » s'affichait
   « Dental… » sur un écran de 360 px en néerlandais — la place manquait
   de 31 px. En serrant un peu plus les commandes de droite et en
   masquant le slogan (décoratif, illisible à cette taille), le nom
   revient entier. Tronquer une marque se remarque ; masquer un slogan
   de 8 px, non.
   ------------------------------------------------------------------- */
@media (max-width:429.98px){
  .wrap{padding:0 10px}
  .brand-name{font-size:.95rem}
  .brand-slogan{display:none}     /* la place va au nom de la marque */
  .lang{font-size:.72rem}
  .lang a{padding:.3em .5em}
  .nav-right{gap:6px}
  .nav-right .btn{font-size:.82rem;padding:.6em .8em}
  .burger{font-size:1.25rem;padding:1px 2px}
}

/* -------------------------------------------------------------------
   LE GARDE-FOU STRUCTUREL — et c'est lui qui compte vraiment.
   -------------------------------------------------------------------
   Les paliers ci-dessus règlent les largeurs d'aujourd'hui, avec les
   libellés d'aujourd'hui. Ils sont fragiles : la version néerlandaise
   l'a prouvé sur-le-champ. « Abonneren » est plus large que
   « Souscrire », et il restait 9 px de trop à 360 px alors que le
   français passait tout juste.

   Gratter encore quelques pixels aurait tenu jusqu'à la prochaine
   traduction. On corrige donc la CAUSE : par défaut, un enfant de flex
   ne descend jamais sous la largeur de son contenu (min-width:auto), et
   ici rien ne pouvait céder — la ligne poussait la page.

   Désormais le bloc de marque PEUT se comprimer, et c'est lui qui
   absorbe le manque. Conséquence assumée : sur les écrans les plus
   étroits, avec les libellés les plus longs, « DentalHub » se termine
   par des points de suspension plutôt que de faire déborder la page
   entière. Le pire cas devient local et discret, au lieu d'être global
   et visible.
   ------------------------------------------------------------------- */
@media (max-width:960px){
  .nav{min-width:0}
  .brand{min-width:0;flex:0 1 auto;overflow:hidden}
  .brand-text{min-width:0;overflow:hidden}
  .brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-slogan{overflow:hidden;text-overflow:ellipsis}

  /* Le favicon ne se déforme pas quand le bloc se comprime. */
  .brand-fav{flex:none}

  /* La partie droite garde sa taille : ce sont les commandes, elles
     doivent rester lisibles et cliquables. */
  .nav-right{flex:none}
}

/* =================================================================== *
   === CORRECTIF 2026-09-04 (2) === Le burger, plus grand et cliquable
   -------------------------------------------------------------------
   Max : « les tirets du menu ne sont pas assez grands ».

   C'est de mon fait : en réglant le débordement horizontal, j'avais pris
   6 px sur le burger (1.5rem -> 1.35 -> 1.25rem). Il tombait à 22 × 26 px
   sur téléphone — plus petit qu'avant, et bien en dessous des 44 × 44 px
   recommandés pour une cible tactile.

   La mesure montre qu'il restait de la place dans la ligne : +58 px à
   360 px, +20 px à 320 px, même en néerlandais. Ces pixels n'avaient
   aucune raison d'être économisés là.

   On rend donc les 6 px ET on va au-delà : 44 × 44 px de zone cliquable
   (le minimum WCAG 2.5.8), avec un glyphe à 1.75rem — plus gros que
   l'original 1.5rem, puisque c'est bien la taille des tirets qui est en
   cause.

   place-items:center sur une grille : le glyphe reste centré dans le
   carré quelle que soit sa taille. line-height:1 évite que la hauteur de
   ligne du texte n'agrandisse le bouton au-delà des 44 px voulus.
 * =================================================================== */
@media (max-width:960px){
  .burger{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    line-height:1;
    font-size:1.75rem;
    margin-right:-6px;   /* recale le glyphe sur le bord, le carré déborde de la marge optique */
  }
}

/* Les écrans les plus étroits : la cible reste large, le carré rétrécit
   un peu pour ne pas reprendre la place qu'on vient de libérer ailleurs. */
@media (max-width:359.98px){
  .burger{width:40px;height:40px;font-size:1.6rem}
}

/* Sous 340 px (iPhone SE 1re génération, 2016), la cible tactile de 40 px
   reprenait les pixels du nom de marque : « DentalHub » s'y abrégeait. On
   récupère la place sur le bouton d'appel à l'action plutôt que sur le
   burger — un bouton un peu plus compact reste lisible, un burger de
   22 px ne se vise plus. */
@media (max-width:339.98px){
  .nav-right{gap:4px}
  .nav-right .btn{font-size:.76rem;padding:.55em .6em}
  .lang{font-size:.68rem}
  .lang a{padding:.28em .42em}
}


/* =================================================================== *
   === AJOUT 2026-09-04 === Pages de détail par module
   -------------------------------------------------------------------
   Reprend les composants existants de la vitrine (block, sec-head,
   plan-hero, apps, app-card) : seuls les éléments propres à la fiche
   sont définis ici.
 * =================================================================== */

/* Fond alterné pour la section « fonctionnalités ». */
section.block-soft{background:var(--bg-soft)}

/* --- En-tête de la fiche --- */
.mod-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:14px}
.mod-head-ico{flex:none;width:64px;height:64px;border-radius:18px;display:grid;place-items:center}
.mod-head-ico i{font-size:1.7rem}
.mod-head-txt{min-width:0}
.mod-head-txt h1{margin:.15em 0 .25em}

/* --- Offres qui incluent le module --- */
.mod-plans{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--muted);
  font-size:.92rem;margin:0 0 18px}
.mod-plan-chip{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:999px;padding:.25em .8em;font-weight:700;font-size:.85rem;color:var(--brand);
  background:#fff;transition:.15s}
.mod-plan-chip:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* --- Les avantages --- */
.mod-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.mod-benefit{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 22px 22px 26px;box-shadow:var(--shadow-sm);overflow:hidden}
.mod-benefit-mark{position:absolute;left:0;top:0;bottom:0;width:4px}
.mod-benefit h3{font-size:1.08rem;margin:0 0 .4em}
.mod-benefit p{margin:0;color:var(--muted);line-height:1.55}

/* --- Les fonctionnalités --- */
.mod-features{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:14px 26px}
.mod-feature{display:flex;align-items:flex-start;gap:12px;line-height:1.5}
.mod-feature-ico{flex:none;margin-top:2px}
.mod-feature-ico svg{width:20px;height:20px}
.mod-feature b{display:block;color:var(--ink)}
.mod-feature span{color:var(--muted);font-size:.95rem}

/* --- Carte de module cliquable (accueil + « autres modules ») --- */
.app-card-link{display:block;color:inherit}
.app-card-link:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}

/* --- Lien du libellé dans le comparateur --- */
/* Discret : c'est un tableau, pas une liste de liens. Le soulignement
   n'apparaît qu'au survol pour ne pas alourdir la lecture. */
.cmp-mod-link{color:inherit;border-bottom:1px dotted var(--line)}
.cmp-mod-link:hover{color:var(--brand);border-bottom-color:var(--brand)}

@media (max-width:760px){
  .mod-benefits{grid-template-columns:1fr}
  .mod-features{grid-template-columns:1fr}
  .mod-head{gap:14px}
  .mod-head-ico{width:52px;height:52px;border-radius:15px}
  .mod-head-ico i{font-size:1.4rem}
}