/* ============================================================
 *  Sama_Boutique — Pages publiques (accueil, comment ça marche,
 *  avantages) servies par le routeur d'index.php
 *  ------------------------------------------------------------
 *  Direction artistique « Pan-African Tech Chic » :
 *   - fonds Bleu Nuit Profond #020617 / #0F172A, halos Or
 *     #D97706, Émeraude #059669 et Terracotta #C25E00 ;
 *   - cartes en verre dépoli (backdrop-filter), bordures
 *     semi-transparentes dorées, dégradés tricolores ;
 *   - typographies auto-hébergées (CSP font-src 'self') ;
 *   - entête collant en verre, mockup téléphone 100 % CSS,
 *     frise d'étapes, cartes de témoignages, comparatif, FAQ ;
 *   - responsive mobile-first, zones tactiles ≥ 44px.
 * ============================================================ */

/* ---------- Polices auto-hébergées ---------- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/plus-jakarta-sans.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --nuit: #020617;
    --nuit-2: #0f172a;
    --nuit-3: #1e293b;
    --or: #d97706;
    --or-clair: #fbbf24;
    --terra: #c25e00;
    --emeraude: #059669;
    --emeraude-clair: #34d399;
    --texte: #e2e8f0;
    --texte-doux: #94a3b8;
    --bordure: rgb(148 163 184 / .16);
    --verre: linear-gradient(160deg, rgb(15 23 42 / .78), rgb(2 6 23 / .88));
    --police: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --titres: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.page-publique {
    margin: 0;
    min-height: 100vh;
    font-family: var(--police);
    color: var(--texte);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(800px 500px at 90% -140px, rgb(217 119 6 / .15), transparent 62%),
        radial-gradient(840px 560px at -10% 30%, rgb(5 150 105 / .1), transparent 65%),
        radial-gradient(700px 500px at 60% 115%, rgb(194 94 0 / .08), transparent 65%),
        linear-gradient(180deg, #0f172a 0%, #020617 40%, #020617 100%);
    background-attachment: fixed;
}
/* Motif géométrique africain en filigrane */
.page-publique::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M16 20l12 12-12 12-12-12z' fill='none' stroke='%23D97706' stroke-opacity='.05' stroke-width='1.2'/%3E%3Ccircle cx='48' cy='14' r='2.6' fill='%23059669' fill-opacity='.06'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23D97706' fill-opacity='.05'/%3E%3C/svg%3E");
}
.page-publique > * { position: relative; z-index: 1; }
.page-publique ::selection { background: var(--or); color: #1a1a1a; }

.pub-conteneur { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- En-tête collant en verre ---------- */
.pub-entete {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--bordure);
    background: rgb(2 6 23 / .72);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}
.pub-entete__ligne {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 68px;
}
.pub-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #f8fafc;
    flex-shrink: 0;
}
.pub-logo img { filter: drop-shadow(0 4px 12px rgb(217 119 6 / .4)); }
.pub-logo strong {
    font-family: var(--titres);
    font-size: 1.15rem;
    letter-spacing: -.02em;
}
.pub-logo em { color: var(--or-clair); font-style: normal; }

.pub-nav { display: flex; gap: 4px; margin-left: auto; }
.pub-nav a {
    position: relative;
    padding: 9px 13px;
    border-radius: 999px;
    color: var(--texte-doux);
    font-size: .88rem;
    font-weight: 650;
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: color .16s, background .16s;
}
.pub-nav a:hover { color: #f1f5f9; background: rgb(148 163 184 / .1); }
.pub-nav a.actif { color: var(--or-clair); background: rgb(217 119 6 / .12); }

.pub-entete__actions { display: flex; gap: 9px; flex-shrink: 0; }
.pub-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, filter .18s, background .18s;
}
.pub-bouton:hover { transform: translateY(-1px); }
.pub-bouton--or {
    background: linear-gradient(135deg, var(--or), var(--terra));
    color: #fff;
    box-shadow: 0 10px 22px -8px rgb(194 94 0 / .6);
}
.pub-bouton--or:hover { filter: brightness(1.08); box-shadow: 0 16px 30px -8px rgb(194 94 0 / .7); }
.pub-bouton--contour {
    border-color: rgb(148 163 184 / .3);
    color: #e2e8f0;
    background: rgb(15 23 42 / .5);
}
.pub-bouton--contour:hover { border-color: var(--or); color: var(--or-clair); }
.pub-bouton--emeraude {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
    box-shadow: 0 10px 22px -8px rgb(5 150 105 / .55);
}
.pub-bouton--emeraude:hover { filter: brightness(1.08); }
.pub-bouton--grand { min-height: 52px; padding: 13px 26px; font-size: .95rem; }

/* ---------- Flashs ---------- */
.pub-flash {
    margin: 18px auto 0;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: .88rem;
    border: 1px solid;
    animation: pub-apparition .35s both;
}
.pub-flash--succes { background: rgb(5 150 105 / .12); border-color: rgb(52 211 153 / .4); color: #a7f3d0; }
.pub-flash--erreur { background: rgb(227 27 35 / .1); border-color: rgb(248 113 113 / .4); color: #fecaca; }
.pub-flash--info { background: rgb(217 119 6 / .1); border-color: rgb(251 191 36 / .4); color: #fde68a; }

@keyframes pub-apparition {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Sections ---------- */
.pub-section { padding: 76px 0 30px; }
.pub-section__titre {
    font-family: var(--titres);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem);
    letter-spacing: -.02em;
    color: #f8fafc;
    text-align: center;
    margin: 0 0 10px;
}
.pub-section__titre em {
    font-style: normal;
    background: linear-gradient(92deg, #fbbf24, #d97706);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pub-section__sous-titre {
    text-align: center;
    color: var(--texte-doux);
    max-width: 58ch;
    margin: 0 auto 44px;
    font-size: .98rem;
}
.pub-etiquette {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--or-clair);
    border: 1px solid rgb(217 119 6 / .35);
    background: rgb(217 119 6 / .08);
    border-radius: 999px;
    padding: 7px 14px;
}

/* ---------- HERO ---------- */
.pub-heros { padding: 66px 0 30px; }
.pub-heros__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 48px;
    align-items: center;
}
.pub-heros h1 {
    font-family: var(--titres);
    font-size: clamp(2.1rem, 1.5rem + 3.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: #f8fafc;
    margin: 20px 0 18px;
}
.pub-heros h1 .degrade {
    background: linear-gradient(92deg, #fbbf24, #d97706 50%, #fb923c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pub-heros__sous-titre {
    font-size: 1.05rem;
    color: var(--texte-doux);
    max-width: 48ch;
    margin: 0 0 28px;
}
.pub-heros__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.pub-heros__points-cles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--texte-doux);
    font-size: .82rem;
}
.pub-heros__points-cles span { display: inline-flex; align-items: center; gap: 6px; }
.pub-heros__points-cles b { color: var(--emeraude-clair); }

/* Recherche acheteur (verre) */
.pub-recherche {
    margin-top: 26px;
    padding: 16px;
    border: 1px solid var(--bordure);
    border-radius: 18px;
    background: var(--verre);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    max-width: 480px;
}
.pub-recherche label {
    display: block;
    font-size: .8rem;
    color: var(--texte-doux);
    margin-bottom: 8px;
}
.pub-recherche label strong { color: #f1f5f9; }
.pub-recherche__ligne { display: flex; gap: 8px; }
.pub-recherche__prefixe {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 12px 0 0 12px;
    background: rgb(2 6 23 / .7);
    border: 1.5px solid rgb(148 163 184 / .22);
    border-right: 0;
    color: var(--or-clair);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}
.pub-recherche input {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    border: 1.5px solid rgb(148 163 184 / .22);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: rgb(2 6 23 / .6);
    color: #f1f5f9;
    font-family: inherit;
    font-size: .92rem;
    padding: 10px 13px;
}
.pub-recherche input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgb(217 119 6 / .18); }

/* Visuel héro : orbe + téléphone mockup */
.pub-heros__visuel {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 480px;
}
.pub-heros__orbe {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgb(217 119 6 / .4), transparent 55%),
        radial-gradient(circle at 70% 70%, rgb(5 150 105 / .35), transparent 55%),
        radial-gradient(circle at 50% 50%, rgb(194 94 0 / .25), transparent 70%);
    filter: blur(8px);
    animation: pub-orbe 9s ease-in-out infinite alternate;
}
@keyframes pub-orbe {
    from { transform: scale(.92) rotate(0deg); }
    to   { transform: scale(1.05) rotate(12deg); }
}
.pub-telephone {
    position: relative;
    width: 250px;
    border-radius: 34px;
    padding: 12px;
    background: linear-gradient(160deg, #1e293b, #0f172a);
    border: 1px solid rgb(148 163 184 / .3);
    box-shadow:
        0 40px 70px -20px rgb(0 0 0 / .8),
        0 0 0 1px rgb(217 119 6 / .15) inset;
    animation: pub-flotte 6s ease-in-out infinite;
}
@keyframes pub-flotte {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-14px) rotate(-2deg); }
}
.pub-telephone::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 7px;
    border-radius: 999px;
    background: #0b1120;
}
.pub-telephone__ecran {
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #0f172a, #020617);
    border: 1px solid rgb(148 163 184 / .15);
    padding: 34px 14px 14px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pub-telephone__boutique {
    font-family: var(--titres);
    font-size: .85rem;
    font-weight: 800;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pub-telephone__boutique i {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: .6rem;
    background: linear-gradient(135deg, var(--or), var(--terra));
}
.pub-telephone__produit {
    border-radius: 14px;
    padding: 10px;
    background: rgb(30 41 59 / .6);
    border: 1px solid rgb(148 163 184 / .14);
}
.pub-telephone__img {
    height: 74px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: linear-gradient(120deg, rgb(217 119 6 / .3), rgb(5 150 105 / .2));
    display: grid;
    place-items: center;
    font-size: 1.6rem;
}
.pub-telephone__produit strong { display: block; font-size: .76rem; color: #f1f5f9; }
.pub-telephone__produit span { font-size: .72rem; color: var(--or-clair); font-weight: 700; }
.pub-telephone__cta {
    margin-top: auto;
    text-align: center;
    padding: 11px;
    border-radius: 12px;
    background: linear-gradient(135deg, #25d366, #1da851);
    color: #053b23;
    font-size: .74rem;
    font-weight: 800;
}
.pub-telephone__chat {
    position: absolute;
    right: -28px;
    bottom: 90px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--or), var(--terra));
    box-shadow: 0 12px 24px -6px rgb(194 94 0 / .65);
    animation: pub-flotte 5s ease-in-out infinite 1s;
}

/* Cartes flottantes du héro */
.pub-flottante {
    position: absolute;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .74rem;
    font-weight: 700;
    color: #f1f5f9;
    background: var(--verre);
    border: 1px solid rgb(217 119 6 / .3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 30px -12px rgb(0 0 0 / .6);
    animation: pub-flotte 5.4s ease-in-out infinite;
}
.pub-flottante small { display: block; color: var(--texte-doux); font-weight: 500; }
.pub-flottante--commande { top: 60px; left: -10px; animation-delay: .6s; }
.pub-flottante--vente { bottom: 40px; right: -6px; border-color: rgb(5 150 105 / .4); animation-delay: 1.4s; }

/* ---------- Bande de confiance ---------- */
.pub-confiance {
    margin: 40px 0 0;
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
    background: rgb(15 23 42 / .5);
}
.pub-confiance__ligne {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 34px;
    padding: 16px 20px;
    color: var(--texte-doux);
    font-size: .84rem;
}
.pub-confiance__ligne b { color: #f1f5f9; }

/* ---------- Cartes verre génériques ---------- */
.pub-cartes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.pub-carte {
    position: relative;
    padding: 24px 22px;
    border-radius: 20px;
    border: 1px solid var(--bordure);
    background: var(--verre);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    overflow: hidden;
    transition: transform .22s, border-color .22s, box-shadow .22s;
    animation: pub-apparition .4s both;
}
.pub-carte:hover {
    transform: translateY(-5px);
    border-color: rgb(217 119 6 / .4);
    box-shadow: 0 24px 44px -18px rgb(0 0 0 / .7);
}
.pub-carte::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--or), var(--terra));
    opacity: .85;
}
.pub-carte--emeraude::before { background: linear-gradient(90deg, #059669, #34d399); }
.pub-carte--terra::before { background: linear-gradient(90deg, #c25e00, #fb923c); }

.pub-carte__icone {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgb(217 119 6 / .18), rgb(194 94 0 / .1));
    border: 1px solid rgb(217 119 6 / .3);
}
.pub-carte--emeraude .pub-carte__icone {
    background: linear-gradient(135deg, rgb(5 150 105 / .18), rgb(4 120 87 / .1));
    border-color: rgb(5 150 105 / .35);
}
.pub-carte--terra .pub-carte__icone {
    background: linear-gradient(135deg, rgb(194 94 0 / .2), rgb(154 52 18 / .1));
    border-color: rgb(194 94 0 / .4);
}
.pub-carte h3 {
    font-family: var(--titres);
    font-size: 1.05rem;
    color: #f1f5f9;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.pub-carte p { color: var(--texte-doux); font-size: .88rem; margin: 0; }
.pub-carte code {
    background: rgb(217 119 6 / .12);
    color: var(--or-clair);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: .82em;
}
.pub-carte__chiffre {
    display: block;
    font-family: var(--titres);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--or-clair);
    margin-bottom: 4px;
}
.pub-carte--emeraude .pub-carte__chiffre { color: var(--emeraude-clair); }
.pub-carte--terra .pub-carte__chiffre { color: #fdba74; }

/* ---------- Témoignages ---------- */
.pub-temoignages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pub-temoignage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--bordure);
    background: var(--verre);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: pub-apparition .4s both;
    transition: transform .22s, border-color .22s;
}
.pub-temoignage:hover { transform: translateY(-4px); border-color: rgb(5 150 105 / .4); }
.pub-temoignage__etoiles { color: var(--or-clair); letter-spacing: 3px; font-size: .9rem; }
.pub-temoignage blockquote {
    margin: 0;
    font-size: .9rem;
    color: #cbd5e1;
    line-height: 1.6;
}
.pub-temoignage blockquote strong { color: var(--or-clair); }
.pub-temoignage__auteur { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.pub-temoignage__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: .95rem;
    color: #fff;
    background: linear-gradient(135deg, var(--or), var(--terra));
}
.pub-temoignage__avatar--vert { background: linear-gradient(135deg, #059669, #047857); }
.pub-temoignage__avatar--terra { background: linear-gradient(135deg, #c25e00, #9a3412); }
.pub-temoignage__auteur strong { display: block; font-size: .88rem; color: #f1f5f9; }
.pub-temoignage__auteur small { color: var(--texte-doux); font-size: .76rem; }

/* ---------- Frise d'étapes ---------- */
.pub-frise {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 10px;
}
.pub-frise::before {
    content: '';
    position: absolute;
    top: 44px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, var(--or), var(--terra) 50%, var(--emeraude));
    opacity: .35;
}
.pub-etape {
    position: relative;
    padding: 26px 22px;
    border-radius: 20px;
    border: 1px solid var(--bordure);
    background: var(--verre);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-align: center;
    transition: transform .22s, border-color .22s;
}
.pub-etape:hover { transform: translateY(-5px); border-color: rgb(217 119 6 / .4); }
.pub-etape__numero {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -4px auto 14px;
    border-radius: 50%;
    font-family: var(--titres);
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--or), var(--terra));
    box-shadow: 0 0 0 6px rgb(217 119 6 / .14), 0 10px 20px -6px rgb(194 94 0 / .6);
}
.pub-etape:nth-child(2) .pub-etape__numero { background: linear-gradient(135deg, #c25e00, #9a3412); box-shadow: 0 0 0 6px rgb(194 94 0 / .14), 0 10px 20px -6px rgb(194 94 0 / .6); }
.pub-etape:nth-child(3) .pub-etape__numero { background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 0 0 6px rgb(5 150 105 / .14), 0 10px 20px -6px rgb(5 150 105 / .6); }
.pub-etape__duree {
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--or-clair);
    border: 1px solid rgb(217 119 6 / .35);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 10px;
}
.pub-etape h3 { font-family: var(--titres); font-size: 1.08rem; color: #f1f5f9; margin: 0 0 8px; }
.pub-etape p { color: var(--texte-doux); font-size: .87rem; margin: 0 0 12px; }
.pub-etape ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: grid;
    gap: 7px;
}
.pub-etape ul li {
    display: flex;
    gap: 8px;
    font-size: .82rem;
    color: #cbd5e1;
}
.pub-etape ul li::before { content: '✓'; color: var(--emeraude-clair); font-weight: 800; flex-shrink: 0; }

/* ---------- Cartes avantages (grande grille) ---------- */
.pub-avantages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.pub-avantage {
    display: flex;
    gap: 18px;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid var(--bordure);
    background: var(--verre);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform .22s, border-color .22s;
    animation: pub-apparition .4s both;
}
.pub-avantage:hover { transform: translateY(-4px); border-color: rgb(217 119 6 / .4); }
.pub-avantage__icone {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgb(217 119 6 / .18), rgb(194 94 0 / .1));
    border: 1px solid rgb(217 119 6 / .3);
}
.pub-avantage__icone--vert {
    background: linear-gradient(135deg, rgb(5 150 105 / .18), rgb(4 120 87 / .1));
    border-color: rgb(5 150 105 / .35);
}
.pub-avantage__icone--terra {
    background: linear-gradient(135deg, rgb(194 94 0 / .2), rgb(154 52 18 / .1));
    border-color: rgb(194 94 0 / .4);
}
.pub-avantage h3 { font-family: var(--titres); font-size: 1.04rem; color: #f1f5f9; margin: 0 0 6px; }
.pub-avantage p { color: var(--texte-doux); font-size: .87rem; margin: 0; }
.pub-avantage ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.pub-avantage ul li {
    font-size: .78rem;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pub-avantage ul li::before { content: '✓'; color: var(--emeraude-clair); font-weight: 800; }

/* ---------- Comparatif ---------- */
.pub-comparatif {
    width: 100%;
    border-collapse: collapse;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--bordure);
    background: var(--verre);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: .88rem;
}
.pub-comparatif th,
.pub-comparatif td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid rgb(148 163 184 / .1);
}
.pub-comparatif thead th {
    font-family: var(--titres);
    font-size: .82rem;
    letter-spacing: .04em;
    color: #f1f5f9;
    background: rgb(30 41 59 / .7);
}
.pub-comparatif thead th:last-child {
    color: var(--or-clair);
    background: linear-gradient(135deg, rgb(217 119 6 / .2), rgb(194 94 0 / .12));
}
.pub-comparatif tbody tr:last-child td { border-bottom: 0; }
.pub-comparatif td:first-child { color: var(--texte-doux); }
.pub-comparatif .ko { color: #f87171; }
.pub-comparatif .ok { color: var(--emeraude-clair); font-weight: 700; }
.pub-comparatif td:last-child { color: #e2e8f0; }
.pub-comparatif__wrap { overflow-x: auto; border-radius: 18px; }

/* ---------- FAQ ---------- */
.pub-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.pub-faq details {
    border: 1px solid var(--bordure);
    border-radius: 16px;
    background: var(--verre);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow: hidden;
}
.pub-faq summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: .92rem;
    color: #f1f5f9;
    min-height: 44px;
}
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::after {
    content: '+';
    margin-left: auto;
    font-size: 1.3rem;
    color: var(--or-clair);
    transition: transform .2s;
}
.pub-faq details[open] summary::after { transform: rotate(45deg); }
.pub-faq details[open] summary { border-bottom: 1px solid rgb(148 163 184 / .1); }
.pub-faq details p { margin: 0; padding: 14px 18px 16px; color: var(--texte-doux); font-size: .88rem; }

/* ---------- Bandeau CTA final ---------- */
.pub-cta {
    margin: 70px 0 80px;
}
.pub-cta__panneau {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 52px 40px;
    text-align: center;
    border: 1px solid rgb(217 119 6 / .3);
    background:
        radial-gradient(500px 200px at 20% 0%, rgb(217 119 6 / .22), transparent 60%),
        radial-gradient(500px 220px at 85% 100%, rgb(5 150 105 / .18), transparent 60%),
        var(--verre);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.pub-cta__panneau h2 {
    font-family: var(--titres);
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem);
    letter-spacing: -.02em;
    color: #f8fafc;
    margin: 0 0 12px;
}
.pub-cta__panneau p { color: var(--texte-doux); max-width: 56ch; margin: 0 auto 26px; }
.pub-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ---------- Pied de page ---------- */
.pub-pied {
    border-top: 1px solid var(--bordure);
    background: rgb(2 6 23 / .8);
}
.pub-pied__grille {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 34px;
    padding: 48px 20px 30px;
}
.pub-pied__marque p { color: var(--texte-doux); font-size: .85rem; margin: 14px 0 0; max-width: 40ch; }
.pub-pied__editeur { font-size: .8rem; }
.pub-pied__editeur em { color: var(--or-clair); font-style: normal; }
.pub-pied__col h3 {
    font-family: var(--titres);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or-clair);
    margin: 0 0 12px;
}
.pub-pied__col a {
    display: block;
    color: var(--texte-doux);
    font-size: .86rem;
    text-decoration: none;
    padding: 4px 0;
    transition: color .15s;
    word-break: break-word;
}
.pub-pied__col a:hover { color: var(--or-clair); }
.pub-pied__mention { font-size: .74rem; color: #475569; margin-top: 10px; }
.pub-pied__signature {
    border-top: 1px solid rgb(148 163 184 / .1);
    padding-top: 18px;
    padding-bottom: 22px;
    text-align: center;
    color: #64748b;
    font-size: .78rem;
}

/* ---------- Apparition au scroll (main.js .reveal) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .pub-heros__ligne { grid-template-columns: 1fr; gap: 30px; }
    .pub-heros__visuel { min-height: 0; }
    .pub-heros__orbe { width: 300px; height: 300px; }
    .pub-cartes, .pub-temoignages, .pub-frise { grid-template-columns: 1fr 1fr; }
    .pub-frise::before { display: none; }
    .pub-avantages { grid-template-columns: 1fr; }
    .pub-pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .pub-entete__ligne { flex-wrap: wrap; padding: 10px 0; gap: 10px; }
    .pub-nav { order: 3; width: 100%; margin-left: 0; }
    .pub-nav a { flex: 1; justify-content: center; padding: 8px 6px; font-size: .8rem; }
    .pub-entete__actions .pub-bouton { padding: 8px 13px; font-size: .8rem; min-height: 40px; }
    .pub-cartes, .pub-temoignages, .pub-frise { grid-template-columns: 1fr; }
    .pub-pied__grille { grid-template-columns: 1fr; gap: 22px; }
    .pub-section { padding: 56px 0 20px; }
    .pub-cta__panneau { padding: 36px 20px; }
    .pub-flottante--commande { left: 0; top: 30px; }
    .pub-flottante--vente { right: 0; }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pub-telephone, .pub-flottante, .pub-telephone__chat, .pub-heros__orbe { animation: none; }
    .pub-carte, .pub-temoignage, .pub-avantage, .pub-flash { animation: none; }
    .pub-bouton, .pub-carte, .pub-temoignage, .pub-avantage, .pub-etape { transition: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
}