/*
Theme Name: The Fold
Theme URI: https://thefold.fr
Author: The Fold
Author URI: https://thefold.fr
Description: Thème bloc sur mesure de l'agence The Fold (La Garnache, Vendée). Contenu 100 % en blocs natifs, modifiable dans l'éditeur.
Version: 1.0.12
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-fold
Tags: block-theme, full-site-editing, dark, accessibility-ready
*/

/* Généré par scripts/theme_css.py — ne pas modifier à la main :
   modifier site/styles.css (maquette) ou theme/src/blocs.css, puis relancer le script. */

/* ==========================================================
   The Fold — maquette (phase 2)
   Registre relevé sur la référence Framer : noir grainé, or,
   Fjalla One en capitales, Inter Display, Instrument Serif.
   ========================================================== */

:root {
  --noir: #141414;
  --noir-pur: #000000;
  --anthracite: #28292e;
  --blanc: #f2f2f2;
  --texte: rgba(242, 242, 242, .9);
  --or: #efbb3b;
  --corail: #e5533d;

  --f-titre: "Fjalla One", "Arial Narrow", sans-serif;
  --f-texte: "Inter", system-ui, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;

  --gouttiere: 40px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--texte);
  font-family: var(--f-texte);
  font-variation-settings: "opsz" 32;
  font-size: calc(16px * var(--texte-echelle, 1));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html { overflow-x: clip; }

/* grain de la référence : tuile 250 px à 4 % d'opacité.
   Posé SOUS le contenu (z-index -1) : il ne texture que le fond noir,
   jamais les photos, les cartes or ni la bande blanche. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url(assets/img/grain.png) repeat 0 0 / 250px auto;
  opacity: .04;
}

body img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.titre {
  font-family: var(--f-titre);
  text-transform: uppercase;
  color: var(--blanc);
  hyphens: none;
  text-wrap: balance;
}

/* phrases en capitales qui mêlent Inter gras et Instrument Serif */
.mixte {
  font-family: var(--f-texte);
  font-weight: 700;
  font-size: calc(18px * var(--texte-echelle, 1));
  line-height: calc(26px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--texte);
}
.mixte .s {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: .5px;
}

.corps {
  font-size: calc(22px * var(--texte-echelle, 1));
  line-height: calc(34px * var(--texte-echelle, 1));
  letter-spacing: .5px;
  color: var(--texte);
}
.corps + .corps { margin-top: 34px; }
.corps strong { color: var(--blanc); font-weight: 700; }

.avec-trait::after {
  display: block;
  width: 180px;
  height: auto;
}

.sticker {
  position: absolute;
  width: 140px;
  pointer-events: none;
  z-index: 3;
}

/* ---------- boutons ---------- */
.bouton .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 60px;
  font-family: var(--f-texte);
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  line-height: calc(16px * var(--texte-echelle, 1));
  letter-spacing: .2px;
  text-transform: uppercase;
  padding: 12px 22px;
  cursor: pointer;
  border: 0;
  transition: transform .25s ease, background-color .25s ease;
}
.bouton .wp-block-button__link:hover { transform: translateY(-2px); }
.bouton--noir .wp-block-button__link { background: var(--noir-pur); color: var(--blanc); }
.bouton--or .wp-block-button__link {
  background: var(--or) url(assets/img/or.png) center / cover;
  color: var(--noir-pur);
  border: 3px solid var(--noir-pur);
  box-shadow: 0 0 0 3px var(--or);
}

/* ---------- en-tête ---------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 10px var(--gouttiere);
  transition: background-color .35s ease, backdrop-filter .35s ease;
}
.entete.defile {
  background: rgba(20, 20, 20, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  font-family: var(--f-titre);
  font-size: calc(31px * var(--texte-echelle, 1));
  line-height: calc(36px * var(--texte-echelle, 1));
  letter-spacing: 2px;
  color: #fff;
}
body .marque img { width: 40px; height: 40px; }

.menu-bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  color: #fff;
  font-family: var(--f-titre);
  font-size: calc(24px * var(--texte-echelle, 1));
  letter-spacing: -.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 0;
}
.menu-bouton i {
  font-style: normal;
  display: grid;
  gap: 5px;
  width: 26px;
}
.menu-bouton i::before, .menu-bouton i::after {
  content: "";
  height: 2px;
  background: currentColor;
}


/* ---------- héros ---------- */
.heros {
  position: relative;
  height: 100vh;
  min-height: 720px;
  display: grid;
  place-items: center;
  padding: 90px 0 70px;
  overflow: hidden;
}
.heros-centre { position: relative; z-index: 2; text-align: center; }
.heros-marque {
  font-size: 200px;
  line-height: 218px;
  letter-spacing: -7px;
  text-align: center;
}
.heros-promesse { margin: 26px auto 0; max-width: 820px; text-align: center; text-wrap: balance; }
.heros-cible { display: block; margin-top: 4px; color: rgba(242, 242, 242, .72); }
.heros-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

body .heros-stickers img {
  position: absolute;
  width: var(--t, 140px);
  left: var(--x);
  top: var(--y);
  transform: rotate(var(--r, 0deg));
  animation: flotte 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  z-index: 1;
}
@keyframes flotte {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

.heros-lieu {
  position: absolute;
  left: var(--gouttiere);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-titre);
  font-size: calc(24px * var(--texte-echelle, 1));
  line-height: calc(23px * var(--texte-echelle, 1));
  letter-spacing: -.5px;
  text-transform: uppercase;
  color: var(--blanc);
  z-index: 2;
}
.heros-lieu svg { width: 24px; height: 24px; }

.heros-expertises {
  position: absolute;
  right: var(--gouttiere);
  bottom: 30px;
  z-index: 2;
  width: 198px;
  height: 68px;
  border-radius: 10px;
  background: var(--or) url(assets/img/or.png) center / cover;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  font-family: var(--f-titre);
  font-size: calc(24px * var(--texte-echelle, 1));
  line-height: calc(23px * var(--texte-echelle, 1));
  letter-spacing: -.5px;
  text-transform: uppercase;
  color: var(--noir-pur);
  overflow: hidden;
  transition: transform .25s;
}
.heros-expertises:hover { transform: translateY(-3px); }
.heros-expertises .apercus {
  position: relative;
  width: 73px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--noir-pur);
}
body .heros-expertises .apercus img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: defile-apercu 6s steps(1) infinite;
  opacity: 0;
}
body .heros-expertises .apercus img:nth-child(1) { animation-delay: 0s; }
body .heros-expertises .apercus img:nth-child(2) { animation-delay: -4s; }
body .heros-expertises .apercus img:nth-child(3) { animation-delay: -2s; }
@keyframes defile-apercu {
  0% { opacity: 1; }
  33.33% { opacity: 0; }
}

/* ---------- photo pleine largeur qui s'ouvre au défilement ---------- */
.plein-cadre {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}
body .plein-cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(var(--ouv, 8%) round calc(var(--ouv, 8%) * 3));
  scale: calc(1.12 - var(--p, 0) * .12);
  transition: clip-path .1s linear;
}

/* ---------- qui sommes-nous ---------- */
.agence {
  display: grid;
  grid-template-columns: 626px 734px;
  gap: 0 0;
  justify-content: space-between;
  padding: 160px var(--gouttiere) 160px;
}
.agence-titre { position: sticky; top: 140px; align-self: start; }
.agence-titre h2 {
  font-size: 100px;
  line-height: 100px;
  letter-spacing: -2.3px;
}
.typo-machine .machine {
  display: block;
  color: var(--corail);
  min-height: 100px;
}
.typo-machine .machine::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: .78em;
  margin-left: 6px;
  background: var(--corail);
  vertical-align: -.02em;
  animation: curseur 1s steps(1) infinite;
}
@keyframes curseur { 50% { opacity: 0; } }
.agence-titre .avec-trait::after { margin-top: 26px; width: 272px; }

.agence-texte { position: relative; }
.agence-texte h3 {
  font-family: var(--f-titre);
  font-size: calc(28px * var(--texte-echelle, 1));
  line-height: calc(28px * var(--texte-echelle, 1));
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 26px;
}
.agence-texte h3:not(:first-child) { margin-top: 62px; }
.agence-texte .sticker { width: 125px; left: 270px; top: -70px; transform: rotate(8deg); }

/* ---------- logos clients ---------- */
.logos {
  background: #fff;
  padding: 200px 0;
  overflow: hidden;
}
.defilant {
  display: flex;
  width: max-content;
  animation: defile 40s linear infinite;
}
.defilant > * { flex: none; }
.logos-liste {
  display: flex;
  align-items: center;
  gap: 110px;
  padding-right: 110px;
}
body .logos-liste img {
  height: 50px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
}
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- sauce secrète ---------- */
.sauce {
  position: relative;
  padding: 140px var(--gouttiere) 180px;
  text-align: center;
}
.sauce h2 {
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -1px;
  text-transform: none;
}
.sauce .sticker { width: 145px; right: 13%; top: 80px; transform: rotate(-10deg); }
.sauce .mixte { max-width: 900px; margin: 60px auto 0; }
.etapes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 93px;
  max-width: 1266px;
  margin: 110px auto 0;
}
.etape {
  position: relative;
  padding: 90px 20px 110px;
}
/* équerres aux quatre coins */
.etape::before, .etape::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --c: rgba(242, 242, 242, .35);
  background:
    linear-gradient(var(--c), var(--c)) top left / 18px 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px 18px,
    linear-gradient(var(--c), var(--c)) top right / 18px 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px 18px,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 18px,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 18px;
  background-repeat: no-repeat;
}
.etape::after { display: none; }
.etape-icone {
  width: 60px;
  height: 60px;
  margin: 0 auto 40px;
  border-radius: 10px;
  background: var(--or) url(assets/img/or.png) center / cover;
  display: grid;
  place-items: center;
  color: var(--noir-pur);
}
.etape-icone svg { width: 28px; height: 28px; }
.etape-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  line-height: calc(18px * var(--texte-echelle, 1));
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 26px;
}
.etape-etiquette::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: inset 0 0 0 3px var(--noir), inset 0 0 0 4px var(--or);
}
.etape .titre {
  font-size: 40px;
  line-height: 52px;
  letter-spacing: -1px;
}

/* ---------- expertises ---------- */
.expertises { padding: 60px var(--gouttiere) 180px; }
.expertises-tete {
  display: grid;
  grid-template-columns: 680px 680px;
  justify-content: space-between;
  align-items: end;
}
.gros {
  font-size: 130px;
  line-height: 120px;
  letter-spacing: -1.5px;
}
.expertises-tete .mixte { padding-bottom: 12px; }

.expertises-corps {
  display: grid;
  grid-template-columns: 620px 690px;
  justify-content: space-between;
  align-items: start;
  margin-top: 80px;
}
.cadre {
  background: var(--noir);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 0 0 1px rgba(242, 242, 242, .08);
}
.expertises-photos {
  position: sticky;
  top: 120px;
  height: 542px;
}
.expertises-photos .pile {
  position: relative;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
body .expertises-photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .5s ease, transform .8s ease;
}
body .expertises-photos img.actif { opacity: 1; transform: none; }

.accordeon { padding: 10px; }
.expertise + .expertise { margin-top: 2px; }
.expertise-onglet {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .9);
  font-family: var(--f-texte);
  font-variation-settings: "opsz" 32;
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  line-height: calc(21px * var(--texte-echelle, 1));
  letter-spacing: .2px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.expertise-onglet::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: inset 0 0 0 3px var(--noir), inset 0 0 0 4px var(--or);
}
.expertise-carte {
  display: none;
  background: var(--or) url(assets/img/or.png) center / cover;
  border-radius: 12px;
  padding: 10px 10px 30px;
  color: var(--noir-pur);
}
.expertise.ouvert .expertise-onglet { display: none; }
.expertise.ouvert .expertise-carte { display: block; animation: apparait .45s ease; }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } }

.bandeau {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--noir-pur);
  border-radius: 10px;
  min-height: 95px;
  padding: 10px 24px 10px 12px;
}
body .bandeau .picto img { width: 76px; height: 76px; object-fit: contain; }
.bandeau-titre {
  position: relative;
  font-family: var(--f-titre);
  font-size: 40px;
  line-height: calc(40px * var(--texte-echelle, 1));
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--blanc);
}
.bandeau-titre.avec-trait::after {
  position: absolute;
  left: 20px;
  top: 100%;
  width: 137px;
  margin-top: -2px;
}
.expertise-carte p {
  font-weight: 600;
  font-size: calc(15px * var(--texte-echelle, 1));
  line-height: calc(24px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  padding: 26px 20px 0;
}
.expertise-carte .bouton .wp-block-button__link { display: flex; width: max-content; margin: 26px auto 0; }

/* ---------- grands titres éditoriaux ---------- */
.manifeste {
  position: relative;
  display: grid;
  grid-template-columns: 462px 1fr;
  align-items: end;
  gap: 40px;
  padding: 120px var(--gouttiere) 70px;
}
.manifeste .gros { text-align: right; }
.manifeste .avec-trait::after { width: 150px; margin: 10px 20px 0 auto; }
.manifeste-titre { position: relative; }
.manifeste .sticker { width: 130px; right: 560px; top: -6px; transform: rotate(-8deg); }

.bande-or {
  position: relative;
  z-index: 2;
  background: var(--or) url(assets/img/or-bande.png) center / cover;
  overflow: hidden;
  height: 42px;
  display: flex;
  align-items: center;
}
.bande-or .defilant { animation-duration: 60s; }
.bande-or .defilant > p {
  padding-right: 6px;
  font-size: calc(13px * var(--texte-echelle, 1));
  line-height: calc(22px * var(--texte-echelle, 1));
  letter-spacing: .2px;
  color: var(--noir-pur);
  white-space: nowrap;
}

.photo-bord {
  height: 900px;
  max-height: 100vh;
  overflow: hidden;
}
body .photo-bord img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 40%;
  transform: translateY(calc(var(--p, 0) * -9%));
}

/* ---------- équipe ---------- */
.equipe { padding: 160px var(--gouttiere) 160px; }
.equipe-tete {
  display: grid;
  grid-template-columns: 762px 598px;
  justify-content: space-between;
  align-items: center;
}
.equipe-tete .avec-trait::after { width: 272px; margin: -26px 0 0 190px; }
.equipe-corps {
  display: grid;
  grid-template-columns: 694px 366px;
  justify-content: space-between;
  align-items: center;
  margin-top: 120px;
  padding-right: 120px;
}
.equipe-corps h3 {
  font-family: var(--f-titre);
  font-size: calc(28px * var(--texte-echelle, 1));
  line-height: calc(28px * var(--texte-echelle, 1));
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 26px;
}
.equipe-corps h3:not(:first-child) { margin-top: 56px; }
.signature { width: 170px; margin: 50px 0 0 110px; }
.portrait {
  position: relative;
  border-radius: 30px;
  padding: 10px;
  height: 370px;
}
body .portrait .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.portrait .sticker { width: 118px; right: -52px; top: -66px; transform: rotate(10deg); }

.reinvente {
  display: grid;
  grid-template-columns: 898px 462px;
  justify-content: space-between;
  align-items: end;
  padding: 60px var(--gouttiere) 70px;
}
.reinvente .mixte { padding-bottom: 8px; }

/* ---------- contact ---------- */
.contact { padding: 180px var(--gouttiere) 160px; }
.carte-or {
  background: var(--or) url(assets/img/or.png) center / cover;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 0 0 10px var(--noir), 0 0 0 11px rgba(242, 242, 242, .08);
}
.contact .carte-or { max-width: 1088px; margin: 0 auto; }
.contact .bandeau { gap: 30px; padding-left: 16px; }
body .contact .bandeau .picto img { width: 75px; height: 75px; }
.contact-corps {
  display: grid;
  grid-template-columns: 445px 400px;
  justify-content: center;
  gap: 60px;
  margin-top: 10px;
  background: var(--noir);
  border-radius: 5px;
  padding: 50px 60px;
}
.contact-texte { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; }
.contact-texte .bouton .wp-block-button__link { align-self: center; }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.formulaire input, .formulaire textarea {
  width: 100%;
  border: 0;
  border-radius: 60px;
  padding: 18px 22px;
  font: 500 calc(15px * var(--texte-echelle, 1))/1.4 var(--f-texte);
  font-variation-settings: "opsz" 32;
  background: #fff;
  color: var(--noir);
}
.formulaire textarea {
  grid-column: 1 / -1;
  height: 370px;
  resize: vertical;
  border-radius: 26px;
}
.formulaire ::placeholder { color: #a9a9a9; }
.formulaire input[type="submit"] {
  grid-column: 1 / -1;
  border: 0;
  border-radius: 60px;
  padding: 20px;
  background: var(--or) url(assets/img/or.png) center / cover;
  font: 600 calc(16px * var(--texte-echelle, 1))/1 var(--f-texte);
  color: var(--noir-pur);
  cursor: pointer;
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: 449px 680px;
  justify-content: space-between;
  gap: 60px;
  padding: 60px 116px 180px 116px;
}
.faq-titre { position: sticky; top: 120px; align-self: start; }
.faq-titre h2 { font-size: 70px; line-height: 70px; letter-spacing: -2.3px; }
.faq-titre .avec-trait::after { width: 150px; margin: 6px 0 0 150px; }
.question { border-bottom: 1px solid rgba(242, 242, 242, .1); }
.question summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 22px;
  gap: 30px;
  align-items: start;
  padding: 26px 0;
  cursor: pointer;
  font-size: calc(24px * var(--texte-echelle, 1));
  line-height: calc(30px * var(--texte-echelle, 1));
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--blanc);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border: 2px solid var(--blanc);
  border-radius: 4px;
  background:
    linear-gradient(var(--blanc), var(--blanc)) center / 8px 2px no-repeat,
    linear-gradient(var(--blanc), var(--blanc)) center / 2px 8px no-repeat;
  transition: transform .3s;
}
.question[open] summary::after {
  transform: rotate(45deg);
  background: var(--or);
  border-color: var(--or);
}
.question p {
  padding: 0 52px 30px 0;
  font-size: calc(18px * var(--texte-echelle, 1));
  line-height: calc(30px * var(--texte-echelle, 1));
  color: var(--texte);
}

/* ---------- pied de page ---------- */
.pied { padding: 0 var(--gouttiere) 40px; }
.pied .carte-or { box-shadow: none; padding: 16px; }
.pied .bandeau {
  min-height: 72px;
  justify-content: space-between;
  padding: 0 22px;
}
.pied .bandeau-titre { font-size: calc(26px * var(--texte-echelle, 1)); line-height: calc(30px * var(--texte-echelle, 1)); letter-spacing: -.4px; }
.pied .bandeau-titre.avec-trait::after { width: 100px; left: auto; right: -36px; top: 40%; }
.pied-bandeau-droite { display: flex; align-items: center; gap: 12px; }
.pied-bandeau-droite svg { width: 24px; height: 24px; }

.pied-corps {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  padding: 36px 38px 0;
  color: var(--noir-pur);
}
.pied-marque {
  font-family: var(--f-titre);
  font-size: 124px;
  line-height: 114px;
  letter-spacing: -2.5px;
  text-transform: uppercase;
}
.pied-accroche {
  position: relative;
  display: inline-block;
  margin-top: 40px;
  font-family: var(--f-titre);
  font-size: 50px;
  line-height: calc(50px * var(--texte-echelle, 1));
  letter-spacing: -1px;
  text-transform: uppercase;
  color: #fff;
}
body .pied-accroche img {
  position: absolute;
  width: 127px;
  left: 190px;
  top: 90px;
  transform: rotate(6deg);
}
.pied-cta { display: flex; margin-top: 40px; }
.pied-cta .bouton .wp-block-button__link {
  font-size: calc(18px * var(--texte-echelle, 1));
  line-height: calc(20px * var(--texte-echelle, 1));
  padding: 16px 30px;
  background: var(--noir-pur);
  color: var(--blanc);
  box-shadow: 0 0 0 3px var(--noir-pur), 0 0 0 6px var(--or), 0 0 0 8px var(--noir-pur);
}
.reseaux { display: flex; gap: 18px; margin-top: 40px; }
.reseaux a { width: 22px; height: 22px; color: var(--noir-pur); }
.reseaux svg { width: 100%; height: 100%; }

.pied-liens {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-top: 26px;
  font-family: var(--f-titre);
  font-size: calc(26px * var(--texte-echelle, 1));
  line-height: calc(30px * var(--texte-echelle, 1));
  letter-spacing: -.4px;
  text-transform: uppercase;
}
.pied-liens a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied-liens .accueil { display: flex; align-items: center; gap: 10px; margin-top: 44px; }
.pied-liens .accueil svg { width: 22px; height: 22px; }

.pied-bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 60px 38px 8px;
  color: var(--noir-pur);
}
.pied-bas .legal { font-size: calc(16px * var(--texte-echelle, 1)); }
.pied-bas .legal a:hover { text-decoration: underline; }
.pied-bas .droite {
  display: flex;
  gap: 60px;
  font-family: var(--f-titre);
  font-size: calc(26px * var(--texte-echelle, 1));
  line-height: calc(30px * var(--texte-echelle, 1));
  letter-spacing: -.4px;
  text-transform: uppercase;
}

/* ---------- apparition au défilement ---------- */
.revele { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; }
.revele.vu { opacity: 1; transform: none; }

/* ==========================================================
   Adaptatif
   ========================================================== */
@media (max-width: 1400px) {
  .agence { grid-template-columns: minmax(0, 1fr) minmax(0, 734px); gap: 60px; }
  .expertises-tete, .equipe-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 40px; }
  .expertises-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; }
  .equipe-corps { grid-template-columns: minmax(0, 1fr) 366px; gap: 60px; padding-right: 60px; }
  .reinvente { grid-template-columns: minmax(0, 1fr) minmax(0, 462px); gap: 40px; }
  .faq { grid-template-columns: minmax(0, 449px) minmax(0, 680px); padding-inline: var(--gouttiere); }
}

@media (max-width: 1100px) {
  .heros-marque { font-size: 150px; line-height: 160px; letter-spacing: -5px; }
  .gros { font-size: 96px; line-height: 92px; }
  .expertises-tete, .equipe-tete, .reinvente, .manifeste { grid-template-columns: 1fr; }
  .manifeste .gros { text-align: left; }
  .manifeste-titre { order: -1; }
  .manifeste .avec-trait::after { margin-left: 0; }
  .manifeste .sticker { right: 0; top: -70px; }
  .equipe-tete .avec-trait::after { margin-left: 100px; }
  .etapes { gap: 24px; }
  .contact-corps { grid-template-columns: 1fr 1fr; padding: 40px; }
}

@media (max-width: 820px) {
  :root { --gouttiere: 16px; }
  .marque { font-size: calc(26px * var(--texte-echelle, 1)); }
  body .marque img { width: 32px; height: 32px; }
  .menu-bouton { font-size: calc(20px * var(--texte-echelle, 1)); }

  .heros { min-height: 640px; }
  .heros-marque { font-size: 118px; line-height: 118px; letter-spacing: -4px; }
  .heros .mixte { font-size: calc(14px * var(--texte-echelle, 1)); line-height: calc(20px * var(--texte-echelle, 1)); padding: 0 10px; }
  .heros-actions { flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
  body .heros-stickers img { width: calc(var(--t, 140px) * .55); }
  .heros { padding: 80px 0 90px; }
  .heros-lieu { font-size: calc(18px * var(--texte-echelle, 1)); bottom: 24px; }
  .heros-lieu svg { width: 18px; }

  .plein-cadre { height: 70vh; }

  .agence { grid-template-columns: 1fr; padding-block: 100px; gap: 50px; }
  .agence-titre { position: static; }
  .agence-titre h2 { font-size: 64px; line-height: 64px; letter-spacing: -1.5px; }
  .typo-machine .machine { min-height: 64px; }
  .agence-titre .avec-trait::after { width: 180px; }
  .agence-texte .sticker { width: 90px; left: auto; right: 0; top: -40px; }
  .corps { font-size: calc(18px * var(--texte-echelle, 1)); line-height: calc(29px * var(--texte-echelle, 1)); }
  .corps + .corps { margin-top: 24px; }

  .logos { padding: 90px 0; }
  .logos-liste { gap: 60px; padding-right: 60px; }
  body .logos-liste img { height: 36px; }

  .sauce { padding-block: 100px 110px; }
  .sauce h2 { font-size: 40px; line-height: calc(44px * var(--texte-echelle, 1)); }
  .sauce .sticker { width: 90px; right: 4%; top: 40px; }
  .mixte { font-size: calc(15px * var(--texte-echelle, 1)); line-height: calc(23px * var(--texte-echelle, 1)); }
  .etapes { grid-template-columns: 1fr; gap: 20px; margin-top: 60px; }
  .etape { padding: 50px 20px 60px; }
  .etape .titre { font-size: calc(34px * var(--texte-echelle, 1)); line-height: calc(44px * var(--texte-echelle, 1)); }

  .gros { font-size: 52px; line-height: 52px; letter-spacing: -1px; }
  .mixte br { display: none; }
  body .heros-stickers img:nth-child(3), body .heros-stickers img:nth-child(7), body .heros-stickers img:nth-child(8), body .heros-stickers img:nth-child(9) { display: none; }
  .expertises { padding-bottom: 100px; }
  .expertises-corps { grid-template-columns: 1fr; margin-top: 50px; gap: 16px; }
  .expertises-photos { position: relative; top: 0; height: 300px; }
  .bandeau { min-height: 76px; gap: 12px; }
  body .bandeau .picto img { width: 56px; height: 56px; }
  .bandeau-titre { font-size: calc(28px * var(--texte-echelle, 1)); line-height: calc(30px * var(--texte-echelle, 1)); }
  .expertise-carte p { padding: 22px 8px 0; }

  .manifeste { padding-top: 80px; gap: 30px; }
  .manifeste .sticker { width: 80px; top: -60px; right: 0; }
  .photo-bord { height: 70vh; }

  .equipe { padding-block: 100px; }
  .equipe-tete .avec-trait::after { width: 180px; margin: -14px 0 0 90px; }
  .equipe-corps { grid-template-columns: 1fr; padding-right: 0; margin-top: 60px; gap: 80px; }
  .equipe-corps h3 { font-size: calc(24px * var(--texte-echelle, 1)); line-height: calc(26px * var(--texte-echelle, 1)); }
  .portrait { width: min(100%, 366px); justify-self: center; }
  .portrait .sticker { width: 90px; right: -10px; top: -50px; }
  .signature { margin-left: 40px; }

  .contact { padding-block: 100px; }
  .carte-or { box-shadow: none; }
  .contact .bandeau { gap: 12px; }
  body .contact .bandeau .picto img { width: 50px; height: 50px; }
  .contact .bandeau-titre { font-size: calc(24px * var(--texte-echelle, 1)); line-height: calc(26px * var(--texte-echelle, 1)); }
  .contact-corps { grid-template-columns: 1fr; padding: 28px 18px; gap: 40px; }
  .formulaire { grid-template-columns: 1fr; }
  .formulaire textarea { height: 220px; }

  .faq { grid-template-columns: 1fr; padding: 40px var(--gouttiere) 100px; gap: 30px; }
  .faq-titre { position: static; }
  .faq-titre h2 { font-size: 54px; line-height: 54px; }
  .question summary { font-size: calc(19px * var(--texte-echelle, 1)); line-height: calc(26px * var(--texte-echelle, 1)); gap: 16px; }
  .question p { font-size: calc(16px * var(--texte-echelle, 1)); line-height: calc(26px * var(--texte-echelle, 1)); padding-right: 0; }

  .pied .carte-or { padding: 8px; }
  .pied .bandeau { flex-wrap: wrap; gap: 10px; padding: 14px; }
  .pied .bandeau-titre { font-size: calc(20px * var(--texte-echelle, 1)); line-height: calc(22px * var(--texte-echelle, 1)); }
  .pied .bandeau-titre.avec-trait::after { display: none; }
  .pied-corps { grid-template-columns: 1fr; padding: 26px 14px 0; }
  .pied-marque { font-size: 80px; line-height: 76px; }
  .pied-accroche { font-size: calc(36px * var(--texte-echelle, 1)); line-height: calc(38px * var(--texte-echelle, 1)); }
  body .pied-accroche img { width: 80px; left: auto; right: -70px; top: 30px; }
  .pied-liens { font-size: calc(22px * var(--texte-echelle, 1)); line-height: calc(26px * var(--texte-echelle, 1)); }
  .pied-liens .accueil { margin-top: 10px; }
  .pied-bas { flex-direction: column; align-items: flex-start; padding: 40px 14px 8px; }
  .pied-bas .droite { gap: 30px; font-size: calc(20px * var(--texte-echelle, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revele { opacity: 1; transform: none; }
}

/* ==========================================================
   Passe UX B2B — composants ajoutés, même registre
   ========================================================== */

.evitement {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 80;
  padding: 10px 16px;
  border-radius: 60px;
  background: var(--or);
  color: var(--noir-pur);
  font-weight: 700;
}
.evitement:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* ---- en-tête : navigation visible + appel permanent ---- */
.nav-principale {
  display: flex;
  gap: 34px;
  margin-left: auto;
}
.nav-principale a, .pied-nav a {
  font-family: var(--f-titre);
  font-size: calc(20px * var(--texte-echelle, 1));
  line-height: calc(24px * var(--texte-echelle, 1));
  letter-spacing: -.3px;
  text-transform: uppercase;
  color: var(--blanc);
  position: relative;
}
.nav-principale a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--or);
  transition: right .3s ease;
}
.nav-principale a:hover::after { right: 0; }
.entete-actions { display: flex; align-items: center; gap: 22px; }
.entete .menu-bouton { display: inline-flex; }
.bouton--petit .wp-block-button__link { padding: 9px 16px; font-size: calc(13px * var(--texte-echelle, 1)); }

.bouton--contour .wp-block-button__link {
  color: var(--blanc);
  box-shadow: inset 0 0 0 2px rgba(242, 242, 242, .45);
  padding: 15px 24px;
}
.bouton--contour .wp-block-button__link:hover { box-shadow: inset 0 0 0 2px var(--or); color: var(--or); }
.heros-actions .bouton--or .wp-block-button__link { padding: 13px 24px; }

.heros-defiler {
  position: absolute;
  right: var(--gouttiere);
  bottom: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-titre);
  font-size: calc(24px * var(--texte-echelle, 1));
  line-height: calc(23px * var(--texte-echelle, 1));
  letter-spacing: -.5px;
  text-transform: uppercase;
  color: var(--blanc);
}
.heros-defiler svg {
  width: 22px;
  height: 22px;
  animation: flotte 2.4s ease-in-out infinite;
}

/* ---- confiance : logos + repères ---- */
.logos { padding: 90px 0 100px; }
.logos-titre {
  margin: 0 0 60px;
  text-align: center;
  font-family: var(--f-texte);
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(20, 20, 20, .55);
}
.reperes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1360px;
  margin: 80px auto 0;
  padding: 0 var(--gouttiere);
  color: var(--noir);
}
.reperes .repere {
  display: grid;
  gap: 8px;
  padding: 6px 30px;
  border-left: 1px solid rgba(20, 20, 20, .15);
}
.reperes .repere:first-child { border-left: 0; }
.reperes .repere-chiffre {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.reperes .repere-texte {
  font-size: calc(15px * var(--texte-echelle, 1));
  line-height: calc(22px * var(--texte-echelle, 1));
  color: rgba(20, 20, 20, .7);
}

/* ---- expertises : livrables et liens ---- */
.expertise-onglet[aria-expanded] { transition: color .2s; }
.expertise-onglet:hover { color: var(--or); }
.livrables {
  list-style: none;
  margin: 18px 20px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.livrables li {
  display: flex;
  gap: 10px;
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  line-height: calc(20px * var(--texte-echelle, 1));
  text-transform: uppercase;
  letter-spacing: .2px;
}
.livrables li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--noir-pur);
}
.carte-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 20px 0;
}
.expertise-carte .carte-actions .bouton .wp-block-button__link { margin: 0; }
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  line-height: calc(20px * var(--texte-echelle, 1));
  text-transform: uppercase;
  letter-spacing: .2px;
  color: var(--noir-pur);
}
.lien-fleche::after {
  content: "→";
  font-family: var(--f-texte);
  transition: transform .25s;
}
.lien-fleche:hover::after { transform: translateX(4px); }
.lien-fleche--clair { color: var(--blanc); margin-top: 40px; }
.lien-fleche--clair:hover { color: var(--or); }

.aussi {
  margin-top: 16px;
  padding: 22px 14px 10px;
  border-top: 1px solid rgba(242, 242, 242, .1);
}
.aussi-titre {
  font-family: var(--f-titre);
  font-size: calc(22px * var(--texte-echelle, 1));
  line-height: calc(24px * var(--texte-echelle, 1));
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 16px;
}
.aussi .aussi-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.aussi .aussi-pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 6px;
  border-radius: 60px;
  background: var(--anthracite);
  font-weight: 600;
  font-size: calc(14px * var(--texte-echelle, 1));
  color: var(--blanc);
}
body .aussi .aussi-pastille img { width: 30px; height: 30px; object-fit: contain; }

/* ---- méthode : une phrase concrète par étape ---- */
.etape h3.titre { font-size: 40px; line-height: 52px; letter-spacing: -1px; }
.etape-texte {
  max-width: 290px;
  margin: 24px auto 0;
  font-size: calc(16px * var(--texte-echelle, 1));
  line-height: calc(25px * var(--texte-echelle, 1));
  color: rgba(242, 242, 242, .72);
}

/* ---- fondateur ---- */
.fondateur {
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: center;
  gap: 50px;
  margin: 80px 0 0;
}
.fondateur .portrait { height: 280px; }
.fondateur .portrait .sticker { width: 100px; right: -40px; top: -52px; }
.fondateur blockquote { margin: 0; }
.fondateur blockquote p {
  font-family: var(--f-titre);
  font-size: calc(30px * var(--texte-echelle, 1));
  line-height: calc(36px * var(--texte-echelle, 1));
  letter-spacing: -.3px;
  text-transform: uppercase;
  color: var(--blanc);
  text-wrap: balance;
}
.fondateur blockquote footer {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  text-transform: uppercase;
  letter-spacing: .3px;
  color: rgba(242, 242, 242, .7);
}
.fondateur .signature { width: 120px; margin: 0; }

/* ---- contact : réassurance + formulaire qualifiant ---- */
.contact-texte { justify-content: flex-start; gap: 34px; }
.garanties {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.garanties li {
  display: flex;
  gap: 12px;
  font-weight: 700;
  font-size: calc(15px * var(--texte-echelle, 1));
  line-height: calc(22px * var(--texte-echelle, 1));
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--blanc);
}
.garanties li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: inset 0 0 0 3px var(--noir), inset 0 0 0 4px var(--or);
}
.contact-direct {
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  border-radius: 10px;
  background: var(--anthracite);
}
.contact-direct-titre {
  font-size: calc(15px * var(--texte-echelle, 1));
  line-height: calc(22px * var(--texte-echelle, 1));
  color: rgba(242, 242, 242, .72);
  margin-bottom: 6px;
}
.contact-direct a {
  font-family: var(--f-titre);
  font-size: calc(30px * var(--texte-echelle, 1));
  line-height: calc(36px * var(--texte-echelle, 1));
  letter-spacing: -.4px;
  text-transform: uppercase;
  color: var(--blanc);
}
.contact-direct a:hover { color: var(--or); }
.contact-note { font-size: calc(15px * var(--texte-echelle, 1)); line-height: calc(22px * var(--texte-echelle, 1)); color: rgba(242, 242, 242, .6); }

.formulaire label { display: block; }
.formulaire label.plein { grid-column: 1 / -1; }
.formulaire label > span:not(.wpcf7-form-control-wrap) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.formulaire select {
  width: 100%;
  appearance: none;
  border: 0;
  border-radius: 60px;
  padding: 18px 50px 18px 22px;
  font: 500 calc(15px * var(--texte-echelle, 1))/1.4 var(--f-texte);
  font-variation-settings: "opsz" 32;
  color: var(--noir);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 20px center / 18px no-repeat;
}
.formulaire textarea { height: 190px; }
.formulaire-note {
  grid-column: 1 / -1;
  font-size: calc(13px * var(--texte-echelle, 1));
  line-height: calc(19px * var(--texte-echelle, 1));
  color: rgba(242, 242, 242, .55);
  text-align: center;
}
.formulaire-note a { text-decoration: underline; }
.contact-corps { grid-template-columns: 445px 440px; }

/* ---- pied ---- */
.pied-nav {
  display: grid;
  gap: 6px;
  margin-top: 30px;
}
.pied-nav a { color: var(--noir-pur); font-size: calc(22px * var(--texte-echelle, 1)); }

/* ---- adaptatif des ajouts ---- */
@media (max-width: 1200px) {
  .nav-principale { display: none; }
  .entete .menu-bouton { display: inline-flex; }
}
@media (max-width: 1100px) {
  .reperes { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .reperes .repere:nth-child(3) { border-left: 0; }
  .fondateur { grid-template-columns: 200px 1fr; gap: 36px; }
  .contact-corps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .entete-actions { gap: 14px; }
  .entete .bouton--petit .wp-block-button__link { display: none; }
  .heros-defiler { font-size: calc(18px * var(--texte-echelle, 1)); bottom: 24px; }
  .logos { padding: 70px 0 70px; }
  .logos-titre { margin-bottom: 40px; }
  .reperes { margin-top: 56px; }
  .reperes .repere { padding: 4px 16px; }
  .reperes .repere-chiffre { font-size: calc(38px * var(--texte-echelle, 1)); line-height: calc(40px * var(--texte-echelle, 1)); }
  .reperes .repere-texte { font-size: calc(13px * var(--texte-echelle, 1)); line-height: calc(19px * var(--texte-echelle, 1)); }
  .carte-actions { flex-direction: column; align-items: flex-start; margin-inline: 8px; }
  .livrables { margin-inline: 8px; }
  .fondateur { grid-template-columns: 1fr; gap: 50px; margin-top: 60px; }
  .fondateur .portrait { width: min(100%, 300px); height: 320px; justify-self: start; }
  .fondateur blockquote p { font-size: calc(24px * var(--texte-echelle, 1)); line-height: calc(30px * var(--texte-echelle, 1)); }
  .contact-corps { grid-template-columns: 1fr; }
  .contact-direct a { font-size: calc(24px * var(--texte-echelle, 1)); line-height: calc(30px * var(--texte-echelle, 1)); }
}

/* ---- appel flottant sur mobile, après le héros ---- */
.cta-mobile { display: none; }
@media (max-width: 820px) {
  .cta-mobile {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 55;
    display: flex;
    gap: 10px;
    transform: translateY(130%);
    transition: transform .4s ease;
  }
  .cta-mobile.visible { transform: none; }
  .cta-mobile .bouton .wp-block-button__link { flex: 1; padding: 15px 18px; }
  .cta-mobile-tel {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    border-radius: 60px;
    background: var(--noir-pur);
    color: var(--or);
    box-shadow: 0 0 0 2px var(--or);
  }
  .cta-mobile-tel .wp-block-button__link::before { width: 22px; height: 22px; }
  .pied { padding-bottom: 90px; }
}

/* ==========================================================
   Réalisations et témoignages
   ========================================================== */

/* contenu à fournir par le client : visible dans la maquette, jamais publié tel quel */
.a-fournir {
  position: relative;
  outline: 1px dashed rgba(239, 187, 59, .7);
  outline-offset: 4px;
  border-radius: 2px;
  color: rgba(242, 242, 242, .55) !important;
}
.a-fournir::before {
  content: "À fournir";
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 60px;
  background: var(--or);
  color: var(--noir-pur);
  font: 700 calc(11px * var(--texte-echelle, 1))/1.6 var(--f-texte);
  letter-spacing: .3px;
  text-transform: uppercase;
  vertical-align: 2px;
}

.realisations { padding: 170px var(--gouttiere) 40px; }
.realisations-tete {
  display: grid;
  grid-template-columns: 680px 560px;
  justify-content: space-between;
  align-items: end;
}
.realisations-tete .lien-fleche--clair { margin-top: 26px; }
.realisations-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 80px;
}
.projet {
  background: var(--noir);
  border-radius: 20px;
  padding: 10px 10px 30px;
  box-shadow: 0 0 0 1px rgba(242, 242, 242, .08);
  transition: transform .35s ease;
}
.projet:hover { transform: translateY(-6px); }
.projet-visuel {
  display: grid;
  place-items: center;
  height: 300px;
  border-radius: 10px;
  background: var(--or) url(assets/img/or.png) center / cover;
  overflow: hidden;
}
body .projet-visuel img {
  width: 62%;
  max-height: 110px;
  object-fit: contain;
  filter: brightness(0);
  transition: transform .5s ease;
}
body .projet:hover .projet-visuel img { transform: scale(1.06); }
.projet-secteur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px 20px 0;
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  line-height: calc(18px * var(--texte-echelle, 1));
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.projet-secteur::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: inset 0 0 0 3px var(--noir), inset 0 0 0 4px var(--or);
}
.projet-titre {
  margin: 12px 20px 0;
  font-family: var(--f-titre);
  font-size: 40px;
  line-height: calc(44px * var(--texte-echelle, 1));
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--blanc);
}
.projet-titre a:hover { color: var(--or); }
.projet-texte {
  margin: 14px 20px 0;
  font-size: calc(16px * var(--texte-echelle, 1));
  line-height: calc(25px * var(--texte-echelle, 1));
  color: rgba(242, 242, 242, .72);
}

.temoignages { padding: 20px var(--gouttiere) 170px; }
.temoignages-tete { position: relative; }
.temoignages-tete h2 { font-size: 70px; line-height: 70px; letter-spacing: -2.3px; }
.temoignages-tete .avec-trait::after { width: 150px; margin: 6px 0 0 190px; }
.temoignages-tete .sticker { width: 120px; left: 420px; top: -20px; transform: rotate(8deg); }
.temoignages-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 70px;
}
.temoignage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  margin: 0;
  padding: 40px 34px 34px;
  border-radius: 20px;
  background: var(--anthracite);
}
.temoignage .temoignage-citation {
  margin: 0;
  font-size: calc(20px * var(--texte-echelle, 1));
  line-height: calc(31px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  color: var(--blanc);
}
.temoignage .temoignage-citation::after {
  content: "»";
  display: block;
  margin-top: 10px;
  font-family: var(--f-titre);
  font-size: 64px;
  line-height: calc(40px * var(--texte-echelle, 1));
  color: var(--or);
}
.temoignage .temoignage-auteur { display: grid; gap: 10px; }
.temoignage .temoignage-nom {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: calc(26px * var(--texte-echelle, 1));
  line-height: calc(30px * var(--texte-echelle, 1));
  text-transform: uppercase;
  color: var(--blanc);
}
.temoignage .temoignage-fonction {
  font-weight: 700;
  font-size: calc(13px * var(--texte-echelle, 1));
  text-transform: uppercase;
  letter-spacing: .3px;
  color: rgba(242, 242, 242, .6);
}

@media (max-width: 1100px) {
  .realisations-tete { grid-template-columns: 1fr; gap: 30px; }
  .realisations-grille, .temoignages-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .realisations { padding-top: 100px; }
  .realisations-grille, .temoignages-grille { grid-template-columns: 1fr; gap: 20px; margin-top: 50px; }
  .projet-visuel { height: 220px; }
  .projet-titre { font-size: calc(32px * var(--texte-echelle, 1)); line-height: calc(36px * var(--texte-echelle, 1)); }
  .temoignages { padding-bottom: 100px; }
  .temoignages-tete h2 { font-size: 54px; line-height: 54px; }
  .temoignages-tete .avec-trait::after { margin-left: 120px; }
  .temoignages-tete .sticker { width: 80px; left: auto; right: 0; top: -40px; }
  .temoignage { padding: 30px 22px 26px; }
}

/* ==========================================================
   V3 — structure épurée (inspiration Rezo), registre The Fold
   Noir grainé + bandes or pleine largeur, Fjalla en capitales.
   ========================================================== */

.or { color: var(--or); }

.section-tete {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, 560px);
  justify-content: space-between;
  align-items: end;
  gap: 40px;
}

/* ---- accueil en deux colonnes ---- */
.accueil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  align-items: center;
  gap: 60px;
  min-height: 100vh;
  padding: 130px var(--gouttiere) 80px;
}
.surtitre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  line-height: calc(18px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .8);
}
.surtitre svg { width: 18px; height: 18px; color: var(--or); }
.accueil-titre {
  margin-top: 26px;
  font-size: 104px;
  line-height: 100px;
  letter-spacing: -2.5px;
}
.accueil-texte .avec-trait::after { width: 220px; margin: 14px 0 0 300px; }
.accueil-intro {
  max-width: 600px;
  margin-top: 30px;
  font-size: calc(20px * var(--texte-echelle, 1));
  line-height: calc(31px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  color: var(--texte);
}
.accueil-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.accueil-actions .bouton--or .wp-block-button__link { padding: 13px 24px; }

.composition {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
}
.composition-disque {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background: var(--or) url(assets/img/or.png) center / cover;
}
body .composition img {
  position: absolute;
  animation: flotte 7s ease-in-out infinite;
}
.composition .c-centre { width: 58%; left: 21%; top: 19%; animation-delay: -1s; }
.composition .c-1 { width: 30%; left: -4%; top: 4%; rotate: -8deg; animation-delay: -3s; }
.composition .c-2 { width: 27%; right: -2%; top: 0; rotate: 8deg; animation-delay: -5s; }
.composition .c-3 { width: 26%; left: -2%; bottom: 8%; rotate: 6deg; animation-delay: -2s; }
.composition .c-4 { width: 26%; right: 0; bottom: 4%; rotate: -6deg; animation-delay: -4s; }
.composition .c-5 { width: 22%; left: 40%; bottom: -6%; animation-delay: -6s; }

/* ---- logos : bande fine ---- */
.logos--fin { padding: 56px 0 64px; }
.logos--fin .logos-titre { margin-bottom: 36px; }

/* ---- services en grille ---- */
.services { padding: 150px var(--gouttiere) 150px; }
.services-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 70px;
}
.service {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 30px;
  border-radius: 20px;
  background: var(--noir);
  box-shadow: 0 0 0 1px rgba(242, 242, 242, .1);
  transition: transform .35s ease, box-shadow .35s ease;
}
.service:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--or); }
.service-picto { width: 130px; height: 130px; object-fit: contain; margin: -6px 0 18px -10px; }
.service-titre {
  font-family: var(--f-titre);
  font-size: calc(32px * var(--texte-echelle, 1));
  line-height: calc(34px * var(--texte-echelle, 1));
  letter-spacing: -.6px;
  text-transform: uppercase;
  color: var(--blanc);
  text-wrap: balance;
}
.service p {
  flex: 1;
  margin-top: 14px;
  font-size: calc(16px * var(--texte-echelle, 1));
  line-height: calc(25px * var(--texte-echelle, 1));
  color: rgba(242, 242, 242, .75);
}
.service .lien-fleche--clair { margin-top: 24px; }
.aussi--ligne {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
  padding: 26px 0 0;
}
.aussi--ligne .aussi-titre { margin: 0; flex: none; }

/* ---- bandes or pleine largeur ---- */
.bande-pleine {
  position: relative;
  background: var(--or) url(assets/img/or.png) center / cover;
  color: var(--noir-pur);
}
.bande-pleine .titre, .bande-pleine .mixte { color: var(--noir-pur); }
.methode { padding: 130px var(--gouttiere) 140px; }
.methode .etapes { max-width: none; margin-top: 70px; gap: 24px; }
.methode .etape { padding: 40px 34px 44px; text-align: left; }
.methode .etape::before { --c: rgba(0, 0, 0, .45); }
.etape-numero {
  font-family: var(--f-titre);
  font-size: 90px;
  line-height: 80px;
  letter-spacing: -2px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--noir-pur);
}
.methode .etape-etiquette { margin: 26px 0 12px; color: var(--noir-pur); }
.methode .etape-etiquette::before {
  background: var(--noir-pur);
  box-shadow: inset 0 0 0 3px var(--or), inset 0 0 0 4px var(--noir-pur);
}
.methode .etape h3.titre { font-size: 40px; line-height: calc(44px * var(--texte-echelle, 1)); }
.methode .etape-texte { max-width: 340px; margin: 20px 0 0; color: rgba(0, 0, 0, .75); }
.methode-sticker { width: 150px; right: 6%; top: -60px; transform: rotate(-10deg); }

.bande-appel {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 170px;
  background: var(--or) url(assets/img/or.png) center / cover;
}
.bande-appel .defilant { animation-duration: 30s; }
.bande-appel .defilant > p {
  padding-right: 30px;
  font-family: var(--f-titre);
  font-size: 96px;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: var(--noir-pur);
  white-space: nowrap;
}
.bande-appel:hover .defilant { animation-play-state: paused; }

/* ---- agence compacte ---- */
.realisations { padding-bottom: 150px; }
.agence-compacte {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 640px);
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  padding: 0 var(--gouttiere) 150px;
}
.agence-photo { position: relative; height: 560px; }
body .agence-photo > figure:not(.sticker) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.agence-photo .sticker { width: 130px; right: -40px; top: -50px; transform: rotate(8deg); }
.agence-contenu h2 { font-size: 90px; line-height: 90px; letter-spacing: -2px; }
.agence-contenu .typo-machine .machine { min-height: 90px; }
.agence-contenu .corps { margin-top: 26px; font-size: calc(20px * var(--texte-echelle, 1)); line-height: calc(31px * var(--texte-echelle, 1)); }
.reperes--sombre {
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 0;
  margin: 40px 0 0;
  padding: 0;
  color: var(--blanc);
}
.reperes--sombre .repere { border-left-color: rgba(242, 242, 242, .15); padding: 2px 24px; }
.reperes--sombre .repere:nth-child(odd) { border-left: 0; padding-left: 0; }
.reperes--sombre .repere-chiffre { font-size: 44px; line-height: calc(46px * var(--texte-echelle, 1)); }
.reperes--sombre .repere-texte { color: rgba(242, 242, 242, .65); }
.agence-signature {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  text-transform: uppercase;
  letter-spacing: .3px;
  color: rgba(242, 242, 242, .7);
}
.agence-signature .signature { width: 120px; margin: 0; }

.temoignages { padding-bottom: 150px; }
.contact { padding-top: 150px; }

/* ---- adaptatif V3 ---- */
@media (max-width: 1250px) {
  .accueil-titre { font-size: 84px; line-height: 82px; }
  .accueil-texte .avec-trait::after { margin-left: 220px; }
  .services-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .accueil { grid-template-columns: 1fr; min-height: 0; }
  .composition { max-width: 520px; justify-self: center; }
  .section-tete { grid-template-columns: 1fr; gap: 30px; }
  .agence-compacte { grid-template-columns: 1fr; }
  .methode .etapes { grid-template-columns: 1fr; }
  .aussi--ligne { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 820px) {
  .accueil { padding: 110px var(--gouttiere) 60px; gap: 40px; }
  .accueil-titre { font-size: 54px; line-height: 54px; letter-spacing: -1.2px; }
  .accueil-texte .avec-trait::after { width: 150px; margin-left: 120px; }
  .accueil-intro { font-size: calc(17px * var(--texte-echelle, 1)); line-height: calc(27px * var(--texte-echelle, 1)); }
  .accueil-actions { flex-direction: column; align-items: stretch; }
  .accueil-actions .bouton .wp-block-button__link { justify-content: center; }
  .surtitre { font-size: calc(12px * var(--texte-echelle, 1)); }
  .composition { width: 72%; }
  .services { padding-block: 90px; }
  .services-grille { grid-template-columns: 1fr; margin-top: 44px; gap: 16px; }
  .service-picto { width: 100px; height: 100px; }
  .service-titre { font-size: calc(28px * var(--texte-echelle, 1)); line-height: calc(30px * var(--texte-echelle, 1)); }
  .methode { padding-block: 90px 100px; }
  .methode .etape { padding: 30px 22px 34px; }
  .etape-numero { font-size: 64px; line-height: 60px; }
  .methode-sticker { width: 90px; right: 16px; top: -40px; }
  .bande-appel { height: 110px; }
  .bande-appel .defilant > p { font-size: 56px; }
  .realisations { padding-bottom: 90px; }
  .agence-compacte { padding-bottom: 90px; gap: 50px; }
  .agence-photo { height: 320px; }
  .agence-photo .sticker { width: 90px; right: -6px; top: -40px; }
  .agence-contenu h2 { font-size: 56px; line-height: 56px; }
  .agence-contenu .typo-machine .machine { min-height: 56px; }
  .agence-contenu .corps { font-size: calc(17px * var(--texte-echelle, 1)); line-height: calc(27px * var(--texte-echelle, 1)); }
  .reperes--sombre .repere-chiffre { font-size: calc(34px * var(--texte-echelle, 1)); line-height: calc(36px * var(--texte-echelle, 1)); }
  .temoignages { padding-bottom: 90px; }
  .contact { padding-top: 90px; }
}

/* ---- sauce secrète : disque noir sur la bande or, en miroir du disque or de l'accueil ---- */
.methode-droite { display: grid; justify-items: end; gap: 40px; }
.methode-droite .mixte { justify-self: stretch; }
.sauce-disque {
  position: relative;
  width: 320px;
  aspect-ratio: 1;
  margin-top: -40px;
  border-radius: 50%;
  background: var(--noir);
  isolation: isolate;
}
.sauce-disque::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url(assets/img/grain.png) repeat 0 0 / 250px auto;
  opacity: .04;
  z-index: -1;
}
body .sauce-disque img {
  position: absolute;
  width: 112%;
  left: -8%;
  top: -18%;
  rotate: -10deg;
  animation: flotte 7s ease-in-out infinite;
}
@media (max-width: 1100px) {
  .methode-droite { display: contents; }
  .sauce-disque { order: -1; justify-self: end; width: 260px; margin: 0 20px 10px 0; }
}
@media (max-width: 820px) {
  .sauce-disque { width: 190px; margin: 20px 10px 0 0; }
}

/* ==========================================================
   Effets « wouah » — le pli, pictos vivants, typographie, curseur
   Toutes ces règles sont inertes sans la classe .js (posée seulement
   si l'utilisateur n'a pas demandé à réduire les animations).
   ========================================================== */

/* ---- 1 · les cartes se cornent au survol : le dos de la feuille est or ---- */
.service, .projet { position: relative; }
.service::after, .projet::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 14px;
  background: linear-gradient(to bottom left, var(--noir) 50%, #f7d98a 50%, var(--or) 68%, #b98a25 100%);
  filter: drop-shadow(-6px 6px 8px rgba(0, 0, 0, .55));
  transition: width .45s cubic-bezier(.3, .7, .2, 1.2), height .45s cubic-bezier(.3, .7, .2, 1.2);
  pointer-events: none;
}
.service:hover::after, .projet:hover::after { width: 70px; height: 70px; }

/* ---- 2 · pictos vivants ---- */
.vivant { cursor: grab; touch-action: none; user-select: none; transition: filter .3s ease; }
.vivant.souleve { cursor: grabbing; filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .55)); z-index: 5; }
body .composition img.vivant, body .sauce-disque img.vivant { will-change: transform; }

/* ---- 3 · titres ligne par ligne ---- */
.js .accueil-titre, .js .gros, .js .titre-moyen, .js .temoignages-tete h2, .js .faq-titre h2, .js .pied-marque { visibility: hidden; }
.js .accueil-titre.pret, .js .gros.pret, .js .titre-moyen.pret, .js .temoignages-tete h2.pret, .js .faq-titre h2.pret, .js .pied-marque.pret { visibility: visible; }   /* même spécificité que la règle qui masque, + .pret */
.ligne {
  display: block;
  overflow: hidden;
  padding: .16em 0 .1em;       /* laisse passer accents et cédilles pendant l'animation */
  margin: -.16em 0 -.1em;
}
.ligne-int {
  display: inline-block;
  transform: translateY(108%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1s cubic-bezier(.2, .75, .1, 1) calc(var(--i, 0) * 110ms);
}
.vu .ligne-int { transform: none; }
.gros .ligne, .accueil-titre .ligne { text-align: inherit; }

/* le trait or se dessine de gauche à droite, comme au stylo */
.js .avec-trait::after {
  clip-path: inset(-10% 100% -10% 0);
  transition: clip-path 1.3s cubic-bezier(.65, 0, .25, 1) .45s;
}
.js .avec-trait.trait-vu::after { clip-path: inset(-10% 0 -10% 0); }

/* ---- 4 · curseur or ---- */
.curseur-actif, .curseur-actif a, .curseur-actif button, .curseur-actif summary,
.curseur-actif label, .curseur-actif .vivant { cursor: none; }
.curseur {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 0;
  height: 0;
  pointer-events: none;
}
.curseur span {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--or);
  color: var(--noir-pur);
  font-family: var(--f-titre);
  font-size: 0;
  line-height: 1;
  letter-spacing: -.2px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: left .35s cubic-bezier(.3, .7, .2, 1.2), top .35s cubic-bezier(.3, .7, .2, 1.2),
              width .35s cubic-bezier(.3, .7, .2, 1.2), height .35s cubic-bezier(.3, .7, .2, 1.2),
              background-color .25s, box-shadow .25s, opacity .25s, font-size .2s, transform .15s;
}
.curseur.grand span { left: -46px; top: -46px; width: 92px; height: 92px; font-size: calc(19px * var(--texte-echelle, 1)); }
.curseur.anneau span {
  left: -24px; top: -24px; width: 48px; height: 48px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--or);
}
.curseur.sombre span { background: var(--noir-pur); color: var(--or); }
.curseur.sombre.anneau span { background: transparent; box-shadow: inset 0 0 0 1.5px var(--noir-pur); }
.curseur.appui span { transform: scale(.82); }
.curseur.cache span, .curseur.absent span { opacity: 0; }

/* ==========================================================
   PANNEAU D'ACCESSIBILITÉ
   ========================================================== */
.a11y {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  font-family: var(--f-texte);
  font-variation-settings: "opsz" 32;
}
.a11y-bouton {
  display: flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 60px;
  background: var(--or) url(assets/img/or.png) center / cover;
  color: var(--noir-pur);
  box-shadow: 0 0 0 3px var(--noir-pur), 0 10px 30px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: gap .35s, padding .35s;
}
.a11y-bouton svg { width: 24px; height: 24px; flex: none; }
.a11y-bouton-texte {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: max-width .35s ease;
}
.a11y-bouton:hover, .a11y-bouton:focus-visible, .a11y.ouvert .a11y-bouton { gap: 10px; padding: 0 20px 0 16px; }
.a11y-bouton:hover .a11y-bouton-texte, .a11y-bouton:focus-visible .a11y-bouton-texte,
.a11y.ouvert .a11y-bouton-texte { max-width: 160px; }

.a11y-panneau {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  overflow: auto;
  border-radius: 20px;
  padding: 8px;
  background: var(--or) url(assets/img/or.png) center / cover;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  transform-origin: 100% 100%;
  animation: a11y-entre .35s cubic-bezier(.3, .7, .2, 1.2);
}
.a11y-panneau[hidden] { display: none; }
@keyframes a11y-entre { from { opacity: 0; transform: translateY(10px) scale(.94); } }
.a11y-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 16px;
  border-radius: 12px;
  background: var(--noir-pur);
}
.a11y-titre {
  font-family: var(--f-titre);
  font-size: calc(26px * var(--texte-echelle, 1));
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--blanc);
}
.a11y-fermer {
  position: relative;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(242, 242, 242, .35);
  color: var(--blanc);
  cursor: pointer;
}
.a11y-fermer i::before, .a11y-fermer i::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 17px;
  height: 2px;
  background: currentColor;
  rotate: 45deg;
}
.a11y-fermer i::after { rotate: -45deg; }
.a11y-fermer:hover { background: var(--or); color: var(--noir-pur); box-shadow: none; }

.a11y-corps {
  margin-top: 8px;
  padding: 18px 16px 16px;
  border-radius: 12px;
  background: var(--noir);
  color: var(--blanc);
}
.a11y-label {
  font-weight: 700;
  font-size: calc(13px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .7);
}
.a11y-tailles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
  padding: 4px;
  border-radius: 60px;
  background: var(--anthracite);
}
.a11y-tailles button {
  height: 40px;
  border: 0;
  border-radius: 60px;
  background: transparent;
  color: var(--blanc);
  font-family: var(--f-titre);
  font-size: 20px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.a11y-tailles button:nth-child(2) { font-size: 24px; }
.a11y-tailles button:nth-child(3) { font-size: 28px; }
.a11y-tailles button sup { font-size: .5em; }
.a11y-tailles button[aria-pressed="true"] { background: var(--or); color: var(--noir-pur); }

.a11y-options { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.a11y-inter {
  position: relative;
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 12px 70px 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--anthracite);
  color: var(--blanc);
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}
.a11y-inter:hover { background: #33343a; }
.a11y-nom { font-weight: 700; font-size: calc(15px * var(--texte-echelle, 1)); line-height: 1.3; }
.a11y-desc { font-size: calc(13px * var(--texte-echelle, 1)); line-height: 1.4; color: rgba(242, 242, 242, .65); }
/* l'interrupteur */
.a11y-inter::before, .a11y-inter::after {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.a11y-inter::before {
  right: 14px;
  width: 44px;
  height: 26px;
  border-radius: 60px;
  background: #4a4b52;
  transition: background-color .25s;
}
.a11y-inter::after {
  right: 34px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blanc);
  transition: right .25s cubic-bezier(.3, .7, .2, 1.3), background-color .25s;
}
.a11y-inter[aria-checked="true"]::before { background: var(--or); }
.a11y-inter[aria-checked="true"]::after { right: 17px; background: var(--noir-pur); }

.a11y-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 14px; }
.a11y-lire, .a11y-reinit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 60px;
  font-weight: 700;
  font-size: calc(13px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  cursor: pointer;
}
.a11y-lire { background: var(--or); color: var(--noir-pur); }
.a11y-lire-icone {
  width: 0;
  height: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.a11y-lire.actif .a11y-lire-icone { width: 10px; height: 10px; border: 0; background: currentColor; border-radius: 2px; }
.a11y-reinit { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(242, 242, 242, .35); }
.a11y-reinit:hover { box-shadow: inset 0 0 0 1.5px var(--or); color: var(--or); }
.a11y-note {
  margin-top: 14px;
  font-size: calc(12px * var(--texte-echelle, 1));
  line-height: 1.5;
  color: rgba(242, 242, 242, .55);
}
.a11y-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 820px) {
  .a11y { right: 16px; bottom: 16px; transition: bottom .4s ease; }
  /* au-dessus de la barre d'appel mobile quand elle est visible */
  body:has(.cta-mobile.visible) .a11y { bottom: 82px; }
  .a11y-bouton { height: 48px; padding: 0 12px; }
}

/* ==========================================================
   RENDU DES OPTIONS
   ========================================================== */

/* réduire les animations : tout s'arrête, le contenu reste visible */
html.a11y-calme *, html.a11y-calme *::before, html.a11y-calme *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-calme .ligne-int, html.a11y-calme .menu-mot { transform: none !important; }
html.a11y-calme .avec-trait::after { clip-path: none !important; }
html.a11y-calme .vivant { transform: none !important; }
html.a11y-calme .revele { opacity: 1 !important; transform: none !important; }
html.a11y-calme .curseur { display: none !important; }
html.a11y-calme .menu-fond { clip-path: none !important; }
html.a11y-calme .menu-haut, html.a11y-calme .menu-bas, html.a11y-calme .menu-visuel { opacity: 1 !important; transform: none !important; }
html.a11y-calme .defilant { transform: none !important; }

/* police lisible : une seule famille, pas de capitales forcées sur les textes longs */
html.a11y-police body, html.a11y-police body *:not(svg):not(svg *) {
  font-family: "Atkinson Hyperlegible", Verdana, Arial, sans-serif !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
}
html.a11y-police :is(.mixte, .livrables li, .garanties li, .etape-etiquette, .projet-secteur, .surtitre,
  .expertise-onglet, .temoignage .temoignage-fonction, .reperes .repere-texte, .lien-fleche, .bouton .wp-block-button__link, .a11y-label) {
  text-transform: none !important;
  letter-spacing: normal !important;
}
html.a11y-police :is(.titre, .gros, .accueil-titre, .service-titre, .projet-titre, .menu-mot, .pied-marque) {
  letter-spacing: 0 !important;
}
html.a11y-police .etape-numero { -webkit-text-stroke: 0; color: var(--noir-pur); }

/* contraste renforcé */
html.a11y-contraste body::before, html.a11y-contraste .menu-fond--noir::before, html.a11y-contraste .sauce-disque::before { display: none; }
html.a11y-contraste body { background: #000; }
html.a11y-contraste :is(p, span, li, a, summary, figcaption, blockquote, strong, label, h1, h2, h3) { color: #fff !important; }
html.a11y-contraste :is(.bande-pleine, .bande-appel, .carte-or, .projet-visuel, .bouton--or .wp-block-button__link, .expertise-carte,
  .logos, .a11y-tailles [aria-pressed="true"], .a11y-lire, .cta-mobile .bouton .wp-block-button__link, .curseur) :is(p, span, li, a, strong, h2, h3, sup),
html.a11y-contraste :is(.bouton--or .wp-block-button__link, .a11y-lire, .logos-titre, .a11y-tailles [aria-pressed="true"]) { color: #000 !important; }
html.a11y-contraste .or { color: var(--or) !important; }
/* bandeaux noirs posés sur les cartes or : on repasse en blanc */
html.a11y-contraste :is(.carte-or, .bande-pleine) .bandeau :is(p, span, a, h2, h3) { color: #fff !important; }
html.a11y-contraste :is(.service, .projet, .cadre, .temoignage) { box-shadow: 0 0 0 2px #fff !important; }
html.a11y-contraste .formulaire ::placeholder { color: #555; }
html.a11y-contraste .logos-liste img { opacity: 1; filter: grayscale(1) contrast(1.4); }

/* espacer le texte (critère WCAG 1.4.12) */
html.a11y-espace :is(p, li, summary, blockquote, figcaption, label, .corps, .mixte) {
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
  line-height: 1.8 !important;
}
html.a11y-espace p + p { margin-top: 1.5em; }

/* souligner les liens */
html.a11y-liens a:not(.bouton .wp-block-button__link):not(.marque) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}
html.a11y-liens .bouton .wp-block-button__link { box-shadow: 0 0 0 3px currentColor !important; }

/* lecture à voix haute */
html.a11y-lecture main :is(h1, h2, h3, p, li, summary, blockquote, figcaption) { cursor: help; }
html.a11y-lecture.curseur-actif main :is(h1, h2, h3, p, li, summary, blockquote, figcaption) { cursor: none; }
.a11y-en-lecture {
  outline: 3px solid var(--or) !important;
  outline-offset: 6px;
  border-radius: 4px;
  background: rgba(239, 187, 59, .12);
}

/* ==========================================================
   PAGES INTÉRIEURES — composants partagés (phase 3)
   Aucun nouveau registre : mêmes jetons, mêmes familles, mêmes rayons.
   ========================================================== */

/* fil d'Ariane */
.fil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-weight: 700;
  font-size: calc(13px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .55);
}
.fil li + li::before { content: "/"; margin-right: 8px; color: var(--or); }
.fil a:hover { color: var(--or); }
.fil li:last-child { color: var(--blanc); }

/* en-tête de page : titre à gauche, disque or et picto à droite */
.page-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: 60px;
  padding: 150px var(--gouttiere) 110px;
}
.page-tete--seule { grid-template-columns: minmax(0, 1fr); }
.page-intro {
  max-width: 680px;
  margin-top: 34px;
  font-size: calc(20px * var(--texte-echelle, 1));
  line-height: calc(31px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  color: var(--texte);
}
.page-tete .accueil-actions { margin-top: 36px; }
.page-disque { position: relative; aspect-ratio: 1; }
.page-disque::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: var(--or) url(assets/img/or.png) center / cover;
}
body .page-disque img {
  position: absolute;
  width: 78%;
  left: 11%;
  top: 9%;
  animation: flotte 7s ease-in-out infinite;
}

/* section générique */
.bloc { padding: 0 var(--gouttiere) 150px; }
.bloc .section-tete { margin-bottom: 70px; }
.titre-moyen {
  font-size: 70px;
  line-height: 70px;
  letter-spacing: -2.3px;
}

/* cartes d'offre : même gabarit que les cartes d'expertise */
.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.offres .service p { flex: 0 1 auto; }

/* deux colonnes texte */
.deux-cols {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 734px);
  justify-content: space-between;
  gap: 60px;
}
.deux-cols h2 { position: sticky; top: 120px; align-self: start; }
.deux-cols .corps + h3, .deux-cols h3 {
  font-family: var(--f-titre);
  font-size: calc(28px * var(--texte-echelle, 1));
  line-height: 1;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 56px 0 22px;
}
.deux-cols h3:first-child { margin-top: 0; }

/* valeurs */
.valeurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.valeur {
  padding: 34px 30px 36px;
  border-radius: 20px;
  background: var(--anthracite);
}
body .valeur img { width: 110px; height: 110px; object-fit: contain; margin: -10px 0 16px -8px; }
.valeur h3 {
  font-family: var(--f-titre);
  font-size: 40px;
  line-height: 42px;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--blanc);
}
.valeur p { margin-top: 14px; font-size: calc(17px * var(--texte-echelle, 1)); line-height: 1.6; color: rgba(242, 242, 242, .78); }

/* bande d'appel finale (pages intérieures) */
.appel-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  padding: 110px var(--gouttiere);
}
.appel-final .bouton .wp-block-button__link { padding: 15px 28px; }

/* texte long : mentions, confidentialité */
.page-legale {
  display: grid;
  grid-template-columns: 300px minmax(0, 780px);
  justify-content: space-between;
  gap: 60px;
  padding: 0 var(--gouttiere) 150px;
}
.sommaire { position: sticky; top: 110px; align-self: start; }
.sommaire p {
  font-family: var(--f-titre);
  font-size: calc(22px * var(--texte-echelle, 1));
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 14px;
}
.sommaire ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; }
.sommaire li { counter-increment: s; }
.sommaire a {
  display: flex;
  gap: 10px;
  font-size: calc(15px * var(--texte-echelle, 1));
  line-height: 1.4;
  color: rgba(242, 242, 242, .7);
}
.sommaire a::before { content: counter(s, decimal-leading-zero); font-weight: 700; color: var(--or); }
.sommaire a:hover { color: var(--blanc); }
.prose { font-size: calc(18px * var(--texte-echelle, 1)); line-height: 1.7; color: var(--texte); }
.prose h2 {
  font-family: var(--f-titre);
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -.6px;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 70px 0 20px;
  scroll-margin-top: 110px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-weight: 700; font-size: 1em; color: var(--blanc); margin: 28px 0 8px; }
.prose p + p { margin-top: 14px; }
.prose ul { margin: 14px 0 0; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--or); }
.prose a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; }
.prose .dl { display: grid; grid-template-columns: 220px 1fr; gap: 10px 24px; margin: 0; }
.prose .dt { font-weight: 700; color: var(--blanc); }
.prose .dd { margin: 0; }
.maj { margin-top: 60px; font-size: calc(14px * var(--texte-echelle, 1)); color: rgba(242, 242, 242, .55); }

/* réalisations : liste */
.projet-une {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 10px 40px 10px 10px;
  border-radius: 20px;
  background: var(--noir);
  box-shadow: 0 0 0 1px rgba(242, 242, 242, .08);
  margin-bottom: 30px;
}
.projet-une .projet-visuel { height: 460px; }
.projet-une .projet-titre { font-size: 64px; line-height: 64px; margin-left: 0; }
.projet-une .projet-secteur, .projet-une .projet-texte { margin-left: 0; }
.projet-une .lien-fleche--clair { margin-top: 30px; }

/* réalisation : article */
.fiche {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 var(--gouttiere) 80px;
  border-top: 1px solid rgba(242, 242, 242, .15);
  border-bottom: 1px solid rgba(242, 242, 242, .15);
}
.fiche div { padding: 22px 24px; border-left: 1px solid rgba(242, 242, 242, .15); }
.fiche div:first-child { border-left: 0; padding-left: 0; }
.fiche .dt {
  font-weight: 700;
  font-size: calc(13px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .55);
}
.fiche .dd {
  margin: 8px 0 0;
  font-family: var(--f-titre);
  font-size: calc(26px * var(--texte-echelle, 1));
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--blanc);
}
.visuel-projet { margin: 0 var(--gouttiere) 120px; }
.visuel-projet .projet-visuel { height: 620px; }
body .visuel-projet .projet-visuel img { width: 36%; max-height: 180px; }
.fiche:has(> div:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fiche a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.fiche a:hover { color: var(--or); }

/* réalisation : captures d'écran (cadre de navigateur) et pages imprimées */
.capture {
  position: relative;
  margin: 0;
  padding-top: 34px;
  border-radius: 14px;
  background: #2b2c31;
  box-shadow: 0 0 0 1px rgba(242, 242, 242, .1), 0 30px 60px -30px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.capture::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(242, 242, 242, .25);
  box-shadow: 16px 0 rgba(242, 242, 242, .25), 32px 0 rgba(242, 242, 242, .25);
}
body img.capture, body .capture img { display: block; width: 100%; height: auto; }
.capture figcaption, .page-imprimee figcaption {
  padding: 14px 18px;
  font-weight: 700;
  font-size: calc(13px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .6);
}
.visuel-projet--capture { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 var(--gouttiere); box-sizing: content-box; }

.galerie .titre-moyen { margin-bottom: 50px; }
.galerie-corps { display: grid; gap: 30px; }
.galerie-site { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.galerie-imprime {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  padding: 50px;
  border-radius: 20px;
  background: var(--or) url(assets/img/or.png) center / cover;
}
.page-imprimee { margin: 0; }
body .page-imprimee img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .55);
  transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
body .page-imprimee:hover img { transform: translateY(-8px) rotate(-1deg); }
.page-imprimee figcaption { padding: 14px 0 0; color: var(--noir-pur); }
/* formats mêlés : un visuel en hauteur (kakemono) à gauche, les dépliants à l'italienne en grille */
.galerie-imprime--mixte { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) minmax(0, 1fr); }
.page-imprimee--haute { grid-row: span 2; display: flex; flex-direction: column; }
body .page-imprimee--haute img { flex: 1; min-height: 0; object-fit: contain; object-position: center top; box-shadow: none; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); }

/* réalisation : vidéos (vignette + lien vers YouTube, aucun lecteur intégré ni cookie tiers) */
.videos-projet .titre-moyen { margin-bottom: 50px; }
.videos-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.video-lien { margin: 0; }
.video-lien a { position: relative; display: block; border-radius: 14px; overflow: hidden; }
body .video-lien img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.video-lien a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .35s cubic-bezier(.3, .7, .2, 1.3);
}
.video-lien a::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  margin: -11px 0 0 -7px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--noir-pur);
}
body .video-lien a:hover img { transform: scale(1.05); }
.video-lien--grande a { border-radius: 20px; }
.video-lien--grande a::after { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
.video-lien--grande a::before { margin: -18px 0 0 -11px; border-width: 18px 0 18px 30px; }
.video-lien--grande figcaption { padding-top: 20px; font-size: calc(30px * var(--texte-echelle, 1)); }
.video-lien a:hover::after { transform: scale(1.12); }
.video-lien figcaption {
  padding: 16px 0 0;
  font-family: var(--f-titre);
  font-size: calc(24px * var(--texte-echelle, 1));
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--blanc);
}
.suite-projets {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 50px var(--gouttiere);
  border-top: 1px solid rgba(242, 242, 242, .12);
}
.suite-projets a { display: grid; gap: 6px; }
.suite-projets a:last-child { text-align: right; }
.suite-projets span:first-child {
  font-weight: 700;
  font-size: calc(13px * var(--texte-echelle, 1));
  text-transform: uppercase;
  letter-spacing: .3px;
  color: rgba(242, 242, 242, .55);
}
.suite-projets span:last-child {
  font-family: var(--f-titre);
  font-size: 44px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--blanc);
  transition: color .2s;
}
.suite-projets a:hover span:last-child { color: var(--or); }

/* contact : coordonnées */
.coordonnees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.coordonnee {
  display: grid;
  gap: 10px;
  padding: 30px;
  border-radius: 20px;
  background: var(--anthracite);
}
body .coordonnee img { width: 90px; height: 90px; object-fit: contain; margin: -10px 0 0 -8px; }
.coordonnee p:first-of-type {
  font-weight: 700;
  font-size: calc(13px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .6);
}
.coordonnee a, .coordonnee strong {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: calc(30px * var(--texte-echelle, 1));
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--blanc);
  overflow-wrap: anywhere;
}
.coordonnee a:hover { color: var(--or); }

/* FAQ complète : questions groupées */
.faq-groupes { display: grid; gap: 80px; }
.faq-groupe { display: grid; grid-template-columns: minmax(0, 449px) minmax(0, 680px); justify-content: space-between; gap: 60px; }
.faq-groupe h2 {
  position: sticky;
  top: 110px;
  align-self: start;
  font-family: var(--f-titre);
  font-size: 44px;
  line-height: 46px;
  text-transform: uppercase;
  color: var(--blanc);
}
.faq-groupe h2 span { display: block; margin-bottom: 10px; font-family: var(--f-texte); font-weight: 700; font-size: 14px; color: var(--or); letter-spacing: .3px; }

/* 404 */
.erreur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: 60px;
  min-height: 100vh;
  padding: 130px var(--gouttiere) 80px;
}
.erreur-code {
  font-family: var(--f-titre);
  font-size: 300px;
  line-height: .85;
  letter-spacing: -8px;
  color: transparent;
  -webkit-text-stroke: 2px var(--or);
}
.erreur .accueil-titre { margin-top: 20px; font-size: 80px; line-height: 80px; }
.erreur-liens { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; }

@media (max-width: 1100px) {
  .page-tete, .erreur { grid-template-columns: 1fr; }
  .page-disque { max-width: 420px; width: 80%; justify-self: center; }
  .offres, .valeurs, .coordonnees { grid-template-columns: 1fr 1fr; }
  .deux-cols, .page-legale, .faq-groupe { grid-template-columns: 1fr; }
  .deux-cols h2, .sommaire, .faq-groupe h2 { position: static; }
  .projet-une { grid-template-columns: 1fr; padding: 10px 10px 30px; }
  .projet-une > div { padding: 0 20px; }
  .fiche { grid-template-columns: 1fr 1fr; }
  .fiche, .fiche:has(> div:nth-child(5)) { grid-template-columns: 1fr 1fr; }
  .fiche div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .appel-final { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .page-tete { padding: 110px var(--gouttiere) 70px; gap: 40px; }
  .page-disque { width: 70%; }
  .page-intro { font-size: calc(17px * var(--texte-echelle, 1)); line-height: 1.6; }
  .bloc { padding-bottom: 90px; }
  .bloc .section-tete { margin-bottom: 40px; }
  .titre-moyen { font-size: 48px; line-height: 50px; letter-spacing: -1px; }
  .offres, .valeurs, .coordonnees { grid-template-columns: 1fr; gap: 16px; }
  .valeur h3 { font-size: 32px; line-height: 34px; }
  .prose h2 { font-size: 30px; line-height: 34px; margin-top: 50px; }
  .prose .dl { grid-template-columns: 1fr; gap: 2px; }
  .prose .dd { margin-bottom: 12px; }
  .projet-une .projet-visuel { height: 240px; }
  .projet-une .projet-titre { font-size: 40px; line-height: 42px; }
  .fiche { grid-template-columns: 1fr; }
  .fiche div { border-left: 0; padding: 16px 0; border-top: 1px solid rgba(242, 242, 242, .15); }
  .fiche div:first-child { border-top: 0; }
  .visuel-projet .projet-visuel { height: 280px; }
  .fiche:has(> div:nth-child(5)) { grid-template-columns: 1fr; }
  .galerie-site { grid-template-columns: 1fr; }
  .galerie-imprime { grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; }
  .galerie-imprime--mixte { grid-template-columns: 1fr; }
  .page-imprimee--haute { grid-row: auto; }
  body .page-imprimee--haute img { max-height: 520px; }
  .videos-grille { grid-template-columns: 1fr; }
  .suite-projets span:last-child { font-size: 28px; }
  .faq-groupe h2 { font-size: 34px; line-height: 36px; }
  .erreur-code { font-size: 160px; letter-spacing: -4px; }
  .erreur .accueil-titre { font-size: 48px; line-height: 50px; }
  .appel-final { padding-block: 80px; }
}

/* titre de la page Agence : même échelle que le titre d'accueil, mot animé en corail */
.agence-h1 { font-size: 104px; line-height: 100px; letter-spacing: -2.5px; }
.agence-h1 .typo-machine .machine { min-height: 100px; }
.page-tete .avec-trait::after { width: 220px; margin: 14px 0 0 250px; }
.js .titre-moyen .typo-machine .machine { visibility: visible; }
@media (max-width: 1250px) { .agence-h1 { font-size: 84px; line-height: 82px; } .agence-h1 .typo-machine .machine { min-height: 82px; } }
@media (max-width: 820px) {
  .agence-h1 { font-size: 54px; line-height: 54px; letter-spacing: -1.2px; }
  .agence-h1 .typo-machine .machine { min-height: 54px; }
  .page-tete .avec-trait::after { width: 150px; margin-left: 120px; }
}

/* dernière bande d'appel d'une page : un peu d'air avant le pied de page */
.wp-block-post-content > .bande-appel:last-child { margin-bottom: 60px; }

/* texte réservé aux lecteurs d'écran (ex. : version fixe d'un mot animé) */
.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* précision de mot-clé sous un grand titre h1 : lue par Google, discrète à l'écran */
.h1-precision {
  display: block;
  margin-top: 22px;
  font-family: var(--f-texte);
  font-variation-settings: "opsz" 32;
  font-weight: 700;
  font-size: calc(16px * var(--texte-echelle, 1));
  line-height: 1.4;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--or);
}
h1.surtitre { margin: 0; font-weight: 700; }

/* ==========================================================
   Pictos isolés agrandis : ils débordent franchement de leur cadre
   (« Une agence humaine », « Ils en parlent mieux que nous », portrait)
   ========================================================== */
.agence-photo .sticker { width: 230px; right: -80px; top: -110px; transform: rotate(8deg); }
.temoignages-tete .sticker { width: 210px; left: 470px; top: -70px; transform: rotate(8deg); }
.portrait .sticker { width: 190px; right: -95px; top: -115px; transform: rotate(10deg); }
.temoignages-tete { padding-top: 40px; }

@media (max-width: 1100px) {
  .agence-photo .sticker { width: 190px; right: -20px; top: -90px; }
  .temoignages-tete .sticker { width: 170px; left: auto; right: 0; top: -40px; }
}
@media (max-width: 820px) {
  .agence-photo { margin-top: 60px; }
  .agence-photo .sticker { width: 140px; right: -6px; top: -80px; }
  .temoignages-tete .sticker { width: 120px; right: 0; top: -30px; }
  .portrait .sticker { width: 130px; right: -14px; top: -80px; }
}

/* FAQ : accès direct aux thèmes */
.faq-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 var(--gouttiere) 80px;
}
.aussi-lien {
  padding: 10px 18px;
  border-radius: 60px;
  background: var(--anthracite);
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--blanc);
  transition: background-color .2s, color .2s;
}
.aussi-lien:hover { background: var(--or); color: var(--noir-pur); }
.faq-groupe { scroll-margin-top: 100px; }
@media (max-width: 820px) { .faq-themes { padding-bottom: 50px; } }


/* ==========================================================================
   COUCHE BLOCS — ajoutée après le CSS de la maquette par scripts/theme_css.py
   Ce qui change avec les blocs natifs : en-tête, menu, pied, formulaire CF7,
   boucles de réalisations, traits dessinés, mots animés, marqueurs d'édition.
   ========================================================================== */

/* ---------- socle */
body img { height: auto; }                       /* sinon l'attribut height des blocs image l'emporte */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
body figure.wp-block-image, body .wp-block-post-featured-image { margin: 0; }
body .wp-block-image img { width: 100%; }
.wp-site-blocks { padding: 0; }
.principal { display: block; }

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-400-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-700-latin.woff2) format("woff2");
}

/* ---------- accents typographiques : <em> nu, stylé par son contexte */
.mixte em {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 1.05em;
  letter-spacing: .5px;
}
:is(.accueil-titre, .titre-moyen) em { font-style: normal; color: var(--or); }
.gros em {
  display: block;
  margin-top: 22px;
  font-family: var(--f-texte);
  font-variation-settings: "opsz" 32;
  font-style: normal;
  font-weight: 700;
  font-size: calc(16px * var(--texte-echelle, 1));
  line-height: 1.4;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--or);
}
.typo-machine em { font-style: normal; }
.js .typo-machine em.machine-source {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.typo-machine .machine { display: block; }
:not(.js) .typo-machine em { display: block; color: var(--corail); }

/* ---------- trait or : pseudo-élément du titre qui le précède (plus d'image décorative) */
.avec-trait::after {
  content: "";
  display: block;
  width: 180px;
  aspect-ratio: 492 / 130;
  background: url(assets/img/trait.svg) no-repeat left center / contain;
}
.titre.avec-trait::after { font-size: 16px; }   /* le trait ne suit pas l'échelle du titre */

/* ---------- surtitre : l'icône de localisation devient un masque CSS */
.surtitre::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--or);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%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") 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='%23000' stroke-width='2'%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") center / contain no-repeat;
}

/* ---------- images dans des blocs : la classe est sur la figure */
body .service .service-picto { margin: -6px 0 18px -10px; }
.wp-block-button.bouton { display: inline-flex; }
.composition::before {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background: var(--or) url(assets/img/or.png) center / cover;
}
.composition > figure {
  position: absolute;
  animation: flotte 7s ease-in-out infinite;
}
body .composition > figure img { position: static; animation: none; width: 100%; }
body .service-picto img, body .coordonnee img, body .valeur img { width: 100%; height: 100%; object-fit: contain; margin: 0; }
.coordonnee .wp-block-image { width: 90px; height: 90px; margin: -10px 0 0 -8px; }
.valeur .wp-block-image { width: 110px; height: 110px; margin: -10px 0 16px -8px; }
body .sticker img { width: 100%; }
.signature { width: 120px; }
.agence-signature .signature, .signature { flex: none; }
body .portrait .photo { height: 100%; }
body .portrait .photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
body .agence-photo > figure:not(.sticker) { height: 100%; }
.bandeau .picto { flex: none; width: 76px; height: 76px; }
.contact .bandeau .picto { width: 75px; height: 75px; }
body .bandeau .picto img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- repères, pastilles, fiche, définitions */
.repere { display: grid; gap: 8px; }
.aussi-pastille { display: inline-flex; align-items: center; gap: 8px; }
.aussi-pastille .wp-block-image { width: 30px; height: 30px; flex: none; }
body .aussi-pastille img { width: 30px; height: 30px; object-fit: contain; }

/* ---------- réalisations : boucles de requête */
.realisations-requete, .realisations-une { margin: 0; }
body .wp-block-post-template.realisations-grille, body .wp-block-post-template.realisations-une-liste { margin-inline: 0; margin-bottom: 0; padding: 0; list-style: none; }
body .wp-block-post-template.realisations-grille { margin-top: 80px; }
.realisations-une-liste { margin-bottom: 30px; }
.projet-visuel a { display: grid; place-items: center; width: 100%; height: 100%; }
body .projet-visuel img { width: 62%; height: auto; max-height: 110px; object-fit: contain; filter: none; }
body .projet-une .projet-visuel img { max-height: 160px; }
.projet-secteur a { color: inherit; }
.projet-texte p { margin: 0; }
.fil--bloc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.fil--bloc > * + *::before { content: "/"; margin-right: 8px; color: var(--or); }
.fil--bloc .fil-courant { margin: 0; font: inherit; color: var(--blanc); }
.suite-projets { display: flex; }
.suite-projets .suite-suivant { text-align: right; margin-left: auto; }
.suite-projets .wp-block-post-navigation-link a { display: grid; gap: 6px; }
.suite-projets .post-navigation-link__label {
  font-weight: 700;
  font-size: calc(13px * var(--texte-echelle, 1));
  line-height: 20px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .55);
}
.suite-projets .post-navigation-link__title {
  font-family: var(--f-titre);
  font-size: 44px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--blanc);
  transition: color .2s;
}
.suite-projets a:hover .post-navigation-link__title { color: var(--or); }
/* le bandeau d'appel des articles vient du gabarit, hors du contenu : même marge que dans la maquette */
body main > .bande-appel:last-child { margin-bottom: 60px; }

/* ---------- bandeaux défilants : une copie éditable, le script la duplique */
.defile-auto { overflow: hidden; }
.bande-appel .defilant > p, .bande-appel > p {
  padding-right: 30px;
  font-family: var(--f-titre);
  font-size: 96px;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: var(--noir-pur);
  white-space: nowrap;
}
.bande-or .defilant > p, .bande-or > p {
  padding-right: 6px;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: .2px;
  color: var(--noir-pur);
  white-space: nowrap;
}

/* ---------- boutons : la classe du bloc est sur le conteneur, le style sur le lien */
.wp-block-button.bouton { display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
body .wp-block-buttons.accueil-actions, body .wp-block-buttons.carte-actions { gap: 16px; }
body .wp-block-buttons { gap: 12px; }
.bouton--pied .wp-block-button__link {
  font-size: 18px;
  line-height: 20px;
  padding: 16px 30px;
  background: var(--noir-pur);
  color: var(--blanc);
  box-shadow: 0 0 0 3px var(--noir-pur), 0 0 0 6px var(--or), 0 0 0 8px var(--noir-pur);
}

/* ---------- en-tête */
.marque { gap: 12px; }
.marque .wp-block-image { width: 40px; flex: none; }
.marque-nom { margin: 0; font-size: inherit; line-height: inherit; }
.marque-nom a::after { content: "."; }
.entete-cta { flex: none; }
.menu-bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--f-titre);
  font-size: calc(24px * var(--texte-echelle, 1));
  letter-spacing: -.5px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: color .25s;
}
.menu-bouton::before {
  content: "";
  width: 26px;
  height: 7px;
  border-block: 2px solid currentColor;
  transition: height .25s;
}
.menu-bouton:hover { color: var(--or); }
.menu-bouton:hover::before { height: 10px; }

/* ---------- menu plein écran (bloc Navigation) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  grid-template-rows: auto 1fr auto;
  column-gap: 60px;
  padding: 10px var(--gouttiere) 34px;
  visibility: hidden;
  transition: visibility 0s linear .9s;
  overflow: hidden;
  isolation: isolate;
}
.menu.ouvert { visibility: visible; transition-delay: 0s; }
.menu::before, .menu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: circle(0 at var(--ox, 95%) var(--oy, 40px));
  transition: clip-path .75s cubic-bezier(.7, 0, .2, 1);
}
.menu::before { background: var(--or) url(assets/img/or.png) center / cover; transition-delay: .18s; }
.menu::after { background: var(--noir); }
.menu.ouvert::before, .menu.ouvert::after { clip-path: circle(150% at var(--ox, 95%) var(--oy, 40px)); }
.menu.ouvert::before { transition-delay: 0s; }
.menu.ouvert::after { transition-delay: .14s; }

.menu-haut {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  font-family: var(--f-titre);
  font-size: 31px;
  letter-spacing: 2px;
  color: var(--blanc);
  opacity: 0;
  transition: opacity .3s;
}
.menu.ouvert .menu-haut { opacity: 1; transition-delay: .45s; }
.menu-fermer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--blanc);
  font-size: calc(24px * var(--texte-echelle, 1));
  letter-spacing: -.5px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.menu-fermer::after {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(242, 242, 242, .4);
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) center / 18px 18px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) center / 18px 18px no-repeat;
  transition: transform .45s cubic-bezier(.3, .7, .2, 1.2), background-color .25s;
}
.menu-fermer:hover::after { transform: rotate(90deg); background-color: var(--or); color: var(--noir-pur); }

.menu-nav { align-self: center; counter-reset: menu; }
body .menu-nav .wp-block-navigation__container { display: grid; gap: 2px; align-items: start; }
.menu-nav .wp-block-navigation-item { counter-increment: menu; }
body .menu-nav .wp-block-navigation-item__content {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  color: var(--blanc);
  transition: color .3s, opacity .3s, transform .45s cubic-bezier(.3, .7, .2, 1);
}
.menu-nav .wp-block-navigation-item__content::before {
  content: counter(menu, decimal-leading-zero);
  padding-top: .9em;
  font-weight: 700;
  font-size: calc(14px * var(--texte-echelle, 1));
  letter-spacing: .3px;
  color: rgba(242, 242, 242, .45);
  transition: color .3s;
}
.menu-nav .wp-block-navigation-item__label {
  display: block;
  overflow: hidden;
  padding: .14em 0 .02em;
  font-family: var(--f-titre);
  font-size: clamp(52px, 8.2vw, 124px);
  line-height: .98;
  letter-spacing: -2px;
  text-transform: uppercase;
}
.menu-nav .wp-block-navigation-item__label { transform: translateY(110%) rotate(3deg); transform-origin: 0 100%; transition: transform .8s cubic-bezier(.2, .75, .1, 1); }
.menu.ouvert .menu-nav .wp-block-navigation-item__label { transform: none; }
.menu.ouvert .menu-nav .wp-block-navigation-item:nth-child(1) .wp-block-navigation-item__label { transition-delay: .38s; }
.menu.ouvert .menu-nav .wp-block-navigation-item:nth-child(2) .wp-block-navigation-item__label { transition-delay: .44s; }
.menu.ouvert .menu-nav .wp-block-navigation-item:nth-child(3) .wp-block-navigation-item__label { transition-delay: .50s; }
.menu.ouvert .menu-nav .wp-block-navigation-item:nth-child(4) .wp-block-navigation-item__label { transition-delay: .56s; }
.menu.ouvert .menu-nav .wp-block-navigation-item:nth-child(5) .wp-block-navigation-item__label { transition-delay: .62s; }
.menu.ouvert .menu-nav .wp-block-navigation-item:nth-child(6) .wp-block-navigation-item__label { transition-delay: .68s; }
.menu-nav:has(.wp-block-navigation-item__content:hover) .wp-block-navigation-item__content,
.menu-nav:has(.wp-block-navigation-item__content:focus-visible) .wp-block-navigation-item__content { opacity: .32; }
body .menu-nav .wp-block-navigation-item__content:hover,
body .menu-nav .wp-block-navigation-item__content:focus-visible { opacity: 1; color: var(--or); transform: translateX(22px); }
.menu-nav .wp-block-navigation-item__content:hover::before,
.menu-nav .wp-block-navigation-item__content:focus-visible::before { color: var(--or); }
.menu-nav .current-menu-item .wp-block-navigation-item__content::before { color: var(--or); }

.menu-visuel {
  position: relative;
  align-self: center;
  aspect-ratio: 1;
  width: 100%;
  opacity: 0;
  transform: scale(.7) rotate(-12deg);
  transition: opacity .5s, transform .9s cubic-bezier(.3, .7, .2, 1.2);
}
.menu.ouvert .menu-visuel { opacity: 1; transform: none; transition-delay: .5s; }
.menu-visuel::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: var(--or) url(assets/img/or.png) center / cover;
}
.menu-visuel::after {
  content: "";
  position: absolute;
  width: 46%;
  left: 4%;
  bottom: 2%;
  aspect-ratio: 492 / 130;
  background: url(assets/img/trait.svg) no-repeat center / contain;
  rotate: -8deg;
}
.menu-visuel .menu-picto {
  position: absolute;
  width: 66%;
  left: 17%;
  top: 14%;
  opacity: 0;
}
.menu-visuel .menu-picto.actif { opacity: 1; animation: pop .55s cubic-bezier(.3, .7, .2, 1.4), flotte 6s ease-in-out .55s infinite; }
@keyframes pop { from { opacity: 0; transform: scale(.55) rotate(-14deg); } }

.menu-bas {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 26px 80px 0 0;
  border-top: 1px solid rgba(242, 242, 242, .12);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s, transform .6s cubic-bezier(.2, .75, .1, 1);
}
.menu.ouvert .menu-bas { opacity: 1; transform: none; transition-delay: .7s; }
.menu-coord { display: grid; gap: 2px; }
.menu-coord p, .menu-reseaux a {
  font-family: var(--f-titre);
  font-size: calc(22px * var(--texte-echelle, 1));
  line-height: calc(28px * var(--texte-echelle, 1));
  text-transform: uppercase;
  color: var(--blanc);
}
.menu-coord p:first-child { color: rgba(242, 242, 242, .55); }
.menu-reseaux { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.menu-coord a:hover, .menu-reseaux a:hover { color: var(--or); }

/* ---------- pied de page */
.pied-bandeau-droite a { display: flex; align-items: center; gap: 12px; }
.pied-bandeau-droite a::after {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M8 12h8M13 8l4 4-4 4'/%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='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M8 12h8M13 8l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pied-accroche-bloc { position: relative; display: inline-block; }
.pied-accroche { margin-top: 40px; }
.pied-cerveau { position: absolute; width: 127px; left: 190px; top: 130px; transform: rotate(6deg); }
body .reseaux { gap: 18px; margin-top: 40px; padding: 0; }
body .reseaux .wp-social-link { background: none; color: var(--noir-pur); padding: 0; }
body .reseaux .wp-social-link a { padding: 0; }
body .reseaux .wp-social-link svg { width: 22px; height: 22px; }
.pied-liens { display: grid; align-content: start; gap: 14px; }
body .pied-nav .wp-block-navigation__container { display: grid; gap: 6px; margin-top: 30px; }
body .pied-nav .wp-block-navigation-item__content { color: var(--noir-pur); font-size: 22px; }
.haut-de-page a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- barre d'appel mobile : le bouton téléphone n'affiche que son icône */
.cta-mobile .wp-block-buttons { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; }
.cta-mobile .wp-block-button.bouton { flex: 1; }
.cta-mobile .wp-block-button.bouton .wp-block-button__link { width: 100%; justify-content: center; }
.cta-mobile-tel .wp-block-button__link {
  display: grid;
  place-items: center;
  width: 54px;
  height: 100%;
  min-height: 48px;
  padding: 0;
  border-radius: 60px;
  background: var(--noir-pur);
  box-shadow: 0 0 0 2px var(--or);
  font-size: 0;
}
.cta-mobile-tel .wp-block-button__link::before {
  content: "";
  width: 22px;
  height: 22px;
  background: var(--or);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%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") 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='%23000' stroke-width='2'%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") center / contain no-repeat;
}

/* ---------- Contact Form 7 : même rendu que le formulaire de la maquette */
.wpcf7 { min-width: 0; }
.formulaire .hidden-fields-container, .formulaire > div[style*="none"] { display: none; }
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire input[type="submit"] {
  grid-column: 1 / -1;
  width: 100%;
  border: 0;
  border-radius: 60px;
  padding: 20px;
  background: var(--or) url(assets/img/or.png) center / cover;
  font: 600 calc(16px * var(--texte-echelle, 1)) / 1 var(--f-texte);
  color: var(--noir-pur);
  cursor: pointer;
}
.formulaire .wpcf7-spinner { display: none; }
.formulaire .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: var(--or); }
.wpcf7 .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 16px 0 0;
  padding: 14px 18px;
  border: 1.5px solid var(--or) !important;
  border-radius: 14px;
  font-size: 15px;
  color: var(--blanc);
}

/* ---------- contenu « À fournir » : repère visible, texte entre crochets dans l'éditeur */
.a-fournir { color: rgba(242, 242, 242, .55); }

/* ---------- adaptatif propre aux blocs */
@media (max-width: 1100px) {
  .menu { grid-template-columns: 1fr; }
  .menu-visuel { display: none; }
}
@media (max-width: 820px) {
  .menu { padding-bottom: 22px; }
  body .menu-nav .wp-block-navigation-item__content { gap: 14px; }
  .menu-nav .wp-block-navigation-item__label { font-size: calc(52px * min(var(--texte-echelle, 1), 1.15)); }
  .menu-bas { flex-direction: column; align-items: stretch; gap: 20px; padding-right: 0; }
  .menu-reseaux { display: none; }
  .menu-fermer { font-size: 0; gap: 0; }
  .pied-cerveau { width: 80px; left: auto; right: -70px; top: 30px; }
  .bande-appel .defilant > p, .bande-appel > p { font-size: 56px; }
  .suite-projets .post-navigation-link__title { font-size: 28px; }
}

/* ---------- le menu tient toujours dans l'écran : la taille des mots suit aussi la hauteur */
body .menu-nav .wp-block-navigation-item__label { font-size: clamp(34px, min(8.2vw, (100dvh - 240px) / 6.9), 124px); }
.menu-visuel { width: min(100%, 100dvh - 270px); justify-self: center; }
.menu-nav { min-height: 0; max-height: 100%; overflow: hidden auto; }
@media (max-width: 820px) {
  body .menu-nav .wp-block-navigation-item__label { font-size: clamp(30px, min(calc(52px * min(var(--texte-echelle, 1), 1.15)), (100dvh - 250px) / 7.2), 60px); }
}

/* ---------- options d'accessibilité appliquées aux blocs */
html.a11y-calme .menu::before, html.a11y-calme .menu::after { clip-path: none !important; }
html.a11y-calme .menu-nav .wp-block-navigation-item__label { transform: none !important; }
html.a11y-calme .composition > figure { animation: none !important; }
html.a11y-contraste .menu::after { background: #000; }

/* ---------- mesures de la porte 4 : écarts corrigés */
.service .lien-fleche, .projet .lien-fleche { flex: none; line-height: 20px; }   /* lien en paragraphe : ne pas hériter de la règle du descriptif */
.menu-bouton { line-height: 34px; padding: 8px 0; margin: 0; }
.entete-actions { height: 50px; }
.contact-corps .wpcf7, .contact-corps .wpcf7 .formulaire { height: 100%; }

/* précision sous le titre d'une réalisation : même style que la ligne or des h1 de pages */
.titre-precision {
  margin-top: 22px;
  font-weight: 700;
  font-size: calc(16px * var(--texte-echelle, 1));
  line-height: 1.4;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--or);
}
.titre-precision a { color: inherit; }

/* ---------- réalisations : légendes des captures et des pages imprimées (bloc Image) */
body .capture .wp-element-caption, body .page-imprimee .wp-element-caption { margin: 0; text-align: left; }
body .page-imprimee .wp-element-caption { padding: 14px 0 0; color: var(--noir-pur); }
.visuel-projet--capture > .capture { margin: 0; }
body .video-lien .wp-element-caption { margin: 0; text-align: left; }
.video-lien > a { position: relative; display: block; }

/* ---------- listes de définitions en paragraphes (.dt/.dd) : pas d'interligne « p + p » des textes */
body .prose .dl > p + p { margin-top: 0; }
@media (max-width: 820px) { body .prose .dl > .dd { margin-bottom: 12px; } }