/* ==========================================================================
   Pépito · Page d'accueil
   Couleurs, rayons et hauteurs : charte graphique Pépito (octobre 2026)
   Police : Poppins
   ========================================================================== */

:root {
    /* Marque */
    --jaune-pepito: #fbbf24;
    --ambre: #f59e0b;
    --orange-bec: #f97316;
    --jaune-doux: #fef3c7;
    --sur-jaune: #0f172a;

    /* Interface */
    --fond: #f8fafc;
    --surface: #ffffff;
    --surface-creuse: #f1f5f9;
    --trait: #e2e8f0;
    --trait-fort: #cbd5e1;
    --encre-forte: #0f172a;
    --encre: #1e293b;
    --encre-douce: #475569;
    --discret: #64748b;
    --focus: #b45309;
    --surtitre: #b45309;

    /* Argent, actions, états */
    --argent: #047857;
    --action: #047857;
    --action-survol: #065f46;
    --sur-action: #ffffff;
    --sombre: #0f172a;
    --sur-sombre: #ffffff;
    --succes-fond: #ecfdf5;
    --succes-texte: #065f46;
    --alerte-fond: #fffbeb;
    --alerte-trait: #fcd34d;
    --alerte-texte: #92400e;
    --danger: #dc2626;
    --danger-texte: #b91c1c;
    --info-fond: #f0f9ff;
    --info-trait: #bae6fd;
    --info-texte: #075985;

    /* Bloc bleu nuit (toujours sombre) */
    --nuit: #050917;
    --nuit-surface: #0d1429;
    --nuit-trait: #252f52;

    /* Formes */
    --rayon-petit: 8px;
    --rayon-champ: 12px;
    --rayon-carte: 16px;
    --rayon-bloc: 32px;
    --pilule: 9999px;

    --ombre-legere: 0 1px 2px rgb(15 23 42 / 0.06);
    --ombre-flottante: 0 12px 32px -8px rgb(15 23 42 / 0.18), 0 2px 6px rgb(15 23 42 / 0.06);

    --gouttiere: 16px;
    --largeur: 1180px;

    color-scheme: dark;
}

.dark {
    --jaune-doux: rgb(251 191 36 / 0.2);
    --sur-jaune: #050917;

    --fond: #050917;
    --surface: #0d1429;
    --surface-creuse: #19223f;
    --trait: #252f52;
    --trait-fort: #354268;
    --encre-forte: #f2f4fa;
    --encre: #e5e9f4;
    --encre-douce: #bcc4dc;
    --discret: #a0aac9;
    --focus: #fbbf24;
    --surtitre: #fbbf24;

    --argent: #34d399;
    --action: #10b981;
    --action-survol: #34d399;
    --sur-action: #04130d;
    --sombre: #f2f4fa;
    --sur-sombre: #0f172a;
    --succes-fond: rgb(52 211 153 / 0.15);
    --succes-texte: #6ee7b7;
    --alerte-fond: rgb(251 191 36 / 0.15);
    --alerte-trait: rgb(251 191 36 / 0.45);
    --alerte-texte: #fcd34d;
    --danger: #f87171;
    --danger-texte: #fca5a5;
    --info-fond: rgb(56 189 248 / 0.15);
    --info-trait: rgb(56 189 248 / 0.4);
    --info-texte: #7dd3fc;

    --nuit: #0d1429;
    --nuit-surface: #19223f;
    --nuit-trait: #354268;

    --ombre-flottante: 0 12px 32px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.4);

    color-scheme: dark;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    font-size: 16px;
    line-height: 1.6;
    color: var(--encre);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { color: var(--encre-forte); line-height: 1.15; letter-spacing: -0.02em; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }

@media (min-width: 640px) { :root { --gouttiere: 24px; } }

.saut { position: absolute; left: -9999px; top: 8px; z-index: 100; }
.saut:focus { left: 8px; background: var(--surface); padding: 8px 16px; border-radius: var(--pilule); }

/* ---------- Boutons (pilules) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 24px;
    border-radius: var(--pilule);
    font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
    border: 1px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: scale(0.97); }
.btn-principal { background: var(--action); color: var(--sur-action); box-shadow: var(--ombre-legere); }
.btn-principal:hover { background: var(--action-survol); }
.btn-sombre { background: var(--sombre); color: var(--sur-sombre); }
.btn-sombre:hover { opacity: .9; }
.btn-contour { background: var(--surface); color: var(--encre-forte); border-color: var(--trait-fort); }
.btn-contour:hover { background: var(--surface-creuse); }
.btn-discret { color: var(--encre-forte); }
.btn-discret:hover { background: var(--surface-creuse); }
.btn-grand { height: 56px; padding: 0 28px; font-size: 17px; font-weight: 700; }
.btn-petit { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-bloc { width: 100%; }

/* ---------- En-tête ---------- */
.entete {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--fond) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.entete.defile { border-bottom-color: var(--trait); }
.entete-ligne { display: flex; align-items: center; gap: 16px; height: 72px; }

.marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; color: var(--encre-forte); letter-spacing: -0.02em; }
.marque svg { width: 40px; height: 40px; }

.nav { display: none; margin-left: 24px; gap: 4px; }
.nav a { padding: 8px 14px; border-radius: var(--pilule); font-size: 15px; font-weight: 500; color: var(--encre-douce); }
.nav a:hover { color: var(--encre-forte); background: var(--surface-creuse); }

.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.entete-actions .btn-connexion, .entete-actions .btn-commencez { display: none; }

.icone-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--pilule);
    background: transparent; border: 0; color: var(--encre-douce); cursor: pointer;
}
.icone-btn:hover { background: var(--surface-creuse); color: var(--encre-forte); }
.icone-btn svg { width: 22px; height: 22px; }

.menu-mobile {
    display: none;
    border-top: 1px solid var(--trait);
    background: var(--surface);
    padding: 12px var(--gouttiere) 20px;
}
.menu-mobile.ouvert { display: block; }
.menu-mobile a.lien { display: block; padding: 12px 4px; font-weight: 500; color: var(--encre); border-bottom: 1px solid var(--trait); }
.menu-mobile .btns { display: grid; gap: 8px; margin-top: 16px; }

@media (min-width: 640px) {
    .entete-actions .btn-connexion { display: inline-flex; }
}
@media (min-width: 1024px) {
    .nav { display: flex; }
    .entete-actions .btn-commencez { display: inline-flex; }
    .btn-menu, .menu-mobile, .menu-mobile.ouvert { display: none; }
}

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
@media (min-width: 1024px) { .section { padding: 104px 0; } }

.surtitre { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--surtitre); margin-bottom: 12px; }
.titre-section { font-size: 30px; font-weight: 800; }
.chapo { margin-top: 16px; font-size: 17px; color: var(--encre-douce); max-width: 620px; }
.entete-section { max-width: 720px; margin-bottom: 48px; }
.entete-section.centre { margin-inline: auto; text-align: center; }
.entete-section.centre .chapo { margin-inline: auto; }
@media (min-width: 1024px) { .titre-section { font-size: 40px; } }

/* ---------- Héros ---------- */
.heros { padding: 32px 0 64px; }
.heros-grille { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
    .heros { padding: 56px 0 96px; }
    .heros-grille { grid-template-columns: 1.05fr 1fr; gap: 56px; }
}

.heros h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; }
.heros h1 .souligne { position: relative; white-space: nowrap; }
.heros h1 .souligne::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.06em; height: 0.32em;
    background: var(--jaune-pepito); border-radius: var(--pilule); z-index: -1; opacity: .9;
}
.heros h1 .souligne { z-index: 0; }
.heros .chapo { font-size: 18px; margin-top: 20px; }
@media (min-width: 640px) { .heros h1 { font-size: 50px; } }
@media (min-width: 1280px) { .heros h1 { font-size: 58px; } }

.heros-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.heros-btns .btn { flex: 1 1 200px; }
@media (min-width: 640px) { .heros-btns .btn { flex: 0 0 auto; } }

.heros-garanties { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; padding: 0; list-style: none; font-size: 14px; color: var(--discret); }
.heros-garanties li::before { content: "✓ "; color: var(--argent); font-weight: 700; }

/* Image du héros : Pépito seul, qui flotte */
.heros-visuel { position: relative; display: grid; place-items: center; padding: 24px 0 48px; }
.heros-visuel::before {
    content: ""; position: absolute; left: 50%; top: 44%; translate: -50% -50%;
    width: min(420px, 80%); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgb(251 191 36 / 0.22) 0%, rgb(251 191 36 / 0.06) 45%, transparent 70%);
    pointer-events: none;
}
.flotte { position: relative; width: min(340px, 72%); animation: flotte 5s ease-in-out infinite; will-change: transform; }
.flotte img { width: 100%; height: auto; filter: drop-shadow(0 24px 28px rgb(0 0 0 / 0.45)); }
.ombre-sol {
    width: min(200px, 42%); height: 18px; margin-top: 18px; border-radius: 50%;
    background: radial-gradient(ellipse, rgb(0 0 0 / 0.55) 0%, transparent 70%);
    animation: ombre 5s ease-in-out infinite;
}
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes ombre { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.78); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .flotte, .ombre-sol { animation: none; } }

/* Mobile et tablette : Pépito passe avant le texte */
@media (max-width: 1023px) {
    .heros { padding-top: 8px; }
    .heros-grille { gap: 8px; }
    .heros-visuel { order: -1; padding: 8px 0 16px; }
    .flotte { width: min(220px, 58%); }
    .ombre-sol { margin-top: 12px; }
}

.plus { color: var(--argent); }
.moins { color: var(--danger); }

/* ---------- Bande « Pour qui » ---------- */
.bande { padding: 28px 0; border-block: 1px solid var(--trait); background: var(--surface); }
.bande-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.bande-titre { font-size: 14px; font-weight: 600; color: var(--discret); margin-right: 8px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.pastille {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px;
    border-radius: var(--pilule);
    background: var(--surface-creuse); color: var(--encre);
    font-size: 14px; font-weight: 500;
}

/* ---------- Questions du comptoir ---------- */
.questions-grille { display: grid; gap: 16px; }
@media (min-width: 900px) { .questions-grille { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 20px; }
@media (min-width: 640px) { .carte { padding: 24px; } }

.question .q { font-size: 19px; font-weight: 700; color: var(--encre-forte); line-height: 1.35; }
.question .q::before { content: "«\00a0"; color: var(--ambre); }
.question .q::after { content: "\00a0»"; color: var(--ambre); }
.question .r { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--trait-fort); color: var(--encre-douce); font-size: 15px; }
.question .r strong { color: var(--encre-forte); }

/* ---------- Fonctionnalités ---------- */
.fonctions { display: grid; gap: 16px; }
@media (min-width: 640px) { .fonctions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fonctions { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.fonction h3 { font-size: 17px; font-weight: 700; margin-top: 16px; letter-spacing: -0.01em; }
.fonction p { margin-top: 6px; font-size: 15px; color: var(--encre-douce); }
.fonction .badge { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--discret); background: var(--surface-creuse); border-radius: var(--pilule); padding: 2px 10px; }

.emoji {
    display: inline-grid; place-items: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--jaune-doux); font-size: 26px; line-height: 1;
}

/* ---------- Démonstrations ---------- */
.demo { display: grid; gap: 40px; align-items: center; }
.demo + .demo { margin-top: 80px; }
@media (min-width: 1024px) {
    .demo { grid-template-columns: 1fr 1fr; gap: 72px; }
    .demo.inverse .demo-texte { order: 2; }
}
.demo-texte h3 { font-size: 28px; font-weight: 800; }
@media (min-width: 1024px) { .demo-texte h3 { font-size: 34px; } }
.demo-texte .chapo { font-size: 16px; }

.etapes { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; counter-increment: etape; }
.etapes li::before {
    content: counter(etape);
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--sombre); color: var(--sur-sombre);
    font-weight: 700; font-size: 15px;
}
.etapes strong { display: block; color: var(--encre-forte); font-weight: 600; }
.etapes span { color: var(--encre-douce); font-size: 15px; }

/* Maquette d'écran */
.ecran {
    background: var(--surface-creuse);
    border-radius: 28px;
    padding: 16px;
    border: 1px solid var(--trait);
}
@media (min-width: 640px) { .ecran { padding: 24px; } }
.ecran-pile { display: grid; gap: 12px; }

.ecran .titre-carte { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.ecran .titre-carte strong { color: var(--encre-forte); font-weight: 600; }
.ecran .titre-carte small { font-size: 12px; color: var(--discret); white-space: nowrap; }
.ecran .aide { font-size: 14px; color: var(--encre-douce); margin-top: 4px; }

.lignes-vente { display: grid; gap: 8px; margin-top: 14px; }
.ligne-vente {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--trait); border-radius: var(--rayon-champ);
    padding: 10px 12px; font-size: 14px; background: var(--surface);
}
.ligne-vente .case { width: 20px; height: 20px; border-radius: 6px; background: var(--action); color: var(--sur-action); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.ligne-vente .libelle { flex: 1; min-width: 0; color: var(--encre); }
.ligne-vente .prix { font-weight: 700; color: var(--encre-forte); }
.ligne-vente.incertaine { border-color: var(--alerte-trait); background: var(--alerte-fond); }

.message { border-radius: var(--rayon-champ); padding: 12px 14px; font-size: 14px; line-height: 1.5; border: 1px solid transparent; }
.message-info { background: var(--info-fond); color: var(--info-texte); border-color: var(--info-trait); }
.message-succes { background: var(--succes-fond); color: var(--succes-texte); }
.message-alerte { background: var(--alerte-fond); color: var(--alerte-texte); border-color: var(--alerte-trait); }

.faux-bouton {
    display: flex; align-items: center; justify-content: center;
    height: 56px; border-radius: var(--pilule);
    background: var(--action); color: var(--sur-action);
    font-weight: 700; font-size: 16px;
    box-shadow: var(--ombre-legere);
}

.chiffres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.chiffres .etiquette { font-size: 13px; color: var(--discret); }
.chiffres .xl { font-size: 36px; font-weight: 800; color: var(--encre-forte); letter-spacing: -0.02em; line-height: 1.1; }
.chiffres .xl small { font-size: 16px; color: var(--discret); }
.chiffres .moyen { font-size: 20px; font-weight: 700; line-height: 1.3; }

.objectif .barre { height: 10px; border-radius: var(--pilule); background: var(--surface-creuse); margin-top: 10px; overflow: hidden; }
.objectif .barre span { display: block; height: 100%; width: 68%; background: var(--action); border-radius: inherit; }
.objectif .bas { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--discret); }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: var(--pilule); font-size: 13px; font-weight: 500; }
.puce-ok { background: var(--succes-fond); color: var(--succes-texte); }
.puce-essai { background: var(--alerte-fond); color: var(--alerte-texte); }
.puce-neutre { background: var(--surface-creuse); color: var(--encre); }

/* ---------- Comment ça marche ---------- */
.marche { background: var(--surface); border-block: 1px solid var(--trait); }
.marche-grille { display: grid; gap: 16px; counter-reset: pas; }
@media (min-width: 900px) { .marche-grille { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.pas { position: relative; padding: 28px 24px; border-radius: var(--rayon-carte); background: var(--fond); border: 1px solid var(--trait); }
.pas .numero { font-size: 15px; font-weight: 700; color: var(--surtitre); }
.pas h3 { font-size: 20px; font-weight: 700; margin-top: 8px; }
.pas p { margin-top: 8px; color: var(--encre-douce); font-size: 15px; }
.pas .duree { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--succes-texte); background: var(--succes-fond); border-radius: var(--pilule); padding: 4px 12px; }

/* ---------- Confiance (bloc bleu nuit) ---------- */
.nuit { background: var(--nuit); color: #e5e9f4; border-radius: var(--rayon-bloc); padding: 40px 20px; }
@media (min-width: 640px) { .nuit { padding: 56px 48px; } }
.nuit .surtitre { color: #fbbf24; }
.nuit .titre-section { color: #f2f4fa; }
.nuit .chapo { color: #bcc4dc; }
.confiance { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 640px) { .confiance { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .confiance { grid-template-columns: repeat(3, 1fr); } }
.confiance .item { background: var(--nuit-surface); border: 1px solid var(--nuit-trait); border-radius: var(--rayon-carte); padding: 20px; }
.confiance .item .emoji { background: rgb(251 191 36 / 0.2); width: 44px; height: 44px; font-size: 22px; }
.confiance h3 { color: #f2f4fa; font-size: 16px; font-weight: 600; margin-top: 14px; }
.confiance p { color: #bcc4dc; font-size: 14px; margin-top: 6px; }

/* ---------- Tarifs ---------- */
.tarifs { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .tarifs { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.offre { display: flex; flex-direction: column; padding: 28px 24px; }
.offre.vedette { border: 2px solid var(--jaune-pepito); position: relative; }
.offre .ruban {
    position: absolute; top: -14px; left: 24px;
    background: var(--jaune-pepito); color: var(--sur-jaune);
    font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: var(--pilule);
}
.offre h3 { font-size: 18px; font-weight: 700; }
.offre .prix { margin-top: 16px; font-size: 42px; font-weight: 800; color: var(--encre-forte); letter-spacing: -0.03em; line-height: 1; }
.offre .prix small { font-size: 16px; font-weight: 500; color: var(--discret); letter-spacing: 0; }
.offre .sous-prix { margin-top: 8px; font-size: 14px; color: var(--discret); min-height: 22px; }
.offre .sous-prix.economie { color: var(--argent); font-weight: 600; }
.offre ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 10px; font-size: 15px; color: var(--encre); }
.offre li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.offre li::before { content: "✓"; color: var(--argent); font-weight: 700; }
.offre .btn { margin-top: auto; }
.note-tarifs { margin-top: 24px; text-align: center; color: var(--discret); font-size: 14px; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte); }
.faq summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; font-weight: 600; color: var(--encre-forte); font-size: 16px;
    min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; flex: none;
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface-creuse); color: var(--encre-forte); font-size: 20px; font-weight: 500;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 20px 20px; color: var(--encre-douce); font-size: 15px; }

/* ---------- Appel final ---------- */
.appel { position: relative; overflow: hidden; background: var(--jaune-pepito); color: var(--sur-jaune); border-radius: var(--rayon-bloc); padding: 40px 24px; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .appel { grid-template-columns: auto 1fr auto; padding: 48px 56px; gap: 40px; } }
.appel .logo-appel { width: 128px; height: 128px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px rgb(255 255 255 / 0.35); }
.appel .logo-appel svg { width: 96px; height: 96px; }
.appel h2 { color: var(--sur-jaune); font-size: 28px; font-weight: 800; }
@media (min-width: 1024px) { .appel h2 { font-size: 34px; } }
.appel p { margin-top: 8px; color: #422006; font-size: 16px; }
.appel .btns { display: flex; flex-wrap: wrap; gap: 12px; }
.appel .btn-principal { background: #047857; color: #fff; }
.appel .btn-principal:hover { background: #065f46; }
.appel .btn-contour { background: transparent; color: #0f172a; border-color: rgb(15 23 42 / 0.35); }
.appel .btn-contour:hover { background: rgb(255 255 255 / 0.35); }
.appel > * { position: relative; z-index: 1; }

/* ---------- Pied de page ---------- */
.pied { padding: 56px 0 32px; border-top: 1px solid var(--trait); background: var(--surface); margin-top: 72px; }
.pied-grille { display: grid; gap: 32px; }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pied p { color: var(--encre-douce); font-size: 15px; margin-top: 12px; max-width: 340px; }
.pied h4 { font-size: 14px; font-weight: 600; color: var(--encre-forte); margin-bottom: 12px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.pied ul a { display: inline-block; padding: 4px 0; color: var(--encre-douce); font-size: 15px; }
.pied ul a:hover { color: var(--encre-forte); }
.pied-bas { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--discret); }

/* ---------- Pépito, l'assistant (bouton flottant + fenêtre de discussion) ---------- */
.pg { position: relative; z-index: 60; }

/* Bouton : disque jaune 60 px + auréole qui grandit et s'efface en boucle (comme dans l'application) */
.pg-lanceur {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 62;
    width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: var(--jaune-pepito); color: #0f172a;
    display: grid; place-items: center;
    box-shadow: var(--ombre-flottante);
    transition: transform .1s, background-color .15s;
}
.pg-lanceur:hover { background: #fcd34d; }
.pg-lanceur:active { transform: scale(0.95); }
.pg-aureole {
    position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid var(--jaune-pepito);
    animation: pg-aureole 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes pg-aureole { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.pg-disque { display: grid; place-items: center; }
.pg-disque svg { width: 44px; height: 44px; }
.pg-croix { display: none; font-size: 22px; font-weight: 700; line-height: 1; }
.pg.ouvert .pg-aureole, .pg.ouvert .pg-disque { display: none; }
.pg.ouvert .pg-croix { display: block; }

/* Invitation (première visite) */
.pg-invite {
    position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 61;
    max-width: 260px; padding: 14px 40px 14px 16px;
    background: var(--surface); color: var(--encre); border: 1px solid var(--trait);
    border-radius: var(--rayon-carte); box-shadow: var(--ombre-flottante);
    font-size: 14px; line-height: 1.45;
}
.pg-invite p + p { margin-top: 2px; color: var(--encre-douce); }
.pg-invite strong { color: var(--encre-forte); }
.pg-invite-fermer {
    position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: transparent; color: var(--discret); cursor: pointer; font-size: 14px;
}
.pg-invite-fermer:hover { background: var(--surface-creuse); color: var(--encre-forte); }

/* Fenêtre : feuille du bas sur téléphone, panneau à droite sur ordinateur */
.pg-fond { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 0.6); }
.pg-panel {
    position: fixed; z-index: 61; left: 0; right: 0; bottom: 0;
    height: 88dvh; max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--trait);
    border-radius: 24px 24px 0 0; overflow: hidden;
    box-shadow: var(--ombre-flottante);
    padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }
/* Téléphone : la fenêtre a sa propre croix, le bouton rond ne doit pas cacher le champ */
@media (max-width: 639px) { .pg.ouvert .pg-lanceur { display: none; } }
@media (min-width: 640px) {
    .pg-lanceur { right: 24px; bottom: 24px; }
    .pg-invite { right: 24px; bottom: 100px; }
    .pg-panel { left: auto; right: 24px; bottom: 100px; width: 384px; height: 580px; max-height: calc(100vh - 128px); border-radius: 24px; padding-bottom: 0; }
    .pg-fond { display: none !important; }
}

.pg-entete { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--trait); background: rgb(251 191 36 / 0.1); flex: none; }
.pg-entete-logo svg { width: 40px; height: 40px; }
.pg-entete-texte { flex: 1; min-width: 0; }
.pg-entete h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.pg-entete p { font-size: 12px; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-icone, .pg-nouvelle { border: 0; background: transparent; color: var(--encre-douce); cursor: pointer; border-radius: var(--pilule); font: inherit; }
.pg-icone { width: 40px; height: 40px; font-size: 16px; flex: none; }
.pg-nouvelle { height: 36px; padding: 0 10px; font-size: 12px; font-weight: 600; flex: none; }
.pg-icone:hover, .pg-nouvelle:hover { background: var(--surface-creuse); color: var(--encre-forte); }

.pg-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--fond); }
.pg-msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.pg-bot { align-self: flex-start; background: var(--surface); color: var(--encre); border: 1px solid var(--trait); border-top-left-radius: 6px; }
.pg-moi { align-self: flex-end; background: var(--jaune-pepito); color: #0f172a; border-top-right-radius: 6px; white-space: pre-wrap; }
.pg-bot p { margin: 0 0 8px; } .pg-bot p:last-child { margin-bottom: 0; }
.pg-bot ul, .pg-bot ol { margin: 0 0 8px; padding-left: 20px; } .pg-bot li + li { margin-top: 4px; }
.pg-bot strong { color: var(--encre-forte); font-weight: 600; }
.pg-bot a { color: var(--jaune-pepito); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.pg-bot em { color: var(--discret); }

.pg-sugg { display: grid; gap: 8px; padding-left: 4px; }
.pg-sugg button {
    text-align: left; font: inherit; font-size: 14px; cursor: pointer;
    padding: 10px 14px; border-radius: var(--rayon-champ);
    background: var(--surface); color: var(--encre); border: 1px solid var(--trait-fort);
}
.pg-sugg button:hover { border-color: var(--jaune-pepito); background: rgb(251 191 36 / 0.08); }

.pg-attente { display: flex; align-items: center; gap: 10px; color: var(--discret); }
.pg-points { display: inline-flex; gap: 4px; color: var(--jaune-pepito); }
.pg-points i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pg-points 1.2s infinite ease-in-out; }
.pg-points i:nth-child(2) { animation-delay: .15s; } .pg-points i:nth-child(3) { animation-delay: .3s; }
@keyframes pg-points { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

.pg-erreur { margin: 0 12px 8px; padding: 10px 12px; border-radius: var(--rayon-champ); background: rgb(248 113 113 / 0.15); color: var(--danger-texte); font-size: 13px; flex: none; }

.pg-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--trait); flex: none; }
.pg-form textarea {
    flex: 1; min-width: 0; resize: none; min-height: 44px; max-height: 120px;
    padding: 10px 16px; border-radius: 22px;
    background: var(--surface-creuse); color: var(--encre-forte); border: 1px solid var(--trait-fort);
    font: inherit; font-size: 16px; line-height: 1.4;
}
.pg-form textarea::placeholder { color: var(--discret); }
.pg-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.pg-envoyer { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; cursor: pointer; background: var(--action); color: var(--sur-action); display: grid; place-items: center; }
.pg-envoyer svg { width: 20px; height: 20px; }
.pg-form.occupe .pg-envoyer { opacity: .5; cursor: wait; }
.pg-note { padding: 0 16px 10px; font-size: 11px; color: var(--discret); text-align: center; flex: none; }
.pg-note a { color: var(--encre-douce); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .pg-aureole { animation-duration: 4s; } .pg-points i { animation: none; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn:active { transform: none; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-tete { padding-top: 48px; }
.grille-articles { display: grid; gap: 20px; }
@media (min-width: 640px) { .grille-articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grille-articles { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.carte-article { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte); overflow: hidden; transition: border-color .15s; }
.carte-article:hover { border-color: var(--trait-fort); }
.carte-article-image { display: block; aspect-ratio: 1200 / 630; background: var(--surface-creuse); overflow: hidden; }
.carte-article-image > img { width: 100%; height: 100%; object-fit: cover; }
.carte-article-vide { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 60%, rgb(251 191 36 / 0.22), transparent 65%), var(--surface-creuse); }
.carte-article-vide img { width: 30%; height: auto; }
.carte-article-texte { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.carte-article-meta { font-size: 13px; color: var(--discret); }
.carte-article h3 { margin-top: 8px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.carte-article h3 a:hover { color: var(--jaune-pepito); }
.carte-article-resume { margin-top: 8px; font-size: 15px; color: var(--encre-douce); }
.carte-article-lien { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--jaune-pepito); }

.blog-vide { text-align: center; padding: 48px 24px; }
.blog-vide img { margin: 0 auto 16px; }
.blog-vide .q { font-size: 19px; font-weight: 700; color: var(--encre-forte); }
.blog-vide p + p { margin-top: 6px; color: var(--encre-douce); }

.pagination-blog { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.pagination-blog-num { font-size: 14px; color: var(--discret); }
.btn.desactive { opacity: .4; pointer-events: none; }

.blog-accueil-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.blog-accueil-tete .entete-section { margin-bottom: 0; }

/* Article */
.article { padding-top: 32px; padding-bottom: 0; }
.article-conteneur { max-width: 760px; }
.article-apercu { margin-bottom: 24px; }
.article-apercu a { text-decoration: underline; font-weight: 600; }
.article-retour { display: inline-block; font-size: 14px; font-weight: 600; color: var(--encre-douce); padding: 8px 0; }
.article-retour:hover { color: var(--encre-forte); }
.article-entete { margin-top: 16px; }
.article-entete h1 { margin-top: 10px; font-size: 32px; font-weight: 800; letter-spacing: -0.025em; }
@media (min-width: 640px) { .article-entete h1 { font-size: 42px; } }
.article-entete .chapo { font-size: 19px; }
.article-couverture { width: 100%; margin-top: 32px; border-radius: 24px; aspect-ratio: 1200 / 630; object-fit: cover; }

.article-corps { margin-top: 32px; font-size: 17px; line-height: 1.75; color: var(--encre); }
.article-corps > * + * { margin-top: 1.1em; }
.article-corps h2 { margin-top: 1.8em; font-size: 26px; font-weight: 800; }
.article-corps h3 { margin-top: 1.5em; font-size: 21px; font-weight: 700; }
.article-corps a { color: var(--jaune-pepito); text-decoration: underline; text-underline-offset: 3px; }
.article-corps strong { color: var(--encre-forte); font-weight: 600; }
.article-corps ul, .article-corps ol { padding-left: 1.4em; }
.article-corps li + li { margin-top: .4em; }
.article-corps li::marker { color: var(--jaune-pepito); }
.article-corps blockquote { margin-left: 0; padding: 16px 20px; border-left: 4px solid var(--jaune-pepito); background: rgb(251 191 36 / 0.08); border-radius: 0 var(--rayon-champ) var(--rayon-champ) 0; color: var(--encre-forte); }
.article-corps img { border-radius: var(--rayon-carte); }
.article-corps code { background: var(--surface-creuse); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.article-corps hr { border: 0; border-top: 1px solid var(--trait); }

.article-partage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--trait); }
.article-partage span { font-size: 14px; font-weight: 600; color: var(--discret); margin-right: 4px; }

/* Bouton de langue FR / EN */
.langue { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; border-radius: var(--pilule); font-size: 13px; font-weight: 600; color: var(--encre-douce); }
.langue:hover { background: var(--surface-creuse); color: var(--encre-forte); }
.langue svg { width: 16px; height: 16px; }
.carte-article-langue { color: var(--surtitre); font-weight: 600; }
/* Guillemets anglais pour la version anglaise */
:lang(en) .question .q::before { content: "\201C"; }
:lang(en) .question .q::after { content: "\201D"; }