/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 31 2026 | 14:34:42 */
/* ============================================================
   COVAL, feuille de style des articles de blog
   ------------------------------------------------------------
   A COLLER TEL QUEL dans le champ CSS du snippet 28406
   (Simple Custom CSS and JS).

   NE JAMAIS y remettre :
   - les balises <style> et </style>. Un champ CSS attend du CSS
     brut. Le token <style> est invalide : le parseur le prend
     pour un debut de selecteur et avale tout jusqu'a la premiere
     accolade, ce qui detruit la regle .coval-article, celle qui
     porte les variables, la largeur de colonne et l'interligne.
     Cas vecu le 2026-08-31 : les 9 pages sont sorties en pleine
     largeur, les couleurs ne tenant que par la feuille voisine
     26673.css qui declare les memes variables.
   - la ligne @import des polices. Un @import n'est valide qu'en
     toute premiere position d'une feuille, avant toute regle.
     Ici il est precede du commentaire d'en-tete du plugin, donc
     ignore. Les polices sont deja chargees par le theme.
   ============================================================ */

/* ============================================================ */
    /* COVAL — FEUILLE DE STYLE ARTICLE DE BLOG (MOBILE-FIRST)      */
    /* Base = mobile. Les enrichissements desktop sont regroupes    */
    /* dans le bloc @media (min-width: 700px) en fin de fichier.    */
    /* Reference : Pages service+ville/Integration/                 */
    /*             charte-graphique-coval.html                      */
    /* ============================================================ */

    .coval-article {
        /* --- Couleurs de marque --- */
        --blue:          #2B2E80;   /* couleur de marque : titres, fonds, liens */
        --blue-mid:      #3D4199;
        --blue-dark:     #1a1d5e;   /* CTA final, blocs premium */
        --blue-light:    #F0F1FA;   /* fonds de blocs clairs */
        --orange:        #F08700;   /* couleur d'action : CTA, accents, puces */
        --orange-hover:  #D97700;
        --orange-light:  #FFF3E0;   /* fond des badges et icones */
        --orange-deep:   #B35F00;   /* orange assombri : petits textes sur fond clair (contraste AA) */
        --orange-soft:   #FFB84D;   /* orange clair : textes sur fond bleu fonce */

        /* --- Neutres --- */
        --text:          #2D2D2D;
        --text-light:    #666666;
        --white:         #FFFFFF;
        --bg-light:      #F8F8FC;
        --border:        #E8E8F0;
        --border-soft:   #EFEFF6;

        /* --- Couleurs fonctionnelles (tableaux comparatifs) --- */
        --ok:            #1E8E4E;
        --ko:            #C0392B;

        /* --- Ombres --- */
        --shadow:        0 4px 24px rgba(43,46,128,0.10);
        --shadow-hover:  0 8px 32px rgba(43,46,128,0.18);
        --shadow-orange: 0 6px 20px rgba(240,135,0,0.35);

        /* --- Rayons --- */
        --radius:        12px;
        --radius-sm:     6px;
        --radius-btn:    8px;
        --radius-pill:   100px;
        --radius-full:   50%;

        /* --- Typo --- */
        --font-head:     'M PLUS Rounded 1c', sans-serif;
        --font-body:     'Poppins', sans-serif;
        --transition:    0.25s ease;

        max-width: 820px;
        margin: 0 auto;
        padding: 32px 18px 64px;
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.7;
        color: var(--text);
    }

    .coval-article *,
    .coval-article *::before,
    .coval-article *::after { box-sizing: border-box; }

    /* ===== TAGS / CATEGORIES ===== */
    .article-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 16px;
    }
    .article-tag {
        font-family: var(--font-head);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--blue);
        background: var(--blue-light);
        padding: 5px 13px;
        border-radius: var(--radius-pill);
        transition: background var(--transition), color var(--transition);
    }
    .article-tag::before {
        content: "#";
        color: var(--orange);
        margin-right: 2px;
    }

    /* ===== TYPO =====
       `:where(:not(section *))` protege les composants COVAL inseres dans l'article
       (CTA terrain, etc. : toujours des <section>). Sans cette exclusion, les
       regles ci-dessous, a specificite egale mais chargees plus tard, ecrasent
       celles du CSS des pages service : titre bleu sur fond bleu, bouton
       souligne. Le CSS du site reste la seule source de verite pour ces blocs. */
    .coval-article h2:where(:not(section *)) {
        font-family: var(--font-head);
        color: var(--blue);
        font-size: 26px;
        line-height: 1.25;
        font-weight: 800;
        margin: 44px 0 16px;
        text-wrap: balance;
    }
    .coval-article h3:where(:not(section *)) {
        font-family: var(--font-head);
        color: var(--blue);
        font-size: 19px;
        line-height: 1.35;
        font-weight: 700;
        margin: 30px 0 12px;
        text-wrap: balance;
    }
    .coval-article h4:where(:not(section *)) {
        font-family: var(--font-head);
        color: var(--blue);
        font-weight: 700;
    }
    .coval-article p:where(:not(section *)) { margin: 0 0 18px; text-wrap: pretty; }
    .coval-article a:where(:not(section *)) {
        color: var(--blue);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        transition: color var(--transition);
    }
    .coval-article a:where(:not(section *)):hover { color: var(--orange-hover); }
    .coval-article strong:where(:not(section *)) { color: var(--text); font-weight: 600; }

    /* ===== LABELS DE BLOC (pastilles) ===== */
    /* Regle charte : label en pastille arrondie, M PLUS Rounded 1c 700, majuscules. */
    .article-intro-label,
    .definition-v2-label,
    .points-cles-title,
    .sources-title,
    .author-label,
    .related-link-label {
        display: inline-block;
        font-family: var(--font-head);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--orange-deep);
        background: var(--orange-light);
        padding: 5px 13px;
        border-radius: var(--radius-pill);
        margin: 0 0 12px;
    }

    /* Labels de repere du template (visibles uniquement dans la preview) */
    .intro-variant-label,
    .block-variant-label {
        display: block;
        font-family: var(--font-head);
        font-size: 11px;
        font-weight: 700;
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        margin: 40px 0 10px;
        opacity: 0.65;
    }

    /* ===== INTRO ===== */
    .article-intro-v5 {
        background: var(--blue-light);
        padding: 22px 20px;
        margin: 0 0 32px;
        border-radius: var(--radius);
    }
    .article-intro-term {
        font-family: var(--font-head);
        font-size: 21px;
        font-weight: 700;
        color: var(--blue);
        margin: 0 0 10px;
        line-height: 1.3;
    }
    .article-intro-v5 p:last-child {
        margin: 0;
        font-size: 16px;
        color: var(--text);
        line-height: 1.65;
    }

    /* ===== LISTES ===== */
    .coval-article ul,
    .coval-article ol { margin: 0 0 22px; padding-left: 22px; }
    .coval-article li { margin-bottom: 8px; }
    .coval-article ul li::marker { color: var(--orange); font-size: 1.1em; }
    .coval-article ol li::marker { color: var(--blue); font-family: var(--font-head); font-weight: 700; }

    /* Variante 2 colonnes (contenus courts) — 1 colonne sur mobile */
    .coval-article .list-two-cols {
        column-count: 1;
        column-gap: 40px;
    }
    .coval-article .list-two-cols li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ===== BLOC DEFINITION ===== */
    .definition-v2 {
        background: var(--bg-light);
        border: 1px solid var(--border);
        padding: 22px 20px;
        margin: 0 0 24px;
        border-radius: var(--radius);
    }
    .definition-v2-term {
        font-family: var(--font-head);
        font-size: 21px;
        font-weight: 700;
        color: var(--blue);
        margin: 0 0 10px;
        line-height: 1.3;
    }
    .definition-v2 p:last-child {
        margin: 0;
        font-size: 16px;
        color: var(--text);
        line-height: 1.65;
    }

    /* ===== BLOC CONSEIL COVAL (fond bleu) ===== */
    .conseil-v2 {
        background: var(--blue);
        color: var(--white);
        padding: 22px 20px;
        margin: 0 0 24px;
        border-radius: var(--radius);
    }
    .conseil-v2-label {
        display: inline-block;
        font-family: var(--font-head);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--orange-soft);
        background: rgba(240,135,0,0.2);
        padding: 5px 13px;
        border-radius: var(--radius-pill);
        margin: 0 0 12px;
    }
    .conseil-v2-term {
        font-family: var(--font-head);
        font-size: 21px;
        font-weight: 700;
        color: var(--white);
        margin: 0 0 10px;
        line-height: 1.3;
    }
    .conseil-v2 p:last-child {
        font-size: 16px;
        line-height: 1.65;
        color: rgba(255,255,255,0.88);
        margin: 0;
    }
    .conseil-v2 strong { color: var(--white); }
    .conseil-v2 a { color: var(--orange-soft); }
    .conseil-v2 a:hover { color: var(--white); }

    /* ===== POINTS A RETENIR ===== */
    .points-cles {
        background: var(--white);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        padding: 24px 20px;
        margin: 32px 0;
        border-radius: var(--radius);
    }
    .points-cles ul { list-style: none; padding: 0; margin: 0; }
    .points-cles li {
        padding: 12px 0 12px 28px;
        position: relative;
        border-bottom: 1px solid var(--border-soft);
        font-size: 16px;
    }
    .points-cles li:last-child { border-bottom: none; padding-bottom: 0; }
    .points-cles li::marker { content: ""; }
    .points-cles li::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 20px;
        width: 7px;
        height: 7px;
        border-radius: var(--radius-full);
        background: var(--orange);
    }

    /* ========================================== */
    /* ===== VARIANTE 1 : ETAPES DEROULANTES ==== */
    /* ========================================== */
    .steps-v1 { margin: 32px 0; counter-reset: step-v1; }
    .steps-v1 .step {
        border-bottom: 1px solid var(--border);
        counter-increment: step-v1;
    }
    .steps-v1 .step:first-child { border-top: 1px solid var(--border); }
    .steps-v1 .step summary {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 0;
        cursor: pointer;
        list-style: none;
        transition: color var(--transition);
    }
    .steps-v1 .step summary::-webkit-details-marker { display: none; }
    .steps-v1 .step-number {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background: var(--blue);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-head);
        font-weight: 800;
        font-size: 16px;
        border-radius: var(--radius-full);
    }
    .steps-v1 .step-number::before { content: counter(step-v1, decimal-leading-zero); }
    .steps-v1 .step-title {
        flex: 1;
        font-family: var(--font-head);
        font-size: 16px;
        font-weight: 700;
        color: var(--blue);
        line-height: 1.35;
        transition: color var(--transition);
    }
    .steps-v1 .step summary::after {
        content: "+";
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        margin-left: 10px;
        background: var(--orange-light);
        color: var(--orange-deep);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-head);
        font-size: 17px;
        font-weight: 700;
        line-height: 1;
        transition: background var(--transition), color var(--transition);
    }
    .steps-v1 .step[open] summary::after {
        content: "\2212";
        background: var(--orange);
        color: var(--white);
    }
    .steps-v1 .step-content {
        padding: 4px 0 22px 54px;
        color: var(--text-light);
    }
    .steps-v1 .step-content > *:last-child { margin-bottom: 0; }
    .steps-v1 .step-content .table-wrapper { margin: 12px 0 0; }

    /* ========================================== */
    /* ===== CARTES ============================= */
    /* ========================================== */
    .steps-v3 {
        margin: 32px 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        counter-reset: step-v3;
    }
    .steps-v3 .step {
        padding: 22px 20px;
        background: var(--white);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        counter-increment: step-v3;
        position: relative;
        transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        border-radius: var(--radius);
    }
    .steps-v3 .step::before {
        content: counter(step-v3, decimal-leading-zero);
        display: block;
        font-family: var(--font-head);
        font-size: 28px;
        font-weight: 800;
        color: var(--orange);
        margin-bottom: 10px;
        line-height: 1;
    }
    .steps-v3 .step h3 { margin: 0 0 8px; font-size: 17px; }
    .steps-v3 .step p { margin: 0; font-size: 15px; color: var(--text-light); }

    /* ========================================== */
    /* ===== CARTES ONGLETS ===================== */
    /* ========================================== */
    .cards-tabs {
        margin: 32px 0;
        position: relative;
    }
    .cards-tabs > input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
    }
    .cards-tabs-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }
    .card-tab {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px 14px;
        background: var(--white);
        border: 2px solid var(--border);
        border-radius: var(--radius);
        cursor: pointer;
        transition: border-color var(--transition), background var(--transition), transform var(--transition);
    }
    .card-tab-num {
        font-family: var(--font-head);
        font-size: 20px;
        font-weight: 800;
        color: var(--orange);
        line-height: 1;
        transition: color var(--transition);
    }
    .card-tab-title {
        font-family: var(--font-head);
        font-size: 14px;
        font-weight: 700;
        color: var(--blue);
        line-height: 1.35;
        transition: color var(--transition);
    }
    .cards-tabs-content {
        background: var(--white);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        border-radius: var(--radius);
        padding: 24px 20px;
        position: relative;
    }
    .cards-tabs-content::before {
        content: "";
        display: none;
        position: absolute;
        top: -8px;
        width: 16px;
        height: 16px;
        background: var(--white);
        border-top: 1px solid var(--border);
        border-left: 1px solid var(--border);
        transform: rotate(45deg);
        transition: left var(--transition);
    }
    .tab-panel { display: none; }
    .tab-panel h4 {
        margin: 0 0 14px;
        color: var(--blue);
        font-family: var(--font-head);
        font-size: 19px;
        font-weight: 700;
        line-height: 1.3;
    }
    .tab-panel p { margin: 0 0 14px; }
    .tab-panel ul,
    .tab-panel ol { margin: 0 0 14px; }
    .tab-panel > *:last-child { margin-bottom: 0; }

    /* Onglet actif : carte bleue, texte blanc, chiffre orange clair */
    .cards-tabs > #ct-1:checked ~ .cards-tabs-nav label[for="ct-1"],
    .cards-tabs > #ct-2:checked ~ .cards-tabs-nav label[for="ct-2"],
    .cards-tabs > #ct-3:checked ~ .cards-tabs-nav label[for="ct-3"],
    .cards-tabs > #ct-4:checked ~ .cards-tabs-nav label[for="ct-4"] {
        background: var(--blue);
        border-color: var(--blue);
    }
    .cards-tabs > #ct-1:checked ~ .cards-tabs-nav label[for="ct-1"] .card-tab-num,
    .cards-tabs > #ct-2:checked ~ .cards-tabs-nav label[for="ct-2"] .card-tab-num,
    .cards-tabs > #ct-3:checked ~ .cards-tabs-nav label[for="ct-3"] .card-tab-num,
    .cards-tabs > #ct-4:checked ~ .cards-tabs-nav label[for="ct-4"] .card-tab-num {
        color: var(--orange-soft);
    }
    .cards-tabs > #ct-1:checked ~ .cards-tabs-nav label[for="ct-1"] .card-tab-title,
    .cards-tabs > #ct-2:checked ~ .cards-tabs-nav label[for="ct-2"] .card-tab-title,
    .cards-tabs > #ct-3:checked ~ .cards-tabs-nav label[for="ct-3"] .card-tab-title,
    .cards-tabs > #ct-4:checked ~ .cards-tabs-nav label[for="ct-4"] .card-tab-title {
        color: var(--white);
    }

    /* Affichage du panel actif */
    .cards-tabs > #ct-1:checked ~ .cards-tabs-content .tab-panel:nth-of-type(1),
    .cards-tabs > #ct-2:checked ~ .cards-tabs-content .tab-panel:nth-of-type(2),
    .cards-tabs > #ct-3:checked ~ .cards-tabs-content .tab-panel:nth-of-type(3),
    .cards-tabs > #ct-4:checked ~ .cards-tabs-content .tab-panel:nth-of-type(4) {
        display: block;
    }

    /* ========================================== */
    /* ===== VARIANTE 4 : GROS CHIFFRE LATERAL == */
    /* ========================================== */
    .steps-v4 { margin: 32px 0; counter-reset: step-v4; }
    .steps-v4 .step {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 20px 20px;
        margin-bottom: 10px;
        background: var(--white);
        border: 1px solid var(--border);
        border-left: 3px solid var(--blue);
        counter-increment: step-v4;
        border-radius: var(--radius);
    }
    .steps-v4 .step:nth-child(even) { border-left-color: var(--orange); }
    .steps-v4 .step:last-child { margin-bottom: 0; }
    .steps-v4 .step-number {
        flex-shrink: 0;
        font-family: var(--font-head);
        font-size: 38px;
        font-weight: 800;
        color: var(--blue);
        line-height: 1;
        min-width: 64px;
    }
    .steps-v4 .step:nth-child(even) .step-number { color: var(--orange); }
    .steps-v4 .step-number::before { content: counter(step-v4, decimal-leading-zero); }
    .steps-v4 .step-content h3 { margin: 0 0 6px; font-size: 18px; }
    .steps-v4 .step-content p { margin: 0; font-size: 15px; color: var(--text-light); }

    /* ===== TABLEAUX ===== */
    .table-wrapper {
        overflow: hidden;
        overflow-x: auto;
        margin: 28px 0;
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    .coval-article table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }
    .coval-article th,
    .coval-article td {
        padding: 12px 14px;
        text-align: left;
        border-bottom: 1px solid var(--border-soft);
    }
    .coval-article th {
        background: var(--blue);
        color: var(--white);
        font-family: var(--font-head);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .coval-article tbody tr:last-child td { border-bottom: none; }
    .coval-article tbody tr:nth-child(even) { background: var(--bg-light); }
    .coval-article td:first-child { font-weight: 500; color: var(--text); }

    .comparison-table th:first-child { background: var(--blue-dark); }
    .comparison-table .check { color: var(--ok); font-weight: 700; font-size: 18px; }
    .comparison-table .cross { color: var(--ko); font-weight: 700; font-size: 18px; }
    .comparison-table td { text-align: center; }
    .comparison-table td:first-child { text-align: left; }

    /* ===== ACCORDEONS (FAQ) ===== */
    .accordion { margin: 28px 0; }
    .accordion-item {
        border: 1px solid var(--border);
        margin-bottom: 8px;
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
    }
    .accordion-item:last-child { margin-bottom: 0; }
    .accordion-item summary {
        padding: 16px 18px;
        cursor: pointer;
        font-family: var(--font-head);
        font-weight: 700;
        font-size: 15px;
        color: var(--blue);
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        transition: background var(--transition);
    }
    .accordion-item summary::-webkit-details-marker { display: none; }
    .accordion-item summary::after {
        content: "+";
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        background: var(--orange-light);
        color: var(--orange-deep);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        font-weight: 700;
        line-height: 1;
        transition: background var(--transition), color var(--transition);
    }
    .accordion-item[open] summary {
        background: var(--blue-light);
        border-bottom: 1px solid var(--border-soft);
    }
    .accordion-item[open] summary::after {
        content: "\2212";
        background: var(--orange);
        color: var(--white);
    }
    .accordion-content {
        padding: 18px;
        color: var(--text-light);
    }
    .accordion-content > *:last-child { margin-bottom: 0; }
    .accordion-content .table-wrapper { margin: 12px 0 0; }

    /* Mini CTA dans une reponse FAQ */
    .coval-article a.faq-mini-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        margin-top: 10px;
        background: var(--orange);
        color: var(--white);
        border: 2px solid var(--orange);
        border-radius: var(--radius-btn);
        font-family: var(--font-head);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-decoration: none;
        transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    }
    .coval-article a.faq-mini-cta::after {
        content: "\2192";
        font-weight: 400;
    }
    /* Centrage du mini CTA quand il est utilise dans la FAQ */
    .coval-article .accordion-content a.faq-mini-cta {
        display: flex;
        width: fit-content;
        margin: 14px auto 0;
    }

    /* ===== CTA : PAS DE BLOC DEDIE ICI =====
       Les deux CTA de l'article reutilisent les composants COVAL deja
       installes sur le site (styles fournis par le CSS des pages service) :
       - CTA intermediaire terrain ....... [wpcode id="26679"]
       - CTA final + formulaire .......... markup de 08-cta-final-formulaire.html,
         inline APRES </article> (le shortcode [gravityform] doit rester au
         premier niveau du contenu pour s'executer).
       Les classes .btn / .btn-primary viennent elles aussi du CSS du site :
       ne pas les redefinir ici, sous peine de faire diverger les deux zones. */

    /* ===== PHOTO + TEXTE ALTERNE ===== */
    .photo-text {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: center;
        margin: 36px 0;
    }
    .photo-text-img {
        aspect-ratio: 4/3;
        background: var(--blue-light);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-light);
        font-size: 14px;
        font-weight: 500;
        border-radius: var(--radius);
        overflow: hidden;
    }
    .photo-text-content h3 { margin-top: 0; }
    .photo-text-content p:last-child { margin-bottom: 0; }


    /* ===== BANNIERE D'ARTICLE ===== */
    /* Sous le H1, avant l'intro. Le theme de single-actualites ne rend ni titre
       ni image a la une : les deux doivent etre dans le contenu. */
    .article-banniere {
        margin: 0 0 32px;
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--blue-light);
    }
    .article-banniere img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* ===== BLOC AUTEUR ===== */
    .author-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding: 24px 20px;
        background: var(--white);
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        margin: 48px 0 20px;
        border-radius: var(--radius);
    }
    .author-photo {
        flex-shrink: 0;
        width: 110px;
        height: 110px;
        background: var(--blue);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        font-family: var(--font-head);
        font-weight: 800;
        font-size: 34px;
        border-radius: var(--radius-full);
        overflow: hidden;
    }
    .author-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .author-info { flex: 1; }
    .author-name {
        font-family: var(--font-head);
        font-size: 21px;
        font-weight: 700;
        color: var(--blue);
        margin: 0 0 4px;
    }
    .author-role {
        font-size: 14px;
        color: var(--text-light);
        margin: 0 0 12px;
    }
    .author-bio {
        font-size: 15px;
        color: var(--text);
        margin: 0 0 16px;
    }
    .author-social { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .author-social a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 18px;
        background: transparent;
        color: var(--blue);
        border: 2px solid var(--blue);
        font-family: var(--font-head);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-decoration: none;
        transition: all var(--transition);
        border-radius: var(--radius-btn);
    }

    /* ===== BLOC SOURCES ===== */
    .sources-box {
        background: var(--bg-light);
        border: 1px solid var(--border);
        padding: 20px 18px;
        margin: 20px 0 36px;
        border-radius: var(--radius);
    }
    .sources-box ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sources-box li {
        font-size: 14px;
        line-height: 1.6;
        color: var(--text-light);
        padding: 8px 0 8px 18px;
        position: relative;
        border-bottom: 1px solid var(--border-soft);
    }
    .sources-box li:last-child { border-bottom: none; }
    .sources-box li::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 16px;
        width: 6px;
        height: 6px;
        border-radius: var(--radius-full);
        background: var(--orange);
    }
    .sources-box li a {
        color: var(--blue);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .sources-box li a:hover { color: var(--orange-hover); }
    .sources-meta { color: var(--text-light); }

    /* ===== BLOC ASTERIX (notes / precisions) ===== */
    .asterix-box {
        background: transparent;
        padding: 0;
        margin: 24px 0 32px;
        border-top: 1px solid var(--border);
        padding-top: 18px;
    }
    .asterix-title {
        font-family: var(--font-head);
        font-size: 11px;
        font-weight: 700;
        color: var(--text-light);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 0 0 8px;
    }
    .asterix-box ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .asterix-box li {
        font-size: 13px;
        line-height: 1.55;
        color: var(--text-light);
        padding: 4px 0 4px 18px;
        position: relative;
        border-bottom: none;
    }
    .asterix-box li::before {
        content: "*";
        position: absolute;
        left: 4px;
        top: 6px;
        color: var(--orange);
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
    }
    .asterix-term {
        color: var(--text);
        font-weight: 600;
    }
    /* Asterisque inline dans le corps de l'article */
    .coval-article .asterix-mark {
        color: var(--orange);
        font-weight: 700;
        margin-left: 1px;
    }

    /* ===== LIEN INLINE "A LIRE AUSSI" ===== */
    .coval-article a.related-link {
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--blue-light);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 16px 18px;
        margin: 28px 0;
        text-decoration: none;
        transition: border-color var(--transition), transform var(--transition), background var(--transition);
    }
    .related-link-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-full);
        background: var(--orange);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-head);
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
    }
    .related-link-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .related-link-label {
        align-self: flex-start;
        margin: 0;
    }
    .related-link-title {
        font-family: var(--font-head);
        font-size: 16px;
        font-weight: 700;
        color: var(--blue);
        line-height: 1.35;
        text-decoration: none;
    }
    .related-link-arrow {
        flex-shrink: 0;
        color: var(--orange);
        font-size: 22px;
        font-weight: 400;
        line-height: 1;
        transition: transform var(--transition);
    }

    /* ============================================================ */
    /* ===== ENRICHISSEMENTS DESKTOP (min-width: 700px) ========== */
    /* La base ci-dessus est mobile. Ce bloc retablit le rendu     */
    /* desktop : grilles multi-colonnes, paddings et tailles de    */
    /* police plus genereux.                                       */
    /* ============================================================ */
    @media (min-width: 700px) {
        .coval-article { padding: 48px 24px 80px; }

        .coval-article h2:where(:not(section *)) { font-size: 34px; line-height: 1.2; margin: 56px 0 18px; }
        .coval-article h3:where(:not(section *)) { font-size: 21px; margin: 36px 0 14px; }

        .article-intro-v5,
        .definition-v2,
        .conseil-v2 { padding: 26px 32px; }
        .article-intro-term,
        .definition-v2-term,
        .conseil-v2-term { font-size: 24px; }

        .points-cles { padding: 28px 32px; margin: 36px 0; }

        .coval-article .list-two-cols { column-count: 2; }

        /* Etapes deroulantes : indentation du contenu sous le titre */
        .steps-v1 { margin: 36px 0; }
        .steps-v1 .step summary { gap: 22px; padding: 18px 0; }
        .steps-v1 .step-number { width: 44px; height: 44px; font-size: 18px; }
        .steps-v1 .step-title { font-size: 18px; }
        .steps-v1 .step summary::after { margin-left: 16px; }
        .steps-v1 .step-content { padding: 4px 0 22px 66px; }

        /* Cartes : grille 2 colonnes */
        .steps-v3 { margin: 36px 0; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .steps-v3 .step { padding: 24px 22px; }

        /* Cartes-onglets : nav 4 colonnes + fleche indicatrice */
        .cards-tabs { margin: 36px 0; }
        .cards-tabs-nav { grid-template-columns: repeat(4, 1fr); gap: 12px; }
        .card-tab { padding: 20px 18px; }
        .cards-tabs-content { padding: 32px; }
        .cards-tabs-content::before { display: block; }
        .tab-panel h4 { font-size: 22px; }
        .cards-tabs > #ct-1:checked ~ .cards-tabs-content::before { left: calc(12.5% - 8px); }
        .cards-tabs > #ct-2:checked ~ .cards-tabs-content::before { left: calc(37.5% - 8px); }
        .cards-tabs > #ct-3:checked ~ .cards-tabs-content::before { left: calc(62.5% - 8px); }
        .cards-tabs > #ct-4:checked ~ .cards-tabs-content::before { left: calc(87.5% - 8px); }

        /* Variante 4 : chiffre lateral en ligne */
        .steps-v4 { margin: 36px 0; }
        .steps-v4 .step { flex-direction: row; gap: 28px; padding: 24px 28px; }

        /* Tableaux : cellules plus aerees */
        .table-wrapper { margin: 32px 0; }
        .coval-article table { font-size: 15px; }
        .coval-article th,
        .coval-article td { padding: 14px 18px; }
        .coval-article th { font-size: 13px; letter-spacing: 0.08em; }

        /* Accordeons */
        .accordion { margin: 32px 0; }
        .accordion-item summary { padding: 18px 24px; font-size: 16px; }
        .accordion-content { padding: 20px 24px 22px; }

        /* Photo + texte : 2 colonnes + alternance */
        .photo-text { grid-template-columns: 1fr 1fr; gap: 32px; }
        .photo-text.reverse { direction: rtl; }
        .photo-text.reverse > * { direction: ltr; }

        /* Bloc auteur : photo + texte cote a cote */
        .author-box {
            flex-direction: row;
            align-items: center;
            text-align: left;
            gap: 32px;
            padding: 32px;
        }
        .author-photo { width: 130px; height: 130px; }
        .author-social { justify-content: flex-start; }

        /* Sources */
        .sources-box { padding: 24px 28px; margin: 20px 0 40px; }
    }

    /* ===== HOVER : uniquement sur peripheriques a survol (pas tactile) ===== */
    @media (hover: hover) {
        .article-tag:hover { background: var(--blue); color: var(--white); }
        .article-tag:hover::before { color: var(--orange-soft); }

        .steps-v1 .step summary:hover .step-title { color: var(--orange-hover); }
        .steps-v1 .step summary:hover::after { background: var(--orange); color: var(--white); }

        .steps-v3 .step:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: var(--orange);
        }

        .card-tab:hover {
            border-color: var(--orange);
            transform: translateY(-2px);
        }

        .accordion-item summary:hover { background: var(--blue-light); }
        .accordion-item summary:hover::after { background: var(--orange); color: var(--white); }

        .coval-article a.faq-mini-cta:hover {
            background: var(--orange-hover);
            border-color: var(--orange-hover);
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: var(--shadow-orange);
        }

        .author-social a:hover { background: var(--blue); color: var(--white); }

        .coval-article tbody tr:hover td { background: var(--blue-light); }

        .coval-article a.related-link:hover {
            border-color: var(--orange);
            background: var(--white);
            transform: translateX(2px);
        }
        .coval-article a.related-link:hover .related-link-arrow {
            transform: translateX(4px);
        }
    }

    /* ===== Focus visible (accessibilite clavier) ===== */
    .coval-article a:focus-visible,
    .coval-article summary:focus-visible,
    .coval-article label:focus-visible,
    .cards-tabs > input[type="radio"]:focus-visible ~ .cards-tabs-nav label {
        outline: 3px solid var(--orange);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

    /* ===== Respect de prefers-reduced-motion ===== */
    @media (prefers-reduced-motion: reduce) {
        .coval-article *,
        .coval-article *::before,
        .coval-article *::after {
            transition-duration: 0.01ms !important;
        }
    }