/* =====================================================================
   BIENCHEZSOI 2027 - feuille de style
   L'idée : chaque univers est une pièce de la maison, avec sa propre couleur de mur
   (comme un nuancier de peinture), et les photos s'ouvrent en arche, comme une fenêtre.

   Écrite « mobile d'abord » : les règles de base visent le téléphone,
   les blocs @media (min-width: ...) ajoutent la mise en page des grands écrans.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Polices (hébergées sur le site : rien n'est envoyé à Google)
   - Bricolage Grotesque : titres, menus, étiquettes
   - Newsreader : textes à lire (articles, chapôs) et le logo
   --------------------------------------------------------------------- */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader-italique.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------------------------------------
   2. Couleurs et mesures : on les change ici, tout le site suit
   --------------------------------------------------------------------- */
:root {
    --prune: #7A2650;
    --prune-fonce: #5C1B3C;
    --prune-clair: #F2D4E1;
    --encre: #241C20;
    --texte: #2E272A;
    --gris: #5F565B;
    --filet: #E6DEE2;
    --blanc: #FFFFFF;

    /* couleur de l'univers en cours : remplacée plus bas, univers par univers */
    --couleur: var(--prune);
    --fond: #F6E9EF;

    --titre: "Bricolage Grotesque", "Segoe UI", Helvetica, Arial, sans-serif;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;

    --largeur-site: 1200px;
    --largeur-texte: 800px;    /* = largeur des photos d'articles */
    --marge: 16px;             /* marge latérale sur téléphone */
    --arrondi: 6px;
    --arche: 50% 50% var(--arrondi) var(--arrondi) / 42% 42% var(--arrondi) var(--arrondi);
}

/* Le nuancier : une couleur de texte et une couleur de mur par univers */
.univers-actu           { --couleur: #7A2650; --fond: #F6E9EF; }
.univers-decorer        { --couleur: #8F6500; --fond: #F9EFD5; }
.univers-entretenir     { --couleur: #2C5F80; --fond: #E6EEF4; }
.univers-se-sentir-bien { --couleur: #5B4791; --fond: #EEEAF6; }
.univers-habiter        { --couleur: #A24A3A; --fond: #F7E7E2; }
.univers-jardin-animaux { --couleur: #3E7B3C; --fond: #E7F1E2; }

/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--blanc);
    color: var(--encre);
    font-family: var(--titre);
    font-size: 16px;
    line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--encre); text-decoration: none; }
a:hover { color: var(--couleur); }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; margin: 0; line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0; }
.visuellement-cache {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.conteneur { max-width: var(--largeur-site); margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }
/* petit texte de rubrique au-dessus des titres, dans la couleur de l'univers */
.surtitre { font-size: 14px; font-weight: 600; color: var(--couleur); }
.surtitre a { color: inherit; }
:focus-visible { outline: 2px solid var(--prune); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------
   4. En-tête et navigation
   --------------------------------------------------------------------- */
.entete {
    border-bottom: 1px solid var(--filet); background: var(--blanc);
    position: sticky; top: 0; z-index: 10; transition: transform .3s ease;
}
/* l'en-tête se cache quand on descend, revient quand on remonte (voir site.js) */
.entete.cache { transform: translateY(-100%); }
.entete-barre {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 10px; padding-bottom: 10px;
}
.logo { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; color: var(--prune); line-height: 1; display: inline-block; padding-top: .32em; }
/* le toit posé sur « chez » : dessiné en SVG, il prend la couleur du texte */
.logo-chez { position: relative; display: inline-block; }
.logo-chez svg { position: absolute; left: -6%; top: -.4em; width: 112%; height: .48em; overflow: visible; }
.logo-chez path { stroke-width: 2px; }
.logo-net { font-size: .45em; color: var(--encre); font-weight: 400; margin-left: 2px; }
.logo:hover { color: var(--prune-fonce); }
.bouton-rond {
    width: 44px; height: 44px; border: 1px solid var(--filet); border-radius: 999px;
    background: var(--blanc); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--encre); padding: 0;
}
.bouton-rond:hover { border-color: var(--couleur); color: var(--couleur); }
.entete-actions { display: flex; gap: 8px; }

.nav-principale { display: none; border-top: 1px solid var(--filet); }
.nav-principale.ouverte { display: block; }
.nav-principale > ul { list-style: none; margin: 0; padding: 8px var(--marge) 16px; max-height: calc(100vh - 70px); overflow-y: auto; }
.sous-menu { display: none; }   /* sur téléphone, les rubriques sont sur la page de l'univers */
.nav-principale a {
    display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 600; font-size: 17px;
    border-bottom: 1px solid var(--filet);
}
/* la pastille de couleur de chaque univers, devant son nom */
.nav-univers > a::before {
    content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--couleur); flex: none;
}
.nav-principale a[aria-current="page"] { color: var(--couleur); }
.nav-principale .nav-guides { color: var(--prune); }

/* ---------------------------------------------------------------------
   5. Cartes (vignettes d'articles dans les listes)
   --------------------------------------------------------------------- */
.carte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.carte-image { display: block; aspect-ratio: 8 / 5; overflow: hidden; border-radius: var(--arrondi); background: var(--fond); }
.carte-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-titre { font-weight: 600; font-size: 20px; line-height: 1.25; }
.carte-titre a:hover { color: var(--couleur); }
.carte-chapo { font-family: var(--serif); color: var(--gris); font-size: 17px; line-height: 1.5; }
.etiquette {
    display: inline-block; font-size: 12px; font-weight: 700; color: var(--blanc); background: var(--couleur);
    padding: 1px 8px; border-radius: 999px; margin-right: 6px; vertical-align: 1px;
}

/* Les photos en arche, comme une fenêtre : la une, la grande carte de Décorer, Se sentir bien */
.carte-une .carte-image, .cartes-arche .carte-image, .rangee-grand-liste > .carte .carte-image { border-radius: var(--arche); }

/* Carte « en liste » : texte à gauche, petite image à droite */
.carte-liste {
    flex-direction: row; align-items: center; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid var(--filet);
}
.carte-liste:last-child { border-bottom: 0; }
.carte-liste .carte-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.carte-liste .carte-image { flex: 0 0 110px; aspect-ratio: 4 / 3; }
.carte-liste .carte-titre { font-size: 18px; }

/* Carte « à la une » : grande photo en arche, titre en dessous (à côté sur grand écran) */
.carte-une { gap: 16px; }
.carte-une .carte-incrust { display: flex; flex-direction: column; gap: 12px; }
.carte-une .carte-titre { font-size: 30px; line-height: 1.12; }
.carte-une .carte-chapo { font-size: 19px; color: #4A4246; }

/* Carte compacte (L'actu) : petite image à gauche */
.carte-compacte { flex-direction: row; gap: 14px; align-items: flex-start; }
.carte-compacte .carte-image { flex: 0 0 120px; }
.carte-compacte .carte-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.carte-compacte .carte-titre { font-size: 16px; font-weight: 600; line-height: 1.35; }

/* ---------------------------------------------------------------------
   6. Page d'accueil et pages de liste
   --------------------------------------------------------------------- */
.grille { display: grid; gap: 28px; grid-template-columns: 1fr; }
.section { padding-top: 40px; padding-bottom: 40px; }

/* La une */
.une { padding-top: 24px; padding-bottom: 40px; display: grid; gap: 32px; }
.une-secondaires { display: grid; gap: 28px; }

/* Sur téléphone, les 3 articles sous la une passent en liste compacte (petite image à droite) */
@media (max-width: 699px) {
    .une-secondaires { gap: 0; }
    .une-secondaires .carte {
        display: grid; grid-template-columns: 1fr 110px; column-gap: 14px; row-gap: 4px; align-items: start;
        padding: 16px 0; border-bottom: 1px solid var(--filet);
    }
    .une-secondaires .carte:last-child { border-bottom: 0; }
    .une-secondaires .carte-image { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
    .une-secondaires .carte-titre { font-size: 18px; }
}

/* Une section d'univers : la « pièce », avec la couleur de son mur pour L'actu et Se sentir bien */
.section-univers { padding-top: 44px; padding-bottom: 48px; }
.section-univers.univers-actu, .section-univers.univers-se-sentir-bien { background: var(--fond); }

/* L'en-tête d'une section d'univers : pastille de peinture + nom + lien vers la page de l'univers */
.univers-tete { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 24px; }
.pastille {
    width: 26px; height: 34px; border-radius: 4px; background: var(--couleur);
    box-shadow: inset 0 -10px 0 rgba(255, 255, 255, .18);
}
.univers-tete h2 { font-size: 30px; }
.univers-tete h2 a { color: var(--encre); }
.univers-tete h2 a:hover { color: var(--couleur); }
.univers-lien {
    font-size: 15px; font-weight: 600; color: var(--couleur); white-space: nowrap;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.univers-lien:hover { color: var(--encre); }

/* Habiter et Jardin : deux pièces côte à côte, chacune sur son mur de couleur */
.deux-pieces { display: grid; gap: 24px; padding-top: 48px; padding-bottom: 8px; }
.piece { background: var(--fond); border-radius: 10px; padding: 28px 24px 12px; }
.piece .univers-tete { margin-bottom: 12px; }
.piece .univers-tete h2 { font-size: 28px; }
.piece .carte-image { background: var(--blanc); }

.deux-colonnes { display: grid; gap: 40px; }

/* Bandeau des guides */
.bandeau-guide { background: var(--prune-fonce); color: var(--blanc); }
.bandeau-guide .conteneur { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 48px; align-items: center; }
.bandeau-guide h2 { font-size: 38px; }
.bandeau-guide p { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: #F7E9EF; }
.bandeau-guide .surtitre { font-family: var(--titre); font-size: 15px; color: var(--prune-clair); }
.bandeau-guide-texte, .bandeau-guide-visuel { display: flex; flex-direction: column; gap: 16px; }
.bandeau-guide-visuel img { border-radius: var(--arche); }
.bandeau-guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lien-tous-guides {
    font-family: var(--titre); font-size: 16px; font-weight: 600; color: var(--blanc);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.lien-tous-guides:hover { color: var(--prune-clair); }
/* les autres guides : un titre qui dit ce que c'est, puis chaque guide avec une ligne de présentation */
.bandeau-guide .liens-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.bandeau-guide .liens-guides h3 { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--prune-clair); margin: 4px 0 2px; }
.bandeau-guide .liens-guides a {
    display: flex; flex-direction: column; gap: 4px; padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .25); color: var(--blanc);
}
.bandeau-guide .liens-guides strong { font-size: 17px; font-weight: 600; line-height: 1.25; }
.bandeau-guide .liens-guides span { font-family: var(--serif); font-size: 15px; line-height: 1.4; color: #E9D3DE; }
.bandeau-guide .liens-guides a:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.bouton {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
    padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
    font: inherit; font-family: var(--titre); font-weight: 700; font-size: 15px;
    background: var(--prune); color: var(--blanc);
}
.bouton:hover { background: var(--prune-fonce); color: var(--blanc); }
.bouton-clair { background: var(--blanc); color: var(--prune-fonce); }
.bouton-clair:hover { background: var(--prune-clair); color: var(--prune-fonce); }

/* Les plus lus : un vrai classement, donc des numéros */
.plus-lus h2 { font-size: 28px; margin-bottom: 8px; }
.plus-lus ol { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.plus-lus li {
    counter-increment: rang; display: flex; gap: 16px; align-items: baseline;
    padding: 12px 0; border-bottom: 1px solid var(--filet);
    font-weight: 500; font-size: 17px; line-height: 1.35;
}
.plus-lus li:last-child { border-bottom: 0; }
.plus-lus li::before { content: counter(rang); font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--prune); min-width: 22px; line-height: 1; }

/* Encadré newsletter */
.newsletter { align-self: start; margin-top: 8px; background: var(--fond); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.newsletter h2 { font-size: 26px; }
.newsletter p { font-family: var(--serif); font-size: 17px; color: var(--gris); }
.newsletter form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.newsletter input[type="email"] {
    flex: 1 1 220px; min-height: 48px; padding: 0 18px; border: 1px solid #CDBFC5; border-radius: 999px;
    font: inherit; font-size: 15px; background: var(--blanc);
}
.newsletter-sombre { background: var(--prune-fonce); color: var(--blanc); }
.newsletter-sombre p { color: #F7E9EF; }
.newsletter-sombre input[type="email"] { border: 0; }

/* En-tête des pages de liste (univers, rubrique, guide) : sur le mur de l'univers */
.tete-liste { padding-top: 32px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 12px; }
.tete-liste h1 { font-size: 40px; }
.tete-liste .presentation { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: #3F383B; max-width: 720px; }
.sous-navigation { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; margin: 0; list-style: none; }
.sous-navigation a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--filet);
    border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--blanc);
}
.sous-navigation a:hover, .sous-navigation a[aria-current="page"] { border-color: var(--couleur); color: var(--couleur); }
.sous-navigation a[aria-current="page"] { background: var(--couleur); color: var(--blanc); }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 40px 0 8px; list-style: none; margin: 0; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
    padding: 0 12px; border: 1px solid var(--filet); border-radius: 999px; font-weight: 600; font-size: 15px;
}
.pagination [aria-current="page"] { background: var(--couleur); border-color: var(--couleur); color: var(--blanc); }
.pagination a:hover { border-color: var(--couleur); color: var(--couleur); }

/* ---------------------------------------------------------------------
   7. Page article (les couleurs suivent l'univers de l'article)
   --------------------------------------------------------------------- */
.article-tete { max-width: calc(var(--largeur-texte) + 2 * var(--marge)); margin: 0 auto; padding: 32px var(--marge) 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.article-tete h1 { font-size: 34px; line-height: 1.1; }
.article-tete .sous-titre { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--gris); }
.ornement { color: var(--couleur); }
.chapo { font-family: var(--serif); font-size: 20px; line-height: 1.5; color: #3F383B; text-align: left; }
.article-infos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--gris); }
.article-infos img { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; }
.article-infos .auteur { color: var(--encre); font-weight: 600; }

.article-photo { max-width: calc(var(--largeur-texte) + 2 * var(--marge)); margin: 28px auto 0; padding: 0 var(--marge); }
.article-photo img { width: 100%; border-radius: var(--arrondi); }
.credit { margin-top: 8px; font-size: 13px; color: var(--gris); text-align: right; }
.credit a { color: var(--gris); text-decoration: underline; }

.article-corps {
    max-width: calc(var(--largeur-texte) + 2 * var(--marge)); margin: 0 auto; padding: 32px var(--marge) 0;
    font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--texte);
}
.article-corps p { margin: 0 0 1.2em; }
.article-corps h2 { font-size: 27px; color: var(--couleur); margin: 1.6em 0 .6em; line-height: 1.2; scroll-margin-top: 140px; }
.article-corps h3 { font-size: 21px; margin: 1.4em 0 .5em; }
.article-corps a { color: var(--couleur); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-corps a:hover { color: var(--encre); }
.article-corps strong { font-weight: 600; }
.article-corps ul, .article-corps ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.article-corps li { margin-bottom: .4em; }
.article-corps img { border-radius: var(--arrondi); margin: 1.6em auto; }
.article-corps blockquote.exergue {
    margin: 1.8em 0; padding: 20px 24px; background: var(--fond); border-radius: 10px;
    font-style: italic; font-size: 24px; line-height: 1.4; color: var(--couleur);
}
/* Lettrine sur le premier paragraphe */
.article-corps:not(.corps-page) > p:first-of-type::first-letter {   /* pas de lettrine sur les pages fixes */
    /* lettrine sur 3 lignes, calée par le navigateur : le haut sur la 1re ligne, le pied sur la ligne de base de la 3e */
    initial-letter: 3; -webkit-initial-letter: 3; margin-right: 12px; color: var(--couleur); font-weight: 500;
}
/* pour les navigateurs qui ne connaissent pas encore « initial-letter » (Firefox) : une lettrine flottante, réglée à la main */
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
    .article-corps:not(.corps-page) > p:first-of-type::first-letter {
        float: left; font-size: 5.6em; line-height: .78; padding: 4px 12px 0 0; margin-right: 0;
    }
}
.sommaire {
    font-family: var(--titre); background: var(--fond); border-radius: 10px;
    padding: 20px 24px; margin: 0 0 32px;
}
.sommaire .surtitre { margin-bottom: 6px; }
.sommaire ol { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.8; }
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { color: var(--couleur); text-decoration: underline; }
.remerciements { font-family: var(--titre); font-size: 16px; border-top: 2px solid var(--couleur); padding-top: 16px; margin-top: 32px; }

/* Diaporama : les photos les unes sous les autres, avec leur légende */
.diapo-photo { margin: 0 0 40px; }
.diapo-photo img { width: 100%; border-radius: var(--arrondi); margin: 0; }
.diapo-photo figcaption { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--gris); padding-top: 12px; }
.diapo-photo figcaption strong { display: block; font-family: var(--titre); font-size: 20px; font-weight: 600; color: var(--encre); margin-bottom: 4px; }
.diapo-numero { color: var(--couleur); margin-right: 6px; }

.article-pied {
    max-width: calc(var(--largeur-texte) + 2 * var(--marge)); margin: 0 auto; padding: 0 var(--marge);
}
.partage {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
    margin: 32px 0 0; padding: 16px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
}
.partage-libelle { font-size: 15px; font-weight: 600; margin-right: 8px; }
.partage .bouton-rond { color: var(--couleur); }

.bloc-guide {
    display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 20px 24px; margin-top: 40px;
    background: var(--fond); border-radius: 10px;
}
.bloc-guide div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.bloc-guide strong { font-size: 22px; font-weight: 600; line-height: 1.2; }
.bloc-apres-article { margin-top: 40px; }
.guide-texte { padding-left: 0; padding-right: 0; margin: 0; }

/* ---------------------------------------------------------------------
   7 bis. Éléments insérés dans le texte des articles (repris de l'ancien site)
   --------------------------------------------------------------------- */
/* Tableau comparatif en <div class="comparateur"> : défile horizontalement sur téléphone */
.article-corps .comparateur {
    font-family: var(--titre); font-size: 15px; line-height: 1.5; color: var(--texte);
    margin: 1.6em 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--filet); border-radius: 6px;
}
.comparateur .row { display: flex; gap: 14px; min-width: 760px; padding: 12px 14px; border-bottom: 1px solid var(--filet); align-items: flex-start; }
.comparateur .row:last-child { border-bottom: 0; }
.comparateur .row:nth-child(even):not(.header) { background: var(--fond); }
.comparateur .row > div { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; }
.comparateur .row > div:first-child { flex: 0 0 44px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--couleur); }
.comparateur .header { background: var(--couleur); color: var(--blanc); font-weight: 700; font-size: 14px; line-height: 1.3; }
.comparateur .header > div:first-child { font-family: var(--titre); font-size: 13px; color: var(--blanc); }
.comparateur a { color: var(--couleur); }
/* étoiles de notation : <div data-rating="4"> */
.comparateur .row > div[data-rating] { position: relative; font-size: 18px; letter-spacing: 2px; white-space: nowrap; }
.comparateur .row > div[data-rating]::before { content: "★★★★★"; color: #DDD; }
.comparateur .row > div[data-rating]::after { position: absolute; left: 0; top: 0; color: #E3A008; }
.comparateur .row > div[data-rating="1"]::after { content: "★"; }
.comparateur .row > div[data-rating="2"]::after { content: "★★"; }
.comparateur .row > div[data-rating="3"]::after { content: "★★★"; }
.comparateur .row > div[data-rating="4"]::after { content: "★★★★"; }
.comparateur .row > div[data-rating="5"]::after { content: "★★★★★"; }

/* Images flottantes à gauche / à droite du texte (pleine largeur sur téléphone) */
.article-corps img.imgfL, .article-corps img.imgfR { margin: .4em 0 1em; max-width: 100%; }
.floatstop, .sep { clear: both; height: 0; overflow: hidden; }
/* Crédits photo et sources en bas d'article */
.article-corps .credits, .article-corps .source { display: block; font-family: var(--titre); font-size: 13px; font-style: italic; color: var(--gris); }
.article-corps .credits { text-align: right; }
.article-corps hr { border: 0; border-top: 1px solid var(--filet); margin: 2em 0; }
.article-corps iframe { max-width: 100%; }


/* ---------------------------------------------------------------------
   7 bis. Recherche (et champ de recherche de la page 404)
   --------------------------------------------------------------------- */
.form-recherche { display: flex; gap: 8px; width: 100%; max-width: 760px; }
.form-recherche input[type="search"] {
    flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 20px; border: 1px solid #CDBFC5; border-radius: 999px;
    font: inherit; font-size: 17px; background: var(--blanc); color: var(--encre);
}
.form-recherche input[type="search"]:focus { outline: 2px solid var(--prune); outline-offset: 2px; border-color: var(--prune); }
.recherche-colonnes { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; padding-bottom: 48px; }
.resultats { min-width: 0; }
/* Affiner par univers : en haut sur téléphone (pastilles), en colonne à droite sur ordinateur */
.affiner { order: -1; }
.affiner h2 { font-size: 15px; font-weight: 600; color: var(--gris); margin-bottom: 10px; }
.affiner ul {   /* sur téléphone : une seule ligne qui défile avec le doigt */
    list-style: none; margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge) 4px; display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
}
.affiner a { white-space: nowrap; }
.affiner a {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px;
    border: 1px solid var(--filet); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--encre);
}
.affiner li[class] a::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--couleur); flex: none; }
.affiner a span { font-weight: 500; color: var(--gris); }
.affiner a:hover { border-color: var(--couleur); color: var(--couleur); }
.affiner a[aria-current] { background: var(--couleur); border-color: var(--couleur); color: var(--blanc); }
.affiner a[aria-current] span { color: var(--blanc); }
.affiner a[aria-current]::before { background: var(--blanc); }
.form-recherche .bouton { flex: 0 0 auto; }
.resultats .carte-liste .carte-chapo { display: none; }   /* sur téléphone : titres seuls, plus lisible */
.resultats-nombre { font-size: 15px; font-weight: 600; color: var(--gris); padding-bottom: 8px; border-bottom: 1px solid var(--filet); }
.resultats .carte-liste .carte-titre { font-size: 20px; }
.resultats-vide { font-family: var(--serif); font-size: 18px; line-height: 1.55; display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }
.recherche-univers { list-style: none; margin: 16px 0 48px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.recherche-univers a {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    border: 1px solid var(--filet); border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--encre);
}
.recherche-univers a::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--couleur); }
.recherche-univers a:hover { border-color: var(--couleur); color: var(--couleur); }
.page-erreur .form-recherche { margin: 8px 0; }

/* ---------------------------------------------------------------------
   7 ter. Pages « à propos » : contact, newsletter
   --------------------------------------------------------------------- */
.page-fixe { max-width: calc(var(--largeur-texte) + 2 * var(--marge)); margin: 0 auto; padding: 0 var(--marge) 56px; }
.page-fixe .tete-liste { padding-bottom: 24px; }
.page-fixe section { padding-top: 24px; }
.page-fixe section > h2 { font-size: 26px; margin-bottom: 14px; }

/* Questions fréquentes : un clic sur la question ouvre la réponse */
.faq details { border-top: 1px solid var(--filet); }
.faq details:last-child { border-bottom: 1px solid var(--filet); }
.faq summary {
    list-style: none; cursor: pointer; padding: 16px 36px 16px 0; position: relative;
    font-weight: 600; font-size: 17px; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; font-weight: 400; color: var(--prune);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--prune); }
.faq details p { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--texte); padding: 0 0 18px; }
.faq details a { color: var(--prune); text-decoration: underline; }

/* Formulaires */
.formulaire form { display: flex; flex-direction: column; gap: 18px; }
.champs-2 { display: grid; gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-weight: 600; font-size: 15px; }
.champ input, .champ select, .champ textarea {
    font: inherit; font-size: 16px; color: var(--encre); background: var(--blanc);
    border: 1px solid #CDBFC5; border-radius: 8px; padding: 12px 14px; min-height: 48px; width: 100%;
}
.champ textarea { resize: vertical; line-height: 1.5; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--prune); outline-offset: 1px; border-color: var(--prune); }
.champ [aria-invalid="true"] { border-color: #B3261E; }
.champ-erreur { color: #B3261E; font-size: 14px; font-weight: 600; }
.champ-aide { color: var(--gris); font-size: 14px; }
.champ-aide a { color: var(--gris); text-decoration: underline; }
.formulaire .bouton { align-self: flex-start; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-ok, .message-erreur { border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; line-height: 1.5; }
.message-ok { background: #E7F1E2; color: #234A22; }
.message-erreur { background: #FBE9E7; color: #8C1D18; font-weight: 600; }

/* Page newsletter */
.newsletter-colonnes { display: grid; gap: 32px; align-items: start; }
.newsletter-promesses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.newsletter-promesses li { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--texte); padding-left: 22px; position: relative; }
.newsletter-promesses li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 3px; background: var(--prune); }
.newsletter-promesses strong { display: block; font-family: var(--titre); font-size: 18px; font-weight: 600; color: var(--encre); }
.newsletter-page { margin-top: 0; }
.newsletter-page label { font-weight: 600; font-size: 15px; flex-basis: 100%; }
.newsletter-page input[type="email"] {
    flex: 1 1 220px; min-height: 48px; padding: 0 18px; border: 1px solid #CDBFC5; border-radius: 999px;
    font: inherit; font-size: 15px; background: var(--blanc);
}
.newsletter-page p a { color: var(--prune); text-decoration: underline; font-family: var(--titre); font-size: 15px; font-weight: 600; }

/* ---------------------------------------------------------------------
   7 quater. Coloriages et quiz
   --------------------------------------------------------------------- */
.bouton-contour { background: var(--blanc); color: var(--prune); box-shadow: inset 0 0 0 2px var(--prune); }
.bouton-contour:hover { background: var(--prune-clair); color: var(--prune-fonce); }

/* Coloriages : chaque dessin posé comme une feuille de papier sur le mur lilas */
.coloriages .tete-liste, .coloriage { padding-bottom: 8px; }
.grille-coloriages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 24px 0 56px; }
.coloriage-vignette { display: flex; flex-direction: column; gap: 10px; color: var(--encre); }
.coloriage-papier {
    display: block; background: var(--fond); padding: 12px; border-radius: 10px;
}
.coloriage-papier img {
    width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--blanc);
    border-radius: 3px; box-shadow: 0 1px 2px rgba(36, 28, 32, .08), 0 6px 14px rgba(36, 28, 32, .08);
    transition: transform .2s ease;
}
.coloriage-vignette:hover .coloriage-papier img { transform: rotate(-1.5deg); }
.coloriage-titre { font-weight: 600; font-size: 16px; line-height: 1.3; }
.coloriage-vignette:hover .coloriage-titre { color: var(--couleur); }

.coloriage-colonnes { display: grid; gap: 28px; padding-top: 28px; }
.coloriage-dessin { margin: 0; background: var(--fond); border-radius: 12px; padding: 20px; }
.coloriage-dessin img { width: 100%; height: auto; background: var(--blanc); border-radius: 3px; box-shadow: 0 2px 4px rgba(36, 28, 32, .08), 0 12px 28px rgba(36, 28, 32, .1); }
.coloriage-texte { display: flex; flex-direction: column; gap: 16px; }
.coloriage-texte .surtitre a { color: var(--couleur); }
.coloriage-texte h1 { font-size: 34px; line-height: 1.1; }
.coloriage-intro { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--texte); }
.coloriage-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.coloriage-droits { font-size: 14px; color: var(--gris); }
.coloriage .partage { justify-content: flex-start; margin-top: 0; }
.coloriages-autres h2, .quiz-autres h2 { font-size: 28px; }
.coloriages .surtitre a { color: var(--couleur); }
/* le lien « tout voir » en fin de bloc, à droite, là où l'œil finit sa lecture */
.coloriages-autres > p:last-child, .forum-plus .conteneur > p:last-child { text-align: right; }

/* Encadré « Coloriages zen » dans la rubrique Loisirs */
.encart-coloriages {
    display: grid; gap: 24px; align-items: center; margin-top: 24px;
    background: var(--fond); border-radius: 12px; padding: 24px;
}
.encart-coloriages h2 { font-size: 28px; margin-bottom: 6px; }
.encart-coloriages p { font-family: var(--serif); font-size: 18px; line-height: 1.5; margin-bottom: 14px; }
.encart-coloriages ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.encart-coloriages .coloriage-papier { padding: 0; background: none; }
.coloriages-autres .grille-coloriages { padding-bottom: 16px; }

/* À l'impression : uniquement le dessin, en pleine page */
@media print {
    body:has(.coloriage) > *:not(main), .coloriage-texte, .coloriages-autres { display: none !important; }
    .coloriage-colonnes { display: block; padding: 0; }
    .coloriage-dessin { background: none; padding: 0; }
    .coloriage-dessin img { box-shadow: none; max-height: 100vh; width: auto; margin: 0 auto; display: block; }
}

/* Quiz : une question par carte, les réponses sont de grandes zones cliquables */
.quiz .article-tete .surtitre a { color: var(--prune); }
.quiz-questions, .quiz-score, .quiz-corrections, .quiz-autres {
    max-width: calc(var(--largeur-texte) + 2 * var(--marge)); margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge);
}
.quiz-questions { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; }
.quiz-question { border: 0; margin: 0; padding: 20px; background: var(--fond); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.quiz-question legend { float: left; width: 100%; font-weight: 600; font-size: 19px; line-height: 1.35; margin-bottom: 8px; }
.quiz-numero { display: block; font-size: 14px; font-weight: 600; color: var(--prune); margin-bottom: 4px; }
.quiz-choix {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    background: var(--blanc); border: 2px solid transparent; border-radius: 8px; font-size: 16px;
}
.quiz-choix input { width: 20px; height: 20px; accent-color: var(--prune); flex: none; margin: 0; }
.quiz-choix:hover { border-color: var(--prune-clair); }
.quiz-choix:has(input:checked) { border-color: var(--prune); }
.quiz-questions .bouton { align-self: center; margin-top: 8px; }

.quiz-score { text-align: center; padding-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; scroll-margin-top: 120px; }
.quiz-score .quiz-note { font-family: var(--titre); font-size: 28px; color: var(--gris); }
.quiz-note strong { font-size: 96px; line-height: 1; color: var(--prune); letter-spacing: -0.03em; }
.quiz-score h2 { font-size: 28px; }
.quiz-score p { font-family: var(--serif); font-size: 19px; line-height: 1.5; max-width: 560px; }
.quiz-corrections { padding-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.quiz-corrections h2 { font-size: 26px; margin-bottom: 4px; }
.quiz-correction { padding: 16px 20px; border-radius: 10px; border-left: 4px solid; font-size: 16px; line-height: 1.5; }
.quiz-correction.juste { background: #E7F1E2; border-color: #3E7B3C; }
.quiz-correction.faux { background: #FBEDEA; border-color: #A24A3A; }
.quiz-correction .quiz-numero { display: flex; gap: 10px; color: var(--gris); }
.quiz-verdict { font-weight: 700; }
.juste .quiz-verdict { color: #2F5F2E; }
.faux .quiz-verdict { color: #8C3A2D; }
.quiz-enonce { font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.quiz-votre { color: var(--gris); }

/* ---------------------------------------------------------------------
   7 quinquies. Archive du forum (« Questions de lecteurs »)
   --------------------------------------------------------------------- */
.forum-theme { padding-top: 28px; }
.forum-theme h2 { display: flex; align-items: center; gap: 12px; font-size: 24px; margin-bottom: 8px; }
.forum-theme .pastille { width: 20px; height: 26px; }
.forum-theme ul { list-style: none; margin: 0; padding: 0; }
.forum-theme li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.forum-theme li a { font-weight: 600; font-size: 17px; color: var(--encre); }
.forum-theme li a:hover { color: var(--couleur); text-decoration: underline; }
.forum-theme li span { flex: none; font-size: 14px; color: var(--gris); }

.forum-sujet .article-tete .surtitre a { color: var(--couleur); }
.forum-archive {
    font-size: 14px; color: var(--gris); background: #F4F1F2; border-radius: 8px; padding: 6px 14px;
}
.forum-fil {
    max-width: calc(var(--largeur-texte) + 2 * var(--marge)); margin: 0 auto; padding: 28px var(--marge) 0;
    display: flex; flex-direction: column; gap: 14px;
}
.forum-message { font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--texte); padding: 0 0 18px 20px; border-left: 2px solid var(--filet); }
.forum-message p + p { margin-top: .8em; }
.forum-question { background: var(--fond); border-left: 0; border-radius: 12px; padding: 22px 24px; }
.forum-auteur { font-family: var(--titre); font-size: 15px; color: var(--gris); margin-bottom: 6px; }
.forum-auteur strong { color: var(--encre); font-weight: 600; }
.forum-nb { font-size: 20px; margin: 18px 0 4px; }
.forum-plus { margin-top: 40px; background: var(--fond); }
.forum-plus h2 { font-size: 28px; margin-bottom: 20px; }
.forum-plus .univers-lien { display: inline-block; margin-top: 20px; }

/* ---------------------------------------------------------------------
   8. Pages d'erreur
   --------------------------------------------------------------------- */
.page-erreur { padding: 64px var(--marge); text-align: center; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.page-erreur h1 { font-size: 40px; }
.page-erreur p { font-family: var(--serif); color: var(--gris); font-size: 18px; }

/* ---------------------------------------------------------------------
   9. Pied de page
   --------------------------------------------------------------------- */
.pied { background: var(--encre); color: #D9CFD3; margin-top: 56px; }
.pied-colonnes { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 32px; font-size: 14px; line-height: 1.9; }
.pied .logo { color: #E3A9C4; }
.pied .logo .logo-net { color: var(--blanc); }
.pied h2 { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--blanc); margin-bottom: 6px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied a { color: #D9CFD3; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied-mention { font-family: var(--serif); font-size: 16px; color: #BFB3B8; }
.pied-sites { border-top: 1px solid #3A3035; padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.pied-sites h2 { margin: 0; }
.pied-sites ul { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.pied-bas {
    border-top: 1px solid #3A3035; padding-top: 18px; padding-bottom: 28px;
    font-size: 13px; color: #BFB3B8;
}

/* =====================================================================
   TABLETTE : à partir de 700 px
   ===================================================================== */
@media (min-width: 700px) {
    :root { --marge: 24px; }
    .grille-2, .grille-3, .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .une-secondaires { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .carte-une .carte-titre { font-size: 38px; }
    .carte-liste .carte-image { flex-basis: 140px; }
    .resultats .carte-liste .carte-image { flex-basis: 180px; }
    .resultats .carte-liste .carte-chapo { display: block; font-size: 16px; }
    .article-tete h1 { font-size: 46px; }
    .article-tete .sous-titre { font-size: 22px; }
    .chapo { font-size: 22px; text-align: center; }
    .article-corps { font-size: 20px; }
    .article-corps h2 { font-size: 30px; }
    .article-corps blockquote.exergue { font-size: 27px; }
    .tete-liste h1 { font-size: 52px; }
    .pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-corps img.imgfL { float: left; max-width: 45%; margin: .3em 1.4em 1em 0; }
    .article-corps img.imgfR { float: right; max-width: 45%; margin: .3em 0 1em 1.4em; }
}

/* =====================================================================
   ORDINATEUR : à partir de 1000 px
   ===================================================================== */
@media (min-width: 1000px) {
    /* en-tête : logo centré, loupe à droite, menu horizontal en dessous */
    .entete-barre { display: grid; grid-template-columns: 1fr auto 1fr; padding-top: 12px; padding-bottom: 4px; }
    .entete-barre .logo { grid-column: 2; }
    .entete-actions { justify-content: flex-end; }
    .bouton-menu { display: none; }
    .logo { font-size: 46px; }
    .logo-chez path { stroke-width: 2.6px; }

    .nav-principale, .nav-principale.ouverte { display: block; border-top: 0; }
    .nav-principale > ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 26px; padding: 0 var(--marge); max-height: none; overflow: visible; }
    .nav-principale a { border-bottom: 0; font-size: 15px; padding: 14px 0; gap: 8px; }
    .nav-univers > a::before { width: 8px; height: 8px; }
    .nav-principale a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--couleur); color: var(--encre); }
    /* sous-menu des rubriques : s'ouvre au survol ou au clavier */
    .nav-univers { position: relative; }
    .sous-menu {
        position: absolute; top: 100%; left: -18px; min-width: 240px; z-index: 20;
        list-style: none; margin: 0; padding: 8px 0;
        background: var(--blanc); border: 1px solid var(--filet); border-top: 3px solid var(--couleur);
        border-radius: 0 0 8px 8px; box-shadow: 0 14px 30px rgba(36, 28, 32, .12);
    }
    .nav-univers:hover .sous-menu, .nav-univers:focus-within .sous-menu { display: block; }
    .nav-principale .sous-menu a { padding: 10px 20px; font-size: 16px; font-weight: 500; white-space: nowrap; box-shadow: none; }
    .nav-principale .sous-menu a::before { display: none; }
    .nav-principale .sous-menu a:hover { background: var(--fond); color: var(--couleur); }

    .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .section { padding-top: 56px; padding-bottom: 56px; }

    /* la une : photo en arche à gauche (taille d'origine max), titre à droite */
    .une { padding-top: 40px; padding-bottom: 56px; gap: 40px; }
    .carte-une { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 1fr); gap: 44px; align-items: center; }
    .carte-une .carte-titre { font-size: 44px; }
    .carte-une .carte-chapo { font-size: 20px; }
    .une-secondaires .carte-titre { font-size: 19px; }
    .carte-compacte { gap: 16px; }
    .carte-compacte .carte-image { flex-basis: 155px; }

    .section-univers { padding-top: 56px; padding-bottom: 64px; }
    .recherche-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; }
    .affiner { order: 0; position: sticky; top: 24px; background: #F7F3F4; border-radius: 10px; padding: 20px; }
    .affiner ul { flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
    .affiner a { border: 0; border-radius: 6px; padding: 9px 10px; justify-content: flex-start; }
    .affiner a span { margin-left: auto; }
    .affiner a:hover { background: var(--fond); }
    .univers-tete { gap: 16px; margin-bottom: 28px; }
    .pastille { width: 34px; height: 46px; box-shadow: inset 0 -12px 0 rgba(255, 255, 255, .18); }
    .univers-tete h2 { font-size: 38px; }

    .rangee-grand-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
    .rangee-grand-liste > .carte .carte-titre { font-size: 28px; }
    .deux-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .piece { padding: 32px 32px 16px; }
    .piece .univers-tete h2 { font-size: 28px; }
    .deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }

    .bandeau-guide .conteneur { grid-template-columns: 1fr 1fr; gap: 56px; padding-top: 64px; padding-bottom: 64px; }
    .bandeau-guide h2 { font-size: 48px; }
    .champs-2 { grid-template-columns: 1fr 1fr; }
    .grille-coloriages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
    .encart-coloriages { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; padding: 32px 36px; }
    .coloriage-colonnes { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
    .coloriage-texte { position: sticky; top: 24px; padding-top: 12px; }
    .coloriage-texte h1 { font-size: 44px; }
    .newsletter-colonnes { grid-template-columns: 1fr 1fr; gap: 48px; }
    .article-tete { padding-top: 44px; }
    .article-tete h1 { font-size: 54px; }
    .pied-colonnes { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}