/* ── Famille publique (audit design, lot 9, 30/10/2026) ───────────────────────────────────────────────
   Pages vues HORS de l'appli ou à sa porte : erreurs (9a), puis signatures, boutique, vitrine. Elles ne
   chargent ni le kit de pilotage ni appli.css : une feuille courte, tirée de la page de connexion (police
   système, fond gris clair, carte blanche arrondie, bouton ardoise), pour qu'elles se ressemblent ENTRE
   ELLES. La couleur du bouton est une variable : la boutique y mettra la couleur choisie par la société.
   Pas de Bootstrap requis ; seules les icônes (bootstrap-icons.css) sont chargées à côté. */
:root {
    --pub-accent: #1e293b;
    --pub-accent-fonce: #0f172a;
    --pub-texte: #0f172a;
    --pub-doux: #64748b;
    --pub-pale: #94a3b8;
    --pub-fond: #f1f5f9;
    --pub-bord: #e2e8f0;
    --pub-rouge: #b91c1c;
}
*, *::before, *::after { box-sizing: border-box; }
body.pub-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--pub-texte);
    line-height: 1.5;
    background:
        radial-gradient(ellipse 75% 35% at 50% -5%, rgba(99, 102, 241, .05) 0%, transparent 60%),
        var(--pub-fond);
}
.pub-logo { display: block; width: 60%; max-width: 220px; height: auto; margin: 0 auto 2rem; }
.pub-carte {
    width: 100%;
    max-width: 480px;
    background: var(--pub-carte, #fff);
    border-radius: 16px;
    padding: 2.5rem 2.25rem 2.25rem;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 2px 4px rgba(15, 23, 42, .04), 0 16px 48px rgba(15, 23, 42, .09);
}
.pub-carte.large { max-width: 560px; }
.pub-code { font-size: 4.5rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--pub-pale); margin-bottom: .75rem; }
.pub-code.rouge { color: var(--pub-rouge); }
.pub-icone {
    width: 72px; height: 72px; margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    background: var(--pub-fond); color: var(--pub-doux);
}
.pub-titre { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .5rem; color: var(--pub-texte); }
.pub-texte { font-size: .95rem; color: var(--pub-doux); margin: 0 0 .75rem; }
.pub-texte.petit { font-size: .85rem; }
.pub-actions { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.pub-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .75rem 1.5rem;
    border: none; border-radius: 10px;
    background: var(--pub-accent); color: #fff;
    font: inherit; font-size: .95rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
    transition: background .2s, box-shadow .2s, transform .12s;
}
.pub-btn:hover, .pub-btn:focus-visible { background: var(--pub-accent-fonce); color: #fff; box-shadow: 0 4px 16px rgba(15, 23, 42, .28); transform: translateY(-1px); }
.pub-btn.clair { background: #fff; color: var(--pub-texte); border: 1.5px solid var(--pub-bord); box-shadow: none; }
.pub-btn.clair:hover, .pub-btn.clair:focus-visible { background: var(--pub-fond); color: var(--pub-texte); box-shadow: none; }
.pub-lien { font-size: .85rem; color: var(--pub-doux); }
.pub-lien:hover { color: var(--pub-texte); }
.pub-ref { margin-top: 1.5rem; font-size: .85rem; color: var(--pub-pale); }
.pub-ref code {
    background: var(--pub-fond); color: #475569;
    padding: .15em .45em; border-radius: 4px; font-size: .95em; user-select: all;
}
.pub-detail {
    text-align: left; margin: 1rem 0 0;
    background: #f8fafc; border: 1px solid var(--pub-bord); border-radius: 8px;
    padding: .75rem; font-size: .78rem; color: var(--pub-rouge);
    overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
/* ── Document à signer (lot 9b) : devis, commande, affaire, PV de recette, PV de réception ──────────────
   Ces pages gardent Bootstrap (grilles, tableau ordinateur / cartes téléphone) : cette partie ne fait que
   l'habillage commun. Tête de tableau CLAIRE (règle « plus aucun tableau noir »). */
body.pub-page-doc {
    margin: 0;
    padding: 2rem 1rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--pub-texte);
    background: var(--pub-fond);
}
.pub-doc { max-width: 860px; margin: 0 auto; }
.pub-doc-tete {
    background: var(--pub-accent); color: #fff;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem 1.75rem;
}
.pub-doc-tete .pub-doc-type { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .25rem; color: #fff; }
.pub-doc-tete .pub-doc-meta { color: rgba(255, 255, 255, .75); font-size: .875rem; }
.pub-doc-tete .pub-doc-ref { font-size: 1.15rem; font-weight: 600; }
.pub-doc-corps {
    background: #fff;
    padding: 1.75rem;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 2px 4px rgba(15, 23, 42, .04), 0 16px 48px rgba(15, 23, 42, .07);
}
.pub-doc-corps.avec-pied { border-radius: 0; }
.pub-doc-pied {
    background: #fff; border-top: 1px solid var(--pub-bord);
    border-radius: 0 0 16px 16px;
    padding: 1rem 1.75rem; text-align: center;
    font-size: .85rem; color: var(--pub-doux);
    box-shadow: 0 16px 48px rgba(15, 23, 42, .07);
}
.pub-lib { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pub-doux); margin-bottom: .2rem; }
.pub-section { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .75rem; color: var(--pub-texte); }
.pub-table thead th {
    background: var(--pub-fond); color: #475569;
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--pub-bord);
}
.pub-totaux td { border-color: var(--pub-bord); }
.pub-totaux .pub-total td { font-weight: 700; background: var(--pub-fond); }
.pub-ligne { border-bottom: 1px solid var(--pub-bord); padding: .75rem 0; }
.pub-ligne:last-child { border-bottom: none; }
.pub-encart {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .85rem 1rem; margin-bottom: 1rem;
    border-radius: 10px; border: 1px solid var(--pub-bord);
    background: #f8fafc; color: var(--pub-texte); font-size: .92rem;
}
.pub-encart > .bi { font-size: 1.25rem; line-height: 1.2; flex-shrink: 0; }
.pub-encart.vert   { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.pub-encart.rouge  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.pub-encart.orange { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.pub-encart.gris   { background: var(--pub-fond); color: #475569; }
.pub-pastille {
    display: inline-block; padding: .15em .6em; border-radius: 999px;
    font-size: .75rem; font-weight: 700; white-space: nowrap;
    background: var(--pub-fond); color: #475569;
}
.pub-pastille.vert   { background: #d1fae5; color: #065f46; }
.pub-pastille.rouge  { background: #fee2e2; color: #991b1b; }
.pub-pastille.orange { background: #fef3c7; color: #92400e; }
.pub-pastille.bleu   { background: #dbeafe; color: #1e40af; }
.pub-zone { margin-top: 1.5rem; padding: 1.25rem; background: #f8fafc; border: 1px solid var(--pub-bord); border-radius: 12px; }
.pub-pad { border: 1.5px solid var(--pub-bord); border-radius: 10px; background: #fff; touch-action: none; }
.pub-pad canvas { width: 100%; height: 180px; display: block; touch-action: none; cursor: crosshair; border-radius: 10px; }
.pub-btn.grand { padding: .95rem 1.5rem; font-size: 1.02rem; }
.pub-btn.petit { padding: .35rem .8rem; font-size: .85rem; border-radius: 8px; }
.pub-btn.refus { background: #fff; color: var(--pub-rouge); border: 1.5px solid #fecaca; box-shadow: none; }
.pub-btn.refus:hover, .pub-btn.refus:focus-visible { background: #fef2f2; color: var(--pub-rouge); box-shadow: none; }
.pub-btn:disabled { opacity: .6; cursor: default; transform: none; }

/* ── Boutique publique (lot 9c) : les pages secondaires (paiement, compte, suivi) prennent le THÈME de la
   boutique — variables posées par include/shop-theme.ejs (--accent, --bg, --card, --text, --muted, --border,
   --input-bg, --font) — au lieu du gris Bootstrap. La vitrine garde son propre design. */
body.pub-boutique {
    --pub-accent: var(--accent);
    --pub-accent-fonce: var(--accent);
    --pub-texte: var(--text);
    --pub-doux: var(--muted);
    --pub-pale: var(--muted);
    --pub-fond: var(--input-bg);
    --pub-bord: var(--border);
    --pub-carte: var(--card);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
}
.pub-boutique .pub-carte, .pub-boutique .pub-doc-corps { background: var(--card); }
.pub-boutique .pub-btn:hover, .pub-boutique .pub-btn:focus-visible { background: var(--accent); filter: brightness(1.1); }
.pub-boutique .pub-btn.clair { background: var(--card); color: var(--text); }
.pub-boutique .pub-btn.clair:hover, .pub-boutique .pub-btn.clair:focus-visible { background: var(--input-bg); color: var(--text); filter: none; }
.pub-boutique .text-muted { color: var(--muted) !important; }
.pub-boutique a:not(.pub-btn):not(.btn) { color: var(--accent); }
.pub-boutique .form-control, .pub-boutique .form-select { background-color: var(--input-bg); color: var(--text); border-color: var(--border); }
.pub-boutique .form-label { color: var(--text); }
.pub-boutique .form-text { color: var(--muted); }
.pub-boutique .table { --bs-table-bg: transparent; --bs-table-color: var(--text); border-color: var(--border); color: var(--text); }
.pub-boutique .table thead th { background: var(--input-bg); color: var(--muted); }
.pub-boutique .btn-light { background: var(--input-bg); color: var(--text); border-color: var(--border) !important; }
.pub-icone.vert   { background: rgba(38, 185, 154, .14); color: #1aa185; }
.pub-icone.rouge  { background: rgba(231, 76, 60, .14);  color: #c0392b; }
.pub-icone.orange { background: rgba(240, 173, 78, .18); color: #b9770e; }
.pub-icone.bleu   { background: rgba(52, 152, 219, .14); color: #1f6fa8; }
.pub-carte.xl { max-width: 680px; }
/* Suivi de commande : au téléphone, un montant ne se coupe pas en deux lignes (« 149.00 » puis « € »). */
@media (max-width: 576px) {
    .pub-table-suivi td, .pub-table-suivi th { white-space: nowrap; font-size: .82rem; padding: .4rem .35rem; }
    .pub-table-suivi td:first-child, .pub-table-suivi th:first-child { white-space: normal; }
    body.pub-page-doc.pub-boutique { padding: 1.5rem 1rem; }
}
.pub-mention { margin: 1.5rem 0 0; font-size: .85rem; color: var(--pub-doux); }
.pub-ref-badge { display: inline-block; background: var(--pub-fond); border: 1px solid var(--pub-bord); border-radius: 8px; padding: .3rem .8rem; font-family: ui-monospace, monospace; }

@media (max-width: 575.98px) {
    body.pub-page-doc { padding: 0; }
    .pub-doc-tete { border-radius: 0; padding: 1.25rem 1rem; }
    .pub-doc-corps { padding: 1.25rem 1rem; border-radius: 0; }
    .pub-doc-pied { border-radius: 0; padding: 1rem; }
}
/* ── Site public d'Open (lot 9d) : accueil visiteur, fonctionnalités, tarifs, multi-entités, FAQ, CGV, contact,
   comparatifs, blog. Gabarit include/site-entete.ejs + site-pied.ejs (Bootstrap pour la grille, le menu ☰ et
   la FAQ dépliable ; ni appli.css, ni kit, ni scripts de l'appli).
   🔑 Le ROSE d'Open n'est écrit QU'ICI (--site-marque) : boutons d'action, mots mis en avant, liens.
   Le reste vient de la page de connexion : police système, ardoise, fond gris clair, cartes blanches. */
body.pub-site {
    --site-marque: #e94560;
    --site-marque-fonce: #d63a54;
    --site-nuit: #0f172a;
    --site-nuit-2: #1e293b;
    --site-gris: #f8fafc;
    --site-texte-doux: #475569;
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--pub-texte);
    background: #fff;
    line-height: 1.6;
}
.pub-site a { color: var(--site-marque); }
.pub-site a:hover { color: var(--site-marque-fonce); }
.pub-site h1, .pub-site h2, .pub-site h3, .pub-site h4 { color: var(--pub-texte); letter-spacing: -.01em; }
.pub-site .site-accent { color: var(--site-marque); }
.site-saut { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; color: var(--pub-texte); padding: .5rem 1rem; border-radius: 0 0 8px 0; }
.site-saut:focus { left: 0; }

/* Barre du haut et pied */
.site-nav { background: var(--site-nuit); }
.site-nav .navbar-brand { display: flex; align-items: center; gap: .5rem; color: #fff; }
.site-nav .navbar-brand img { height: 28px; filter: brightness(0) invert(1); }
.site-nav .navbar-brand span { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.site-nav .nav-link { color: rgba(255, 255, 255, .72); }
.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible { color: #fff; }
.site-nav .site-connexion {
    display: inline-block; padding: .3rem .9rem; border-radius: 8px;
    background: #fff; color: var(--pub-texte); font-size: .875rem; font-weight: 600; text-decoration: none;
}
.site-nav .site-connexion:hover { background: var(--pub-fond); color: var(--pub-texte); }
.site-pied { padding: 2rem 0; background: var(--site-nuit); color: var(--pub-pale); text-align: center; font-size: .9rem; }
.site-pied a { display: inline-block; color: #cbd5e1; text-decoration: none; margin: .2rem .6rem; }
.site-pied a:hover { color: #fff; }

/* Colonnes de lecture */
.site-col { max-width: 1100px; margin: 0 auto; padding: 0 15px; }
.site-col.large { max-width: 1300px; }
.site-col.moyenne { max-width: 900px; }
.site-col.texte { max-width: 820px; padding-bottom: 3.75rem; }

/* Titre de page, bandeau sombre, sections */
.site-entete { text-align: center; padding: 3rem 0; }
.site-entete h1 { font-size: 2.4rem; font-weight: 800; margin: 0; }
.site-entete p { font-size: 1.15rem; color: var(--site-texte-doux); max-width: 680px; margin: .9rem auto 0; }
.site-bandeau {
    background: linear-gradient(135deg, var(--site-nuit) 0%, var(--site-nuit-2) 100%);
    color: #fff; text-align: center; padding: 4rem 1.25rem;
}
.site-bandeau.arrondi { border-radius: 16px; margin-top: 1rem; padding: 5rem 2rem; }
.pub-site .site-bandeau h1, .pub-site .site-bandeau h2 { color: #fff; }
.site-bandeau h1 { font-size: 2.4rem; font-weight: 800; }
.site-bandeau p { font-size: 1.15rem; color: rgba(255, 255, 255, .82); max-width: 700px; margin: 1rem auto 0; }
.site-section { padding: 4.5rem 0; }
.site-section.gris { background: var(--site-gris); }
.site-section.serree { padding: 2.5rem 0; }
.site-section.filet { border-top: 1px solid var(--pub-bord); }
.site-titre { text-align: center; margin-bottom: 2.5rem; }
.site-titre h2 { font-size: 2rem; font-weight: 700; margin: 0; }
.site-titre p { font-size: 1.05rem; color: var(--site-texte-doux); max-width: 700px; margin: .5rem auto 0; }
.site-surtitre { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--site-marque); margin-bottom: .6rem; }
.site-note { text-align: center; color: var(--pub-doux); font-size: .9rem; }
.site-note p { margin: 0 0 .5rem; }
.site-centre { text-align: center; }

/* Boutons d'action : le rose */
.pub-btn.marque { background: var(--site-marque); color: #fff; box-shadow: 0 4px 14px rgba(233, 69, 96, .28); }
.pub-btn.marque:hover, .pub-btn.marque:focus-visible { background: var(--site-marque-fonce); color: #fff; }
.pub-btn.contour { background: #fff; color: var(--site-marque); border: 2px solid var(--site-marque); box-shadow: none; }
.pub-btn.contour:hover, .pub-btn.contour:focus-visible { background: #fff1f3; color: var(--site-marque-fonce); }
.pub-btn.nuit { background: var(--site-nuit); color: #fff; }
.pub-btn.nuit:hover, .pub-btn.nuit:focus-visible { background: var(--site-nuit-2); color: #fff; }
.pub-btn.sur-sombre { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .3); box-shadow: none; }
.pub-btn.sur-sombre:hover, .pub-btn.sur-sombre:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.pub-btn.site { padding: .95rem 2rem; font-size: 1.05rem; font-weight: 700; }
.site-boutons { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* Grilles de cartes */
.site-grille { display: grid; gap: 20px; }
.site-grille.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-grille.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-grille.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-grille.espacee { gap: 28px; }
@media (max-width: 1199.98px) { .site-grille.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .site-grille.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .site-grille.cols-2, .site-grille.cols-3, .site-grille.cols-4 { grid-template-columns: minmax(0, 1fr); } }
.site-carte {
    background: #fff; border-radius: 12px; padding: 1.75rem 1.5rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 2px 12px rgba(15, 23, 42, .06);
}
.site-carte.gris { background: var(--site-gris); box-shadow: none; border: 1px solid var(--pub-bord); }
.site-carte.image { padding: 0; overflow: hidden; }
.site-carte.image img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--pub-bord); }
.site-carte.image .site-carte-corps { padding: 1.25rem 1.4rem 1.5rem; }
a.site-carte { display: block; color: inherit; text-decoration: none; transition: transform .2s; }
a.site-carte:hover { transform: translateY(-3px); color: inherit; }
.site-carte h3, .site-carte h4 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .4rem; }
.site-carte p { color: var(--site-texte-doux); font-size: .93rem; line-height: 1.65; margin: 0; }
.site-carte .site-mots { display: block; margin-top: .6rem; color: var(--pub-pale); font-size: .85rem; }
.site-carte h3 > .bi, .site-carte h4 > .bi { color: var(--site-marque); }

/* Tons : distinguent les quatre piliers et les familles de modules de l'accueil */
.ton-bleu { --ton: #2563eb; --ton-pale: #dbeafe; }
.ton-violet { --ton: #7c3aed; --ton-pale: #ede9fe; }
.ton-vert { --ton: #059669; --ton-pale: #d1fae5; }
.ton-orange { --ton: #d97706; --ton-pale: #fef3c7; }
.ton-ciel { --ton: #0284c7; --ton-pale: #e0f2fe; }
.ton-rose { --ton: var(--site-marque); --ton-pale: #fce7f3; }
.site-icone {
    width: 52px; height: 52px; border-radius: 12px; margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
    background: var(--ton-pale, var(--pub-fond)); color: var(--ton, var(--pub-texte));
}
.site-icone-seule { font-size: 2.4rem; color: var(--site-marque); line-height: 1; display: block; margin-bottom: .75rem; }
.site-pilier { position: relative; border-top: 4px solid var(--ton); padding-top: 2rem; }
.site-pilier-badge {
    position: absolute; top: -14px; right: 20px;
    background: var(--ton); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    padding: 4px 12px; border-radius: 12px;
}
.site-coches { list-style: none; padding: 0; margin: .9rem 0 0; font-size: .87rem; line-height: 1.95; color: var(--site-texte-doux); }
.site-coches .bi { color: var(--ton, var(--site-marque)); margin-right: .5rem; }
.site-module { padding: 1.1rem; background: var(--site-gris); border-radius: 8px; border-left: 3px solid var(--site-marque); }
.site-module .bi { font-size: 1.4rem; color: var(--site-marque); }
.site-module strong { display: block; margin-top: .35rem; }
.site-module small { color: var(--pub-doux); }

/* Accueil */
.site-hero { padding: 5.5rem 0 3.75rem; overflow: hidden; }
.site-hero-logo { display: inline-block; background: rgba(255, 255, 255, .96); border-radius: 16px; padding: 24px 32px; margin-bottom: 1.5rem; box-shadow: 0 4px 24px rgba(0, 0, 0, .3); }
.site-hero-logo img { max-width: 380px; width: 100%; height: auto; display: block; }
.site-hero .site-slogan { font-size: 1.05rem; font-style: italic; color: rgba(255, 255, 255, .7); letter-spacing: .03em; margin: 0 0 1.75rem; }
.site-hero h1 { font-size: 2.8rem; line-height: 1.2; margin-bottom: 1.25rem; }
.site-hero .site-hero-texte { font-size: 1.25rem; max-width: 780px; margin: 0 auto 2.5rem; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.site-capture { max-width: 1080px; margin: 3rem auto 0; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 60px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .15); }
.site-capture img { width: 100%; height: auto; display: block; }
.site-normes { max-width: 1140px; margin: 0 auto; }

/* Tarifs : 3 colonnes (3 + 2), 5 quand la place est là, 1 au téléphone */
.site-tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (min-width: 1230px) { .site-tarifs { grid-template-columns: repeat(5, 1fr); } }
.site-tarif {
    background: #fff; border-radius: 16px; padding: 2.5rem 1.75rem; text-align: center; height: 100%; position: relative;
    display: flex; flex-direction: column;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 4px 24px rgba(15, 23, 42, .08);
}
.site-tarif.populaire { box-shadow: 0 0 0 3px var(--site-marque), 0 4px 24px rgba(15, 23, 42, .08); }
.site-tarif.populaire::before {
    content: 'Populaire'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--site-marque); color: #fff; padding: 4px 20px; border-radius: 20px; font-size: .85rem; font-weight: 700;
}
.site-tarif h3 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .3rem; }
.site-tarif .site-cible { color: var(--pub-doux); font-size: .9rem; margin: 0 0 1rem; }
/* 2.3rem : « 1490€ » à 3rem débordait de la carte. En bloc : « /mois » ne revient pas au milieu du prix. */
.site-prix { font-size: 2.3rem; font-weight: 800; line-height: 1.15; color: var(--pub-texte); }
.site-prix small { display: block; font-size: .95rem; color: var(--pub-pale); font-weight: 400; }
.site-prix .site-prix-avant { font-size: .85rem; font-weight: 600; color: var(--pub-doux); }
.site-tarif hr { border: 0; border-top: 1px solid var(--pub-bord); margin: 1.25rem 0; opacity: 1; }
.site-tarif ul { list-style: none; padding: 0; margin: 0 0 1.25rem; text-align: left; line-height: 2; font-size: .9rem; }
.site-tarif ul .bi-check { color: #059669; }
.site-tarif ul .bi-plus-circle, .site-tarif ul .site-option { color: var(--pub-pale); }
.site-tarif > .pub-btn { margin-top: auto; width: 100%; }

/* Multi-entités */
.site-schema { background: var(--site-gris); border-radius: 12px; padding: 1.9rem; text-align: center; font-family: ui-monospace, monospace; font-size: .9rem; line-height: 1.8; }
.site-schema-ligne { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.site-schema-agence { background: var(--ton-pale); padding: 15px; border-radius: 8px; min-width: 150px; }
.site-schema-fleche { display: flex; align-items: center; font-size: 1.5rem; }
.site-schema p { margin: 1.25rem 0 0; color: var(--site-texte-doux); }
.site-encadre { background: #fffbeb; border-left: 4px solid #f59e0b; padding: 1.25rem; border-radius: 0 8px 8px 0; margin: 1.25rem 0; }
.site-pile > * + * { margin-top: 1.25rem; }

/* FAQ */
.site-faq-cat { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--site-marque); margin: 2.6rem 0 .9rem; }
.site-faq-item { background: #fff; border: 1px solid var(--pub-bord); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.site-faq-q {
    width: 100%; text-align: left; background: none; border: 0; padding: 20px 22px;
    font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--pub-texte);
    display: flex; align-items: center; gap: 14px; cursor: pointer;
}
.site-faq-q:hover { background: var(--site-gris); }
.site-faq-q .chev { margin-left: auto; color: var(--pub-pale); transition: transform .18s ease; flex: 0 0 auto; }
.site-faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.site-faq-r { padding: 0 22px 22px; color: var(--site-texte-doux); line-height: 1.75; }
.site-faq-r a { font-weight: 600; }

/* Encart sombre d'appel à l'action (FAQ, comparatif, accueil) */
.site-appel { background: var(--site-nuit); color: #fff; border-radius: 16px; padding: 2.5rem 1.5rem; text-align: center; margin: 3.5rem 0 3.75rem; }
.site-appel.plein { border-radius: 0; margin: 0; padding: 4.5rem 1.25rem; }
.pub-site .site-appel h2 { color: #fff; font-size: 1.75rem; font-weight: 700; margin-bottom: .6rem; }
.site-appel p { color: rgba(255, 255, 255, .82); margin: 0 auto 1.6rem; max-width: 600px; }
.site-appel .site-appel-note { color: rgba(255, 255, 255, .5); font-size: .9rem; margin: .75rem auto 0; }

/* CGV */
.site-meta { background: var(--site-gris); border: 1px solid var(--pub-bord); border-radius: 12px; padding: 18px 22px; color: var(--site-texte-doux); font-size: .93rem; line-height: 1.7; }
.site-meta dt { font-weight: 700; color: var(--pub-texte); }
.site-meta dd { margin: 0 0 8px; }
.site-meta dd.site-alerte { color: var(--pub-rouge); }
.site-article-cgv { margin-top: 2.1rem; }
.site-article-cgv h2 { font-size: 1.12rem; font-weight: 700; margin-bottom: .6rem; }
.site-article-cgv p { color: var(--site-texte-doux); line-height: 1.8; margin-bottom: .75rem; }
.site-meta.bas { margin-top: 2.5rem; }

/* Contact */
.site-contact { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding-bottom: 3.75rem; }
.site-form { flex: 1 1 460px; min-width: 0; background: #fff; border: 1px solid var(--pub-bord); border-radius: 16px; padding: 2rem; }
.site-form label { font-weight: 600; font-size: .92rem; margin-bottom: 5px; display: block; }
.site-form .form-control, .site-form .form-select { border-radius: 8px; padding: 11px 13px; border: 1px solid #cbd5e1; }
.site-form .form-control:focus, .site-form .form-select:focus { border-color: var(--site-nuit-2); box-shadow: 0 0 0 3px rgba(30, 41, 59, .12); }
.site-form .site-requis { color: var(--site-marque); }
.site-form .pub-btn { width: 100%; margin-top: 1.5rem; }
.site-form .site-mention { color: var(--pub-pale); font-size: .85rem; margin: .9rem 0 0; text-align: center; }
.site-form .site-mention a { color: var(--pub-doux); }
.site-cote { flex: 0 1 300px; min-width: 0; }
.site-cote .site-carte { margin-bottom: 16px; padding: 1.4rem; }
.site-cote .site-carte h3 { font-size: 1rem; }
.site-cote .site-carte a { font-weight: 600; }
.pub-site .pub-encart { margin-bottom: 1.75rem; padding: 1.1rem 1.3rem; border-radius: 12px; }
.pub-site .pub-encart a { color: inherit; font-weight: 600; }
.site-encart-sous { font-size: .95rem; margin-top: .25rem; }

/* Comparatifs */
.site-compare { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; padding: 1.9rem; }
.site-compare .site-compare-logo { font-size: 3rem; min-width: 80px; text-align: center; }
.site-compare .site-compare-corps { flex: 1; min-width: 0; }
.site-compare > .bi { font-size: 1.5rem; color: var(--site-marque); }
.site-retour { color: var(--pub-pale); margin: 0 0 .75rem; }
.site-retour a { text-decoration: none; font-weight: 600; }
/* Tête de tableau CLAIRE (règle « plus aucun tableau noir »). */
.site-table { width: 100%; border-collapse: collapse; }
.site-table th { background: var(--pub-fond); color: var(--site-texte-doux); padding: 12px; text-align: left; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--pub-bord); }
.site-table th.col-critere { width: 35%; } .site-table th.col-open { width: 32%; } .site-table th.col-autre { width: 33%; }
.site-table td { padding: 12px; border-bottom: 1px solid var(--pub-bord); }
.site-table tr td:first-child { font-weight: 600; }
.site-table .site-gagnant { background: #ecfdf5; }
.site-pour-contre { display: flex; gap: 20px; }
.site-pour, .site-contre { flex: 1; min-width: 0; padding: 1.5rem; border-radius: 12px; }
.site-pour { background: #ecfdf5; }
.site-contre { background: #fef2f2; }
.site-pour h4, .site-contre h4 { font-weight: 700; font-size: 1.15rem; }
.site-pour ul, .site-contre ul { line-height: 2; margin: 0; }

/* Blog : la couleur de la CATÉGORIE vient des données (--cat, posée sur la carte) */
.site-bandeau.blog { padding: 3.75rem 1.25rem; }
.site-bandeau.blog h1 { font-size: 2.2rem; }
.site-blog-carte { display: flex; flex-wrap: wrap; padding: 0; overflow: hidden; margin-bottom: 24px; }
.site-blog-vignette { width: 260px; min-height: 180px; display: flex; align-items: center; justify-content: center; font-size: 3rem; flex-shrink: 0; background: color-mix(in srgb, var(--cat) 9%, #fff); color: var(--pub-texte); }
.site-blog-corps { flex: 1; padding: 1.5rem; min-width: 0; }
.site-blog-corps h2 { font-size: 1.3rem; font-weight: 700; margin: .5rem 0; }
.site-blog-corps h2 a { color: var(--pub-texte); text-decoration: none; }
.site-blog-corps h2 a:hover { color: var(--site-marque); }
.site-blog-corps p { color: var(--site-texte-doux); line-height: 1.6; }
.site-blog-lire { color: var(--cat) !important; font-weight: 600; text-decoration: none; }
.site-cat { display: inline-block; background: var(--cat); color: #fff; padding: 3px 12px; border-radius: 20px; font-size: .78rem; font-weight: 600; margin-right: 8px; }
.site-date { color: var(--pub-pale); font-size: .85rem; }
.site-vide { text-align: center; color: var(--pub-pale); padding: 3rem 0; }
.site-article { max-width: 780px; margin: 0 auto; padding: 1.9rem 15px 3.75rem; }
.site-article-tete { text-align: center; padding: 2.5rem 0 1.9rem; }
.site-article-tete h1 { font-size: 2rem; font-weight: 800; line-height: 1.3; margin: .9rem 0 0; }
.site-article-tete p { color: var(--site-texte-doux); font-size: 1.1rem; max-width: 600px; margin: .6rem auto 0; }
.site-article-tete .site-date { margin-left: 10px; }
.site-article-corps { font-size: 1.05rem; line-height: 1.8; color: #334155; }
.site-article-corps h2 { font-size: 1.4rem; font-weight: 700; margin: 2rem 0 .75rem; }
.site-article-corps h3 { font-size: 1.15rem; font-weight: 700; color: #334155; margin: 1.5rem 0 .6rem; }
.site-article-corps p, .site-article-corps ul { margin-bottom: 1rem; }
.site-article-corps ul { padding-left: 20px; }
.site-article-corps li { margin-bottom: 6px; }
.site-article-corps table { font-size: .95rem; }
.site-article-corps td, .site-article-corps th { border-bottom: 1px solid var(--pub-bord); }
.site-article-fin { text-align: center; padding: 2.5rem 0 1.25rem; border-top: 1px solid var(--pub-bord); margin-top: 2.5rem; }
.site-article-fin .site-article-question { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.site-article-fin .site-article-note { font-size: .85rem; color: var(--pub-pale); margin-top: .5rem; }

@media (max-width: 767.98px) {
    .site-entete h1, .site-bandeau h1 { font-size: 1.75rem; }
    .site-entete p, .site-bandeau p { font-size: 1rem; }
    .site-bandeau.arrondi { padding: 2.5rem 1rem; }
    .site-hero { padding: 3rem 0 2.5rem; }
    .site-hero h1 { font-size: 1.6rem; }
    .site-hero .site-hero-texte { font-size: 1rem; }
    .site-capture { margin-top: 1.75rem; }
    .site-section { padding: 2.5rem 0; }
    .site-titre h2 { font-size: 1.5rem; }
    .site-appel h2 { font-size: 1.4rem; }
    .site-tarifs { grid-template-columns: 1fr; }
    .site-prix { font-size: 2.2rem; }
    .site-schema { padding: 15px; font-size: .8rem; }
    .site-faq-q { font-size: .98rem; padding: 16px; }
    .site-faq-r { padding: 0 16px 18px; font-size: .95rem; }
    .site-article-cgv h2 { font-size: 1.02rem; }
    .site-article-cgv p { font-size: .95rem; }
    .site-form { padding: 1.4rem; }
    .site-cote { flex-basis: 100%; }
    .site-compare { flex-direction: column; text-align: center; padding: 1.25rem; }
    .site-compare .site-compare-logo { font-size: 2rem; min-width: 0; }
    .site-table th, .site-table td { padding: 8px 6px; font-size: .8rem; }
    .site-pour-contre { flex-direction: column; }
    .site-blog-carte { flex-direction: column; }
    .site-blog-vignette { width: 100%; min-height: 140px; font-size: 2.5rem; }
    .site-bandeau.blog h1 { font-size: 1.8rem; }
    .site-article-tete h1 { font-size: 1.5rem; }
    .site-article-corps { font-size: 1rem; }
    /* Le tableau comparatif d'un article (écrit dans public.controller.js) dépassait l'écran de 14 px. */
    .site-article-corps table { display: block; overflow-x: auto; font-size: .85rem; }
}

@media (max-width: 575.98px) {
    body.pub-page { padding: 1.5rem 1rem; justify-content: flex-start; }
    .pub-carte { padding: 2rem 1.25rem 1.5rem; }
    .pub-code { font-size: 3.5rem; }
    .pub-titre { font-size: 1.3rem; }
    .pub-btn { width: 100%; }
}