/* ------------------------------------------------------------------
   Compléments propres au site Maxime GUINARD.
   Chargé après style.min.css : ne modifie jamais le design system,
   il ne fait qu'ajouter ce qui lui manque.
   ------------------------------------------------------------------ */

/* Logo : une seule image source, déclinée en blanc sur fond sombre
   et laissée en rouge de marque sur l'en-tête jaune au défilement. */
.brand-logo-light { filter: brightness(0) invert(1); }
.brand-footer .brand-mark img { filter: brightness(0) invert(1); }

/* ------------------------------------------------------------------
   Encart d'aide dans les articles.
   Le design system colore tous les liens de cet encart en cyan, ce qui
   rendait le bouton illisible : cyan sur fond jaune. On rétablit le
   contraste standard des boutons accent (encre sombre sur jaune).
   ------------------------------------------------------------------ */
.article-help-card .button-accent,
.article-help-card .button-accent:hover {
    color: var(--ink);
    font-size: .82rem;
}

.article-help-card .button-light,
.article-help-card .button-dark { color: var(--white); }

/* La deuxième carte d'étape a un fond cyan clair : le gris « muted »
   du design system y descend à 3,9:1. On le fonce pour rester lisible. */
.approach-step:nth-child(2) p { color: var(--ink-3); }

/* ------------------------------------------------------------------
   Compétences : cadrans de progression réels.
   ------------------------------------------------------------------ */
.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 44px 26px;
}

.skill-card {
    display: grid;
    justify-items: center;
    gap: 16px;
    text-align: center;
}

.skill-dial {
    position: relative;
    display: grid;
    width: 132px;
    height: 132px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--accent) calc(var(--skill-value, 0) * 3.6deg), rgba(18, 39, 43, .1) 0);
}

.skill-dial::after {
    position: absolute;
    inset: 15px;
    content: "";
    border-radius: 50%;
    background: var(--white);
}

.skill-dial strong {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
}

.skill-card p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 1.25;
}

.skill-card small {
    color: var(--muted);
    font-size: .78rem;
}

/* Variante sur fond sombre */
.section-dark .skill-dial { background: conic-gradient(var(--accent) calc(var(--skill-value, 0) * 3.6deg), rgba(255, 255, 255, .14) 0); }
.section-dark .skill-dial::after { background: var(--ink); }
.section-dark .skill-card small { color: rgba(255, 255, 255, .6); }

@media (max-width: 700px) {
    .skill-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 34px 18px; }
    .skill-dial { width: 108px; height: 108px; }
    .skill-dial::after { inset: 12px; }
    .skill-dial strong { font-size: 1.3rem; }
}

/* ------------------------------------------------------------------
   Chiffres clés : le design system prévoit 3 colonnes, nous en avons 4.
   ------------------------------------------------------------------ */
.proof-stats.proof-stats-4 {
    grid-template-columns: repeat(2, 1fr);
    align-content: center;
    align-self: center;
}
.proof-stats.proof-stats-4 > div:nth-child(-n+2) { border-top: 1px solid rgba(18, 39, 43, .2); }
.proof-stats.proof-stats-4 > div:nth-child(odd) { border-left: 1px solid rgba(18, 39, 43, .2); }
.proof-stats.proof-stats-4 > div { border-bottom: 1px solid rgba(18, 39, 43, .2); }

@media (max-width: 620px) {
    .proof-stats.proof-stats-4 { grid-template-columns: 1fr; }
    .proof-stats.proof-stats-4 > div { border-right: 0; border-left: 1px solid rgba(18, 39, 43, .2); }
}

/* ------------------------------------------------------------------
   Bandeau clients placé dans le hero de la page d'accueil.
   ------------------------------------------------------------------ */
.home-trust-block { display: grid; gap: 22px; justify-items: center; text-align: center; }
.home-trust-block .trust-strip-heading p { margin: 0; }

/* ------------------------------------------------------------------
   Rythme vertical unifié.
   Le design system fait varier l'espacement des sections de 90 à 160 px
   selon la largeur d'écran, ce qui crée des trous irréguliers. On fixe
   une valeur unique pour tout le site.
   ------------------------------------------------------------------ */
.section { padding: 60px 0; }
.page-reel-section { padding: 60px 0; }
.final-cta { padding: 60px 0; }

@media (max-width: 900px) {
    .section,
    .final-cta { padding: 48px 0; }
}

/* ------------------------------------------------------------------
   Logos clients : visibles, pas désaturés.
   Le design system les affiche en niveaux de gris à 72 % d'opacité,
   ce qui les fait passer pour des logos inactifs.
   ------------------------------------------------------------------ */
.client-marquee-item img {
    filter: none;
    opacity: 1;
}

.client-marquee-item:hover img { transform: scale(1.06); }

/* ------------------------------------------------------------------
   Bloc « Qui je suis » : chiffres alignés sur le texte de gauche,
   titre ramené à une taille raisonnable.
   ------------------------------------------------------------------ */
.intro-grid { align-items: center; }

.intro-copy h2 {
    max-width: 620px;
    font-size: clamp(2rem, 3.1vw, 3.2rem);
}

/* ------------------------------------------------------------------
   Vignette d'expertise : affichée au-dessus du curseur.
   ------------------------------------------------------------------ */
/* La vignette est ancrée sur le curseur (top/left posés en JS) puis
   remontée de toute sa hauteur plus 20 px : son bas flotte donc juste
   au-dessus du pointeur. L'origine de transformation est calée en bas
   pour que la mise à l'échelle parte du curseur et non du centre —
   sans quoi la vignette « saute » à l'apparition.
   La borne verticale de placeFollower() (main.min.js) réserve 214 px
   au-dessus du curseur : elle doit rester cohérente avec cette hauteur. */
.expertise-follower {
    transform-origin: 0 100%;
    transform: translate(18px, calc(-100% - 20px)) rotate(-3deg) scale(.78);
}

.expertise-follower.is-visible {
    transform: translate(18px, calc(-100% - 20px)) rotate(-3deg) scale(1);
}

/* ------------------------------------------------------------------
   Corrections de lisibilité.
   Plusieurs composants du design system sont prévus pour un fond sombre.
   Réutilisés sur fond clair, leur couleur devient illisible : on rétablit
   un contraste suffisant sans toucher au fichier d'origine.
   ------------------------------------------------------------------ */
.section-light .mini-label,
.article-card-body .mini-label,
.article-card .mini-label,
.related-article-card .mini-label { color: var(--ink-3); }

.article-sidebar .footer-heading { color: var(--ink); }

/* ------------------------------------------------------------------
   Passerelles entre répertoires.
   Le design system passe le fond en blanc au survol, mais garde le texte
   blanc hérité de la section sombre : le libellé devenait invisible.
   ------------------------------------------------------------------ */
.hub-cross-links a:hover,
.hub-cross-links a:focus-visible {
    color: var(--ink);
    background: var(--white);
    border-color: var(--white);
    opacity: 1;
}

.hub-cross-links a:hover strong,
.hub-cross-links a:hover small,
.hub-cross-links a:focus-visible strong,
.hub-cross-links a:focus-visible small { color: var(--ink); }

/* ------------------------------------------------------------------
   Répertoires denses.
   Avec plus de cent entrées, les grandes cartes du design system
   deviennent illisibles : on passe à une liste compacte en colonnes.
   ------------------------------------------------------------------ */
.directory-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
}

.directory-filter input {
    flex: 1 1 280px;
    max-width: 420px;
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-family: inherit;
    font-size: .95rem;
}

.directory-filter input:focus {
    border-color: var(--ink);
    outline: 2px solid rgba(18, 39, 43, .12);
    outline-offset: 2px;
}

.directory-filter .filter-status { margin: 0; font-size: .82rem; }

.directory-compact { display: grid; gap: 8px; }

.directory-compact-group {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.directory-compact-letter {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1;
}

.directory-compact-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2px 18px;
}

.directory-compact-list a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--ink);
    font-size: .93rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.directory-compact-list a:hover,
.directory-compact-list a:focus-visible {
    color: var(--white);
    background: var(--ink);
    opacity: 1;
}

.directory-compact-group[hidden],
.directory-compact-list a[hidden] { display: none; }

.directory-empty { margin-top: 18px; color: var(--ink-3); }

@media (max-width: 640px) {
    .directory-compact-group { grid-template-columns: 1fr; gap: 8px; }
    .directory-compact-letter { font-size: 1.3rem; }
}

/* ------------------------------------------------------------------
   Parcours professionnel : chaque expérience doit se détacher de la
   suivante, sinon les blocs se lisent comme un seul paragraphe.
   ------------------------------------------------------------------ */
.agency-timeline .timeline-grid {
    padding-bottom: 34px;
    margin-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.agency-timeline .timeline-grid:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.agency-timeline h3 { margin-bottom: 12px; }
.agency-timeline .mini-label { margin-bottom: 10px; }
.agency-timeline .timeline-grid > .mini-label { margin-bottom: 0; }

/* Le gris « muted » est prévu pour le fond clair : sur fond sombre il
   tombe à 3,3:1. On le remplace par un blanc atténué. */
.section-dark .agency-timeline p,
.section-dark .agency-timeline .mini-label,
.section-dark .timeline-grid p,
.section-dark .check-list p,
.section-dark .capability-card p { color: rgba(255, 255, 255, .74); }

.article-author p,
.article-author a { color: var(--ink-3); }

.pros-cons li,
.article-figure figcaption,
.article-table td { color: var(--ink-3); }

/* Cartes sur fond clair : le gris « muted » plafonne à 4,2:1. */
.section-light .capability-card p,
.section-light .capability-card .card-index,
.section-light .approach-step p,
.filter-status { color: var(--ink-3); }

/* ------------------------------------------------------------------
   Blog : confort de lecture.
   ------------------------------------------------------------------ */

/* Toutes les images de l'univers blog reçoivent le même arrondi. */
.article-content img,
.article-card-thumbnail img,
.related-article-thumbnail img,
.article-editorial-visual img,
.article-figure img { border-radius: 16px; }

.article-card-thumbnail,
.related-article-thumbnail { overflow: hidden; border-radius: 16px; }

/* Article mis en avant : l'image occupait toute la hauteur de l'écran. */
.testimonial-feature .article-card-thumbnail { display: block; max-height: 340px; }
.testimonial-feature .article-card-thumbnail img { height: 340px; object-fit: cover; }

@media (max-width: 760px) {
    .testimonial-feature .article-card-thumbnail,
    .testimonial-feature .article-card-thumbnail img { max-height: 210px; height: 210px; }
}

/* Le titre du tableau touchait la première ligne. */
.article-table caption { padding: 18px 22px 14px; }

/* La citation était collée au paragraphe précédent. */
.article-content .large-quote,
blockquote.large-quote { margin: 46px 0 42px; padding-left: 26px; border-left: 3px solid var(--accent); }
.article-content .large-quote p { margin: 0; }

/* Respiration autour des titres de section dans le corps d'article. */
.article-content h2 { margin-top: 52px; }
.article-content h2:first-child { margin-top: 0; }
.article-content h3 { margin-top: 34px; }

/* ------------------------------------------------------------------
   Questions fréquentes : lisibles et aérées.
   ------------------------------------------------------------------ */
.article-faq,
.faq-section .accordion {
    display: grid;
    gap: 12px;
    margin-top: 26px;
}

.article-faq .accordion-item,
.faq-section .accordion .accordion-item {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.article-faq .accordion-item[open],
.faq-section .accordion .accordion-item[open] {
    border-color: rgba(18, 39, 43, .3);
    box-shadow: 0 12px 34px rgba(12, 31, 34, .07);
}

.article-faq summary,
.faq-section .accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.02rem;
    letter-spacing: -.01em;
    list-style: none;
}

.article-faq summary::-webkit-details-marker,
.faq-section .accordion summary::-webkit-details-marker { display: none; }

/* Un signe explicite remplace le triangle par défaut du navigateur. */
.article-faq summary::after,
.faq-section .accordion summary::after {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    content: "+";
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.article-faq .accordion-item[open] summary::after,
.faq-section .accordion .accordion-item[open] summary::after {
    content: "−";
    background: var(--accent);
    border-color: var(--accent);
}

.article-faq summary:hover,
.faq-section .accordion summary:hover { background: var(--paper); }

.article-faq .accordion-panel,
.faq-section .accordion .accordion-panel { padding: 0 22px 20px; }

.article-faq .accordion-panel p,
.faq-section .accordion .accordion-panel p { margin: 0; color: var(--ink-3); line-height: 1.65; }

/* ------------------------------------------------------------------
   Encart auteur : portrait à gauche, texte à droite.
   ------------------------------------------------------------------ */
.article-author {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    margin-top: 48px;
}

.article-author img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.article-author .mini-label { margin: 0 0 6px; color: var(--ink-3); }

.article-author-name { margin: 0 0 10px; }
.article-author-name strong { display: block; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em; }
.article-author-name span { color: var(--ink-3); font-size: .92rem; }

.article-author p { color: var(--ink-3); }

.article-author-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; }
.article-author-links a { color: var(--ink); font-size: .85rem; font-weight: 800; }

@media (max-width: 620px) {
    .article-author { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
    .article-author img { width: 104px; height: 104px; }
}

/* ------------------------------------------------------------------
   Avis : le logo Google précède les étoiles, pour montrer l'origine.
   ------------------------------------------------------------------ */
.testimonial-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.testimonial-rating img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
}

.testimonial-rating span { letter-spacing: .1em; }

/* ------------------------------------------------------------------
   Bandeau des plateformes maîtrisées, dans le pied de page.
   ------------------------------------------------------------------ */
.footer-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 30px;
    padding: 0 24px 34px;
    margin: 0 auto;
}

.footer-platforms p {
    flex: 1 0 100%;
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .5);
    font-size: .7rem;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
}

.footer-platforms span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .62);
    font-size: .82rem;
    font-weight: 700;
}

.footer-platforms img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: grayscale(1) brightness(2.2);
    opacity: .8;
}

/* ------------------------------------------------------------------
   Articles : composants absents du design system.
   ------------------------------------------------------------------ */

/* Tableaux comparatifs */
.article-table { margin: 42px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.article-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.article-table caption { padding: 18px 22px 0; color: var(--muted); font-size: .74rem; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.article-table th,
.article-table td { padding: 15px 22px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-table thead th { color: var(--ink); background: var(--paper); font-family: var(--font-display); font-size: .82rem; white-space: nowrap; }
.article-table tbody tr:last-child td { border-bottom: 0; }
.article-table tbody th { font-family: var(--font-display); font-size: .95rem; font-weight: 700; }
.article-table td { color: var(--ink-3); }

/* Avantages et inconvénients */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 42px 0; }
.pros-cons > div { padding: 28px 30px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.pros-cons > div.is-cons { background: var(--paper); }
.pros-cons h3 { margin: 0 0 16px; font-size: 1.25rem; }
.pros-cons ul { display: grid; gap: 11px; padding: 0; margin: 0; list-style: none; }
.pros-cons li { position: relative; padding-left: 26px; color: var(--ink-3); font-size: .9rem; line-height: 1.55; }
.pros-cons li::before { position: absolute; left: 0; font-weight: 900; }
.pros-cons .is-pros-list li::before { color: #1d7a4c; content: "+"; }
.pros-cons .is-cons-list li::before { color: #b03636; content: "−"; }

/* Figures illustratives */
.article-figure { margin: 42px 0; }
.article-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.article-figure figcaption { margin-top: 12px; color: var(--muted); font-size: .82rem; line-height: 1.5; }

/* Appel à l'action inséré dans le corps de l'article */
.article-cta { display: grid; align-items: center; gap: 20px 34px; padding: 30px 34px; margin: 44px 0; color: var(--white); border-radius: 18px; background: var(--ink); grid-template-columns: 1fr auto; }
.article-cta p { margin: 0; color: rgba(255, 255, 255, .78); font-size: .95rem; }
.article-cta strong { display: block; margin-bottom: 6px; color: var(--white); font-family: var(--font-display); font-size: 1.3rem; }
.article-cta .button { white-space: nowrap; }

@media (max-width: 780px) {
    .pros-cons, .article-cta { grid-template-columns: 1fr; }
    .article-table th, .article-table td { padding: 13px 16px; }
}

/* ------------------------------------------------------------------
   Descriptions ajoutées sous les entrées de menu.
   ------------------------------------------------------------------ */
.nav-service-list a {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 2px 12px;
}

.nav-service-list a > span {
    grid-row: 1 / 3;
    align-self: center;
}

.nav-service-list strong {
    font-family: var(--font-display);
    font-size: 1rem;
}

.nav-service-list small {
    color: var(--muted);
    font-size: .7rem;
    font-family: var(--font-body);
}

.nav-service-list a:hover strong { color: #4a5b00; }

/* Répertoires du menu : même traitement que les entrées de prestation. */
.nav-hub-links a {
    display: grid;
    gap: 1px;
    padding: 7px 0;
}

.nav-hub-links strong { font-family: var(--font-display); font-size: .92rem; }
.nav-hub-links small { color: var(--muted); font-size: .68rem; }
.nav-hub-links a:hover strong { color: #4a5b00; }

/* ==================================================================
   BLOC D'OPPOSITION — « le constat » face à « la réponse »
   Deux colonnes de même hauteur, lisibles en vis-à-vis. Remplace un
   détournement de .intro-grid qui décalait la seconde colonne et
   laissait les titres hériter de la taille des titres de section.
   ================================================================== */

.contrast-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 44px;
}

.contrast-side {
    display: flex;
    flex-direction: column;
    padding: 38px 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* Le problème reste neutre, la réponse est mise en avant : la
   hiérarchie visuelle doit porter la démonstration. */
.contrast-side-probleme { background: var(--paper); }
.contrast-side-reponse { color: var(--white); background: var(--ink); border-color: var(--ink); }

.contrast-label {
    margin-bottom: 14px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.contrast-side-reponse .contrast-label { color: var(--accent); }

.contrast-lead {
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.9vw, 1.85rem);
    letter-spacing: -.03em;
    line-height: 1.12;
}

.contrast-side p { color: var(--ink-3); font-size: .95rem; }

/* Sélecteur composé : la règle ci-dessus, plus spécifique, ramenait
   l'accroche à la taille du texte courant. */
.contrast-side .contrast-lead {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.9vw, 1.85rem);
    line-height: 1.12;
}
.contrast-side-reponse p { color: rgba(255, 255, 255, .72); }
.contrast-side-reponse .contrast-lead { color: var(--white); }
.contrast-side-reponse a { color: var(--cyan); text-decoration: underline; }
.contrast-side-reponse a:hover { color: var(--accent); }

.contrast-list {
    margin: auto 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}
.contrast-side-reponse .contrast-list { border-top-color: rgba(255, 255, 255, .18); }

.contrast-list li {
    position: relative;
    padding: 7px 0 7px 26px;
    font-size: .89rem;
}

/* Repère typographique plutôt qu'une puce : croix pour le constat,
   coche pour la réponse. */
.contrast-side-probleme .contrast-list li::before {
    content: "\00d7";
    position: absolute;
    left: 0;
    color: var(--bad, #b03636);
    font-weight: 800;
}
.contrast-side-reponse .contrast-list li { color: rgba(255, 255, 255, .84); }
.contrast-side-reponse .contrast-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 800;
}

@media (max-width: 900px) {
    .contrast-pair { grid-template-columns: 1fr; }
    .contrast-side { padding: 30px 26px; }
}

/* ==================================================================
   MES VALEURS — six cartes sur trois colonnes
   Les intitulés étaient en h2 : ils héritaient de la taille des titres
   de section et débordaient de leur carte.
   ================================================================== */

.values-grid-3 { grid-template-columns: repeat(3, 1fr); }

.values-grid-3 .capability-card {
    min-height: 0;
    padding: 30px 28px 32px;
}

.values-grid-3 .capability-card h3 {
    margin: 0 0 12px;
    font-size: clamp(1.15rem, 1.45vw, 1.45rem);
    letter-spacing: -.03em;
    line-height: 1.1;
}

.values-grid-3 .capability-card p { margin-top: 0; color: var(--ink-3); font-size: .92rem; }

.values-grid-3 .card-index {
    display: block;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
}

@media (max-width: 1000px) { .values-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .values-grid-3 { grid-template-columns: 1fr; } }

/* Variante sans filet supérieur : évite le doublon de trait quand la
   liste suit immédiatement un titre de section déjà souligné. */
.check-list-sans-filet { border-top: 0; margin-top: 0; }

/* ==================================================================
   AVIS — appel à l'action vers la fiche Google
   Les avis reproduits sur le site sont déclaratifs ; seul le lien vers
   la fiche publique est vérifiable par le visiteur. Le bloc le dit et
   le rend visible plutôt que de le noyer en bas de page.
   ================================================================== */

.avis-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
    padding: 36px 40px;
    border-radius: var(--radius);
    background: var(--ink);
    color: rgba(255, 255, 255, .74);
}

.avis-cta-titre {
    margin-bottom: 8px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.9vw, 1.7rem);
    letter-spacing: -.03em;
}

.avis-cta p:last-child { margin: 0; font-size: .95rem; line-height: 1.6; }
.avis-cta-texte { max-width: 620px; }

.avis-cta .button-accent {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.avis-cta .button-accent img { display: block; }

@media (max-width: 860px) {
    .avis-cta { grid-template-columns: 1fr; gap: 24px; padding: 28px 26px; }
    .avis-cta .button-accent { justify-content: center; }
}

/* ==================================================================
   RÉALISATIONS — contexte du projet et résultats mesurés
   Deux blocs propres aux pages portfolio. Ils ne s'affichent que si les
   données existent dans data/portfolio.php : pas de chiffre généré.
   ================================================================== */

.projet-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.projet-bloc {
    padding: 30px 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.projet-cle {
    margin-bottom: 12px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.projet-bloc p:last-child { margin: 0; color: var(--ink-3); font-size: .95rem; line-height: 1.65; }

.projet-livrables { margin: 0; padding: 0; list-style: none; }

.projet-livrables li {
    position: relative;
    padding: 7px 0 7px 24px;
    color: var(--ink-3);
    font-size: .92rem;
}

/* Coche typographique plutôt qu'une puce : le bloc énumère ce qui a
   effectivement été remis. */
.projet-livrables li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ink);
    font-weight: 800;
}

/* ---------- Résultats chiffrés -------------------------------------- */
.kpi-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .16);
}

.kpi-carte { padding: 34px 30px; background: var(--ink); }

.kpi-valeur {
    margin: 0 0 8px;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    letter-spacing: -.05em;
    line-height: 1;
}

.kpi-label {
    margin: 0 0 6px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.kpi-detail { margin: 0; color: rgba(255, 255, 255, .6); font-size: .82rem; line-height: 1.5; }

.kpi-mention {
    max-width: 720px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, .55);
    font-size: .82rem;
    line-height: 1.6;
}

@media (max-width: 620px) {
    .projet-bloc { padding: 24px 22px; }
    .kpi-carte { padding: 26px 22px; }
}

/* ==================================================================
   PARCOURS — rééquilibrage des deux colonnes
   Le design system prévoit .45fr / 1.55fr : la colonne étroite reçoit
   le titre et les trois paragraphes, la large les chiffres. L'effet est
   inverse de l'intention — un titre de 60 px comprimé sur 395 px, et
   une colonne de texte trois fois plus haute que les chiffres.
   ================================================================== */

.story-grid {
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
}

.story-copy h2 {
    max-width: 620px;
    font-size: clamp(1.8rem, 2.8vw, 2.8rem);
    line-height: 1.05;
}

.story-copy p { max-width: 620px; font-size: 1rem; line-height: 1.68; }

@media (max-width: 980px) {
    .story-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ==================================================================
   AVIS GOOGLE — puce d'en-tête et bandeau de pied de page
   Deux variantes du même composant, alimentées par les constantes
   GOOGLE_REVIEWS_* de config.php. Une seule source pour le nombre et
   la note : impossible d'afficher deux chiffres différents.
   ================================================================== */

/* ---------- Puce, posée entre le fil d'Ariane et le sur-titre ------ */
.avis-google-puce {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 18px;
    padding: 7px 15px 7px 12px;
    border-radius: 999px;
    font-size: .8rem;
    line-height: 1;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.avis-google-puce img { display: block; width: 18px; height: 18px; }
.avis-google-puce strong { font-weight: 800; }

/* L'étoile porte la note : elle doit rester lisible sur les deux fonds. */
.avis-google-etoiles { letter-spacing: .06em; }

.avis-google-puce.est-sombre {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: var(--white);
}
.avis-google-puce.est-sombre .avis-google-etoiles { color: var(--accent); }
.avis-google-puce.est-sombre span:last-child { color: rgba(255, 255, 255, .74); }
.avis-google-puce.est-sombre:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }

.avis-google-puce.est-clair {
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
}
.avis-google-puce.est-clair .avis-google-etoiles { color: #b8860b; }
.avis-google-puce.est-clair span:last-child { color: var(--muted); }
.avis-google-puce.est-clair:hover { border-color: var(--ink); }

/* ---------- Bandeau du pied de page -------------------------------- */
.footer-avis { padding-bottom: 26px; }

.avis-google-bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    padding: 20px 26px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .05);
}

.avis-google-bandeau img { flex: none; width: 34px; height: 34px; }
.avis-google-texte { flex: 1 1 260px; min-width: 0; }

.avis-google-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 3px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.03em;
    line-height: 1;
}
.avis-google-note .avis-google-etoiles { color: var(--accent); font-family: var(--font-body); font-size: 1rem; }

.avis-google-detail { margin: 0; color: rgba(255, 255, 255, .62); font-size: .85rem; }

.avis-google-lien {
    flex: none;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.avis-google-lien:hover { background: #e4ef00; }

@media (max-width: 620px) {
    .avis-google-bandeau { padding: 18px 20px; }
    .avis-google-lien { flex: 1 1 100%; text-align: center; }
    .avis-google-puce { font-size: .74rem; padding: 6px 12px 6px 10px; }
}

/* ------------------------------------------------------------------
   Vignette d'expertise : rendre le suivi du curseur possible.

   Le design system applique « content-visibility: auto » à toutes les
   sections de la page d'accueil pour différer leur rendu. Cette
   propriété implique un confinement de mise en page, qui fait de la
   section un bloc conteneur pour les descendants en position fixed.
   La vignette, pourtant déclarée fixed et pilotée en coordonnées de
   fenêtre, se retrouvait donc ancrée à la section : elle restait
   plantée au milieu de la page au lieu de suivre la souris.

   On lève le confinement sur cette seule section. Le gain de
   performance perdu est négligeable — une section sur sept — et il
   n'existe pas d'autre moyen de conserver le suivi.
   ------------------------------------------------------------------ */
/* La règle d'origine est « .home-page main>section:not(.home-hero):not(.trust-strip) »,
   soit une spécificité de (0,3,2). On la dépasse en reprenant ses deux
   négations et en ajoutant la classe de la section. */
.home-page main > section.services-showcase:not(.home-hero):not(.trust-strip) {
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

/* ------------------------------------------------------------------
   Méga-menu : rapprocher la description de son titre.

   Le sous-menu « Prestations » (et « Ressources ») dispose ses entrées
   sur deux colonnes. Dans un panneau de 650 px, la colonne de texte
   tombe à 152 px : les titres passent alors sur deux lignes et l'écart
   entre le titre et sa description grimpe à 24 px, contre 2 px dans le
   sous-menu « Le freelance », qui est sur une seule colonne.

   On aligne les deux sur le même gabarit : une colonne, la description
   collée à son titre.
   ------------------------------------------------------------------ */
.nav-panel .nav-service-list {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 3px 0 3px 24px;
    /* Sans cela, la liste s'étire pour égaler la colonne d'introduction
       — plus haute dans « Prestations » à cause des raccourcis — et les
       lignes se dilatent, rouvrant l'écart entre titre et description. */
    align-content: start;
}

/* Le panneau « Prestations » compte sept entrées plus des raccourcis :
   il dépassait le bas de la fenêtre sur un écran de portable. */
.nav-panel {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

.nav-panel .nav-service-list a {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 2px 12px;
    align-items: start;
    padding: 11px 5px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: 1rem;
}

.nav-panel .nav-service-list a:last-child { border-bottom: 0; }

.nav-panel .nav-service-list a > span {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 800;
}

.nav-panel .nav-service-list strong {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.15;
}

.nav-panel .nav-service-list small {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35;
}

.nav-panel .nav-service-list a:hover strong { color: #4a5b00; }

/* ------------------------------------------------------------------
   Blog : les trois derniers articles sur une seule ligne.
   Remplace la mise en avant d'un article unique en pleine largeur.
   ------------------------------------------------------------------ */
.derniers-articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.dernier-article {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    transition: transform .25s ease, box-shadow .25s ease;
}

.dernier-article:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.dernier-article .article-card-thumbnail { display: block; overflow: hidden; }

.dernier-article .article-card-thumbnail img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform .35s ease;
}
.dernier-article:hover .article-card-thumbnail img { transform: scale(1.04); }

.dernier-article .article-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 24px 24px;
}

.dernier-article h3 {
    margin: 8px 0 10px;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.18;
}

.dernier-article p { color: var(--ink-3); font-size: .92rem; }

/* Le lien de lecture se cale en bas : les trois cartes s'alignent
   quelle que soit la longueur des chapôs. */
.dernier-article .text-link { align-self: flex-start; margin-top: auto; padding-top: 14px; }

@media (max-width: 980px) { .derniers-articles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .derniers-articles { grid-template-columns: 1fr; } }

/* ==================================================================
   SECTIONS TRANSVERSALES
   Croissance, audit offert, recrutement, formulaire court.
   Le balisage est produit par includes/growth-blocks.php ; les textes
   varient d'une page à l'autre, la mise en forme reste identique.
   ================================================================== */

/* ---------- 1. Croissance ------------------------------------------ */
.croissance-section { color: var(--white); background: var(--ink); }

.croissance-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 60px;
}

.croissance-texte h2 {
    margin-bottom: 20px;
    font-size: clamp(2rem, 3.4vw, 3.3rem);
    line-height: 1.02;
}

.croissance-texte > p { max-width: 560px; color: rgba(255, 255, 255, .68); font-size: 1rem; line-height: 1.7; }
.croissance-texte .avis-google-puce { margin: 4px 0 22px; }
.croissance-texte .button-accent { display: inline-block; }

.croissance-preuves { display: grid; gap: 14px; }

.croissance-chiffre {
    padding: 26px 28px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .04);
}

.croissance-valeur {
    margin: 0 0 4px;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    letter-spacing: -.05em;
    line-height: 1;
}

.croissance-label { margin: 0 0 4px; color: var(--white); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.02em; }
.croissance-detail { margin: 0; color: rgba(255, 255, 255, .58); font-size: .82rem; line-height: 1.5; }

.croissance-plateformes {
    padding: 20px 28px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
}

.croissance-plateformes > p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, .5);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.croissance-plateformes > div { display: flex; flex-wrap: wrap; gap: 10px 22px; }

.croissance-plateformes span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .74);
    font-size: .84rem;
}
.croissance-plateformes img { width: 26px; height: 26px; }

/* ---------- 2. Audit offert ----------------------------------------- */
.audit-section { overflow: hidden; background: var(--paper); }

.audit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
}

.audit-texte h2 { margin-bottom: 18px; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.02; }
.audit-texte > p { max-width: 560px; color: var(--ink-3); font-size: 1rem; line-height: 1.7; }
.audit-mention { margin: 16px 0 0; color: var(--muted); font-size: .82rem; }

/* La bande de cartes défile lentement : elle illustre un format de
   restitution, elle ne demande aucune lecture précise. */
.audit-defilement { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

.audit-piste {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: audit-glisse 46s linear infinite;
}

@keyframes audit-glisse {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .audit-piste { animation: none; }
}

.audit-carte {
    width: 210px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
}

.audit-carte-titre {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.audit-ligne { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.audit-ligne span { color: var(--ink-3); font-size: .8rem; }
.audit-ligne strong { font-family: var(--font-display); font-size: 1.05rem; }

.audit-jauge { height: 5px; margin-bottom: 14px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.audit-jauge i { display: block; height: 100%; border-radius: 999px; background: var(--ink); }

/* ---------- 3. Recrutement ------------------------------------------ */
.recrutement-section { background: var(--white); }
.recrutement-intro { max-width: 760px; color: var(--ink-3); font-size: 1rem; line-height: 1.7; }

.recrutement-sous-titre {
    margin: 32px 0 14px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.recrutement-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.recrutement-carte {
    position: relative;
    padding: 28px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.recrutement-index {
    display: block;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.recrutement-carte h3 { margin: 0 0 8px; font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
.recrutement-detail { margin: 0 0 16px; color: var(--ink-3); font-size: .92rem; line-height: 1.6; }

.recrutement-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.recrutement-meta span {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-3);
    font-size: .78rem;
    font-weight: 600;
}

.recrutement-spontanee {
    max-width: 760px;
    margin: 26px 0 0;
    color: var(--ink-3);
    font-size: .92rem;
    line-height: 1.7;
}
.recrutement-spontanee a { font-weight: 700; text-decoration: underline; }

/* ---------- 4. Formulaire court -------------------------------------- */
.formulaire-section { color: var(--white); background: var(--ink-2); }

.formulaire-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 60px;
}

.formulaire-grid h2 { margin-bottom: 16px; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.04; }
.formulaire-grid > div > p { max-width: 520px; color: rgba(255, 255, 255, .68); font-size: 1rem; line-height: 1.7; }

.formulaire-contacts { display: grid; gap: 6px; margin-top: 22px; }
.formulaire-contacts a { color: var(--cyan); font-size: 1.02rem; font-weight: 700; }
.formulaire-contacts a:hover { color: var(--accent); }

.formulaire-court {
    padding: 30px 32px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .05);
}

.formulaire-ligne { display: grid; gap: 6px; margin-bottom: 16px; }

.formulaire-ligne label {
    color: rgba(255, 255, 255, .78);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.formulaire-ligne input,
.formulaire-ligne textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
    color: var(--white);
    font: inherit;
    font-size: .95rem;
}

.formulaire-ligne input::placeholder,
.formulaire-ligne textarea::placeholder { color: rgba(255, 255, 255, .42); }

.formulaire-ligne input:focus,
.formulaire-ligne textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: rgba(255, 255, 255, .1); }

.formulaire-court .button-accent { width: 100%; text-align: center; }
.formulaire-mention { margin: 14px 0 0; color: rgba(255, 255, 255, .5); font-size: .78rem; line-height: 1.55; }

@media (max-width: 980px) {
    .croissance-grid,
    .audit-grid,
    .formulaire-grid { grid-template-columns: 1fr; gap: 34px; }
    .recrutement-grille { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Pied de page : bandeau des plateformes.
   L'intitulé « Les plateformes que je maîtrise » est retiré. Le bandeau
   occupe désormais la largeur du conteneur, comme la grille de liens
   au-dessus, avec les entrées réparties d'un bord à l'autre.
   ------------------------------------------------------------------ */
.site-footer .footer-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 18px;
    padding: 30px 24px 34px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.site-footer .footer-platforms span {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, .74);
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
}

.site-footer .footer-platforms img {
    width: 34px;
    height: 34px;
    /* Les logos monochromes sombres seraient invisibles sur ce fond. */
    flex: none;
}

@media (max-width: 900px) {
    .site-footer .footer-platforms { justify-content: flex-start; gap: 18px 26px; }
}

@media (max-width: 560px) {
    .site-footer .footer-platforms span { font-size: .86rem; gap: 9px; }
    .site-footer .footer-platforms img { width: 28px; height: 28px; }
}

/* ------------------------------------------------------------------
   Outils : respiration sous le fil d'Ariane.
   ------------------------------------------------------------------ */
.tool-breadcrumb { padding-bottom: 18px; }

/* ------------------------------------------------------------------
   Puce d'avis Google déplacée dans la colonne de droite du hero.
   Elle coiffe le paragraphe d'introduction au lieu de suivre le fil
   d'Ariane, où elle se collait au trait de séparation.
   ------------------------------------------------------------------ */
.compact-hero-grid > div:last-child .avis-google-puce {
    margin: 0 0 16px;
}

/* Le hero aligne ses colonnes par le bas : la puce ajoutant de la
   hauteur, on compense pour que le paragraphe reste à sa place. */
.compact-hero-grid > div:last-child { padding-bottom: 16px; }

/* ------------------------------------------------------------------
   Page contact : la mention d'adresse collait au dernier canal de
   contact, sans respiration.
   ------------------------------------------------------------------ */
.contact-adresse { margin-top: 26px; }

/* ==================================================================
   CHECKLIST COCHABLE DES ARTICLES
   La liste de vérification de fin d'article devient interactive :
   cases à cocher, compteur d'avancement et jauge. L'état est conservé
   par article dans le navigateur (assets/js/article-checklist.js).
   ================================================================== */

.article-checklist { margin-top: 30px; }

.article-checklist-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.article-checklist-compteur { margin: 0; font-size: .92rem; }
.article-checklist-compteur strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.02em;
    vertical-align: -2px;
}

.article-checklist-jauge {
    flex: 1 1 180px;
    height: 8px;
    border-radius: 999px;
    background: rgba(18, 39, 43, .12);
    overflow: hidden;
}

.article-checklist-jauge i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ink);
    transition: width .25s ease;
}

/* Une fois tous les points validés, la jauge passe au vert : le lecteur
   voit qu'il a terminé sans avoir à recompter. */
.article-checklist[data-complet="oui"] .article-checklist-jauge i { background: #1d7a4c; }

.article-checklist-reset {
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-3);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}
.article-checklist-reset:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Les entrées ------------------------------------------- */
.article-checklist .article-checks { margin-top: 0; border-top: 0; }

.article-checklist .article-checks li {
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--line);
}

/* La case native reste dans le flux pour l'accessibilité : elle est
   simplement placée dans le libellé plutôt que masquée. */
.article-checklist .article-checks input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.article-checklist .article-checks label {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: start;
    gap: 18px;
    padding: 22px 10px 22px 4px;
    cursor: pointer;
    transition: background .18s ease;
}
.article-checklist .article-checks label:hover { background: var(--paper); }

/* La coche est dessinée devant le numéro : elle change d'état sans
   déplacer le texte. */
.article-checks-numero {
    position: relative;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: 9px;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 900;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.article-checks input:checked + label .article-checks-numero {
    border-color: var(--ink);
    background: var(--ink);
    color: transparent;
}

.article-checks input:checked + label .article-checks-numero::after {
    content: "\2713";
    position: absolute;
    color: var(--accent);
    font-size: 1rem;
}

.article-checks input:focus-visible + label .article-checks-numero {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.article-checks-corps { display: block; }

.article-checks-titre {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.article-checks-texte { display: block; color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* Un point validé s'efface visuellement pour laisser voir ce qui reste. */
.article-checks li.est-cochee .article-checks-titre {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--line);
}

.article-checklist-note {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.6;
}

@media (max-width: 620px) {
    .article-checklist .article-checks label { grid-template-columns: 26px 1fr; gap: 14px; }
    .article-checks-numero { width: 26px; height: 26px; }
    .article-checks-titre { font-size: 1.05rem; }
}