/* =============================================================================
   MonCoachCommercial - Tunnel public CSS (Sprint 6)
   Feuille de style dédiée au tunnel public, séparée de admin.css (Sprint 5)
   pour que les deux évoluent indépendamment.
   Inspirations : Apple, Stripe, Linear, Notion, Vercel, Framer.
   Style : premium, minimaliste, animations discrètes, excellente lisibilité.
   ============================================================================= */

:root {
    /* Palette officielle "Cuivre Cognac" (Sprint 3C, calibrée) : le cuivre est
       l'accent de marque (rare, réservé aux décisions/CTA/repères), le marine
       reste la couleur structurelle des surfaces sombres — la marque ne
       devient pas "brune" : elle reste éditoriale, avec un accent chaud. */
    --pub-bg: #fdfaf6;
    --pub-bg-alt: #f0e6da;
    --pub-text: #201a14;
    --pub-text-muted: #6f6255;
    --pub-accent: #a96230;
    --pub-accent-hover: #814a22;
    --pub-accent-soft: #f6e8da;
    --pub-surface-dark: #0b1f3a;
    /* Harmonisation visuelle 2026-08, Lot 2 : fond clair teinté marine, sur
       le même principe que --pub-accent-soft/--pub-success-bg — comblait un
       manque réel (aucune version "douce" de --pub-surface-dark n'existait
       jusqu'ici), nécessaire pour recolorer le rapport de diagnostic v3
       (icônes "opportunité" sur fond clair, jamais sur le navy plein). */
    --pub-surface-dark-soft: #e7e9ee;
    --pub-success: #1e7d34;
    --pub-success-bg: #e6f4ea;
    --pub-danger: #a31515;
    --pub-danger-bg: #fdecea;
    --pub-border: #e3d7c8;
    --pub-hairline: rgba(32, 26, 20, 0.08);
    --pub-radius: 14px;
    --pub-radius-lg: 20px;
    --pub-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 6px 16px rgba(10, 10, 10, 0.05);
    --pub-shadow-lg: 0 2px 4px rgba(10, 10, 10, 0.05), 0 20px 48px rgba(10, 10, 10, 0.10);
    --pub-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pub-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
    --pub-grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
    --pub-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --pub-container: 1120px;
    --pub-container-narrow: 720px;

    /* Harmonisation visuelle 2026-08, Lot 1 : seul accent distinct de
       --pub-accent qui survit à la fusion des palettes --hero-*/--booking-*
       ci-dessous — un anneau de focus copper (--pub-accent-hover, très
       sombre) n'offrirait pas un contraste suffisant sur les panneaux
       --pub-surface-dark (navy) du Hero/header ni sur les boutons copper du
       parcours réservation. Double usage légitime, jamais fusionné dans
       --pub-accent : (1) anneau de focus sur fond sombre/copper, (2) petits
       accents décoratifs (ex: coche de récap) sur fond --pub-surface-dark où
       le copper manquerait de contraste. Le reste du site continue
       d'utiliser var(--pub-accent) comme anneau de focus (règle globale
       existante, fond clair). */
    --pub-focus-strong: #f0c453;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--pub-font);
    color: var(--pub-text);
    background-color: var(--pub-bg);
    background-image: var(--pub-grain);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    /* Harmonisation visuelle 2026-08, Lot 3 : garde-fou pour les sections en
       pleine largeur (.pub-booking, .pub-offre-breakout, .v3report) — leur
       technique "100vw" (left:50%/transform ou margin:calc(50% - 50vw)) peut
       déborder de quelques pixels selon la largeur réelle de la barre de
       défilement du navigateur, créant une barre de défilement horizontale
       indésirable. Le contenu de la page ne dépasse jamais intentionnellement
       du viewport, donc cacher le débordement horizontal ne masque rien. */
    overflow-x: hidden;
}

a {
    color: var(--pub-accent);
}

img {
    max-width: 100%;
    display: block;
}

.pub-container {
    max-width: var(--pub-container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.pub-container--narrow {
    max-width: var(--pub-container-narrow);
}

h1, h2, h3 {
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; font-weight: 600; }

/* Repère éditorial discret devant les titres de section (Hero exclu : il n'a
   pas de h2). Reprend le langage visuel du kicker du Hero (petit trait
   d'accent) pour créer une filiation visuelle entre le Hero et le corps
   de page, sans transformer les titres en affiches. */
.pub-section h2::before {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    margin: 0 0 1.1rem;
    background-color: var(--pub-accent);
    border-radius: 2px;
}

.pub-section h2.pub-text-center::before,
.pub-section .pub-text-center h2::before {
    margin-left: auto;
    margin-right: auto;
}

p {
    margin: 0 0 1rem;
}

.pub-text-muted {
    color: var(--pub-text-muted);
}

.pub-text-center {
    text-align: center;
}

/* --- Header / Nav (layout "main") --- */

/* Harmonisation visuelle 2026-08, Lot 1 : utilisait auparavant une palette
   --hero-* distincte de --pub-*, désormais fusionnée (voir :root et le
   commentaire du bloc .pub-booking). Ce header (Layouts/main.php) n'est PAS
   partagé avec Confirmation/Préparation, qui étendent Layouts/tunnel.php et
   son propre .pub-tunnel-header — correction d'un commentaire stale trouvé
   ici lors de l'audit. */
.pub-header {
    border-bottom: 1px solid var(--pub-hairline);
    background-color: var(--pub-bg-alt);
    position: sticky;
    top: 0;
    z-index: 50;
}

.pub-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    max-width: var(--pub-container);
    margin: 0 auto;
}

.pub-brand {
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    color: var(--pub-text);
}

.pub-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.pub-nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pub-nav-links a {
    color: var(--pub-text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
}

.pub-nav-links a:hover {
    color: var(--pub-accent);
}

.pub-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--pub-text);
    cursor: pointer;
}

/* CTA du header : volontairement plus discret que .pub-hero-cta (padding
   réduit) pour ne jamais concurrencer le CTA principal du Hero. */
.pub-header .pub-btn-primary {
    background-color: var(--pub-accent);
    color: var(--pub-bg);
    padding: 0.65rem 1.35rem;
    font-size: 0.88rem;
}

.pub-header .pub-btn-primary:hover {
    background-color: var(--pub-accent-hover);
}

/* Le CTA du header ("Faire mon diagnostic") a sa place dans le menu déroulant
   mobile (.pub-nav-links-cta ci-dessous) : masqué en ligne dès que la marque +
   CTA + bouton menu ne tiennent plus ensemble sur une largeur étroite (bug de
   débordement horizontal corrigé — passe de finition préproduction). Le lien
   reste accessible via le menu, jamais supprimé. */
@media (max-width: 560px) {
    .pub-btn.pub-header-cta {
        display: none;
    }
}

.pub-nav-links-cta {
    display: none;
}

@media (max-width: 767px) {
    .pub-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--pub-bg-alt);
        border-bottom: 1px solid var(--pub-hairline);
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 1.5rem 1rem;
    }

    .pub-nav-links.is-open {
        display: flex;
    }

    .pub-nav-links a {
        padding: 0.6rem 0;
    }

    .pub-nav-toggle {
        display: block;
    }
}

@media (max-width: 560px) {
    .pub-nav-links-cta {
        display: block;
        margin-top: 0.4rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--pub-hairline);
    }

    .pub-nav-links-cta a {
        display: inline-block;
        padding: 0.5rem 1rem !important;
        background-color: var(--pub-accent);
        color: var(--pub-bg);
        border-radius: var(--pub-radius);
        font-weight: 600;
    }
}

/* --- Minimal header (layout "tunnel", distraction-free) --- */

.pub-tunnel-header {
    border-bottom: 1px solid var(--pub-border);
    padding: 1rem 1.5rem;
}

.pub-tunnel-header-inner {
    max-width: var(--pub-container-narrow);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pub-tunnel-exit {
    color: var(--pub-text-muted);
    font-size: 0.85rem;
    text-decoration: none;
}

/* --- Footer --- */

.pub-footer {
    border-top: 1px solid var(--pub-border);
    padding: 3rem 1.5rem;
    background-color: var(--pub-bg-alt);
    margin-top: 4rem;
}

.pub-footer-inner {
    max-width: var(--pub-container);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--pub-text-muted);
}

.pub-footer-links {
    display: flex;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pub-footer-links a {
    color: var(--pub-text-muted);
    text-decoration: none;
}

.pub-footer-links a:hover {
    text-decoration: underline;
}

.pub-tunnel-footer {
    padding: 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--pub-text-muted);
}

/* --- Sections --- */

.pub-section {
    padding: 4rem 0;
}

.pub-section--alt {
    padding: 4.5rem 0;
    background-color: var(--pub-bg-alt);
    border-top: 1px solid var(--pub-hairline);
    border-bottom: 1px solid var(--pub-hairline);
}

/* --- Hero (refonte ciblée) --- */
/* Concept : "Votre savoir-faire est déjà là. Donnons-lui une direction
   commerciale." Utilise désormais les tokens --pub-* unifiés (harmonisation
   visuelle 2026-08, Lot 1) — utilisait auparavant une palette --hero-*
   dédiée et volontairement distincte, fusionnée depuis (voir :root). */

.pub-hero {
    padding: 3.5rem 0 4.5rem;
    background-color: var(--pub-bg-alt);
}

.pub-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    /* Le lien secondaire est une zone à part (pas un enfant de .pub-hero-content) :
       en desktop il reste sous le CTA dans la colonne de gauche, mais l'ordre
       mobile (voir @media 900px) le déplace après le portrait/la trajectoire,
       sans dupliquer le HTML. */
    grid-template-areas:
        "content visual"
        "link    visual";
    align-items: start;
    column-gap: 3.5rem;
    row-gap: 1.5rem;
    text-align: left;
}

.pub-hero-content {
    grid-area: content;
}

.pub-hero-kicker {
    display: inline-block;
    /* --pub-accent-hover (plus soutenu que --pub-accent) : contraste
       AA (5.3:1) sur fond ivoire à cette taille de texte. */
    color: var(--pub-accent-hover);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    margin-bottom: 1.1rem;
}

.pub-hero-content h1 {
    color: var(--pub-text);
    font-size: clamp(2.15rem, 3.6vw, 3.15rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
}

.pub-hero-lead {
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--pub-text);
    max-width: 46ch;
    margin: 0 0 1rem;
}

.pub-hero-lead--muted {
    color: var(--pub-text-muted);
    margin-bottom: 1.85rem;
}

.pub-hero-actions {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.pub-hero-cta {
    background-color: var(--pub-accent);
    color: var(--pub-bg);
    padding: 1rem 2.1rem;
    box-shadow: 0 8px 20px rgba(216, 102, 58, 0.28);
}

.pub-hero-cta:hover {
    background-color: var(--pub-accent-hover);
    box-shadow: 0 10px 24px rgba(216, 102, 58, 0.34);
}

.pub-hero-reassurance {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--pub-text-muted);
}

.pub-hero-link {
    grid-area: link;
    display: inline-block;
    align-self: start;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--pub-text);
    text-decoration: none;
    border-bottom: 1px solid var(--pub-hairline);
    padding-bottom: 0.15rem;
}

.pub-hero-link:hover {
    color: var(--pub-accent-hover);
    border-color: var(--pub-accent-hover);
}

/* --- Hero : portrait --- */

.pub-hero-visual {
    grid-area: visual;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pub-hero-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--pub-radius-lg);
    overflow: hidden;
    background-color: var(--pub-surface-dark);
    box-shadow: var(--pub-shadow-lg);
}

.pub-hero-portrait-img {
    width: 100%;
    height: 100%;
    /* object-position resserré sur le buste : jamais de coupe au niveau des
       cheveux ou du menton (contrainte explicite, voir compte rendu). */
    object-fit: cover;
    object-position: center 22%;
}

.pub-hero-portrait-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    background:
        radial-gradient(120% 90% at 50% 12%, rgba(240, 196, 83, 0.16), transparent 60%),
        var(--pub-surface-dark);
}

.pub-hero-portrait-fallback-mark {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pub-surface-dark);
    background-color: var(--pub-focus-strong);
}

.pub-hero-portrait-fallback-label {
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 253, 248, 0.75);
}

.pub-hero-portrait-fallback-label code {
    color: var(--pub-bg);
}

/* --- Hero : trajectoire (repères qui convergent vers un cap) --- */
/* Volontairement abstrait : aucune boussole, carte ou bateau. Les libellés
   (.pub-hero-trajectory-labels) restent du vrai texte, jamais masqué aux
   lecteurs d'écran — seule la ligne SVG décorative porte aria-hidden. */

.pub-hero-trajectory {
    position: relative;
    padding: 0.5rem 0 0.25rem;
}

.pub-hero-trajectory-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pub-hero-trajectory-path {
    fill: none;
    stroke: var(--pub-hairline);
    stroke-width: 1.5;
}

.pub-hero-trajectory-path:last-of-type {
    stroke: var(--pub-accent);
    stroke-width: 2;
}

.pub-hero-trajectory-point {
    fill: var(--pub-accent);
}

.pub-hero-trajectory-labels {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 6.5rem;
    max-width: 62%;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pub-text);
}

.pub-hero-trajectory-label {
    position: relative;
    padding-left: 1rem;
}

.pub-hero-trajectory-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--pub-text-muted);
}

.pub-hero-trajectory-label--3::before {
    background-color: var(--pub-accent);
}

.pub-hero-trajectory-destination {
    margin: 0.35rem 0 0;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pub-accent-hover);
}

@media (max-width: 900px) {
    .pub-hero-grid {
        grid-template-columns: 1fr;
        /* Ordre mobile demandé : contenu (kicker → titre → paragraphes → CTA →
           réassurance), puis portrait + trajectoire, puis le lien secondaire. */
        grid-template-areas:
            "content"
            "visual"
            "link";
        text-align: center;
        row-gap: 2.25rem;
    }

    .pub-hero-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .pub-hero-actions {
        justify-content: center;
    }

    .pub-hero-link {
        justify-self: center;
    }

    .pub-hero-portrait {
        max-width: 320px;
        margin: 0 auto;
    }

    .pub-hero-trajectory-labels {
        max-width: none;
        margin: 0 auto;
        text-align: left;
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .pub-hero {
        padding: 2.25rem 0 3rem;
    }

    .pub-hero-portrait {
        max-width: 240px;
    }

    .pub-hero-trajectory-labels {
        font-size: 0.8rem;
        max-width: 280px;
    }
}

/* --- Buttons (pas de composant PHP dédié : simples classes, comme dans l'admin) --- */

.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s var(--pub-ease), background-color 0.2s var(--pub-ease), box-shadow 0.2s var(--pub-ease);
}

.pub-btn:hover {
    transform: translateY(-1px);
}

.pub-btn-primary {
    background-color: var(--pub-accent);
    color: #fff;
    box-shadow: var(--pub-shadow);
}

.pub-btn-primary:hover {
    background-color: var(--pub-accent-hover);
    box-shadow: var(--pub-shadow-lg);
}

.pub-btn-secondary {
    background-color: var(--pub-bg);
    color: var(--pub-text);
    border-color: var(--pub-border);
}

.pub-btn-secondary:hover {
    background-color: var(--pub-accent-soft);
}

.pub-btn-block {
    width: 100%;
}

.pub-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* --- Cards (pas de composant PHP dédié : simples classes) --- */
/* Famille unique de cartes : .pub-card est la seule base (fond, bordure, rayon,
   ombre, padding) pour tout contenu "carte" du site public. Le Hero (refonte
   ciblée) n'utilise plus .pub-card : portrait et trajectoire ont leurs
   propres classes dédiées (voir section Hero). */

.pub-card {
    background-color: var(--pub-bg);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-lg);
    box-shadow: var(--pub-shadow);
    padding: 1.75rem;
    transition: box-shadow 0.3s var(--pub-ease);
}

@media (hover: hover) {
    .pub-card:hover {
        box-shadow: var(--pub-shadow-lg);
    }
}

.pub-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* --- Badge --- */

.pub-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--pub-accent-soft);
    color: var(--pub-accent-hover);
}

/* --- CTA banner --- */
/* Surface sombre structurelle (marine), pas l'accent cuivre : le cuivre reste
   rare, réservé au bouton et au repère devant le titre. */

.pub-cta {
    max-width: var(--pub-container-narrow);
    margin: 0 auto;
    text-align: center;
    padding: 3.5rem 2rem;
    background-color: var(--pub-surface-dark);
    background-image: var(--pub-grain-strong);
    color: #fff;
    border-radius: var(--pub-radius-lg);
    box-shadow: var(--pub-shadow-lg);
}

.pub-cta h2 {
    color: #fff;
}

.pub-cta h2::before {
    background-color: rgba(255, 255, 255, 0.55);
}

.pub-cta .pub-btn-primary {
    background-color: #fff;
    color: var(--pub-accent);
}

.pub-cta .pub-btn-primary:hover {
    background-color: var(--pub-accent-soft);
}

/* --- FAQ (accordion) --- */

.pub-faq-head {
    margin-bottom: 2rem;
    text-align: center;
}

.pub-faq-head h2 {
    margin-bottom: 0;
}

.pub-faq-head p {
    margin: 0.85rem auto 0;
    max-width: 34rem;
    color: var(--pub-text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.pub-faq-kicker {
    display: inline-block;
    margin-bottom: 0.9rem;
    color: var(--pub-accent-hover);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pub-faq-item {
    border-bottom: 1px solid var(--pub-border);
}

.pub-faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1.15rem 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--pub-text);
    font-family: inherit;
}

.pub-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    color: var(--pub-text-muted);
}

.pub-faq-item.is-open .pub-faq-answer {
    max-height: 40em;
    padding-bottom: 1.15rem;
}

.pub-faq-icon {
    transition: transform 0.2s ease;
}

.pub-faq-item.is-open .pub-faq-icon {
    transform: rotate(45deg);
}

.pub-faq-cta {
    margin-top: 2rem;
}

.pub-faq-cta p {
    margin: 0 0 1rem;
    font-weight: 700;
}

.pub-faq-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0 1.45rem;
    border-radius: 7px;
    background-color: var(--pub-accent);
    color: var(--pub-bg);
    font-weight: 800;
    text-decoration: none;
}

.pub-faq-cta-link:hover {
    background-color: var(--pub-accent-hover);
}

.pub-faq--cap {
    padding: clamp(4.1rem, 5vw, 5rem) 0;
    background-color: var(--pub-surface-dark);
    color: var(--pub-bg);
}

.pub-faq--cap .pub-container {
    max-width: 1080px;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2.75rem, 4.8vw, 4.6rem);
    align-items: start;
}

.pub-faq--cap .pub-faq-head {
    margin-bottom: 0;
    text-align: left;
}

.pub-faq--cap .pub-faq-kicker {
    color: var(--pub-accent);
}

.pub-faq--cap h2 {
    max-width: 30rem;
    margin: 0;
    color: var(--pub-bg);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.25rem, 3vw, 3.05rem);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.pub-faq--cap h2::before {
    display: none;
}

.pub-faq--cap .pub-faq-head p {
    margin: 1.25rem 0 0;
    max-width: 24rem;
    color: rgba(255, 253, 248, 0.78);
}

.pub-faq--cap .pub-faq-list {
    min-width: 0;
}

.pub-faq--cap .pub-faq-item {
    border-bottom-color: rgba(216, 102, 58, 0.46);
}

.pub-faq--cap .pub-faq-item:first-child {
    border-top: 1px solid rgba(216, 102, 58, 0.46);
}

.pub-faq--cap .pub-faq-question {
    padding: 1.05rem 0;
    color: var(--pub-bg);
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.35;
}

.pub-faq--cap .pub-faq-answer {
    color: rgba(255, 253, 248, 0.78);
}

.pub-faq--cap .pub-faq-answer p {
    margin: 0;
    font-size: clamp(0.95rem, 1vw, 1rem);
    line-height: 1.62;
}

.pub-faq--cap .pub-faq-item.is-open .pub-faq-answer {
    padding-bottom: 1.05rem;
}

.pub-faq--cap .pub-faq-icon {
    color: var(--pub-accent);
    font-size: 1.25rem;
    line-height: 1;
}

.pub-faq--cap .pub-faq-cta {
    margin-top: 1.7rem;
}

.pub-faq--cap .pub-faq-cta p {
    color: var(--pub-bg);
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.45;
}

.pub-faq--cap .pub-faq-cta-link {
    min-height: 3.3rem;
    background-color: transparent;
    border: 1px solid var(--pub-accent);
    color: var(--pub-bg);
}

.pub-faq--cap .pub-faq-cta-link:hover {
    background-color: var(--pub-accent);
    border-color: var(--pub-accent);
}

@media (max-width: 820px) {
    .pub-faq--cap .pub-container {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }

    .pub-faq--cap h2 {
        max-width: 36rem;
        font-size: clamp(2.1rem, 8vw, 2.85rem);
    }
}

/* --- CTA final accueil --- */

.pub-final-cta {
    padding-block: clamp(5.6rem, 8vw, 8.8rem);
    background-color: var(--pub-bg);
    color: var(--pub-surface-dark);
}

.pub-final-cta__layout {
    width: min(90%, 1080px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
    gap: clamp(3.75rem, 7vw, 7rem);
    align-items: center;
}

.pub-final-cta__head {
    position: relative;
    padding-left: clamp(1.85rem, 2.4vw, 2.45rem);
}

.pub-final-cta__head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0.15rem;
    width: 2px;
    background-color: var(--pub-accent);
}

.pub-final-cta__kicker {
    display: block;
    margin-bottom: clamp(1.2rem, 1.7vw, 1.6rem);
    color: var(--pub-accent-hover);
    font-size: clamp(0.8rem, 0.9vw, 0.95rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pub-final-cta h2 {
    max-width: 48rem;
    margin: 0;
    color: var(--pub-surface-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.85rem, 4.35vw, 4.85rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 400;
}

.pub-final-cta h2::before {
    display: none;
}

.pub-final-cta__action {
    min-width: 0;
}

.pub-final-cta__offer {
    margin: 0;
    color: var(--pub-surface-dark);
    font-size: clamp(1.05rem, 1.25vw, 1.22rem);
    line-height: 1.5;
    font-weight: 600;
}

.pub-final-cta__price {
    display: flex;
    align-items: baseline;
    gap: 0.38em;
    margin: clamp(1.25rem, 1.65vw, 1.65rem) 0 0;
    color: var(--pub-surface-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.1rem, 4.1vw, 4.45rem);
    line-height: 1;
    white-space: nowrap;
}

.pub-final-cta__price span:first-child {
    font-weight: 400;
}

.pub-final-cta__price span:nth-child(2) {
    font-family: inherit;
    font-size: 0.55em;
    font-weight: 700;
}

.pub-final-cta__price span:nth-child(3) {
    font-family: var(--font-sans, inherit);
    font-size: 0.28em;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.pub-final-cta__button {
    display: inline-flex;
    width: 100%;
    min-height: clamp(4rem, 4.5vw, 4.5rem);
    margin-top: clamp(1.9rem, 2.25vw, 2.35rem);
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background-color: var(--pub-accent);
    color: var(--pub-bg);
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.pub-final-cta__button:hover {
    background-color: var(--pub-accent-hover);
    transform: translateY(-1px);
}

.pub-final-cta__button:active {
    transform: translateY(0);
}

.pub-final-cta__button:focus-visible {
    outline: 3px solid var(--pub-focus-strong);
    outline-offset: 4px;
}

.pub-final-cta__microcopy {
    margin: clamp(1rem, 1.25vw, 1.2rem) 0 0;
    color: rgba(20, 42, 53, 0.68);
    font-size: clamp(0.92rem, 1vw, 1rem);
    line-height: 1.45;
}

@media (max-width: 767px) {
    .pub-final-cta {
        padding-block: 4.5rem;
    }

    .pub-final-cta__layout {
        width: min(100% - 3rem, 720px);
        grid-template-columns: 1fr;
        gap: clamp(2.75rem, 12vw, 3.5rem);
    }

    .pub-final-cta__head {
        padding-left: 1.35rem;
    }

    .pub-final-cta h2 {
        font-size: clamp(2.4rem, 11vw, 3.25rem);
        line-height: 1.04;
    }

    .pub-final-cta__price {
        font-size: clamp(3rem, 15vw, 4rem);
    }

    .pub-final-cta__button {
        min-height: 4rem;
    }
}

/* --- Timeline --- */

.pub-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pub-timeline-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.pub-timeline-index {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--pub-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

/* --- Testimonials --- */

.pub-testimonial {
    font-style: italic;
    color: var(--pub-text);
}

.pub-testimonial-author {
    margin-top: 0.75rem;
    font-style: normal;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--pub-text-muted);
}

/* --- Pricing --- */

.pub-pricing-card {
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
}

.pub-pricing-amount {
    font-size: 3rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.pub-pricing-amount small {
    font-size: 1rem;
    font-weight: 500;
    color: var(--pub-text-muted);
}

.pub-pricing-list {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    text-align: left;
}

.pub-pricing-list li {
    padding: 0.4rem 0;
}

.pub-pricing-note {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

/* --- Qui vous accompagne --- */

.pub-confiance {
    padding: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(23, 61, 82, 0.42), transparent 34rem),
        var(--pub-surface-dark);
    color: var(--pub-bg);
    border-top: 1px solid rgba(255, 253, 248, 0.08);
    border-bottom: 1px solid rgba(255, 253, 248, 0.08);
}

.pub-confiance .pub-container {
    max-width: 1080px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

.pub-confiance-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(330px, 0.84fr);
    grid-template-areas:
        "head visual"
        "content visual"
        "content signature";
    align-items: start;
    column-gap: clamp(2.75rem, 4.5vw, 4.25rem);
    row-gap: clamp(1rem, 1.8vw, 1.8rem);
    text-align: left;
}

.pub-confiance-head {
    grid-area: head;
}

.pub-confiance-content {
    grid-area: content;
    margin-top: clamp(-0.9rem, -0.8vw, -0.55rem);
}

.pub-confiance-kicker {
    display: inline-block;
    margin-top: clamp(3.4rem, 4.5vw, 4.5rem);
    color: var(--pub-accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.pub-confiance h2 {
    max-width: 43rem;
    margin: 1.55rem 0 1.45rem;
    color: var(--pub-bg);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.45rem, 3vw, 3.25rem);
    line-height: 1.02;
    font-weight: 400;
}

.pub-confiance h2::before {
    background-color: var(--pub-accent);
}

.pub-confiance h2 span {
    color: var(--pub-accent);
}

.pub-confiance-intro {
    max-width: 35rem;
    margin: 0;
    color: rgba(255, 253, 248, 0.9);
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    line-height: 1.55;
}

.pub-confiance-principles {
    max-width: 39rem;
    margin-top: 0;
    border-top: 0;
}

.pub-confiance-principle {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: 0 clamp(1.6rem, 2.4vw, 2.35rem);
    align-items: start;
    padding: 0.55rem 0 0.62rem;
    border-bottom: 0;
}

.pub-confiance-principle::before {
    content: '';
    width: 3.85rem;
    height: 1px;
    margin-top: 0.65rem;
    background-color: rgba(240, 196, 83, 0.72);
}

.pub-confiance-principle h3 {
    margin: 0;
    color: var(--pub-bg);
    font-size: clamp(0.92rem, 1vw, 1rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pub-confiance-principle p {
    grid-column: 2;
    margin: 0.4rem 0 0;
    max-width: 40rem;
    color: rgba(255, 253, 248, 0.84);
    font-size: clamp(0.9rem, 0.98vw, 1rem);
    line-height: 1.38;
}

.pub-confiance-manifesto {
    max-width: 43rem;
    margin: clamp(2.75rem, 3.5vw, 3.5rem) 0 clamp(2.7rem, 4vw, 3.7rem);
    color: var(--pub-bg);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.85rem, 2.35vw, 2.65rem);
    line-height: 1.12;
    font-weight: 400;
}

.pub-confiance-visual {
    grid-area: visual;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 0;
}

.pub-confiance-photo {
    width: 100%;
    aspect-ratio: 680 / 755;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2rem;
    text-align: center;
    background-color: rgba(255, 253, 248, 0.08);
    border: 1px dashed rgba(255, 253, 248, 0.22);
}

.pub-confiance-photo--real {
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 0;
    border: none;
    object-fit: cover;
    object-position: 50% 0;
}

.pub-confiance-photo-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 253, 248, 0.78);
    line-height: 1.5;
}

.pub-confiance-photo-label code {
    font-size: 0.8rem;
}

.pub-confiance-signature-block {
    grid-area: auto;
    position: absolute;
    right: 0;
    top: calc((min(40vw, 405px) * 755 / 680) + clamp(4.9rem, 5.8vw, 6.1rem));
    width: min(40vw, 405px);
    max-width: 100%;
    margin-bottom: clamp(3rem, 4.2vw, 4.2rem);
}

.pub-confiance-signature {
    margin: 0;
    color: var(--pub-focus-strong);
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    font-weight: 700;
    line-height: 1.45;
}

.pub-confiance-byline {
    margin: 0.9rem 0 0;
    color: var(--pub-bg);
    font-size: 0.88rem;
    line-height: 1.55;
    font-weight: 500;
}

.pub-confiance-byline strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--pub-accent);
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: clamp(1.8rem, 2.5vw, 2.35rem);
    line-height: 1;
    font-weight: 400;
}

.pub-confiance-byline span {
    color: rgba(255, 253, 248, 0.66);
    font-weight: 500;
}

@media (max-width: 980px) {
    .pub-confiance .pub-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .pub-confiance-grid {
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.78fr);
        grid-template-areas:
            "head visual"
            "content visual"
            "content signature";
        align-items: start;
        gap: 2.5rem;
    }

    .pub-confiance h2 {
        font-size: clamp(2.35rem, 5.2vw, 3.25rem);
    }

    .pub-confiance-principle {
        grid-template-columns: 3.2rem minmax(0, 1fr);
        gap: 0 1rem;
    }

    .pub-confiance-content {
        margin-top: 0;
    }

    .pub-confiance-principle p {
        grid-column: 2;
        margin-top: 0.45rem;
    }

    .pub-confiance-photo--real {
        min-height: 25rem;
    }

    .pub-confiance-signature-block {
        grid-area: signature;
        position: static;
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    .pub-confiance {
        padding: 4rem 0 4.4rem;
    }

    .pub-confiance-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "visual"
            "content"
            "signature";
        gap: 2.4rem;
    }

    .pub-confiance-kicker {
        margin-top: 0;
    }

    .pub-confiance h2 {
        font-size: clamp(2.25rem, 10vw, 3.15rem);
        line-height: 1.04;
    }

    .pub-confiance-intro {
        font-size: 1.05rem;
        line-height: 1.62;
    }

    .pub-confiance-photo {
        aspect-ratio: 6 / 5;
        margin-top: 0.35rem;
    }

    .pub-confiance-photo--real {
        min-height: 0;
        max-height: none;
        object-position: 50% 18%;
    }

    .pub-confiance-principles {
        margin-top: 0;
    }

    .pub-confiance-principle {
        grid-template-columns: 3.1rem 1fr;
        gap: 0.45rem 1rem;
        padding: 1.25rem 0;
    }

    .pub-confiance-principle p {
        grid-column: 2;
        max-width: none;
    }

    .pub-confiance-manifesto {
        font-size: clamp(1.8rem, 8vw, 2.65rem);
        line-height: 1.08;
        margin-top: 2.6rem;
        margin-bottom: 0;
    }

    .pub-confiance-signature-block {
        max-width: none;
        margin-top: 0.3rem;
    }

    .pub-confiance-signature {
        font-size: 1.08rem;
    }
}

/* --- Guarantee --- */
/* Rejoint la famille .pub-card (fond, bordure, rayon, ombre, padding identiques)
   au lieu d'un fond vert isolé, pour ne plus détonner visuellement du reste
   des cartes de la page. La disposition icône + texte reste spécifique. */

.pub-guarantee {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background-color: var(--pub-bg);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-lg);
    box-shadow: var(--pub-shadow);
    padding: 1.75rem;
    transition: box-shadow 0.3s var(--pub-ease);
}

@media (hover: hover) {
    .pub-guarantee:hover {
        box-shadow: var(--pub-shadow-lg);
    }
}

.pub-guarantee-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background-color: var(--pub-accent-soft);
    border-radius: 50%;
}

/* =============================================================================
   Refonte one-page — concept "du flou commercial à un cap clair"
   Nouveaux composants : motif du Hero, rail de progression, Reconnaissance,
   Chaîne commerciale, Transformation, colonnes "fait pour vous", footer en
   colonnes. Tout réutilise les tokens existants (palette Cuivre Cognac,
   rayons, ombres, cadence d'apparition .reveal) — aucune nouvelle couleur,
   aucune nouvelle police.
   ============================================================================= */

/* --- Rail de progression (desktop uniquement) --- */
/* Fine ligne verticale fixée au bord de l'écran, dont le remplissage suit la
   position de lecture — matérialise "vous avancez à mesure que vous
   descendez". Purement décoratif (aria-hidden), jamais nécessaire à la
   compréhension. Piloté par public.js ; sous prefers-reduced-motion, le
   remplissage reste statique (voir plus bas). */

.pub-progress-rail {
    display: none;
}

@media (min-width: 1200px) {
    .pub-progress-rail {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 1.5rem;
        width: 2px;
        background-color: var(--pub-hairline);
        z-index: 40;
    }

    .pub-progress-rail-fill {
        display: block;
        width: 100%;
        height: 0%;
        background-color: var(--pub-accent);
        transition: height 0.15s linear;
    }
}

/* --- Header : compact au défilement --- */

.pub-header {
    transition: box-shadow 0.25s var(--pub-ease);
}

.pub-header.is-compact {
    box-shadow: var(--pub-shadow);
}

.pub-header.is-compact .pub-header-inner {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
    .pub-header {
        transition: none;
    }
}

/* --- Reconnaissance --- */

.pub-recognition-section {
    scroll-margin-top: 5.5rem;
    padding: 5.25rem 0 5.5rem;
    background-color: var(--pub-bg);
    color: var(--pub-text);
    border-top: 1px solid var(--pub-hairline);
    border-bottom: 1px solid var(--pub-hairline);
}

.pub-recognition-section h2::before {
    background-color: var(--pub-focus-strong);
}

.pub-recognition-header {
    max-width: 900px;
}

.pub-recognition-kicker {
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pub-recognition-header h2 {
    max-width: 820px;
    color: var(--pub-text);
    font-size: clamp(2rem, 4.2vw, 3.45rem);
    line-height: 1.08;
    margin-bottom: 1.35rem;
}

.pub-recognition-header p {
    max-width: 760px;
    color: var(--pub-text-muted);
    font-size: 1.08rem;
    line-height: 1.72;
}

.pub-recognition-flow {
    position: relative;
    margin-top: 3.75rem;
    padding: 0.5rem 0 1rem;
}

.pub-recognition-line {
    position: absolute;
    inset: 0.8rem 3rem 1.2rem;
    width: calc(100% - 6rem);
    height: calc(100% - 2rem);
    pointer-events: none;
    z-index: 0;
}

.pub-recognition-line path {
    fill: none;
    stroke: var(--pub-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 14;
    opacity: 0.48;
}

.pub-recognition-list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 7rem;
    row-gap: 2rem;
}

.pub-recognition-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
    max-width: 500px;
    padding: 1.1rem 0;
}

.pub-recognition-item::after {
    content: '';
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: var(--pub-focus-strong);
    box-shadow: 0 0 0 0.35rem rgba(240, 196, 83, 0.16);
}

.pub-recognition-item--1,
.pub-recognition-item--3,
.pub-recognition-item--5 {
    grid-column: 1;
}

.pub-recognition-item--2,
.pub-recognition-item--4 {
    grid-column: 2;
    margin-left: auto;
}

.pub-recognition-item--1 {
    grid-row: 1;
}

.pub-recognition-item--2 {
    grid-row: 2;
    transform: translateY(-1.3rem);
}

.pub-recognition-item--3 {
    grid-row: 3;
    margin-left: 4.5rem;
}

.pub-recognition-item--4 {
    grid-row: 4;
    transform: translateY(-1.7rem);
}

.pub-recognition-item--5 {
    grid-row: 5;
    margin-left: 1.5rem;
}

.pub-recognition-item--1::after { right: -2.35rem; top: 2.4rem; }
.pub-recognition-item--2::after { left: -2.7rem; top: 2.75rem; }
.pub-recognition-item--3::after { right: -2rem; top: 2.6rem; }
.pub-recognition-item--4::after { left: -2.4rem; top: 2.6rem; }
.pub-recognition-item--5::after { right: -2rem; top: 2.65rem; }

.pub-recognition-mark {
    position: relative;
    min-width: 3.1rem;
    background-color: var(--pub-bg);
    color: var(--pub-accent);
    font-size: clamp(2.45rem, 6vw, 4.9rem);
    font-weight: 700;
    line-height: 0.9;
}

.pub-recognition-copy {
    position: relative;
    margin-left: -0.35rem;
    padding: 0.15rem 0.35rem 0.25rem;
    background-color: var(--pub-bg);
}

.pub-recognition-copy h3 {
    color: var(--pub-text);
    font-size: clamp(1.12rem, 2vw, 1.35rem);
    line-height: 1.22;
    margin-bottom: 0.55rem;
}

.pub-recognition-copy p {
    color: var(--pub-text-muted);
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0;
}

.pub-recognition-closing {
    position: relative;
    margin: 4rem auto 0;
    padding: 1.45rem 0 0 2rem;
    color: var(--pub-text);
    font-size: clamp(1.08rem, 2vw, 1.28rem);
    line-height: 1.65;
    font-weight: 600;
}

.pub-recognition-closing::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.62rem;
    width: 0.55rem;
    height: calc(100% - 1.8rem);
    min-height: 3.5rem;
    border-radius: 999px;
    background-color: var(--pub-accent);
}

@media (max-width: 1024px) {
    .pub-recognition-list {
        column-gap: 4.5rem;
    }

    .pub-recognition-line {
        inset: 0.8rem 1.5rem 1.2rem;
        width: calc(100% - 3rem);
    }

    .pub-recognition-item--3,
    .pub-recognition-item--5 {
        margin-left: 0;
    }
}

@media (max-width: 760px) {
    .pub-recognition-section {
        padding: 3.5rem 0 4rem;
    }

    .pub-recognition-header h2 {
        font-size: clamp(1.85rem, 9vw, 2.45rem);
        line-height: 1.12;
    }

    .pub-recognition-header p {
        font-size: 1rem;
        line-height: 1.65;
    }

    .pub-recognition-flow {
        margin-top: 2.5rem;
        padding-left: 0;
    }

    .pub-recognition-line {
        display: none;
    }

    .pub-recognition-list {
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
        border-left: 2px solid rgba(216, 102, 58, 0.34);
        padding-left: 1.1rem;
    }

    .pub-recognition-item,
    .pub-recognition-item--2,
    .pub-recognition-item--4 {
        grid-column: auto;
        grid-row: auto;
        max-width: none;
        margin-left: 0;
        transform: none;
        padding: 0.35rem 0 0.7rem;
    }

    .pub-recognition-item::after {
        left: -1.5rem;
        top: 1.25rem;
        width: 0.65rem;
        height: 0.65rem;
        box-shadow: 0 0 0 0.28rem var(--pub-bg);
    }

    .pub-recognition-mark {
        min-width: 2.55rem;
        font-size: clamp(2rem, 14vw, 3.15rem);
    }

    .pub-recognition-copy h3 {
        font-size: 1.08rem;
    }

    .pub-recognition-closing {
        margin-top: 2.6rem;
        padding-left: 1.35rem;
        font-size: 1.02rem;
    }
}

@media (max-width: 360px) {
    .pub-recognition-item {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .pub-recognition-mark {
        min-width: 0;
        font-size: 2.15rem;
    }
}

/* --- Section 3 : direction commerciale --- */

.pub-chain-section {
    padding: 5.5rem 0 5.8rem;
    background-color: var(--pub-surface-dark);
    color: var(--pub-bg);
    border-top: 1px solid rgba(255, 253, 248, 0.08);
    border-bottom: 1px solid rgba(255, 253, 248, 0.08);
}

.pub-chain-section h2::before {
    background-color: var(--pub-accent);
}

.pub-chain-header {
    max-width: 920px;
}

.pub-chain-section > .pub-container {
    max-width: 920px;
}

.pub-chain-kicker {
    color: var(--pub-focus-strong);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pub-chain-header h2 {
    max-width: 860px;
    color: var(--pub-bg);
    font-size: clamp(2rem, 4.1vw, 3.35rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.pub-chain-intro {
    max-width: 790px;
}

.pub-chain-intro p {
    color: rgba(255, 253, 248, 0.78);
    font-size: 1.04rem;
    line-height: 1.72;
    margin-bottom: 1rem;
}

.pub-chain-path {
    position: relative;
    margin-top: 4.25rem;
    padding-top: 0.5rem;
}

.pub-chain-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 2.6rem;
    width: 100%;
    height: 12.5rem;
    pointer-events: none;
    z-index: 0;
}

.pub-chain-line path {
    fill: none;
    stroke: var(--pub-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1 13;
    opacity: 0.82;
}

.pub-chain-steps {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 4.2rem 4.8rem 4.4rem;
    column-gap: clamp(1rem, 2vw, 1.8rem);
}

.pub-chain-step {
    position: relative;
    max-width: 17rem;
}

.pub-chain-step--1 {
    grid-column: 1 / 5;
    grid-row: 1;
    align-self: end;
}

.pub-chain-step--2 {
    grid-column: 4 / 8;
    grid-row: 3;
    align-self: start;
}

.pub-chain-step--3 {
    grid-column: 8 / 13;
    grid-row: 1;
    align-self: end;
    justify-self: end;
}

.pub-chain-step-marker {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background-color: var(--pub-accent);
    color: var(--pub-bg);
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0 0 0.45rem rgba(216, 102, 58, 0.14);
}

.pub-chain-step-copy {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
}

.pub-chain-step-copy h3 {
    color: var(--pub-bg);
    font-size: clamp(1.06rem, 1.6vw, 1.22rem);
    line-height: 1.34;
    min-height: 0;
    margin: 0;
}

.pub-chain-step-copy p {
    color: rgba(255, 253, 248, 0.72);
    font-size: 0.95rem;
    line-height: 1.62;
    margin: 0;
}

.pub-chain-cap {
    position: relative;
    z-index: 1;
    width: min(100%, 37rem);
    max-width: none;
    margin: 1.5rem 0 0 auto;
    padding: 0.55rem 0.75rem 0.65rem 1.35rem;
    background-color: var(--pub-surface-dark);
}

.pub-chain-cap-point {
    position: absolute;
    left: -1.85rem;
    top: 0.55rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background-color: var(--pub-focus-strong);
    box-shadow: 0 0 0 0.55rem rgba(240, 196, 83, 0.18);
}

.pub-chain-cap-label {
    margin: 0 0 0.85rem;
    max-width: 20rem;
    color: var(--pub-focus-strong);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pub-chain-closing {
    margin: 0;
    color: var(--pub-bg);
    font-size: clamp(1.08rem, 2vw, 1.28rem);
    line-height: 1.62;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .pub-chain-path {
        margin-top: 3.6rem;
    }

    .pub-chain-steps {
        gap: 2rem;
    }
}

@media (max-width: 760px) {
    .pub-chain-section {
        padding: 4rem 0 4.4rem;
    }

    .pub-chain-header h2 {
        font-size: clamp(1.85rem, 8.2vw, 2.45rem);
        line-height: 1.12;
    }

    .pub-chain-intro p {
        font-size: 1rem;
        line-height: 1.66;
    }

    .pub-chain-path {
        min-height: 0;
        margin-top: 2.8rem;
        padding-left: 1.25rem;
    }

    .pub-chain-line {
        display: none;
    }

    .pub-chain-steps {
        display: flex;
        flex-direction: column;
        gap: 1.7rem;
        border-left: 2px solid rgba(216, 102, 58, 0.55);
        padding-left: 1.25rem;
    }

    .pub-chain-step,
    .pub-chain-step--1,
    .pub-chain-step--2,
    .pub-chain-step--3 {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        max-width: none;
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .pub-chain-step-marker {
        position: absolute;
        left: -2.45rem;
        top: 0.1rem;
        width: 1.8rem;
        height: 1.8rem;
        font-size: 0.68rem;
        box-shadow: 0 0 0 0.36rem var(--pub-surface-dark);
    }

    .pub-chain-step-copy h3 {
        font-size: 1.08rem;
        min-height: 0;
    }

    .pub-chain-cap {
        position: relative;
        right: auto;
        bottom: auto;
        max-width: none;
        margin: 2.5rem 0 0;
        padding-left: 1.25rem;
        border-left: 2px solid rgba(240, 196, 83, 0.7);
    }

    .pub-chain-cap-point {
        left: -0.65rem;
        top: 0.25rem;
        width: 1rem;
        height: 1rem;
        box-shadow: 0 0 0 0.42rem var(--pub-surface-dark);
    }
}

/* --- Méthode CAP --- */

.pub-cap-method {
    padding: clamp(4.25rem, 5vw, 5.2rem) 0;
    background-color: var(--pub-bg);
    color: var(--pub-surface-dark);
    border-top: 1px solid rgba(20, 42, 53, 0.08);
    border-bottom: 1px solid rgba(20, 42, 53, 0.08);
}

.pub-cap-method .pub-container {
    max-width: 1080px;
}

.pub-cap-method-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr);
    gap: clamp(2rem, 4.5vw, 4.25rem);
    align-items: end;
}

.pub-cap-method-kicker {
    color: var(--pub-accent-hover);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pub-cap-method h2 {
    max-width: 39rem;
    margin: 1rem 0 0;
    color: var(--pub-surface-dark);
    font-size: clamp(2.45rem, 3.25vw, 3.1rem);
    line-height: 1.02;
    font-weight: 800;
}

.pub-cap-method h2::before {
    background-color: var(--pub-accent);
}

.pub-cap-method-head p {
    margin: 0 0 0.35rem;
    color: rgba(20, 42, 53, 0.72);
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    line-height: 1.62;
}

.pub-cap-method-composition {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.08fr 0.95fr;
    align-items: end;
    gap: clamp(1.6rem, 3.5vw, 3.5rem);
    margin-top: clamp(3rem, 4.6vw, 4rem);
}

.pub-cap-method-composition::before {
    content: '';
    position: absolute;
    left: 55%;
    top: 54%;
    width: clamp(1.8rem, 3.8vw, 3rem);
    height: clamp(1.8rem, 3.8vw, 3rem);
    transform: translate(-50%, -50%) rotate(-8deg);
    background-color: rgba(240, 196, 83, 0.24);
    z-index: 0;
}

.pub-cap-method-movement {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.pub-cap-method-movement--1 {
    padding-bottom: clamp(0.7rem, 2.2vw, 1.55rem);
}

.pub-cap-method-movement--2 {
    align-self: start;
}

.pub-cap-method-movement--3 {
    padding-bottom: clamp(1.35rem, 3.4vw, 2.8rem);
}

.pub-cap-method-letter {
    display: block;
    color: var(--pub-surface-dark);
    font-size: clamp(5.6rem, 9vw, 7.8rem);
    line-height: 0.78;
    font-weight: 800;
    letter-spacing: 0;
}

.pub-cap-method-movement--1 .pub-cap-method-letter {
    color: var(--pub-accent);
}

.pub-cap-method-movement--2 .pub-cap-method-letter {
    font-size: clamp(6.1rem, 9.8vw, 8.4rem);
}

.pub-cap-method-movement--3 .pub-cap-method-letter {
    color: var(--pub-accent);
}

.pub-cap-method-copy {
    margin-top: 0.7rem;
}

.pub-cap-method-copy h3 {
    margin: 0;
    color: var(--pub-surface-dark);
    font-size: clamp(1.05rem, 1.35vw, 1.28rem);
    line-height: 1.16;
    font-weight: 800;
}

.pub-cap-method-copy p {
    margin: 0.6rem 0 0;
    color: rgba(20, 42, 53, 0.68);
    font-size: clamp(0.88rem, 1vw, 0.98rem);
    line-height: 1.55;
    font-weight: 600;
}

.pub-cap-method-closing {
    max-width: 32rem;
    margin: clamp(2.6rem, 4vw, 3.6rem) 0 0 auto;
    color: var(--pub-surface-dark);
    font-size: clamp(1.05rem, 1.45vw, 1.22rem);
    line-height: 1.55;
    font-weight: 700;
}

@media (max-width: 900px) {
    .pub-cap-method {
        padding: 4.4rem 0 4.8rem;
    }

    .pub-cap-method-head {
        grid-template-columns: 1fr;
        gap: 1.35rem;
    }

    .pub-cap-method-head p {
        max-width: 34rem;
    }

    .pub-cap-method-composition {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;
        gap: 1.6rem;
        margin-top: 3.2rem;
    }

    .pub-cap-method-movement--1,
    .pub-cap-method-movement--2,
    .pub-cap-method-movement--3 {
        padding-bottom: 0;
        align-self: auto;
    }

    .pub-cap-method-movement--3 {
        grid-column: auto;
        max-width: none;
        margin-left: 0;
    }

    .pub-cap-method-closing {
        margin-left: 0;
    }

    .pub-cap-method-letter,
    .pub-cap-method-movement--2 .pub-cap-method-letter {
        font-size: clamp(5.2rem, 15vw, 7.5rem);
    }

    .pub-cap-method-copy h3 {
        font-size: clamp(1.08rem, 2.4vw, 1.28rem);
    }

    .pub-cap-method-copy p {
        font-size: 0.9rem;
    }
}

@media (max-width: 640px) {
    .pub-cap-method {
        padding: 4rem 0 4.3rem;
    }

    .pub-cap-method h2 {
        font-size: clamp(2.25rem, 10vw, 3rem);
        line-height: 1.02;
    }

    .pub-cap-method-composition {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin-top: 2.8rem;
    }

    .pub-cap-method-composition::before {
        display: none;
    }

    .pub-cap-method-movement--3 {
        max-width: none;
        margin-left: 0;
    }

    .pub-cap-method-letter,
    .pub-cap-method-movement--2 .pub-cap-method-letter {
        font-size: clamp(4.8rem, 24vw, 6.4rem);
        line-height: 0.78;
    }

    .pub-cap-method-copy {
        margin-top: 0.55rem;
    }

    .pub-cap-method-copy h3 {
        font-size: 1.2rem;
    }

    .pub-cap-method-closing {
        max-width: none;
        margin-top: 2.4rem;
        font-size: 1.05rem;
    }
}

@media (max-width: 360px) {
    .pub-cap-method h2 {
        font-size: clamp(2.05rem, 10vw, 2.55rem);
    }

    .pub-cap-method-letter,
    .pub-cap-method-movement--2 .pub-cap-method-letter {
        font-size: clamp(4.6rem, 24vw, 5.8rem);
    }
}

/* --- Transformation (avant / après) --- */

.pub-transformation {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pub-transformation-head {
    display: grid;
    grid-template-columns: 1fr 2.5rem 1fr;
    padding: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pub-text-muted);
}

.pub-transformation-head span:first-child {
    text-align: right;
}

.pub-transformation-head span:last-child {
    text-align: left;
}

.pub-transformation-row {
    display: grid;
    grid-template-columns: 1fr 2.5rem 1fr;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--pub-border);
}

.pub-transformation-row:last-of-type {
    border-bottom: 1px solid var(--pub-border);
}

.pub-transformation-before,
.pub-transformation-after {
    margin: 0;
}

.pub-transformation-before {
    text-align: right;
    color: var(--pub-text-muted);
}

.pub-transformation-after {
    text-align: left;
    color: var(--pub-text);
    font-weight: 600;
}

.pub-transformation-arrow {
    text-align: center;
    color: var(--pub-accent);
    font-size: 1.1rem;
}

.pub-transformation-disclaimer {
    margin-top: 1.5rem;
    font-size: 0.82rem;
}

@media (max-width: 640px) {
    .pub-transformation-head {
        display: none;
    }

    .pub-transformation-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        text-align: left;
        padding: 1.1rem 0;
    }

    .pub-transformation-before,
    .pub-transformation-after {
        text-align: left;
    }

    .pub-transformation-before::before {
        content: 'Avant — ';
        font-weight: 700;
        color: var(--pub-text-muted);
    }

    .pub-transformation-after::before {
        content: 'Après — ';
        font-weight: 700;
        color: var(--pub-accent);
    }

    .pub-transformation-arrow {
        display: none;
    }
}

/* --- Colonnes "fait pour vous / pas fait pour vous" (section CAP) --- */

/* --- L'accompagnement CAP --- */

.pub-cap-offer {
    padding: clamp(4.25rem, 5vw, 5.1rem) 0;
    background-color: var(--pub-bg);
    color: var(--pub-surface-dark);
}

.pub-cap-offer-container {
    width: min(90%, 1080px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
    gap: clamp(2.75rem, 4.5vw, 4.25rem);
    align-items: stretch;
}

.pub-cap-offer-left {
    min-width: 0;
}

.pub-cap-offer-head {
    position: relative;
    padding-left: clamp(1.75rem, 2.2vw, 2.2rem);
}

.pub-cap-offer-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: -0.45rem;
    bottom: 0.25rem;
    width: 2px;
    background-color: var(--pub-accent);
}

.pub-cap-offer-kicker {
    display: block;
    color: var(--pub-accent-hover);
    font-size: clamp(0.82rem, 0.9vw, 0.98rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pub-cap-offer h2 {
    max-width: 39rem;
    margin: clamp(1.55rem, 2.2vw, 2.1rem) 0 0;
    color: var(--pub-surface-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.45rem, 3vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 400;
}

.pub-cap-offer h2::before {
    display: none;
}

.pub-cap-offer-items {
    max-width: 36rem;
    margin-top: clamp(2.75rem, 3.7vw, 3.45rem);
}

.pub-cap-offer-item {
    padding: 0;
}

.pub-cap-offer-item + .pub-cap-offer-item {
    margin-top: clamp(1.65rem, 2vw, 2.1rem);
    padding-top: clamp(1.65rem, 2vw, 2.1rem);
    border-top: 1px solid rgba(216, 102, 58, 0.28);
}

.pub-cap-offer-item h3 {
    margin: 0;
    color: var(--pub-surface-dark);
    font-size: clamp(1.15rem, 1.35vw, 1.45rem);
    line-height: 1.2;
    font-weight: 800;
}

.pub-cap-offer-item p {
    margin: 0.65rem 0 0;
    color: rgba(20, 42, 53, 0.72);
    font-size: clamp(0.96rem, 1.05vw, 1.08rem);
    line-height: 1.6;
}

.pub-cap-offer-card {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-self: start;
    padding: clamp(2.15rem, 2.65vw, 2.65rem);
    background-color: var(--pub-surface-dark);
    color: var(--pub-bg);
    border-radius: 10px;
}

.pub-cap-offer-card h3 {
    margin: 0;
    color: var(--pub-bg);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 3.4vw, 3.65rem);
    line-height: 1;
    font-weight: 400;
}

.pub-cap-offer-rule {
    width: 54%;
    height: 2px;
    margin: clamp(1.2rem, 1.45vw, 1.45rem) 0;
    background-color: var(--pub-accent);
}

.pub-cap-offer-summary {
    display: flex;
    flex-direction: column;
    gap: clamp(0.85rem, 1vw, 1rem);
}

.pub-cap-offer-summary p {
    margin: 0;
    color: rgba(255, 253, 248, 0.9);
    font-size: clamp(1rem, 1.08vw, 1.12rem);
    line-height: 1.35;
    font-weight: 600;
}

.pub-cap-offer-price {
    display: flex;
    align-items: baseline;
    gap: 0.42em;
    margin: clamp(0.2rem, 0.7vw, 0.55rem) 0 0;
    color: var(--pub-bg);
    white-space: nowrap;
}

.pub-cap-offer-price-amount {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 3.7vw, 4rem);
    line-height: 0.95;
    font-weight: 400;
}

.pub-cap-offer-price-currency {
    font-size: clamp(1.45rem, 1.9vw, 2.05rem);
    line-height: 1;
    font-weight: 700;
}

.pub-cap-offer-price-tax {
    font-size: clamp(0.92rem, 1.08vw, 1.15rem);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.pub-cap-offer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(3.45rem, 3.6vw, 3.85rem);
    margin-top: clamp(1.35rem, 1.7vw, 1.75rem);
    border-radius: 7px;
    background-color: var(--pub-accent);
    color: var(--pub-bg);
    font-size: clamp(0.98rem, 1.05vw, 1.08rem);
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.pub-cap-offer-cta:hover {
    background-color: var(--pub-accent-hover);
    transform: translateY(-1px);
}

.pub-cap-offer-cta:active {
    transform: translateY(0);
}

.pub-cap-offer-cta:focus-visible {
    outline: 3px solid var(--pub-focus-strong);
    outline-offset: 4px;
}

.pub-cap-offer-microcopy {
    margin: clamp(1.15rem, 1.35vw, 1.45rem) 0 0;
    color: rgba(255, 253, 248, 0.82);
    font-size: clamp(0.9rem, 0.95vw, 1rem);
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .pub-cap-offer-container {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 0.82fr);
        gap: 3rem;
    }

    .pub-cap-offer h2 {
        font-size: clamp(2.65rem, 4.6vw, 3.45rem);
    }

    .pub-cap-offer-card {
        padding: 2.35rem 2.15rem;
    }
}

@media (max-width: 900px) {
    .pub-cap-offer-container {
        grid-template-columns: 1fr;
        width: min(90%, 720px);
    }

    .pub-cap-offer-card {
        margin-top: 0.5rem;
    }
}

@media (max-width: 640px) {
    .pub-cap-offer {
        padding: 4.4rem 0;
    }

    .pub-cap-offer-container {
        width: min(100% - 3rem, 720px);
    }

    .pub-cap-offer-head {
        padding-left: 1.35rem;
    }

    .pub-cap-offer h2 {
        font-size: clamp(2.25rem, 10vw, 2.9rem);
        line-height: 1.03;
    }

    .pub-cap-offer-items {
        margin-top: 3rem;
    }

    .pub-cap-offer-item + .pub-cap-offer-item {
        margin-top: 1.8rem;
        padding-top: 1.8rem;
    }

    .pub-cap-offer-card {
        padding: 1.85rem;
        border-radius: 10px;
    }

    .pub-cap-offer-card h3 {
        font-size: clamp(2.9rem, 15vw, 3.8rem);
    }

    .pub-cap-offer-price-amount {
        font-size: clamp(2.95rem, 15vw, 3.8rem);
    }

    .pub-cap-offer-cta {
        min-height: 3.75rem;
        font-size: 1.05rem;
    }
}

.pub-fit-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--pub-border);
}

.pub-fit-column h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.pub-fit-column ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--pub-text-muted);
}

.pub-fit-column li {
    padding: 0.2rem 0;
}

@media (max-width: 640px) {
    .pub-fit-columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* --- Liste de réassurance (faits, pas de faux avis) --- */

.pub-reassurance-list .pub-badge {
    background-color: var(--pub-success-bg);
    color: var(--pub-success);
    flex-shrink: 0;
}

/* --- Footer refondu --- */

.site-footer {
    padding-top: clamp(4.5rem, 7vw, 6.9rem);
    background-color: var(--pub-surface-dark);
    color: var(--pub-bg);
}

.site-footer__container {
    width: min(90%, 1080px);
    margin-inline: auto;
}

.site-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(180px, 0.75fr) minmax(230px, 1fr);
    gap: clamp(3rem, 6vw, 6.25rem);
    align-items: start;
    padding-bottom: clamp(3.75rem, 6vw, 5.6rem);
}

.site-footer__brand {
    margin: 0;
    color: var(--pub-bg);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 3vw, 3.45rem);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 400;
    white-space: nowrap;
}

.site-footer__description {
    max-width: 32.5rem;
    margin: clamp(1.5rem, 2vw, 1.85rem) 0 0;
    color: rgba(255, 253, 248, 0.76);
    font-size: clamp(1rem, 1.05vw, 1.12rem);
    line-height: 1.55;
}

.site-footer__heading {
    margin: 0 0 1.75rem;
    color: var(--pub-accent);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer__links {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__links a,
.site-footer__cookie-link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 253, 248, 0.76);
    font: inherit;
    font-size: 0.98rem;
    line-height: 1.35;
    text-align: left;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    cursor: pointer;
    transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

.site-footer__links a:hover,
.site-footer__cookie-link:hover {
    color: var(--pub-bg);
    text-decoration-color: var(--pub-accent);
}

.site-footer__links a:focus-visible,
.site-footer__cookie-link:focus-visible {
    outline: 2px solid var(--pub-accent);
    outline-offset: 5px;
}

.site-footer__bottom {
    padding-block: 1.9rem 2.35rem;
    border-top: 1px solid rgba(216, 102, 58, 0.34);
}

.site-footer__copyright {
    margin: 0;
    color: rgba(255, 253, 248, 0.66);
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 1099px) {
    .site-footer__main {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__identity {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .site-footer {
        padding-top: 4rem;
    }

    .site-footer__container {
        width: min(100% - 3rem, 720px);
    }

    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-bottom: 3.5rem;
    }

    .site-footer__identity {
        grid-column: auto;
    }

    .site-footer__brand {
        font-size: clamp(2rem, 10vw, 2.85rem);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .site-footer__description {
        max-width: none;
    }

    .site-footer__heading {
        margin-bottom: 1.2rem;
    }
}

/* --- Page Contact --- */

.pub-contact-page {
    padding: clamp(5rem, 7vw, 7rem) 0 clamp(5.4rem, 7vw, 7.4rem);
    background-color: var(--pub-bg);
    color: var(--pub-surface-dark);
}

.pub-contact-page__container {
    width: min(90%, 1080px);
    margin-inline: auto;
}

.pub-contact-page__header {
    max-width: 46rem;
    margin-bottom: clamp(3.5rem, 5vw, 5rem);
}

.pub-contact-page__kicker {
    display: block;
    margin-bottom: 1.25rem;
    color: var(--pub-accent-hover);
    font-size: clamp(0.82rem, 0.95vw, 0.98rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pub-contact-page h1 {
    margin: 0;
    color: var(--pub-surface-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 4.6vw, 4.9rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 400;
}

.pub-contact-page__header p {
    max-width: 43rem;
    margin: clamp(1.45rem, 2vw, 1.8rem) 0 0;
    color: rgba(20, 42, 53, 0.76);
    font-size: clamp(1.05rem, 1.25vw, 1.18rem);
    line-height: 1.6;
}

.pub-contact-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 6vw, 5.6rem);
    align-items: start;
}

.pub-contact-page__context {
    display: grid;
    gap: clamp(2rem, 3vw, 2.5rem);
}

.pub-contact-page__context-block h2 {
    margin: 0 0 0.85rem;
    color: var(--pub-surface-dark);
    font-size: clamp(1.15rem, 1.4vw, 1.35rem);
    line-height: 1.25;
    font-weight: 800;
}

.pub-contact-page__context-block h2::before {
    display: none;
}

.pub-contact-page__context-block p,
.pub-contact-page__note {
    margin: 0;
    color: rgba(20, 42, 53, 0.72);
    font-size: 1rem;
    line-height: 1.65;
}

.pub-contact-page__note {
    padding-left: 1.25rem;
    border-left: 2px solid var(--pub-accent);
    color: rgba(20, 42, 53, 0.82);
    font-weight: 700;
}

.pub-contact-form {
    display: grid;
    gap: 1.35rem;
}

.pub-contact-field {
    display: grid;
    gap: 0.5rem;
}

.pub-contact-field label {
    color: var(--pub-surface-dark);
    font-size: 0.98rem;
    line-height: 1.35;
    font-weight: 800;
}

.pub-contact-field input,
.pub-contact-field select,
.pub-contact-field textarea {
    width: 100%;
    min-height: 3.35rem;
    border: 1px solid rgba(20, 42, 53, 0.2);
    border-radius: 8px;
    background-color: rgba(255, 253, 248, 0.48);
    color: var(--pub-surface-dark);
    font: inherit;
    font-size: 1rem;
    line-height: 1.45;
    padding: 0.9rem 1rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.pub-contact-field textarea {
    min-height: 12rem;
    resize: vertical;
}

.pub-contact-field input:focus,
.pub-contact-field select:focus,
.pub-contact-field textarea:focus {
    outline: none;
    border-color: var(--pub-accent);
    box-shadow: 0 0 0 3px rgba(216, 102, 58, 0.18);
    background-color: var(--pub-bg);
}

.pub-contact-field input[aria-invalid="true"],
.pub-contact-field select[aria-invalid="true"],
.pub-contact-field textarea[aria-invalid="true"] {
    border-color: var(--pub-danger);
}

.pub-contact-help {
    margin: 0;
    color: rgba(20, 42, 53, 0.62);
    font-size: 0.92rem;
    line-height: 1.45;
}

.pub-contact-error {
    margin: 0;
    color: var(--pub-danger);
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 700;
}

.pub-contact-submit {
    display: inline-flex;
    width: 100%;
    min-height: 4.15rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background-color: var(--pub-accent);
    color: var(--pub-bg);
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.pub-contact-submit:hover {
    background-color: var(--pub-accent-hover);
    transform: translateY(-1px);
}

.pub-contact-submit:active {
    transform: translateY(0);
}

.pub-contact-submit:focus-visible {
    outline: 3px solid var(--pub-focus-strong);
    outline-offset: 4px;
}

.pub-contact-microcopy {
    margin: -0.25rem 0 0;
    color: rgba(20, 42, 53, 0.68);
    font-size: 0.95rem;
    line-height: 1.45;
}

.pub-contact-page__success {
    padding: clamp(2rem, 3vw, 2.5rem) 0;
    border-top: 1px solid rgba(216, 102, 58, 0.34);
    border-bottom: 1px solid rgba(216, 102, 58, 0.34);
}

.pub-contact-page__success h2 {
    margin: 0;
    color: var(--pub-surface-dark);
    font-size: clamp(1.55rem, 2.3vw, 2.1rem);
    line-height: 1.2;
}

.pub-contact-page__success h2::before {
    display: none;
}

.pub-contact-page__success p {
    max-width: 36rem;
    margin: 1rem 0 0;
    color: rgba(20, 42, 53, 0.76);
    font-size: 1rem;
    line-height: 1.6;
}

.pub-contact-page__success a {
    display: inline-flex;
    margin-top: 1.45rem;
    color: var(--pub-accent-hover);
    font-weight: 800;
    text-underline-offset: 5px;
}

@media (max-width: 767px) {
    .pub-contact-page {
        padding: 4.4rem 0 5rem;
    }

    .pub-contact-page__container {
        width: min(100% - 3rem, 720px);
    }

    .pub-contact-page__header {
        margin-bottom: 3rem;
    }

    .pub-contact-page h1 {
        font-size: clamp(2.45rem, 12vw, 3.35rem);
        line-height: 1.04;
    }

    .pub-contact-page__layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .pub-contact-form {
        gap: 1.25rem;
    }
}

.pub-footer-main {
    max-width: var(--pub-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 2.5rem;
}

.pub-footer-brand-name {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
}

.pub-footer-tagline {
    margin: 0;
    font-size: 0.9rem;
    max-width: 26ch;
}

.pub-footer-col-title {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pub-text-muted);
}

.pub-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.9rem;
}

.pub-footer-col a,
.pub-footer-col .pub-consent-manage-link {
    color: var(--pub-text-muted);
    text-decoration: none;
}

.pub-footer-col a:hover,
.pub-footer-col .pub-consent-manage-link:hover {
    color: var(--pub-accent);
    text-decoration: underline;
}

.pub-footer-bottom {
    max-width: var(--pub-container);
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pub-border);
    font-size: 0.82rem;
    color: var(--pub-text-muted);
}

@media (max-width: 900px) {
    .pub-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .pub-footer-tagline {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .pub-footer-main {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* --- Progress bar + Stepper (tunnel) --- */

.pub-progress {
    height: 6px;
    border-radius: 999px;
    background-color: var(--pub-border);
    overflow: hidden;
}

.pub-progress-bar {
    height: 100%;
    background-color: var(--pub-accent);
    transition: width 0.3s ease;
}

.pub-stepper {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 1.25rem 0;
    font-size: 0.8rem;
    color: var(--pub-text-muted);
}

.pub-stepper-step.is-active {
    color: var(--pub-accent);
    font-weight: 700;
}

.pub-stepper-step.is-done {
    color: var(--pub-text);
}

/* --- Summary box --- */

.pub-summary {
    background-color: var(--pub-accent-soft);
    border-radius: var(--pub-radius-lg);
    padding: 1.5rem;
}

.pub-summary dt {
    color: var(--pub-text-muted);
    font-size: 0.8rem;
}

.pub-summary dd {
    margin: 0 0 0.9rem;
    font-weight: 600;
}

/* --- Empty state --- */

.pub-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--pub-text-muted);
}

/* --- Alerts --- */

.pub-alert {
    padding: 0.85rem 1.1rem;
    border-radius: var(--pub-radius);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.pub-alert-success { background-color: var(--pub-success-bg); color: var(--pub-success); }
.pub-alert-danger  { background-color: var(--pub-danger-bg); color: var(--pub-danger); }

/* --- Forms --- */

.pub-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
    text-align: left;
}

.pub-form-field label {
    font-size: 0.85rem;
    font-weight: 600;
}

.pub-form-field input,
.pub-form-field select,
.pub-form-field textarea {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    background-color: var(--pub-bg);
    color: var(--pub-text);
}

.pub-form-error {
    color: var(--pub-danger);
    font-size: 0.8rem;
    margin: 0;
}

.pub-radio-group,
.pub-checkbox-field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pub-radio-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.pub-radio-option:has(input:checked) {
    border-color: var(--pub-accent);
    background-color: var(--pub-accent-soft);
}

.pub-checkbox-field {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.pub-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* --- Booking slots --- */

.pub-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.pub-slot-option {
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 0.9rem;
    text-align: center;
    cursor: pointer;
    background-color: var(--pub-bg);
}

.pub-slot-option:has(input:checked) {
    border-color: var(--pub-accent);
    background-color: var(--pub-accent-soft);
}

/* --- Checklist (préparation) --- */

.pub-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pub-checklist li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

/* --- Animations (discrètes, respectent prefers-reduced-motion) --- */

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s var(--pub-ease), transform 0.6s var(--pub-ease);
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pub-progress-rail-fill {
        transition: none;
    }
}

/* Grain allégé sur petit écran : moins de puissance de rendu disponible,
   texture moins perceptible sur une surface réduite — on la retire plutôt
   que de la laisser dégrader la netteté perçue. */
@media (max-width: 640px) {
    body,
    .pub-cta {
        background-image: none;
    }
}

/* --- Accessibilité : focus visible --- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--pub-accent);
    outline-offset: 2px;
}

/* Cohérence de palette (refonte ciblée du Hero) : le focus visible dans le
   header/hero utilise --pub-accent-hover (plus soutenu) plutôt que
   --pub-accent, pour rester dans la nouvelle direction graphique à cet
   endroit précis (choix stylistique local, distinct de --pub-focus-strong
   qui sert uniquement les fonds sombres/copper — voir :root). */
.pub-header a:focus-visible,
.pub-header button:focus-visible,
.pub-hero a:focus-visible,
.pub-hero button:focus-visible {
    outline-color: var(--pub-accent-hover);
}

/* --- Accessibilité : lien d'évitement (skip link) --- */

.pub-skip-link {
    position: absolute;
    top: -100%;
    left: 0.75rem;
    z-index: 100;
    background-color: var(--pub-accent);
    color: #fff;
    padding: 0.7rem 1.1rem;
    border-radius: var(--pub-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.pub-skip-link:focus {
    top: 0.75rem;
}

/* --- Utilitaires d'espacement (réutilisés tels quels à plusieurs endroits,
   pour éviter des styles inline dupliqués dans les vues) --- */

.pub-mt-lg {
    margin-top: 2rem;
}

.pub-section-pad {
    padding: 3rem 1.5rem;
}

/* =============================================================================
   Restitution /resultat — expérience premium (Sprint 5C3 Lot C3.3)
   Aucune nouvelle palette : uniquement les tokens ci-dessus. Objectif :
   "je viens de recevoir une vraie première séance de coaching", jamais un
   dashboard/rapport IA/SaaS. Contraste voulu depuis la typographie et les
   espacements, jamais depuis des ombres (voir --pub-shadow, déjà discret,
   volontairement absent de tout ce qui suit) ou des couleurs vives.
   ============================================================================= */

.pub-report {
    display: flex;
    flex-direction: column;
}

/* --- En-tête / "hero" du rapport --- */
/* Reste dans la colonne de lecture étroite (.pub-container--narrow, 720px,
   voir tunnel.php) : un hero large pleine largeur n'a pas de sens pour un
   document personnel destiné à être LU, pas admiré. */

.pub-report-header {
    padding: 1rem 0 0.5rem;
    text-align: left;
}

.pub-report-eyebrow {
    display: inline-block;
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pub-accent);
}

.pub-report-header h1 {
    margin: 0 0 0.75rem;
}

.pub-report-header-note {
    margin: 0;
    color: var(--pub-text-muted);
    font-size: 0.95rem;
}

.pub-report-intro {
    margin: 1.75rem 0 3.5rem;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--pub-text-muted);
    max-width: 620px;
}

/* --- Rythme vertical des 8 blocs --- */
/* Base commune (respiration), puis quelques blocs reçoivent un rythme propre
   (Bloc 5 : plus d'espace avant/après, c'est le point d'ancrage de la page ;
   Bloc 8 : séparateur avant la transition commerciale) — pour éviter l'effet
   "pile de cartes identiques" explicitement proscrit. */

.pub-report-block {
    margin-top: 3.5rem;
}

.pub-report-header + .pub-report-intro + .pub-report-block {
    margin-top: 0;
}

.pub-report-block h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
}

/* --- Bloc 1 — Situation : simple, sans encadrement --- */

.pub-report-situation p {
    font-size: 1.05rem;
    color: var(--pub-text);
}

/* --- Bloc 2 — Compréhension : traitement éditorial (filet d'accent, pas de boîte) --- */

.pub-report-understanding {
    border-left: 3px solid var(--pub-accent-soft);
    padding-left: 1.5rem;
}

.pub-report-understanding p {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--pub-text);
}

/* --- Bloc 3 — Point de compréhension : encadré légèrement accentué --- */
/* Fond seul, jamais de bordure ni d'ombre : la légère accentuation vient de
   la teinte de fond (--pub-bg-alt, déjà utilisée ailleurs sur le site pour
   ce même usage), pas d'un contour. */

.pub-report-insight {
    background-color: var(--pub-bg-alt);
    border-radius: var(--pub-radius-lg);
    padding: 2rem 2.25rem;
}

/* --- Bloc 4 — Points d'appui : liste élégante --- */
/* Même langage visuel que .pub-confiance-commitments (déjà établi ailleurs
   sur le site pour une liste de constats) : puce ronde discrète, jamais une
   coche/case à cocher qui évoquerait une checklist SaaS. */

.pub-report-resource-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pub-report-resource {
    position: relative;
    padding-left: 1.5rem;
}

.pub-report-resource::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--pub-accent);
}

.pub-report-resource h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.pub-report-resource p {
    margin: 0;
    color: var(--pub-text-muted);
}

/* --- Bloc 5 — Priorité : le point focal --- */
/* Aucun rouge, aucune alerte, aucune animation (règle absolue du brief) : le
   relief vient exclusivement de la respiration (marges généreuses avant/
   après + séparateurs très subtils), du fond --pub-accent-soft et d'une
   typographie posée en plus grand corps. */

.pub-report-priority {
    margin-top: 4.5rem;
    padding: 3rem 2rem;
    text-align: center;
    background-color: var(--pub-accent-soft);
    border-radius: var(--pub-radius-lg);
    border-top: 1px solid var(--pub-hairline);
    border-bottom: 1px solid var(--pub-hairline);
}

.pub-report-priority h2 {
    justify-content: center;
}

.pub-report-priority h2::before {
    margin-left: auto;
    margin-right: auto;
}

.pub-report-priority-label {
    margin: 0;
    font-size: clamp(1.4rem, 3.2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--pub-text);
}

/* --- Bloc 6 — Plan d'action : progression verticale, pas une checklist --- */
/* <ol> porte la sémantique/l'accessibilité (numérotation réelle, "1 sur 3"
   pour un lecteur d'écran) ; le badge numéroté ci-dessous est un ::before
   CSS purement décoratif (dupliqué visuellement depuis le même ordre DOM,
   jamais désynchronisable) — le numéro guide l'œil sans dominer : petit
   cercle, pas un gros chiffre. */

.pub-report-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pub-report-action;
}

.pub-report-action {
    position: relative;
    padding: 0 0 2.5rem 3.25rem;
    counter-increment: pub-report-action;
}

.pub-report-action::before {
    content: counter(pub-report-action);
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background-color: var(--pub-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.pub-report-action::after {
    content: '';
    position: absolute;
    left: 1.05rem;
    top: 2.1rem;
    bottom: 0;
    width: 1px;
    background-color: var(--pub-border);
}

.pub-report-action:last-child {
    padding-bottom: 0;
}

.pub-report-action:last-child::after {
    display: none;
}

.pub-report-action h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.pub-report-action p {
    margin: 0 0 0.6rem;
}

.pub-report-action-success {
    margin: 0;
    font-size: 0.9rem;
    color: var(--pub-text-muted);
}

.pub-report-action-success-label {
    font-weight: 600;
    color: var(--pub-text);
}

/* --- Bloc 7 — Projection : pensée de clôture, légère --- */

.pub-report-projection p {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--pub-text-muted);
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

/* --- Bloc 8 — Transition commerciale : calme, jamais agressive --- */
/* Adoucit volontairement .pub-cta pour ce contexte précis (fond sombre +
   grain + ombre marquée conviennent à une page marketing, pas à la
   conclusion sobre d'un document personnel) : mêmes tokens, traitement plus
   discret. Un seul bouton, une seule action. */

.pub-report-cap-transition {
    margin-top: 4.5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--pub-hairline);
}

.pub-report-cap-transition .pub-cta {
    background-color: var(--pub-bg-alt);
    background-image: none;
    color: var(--pub-text);
    box-shadow: none;
    border: 1px solid var(--pub-border);
    padding: 3rem 2rem;
}

.pub-report-cap-transition .pub-cta h2 {
    color: var(--pub-text);
}

.pub-report-cap-transition .pub-cta h2::before {
    background-color: var(--pub-accent);
}

.pub-report-cap-transition .pub-cta p {
    color: var(--pub-text-muted);
}

.pub-report-cap-transition .pub-cta .pub-btn-primary {
    background-color: var(--pub-accent);
    color: #fff;
    box-shadow: none;
}

.pub-report-cap-transition .pub-cta .pub-btn-primary:hover {
    background-color: var(--pub-accent-hover);
}

/* --- Loader (étape finale du diagnostic) --- */
/* Élégant, sans spinner ni barre de progression ni pourcentage (règle
   absolue) : seulement de la typographie posée + une apparition progressive
   des 3 phrases (voir public.js), pilotée par .reveal/.reveal--visible déjà
   défini plus haut — respecte donc prefers-reduced-motion sans code
   supplémentaire. */

.pub-report-generating {
    padding: 3rem 0;
    text-align: center;
}

.pub-report-generating-title {
    margin: 0 0 1.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pub-text);
}

.pub-report-generating-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.98rem;
    color: var(--pub-text-muted);
}

.pub-report-generating-delay {
    margin: 1.75rem 0 0;
    font-size: 0.85rem;
    color: var(--pub-text-muted);
}

@media (max-width: 640px) {
    .pub-report-intro {
        margin: 1.5rem 0 2.75rem;
        font-size: 1.02rem;
    }

    .pub-report-block {
        margin-top: 2.75rem;
    }

    .pub-report-insight {
        padding: 1.5rem 1.5rem;
    }

    .pub-report-priority {
        margin-top: 3rem;
        padding: 2.25rem 1.25rem;
    }

    .pub-report-action {
        padding-left: 2.75rem;
    }

    .pub-report-action::before {
        width: 1.85rem;
        height: 1.85rem;
        font-size: 0.8rem;
    }

    .pub-report-action::after {
        left: 0.925rem;
        top: 1.85rem;
    }

    .pub-report-cap-transition {
        margin-top: 3rem;
        padding-top: 2.25rem;
    }

    .pub-report-cap-transition .pub-cta {
        padding: 2.25rem 1.25rem;
    }
}

/* --- Consentement cookies (Sprint 10 Lot 2) --- */

.pub-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    max-height: 100vh;
    overflow-y: auto;
    background-color: var(--pub-bg);
    border-top: 1px solid var(--pub-border);
    box-shadow: var(--pub-shadow-lg);
}

.pub-consent-banner[hidden] {
    display: none;
}

.pub-consent-banner-inner {
    max-width: var(--pub-container);
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pub-consent-title {
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.pub-consent-text {
    margin: 0;
    color: var(--pub-text-muted);
    font-size: 0.9rem;
}

.pub-consent-categories {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pub-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.pub-consent-manage-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--pub-text-muted);
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
}

.pub-consent-manage-link:hover {
    color: var(--pub-accent);
}

@media (max-width: 640px) {
    .pub-consent-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Bannière moins envahissante sur mobile (passe de finition
       préproduction) : hauteur plafonnée pour ne jamais masquer tout
       l'écran, espacements/texte resserrés — même mécanisme JS, mêmes
       catégories, mêmes choix, aucun changement de comportement. */
    .pub-consent-banner {
        max-height: 85vh;
    }

    .pub-consent-banner-inner {
        padding: 1.1rem 1rem;
        gap: 0.9rem;
    }

    .pub-consent-title {
        font-size: 0.95rem;
    }

    .pub-consent-text {
        font-size: 0.82rem;
    }

    .pub-consent-categories {
        gap: 0.45rem;
    }

    .pub-consent-actions .pub-btn {
        padding: 0.6rem 1rem;
        min-height: 44px;
    }
}

/* --- CTA persistants (Sprint "CTA persistants") ---
   Un seul markup (Shared.Components.persistent-cta), disposition pilotée
   entièrement par ces media queries : barre pleine largeur en bas sur
   mobile, bloc flottant vertical en bas à droite sur desktop.

   Couches z-index de la page (documenté ici, seule référence) :
     10  .pub-hero-content / décoratifs de section (contenu courant)
     40  .pub-progress-rail (rail de lecture, desktop uniquement)
     50  .pub-header (barre de navigation, sticky)
     90  .pub-persistent-cta (CE composant)
     100 .pub-skip-link (lien d'évitement, au focus uniquement)
     200 .pub-consent-banner (bannière de consentement cookies)
   Le bandeau de consentement (200) doit toujours rester au-dessus de ce
   composant (90) : aucune coordination JS n'est nécessaire, l'empilement
   CSS suffit puisque les deux partagent la même ancre "bottom: 0". */

.pub-persistent-cta {
    position: fixed;
    z-index: 90;
    display: flex;
    gap: 0.6rem;
    margin: 0;
}

.pub-persistent-cta[hidden] {
    display: none;
}

.pub-persistent-cta-btn {
    flex: 1;
    min-height: 48px;
}

.pub-persistent-cta-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.pub-persistent-cta-label-short {
    display: none;
}

/* Mobile : barre fixe pleine largeur, sous le seuil desktop (900px, cohérent
   avec les autres breakpoints "layout" du design system, ex: .pub-progress-rail). */
@media (max-width: 899px) {
    .pub-persistent-cta {
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: row;
        align-items: stretch;
        padding: 0.6rem max(0.75rem, env(safe-area-inset-right)) calc(0.6rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
        background-color: var(--pub-bg);
        border-top: 1px solid var(--pub-border);
        box-shadow: var(--pub-shadow-lg);
    }

    /* Espace compensatoire (réservé par le layout via body.has-persistent-cta,
       voir Shared.Layouts.main/tunnel) : le dernier contenu et le footer ne
       sont jamais masqués par la barre. */
    body.has-persistent-cta {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
    }
}

/* Très petits écrans : libellés courts uniquement si nécessaire (breakpoint
   déjà utilisé ailleurs dans le design system, ex: sections hero/pricing). */
@media (max-width: 360px) {
    .pub-persistent-cta-label-full {
        display: none;
    }

    .pub-persistent-cta-label-short {
        display: inline;
    }

    .pub-persistent-cta-btn {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.85rem;
        gap: 0.4rem;
    }
}

/* Desktop : bloc flottant vertical, révélé au scroll (progressive enhancement
   — voir /assets/js/public.js section 8). Sans JavaScript, reste visible en
   permanence : .pub-persistent-cta--pending n'est ajoutée que par le script. */
@media (min-width: 900px) {
    .pub-persistent-cta {
        left: auto;
        right: 2rem;
        bottom: 2rem;
        flex-direction: column;
        align-items: stretch;
        width: 248px;
        padding: 0.85rem;
        background-color: var(--pub-bg);
        border: 1px solid var(--pub-border);
        border-radius: var(--pub-radius-lg);
        box-shadow: var(--pub-shadow-lg);
        opacity: 1;
        transform: none;
        transition: opacity 0.25s var(--pub-ease), transform 0.25s var(--pub-ease);
    }

    .pub-persistent-cta.pub-persistent-cta--pending {
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
    }

    .pub-persistent-cta.pub-persistent-cta--pending.is-visible {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* =============================================================================
   Page d'attente du diagnostic v3 (Sprint "Attente diagnostic v3")
   GET /diagnostic/generation — voir generation-v3.php + public.js section 9.
   ============================================================================= */

.pub-wait {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.pub-wait-pulse {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.75rem;
    border-radius: 50%;
    border: 3px solid var(--pub-accent-soft);
    border-top-color: var(--pub-accent);
    animation: pub-wait-spin 1s linear infinite;
}

@keyframes pub-wait-spin {
    to {
        transform: rotate(360deg);
    }
}

.pub-wait-progress {
    height: 8px;
    border-radius: 999px;
    background-color: var(--pub-accent-soft);
    overflow: hidden;
    margin: 1.75rem 0 1rem;
}

.pub-wait-progress-fill {
    height: 100%;
    width: 4%;
    border-radius: inherit;
    background-color: var(--pub-accent);
    transition: width 0.6s var(--pub-ease);
}

.pub-wait-message {
    min-height: 1.5em;
    font-weight: 600;
    color: var(--pub-text);
}

.pub-wait-abnormal {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--pub-border);
}

.pub-wait-abnormal[hidden] {
    display: none;
}

.pub-wait-leave-sentence {
    font-weight: 600;
}

.pub-wait-noscript {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--pub-border);
}

/* =============================================================================
   Page /offre (Sprint "Correction visuelle /offre") — page de décision
   graphique et rapide à parcourir : titres/chiffres/frises dominants, textes
   très courts, rythme alterné (bandes contrastées / fond clair), exactement
   deux CTA. Réutilise les tokens --pub-* existants (aucune nouvelle palette),
   dont le pattern .pub-cta (bande --pub-surface-dark) déjà en place ailleurs
   sur le site pour les blocs fortement contrastés.
   ============================================================================= */

/* Sort du conteneur --pub-container-narrow du tunnel pour les compositions qui
   ont besoin de respirer (hero, bloc CAP, bloc final) — même technique de
   "breakout" pleine largeur que /diagnostic/resultat (voir resultat-v3.php),
   jamais une modification du layout partagé. */
.pub-offre-breakout {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.pub-offre-breakout-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Hero (deux colonnes) --- */

/* Compacité volontaire : le premier CTA doit rester visible sans défilement à
   1440x900, y compris avant toute réponse au bandeau cookies (fixe, en bas de
   viewport, voir .pub-consent-banner) — §4/§16 du brief. */
.pub-offre-hero {
    padding: 1.25rem 0 2rem;
}

.pub-offre-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
    gap: 3rem;
    align-items: center;
}

.pub-offre-hero-main h1 {
    /* Plus compact que le h1 global (clamp jusqu'à 3.4rem) : nécessaire pour
       que le premier CTA reste visible sans défilement à 1440x900, y compris
       avant réponse au bandeau cookies (fixe, en bas de viewport). */
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    margin-bottom: 0.75rem;
    text-wrap: balance;
}

.pub-offre-priority-flag {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1.25rem;
    padding: 0.7rem 1.1rem;
    background-color: var(--pub-accent-soft);
    border-radius: var(--pub-radius);
}

.pub-offre-priority-flag span:first-child {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-accent-hover);
}

.pub-offre-priority-flag span:last-child {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pub-text);
}

.pub-offre-hero-intro {
    font-size: 1.1rem;
    color: var(--pub-text-muted);
    max-width: 34rem;
}

.pub-offre-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 0.9rem 0;
}

.pub-offre-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pub-offre-stat strong {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1;
    color: var(--pub-accent);
}

.pub-offre-stat span {
    font-size: 0.82rem;
    color: var(--pub-text-muted);
}

.pub-offre-price-line {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    margin: 0.3rem 0 1.1rem;
}

.pub-offre-price-amount {
    font-size: clamp(2.1rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    color: var(--pub-text);
}

.pub-offre-price-tag {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--pub-text-muted);
    text-transform: uppercase;
}

.pub-offre-hero-main .pub-btn {
    width: 100%;
    max-width: 26rem;
}

.pub-offre-reassurance {
    margin-top: 0.85rem;
    font-size: 0.85rem;
    color: var(--pub-text-muted);
}

.pub-offre-secondary-link {
    margin-top: 1.75rem;
    font-size: 0.85rem;
    color: var(--pub-text-muted);
}

.pub-offre-secondary-link a {
    color: var(--pub-text-muted);
    text-decoration: underline;
}

/* Colonne droite du hero : frise verticale "votre parcours CAP" */

.pub-offre-journey {
    padding: 1.75rem 1.5rem;
    background-color: var(--pub-bg-alt);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-lg);
}

.pub-offre-journey-title {
    margin: 0 0 1.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-text-muted);
}

.pub-offre-journey-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pub-offre-journey-list li {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0 0 1.55rem 0;
}

.pub-offre-journey-list li:last-child {
    padding-bottom: 0;
}

.pub-offre-journey-list li::before {
    content: '';
    position: absolute;
    left: 1.05rem;
    top: 1.9rem;
    bottom: -0.35rem;
    width: 2px;
    background-color: var(--pub-border);
}

.pub-offre-journey-list li:last-child::before {
    display: none;
}

.pub-offre-journey-num {
    flex: none;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--pub-accent);
    min-width: 2.1rem;
}

.pub-offre-journey-label {
    font-weight: 600;
    font-size: 0.95rem;
}

@media (max-width: 900px) {
    .pub-offre-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
}

/* --- Résultats : 3 blocs numérotés, légers --- */

.pub-offre-results h2 {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.pub-offre-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.pub-offre-result {
    padding-top: 1.1rem;
    border-top: 3px solid var(--pub-accent);
}

.pub-offre-result-num {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pub-accent);
}

.pub-offre-result h3 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pub-offre-result p {
    color: var(--pub-text-muted);
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .pub-offre-results-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* --- Frise de progression (5 étapes) --- */

.pub-offre-progress-title {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.pub-offre-progress-frise {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin: 2.5rem 0 0;
}

.pub-offre-progress-step {
    position: relative;
    text-align: center;
    padding: 0 0.4rem;
}

.pub-offre-progress-step::after {
    content: '→';
    position: absolute;
    top: 0.15rem;
    right: -0.65rem;
    color: var(--pub-border);
    font-weight: 700;
}

.pub-offre-progress-step:last-child::after {
    display: none;
}

.pub-offre-progress-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    background-color: var(--pub-accent-soft);
    color: var(--pub-accent-hover);
    font-weight: 800;
    font-size: 0.95rem;
}

.pub-offre-progress-step h3 {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.pub-offre-progress-step p {
    font-size: 0.85rem;
    color: var(--pub-text-muted);
}

.pub-offre-between-actions {
    max-width: 620px;
    margin: 2.5rem auto 0;
    padding: 1.5rem 1.75rem;
    text-align: center;
    background-color: var(--pub-accent-soft);
    border-radius: var(--pub-radius-lg);
}

.pub-offre-between-actions strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--pub-accent-hover);
}

@media (max-width: 780px) {
    .pub-offre-progress-frise {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        text-align: left;
        max-width: 24rem;
        margin-left: auto;
        margin-right: auto;
    }

    .pub-offre-progress-step {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        text-align: left;
        padding: 0;
    }

    .pub-offre-progress-step::after {
        content: '';
        position: absolute;
        left: 1.1rem;
        top: 2.2rem;
        bottom: -1.75rem;
        width: 2px;
        background-color: var(--pub-border);
    }

    .pub-offre-progress-step:last-child::after {
        display: none;
    }

    .pub-offre-progress-mark {
        margin-bottom: 0;
    }
}

/* --- Grand bloc CAP contrasté (bleu nuit, sans CTA) --- */

.pub-offre-recap {
    padding: 3.5rem 0;
    background-color: var(--pub-surface-dark);
    background-image: var(--pub-grain-strong);
    color: #fff;
}

.pub-offre-recap-title {
    margin: 0 0 1.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.pub-offre-recap-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

.pub-offre-recap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pub-offre-recap-list li {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    font-size: 1.02rem;
}

.pub-offre-recap-check {
    color: var(--pub-focus-strong);
    font-weight: 700;
}

.pub-offre-recap-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pub-offre-recap-stat strong {
    display: block;
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 800;
    line-height: 1;
}

.pub-offre-recap-stat span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 780px) {
    .pub-offre-recap-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
}

/* --- Réassurance humaine (allégée) --- */

.pub-offre-human {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pub-offre-human p {
    color: var(--pub-text-muted);
}

.pub-offre-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 1.5rem 0;
}

.pub-offre-tag {
    padding: 0.4rem 0.85rem;
    background-color: var(--pub-accent-soft);
    color: var(--pub-accent-hover);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.pub-offre-caveat {
    font-size: 0.82rem;
    color: var(--pub-text-muted);
}

/* --- Bloc final de décision (contrasté, corail) --- */

.pub-offre-final {
    padding: 3.5rem 0;
    background-color: var(--pub-accent-hover);
    color: #fff;
    text-align: center;
}

.pub-offre-final-inner {
    max-width: 560px;
    margin: 0 auto;
}

.pub-offre-final h2 {
    color: #fff;
    text-wrap: balance;
}

.pub-offre-final p {
    color: rgba(255, 255, 255, 0.88);
}

.pub-offre-final .pub-offre-price-amount {
    color: #fff;
}

.pub-offre-final .pub-offre-price-tag {
    color: rgba(255, 255, 255, 0.75);
}

.pub-offre-final .pub-btn-primary {
    background-color: #fff;
    color: var(--pub-accent-hover);
    width: 100%;
    max-width: 26rem;
}

.pub-offre-final .pub-btn-primary:hover {
    background-color: var(--pub-accent-soft);
}

.pub-offre-final .pub-offre-reassurance {
    color: rgba(255, 255, 255, 0.78);
}

@media (prefers-reduced-motion: reduce) {
    .pub-wait-pulse {
        animation: none;
        border-top-color: var(--pub-accent-soft);
        border-right-color: var(--pub-accent);
    }

    .pub-wait-progress-fill {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-persistent-cta {
        transition: none;
    }
}

/* ==========================================================================
   Reservation CAP
   ========================================================================== */

.pub-booking {
    /* Harmonisation visuelle 2026-08, Lot 1 : ce bloc déclarait auparavant sa
       propre mini-palette (--booking-navy/--booking-coral/...), quasi
       identique à --hero-* (--booking-navy valait exactement #142631, comme
       --hero-navy) mais jamais fusionnée avec elle ni avec --pub-*. Toutes
       les références ont été migrées vers les tokens --pub-* unifiés
       (voir :root) ; --booking-ivory n'était d'ailleurs jamais utilisée. */
    position: relative;
    left: 50%;
    width: min(1160px, calc(100vw - 3rem));
    transform: translateX(-50%);
    color: var(--pub-surface-dark);
}

.pub-booking-progress {
    display: grid;
    grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto;
    align-items: center;
    max-width: 720px;
    margin: 0 0 3rem;
}

.pub-booking-progress__step {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 0.55rem;
    color: var(--pub-text-muted);
    text-transform: uppercase;
}

.pub-booking-progress__step span {
    font-size: 0.72rem;
    font-weight: 800;
}

.pub-booking-progress__step strong {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.pub-booking-progress__step.is-active {
    color: var(--pub-accent-hover);
}

.pub-booking-progress__line {
    height: 1px;
    margin: 0 1rem;
    background: var(--pub-hairline);
}

.pub-booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
    gap: clamp(2.5rem, 4.5vw, 4.5rem);
    align-items: start;
}

.pub-booking-main {
    min-width: 0;
}

.pub-booking-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 0 0 1rem;
    padding: 0.2rem 0.75rem;
    border: 1px solid rgba(200, 94, 59, 0.38);
    border-radius: 999px;
    color: var(--pub-accent-hover);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pub-booking h1 {
    max-width: 720px;
    margin: 0;
    color: var(--pub-surface-dark);
    font-size: clamp(2.25rem, 4.2vw, 4.15rem);
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.pub-booking-intro {
    max-width: 690px;
    margin: 1.25rem 0 0;
    color: var(--pub-text-muted);
    font-size: 1.03rem;
    line-height: 1.7;
}

.pub-booking-next {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.25rem 0 2.5rem;
    color: var(--pub-text-muted);
    font-size: 0.86rem;
}

.pub-booking-next > span {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pub-accent);
    box-shadow: 0 0 0 4px rgba(200, 94, 59, 0.13);
}

.pub-booking-next strong {
    color: var(--pub-surface-dark);
}

.pub-booking-picker {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pub-booking-picker > legend {
    margin-bottom: 0.75rem;
    padding: 0;
    color: var(--pub-surface-dark);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pub-booking-date-toolbar,
.pub-booking-time-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pub-booking-date-toolbar {
    margin-bottom: 0.8rem;
}

.pub-booking-date-toolbar p {
    margin: 0;
    color: var(--pub-text-muted);
    font-size: 0.84rem;
}

.pub-booking-date-controls {
    display: flex;
    gap: 0.45rem;
}

.pub-booking-date-controls button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--pub-hairline);
    border-radius: 50%;
    background: transparent;
    color: var(--pub-surface-dark);
    cursor: pointer;
    font-size: 1.05rem;
}

.pub-booking-date-controls button:disabled {
    opacity: 0.3;
    cursor: default;
}

.pub-booking-dates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.pub-booking-date {
    position: relative;
    display: grid;
    min-height: 156px;
    padding: 1rem;
    border: 1px solid var(--pub-hairline);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
    color: var(--pub-surface-dark);
    cursor: pointer;
    text-align: left;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.pub-booking-date[hidden] {
    display: none;
}

.pub-booking-date:hover {
    border-color: rgba(200, 94, 59, 0.6);
    transform: translateY(-2px);
}

.pub-booking-date.is-selected {
    border-color: var(--pub-surface-dark);
    background: var(--pub-surface-dark);
    color: var(--pub-bg);
    box-shadow: inset 0 4px 0 var(--pub-accent);
}

.pub-booking-date__day,
.pub-booking-date__month,
.pub-booking-date__count {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pub-booking-date__day {
    color: var(--pub-accent-hover);
}

.pub-booking-date.is-selected .pub-booking-date__day {
    /* Harmonisation visuelle 2026-08, Lot 1 : seule couleur de ce fichier
       volontairement laissée hors des tokens --pub-* — usage unique (pas de
       duplication à consolider), choisie spécifiquement pour ce numéro de
       jour sur fond --pub-surface-dark (un simple var(--pub-accent-hover),
       trop sombre, s'y fondrait avec le fond navy). */
    color: #f49a79;
}

.pub-booking-date__number {
    align-self: end;
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
}

.pub-booking-date__month {
    margin-top: 0.2rem;
    letter-spacing: 0.08em;
}

.pub-booking-date__count {
    align-self: end;
    margin-top: 0.9rem;
    color: var(--pub-text-muted);
    font-weight: 600;
    text-transform: none;
}

.pub-booking-date.is-selected .pub-booking-date__count {
    color: rgba(255, 255, 255, 0.72);
}

.pub-booking-more-dates {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    margin: 0.85rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pub-accent-hover);
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 750;
}

.pub-booking-time-region {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--pub-hairline);
}

.pub-booking .pub-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.pub-booking-time-heading p,
.pub-booking-selection p {
    margin: 0 0 0.2rem;
    color: var(--pub-accent-hover);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pub-booking-time-heading h2 {
    margin: 0;
    color: var(--pub-surface-dark);
    font-size: 1.2rem;
}

.pub-booking-time-heading > span {
    color: var(--pub-text-muted);
    font-size: 0.75rem;
}

.pub-booking-times {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    animation: booking-times-in 220ms ease both;
}

.pub-booking-times[hidden] {
    display: none;
}

.pub-booking-time {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.pub-booking-time input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pub-booking-time__value {
    display: grid;
    min-height: 54px;
    place-items: center;
    border: 1px solid var(--pub-hairline);
    border-radius: 6px;
    background: var(--pub-bg);
    color: var(--pub-surface-dark);
    font-size: 1.02rem;
    font-weight: 800;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.pub-booking-time:hover .pub-booking-time__value {
    border-color: var(--pub-accent);
}

.pub-booking-time input:checked + .pub-booking-time__value {
    border-color: var(--pub-accent-hover);
    background: var(--pub-accent);
    color: #fff;
}

.pub-booking-time__check {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    opacity: 0;
    color: #fff;
    transform: translateY(-50%) scale(0.75);
    transition: opacity 160ms ease, transform 160ms ease;
}

.pub-booking-time input:checked ~ .pub-booking-time__check {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.pub-booking-date:focus-visible,
.pub-booking-date-controls button:focus-visible,
.pub-booking-more-dates:focus-visible,
.pub-booking-time input:focus-visible + .pub-booking-time__value,
.pub-booking-submit:focus-visible {
    outline: 3px solid var(--pub-focus-strong);
    outline-offset: 3px;
}

.pub-booking-selection {
    display: grid;
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border-left: 3px solid var(--pub-accent);
    background: rgba(200, 94, 59, 0.07);
}

.pub-booking-selection[hidden],
.pub-booking-summary__selected[hidden] {
    display: none;
}

.pub-booking-selection strong {
    color: var(--pub-surface-dark);
}

.pub-booking-selection span {
    color: var(--pub-text-muted);
    font-size: 0.82rem;
}

.pub-booking-submit {
    display: flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    margin-top: 1.15rem;
    border-radius: 6px;
    font-size: 0.94rem;
    text-align: center;
}

.pub-booking-submit:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.pub-booking-summary {
    position: sticky;
    top: 1rem;
    overflow: hidden;
    border-radius: 8px;
    background: var(--pub-bg);
    color: var(--pub-surface-dark);
    box-shadow: 0 18px 42px rgba(20, 38, 49, 0.14);
}

.pub-booking-summary::before {
    display: block;
    width: 100%;
    height: 5px;
    background: var(--pub-accent);
    content: "";
}

.pub-booking-summary__content {
    padding: 1.35rem 1.5rem 1.45rem;
}

.pub-booking-summary__eyebrow {
    margin: 0 0 1rem;
    color: var(--pub-accent-hover);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.pub-booking-summary__section {
    padding: 1rem 0;
    border-top: 1px solid var(--pub-hairline);
}

.pub-booking-summary__section h2,
.pub-booking-summary__section h3 {
    margin: 0 0 0.55rem;
    color: var(--pub-surface-dark);
}

.pub-booking-summary__section h2 {
    font-size: 1.25rem;
    line-height: 1.2;
}

.pub-booking-summary__section h3 {
    font-size: 0.88rem;
}

.pub-booking-product-list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    color: var(--pub-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    list-style: none;
}

.pub-booking-product-list li {
    position: relative;
    padding-left: 1rem;
}

.pub-booking-product-list li::before {
    position: absolute;
    left: 0;
    color: var(--pub-accent);
    content: "✓";
    font-weight: 800;
}

.pub-booking-appointment > p {
    margin: 0;
    color: var(--pub-text-muted);
    font-size: 0.78rem;
}

.pub-booking-summary__selected {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem;
    border: 1px solid rgba(200, 94, 59, 0.32);
    border-radius: 6px;
    background: rgba(200, 94, 59, 0.06);
}

.pub-booking-summary__selected span {
    color: var(--pub-surface-dark);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
}

.pub-booking-summary__selected strong {
    color: var(--pub-accent-hover);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.pub-booking-summary__selected small {
    color: var(--pub-text-muted);
    font-size: 0.72rem;
}

.pub-booking-price {
    display: grid;
    gap: 0.55rem;
}

.pub-booking-price > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
}

.pub-booking-price__total {
    padding-top: 0.6rem;
    border-top: 1px solid var(--pub-hairline);
    font-size: 0.95rem !important;
}

.pub-booking-price p {
    margin: 0.1rem 0 0;
    color: var(--pub-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.pub-booking-price__discount {
    color: var(--pub-accent-hover);
}

.pub-booking-price__discount span strong {
    font-weight: 600;
}

/* Sprint "Codes promotionnels" : bloc d'application/retrait de code, dans le récapitulatif de commande. */
.pub-booking-promo {
    display: grid;
    gap: 0.5rem;
}

.pub-booking-promo-input-row {
    display: flex;
    gap: 0.5rem;
}

.pub-booking-promo-input-row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--pub-hairline);
    border-radius: var(--pub-radius);
    background-color: var(--pub-bg);
    color: var(--pub-text);
}

.pub-booking-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--pub-hairline);
    border-radius: var(--pub-radius);
    background-color: var(--pub-surface-alt, var(--pub-bg));
}

.pub-booking-promo-applied p {
    margin: 0;
    font-size: 0.82rem;
}

.pub-form-success {
    color: var(--pub-accent-hover);
    font-size: 0.8rem;
    margin: 0;
}

.pub-booking-stripe p,
.pub-booking-legal > p {
    margin: 0;
    color: var(--pub-text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.pub-booking-consent {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.55rem;
    align-items: start;
    margin-top: 0.85rem;
    color: var(--pub-surface-dark);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1.45;
}

.pub-booking-consent input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--pub-accent);
}

.pub-booking-consent a,
.pub-booking-legal-links a {
    color: var(--pub-accent-hover);
    font-weight: 800;
}

.pub-booking-consent input:focus-visible {
    outline: 3px solid var(--pub-focus-strong);
    outline-offset: 2px;
}

.pub-booking-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    margin-top: 0.8rem;
}

.pub-booking-legal-links a {
    font-size: 0.67rem;
}

.pub-booking-payment-error {
    margin: 0.85rem 0 0;
    font-size: 0.75rem;
}

.pub-booking-submit-notes {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.7rem;
    color: var(--pub-text-muted);
    font-size: 0.69rem;
    line-height: 1.45;
    text-align: center;
}

.pub-booking-submit-notes p {
    margin: 0;
}

.pub-booking-empty {
    max-width: 720px;
    padding: clamp(2rem, 7vw, 5.5rem) 0;
}

.pub-booking-empty h1 {
    margin-bottom: 1.25rem;
}

.pub-booking-empty > p:not(.pub-booking-badge) {
    max-width: 580px;
    margin-bottom: 2rem;
    color: var(--pub-text-muted);
    font-size: 1.05rem;
}

@keyframes booking-times-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
    .pub-booking-layout {
        grid-template-columns: 1fr;
    }

    .pub-booking-summary {
        position: static;
    }
}

@media (max-width: 560px) {
    .pub-booking {
        width: calc(100vw - 2rem);
    }

    .pub-booking-progress {
        margin-bottom: 2rem;
    }

    .pub-booking-progress__step {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pub-booking-progress__step strong {
        font-size: 0.62rem;
    }

    .pub-booking-progress__line {
        margin: 0 0.45rem;
    }

    .pub-booking h1 {
        font-size: 2.45rem;
    }

    .pub-booking-intro {
        font-size: 0.94rem;
    }

    .pub-booking-next {
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

    .pub-booking-dates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-booking-date {
        min-height: 148px;
    }

    .pub-booking-times {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pub-booking-time-heading {
        align-items: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-booking-date,
    .pub-booking-time__value,
    .pub-booking-time__check {
        transition: none;
    }

    .pub-booking-times {
        animation: none;
    }
}

/* =============================================================================
   /confirmation (Refonte /confirmation) : point d'entrée dans l'accompagnement
   CAP, plus un reçu technique. Réutilise exclusivement les tokens --pub-*
   existants (aucune nouvelle couleur) — voir docblock de
   App\Public\Confirmation\Controllers\ConfirmationController pour les 6
   états métier (A confirmé / B finalisation / C non finalisé / D à
   vérifier / E lien invalide / F erreur technique) traduits ci-dessous.
   ============================================================================= */

.pub-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pub-conf-header-zone {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    text-align: center;
}

.pub-conf-header-zone h1 {
    margin-top: 0.9rem;
}

.pub-conf-lead {
    font-size: 1.1rem;
    max-width: 38rem;
    margin: 0 auto 0.6rem;
}

.pub-conf-valorization {
    color: var(--pub-text-muted);
    max-width: 38rem;
    margin: 0 auto;
}

/* --- Stepper 01/02/03 (créneau / paiement / inscription) --- */

.pub-conf-stepper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 2rem 0 0.5rem;
    padding: 0;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

.pub-conf-stepper-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.pub-conf-stepper-step::before {
    content: '';
    position: absolute;
    top: 1.05rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: var(--pub-border);
    z-index: 0;
}

.pub-conf-stepper-step:first-child::before {
    display: none;
}

.pub-conf-stepper-step.is-done::before {
    background-color: var(--pub-accent);
}

.pub-conf-stepper-mark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background-color: var(--pub-bg);
    border: 2px solid var(--pub-border);
    color: var(--pub-text-muted);
    font-weight: 800;
    font-size: 0.95rem;
    animation: pub-conf-pop 0.5s var(--pub-ease) backwards;
}

.pub-conf-stepper-step:nth-child(1) .pub-conf-stepper-mark { animation-delay: 0.05s; }
.pub-conf-stepper-step:nth-child(2) .pub-conf-stepper-mark { animation-delay: 0.2s; }
.pub-conf-stepper-step:nth-child(3) .pub-conf-stepper-mark { animation-delay: 0.35s; }

.pub-conf-stepper-step.is-done .pub-conf-stepper-mark {
    background-color: var(--pub-accent);
    border-color: var(--pub-accent);
    color: #fff;
}

.pub-conf-stepper-step.is-current .pub-conf-stepper-mark {
    border-color: var(--pub-accent);
    color: var(--pub-accent);
}

.pub-conf-stepper-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--pub-text-muted);
}

.pub-conf-stepper-step.is-done .pub-conf-stepper-label,
.pub-conf-stepper-step.is-current .pub-conf-stepper-label {
    color: var(--pub-text);
}

@keyframes pub-conf-pop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- État B : finalisation en cours --- */

.pub-conf-finalizing {
    background-color: var(--pub-accent-soft);
    border-radius: var(--pub-radius-lg);
    padding: 1.5rem;
    margin: 1.5rem 0;
    text-align: center;
}

.pub-conf-finalizing-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
}

.pub-conf-dots {
    display: inline-flex;
    gap: 0.25rem;
}

.pub-conf-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--pub-accent);
    animation: pub-conf-dot-pulse 1.2s ease-in-out infinite;
}

.pub-conf-dots span:nth-child(2) { animation-delay: 0.2s; }
.pub-conf-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pub-conf-dot-pulse {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

/* --- Récapitulatif (état A) : grille réordonnable desktop, ordre source mobile --- */

.pub-conf-recap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 2rem auto;
}

.pub-conf-block {
    background-color: var(--pub-bg-alt);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-lg);
    padding: 1.5rem;
}

.pub-conf-block-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pub-text-muted);
    margin: 0 0 0.9rem;
}

.pub-conf-appointment-date {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.3rem;
}

.pub-conf-status-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--pub-hairline);
}

.pub-conf-status-row:last-child {
    border-bottom: none;
}

.pub-conf-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    flex: none;
}

.pub-conf-status-row--done .pub-conf-status-icon {
    background-color: var(--pub-success-bg);
    color: var(--pub-success);
}

.pub-conf-status-row--pending .pub-conf-status-icon {
    background-color: var(--pub-accent-soft);
    color: var(--pub-accent-hover);
}

.pub-conf-status-label {
    flex: 1;
    font-size: 0.9rem;
}

.pub-conf-status-value {
    font-weight: 700;
    font-size: 0.85rem;
}

.pub-conf-status-row--done .pub-conf-status-value { color: var(--pub-success); }
.pub-conf-status-row--pending .pub-conf-status-value { color: var(--pub-accent-hover); }

.pub-conf-calendar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pub-conf-offer-list {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.92rem;
}

.pub-conf-offer-list li::before {
    content: '✓';
    color: var(--pub-accent);
    font-weight: 800;
    margin-right: 0.5rem;
}

.pub-conf-offer-price {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--pub-hairline);
}

.pub-conf-offer-amount {
    font-size: 1.4rem;
    font-weight: 800;
}

.pub-conf-offer-tag {
    font-size: 0.8rem;
    color: var(--pub-text-muted);
}

@media (min-width: 900px) {
    .pub-conf-recap-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "offer appointment"
            "offer status"
            "offer calendar";
        align-items: start;
    }

    /* grid-area affecté ICI uniquement (jamais en style inline) : sous
       900px, .pub-conf-recap-grid n'a pas de grid-template-areas — un
       grid-area actif sans zone correspondante perturbe le placement
       automatique et casse l'ordre source attendu sur mobile (§21 du brief). */
    .pub-conf-appointment { grid-area: appointment; }
    .pub-conf-status-block { grid-area: status; }
    .pub-conf-calendar-block { grid-area: calendar; }
    .pub-conf-offer-block {
        grid-area: offer;
        grid-row: span 3;
    }
}

/* --- Et maintenant / premier pas / message Esteban / infos pratiques --- */

.pub-conf-next-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin: 1.75rem 0;
}

.pub-conf-next-step {
    border-top: 3px solid var(--pub-accent);
    padding-top: 0.9rem;
}

.pub-conf-next-mark {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--pub-accent);
}

.pub-conf-next-step h3 {
    font-size: 0.98rem;
    margin-bottom: 0.35rem;
}

.pub-conf-next-step p {
    color: var(--pub-text-muted);
    font-size: 0.92rem;
}

.pub-conf-reservation-secondary {
    font-size: 0.88rem;
}

.pub-conf-first-step {
    background-color: var(--pub-accent-soft);
}

.pub-conf-first-step-question {
    font-size: 1.15rem;
    font-weight: 700;
    max-width: 34rem;
}

.pub-conf-esteban-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
}

.pub-conf-esteban-photo {
    width: 140px;
    height: 175px;
    object-fit: cover;
    border-radius: var(--pub-radius-lg);
    box-shadow: var(--pub-shadow);
}

/* Repli si esteban-portrait.webp venait à manquer (harmonisation visuelle
   2026-08, Lot 0) — même esprit que .pub-hero-portrait-fallback, adapté à un
   fond clair (cette section n'est pas un panneau sombre comme le Hero). */
.pub-conf-esteban-photo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pub-accent-soft);
    border: 1px solid var(--pub-border);
}

.pub-conf-esteban-photo-fallback-mark {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pub-bg);
    background-color: var(--pub-accent);
}

.pub-conf-assistance {
    text-align: center;
}

.pub-conf-assistance--prominent {
    background-color: var(--pub-accent-soft);
    border-radius: var(--pub-radius-lg);
    padding: 2rem 1.5rem;
}

.pub-conf-simple-state {
    text-align: center;
    padding: 3rem 0;
}

.pub-conf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.pub-conf-closing {
    text-align: center;
    padding: 2rem 0 3rem;
    color: var(--pub-text-muted);
}

.pub-conf-legal-links {
    font-size: 0.82rem;
    margin: 0.75rem 0;
}

.pub-conf-legal-links a {
    color: var(--pub-text-muted);
}

.pub-conf-home-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .pub-conf-next-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pub-conf-esteban-grid {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-conf-stepper-mark {
        animation: none;
    }

    .pub-conf-dots span {
        animation: none;
        opacity: 1;
    }
}

/* =============================================================================
   /preparation (Refonte /preparation) : carnet de préparation guidé, pas un
   formulaire administratif. Réutilise exclusivement les tokens --pub-*
   existants. Navigation "latérale" du brief (§6) simplifiée en frise
   horizontale de renvoi rapide (pas de vraie colonne latérale) pour rester
   cohérente avec le conteneur étroit déjà utilisé sur tout le tunnel — voir
   rapport final pour cette décision.
   ============================================================================= */

.pub-prep-intro {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.pub-prep-reassurance {
    background-color: var(--pub-accent-soft);
    border-radius: var(--pub-radius);
    padding: 1rem 1.25rem;
    font-size: 0.92rem;
    margin: 1rem 0;
}

.pub-prep-time {
    font-size: 0.95rem;
    color: var(--pub-text-muted);
}

.pub-prep-time strong {
    color: var(--pub-text);
}

/* --- Progression + navigation rapide --- */

.pub-prep-progress-zone {
    padding: 0.5rem 1.5rem 1.5rem;
    max-width: var(--pub-container-narrow);
    margin: 0 auto;
}

.pub-prep-progress-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pub-text-muted);
    margin: 0 0 0.5rem;
}

.pub-prep-nav {
    margin-top: 1rem;
}

.pub-prep-nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pub-prep-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--pub-border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pub-text-muted);
    text-decoration: none;
    background-color: var(--pub-bg);
}

.pub-prep-nav li.is-done a {
    border-color: var(--pub-success);
    color: var(--pub-success);
    background-color: var(--pub-success-bg);
}

.pub-prep-nav-mark {
    font-weight: 800;
}

/* --- Sections --- */

.pub-prep-section {
    padding: 2.5rem 0;
    border-top: 1px solid var(--pub-hairline);
}

.pub-prep-section:nth-of-type(even) {
    background-color: var(--pub-bg-alt);
}

.pub-prep-section--info {
    background-color: var(--pub-accent-soft);
    border-top: none;
}

.pub-prep-section-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pub-accent-hover);
    margin: 0 0 0.4rem;
}

.pub-prep-subheading {
    margin-top: 2.25rem;
    font-size: 1.1rem;
}

.pub-prep-instruction {
    font-size: 1.02rem;
    max-width: 42rem;
}

.pub-prep-help-note {
    font-size: 0.85rem;
    color: var(--pub-text-muted);
    font-style: italic;
    margin: 0.5rem 0 1.25rem;
}

/* --- Champs --- */

.pub-prep-field label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pub-prep-field-help {
    margin: -0.1rem 0 0.5rem;
    font-size: 0.82rem;
    color: var(--pub-text-muted);
}

.pub-prep-field-status {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pub-success);
    opacity: 0;
    transition: opacity 0.3s var(--pub-ease);
}

.pub-prep-field-status.is-visible {
    opacity: 1;
}

.pub-prep-field-status.is-error {
    color: var(--pub-danger);
}

/* --- Listes répétables (offres / meilleurs clients) --- */

.pub-prep-repeatable-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.pub-prep-repeatable-item {
    background-color: var(--pub-bg);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-lg);
    padding: 1.25rem;
}

.pub-prep-repeatable-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.25rem;
}

.pub-prep-repeatable-grid input {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    background-color: var(--pub-bg);
    color: var(--pub-text);
}

.pub-prep-repeatable-grid label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.pub-prep-remove-item {
    margin-top: 0.85rem;
    background: none;
    border: none;
    color: var(--pub-danger);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4rem 0;
}

/* --- Sélections à choix multiple (canaux / difficultés) --- */

.pub-prep-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
    margin: 0.5rem 0 1.25rem;
}

.pub-prep-checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
    cursor: pointer;
    background-color: var(--pub-bg);
}

.pub-prep-checkbox-option:has(input:checked) {
    border-color: var(--pub-accent);
    background-color: var(--pub-accent-soft);
}

/* --- Repères chiffrés (facultatif, replié par défaut) --- */

.pub-prep-benchmarks {
    margin-top: 1.5rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-lg);
    padding: 1rem 1.25rem;
    background-color: var(--pub-bg);
}

.pub-prep-benchmarks summary {
    cursor: pointer;
    font-weight: 700;
}

.pub-prep-benchmark-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--pub-hairline);
    font-size: 0.9rem;
}

.pub-prep-benchmark-row:last-child {
    border-bottom: none;
}

.pub-prep-benchmark-row input {
    width: 8rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
}

.pub-prep-benchmark-row select {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    background-color: var(--pub-bg);
}

/* --- Finalisation --- */

.pub-prep-finish {
    padding: 2.5rem 1.5rem 3rem;
    text-align: center;
}

.pub-prep-save-status {
    min-height: 1.2rem;
    font-size: 0.85rem;
    color: var(--pub-text-muted);
    margin: 0 0 1rem;
}

.pub-prep-save-status.is-error {
    color: var(--pub-danger);
}

/* --- Verrou optimiste : bannière de conflit (§9), non fermable, Lot PREP2 --- */

.pub-prep-conflict-banner {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0;
}

.pub-prep-conflict-banner p {
    margin: 0;
    flex: 1 1 auto;
    min-width: 200px;
}

@media (max-width: 640px) {
    .pub-prep-repeatable-grid {
        grid-template-columns: 1fr;
    }

    .pub-prep-benchmark-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .pub-prep-benchmark-row input,
    .pub-prep-benchmark-row select {
        width: 100%;
    }

    .pub-prep-nav a {
        font-size: 0.78rem;
        padding: 0.35rem 0.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-prep-field-status {
        transition: none;
    }
}
.pub-maintenance-admin-banner {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10000;
    min-height: 48px;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    text-align: center;
    color: #fff;
    background: #8a3b12;
    box-shadow: 0 2px 10px rgb(25 20 18 / 22%);
}

.pub-maintenance-admin-banner a { color: #fff; text-decoration: underline; font-weight: 700; }
.has-maintenance-admin-banner { padding-top: 48px; }

@media (max-width: 560px) {
    .pub-maintenance-admin-banner { min-height: 72px; gap: 0.25rem; font-size: 0.875rem; }
    .has-maintenance-admin-banner { padding-top: 72px; }
}