/*
Theme Name: Diane Immobilier
Theme URI: https://immobilier-diane.fr
Author: Diane Immobilier
Description: Thème bloc sur mesure de Diane Immobilier, issu de la maquette validée (méthode Claude to WordPress). Tout le contenu est en blocs natifs, modifiable dans l'éditeur.
Version: 1.0.5
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: diane-immobilier
Tags: block-theme, full-site-editing, one-column
*/

/* ============================================================
   Diane Immobilier — maquette (phase 2)
   Registre relevé sur la référence : une grotesque + une signature,
   prune dominant, pétrole discret, fonds blanc cassé / blanc alternés.
   ============================================================ */

:root {
  --prune: #6A0461;
  --prune-fonce: #55034E;
  --petrole: #409095;
  --encre: #001516;
  --ivoire: #F6F7EF;
  --blanc: #FAFAFA;
  --texte: #1C1F1E;
  --gris: #6B706D;
  --gris-clair: #BFC3BF;
  --ligne: #E3E5E0;
  --carte: #FDFDFB;

  --grotesque: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --signature: "Allison", cursive;

  --gouttiere: 72px;
  --largeur: 1440px;
  --section: 120px;
  --rayon: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--gris);
  font: 400 15px/1.6 var(--grotesque);
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3, h4 {
  color: var(--texte);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.06;
  hyphens: none;
  text-wrap: balance;
}
h2 { font-size: clamp(36px, 4.5vw, 64px); }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.enveloppe { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.fond-ivoire { background: var(--ivoire); }
.fond-blanc { background: var(--blanc); }
.centre { display: flex; justify-content: center; }

/* ---------- sur-titre souligné, comme sur la référence ---------- */
.surtitre {
  display: inline-block;
  width: fit-content;
  justify-self: start;
  align-self: flex-start;
  color: var(--texte);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}

.chapo { font-size: 15px; max-width: 640px; }

/* ---------- boutons : une seule pilule, flèche intégrée dans une pastille blanche ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 54px;
  padding: 0 6px 0 26px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s, box-shadow .25s, transform .25s;
}
.btn > span { display: inline-block; }
.btn .pastille {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 17px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.btn:hover .pastille { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
.btn-prune { background: var(--prune); color: #fff; box-shadow: 0 10px 24px -12px rgba(106,4,97,.6); }
.btn-prune:hover { background: var(--prune-fonce); box-shadow: 0 14px 28px -12px rgba(106,4,97,.7); }
.btn-prune .pastille { background: #fff; color: var(--prune); }
.btn-verre {
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-verre:hover { background: rgba(255,255,255,.2); }
.btn-verre .pastille { background: #fff; color: var(--texte); }
.btn-petit { height: 46px; padding: 0 5px 0 20px; gap: 12px; font-size: 13.5px; }
.btn-petit .pastille { width: 36px; height: 36px; font-size: 15px; }
.btn-mini { height: 36px; padding: 0 16px; border-radius: 999px; background: var(--prune); color: #fff; font-size: 12.5px; display: inline-flex; align-items: center; transition: background .2s; }
.btn-mini:hover { background: var(--prune-fonce); }

/* ============================================================
   EN-TÊTE
   ============================================================ */
.entete { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.entete-in {
  max-width: var(--largeur); margin: 0 auto;
  padding: 26px var(--gouttiere) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo {
  font-family: var(--signature);
  font-size: 44px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0;
  white-space: nowrap;
  padding-top: 6px;
}
.nav {
  display: flex; align-items: center; gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav a {
  padding: 9px 15px;
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav a:hover { background: rgba(255,255,255,.16); color: #fff; }
.nav a.actif { background: #fff; color: var(--texte); }
.entete-actions { display: flex; align-items: center; gap: 12px; }
.entete .btn { height: 46px; padding: 0 5px 0 20px; gap: 12px; font-size: 13.5px; }
.entete .btn .pastille { width: 36px; height: 36px; font-size: 15px; }
.burger { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: max(820px, min(100vh, 1000px));
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-fond {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transform: scaleX(-1);
  z-index: -2;
}
.hero-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20,10,4,.58) 0%, rgba(20,10,4,.28) 42%, rgba(20,10,4,0) 70%),
    linear-gradient(180deg, rgba(10,6,2,.35) 0%, rgba(10,6,2,0) 26%, rgba(10,6,2,0) 70%, rgba(10,6,2,.38) 100%);
}
.hero-in {
  position: relative;
  min-height: inherit;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: 190px; padding-bottom: 56px;
}
.hero-texte { max-width: 640px; position: relative; z-index: 2; }
.hero h1 {
  color: #fff;
  font-size: clamp(46px, 5.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 11.5em;
}
.hero-texte > p { margin-top: 22px; max-width: 470px; color: rgba(255,255,255,.82); font-size: 15.5px; }
.hero-boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-diane {
  position: absolute;
  right: max(2vw, calc(50% - 700px));
  bottom: 0;
  height: min(84%, 830px);
  width: auto;
  max-width: none;
  z-index: 1;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.28));
}

/* ============================================================
   MON APPROCHE
   ============================================================ */
.approche { padding: 110px 0 var(--section); }
.tete-asym { display: grid; grid-template-columns: 33% 1fr; gap: 40px; align-items: start; }
.tete-asym-large { grid-template-columns: 43% 1fr; }
.declaration {
  font-size: clamp(27px, 3.2vw, 46px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--texte);
  max-width: 900px;
  text-wrap: pretty;
}
.declaration em {
  font-style: normal;
  --p: 46%;
  background: linear-gradient(90deg, var(--texte) var(--p), var(--gris-clair) var(--p));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.approche-media { display: grid; grid-template-columns: 57.5% 1fr; gap: 24px; margin-top: 76px; }
.approche-photo { position: relative; border-radius: var(--rayon); overflow: hidden; height: 572px; }
.approche-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.chiffres { display: grid; grid-template-rows: repeat(3, 1fr); gap: 18px; height: 572px; }
.tete-asym .surtitre { margin-top: 10px; }
.chiffre {
  display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 18px;
  padding: 22px 26px;
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 10px 30px -18px rgba(30,40,30,.18);
}
.chiffre strong { color: var(--texte); font-size: clamp(36px, 3.8vw, 54px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.chiffre span { font-size: 13px; line-height: 1.45; max-width: 240px; }

/* ============================================================
   MON EXPERTISE — accordéon
   ============================================================ */
.expertise { padding: var(--section) 0; }
.expertise h2 { max-width: 13em; }
.expertise .chapo { margin-top: 22px; font-size: 14px; }
.accordeon { margin-top: 80px; border-top: 1px solid var(--ligne); }
/* Le titre et la description partagent la même ligne, comme sur la référence :
   l'article est une grille, le corps occupe la colonne de droite dès la ligne du titre. */
.acc {
  display: grid; grid-template-columns: 43% 1fr; column-gap: 40px;
  border-bottom: 1px solid var(--ligne);
}
.acc-tete {
  grid-column: 1 / -1; grid-row: 1;
  width: 100%;
  display: grid; grid-template-columns: 112px 1fr 28px; align-items: start;
  padding: 30px 0;
  text-align: left;
}
.acc-num, .acc-titre { font-size: clamp(24px, 3vw, 44px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: #A7ACA8; transition: color .3s; }
.acc-titre { max-width: 9em; }
.acc.ouvert .acc-num, .acc.ouvert .acc-titre, .acc-tete:hover .acc-titre { color: var(--texte); }
.acc-ico { position: relative; width: 14px; height: 14px; margin-top: 14px; justify-self: end; }
.acc-ico::before, .acc-ico::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: #8F9490; transition: transform .3s; }
.acc-ico::after { transform: rotate(90deg); }
.ouvert > button .acc-ico::after { transform: rotate(0); }
.acc-corps {
  grid-column: 2; grid-row: 1 / span 2;
  max-height: 0; overflow: hidden;
  pointer-events: none;
  transition: max-height .6s cubic-bezier(.2,.7,.2,1);
}
.acc.ouvert .acc-corps { max-height: 820px; pointer-events: auto; }
.acc-corps > p { margin-top: 40px; padding-right: 70px; font-size: 13.5px; max-width: 600px; }
.acc-photo { position: relative; margin: 26px 0 32px; height: 400px; border-radius: var(--rayon); overflow: hidden; }
.acc-photo img { width: 100%; height: 100%; object-fit: cover; }
.acc-photo-diane img { object-position: 50% 30%; }
.acc-photo .btn { position: absolute; right: 22px; bottom: 22px; }

/* ============================================================
   QUI SUIS-JE
   ============================================================ */
.diane { padding: 110px 0 var(--section); }
.diane-grille { display: grid; grid-template-columns: 40.4% 1fr; gap: 20px; margin-top: 34px; }
.carte-diane {
  position: relative;
  background: var(--prune);
  border-radius: var(--rayon);
  color: rgba(255,255,255,.86);
  padding: 40px 40px 44px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
/* photo de Diane en bulle */
.bulle-diane {
  position: relative;
  width: min(100%, 400px); aspect-ratio: 1;
  margin: 26px auto 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 10px rgba(255,255,255,.08), 0 0 0 22px rgba(255,255,255,.05), 0 30px 60px -20px rgba(0,0,0,.5);
}
.bulle-diane img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transform: scale(1.02); }
.ruban {
  position: relative; z-index: 2;
  align-self: center;
  margin: -34px auto 0;
  padding: 8px 40px 2px;
  background: var(--petrole);
  transform: rotate(-4deg);
  text-align: center;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.35);
}
.ruban span { font-family: var(--signature); font-size: 54px; line-height: .9; color: #fff; letter-spacing: 0; }
.carte-diane-texte { margin-top: 30px; font-size: 14px; line-height: 1.7; text-align: center; max-width: 400px; align-self: center; }
.carte-diane-texte p + p { margin-top: 16px; }

.diane-droite { display: grid; grid-template-rows: 1fr auto; gap: 20px; }
.carte-plan { border-radius: var(--rayon); overflow: hidden; background: #F8F8F6; min-height: 420px; }
.carte-plan img { width: 100%; height: 100%; object-fit: cover; }
.carte-contact {
  background: var(--prune);
  border-radius: var(--rayon);
  padding: 30px 30px 18px;
  color: #fff;
}
.carte-contact h3 { color: #fff; font-size: clamp(28px, 2.8vw, 40px); margin-bottom: 18px; }
.ligne-contact {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.ligne-contact:first-of-type { border-top: 0; }
.ligne-contact > svg { font-size: 18px; opacity: .75; }
.ligne-contact small { display: block; font-size: 11.5px; color: rgba(255,255,255,.6); }
.ligne-contact span { font-size: 15px; color: #fff; line-height: 1.4; }
.ligne-contact a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.7);
}

/* ============================================================
   MES BIENS
   ============================================================ */
.biens { padding: var(--section) 0; }
.tete-centre { text-align: center; display: flex; flex-direction: column; align-items: center; }
.tete-centre .surtitre { align-self: center; }
.tete-centre h2 { margin-top: 26px; max-width: 12em; }
.tete-centre .chapo { margin-top: 20px; max-width: 520px; font-size: 14px; }
.grille-biens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 64px 0 54px; }
.bien {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.bien > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.bien:hover > img { transform: scale(1.04); }
.bien::before {
  content: ""; position: absolute; inset: 52% 0 0 0; z-index: -1;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.42) 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 38%);
  mask: linear-gradient(180deg, transparent 0%, #000 38%);
}
.bien-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px; }
.bien-info h3 { color: #fff; font-size: 17px; letter-spacing: -0.02em; line-height: 1.25; }
.bien-meta { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.85); }
.bien-meta li { display: inline-flex; align-items: center; gap: 6px; }
.bien-meta svg { font-size: 15px; }
.bien-bas { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.bien-bas strong { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }

/* ============================================================
   TÉMOIGNAGES — éventail de portraits
   ============================================================ */
.avis { padding: var(--section) 0 110px; overflow: hidden; }
.avis .tete-centre h2 { max-width: 13em; }
.avis-scene { position: relative; height: 530px; margin-top: 64px; }
.avis-photo {
  position: absolute; left: 50%; top: 40px;
  width: 290px; height: 350px;
  border-radius: 6px;
  border: 5px solid #fff;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px -20px rgba(20,30,20,.35);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), width .7s cubic-bezier(.2,.7,.2,1), height .7s cubic-bezier(.2,.7,.2,1), top .7s cubic-bezier(.2,.7,.2,1), opacity .5s;
}
.avis-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15); }
.avis-photo[data-pos="0"] { transform: translateX(calc(-50% - 720px)) rotate(-7deg); top: 70px; }
.avis-photo[data-pos="1"] { transform: translateX(calc(-50% - 385px)) rotate(-4deg); top: 46px; }
.avis-photo[data-pos="2"] {
  transform: translateX(-50%); top: 0;
  width: 360px; height: 440px; z-index: 2;
  border: 7px solid #fff;
  box-shadow: 0 34px 60px -24px rgba(20,30,20,.45);
}
.avis-photo[data-pos="2"] img { filter: none; }
.avis-photo[data-pos="3"] { transform: translateX(calc(-50% + 385px)) rotate(4deg); top: 46px; }
.avis-photo[data-pos="4"] { transform: translateX(calc(-50% + 720px)) rotate(7deg); top: 70px; }
.avis-guillemet {
  position: absolute; left: 50%; top: 404px; z-index: 3;
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--prune); color: #fff;
  box-shadow: 0 0 0 6px var(--blanc);
  font-size: 28px;
}
.avis-bas { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 40px; max-width: 1000px; margin-top: 10px; }
.rond { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 18px; transition: transform .25s; }
.rond:hover { transform: scale(1.06); }
.rond-contour { border: 1.5px solid #C9CDC8; color: var(--texte); background: #fff; }
.rond-prune { background: var(--prune); color: #fff; }
.avis-textes { display: grid; }
.avis-texte { grid-area: 1 / 1; text-align: center; opacity: 0; visibility: hidden; transition: opacity .5s; }
.avis-texte.actif { opacity: 1; visibility: visible; }
.avis-texte p { color: var(--texte); font-size: 17.5px; line-height: 1.6; letter-spacing: -0.01em; max-width: 640px; margin: 0 auto; }
.avis-texte footer { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.etoiles { color: var(--petrole); font-size: 18px; letter-spacing: 3px; }
.avis-texte strong { color: var(--texte); font-size: 15px; font-weight: 600; margin-top: 4px; }
.avis-texte small { font-size: 12.5px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: var(--section) 0; }
.faq-grille { display: grid; grid-template-columns: 40.4% 1fr; gap: 20px; }
.faq-gauche { display: flex; flex-direction: column; padding-right: 20px; }
.faq-gauche h2 { margin-top: 30px; font-size: clamp(36px, 4.5vw, 64px); max-width: 8em; }
.faq-photo { margin-top: 40px; border-radius: var(--rayon); overflow: hidden; height: 400px; }
.faq-photo img { width: 100%; height: 100%; object-fit: cover; }
.faq-relance { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; }
.faq-relance p { font-size: 13px; line-height: 1.5; }
.faq-liste { display: flex; flex-direction: column; gap: 14px; }
.q {
  background: #fff;
  border-radius: var(--rayon);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 30px -20px rgba(30,40,30,.22);
  transition: background .3s;
}
.q.ouvert { background: #F2F3EE; }
.q-tete { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 26px; text-align: left; color: var(--texte); font-size: 15.5px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.4; }
.q-tete .acc-ico { margin-top: 5px; }
.q-corps { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.2,.7,.2,1); }
.q.ouvert .q-corps { max-height: 260px; }
.q-corps p { padding: 0 60px 24px 26px; font-size: 13.5px; }
.q-tete { transition: padding .3s; }
.q.ouvert .q-tete { padding-bottom: 16px; }

/* ============================================================
   CONTACT — bande photo
   ============================================================ */
.contact { position: relative; overflow: hidden; isolation: isolate; }
.contact-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; z-index: -2; }
.contact-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,10,20,.25), rgba(5,10,20,0) 50%), linear-gradient(0deg, rgba(5,10,20,.3), rgba(5,10,20,0) 40%); }
/* Diane détourée et formulaire : même hauteur, tous deux posés sur le bas de la bande */
.contact-in { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; padding-top: 110px; padding-bottom: 0; }
.contact-photo { position: relative; margin: 0; min-height: 420px; }
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 30px 50px rgba(0,0,0,.3)); }
.formulaire {
  width: 100%;
  background: #fff;
  border-radius: 6px 6px 0 0;
  padding: 40px 36px 36px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.45);
  position: relative; z-index: 2;
}
.formulaire h2 { font-size: clamp(32px, 3.6vw, 52px); max-width: 11em; }
.formulaire > p { margin: 14px 0 26px; font-size: 13.5px; max-width: 470px; padding-bottom: 26px; border-bottom: 1px solid var(--ligne); }
.champ { display: block; position: relative; margin-bottom: 12px; }
.champ span { position: absolute; left: 16px; top: 14px; font-size: 13px; color: #8E938F; pointer-events: none; transition: all .2s; }
.champ input, .champ textarea {
  width: 100%;
  border: 1px solid #ECEEEA;
  border-radius: 6px;
  background: #FCFCFB;
  padding: 30px 16px 10px;
  font: 400 15px var(--grotesque);
  color: var(--texte);
  outline: none;
  transition: border-color .2s, background .2s;
  resize: vertical;
}
.champ input:focus, .champ textarea:focus { border-color: var(--prune); background: #fff; }
.champ textarea { min-height: 150px; }
.formulaire-bas { display: flex; justify-content: flex-end; margin-top: 22px; }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied { background: var(--encre); color: rgba(255,255,255,.62); }
.pied-photo { position: relative; height: 620px; overflow: hidden; }
.pied-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.pied-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,21,22,0) 45%, rgba(0,21,22,.7) 80%, var(--encre) 100%); }
.pied-signature {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  text-align: center;
  font-family: var(--signature);
  font-size: clamp(110px, 20vw, 300px);
  line-height: 1;
  color: #fff;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: .95;
}
.pied-in { display: grid; grid-template-columns: 40.4% 1.25fr .6fr .9fr; gap: 40px; padding-top: 30px; padding-bottom: 70px; position: relative; z-index: 1; }
.pied-carte {
  position: relative;
  display: flex;
  background: var(--prune);
  border-radius: var(--rayon);
  color: #fff;
  overflow: hidden;
}
.pied-carte-texte { position: relative; z-index: 1; padding: 30px; }
.pied-carte h3 { color: #fff; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 20px; }
.pied-ligne { display: grid; grid-template-columns: 20px 1fr; gap: 12px; margin-top: 14px; font-size: 12.5px; }
.pied-ligne svg { font-size: 17px; margin-top: 2px; opacity: .8; }
.pied-ligne strong { display: block; font-weight: 600; font-size: 13px; }
.pied-ligne a { color: rgba(255,255,255,.75); }
.pied-col h4 { color: #fff; font-size: 15px; letter-spacing: -0.01em; margin: 0 0 18px; }
.pied-col p { font-size: 13px; line-height: 1.7; }
.pied-col li + li { margin-top: 10px; }
.pied-col a { font-size: 13px; transition: color .2s; }
.pied-col a:hover { color: #fff; }
.pied-bas { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; }
.pied-bas a:hover { color: #fff; }
.pied-sociaux { display: flex; gap: 10px; }
.pied-social-wa { background: #25D366; border-color: #25D366 !important; }
.pied-social { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); font-size: 16px; color: #fff; }

/* ============================================================
   PAGES INTERNES — composants de la phase 3
   (même registre que l'accueil : rien de nouveau dans la palette, les rayons ou la typographie)
   ============================================================ */
.section { padding: var(--section) 0; }

/* hero de page : la bande photo du hero, en plus court */
.hero-page {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 660px;
  color: #fff;
}
.hero-page-court { min-height: 540px; }
.hero-page-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-page-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.3) 50%, rgba(10,8,6,.05) 80%),
    linear-gradient(180deg, rgba(10,6,2,.4) 0%, rgba(10,6,2,0) 30%, rgba(10,6,2,.25) 100%);
}
.hero-page-in { position: relative; z-index: 2; padding-top: 180px; padding-bottom: 84px; }
.hero-page h1 { color: #fff; font-size: clamp(40px, 4.8vw, 72px); line-height: 1.04; letter-spacing: -0.035em; max-width: 12em; }
.hero-page-in > p:not(.ariane) { margin-top: 20px; max-width: 540px; color: rgba(255,255,255,.84); font-size: 15.5px; }
.hero-page .hero-boutons { margin-top: 30px; }
.ariane { margin-bottom: 22px; font-size: 13px; color: rgba(255,255,255,.72); }
.ariane a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); }
.ariane span { margin: 0 6px; opacity: .6; }
.hero-page-diane { min-height: max(760px, min(100vh, 920px)); }
.hero-page-diane .hero-page-in { padding-bottom: 120px; }
.hero-page-diane .hero-page-in > * { max-width: 600px; }

/* étapes numérotées */
.etapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 76px; }
.etape {
  padding: 30px 24px 32px;
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 10px 30px -18px rgba(30,40,30,.18);
}
.fond-blanc .etape { background: var(--ivoire); box-shadow: none; }
.etape-num { display: block; color: var(--prune); font-size: 44px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.etape h3 { margin: 28px 0 12px; font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; }
.etape p { font-size: 13.5px; line-height: 1.6; }

/* cartes-chiffres dont la valeur est un mot */
.chiffres-mots .chiffre { grid-template-columns: 200px 1fr; }
.chiffres-mots .chiffre strong { font-size: clamp(26px, 2.5vw, 38px); white-space: normal; letter-spacing: -0.03em; }

/* valeurs */
.valeurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 60px; }
.valeur { padding: 34px 28px; background: #fff; border-radius: var(--rayon); box-shadow: 0 12px 30px -20px rgba(30,40,30,.22); }
.valeur-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--prune); color: #fff; font-size: 22px; }
.valeur h3 { margin: 24px 0 10px; font-size: 22px; letter-spacing: -0.02em; }
.valeur p { font-size: 13.5px; }

/* vision (à propos) */
.vision { display: grid; grid-template-columns: 40.4% 1fr; gap: 64px; align-items: center; margin-top: 76px; }
.vision-photo { position: relative; height: 640px; border-radius: var(--rayon); overflow: hidden; }
.vision-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.vision-texte h3 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 22px; }
.vision-texte p { font-size: 15px; line-height: 1.75; max-width: 600px; }
.vision-texte p + p { margin-top: 16px; }
.vision-texte .vision-signature { margin-top: 18px; font-family: var(--signature); font-size: 76px; line-height: 1; color: var(--prune); letter-spacing: 0; }

/* filtres du catalogue */
.filtres { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.filtre {
  height: 44px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--ligne); background: #fff; color: var(--texte);
  font-size: 14px; font-weight: 500;
  transition: background .2s, color .2s, border-color .2s;
}
.filtre:hover { border-color: var(--prune); }
.filtre.actif { background: var(--prune); border-color: var(--prune); color: #fff; }
.bien.masque { display: none; }
.note-biens { text-align: center; font-size: 14px; max-width: 560px; margin: 0 auto; }

/* bandeau d'appel à l'action, avec Diane qui déborde de la carte */
.bande-diane { padding: calc(var(--section) + 40px) 0 var(--section); }
.bande-carte {
  position: relative;
  display: grid; grid-template-columns: 1fr 42%;
  min-height: 420px;
  padding: 64px;
  background: var(--prune);
  border-radius: var(--rayon);
  color: rgba(255,255,255,.86);
}
.bande-signature { font-family: var(--signature); font-size: 70px; line-height: .9; color: #fff; letter-spacing: 0; }
.bande-texte h2 { color: #fff; margin: 6px 0 18px; max-width: 12em; }
.bande-texte > p:not(.bande-signature) { max-width: 500px; font-size: 15px; }
.bande-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bande-diane-photo { position: absolute; right: 48px; bottom: 0; height: calc(100% + 80px); width: auto; max-width: none; filter: drop-shadow(0 24px 40px rgba(0,0,0,.3)); }
.btn-blanc { background: #fff; color: var(--prune); }
.btn-blanc:hover { background: var(--ivoire); }
.btn-blanc .pastille { background: var(--prune); color: #fff; }
.btn-wa { background: #25D366; color: #fff; box-shadow: 0 10px 24px -12px rgba(18,140,70,.7); }
.btn-wa:hover { background: #1EBE5A; }
.btn-wa .pastille { background: #fff; color: #1EBE5A; }

/* champs de sélection du formulaire */
.champ select {
  width: 100%;
  border: 1px solid #ECEEEA; border-radius: 6px; background-color: #FCFCFB;
  padding: 30px 40px 10px 16px;
  font: 400 15px var(--grotesque); color: var(--texte);
  appearance: none; -webkit-appearance: none; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B706D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.champ select:focus { border-color: var(--prune); background-color: #fff; }

/* la page contact commence directement par le formulaire : on laisse la place à l'en-tête */
.page-contact .contact-in { padding-top: 170px; }

/* ============================================================
   Bouton WhatsApp flottant
   ============================================================ */
.whatsapp-flottant {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: #25D366; color: #fff;
  font-size: 28px;
  box-shadow: 0 14px 30px -10px rgba(18,140,70,.65);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.whatsapp-flottant svg { stroke-width: 1.9; }
.whatsapp-flottant span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.whatsapp-flottant::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: wa-onde 2.4s ease-out infinite;
}
.whatsapp-flottant:hover { transform: scale(1.07); box-shadow: 0 18px 36px -10px rgba(18,140,70,.75); }
@keyframes wa-onde { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }

/* ============================================================
   Apparitions au défilement
   ============================================================ */
.apparait { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .apparait { opacity: 1; transform: none; transition: none; }
  .whatsapp-flottant::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   ADAPTATIF
   ============================================================ */
@media (max-width: 1240px) {
  :root { --gouttiere: 40px; }
  .nav a { padding: 9px 11px; font-size: 13px; }
  }
@media (max-width: 1080px) {
  .nav, .entete-actions .btn { display: none; }
  .burger { display: grid; place-items: center; align-content: center; gap: 6px; width: 48px; height: 48px; border-radius: 50%; background: #fff; }
  .burger span { display: block; width: 18px; height: 1.6px; background: var(--texte); transition: transform .3s; }
  .entete.menu-ouvert .nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 88px; left: 16px; right: 16px;
    padding: 12px; border-radius: 18px;
    background: var(--encre); border-color: rgba(255,255,255,.1);
  }
  .entete.menu-ouvert .nav a { padding: 14px 16px; font-size: 16px; color: #fff; }
  .entete.menu-ouvert .nav a.actif { background: var(--prune); color: #fff; }
  .entete.menu-ouvert .burger span:first-child { transform: translateY(3.8px) rotate(45deg); }
  .entete.menu-ouvert .burger span:last-child { transform: translateY(-3.8px) rotate(-45deg); }
  .pied-in { grid-template-columns: 1fr 1fr; }
  .pied-carte { grid-column: 1 / -1; }
}
/* ---------- Tablette et mobile : composition centrée, comme les sections centrées de la référence ---------- */
@media (max-width: 900px) {
  :root { --section: 84px; }
  .surtitre { justify-self: center; align-self: center; }
  .diane > .enveloppe > .surtitre { display: block; margin: 0 auto; }

  /* hero */
  .hero { min-height: 0; text-align: center; }
  .hero-in { padding-top: 130px; padding-bottom: 0; align-items: center; }
  .hero-texte { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
  .hero h1 { max-width: 12em; }
  .hero-texte > p { margin-left: auto; margin-right: auto; }
  .hero-boutons { justify-content: center; }
  .hero-diane { position: relative; right: auto; display: block; height: auto; width: min(86%, 440px); margin: 28px auto 0; }

  /* en-têtes de section */
  .tete-asym, .tete-asym-large { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .tete-asym .surtitre { margin-top: 0; }
  .declaration { margin: 0 auto; }
  .expertise h2, .expertise .chapo { margin-left: auto; margin-right: auto; }

  /* approche */
  .approche-media { grid-template-columns: 1fr; margin-top: 44px; }
  .approche-photo { height: 380px; }
  .chiffres { height: auto; grid-template-rows: none; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .chiffre { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px 16px; }
  .chiffre span { max-width: 220px; }

  /* accordéon */
  .accordeon { margin-top: 50px; }
  .acc { grid-template-columns: 1fr; }
  .acc-tete { grid-template-columns: 54px 1fr 20px; padding: 24px 0; }
  .acc-corps { grid-column: 1; grid-row: 2; }
  .acc-corps > p { margin-top: -4px; padding-right: 0; }
  .acc-photo { height: 320px; margin-top: 20px; }

  /* qui suis-je */
  .diane-grille { grid-template-columns: 1fr; }
  .carte-diane-texte { text-align: center; }
  .carte-plan { min-height: 320px; }
  .carte-contact h3 { text-align: center; }

  /* biens */
  .grille-biens { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* témoignages */
  .avis-photo[data-pos="0"] { transform: translateX(calc(-50% - 420px)) rotate(-7deg); }
  .avis-photo[data-pos="1"] { transform: translateX(calc(-50% - 250px)) rotate(-4deg); }
  .avis-photo[data-pos="3"] { transform: translateX(calc(-50% + 250px)) rotate(4deg); }
  .avis-photo[data-pos="4"] { transform: translateX(calc(-50% + 420px)) rotate(7deg); }

  /* faq */
  .faq-grille { grid-template-columns: 1fr; }
  .faq-gauche { padding-right: 0; margin-bottom: 36px; align-items: center; text-align: center; }
  .faq-gauche h2 { margin-left: auto; margin-right: auto; }
  .faq-photo { width: 100%; }
  .faq-relance { flex-direction: column; justify-content: center; text-align: center; }

  /* contact */
  .contact-in { grid-template-columns: 1fr; gap: 0; padding-top: 60px; padding-bottom: 64px; }
  .formulaire { border-radius: 6px; }
  .contact-photo { min-height: 0; height: 420px; }
  .formulaire { text-align: center; }
  .formulaire h2, .formulaire > p { margin-left: auto; margin-right: auto; }
  .champ { text-align: left; }
  .formulaire-bas { justify-content: center; }
  
  /* pages internes */
  .hero-page, .hero-page-court, .hero-page-diane { min-height: 0; text-align: center; flex-direction: column; align-items: stretch; }
  .hero-page-in { padding-top: 130px; padding-bottom: 70px; display: flex; flex-direction: column; align-items: center; }
  .hero-page h1, .hero-page-in > p:not(.ariane) { margin-left: auto; margin-right: auto; }
  .hero-page .hero-boutons { justify-content: center; }
  .hero-page-diane .hero-page-in { padding-bottom: 0; }
  .etapes { grid-template-columns: repeat(2, 1fr); margin-top: 50px; }
  .etape { text-align: center; }
  .valeurs { grid-template-columns: repeat(2, 1fr); }
  .valeur { text-align: center; }
  .valeur-ico { margin: 0 auto; }
  .vision { grid-template-columns: 1fr; gap: 36px; margin-top: 50px; text-align: center; }
  .vision-photo { height: 460px; }
  .vision-texte p { margin-left: auto; margin-right: auto; }
  .chiffres-mots .chiffre { grid-template-columns: 1fr; }
  .bande-diane { padding-top: var(--section); }
  .bande-carte { grid-template-columns: 1fr; padding: 48px 32px 0; text-align: center; min-height: 0; }
  .bande-texte { display: flex; flex-direction: column; align-items: center; }
  .bande-boutons { justify-content: center; }
  .bande-diane-photo { position: relative; right: auto; display: block; height: auto; width: min(78%, 360px); margin: 30px auto 0; }
  .page-contact .contact-in { padding-top: 130px; }

  /* pied */
  .pied-in { grid-template-columns: 1fr 1fr; text-align: center; }
  .pied-carte { grid-column: 1 / -1; min-height: 0; justify-content: center; }
  .pied-carte-texte { display: flex; flex-direction: column; align-items: center; }
  .pied-ligne { grid-template-columns: 1fr; justify-items: center; gap: 6px; margin-top: 18px; }
  .pied-apropos { grid-column: 1 / -1; }
  .pied-apropos p { max-width: 460px; margin: 0 auto; }
  .pied-bas { flex-direction: column; justify-content: center; text-align: center; }
  .pied-sociaux { justify-content: center; }
}
@media (max-width: 600px) {
  :root { --gouttiere: 20px; --section: 72px; }
  body { font-size: 14.5px; }
  h2 { font-size: 34px; }
  .logo { font-size: 36px; }
  .entete-in { padding-top: 18px; }

  .hero-in { padding-top: 108px; }
  .hero h1 { font-size: 40px; line-height: 1.05; }
  .hero-texte > p { font-size: 14.5px; margin-top: 16px; }
  .hero-boutons { flex-direction: column; align-items: center; margin-top: 26px; gap: 10px; }
  .hero-diane { width: 92%; }

  /* boutons pleine largeur, cible tactile confortable */
  .btn { height: 52px; padding: 0 6px 0 24px; gap: 14px; font-size: 15px; }
  .btn-petit { width: auto; height: 46px; font-size: 13.5px; }
  .btn-mini { width: auto; }

  .declaration { font-size: 25px; }
  .chiffres { grid-template-columns: 1fr; }
  .chiffre { padding: 22px 18px; }
  .approche-photo { height: 300px; }

  .acc-num, .acc-titre { font-size: 22px; }
  .acc-tete { grid-template-columns: 42px 1fr 18px; }
  .acc-photo { height: 260px; }
  .acc-photo .btn { right: 14px; bottom: 14px; }

  .carte-diane { padding: 26px 20px 30px; }
  .bulle-diane { width: min(100%, 280px); margin-top: 14px; }
  .ruban { margin-top: -28px; padding: 6px 30px 0; }
  .ruban span { font-size: 46px; }
  .carte-contact { padding: 26px 20px 12px; }
  .ligne-contact { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; padding: 20px 0; }

  .grille-biens { grid-template-columns: 1fr; }
  .bien { aspect-ratio: 4 / 4.4; }

  .avis-scene { height: 360px; margin-top: 40px; }
  .avis-photo { width: 190px; height: 230px; top: 30px; }
  .avis-photo[data-pos="2"] { width: 230px; height: 290px; }
  .avis-photo[data-pos="0"], .avis-photo[data-pos="4"] { opacity: 0; }
  .avis-photo[data-pos="1"] { transform: translateX(calc(-50% - 140px)) rotate(-5deg); }
  .avis-photo[data-pos="3"] { transform: translateX(calc(-50% + 140px)) rotate(5deg); }
  .avis-guillemet { top: 258px; width: 60px; height: 60px; font-size: 24px; }
  .avis-bas { grid-template-columns: 1fr 1fr; gap: 16px; }
  .avis-textes { grid-column: 1 / -1; grid-row: 1; }
  .rond-contour { justify-self: end; }
  .avis-texte p { font-size: 16px; }

  .faq-photo { height: 260px; }
  .q-tete { padding: 20px; font-size: 15px; }
  .q-corps p { padding: 0 20px 20px; }

  .formulaire { padding: 30px 20px 24px; }
  .contact-photo { height: 360px; }
  .whatsapp-flottant { right: 16px; bottom: 16px; width: 56px; height: 56px; font-size: 25px; }

  .pied-photo { height: 300px; }
  .hero-page h1 { font-size: 36px; }
  .hero-page-in { padding-top: 112px; padding-bottom: 56px; }
  .hero-page .hero-boutons { flex-direction: column; align-items: center; gap: 10px; }
  .etapes, .valeurs { grid-template-columns: 1fr; }
  .vision-photo { height: 380px; }
  .bande-carte { padding: 40px 20px 0; }
  .bande-signature { font-size: 56px; }
  .bande-boutons { flex-direction: column; align-items: center; }
  .filtres { gap: 6px; }
  .filtre { height: 40px; padding: 0 16px; font-size: 13.5px; }
  .pied-signature { font-size: 16.5vw; top: 24px; }
  .pied-in { grid-template-columns: 1fr; gap: 34px; }
}

/* ==========================================================================
   ADAPTATIONS GUTENBERG — phase 4
   Le CSS ci-dessus est celui de la maquette, inchangé. Ce qui suit l'adapte au
   balisage des blocs natifs (references/blocs-gutenberg.md) :
   - la classe d'une image est sur la <figure> ;
   - le CSS des blocs est imprimé APRÈS cette feuille : à spécificité égale il gagne,
     d'où les sélecteurs doublés (.wp-block-image.x img) ;
   - icônes et voiles deviennent des pseudo-éléments ;
   - un bouton est un div.wp-block-button qui porte la classe, le lien est dedans.
   ========================================================================== */

body { position: relative; }
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
/* …et les marges que la maquette pose sur des figures, rétablies au-dessus de cette neutralisation */
.wp-block-image.faq-photo { margin-top: 40px; }
.wp-block-image.bulle-diane { margin: 26px auto 0; }
.wp-site-blocks { padding: 0; }
.wp-block-post-content a:where(:not(.wp-element-button)) { text-decoration: none; }

/* ---------- icônes : masques CSS (les variables --ico sont générées en fin de feuille) ---------- */
.a-ico::before {
  content: ""; display: inline-block; flex: none;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.ligne-contact.a-ico::before { width: 18px; height: 18px; opacity: .75; }
.pied-ligne.a-ico::before { width: 17px; height: 17px; margin-top: 2px; opacity: .8; }
.bien-meta li.a-ico::before { width: 15px; height: 15px; }
.rond.a-ico::before { width: 18px; height: 18px; }

/* ---------- textes en ligne devenus paragraphes ---------- */
/* Ces paragraphes étaient des <span>/<strong>/<small> dans la maquette : les règles « .x p »
   de la maquette les atteignent désormais. On rétablit leur rendu d'origine (porte 4). */
.etape p.etape-num { font-size: 44px; line-height: 1; }
.avis-texte p.etoiles { max-width: none; margin: 0; font-size: 18px; letter-spacing: 3px; color: var(--petrole); }
.avis-texte p.t-strong { max-width: none; margin: 4px 0 0; font-size: 15px; line-height: 1.6; letter-spacing: normal; }
.avis-texte p.t-small { max-width: none; margin: 0; font-size: 12.5px; line-height: 1.6; letter-spacing: normal; color: var(--gris); }
.pied-ligne .t-strong { font-size: 13px; line-height: 1.6; }
.pied-ligne .t-strong strong { font-weight: 600; }
.chiffre .t-span { font-size: 13px; line-height: 1.45; max-width: 240px; }
.ligne-contact .t-small { display: block; font-size: 11.5px; color: rgba(255,255,255,.6); }
.ligne-contact .t-span { font-size: 15px; color: #fff; line-height: 24px; } /* le span en ligne de la maquette occupait une ligne de 24 px */
.ligne-contact .t-lien a::after { content: "↗"; font-size: 12px; }
.avis-texte .t-small { font-size: 12.5px; }
.ruban .t-span { font-family: var(--signature); font-size: 54px; line-height: .9; color: #fff; letter-spacing: 0; }

/* ---------- en-tête : logo, navigation native, bouton ---------- */
.entete-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo a { color: #fff; text-decoration: none; }
.wp-block-navigation.menu-principal { flex: none; color: rgba(255,255,255,.88); }
/* le bloc Navigation double sa classe (.x.x) pour forcer color: inherit : on la double aussi */
.menu-principal .wp-block-navigation__container {
  display: flex; align-items: center; gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.menu-principal .wp-block-navigation-item__content {
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  font-size: 13.5px; font-weight: 500; line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.menu-principal .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { background: rgba(255,255,255,.16); color: #fff; }
.menu-principal .wp-block-navigation-item__content.wp-block-navigation-item__content.actif { background: #fff; color: var(--texte); }
.wp-block-navigation.menu-principal .wp-block-navigation__responsive-container-open {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--texte);
  align-items: center; justify-content: center;
}
/* le panneau mobile s'ouvrirait blanc sur blanc (CSS du bloc imprimé après) */
.wp-block-navigation.menu-principal .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--encre) !important;
  color: #fff !important;
  padding: 90px 24px 40px;
}
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation__container {
  flex-direction: column; align-items: stretch; gap: 4px;
  background: none; border: 0; backdrop-filter: none; padding: 0; border-radius: 0;
}
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation-item__content { padding: 14px 16px; font-size: 18px; color: #fff; }
.wp-block-navigation.menu-principal .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content.actif { background: var(--prune); color: #fff; }
.wp-block-navigation.menu-principal .wp-block-navigation__responsive-container-close { color: #fff; top: 28px; right: 24px; }

/* ---------- images : la classe est sur la figure ---------- */
.wp-block-image.hero-fond, .wp-block-image.contact-fond, .wp-block-image.hero-page-fond {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
}
.wp-block-image.hero-fond img, .wp-block-image.contact-fond img, .wp-block-image.hero-page-fond img {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.wp-block-image.contact-fond img { object-position: 50% 55%; }

.wp-block-image.hero-diane, .wp-block-image.bande-diane-photo { aspect-ratio: 1168 / 1380; }
.wp-block-image.hero-diane img, .wp-block-image.bande-diane-photo img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.wp-block-image.contact-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: 50% 100%;
}

.wp-block-image.approche-photo img, .wp-block-image.vision-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-block-image.bulle-diane img,
.wp-block-image.faq-photo img,
.wp-block-image.carte-plan img,
.wp-block-image.avis-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wp-block-image.carte-plan { display: block; }

.acc-photo > .wp-block-image { position: absolute; inset: 0; margin: 0; }
.acc-photo > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.acc-photo-diane > .wp-block-image img { object-position: 50% 30%; }

.bien > .wp-block-image { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; }
.bien > .wp-block-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.bien:hover > .wp-block-image img { transform: scale(1.04); }

.pied-photo > .wp-block-image { height: 100%; margin: 0; }
.pied-photo > .wp-block-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0%; }

/* ---------- voiles : calques vides devenus pseudo-éléments ---------- */
.hero.avec-hero-voile::before, .contact.avec-contact-voile::before, .hero-page.avec-hero-page-voile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.hero.avec-hero-voile::before {
  background:
    linear-gradient(90deg, rgba(20,10,4,.58) 0%, rgba(20,10,4,.28) 42%, rgba(20,10,4,0) 70%),
    linear-gradient(180deg, rgba(10,6,2,.35) 0%, rgba(10,6,2,0) 26%, rgba(10,6,2,0) 70%, rgba(10,6,2,.38) 100%);
}
.contact.avec-contact-voile::before {
  background: linear-gradient(90deg, rgba(5,10,20,.25), rgba(5,10,20,0) 50%), linear-gradient(0deg, rgba(5,10,20,.3), rgba(5,10,20,0) 40%);
}
.hero-page.avec-hero-page-voile::before {
  background:
    linear-gradient(90deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.3) 50%, rgba(10,8,6,.05) 80%),
    linear-gradient(180deg, rgba(10,6,2,.4) 0%, rgba(10,6,2,0) 30%, rgba(10,6,2,.25) 100%);
}

/* ---------- guillemet des témoignages ---------- */
.avis-scene.avec-avis-guillemet::after {
  content: "";
  position: absolute; left: 50%; top: 404px; z-index: 3;
  width: 70px; height: 70px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--prune) var(--ico-b) center / 28px no-repeat;
  box-shadow: 0 0 0 6px var(--blanc);
}

/* ---------- valeurs : pastille prune et icône blanche ---------- */
.valeur.avec-valeur-ico { position: relative; }
.valeur.avec-valeur-ico::before {
  content: ""; display: block;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--prune) var(--ico-b) center / 22px no-repeat;
}

/* ---------- accordéons : têtes en groupes, signe +/− dessiné en CSS ---------- */
.acc-tete, .q-tete { cursor: pointer; }
.acc-tete::after, .q-tete::after {
  content: ""; flex: none; justify-self: end;
  width: 14px; height: 14px; margin-top: 14px;
  background:
    linear-gradient(#8F9490, #8F9490) center / 14px 1.5px no-repeat,
    linear-gradient(#8F9490, #8F9490) center / 1.5px 14px no-repeat;
}
.q-tete::after { margin-top: 5px; }
.ouvert > .acc-tete::after, .ouvert > .q-tete::after { background: linear-gradient(#8F9490, #8F9490) center / 14px 1.5px no-repeat; }
.acc-tete:focus-visible, .q-tete:focus-visible, .filtre:focus-visible, .rond:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }

/* ---------- témoignages : flèches en paragraphes ---------- */
.rond { font-size: 0; cursor: pointer; }

/* ---------- filtres en paragraphes ---------- */
.filtre { display: inline-flex; align-items: center; cursor: pointer; }

/* ---------- boutons : le conteneur porte la classe, le lien porte le style ---------- */
.wp-block-buttons { gap: 0; }
.hero-boutons, .bande-boutons { gap: 14px; }
.wp-block-button.btn {
  display: inline-flex; height: auto; width: auto; max-width: none;
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; transform: none;
}
.wp-block-button.btn:hover { background: none; box-shadow: none; }
.wp-block-button.btn .wp-block-button__link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 54px; padding: 0 6px 0 26px;
  border: 0; border-radius: 999px;
  font: 500 14.5px/1.6 var(--grotesque); letter-spacing: -0.01em;
  white-space: nowrap; word-break: normal; text-decoration: none;
  transition: background .25s, box-shadow .25s, transform .25s;
}
.wp-block-button.btn .wp-block-button__link:active { transform: scale(.98); }
.wp-block-button.btn .wp-block-button__link:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
/* pastille : ::after dessine le rond, ::before l'icône par-dessus */
.wp-block-button.btn[class*="btn-ico-"] .wp-block-button__link::after {
  content: ""; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--pastille, #fff);
}
.wp-block-button.btn[class*="btn-ico-"] .wp-block-button__link::before {
  content: ""; position: absolute; z-index: 1;
  right: 6px; top: 50%; width: 42px; height: 42px; margin-top: -21px;
  background: var(--icone, var(--prune));
  -webkit-mask: var(--ico) center / 17px no-repeat; mask: var(--ico) center / 17px no-repeat;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.wp-block-button.btn .wp-block-button__link:hover::before { transform: translateX(3px); }

.wp-block-button.btn-prune .wp-block-button__link { background: var(--prune); color: #fff; box-shadow: 0 10px 24px -12px rgba(106,4,97,.6); --pastille: #fff; --icone: var(--prune); }
.wp-block-button.btn-prune .wp-block-button__link:hover { background: var(--prune-fonce); box-shadow: 0 14px 28px -12px rgba(106,4,97,.7); }
.wp-block-button.btn-verre .wp-block-button__link {
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  --pastille: #fff; --icone: var(--texte);
}
.wp-block-button.btn-verre .wp-block-button__link:hover { background: rgba(255,255,255,.2); }
.wp-block-button.btn-blanc .wp-block-button__link { background: #fff; color: var(--prune); --pastille: var(--prune); --icone: #fff; }
.wp-block-button.btn-blanc .wp-block-button__link:hover { background: var(--ivoire); }
.wp-block-button.btn-wa .wp-block-button__link { background: #25D366; color: #fff; box-shadow: 0 10px 24px -12px rgba(18,140,70,.7); --pastille: #fff; --icone: #1EBE5A; }
.wp-block-button.btn-wa .wp-block-button__link:hover { background: #1EBE5A; }

.wp-block-button.btn-petit .wp-block-button__link,
.entete .wp-block-button.btn .wp-block-button__link { height: 46px; padding: 0 5px 0 20px; gap: 12px; font-size: 13.5px; }
.wp-block-button.btn-petit .wp-block-button__link::after,
.entete .wp-block-button.btn .wp-block-button__link::after { width: 36px; height: 36px; }
.wp-block-button.btn-petit .wp-block-button__link::before,
.entete .wp-block-button.btn .wp-block-button__link::before { right: 5px; width: 36px; height: 36px; margin-top: -18px; -webkit-mask-size: 15px; mask-size: 15px; }

.wp-block-button.btn-mini .wp-block-button__link { height: 36px; padding: 0 16px; font-size: 12.5px; box-shadow: none; }

/* ---------- formulaire Contact Form 7 ---------- */
.formulaire .wpcf7 { margin: 0; }
.formulaire .wpcf7-form { margin: 0; }
.champ { text-align: left; }
.champ .champ-nom { position: absolute; left: 16px; top: 14px; z-index: 1; font-size: 13px; color: #8E938F; pointer-events: none; }
.champ .wpcf7-form-control-wrap { position: static; display: block; font-size: inherit; color: inherit; pointer-events: auto; }
.champ .wpcf7-not-valid-tip { position: static; display: block; margin-top: 6px; font-size: 12px; color: #B3261E; pointer-events: auto; }
.champ input.wpcf7-not-valid, .champ textarea.wpcf7-not-valid { border-color: #B3261E; }
.formulaire .wpcf7-spinner { display: none; }
.formulaire .wpcf7-response-output { margin: 18px 0 0 !important; padding: 12px 16px !important; border-radius: 6px; font-size: 13.5px; text-align: left; }
.formulaire .wpcf7-form.sent .wpcf7-response-output { border-color: var(--petrole) !important; color: var(--texte); background: rgba(64,144,149,.08); }
.formulaire .wpcf7-form.invalid .wpcf7-response-output, .formulaire .wpcf7-form.failed .wpcf7-response-output { border-color: #B3261E !important; }
.formulaire input.btn-envoi {
  height: 54px; padding: 0 64px 0 26px;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 500 14.5px/1 var(--grotesque); letter-spacing: -0.01em; color: #fff;
  background: var(--prune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23fff'/%3E%3Cpath d='M14 21h14M23 15l6 6-6 6' fill='none' stroke='%236A0461' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 42px no-repeat;
  box-shadow: 0 10px 24px -12px rgba(106,4,97,.6);
  transition: background-color .25s;
}
.formulaire input.btn-envoi:hover { background-color: var(--prune-fonce); }

/* ---------- pied de page ---------- */
.pied-sociaux.wp-block-social-links { gap: 10px; margin: 0; padding: 0; }
.pied-sociaux .wp-social-link { margin: 0; background: transparent; border: 1px solid rgba(255,255,255,.2); color: #fff; }
.pied-sociaux .wp-social-link a { padding: 8px; }
.pied-sociaux .wp-social-link svg { width: 16px; height: 16px; }
.pied-sociaux .wp-social-link-whatsapp { background: #25D366; border-color: #25D366; }
.whatsapp-flottant a { position: absolute; inset: 0; border-radius: 50%; font-size: 0; color: transparent; z-index: 2; }
.whatsapp-flottant::after {
  content: ""; width: 28px; height: 28px; background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}

/* ---------- adaptatif ---------- */
@media (max-width: 1080px) {
  /* le bloc Boutons pose display:flex en (0,2,0) via sa mise en page : on qualifie */
  .wp-block-buttons.entete-actions { display: none; }
  .wp-block-navigation.menu-principal .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .wp-block-navigation.menu-principal .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
@media (max-width: 900px) {
  .wp-block-image.hero-diane, .wp-block-image.bande-diane-photo { height: auto; }
  .wp-block-image.hero-diane { margin: 28px auto 0; }
  .wp-block-image.bande-diane-photo { margin: 30px auto 0; }
  .valeur.avec-valeur-ico::before { margin: 0 auto; }
}
@media (max-width: 600px) {
  .wp-block-image.bulle-diane { margin-top: 14px; }
  .wp-block-button.btn .wp-block-button__link { height: 52px; padding: 0 6px 0 24px; gap: 14px; font-size: 15px; }
  .avis-scene.avec-avis-guillemet::after { top: 258px; width: 60px; height: 60px; background-size: 24px; }
  .whatsapp-flottant::after { width: 25px; height: 25px; }
}

/* ---------- icônes générées depuis scripts/icones.js ---------- */
.ico-fleche, .btn-ico-fleche { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ico-diag, .btn-ico-diag { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.ico-wa, .btn-ico-wa { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E"); }
.ico-insta, .btn-ico-insta { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.6' fill='%23000'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.6' fill='%23fff'/%3E%3C/svg%3E"); }
.ico-tel, .btn-ico-tel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.ico-mail, .btn-ico-mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ico-pin, .btn-ico-pin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.ico-surface, .btn-ico-surface { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 9V5h4M21 9V5h-4M3 15v4h4M21 15v4h-4'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 9V5h4M21 9V5h-4M3 15v4h4M21 15v4h-4'/%3E%3C/svg%3E"); }
.ico-lit, .btn-ico-lit { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6M3 15h18M6 10V7a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6M3 15h18M6 10V7a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E"); }
.ico-terrain, .btn-ico-terrain { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22v-6M7 16h10l-5-12z'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22v-6M7 16h10l-5-12z'/%3E%3C/svg%3E"); }
.ico-coeur, .btn-ico-coeur { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.ico-bouclier, .btn-ico-bouclier { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 5 6v5c0 4.4 3 8.3 7 10 4-1.7 7-5.6 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 5 6v5c0 4.4 3 8.3 7 10 4-1.7 7-5.6 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ico-oreille, .btn-ico-oreille { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 20a4 4 0 0 0 4-4c0-2 3-3 3-7a5 5 0 0 0-10 0'/%3E%3Cpath d='M10 9a2 2 0 0 1 4 0'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 20a4 4 0 0 0 4-4c0-2 3-3 3-7a5 5 0 0 0-10 0'/%3E%3Cpath d='M10 9a2 2 0 0 1 4 0'/%3E%3C/svg%3E"); }
.ico-carte, .btn-ico-carte { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E"); }
.ico-guillemet, .btn-ico-guillemet { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10 7H6a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3v1a3 3 0 0 1-3 3M20 7h-4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3v1a3 3 0 0 1-3 3'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10 7H6a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3v1a3 3 0 0 1-3 3M20 7h-4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3v1a3 3 0 0 1-3 3'/%3E%3C/svg%3E"); }
.ico-fleche-g, .btn-ico-fleche-g { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.ico-horloge, .btn-ico-horloge { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); --ico-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* gabarits sans bande photo (404, blog) : l'en-tête blanc a besoin d'un fond */
.page-simple { padding: 200px 0 120px; background: linear-gradient(180deg, var(--encre) 0 150px, var(--blanc) 150px); }
.page-simple h1 { font-size: clamp(36px, 4.5vw, 64px); margin-bottom: 20px; }
.page-simple .wp-block-buttons { margin-top: 30px; }