/* Le site public de Swan : la charte 2026 (design system « Swan design system », 2026-10-24), posée
   par-dessus `bundles/qcdgonecms/css/front.css` et le moteur de blocs.

   Identité : le jaune du cygne de 2020 (#fbc21c) réservé aux aplats (bouton principal, marque,
   surlignage), l'encre #1f1d1b pour le texte, des gris chauds, les liens en indigo. Titres en
   Bricolage Grotesque, texte en Instrument Sans, adresses en JetBrains Mono.

   ⚠ Aucune valeur n'est en dur hors du bloc :root : tout passe par les jetons --swan-*, puis par les
   variables du socle (--color-*) et du builder (--pb-*) qu'on remappe ici. */

:root {
    --swan-surface-0: #ffffff;
    --swan-surface-1: #f6f5f1;
    --swan-surface-2: #ecebe5;
    --swan-line: #dedbd3;
    --swan-line-strong: #bdb9ae;
    --swan-ink: #1f1d1b;
    --swan-ink-2: #5c5853;
    --swan-ink-3: #86817a;
    --swan-yellow: #fbc21c;
    --swan-yellow-deep: #e0a500;
    --swan-yellow-tint: #fff4cf;
    --swan-yellow-text: #8a5a00;
    --swan-link: #3f52c2;
    --swan-link-hover: #2f3fa3;
    --swan-ok: #1f7a4d;
    --swan-ok-tint: #e3f4ea;
    --swan-warn: #b06400;
    --swan-warn-tint: #fff0d6;
    --swan-danger: #c2302a;
    --swan-danger-tint: #fde8e6;
    --swan-font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
    --swan-font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --swan-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --swan-radius-sm: 6px;
    --swan-radius-md: 10px;
    --swan-radius-lg: 16px;

    /* Les variables du gabarit du socle (front.css). */
    --color-primary: var(--swan-link);
    --color-secondary: var(--swan-yellow);
    --color-tertiary: var(--swan-ink);
    --color-text: var(--swan-ink);
    --color-muted: var(--swan-ink-2);
    --color-bg: var(--swan-surface-0);
    --color-bg-alt: var(--swan-surface-1);
    --color-border: var(--swan-line);
    --color-text-secondary: var(--swan-ink-2);

    /* Les variables du moteur de blocs (page-builder-front.css). */
    --pb-accent: var(--swan-link);
    --pb-border: var(--swan-line);
    --pb-surface: var(--swan-surface-1);
    --pb-text: var(--swan-ink);

    --bs-link-color: var(--swan-link);
    --bs-link-hover-color: var(--swan-link-hover);
    --bs-body-font-family: var(--swan-font-sans);
}

/* ── Typographie ─────────────────────────────────────────────────────────── */
body {
    font-family: var(--swan-font-sans);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--swan-ink);
    background: var(--swan-surface-0);
}
h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--swan-font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--swan-ink);
    text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.5rem); line-height: 1.1; }
h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
h4, h5, h6 { font-family: var(--swan-font-sans); font-weight: 600; color: var(--swan-ink); }
a { color: var(--swan-link); text-underline-offset: 0.15em; }
a:hover, a:focus { color: var(--swan-link-hover); }
code, kbd, pre, .swan-mono { font-family: var(--swan-font-mono); font-variant-numeric: tabular-nums; }
pre { background: var(--swan-ink); color: #f3f0ea; border-radius: var(--swan-radius-md); padding: 1rem 1.25rem; font-size: 0.85rem; }

/* ── Barre de navigation ─────────────────────────────────────────────────── */
.front-navbar {
    background: var(--swan-surface-0);
    border-bottom: 1px solid var(--swan-line);
    min-height: 72px;
}
.front-navbar .navbar-brand,
.front-navbar .navbar-brand span {
    font-family: var(--swan-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--swan-ink);
}
.front-navbar .navbar-brand img { height: 36px; width: auto; }
.front-navbar .nav-link { color: var(--swan-ink); font-weight: 500; }
.front-navbar .nav-link:hover, .front-navbar .nav-link:focus { color: var(--swan-yellow-text); }
.front-navbar .nav-cta {
    background: var(--swan-yellow);
    color: var(--swan-ink);
    border-radius: var(--swan-radius-md);
    box-shadow: none;
    padding: 0.55rem 1.2rem;
    font-weight: 600;
}
.front-navbar .nav-cta:hover, .front-navbar .nav-cta:focus { background: var(--swan-yellow-deep); color: var(--swan-ink); filter: none; box-shadow: none; }
/* « Se connecter » bordé, à côté de « Créer un compte » en jaune (maquette « Main »). Le menu ne porte
   qu'un drapeau d'appel à l'action : l'entrée de connexion se reconnaît à son adresse. */
.front-navbar .nav-link[href$="/login"]:not(.nav-cta) {
    border: 1px solid var(--swan-line-strong); border-radius: var(--swan-radius-md);
    padding: 0.5rem 1.1rem; margin: 0 0.4rem 0 0.8rem; font-weight: 600;
}
.front-navbar .nav-link[href$="/login"]:not(.nav-cta):hover { background: var(--swan-surface-1); color: var(--swan-ink); }
@media (min-width: 992px) { .front-navbar .navbar-nav { align-items: center; gap: 0.35rem; } }
.front-navbar .dropdown-menu { border: 1px solid var(--swan-line); border-radius: var(--swan-radius-md); box-shadow: 0 12px 32px rgba(31, 29, 27, 0.12); }
.front-navbar .dropdown-item:hover, .front-navbar .dropdown-item:focus { background: var(--swan-surface-1); color: var(--swan-ink); }
.front-navbar .mobile-submenu-toggle { color: var(--swan-ink-2); }
.front-navbar .mobile-submenu-toggle:focus-visible { outline: 2px solid var(--swan-link); outline-offset: 2px; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn { border-radius: var(--swan-radius-md); font-weight: 600; font-family: var(--swan-font-sans); }
.btn-primary, .btn-primary:disabled {
    background: var(--swan-yellow);
    border-color: var(--swan-yellow);
    color: var(--swan-ink);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background: var(--swan-yellow-deep) !important;
    border-color: var(--swan-yellow-deep) !important;
    color: var(--swan-ink) !important;
}
.btn-outline-primary { color: var(--swan-ink); border-color: var(--swan-line-strong); background: var(--swan-surface-0); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--swan-surface-1); color: var(--swan-ink); border-color: var(--swan-line-strong); }
.btn-secondary { background: var(--swan-ink); border-color: var(--swan-ink); color: #f3f0ea; }
.btn:focus-visible { outline: 2px solid var(--swan-link); outline-offset: 2px; box-shadow: none; }

/* ── Sections, fil d'Ariane, conteneur ───────────────────────────────────── */
.section { padding: 3rem 0; }
.section-alt { background: var(--swan-surface-1); }
.page-header-section { background: var(--swan-surface-1); border-bottom: 1px solid var(--swan-line); padding: 3.5rem 0; }
.front-home .page-header-section { padding: 4.5rem 0; }
.page-header-section h1 { margin: 0 0 0.75rem; }
.page-header-section .lead, .page-header-section p { font-size: 1.125rem; color: var(--swan-ink-2); max-width: 60ch; }
.breadcrumb { font-size: 0.85rem; --bs-breadcrumb-divider: '/'; }
.breadcrumb a { color: var(--swan-ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--swan-ink); }
.breadcrumb-item.active { color: var(--swan-ink); }

/* ── Cartes et grille du blog ────────────────────────────────────────────── */
.qcd-blog-head h1 { color: var(--swan-ink); }
.qcd-blog-rubrique { border-radius: 999px; border-color: var(--swan-line-strong); color: var(--swan-ink); font-weight: 500; }
.qcd-blog-rubrique:hover { background: var(--swan-surface-1); }
.qcd-blog-rubrique.is-active { background: var(--swan-ink); border-color: var(--swan-ink); color: var(--swan-yellow); }
.qcd-blog-carte {
    border: 1px solid var(--swan-line);
    border-radius: var(--swan-radius-lg);
    background: var(--swan-surface-0);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.qcd-blog-carte:hover { border-color: var(--swan-line-strong); box-shadow: 0 12px 32px rgba(31, 29, 27, 0.10); }
.qcd-blog-carte-visuel img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.qcd-blog-carte-meta, .qcd-article-meta { font-size: 0.8rem; color: var(--swan-ink-2); }
.qcd-blog-carte-meta a, .qcd-article-meta a { color: var(--swan-yellow-text); font-weight: 600; text-decoration: none; }
.qcd-blog-carte-titre { font-family: var(--swan-font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.qcd-blog-carte-titre a { color: var(--swan-ink); text-decoration: none; }
.qcd-blog-carte-titre a:hover { color: var(--swan-link); }
.qcd-blog-page { border-radius: var(--swan-radius-sm); }
.qcd-blog-page.is-active { background: var(--swan-yellow); color: var(--swan-ink); border-color: var(--swan-yellow); }

/* ── L'article : en-tête clair avec l'image à la une à droite ────────────── */
.qcd-article-tete--visuel {
    background: var(--swan-surface-1);
    border-bottom: 1px solid var(--swan-line);
    padding-block: 3.5rem;
}
.qcd-article-tete--visuel .qcd-article-tete__texte h1,
.qcd-article-tete--visuel .qcd-article-tete__texte .qcd-article-meta,
.qcd-article-tete--visuel .qcd-article-tete__texte .qcd-article-meta a { color: var(--swan-ink); }
.qcd-article-tete--visuel .qcd-article-tete__texte .qcd-article-meta a { color: var(--swan-yellow-text); text-decoration: none; }
.qcd-article-tete--visuel .qcd-article-chapo { color: var(--swan-ink-2); font-size: 1.15rem; line-height: 1.5; }
.qcd-article-tete--visuel .qcd-article-meta { border-top: 1px solid var(--swan-line); color: var(--swan-ink-2); }
.qcd-article-tete__visuel img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--swan-radius-lg);
    border: 1px solid var(--swan-line);
    background: var(--swan-surface-0);
}
.qcd-article-corps, .qcd-article-intro { font-size: 1.0625rem; line-height: 1.65; }
.qcd-article-corps h2 { font-size: 1.75rem; font-weight: 600; margin-top: 3rem; }
.qcd-article-corps h3 { font-size: 1.3rem; margin-top: 2rem; }
.qcd-article-corps img, .qcd-article-intro img { max-width: 100%; height: auto; border-radius: var(--swan-radius-md); border: 1px solid var(--swan-line); }
.qcd-article-corps figcaption, .qcd-article-corps .wp-caption-text { font-size: 0.85rem; color: var(--swan-ink-2); margin-top: 0.5rem; }
.qcd-article-corps blockquote { border-left: 3px solid var(--swan-yellow); padding: 0.25rem 0 0.25rem 1.25rem; color: var(--swan-ink-2); font-style: italic; }
.qcd-article-corps table { width: 100%; font-size: 0.95rem; }
.qcd-article-corps th { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--swan-ink-2); background: var(--swan-surface-1); }
.qcd-article-corps td, .qcd-article-corps th { padding: 0.65rem 0.9rem; border-top: 1px solid var(--swan-line); }
.qcd-article-suite { border-top: 1px solid var(--swan-line); }
.qcd-article-suite-titre { font-size: 1.75rem; font-weight: 600; }

/* ── L'encart auteur (E-E-A-T) : photo, nom, fonction, biographie, réseaux ── */
.qcd-auteur {
    background: var(--swan-surface-1);
    border: 1px solid var(--swan-line);
    border-radius: var(--swan-radius-lg);
    padding: 1.75rem;
}
.qcd-auteur__surtitre { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--swan-ink-2); font-family: var(--swan-font-sans); font-weight: 600; }
.qcd-auteur__photo { width: 96px; height: 96px; border: 3px solid var(--swan-surface-0); box-shadow: 0 1px 2px rgba(31, 29, 27, 0.08); }
.qcd-auteur__nom { font-family: var(--swan-font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.qcd-auteur__nom a { color: var(--swan-ink); text-decoration: none; }
.qcd-auteur__nom a:hover { color: var(--swan-link); }
.qcd-auteur__fonction { color: var(--swan-ink-2); font-size: 0.9rem; margin-top: 0.2rem; }
.qcd-auteur__bio { color: var(--swan-ink); line-height: 1.55; }
.qcd-auteur__profils { gap: 0.5rem; flex-wrap: wrap; }
.qcd-auteur__profils a {
    width: 36px; height: 36px; align-items: center; justify-content: center;
    border: 1px solid var(--swan-line-strong); border-radius: 999px; background: var(--swan-surface-0);
    color: var(--swan-ink); padding: 0;
}
.qcd-auteur__profils a:hover { background: var(--swan-ink); color: var(--swan-yellow); border-color: var(--swan-ink); }
.qcd-auteur__profils svg, .front-social-icon { width: 16px; height: 16px; }

/* ── Pied de page : clair, comme le reste du site ────────────────────────── */
.front-footer { background: var(--swan-surface-1); border-top: 1px solid var(--swan-line); color: var(--swan-ink-2); }
.front-footer a { color: var(--swan-ink-2); text-decoration: none; }
.front-footer a:hover { color: var(--swan-ink); text-decoration: underline; }
.front-footer strong { color: var(--swan-ink); font-family: var(--swan-font-display); font-size: 1.1rem; }
/* Le pied en colonnes (maquette « Main ») : la marque à gauche, Produit, Ressources, Légal à droite. */
.front-footer { margin-top: 0 !important; padding: 48px 0 24px !important; }
.front-footer .swan-pied { display: flex; justify-content: space-between; gap: 32px 64px; flex-wrap: wrap; margin: 0 0 32px; }
.swan-pied-marque p { margin: 6px 0 0; font-size: 0.9rem; }
.swan-pied-marque .swan-mono { font-family: var(--swan-font-mono); color: var(--swan-ink); }
.swan-pied-colonnes { display: flex; gap: 32px 56px; flex-wrap: wrap; }
.swan-pied-titre { color: var(--swan-ink); font-weight: 700; font-size: 0.9rem; margin: 0 0 10px; }
.swan-pied-colonnes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
/* La marque avec le logo du cygne. */
.swan-pied-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; }
/* Le bandeau de la lettre d'information, entre les colonnes et la barre basse (comme Carport). */
.swan-lettre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 48px; align-items: center; padding: 24px 0; border-top: 1px solid var(--swan-line); }
@media (max-width: 860px) { .swan-lettre { grid-template-columns: minmax(0, 1fr); } }
.swan-lettre-titre { color: var(--swan-ink); font-family: var(--swan-font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 4px; }
.swan-lettre-texte p:last-child { margin: 0; font-size: 0.9rem; }
.swan-lettre-ligne { display: flex; gap: 8px; }
.swan-lettre-ligne .form-control { min-width: 0; flex: 1; height: 44px; border-color: var(--swan-line-strong); }
.swan-lettre-ligne .btn { white-space: nowrap; }
.swan-lettre-consentement { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 0.8rem; line-height: 1.45; color: var(--swan-ink-2); }
.swan-lettre-consentement input { margin-top: 3px; flex: none; }
.swan-lettre-consentement a { text-decoration: underline; }
/* Le champ leurre : hors de l'écran, pas `display: none`, que certains robots savent lire. */
.swan-leurre { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
/* La barre basse : droits, mentions juridiques, contact, plan du site, langues. */
.swan-pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 16px; }
.swan-pied-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.front-footer-bar { border-top: 1px solid var(--swan-line); font-size: 0.85rem; }
.front-footer-langue-courante { color: var(--swan-ink); font-weight: 600; }
.front-social a { color: var(--swan-ink-2); }
.front-social a:hover { color: var(--swan-ink); }

/* ── Les blocs maison repris du WordPress (App\Site\BlocsSwan) ───────────── */
.swan-encadre {
    border: 1px solid var(--swan-yellow);
    border-left-width: 4px;
    background: var(--swan-yellow-tint);
    border-radius: var(--swan-radius-md);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-weight: 500;
}
.swan-encadre a { color: inherit; text-decoration: underline; }
.swan-appel {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
    background: var(--swan-ink); color: #f3f0ea;
    padding: 1.75rem 2rem; border-radius: var(--swan-radius-lg); margin: 2.5rem 0;
}
.swan-appel__texte { flex: 2 1 20rem; }
.swan-appel__texte p:last-child { margin-bottom: 0; }
.swan-appel__texte strong, .swan-appel__texte h2, .swan-appel__texte h3 { color: #f3f0ea; }
.swan-appel__action { flex: 1 1 10rem; text-align: right; }
.swan-appel__action .btn, .swan-appel__action a.btn { background: var(--swan-yellow); border-color: var(--swan-yellow); color: var(--swan-ink); }
.swan-accordeon { border: 1px solid var(--swan-line); border-radius: var(--swan-radius-md); padding: 0.9rem 1.1rem; margin: 0.5rem 0; background: var(--swan-surface-0); }
.swan-accordeon[open] { border-color: var(--swan-line-strong); }
.swan-accordeon summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.swan-accordeon summary::-webkit-details-marker { display: none; }
.swan-accordeon summary::after { content: "+"; font-family: var(--swan-font-mono); color: var(--swan-ink-2); font-size: 1.1rem; }
.swan-accordeon[open] summary::after { content: "−"; }
.swan-accordeon__titre { display: inline; font-size: 1.05rem; font-weight: 600; margin: 0; font-family: var(--swan-font-sans); }
.swan-accordeon__contenu { padding-top: 0.75rem; color: var(--swan-ink-2); }
.swan-prix { max-width: 640px; margin: 2rem auto; text-align: center; background: var(--swan-surface-1); border: 1px solid var(--swan-line); border-radius: var(--swan-radius-lg); padding: 1.5rem; }
.swan-prix__lecture { margin-top: 0.75rem; font-size: 1.1rem; }
.swan-prix__montant { font-family: var(--swan-font-mono); font-size: 1.5rem; color: var(--swan-ink); }
.swan-prix input[type="range"] { accent-color: var(--swan-yellow-deep); }
.swan-embed { position: relative; padding-top: 56.25%; margin: 1rem 0; border-radius: var(--swan-radius-lg); overflow: hidden; }
.swan-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Le moteur de blocs : encadrés, FAQ, chiffres-clés dans la charte ───────── */
.pb-faq, .pb-box, .pb-card, .pb-steps, .pb-key-figures { border-radius: var(--swan-radius-lg); }
.pb-ranking-stars { color: var(--swan-yellow-deep); }
.pb-ranking-item { border-color: var(--swan-line); border-radius: var(--swan-radius-md); }

@media (max-width: 575.98px) {
    .section { padding: 2rem 0; }
    .page-header-section, .front-home .page-header-section { padding: 2.5rem 0; }
    .qcd-auteur { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .qcd-blog-carte { transition: none; }
}

/* ── Accueil (maquette « Main » du canevas Swan écrans 2026) ────────────────
   L'accueil porte ses bandeaux dans l'INTRODUCTION de la page, rendue pleine largeur par le Cms :
   chaque rangée est un bandeau, son contenu centré sur 1 200 px.
   ⚠ Les bandeaux sont désignés par leur IDENTIFIANT, pas par une classe : le constructeur de pages
   (`qcdgone/builder`, `renderSlice`) écrit deux attributs `class` sur une rangée qui en porte, et le
   navigateur ignore le second. À reprendre par des classes quand le paquet sera corrigé. */
.page-header-section:has(#swan-hero) { background: none; border: 0; padding: 0; }
/* ⚠ Le Cms ne reconnaît comme accueil que la page DÉSIGNÉE (l'anglaise) : celle des autres langues est
   rendue dans un conteneur étroit. On l'ouvre ici plutôt que de recopier le gabarit du socle. */
.page-header-section:has(#swan-hero) > .container { max-width: none; padding: 0; }
.page-header-section :is(#swan-hero, #swan-etapes, #demonstration, #swan-temoins, #swan-prix) { margin: 0; padding: 88px max(16px, calc(50vw - 600px)); gap: 0; }
:is(#swan-hero, #swan-etapes, #demonstration, #swan-temoins, #swan-prix) > [class*="col-"] { padding: 0 16px; }
#swan-hero { padding-top: 72px !important; align-items: center; }
#swan-etapes { background: var(--swan-surface-1); border-top: 1px solid var(--swan-line); border-bottom: 1px solid var(--swan-line); }
#swan-temoins { background: var(--swan-ink); color: #f3f0ea; }
#swan-temoins h2 { color: #f3f0ea; }
#swan-prix > [class*="col-"] { max-width: 760px; margin: 0 auto; }
#swan-hero h1 { font-family: var(--swan-font-display); font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.035em; margin: 18px 0 20px; }
:is(#swan-etapes, #demonstration, #swan-temoins, #swan-prix) h2 { font-family: var(--swan-font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 14px; max-width: 22ch; }
#swan-prix h2 { max-width: none; }
.swan-chapo { font-size: 1.15rem; line-height: 1.6; color: var(--swan-ink-2); max-width: 58ch; }
#swan-temoins .swan-chapo { color: #c9c4ba; }
.swan-pastille-titre { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--swan-yellow-tint); color: var(--swan-yellow-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.swan-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 32px; }
.swan-stats { display: flex; gap: 32px 40px; flex-wrap: wrap; margin: 0; }
.swan-stats dt { font-family: var(--swan-font-mono); font-size: 1.6rem; font-weight: 500; color: var(--swan-ink); }
.swan-stats dd { margin: 0; font-size: 0.85rem; color: var(--swan-ink-2); }

.swan-accueil-carte { background: var(--swan-surface-1); border: 1px solid var(--swan-line); border-radius: var(--swan-radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.swan-accueil-carte-tete, .swan-accueil-carte-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--swan-ink-2); }
.swan-accueil-carte-tete span { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--swan-ink-2); }
.swan-accueil-ligne { background: var(--swan-surface-0); border: 1px solid var(--swan-line); border-radius: var(--swan-radius-md); padding: 12px 14px; display: flex; justify-content: space-between; gap: 12px; }
.swan-accueil-ligne--active { border-color: var(--swan-yellow); box-shadow: 0 0 0 1px var(--swan-yellow); }
.swan-accueil-ligne > div:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.swan-accueil-ligne code { font-family: var(--swan-font-mono); font-size: 0.75rem; color: var(--swan-ink); background: none; padding: 0; overflow-wrap: anywhere; }
.swan-accueil-ligne code + code { color: var(--swan-ink-2); }
.swan-accueil-ligne > div:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.swan-accueil-ligne small { font-size: 0.75rem; font-weight: 600; }
.swan-score { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 22px; padding: 0 8px; border-radius: 999px; font-family: var(--swan-font-mono); font-size: 0.75rem; }
.swan-score--haut { background: var(--swan-ok-tint); color: var(--swan-ok); }
.swan-score--moyen { background: var(--swan-warn-tint); color: var(--swan-warn); }
.swan-score--bas { background: var(--swan-danger-tint); color: var(--swan-danger); }
.swan-ok { color: var(--swan-ok); } .swan-encours { color: var(--swan-yellow-text); } .swan-erreur { color: var(--swan-danger); }

.swan-accueil-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
@media (max-width: 1000px) { .swan-accueil-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .swan-accueil-etapes { grid-template-columns: minmax(0, 1fr); } }
.swan-accueil-etapes article { background: var(--swan-surface-0); border: 1px solid var(--swan-line); border-radius: var(--swan-radius-lg); padding: 22px 22px 18px; }
.swan-accueil-etapes small { font-family: var(--swan-font-mono); font-size: 0.8rem; color: var(--swan-yellow-text); }
.swan-accueil-etapes h3 { font-family: var(--swan-font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 14px; }
.swan-accueil-etapes ul { padding-left: 18px; margin: 0; color: var(--swan-ink-2); font-size: 0.92rem; line-height: 1.55; }
.swan-accueil-etapes li + li { margin-top: 6px; }

#demonstration > [class*="col-"] { align-self: center; }
#demonstration .swan-embed { margin: 0; background: var(--swan-ink); }

.swan-accueil-temoins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
@media (max-width: 900px) { .swan-accueil-temoins { grid-template-columns: minmax(0, 1fr); } }
.swan-accueil-temoins figure { margin: 0; background: #2b2926; border-radius: var(--swan-radius-lg); padding: 22px; }
.swan-accueil-temoins blockquote { margin: 0 0 14px; font-size: 1rem; line-height: 1.55; color: #f3f0ea; }
.swan-accueil-temoins figcaption { font-size: 0.82rem; color: #a8a297; }
.swan-accueil-temoins figcaption a { color: #a8a297; }

@media (max-width: 767px) {
    .page-header-section :is(#swan-hero, #swan-etapes, #demonstration, #swan-temoins, #swan-prix) { padding: 56px 16px; }
    :is(#swan-hero, #swan-etapes, #demonstration, #swan-temoins, #swan-prix) > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    #swan-hero > [class*="col-"] + [class*="col-"] { margin-top: 32px; }
}

/* ── Article (maquette « Article ») : en-tête large, fil d'Ariane au-dessus du titre, colonne de
   lecture et colonne latérale (sommaire, appel vers l'outil). ───────────────────────────────── */
.swan-article-tete { background: var(--swan-surface-1); border-bottom: 1px solid var(--swan-line); padding: 56px 16px; }
.swan-article-tete-grille { max-width: 1136px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.swan-article-tete-grille--visuel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 900px) { .swan-article-tete-grille--visuel { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.swan-article-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: 0.85rem; color: var(--swan-ink-2); }
.swan-article-ariane li + li::before { content: "/"; margin-right: 6px; color: var(--swan-ink-3); }
.swan-article-ariane a { color: var(--swan-ink-2); text-decoration: none; }
.swan-article-ariane a:hover { color: var(--swan-ink); text-decoration: underline; }
.swan-article-tete h1 { font-family: var(--swan-font-display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 18px; }
.swan-article-chapo { font-size: 1.2rem; line-height: 1.55; color: var(--swan-ink-2); max-width: 60ch; margin: 0 0 24px; }
.swan-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 0.9rem; color: var(--swan-ink-2); }
.swan-article-meta a { color: var(--swan-ink); text-decoration: none; }
.swan-article-meta a:hover { text-decoration: underline; }
.swan-article-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--swan-ink); color: var(--swan-yellow); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex: none; }
.swan-article-visuel img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--swan-radius-lg); border: 1px solid var(--swan-line); background: var(--swan-surface-0); }

.swan-article-grille { max-width: 1136px; margin: 0 auto; padding: 48px 16px 24px; display: grid; grid-template-columns: minmax(0, 720px) 280px; gap: 64px; justify-content: space-between; }
@media (max-width: 1000px) { .swan-article-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; } .swan-article-cote { order: -1; } }
.swan-article-cote { display: flex; flex-direction: column; gap: 24px; align-self: start; position: sticky; top: 96px; }
@media (max-width: 1000px) { .swan-article-cote { position: static; } .swan-sommaire { display: none; } }
.swan-sommaire, .swan-sommaire.pb-toc { background: none; border: 0; border-left: 2px solid var(--swan-line); border-radius: 0; padding: 0 0 0 16px; margin: 0; box-shadow: none; }
.swan-sommaire .pb-toc-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--swan-ink-2); margin: 0 0 10px; }
.swan-sommaire ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.swan-sommaire a { color: var(--swan-ink-2); text-decoration: none; font-size: 0.88rem; line-height: 1.35; }
.swan-sommaire a:hover { color: var(--swan-ink); }
/* Les sections seulement : les sous-titres allongeraient le sommaire au-delà de l'écran. */
.swan-sommaire .pb-toc-h3 { display: none; }
.swan-article-appel { background: var(--swan-yellow-tint); border: 1px solid var(--swan-yellow); border-radius: var(--swan-radius-lg); padding: 20px; }
.swan-article-appel-titre { font-weight: 700; margin: 0 0 6px; }
.swan-article-appel p:not(.swan-article-appel-titre) { font-size: 0.9rem; color: var(--swan-ink-2); margin: 0 0 14px; }

/* Bouton secondaire bordé, comme dans l'application : encre sur blanc, jamais le gris de Bootstrap. */
.btn-outline-secondary { color: var(--swan-ink); border-color: var(--swan-line-strong); background: var(--swan-surface-0); font-weight: 600; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { color: var(--swan-ink); background: var(--swan-surface-1); border-color: var(--swan-line-strong); }

/* ── Contact, plan du site, lettre (2026-10-25) ──────────────────────────── */
.swan-contact, .swan-plan, .swan-lettre-page { padding: 48px 0 72px; }
.swan-contact h1, .swan-plan h1, .swan-lettre-page h1 { font-family: var(--swan-font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(2rem, 4vw, 2.75rem); margin: 8px 0 12px; }
.swan-contact-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
@media (max-width: 900px) { .swan-contact-grille { grid-template-columns: minmax(0, 1fr); } }
.swan-contact-intro, .swan-plan-chapo, .swan-lettre-chapo { color: var(--swan-ink-2); font-size: 1.1rem; margin-bottom: 24px; }
.swan-contact-carte, .swan-lettre-carte { background: var(--swan-surface-0); border: 1px solid var(--swan-line); border-radius: var(--swan-radius-lg); padding: 32px; }
.swan-contact-carte .form-control, .swan-contact-carte .form-select { border-color: var(--swan-line-strong); }
.swan-contact-cote { background: var(--swan-surface-1); border: 1px solid var(--swan-line); border-radius: var(--swan-radius-lg); padding: 24px; font-size: 0.95rem; }
.swan-contact-cote-titre { font-weight: 700; color: var(--swan-ink); margin-bottom: 6px; }
.swan-contact-cote ul { padding-left: 18px; margin: 0; }
.swan-contact-cote a:not(.btn) { color: var(--swan-link); }
.swan-lettre-carte { max-width: 640px; }
.swan-plan-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
.swan-plan-sommaire a { border: 1px solid var(--swan-line-strong); border-radius: 999px; padding: 4px 14px; font-size: 0.9rem; color: var(--swan-ink); text-decoration: none; background: var(--swan-surface-0); }
.swan-plan-sommaire a:hover { border-color: var(--swan-ink); }
.swan-plan-section { margin-bottom: 48px; }
.swan-plan-section h2 { font-family: var(--swan-font-display); font-weight: 700; font-size: 1.6rem; padding-bottom: 8px; border-bottom: 1px solid var(--swan-line); margin-bottom: 20px; }
.swan-plan-section h3 { font-size: 1.1rem; font-weight: 700; margin: 28px 0 12px; }
.swan-plan-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px 40px; }
.swan-plan-liste li a { color: var(--swan-link); font-weight: 600; text-decoration: none; }
.swan-plan-liste li a:hover { text-decoration: underline; }
.swan-plan-liste li p { margin: 4px 0 0; font-size: 0.875rem; color: var(--swan-ink-2); }
.swan-plan-liste + .swan-plan-liste { margin-top: 16px; }
/* Le fil d'Ariane du socle ouvre son propre conteneur : dans une page déjà contenue, pas de second retrait. */
.swan-plan .front-container .front-container, .swan-lettre-page .front-container .front-container { padding: 0; }