/* ============================================================
   Socle de design partagé — thème enfant GeneratePress
   Les couleurs et les fontes viennent des jetons définis par
   chaque site dans son propre bloc :root, plus bas.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- rythme typographique ---------- */
h1, h2, h3, h4, .entry-title, .page-title {
  font-family: var(--display);
  font-weight: var(--display-weight, 700);
  letter-spacing: -0.018em;
  line-height: 1.16;
  color: var(--ink-strong);
  text-wrap: balance;
}
h1, .entry-title { font-size: clamp(1.85rem, 4.2vw, 2.6rem); margin: 0 0 .6em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin: 2.1em 0 .55em; }
h3 { font-size: 1.22rem; margin: 1.7em 0 .45em; }

p { margin: 0 0 1.15em; }
.entry-content > p:first-of-type {
  font-size: 1.12em;
  color: var(--ink-mid);
}

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

strong { font-weight: 650; color: var(--ink-strong); }

/* ---------- largeur de lecture ---------- */
.entry-content { max-width: 46rem; }
.entry-content > * { max-width: 100%; }

/* ---------- en-tête du site ---------- */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.inside-header { padding: 1.15rem 0; }
.main-title, .site-title a {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.site-description { color: var(--ink-soft); font-size: .88rem; }

/* ---------- navigation ---------- */
.main-navigation { background: var(--nav-bg); border-bottom: 1px solid var(--line); }
.main-navigation .main-nav > ul > li > a {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 550;
  letter-spacing: .01em;
  color: var(--nav-ink);
  padding-left: 1.1rem; padding-right: 1.1rem;
  position: relative;
}
.main-navigation .main-nav > ul > li > a::after {
  content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: .55rem;
  height: 2px; background: var(--brand); transform: scaleX(0);
  transform-origin: left; transition: transform .18s ease;
}
.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after { transform: scaleX(1); }
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li.current-menu-item > a { color: var(--ink-strong); background: transparent; }

/* ---------- fil d'Ariane (émis par Rank Math) ---------- */
.rank-math-breadcrumb {
  font-size: .82rem;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line-soft);
}
.rank-math-breadcrumb a { color: var(--ink-soft); }
.rank-math-breadcrumb a:hover { color: var(--accent-ink); }
.rank-math-breadcrumb .separator { margin: 0 .45rem; opacity: .55; }

/* ---------- méta d'article ---------- */
.entry-meta {
  font-size: .82rem;
  color: var(--ink-soft);
  letter-spacing: .01em;
}
.entry-meta a { color: var(--ink-soft); }
.entry-meta a:hover { color: var(--accent-ink); }

/* ---------- image mise en avant ---------- */
.post-image, .post-image img, .wp-post-image {
  border-radius: var(--radius);
  overflow: hidden;
}
.post-image { margin-bottom: 1.6rem; }
.entry-content img { border-radius: var(--radius); height: auto; }
figcaption { font-size: .84rem; color: var(--ink-soft); margin-top: .5rem; }

/* ---------- listes d'articles ---------- */
.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.5rem;
  transition: border-color .18s ease, transform .18s ease;
}
.blog .site-main > article:hover,
.archive .site-main > article:hover { border-color: var(--brand); transform: translateY(-2px); }
.blog .entry-title, .archive .entry-title { font-size: 1.32rem; margin-bottom: .35em; }
.entry-summary { color: var(--ink-mid); }

.read-more-container { margin-top: 1rem; }
.read-more, .more-link {
  display: inline-block;
  font-size: .86rem;
  font-weight: 600;
  color: var(--accent-ink);
  border-bottom: 2px solid var(--accent-soft);
  padding-bottom: 1px;
  text-decoration: none;
}
.read-more:hover, .more-link:hover { border-bottom-color: var(--brand); }

/* ---------- en-tête de page d'archive ---------- */
.page-header {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.8rem;
}
.page-header .page-title { margin: 0 0 .3em; font-size: clamp(1.5rem, 3vw, 2rem); }
.page-header .taxonomy-description { color: var(--ink-mid); margin: 0; max-width: 42rem; }
.page-header .taxonomy-description p:last-child { margin-bottom: 0; }

/* ---------- tableaux ---------- */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  margin: 1.6em 0;
  display: block;
  overflow-x: auto;
}
.entry-content th, .entry-content td {
  text-align: left;
  padding: .62rem .85rem;
  border-bottom: 1px solid var(--line-soft);
}
.entry-content thead th {
  background: var(--surface-2);
  font-family: var(--sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- citations, code ---------- */
.entry-content blockquote {
  border-left: 3px solid var(--brand);
  background: var(--surface-2);
  margin: 1.7em 0;
  padding: 1.1rem 1.4rem;
  font-style: normal;
  color: var(--ink-mid);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
code, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--surface-2);
  padding: .12em .38em;
  border-radius: 3px;
}

/* ---------- listes ---------- */
.entry-content ul, .entry-content ol { padding-left: 1.35em; margin-bottom: 1.2em; }
.entry-content li { margin-bottom: .45em; }
.entry-content li::marker { color: var(--brand); }

/* ---------- colonne latérale ---------- */
.widget-area .widget {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.4rem;
}
.widget-title {
  font-family: var(--sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--accent-ink);
  font-weight: 700;
  margin-bottom: .9rem;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: .42rem 0; border-bottom: 1px solid var(--line-soft); font-size: .93rem; }
.widget li:last-child { border-bottom: 0; }

/* ---------- pagination ---------- */
.paging-navigation .nav-links, .navigation .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-mid);
  font-size: .92rem; font-weight: 550; text-decoration: none;
}
.page-numbers:hover { border-color: var(--brand); color: var(--ink-strong); }
.page-numbers.current { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }

/* ---------- pied de page ---------- */
.site-footer { background: var(--footer-bg); border-top: 1px solid var(--line); }
.site-info { color: var(--footer-ink); font-size: .86rem; padding: 1.6rem 0; }
.site-info a { color: var(--footer-ink); }
.footer-widgets { background: var(--footer-bg); }

/* ---------- boutons ---------- */
button, .button, input[type="submit"], .wp-block-button__link {
  background: var(--brand);
  color: var(--on-accent);
  border: 0; border-radius: var(--radius);
  padding: .7rem 1.3rem;
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  cursor: pointer;
}
button:hover, .button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
  background: var(--accent-deep); color: var(--on-accent);
}

/* ---------- formulaires ---------- */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .62rem .8rem;
  font-family: var(--sans); font-size: .95rem;
  color: var(--ink);
  width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* ---------- commentaires ---------- */
.comments-area { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.comment-respond { background: var(--surface-2); border-radius: var(--radius); padding: 1.5rem; }

/* ---------- respect des préférences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  body { font-size: 16.5px; }
  .blog .site-main > article, .archive .site-main > article,
  .page-header { padding: 1.2rem 1.15rem; }
  .widget-area .widget { padding: 1.1rem 1.15rem; }
}

/* ---------------------------------------------------------------------------
   Vignettes de liste
   Sur une archive, l'image à sa taille native pousse le texte suivant hors de
   l'écran : un lecteur voit une photo et doit faire défiler pour lire le
   chapô. On la recadre en 3:2, ce qui rend deux entrées visibles d'un écran.
   Sur l'article lui-même, l'image garde ses proportions d'origine.
   --------------------------------------------------------------------------- */
body:not(.single) .post-image img,
body:not(.single) .post-image .wp-post-image {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: auto;
}
body:not(.single) .post-image { margin-bottom: 1.1rem; }

/* Un 3:2 sur une pleine largeur de 1140 px donne 760 px de photo avant le
   premier mot. On plafonne : le titre et le chapô restent au-dessus du pli. */
body:not(.single) .post-image img,
body:not(.single) .post-image .wp-post-image { max-height: 300px; }
body:not(.single) .featured-column .post-image img { max-height: 420px; }

/* ---------------------------------------------------------------------------
   Introduction d'accueil
   Elle porte le H1 et le champ lexical du site. Volontairement sobre : elle
   précède la liste d'articles et ne doit pas lui voler la vedette.
   --------------------------------------------------------------------------- */
.gp-accueil-intro {
  background: var(--surface);
  padding: 2.4rem 2.2rem 2rem;
  margin-bottom: 2.4rem;
  border-top: 3px solid var(--brand);
}
.gp-accueil-intro h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.65rem, 1.1rem + 1.8vw, 2.35rem);
  line-height: 1.18;
  text-wrap: balance;
}
.gp-accueil-intro p {
  margin: 0 0 0.9rem;
  max-width: 68ch;
  color: var(--ink-mid, #444);
}
.gp-accueil-intro p:last-child { margin-bottom: 0; font-size: 0.95em; }
@media (max-width: 768px) {
  .gp-accueil-intro { padding: 1.7rem 1.3rem 1.4rem; }
}

/* En mode « conteneur unique », le fond de la page est déjà la surface blanche :
   un second bloc blanc n'ajoute qu'un filet flottant. On garde le rythme, on
   retire la carte. En mode « conteneurs séparés » elle reste nécessaire. */
body.one-container .gp-accueil-intro {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  border-top: 0;
  border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.08));
  padding-bottom: 1.8rem;
}

/* ---------------------------------------------------------------------------
   Bloc de recherche
   Le bloc natif de WordPress arrive avec son propre noir et son propre titre
   en h2 de corps de texte : deux éléments qui ignorent la palette du thème.
   --------------------------------------------------------------------------- */
.wp-block-search__button {
  background: var(--brand);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius);
  padding: 0.55em 1.1em;
  font-weight: 600;
}
.wp-block-search__button:hover,
.wp-block-search__button:focus { background: var(--accent-deep); }
.wp-block-search__input {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5em 0.7em;
}
/* Un titre de widget bloc doit se lire comme un titre de widget classique. */
.widget-area .wp-block-heading,
.sidebar .widget > h2 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.9rem;
  font-family: var(--sans);
}