/*
Theme Name: Grandir en anglais
Theme URI: https://the-blue-cat.com
Description: Grandir en anglais - publication en ligne.
Version: 1.0.14c78abf
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: All rights reserved
Text Domain: the-blue-cat
Tags: blog, magazine, custom
*/

/* ========================================================
   Grandir en anglais - feuille de styles
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;600;700&display=swap');

:root {
  --clr-forest: #1A3645;
  --clr-accent: #C58E3E;
  --clr-cream: #F7F2E9;
  --clr-text: #1B2330;
  --clr-muted: #697384;
  --clr-border: #E1D9CC;
  --clr-card-bg: #FFFFFF;
  --clr-overlay: rgba(26, 54, 69, 0.72);

  --ff-serif: 'Merriweather', Georgia, serif;
  --ff-sans:  'Source Sans 3', system-ui, sans-serif;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --radius-sm: 3px; --radius-md: 8px;
  --max-w: 1080px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--clr-cream); color: var(--clr-text); font-family: var(--ff-sans);
  font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--clr-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
.the7-skip-link-6e0 { position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--clr-text); color: var(--clr-cream); padding: var(--sp-3) var(--sp-4); }
.the7-skip-link-6e0:focus { left: var(--sp-4); top: var(--sp-4); }
.the7-breadcrumb-746 { font-size: 0.82rem; color: var(--clr-muted); margin-bottom: var(--sp-5); }
.the7-breadcrumb-746 ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.the7-breadcrumb-746 a { color: var(--clr-muted); }
.the7-breadcrumbs__sep-710 { color: var(--clr-border); }
.the7-pagination-d30 { margin-top: var(--sp-7); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.the7-pagination-d30 .the7-page-numbers-769 { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm); color: var(--clr-text); }
.the7-pagination-d30 .the7-current-371 { background: var(--clr-text); color: var(--clr-cream); border-color: var(--clr-text); }
.the7-vide-640 { color: var(--clr-muted); padding: var(--sp-6) 0; }
.the7-post-single-2bc { min-width: 0; }
.the7-post-single__header-8bb { margin-bottom: var(--sp-5); }
.the7-post-single__cat-255 { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: var(--clr-accent); }
.the7-post-single__title-858 { font-family: var(--ff-serif); font-size: 2rem; line-height: 1.2;
  color: var(--clr-forest); margin-top: var(--sp-2); }
.the7-post-single__meta-5dd { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: 0.82rem;
  color: var(--clr-muted); margin-top: var(--sp-3); }
.the7-post-date-c0b time { font-variant-numeric: tabular-nums; }
/* Le sommaire se lisait comme un bloc continu : titre colle a la the7-liste-44d,
   entrees sans ecart, fond a peine distinct du the7-corps-1e1 de page — mesure sur le
   site deploye, 0 px entre deux entrees et 3 % d'ecart de fond. Le traitement
   vaut pour les DEUX exemplaires, colonne et the7-corps-1e1, qui partagent la classe.
   Le fond teinte le the7-corps-1e1 de page plutot que de poser un blanc : il differe
   ainsi PAR CONSTRUCTION, quelle que soit la palette tiree par site. */
.the7-toc-532 {
  background: var(--clr-card-bg);
  background: color-mix(in srgb, var(--clr-text) 5%, var(--clr-cream));
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.the7-toc__title-524 {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--clr-border);
}
.the7-toc-532 ol { list-style: none; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.the7-toc-532 a {
  display: block;
  color: var(--clr-text);
  font-size: .9rem;
  line-height: 1.4;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left: 2px solid var(--clr-border);
  transition: color .2s, border-color .2s;
}
.the7-toc-532 a:hover { color: var(--clr-accent); border-color: var(--clr-accent); }
/* Le sommaire existe a deux endroits du document et un seul s'affiche a une
   largeur donnee : lateralement au-dessus de 900px, dans le the7-corps-1e1 en dessous.
   Il ne peut pas etre unique — aucune propriete de flux ne deplace un element
   d'un niveau d'imbrication a un autre, et sa place doit changer avec la
   largeur. La hauteur est BORNEE et le defilement interne : sans cela, un
   sommaire plus haut que la fenetre garde ses dernieres entrees hors d'atteinte,
   la colonne restant fixe pendant que la page defile. */
.the7-rail-article-d65 { position: sticky; top: var(--sp-5); max-height: calc(100vh - 5.5rem); overflow-y: auto; }
.the7-rail-article-d65 .the7-toc--laterale-71c { margin: 0; }
.the7-toc--flux-4c0 { display: none; }

/* Le rail lateral porte la couverture au-dessus de 900px. Cette figure ne sert
   qu'en dessous, ou le rail est masque : sans elle, un lecteur mobile ne voyait
   AUCUNE image a la une. Une seule des deux est visible a une largeur donnee. */
.the7-post-single__cover-ed0 { margin: var(--sp-5) 0 var(--sp-6); border-radius: var(--radius-md); overflow: hidden; }
.the7-post-single__cover-ed0 img { display: block; width: 100%; height: auto; }
.the7-post-single__prose-3ae > * + * { margin-top: var(--sp-4); }
.the7-post-single__prose-3ae h2 { font-family: var(--ff-serif); font-size: 1.4rem; margin-top: var(--sp-7); color: var(--clr-forest); }
.the7-post-single__prose-3ae h3 { font-family: var(--ff-serif); font-size: 1.12rem; margin-top: var(--sp-6); }
.the7-post-single__prose-3ae ul, .the7-post-single__prose-3ae ol { padding-left: var(--sp-5); list-style: revert; }
.the7-post-single__prose-3ae blockquote { border-left: 3px solid var(--clr-accent); padding-left: var(--sp-4);
  color: var(--clr-muted); font-style: italic; }
.the7-post-single__prose-3ae figcaption { font-size: 0.8rem; color: var(--clr-muted); margin-top: var(--sp-2); }
.the7-post-single__footer-eb2 { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--clr-border); }
.the7-tag-list-975 { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: 0.8rem; }
.the7-tag-list-975 a { border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3); color: var(--clr-muted); }
.page-links { margin-top: var(--sp-5); font-size: 0.9rem; }
.the7-page-content-bcb > * + * { margin-top: var(--sp-4); }
.the7-error-404-b8e { padding: var(--sp-8) 0; }
.the7-error-404__title-af2 { font-family: var(--ff-serif); font-size: 1.9rem; color: var(--clr-forest); }
.the7-error-404__text-4f2 { margin-top: var(--sp-3); color: var(--clr-muted); }

.the7-enseigne-15a { max-width: var(--max-w); margin: 0 auto; padding: var(--sp-6) var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  border-bottom: 1px solid var(--clr-border); }
.the7-enseigne__marque-2f8 { font-family: var(--ff-serif); font-size: 1.5rem; font-weight: 700; }
.the7-enseigne__marque-2f8 a { color: var(--clr-forest); }
/* Le formulaire de recherche a ete retire de l'EN-TETE (arbitrage du
   2026-08-31 : un media de ce format n'a pas d'usage pour une recherche
   interne, et le bandeau est deja charge). Les regles ci-dessous ne sont PAS
   supprimees pour autant : `404.php` rend toujours un formulaire, et il etait
   le seul a etre style par ces selecteurs. Elles sont donc RE-SCOPEES sur
   `.search-form`, la classe que WordPress emet lui-meme, pour que la page
   d'erreur ne se retrouve pas avec un champ brut. */
.search-field { width: 100%; padding: var(--sp-2) var(--sp-3); font: inherit;
  border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-card-bg); }
.search-submit { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-4); font: inherit;
  border: 0; border-radius: var(--radius-md); background: var(--clr-accent); color: #fff; cursor: pointer; }
.the7-corps-1e1 { max-width: var(--max-w); margin: 0 auto; padding: var(--sp-6) var(--sp-4); }
.the7-index-375 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }
/* Tete d'accueil : le dernier article, developpe. L'the7-index-375 qui suit reste une
   the7-liste-44d de liens — c'est sa raison d'etre — mais chaque entree porte desormais
   sa vignette quand elle en a une. Sans image, l'entree se contente de son
   texte : pas de cadre the7-vide-640. */
.the7-tete-443 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-6);
  align-items: center; margin-bottom: var(--sp-8); }
.the7-tete__media-246 { margin: 0; border-radius: var(--radius-md); overflow: hidden; }
.the7-tete__rubrique-78c { display: inline-block; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--clr-accent); margin-bottom: var(--sp-2); }
.the7-tete__titre-500 { font-family: var(--ff-serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }
.the7-tete__titre-500 a { color: var(--clr-text); }
.the7-tete__chapeau-e21 { color: var(--clr-muted); margin-top: var(--sp-3); }
.the7-tete__meta-c16 { display: flex; gap: var(--sp-3); font-size: .82rem; color: var(--clr-muted); margin-top: var(--sp-3); }
/* Colonne de vignette en `auto` : sans image, l'entree n'a pas d'enfant a
   placer dans cette colonne, elle se reduit a zero et le texte occupe toute la
   largeur. Aucun cadre the7-vide-640, et aucune classe conditionnelle a poser. */
.the7-groupe__item-8ab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.the7-groupe__vignette-ae6 { display: block; width: 64px; border-radius: var(--radius-sm); overflow: hidden; }
.the7-groupe__texte-1e0 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.the7-groupe-c23 { border-top: 2px solid var(--clr-forest); padding-top: var(--sp-3); }
.the7-groupe__titre-e88 { font-family: var(--ff-serif); font-size: 1.12rem; display: flex;
  align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.the7-groupe__titre-e88 a { color: var(--clr-forest); }
.the7-groupe__compte-608 { font-family: var(--ff-sans); font-size: 0.76rem; color: var(--clr-muted);
  border: 1px solid var(--clr-border); border-radius: 999px; padding: 0 var(--sp-2); }
.the7-groupe__liste-a48 { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.the7-groupe__item-8ab { font-size: 0.93rem; }
.the7-groupe__item-8ab time { font-size: 0.76rem; color: var(--clr-muted); font-variant-numeric: tabular-nums; }
.the7-titre-rubrique-368 { font-family: var(--ff-serif); font-size: 1.8rem; color: var(--clr-forest); margin-bottom: var(--sp-5); }
.the7-liste-44d { display: flex; flex-direction: column; }
.the7-liste__item-102 { padding: var(--sp-4) 0; border-bottom: 1px solid var(--clr-border); }
.the7-liste__titre-d32 { font-family: var(--ff-serif); font-size: 1.15rem; }
.the7-liste__titre-d32 a { color: var(--clr-forest); }
.the7-liste__chapeau-905 { color: var(--clr-muted); font-size: 0.92rem; margin-top: var(--sp-2); }
.the7-duo-33e { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-7); align-items: start; }
.the7-galerie-0bc { position: sticky; top: var(--sp-5); }
.the7-galerie__vignette-fda { border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; background: var(--clr-card-bg); }
.the7-galerie__vignette-fda figcaption { padding: var(--sp-2) var(--sp-3); font-size: 0.78rem; color: var(--clr-muted); }
.the7-pied-1e8 { max-width: var(--max-w); margin: var(--sp-9) auto 0; padding: var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--clr-border); display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-size: 0.82rem; color: var(--clr-muted); }
.the7-pied-1e8 a { color: var(--clr-muted); }
@media (max-width: 900px) {
  .the7-tete-443 { grid-template-columns: minmax(0, 1fr); }
  .the7-rail-article-d65 { display: none; }
  .the7-toc--flux-4c0 { display: block; }
  .the7-duo-33e { grid-template-columns: minmax(0, 1fr); }
  /* Le rail de medias est un COMPLEMENT lateral : en une colonne il se
     retrouvait empile en fin d'article, ou il n'apporte rien et allonge la
     page. On le masque. Le sommaire, lui, est rendu en the7-tete-443 de prose par le
     gabarit : il reste visible sans traitement particulier. */
  .the7-galerie-0bc { display: none; }
  .the7-enseigne-15a { flex-direction: column; align-items: flex-start; }
}

/* Encadre d'ouverture. Le titre est balise dans l'article lui-meme ; il
   etait auparavant genere par la feuille de style, ou il restait invisible
   a la lecture du document. */
.essentiel-retenir {
  background: var(--clr-card-bg);
  border-left: 4px solid var(--clr-accent);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-5);
  margin: var(--sp-5) 0;
  line-height: 1.7;
  color: var(--clr-text);
}
/* Apparence du titre de l'encadre, dont le libelle est desormais balise. */
.essentiel-retenir > h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-accent);
  margin: 0 0 var(--sp-2);
}
.essentiel-retenir > h3::before { content: "\1F4A1\00a0"; }
.essentiel-retenir ul { margin: 0 0 0 var(--sp-5); list-style: disc; }
.essentiel-retenir li + li { margin-top: var(--sp-2); }
.essentiel-retenir p:last-child { margin-bottom: 0; }

/* Un comparatif large forcait un scroll horizontal de la PAGE ENTIERE. Le
   scroll appartient a la TABLE, jamais a la page. */

/* ==========================================================================
   Tableaux du the7-corps-1e1 d'article — traitement unique du corpus.
   Chaque article de production porte un tableau comparatif de 4 a 6 colonnes :
   ce n'est pas un cas de bord, c'est la forme normale du contenu.

   TROIS points a ne pas defaire :

   (1) La page est en creme (--clr-cream). Un tableau sans fond propre laisse ce
       creme passer au travers, et un zebrage lui aussi en creme devient
       strictement INVISIBLE ; la derniere ligne, sans bordure, s'y dissout. Le
       tableau prend donc un fond BLANC (--clr-card-bg), sur lequel le zebrage
       creme redevient lisible.

   (2) `background-attachment: local` : sans elle le fond reste solidaire du
       conteneur et le creme reapparait sous les colonnes de droite des que le
       tableau defile horizontalement — donc sur mobile.

   (3) `border-collapse: separate` plutot que `collapse` + `overflow: hidden` :
       la propriete `overflow` ne s'applique pas de facon fiable a un element
       `table`, et les angles de l'en-tete debordaient du rayon. Les coins se
       posent donc explicitement.

   PAS d'alignement a droite : sans classe dans le HTML, le CSS ne distingue pas
   une colonne de chiffres d'une colonne de texte. `tabular-nums` suffit.
   ========================================================================== */
.the7-post-single__prose-3ae table {
  width: 100%;
  max-width: 100%;
  margin: var(--sp-6) 0;
  font-size: 0.9375rem;
  background: var(--clr-card-bg);
  background-attachment: local;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
}
.the7-post-single__prose-3ae caption {
  caption-side: top;
  text-align: left;
  color: var(--clr-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  margin-bottom: var(--sp-2);
}
.the7-post-single__prose-3ae table th {
  background: var(--clr-forest);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.the7-post-single__prose-3ae table th:first-child { border-top-left-radius: var(--radius-md); }
.the7-post-single__prose-3ae table th:last-child  { border-top-right-radius: var(--radius-md); }
.the7-post-single__prose-3ae table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.the7-post-single__prose-3ae table tbody tr:nth-child(even) td { background: var(--clr-cream); }
.the7-post-single__prose-3ae table td:first-child,
.the7-post-single__prose-3ae table th:first-child { font-weight: 600; }
.the7-post-single__prose-3ae table tbody tr:last-child td { border-bottom: none; }

/* Un comparatif large forcait un scroll horizontal de la PAGE ENTIERE. Le
   scroll appartient a la TABLE, jamais a la page. */
@media (max-width: 720px) {
  .the7-post-single__prose-3ae table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   SOMMAIRE — un seul rendu visible, a toutes les largeurs.
   Le sommaire vient du gabarit. Quand la
   redaction en ecrit un second dans le CORPS (classe `.sommaire-article`), les
   deux coexistent dans le DOM et le lecteur en voit deux a la suite. C'est le
   sommaire du gabarit qui fait foi : il connait la mise en page, l'autre non.
   La regle est donc un GARDE — inerte quand le the7-corps-1e1 n'en porte pas, ce qui est
   le cas nominal, et decisive le jour ou la configuration change.
   ========================================================================== */
.sommaire-article { display: none; }

/* ==========================================================================
   SUITE DE LECTURE.
   La grille se dimensionne sur le NOMBRE TROUVE : la classe `related--N` est
   posee par le gabarit. Une categorie pauvre rend deux cartes, ou une seule,
   et la grille s'y adapte au lieu d'etirer une carte unique sur toute la
   largeur. On ne complete jamais avec des articles d'une autre rubrique.
   ========================================================================== */
.the7-related-646 { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--clr-border); }
.the7-related__title-431 { font-family: var(--ff-serif); font-size: 1.12rem; margin-bottom: var(--sp-5); }
.the7-related__grid-623 { display: grid; gap: var(--sp-6); grid-template-columns: repeat(3, 1fr); }
.the7-related--2-49d .the7-related__grid-623 { grid-template-columns: repeat(2, 1fr); }
.the7-related--1-4cb .the7-related__grid-623 { grid-template-columns: minmax(0, 380px); }
.the7-related-card-87b { border-top: 2px solid var(--clr-forest); padding-top: var(--sp-3); }
.the7-related-card__media-ed5 { display: block; aspect-ratio: 3 / 2; background: var(--clr-border); overflow: hidden; border-radius: var(--radius-md); }
.the7-related-card__thumb-32d { width: 100%; height: 100%; object-fit: cover; }
.the7-related-card__body-af2 { padding-top: var(--sp-3); }
.the7-related-card__title-5bc { font-family: var(--ff-serif); font-size: 1rem; line-height: 1.3; }
.the7-related-card__title-5bc a { color: var(--clr-forest); }
.the7-related-card__date-2e9 { font-size: 0.76rem; color: var(--clr-muted); margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .the7-related__grid-623, .the7-related--2-49d .the7-related__grid-623, .the7-related--1-4cb .the7-related__grid-623 { grid-template-columns: 1fr; }
}

/* Fond des blocs encadres : distinct du fond de page.
   Un bloc peint dans la meme teinte que le the7-corps-1e1 de page est invisible. */

/* Classes portees par les vignettes. WordPress place sinon le NOM DE LA TAILLE
   dans la classe de l'image ; ce nom est interne au gabarit et se retrouvait
   servi tel quel. Declarees ici, elles sont renommees par site a la
   construction du theme. */
.the7-post-single__cover-img-4c5 { display: block; width: 100%; height: auto; }

/* Vignette des entrees de the7-liste-44d. Declaree ici pour etre renommee par site :
   une classe citee par le gabarit et absente de cette feuille sortirait
   identique sur tous les sites. */
.the7-vignette-article-3df { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Declarees meme sans mise en forme propre : une classe citee par le gabarit et
   absente de cette feuille garde son nom d'origine sur tous les sites. */
.the7-tete__corps-930 { min-width: 0; }
.the7-groupe__lien-8c5 { color: var(--clr-text); }
.the7-groupe__lien-8c5:hover { color: var(--clr-accent); }