/*
Theme Name: KOUTAIBA ARCHITECTURE
Theme URI: https://koutaibaarchitecture.com
Author: KOUTAIBA ARCHITECTURE
Description: Thème bloc sur mesure — architecture et architecture intérieure, Annaba · Paris. Construit depuis la maquette validée ; toutes les pages sont en blocs natifs, modifiables dans l'éditeur.
Version: 1.0.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koutaiba
*/

/* KOUTAIBA ARCHITECTURE — maquette
   Registre relevé sur la référence : aucun accent, blanc pur / gris froid #F8F8F8,
   bandes bord à bord, angles droits (cartes adoucies à 4-6 px), titres à gauche,
   texte courant petit et gris.
   Typographie : Figtree seule, à la demande du client (« la police sera en figtree »). */

:root {
  --noir: #0b0b0b;
  --blanc: #ffffff;
  --bande: #f8f8f8;
  --carte: #f6f6f6;
  --texte: #707070;
  --filet: #e8e8e8;
  --ambre: #d99035;
  --police: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gouttiere: 32px;
  --gap: 22px;
  --courbe: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font: 400 14px/1.75 var(--police);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea, option { font-family: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--police);
  font-weight: 400;
  color: var(--noir);
  letter-spacing: -0.02em;
  hyphens: none;
  text-wrap: balance;
}

.icone { width: 10px; height: 10px; flex: none; }

/* ---------- éléments communs ---------- */

.titre-section { font-size: 52px; line-height: 1.12; letter-spacing: -0.03em; }

.lien-souligne {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--police);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--noir);
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
}
.lien-souligne .icone { transition: transform .3s var(--courbe); }
.lien-souligne:hover .icone { transform: translate(2px, -2px); }

.bouton-noir, .bouton-blanc {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 0 30px;
  font: 600 11px/1 var(--police);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.bouton-noir { background: var(--noir); color: var(--blanc); }
.bouton-noir:hover { background: #2a2a2a; }
.bouton-blanc { background: var(--blanc); color: var(--noir); }
.bouton-blanc:hover { background: #ececec; }

.section { padding: 128px var(--gouttiere) 118px; }
.bande { background: var(--bande); }

.entete {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-bottom: 60px;
}

.fleches { display: flex; gap: 4px; }
.fleche {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  color: var(--noir);
  transition: background-color .25s, color .25s;
}
.fleche svg { width: 16px; height: 16px; }
.fleche-suiv { background: var(--noir); color: var(--blanc); }
.fleche:hover { background: #2a2a2a; color: var(--blanc); }

.etiquette {
  display: block;
  font: 500 11px/1 var(--police);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
}

/* ---------- héros ---------- */

.hero {
  position: relative;
  height: 898px;
  color: var(--blanc);
  overflow: hidden;
  isolation: isolate;
}
.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  margin: 0;
  overflow: hidden;
}
body .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(18, 13, 8, .55) 0%, rgba(18, 13, 8, 0) 22%),
    linear-gradient(0deg, rgba(18, 13, 8, .72) 0%, rgba(18, 13, 8, .28) 34%, rgba(18, 13, 8, 0) 58%);
}

.barre {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; padding: 0 var(--gouttiere);
  color: var(--blanc);
}
.logo { display: block; flex: none; line-height: 0; }
body .logo img { width: auto; height: 16px; }
.menu {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 40px;
}
.menu a {
  font: 400 12px/1 var(--police);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: .82;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: opacity .2s, border-color .2s;
}
.menu a:hover { opacity: 1; }
.menu a.actif { opacity: 1; border-bottom-color: currentColor; }
.lien-rdv {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1 var(--police);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.lien-rdv .icone { transition: transform .3s var(--courbe); }
.lien-rdv:hover .icone { transform: translate(2px, -2px); }
.burger { display: none; }
.menu-mobile-seul { display: none; }

.hero-titre {
  position: absolute; left: var(--gouttiere); right: var(--gouttiere); bottom: 144px;
  color: var(--blanc);
  font-size: 88px;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.hero-titre span { display: block; }
.hero-titre .l2 { text-align: right; }

.hero-bandeau {
  position: absolute; left: var(--gouttiere); right: var(--gouttiere); bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  min-height: 94px; padding: 16px 24px;
  background: rgba(24, 18, 12, .38);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-bandeau p {
  max-width: 640px;
  font-size: 13px; line-height: 1.7;
  color: rgba(255, 255, 255, .74);
}
.hero-actions { display: flex; align-items: center; gap: 36px; flex: none; }
.hero-actions .lien-souligne { color: var(--blanc); }
.hero-actions .bouton-blanc { height: 46px; padding: 0 26px; }

/* ---------- expertise ---------- */

.expertise {
  display: grid;
  grid-template-columns: 1fr 240px 445px;
  gap: var(--gap);
  align-items: end;
  padding: 123px var(--gouttiere) 115px;
}
.expertise-texte {
  display: flex; flex-direction: column; justify-content: space-between;
  align-self: stretch;
  padding-top: 4px;
}
.expertise-texte p { max-width: 456px; font-size: 13.5px; }
.expertise-texte .lien-souligne { align-self: flex-start; }
body .expertise-petit img { width: 240px; height: 280px; object-fit: cover; }
body .expertise-grand img { width: 445px; height: 583px; object-fit: cover; }

/* ---------- solutions ---------- */

.solutions-grille {
  display: grid;
  grid-template-columns: 298fr 298fr 418fr 297fr;
  gap: var(--gap);
  align-items: start;
}
.solution { display: block; }
.solution-image { position: relative; overflow: hidden; }
body .solution-image img { width: 100%; height: 328px; object-fit: cover; transition: transform .8s var(--courbe); }
body .solution:hover .solution-image img { transform: scale(1.04); }
body .solution-haute .solution-image img { height: 548px; }
.solution-basse { margin-top: 224px; }
body .solution-basse .solution-image img { height: 324px; }
.tag {
  position: absolute; top: 12px; right: 12px;
  padding: 6px 9px;
  background: var(--blanc);
  color: var(--noir);
  font: 600 9px/1 var(--police);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.legende {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 16px;
  font: 400 14.5px/1.35 var(--police);
  color: var(--noir);
}

/* ---------- services ---------- */

.services .titre-section { text-align: center; margin-bottom: 66px; }
.services-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 333px;
  gap: var(--gap);
}
.service {
  display: flex; flex-direction: column;
  padding: 30px 28px 28px;
  background: var(--carte);
  border-radius: 4px;
}
.service-titre {
  display: flex; gap: 16px;
  font: 500 21px/1.28 var(--police);
  letter-spacing: -0.015em;
  color: var(--noir);
}
.service-titre .num { flex: none; }
.service hr {
  width: 100%; height: 1px; margin: 20px 0 18px;
  border: 0; background: #e3e3e3;
}
.service p { max-width: 370px; font-size: 13px; line-height: 1.7; }
.service .lien-souligne { margin-top: auto; align-self: flex-start; }
.service-image { border-radius: 4px; overflow: hidden; }
body .service-image img { width: 100%; height: 100%; object-fit: cover; }
.services-pied { display: flex; justify-content: center; margin-top: 48px; }

/* ---------- carrousels (projets, avis) ---------- */

.carrousel {
  display: flex; gap: var(--gap);
  margin-right: calc(-1 * var(--gouttiere));
  padding-right: var(--gouttiere);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carrousel::-webkit-scrollbar { display: none; }
.carrousel > * { scroll-snap-align: start; flex: none; }

.projet { width: 346px; }
.projet-image { overflow: hidden; }
body .projet-image img { width: 100%; height: 376px; object-fit: cover; transition: transform .8s var(--courbe); }
body .projet:hover .projet-image img { transform: scale(1.04); }
.projet-grand { width: 477px; }
body .projet-grand .projet-image img { height: 553px; object-position: 50% 72%; }
.projet-legende {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 12px;
  font: 400 14px/1.35 var(--police);
  color: var(--noir);
}
.projet-legende span:last-child { text-align: right; color: var(--texte); }

.avis {
  display: flex; flex-direction: column;
  width: 520px; min-height: 340px;
  padding: 34px 34px 30px;
  background: var(--blanc);
  border: 1px solid #ececec;
  border-radius: 6px;
}
.etoiles { color: var(--ambre); font-size: 14px; letter-spacing: 3px; line-height: 1; }
.avis-citation {
  margin-top: 26px;
  font: 500 23px/1.36 var(--police);
  letter-spacing: -0.02em;
  color: var(--noir);
}
.avis-texte { max-width: 380px; margin-top: 16px; font-size: 13px; line-height: 1.7; }
.avis-pied {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: auto; padding-top: 28px;
  border-top: 1px solid transparent;
}
.avis-nom { font: 600 14px/1.3 var(--police); color: var(--noir); }
.avis-projet { font-size: 12px; color: var(--texte); text-align: right; }

.temoignages { padding-bottom: 125px; }

/* ---------- agences (carte en points) ---------- */

.agences-grille {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}
.agences-infos { display: flex; flex-direction: column; gap: 14px; }
.agence {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 32px 32px 30px;
  background: var(--blanc);
  border-radius: 4px;
}
.agence-etiquette {
  display: flex; gap: 14px;
  font: 600 10.5px/1 var(--police);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--noir);
}
.agence-etiquette span { font-weight: 400; color: #9a9a9a; letter-spacing: 0.04em; }
.agence h3 { margin: 26px 0 14px; font-size: 42px; line-height: 1.05; letter-spacing: -0.035em; }
.agence-adresse { font-size: 13px; line-height: 1.7; }
.agence-tel { margin-top: 12px; font-size: 13.5px; color: var(--noir); }
.agence-tel a:hover { text-decoration: underline; }
.agence .lien-souligne { margin-top: auto; align-self: flex-start; }
.agence .agence-tel + .lien-souligne { margin-top: auto; }
.agences-pratique {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 16px 4px 0;
  font-size: 13px; color: var(--noir);
}
.agences-pratique .etiquette { margin-bottom: 10px; font-size: 10px; }
.agences-pratique a:hover { text-decoration: underline; }

.carte-agences {
  position: relative;
  aspect-ratio: 640 / 675;
  background: var(--blanc);
  border-radius: 4px;
  overflow: hidden;
}
.carte-points, .carte-trajet { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-trajet path {
  fill: none;
  stroke: var(--noir);
  stroke-width: 1.4;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
}
.repere {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  transform: translate(-9px, -50%);
}
.repere-paris { left: 41.17%; top: 21.87%; }
.repere-annaba { left: 59.19%; top: 72.75%; }
.repere-point {
  position: relative;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--noir);
  box-shadow: 0 0 0 3px var(--blanc), 0 0 0 4px #bdbdbd;
}
.repere-point::after {
  content: ''; position: absolute; inset: -4px;
  border: 1px solid var(--noir);
  border-radius: 50%;
  animation: pulsation 2.4s var(--courbe) infinite;
}
.repere-nom {
  padding: 6px 10px 5px;
  background: var(--noir);
  color: var(--blanc);
  font: 600 10px/1 var(--police);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- pied de page ---------- */

.pied {
  position: relative;
  padding: 90px var(--gouttiere) 0;
  background: #000;
  color: #9a9a9a;
  overflow: hidden;
}
.pied-haut {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid #1f1f1f;
}
.infolettre {
  display: flex; align-items: center; justify-content: space-between;
  width: 300px; padding-bottom: 10px;
  border-bottom: 1px solid #4a4a4a;
  margin-bottom: 8px;
}
.infolettre input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  color: var(--blanc);
  font: 400 12.5px/1.4 var(--police);
}
.infolettre input::placeholder { color: #8a8a8a; }
.infolettre button { color: var(--blanc); }
.infolettre button svg { width: 12px; height: 12px; }
.pied-titre { color: var(--blanc); font-size: 80px; line-height: 1; letter-spacing: -0.035em; }

.pied-grille {
  display: grid;
  grid-template-columns: 537px 1fr 227px;
  grid-template-rows: auto auto auto;
  column-gap: 32px;
  padding-top: 64px;
}
.pied-logo { display: block; line-height: 0; }
body .pied-logo img { width: auto; height: 40px; }
.pied-intro { max-width: 270px; margin-top: 22px; font-size: 12.5px; line-height: 1.7; color: #7d7d7d; }
.pied-bloc { font-size: 13px; line-height: 1.75; color: #e6e6e6; }
.pied-bloc .label {
  display: block; margin-bottom: 12px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #6a6a6a;
}
.pied-bloc a:hover { color: var(--blanc); }
.pied-ligne2 { margin-top: 70px; }
.pied-liens { display: flex; flex-direction: column; gap: 2px; margin-top: 82px; font-size: 12.5px; color: #d8d8d8; }
.pied-liens a:hover { color: var(--blanc); }
.pied-manifeste { max-width: 300px; margin-top: 82px; font-size: 12.5px; line-height: 1.7; color: #d8d8d8; }
.reseaux { display: flex; gap: 12px; margin-top: 82px; align-self: start; }
.reseaux a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--blanc);
  border-radius: 50%;
  color: var(--noir);
  transition: background-color .25s, transform .3s var(--courbe);
}
.reseaux a:hover { background: #d9d9d9; transform: translateY(-2px); }
.reseaux svg { width: 14px; height: 14px; }

/* grand logo de clôture, gris sombre, coupé par le bas de la page */
.pied-marque {
  margin: 76px calc(16px - var(--gouttiere)) 0;
  aspect-ratio: 1682 / 331;
  overflow: hidden;
  user-select: none;
}
body .pied-marque img { width: 100%; height: auto; opacity: .16; }

/* ---------- pages intérieures ---------- */

.hero-page { height: 760px; }

.bouton-contour {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 0 30px;
  border: 1px solid var(--noir);
  color: var(--noir);
  font: 600 11px/1 var(--police);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.bouton-contour:hover { background: var(--noir); color: var(--blanc); }

/* bloc d'appel, commun aux pages */
.appel .entete { margin-bottom: 0; }
.appel-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* valeurs (à propos) */
.services-grille.quatre { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; }
.quatre .service { min-height: 300px; }
.bande .service { background: var(--blanc); }

/* grande photo avec citation (à propos) */
.bandeau-photo { position: relative; height: 680px; overflow: hidden; isolation: isolate; color: var(--blanc); }
.bandeau-photo-image { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
body .bandeau-photo-image img { width: 100%; height: 100%; object-fit: cover; }
.bandeau-photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(18, 13, 8, .7) 0%, rgba(18, 13, 8, .2) 45%, rgba(18, 13, 8, 0) 70%);
}
.bandeau-citation { position: absolute; left: var(--gouttiere); right: var(--gouttiere); bottom: 64px; margin: 0; }
.bandeau-citation p { font-size: 60px; line-height: 1.08; letter-spacing: -0.035em; color: var(--blanc); max-width: 1000px; }

/* détail des services */
.services-detail { display: flex; flex-direction: column; gap: 128px; }
.service-detail {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 84px;
  align-items: center;
  scroll-margin-top: 24px;
}
.service-detail.inverse { grid-template-columns: 1fr 1.3fr; }
.service-detail.inverse .service-detail-image { order: 2; }
.service-detail-image { overflow: hidden; }
body .service-detail-image img { width: 100%; height: 620px; object-fit: cover; }
body .service-detail.inverse .service-detail-image img { height: 540px; }
.service-detail-texte .etiquette { margin-bottom: 26px; }
.service-detail-texte p { max-width: 460px; margin-top: 26px; font-size: 14px; }
.liste-prestations { max-width: 460px; margin-top: 34px; border-top: 1px solid var(--filet); counter-reset: presta; }
.liste-prestations li {
  display: flex; gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
  font-size: 14px; color: var(--noir);
  counter-increment: presta;
}
.liste-prestations li::before { content: counter(presta, decimal-leading-zero); min-width: 22px; font-size: 12px; line-height: 1.9; color: #9a9a9a; }
.service-detail-texte .lien-souligne { margin-top: 34px; }

/* méthode en quatre étapes */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid #dcdcdc; }
.etape { display: block; padding: 34px 32px 10px 0; }
.etape + .etape { padding-left: 28px; border-left: 1px solid #dcdcdc; }
.etape-num { display: block; font: 300 64px/1 var(--police); letter-spacing: -0.04em; color: var(--noir); }
.etape h3 { margin-top: 44px; font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }
.etape p { max-width: 280px; margin-top: 14px; font-size: 13px; line-height: 1.7; }

/* projets : filtres et mosaïque */
.filtres { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 28px; }
.filtre {
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  font: 500 12px/1 var(--police);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a8a;
  transition: color .2s, border-color .2s;
}
.filtre:hover { color: var(--noir); }
.filtre.est-actif { color: var(--noir); border-bottom-color: var(--noir); }
.projets-grille { columns: 3; column-gap: var(--gap); }
.projet-carte { display: block; break-inside: avoid; margin-bottom: 46px; scroll-margin-top: 24px; }
body .projet-carte .projet-image img { height: auto; aspect-ratio: 4 / 3; }
body .projet-carte.haut .projet-image img { aspect-ratio: 4 / 5; }
body .projet-carte.carre .projet-image img { aspect-ratio: 1; }
body .projet-carte:hover .projet-image img { transform: scale(1.04); }
.projet-carte.est-masque { display: none; }

/* contact : formulaire de rendez-vous */
.contact-grille { display: grid; grid-template-columns: 0.8fr 1fr; gap: 84px; align-items: start; }
.contact-intro p { max-width: 440px; margin-top: 28px; font-size: 14px; }
.contact-direct { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin: 44px 0 40px; }
.contact-direct dd { margin: 10px 0 0; font-size: 14px; color: var(--noir); }
.contact-direct a:hover { text-decoration: underline; }
.formulaire {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px 28px;
  padding: 44px;
  background: var(--bande);
  border-radius: 4px;
}
.champ { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ-large { grid-column: 1 / -1; }
.champ > label, .champ legend {
  padding: 0;
  font: 500 11px/1 var(--police);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.champ legend { margin-bottom: 10px; }
.champ input:not([type="radio"]), .champ select, .champ textarea {
  width: 100%;
  padding: 10px 0 12px;
  background: transparent;
  border: 0; border-bottom: 1px solid #cfcfcf; border-radius: 0;
  outline: 0;
  font: 400 15px/1.4 var(--police);
  color: var(--noir);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s;
}
.champ select {
  padding-right: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%230b0b0b' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center / 12px;
}
.champ textarea { min-height: 124px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-bottom-color: var(--noir); }
.choix-groupe { display: flex; gap: 32px; }
.choix { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--noir); cursor: pointer; }
.choix input { width: 16px; height: 16px; margin: 0; accent-color: var(--noir); }
.formulaire-pied { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.formulaire-note { max-width: 280px; font-size: 12px; line-height: 1.6; }
.formulaire-retour { grid-column: 1 / -1; padding: 14px 16px; background: var(--blanc); border: 1px solid #e3e3e3; font-size: 13px; color: var(--noir); }

/* ---------- animations ---------- */

@keyframes recul { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes monte { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulsation { 0% { opacity: .9; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(2.4); } }

body .hero-photo img { animation: recul 2.8s var(--courbe) both; }
.barre { animation: apparait 1s .15s both; }
.hero-titre .l1 { animation: monte 1.1s .25s var(--courbe) both; }
.hero-titre .l2 { animation: monte 1.1s .42s var(--courbe) both; }
.hero-bandeau { animation: monte 1s .7s var(--courbe) both; }

/* Apparitions au défilement. Les classes sont posées par app.js, seulement sur ce qui
   est hors écran au chargement : sans JavaScript, tout reste visible. */

/* textes et cartes : montée en fondu */
.a-reveler {
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 1s var(--courbe) var(--delai, 0s), transform 1.2s var(--courbe) var(--delai, 0s);
}
.a-reveler.revele { opacity: 1; transform: none; }

/* titres : chaque ligne sort de derrière un masque */
.ligne { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ligne > span { display: block; }
.a-lignes .ligne > span { transform: translateY(112%); transition: transform 1.15s var(--courbe); }
.a-lignes .ligne:nth-child(2) > span { transition-delay: .1s; }
.a-lignes .ligne:nth-child(3) > span { transition-delay: .2s; }
.a-lignes.revele .ligne > span { transform: none; }

/* photos : volet qui s'ouvre du bas vers le haut, l'image se pose en reculant.
   Le volet est posé sur l'image, jamais sur le cadre observé : un cadre entièrement
   rogné par clip-path est vu comme invisible et ne se déclencherait jamais. */
body .a-devoiler img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.2);
  transition: clip-path 1.3s var(--courbe) var(--delai, 0s), transform 1.7s var(--courbe) var(--delai, 0s);
}
body .a-devoiler.revele img { clip-path: inset(0 0 0 0); transform: none; }

/* carte des agences : points, puis trajet tracé, puis repères */
.carte-agences.a-carte .carte-points { opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--courbe), transform 1.8s var(--courbe); }
.carte-agences.a-carte .carte-trajet { clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--courbe) .7s; }
.carte-agences.a-carte .repere { opacity: 0; transform: translate(-9px, -50%) scale(.6); transition: opacity .6s var(--courbe), transform .8s cubic-bezier(.3, 1.6, .5, 1); }
.carte-agences.a-carte .repere-paris { transition-delay: .5s; }
.carte-agences.a-carte .repere-annaba { transition-delay: 2.1s; }
.carte-agences.revele .carte-points { opacity: 1; transform: none; }
.carte-agences.revele .carte-trajet { clip-path: inset(0 0 0 0); }
.carte-agences.revele .repere { opacity: 1; transform: translate(-9px, -50%); }

/* grand logo du pied de page : il monte depuis le bas */
body .pied-marque.a-monter img { transform: translateY(45%); transition: transform 1.6s var(--courbe); }
body .pied-marque.a-monter.revele img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .a-reveler, .a-lignes .ligne > span, body .a-devoiler img,
  .carte-agences .carte-points, .carte-agences .carte-trajet, body .pied-marque img {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .carte-agences .repere { opacity: 1 !important; transform: translate(-9px, -50%) !important; }
  body .pied-marque img { opacity: .16 !important; }
}

/* ---------- adaptatif ---------- */

@media (max-width: 1200px) {
  .expertise { grid-template-columns: 1fr 200px 360px; }
  body .expertise-petit img { width: 200px; height: 240px; }
  body .expertise-grand img { width: 360px; height: 480px; }
  .hero-titre { font-size: 72px; }
  .pied-grille { grid-template-columns: 1.2fr 1fr 227px; }
  .menu { gap: 26px; }
  body .logo img { height: 13px; }
}

@media (max-width: 900px) {
  :root { --gouttiere: 20px; --gap: 16px; }

  .titre-section { font-size: 34px; }
  .section { padding: 80px var(--gouttiere) 80px; }
  .entete { margin-bottom: 36px; }
  .entete .bouton-noir { display: none; }

  .barre { height: 72px; }
  body .logo img { height: 12px; }
  .menu {
    position: fixed; inset: 0; transform: none; z-index: 10;
    flex-direction: column; justify-content: center; gap: 26px;
    padding: 0 28px;
    background-color: var(--noir);
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .menu a { font: 400 34px/1.1 var(--police); letter-spacing: -0.02em; text-transform: none; opacity: 1; }
  .menu a.actif { border-bottom-color: transparent; }
  .menu-ouvert .menu { opacity: 1; visibility: visible; }
  .menu-mobile-seul { display: block; margin-top: 12px; }
  .menu-mobile-seul a { font: 600 12px/1 var(--police); letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
  .lien-rdv { display: none; }
  .burger {
    position: relative; z-index: 11;
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
  }
  .burger span, .burger span::before, .burger span::after {
    display: block; width: 22px; height: 1px; background: currentColor; content: '';
    transition: transform .3s, background-color .3s;
  }
  .burger span { position: relative; }
  .burger span::before { position: absolute; top: -7px; }
  .burger span::after { position: absolute; top: 7px; }
  .menu-ouvert .burger span { background: transparent; }
  .menu-ouvert .burger span::before { transform: translateY(7px) rotate(45deg); }
  .menu-ouvert .burger span::after { transform: translateY(-7px) rotate(-45deg); }

  .hero { height: auto; min-height: 720px; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--gouttiere) 16px; }
  .hero-titre { position: static; font-size: 46px; line-height: 1.06; margin-bottom: 28px; }
  .hero-titre .l2 { text-align: left; }
  .hero-bandeau { position: static; flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; }
  .hero-actions { flex-wrap: wrap; gap: 22px; }

  .expertise { grid-template-columns: 1fr 1.6fr; padding: 80px var(--gouttiere); }
  .expertise-texte { grid-column: 1 / -1; gap: 24px; margin-bottom: 20px; }
  body .expertise-petit img, body .expertise-grand img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .expertise-petit { align-self: end; }

  .solutions-grille { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  body .solution-image img, body .solution-haute .solution-image img, body .solution-basse .solution-image img { height: 240px; }
  .solution-basse { margin-top: 0; }
  .legende { grid-template-columns: 1fr; gap: 4px; font-size: 14px; }

  .services .titre-section { margin-bottom: 36px; }
  .services-grille { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .service { min-height: 280px; }
  .service-image { height: 240px; }

  .projet { width: 72vw; }
  .projet-grand { width: 82vw; }
  body .projet-image img { height: 300px; }
  body .projet-grand .projet-image img { height: 380px; }

  .avis { width: 84vw; min-height: 320px; padding: 28px 24px 24px; }
  .avis-citation { font-size: 20px; }

  .agences-grille { grid-template-columns: 1fr; }
  .agence { padding: 26px 24px 24px; }
  .agence h3 { margin: 20px 0 12px; font-size: 34px; }
  .agence .lien-souligne { margin-top: 26px; }
  .agences-pratique { grid-template-columns: 1fr; gap: 18px; padding: 14px 4px 10px; }
  .carte-agences { order: -1; }
  .repere-point { width: 14px; height: 14px; }
  .repere-nom { font-size: 9px; padding: 5px 8px 4px; }

  .pied { padding-top: 64px; }
  .pied-haut { flex-direction: column-reverse; align-items: flex-start; }
  .pied-titre { font-size: 56px; }
  .infolettre { width: 100%; }
  .pied-grille { grid-template-columns: 1fr; row-gap: 36px; padding-top: 44px; }
  .pied-ligne2, .pied-liens, .pied-manifeste, .reseaux { margin-top: 0; }
  body .pied-logo img { height: 44px; }
  .pied-marque { margin-top: 56px; margin-inline: calc(10px - var(--gouttiere)); }

  /* pages intérieures */
  .hero-page { min-height: 640px; }
  .appel .entete { flex-direction: column; align-items: flex-start; gap: 28px; }
  .appel .entete .bouton-noir { display: inline-flex; }
  .services-grille.quatre { grid-template-columns: 1fr 1fr; }
  .quatre .service { min-height: 240px; }
  .bandeau-photo { height: 440px; }
  .bandeau-citation { bottom: 36px; }
  .bandeau-citation p { font-size: 32px; }
  .services-detail { gap: 72px; }
  .service-detail, .service-detail.inverse { grid-template-columns: 1fr; gap: 28px; }
  .service-detail.inverse .service-detail-image { order: 0; }
  body .service-detail-image img, body .service-detail.inverse .service-detail-image img { height: 320px; }
  .etapes { grid-template-columns: 1fr 1fr; border-top: 0; }
  .etape, .etape + .etape { padding: 28px 20px 24px 0; border-left: 0; border-top: 1px solid #dcdcdc; }
  .etape h3 { margin-top: 24px; }
  .etape-num { font-size: 48px; }
  .projets-page .entete { flex-direction: column; align-items: flex-start; }
  .filtres { justify-content: flex-start; gap: 12px 22px; }
  .projets-grille { columns: 2; }
  .projet-carte { margin-bottom: 32px; }
  .contact-grille { grid-template-columns: 1fr; gap: 48px; }
  .formulaire { grid-template-columns: 1fr; padding: 28px 22px; gap: 26px; }
}

@media (max-width: 560px) {
  .expertise { grid-template-columns: 1fr; }
  .expertise-petit { display: none; }
  .solutions-grille { grid-template-columns: 1fr; }
  body .solution-image img, body .solution-haute .solution-image img, body .solution-basse .solution-image img { height: 300px; }
  .fleches .fleche { width: 46px; height: 46px; }
  .services-grille.quatre { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr; }
  .projets-grille { columns: 1; }
  .contact-direct { grid-template-columns: 1fr; }
  .appel-actions { width: 100%; }
  .appel-actions > a { flex: 1 1 100%; }
}

/* =========================================================================
   Adaptations WordPress
   Tout ce qui précède est la feuille de la maquette validée, inchangée (seuls
   les sélecteurs d'images sont préfixés par « body » à la construction, pour
   passer devant « .wp-block-image img { height:auto } » du cœur).
   Ce qui suit ne traite QUE les écarts de balisage entre la maquette et les
   blocs natifs. Le CSS des blocs étant imprimé après la feuille du thème,
   chaque surcharge est plus spécifique, jamais simplement plus tardive.
   ========================================================================= */

:root {
  --fleche-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4.2 3H9v4.8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --fleche-gauche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3m4-4-4 4 4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --fleche-droite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* ---------- socle ---------- */

.wp-site-blocks { position: relative; }
.entete-site { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.contenu, .contenu > .entry-content { margin: 0; }
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
figure.wp-block-image > a { display: block; }
.wp-block-buttons { gap: 12px; }

/* ---------- en-tête : logo, menu natif, lien rendez-vous ---------- */

.barre .logo a { display: block; }
/* WordPress recopie la classe « menu » sur la liste interne du bloc : la règle de centrage
   de la maquette ne doit s'appliquer qu'au <nav>, sinon la liste tombe dans une boîte de 0 px */
.barre .wp-block-navigation__container.menu { position: static; left: auto; transform: none; }
.barre .wp-block-navigation.menu .wp-block-navigation__container { gap: 40px; }
.barre .wp-block-navigation.menu .wp-block-navigation-item__content { padding-bottom: 4px; border-bottom: 1px solid transparent; }
.barre .wp-block-navigation.menu .current-menu-item > .wp-block-navigation-item__content { opacity: 1; border-bottom-color: currentColor; }
.barre .wp-block-navigation.menu .menu-mobile-seul { display: none; }
.barre .wp-block-navigation__responsive-container-open,
.barre .wp-block-navigation__responsive-container-close { color: var(--blanc); }
.barre .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--noir) !important; /* le CSS du bloc impose du blanc, imprimé après cette feuille */
  color: var(--blanc) !important;
  padding: 28px;
}
.barre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 26px; }
.barre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font: 400 34px/1.1 var(--police);
  letter-spacing: -0.02em;
  text-transform: none;
  opacity: 1;
}
.barre .wp-block-navigation__responsive-container.is-menu-open .menu-mobile-seul { display: flex; margin-top: 12px; }
.barre .wp-block-navigation__responsive-container.is-menu-open .menu-mobile-seul .wp-block-navigation-item__content {
  font: 600 12px/1 var(--police);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}
.lien-rdv a, .lien-souligne a { color: inherit; }
.lien-rdv::after,
.lien-souligne.avec-fleche::after {
  content: '';
  width: 10px; height: 10px; flex: none;
  background: currentColor;
  -webkit-mask: var(--fleche-diag) center / contain no-repeat;
  mask: var(--fleche-diag) center / contain no-repeat;
  transition: transform .3s var(--courbe);
}
.lien-rdv:hover::after, .lien-souligne.avec-fleche:hover::after { transform: translate(2px, -2px); }

/* ---------- héros : voile en pseudo-élément, titre sur deux lignes par <em> ---------- */

.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 13, 8, .55) 0%, rgba(18, 13, 8, 0) 22%),
    linear-gradient(0deg, rgba(18, 13, 8, .72) 0%, rgba(18, 13, 8, .28) 34%, rgba(18, 13, 8, 0) 58%);
}
.hero-titre { animation: monte 1.1s .25s var(--courbe) backwards; }
.hero-titre em { display: block; font-style: normal; text-align: right; animation: monte 1.1s .42s var(--courbe) backwards; }
.hero-bandeau > p { max-width: 640px; }
.hero-actions p.lien-souligne { max-width: none; color: var(--blanc); }
.hero-actions .wp-block-button .wp-block-button__link { height: 46px; padding: 0 26px; }
.hero-simple { height: 520px; background: var(--noir); }
.hero-simple .hero-titre { color: var(--blanc); }

/* ---------- boutons : la classe est sur le conteneur, le style sur le lien ---------- */

.wp-block-button.bouton-noir, .wp-block-button.bouton-blanc, .wp-block-button.bouton-contour {
  display: block; height: auto; padding: 0; background: none; border: 0; border-radius: 0;
}
.wp-block-button.bouton-noir .wp-block-button__link,
.wp-block-button.bouton-blanc .wp-block-button__link,
.wp-block-button.bouton-contour .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 0 30px;
  border-radius: 0;
  font: 600 11px/1 var(--police);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.wp-block-button.bouton-noir .wp-block-button__link { background: var(--noir); color: var(--blanc); border: 0; }
.wp-block-button.bouton-noir .wp-block-button__link:hover { background: #2a2a2a; }
.wp-block-button.bouton-blanc .wp-block-button__link { background: var(--blanc); color: var(--noir); border: 0; }
.wp-block-button.bouton-blanc .wp-block-button__link:hover { background: #ececec; }
.wp-block-button.bouton-contour .wp-block-button__link { background: transparent; color: var(--noir); border: 1px solid var(--noir); }
.wp-block-button.bouton-contour .wp-block-button__link:hover { background: var(--noir); color: var(--blanc); }

/* ---------- liens soulignés et étiquettes : un <p> porte la classe ---------- */

p.lien-souligne {
  font: 600 11px/1 var(--police);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--noir);
  max-width: none;
}
p.etiquette {
  font: 500 11px/1 var(--police);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
  max-width: none;
}

/* ---------- flèches de carrousel et filtres : des <p> rendus cliquables par le script ---------- */

.fleche { font-size: 0; cursor: pointer; user-select: none; }
.fleche::before {
  content: ''; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--fleche-gauche) center / contain no-repeat;
  mask: var(--fleche-gauche) center / contain no-repeat;
}
.fleche-suiv::before { -webkit-mask-image: var(--fleche-droite); mask-image: var(--fleche-droite); }
.filtre { cursor: pointer; user-select: none; }
:where(.fleche, .filtre):focus-visible { outline: 1px solid var(--noir); outline-offset: 4px; }

/* ---------- cartes ---------- */

.solution-image .wp-block-image, .projet-image a { display: block; }
.projet-legende p:last-child { text-align: right; color: var(--texte); }
.service-entete { display: flex; gap: 16px; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid #e3e3e3; }
.service-entete p.num, .service-entete h3 {
  margin: 0; max-width: none;
  font: 500 21px/1.28 var(--police);
  letter-spacing: -0.015em;
  color: var(--noir);
}
.service-entete p.num { flex: none; }
.etape .etape-num { max-width: none; margin: 0; font: 300 64px/1 var(--police); letter-spacing: -0.04em; color: var(--noir); }
.service-detail-texte p.etiquette { margin-top: 0; margin-bottom: 26px; }
.agences-pratique p.etiquette { margin-bottom: 10px; font-size: 10px; }
.contact-direct p.etiquette { margin: 0; }
.contact-direct p:not(.etiquette) { margin: 10px 0 0; font-size: 14px; color: var(--noir); }
.pied-liens p { margin: 0; }

/* ---------- carte des agences ---------- */

.agence-etiquette em { font-style: normal; font-weight: 400; color: #9a9a9a; letter-spacing: 0.04em; }
.carte-agences .carte-points { z-index: 0; }
body .carte-agences .carte-points img { width: 100%; height: 100%; }
.carte-agences::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 675'%3E%3Cpath d='M263.5 147.6Q236 360 378.8 491.1' fill='none' stroke='%230b0b0b' stroke-width='1.4' stroke-dasharray='4 6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.carte-agences p.repere {
  position: absolute; z-index: 2;
  display: block;
  margin: 0 0 0 19px;
  padding: 6px 10px 5px;
  background: var(--noir);
  color: var(--blanc);
  font: 600 10px/1 var(--police);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translate(0, -50%);
}
.carte-agences p.repere::before {
  content: ''; position: absolute; left: -28px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%;
  background: var(--noir);
  box-shadow: 0 0 0 3px var(--blanc), 0 0 0 4px #bdbdbd;
}
.carte-agences p.repere::after {
  content: ''; position: absolute; left: -32px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px;
  border: 1px solid var(--noir);
  border-radius: 50%;
  animation: pulsation 2.4s var(--courbe) infinite;
}
.carte-agences.a-carte::after { clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--courbe) .7s; }
.carte-agences.a-carte.revele::after { clip-path: inset(0 0 0 0); }
.carte-agences.a-carte p.repere { opacity: 0; transform: translate(0, -50%) scale(.6); }
.carte-agences.a-carte.revele p.repere { opacity: 1; transform: translate(0, -50%); }

/* ---------- pied de page ---------- */

.pied .pied-marque { margin: 76px calc(16px - var(--gouttiere)) 0; }
/* la maquette réservait la case vide de la 2e rangée par un <div> vide ; ici on place le bloc « France » en 2e colonne */
.pied-grille > .pied-col2 { grid-column: 2; }
.pied-logo a { display: block; }
.pied .wp-block-social-links.reseaux { gap: 12px; margin: 82px 0 0; padding: 0; font-size: 14px; line-height: 1.75; }
.pied .wp-block-social-links.reseaux .wp-social-link {
  width: auto; height: auto; margin: 0; padding: 0;
  background: none; border-radius: 0;
  color: var(--noir);
}
.pied .wp-block-social-links.reseaux .wp-social-link a { justify-content: center; padding: 0; }
.pied .wp-block-social-links.reseaux .wp-social-link svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- Contact Form 7 ---------- */

.wpcf7-form-control-wrap { display: block; }
/* les champs en ligne dans leur <span> d'enrobage laissent l'espace sous la ligne de base (+8 px sous le message) */
.champ .wpcf7-form-control:not(.wpcf7-radio) { display: block; }
.choix-groupe .wpcf7-list-item { display: flex; }
.wpcf7-spinner { display: none; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 11.5px; color: var(--noir); }
.champ .wpcf7-not-valid { border-bottom-color: var(--noir); }
.choix-groupe .wpcf7-radio { display: flex; gap: 32px; }
.choix-groupe .wpcf7-list-item { margin: 0; }
.choix-groupe label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--noir); cursor: pointer; }
.choix-groupe input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--noir); }
input.bouton-noir { border: 0; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.wpcf7 form.wpcf7-form.formulaire .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0; padding: 14px 16px;
  background: var(--blanc);
  border: 1px solid #e3e3e3;
  font-size: 13px; color: var(--noir);
}
.infolettre { flex-wrap: wrap; }
.infolettre .wpcf7-form-control-wrap { flex: 1; min-width: 0; }
.infolettre input[type="email"] {
  width: 100%; padding: 0;
  background: none; border: 0; outline: 0;
  color: var(--blanc);
  font: 400 12.5px/1.4 var(--police);
}
.infolettre input[type="email"]::placeholder { color: #8a8a8a; }
.infolettre .wpcf7-submit {
  width: 24px; height: 18px; padding: 0;
  border: 0; border-radius: 0;
  background: var(--blanc);
  -webkit-mask: var(--fleche-diag) center / 12px no-repeat;
  mask: var(--fleche-diag) center / 12px no-repeat;
  color: transparent; font-size: 0;
  cursor: pointer;
}
.wpcf7 form.wpcf7-form.infolettre .wpcf7-response-output {
  flex-basis: 100%;
  margin: 12px 0 0; padding: 0;
  border: 0;
  font-size: 12px; color: #bdbdbd;
}
.infolettre .wpcf7-not-valid-tip { color: #bdbdbd; }

/* ---------- réduction des animations ---------- */

@media (prefers-reduced-motion: reduce) {
  .carte-agences p.repere { opacity: 1 !important; transform: translate(0, -50%) !important; }
  .carte-agences::after { clip-path: none !important; }
}

/* ---------- adaptatif ---------- */

/* le menu natif bascule en panneau à 600 px ; la maquette le fait à 900 px */
@media (min-width: 600px) and (max-width: 900px) {
  .barre .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .barre .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

@media (max-width: 900px) {
  /* la maquette cachait le menu entier derrière son propre bouton : ici c'est le bloc qui s'en charge */
  .barre .wp-block-navigation.menu {
    position: static; inset: auto; transform: none; z-index: auto;
    flex-direction: row; padding: 0;
    background: none;
    opacity: 1; visibility: visible; transition: none;
  }
  .barre .wp-block-navigation__container.menu {
    inset: auto; z-index: auto; padding: 0;
    background: none;
    opacity: 1; visibility: visible; transition: none;
  }
  .hero-titre em { text-align: left; }
  .entete .wp-block-buttons { display: none; }
  .appel .entete .wp-block-buttons { display: flex; }
  .carte-agences p.repere { margin-left: 15px; padding: 5px 8px 4px; font-size: 9px; }
  .carte-agences p.repere::before { left: -22px; width: 14px; height: 14px; margin-top: -7px; }
  .carte-agences p.repere::after { left: -26px; width: 22px; height: 22px; margin-top: -11px; }
  .pied .pied-marque { margin: 56px calc(10px - var(--gouttiere)) 0; }
  .pied .wp-block-social-links.reseaux { margin-top: 0; }
  .pied-grille > .pied-col2 { grid-column: auto; }
  .hero-simple { height: 420px; }
}

@media (max-width: 560px) {
  .appel-actions .wp-block-button { flex: 1 1 100%; }
  .appel-actions .wp-block-button .wp-block-button__link { width: 100%; }
}