/* ════════════════════════════════════════════════════════════════ IT'S RUGBY — ARTICLE PAGE CSS Template-specific styles for the article page ════════════════════════════════════════════════════════════════ */ /* ── Article hero zone ───────────────────────────────────────── */ .article-hero{position:relative;background:var(--teal);overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;} .article-hero.article-hero--compact{min-height:220px;} .article-hero--compact .article-hero-overlay{padding:36px 0 22px;} .article-hero--compact .article-title{font-size:clamp(20px,2.4vw,28px);} .article-hero-img{position:absolute;inset:0;} .article-hero-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);} .article-hero-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(28,61,52,.88) 0%,rgba(28,61,52,.55) 45%,rgba(28,61,52,.25) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:60px 0 28px;} .article-hero-content{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box;} /* ── Category badge ──────────────────────────────────────────── */ .its-v2 a.article-cat-badge,.article-cat-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:0;text-transform:none;padding:4px 12px;color:var(--teal);background:var(--vanilla);margin-bottom:12px;text-decoration:none;} .its-v2 a.article-cat-badge:hover{color:var(--teal);background:var(--vanilla-d, #E8D8C0);} /* ── Article header ──────────────────────────────────────────── */ .its-v2 .article-hero h1.article-title,.its-v2 h1.article-title,.article-hero h1.article-title,.article-title{font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.2;color:var(--vanilla);margin-bottom:12px;} /* ── Chapô ───────────────────────────────────────────────────── */ .article-hero .article-chapo{font-size:15px;font-weight:500;color:rgba(242,229,210,.8);line-height:1.7;border-left:3px solid var(--sage);padding-left:16px;margin:20px 0;} /* ── Author meta ─────────────────────────────────────────────── */ .article-hero .article-meta{display:flex;align-items:center;gap:16px;font-size:12px;color:rgba(242,229,210,.7);margin:16px 0 0;flex-wrap:wrap;padding-bottom:28px;} .article-hero .article-credits{display:flex;gap:12px;align-items:center;flex-wrap:wrap;} .article-hero .article-credit{display:flex;align-items:center;gap:8px;} .article-hero .article-credit + .article-credit::before{content:"·";color:rgba(242,229,210,.4);margin-right:0;font-weight:700;} .article-hero .article-meta-avatar{width:32px;height:32px;background:rgba(242,229,210,.15);color:var(--vanilla);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:11px;flex-shrink:0;} .article-hero .article-meta-author{font-weight:700;color:var(--vanilla);} .article-hero .article-meta-role{font-size:10px;color:rgba(242,229,210,.5);text-transform:none;letter-spacing:0;} /* ── Content wrapper (opaque bg) ─────────────────────────────── */ .article-content-wrap{background:var(--vanilla);position:relative;z-index:2;padding:16px 0;} /* ── Share row ───────────────────────────────────────────────── */ .share-row{display:flex;gap:8px;margin:12px 0 0;} .share-btn{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:5px 12px;border:1px solid var(--border);color:var(--teal);background:var(--white);cursor:pointer;text-transform:none;letter-spacing:0;} .share-btn:hover{background:var(--sage-lt);border-color:var(--teal);} /* ── Two-column article layout ───────────────────────────────── */ .article-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;} .article-layout--narrow{grid-template-columns:minmax(0,720px);justify-content:center;} /* ── Blog partenaire — single template (calé sur single-article) ─ */ .bp-hero-badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;} .bp-hero-badges .article-cat-badge{margin-bottom:0;} .bp-hero-source-kicker{font-size:11px;font-weight:700;color:rgba(242,229,210,.85);text-transform:none;letter-spacing:0;} .bp-source-cta{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--sage);padding:22px 24px;margin:24px 0;box-shadow:0 2px 12px rgba(28,61,52,.06);} .bp-source-cta-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;} .bp-source-cta-body{display:flex;flex-direction:column;gap:2px;min-width:0;} .bp-source-cta-kicker{font-size:10px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--muted);} .bp-source-cta-name{font-size:18px;font-weight:900;color:var(--teal);line-height:1.2;} .bp-source-cta-host{font-size:12px;font-weight:600;color:var(--muted);font-variant:tabular-nums;} .bp-source-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--teal);color:var(--vanilla);border:1px solid var(--teal);text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.3px;transition:background .15s,border-color .15s,color .15s;flex-shrink:0;} .bp-source-cta-btn:hover,.bp-source-cta-btn:focus-visible{background:var(--teal-dk,#15302a);border-color:var(--teal-dk,#15302a);color:var(--vanilla);} .bp-source-cta-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:11px;line-height:1.6;color:var(--muted);font-style:italic;} .bp-source-cta--missing{border-left-color:var(--muted);} .bp-source-cta--missing p{margin:0;font-size:13px;color:var(--muted);} @media(max-width:680px){ .bp-source-cta{padding:18px 20px;} .bp-source-cta-row{flex-direction:column;align-items:flex-start;} .bp-source-cta-btn{width:100%;justify-content:center;} } /* ── Blog partenaire — sidebar (réutilise .sidebar-box + .sidebar-link) ─────── */ .bp-aside-list-all{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(196,196,196,.3);font-size:11px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--teal);text-decoration:none;width:100%;} .bp-aside-list-all:hover{color:var(--teal-dk);} .bp-aside-curator-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;} .bp-aside-curator-avatar{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--teal);color:var(--vanilla);font-size:14px;font-weight:800;letter-spacing:.5px;} .bp-aside-curator-meta{display:flex;flex-direction:column;gap:2px;min-width:0;} .bp-aside-curator-name{font-size:14px;font-weight:800;color:var(--teal);line-height:1.2;} .bp-aside-curator-role{font-size:11px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;} .bp-aside-curator-link:hover .bp-aside-curator-name{text-decoration:underline;} /* ── Article body ────────────────────────────────────────────── */ .article-body{font-size:14px;line-height:1.75;color:var(--teal);margin:0;padding:0;min-width:0;} .article-body > :first-child{margin-top:0;} .article-body h2{font-size:18px;font-weight:800;color:var(--teal);margin:28px 0 10px;} .article-body h2:first-child{margin-top:0;} .article-body p{margin-bottom:16px;} .article-body blockquote{border:1px solid var(--border);border-left:6px solid var(--sage);padding:20px 22px;background:var(--white);box-shadow:0 2px 8px rgba(0,0,0,.04);margin:24px 0;font-style:normal;} .article-body blockquote p{color:var(--teal);font-size:clamp(18px,2vw,24px);font-weight:700;line-height:1.5;margin:0;} .article-body blockquote p::before{content:"\201C";color:var(--teal);margin-right:.12em;} .article-body blockquote p::after{content:"\201D";color:var(--teal);margin-left:.12em;} .article-body figcaption{font-size:12px;font-weight:600;color:var(--muted);margin-top:8px;font-style:italic;} /* ── NORME tableau éditorial (Markdown import RSS ou éditeur Gutenberg) ─ Un seul langage, identique aux .cls-table des classements : en-tête teal capitales, lignes fines, hover sage, angles droits. Quelle que soit la source, on NEUTRALISE d'abord tout ce que le bloc core WP « table » impose (sinon ça repasse devant notre charte) : • .wp-block-table td/th{border:1px solid} → grille sombre currentColor • .wp-block-table thead{border-bottom:3px} → trait noir sous l'en-tête • .is-style-stripes tr:nth-child(odd) → fond gris #f0f0f0 • .has-…-background-color → fonds pastel imposés • bords posés via l'UI éditeur (has-border-color / style inline) … puis on RÉ-APPLIQUE uniquement le nôtre. Tout par spécificité, pas de !important (règle Félix). Couvre aussi pages + blog partenaire (.article-body). */ .article-body table{width:100%;border-collapse:collapse;border-spacing:0;margin:20px 0 24px;background:var(--white);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.04);font-size:13px;line-height:1.45;} /* reset global du sous-arbre : aucun bord, aucun fond hérité du core */ .article-body table thead, .article-body table tfoot, .article-body table tr, .article-body table th, .article-body table td{border:0;background-color:transparent;} .article-body table th{background:var(--teal);color:var(--vanilla);font-size:10px;font-weight:800;letter-spacing:0;text-transform:none;padding:10px 12px;text-align:left;} .article-body table td{padding:9px 12px;border-bottom:1px solid rgba(196,196,196,.25);vertical-align:middle;color:var(--teal);} .article-body table td:first-child{font-weight:700;} .article-body table tr:last-child td{border-bottom:none;} /* neutralise le zébrage core (is-style-stripes) et pose NOTRE hover */ .article-body table tbody tr:nth-child(odd) td{background-color:transparent;} .article-body table tbody tr:hover td{background:var(--sage-lt);} @media(max-width:640px){ .article-body table{font-size:12px;} .article-body table th{padding:8px 8px;font-size:9px;letter-spacing:.6px;} .article-body table td{padding:8px 8px;} } /* ── Embeds (FB, YouTube, Insta, X, embeds natifs) : centrés ─── */ .article-body iframe,.article-body .wp-block-embed,.article-body .wp-block-embed__wrapper,.article-body .twitter-tweet,.article-body .instagram-media,.article-body .fb-post{display:block;margin-inline:auto;max-width:100%;} /* Neutralise le hack « colonnes vides » placé autour d'un embed */ .article-body .wp-block-columns:has(.wp-block-column iframe),.article-body .wp-block-columns:has(.wp-block-column .wp-block-embed){display:block;} .article-body .wp-block-columns:has(.wp-block-column iframe) .wp-block-column:empty,.article-body .wp-block-columns:has(.wp-block-column .wp-block-embed) .wp-block-column:empty{display:none;} /* ── Variante « Article lié » (block style sur core/quote) ─── */ .article-body blockquote.is-style-article-lie{border-left-color:var(--teal);padding:34px 22px 18px;background:var(--vanilla);} .article-body blockquote.is-style-article-lie::before{content:"À lire aussi";display:block;position:absolute;top:14px;left:22px;font-size:10px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--muted);} .article-body blockquote.is-style-article-lie{position:relative;} .article-body blockquote.is-style-article-lie p{font-size:clamp(15px,1.6vw,18px);font-weight:700;line-height:1.45;color:var(--teal);} .article-body blockquote.is-style-article-lie p::before, .article-body blockquote.is-style-article-lie p::after{content:none;} .article-body blockquote.is-style-article-lie a{color:var(--teal);text-decoration:none;background-image:linear-gradient(var(--sage),var(--sage));background-repeat:no-repeat;background-size:100% 6px;background-position:0 92%;transition:background-size .15s;} .article-body blockquote.is-style-article-lie a:hover, .article-body blockquote.is-style-article-lie a:focus-visible{background-size:100% 100%;color:var(--teal);} .article-body blockquote.is-style-article-lie p:last-child::after{content:" →";font-weight:900;color:var(--teal);} @media(max-width:680px){ .article-body blockquote.is-style-article-lie{padding:30px 16px 14px;} .article-body blockquote.is-style-article-lie p{font-size:15px;} } /* ── Carte article inline (shortcode [its_article_card]) ───── */ .article-body .its-inline-card{margin:24px 0;background:var(--white);border:1px solid var(--border);border-left:6px solid var(--sage);box-shadow:0 2px 8px rgba(0,0,0,.04);} .article-body .its-inline-card-link{display:grid;grid-template-columns:160px 1fr;gap:18px;padding:14px 18px 14px 14px;text-decoration:none;color:var(--teal);align-items:center;} .article-body .its-inline-card-link:hover .its-inline-card-title, .article-body .its-inline-card-link:focus-visible .its-inline-card-title{color:var(--teal-dk);text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:3px;} .article-body .its-inline-card-media{display:block;width:160px;aspect-ratio:16/10;overflow:hidden;background:var(--vanilla);} .article-body .its-inline-card-media img{width:100%;height:100%;object-fit:cover;display:block;} .article-body .its-inline-card-body{display:flex;flex-direction:column;gap:6px;min-width:0;} .article-body .its-inline-card-kicker{font-size:10px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--muted);} .article-body .its-inline-card-title{font-size:clamp(15px,1.6vw,18px);font-weight:800;line-height:1.35;color:var(--teal);transition:color .15s;} .article-body .its-inline-card-excerpt{font-size:13px;font-weight:500;line-height:1.55;color:var(--muted);margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} @media(max-width:680px){ .article-body .its-inline-card-link{grid-template-columns:96px 1fr;gap:12px;padding:12px;} .article-body .its-inline-card-media{width:96px;} .article-body .its-inline-card-excerpt{-webkit-line-clamp:3;} } /* « À lire aussi » en carte cinéma (Félix, 15/10) : bandeau large dans le texte. */ .article-body .its-inline-card--cine{background:none;border:0;box-shadow:none;} .article-body .its-inline-card--cine .its-article-card--cine{aspect-ratio:16/7;text-decoration:none;} @media(max-width:680px){.article-body .its-inline-card--cine .its-article-card--cine{aspect-ratio:16/10;}} /* ── Stat box (style plugin citations) ───────────────────────── */ .article-stat-box{padding:20px 22px;background:var(--white);border:1px solid var(--border);border-left:6px solid var(--sage);box-shadow:0 2px 8px rgba(0,0,0,.04);margin:24px 0;} .article-stat-box-number{font-size:clamp(24px,2.5vw,36px);font-weight:700;color:var(--teal);line-height:1.2;display:block;} .article-stat-box-number::before{content:"";display:none;} .article-stat-box-label{display:block;margin-top:8px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:0;text-transform:none;} /* ── Sidebar ─────────────────────────────────────────────────── */ .article-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:72px;} .sidebar-box{background:var(--white);border:1px solid var(--border);padding:16px;margin-bottom:16px;} .sidebar-box-title{font-size:11px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--vanilla);background:var(--teal);padding:10px 16px;margin:-16px -16px 12px;border-bottom:3px solid var(--sage);} .its-v2 a.sidebar-link,.sidebar-link{display:block;padding:10px 0 10px 12px;border-bottom:1px solid rgba(196,196,196,.3);font-size:13px;font-weight:600;color:var(--teal);text-decoration:none;line-height:1.4;margin-left:-12px;} .sidebar-link:last-child{border-bottom:none;padding-bottom:0;} .sidebar-link:first-child{padding-top:0;} .sidebar-link-cat{display:inline-block;font-size:9px;font-weight:800;padding:2px 7px;color:var(--vanilla);background:var(--teal);text-transform:none;letter-spacing:0;margin-bottom:4px;} .sidebar-link-title{display:block;font-size:12px;font-weight:700;color:var(--teal);} .sidebar-link-date{display:block;font-size:10px;font-weight:500;color:var(--muted);margin-top:4px;text-transform:none;letter-spacing:0;} .sidebar-link--sponsored{background:rgba(28,61,52,.06);padding:10px 8px;margin:0 -8px;position:relative;} .sidebar-its-zn-tag{display:inline-block;font-size:8px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--teal-dk);background:var(--sage);padding:1px 5px;margin-bottom:4px;} .sidebar-link-brand{display:block;font-size:10px;font-weight:700;color:var(--muted);margin-top:2px;} .sidebar-entities .entity-chips{display:flex;flex-direction:column;gap:10px;} .entity-chips{display:flex;flex-direction:column;gap:10px;} .entity-chips--players + .entity-chips--meta{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);} /* ── Mini-fiche joueur ──────────────────────── */ .entity-player-card{display:block;background:var(--white);border:1px solid var(--border);text-decoration:none;transition:box-shadow .15s,border-color .15s;overflow:hidden;} .entity-player-header{display:flex;gap:12px;padding:12px;background:var(--teal);} .entity-player-photo{width:52px;height:52px;background:rgba(242,229,210,.15);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--vanilla);font-weight:900;font-size:18px;} .entity-player-photo img{width:100%;height:100%;object-fit:cover;} .entity-player-info{display:flex;flex-direction:column;justify-content:center;gap:2px;} .entity-player-name{font-size:14px;font-weight:800;color:var(--vanilla);} .entity-player-position{font-size:10px;font-weight:700;color:var(--sage);text-transform:none;letter-spacing:0;} .entity-player-team{font-size:10px;color:rgba(242,229,210,.7);} .entity-player-season{padding:5px 12px;font-size:8px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--teal);background:var(--sage-lt);border-top:1px solid var(--border);} .entity-player-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);} .entity-player-stats[data-count="1"]{grid-template-columns:repeat(1,1fr);} .entity-player-stats[data-count="2"]{grid-template-columns:repeat(2,1fr);} .entity-player-stats[data-count="4"]{grid-template-columns:repeat(4,1fr);} .entity-player-stat{background:var(--white);padding:8px 4px;text-align:center;} .entity-player-stat-val{display:block;font-size:16px;font-weight:900;color:var(--teal);line-height:1;} .entity-player-stat-lbl{display:block;font-size:7px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--muted);margin-top:4px;} .entity-player-cta{display:block;padding:8px;text-align:center;font-size:9px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--teal);border-top:1px solid var(--border);} /* Pas de hover sur les entity cards */ /* ── Chips simples (team, comp, match) ──────── */ .entity-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--sage-lt);text-decoration:none;transition:background .15s;} .entity-chip:hover{background:var(--vanilla-d);} .entity-chip-type{font-size:8px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--white);background:var(--teal);padding:2px 6px;flex-shrink:0;} .entity-chip-name{font-size:12px;font-weight:700;color:var(--teal);} /* ── Mini-cartes match (Matchs cités) ──────── */ .entity-chips--matches{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;} .entity-chips-label{font-size:9px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--muted);margin-bottom:2px;} .entity-match-card{display:block;background:var(--white);border:1px solid var(--border);padding:10px 12px;text-decoration:none;transition:box-shadow .15s,border-color .15s;} .entity-match-card:hover{box-shadow:0 2px 12px rgba(28,61,52,.12);border-color:var(--teal);} .entity-match-comp{display:block;font-size:8px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--muted);margin-bottom:6px;} .entity-match-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;} .entity-match-team{font-size:12px;font-weight:700;color:var(--teal);line-height:1.2;} .entity-match-team--home{text-align:left;} .entity-match-team--away{text-align:right;} .entity-match-team--winner{font-weight:900;} .entity-match-team--loser{color:var(--muted);} .entity-match-score{font-size:14px;font-weight:900;color:var(--teal);white-space:nowrap;background:var(--sage-lt);padding:4px 8px;display:inline-flex;align-items:center;gap:4px;} .entity-match-score-sep{color:var(--muted);font-weight:700;} .entity-match-score--upcoming{font-size:10px;font-weight:800;color:var(--muted);background:transparent;border:1px dashed var(--border);padding:3px 8px;letter-spacing:.5px;} .entity-match-date{display:block;font-size:9px;font-weight:600;color:var(--muted);margin-top:6px;text-transform:none;letter-spacing:0;} /* Carte match embarquée inline dans le corps ([its_match]) — une par ligne, layout pleine largeur (compétition + date en tête, équipes + score dessous). Restyle scopé : la version sidebar (.sidebar-box .entity-match-card) reste compacte. */ .its-match-embed{margin:22px 0;display:flex;flex-direction:column;gap:10px;} .its-match-embed .entity-match-card{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"comp date" "teams teams" "meta meta"; align-items:center; gap:8px 12px; padding:14px 16px; } .its-match-embed .entity-match-comp{grid-area:comp;margin-bottom:0;} .its-match-embed .entity-match-date{grid-area:date;margin-top:0;text-align:right;white-space:nowrap;} .its-match-embed .entity-match-teams{grid-area:teams;gap:14px;} .its-match-embed .entity-match-team{font-size:14px;} .its-match-embed .entity-match-score{font-size:17px;padding:5px 12px;} .its-match-embed .entity-match-score--upcoming{font-size:12px;} .its-match-embed .em-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:2px;padding-top:10px;border-top:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);} .its-match-embed .em-meta-item{display:inline-flex;align-items:center;gap:5px;} .its-match-embed .em-meta-item svg{width:14px;height:14px;flex:none;color:var(--teal);} @media(min-width:560px){ .its-match-embed .entity-match-team{font-size:16px;} .its-match-embed .entity-match-score{font-size:19px;} } /* ── Shortcode [its_fiche] — Inline entity cards ────────────── */ .its-fiche-inline{margin:24px 0;} .its-fiche-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;} .its-fiche-horizontal .its-fiche-card-h{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--border);padding:12px 16px;text-decoration:none;transition:box-shadow .15s;margin-bottom:8px;} .its-fiche-h-left{display:flex;align-items:center;gap:10px;flex-shrink:0;} .its-fiche-h-photo{width:44px;height:44px;background:var(--teal);color:var(--vanilla);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;flex-shrink:0;overflow:hidden;} .its-fiche-h-info{display:flex;flex-direction:column;} .its-fiche-h-name{font-size:13px;font-weight:800;color:var(--teal);line-height:1.2;} .its-fiche-h-pos{font-size:9px;font-weight:700;color:var(--teal);text-transform:none;letter-spacing:0;} .its-fiche-h-team{font-size:10px;color:var(--muted);} .its-fiche-h-stats{display:flex;gap:16px;margin-left:auto;} .its-fiche-h-stat{text-align:center;} .its-fiche-h-val{display:block;font-size:18px;font-weight:900;color:var(--teal);line-height:1;} .its-fiche-h-lbl{display:block;font-size:7px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--muted);margin-top:2px;} .its-fiche-h-arrow{font-size:18px;color:var(--teal);font-weight:700;margin-left:12px;flex-shrink:0;} @media(max-width:768px){ .its-fiche-grid{grid-template-columns:1fr;} } /* ── Tags ────────────────────────────────────────────────────── */ .article-tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0;} .article-tag{font-size:10px;font-weight:700;padding:4px 10px;border:1px solid var(--border);background:var(--white);color:var(--teal);text-transform:none;letter-spacing:0;transition:background .15s;} .article-tag:hover{background:var(--sage-lt);} /* ── Author box ──────────────────────────────────────────────── */ .article-credits-section{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:32px 0;} .article-credits-section:has(> :only-child){grid-template-columns:1fr;} .its-v2 a.author-box,.author-box{display:flex;gap:16px;padding:24px;background:var(--white);border:1px solid var(--border);text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s;} .author-box-avatar{width:56px;height:56px;background:var(--teal);color:var(--vanilla);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;flex-shrink:0;} .author-box-name{font-size:15px;font-weight:800;color:var(--teal);} .author-box-role{font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0;} .author-box-bio{font-size:13px;color:var(--teal);line-height:1.6;margin-top:6px;} /* ── Related articles grid ───────────────────────────────────── */ .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .related-card{background:var(--white);border:1px solid var(--border);transition:box-shadow .15s,border-color .15s;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;} a.related-card,a.related-card:link,a.related-card:visited{color:inherit;text-decoration:none;} a.related-card:hover{box-shadow:0 2px 12px rgba(28,61,52,.12);} .related-card-img{display:block;width:100%;aspect-ratio:16/9;background:var(--sage-lt);overflow:hidden;} .related-card-img img{width:100%;height:100%;object-fit:cover;display:block;} .related-card-body{display:block;padding:12px;} .related-card-meta{display:block;} .its-v2 a.related-card-cat,.related-card-cat{font-size:9px;font-weight:800;padding:2px 7px;color:var(--vanilla);background:var(--teal);text-transform:none;letter-spacing:0;display:inline-block;margin-bottom:6px;text-decoration:none;} .its-v2 a.related-card-title,.related-card-title{display:block;font-size:13px;font-weight:700;line-height:1.4;color:var(--teal);text-decoration:none;margin:4px 0;} .its-v2 a.related-card-author,.related-card-author{color:var(--muted);text-decoration:none;} /* ── Hovers consolidés ─────────────────────────────────────── */ /* Cartes : ombre + bordure teal au survol */ .its-v2 a.author-box,.entity-player-card,.its-fiche-card-h,article.related-card{transition:box-shadow .15s,border-color .15s;} .its-v2 a.author-box:hover,.entity-player-card:hover,.its-fiche-card-h:hover,article.related-card:hover{box-shadow:0 2px 12px rgba(28,61,52,.12);} /* Liens texte : teal souligné au survol */ .its-v2 a.related-card-title:hover,.its-v2 a.related-card-author:hover{color:var(--teal);text-decoration:underline;} .related-card--sponsored{background:var(--white);} .related-card-its-zn-tag{font-size:8px;font-weight:800;padding:2px 6px;color:var(--teal-dk);background:var(--sage);text-transform:none;letter-spacing:0;display:inline-block;margin-bottom:6px;} .related-card-brand{font-weight:700;color:var(--teal)!important;} .related-card-meta{font-size:10px;color:var(--muted);margin-top:6px;} /* ══════════════════════════════════════════════════════════════ RESPONSIVE Mobile < 480 | Tablet portrait < 768 | Tablet landscape < 1024 Desktop < 1280 | Grand ecran >= 1280 ══════════════════════════════════════════════════════════════ */ /* ── Grand ecran (>= 1280px) ──────────────────────────────────── */ @media(min-width:1280px){ .article-content-wrap{max-width:1200px;margin:0 auto;} .article-hero{min-height:400px;} .article-hero.article-hero--compact{min-height:240px;} .article-title{font-size:36px;} .article-hero--compact .article-title{font-size:30px;} .article-hero .article-chapo{font-size:16px;} .article-layout{grid-template-columns:1fr 320px;gap:40px;} .article-body{font-size:15px;} .article-body h2{font-size:20px;} .related-grid{gap:20px;} .author-box{padding:28px;} } /* ── Tres grand ecran (>= 1600px) ────────────────────────────── */ @media(min-width:1600px){ .article-content-wrap{max-width:1200px;} .article-layout{grid-template-columns:1fr 360px;gap:48px;} .article-body{font-size:16px;} .article-body h2{font-size:22px;} .article-hero{min-height:440px;} .article-hero.article-hero--compact{min-height:260px;} .article-title{font-size:40px;} .article-hero--compact .article-title{font-size:32px;} } /* ── Desktop (960 — 1279px) — default, pas de media query ────── */ /* ── Tablet landscape (768 — 959px) ──────────────────────────── */ @media(max-width:960px){ .article-layout{grid-template-columns:1fr;} .article-sidebar{position:relative;top:0;} .article-body{max-width:100%;} .article-sidebar{display:flex;flex-direction:column;gap:16px;} } /* ── Tablet portrait (480 — 767px) ───────────────────────────── */ @media(max-width:768px){ .container{max-width:100%;padding:0 16px!important;} /* Partage remonte juste au-dessus du corps d'article (sous la banniere haute) */ .article-content-wrap--share-top{display:flex;flex-direction:column;} .article-content-wrap--share-top > .its-zn-placement-article_after_header{order:-2;} .article-content-wrap--share-top > .article-share{order:-1;} .article-content-wrap--share-top > .article-share .share-row{margin:0 0 14px;} .article-hero-content{max-width:100%;padding:0 16px;} /* Photo en fond sous le texte, comme sur desktop. L'overlay reste dans le flux (le hero grandit avec le contenu, sinon le texte serait coupe par overflow:hidden) et son degrade est transparent en haut : on voit donc la photo sur ~150px avant que le fond ne se ferme derriere le texte. brightness .55 au lieu de .3 : a .3 sous un degrade quasi opaque, la photo etait payee et invisible. */ .article-hero{min-height:0;display:block;position:relative;overflow:hidden;} .article-hero-img{position:absolute;inset:0;height:auto;} .article-hero-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);} /* Le degrade se ferme vite : le texte demarre haut, il lui faut un fond deja dense (>= .85) des les pastilles, sinon un titre vanilla sur une photo claire devient illisible. Seul le tout dernier segment laisse voir l'image. */ .article-hero-overlay{position:relative;inset:auto;padding:110px 0 20px; background:linear-gradient(to top,rgba(28,61,52,.97) 0%,rgba(28,61,52,.95) 55%,rgba(28,61,52,.86) 80%,rgba(28,61,52,.3) 100%);} .article-title{font-size:24px;} .article-hero .article-chapo{font-size:14px;margin:14px 0;} /* Meta du hero en 3 colonnes : empilees, « Publie le / Derniere modification le / X min de lecture » mangeaient trois lignes pleines. Chaque item passe en colonne (libelle au-dessus de la valeur) : le texte nu et le