/*
Theme Name: GM NNE Services-Conseils RH
Theme URI: https://gmnne.com
Author: GM NNE Services-Conseils RH
Description: Thème bloc sur mesure pour GM NNE Services-Conseils RH, Trois-Rivières. Ressources humaines et gestion de projets.
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gm-nne
Tags: block-theme, full-site-editing, business, one-column
*/

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  CE FICHIER EST GÉNÉRÉ — ne pas l'éditer ici.                        ║
   â•‘  Le design vit dans site/styles.css ; relancer scripts\theme.ps1.    â•‘
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* ═══════════════════════════════════════════════════════════════
   GM NNE Services-Conseils RH — maquette
   Jetons relevés au pixel sur la référence fournie par le client :
   fond de page #E4E4E4 · carte sombre #231717 · panneau sable #DAD0C5
   champ sauge #676A5E · texte secondaire sur sable #685E54
   Géométrie relevée : angles droits (rayon 0) sur les grandes cartes,
   rayon modéré sur la seule barre de navigation flottante.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --espresso:  #231717;
  --sauge:     #676a5e;
  --sable:     #dad0c5;
  --gris:      #e4e4e4;
  --taupe:     #685e54;
  --blanc:     #ffffff;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --marge:     clamp(14px, 3.4vw, 48px);   /* encart des cartes, relevé 3,4 % */
  --gouttiere: clamp(12px, 1.9vw, 27px);   /* écart entre cartes, relevé 1,9 % */
  --respir:    clamp(30px, 7vw, 104px);    /* padding intérieur des cartes */
  --encart-barre: clamp(14px, 2.8vw, 29px); /* retrait de la barre dans la carte */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  position: relative;   /* ancre la barre flottante, qui vit hors des cartes */
  /* flow-root empêche la marge haute de la première carte de fusionner avec
     celle du body : sans ça, la barre absolue descend de toute la marge. */
  display: flow-root;
  background: var(--gris);
  color: var(--espresso);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  hyphens: none;
  text-wrap: balance;
  margin: 0;
}

p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

/* Côté WordPress, le contenu vit dans main.wp-block-group : même raison
   que le flow-root du body, la première carte y collerait sa marge. */
main { display: flow-root; }

a { color: inherit; text-decoration: none; }

/* height:auto est obligatoire : l'attribut height="1125" que core/image écrit
   sur la balise l'emporte sinon sur tout aspect-ratio du CSS. */
img { display: block; max-width: 100%; height: auto; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Teinte photographique relevée sur la référence : les images y sont
   désaturées et réchauffées, jamais livrées brutes. */
.teinte {
  filter: grayscale(.42) sepia(.22) saturate(.85) contrast(1.02) brightness(.88);
}

/* ── Étiquette de section (relevé : « OUR STORY ») ───────────── */
.etiquette {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.etiquette-clair { color: rgba(255, 255, 255, .78); }

/* ═══════════════════ 1 · HERO ═══════════════════ */

.hero {
  position: relative;
  margin: var(--marge) var(--marge) var(--gouttiere);
  height: clamp(520px, 82vh, 880px);
  overflow: hidden;
  background: var(--espresso);
}

/* La photo est une <figure> et non une <img> nue : c'est la sortie exacte de
   core/image, et la même règle sert la maquette et le thème. */
.hero-photo {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.42) sepia(.22) saturate(.85) contrast(1.02) brightness(.88);
}

/* Le voile était un <div> vide : dans Gutenberg, un groupe vide est un bloc
   que le client sélectionne, ne comprend pas, et supprime. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(35,23,23,.46) 0%, rgba(35,23,23,.10) 32%, rgba(35,23,23,.78) 100%);
}

/* Barre flottante translucide — le seul dispositif de profondeur de la
   référence : elle se superpose à la photo au lieu de la surmonter.
   Elle vit hors de la carte, comme le fera parts/header.html : ancrée au
   body, elle se pose sur la première carte quelle qu'elle soit. */
.barre {
  position: absolute;
  top: calc(var(--marge) + var(--encart-barre));
  left: calc(var(--marge) + var(--encart-barre));
  right: calc(var(--marge) + var(--encart-barre));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
  padding: 0 10px 0 20px;
  border-radius: 14px;
  background: rgba(238, 234, 230, .13);
  border: 1px solid rgba(255, 255, 255, .17);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  color: var(--blanc);
}

/* Le sigle est un masque CSS, pas un SVG inline : un SVG dans le contenu
   n'est pas un bloc natif et ne porte rien d'éditable. */
.marque {
  display: flex; align-items: center; gap: 10px;
  font-size: 16.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.marque::before {
  content: "";
  display: block; flex: none;
  width: 40px; height: 20px;
  background: var(--blanc);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='13' cy='11' r='8.5'/%3E%3Ccircle cx='22' cy='11' r='8.5'/%3E%3Ccircle cx='31' cy='11' r='8.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='13' cy='11' r='8.5'/%3E%3Ccircle cx='22' cy='11' r='8.5'/%3E%3Ccircle cx='31' cy='11' r='8.5'/%3E%3C/svg%3E");
}

/* core/navigation emboîte cinq conteneurs entre le <nav> et le <ul>.
   « display: contents » les rend transparents hors du panneau mobile, de
   sorte que la mise en page ne dépend que du <ul>. */
.barre-menu { margin-left: auto; margin-right: auto; }
.barre-menu .wp-block-navigation__responsive-container:not(.is-menu-open),
.barre-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
.barre-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
.barre-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
  display: contents;
}
.barre-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
  display: none;
}

.barre-menu .wp-block-navigation__container {
  display: flex;
  gap: clamp(16px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.barre-menu .wp-block-navigation-item__content {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  color: var(--blanc);
  text-decoration: none;
}
.barre-menu .wp-block-navigation-item__content:hover,
.barre-menu .current-menu-item > .wp-block-navigation-item__content {
  border-bottom-color: rgba(255, 255, 255, .85);
}

/* Le lien « Nous joindre » n'existe dans le menu que pour le panneau mobile :
   en desktop, c'est le bouton de droite qui le porte. */
.lien-contact-mobile { display: none; }

/* Bouton d'ouverture du panneau — masqué tant qu'on est en desktop. */
.barre-menu .wp-block-navigation__responsive-container-open {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  background: none; border: 0; cursor: pointer;
}
.barre-menu .wp-block-navigation__responsive-container-open span {
  display: block;
  width: 20px; height: 1.5px;
  margin: 5px auto;
  background: var(--blanc);
}

/* core/button pose la classe sur le CONTENEUR, pas sur le lien : on neutralise
   le conteneur et on style le lien. */
.barre-contact-enveloppe { display: flex; gap: 0; margin: 0; }
.wp-block-button.barre-contact {
  display: inline-block;
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
}
.barre-contact .wp-block-button__link {
  display: inline-block;
  margin: 0;
  padding: 0 14px 2px 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--blanc);
  font-size: 15px;
  font-weight: 400;
  border-bottom: 1.5px solid rgba(255, 255, 255, .85);
  white-space: nowrap;
}


.hero-texte {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: clamp(44px, 7vw, 108px);
  padding: 0 var(--respir);
  text-align: center;
}

/* Le <br> porte seul la césure : la largeur maximale ne doit jamais
   provoquer un retour supplémentaire — la référence tient sur deux lignes. */
.hero h1 {
  max-width: 100%;
  margin: 0 auto;
  font-size: clamp(2.1rem, 4.25vw, 3.85rem);
  line-height: 1.07;
  color: var(--blanc);
}
/* Au-dessus de 900 px, seul le <br> coupe le titre : deux lignes, comme la
   référence. En dessous, le repli naturel reprend la main — sans quoi la
   ligne déborde du cadre et se fait rogner. */
@media (min-width: 900px) {
  .hero h1 { text-wrap: nowrap; }
}

/* ═══════════════════ 2 · APPROCHE (carte espresso) ═══════════════════ */

.approche {
  margin: 0 var(--marge) var(--gouttiere);
  padding: var(--respir);
  background: var(--espresso);
  color: var(--blanc);
}

/* Grille asymétrique relevée : étiquette sur 39 %, propos sur 58 %. */
.approche-haut {
  display: grid;
  grid-template-columns: 39fr 58fr;
  gap: clamp(24px, 3vw, 40px);
}

.approche-propos { display: grid; gap: 26px; }

.enonce {
  font-size: clamp(1.4rem, 2.15vw, 1.9rem);
  line-height: 1.24;
  font-weight: 400;
  letter-spacing: -0.008em;
}

.secondaire {
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.68;
  color: rgba(255, 255, 255, .64);
}

/* Bandeau de domaines — registre du bandeau de chiffres de la référence :
   grands caractères serif, filets verticaux discrets, alignement à gauche. */
.domaines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(56px, 7vw, 100px);
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.domaine {
  padding: clamp(28px, 3.4vw, 44px) clamp(14px, 1.7vw, 26px) 0 0;
}
.domaine + .domaine {
  padding-left: clamp(14px, 1.7vw, 26px);
  border-left: 1px solid rgba(255, 255, 255, .13);
}

/* Le chiffre porte le poids du serif, comme les grands nombres de la
   référence ; le mot français est trop long pour tenir sur la même ligne. */
.chiffre {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  line-height: 1;
  color: rgba(255, 255, 255, .38);
}

.domaine-titre {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.85vw, 1.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.domaine-note {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .58);
}

/* ═══════════════════ 3 · ÉTAPES (panneau sable, centré) ═══════════════════ */

.etapes {
  margin: 0 var(--marge) var(--gouttiere);
  padding: var(--respir);
  background: var(--sable);
}

.etapes-entete { text-align: center; max-width: 60ch; margin: 0 auto; }

.etapes-entete h2 {
  font-size: clamp(1.95rem, 3.35vw, 3.05rem);
  line-height: 1.1;
}

.etapes-entete p {
  margin-top: 20px;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--taupe);
}

.etapes-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(44px, 5.5vw, 76px);
}

.vignette { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--taupe); }
/* Teinte commune poussée : trois photos d'expositions différentes doivent
   se lire comme une série, comme les portraits de la référence. */
.vignette img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.58) sepia(.26) saturate(.72) contrast(1.05) brightness(.95);
}
.etape:nth-child(2) .vignette img { filter: grayscale(.58) sepia(.26) saturate(.72) contrast(1.08) brightness(1.04); }
.etape:nth-child(3) .vignette img { filter: grayscale(.58) sepia(.26) saturate(.72) contrast(1.05) brightness(.86); }

/* Typographie relevée sous les portraits de la référence :
   nom en quasi-noir, fonction en petites capitales taupe. */
.vignette-titre {
  margin-top: 20px;
  font-size: 17.5px;
  font-weight: 500;
  color: var(--espresso);
}
.vignette-role {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
}
.vignette-note {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--taupe);
}

/* ═══════════════════ 4 · PROJETS (champ sauge, scindé) ═══════════════════ */

.projets {
  display: grid;
  grid-template-columns: 47fr 53fr;
  margin: 0 var(--marge) var(--gouttiere);
  background: var(--sauge);
  color: var(--blanc);
}

.projets-photo { margin: 0; overflow: hidden; }
.projets-photo img {
  width: 100%; height: 100%; object-fit: cover; min-height: 420px;
  filter: grayscale(.55) sepia(.3) saturate(.7) contrast(1) brightness(.95);
}

.projets-propos {
  padding: var(--respir);
  display: grid;
  align-content: center;
  gap: 24px;
}

.projets-propos h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.85rem);
  line-height: 1.1;
}

.projets-texte {
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.66;
  color: rgba(255, 255, 255, .86);
}

.projets-liste {
  display: grid;
  gap: 0;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.projets-liste li {
  padding: 15px 0;
  font-size: 15.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

/* ═══════════════════ 5 · CONTACT (carte espresso, centrée) ═══════════════════ */

.contact {
  margin: 0 var(--marge) var(--gouttiere);
  padding: clamp(72px, 9vw, 136px) var(--respir);
  background: var(--espresso);
  color: var(--blanc);
  text-align: center;
}

.contact h2 {
  font-size: clamp(2.1rem, 3.7vw, 3.4rem);
  line-height: 1.08;
  max-width: 18ch;
  margin: 0 auto;
}

.contact-texte {
  margin: 20px auto 0;
  max-width: 44ch;
  font-size: 16.5px;
  color: rgba(255, 255, 255, .64);
}

/* Le bouton du bandeau est un core/button : la classe atterrit sur le
   conteneur, qu'il faut neutraliser, et le style va sur le lien. */
.contact-boutons {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.wp-block-button.bouton-bloc {
  display: inline-block;
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
}

.bouton,
.bouton-bloc .wp-block-button__link,
.wpcf7-submit {
  display: inline-block;
  padding: 15px 30px;
  border: 0;
  border-radius: 0;
  background: var(--sable);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.bouton:hover,
.bouton-bloc .wp-block-button__link:hover,
.wpcf7-submit:hover { background: var(--blanc); }

.contact-coord {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: clamp(44px, 5.5vw, 72px);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: 15.5px;
  color: rgba(255, 255, 255, .72);
}
.contact-coord a:hover { color: var(--blanc); }

/* ═══════════════════ 6 · PIED ═══════════════════ */

.pied {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px clamp(24px, 4vw, 64px);
  padding: 0 var(--marge) var(--marge);
}

.pied-marque {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--espresso);
}
.pied-marque span {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Même traitement que la barre : les conteneurs de core/navigation sont
   rendus transparents, seul le <ul> met en page. */
.pied-liens .wp-block-navigation__responsive-container,
.pied-liens .wp-block-navigation__responsive-close,
.pied-liens .wp-block-navigation__responsive-dialog,
.pied-liens .wp-block-navigation__responsive-container-content {
  display: contents;
}
.pied-liens .wp-block-navigation__responsive-container-open,
.pied-liens .wp-block-navigation__responsive-container-close { display: none; }

.pied-liens .wp-block-navigation__container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0; padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--taupe);
}
.pied-liens .wp-block-navigation-item__content { text-decoration: none; }
.pied-liens .wp-block-navigation-item__content:hover { color: var(--espresso); }

.pied-mention {
  grid-column: 1 / -1;
  padding-top: 22px;
  border-top: 1px solid rgba(35, 23, 23, .16);
  font-size: 13.5px;
  color: var(--taupe);
}

/* ═══════════════════ EN-TÊTE DES PAGES INTERNES ═══════════════════ */

/* Même composant que le hero, en plus court : les pages internes gardent
   la carte photo à angles droits et la barre flottante de la référence. */
.entete {
  position: relative;
  margin: var(--marge) var(--marge) var(--gouttiere);
  height: clamp(380px, 52vh, 540px);
  overflow: hidden;
  background: var(--espresso);
}

.entete-photo { position: absolute; inset: 0; margin: 0; }
.entete-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.42) sepia(.22) saturate(.85) contrast(1.02) brightness(.82);
}

.entete::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(35,23,23,.52) 0%, rgba(35,23,23,.22) 40%, rgba(35,23,23,.72) 100%);
}

/* Variante sans photo : la page contact n'a rien à illustrer, et ce vide
   fait varier le poids des sections d'une page à l'autre. */
.entete-uni { height: clamp(300px, 40vh, 420px); }

.entete-texte {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: clamp(34px, 5vw, 76px);
  padding: 0 var(--respir);
  text-align: center;
}

.entete h1 {
  max-width: 20ch;
  margin: 14px auto 0;
  font-size: clamp(1.95rem, 3.5vw, 3.2rem);
  line-height: 1.08;
  color: var(--blanc);
}

/* ═══════════════════ VARIANTES D'ÉTIQUETTE ET DE CHIFFRE ═══════════════════ */

.etiquette-sombre { color: var(--taupe); }
.chiffre-sombre { color: rgba(35, 23, 23, .34); }

/* Le style va sur le <a> par son CONTEXTE, jamais par une classe posée sur
   lui : une classe sur un élément inline n'appartient à aucun format RichText
   enregistré, et l'éditeur invaliderait le bloc. */
.lien-suite-ligne { margin-top: 4px; }
.lien-suite-ligne a {
  display: inline-block;
  padding-bottom: 3px;
  font-size: 15.5px;
  font-weight: 500;
  border-bottom: 1.5px solid rgba(255, 255, 255, .55);
}
.lien-suite-ligne a:hover { border-bottom-color: var(--blanc); }

/* ═══════════════════ COLONNES (sable, titre centré) ═══════════════════ */

.colonnes {
  margin: 0 var(--marge) var(--gouttiere);
  padding: var(--respir);
  background: var(--sable);
}

.colonnes-entete { text-align: center; max-width: 32ch; margin: 0 auto; }
.colonnes-entete h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.1;
}

.colonnes-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3.4vw, 54px);
  margin-top: clamp(44px, 5.5vw, 78px);
  border-top: 1px solid rgba(35, 23, 23, .18);
}
.colonne { padding-top: clamp(26px, 3.2vw, 44px); }

.colonne-titre {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.16;
}
.colonne-note {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--taupe);
}

/* ═══════════════════ RANGÉES (sable, liste pleine largeur) ═══════════════════ */

.rangees {
  margin: 0 var(--marge) var(--gouttiere);
  padding: var(--respir);
  background: var(--sable);
}

.rangees-liste { display: grid; }
.rangee {
  display: grid;
  grid-template-columns: 1fr 3.2fr;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(34px, 4vw, 56px) 0;
  border-top: 1px solid rgba(35, 23, 23, .18);
}
.rangee:first-child { border-top: 0; padding-top: 0; }

.rangee-corps h2 {
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  line-height: 1.12;
}
.rangee-note {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.66;
  color: var(--taupe);
}
.rangee-detail {
  display: grid;
  gap: 9px;
  margin-top: 24px;
  font-size: 15px;
  color: var(--espresso);
}
.rangee-detail li { padding-left: 20px; position: relative; }
.rangee-detail li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 1px;
  background: rgba(35, 23, 23, .45);
}

/* ═══════════════════ FORMULES (sauge, 3 colonnes) ═══════════════════ */

/* Sauge et non espresso : le bandeau de contact qui suit est déjà espresso,
   et deux cartes sombres collées aplatissent le rythme de la page. */
.formules {
  margin: 0 var(--marge) var(--gouttiere);
  padding: var(--respir);
  background: var(--sauge);
  color: var(--blanc);
}

.formules-entete h2 {
  margin-top: 14px;
  max-width: 20ch;
  font-size: clamp(1.8rem, 2.9vw, 2.6rem);
  line-height: 1.1;
}

.formules-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(44px, 5.5vw, 76px);
  border-top: 1px solid rgba(255, 255, 255, .24);
}
.formule { padding: clamp(28px, 3.4vw, 44px) clamp(18px, 2.2vw, 34px) 0 0; }
.formule + .formule {
  padding-left: clamp(18px, 2.2vw, 34px);
  border-left: 1px solid rgba(255, 255, 255, .24);
}

.formule-titre {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.95vw, 1.7rem);
  line-height: 1.14;
}
.formule-note {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

/* ═══════════════════ QUADRILLE (sable, 2 × 2) ═══════════════════ */

.quadrille {
  margin: 0 var(--marge) var(--gouttiere);
  padding: var(--respir);
  background: var(--sable);
}

.quadrille-entete { text-align: center; }
.quadrille-entete h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.1;
}

.quadrille-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: clamp(40px, 5vw, 70px);
  border-top: 1px solid rgba(35, 23, 23, .18);
}
.quadrille-item {
  padding: clamp(30px, 3.6vw, 48px) clamp(24px, 3vw, 48px) clamp(30px, 3.6vw, 48px) 0;
  border-bottom: 1px solid rgba(35, 23, 23, .18);
}
.quadrille-item:nth-child(even) {
  padding-right: 0;
  padding-left: clamp(24px, 3vw, 48px);
  border-left: 1px solid rgba(35, 23, 23, .18);
}

.quadrille-titre {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.14;
}
.quadrille-note {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--taupe);
}

/* ═══════════════════ PAGE CONTACT ═══════════════════ */

.joindre {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 86px);
  margin: 0 var(--marge) var(--gouttiere);
  padding: var(--respir);
  background: var(--sable);
}

/* Une <dl> n'a pas de bloc natif : deux paragraphes dans un groupe font le
   même rendu et restent éditables. */
.coord-liste { display: grid; gap: 26px; margin-top: 34px; }
.coord-cle {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
}
.coord-valeur {
  margin-top: 7px;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  color: var(--espresso);
}
.coord-valeur a { border-bottom: 1px solid rgba(35, 23, 23, .3); }
.coord-valeur a:hover { border-bottom-color: var(--espresso); }

.coord-mot {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(35, 23, 23, .18);
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.64;
  color: var(--taupe);
}

/* Formulaire — ces classes sont celles que reprendra le gabarit
   Contact Form 7 à la phase 5, pour que le style tienne sans retouche. */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-champ { display: grid; gap: 7px; }
.form-large { grid-column: 1 / -1; }
.form-envoi { grid-column: 1 / -1; margin-top: 6px; }

.form-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
}

.form-saisie {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(35, 23, 23, .28);
  border-radius: 0;
  background: rgba(255, 255, 255, .55);
  color: var(--espresso);
  font: 400 16px/1.4 var(--sans);
}
.form-saisie:focus {
  outline: 0;
  border-color: var(--espresso);
  background: var(--blanc);
}
.form-zone { resize: vertical; min-height: 148px; }

/* Variante sombre : un bouton sable sur une carte sable serait invisible. */
.bouton-sombre,
.contact-boutons-sombre .wp-block-button__link {
  background: var(--espresso);
  color: var(--sable);
}
.bouton-sombre:hover,
.contact-boutons-sombre .wp-block-button__link:hover { background: #160e0e; }

/* ═══════════════════ LISTE D'ARTICLES ═══════════════════ */

.articles {
  margin: 0 var(--marge) var(--gouttiere);
  padding: var(--respir);
  background: var(--sable);
}

.articles-entete {
  max-width: 54ch;
  margin: 0 auto;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--taupe);
}

/* core/post-template sort un <ul> dont chaque <li> est la carte. */
.articles-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3.4vw, 48px) clamp(18px, 2.2vw, 30px);
  margin-top: clamp(44px, 5.5vw, 76px);
  padding: 0;
  list-style: none;
}
.articles-grille > li { margin: 0; }

.article-vignette {
  margin: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--taupe);
}
.article-vignette img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.58) sepia(.26) saturate(.72) contrast(1.05) brightness(.95);
}

/* Même typographie que les vignettes de l'accueil : titre serif, puis la
   date en petites capitales taupe, comme la fonction sous les portraits. */
.article-titre {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.75vw, 1.5rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--espresso);
}
.article-titre a { border-bottom: 1px solid transparent; }
.article-titre a:hover { border-bottom-color: rgba(35, 23, 23, .4); }

.article-date {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
}

.article-extrait,
.article-extrait p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--taupe);
}
.article-extrait { margin-top: 14px; }

/* core/query-pagination : numéros dans un conteneur, suivant à part. */
.pagination {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(44px, 5.5vw, 72px);
  padding-top: 28px;
  border-top: 1px solid rgba(35, 23, 23, .18);
  font-size: 15px;
  color: var(--taupe);
}
.pagination .wp-block-query-pagination-numbers { display: flex; gap: 20px; }
.pagination .page-numbers.current { color: var(--espresso); font-weight: 600; }
.pagination a:hover { color: var(--espresso); }
.pagination .wp-block-query-pagination-next,
.pagination .wp-block-query-pagination-previous {
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(35, 23, 23, .4);
}
.pagination .wp-block-query-pagination-next { margin-left: auto; }

/* ═══════════════════ ARTICLE ═══════════════════ */

/* L'en-tête d'article n'a pas de photo : le titre y est souvent long, et
   une photo décorative ne dirait rien de plus. */
.entete-article { height: auto; min-height: clamp(300px, 40vh, 420px); }
.entete-article .entete-texte { position: relative; bottom: auto; padding-block: clamp(90px, 11vw, 150px) clamp(34px, 5vw, 60px); }
.entete-article h1 { max-width: 24ch; }

.article-page {
  margin: 0 var(--marge) var(--gouttiere);
  padding: var(--respir);
  background: var(--sable);
}

/* Mesure de lecture : au-delà de 68 signes par ligne, l'œil perd la ligne
   suivante. C'est la seule contrainte de largeur du site. */
.article-corps {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--espresso);
}

.article-chapeau {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.4;
  color: var(--espresso);
}

/* Rythme vertical du corps d'article : la règle porte sur TOUT frère, pas
   seulement « p + p » — sinon le paragraphe qui suit une liste ou une
   citation vient se coller au précédent. blockGap valant 0, c'est ici que
   l'espacement du texte long se décide. */
.article-corps > * + * { margin-top: 1.15em; }

.article-corps h2 {
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  line-height: 1.16;
}
.article-corps > * + h2 { margin-top: 1.95em; }
.article-corps > h2 + * { margin-top: .7em; }

.article-corps h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
}
.article-corps > * + h3 { margin-top: 1.6em; }
.article-corps > h3 + * { margin-top: .6em; }

.article-corps ul,
.article-corps ol {
  display: grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}
.article-corps > * + :is(ul, ol) { margin-top: 1.25em; }
.article-corps li { position: relative; padding-left: 22px; }
.article-corps li::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: 10px; height: 1px;
  background: rgba(35, 23, 23, .45);
}

.article-corps blockquote {
  margin: 0;
  padding: 0 0 0 clamp(20px, 2.4vw, 34px);
  border-left: 2px solid rgba(35, 23, 23, .3);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.34;
}

.article-corps > * + :is(blockquote, figure) { margin-top: 1.85em; }
.article-corps > :is(blockquote, figure) + * { margin-top: 1.5em; }

.article-corps figure { margin: 0; }
.article-corps figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--taupe);
}

.article-corps a {
  border-bottom: 1px solid rgba(35, 23, 23, .35);
}
.article-corps a:hover { border-bottom-color: var(--espresso); }

.article-pied {
  max-width: 68ch;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(35, 23, 23, .18);
}
.article-pied-texte {
  margin-top: 12px;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.64;
  color: var(--taupe);
}
.article-pied-lien { margin-top: 14px; }
.article-pied-lien a {
  display: inline-block;
  padding-bottom: 2px;
  font-size: 15.5px;
  font-weight: 500;
  border-bottom: 1.5px solid rgba(35, 23, 23, .4);
}
.article-pied-lien a:hover { border-bottom-color: var(--espresso); }

/* Catégorie et date sur une ligne — core/post-terms puis core/post-date. */
.article-meta {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.article-meta .wp-block-post-date::before {
  content: "·";
  margin-right: 10px;
}

/* ═══════════════════ RECHERCHE ET 404 ═══════════════════ */

.recherche {
  max-width: 44ch;
  margin: clamp(32px, 4vw, 52px) auto 0;
}
.recherche .wp-block-search__inside-wrapper { display: flex; gap: 10px; }
.recherche .wp-block-search__input {
  flex: 1;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 0;
  background: rgba(255, 255, 255, .08);
  color: var(--blanc);
  font: 400 16px/1.4 var(--sans);
}
.recherche .wp-block-search__input::placeholder { color: rgba(255, 255, 255, .5); }
.recherche .wp-block-search__button {
  margin: 0;
  padding: 13px 22px;
  border: 0;
  border-radius: 0;
  background: var(--sable);
  color: var(--espresso);
  font: 600 15px/1.4 var(--sans);
  cursor: pointer;
}
.recherche .wp-block-search__button:hover { background: var(--blanc); }

.aucun-resultat {
  max-width: 54ch;
  margin: 0 auto;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--taupe);
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */

@media (max-width: 1080px) {
  .approche-haut { grid-template-columns: 1fr; gap: 20px; }
  .domaines { grid-template-columns: repeat(2, 1fr); }
  .domaine:nth-child(odd) { padding-left: 0; border-left: 0; }
  .domaine:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.13); }
  .projets { grid-template-columns: 1fr; }
  .projets-photo img { min-height: 300px; max-height: 420px; }

  .articles-grille { grid-template-columns: repeat(2, 1fr); }
  .formules-grille { grid-template-columns: 1fr; }
  .formule { padding-left: 0 !important; border-left: 0 !important; }
  .formule + .formule { border-top: 1px solid rgba(255, 255, 255, .13); }
  .joindre { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* Un hero de 82vh sur 375 px de large est si étroit que le recadrage
     « cover » perd le groupe et ne garde que la table. */
  .hero { height: clamp(440px, 62vh, 560px); }
  .hero-photo img { object-position: 38% 44%; }

  .barre { gap: 12px; padding-right: 6px; }
  .barre-contact-enveloppe { display: none; }
  .barre-menu { margin-left: auto; margin-right: 0; }
  .barre-menu .wp-block-navigation__responsive-container-open { display: block; }

  /* Panneau fermé : les conteneurs de core/navigation sont transparents en
     desktop, il faut au contraire les masquer ici. */
  .barre-menu .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  /* Panneau ouvert — core/navigation l'affiche blanc sur blanc si on ne
     force pas le fond ; sa feuille est imprimée après celle du thème. */
  .barre-menu .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    z-index: 20;
    top: calc(var(--marge) + var(--encart-barre));
    left: calc(var(--marge) + var(--encart-barre));
    right: calc(var(--marge) + var(--encart-barre));
    bottom: auto;
    display: block;
    padding: 14px 20px 6px;
    border-radius: 14px;
    background-color: rgba(35, 23, 23, .94) !important;
    border: 1px solid rgba(255, 255, 255, .17);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--blanc) !important;
  }
  .is-menu-open .wp-block-navigation__container {
    display: grid;
    gap: 0;
    font-size: 16px;
  }
  .is-menu-open .wp-block-navigation-item__content { padding: 13px 0; border-bottom: 0; }
  .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item {
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute; top: 12px; right: 16px;
    width: 32px; height: 32px;
    background: none; border: 0; cursor: pointer;
  }
  .is-menu-open .wp-block-navigation__responsive-container-close::before,
  .is-menu-open .wp-block-navigation__responsive-container-close::after {
    content: ""; position: absolute; left: 7px; top: 15px;
    width: 18px; height: 1.5px; background: var(--blanc);
  }
  .is-menu-open .wp-block-navigation__responsive-container-close::before { transform: rotate(45deg); }
  .is-menu-open .wp-block-navigation__responsive-container-close::after { transform: rotate(-45deg); }

  .lien-contact-mobile { display: list-item; }

  .etapes-grille { grid-template-columns: 1fr; gap: 40px; }
  .vignette { aspect-ratio: 16 / 11; }

  .articles-grille { grid-template-columns: 1fr; gap: 40px; }
  .pagination { flex-wrap: wrap; }
  .pagination .wp-block-query-pagination-next { margin-left: 0; }
  .article-corps { font-size: 16.5px; }

  .colonnes-grille { grid-template-columns: 1fr; gap: 0; }
  .colonne + .colonne { border-top: 1px solid rgba(35, 23, 23, .18); }

  .rangee { grid-template-columns: 1fr; gap: 10px; }

  .quadrille-grille { grid-template-columns: 1fr; }
  .quadrille-item,
  .quadrille-item:nth-child(even) {
    padding-left: 0; padding-right: 0; border-left: 0;
  }

  .form { grid-template-columns: 1fr; }
  .domaines { grid-template-columns: 1fr; }
  .domaine { padding-left: 0 !important; border-left: 0 !important; }
  .domaine + .domaine { border-top: 1px solid rgba(255, 255, 255, .13); }
  .pied { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ADAPTATIONS GUTENBERG — ajoutées au thème, absentes de la maquette.
   ═══════════════════════════════════════════════════════════════════════ */

/* Filet de sécurité à spécificité NULLE. La neutralisation se fait d'abord
   dans theme.json (blockGap "0px") ; écrite en « .wp-block-group > * », elle
   écraserait toutes les marges des composants. */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }

/* Le conteneur de contenu ne doit rien contraindre : chaque carte porte
   déjà sa propre marge. */
.wp-block-post-content { max-width: none; }

/* WordPress annule la marge haute du premier enfant d'un groupe en flux et
   la marge basse du dernier :
       :where(.wp-block-group.is-layout-flow) > :first-child { margin-block-start: 0 }
   Même spécificité que nos règles de carte, mais imprimée APRÈS la feuille du
   thème : à égalité, le bloc gagne. Relevé par la porte 4 — la carte de tête
   perdait son encart haut, celle de pied son écart avec le pied de page.
   On repasse devant en qualifiant le parent.

   Le contenu d'une page vit dans .wp-block-post-content, celui d'un gabarit
   directement dans main : il faut viser les deux. L'enveloppe elle-même est
   remise à zéro, sinon les marges s'additionnent et l'encart double. */
main.wp-block-group > .wp-block-post-content { margin-block: 0; }

main.wp-block-group > :first-child,
.wp-block-post-content > :first-child { margin-block-start: var(--marge); }

main.wp-block-group > :last-child,
.wp-block-post-content > :last-child { margin-block-end: var(--gouttiere); }

/* Contact Form 7 — le <span> d'enrobage de chaque champ garde l'espace sous
   la ligne de base : +5 à 13 px par champ si on ne le passe pas en block. */
.wpcf7-form-control-wrap { display: block; }
.wpcf7 .form-saisie { width: 100%; }
.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #8a2f2f;
}
.wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 18px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(35, 23, 23, .3) !important;
  border-radius: 0;
  font-size: 15px;
}
.wpcf7-spinner { display: none; }

/* La barre d'administration décale le document de 32 px : la barre flottante
   est ancrée au body, elle suivrait sans cela l'en-tête de WordPress. */
.admin-bar .barre { top: calc(var(--marge) + var(--encart-barre) + 32px); }
@media (max-width: 782px) {
  .admin-bar .barre { top: calc(var(--marge) + var(--encart-barre) + 46px); }
}