:root {
    --color-primary: #4F46E5;
    --color-secondary: #FEC90C;
    --color-tertiary: #1E1E1E;
    --color-text: #4B5563;
    --color-muted: #6B7280;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F9FAFB;
}

body {
    font-family: 'Inter', 'Poppins', 'Roboto', sans-serif;
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-bg);
}

h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
}

@media (max-width: 576px) {
    h1 {
        font-size: 1.75rem;
    }
}

.front-navbar {
    background-color: #fff;
    border-bottom: 2px solid var(--color-primary);
}

.front-navbar .nav-link {
    color: #1E1E1E;
}

.front-navbar .nav-link:hover,
.front-navbar .nav-link:focus {
    color: var(--color-primary);
}

/* Entrée de menu mise en avant : rendue en bouton.

   ⚠ La couleur est indispensable, elle ne l'a pas toujours été : cette règle
   n'habillait que la forme et l'ombre, sans fond ni couleur de texte, et rien
   n'émettait la classe. Une entrée « mise en avant » ressemblait donc à un lien
   ordinaire, en plus arrondi.

   ⚠ La couleur de texte est celle de l'encre, pas du fond secondaire : sur un
   jaune de charte, un texte blanc tombe sous le seuil de contraste. */
.front-navbar .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    background-color: var(--color-secondary);
    color: var(--color-tertiary);
    box-shadow: 0 0.5rem 1rem rgba(79, 70, 229, 0.18);
}

.front-navbar .nav-cta:hover,
.front-navbar .nav-cta:focus {
    color: var(--color-tertiary);
    filter: brightness(0.94);
    box-shadow: 0 0.65rem 1.3rem rgba(79, 70, 229, 0.25);
}

/* Décollée de ses voisines des DEUX côtés : la mise en avant est un choix de
   l'opérateur, pas une position — elle peut se retrouver au milieu du menu. */
@media (min-width: 992px) {
    .front-navbar .nav-item:has(> .nav-cta) { margin-inline: 0.5rem; }
}

@media (max-width: 991.98px) {
    .front-navbar .nav-cta { margin-top: 0.5rem; }
}

.front-navbar .mobile-submenu-toggle {
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: 1.25rem;
    line-height: 1;
}

.front-navbar .mobile-submenu-toggle:focus {
    outline: none;
}

.front-navbar .mobile-submenu-toggle .chevron {
    display: inline-block;
    transition: transform 0.3s;
}

.front-navbar .nav-item.dropdown.show .mobile-submenu-toggle .chevron {
    transform: rotate(90deg);
}

@media (min-width: 992px) {
    .front-navbar .mobile-submenu-toggle {
        display: none;
    }
    .front-navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

.front-navbar .container {
    align-items: flex-start;
}

.front-navbar .navbar-brand {
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap;
    white-space: normal;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1E1E1E;
}

@media (max-width: 576px) {
    .front-navbar .navbar-brand {
        font-size: 1rem;
    }
}

.section {
    padding: 2rem 0;
}

.section-alt {
    background-color: var(--color-bg-alt);
}

.front-container {
    max-width: 1200px;
    margin: 0 auto;
}

.front-footer {
    background-color: var(--color-tertiary);
    color: #fff;
}

.front-footer a {
    color: #fff;
    text-decoration: none;
}

.front-footer a:hover {
    color: var(--color-secondary);
}

.breadcrumb {
    --bs-breadcrumb-divider: '>';
    font-size: 0.8rem;
    color: var(--color-muted);
}

.breadcrumb a,
.breadcrumb a:visited {
    color: var(--color-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb-item.active {
    color: var(--color-muted);
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #4338CA;
    border-color: #4338CA;
}


/* ── Bloc page builder « carte Google Maps » (fluide, hauteur au ratio) ── */
.pb-map {
    position: relative;
    width: 100%;
    margin: 1.5rem 0;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
}

.pb-map--16x9 { aspect-ratio: 16 / 9; }
.pb-map--1x1 { aspect-ratio: 1 / 1; }

.pb-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@supports not (aspect-ratio: 1 / 1) {
    .pb-map { height: 0; padding-bottom: 75%; }
    .pb-map--16x9 { padding-bottom: 56.25%; }
    .pb-map--1x1 { padding-bottom: 100%; }
}

/* ── Bloc page builder « classement » (top N + JSON-LD ItemList) ── */
.pb-ranking { margin: 1.5rem 0; }
.pb-ranking-title { font-weight: 700; font-size: 1.2rem; margin: 0 0 .8rem; }
.pb-ranking-list { list-style: none; margin: 0; padding: 0; }
.pb-ranking-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    margin-bottom: .8rem;
}

.pb-ranking-rank {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    background: #4F46E5;
    color: #fff;
}

.pb-ranking-body { flex: 1 1 auto; min-width: 0; }
.pb-ranking-name { margin: 0; font-weight: 600; }
.pb-ranking-rating { margin: .2rem 0 0; font-size: .9rem; color: #6B7280; }
.pb-ranking-stars { color: #F59E0B; letter-spacing: .05em; }
.pb-ranking-desc { margin: .4rem 0 0; }

/* ── Comptes officiels du pied de page ──────────────────────────────────────
   ⚠ Les pictogrammes sont des SVG en ligne peints en `currentColor` : ils
   héritent donc de la couleur du lien du pied de page, et leur survol suit
   sans qu'aucune règle ne le répète. Ne jamais leur poser un `fill` en dur. */
.front-social {
    display: flex;
    gap: .75rem;
    margin: 1.25rem 0 0;
    padding: 0;
    justify-content: center;
}

@media (min-width: 768px) {
    .front-social { justify-content: flex-start; }
}

.front-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    transition: background-color .15s ease, border-color .15s ease;
}

.front-social a:hover,
/* ⚠ Le focus visible est traité comme le survol : la rangée se parcourt au
   clavier, et une cible ronde sans repère de focus est intraversable. */
.front-social a:focus-visible {
    background-color: rgba(255, 255, 255, .12);
    border-color: currentColor;
}

.front-social-icon {
    display: block;
}

/* ── Le blog ────────────────────────────────────────────────────────────────
   ⚠ **Aucune couleur en dur.** Tout passe par les variables déjà émises par le
   gabarit (`--color-*`) et par celles du moteur de blocs (`--pb-*`) : une
   application qui remappe sa charte emmène le blog avec elle, sans toucher à ce
   fichier. C'est la règle du socle, et c'est ce qui rend le bundle clonable.

   ⚠ **La grille s'empile d'elle-même.** `auto-fit` + `minmax` évitent d'écrire
   trois points de rupture pour trois largeurs de vignette ; le blog n'a pas de
   maquette assez contrainte pour justifier mieux. */

.qcd-blog-head h1 { margin-bottom: .5rem; }

.qcd-blog-chapo {
    max-width: 62ch;
    color: var(--color-muted, #6B7280);
    font-size: 1.05rem;
    margin: 0;
}

.qcd-blog-rubriques {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}

.qcd-blog-rubrique {
    display: inline-block;
    padding: .35rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--pb-border, #E5E7EB);
    color: var(--color-text, #4B5563);
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.4;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.qcd-blog-rubrique:hover,
/* ⚠ Le focus visible est traité comme le survol : la rangée se parcourt au
   clavier, et une pastille sans repère de focus est intraversable. */
.qcd-blog-rubrique:focus-visible {
    border-color: var(--color-primary, #4F46E5);
    color: var(--color-primary, #4F46E5);
}

.qcd-blog-rubrique.is-active {
    background-color: var(--color-primary, #4F46E5);
    border-color: var(--color-primary, #4F46E5);
    color: #fff;
}

.qcd-blog-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}

.qcd-blog-carte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pb-border, #E5E7EB);
    border-radius: 14px;
    overflow: hidden;
    background: var(--pb-surface, #fff);
    transition: box-shadow .15s ease, transform .15s ease;
}

.qcd-blog-carte:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .07); }

/* ⚠ `focus-within` et non `focus` : le lien focalisé est le titre, à
   l'intérieur de la carte. Sans cela, tabuler dans la liste ne montre rien. */
.qcd-blog-carte:focus-within { box-shadow: 0 8px 24px rgba(0, 0, 0, .07); }

.qcd-blog-carte-visuel { display: block; line-height: 0; }

.qcd-blog-carte-visuel img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.qcd-blog-carte-corps { padding: 1.25rem; }

.qcd-blog-carte-meta,
.qcd-article-meta {
    font-size: .85rem;
    color: var(--color-muted, #6B7280);
    margin: 0 0 .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: baseline;
}

.qcd-blog-carte-meta a,
.qcd-article-meta a {
    color: var(--color-primary, #4F46E5);
    text-decoration: none;
}

.qcd-blog-carte-meta a:hover,
.qcd-article-meta a:hover { text-decoration: underline; }

.qcd-blog-carte-titre {
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0 0 .6rem;
}

.qcd-blog-carte-titre a {
    color: var(--color-tertiary, #1E1E1E);
    text-decoration: none;
}

.qcd-blog-carte-titre a:hover { color: var(--color-primary, #4F46E5); }

.qcd-blog-carte-chapo {
    margin: 0;
    color: var(--color-text, #4B5563);
    font-size: .95rem;
}

.qcd-blog-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 2.5rem;
    justify-content: center;
}

.qcd-blog-page {
    min-width: 2.25rem;
    padding: .35rem .6rem;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--pb-border, #E5E7EB);
    color: var(--color-text, #4B5563);
    text-decoration: none;
}

.qcd-blog-page:hover { border-color: var(--color-primary, #4F46E5); }

.qcd-blog-page.is-active {
    background-color: var(--color-primary, #4F46E5);
    border-color: var(--color-primary, #4F46E5);
    color: #fff;
}

.qcd-blog-vide { color: var(--color-muted, #6B7280); }

/* ── L'article ───────────────────────────────────────────────────────────── */

.qcd-article-tete { padding-bottom: 0; }

/* ── Le bandeau d'article avec image à la une ───────────────────────────────
   ⚠ **Deux colonnes sur grand écran, empilées sur téléphone.** L'image est à
   droite du titre plutôt qu'en fond : une illustration claire sous un titre
   blanc devient illisible, et l'assombrir pour rattraper détruit l'illustration.

   ⚠ **Aucune couleur en dur** : tout vient des variables de marque, donc du
   back-office. Écrire une valeur ici rendrait le réglage sans effet, y compris
   en marque blanche. */
.qcd-article-tete--visuel {
    background: var(--color-primary, #0B163F);
    padding-block: 3rem;
    margin-bottom: 2rem;
}

.qcd-article-tete__grille {
    display: grid;
    /* ⚠ `minmax(0, …)` sur la première piste : sans lui, un titre long refuse
       de se couper et fait déborder la grille. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

/* ⚠ **PIÈGE DE SPÉCIFICITÉ, troisième occurrence dans ce parc.** Les
   applications injectent leur charte dans le `<head>` par un réglage, donc
   APRÈS cette feuille : à spécificité égale, c'est l'injection qui gagne. Or
   elles posent toutes `.front-container h1 { color: <nuit> }` — (0,1,1), comme
   `.qcd-article-tete--visuel h1`. Le titre sortait donc en NUIT SUR NUIT :
   invisible, sur le seul élément que le lecteur cherche en arrivant.

   ⚠ **On passe à (0,2,1) en ajoutant la colonne de texte**, plutôt que
   `!important` : un `!important` ici interdirait à une application de
   personnaliser son bandeau, ce qui est exactement ce que la charte en base
   existe pour permettre. */
.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: #fff;
}

/* ⚠ Le méta passe sous le chapô : c'est une fiche d'identité, pas une
   introduction. Un filet léger le sépare de ce qu'il documente. */
.qcd-article-tete--visuel .qcd-article-meta {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .9rem;
}

/* ⚠ Le chapô ne prend pas le blanc pur du titre : deux blancs identiques
   aplatissent la hiérarchie, et c'est le titre qui doit accrocher en premier. */
.qcd-article-tete--visuel .qcd-article-chapo {
    color: rgba(255, 255, 255, .82);
}

.qcd-article-tete--visuel .qcd-article-tete__texte .qcd-article-meta a {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.qcd-article-tete__visuel img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .75rem;
}

/* ⚠ Sous 900 px on empile, et l'image passe APRÈS le texte : sur téléphone, la
   première hauteur d'écran doit porter le titre — c'est lui qui dit au lecteur
   qu'il est au bon endroit. */
@media (max-width: 899.98px) {
    .qcd-article-tete__grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .qcd-article-tete--visuel {
        padding-block: 2rem;
    }
}

.qcd-article-tete h1 { margin: .25rem 0 .75rem; }

/* ⚠ **La mesure est bornée, et ce n'est pas cosmétique.** Une ligne de texte
   courant au-delà de ~75 caractères fait perdre le début de la ligne suivante
   à chaque retour. Le conteneur du site fait 1200 px : sans cette borne, un
   article s'y étale sur toute la largeur. */
.qcd-article-chapo {
    max-width: 68ch;
    font-size: 1.1rem;
    color: var(--color-text, #4B5563);
    margin: 0;
}

.qcd-article-corps { max-width: 760px; }

.qcd-article-corps h2 { margin-top: 2.5rem; }

.qcd-article-corps h3 { margin-top: 1.75rem; }

.qcd-article-suite {
    border-top: 1px solid var(--pb-border, #E5E7EB);
    padding-top: 2.5rem;
}

.qcd-article-suite-titre { margin-bottom: 1.5rem; }

.qcd-article-retour { margin: 2rem 0 0; }

/* ⚠ **Le chapô, l'introduction et le corps partagent la même mesure.** Le
   conteneur du site fait 1200 px ; y étaler du texte courant fait perdre le
   début de la ligne suivante à chaque retour. Les trois zones sont bornées
   ensemble, sinon l'introduction s'élargit là où le corps se resserre — la
   rupture se voit immédiatement à la lecture. */
.qcd-article-intro { max-width: 760px; }

.qcd-article-intro > .row:first-child p:first-child {
    font-size: 1.05rem;
    color: var(--color-tertiary, #1E1E1E);
}

/* ⚠ L'en-tête et le fil d'Ariane se touchaient : la marge du chapô était
   absorbée par le `padding-bottom: 0` de l'en-tête. */
.qcd-article-tete { padding-bottom: 1rem; }

/* ⚠ **Toute la colonne de l'article partage la même mesure**, en-tête et fil
   d'Ariane compris. Borner le seul corps donnait un titre commençant à gauche
   du conteneur de 1200 px et un texte commençant 190 px plus loin : le décalage
   se lit comme un défaut de gabarit. Le bloc « À lire ensuite » vit hors de
   `<article>` et garde la pleine largeur — sa grille de vignettes a besoin de
   la place, et le changement de rythme y est voulu. */
.qcd-article .container.front-container { max-width: 760px; }

/* ── L'appel à l'action d'un article ────────────────────────────────────────
   ⚠ **Ciblé par PRÉFIXE d'identifiant, pas par classe.** Le moteur de rendu
   émet deux attributs `class` sur une ligne et le navigateur ignore le second :
   une classe posée sur une ligne est perdue. L'identifiant, lui, est appliqué —
   et il est numéroté parce qu'un article peut porter deux appels à l'action. */
[id^="qcd-article-cta-"] {
    margin: 3rem 0;
    padding: 2rem 2rem 2.25rem;
    border-radius: 16px;
    background: var(--color-primary, #4F46E5);
    color: #fff;
}

[id^="qcd-article-cta-"] h3 {
    color: #fff;
    margin: 0 0 .6rem;
    font-size: 1.4rem;
    line-height: 1.3;
}

[id^="qcd-article-cta-"] p {
    color: rgba(255, 255, 255, .92);
    margin: 0 0 1.4rem;
}

/* ⚠ **Spécificité supérieure, et non un utilitaire concurrent.** Le bouton rend
   `class="btn btn-primary btn-lg qcd-article-cta-btn"` : les classes de base
   sont toujours là. Un `btn-light` posé à côté se battrait avec `btn-primary`
   selon l'ordre du fichier — la seule façon fiable de gagner est d'être plus
   spécifique. */
[id^="qcd-article-cta-"] .btn.qcd-article-cta-btn {
    background: var(--color-secondary, #FEC90C);
    border-color: var(--color-secondary, #FEC90C);
    color: var(--color-tertiary, #1E1E1E);
    font-weight: 700;
    padding: .75rem 1.75rem;
    border-radius: 999px;
}

[id^="qcd-article-cta-"] .btn.qcd-article-cta-btn:hover,
[id^="qcd-article-cta-"] .btn.qcd-article-cta-btn:focus-visible {
    filter: brightness(1.07);
    color: var(--color-tertiary, #1E1E1E);
}

[id^="qcd-article-cta-"] .qcd-article-cta-note p {
    margin: 1rem 0 0;
    font-size: .875rem;
    color: rgba(255, 255, 255, .75);
}

/* ── Les sources d'un article ───────────────────────────────────────────────
   ⚠ Une seule liste, en fin d'article. Répéter l'éditeur, l'échantillon et la
   date à chaque chiffre alourdit la lecture sans rien ajouter : la mention
   complète est faite une fois, à la première citation, et le lecteur qui veut
   vérifier trouve tout ici. */
.qcd-article-sources {
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--pb-border, #E5E7EB);
    background: var(--color-bg-alt, #F9FAFB);
    border-radius: 0 10px 10px 0;
    font-size: .9rem;
}

.qcd-article-sources ul { margin: 0; padding-left: 1.1rem; }

.qcd-article-sources li { margin-bottom: .4rem; }

.qcd-article-sources li:last-child { margin-bottom: 0; }

/* La mention discrète sous un tableau ou un graphique. */
.qcd-source-line {
    margin: -.5rem 0 1.5rem;
    font-size: .85rem;
    color: var(--color-muted, #6B7280);
}

/* ⚠ La mention de source porte une marge NÉGATIVE pour se coller au tableau
   qu'elle légende. Dans l'encadré des sources, elle n'a rien à remonter : la
   marge négative la faisait chevaucher la dernière ligne de la liste. */
.qcd-article-sources .qcd-source-line { margin: 1rem 0 0; }

/* ── Bloc de formule ────────────────────────────────────────────────────────
   Un indicateur se présente en trois temps : ce qu'il mesure, comment on le
   calcule, un exemple chiffré. L'encadré isole le calcul du texte courant —
   c'est ce qui rend une définition reprenable telle quelle, par un lecteur
   comme par un moteur. */
.qcd-formule {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--pb-border, #E5E7EB);
    border-left: 4px solid var(--color-primary, #4F46E5);
    border-radius: 0 12px 12px 0;
    background: var(--color-bg-alt, #F9FAFB);
}

.qcd-formule-titre {
    margin: 0 0 .5rem;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted, #6B7280);
}

/* ⚠ La formule elle-même passe en chasse fixe : c'est ce qui la distingue
   visuellement de la phrase qui l'entoure et la rend copiable sans ambiguïté
   sur les espaces. */
.qcd-formule-corps {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
    color: var(--color-tertiary, #1E1E1E);
}

.qcd-formule-exemple {
    margin: .75rem 0 0;
    font-size: .92rem;
    color: var(--color-text, #4B5563);
}

/* ── Figure et légende ──────────────────────────────────────────────────────
   ⚠ La légende porte la même classe que la mention de source d'un tableau, et
   donc sa marge négative : ici elle doit au contraire se détacher du visuel. */
.qcd-figure { margin: 1.5rem 0; }

.qcd-figure .qcd-source-line { margin: .75rem 0 0; }


/* ── La barre basse du pied ──────────────────────────────────────────────────
   ⚠ **`flex-wrap` et non une grille** : ses trois groupes n'ont pas de largeur
   commune — un copyright fait trois mots, les mentions de réassurance en font
   quinze. Une grille leur imposerait des colonnes égales, et la barre serait
   vide à gauche et serrée à droite sur toutes les largeurs intermédiaires.

   ⚠ **Aucune largeur fixe, aucun `min-width`** : c'est le pied qui fait
   déborder une page sur téléphone, et le débordement horizontal ne se voit pas
   en réduisant une fenêtre de bureau — la barre de défilement y est déjà
   comptée dans la largeur. */
.front-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .875rem;
}

.front-footer-langues {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ⚠ La langue COURANTE n'est pas un lien : un lien vers la page qu'on regarde
   déjà est une impasse, et il double l'entrée du sélecteur. */
.front-footer-langue-courante {
    font-weight: 600;
    opacity: .9;
}

.front-footer-langues a {
    opacity: .75;
    text-decoration: none;
}

.front-footer-langues a:hover { opacity: 1; }

/* ⚠ Une LISTE, pas des `<span>` séparés par des points : un lecteur d'écran
   annonce « liste de quatre éléments » et les parcourt un à un. Des points
   médians se lisent en toutes lettres au milieu de la phrase. */
.front-footer-notes {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin: 0;
    margin-left: auto;
    opacity: .8;
}

.front-footer-notes li { white-space: nowrap; }

/* ⚠ En dessous de 576 px, les mentions repassent à gauche : collées à droite
   sur une seule colonne, elles s'alignent sur un bord que plus rien d'autre ne
   suit. */
@media (max-width: 575.98px) {
    .front-footer-notes { margin-left: 0; }
    .front-footer-notes li { white-space: normal; }
}

/* ── La signature de l'auteur, en fin d'article ──────────────────────────────
   ⚠ **Elle doit se DISTINGUER du corps.** Posée en texte simple, elle se lit
   comme un dernier paragraphe de l'article, et la signature disparaît dans ce
   qu'elle est censée signer. */
.qcd-auteur {
    border: 1px solid var(--color-border, #E4EAF4);
    border-radius: 12px;
    padding: 1.5rem;
    background: #FAFBFE;
}

.qcd-auteur__surtitre {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-secondary, #63789A);
    margin: 0 0 1rem;
}

.qcd-auteur__corps {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* ⚠ `flex-shrink: 0` : sans lui, une biographie longue écrase le portrait en
   ovale — et le masque rond en fait une ellipse, pas un cercle. */
.qcd-auteur__photo {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.qcd-auteur__texte { min-width: 0; }

.qcd-auteur__nom { margin: 0 0 .5rem; font-weight: 700; }

/* ⚠ La fonction est sur sa propre ligne à partir de la largeur où elle tient :
   collée au nom sur un écran étroit, les deux se lisent comme un seul titre. */
.qcd-auteur__fonction {
    display: block;
    font-weight: 400;
    font-size: .9rem;
    color: var(--color-text-secondary, #63789A);
}

.qcd-auteur__bio { margin: 0; }

.qcd-auteur__profils {
    display: flex;
    gap: .75rem;
    margin: .75rem 0 0;
}

.qcd-auteur__profils a { display: inline-flex; padding: .25rem; }

/* ⚠ En dessous de 480 px, le portrait passe au-dessus : à côté d'une
   biographie de trois lignes, il ne laisse que quelques mots par ligne. */
@media (max-width: 479.98px) {
    .qcd-auteur__corps { flex-direction: column; }
}