/*
Theme Name: Atelier Bercail
Theme URI: https://atelierbercail.fr
Author: Atelier Bercail
Description: Thème bloc sur mesure d'Atelier Bercail — tiny houses et habitats légers dans les Vosges. Construit à partir de la maquette validée ; chaque section est éditable dans Gutenberg.
Version: 1.0.14
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelier-bercail
Tags: block-theme, full-site-editing
*/

/* ==========================================================================
   1. CSS de la maquette (site/styles.css), boutons ramenés sur le lien natif
   ========================================================================== */
/* ==========================================================================
   Atelier Bercail — maquette (phase 2, v2)
   Registre : référence « Asgard » transposée en olive (validé client),
   rappels terracotta et échelle typographique agrandie (demandés par le client).
   ========================================================================== */

:root {
  --encre: #1C1F12;
  --texte: #535747;
  --discret: #85887A;
  --olive: #606830;
  --olive-profond: #2F3418;
  --creme-sauge: #EEEEDC;
  --fond: #FAF9F4;
  --fond-2: #F4F3EA;
  --blanc: #FFFFFF;
  --ligne: rgba(28, 31, 18, 0.09);
  --ligne-forte: rgba(28, 31, 18, 0.16);
  --terracotta: #CA693A;        /* logo, pictos, flèches, astérisque */
  --terracotta-fonce: #B5592D;  /* fond des boutons : contraste AA avec le blanc */
  --terracotta-sombre: #9C4A24; /* survol */

  --police: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --courbe: cubic-bezier(.2, .7, .2, 1);

  --largeur: 1240px;
  --gouttiere: max(16px, calc((100% - var(--largeur)) / 2));
  --cadre: max(8px, calc((100% - var(--largeur)) / 2 - 28px));
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--encre); font-weight: 600; }
h1, h2, h3, h4 { margin: 0; color: var(--encre); font-weight: 500; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.enveloppe {
  width: 100%;
  padding-inline: var(--gouttiere);
  margin-inline: auto;
}

/* Lignes de cadre verticales, comme sur la référence */
.lignes, .lignes-colonne {
  background-image:
    linear-gradient(var(--ligne), var(--ligne)),
    linear-gradient(var(--ligne), var(--ligne));
  background-size: 1px 100%, 1px 100%;
  background-position: var(--cadre) 0, calc(100% - var(--cadre)) 0;
  background-repeat: no-repeat;
}
/* Sections numérotées : une ligne de plus entre l'étiquette et le contenu */
.lignes-colonne {
  background-image:
    linear-gradient(var(--ligne), var(--ligne)),
    linear-gradient(var(--ligne), var(--ligne)),
    linear-gradient(var(--ligne), var(--ligne));
  background-size: 1px 100%, 1px 100%, 1px 100%;
  background-position: var(--cadre) 0, calc(var(--gouttiere) + 410px) 0, calc(100% - var(--cadre)) 0;
}

/* Petites capitales espacées */
.capitales {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.lien-fleche > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--encre);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap .3s var(--courbe), border-color .3s ease;
}
.lien-fleche > .wp-block-button__link::after { width: 15px; height: 15px; color: var(--terracotta); transition: translate .3s var(--courbe); }
.lien-fleche > .wp-block-button__link:hover { gap: 16px; border-color: var(--terracotta); }

.bouton > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 28px;
  background: var(--terracotta-fonce);
  color: var(--blanc);
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background .25s ease;
}
.bouton > .wp-block-button__link::after { width: 15px; height: 15px; transition: translate .3s var(--courbe); }
.bouton > .wp-block-button__link:hover { background: var(--terracotta-sombre); }
.bouton > .wp-block-button__link:hover::after { translate: 4px 0; }

/* Valeur à fournir par le client */
.a-completer {
  text-decoration: underline dotted rgba(202, 105, 58, .7);
  text-underline-offset: .14em;
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   En-tête
   ========================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond);
  transition: box-shadow .3s ease;
}
.entete.est-defile { box-shadow: 0 1px 0 var(--ligne-forte), 0 16px 32px -28px rgba(28, 31, 18, .35); }
.entete .enveloppe {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: 92px;
}
.logo img { height: 50px; width: auto; }
.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--encre);
}
.nav li { display: flex; align-items: center; gap: 14px; }
.nav li + li::before { content: "/"; color: var(--discret); }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.nav a:hover { border-color: var(--terracotta); }
.nav a[aria-current] { border-color: currentColor; }
.entete .bouton > .wp-block-button__link { height: 46px; padding: 0 22px; }
.burger { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 46px;
}
.hero::before { /* grande spirale discrète, l'équivalent de l'arc de la référence */
  content: "";
  position: absolute;
  width: 980px;
  height: 980px;
  right: -260px;
  top: -330px;
  background: url(assets/img/spirale-fond.svg) center / contain no-repeat;
  opacity: .2;
  pointer-events: none;
}
.hero .enveloppe { position: relative; }

.titre-hero {
  font-size: clamp(50px, 8.6vw, 124px);
  line-height: .98;
  letter-spacing: -0.048em;
  font-weight: 500;
  hyphens: none;
}
.titre-hero .ligne { display: block; white-space: nowrap; }
.titre-hero .ligne-2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: .16em;
  white-space: normal;
}

.badge {
  position: relative;
  display: inline-block;
  width: .82em;
  height: .82em;
  flex: none;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 0 0 1px var(--ligne);
  vertical-align: middle;
  translate: 0 .04em;
}
.badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: tourne 22s linear infinite;
}
.badge text {
  font-family: var(--police);
  font-size: 9.6px;
  font-weight: 600;
  letter-spacing: .14em;
  fill: var(--encre);
}
.badge img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  translate: -50% -50%;
}
@keyframes tourne { to { rotate: 360deg; } }

.legende-hero {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-left: .1em;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--encre);
  max-width: 380px;
}
.legende-hero .asterisque {
  font-size: 42px;
  line-height: 1;
  font-weight: 400;
  color: var(--terracotta);
  translate: 0 4px;
}

.defiler {
  position: absolute;
  right: calc(var(--cadre) - 7px);
  top: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--encre);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: var(--fond);
  padding: 10px 0;
}
.defiler span { writing-mode: vertical-rl; rotate: 180deg; }
.defiler svg { width: 12px; height: 12px; color: var(--terracotta); animation: descend 2.4s var(--courbe) infinite; }
@keyframes descend { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 4px; } }

/* Sélecteur de projet (la « recherche » de la référence) */
.projet {
  position: relative;
  margin-top: 64px;
  width: min(1086px, 100%);
}
.onglets { display: flex; }
.onglet {
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 16px 30px;
  color: var(--discret);
  background: rgba(28, 31, 18, .035);
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.onglet:hover { color: var(--encre); }
.onglet.est-actif { background: var(--blanc); color: var(--encre); }
.barre {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: var(--blanc);
  box-shadow: 0 30px 60px -30px rgba(28, 31, 18, .22);
  min-height: 82px;
}
.barre > svg {
  width: 20px;
  height: 20px;
  margin: 0 18px 0 30px;
  color: var(--terracotta);
}
.variante { display: none; font-size: 14px; color: var(--discret); }
.variante.est-active { display: block; animation: apparait .45s var(--courbe); }
@keyframes apparait { from { opacity: 0; translate: 0 6px; } }
.barre .bouton > .wp-block-button__link { align-self: stretch; height: auto; min-width: 236px; }

/* Bande photos */
.photos-hero {
  position: relative;
  margin-top: 64px;
}
.photos-hero::before { /* bande crème sauge qui commence sous le haut des photos */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  bottom: 0;
  background: var(--creme-sauge);
}
.photos-hero .grille {
  position: relative;
  display: grid;
  grid-template-columns: 848px 1fr;
  gap: 30px;
  padding-left: var(--cadre);
  padding-right: max(0px, calc(var(--cadre) - 16px));
}
.photos-hero figure { margin: 0; position: relative; overflow: hidden; }
.photos-hero img { width: 100%; height: 498px; object-fit: cover; }
.photos-hero .photo-1 img { object-position: 50% 58%; }
.photos-hero .photo-1 img.cadrage-haut { object-position: 30% 30%; }
.consentement a { text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: .18em; }
.photos-hero .photo-2 { margin-top: -6px; }
.photos-hero .photo-2 img { height: 504px; object-position: 50% 30%; }
.carre-fleche > .wp-block-button__link {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  background: var(--blanc);
  color: var(--terracotta);
  transition: background .25s ease, color .25s ease;
}
.carre-fleche > .wp-block-button__link:hover { background: var(--terracotta-fonce); color: var(--blanc); }
.carre-fleche > .wp-block-button__link::after { width: 20px; height: 20px; }

/* ==========================================================================
   Sections numérotées
   ========================================================================== */

.section { padding-block: 150px; }
.section-blanche { background-color: var(--blanc); }
.section-fond-2 { background-color: var(--fond-2); }

.grille-section {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
}
.repere .numero {
  display: block;
  font-size: 66px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--encre);
  margin-bottom: 16px;
}
.repere .etiquette {
  display: block;
  max-width: 310px;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--encre);
}
.titre-section {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.028em;
  font-weight: 400;
  text-wrap: balance;
}

/* 01 — Qui sommes-nous */
.apropos .titre-section { max-width: 860px; margin-bottom: 64px; }
.apropos .texte { max-width: 760px; }
.apropos .lien-fleche > .wp-block-button__link { margin-top: 30px; }

/* Bande chiffres */
.chiffres {
  background: var(--creme-sauge);
  padding-block: 96px;
}
.chiffres ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.chiffres strong {
  display: block;
  font-size: clamp(46px, 4.7vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 400;
  color: var(--olive-profond);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.chiffres span { display: block; max-width: 220px; margin-inline: auto; font-size: 15px; line-height: 1.45; color: var(--encre); }

/* Partenaires */
.partenaires { background-color: var(--fond); padding-block: 72px; }
.partenaires .enveloppe {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  align-items: center;
}
.partenaires .capitales { margin: 0; color: var(--encre); font-size: 12px; }
.partenaires ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.partenaires img {
  height: 58px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.1);
  opacity: .62;
  transition: filter .35s ease, opacity .35s ease;
}
.partenaires li:hover img { filter: none; opacity: 1; }

/* 02 — Nos tiny houses */
.realisations .grille-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.realisations .repere-bas {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.realisations .titre-section { max-width: 380px; }

.carte {
  position: relative;
  background: var(--blanc);
  color: var(--encre);
  display: flex;
  flex-direction: column;
}
.carte .entete-carte { padding: 28px 28px 0; }
.pastilles { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 12px; font-weight: 500; }
.pastille {
  display: inline-block;
  border: 1px solid var(--encre);
  border-radius: 999px;
  padding: 2px 11px;
}
.pastille-pleine { background: var(--encre); color: var(--blanc); }
.carte h3 {
  font-size: 19px;
  line-height: 1.38;
  letter-spacing: -0.012em;
  font-weight: 500;
  max-width: 360px;
}
.carte-large {
  grid-column: span 2;
  min-height: 500px;
  overflow: hidden;
}
.carte-large h3 { max-width: 300px; }
.carte-large figure {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 80%;
  margin: 0;
}
.carte-large img, .carte-haute img { width: 100%; height: 100%; object-fit: cover; }
.carte-large img { object-position: 30% 35%; }
.carte-haute { min-height: 560px; }
.carte-haute figure { margin: auto 0 0; height: 320px; }
.carte figure { overflow: hidden; }
.carte .legende-photo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blanc);
  background: rgba(28, 31, 18, .55);
  padding: 3px 8px;
}

.colonne-droite { display: flex; flex-direction: column; gap: 34px; }
.categories { padding: 28px; }
.categories .capitales { font-size: 10px; margin-bottom: 14px; display: block; }
.categories ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.35;
}
.categories li { border-top: 1px solid var(--ligne-forte); }
.categories li:nth-child(-n+2) { border-top-color: var(--encre); }
.categories a { display: block; padding: 12px 0; transition: color .2s ease; }
.categories a:hover { color: var(--terracotta-fonce); }
.carte-cta {
  flex: 1;
  background: var(--olive);
  color: var(--blanc);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 220px;
  transition: background .3s ease;
}
.carte-cta:hover { background: var(--olive-profond); }
.carte-cta p { font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; color: var(--blanc); margin: 0; }
.carte-cta .capitales { display: inline-flex; align-items: center; gap: 10px; }
.carte-cta svg { width: 15px; height: 15px; color: var(--terracotta); transition: translate .3s var(--courbe); }
.carte-cta:hover svg { translate: 5px 0; }

/* 03 — Offres */
.offres .titre-section { max-width: 800px; margin-bottom: 72px; }
.offres .grille-offres {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  align-items: stretch;
}
.offres .photo-atelier {
  position: relative;
  margin: -96px 0 0;
  overflow: hidden;
}
.offres .photo-atelier img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: 40% 50%; }
.offres .photo-atelier figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--blanc);
  color: var(--encre);
  padding: 16px 22px 0 0;
  font-size: 13px;
  font-weight: 500;
}
.liste-offres { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.offre {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--ligne-forte);
}
.offre .no { font-size: 14px; font-weight: 500; color: var(--discret); padding-top: 10px; }
.offre h3 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin-bottom: 12px;
  transition: translate .4s var(--courbe);
}
.offre:hover h3 { translate: 6px 0; }
.offre p { max-width: 560px; }
.offre .pour { margin-top: 14px; display: block; color: var(--olive); }
.offre .fleche-ronde > .wp-block-button__link {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--encre);
  border-radius: 50%;
  color: var(--terracotta);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.offre .fleche-ronde > .wp-block-button__link::after { width: 17px; height: 17px; }
.offre:hover .fleche-ronde > .wp-block-button__link { background: var(--terracotta-fonce); border-color: var(--terracotta-fonce); color: var(--blanc); }
.offre-phare {
  background: var(--olive-profond);
  color: rgba(255, 255, 255, .74);
  padding: 42px 34px;
  margin-top: -1px;
  border-bottom: 0;
}
.offre-phare h3, .offre-phare strong { color: var(--blanc); }
.offre-phare .no { color: rgba(255, 255, 255, .55); }
.offre-phare .pour { color: var(--creme-sauge); }
.offre-phare .fleche-ronde > .wp-block-button__link { border-color: rgba(255, 255, 255, .7); }

.publics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 96px;
}
.public {
  border-top: 1px solid var(--encre);
  padding-top: 28px;
  display: grid;
  gap: 18px;
  align-content: start;
}
.public h3 { font-size: 22px; letter-spacing: -0.015em; }
.public ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.public li { border: 1px solid var(--ligne-forte); border-radius: 999px; padding: 4px 14px; font-size: 13px; color: var(--encre); }
.public .lien-fleche > .wp-block-button__link { justify-self: start; margin-top: 8px; }

/* 04 — Guides */
.guides .entete-guides {
  display: grid;
  grid-template-columns: 400px 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 72px;
}
.guides .titre-section { max-width: 640px; }
.grille-guides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.guide { background: var(--blanc); display: flex; flex-direction: column; }
.guide figure { margin: 0; overflow: hidden; }
.guide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.guide .corps { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.guide h3 { font-size: 20px; line-height: 1.32; letter-spacing: -0.015em; }
.guide .meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--discret); }
.guide .meta .capitales { color: var(--encre); display: inline-flex; gap: 8px; align-items: center; }
.guide .meta svg { width: 14px; height: 14px; color: var(--terracotta); transition: translate .3s var(--courbe); }
.guide:hover .meta svg { translate: 5px 0; }

.grille-guides.deux { grid-template-columns: repeat(2, 1fr); }
.grille-guides > :nth-child(2) { --delai: .1s; }
.grille-guides > :nth-child(3) { --delai: .2s; }
.guide.valeur { padding: 28px 28px 32px; }
.guide.valeur .a-paraitre li { font-size: 15.5px; }
.faq a, .texte-section p a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: .18em; }

/* Zoom doux des photos au survol des cartes */
.carte figure img, .guide figure img { transition: scale .8s var(--courbe); }
.carte:hover figure img, .guide:hover figure img { scale: 1.04; }

/* 05 — Notre histoire */
.temoignages {
  position: relative;
  background: var(--olive-profond);
  color: var(--blanc);
  padding-block: 170px 190px;
}
.temoignages .numero, .temoignages .etiquette { color: var(--blanc); }
.diapos { display: grid; }
.diapo {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity .6s ease, translate .6s var(--courbe), visibility 0s .6s;
}
.diapo.est-active { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.diapo blockquote { margin: 0; }
.diapo blockquote p {
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.6;
  letter-spacing: -0.012em;
  color: var(--blanc);
  max-width: 840px;
}
.diapo-media { display: grid; grid-template-columns: 1fr 230px; gap: 56px; align-items: start; }
.diapo-media figure { margin: 6px 0 0; }
.diapo-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.auteur { display: flex; align-items: center; gap: 16px; margin-top: 44px; }
.auteur .avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--creme-sauge);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.auteur .avatar img { width: 34px; }
.auteur b { display: block; font-weight: 500; font-size: 15px; color: var(--blanc); }
.auteur span { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.auteur a { color: var(--creme-sauge); border-bottom: 1px solid currentColor; }
.fleches-temoignages {
  position: absolute;
  right: var(--cadre);
  bottom: 0;
  display: flex;
}
.fleches-temoignages button {
  width: 96px;
  height: 96px;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--terracotta-fonce);
  color: var(--blanc);
  transition: background .25s ease;
}
.fleches-temoignages button:hover { background: var(--terracotta-sombre); }
.fleches-temoignages button + button { background: var(--blanc); color: var(--encre); }
.fleches-temoignages button + button:hover { background: var(--creme-sauge); }
.fleches-temoignages svg { width: 20px; height: 20px; }

/* Bande CTA */
.bande-cta {
  position: relative;
  overflow: hidden;
  background: var(--olive) url(assets/img/spirale-cta.svg) right -120px center / 760px no-repeat;
  color: var(--blanc);
  padding-block: 96px;
}
.bande-cta::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  left: 34%;
  top: -300px;
  background: url(assets/img/spirale-cta.svg) center / contain no-repeat;
  rotate: 140deg;
  animation: tourne-lent 120s linear infinite;
}
@keyframes tourne-lent { from { rotate: 140deg; } to { rotate: 500deg; } }
.bande-cta .enveloppe {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.bande-cta h2 {
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.028em;
  font-weight: 400;
  color: var(--blanc);
  max-width: 900px;
}
.rond-cta > .wp-block-button__link {
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--terracotta);
  display: grid;
  place-items: center;
  transition: scale .35s var(--courbe), background .25s ease, color .25s ease;
}
.rond-cta > .wp-block-button__link:hover { scale: 1.06; background: var(--terracotta-fonce); color: var(--blanc); }
.rond-cta > .wp-block-button__link::after { width: 42px; height: 42px; transition: translate .35s var(--courbe); }
.rond-cta > .wp-block-button__link:hover::after { translate: 4px 0; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.pied {
  background: var(--creme-sauge);
  color: var(--encre);
  padding-top: 120px;
  font-size: 14px;
}
.pied .colonnes {
  display: grid;
  grid-template-columns: 400px repeat(4, 1fr);
  gap: 40px;
}
.pied .logo-pied { height: 86px; width: auto; margin-bottom: 28px; }
.pied .accroche { font-weight: 600; font-size: 15px; line-height: 1.5; max-width: 290px; margin-bottom: 18px; }
.pied address { font-style: normal; line-height: 1.75; color: var(--encre); }
.pied h4 { font-size: 14px; font-weight: 600; margin-bottom: 22px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied ul a, .pied address a { transition: color .2s ease; }
.pied ul a:hover, .pied address a:hover { color: var(--terracotta-fonce); }
.pied .bas {
  margin-top: 110px;
  border-top: 1px solid var(--ligne-forte);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 30px;
  font-size: 10px;
}
.pied .bas nav { display: flex; gap: 16px; }
.pied .bas nav span { color: var(--discret); }
.pied .bas > span a { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.pied .bas > span a:hover { border-color: var(--terracotta); }
.prose code { font-size: .88em; background: var(--fond-2); padding: 1px 6px; }

/* ==========================================================================
   Pages intérieures (phase 3) — mêmes composants, aucun nouveau registre
   ========================================================================== */

/* Fil d'Ariane */
.ariane ol { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; list-style: none; color: var(--discret); }
.ariane li { display: flex; align-items: center; gap: 12px; }
.ariane li + li::before { content: "/"; color: var(--discret); }
.ariane a { color: var(--encre); border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.ariane a:hover { border-color: var(--terracotta); }
.ariane [aria-current] { color: var(--discret); }

/* En-tête de page */
.page-hero { position: relative; overflow: hidden; padding-top: 40px; }
.page-hero::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 760px;
  right: -240px;
  top: -300px;
  background: url(assets/img/spirale-fond.svg) center / contain no-repeat;
  opacity: .2;
  pointer-events: none;
}
.page-hero .enveloppe { position: relative; }
.titre-page {
  margin-top: 56px;
  font-size: clamp(44px, 7vw, 100px);
  line-height: 1;
  letter-spacing: -0.046em;
  font-weight: 500;
  max-width: 1120px;
  text-wrap: balance;
  hyphens: none;
}
.intro-page {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 48px;
  padding-bottom: 96px;
}
.intro-page .asterisque { font-size: 42px; line-height: 1; color: var(--terracotta); }
.intro-page p { max-width: 640px; font-size: 20px; line-height: 1.55; letter-spacing: -0.01em; color: var(--encre); margin: 0; }
.page-hero .photos-hero { margin-top: 0; }
.page-hero.avec-photos .intro-page { padding-bottom: 72px; }

/* Raccourcis vers les offres */
.raccourcis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0 0 120px;
  list-style: none;
}
.raccourcis a {
  display: grid;
  gap: 40px;
  background: var(--blanc);
  padding: 26px 28px;
  color: var(--encre);
  transition: background .3s ease, color .3s ease;
}
.raccourcis .no { font-size: 14px; color: var(--discret); }
.raccourcis b { font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.raccourcis svg { width: 20px; height: 20px; flex: none; color: var(--terracotta); transition: translate .3s var(--courbe); }
.raccourcis a:hover { background: var(--olive-profond); color: var(--blanc); }
.raccourcis a:hover .no { color: rgba(255, 255, 255, .55); }
.raccourcis a:hover svg { translate: 0 4px; }

/* Texte courant d'une section */
.texte-section { max-width: 760px; }
.texte-section h3 { font-size: 22px; letter-spacing: -0.015em; margin: 40px 0 12px; }
.texte-section .titre-section { margin-bottom: 48px; }

/* Liste à coches */
.coches { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--ligne-forte); }
.coches li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ligne-forte);
  color: var(--encre);
}
.coches li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 4px;
  background: var(--terracotta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.offre-detail .pour { display: block; margin-top: 28px; color: var(--olive); }
.offre-detail .bouton > .wp-block-button__link { margin-top: 36px; }
.offre-detail-phare { background: var(--olive-profond); color: rgba(255, 255, 255, .76); }
.offre-detail-phare .numero, .offre-detail-phare .etiquette, .offre-detail-phare .titre-section,
.offre-detail-phare strong, .offre-detail-phare .coches li { color: var(--blanc); }
.offre-detail-phare .coches, .offre-detail-phare .coches li { border-color: rgba(255, 255, 255, .18); }
.offre-detail-phare .pour { color: var(--creme-sauge); }

/* Cartes de valeurs / d'usages */
.grille-valeurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 72px;
}
.grille-valeurs.trois { grid-template-columns: repeat(3, 1fr); }
.valeur {
  background: var(--blanc);
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 2px solid var(--encre);
}
.valeur .no { font-size: 14px; color: var(--terracotta-fonce); font-weight: 500; }
.valeur h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.valeur p { font-size: 15.5px; margin: 0; }
.valeur .lien-fleche > .wp-block-button__link { margin-top: auto; align-self: start; }
.section-blanche .valeur { background: var(--fond); }

/* Duo de cartes */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo-decale { margin: 72px 0 0 440px; }
.duo .valeur { padding: 36px 36px 40px; }
.duo .valeur h3 { font-size: 30px; }
.duo .valeur-sombre { background: var(--olive-profond); color: rgba(255, 255, 255, .76); border-top-color: var(--terracotta); }
.duo .valeur-sombre h3, .duo .valeur-sombre strong { color: var(--blanc); }
.duo .valeur-sombre .no { color: var(--creme-sauge); }
.duo .valeur-sombre .lien-fleche > .wp-block-button__link { color: var(--blanc); }
.bientot p { font-size: clamp(22px, 2vw, 28px); }

/* Équipe */
.equipe-grille { display: grid; grid-template-columns: 400px 1fr; gap: 40px; align-items: start; }
.equipe-grille figure { margin: 0; overflow: hidden; }
.equipe-grille figure img { width: 100%; height: auto; }
.equipe-grille figcaption { margin-top: 14px; font-size: 14px; color: var(--encre); }
.savoir-faire { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--encre); }
.savoir-faire li { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--ligne-forte); }
.savoir-faire .no { font-size: 14px; color: var(--discret); padding-top: 6px; }
.savoir-faire h3 { font-size: 26px; letter-spacing: -0.025em; margin-bottom: 8px; }
.savoir-faire p { margin: 0; max-width: 560px; }
.equipe-grille .lien-fleche > .wp-block-button__link { margin-top: 36px; }

/* Étapes */
.etapes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--encre);
}
.etapes li { padding: 28px 24px 0 0; position: relative; }
.etapes li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--terracotta);
}
.etapes .no { display: block; font-size: 46px; line-height: 1; letter-spacing: -0.04em; color: var(--encre); margin-bottom: 18px; }
.etapes h3 { font-size: 20px; letter-spacing: -0.015em; margin-bottom: 8px; }
.etapes p { font-size: 15px; margin: 0; }

/* Bloc « bientôt » */
.bientot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  background: var(--blanc);
  padding: 56px;
  border-top: 2px solid var(--terracotta);
}
.bientot p { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -0.025em; color: var(--encre); margin: 0; max-width: 820px; }

/* Foire aux questions */
.faq { border-top: 1px solid var(--encre); }
.faq details { border-bottom: 1px solid var(--ligne-forte); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--encre);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 400;
  color: var(--terracotta);
  transition: rotate .3s var(--courbe), background .25s ease;
}
.faq details[open] summary::after { rotate: 45deg; background: var(--creme-sauge); }
.faq details > :not(summary) { max-width: 760px; padding-bottom: 24px; }

/* Index des guides */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 56px; padding: 0; list-style: none; }
.filtres a { display: inline-block; border: 1px solid var(--ligne-forte); border-radius: 999px; padding: 5px 16px; font-size: 13px; color: var(--encre); transition: border-color .2s ease, background .2s ease; }
.filtres a:hover, .filtres a[aria-current] { border-color: var(--encre); background: var(--blanc); }
.guide-une { display: grid; grid-template-columns: 1.35fr 1fr; background: var(--blanc); margin-bottom: 48px; }
.guide-une figure { margin: 0; overflow: hidden; }
.guide-une img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; transition: scale .8s var(--courbe); }
.guide-une:hover img { scale: 1.04; }
.guide-une .corps { padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.guide-une h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -0.03em; }
.guide-une .meta { margin-top: auto; display: flex; justify-content: space-between; font-size: 13px; color: var(--discret); }
.a-paraitre { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.a-paraitre li { display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--ligne-forte); color: var(--encre); font-size: 18px; letter-spacing: -0.01em; }
.a-paraitre li span + span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--discret); white-space: nowrap; padding-top: 4px; }

/* Article */
.page-hero-article .titre-page { font-size: clamp(38px, 5.2vw, 72px); max-width: 1000px; }
.meta-article { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 36px; padding-bottom: 64px; font-size: 14px; color: var(--discret); }
.meta-article b { color: var(--encre); font-weight: 500; }
.article-visuel { margin: 0; position: relative; }
.article-visuel::before { content: ""; position: absolute; left: 0; right: 0; top: 64px; bottom: 0; background: var(--creme-sauge); }
.article-visuel .grille { position: relative; padding-inline: var(--cadre); }
.article-visuel img { width: 100%; height: 520px; object-fit: cover; }
.article-visuel figcaption { position: relative; padding: 14px var(--gouttiere) 0; font-size: 12px; color: var(--discret); background: var(--creme-sauge); padding-bottom: 20px; }

.corps-article { display: grid; grid-template-columns: 400px 1fr; gap: 40px; align-items: start; }
.sommaire { position: sticky; top: 124px; }
.sommaire .capitales { display: block; color: var(--encre); margin-bottom: 18px; }
.sommaire ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); counter-reset: sommaire; max-width: 300px; }
.sommaire li { counter-increment: sommaire; border-bottom: 1px solid var(--ligne-forte); }
.sommaire a { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 12px 0; font-size: 14.5px; line-height: 1.4; color: var(--encre); transition: color .2s ease; }
.sommaire a::before { content: counter(sommaire, decimal-leading-zero); color: var(--discret); font-size: 12px; padding-top: 2px; }
.sommaire a:hover, .sommaire a.est-courant { color: var(--terracotta-fonce); }

.prose { max-width: 760px; font-size: 17px; line-height: 1.78; }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose .chapo { font-size: 22px; line-height: 1.5; letter-spacing: -0.012em; color: var(--encre); }
.prose > h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 500; margin-top: 2.2em; scroll-margin-top: 120px; }
.prose > h3 { font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; margin-top: 1.8em; }
.prose > h2 + *, .prose > h3 + * { margin-top: .6em; }
.prose > .faq { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--terracotta); }
.prose a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: .18em; }
.prose a:hover { color: var(--terracotta-fonce); }
.a-retenir { background: var(--creme-sauge); padding: 30px 34px; border-top: 2px solid var(--olive); }
.a-retenir .capitales { display: block; color: var(--olive); margin-bottom: 14px; }
.a-retenir ul { margin: 0; }
.encart-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--olive-profond);
  color: rgba(255, 255, 255, .78);
  padding: 30px 34px;
  margin-block: 2em;
}
.encart-cta p { margin: 0; font-size: 18px; line-height: 1.45; }
.encart-cta strong { color: var(--blanc); }
.encart-cta .bouton > .wp-block-button__link { white-space: nowrap; }
.prose a.bouton > .wp-block-button__link, .prose a.bouton > .wp-block-button__link:hover { color: var(--blanc); text-decoration: none; }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tableau th, .tableau td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--ligne-forte); vertical-align: top; }
.tableau thead th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre); font-weight: 600; border-bottom: 1px solid var(--encre); }
.tableau td:first-child { color: var(--encre); font-weight: 500; }
.sources { font-size: 14px; color: var(--discret); border-top: 1px solid var(--ligne-forte); padding-top: 24px; margin-top: 3em; }
.sources ul { padding-left: 1.1em; }
.avertissement { font-size: 14px; color: var(--discret); font-style: normal; }

/* Formulaire de contact */
.contact-grille { display: grid; grid-template-columns: 400px 1fr; gap: 40px; align-items: start; }
.coordonnees { display: grid; gap: 28px; position: sticky; top: 124px; }
.coordonnees .bloc { border-top: 1px solid var(--encre); padding-top: 18px; display: grid; gap: 6px; color: var(--encre); font-size: 17px; line-height: 1.5; }
.coordonnees .capitales { color: var(--discret); font-size: 11px; }
.coordonnees a { border-bottom: 1px solid transparent; justify-self: start; transition: border-color .2s ease; }
.coordonnees a:hover { border-color: var(--terracotta); }
.formulaire { background: var(--blanc); padding: 48px; display: grid; gap: 28px; }
.formulaire fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.formulaire legend, .formulaire label > span:first-child { font-size: 14px; font-weight: 600; color: var(--encre); margin-bottom: 10px; padding: 0; }
.formulaire label { display: grid; }
.formulaire .duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire select, .formulaire textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--ligne-forte);
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color .2s ease, background .2s ease;
}
.formulaire textarea { min-height: 150px; resize: vertical; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--encre); background: var(--blanc); }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label { display: block; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label span {
  display: inline-block;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--encre);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.choix input:checked + span { background: var(--olive-profond); border-color: var(--olive-profond); color: var(--blanc); }
.choix input:focus-visible + span { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.consentement { display: grid !important; grid-template-columns: 22px 1fr; gap: 12px; font-size: 14px; line-height: 1.5; align-items: start; }
.consentement input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--olive-profond); }
.formulaire .bouton > .wp-block-button__link { justify-self: start; }
.ensuite { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 1180px) {
  .intro-page, .corps-article, .contact-grille, .equipe-grille { grid-template-columns: 300px 1fr; }
  .grille-valeurs { grid-template-columns: 1fr 1fr; }
  .etapes { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .duo-decale { margin-left: 340px; }
}
@media (max-width: 980px) {
  .intro-page, .corps-article, .contact-grille, .equipe-grille { grid-template-columns: 1fr; gap: 24px; }
  .intro-page .asterisque { display: none; }
  .raccourcis { grid-template-columns: 1fr; padding-bottom: 80px; }
  .duo, .grille-valeurs.trois { grid-template-columns: 1fr; }
  .duo-decale { margin: 48px 0 0; }
  .sommaire, .coordonnees { position: static; }
  .guide-une { grid-template-columns: 1fr; }
  .guide-une img { min-height: 0; aspect-ratio: 16 / 10; }
  .bientot { grid-template-columns: 1fr; padding: 40px; }
  .ensuite { grid-template-columns: 1fr; }
  .article-visuel img { height: 380px; }
}
@media (max-width: 640px) {
  .titre-page { margin-top: 36px; }
  .intro-page { margin-top: 28px; padding-bottom: 64px; }
  .intro-page p { font-size: 18px; }
  .grille-valeurs, .etapes { grid-template-columns: 1fr; }
  .formulaire { padding: 28px 20px; }
  .formulaire .duo-champs { grid-template-columns: 1fr; }
  .encart-cta { grid-template-columns: 1fr; padding: 26px 22px; }
  .encart-cta .bouton > .wp-block-button__link { white-space: normal; }
  .prose { font-size: 16.5px; }
  .prose .chapo { font-size: 19px; }
  .tableau { font-size: 14px; display: block; overflow-x: auto; }
  .article-visuel .grille { padding-inline: 0; }
  .article-visuel img { height: 260px; }
  .savoir-faire li { grid-template-columns: 1fr; gap: 6px; }
  .bientot { padding: 28px 22px; }
  .faq summary { font-size: 18px; }
}

/* ==========================================================================
   Animations — discrètes, activées par app.js (classe .anim sur <html>),
   jamais sans JavaScript et jamais avec « réduire les animations ».
   ========================================================================== */

.anim .revele {
  opacity: 0;
  translate: 0 32px;
  transition: opacity 1s var(--courbe), translate 1s var(--courbe);
  transition-delay: var(--delai, 0s);
}
.anim .revele.est-visible { opacity: 1; translate: 0 0; }

.anim .revele-image { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--courbe) var(--delai, 0s); }
.anim .revele-image > img { scale: 1.1; transition: scale 1.8s var(--courbe) var(--delai, 0s); }
.anim .revele-image.est-visible { clip-path: inset(0 0 0 0); }
.anim .revele-image.est-visible > img { scale: 1; }

.anim .titre-hero .ligne { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.anim .titre-hero .ligne > span,
.anim .titre-hero .ligne-1 > .mot {
  display: inline-block;
  translate: 0 105%;
  transition: translate 1.1s var(--courbe);
  transition-delay: var(--delai, 0s);
}
.anim .titre-hero.est-visible .ligne > span,
.anim .titre-hero.est-visible .ligne-1 > .mot { translate: 0 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .nav { gap: 8px; }
  .nav li { gap: 8px; }
  .grille-section, .offres .grille-offres, .partenaires .enveloppe { grid-template-columns: 300px 1fr; }
  .partenaires ul { gap: 28px; }
  .partenaires img { height: 48px; max-width: 150px; }
  .lignes-colonne { background-position: var(--cadre) 0, calc(var(--gouttiere) + 320px) 0, calc(100% - var(--cadre)) 0; }
  .guides .entete-guides { grid-template-columns: 300px 1fr; }
  .guides .entete-guides .lien-fleche > .wp-block-button__link { grid-column: 2; justify-self: start; }
  .pied .colonnes { grid-template-columns: 1fr 1fr 1fr; }
  .pied .colonnes > :first-child { grid-column: 1 / -1; }
  .photos-hero .grille { grid-template-columns: 1.7fr 1fr; }
  .chiffres ul { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
}

@media (max-width: 980px) {
  .entete .enveloppe { grid-template-columns: auto 1fr auto; height: 76px; }
  .logo img { height: 40px; }
  .nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--gouttiere) 24px;
    background: var(--fond);
    border-bottom: 1px solid var(--ligne-forte);
    display: none;
  }
  .nav li + li::before { content: none; }
  .nav a { display: block; padding: 12px 0; }
  .entete.menu-ouvert .nav { display: flex; }
  .burger {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--ligne-forte);
    background: transparent;
    color: var(--encre);
    cursor: pointer;
    justify-self: end;
  }
  .burger svg { width: 18px; height: 18px; }
  .entete .bouton > .wp-block-button__link { grid-column: 2; justify-self: end; }

  .section { padding-block: 96px; }
  .lignes-colonne { background-size: 1px 100%, 0 0, 1px 100%; }
  .grille-section, .offres .grille-offres, .guides .entete-guides, .partenaires .enveloppe { grid-template-columns: 1fr; gap: 28px; }
  .partenaires { padding-block: 56px; }
  .apropos .titre-section, .offres .titre-section { margin-bottom: 40px; }
  .realisations .grille-cartes { grid-template-columns: 1fr 1fr; gap: 24px; }
  .realisations .repere-bas { grid-column: 1 / -1; gap: 24px; }
  .carte-large { grid-column: 1 / -1; }
  .offres .photo-atelier { margin: 0; }
  .offres .photo-atelier img { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
  .publics { grid-template-columns: 1fr; gap: 40px; margin-top: 64px; }
  .grille-guides { grid-template-columns: 1fr 1fr; gap: 24px; }
  .guides .grille-guides:not(.deux) > .guide:last-child { display: none; }
  .defiler { display: none; }
  .diapo-media { grid-template-columns: 1fr 160px; gap: 32px; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .entete .bouton > .wp-block-button__link { padding: 0 14px; font-size: 10px; letter-spacing: .12em; }
  .hero { padding-top: 28px; }
  .hero::before { width: 520px; height: 520px; right: -220px; top: -140px; }
  .titre-hero { font-size: clamp(46px, 13.6vw, 64px); text-wrap: balance; }
  .titre-hero .ligne, .titre-hero .ligne-2 { display: inline; white-space: normal; }
  .anim .titre-hero .ligne { overflow: visible; }
  .titre-hero .badge { margin-inline: .06em; translate: 0 .1em; }
  .legende-hero { display: flex; margin: 22px 0 0; font-size: 16px; gap: 12px; }
  .legende-hero .asterisque { font-size: 30px; }
  .projet { margin-top: 40px; }
  .onglet { padding: 14px 18px; flex: 1; }
  .barre { grid-template-columns: auto 1fr; }
  .barre > svg { margin: 0 12px 0 18px; }
  .variante { padding: 20px 18px 20px 0; line-height: 1.5; }
  .barre .bouton > .wp-block-button__link { grid-column: 1 / -1; min-width: 0; height: 56px; }
  .photos-hero { margin-top: 44px; }
  .photos-hero::before { top: 40px; }
  .photos-hero .grille { grid-template-columns: 1fr; gap: 16px; padding-inline: 0; }
  .photos-hero img, .photos-hero .photo-2 img { height: 300px; }
  .photos-hero .photo-2 { margin: 0 0 0 var(--gouttiere); }
  .carre-fleche > .wp-block-button__link { width: 64px; height: 64px; }
  .section { padding-block: 80px; }
  .repere .numero { font-size: 52px; }
  .chiffres { padding-block: 64px; }
  .chiffres ul { grid-template-columns: 1fr 1fr; }
  .chiffres li:last-child { grid-column: 1 / -1; }
  .realisations .grille-cartes, .grille-guides, .grille-guides.deux { grid-template-columns: 1fr; }
  .guides .grille-guides:not(.deux) > .guide:last-child { display: flex; }
  .carte-large { min-height: 540px; }
  .carte-large figure { width: 100%; height: 52%; }
  .carte-haute { min-height: 0; }
  .carte-haute figure { height: 260px; margin-top: 26px; }
  .offre { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .offre .no { grid-column: 1 / -1; padding: 0; }
  .offre h3 { font-size: 24px; }
  .repere .etiquette { font-size: 17px; }
  .partenaires ul { flex-wrap: wrap; justify-content: flex-start; gap: 28px 36px; }
  .partenaires img { height: 44px; max-width: 140px; }
  .offre-phare { padding: 32px 22px; }
  .temoignages { padding-block: 96px 150px; }
  .diapo-media { grid-template-columns: 1fr; gap: 24px; }
  .diapo-media figure { order: -1; width: 160px; }
  .fleches-temoignages button { width: 64px; height: 64px; }
  .bande-cta .enveloppe { flex-direction: column; align-items: flex-start; }
  .rond-cta > .wp-block-button__link { width: 96px; height: 96px; }
  .pied { padding-top: 80px; }
  .pied .colonnes { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .pied .bas { flex-direction: column; margin-top: 64px; }
  .pied .bas nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   2. Couche WordPress — adapte le CSS de la maquette au DOM des blocs natifs.
   Rappels (references/blocs-gutenberg.md) :
   - le CSS d'un bloc est imprimé APRÈS cette feuille : à spécificité égale il gagne,
     d'où les sélecteurs qualifiés (.x .wp-block-image img) sur les images ;
   - un élément qui a changé de balise porte la classe t-<balise> d'origine.
   ========================================================================== */

:root {
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
  --fleche-gauche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M20 12H4M10 6l-6 6 6 6'/%3E%3C/svg%3E");
  --fleche-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");
  --maison: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M3 11.5 12 4l9 7.5M5.5 9.5V20h13V9.5M10 20v-5.5h4V20'/%3E%3C/svg%3E");
}

/* --- Remises à zéro ------------------------------------------------------- */
img { height: auto; }
figure.wp-block-image, .wp-block-post-featured-image, .wp-block-table { margin: 0; }
.wp-block-image img { vertical-align: bottom; }
.wp-element-caption { margin: 0; }
.wp-block-group { box-sizing: border-box; }
/* Les éléments devenus paragraphes (span, strong, b…) gardent leur absence de marge */
p[class^="t-"], p[class*=" t-"], p.onglet, p.legende-hero, p.diapo-prec, p.diapo-suiv,
p.lire, p.lecture, .meta p, .meta-article p { margin: 0; }
/* spécificité nulle : la marge du titre de la maquette (.titre-page) s'applique */
:where(.wp-block-post-title) { margin: 0; }
.wp-block-post-title a { color: inherit; display: inline; }
.wp-block-post-date { color: inherit; }

/* Groupes issus de listes : plus de puces à neutraliser, mais un retour à la grille.
   :where() garde la spécificité à zéro : une marge de la maquette (.savoir-faire…) l'emporte. */
:where(.t-ul, .t-ol) { margin: 0; padding: 0; }

/* --- Boutons natifs : le conteneur s'efface, le lien porte le composant ---- */
/* (le CSS du bloc pose .wp-block-buttons > .wp-block-button { display: inline-block } : on le dépasse) */
.wp-block-buttons:is(.boutons-bouton, .boutons-lien-fleche, .boutons-carre-fleche, .boutons-rond-cta, .boutons-fleche-ronde),
.wp-block-buttons > .wp-block-button:is(.bouton, .lien-fleche, .carre-fleche, .rond-cta, .fleche-ronde) { display: contents; }
/* Le CSS du bloc donne height:100% au lien : avec les conteneurs effacés, il s'étirerait sur toute la colonne */
.wp-block-button__link { display: inline-block; cursor: pointer; text-align: center; text-decoration: none; word-break: normal; box-sizing: border-box; }
.wp-block-image > a { display: block; }
.wp-block-button__link:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* Flèches : pseudo-éléments masqués, à la couleur du texte */
:is(.bouton, .lien-fleche, .carre-fleche, .rond-cta, .fleche-ronde) > .wp-block-button__link::after,
.carte-cta .capitales a::before, .guide .lire::after, .raccourcis .t-b a::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
          mask: var(--fleche) center / contain no-repeat;
  transition: translate .3s var(--courbe);
}
.lien-fleche > .wp-block-button__link::after { color: var(--terracotta); background: var(--terracotta); }
.carre-fleche > .wp-block-button__link::after { width: 20px; height: 20px; }
/* Vers une ancre de la page, la flèche de la maquette pointe vers le bas */
.carre-fleche > .wp-block-button__link[href^="#"]::after { rotate: 90deg; }
.rond-cta > .wp-block-button__link::after { width: 42px; height: 42px; transition: translate .35s var(--courbe); }
.fleche-ronde > .wp-block-button__link::after { width: 17px; height: 17px; }
.bouton > .wp-block-button__link:hover::after, .rond-cta > .wp-block-button__link:hover::after { translate: 4px 0; }

/* Boutons sans texte visible : le libellé reste lisible par les lecteurs d'écran */
:is(.carre-fleche, .rond-cta, .fleche-ronde) > .wp-block-button__link { font-size: 0; line-height: 0; color: var(--terracotta); }
.carre-fleche > .wp-block-button__link:hover, .rond-cta > .wp-block-button__link:hover { color: var(--blanc); }
.offre:hover .fleche-ronde > .wp-block-button__link { color: var(--blanc); }
.offre .fleche-ronde > .wp-block-button__link { color: var(--terracotta); }

/* Cartes cliquables : le lien du titre s'étend à toute la carte */
.lien-carte { position: relative; }
.lien-carte :is(h2, h3, .capitales, .t-b) a::after,
.lien-carte .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lien-carte .wp-block-post-terms a { position: relative; z-index: 2; }
.lien-carte h3 a, .lien-carte h2 a { color: inherit; }
.lien-carte:hover { cursor: pointer; }

/* --- En-tête ------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 20;
}
.entete .enveloppe > .wp-block-site-logo { line-height: 0; }
.entete .wp-block-site-logo img { height: 50px; width: auto; }
.entete .wp-block-navigation { justify-content: center; }
.entete .wp-block-navigation .wp-block-navigation__container { gap: 14px; justify-content: center; align-items: center; }
.entete .wp-block-navigation .wp-block-navigation-item { gap: 14px; }
.entete .wp-block-navigation .wp-block-navigation-item + .wp-block-navigation-item::before { content: "/"; color: var(--discret); }
.entete .wp-block-navigation-item__content {
  padding: 6px 0 !important;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
  color: var(--encre);
}
.entete .wp-block-navigation-item__content:hover { border-color: var(--terracotta); }
.entete .wp-block-navigation-item__content[aria-current] { border-color: currentColor; }
.entete .bouton > .wp-block-button__link { justify-self: end; }
.entete .bouton > .wp-block-button__link::after, .sans-fleche > .wp-block-button__link::after { content: none; }

/* Le panneau mobile du menu (le CSS du bloc est imprimé après : on qualifie) */
.wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--fond) !important;
  color: var(--encre) !important;
  padding: 24px var(--gouttiere) !important;
}
.wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0;
  align-items: flex-start;
}
/* Liens alignés à gauche sur toute la largeur, comme le menu déroulant de la maquette
   (le bloc centre le panneau : items-justified-center) */
.wp-block-navigation.nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation__container { width: 100%; }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation-item { width: 100%; justify-content: flex-start; align-items: flex-start; text-align: left; border-bottom: 1px solid var(--ligne-forte); }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation-item::before { content: none !important; }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation-item__content { display: block; padding: 16px 0 !important; font-size: 14px; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--encre); }

/* --- Hero d'accueil ------------------------------------------------------ */
.titre-hero-bloc { position: relative; --taille: clamp(50px, 8.6vw, 124px); }
.titre-hero { font-size: var(--taille); }
.titre-hero em { position: relative; font-style: normal; white-space: nowrap; }
/* Le badge tournant : un disque (le bernard-l'ermite) et son anneau de texte */
.titre-hero em::before {
  content: "";
  display: inline-block;
  width: .82em;
  height: .82em;
  margin-right: .16em;
  border-radius: 50%;
  vertical-align: middle;
  translate: 0 -.03em;
  background: var(--blanc) url(assets/img/picto-terracotta.png) center / 44% auto no-repeat;
  box-shadow: 0 0 0 1px var(--ligne);
}
.titre-hero em::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .82em;
  height: .82em;
  margin-top: -.44em;
  background: url(assets/img/anneau-badge.svg) center / contain no-repeat;
  animation: tourne 22s linear infinite;
  pointer-events: none;
}
.legende-hero {
  position: absolute;
  left: calc(var(--taille) * 5.19);
  top: calc(var(--taille) * .98 * 1.5);
  translate: 0 -50%;
  margin: 0;
}
.legende-hero::before {
  content: "✱";
  font-size: 42px;
  line-height: 1;
  font-weight: 400;
  color: var(--terracotta);
  translate: 0 4px;
}
/* « Défiler pour découvrir » : décoratif, en pseudo-éléments */
.hero > .enveloppe::after {
  content: "Défiler pour découvrir";
  position: absolute;
  right: calc(var(--cadre) - 7px);
  top: 330px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  rotate: 180deg;
  color: var(--encre);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: var(--fond);
  padding: 10px 0;
  line-height: 1;
}
.hero > .enveloppe::before {
  content: "";
  position: absolute;
  right: calc(var(--cadre) - 6px);
  top: 526px;
  width: 12px;
  height: 12px;
  background: var(--terracotta);
  -webkit-mask: var(--fleche-bas) center / contain no-repeat;
          mask: var(--fleche-bas) center / contain no-repeat;
  animation: descend 2.4s var(--courbe) infinite;
}

/* Sélecteur Particulier / Collectivité */
.onglet { margin: 0; user-select: none; }
.barre::before {
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 18px 0 30px;
  background: var(--terracotta);
  -webkit-mask: var(--maison) center / contain no-repeat;
          mask: var(--maison) center / contain no-repeat;
}
.barre .bouton > .wp-block-button__link { align-self: stretch; height: auto; min-width: 236px; }

/* Bande photos */
.photos-hero .t-figure { position: relative; overflow: hidden; }
.photos-hero .wp-block-image img { width: 100%; height: 498px; object-fit: cover; }
.photos-hero .photo-1 img { object-position: 50% 58%; }
.photos-hero .wp-block-image.cadrage-haut img { object-position: 30% 30%; }
.photos-hero .photo-2 .wp-block-image img { height: 504px; object-position: 50% 30%; }
.photos-hero .photo-2 .wp-block-image { overflow: hidden; }

/* --- Sections ------------------------------------------------------------ */
.repere p { margin: 0; }
.repere .numero { margin-bottom: 16px; }
.apropos .lien-fleche > .wp-block-button__link { margin-top: 30px; }
.texte-section > .revele > p + p, .apropos .texte p + p { margin-top: 1.1em; }

/* Chiffres */
.chiffres .t-ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; text-align: center; }
.chiffres .t-strong {
  display: block;
  font-size: clamp(46px, 4.7vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 400;
  color: var(--olive-profond);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.chiffres .t-span { display: block; max-width: 220px; margin-inline: auto; font-size: 15px; line-height: 1.45; color: var(--encre); }

/* Partenaires */
.partenaires .t-ul { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.partenaires .wp-block-image img {
  height: 58px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.1);
  opacity: .62;
  transition: filter .35s ease, opacity .35s ease;
}
.partenaires .t-li:hover img { filter: none; opacity: 1; }

/* Cartes « Nos tiny houses » */
.pastilles p { margin: 0; }
.carte-large .wp-block-image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 80%;
}
.carte .wp-block-image { overflow: hidden; }
.carte-large .wp-block-image img, .carte-haute .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-large .wp-block-image img { object-position: 30% 35%; }
.carte-haute > .wp-block-image { margin: auto 0 0; height: 320px; }
.categories .capitales { margin-bottom: 14px; }
.categories ul.wp-block-list { padding: 0; }
.carte-cta > p:first-child { margin: 0; }
.carte-cta .capitales { margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; line-height: 1.4; }
.carte-cta .capitales a { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.carte-cta .capitales a::before { order: 2; background: var(--terracotta); }
.carte-cta:hover .capitales a::before { translate: 5px 0; }

/* Offres */
.offres .photo-atelier { position: relative; }
.offres .photo-atelier.wp-block-image img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: 40% 50%; }
.offres .photo-atelier .wp-element-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  padding: 16px 22px 0 0;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
.offre > .no { margin: 0; }
.offre .pour { margin: 14px 0 0; }
.offre .fleche-ronde > .wp-block-button__link { box-sizing: border-box; }
.public ul.wp-block-list { padding: 0; }
.public .lien-fleche > .wp-block-button__link { justify-self: start; margin-top: 8px; }

/* Guides (boucles de requête) */
.wp-block-post-template.grille-guides, .wp-block-post-template.une { list-style: none; margin: 0; padding: 0; }
.grille-guides > li, .une > li { display: flex; }
.grille-guides > li > .guide { flex: 1; }
.guide .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.guide .wp-block-post-featured-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.guide .wp-block-post-title { font-size: 20px; line-height: 1.32; letter-spacing: -0.015em; font-weight: 500; color: var(--encre); }
.guide .meta .lire { color: var(--encre); display: inline-flex; gap: 8px; align-items: center; }
.guide .lire::after { width: 14px; height: 14px; background: var(--terracotta); }
.guide:hover .lire::after { translate: 5px 0; }
.guide .wp-block-post-terms { display: flex; gap: 8px; font-size: 12px; font-weight: 500; }
.wp-block-post-terms a {
  display: inline-block;
  border: 1px solid var(--encre);
  border-radius: 999px;
  padding: 2px 11px;
  color: var(--encre);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
}
.wp-block-post-terms .wp-block-post-terms__separator { display: none; }
.carte figure img, .guide .wp-block-post-featured-image img, .guide-une .wp-block-post-featured-image img { transition: scale .8s var(--courbe); }
.guide:hover .wp-block-post-featured-image img, .guide-une:hover .wp-block-post-featured-image img { scale: 1.04; }
.guides .entete-guides .lien-fleche > .wp-block-button__link { white-space: nowrap; }

/* Page des guides : la une, puis la grille où se glisse la carte « À paraître » */
.une > li > .guide-une { flex: 1; }
.guide-une .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.guide-une .wp-block-post-featured-image img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.guide-une .wp-block-post-terms.pastille-pleine a { background: var(--encre); color: var(--blanc); }
.guide-une .wp-block-post-title { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 500; }
/* L'extrait garde la marge basse du <p> de la maquette (la méta le suit) */
.guide-une .wp-block-post-excerpt p { margin: 0 0 1.1em; }
.guide-une .wp-block-post-excerpt__more-text { display: none; }
.guide-une .meta { margin-top: auto; display: flex; justify-content: space-between; font-size: 13px; color: var(--discret); }
.guide-une .meta .lire { color: var(--encre); display: inline-flex; gap: 8px; align-items: center; }
.guide-une .lire::after { content: ""; width: 14px; height: 14px; background: var(--terracotta); -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat; }
.avec-a-paraitre > .wp-block-query, .avec-a-paraitre .liste-guides { display: contents; }
.avec-a-paraitre .liste-guides > li { display: flex; }
.avec-a-paraitre .liste-guides > li > .guide { flex: 1; }
.filtres { list-style: none; }
.guide.valeur .no { margin: 0; }

/* Notre histoire */
.diapo .wp-block-quote { margin: 0; padding: 0; border: 0; }
.diapo .wp-block-quote p { margin: 0; }
.auteur .avatar .wp-block-image { margin: 0; }
.auteur .avatar img { width: 34px; height: auto; }
.auteur .t-b { display: block; font-weight: 500; font-size: 15px; color: var(--blanc); }
.auteur .t-span { font-size: 12.5px; line-height: 27.2px; color: rgba(255, 255, 255, .62); }
.diapo-media .wp-block-image { margin: 6px 0 0; }
.diapo-media .wp-block-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.fleches-temoignages p {
  width: 96px;
  height: 96px;
  margin: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--terracotta-fonce);
  color: var(--blanc);
  font-size: 0;
  transition: background .25s ease;
  user-select: none;
}
.fleches-temoignages p::after {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
          mask: var(--fleche) center / contain no-repeat;
}
.fleches-temoignages .diapo-prec::after { -webkit-mask-image: var(--fleche-gauche); mask-image: var(--fleche-gauche); }
.fleches-temoignages .diapo-prec:hover { background: var(--terracotta-sombre); }
.fleches-temoignages .diapo-suiv { background: var(--blanc); color: var(--encre); }
.fleches-temoignages .diapo-suiv:hover { background: var(--creme-sauge); }

/* Bande CTA */
.bande-cta .enveloppe > .wp-block-heading { margin: 0; }

/* --- Pied de page -------------------------------------------------------- */
.pied p { margin: 0; }
.pied .logo-pied { margin: 0 0 28px; }
.pied .logo-pied img { height: 86px; width: auto; }
.pied .accroche { font-weight: 600; font-size: 15px; line-height: 1.5; max-width: 290px; margin-bottom: 18px; color: var(--encre); }
.pied .adresse { line-height: 1.75; color: var(--encre); }
.pied .adresse a { transition: color .2s ease; }
.pied .adresse a:hover { color: var(--terracotta-fonce); }
.pied ul.wp-block-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied h4 { font-size: 14px; font-weight: 600; margin-bottom: 22px; color: var(--encre); }
/* Le <nav> flex de la maquette : liens et « / » deviennent des éléments flex, même gouttière,
   même retour à la ligne sur mobile */
.pied .bas .liens-legaux { display: flex; flex-wrap: wrap; gap: 16px; color: var(--discret); }
.pied .bas .liens-legaux a { color: var(--encre); }
.pied .bas .droits a { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.pied .bas .droits a:hover, .pied .bas .liens-legaux a:hover { border-color: var(--terracotta); color: var(--terracotta-fonce); }

/* --- Pages intérieures --------------------------------------------------- */
.intro-page::before {
  content: "✱";
  font-size: 42px;
  line-height: 1;
  color: var(--terracotta);
}
.intro-page > p, .intro-page > .wp-block-buttons { grid-column: 2; }
.intro-page > .wp-block-buttons .bouton > .wp-block-button__link { margin-top: 32px; }
.raccourcis .t-li { display: block; }
.raccourcis .lien-carte {
  display: grid;
  gap: 40px;
  background: var(--blanc);
  padding: 26px 28px;
  color: var(--encre);
  transition: background .3s ease, color .3s ease;
}
.raccourcis .no { margin: 0; font-size: 14px; color: var(--discret); }
.raccourcis .t-b { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; }
/* (la règle « .raccourcis a » de la maquette visait la carte : le lien du titre n'en garde rien) */
.raccourcis .t-b a { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 0; background: none; color: inherit; }
.raccourcis .t-b a::before { order: 2; width: 20px; height: 20px; background: var(--terracotta); -webkit-mask-image: var(--fleche-bas); mask-image: var(--fleche-bas); }
.raccourcis .lien-carte:hover { background: var(--olive-profond); color: var(--blanc); }
.raccourcis .lien-carte:hover .no { color: rgba(255, 255, 255, .55); }
.raccourcis .lien-carte:hover .t-b a::before { translate: 0 4px; }

.texte-section > .revele > .wp-block-heading { margin: 40px 0 12px; }
.coches.wp-block-list { padding: 0; }
.offre-detail .pour { margin: 28px 0 0; }
.offre-detail .bouton > .wp-block-button__link { margin-top: 36px; }
.valeur > p { margin: 0; }
.valeur .lien-fleche > .wp-block-button__link { margin-top: auto; align-self: start; }
.duo .valeur-sombre .lien-fleche > .wp-block-button__link { color: var(--blanc); }
.equipe-grille .wp-block-image { margin: 0; overflow: hidden; }
.equipe-grille .wp-block-image img { width: 100%; height: auto; }
.equipe-grille .wp-element-caption { margin-top: 14px; font-size: 14px; color: var(--encre); }
.equipe-grille .lien-fleche > .wp-block-button__link { margin-top: 36px; }
.savoir-faire .t-li { display: grid; grid-template-columns: 70px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--ligne-forte); }
.savoir-faire .no { margin: 0; font-size: 14px; color: var(--discret); padding-top: 6px; }
.savoir-faire h3 + p { margin: 0; }
.etapes .t-li { padding: 28px 24px 0 0; position: relative; }
.etapes .t-li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--terracotta);
}
.etapes .no { display: block; margin: 0 0 18px; font-size: 46px; line-height: 1; letter-spacing: -0.04em; color: var(--encre); }
.etapes h3 + p { margin: 0; }
.bientot p { margin: 0; }
.ensuite .t-li { margin: 0; }

/* FAQ : bloc Détails natif */
.faq .wp-block-details { border-bottom: 1px solid var(--ligne-forte); }
.faq .wp-block-details > :not(summary) { max-width: 760px; padding-bottom: 24px; margin: 0; }

/* Page des guides : filtres */
.filtres.wp-block-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 56px; padding: 0; list-style: none; }

/* Articles */
.meta-article { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 36px; padding-bottom: 64px; font-size: 14px; color: var(--discret); }
.meta-article strong { color: var(--encre); font-weight: 500; }
.meta-article .wp-block-post-terms { margin: 0; }
/* la pastille de la maquette est à la taille de la ligne méta, pas des cartes */
.meta-article .wp-block-post-terms a { font-size: 14px; }
.meta-article .maj { display: flex; gap: .3em; }
.meta-article .wp-block-post-date { color: var(--encre); font-weight: 500; }
.wp-block-post-featured-image.article-visuel { position: relative; margin: 0; padding-inline: var(--cadre); overflow: visible; }
.wp-block-post-featured-image.article-visuel::before { content: ""; position: absolute; left: 0; right: 0; top: 64px; bottom: 0; background: var(--creme-sauge); }
.wp-block-post-featured-image.article-visuel img { position: relative; width: 100%; height: 520px; object-fit: cover; }
.corps-article > .sommaire .capitales { margin: 0 0 18px; }
.sommaire ol.wp-block-list { padding: 0; }
.prose > .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
/* le « .prose > * + * » de la maquette, que la remise à zéro des figures annulait
   (spécificité de .wp-block-table seule : « .prose > h2 + * » garde la main sous un titre) */
:where(.prose > *) + .wp-block-table { margin-top: 1.1em; }
.wp-block-table.tableau td, .wp-block-table.tableau th { text-align: left; padding: 14px 16px 14px 0; border: 0; border-bottom: 1px solid var(--ligne-forte); vertical-align: top; }
.wp-block-table.tableau thead { border: 0; }
.wp-block-table.tableau thead th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre); font-weight: 600; border-bottom: 1px solid var(--encre); }
.wp-block-table.tableau td:first-child { color: var(--encre); font-weight: 500; }
.a-retenir ul.wp-block-list { margin: 0; }
.a-retenir .capitales { margin: 0 0 14px; }
.encart-cta > p { margin: 0; }
.encart-cta .bouton > .wp-block-button__link { white-space: nowrap; color: var(--blanc); text-decoration: none; }

/* Contact : coordonnées */
.coordonnees .bloc p { margin: 0; }
/* inline-block : son filet compte dans la hauteur de ligne, comme le lien en grille de la maquette */
.coordonnees .t-a a { display: inline-block; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.coordonnees .t-a a:hover { border-color: var(--terracotta); }

/* --- Formulaire WPForms au style de la maquette ------------------------- */
.formulaire .wpforms-container { margin: 0 !important; }
.formulaire .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.formulaire .wpforms-form .wpforms-field { padding: 0 !important; margin: 0 !important; grid-column: 1 / -1; }
.formulaire .wpforms-form .wpforms-field.demi { grid-column: auto; }
.formulaire .wpforms-form .wpforms-field-label,
.formulaire .wpforms-form legend.wpforms-field-label { font-size: 14px !important; font-weight: 600 !important; line-height: 1.7 !important; color: var(--encre) !important; margin: 0 0 10px !important; padding: 0 !important; }
.formulaire .wpforms-form .wpforms-required-label { color: var(--terracotta) !important; }
.formulaire .wpforms-form input[type="text"], .formulaire .wpforms-form input[type="email"], .formulaire .wpforms-form input[type="tel"],
.formulaire .wpforms-form select, .formulaire .wpforms-form textarea {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  font: inherit !important;
  font-size: 16px !important;
  color: var(--encre) !important;
  background: var(--fond) !important;
  border: 1px solid var(--ligne-forte) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
/* La liste déroulante garde la hauteur de ligne native de la maquette (52 px) ; à deux
   colonnes, la grille de la maquette l'étirait à la hauteur du champ voisin */
.formulaire .wpforms-form select { line-height: normal !important; }
/* (12,5 px : la marge fusionne avec les 10 px sous le libellé, l'étirement en ajoute 2,5) */
@media (min-width: 641px) { .formulaire .wpforms-form select { min-height: 54.5px !important; margin-top: 12.5px !important; } }
/* six lignes, comme le rows="6" de la maquette */
.formulaire .wpforms-form textarea { min-height: 193px !important; resize: vertical; }
.formulaire .wpforms-form :is(input, select, textarea):focus { border-color: var(--encre) !important; background: var(--blanc) !important; outline: none; }
/* Choix en pastilles */
.formulaire .wpforms-form .pastilles-choix ul { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.formulaire .wpforms-form .pastilles-choix li { margin: 0 !important; padding: 0 !important; position: relative; }
.formulaire .wpforms-form .pastilles-choix input { position: absolute !important; opacity: 0; pointer-events: none; }
.formulaire .wpforms-form .pastilles-choix label {
  display: inline-block !important;
  margin: 0 !important;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  padding: 8px 16px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--encre) !important;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.formulaire .wpforms-form .pastilles-choix li:has(input:checked) label,
.formulaire .wpforms-form .pastilles-choix .wpforms-selected label { background: var(--olive-profond); border-color: var(--olive-profond); color: var(--blanc) !important; }
.formulaire .wpforms-form .pastilles-choix input:focus-visible + label { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.formulaire .wpforms-form .wpforms-field-gdpr-checkbox label { font-size: 14px !important; font-weight: 400 !important; line-height: 1.5; color: var(--texte) !important; }
/* Consentement : la grille de la maquette (case 22 px + texte) passe du conteneur du champ,
   qui n'a qu'un fieldset pour enfant, à la ligne de choix WPForms */
.formulaire .wpforms-form .wpforms-field.consentement { display: block !important; }
.formulaire .wpforms-form .consentement ul { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.formulaire .wpforms-form .consentement li { display: grid !important; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin: 0 !important; padding: 0 !important; }
.formulaire .wpforms-form .consentement li label { margin: 0 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--texte) !important; }
.formulaire .wpforms-form .wpforms-submit-container { padding: 0 !important; margin-top: 28px !important; }
.formulaire .wpforms-form button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  height: 54px !important;
  padding: 0 28px !important;
  background: var(--terracotta-fonce) !important;
  color: var(--blanc) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background .25s ease;
}
.formulaire .wpforms-form button[type="submit"]:hover { background: var(--terracotta-sombre) !important; }
.formulaire .wpforms-form button[type="submit"]::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
          mask: var(--fleche) center / contain no-repeat;
}
.formulaire .wpforms-error, .formulaire label.wpforms-error { color: var(--terracotta-sombre) !important; font-size: 13px !important; }
.formulaire .wpforms-confirmation-container-full { background: var(--creme-sauge) !important; border: 0 !important; border-top: 2px solid var(--olive) !important; color: var(--encre) !important; padding: 24px 28px !important; }

/* --- Animations : délais en cascade (plus de styles en ligne) ------------- */
.grille-guides > li:nth-child(2) .guide, .grille-cartes > :nth-child(3), .chiffres .t-li:nth-child(2) { --delai: .08s; }
.grille-guides > li:nth-child(3) .guide, .grille-cartes > :nth-child(4), .chiffres .t-li:nth-child(3) { --delai: .16s; }
.chiffres .t-li:nth-child(4), .grille-cartes > :nth-child(5) { --delai: .24s; }
.chiffres .t-li:nth-child(5) { --delai: .32s; }
.photos-hero .photo-1 { --delai: .2s; }
.photos-hero .photo-2 { --delai: .35s; }
.hero .projet { --delai: .45s; }
.intro-page { --delai: .1s; }
/* Le grand titre monte d'un bloc */
.anim .titre-hero { opacity: 0; translate: 0 40px; transition: opacity 1.1s var(--courbe), translate 1.1s var(--courbe); }
.anim .titre-hero.est-visible { opacity: 1; translate: 0 0; }
.anim .titre-hero-bloc .legende-hero { opacity: 0; transition: opacity 1s var(--courbe) .4s; }
.anim .titre-hero.est-visible + .legende-hero { opacity: 1; }
.anim .revele-image > .wp-block-image > img, .anim .revele-image.wp-block-image > img,
.anim .revele-image.wp-block-post-featured-image > img { scale: 1.1; transition: scale 1.8s var(--courbe) var(--delai, 0s); }
.anim .revele-image.est-visible > .wp-block-image > img, .anim .revele-image.est-visible.wp-block-image > img,
.anim .revele-image.est-visible.wp-block-post-featured-image > img { scale: 1; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .partenaires .t-ul { gap: 28px; }
  .partenaires .wp-block-image img { height: 48px; max-width: 150px; }
  .chiffres .t-ul { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
}

@media (max-width: 980px) {
  .entete .enveloppe { grid-template-columns: auto 1fr auto; }
  .entete .wp-block-site-logo img { height: 40px; }
  /* La maquette masque sa liste .nav (son .burger l'ouvre) : le bloc Navigation, qui porte
     la classe « nav », reste affiché avec son bouton et son panneau natifs */
  .entete .wp-block-navigation.nav { order: 3; display: flex; position: static; justify-self: end; padding: 0; background: none; border: 0; }
  .entete .bouton > .wp-block-button__link { order: 2; justify-self: end; }
  /* Le menu passe en panneau dès 980 px (le bloc ne le fait qu'à 600 px) */
  .entete .wp-block-navigation__responsive-container-open {
    display: grid !important;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--ligne-forte);
  }
  .entete .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .guides .grille-guides:not(.deux) > li:last-child { display: none; }
  .hero > .enveloppe::after, .hero > .enveloppe::before { display: none; }
  .intro-page > p, .intro-page > .wp-block-buttons { grid-column: auto; }
  .intro-page::before { display: none; }
  .offres .photo-atelier { margin: 0; }
  .offres .photo-atelier.wp-block-image img { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
  .wp-block-post-featured-image.article-visuel img { height: 380px; }
  .guide-une .wp-block-post-featured-image img { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
}

@media (max-width: 640px) {
  /* Taille mobile de la maquette (--taille l'emporterait sur sa règle) ; le badge reprend
     l'espacement de son <span class="badge"> entre deux espaces */
  .titre-hero-bloc { --taille: clamp(46px, 13.6vw, 64px); }
  /* tableaux des guides en 14 px, comme .tableau de la maquette (la règle desktop vise la table) */
  .prose > .wp-block-table table { font-size: 14px; }
  /* une colonne : le troisième guide, masqué en tablette, revient */
  .guides .grille-guides:not(.deux) > li:last-child { display: flex; }
  .titre-hero br { display: none; }
  .titre-hero em::before { margin: 0 .23em 0 .06em; }
  p.legende-hero { position: static; translate: none; display: flex; margin: 22px 0 0; }
  .legende-hero::before { font-size: 30px; }
  .barre::before { margin: 0 12px 0 18px; }
  .barre .bouton > .wp-block-button__link { grid-column: 1 / -1; min-width: 0; height: 56px; }
  .photos-hero .wp-block-image img, .photos-hero .photo-2 .wp-block-image img { height: 300px; }
  .chiffres .t-ul { grid-template-columns: 1fr 1fr; }
  .chiffres .t-li:last-child { grid-column: 1 / -1; }
  .partenaires .t-ul { flex-wrap: wrap; justify-content: flex-start; gap: 28px 36px; }
  .partenaires .wp-block-image img { height: 44px; max-width: 140px; }
  .carte-large .wp-block-image { width: 100%; height: 52%; }
  .carte-haute > .wp-block-image { height: 260px; margin-top: 26px; }
  .diapo-media .wp-block-image { order: -1; width: 160px; }
  .fleches-temoignages p { width: 64px; height: 64px; }
  .savoir-faire .t-li { grid-template-columns: 1fr; gap: 6px; }
  .wp-block-post-featured-image.article-visuel { padding-inline: 0; }
  .wp-block-post-featured-image.article-visuel img { height: 260px; }
  .formulaire .wpforms-form .wpforms-field-container { grid-template-columns: 1fr; }
  /* dans une paire de la maquette (.duo-champs), 20 px entre les deux champs au lieu de 28 */
  .formulaire .wpforms-form .wpforms-field.demi-suite { margin-top: -8px !important; }
  .encart-cta .bouton > .wp-block-button__link { white-space: normal; }
}