/* ============================================================
   blog.css — index du blog et gabarit d'article
   Écrit pour le mobile d'abord : la base s'applique au petit
   écran, les media queries n'ajoutent que ce qu'un écran large
   permet en plus. Le lectorat de ce site est majoritairement
   sur téléphone et souvent presbyte, d'où un corps de texte
   généreux et des cibles tactiles d'au moins 44 px.
   ============================================================ */

/* ---------- Fil d'Ariane ---------- */
.fil {
    background: var(--c-bg-alt);
    border-bottom: 1px solid var(--c-border);
    padding: 10px 0;
    font-size: 13px;
}
.fil ol {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Le fil déborde forcément sur mobile quand le titre est long.
       On le fait défiler plutôt que de le tronquer ou de le replier. */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.fil ol::-webkit-scrollbar { height: 0; }
.fil li { color: var(--c-text-muted); }
.fil li + li::before { content: "›"; margin-right: 6px; color: var(--c-border); }
.fil a { color: var(--c-primary); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil [aria-current] { color: var(--c-text-muted); }

/* ---------- Hero : photo pleine largeur, titre par-dessus ---------- */
.art-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px;
    padding: 34px 0 18px;
    overflow: hidden;
    background: var(--c-primary-dark);
    isolation: isolate;
}
.art-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Le sujet d'une photo de personne est presque toujours dans la moitié
       haute : on cadre vers le haut pour ne pas décapiter les visages quand
       le bandeau est large et court. */
    object-position: center 35%;
    z-index: -2;
}
/* Voile dégradé. La photo est choisie automatiquement sur Pexels : elle peut
   être claire, chargée ou contrastée. Le dégradé garantit un fond sombre
   derrière le texte quoi qu'elle contienne — le contraste ne dépend donc pas
   du hasard du cliché. */
.art-hero-voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to top,
        rgba(12, 32, 52, .93) 0%,
        rgba(12, 32, 52, .88) 30%,
        rgba(12, 32, 52, .60) 52%,
        rgba(12, 32, 52, .18) 78%,
        rgba(12, 32, 52, 0)   100%
    );
}
/* Sans photo : dégradé de marque, même gabarit. Aucun trou dans la mise en
   page selon qu'un article est illustré ou non. */
.art-hero-uni {
    background: linear-gradient(140deg, var(--c-primary) 0%, var(--c-primary-dark) 72%);
}
.art-hero-uni .art-hero-voile { display: none; }

.art-hero-contenu { position: relative; }

.art-hero .art-rubrique {
    display: inline-block;
    background: rgba(255, 255, 255, .17);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    padding: 6px 13px;
    border-radius: 99px;
    text-decoration: none;
    margin-bottom: 13px;
    backdrop-filter: blur(3px);
}
.art-hero h1 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 11px;
    color: #fff;
    /* Ombre portée discrète : filet de sécurité sur une zone de photo
       exceptionnellement claire malgré le voile. */
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
.art-hero .art-meta {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .88);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.art-hero-credit {
    position: absolute;
    right: 0;
    bottom: 6px;
    margin: 0;
    padding: 0 var(--sp-6);
    font-size: 11px;
    color: rgba(255, 255, 255, .55);
    text-align: right;
}

/* ---------- Colonne de lecture ---------- */
.art-corps { padding-bottom: 40px; }

/* 68 caractères par ligne : au-delà, l'œil perd la ligne suivante. */
.art-corps > * { max-width: 68ch; }
.art-corps > .art-cta { max-width: none; }

/* ---------- Réponse directe ---------- */
.en-bref {
    background: var(--c-secondary-soft);
    border-left: 4px solid var(--c-secondary);
    border-radius: 0 10px 10px 0;
    padding: 16px 18px;
    margin: 18px 0;
}
.en-bref h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--c-secondary-dark);
    margin: 0 0 7px;
}
.en-bref p { margin: 0; font-size: 17px; line-height: 1.6; font-weight: 500; }

/* ---------- Sommaire ---------- */
.sommaire {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 0 16px;
    margin: 18px 0;
    background: var(--c-bg);
}
.sommaire summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--c-primary-dark);
    padding: 14px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.sommaire ol { margin: 0 0 14px; padding-left: 20px; }
.sommaire li { margin-bottom: 10px; }
.sommaire a {
    color: var(--c-primary);
    text-decoration: none;
    /* `inline-block` alignait la puce numérotée sur la DERNIÈRE ligne des
       intitulés qui passent à la ligne — fréquent sur mobile. En `inline`,
       le numéro reste en face de la première ligne. */
    display: inline;
}
.sommaire li { line-height: 1.5; }
.sommaire a:hover { text-decoration: underline; }

/* ---------- Corps rédactionnel ---------- */
.prose { font-size: 17.5px; line-height: 1.72; }
.prose h2 {
    font-size: 23px;
    line-height: 1.3;
    margin: 34px 0 12px;
    color: var(--c-primary-dark);
    /* Une ancre cliquée ne doit pas passer sous l'en-tête collant. */
    scroll-margin-top: 78px;
}
.prose h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 24px 0 9px;
    color: var(--c-primary);
    scroll-margin-top: 78px;
}
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--c-primary); text-underline-offset: 2px; }
.prose strong { color: var(--c-primary-dark); }
.prose blockquote {
    margin: 20px 0;
    padding: 14px 18px;
    background: var(--c-bg-alt);
    border-left: 4px solid var(--c-primary);
    border-radius: 0 10px 10px 0;
}
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--c-border); margin: 30px 0; }
.prose code {
    background: var(--c-bg-alt);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .92em;
}
.prose svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
/* Les navigateurs appliquent « margin: 1em 40px » à <figure>. Sans remise à
   zéro, schémas et légendes sont décalés par rapport au corps du texte. */
.prose figure { margin: 24px 0; }
.prose figcaption {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c-text-muted);
    margin-top: 9px;
    font-style: italic;
}

/* Un tableau ne se réorganise pas : il défile dans son propre conteneur
   plutôt que d'élargir la page entière. */
.tableau-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    border: 1px solid var(--c-border);
    border-radius: 10px;
}
.tableau-scroll table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tableau-scroll th {
    background: var(--c-bg-alt);
    text-align: left;
    font-weight: 700;
    color: var(--c-primary-dark);
    padding: 11px 14px;
    white-space: nowrap;
    border-bottom: 1px solid var(--c-border);
}
.tableau-scroll td { padding: 11px 14px; border-bottom: 1px solid var(--c-border); }
.tableau-scroll tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq-art { margin: 36px 0 0; }
.faq-art > h2 {
    font-size: 23px;
    margin: 0 0 14px;
    color: var(--c-primary-dark);
    scroll-margin-top: 78px;
}
.faq-art details {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    margin-bottom: 9px;
    background: var(--c-bg);
}
.faq-art summary {
    cursor: pointer;
    padding: 14px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    list-style: none;
}
.faq-art summary::-webkit-details-marker { display: none; }
.faq-art summary h3 {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.4;
    color: var(--c-primary-dark);
    font-weight: 600;
}
.faq-art summary::after {
    content: "+";
    margin-left: auto;
    padding-left: 12px;
    font-size: 21px;
    color: var(--c-primary);
    line-height: 1;
}
.faq-art details[open] summary::after { content: "−"; }
.faq-art details p {
    margin: 0;
    padding: 0 16px 16px;
    color: var(--c-text-muted);
    line-height: 1.68;
}

/* ---------- Appel à l'action ---------- */
.art-cta {
    background: var(--c-primary-dark);
    color: #fff;
    border-radius: 14px;
    padding: 24px 20px;
    margin: 36px 0;
    text-align: center;
}
.art-cta h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; color: #fff; }
.art-cta p { margin: 0 0 16px; color: #C9DCEC; font-size: 15.5px; }
.art-cta-boutons { display: flex; flex-direction: column; gap: 10px; }
.art-cta .btn { width: 100%; min-height: 50px; justify-content: center; }
.art-cta .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.art-cta-mention { font-size: 12.5px !important; margin: 14px 0 0 !important; color: #9BB8D1 !important; }

/* ---------- Articles liés ---------- */
.art-lies { margin: 36px 0 0; }
.art-lies h2 { font-size: 21px; margin: 0 0 12px; color: var(--c-primary-dark); }
.art-lies ul { list-style: none; margin: 0; padding: 0; }
.art-lies li { margin-bottom: 9px; }
.art-lies a {
    display: block;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    background: var(--c-bg);
}
.art-lies .titre { display: block; font-weight: 700; color: var(--c-primary-dark); line-height: 1.35; }
.art-lies .extrait { display: block; font-size: 14px; color: var(--c-text-muted); margin-top: 4px; }

/* ---------- Signature ---------- */
.art-auteur {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--c-border);
    font-size: 14px;
    color: var(--c-text-muted);
    line-height: 1.65;
}

/* ============================================================
   Index du blog
   ============================================================ */
.blog-rubriques {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}
.blog-rubriques::-webkit-scrollbar { height: 0; }
.blog-rubriques a {
    flex: 0 0 auto;
    padding: 10px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--c-border);
    border-radius: 99px;
    background: var(--c-bg);
    color: var(--c-text);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}
.blog-rubriques a.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.blog-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.blog-carte {
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-bg);
    overflow: hidden;
}
.blog-carte a { display: block; text-decoration: none; color: inherit; }
.blog-carte img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
.blog-carte .dedans { padding: 15px 16px 17px; }
.blog-carte .rub {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--c-secondary-dark);
}
.blog-carte h2 {
    font-size: 18.5px;
    line-height: 1.32;
    margin: 6px 0 7px;
    color: var(--c-primary-dark);
}
.blog-carte p { margin: 0; font-size: 15px; color: var(--c-text-muted); line-height: 1.6; }
.blog-carte .pied { margin-top: 10px; font-size: 13px; color: var(--c-text-muted); }

.blog-vide {
    border: 1px dashed var(--c-border);
    border-radius: 12px;
    padding: 34px 18px;
    text-align: center;
    color: var(--c-text-muted);
}

/* ============================================================
   Écrans larges
   ============================================================ */
@media (min-width: 720px) {
    .art-hero { min-height: 400px; padding: 40px 0 30px; }
    .art-hero h1 { font-size: 40px; max-width: 17ch; }
    .art-hero .art-meta { font-size: 15px; }
    .prose { font-size: 18px; }
    .prose h2 { font-size: 27px; margin-top: 42px; }
    .prose h3 { font-size: 21px; }
    .en-bref p { font-size: 18px; }
    .art-cta { padding: 30px 28px; }
    .art-cta h2 { font-size: 24px; }
    .art-cta-boutons { flex-direction: row; justify-content: center; }
    .art-cta .btn { width: auto; min-width: 230px; }
    .blog-liste { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
    .blog-liste { grid-template-columns: repeat(3, 1fr); }
    .art-hero { min-height: 460px; }
    .art-hero h1 { font-size: 46px; }
}

/* Le lecteur qui imprime un guide n'a que faire des appels à l'action. */
@media print {
    .fil, .art-cta, .art-lies, .sommaire { display: none; }
    .art-hero { min-height: 0; background: none; padding: 0 0 12px; }
    .art-hero-img, .art-hero-voile, .art-hero-credit { display: none; }
    .art-hero h1 { color: #000; text-shadow: none; }
    .art-hero .art-rubrique { background: none; color: #000; padding-left: 0; }
    .art-hero .art-meta { color: #333; }
    .prose { font-size: 12pt; }
}