/* ============================================================
   article.css — Modele "article" (guide editorial a sections)
   La base ne stocke que du HTML simple ; la structure (<section>,
   sommaire, hero) est construite en PHP. Flux vertical lisible.
   Reutilise les variables de style.css (valeurs de repli sinon).
   ============================================================ */

.ling-article {
    --ar-max: var(--max-width, 1220px);
    --ar-text: 940px;   /* vertical lingua : contenu plus large que le modele article tourisme (760px) */
    --ar-accent: var(--color-primary, #3b82f6);
    --ar-accent-hover: var(--color-primary-dark, #2563eb);
    --ar-ink: #0f172a;
    --ar-muted: #64748b;
    --ar-line: #e6e8ee;
    --ar-bg-soft: #f6f8fc;
    color: var(--ar-ink);
    font-family: "Roboto", system-ui, sans-serif;
}

.ling-article :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }

/* ---- Hero "split" : texte + CTA a gauche, image arrondie a droite ---- */
.ling-article-hero {
    max-width: var(--ar-max);
    margin: 3rem auto 0;
    padding: 0 var(--padding-x, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.ling-article-hero--split {
    display: grid;
    /* desktop : texte ~550px, image ~600px (retrecissent proportionnellement
       sous 1220px de viewport), espace restant entre les deux */
    grid-template-columns: minmax(0, 550px) minmax(0, 600px);
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
}
.ling-article-hero-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Image du hero (lead {{img}} hisse du contenu, ou hero_image).
   Selecteurs doubles pour primer sur ".ling-article-figure img" (4/3, declare
   plus bas pour les images du contenu). */
.ling-article-hero-media { min-width: 0; }
.ling-article-hero-media .ling-article-figure { margin: 0; }
.ling-article-hero-media img,
.ling-article-hero-media .ling-article-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: inherit;   /* meme rayon que le <picture> (fond skeleton) -> pas d'angle gris */
}
/* DESKTOP : conteneur image ~600x400 (cover). Le JS replie la description
   pour que H1 + description + boutons ne depassent pas les 400px de l'image ;
   apres "Voir plus" le texte se deplie, l'image reste a 400px (centree). */
@media (min-width: 901px) {
    .ling-article-hero--split .ling-article-hero-media img,
    .ling-article-hero--split .ling-article-hero-media .ling-article-figure img {
        height: 400px;
        aspect-ratio: auto;
    }
}
/* Boutons CTA (base .hdr-btn de Menu.css, en pilule et plus grands) */
.ling-article-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 0.35rem;
}
.ling-article-hero-cta .hdr-btn {
    height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 0.9688rem;
}
.ling-article-h1 {
    font-size: clamp(1.7rem, 1.05rem + 2vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 22ch;
    color: var(--color-dark, #1f2937);
}
.ling-article-intro {
    max-width: var(--ar-text);
    font-size: 1.05rem;
    line-height: 1.7;
    color: #334155;
}
@media (max-width: 900px) {
    .ling-article-hero--split { grid-template-columns: 1fr; gap: 1.75rem; }
    .ling-article-hero-media img,
    .ling-article-hero-media .ling-article-figure img { aspect-ratio: 16 / 10; }   /* rayon herite du <picture> (18px mobile) */
    .ling-article-h1 { max-width: none; }
}
.ling-article-intro > * + * { margin-top: 0.9rem; }
.ling-article-intro a { color: var(--ar-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Sommaire (TOC) ---- */
.ling-article-toc {
    max-width: var(--ar-text);
    margin: 4.5rem auto 0;   /* plus d'air entre le hero et le sommaire */
    padding: 1.25rem 1.5rem;
    background: var(--ar-bg-soft);
    border: 1px solid var(--ar-line);
    border-radius: 14px;
    width: calc(100% - 2 * var(--padding-x, 1.25rem));
}
.ling-article-toc-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ar-muted);
    margin-bottom: 0.85rem;
}
.ling-article-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) { .ling-article-toc-list { grid-template-columns: 1fr 1fr; } }
.ling-article-toc-list a {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    color: #334155;
    padding: 0.3rem 0;
    transition: color 0.15s ease;
}
.ling-article-toc-list a:hover,
.ling-article-toc-list a.is-active { color: var(--ar-accent); }
.ling-article-toc-list a.is-active { font-weight: 600; }
.ling-article-toc-num {
    flex: 0 0 auto;
    min-width: 1.4rem;
    font-weight: 700;
    color: var(--ar-accent);
    font-variant-numeric: tabular-nums;
}

/* ---- Contenu : sections en flux vertical ---- */
.ling-article-content {
    max-width: var(--ar-text);
    margin: 4rem auto 5rem;   /* plus d'air entre le sommaire et la 1re section */
    padding: 0 var(--padding-x, 1.25rem);
}
.ling-article-content > section { scroll-margin-top: 90px; }
.ling-article-content > section:not(:first-child) {
    margin-top: 5.5rem;       /* plus d'air entre les sections */
    padding-top: 5.5rem;
    border-top: 1px solid var(--ar-line);
}
/* Titre de section : barre d'accent a gauche (style editorial, sans numero) */
.ling-article-content > section > h2 {
    font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.8rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
    padding-left: 0.9rem;
    border-left: 4px solid var(--ar-accent);
    color: var(--color-dark, #1f2937);
    scroll-margin-top: 90px;
}

/* Corps de texte */
.ling-article-content p,
.ling-article-content ul,
.ling-article-content ol { font-size: 1.03rem; line-height: 1.8; color: #334155; }
.ling-article-content > section > * + * { margin-top: 1.45rem; }
.ling-article-content h3 {
    font-size: 1.18rem;
    line-height: 1.4;
    color: var(--ar-ink);
    margin-top: 2.5rem;
    margin-bottom: 0.2rem;
}
.ling-article-content h4 {
    font-size: 1.02rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--ar-ink);
    margin-top: 2rem;
}
.ling-article-content ul,
.ling-article-content ol { padding-left: 1.25rem; }
.ling-article-content li + li { margin-top: 0.55rem; }
/* Encarts partages (activites conseillees, hotels, etc.) : plus d'air autour */
.ling-article-content .activities-target,
.ling-article-content .hotels-target,
.ling-article-content .adapter-target { margin-top: 3rem; margin-bottom: 0.6rem; }
/* Liste multi-colonnes (ex. liste des compagnies aeriennes) : classe reutilisable. */
.ling-article-content ul.ling-article-list-2col {
    columns: 2;
    column-gap: 2.5rem;
}
.ling-article-content ul.ling-article-list-2col li { break-inside: avoid; }
.ling-article-content ul.ling-article-list-2col li + li { margin-top: 0.4rem; }
@media (max-width: 560px) { .ling-article-content ul.ling-article-list-2col { columns: 1; } }
.ling-article-content strong { color: var(--ar-ink); }
.ling-article-content a {
    color: var(--ar-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}
.ling-article-content a:hover { color: var(--ar-accent-hover); }

/* Image inline unique (figure) : ratio fixe */
.ling-article-figure { margin: 1.75rem 0 0.5rem; }
.ling-article-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: inherit;   /* meme rayon (14px) que le <picture> skeleton */
}
/* Illustration inline DANS le contenu : plafonnee (sinon pleine largeur 940px
   = ~700px de haut, trop grand). Format paysage 3/2, hauteur max, centree et
   pas pleine largeur pour rester une illustration, pas un bandeau. */
.ling-article-content .ling-article-figure {
    max-width: 620px;
    margin: 2rem auto 0.75rem;
}
.ling-article-content .ling-article-figure img,
.ling-article-content .ling-article-figure picture {
    aspect-ratio: 3 / 2;
    max-height: 400px;
}

/* Carte Google Maps embed (placeholder {{map:url}}) : iframe responsive */
.ling-article-content .ling-article-map {
    margin: 1.75rem 0 0.5rem;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
}
.ling-article-content .ling-article-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Galerie / mosaique d'images : pleine largeur, colonnes auto */
/* Schema AUTO selon le nombre d'images :
   1 = pleine largeur (16/9, hauteur maxi) ; 2 = 2 colonnes ; 3 = 3 colonnes ;
   4 et + = 3 par ligne puis passage a la ligne suivante. Mobile : 2 colonnes (1 image = entier). */
.ling-article-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.75rem 0 0.5rem;
}
.ling-article-gallery:has(> .ling-article-gallery-item:only-child) { grid-template-columns: 1fr; }
.ling-article-gallery:has(> .ling-article-gallery-item:first-child:nth-last-child(2)) { grid-template-columns: repeat(2, 1fr); }
.ling-article-gallery-item { margin: 0; }
.ling-article-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: inherit;   /* meme rayon que le <picture> skeleton */
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
}
/* 1 seule image : entier, en cover, rendu 16/9 avec hauteur maxi */
.ling-article-gallery-item:only-child img { aspect-ratio: 16 / 9; max-height: 440px; }
@media (max-width: 600px) {
    .ling-article-gallery { grid-template-columns: repeat(2, 1fr); }
    .ling-article-gallery:has(> .ling-article-gallery-item:only-child) { grid-template-columns: 1fr; }
}

/* Carte telechargeable (placeholder {{map-pdf:...}}) : pleine largeur, cliquable vers le PDF,
   ratio NATUREL (pas de crop : une carte doit rester lisible en entier). Hors grid lateral. */
.ling-article-content .ling-article-mapfig { margin: 1.9rem 0 0.6rem; }
.ling-article-content .ling-article-mapfig a { display: block; text-decoration: none; color: inherit; }
.ling-article-content .ling-article-mapfig img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
    transition: filter .15s ease;
}
.ling-article-content .ling-article-mapfig a:hover img { filter: brightness(0.97); }
.ling-article-content .ling-article-mapfig figcaption {
    margin-top: .55rem;
    font-size: .92rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.ling-article-mapfig-pdf {
    background: var(--ar-accent, #2563eb);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .12rem .5rem;
    border-radius: 4px;
}

/* ---- Desktop : sections en pleine largeur, texte limite a --ar-text. Aucune mise en
   colonnes laterale : les images de section s'affichent pleine largeur dans le flux. ---- */
@media (min-width: 900px) {
    .ling-article-content > section { max-width: var(--ar-text); }
}

/* ---- Tableau d'activites : lignes entierement cliquables ---- */
.ling-article-act-table { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.5rem 0; max-width: var(--ar-text); }
.ling-article-content .ling-article-act-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.5rem 0.9rem 0.5rem 0.5rem;
    background: #fff;
    border: 1px solid var(--ar-line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--ar-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ling-article-content .ling-article-act-row:hover {
    border-color: var(--ar-accent);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.16);
}
.ling-article-act-img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.ling-article-content .ling-article-act-row picture { display: block; line-height: 0; }
.ling-article-act-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ling-article-act-name { font-weight: 600; line-height: 1.25; }
.ling-article-act-tag {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ar-accent);
    background: #eaf1ff;
    padding: 0.13rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.15rem;
    line-height: 1.3;
}
.ling-article-act-meta { font-size: 0.85rem; color: var(--ar-muted); }
.ling-article-act-price { font-weight: 700; color: var(--ar-accent); white-space: nowrap; font-size: 1.05rem; }

/* ---- Tableaux comparatifs (acces, options bateau) ---- */
/* La base ne stocke qu'un <table> nu ; ling-article-page.php l'enveloppe dans
   .ling-article-table-wrap (conteneur scrollable horizontalement sur mobile). */
.ling-article-content .ling-article-table-wrap {
    margin: 1.7rem 0 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ar-line);
    border-radius: 14px;
}
.ling-article-content table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.96rem;
}
.ling-article-content thead th {
    background: var(--ar-bg-soft);
    color: var(--ar-ink);
    text-align: left;
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.ling-article-content th,
.ling-article-content td {
    padding: 0.72rem 0.95rem;
    border-bottom: 1px solid var(--ar-line);
    vertical-align: middle;
    line-height: 1.45;
    text-align: left;
}
.ling-article-content tbody tr:last-child td { border-bottom: 0; }
.ling-article-content tbody tr:nth-child(even) td { background: #fafbfe; }
.ling-article-content table .ling-article-price {
    font-weight: 700;
    color: var(--ar-ink);
    white-space: nowrap;
}
.ling-article-content table a { font-weight: 600; white-space: nowrap; }
/* Colonne « Formule » des tableaux d'activités : vignette + titre, cliquable vers l'offre */
.ling-article-content .ling-article-actc-formule { display: flex; align-items: center; gap: 0.7rem; }
.ling-article-content a.ling-article-actc-formule { text-decoration: none; color: inherit; white-space: normal; }
.ling-article-content a.ling-article-actc-formule .ling-article-actc-name { transition: color 0.15s ease; }
.ling-article-content a.ling-article-actc-formule:hover .ling-article-actc-name { color: var(--ar-accent); text-decoration: underline; }
.ling-article-content .ling-article-actc-thumb { flex: 0 0 auto; line-height: 0; }
.ling-article-content .ling-article-actc-thumb img { width: 88px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.ling-article-content .ling-article-actc-name { font-weight: 600; line-height: 1.3; min-width: 7rem; }

/* ---- Mobile : tableaux d'activités en cartes empilées (lisibles sans scroll horizontal) ---- */
@media (max-width: 640px) {
    .ling-article-content .ling-article-actc-table thead { display: none; }
    .ling-article-content .ling-article-actc-table,
    .ling-article-content .ling-article-actc-table tbody,
    .ling-article-content .ling-article-actc-table tr,
    .ling-article-content .ling-article-actc-table td { display: block; width: 100%; }
    .ling-article-content .ling-article-actc-table tr { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--ar-line); }
    .ling-article-content .ling-article-actc-table tr:last-child { border-bottom: 0; }
    .ling-article-content .ling-article-actc-table tbody tr:nth-child(even) td { background: transparent; }
    .ling-article-content .ling-article-actc-table td { padding: 0; border: 0; }
    .ling-article-content .ling-article-actc-table td + td { margin-top: 0.5rem; }
    .ling-article-content .ling-article-actc-table td[data-label] { font-size: 0.92rem; color: var(--ar-muted); }
    .ling-article-content .ling-article-actc-table td[data-label]::before { content: attr(data-label) " : "; font-weight: 600; color: var(--ar-ink); }
    .ling-article-content .ling-article-actc-table .ling-article-price { font-size: 1.02rem; }
    .ling-article-content .ling-article-actc-table .ling-article-actc-name { min-width: 0; }
}

/* ---- Conclusion ---- */
.ling-article-conclusion {
    max-width: var(--ar-text);
    margin: 3.5rem auto 4rem;
    padding: 1.75rem 1.9rem;
    background: var(--ar-bg-soft);
    border: 1px solid var(--ar-line);
    border-left: 4px solid var(--ar-accent);
    border-radius: 14px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #334155;
}
.ling-article-conclusion > * + * { margin-top: 1rem; }
.ling-article-conclusion a { color: var(--ar-accent); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---- Lightbox galerie : plein ecran blanc, image plein format centree ---- */
.ling-article-gallery-item img { cursor: zoom-in; }

.ling-article-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;                 /* ecran blanc */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vmin;
}
.ling-article-lightbox[hidden] { display: none; }   /* surcharge le display:flex quand ferme */

.ling-article-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.18));
}

.ling-article-lightbox-close,
.ling-article-lightbox-nav {
    position: fixed;
    border: none;
    background: transparent;
    color: var(--ar-ink, #0f172a);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ling-article-lightbox-close[hidden],
.ling-article-lightbox-nav[hidden] { display: none; }

.ling-article-lightbox-close {
    top: 0.75rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    font-size: 2.6rem;
    border-radius: 50%;
}
.ling-article-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 3.5rem;
    height: 3.5rem;
    font-size: 3rem;
}
.ling-article-lightbox-prev { left: 0.75rem; }
.ling-article-lightbox-next { right: 0.75rem; }

.ling-article-lightbox-close:hover,
.ling-article-lightbox-nav:hover { color: var(--ar-accent, #3b82f6); }
.ling-article-lightbox-prev:hover { transform: translateY(-50%) scale(1.12); }
.ling-article-lightbox-next:hover { transform: translateY(-50%) scale(1.12); }

@media (max-width: 600px) {
    .ling-article-lightbox-nav { width: 2.75rem; height: 2.75rem; font-size: 2.4rem; }
    .ling-article-lightbox-img { max-width: 96vw; }
}

/* ---- Encart "focus" : met en avant une phrase cle ({{focus}}...{{/focus}}) ---- */
.ling-article-content aside.ling-article-focus {
    position: relative;
    margin: 1.9rem 0;
    padding: 1.25rem 1.5rem 1.35rem;
    background: linear-gradient(135deg, var(--color-primary-light, #eff6ff) 0%, var(--ar-bg-soft, #f6f8fc) 78%);
    border: 1px solid #c8dbff;
    border-left: 4px solid var(--ar-accent);
    border-radius: 12px;
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--ar-ink);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
}
.ling-article-content aside.ling-article-focus::before {
    content: "\1F4A1  " attr(data-label);   /* ampoule + libelle localise (data-label) */
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ar-accent);
}
.ling-article-content aside.ling-article-focus a {
    color: var(--ar-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.ling-article-content aside.ling-article-focus a:hover { color: var(--ar-accent-hover); }

/* ============================================================
   Illusion de chargement — skeleton 100% CSS, sans JS.
   Fond gris-blanc + barre verticale claire qui balaie l'image.
   Le <picture> porte le fond + la barre (::before) ; l'<img>, opaque et
   au-dessus (z-index), recouvre l'effet des qu'elle est chargee.
   ============================================================ */
.ling-article-hero-media picture,
.ling-article-hero .ling-article-figure picture,
.ling-article-content .ling-article-figure picture,
.ling-article-gallery-item picture {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #dde2ea;
}
.ling-article-hero-media picture,
.ling-article-hero .ling-article-figure picture { border-radius: 24px; }
@media (max-width: 900px) {
    .ling-article-hero-media picture,
    .ling-article-hero .ling-article-figure picture { border-radius: 18px; }
}
.ling-article-hero-media picture::before,
.ling-article-hero .ling-article-figure picture::before,
.ling-article-content .ling-article-figure picture::before,
.ling-article-gallery-item picture::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent);
    animation: ar-skeleton 1.5s ease-in-out infinite;
}
.ling-article-hero-media picture img,
.ling-article-hero .ling-article-figure picture img,
.ling-article-content .ling-article-figure picture img,
.ling-article-gallery-item picture img {
    position: relative;
    z-index: 1;
    /* Masque le texte alt pendant le chargement (l'attribut reste dans le HTML
       -> aucun impact SEO/accessibilite). L'image chargee n'est pas du texte. */
    color: transparent;
    font-size: 0;
}
@keyframes ar-skeleton {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(240%); }
}
@media (prefers-reduced-motion: reduce) {
    .ling-article-hero-media picture::before,
    .ling-article-hero .ling-article-figure picture::before,
    .ling-article-content .ling-article-figure picture::before,
    .ling-article-gallery-item picture::before { animation: none; }
}

/* ---- Hero split : intro tronquée SEULEMENT si le texte complet dépasse la
   hauteur de l'image (~400px). Par défaut PAS de clamp -> une intro qui tient
   s'affiche entière, instantanément, sans bouton. Le clamp (classe .is-clamped
   + nb de lignes en inline) et l'affichage du bouton sont posés par le JS après
   mesure, uniquement en cas de débordement réel. Sans JS : texte entier, pas de
   bouton (dégradation propre). ---- */
@media (min-width: 901px) {
    .ling-article-hero--split .ling-article-intro.is-clamped {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
.ling-article-intro-more {
    display: none;   /* base : masqué (mobile, et desktop tant que le JS ne l'a pas révélé) */
    background: none;
    border: none;
    padding: 0;
    align-self: flex-start;
    font: inherit;
    font-weight: 500;
    color: var(--ar-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    margin-top: -0.5rem;
}
@media (min-width: 901px) {
    .ling-article-intro-more:not([hidden]) { display: inline; }
}
.ling-article-intro-more:hover { color: var(--ar-accent-hover); }