/**
* Modèle « Article magazine » — 93sang30.com
* ---------------------------------------------------------------
* Chargé UNIQUEMENT sur les articles utilisant template-article-magazine.php
* (voir inc/article-magazine.php), après style.css.
*
* Structure :
* main.container.main-content grille du thème (style.css) : colonne principale | aside
* └ article.mag-page carte (même largeur que l'article standard)
* └ (carte BLANCHE ombrée, voir .mag-page)
* ├ .mag-entete rubrique + titre (à gauche) / photo (à droite)
* ├ .mag-chapeau chapeau (extrait de l'article)
* └ .mag-contenu contenu WordPress
* └ .mag-corps 2 colonnes : .mag-texte | .mag-encadre
*
* Encadré : 4 fonds au choix
* .mag-encadre--violet | --vert | --marine | --gris (défaut)
*
* Responsive : texte sur 2 colonnes (+ encadré à droite) ; encadré sous le texte jusqu'à 1200px ;
* 1 seule colonne sous 768px (smartphone).
* Impression : voir print.css (section 8).
* Version 2.1.0 — 23/10/2026
*/
/* =========================================
1. Jetons (couleurs, polices, espacements)
========================================= */
.mag-page {
--mag-accent: #6b2c6e; /* violet maquette : titres, lettrine, liens */
--mag-encre: #1e1e24; /* texte courant */
--mag-gris: #6a6670; /* légendes, mentions */
--mag-carte: #ffffff; /* fond de la carte article */
--mag-surligne: #f3e8f4; /* surlignage des citations */
--mag-lettrine: #1f5a3d; /* lettrine : vert sapin */
--mag-ombre: 0 1px 3px rgba(30, 30, 36, 0.06), 0 10px 30px rgba(30, 30, 36, 0.08);
--mag-pad: clamp(0.75rem, 2vw, 1.75rem); /* marge intérieure de la carte */
--mag-titre: "Playfair Display", Georgia, serif;
--mag-serif: "Source Serif 4", Georgia, serif;
--mag-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
/* Encadré : valeurs par défaut = gris (comme la maquette) */
--mag-encadre-fond: #f3f2f4;
--mag-encadre-accent: var(--mag-accent);
}
/* Mode sombre du thème : la carte passe en anthracite */
[data-theme="dark"] .mag-page {
--mag-accent: #d3a4dc;
--mag-encre: #ececf0;
--mag-gris: #a9a5ae;
--mag-carte: #1b1a1f;
--mag-surligne: rgba(211, 164, 220, 0.16);
--mag-lettrine: #5fb487; /* vert sapin éclairci pour le fond sombre */
--mag-ombre: 0 10px 30px rgba(0, 0, 0, 0.45);
--mag-encadre-fond: #26252b;
}
/* =========================================
2. Zone centrale et carte article
========================================= */
.mag-page,
.mag-page *,
.mag-page *::before,
.mag-page *::after {
box-sizing: border-box;
}
/* `.mag-page` surclasse les règles génériques `article` de style.css
(padding, overflow:hidden qui empêcherait l'encadré « collant ») */
.mag-page {
position: relative;
width: 100%;
padding: var(--mag-pad);
overflow: visible;
background: var(--mag-carte);
border-radius: 6px;
box-shadow: var(--mag-ombre);
color: var(--mag-encre);
font-family: var(--mag-serif);
line-height: 1.6;
}
/* Mode plein écran (bouton du thème) : seule la carte s'affiche, par-dessus l'aside et l'en-tête.
`.mag-page` (position: relative, overflow: visible) écrase les règles `.fullscreen-mode` de
style.css : on les rétablit ici, verrouillées en !important pour qu'aucune autre règle de la
page (classes d'article, plugins) ne puisse les contredire. Texte recentré à 1300px max. */
.mag-page.fullscreen-mode {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 2147483000 !important;
overflow-y: auto !important;
padding-inline: max(var(--mag-pad), calc((100% - 1300px) / 2));
background: var(--mag-carte);
border-radius: 0;
}
/* =========================================
3. En-tête : rubrique, titre, photo
========================================= */
.mag-entete {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
align-items: stretch;
}
.mag-entete__texte {
position: relative;
z-index: 2; /* le bloc titre passe au-dessus de la photo */
display: flex;
flex-direction: column;
padding-bottom: 2.75rem; /* ≈ hauteur de la légende : centre le titre sur l'image */
}
.mag-rubrique {
margin: 0 0 1rem;
font-family: var(--mag-sans);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1.3;
text-transform: uppercase;
color: var(--mag-accent);
}
/* Bloc blanc qui « mord » sur la photo (effet de la maquette) */
.mag-titre-bloc {
position: relative; /* ancre du badge */
margin: auto -22% auto 0;
padding: 1.25rem 1.75rem 1.5rem 0;
background: var(--mag-carte);
}
.mag-titre {
margin: 0;
font-family: var(--mag-titre);
font-size: clamp(1.8rem, 3.4vw, 3.6rem); /* fluide : ≈ 29px à 768px, 49px à 1440px, 58px max */
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--mag-accent);
text-wrap: balance;
}
.mag-sous-titre {
display: block;
margin-top: 0.5rem;
font-size: 0.62em;
font-weight: 400;
line-height: 1.15;
letter-spacing: 0;
color: var(--mag-encre);
}
/* Photo : déborde jusqu'au bord droit de la carte */
.mag-photo {
position: relative;
margin: 0 calc(-1 * var(--mag-pad)) 0 0;
}
.mag-photo__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: 50% 20%;
}
.mag-legende {
margin: 0.6rem var(--mag-pad) 0 0;
font-family: var(--mag-serif);
font-size: 0.85rem;
font-style: italic;
line-height: 1.4;
color: var(--mag-gris);
}
/* Badge : centré sur le coin supérieur droit du bloc titre : la moitié de sa largeur et la
moitié de sa hauteur dépassent du bloc (sur la photo et au-dessus du bloc) */
.mag-badge {
position: absolute;
top: 0;
right: 0;
z-index: 3;
transform: translate(50%, -50%);
padding: 0.75rem 1.4rem;
border-radius: 5px; /* angles légèrement arrondis */
background: var(--mag-accent);
color: var(--mag-carte);
font-family: var(--mag-sans);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
}
/* Article sans image à la une : titre pleine largeur, badge en ligne */
.mag-page--sans-photo .mag-entete {
grid-template-columns: minmax(0, 1fr);
}
.mag-page--sans-photo .mag-entete__texte {
padding-bottom: 0;
}
.mag-page--sans-photo .mag-titre-bloc {
margin: 0;
padding: 0;
}
.mag-page--sans-photo .mag-badge {
position: static;
display: inline-block;
margin-bottom: 1rem;
transform: none;
}
/* =========================================
4. Chapeau
========================================= */
/* Pleine largeur, sans colonnes : champ « Extrait » (affiché avant le corps) ou
écrit au début du texte (column-span le sort des colonnes) */
.mag-chapeau {
column-span: all;
margin: 1.75rem 0 2.25rem;
text-align: left;
hyphens: manual;
font-family: var(--mag-serif);
font-size: clamp(1.2rem, 1.9vw, 1.6rem);
line-height: 1.4;
color: var(--mag-encre);
}
/* =========================================
5. Corps : 2 colonnes (texte + encadré)
========================================= */
.mag-corps {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
/* 9 lignes « auto » pour les encadrés + 1 ligne souple qui absorbe la hauteur du texte
(sinon le texte, étalé sur plusieurs lignes, écarterait les encadrés les uns des autres) */
grid-template-rows: repeat(9, auto) 1fr;
column-gap: clamp(1rem, 2vw, 1.75rem);
align-items: start;
}
/* Texte à gauche (sur toute la hauteur) ; chaque encadré dans la colonne de droite, les uns sous les autres */
.mag-corps > .mag-texte {
grid-column: 1;
grid-row: 1 / -1;
}
.mag-corps > .mag-encadre {
grid-column: 2;
margin-bottom: 1.25rem;
}
/* Texte sur 2 colonnes, comme l'article standard : 2 colonnes dès que la place le permet
(colonne mini 11rem), une seule sinon. Vaut pour le texte structuré (.mag-texte) comme pour
un contenu collé sans la structure .mag-corps (simples paragraphes). */
.mag-texte,
.mag-contenu:not(:has(> .mag-corps)) {
columns: 2 11rem;
column-gap: 1.75rem;
column-fill: balance;
text-align: justify;
-webkit-hyphens: auto;
hyphens: auto;
}
/* Neutralise les colonnes multiples de .article-content (style.css)
si cette classe est collée par habitude dans l'article */
.mag-page .article-content {
column-count: 1 !important;
column-rule: none;
}
/* ---------- Texte ---------- */
.mag-texte {
font-size: 1rem; /* un peu plus petit : colonnes étroites */
line-height: 1.65;
}
.mag-texte p {
margin: 0 0 1em;
}
/* Lettrine automatique sur le premier paragraphe */
.mag-texte > p:first-of-type:not(.mag-chapeau)::first-letter,
.mag-texte > p.mag-chapeau:first-of-type ~ p:nth-of-type(2)::first-letter {
float: left;
padding: 0.08em 0.1em 0 0;
font-family: var(--mag-titre);
font-size: 4.1em;
font-weight: 700;
line-height: 0.8;
color: var(--mag-lettrine);
}
/* Pour désactiver la lettrine :