/*
Theme Name: Le labo éditorial
Author: lode-it
Description: Thème à blocs du site de Céline Desrumaux (Le labo éditorial) : charte, gabarits, compositions. Le contenu se rédige dans l'éditeur.
Version: 1.0.0
Requires at least: 7.1
Requires PHP: 8.3
License: GNU General Public License v2 or later
Text Domain: labo-editorial
*/
/* GÉNÉRÉ par wordpress/construire-wp.py depuis gabarit.css, complements.css et theme-sources/adaptations.css : ne pas éditer ici. */
/* ==========================================================================
   Maquette « Le labo éditorial » : CSS commun aux deux pages.
   Chaque section correspond à un bloc WordPress : Groupe (wp-block-group),
   Colonnes (wp-block-columns, wp-block-column), Boutons (wp-block-buttons).
   Les variables portent les noms que WordPress génère depuis theme.json :
     settings.color.palette           : --wp--preset--color--{slug}
     settings.typography.fontFamilies : --wp--preset--font-family--{slug}
     settings.typography.fontSizes    : --wp--preset--font-size--{slug}
     settings.spacing.spacingSizes    : --wp--preset--spacing--{slug}
   Les couleurs n'apparaissent qu'ici : tout le reste passe par les variables.
   ========================================================================== */
:root {
  /* marge latérale (16 px à 360 px de large) ; le reste des variables est généré par WordPress depuis theme.json */
  --wp--style--root--padding: clamp(1rem, 0.4rem + 2.7vw, 3rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--wp--preset--color--creme);
  color: var(--wp--preset--color--bleu-nuit);
  font-family: var(--wp--preset--font-family--texte);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.65;
  overflow-wrap: break-word;
}
h1, h2, h3 {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--titres);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: var(--wp--preset--font-size--xx-large); }
h2 { font-size: var(--wp--preset--font-size--x-large); }
h3 { font-size: var(--wp--preset--font-size--large); }
p, ul, ol { margin: 0 0 var(--wp--preset--spacing--30); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--wp--preset--color--bleu-nuit); outline-offset: 3px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute; z-index: 10;
  top: -10rem; left: var(--wp--preset--spacing--30);
  padding: 0.75rem 1rem;
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu-nuit);
  font-weight: 600;
}
.skip-link:focus { top: var(--wp--preset--spacing--30); }

/* ---------- Classes de couleur générées par WordPress ---------- */
.has-creme-background-color { background-color: var(--wp--preset--color--creme); }
.has-blanc-background-color { background-color: var(--wp--preset--color--blanc); }
.has-sauge-background-color { background-color: var(--wp--preset--color--sauge); }

/* ---------- Bloc Groupe (sections pleine largeur) ---------- */
.wp-block-group.alignfull { padding: var(--wp--preset--spacing--60) var(--wp--style--root--padding); }
.conteneur { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.mesure, .intro { max-width: 42rem; }
.intro { margin-bottom: var(--wp--preset--spacing--50); }
:is(.titre-section,.is-style-titre-section) { margin-bottom: var(--wp--preset--spacing--40); }
:is(.titre-section,.is-style-titre-section)::after {
  content: "";
  display: block;
  width: 3rem; height: 3px;
  margin-top: 0.75rem;
  background-color: var(--wp--preset--color--terracotta);
}
:is(.etiquette-section,.is-style-etiquette) {
  margin: 0;
  font-family: var(--wp--preset--font-family--texte);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Bloc Colonnes (empilées sous 782 px, comme dans WordPress) ---------- */
.wp-block-columns {
  display: flex; flex-wrap: wrap;
  gap: var(--wp--preset--spacing--40);
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: 0;
  list-style: none;
}
.wp-block-column { flex: 1 1 100%; min-width: 0; }
@media (min-width: 782px) {
  .wp-block-columns { flex-wrap: nowrap; }
  .wp-block-column { flex-basis: 0; }
}

/* ---------- Bloc Boutons ---------- */
.wp-block-buttons {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--wp--preset--spacing--30);
  margin: var(--wp--preset--spacing--40) 0 0;
}
.wp-block-button__link {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  border: 2px solid var(--wp--preset--color--terracotta-fonce);
  border-radius: 4px;
  background-color: var(--wp--preset--color--terracotta-fonce);
  color: var(--wp--preset--color--blanc);
  font-family: var(--wp--preset--font-family--texte);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.wp-block-button__link:hover, .wp-block-button__link:focus-visible {
  border-color: var(--wp--preset--color--bleu-nuit);
  background-color: var(--wp--preset--color--bleu-nuit);
  color: var(--wp--preset--color--blanc);
}
.is-style-outline > .wp-block-button__link {
  border-color: var(--wp--preset--color--bleu-nuit);
  background-color: transparent;
  color: var(--wp--preset--color--bleu-nuit);
}
.is-style-outline > .wp-block-button__link:hover, .is-style-outline > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--bleu-nuit);
  color: var(--wp--preset--color--creme);
}

/* ---------- Encart « À fournir par Céline » (en pointillés) ---------- */
:is(.a-fournir,.is-style-a-fournir) {
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border: 2px dotted var(--wp--preset--color--bleu-nuit);
  border-radius: 4px;
  background-color: var(--wp--preset--color--creme);
  color: var(--wp--preset--color--bleu-nuit);
  font-size: var(--wp--preset--font-size--small);
}
:is(.a-fournir,.is-style-a-fournir) p { margin-bottom: var(--wp--preset--spacing--20); }
:is(.a-fournir,.is-style-a-fournir) > :last-child { margin-bottom: 0; }
:is(.a-fournir,.is-style-a-fournir) ul { margin: 0; padding-left: 1.25rem; }

/* ---------- En-tête : Logo + Navigation ---------- */
.wp-block-group.site-header {
  padding-block: var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--wp--preset--color--sauge);
}
.site-header .conteneur {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.site-logo { display: inline-block; text-decoration: none; }
.logo-emplacement {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 8.5rem; min-height: 3rem;
  padding: 0 1rem;
  border: 2px dotted var(--wp--preset--color--bleu-nuit);
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--titres);
  font-size: var(--wp--preset--font-size--large);
  font-style: italic;
}
.wp-block-navigation ul {
  display: flex; flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0; padding: 0;
  list-style: none;
  font-size: var(--wp--preset--font-size--small);
}
.wp-block-navigation a {
  display: inline-block;
  padding: 0.625rem 0;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
}
.wp-block-navigation a:hover, .wp-block-navigation a[aria-current] { border-bottom-color: var(--wp--preset--color--terracotta); }
@media (min-width: 600px) {
  .wp-block-navigation ul { gap: 0 1.75rem; font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- Fil d'Ariane (page service) ---------- */
.fil-ariane ol {
  display: flex; flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 0 var(--wp--preset--spacing--40); padding: 0;
  list-style: none;
  font-size: var(--wp--preset--font-size--small);
}
.fil-ariane li + li::before { content: "/"; margin-right: 0.5rem; }

/* ---------- Accroche ---------- */
:is(.surtitre,.is-style-surtitre) {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--titres);
  font-size: var(--wp--preset--font-size--large);
  font-style: italic;
}
:is(.surtitre,.is-style-surtitre)::before {
  content: "";
  flex: none;
  width: 2.5rem; height: 2px;
  background-color: var(--wp--preset--color--terracotta);
}
.accroche h1 { max-width: 46rem; }
:is(.chapo,.is-style-chapo) { max-width: 42rem; font-size: var(--wp--preset--font-size--large); line-height: 1.55; }
:is(.preuve,.is-style-preuve) {
  max-width: 42rem;
  padding-left: 1rem;
  border-left: 3px solid var(--wp--preset--color--sauge);
  font-weight: 600;
}
@media (min-width: 1200px) {
  .accroche { position: relative; overflow: hidden; }
  .accroche .conteneur { position: relative; z-index: 1; }
  .accroche::after {
    content: "";
    position: absolute; top: 50%; right: -5rem;
    width: 26rem; height: 26rem;
    border-radius: 50%;
    background-color: var(--wp--preset--color--sauge);
    transform: translateY(-50%);
  }
  .accroche::before {
    content: "";
    position: absolute; z-index: 1; top: 18%; right: 14rem;
    width: 9rem; height: 9rem;
    border: 2px solid var(--wp--preset--color--terracotta);
    border-radius: 50%;
  }
}

/* ---------- Bandeau « Publiée par » ---------- */
.wp-block-group.publiee-par { padding-block: var(--wp--preset--spacing--50); }
.publiee-par .conteneur { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.liste-medias {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0; padding: 0;
  list-style: none;
  font-family: var(--wp--preset--font-family--titres);
  font-size: var(--wp--preset--font-size--large);
}
@media (min-width: 782px) {
  .publiee-par .conteneur { flex-direction: row; align-items: center; gap: var(--wp--preset--spacing--50); }
}

/* ---------- Cartes ---------- */
:is(.carte,.is-style-carte) {
  display: flex; flex-direction: column;
  padding: var(--wp--preset--spacing--40);
  border-top: 4px solid var(--wp--preset--color--terracotta);
  border-radius: 4px;
  background-color: var(--wp--preset--color--blanc);
}
.carte--creme { border-top-color: var(--wp--preset--color--sauge); background-color: var(--wp--preset--color--creme); }
:is(.carte,.is-style-carte) h3 { margin-bottom: var(--wp--preset--spacing--20); }
.etiquettes { font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.carte__pied { margin-top: auto; margin-bottom: 0; padding-top: var(--wp--preset--spacing--30); }
:is(.carte,.is-style-carte) :is(.a-fournir,.is-style-a-fournir) { margin-top: auto; margin-bottom: 0; }
.lien-fort { font-weight: 600; }
.note-tarifs { margin: 0; font-weight: 600; }

/* ---------- Méthode en trois temps ---------- */
.etape {
  display: flex; align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--40);
  border-radius: 4px;
  background-color: var(--wp--preset--color--creme);
}
.etape__numero {
  display: grid; place-items: center; flex: none;
  width: 3rem; height: 3rem;
  border: 2px solid var(--wp--preset--color--terracotta);
  border-radius: 50%;
  font-family: var(--wp--preset--font-family--titres);
  font-size: var(--wp--preset--font-size--large);
}
.etape h3 { margin: 0; }

/* ---------- Listes à puces décoratives ---------- */
:is(.liste,.is-style-liste) { margin: 0; padding: 0; list-style: none; }
:is(.liste,.is-style-liste) li { position: relative; margin-bottom: 0.5rem; padding-left: 1.25rem; }
:is(.liste,.is-style-liste) li::before {
  content: "";
  position: absolute; top: 0.65em; left: 0;
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background-color: var(--wp--preset--color--terracotta);
}

/* ---------- À propos ---------- */
.portrait { display: flex; align-items: center; min-height: 14rem; }
@media (min-width: 782px) {
  .wp-block-column.colonne-portrait { flex: 0 0 32%; }
  .portrait { min-height: 0; aspect-ratio: 4 / 5; }
}

/* ---------- Formulaire de devis (maquette, n'envoie rien) ---------- */
.formulaire {
  padding: var(--wp--preset--spacing--40);
  border-radius: 4px;
  background-color: var(--wp--preset--color--blanc);
}
.champ { margin-bottom: var(--wp--preset--spacing--30); }
.champ label { display: block; margin-bottom: 0.375rem; font-weight: 600; }
.precision { font-weight: 400; }
.champ input, .champ select, .champ textarea {
  display: block;
  width: 100%; min-height: 3rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--wp--preset--color--bleu-nuit);
  border-radius: 4px;
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu-nuit);
  font: inherit;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.note-maquette { margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--small); font-style: italic; }
@media (min-width: 600px) and (max-width: 781px), (min-width: 1100px) {
  .champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--wp--preset--spacing--30); }
}

/* ---------- Pied de page ---------- */
.wp-block-group.site-footer {
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  background-color: var(--wp--preset--color--bleu-nuit);
  color: var(--wp--preset--color--creme);
}
.site-footer a { color: var(--wp--preset--color--creme); }
.site-footer :focus-visible { outline-color: var(--wp--preset--color--creme); }
.site-footer :is(.etiquette-section,.is-style-etiquette) { margin-bottom: var(--wp--preset--spacing--30); }
.site-footer :is(.liste,.is-style-liste) li::before { background-color: var(--wp--preset--color--sauge); }
.marque {
  margin-bottom: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--titres);
  font-size: var(--wp--preset--font-size--x-large);
  font-style: italic;
}
.mentions {
  margin: var(--wp--preset--spacing--40) 0 0;
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--sauge);
  font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Compléments v2 (16/10/2026) : logo, pictogrammes, portrait, pages légales, blog.
   Mêmes conventions : uniquement des variables du thème, aucune ressource externe.
   ========================================================================== */

/* ---------- Logo ---------- */
.site-logo img { display: block; width: auto; height: 3.25rem; max-width: 100%; }
@media (min-width: 600px) { .site-logo img { height: 4rem; } }
.site-footer .logo-pied { display: block; width: auto; height: 3.75rem; max-width: 100%; margin-bottom: var(--wp--preset--spacing--30); }

/* ---------- Accroche : boussole décorative (grands écrans) ---------- */
.accroche { position: relative; overflow: hidden; }
.accroche .conteneur { position: relative; z-index: 1; }
.accroche__boussole { display: none; }
@media (min-width: 1100px) {
  .accroche::before, .accroche::after { content: none; }
  .accroche__boussole {
    display: block; position: absolute; z-index: 0;
    top: 50%; right: max(-4rem, calc((100vw - 82rem) / 2));
    width: 24rem; height: 24rem;
    opacity: 0.9; transform: translateY(-50%);
  }
  .accroche h1, .accroche :is(.chapo,.is-style-chapo), .accroche :is(.preuve,.is-style-preuve) { max-width: 40rem; }
}
.carte-presse { display: block; margin-top: 0.25rem; font-weight: 400; }

/* ---------- Bandeau médias ---------- */
.medias-autres { margin: 0; font-size: var(--wp--preset--font-size--small); }
.medias-autres strong { font-weight: 700; }

/* ---------- Problèmes (« Donnons ensemble une direction ») ---------- */
.problemes :is(.liste,.is-style-liste) li { margin-bottom: 0.75rem; }
@media (min-width: 900px) { .problemes :is(.liste,.is-style-liste) { columns: 2; column-gap: var(--wp--preset--spacing--50); } .problemes :is(.liste,.is-style-liste) li { break-inside: avoid; } }

/* ---------- Pictogrammes « Pour qui » ---------- */
.pictos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  margin: 0 0 var(--wp--preset--spacing--40); padding: 0; list-style: none;
}
@media (min-width: 600px) { .pictos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pictos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.picto {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: var(--wp--preset--spacing--30);
  border-radius: 4px;
  background-color: var(--wp--preset--color--blanc);
  text-align: center;
  font-weight: 600; line-height: 1.3;
}
.picto svg { width: 4rem; height: 4rem; }
.picto small { font-weight: 400; font-size: var(--wp--preset--font-size--small); }
.et-aussi { margin: 0; }

/* ---------- Méthode détaillée ---------- */
.temps { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--wp--preset--spacing--40); border-radius: 4px; background-color: var(--wp--preset--color--creme); }
.temps .etape__numero { margin-bottom: 0.25rem; }
.temps h3 { margin: 0; }
.temps .sous-titre { margin: 0; font-family: var(--wp--preset--font-family--titres); font-style: italic; }
.temps p:last-child { margin-bottom: 0; }

/* ---------- Portrait ---------- */
.photo-portrait { display: block; width: 100%; height: auto; max-width: 26rem; border-radius: 4px; aspect-ratio: 1 / 1; object-fit: cover; }
.legende-portrait { margin-top: 0.5rem; font-size: var(--wp--preset--font-size--small); font-style: italic; }

/* ---------- Offres détaillées (pages services) ---------- */
:is(.offre,.is-style-offre) { display: flex; flex-direction: column; padding: var(--wp--preset--spacing--40); border-top: 4px solid var(--wp--preset--color--terracotta); border-radius: 4px; background-color: var(--wp--preset--color--blanc); }
:is(.offre,.is-style-offre) h3 { margin-bottom: var(--wp--preset--spacing--20); }
:is(.offre,.is-style-offre) :is(.liste,.is-style-liste) { margin-bottom: 0; }
.grille-offres { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); margin: 0 0 var(--wp--preset--spacing--40); }
@media (min-width: 782px) { .grille-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grille-offres.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:is(.mise-en-avant,.is-style-mise-en-avant) { padding: var(--wp--preset--spacing--40); border-left: 4px solid var(--wp--preset--color--terracotta); border-radius: 4px; background-color: var(--wp--preset--color--blanc); }
:is(.mise-en-avant,.is-style-mise-en-avant) p:last-of-type { margin-bottom: 0; }

/* ---------- Pages de texte (mentions, confidentialité) ---------- */
.texte-long { max-width: 46rem; }
.texte-long h2 { margin-top: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--large); }
.texte-long dl { margin: 0 0 var(--wp--preset--spacing--30); }
.texte-long dt { font-weight: 700; }
.texte-long dd { margin: 0 0 0.75rem; }
.bandeau-relecture { margin-bottom: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border-radius: 4px; background-color: var(--wp--preset--color--sauge); font-weight: 600; }

/* ---------- Blog ---------- */
.categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--wp--preset--spacing--40); padding: 0; list-style: none; }
.categories li { padding: 0.375rem 0.875rem; border: 1px solid var(--wp--preset--color--bleu-nuit); border-radius: 999px; font-size: var(--wp--preset--font-size--small); font-weight: 600; }

/* ---------- Formulaire : champs facultatifs, mention RGPD ---------- */
.mention-rgpd { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }

/* ---------- Pied de page ---------- */
.devise { margin: 0; font-family: var(--wp--preset--font-family--titres); font-style: italic; }
.site-footer .wp-block-columns { flex-wrap: wrap; }
@media (min-width: 782px) { .site-footer .wp-block-column { flex: 1 1 0; } .site-footer .wp-block-column:first-child { flex: 1.6 1 0; } }

/* ==========================================================================
   v3 (18/10/2026) : retours de Céline. Devise à droite du logo, accroche de l'accueil, pastilles de services,
   bandeau de logos des médias, pictogrammes des services, prestations à la carte, forfaits, autres services.
   ========================================================================== */

/* ---------- En-tête : logo + devise, dans les couleurs de la charte (bleu nuit, puis terracotta foncé pour le contraste) ---------- */
.marque-entete { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.site-header .site-logo img { height: 2.375rem; }
.devise-entete {
  margin: 0; padding-left: 0.625rem;
  border-left: 1px solid var(--wp--preset--color--sauge);
  font-family: var(--wp--preset--font-family--texte);
  font-size: clamp(0.6875rem, 0.6rem + 0.35vw, 0.875rem);
  font-weight: 600; line-height: 1.35; letter-spacing: 0.03em; text-transform: uppercase;
}
/* petits téléphones (moins de 375 px) : la devise passe sous le logo, toujours sur deux lignes */
@media (max-width: 374px) {
  .marque-entete { flex-wrap: wrap; row-gap: 0.25rem; }
  .devise-entete { flex-basis: 100%; padding-left: 0; border-left: 0; }
}
.devise-entete span { display: block; }
.devise-entete__haut { color: var(--wp--preset--color--bleu-nuit); }
.devise-entete__bas { color: var(--wp--preset--color--terracotta-fonce); }
@media (min-width: 600px) {
  .site-header .site-logo img { height: 4rem; }
  .marque-entete { gap: 1rem; }
  .devise-entete { padding-left: 1rem; letter-spacing: 0.06em; }
  .devise-entete span { white-space: nowrap; }
}

/* ---------- Accroche de l'accueil : signature en grand, promesse, pastilles, expérience ---------- */
.accroche--accueil :is(.surtitre,.is-style-surtitre) { margin-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--large); }
/* 48rem (18/10, « SEO & GEO ») : « Rédactrice SEO & GEO, community manager et copywriter » tient sur une ligne sur ordinateur */
@media (min-width: 1100px) { .accroche--accueil :is(.surtitre,.is-style-surtitre) { max-width: 48rem; } }
:is(.signature,.is-style-signature) {
  max-width: 46rem;
  margin: 0 0 var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--titres);
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.15;
  text-wrap: balance;
}
.accroche--accueil :is(.chapo,.is-style-chapo) { margin-bottom: var(--wp--preset--spacing--40); }
:is(.pastilles,.is-style-pastilles) {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  max-width: 42rem;
  margin: 0 0 var(--wp--preset--spacing--40); padding: 0;
  list-style: none;
}
:is(.pastilles,.is-style-pastilles) a {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--wp--preset--color--sauge);
  border-radius: 999px;
  background-color: var(--wp--preset--color--blanc);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600; line-height: 1.35;
  text-decoration: none;
}
:is(.pastilles,.is-style-pastilles) a:hover, :is(.pastilles,.is-style-pastilles) a:focus-visible { border-color: var(--wp--preset--color--terracotta); text-decoration: underline; }
.accroche--accueil :is(.preuve,.is-style-preuve) { font-weight: 400; }
.accroche--accueil :is(.preuve,.is-style-preuve) strong { font-weight: 700; }
.accroche--accueil .carte-presse { margin-top: 0.5rem; font-style: italic; }
/* Téléphone : liste à puces terracotta (plus sobre que des pastilles empilées) ; pastilles à partir de 600 px */
@media (max-width: 599px) {
  :is(.pastilles,.is-style-pastilles) { flex-direction: column; gap: 0.25rem; }
  :is(.pastilles,.is-style-pastilles) a { position: relative; padding: 0 0 0 1.25rem; border: 0; border-radius: 0; background-color: transparent; font-size: var(--wp--preset--font-size--medium); }
  :is(.pastilles,.is-style-pastilles) a::before { content: ""; position: absolute; top: 0.55em; left: 0; width: 0.45rem; height: 0.45rem; border-radius: 50%; background-color: var(--wp--preset--color--terracotta); }
}
@media (min-width: 1100px) { .accroche :is(.signature,.is-style-signature) { max-width: 40rem; } .accroche :is(.pastilles,.is-style-pastilles) { max-width: 46rem; } }

/* ---------- Bandeau « Publiée par » : un emplacement par média, logo (img/medias/) ou nom en typographie ---------- */
.publiee-par .conteneur { display: block; text-align: center; }
.publiee-par :is(.etiquette-section,.is-style-etiquette) { margin-bottom: var(--wp--preset--spacing--20); }
.etiquette-section--et-aussi { margin-top: var(--wp--preset--spacing--40); }
.logos-medias {
  display: grid; grid-template-columns: minmax(0, 1fr);
  max-width: 64rem;
  margin: 0 auto; padding: 0;
  list-style: none;
}
.logo-media { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.375rem 1rem; }
.logo-media a { display: flex; align-items: center; justify-content: center; min-height: inherit; text-decoration: none; }
.logo-media a:hover .logo-media__nom, .logo-media a:focus-visible .logo-media__nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.logo-media__nom {
  font-family: var(--wp--preset--font-family--titres);
  font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  font-weight: 700; line-height: 1.15; letter-spacing: 0.005em;
}
/* hauteur fixe, largeur plafonnée en valeur absolue (un pourcentage s'effondre dans un élément ajusté au contenu) */
.logo-media__img { display: block; width: auto; height: 2.75rem; max-width: 12rem; object-fit: contain; }
.logos-medias--autres { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 50rem; }
.logos-medias--autres .logo-media { min-height: 2.75rem; padding-inline: 0.5rem; }
.logos-medias--autres .logo-media__nom { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.logos-medias--autres .logo-media__img { height: 2rem; max-width: 9rem; }
@media (min-width: 782px) {
  /* chaque emplacement prend la largeur de son logo, séparés par un filet sauge comme sur la bannière de la charte */
  .logos-medias { display: flex; justify-content: center; }
  .logo-media { flex: 0 1 auto; min-height: 4.25rem; padding-inline: clamp(1.25rem, 2.6vw, 2.75rem); }
  .logo-media + .logo-media { border-left: 1px solid var(--wp--preset--color--sauge); }
  .logos-medias--autres { max-width: 64rem; }
  .logos-medias--autres .logo-media { padding-inline: clamp(1rem, 2vw, 2rem); }
}
.a-fournir--centre { max-width: 42rem; margin: var(--wp--preset--spacing--40) auto 0; text-align: left; }

/* ---------- Cartes de services de l'accueil : pictogramme, cinq cartes (trois puis deux sur grand écran) ---------- */
.carte--service .picto-service { display: block; width: 3.5rem; height: 3.5rem; margin-bottom: var(--wp--preset--spacing--30); }
@media (min-width: 782px) and (max-width: 1099px) { .grille-services > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .grille-services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grille-services > * { grid-column: span 2; }
  .grille-services > :nth-child(n+4) { grid-column: span 3; }
}

/* ---------- Rédaction web SEO & GEO : prestations à la carte, en liste ---------- */
.carte-prestations {
  max-width: 52rem;
  margin: 0 0 var(--wp--preset--spacing--40); padding: 0;
  border-top: 1px solid var(--wp--preset--color--sauge);
  list-style: none;
}
.carte-prestations li { padding: var(--wp--preset--spacing--40) 0; border-bottom: 1px solid var(--wp--preset--color--sauge); }
.carte-prestations h3 { margin: 0; }
.carte-prestations p { margin: 0.375rem 0 0; }
@media (min-width: 782px) {
  .carte-prestations li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--wp--preset--spacing--40); align-items: baseline; }
  .carte-prestations p { margin: 0; }
}

/* ---------- Contenus IA : trois forfaits ---------- */
@media (min-width: 782px) { .grille-offres.forfaits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offre--forfait p { margin-bottom: 0; }
.offre__volume {
  display: block;
  margin: var(--wp--preset--spacing--20) 0 0.25rem;
  color: var(--wp--preset--color--terracotta-fonce);
  font-family: var(--wp--preset--font-family--titres);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.1;
}

/* ---------- Pages services : les autres services ---------- */
.services-voisins {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--30);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 600px) { .services-voisins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .services-voisins { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.service-voisin {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--30);
  height: 100%;
  padding: var(--wp--preset--spacing--30);
  border-radius: 4px;
  background-color: var(--wp--preset--color--blanc);
  font-weight: 600; line-height: 1.3;
  text-decoration: none;
}
.service-voisin svg { flex: none; width: 3rem; height: 3rem; }
.service-voisin:hover span, .service-voisin:focus-visible span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- Pages services : pictogramme du service dans l'accroche ---------- */
.accroche__picto {
  display: inline-grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  margin-bottom: var(--wp--preset--spacing--30);
  border-radius: 50%;
  background-color: var(--wp--preset--color--blanc);
}
.accroche__picto svg { width: 3rem; height: 3rem; }

/* ==========================================================================
   Adaptations WordPress (thème à blocs) : ce que le balisage des blocs change par rapport à la maquette statique.
   Source : wordpress/theme-sources/adaptations.css, ajoutée à la fin de style.css par construire-wp.py.
   « .conteneur » de la maquette est devenu le groupe « conteneur » (mêmes règles).
   ========================================================================== */

/* ---------- Généralités : figures des blocs Image, marges de WordPress neutralisées ---------- */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
main.site-main { margin: 0; }
.wp-block-post-content > * { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-image img { display: block; }
.wp-block-heading { margin-top: 0; }

/* ---------- En-tête : logo (bloc Image avec lien), devise, menu (bloc Navigation) ---------- */
header.wp-block-template-part { margin: 0; }
.site-header .site-logo a { display: block; text-decoration: none; }
.site-header .wp-block-navigation { font-size: var(--wp--preset--font-size--small); }
.site-header .wp-block-navigation .wp-block-navigation__container { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0; padding: 0; list-style: none; }
.site-header .wp-block-navigation .wp-block-navigation-item__content {
  display: inline-block;
  padding: 0.625rem 0;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
}
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content[aria-current] { border-bottom-color: var(--wp--preset--color--terracotta); }
@media (min-width: 600px) {
  .site-header .wp-block-navigation { font-size: var(--wp--preset--font-size--medium); }
  .site-header .wp-block-navigation .wp-block-navigation__container { gap: 0 1.75rem; }
}

/* ---------- Pied de page ---------- */
footer.wp-block-template-part { margin: 0; }
.site-footer .logo-pied { height: auto; margin: 0 0 var(--wp--preset--spacing--30); }
.site-footer .logo-pied img { display: block; width: auto; height: 3.75rem; max-width: 100%; }

/* ---------- Accroche : boussole décorative en arrière-plan (elle n'est plus dans le contenu) ---------- */
@media (min-width: 1100px) {
  .accroche:not(.accroche--sans-boussole)::after {
    content: "";
    position: absolute; z-index: 0;
    top: 50%; right: max(-4rem, calc((100vw - 82rem) / 2));
    width: 24rem; height: 24rem;
    border: 0; border-radius: 0;
    background: url("assets/img/boussole.svg") center / contain no-repeat;
    opacity: 0.9;
    transform: translateY(-50%);
  }
}
.wp-block-image.accroche__picto { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 0 var(--wp--preset--spacing--30); border-radius: 50%; background-color: var(--wp--preset--color--blanc); }
.accroche__picto img { width: 3rem; height: 3rem; }

/* ---------- Fil d'Ariane (bloc core/breadcrumbs) : séparateur de la maquette, pas celui du bloc ---------- */
.fil-ariane li:not(:last-child)::after { content: none; }
.fil-ariane li + li::before { content: "/"; margin-right: 0.5rem; }
.fil-ariane ol { gap: 0.25rem 0.5rem; }

/* ---------- Méthode : numéros par compteur CSS (Céline n'a pas à les gérer) ---------- */
.etapes { counter-reset: etape; }
.etapes > .temps::before {
  counter-increment: etape;
  content: counter(etape);
  display: grid; place-items: center; flex: none;
  width: 3rem; height: 3rem;
  margin-bottom: 0.25rem;
  border: 2px solid var(--wp--preset--color--terracotta);
  border-radius: 50%;
  font-family: var(--wp--preset--font-family--titres);
  font-size: var(--wp--preset--font-size--large);
}

/* ---------- Pictogrammes « Pour qui » : groupe .pictos > groupe .picto > image + paragraphe ---------- */
.pictos { margin: 0 0 var(--wp--preset--spacing--40); }
.picto img { width: 4rem; height: 4rem; }
.picto p { margin: 0; }

/* ---------- Cartes de services : pictogramme (bloc Image) ---------- */
.carte--service .picto-service img { width: 100%; height: 100%; }

/* ---------- Autres services : groupe .service-voisin > image + paragraphe-lien étiré sur toute la tuile ---------- */
.service-voisin { position: relative; }
.service-voisin figure { flex: none; }
.service-voisin img { width: 3rem; height: 3rem; }
.service-voisin p { margin: 0; }
.service-voisin a { text-decoration: none; }
.service-voisin a::after { content: ""; position: absolute; inset: 0; }
.service-voisin:hover a, .service-voisin a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- Prestations à la carte : groupes au lieu d'une liste ---------- */
.carte-prestations > .prestation { padding: var(--wp--preset--spacing--40) 0; border-bottom: 1px solid var(--wp--preset--color--sauge); }
.carte-prestations > .prestation h3 { margin: 0; }
.carte-prestations > .prestation p { margin: 0.375rem 0 0; }
@media (min-width: 782px) {
  .carte-prestations > .prestation { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--wp--preset--spacing--40); align-items: baseline; }
  .carte-prestations > .prestation p { margin: 0; }
}

/* ---------- Portrait (bloc Image de la médiathèque) ; colonne à 32 % (le CSS des Colonnes de WordPress est plus spécifique) ---------- */
@media (min-width: 782px) { .wp-block-columns > .wp-block-column.colonne-portrait { flex: 0 0 32%; } }
.photo-portrait { max-width: 26rem; }
.photo-portrait img { display: block; width: 100%; height: auto; border-radius: 4px; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- Mentions légales : libellé en gras puis valeur (la liste de définitions est devenue des paragraphes) ---------- */
.texte-long .definition { margin: 0 0 0.75rem; }
.texte-long .definition-terme { margin: 0; }

/* ---------- Blog : boucle d'articles en cartes ---------- */
.grille-articles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); margin: 0 0 var(--wp--preset--spacing--40); padding: 0; list-style: none; }
@media (min-width: 782px) { .grille-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grille-articles .wp-block-post-title { margin-bottom: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--large); }
.grille-articles .wp-block-post-title a { text-decoration: none; }

/* ---------- Page des polices (privée) : spécimens ; polices déclarées par theme.json ---------- */
.specimen { padding: var(--wp--preset--spacing--40); border-radius: 4px; background-color: var(--wp--preset--color--blanc); }
.specimen .nom-police { margin-bottom: var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--texte); font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.specimen :is(.surtitre,.is-style-surtitre) { font-size: var(--wp--preset--font-size--medium); }
.specimen h2 { font-size: var(--wp--preset--font-size--x-large); }
.specimen-a { --t: var(--wp--preset--font-family--lora); --x: var(--wp--preset--font-family--source-sans-3); }
.specimen-b { --t: var(--wp--preset--font-family--playfair-display); --x: var(--wp--preset--font-family--lato); }
.specimen-0 { --t: Georgia, Cambria, "Times New Roman", serif; --x: system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.specimen h2, .specimen h3, .specimen :is(.surtitre,.is-style-surtitre) { font-family: var(--t); }
.specimen p:not(.nom-police):not(:is(.surtitre,.is-style-surtitre)), .specimen li, .specimen .wp-block-button__link { font-family: var(--x); }
.grille-polices { display: grid; gap: var(--wp--preset--spacing--40); }
@media (min-width: 1100px) { .grille-polices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.espace-haut { margin-top: 1.5rem; }

/* ---------- Éditeur : le champ « titre de la page » (absent du site, le titre est dans le contenu) aligné sur les sections ---------- */
.editor-post-title { padding-inline: var(--wp--style--root--padding); }

/* ---------- Retours de Céline du 23/10/2026 ---------- */
/* Mots-clés en gras en terracotta, liens en vert sauge, sur tout le contenu des pages. Teintes foncées de la charte,
   pour rester lisibles sur le crème et le blanc (contraste AA : terracotta foncé 4,5:1, sauge foncé 4,7:1) ;
   la sauge claire (1,9:1) reste réservée aux fonds. Pas de couleur dans les encarts « à fournir », les fonds sauge,
   les boutons, les pastilles et les liens-cartes, qui ont déjà leur style. */
:root { --labo-sauge-texte: #5E7257; --labo-sauge-texte-survol: #4A5D44; }
.wp-block-post-content :is(p, li, dd, td) a:not(.wp-block-button__link):not(:is(:is(.pastilles,.is-style-pastilles), .is-style-pastilles, .logo-media, .service-voisin, .services-voisins, .is-style-a-fournir, :is(.a-fournir,.is-style-a-fournir), .has-sauge-background-color) a) {
  color: var(--labo-sauge-texte);
}
.wp-block-post-content :is(p, li, dd, td) a:not(.wp-block-button__link):not(:is(:is(.pastilles,.is-style-pastilles), .is-style-pastilles, .logo-media, .service-voisin, .services-voisins, .is-style-a-fournir, :is(.a-fournir,.is-style-a-fournir), .has-sauge-background-color) a):hover {
  color: var(--labo-sauge-texte-survol);
}
.wp-block-post-content :is(p, li, dd, td) strong:not(:is(.is-style-a-fournir, :is(.a-fournir,.is-style-a-fournir), .has-sauge-background-color) strong) {
  color: var(--wp--preset--color--terracotta-fonce);
}

/* Cartes : « Lire l'article » aligné d'une carte à l'autre. Chaque carte = titre, corps (étiquettes), pied ; les trois
   rangées sont partagées par les cartes d'une même ligne (grille + subgrid), au-delà de 782 px. Plusieurs paragraphes
   de pied dans une même carte : seul le premier descend en bas, les suivants le suivent. */
.carte__pied ~ .carte__pied { margin-top: var(--wp--preset--spacing--20); padding-top: 0; }
.carte__corps > :first-child { margin-top: 0; }
.carte__corps > :last-child { margin-bottom: 0; }
.carte__bas { padding-top: var(--wp--preset--spacing--30); }
.carte__bas > .carte__pied { margin-top: 0; padding-top: 0; }
.carte__bas > .carte__pied ~ .carte__pied { margin-top: var(--wp--preset--spacing--20); }
@media (min-width: 782px) {
  .wp-block-columns.cartes-alignees {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto; column-gap: var(--wp--preset--spacing--40); row-gap: 0;
  }
  .wp-block-columns.cartes-alignees > .wp-block-column.carte { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .wp-block-columns.cartes-alignees > :is(.carte,.is-style-carte) > .carte__bas { align-self: start; }
}

/* ---------- Réseaux (26/10/2026, validé par Céline) : logos LinkedIn et Instagram ----------
   Bloc standard « Icônes de réseaux sociaux » (core/social-links, style « Logos seuls », classe « reseaux ») : dans l'en-tête
   (motif en-tete, géré par lode-it) et dans la composition synchronisée « Mes réseaux » (Contact, À propos, et partout où
   Céline l'insère). Logos monochromes en vert sauge foncé (4,7:1 sur le crème, 5,2:1 sur le blanc ; la sauge claire, 1,9:1,
   serait illisible), terracotta foncé au survol et au focus ; zone cliquable d'au moins 44 x 44 px. La mise en page
   automatique des blocs étant coupée (disable-layout-styles), l'alignement en ligne est posé ici. Sélecteurs de 5 classes :
   plus forts que les couleurs de marque du cœur et que la couleur des liens du contenu (retours du 23/10). */
.wp-block-social-links.reseaux { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.wp-block-social-links.reseaux .wp-block-social-link.wp-social-link { margin: 0; background: none; }
.wp-block-social-links.reseaux .wp-block-social-link.wp-social-link .wp-block-social-link-anchor {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0.625rem;
  color: var(--labo-sauge-texte);
  text-decoration: none;
}
.wp-block-social-links.reseaux .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,
.wp-block-social-links.reseaux .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:focus-visible { color: var(--wp--preset--color--terracotta-fonce); }
.wp-block-social-links.reseaux .wp-social-link svg { width: 1.5rem; height: 1.5rem; }
/* sur un fond sauge (section « Parlons de votre projet ») : bleu nuit, la sauge foncée y manquerait de contraste */
.has-sauge-background-color .wp-block-social-links.reseaux .wp-block-social-link.wp-social-link .wp-block-social-link-anchor { color: var(--wp--preset--color--bleu-nuit); }

/* En-tête : menu et logos dans un même groupe, qui passe en entier sous la marque quand la largeur manque. Les logos restent
   toujours à droite du menu : sur téléphone, c'est le menu qui passe sur deux lignes à côté d'eux (dessin aligné sur la marge
   de droite) ; à partir de 782 px, un filet sauge les sépare du menu (comme la devise du logo). */
.site-header .entete-navigation { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 1rem; min-width: 0; }
.site-header .entete-navigation > .wp-block-navigation { flex: 0 1 auto; min-width: 0; }
.site-header .reseaux-entete { flex: none; margin-left: auto; margin-right: -0.625rem; }
@media (min-width: 782px) {
  .site-header .entete-navigation { gap: 0 1.25rem; }
  .site-header .reseaux-entete { margin-right: 0; padding-left: 0.5rem; border-left: 1px solid var(--wp--preset--color--sauge); }
}

/* Composition « Mes réseaux » : la phrase, puis les logos (un peu plus grands que dans l'en-tête), dessin aligné sur le texte. */
.mes-reseaux { margin-top: var(--wp--preset--spacing--40); }
.mes-reseaux > .mes-reseaux__texte { margin: 0; }
.mes-reseaux .wp-block-social-links.reseaux { margin-left: -0.625rem; }
.mes-reseaux .wp-block-social-links.reseaux .wp-social-link svg { width: 1.75rem; height: 1.75rem; }

/* ==========================================================================
   Refonte du 02/11/2026 (mail de Céline du 02/11, 15 h 58), contenu posé par outils/refonte-celine-2026-11-02.php
   ========================================================================== */

/* Accueil : boussole réduite (« réduire logo ») et posée en haut à droite de l'accroche : elle ne passe plus sous le texte. */
@media (min-width: 1100px) {
  .accroche--accueil:not(.accroche--sans-boussole)::after {
    top: var(--wp--preset--spacing--50);
    width: 12rem; height: 12rem;
    transform: none;
  }
}

/* Accueil : chiffres clés en cases (« ajouter des cases visuelles ») : groupe .chiffres-cles > 4 groupes .chiffre-cle
   (chiffre, intitulé en gras, phrase). Une colonne au téléphone, deux sur tablette, quatre à partir de 1 100 px. */
.chiffres-cles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); margin: var(--wp--preset--spacing--40) 0; }
@media (min-width: 600px) { .chiffres-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .chiffres-cles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chiffre-cle {
  display: flex; flex-direction: column;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  background-color: var(--wp--preset--color--blanc);
  border-top: 4px solid var(--wp--preset--color--terracotta); border-radius: 4px;
  box-shadow: 0 1px 3px rgba(36, 59, 83, 0.08);
}
.chiffre-cle > * { margin: 0; }
.chiffre-cle .wp-block-heading { margin-bottom: var(--wp--preset--spacing--20); color: var(--wp--preset--color--bleu-nuit); font-size: var(--wp--preset--font-size--x-large); line-height: 1.1; }
.chiffre-cle p + p { margin-top: 0.5rem; font-size: var(--wp--preset--font-size--small); }

/* « Ils m'ont fait confiance » : Doctissimo et PasseportSanté en tête, en plus grand ; le Journal des Femmes ensuite. */
.logo-media--vedette .logo-media__nom { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }

/* « Pour qui ? » à six pictogrammes : trois par ligne, puis six sur grand écran (cinq avant le 02/11). */
@media (min-width: 1000px) { .pictos:has(> .picto:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pictos:has(> .picto:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Offres : deux grandes rubriques (page /offres/ et résumé de l'accueil), puis la prestation à la carte. */
.rubrique-offres { scroll-margin-top: 6rem; }
.rubrique-offres .grille-offres { margin-top: var(--wp--preset--spacing--40); }
.pour-qui-offres { margin: 0 0 var(--wp--preset--spacing--40); }
.pour-qui-offres > .wp-block-heading { margin-bottom: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--large); }
@media (min-width: 782px) { .pour-qui-offres :is(:is(.liste,.is-style-liste),.is-style-liste) { columns: 2; column-gap: var(--wp--preset--spacing--50); } .pour-qui-offres li { break-inside: avoid; } }
.is-style-offre > * + * { margin-top: var(--wp--preset--spacing--20); }
.is-style-offre > .wp-block-heading { margin-bottom: 0; }
.offre__rang { margin: 0 0 0.25rem; color: var(--wp--preset--color--terracotta-fonce); font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.is-style-offre > .offre__rang + .wp-block-heading { margin-top: 0; }
.offre__sous-titre { font-family: var(--wp--preset--font-family--titres); font-style: italic; font-size: var(--wp--preset--font-size--large); line-height: 1.25; }
.offre__livrables { font-style: italic; }
.is-style-offre .offre__note { margin-top: auto; padding-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }
.is-style-offre .offre__note em { font-style: italic; }
.a-la-carte .wp-block-buttons { margin-top: var(--wp--preset--spacing--30); }
.a-la-carte + .note-tarifs { margin-top: var(--wp--preset--spacing--40); }

/* ==========================================================================
   Logo du 02/11/2026 : logo n°1 de Céline (croix médicale et plume), go de Loïc. Posé par outils/logo-celine-2026-11-02.sh.
   En-tête (logo-entete-mot-v2.png en 3x depuis les finitions du 03/11, logo-entete-mot.png en 2x avant) et pied de page
   (logo-pied-mot-clair-v2.png depuis les correctifs de 23 h 40, variante claire pour le bleu nuit, en 3x) : images du
   thème choisies dans construire-wp.py. Ici : tailles du logo d'en-tête et décor de l'accroche, à la place de la
   boussole. Noms de fichiers neufs (aucune image en cache à la même adresse) ; boussole.svg, logo.svg, logo-clair.svg,
   logo-entete-mot.png et logo-pied-mot-clair.png (v1) restent dans le thème.
   ========================================================================== */

/* Logos en PNG : si la place manque (téléphones de 375 à 400 px), l'image rétrécit sans se déformer, calée à gauche. */
.site-header .site-logo img, .site-footer .logo-pied img { object-fit: contain; object-position: left center; }
/* Le nouveau logo est plus large que l'ancien (rapport 4,79 contre 4,49) : sa hauteur est réduite pour garder la largeur
   de l'ancien partout.
   Téléphones (moins de 600 px) : 2,2rem, soit 169 px de large comme l'ancien (171). Mesuré : à 390 px la devise tient sur
   deux lignes (trois avant le logo), à 375 px elle reste sur quatre lignes comme avant ; sous 375 px elle passe sous le
   logo (correctif de 23 h 40 : 2,2rem aussi sous 375 px, le logo n'y est plus plus grand qu'à 375 px).
   600 px et plus : 3,75rem, soit 287 px comme l'ancien (307 à 4rem) : l'en-tête retrouve une seule ligne dès 1 255 px de
   large (sinon le menu passait sous le logo entre 1 255 et 1 274 px, une fenêtre de 1 280 px sous Windows y tombe). */
@media (max-width: 599px) { .site-header .site-logo img { height: 2.2rem; } }
@media (min-width: 600px) { .site-header .site-logo img { height: 3.75rem; } }

/* Décor de l'accroche : la marque à la place de la boussole (opacité, hauteur et position verticale de la boîte
   inchangées). WebP d'abord, PNG pour les navigateurs sans image-set().
   Finitions du 03/11 : le bord droit de la marque est calé sur celui de la colonne de contenu (.conteneur : marge de la
   section, puis 75rem centrés) ; elle la dépassait de 16 à 23 px jusqu'à 1 280 px, de 34 à 37 px au-delà. La boîte va donc
   de 53,75rem (860 px) au bord droit de la colonne, calculé en % de la largeur de la section : exact aussi avec une barre
   de défilement classique (Windows, 17 px : 100vw la compte, la mise en page non). La marque est calée à
   droite dans la boîte ; le -1,6 % de sa taille compense la marge transparente de l'image (1,8 %).
   Tailles : celles de 23 h 57 (pages 14 à 22rem, accueil 7 à 11rem selon la largeur), sauf qu'elle ne commence jamais
   avant 860 px : entre 1 100 et 1 120 px de mise en page, elle rétrécit au lieu de s'approcher des boutons (Offres).
   Mesuré au VPS avant la pose, ces règles injectées dans la page (mesures-logo.js, 10 pages, 1 100 à 1 920 px, avec et
   sans barre de 17 px, balayage de 6 en 6 px de 1 100 à 1 330 px) : au moins 29,7 px entre la marque et le texte ou les
   boutons, bord droit à moins de 1 px de celui de la colonne. */
@media (min-width: 1100px) {
  .accroche:not(.accroche--sans-boussole)::after {
    --labo-decor-taille: clamp(14rem, 100vw - 60rem, 22rem);
    left: 53.75rem;
    right: max(var(--wp--style--root--padding), calc((100% - var(--wp--style--global--wide-size)) / 2));
    width: auto;
    pointer-events: none;
    background-position: right calc(-0.016 * var(--labo-decor-taille)) center;
    background-size: min(var(--labo-decor-taille), 100%) auto;
    background-image: url("assets/img/marque-decor-768.png");
    background-image: image-set(url("assets/img/marque-decor-768.webp") type("image/webp"), url("assets/img/marque-decor-768.png") type("image/png"));
  }
  .accroche--accueil:not(.accroche--sans-boussole)::after {
    --labo-decor-taille: clamp(7rem, (100vw - 60rem) / 2, 11rem);
    background-image: url("assets/img/marque-decor-384.png");
    background-image: image-set(url("assets/img/marque-decor-384.webp") type("image/webp"), url("assets/img/marque-decor-384.png") type("image/png"));
  }
  /* Correctif de 23 h 40 : le surtitre des pages à décor n'avait pas de largeur maximale (seul celui de l'accueil en a une) ;
     celui d'À propos, long, passait sous la marque à partir de 1 280 px (et la frôlait dès 1 100 px). 42rem comme le chapo :
     il passe sur deux lignes. Thème seulement, aucune page modifiée. */
  .accroche:not(.accroche--sans-boussole):not(.accroche--accueil) :is(.surtitre,.is-style-surtitre) { max-width: 42rem; }
}
/* Correctif de 23 h 40 : accueil entre 1 100 et 1 199 px, le titre h2 de l'accroche (sans largeur maximale) touchait la
   marque, plus petite et plus haute à ces largeurs. 46rem comme le h1 des autres pages, sur cette plage seulement.
   Finitions du 03/11 : jusqu'à 1 232 px de fenêtre (1 199 avant). La marque calée sur la colonne s'approche du titre ; or
   avec une barre de défilement de 17 px, une fenêtre de 1 200 à 1 232 px n'a que 1 183 à 1 215 px de mise en page et la
   marque passait à 15-28 px du titre. Sans barre, le titre passe simplement sur trois lignes jusqu'à 1 232 px. */
@media (min-width: 1100px) and (max-width: 1232px) {
  .accroche--accueil:not(.accroche--sans-boussole) > .conteneur > h2 { max-width: 46rem; }
}