/* Page article — thème CLAIR : fond blanc, titre/texte noir, sous-titre & légendes gris.
   Référence visuelle : article L'Équipe (blanc / noir / gris). Conserve le compteur
   « déjà consulté », le bloc « Voir plus » et l'anti-flash (reading-initial). */
:root{--ink:#1a1a1a;--paper:#ffffff;--muted:#6f6f6f;--line:#e6e6e6;--red:#e2001a}
body{overflow-wrap:anywhere;background:var(--paper);color:var(--ink)}
.a-main{max-width:1160px;grid-template-columns:minmax(0,780px) 240px;gap:44px;padding-top:50px}

/* En-tête : logo aligné à côté de « TomsoFoot » (le CSS de base met les images en display:block). */
.a-topbar .a-brand{display:inline-flex;align-items:center;gap:9px}
.a-topbar .tf-brand-mark{flex:0 0 auto;width:30px;height:30px;display:block;border:0}
.a-topbar .a-brand .tf-brand-name{color:#fff}

/* Sous-titre (chapeau) et légendes en gris ; corps en noir ; liens en bleu. */
.a-deck{color:var(--muted)}
figcaption,.a-figure figcaption,.a-credit{color:var(--muted)}
.a-h3{color:#333}
.a-body{color:var(--ink);line-height:1.85}
.a-body a{color:#0b57c9;text-decoration:underline;text-underline-offset:2px}.a-body a:hover{color:var(--red)}
.a-byline{color:var(--muted)}.a-byline .a-author{color:var(--ink)}

/* Compteur « X déjà consulté » (à côté de la date et de la durée de lecture). */
.a-views{color:var(--muted)}.a-views-dot{opacity:.5}

/* Anti-flash : l'article est rendu DÉJÀ replié côté serveur (jamais montré en entier). */
.reading-initial .a-body{visibility:hidden;max-height:40vh;overflow:hidden}

/* Bloc « Voir plus » adapté au fond clair. */
.reading-gate{position:relative;margin:30px 0 45px;padding:32px;text-align:center;border:1px solid var(--line);border-radius:18px;background:#f7f9fc}
.reading-gate::before{content:'';position:absolute;top:-42px;height:42px;left:0;right:0;background:linear-gradient(transparent,var(--paper))}
.reading-eyebrow{color:var(--red);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.reading-gate h2{font:800 24px/1.25 Inter,Arial,sans-serif;margin:13px 0 10px;letter-spacing:-.025em;color:var(--ink)}
.reading-gate p{font-size:14px;color:var(--muted);margin:0 0 24px}
.reading-more{border:1px solid #0b57c9;border-radius:9px;background:#0b57c9;color:#fff;padding:15px 30px;font:800 14px Inter,sans-serif;cursor:pointer;visibility:hidden;opacity:0;transform:translateY(8px);transition:transform .3s,opacity .3s,box-shadow .3s}
.is-reached .reading-more{visibility:visible;opacity:1;transform:none}.reading-more span{margin-left:20px}
.reading-more:hover{box-shadow:0 10px 26px #0b57c930}.reading-more:focus-visible{outline:3px solid #0b57c9;outline-offset:4px}
.reading-status{font:13px/1.6 Inter,sans-serif;color:var(--muted);padding:20px;border:1px solid var(--line);border-radius:12px}
.reading-status button{display:block;border:0;background:none;color:#0b57c9;font:inherit;padding:8px 0;text-decoration:underline;cursor:pointer}
.a-views[hidden],.reading-gate[hidden],.reading-status[hidden]{display:none}

@media(max-width:900px){.a-main{grid-template-columns:1fr;gap:24px;max-width:800px;padding-top:25px}}
@media(max-width:560px){.a-title{font-size:32px}.a-body{font-size:17px}.a-main{padding:25px 18px}.a-deck{font-size:18px}.reading-gate{padding:28px 19px}.reading-gate h2{font-size:22px}.reading-more{width:100%}.a-hero img{height:auto}.a-side{min-width:0}}
@media(prefers-reduced-motion:reduce){.reading-more{transition:none}}
.reading-gate{scroll-margin-top:150px}