/*
Theme Name: Faceo Studio
Theme URI: https://faceostudio.com
Author: Faceo Studio
Description: Thème bloc sur mesure de Faceo Studio (photographie scolaire), converti de la maquette validée. Pages entièrement éditables dans l'éditeur de blocs, en français et en anglais (Polylang).
Version: 1.0.0
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: faceo-studio
*/

/* ==========================================================================
   Faceo Studio — feuille du thème, adaptée de site/styles.css (la maquette validée).
   Mêmes valeurs, mêmes proportions ; seuls les sélecteurs suivent le balisage des
   blocs WordPress : une photo devient figure.wp-block-image > (a >) img, un
   conteneur div.wp-block-group, un bouton div.wp-block-button > a.wp-block-button__link.
   Le CSS des blocs est imprimé APRÈS cette feuille : toute surcharge d'un style de
   bloc est donc plus spécifique (classe du composant + classe du bloc).
   ========================================================================== */

:root {
  --anthracite: #48443d;
  --anthracite-nuit: #34312c;
  --creme: #f5f0e3;
  --ivoire: #f3eddd;
  --taupe: #736765;
  --blanc: #ffffff;

  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  --rayon: 16px;
  --enveloppe: 1280px;
  --gouttiere: clamp(16px, 5vw, 80px);
  --barre: 72px;            /* hauteur de la barre de navigation (26 px + logo de 46 px) */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--anthracite);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }   /* height:auto : sinon l'attribut height des blocs image l'emporte */
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, blockquote { margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* espacement automatique de Gutenberg : coupé dans theme.json (blockGap 0px), filet à spécificité nulle */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-site-blocks { position: relative; }
.wp-block-image img { box-sizing: border-box; }

.enveloppe {
  width: 100%;
  max-width: calc(var(--enveloppe) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

/* ---------- boutons ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; }
.wp-block-button.bouton-plein, .wp-block-button.bouton-clair { display: inline-block; }
.wp-block-button.bouton-plein .wp-block-button__link,
.wp-block-button.bouton-clair .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 20px;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.5;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease;
}
.wp-block-button.bouton-plein .wp-block-button__link { background: var(--anthracite); color: var(--ivoire); }
.wp-block-button.bouton-clair .wp-block-button__link { background: var(--ivoire); color: var(--anthracite); }
.wp-block-button.bouton-plein .wp-block-button__link:hover,
.wp-block-button.bouton-clair .wp-block-button__link:hover { transform: translateY(-2px); }
/* la flèche des boutons : un pseudo-élément, le texte du bouton reste éditable */
.wp-block-button.bouton-plein .wp-block-button__link::after,
.wp-block-button.bouton-clair .wp-block-button__link::after,
.menu .menu-reserver .wp-block-navigation-item__content::after {
  content: "→"; display: inline-block; transition: transform .25s ease;
}
.wp-block-button__link:hover::after, .menu .menu-reserver .wp-block-navigation-item__content:hover::after { transform: translateX(4px); }

/* ==========================================================================
   BARRE DE NAVIGATION (partie « header »)
   Sur l'accueil, elle flotte au-dessus de la photo d'ouverture, comme dans la maquette.
   ========================================================================== */
.home header.wp-block-template-part { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }

.barre {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 40px;
  padding-top: 26px;
}
.wp-block-image.logo a { display: block; }
.wp-block-image.logo img { height: 46px; width: auto; max-width: none; }
/* Accueil : le grand logo de l'ouverture suffit, le petit logo de la barre est masqué
   (ordinateur et tablette ; il reste sur téléphone). Les autres pages le gardent. */
.home .barre > .logo { visibility: hidden; }
/* menu et langues en pastilles translucides : lisibles même quand la photo passe sous la barre */
/* WordPress pose la classe « menu » sur la balise nav ET sur sa liste : la pastille ne vise que la nav */
nav.wp-block-navigation.menu, .langues {
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
nav.wp-block-navigation.menu { margin-left: auto; padding: 11px 24px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.wp-block-navigation.menu .wp-block-navigation__container { gap: 34px; }
.wp-block-navigation.menu .wp-block-navigation-item__content { padding: 0; color: inherit; }
.wp-block-navigation.menu .wp-block-navigation-item:not(.menu-reserver) .wp-block-navigation-item__content:hover,
.wp-block-navigation.menu .current-menu-item:not(.menu-reserver) > .wp-block-navigation-item__content {
  text-decoration: underline; text-underline-offset: 4px;
}
.langues { display: flex; gap: 10px; margin-left: -28px; padding: 12px 16px; font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.langues strong { font-weight: inherit; border-bottom: 1px solid currentColor; }
.langues a { opacity: .55; }
.langues a:hover { opacity: 1; }
.burger { display: none; }
/* bouton de réservation : dans le menu mobile et sous l'introduction de l'accueil, masqué sur ordinateur */
.wp-block-navigation.menu .menu-reserver, .wp-block-buttons.heros-reserver { display: none !important; }

/* ==========================================================================
   HÉROS — photo pleine page, logo géant en bas à gauche
   ========================================================================== */
/* Photo calée à droite ; à gauche, le fond studio se prolonge dans sa propre couleur :
   le fondu ne couvre que la bande de fond, jamais l'élève. */
.wp-block-image.photo-fondu {
  position: absolute; max-width: none; width: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu, 12%));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu, 12%));
}
.wp-block-image.photo-fondu img { height: 100%; width: auto; max-width: none; }

.heros {
  position: relative;
  min-height: max(100vh, 760px);
  overflow: hidden;
  background: #fefefe;
  display: flex; flex-direction: column;
  padding-top: var(--barre);   /* la barre flotte au-dessus : on lui garde sa place */
}
.wp-block-image.heros-photo {
  left: 46%; top: 9%; height: 100%; pointer-events: none;
  --fondu: 6%;
}

.heros-corps {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  padding-top: clamp(80px, 13vh, 150px);
}
.heros-intro { max-width: 270px; font-size: 15px; line-height: 1.45; font-weight: 500; }
.heros-annee {
  margin-top: auto;
  font-size: clamp(28px, 3.2vw, 46px); font-weight: 500; letter-spacing: -0.03em; line-height: 1;
}
.heros-titre { margin: 26px 0 clamp(64px, 9vh, 96px); line-height: 1; font-size: inherit; }
.heros-titre img { width: clamp(280px, 47vw, 700px); height: auto; }
.pastille {
  position: absolute; bottom: 34px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--anthracite);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 0 0 1px rgba(72, 68, 61, .08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pastille-gauche { left: var(--gouttiere); }
.pastille-droite { right: var(--gouttiere); }
.pastille-gauche::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--anthracite); }

/* ==========================================================================
   MANIFESTE
   ========================================================================== */
.manifeste {
  position: relative;
  padding: clamp(80px, 9vw, 130px) var(--gouttiere);
  background: var(--blanc);
  overflow: hidden;
}
.manifeste-corps {
  max-width: 760px; margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.wp-block-image.manifeste-avatar { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; }
.wp-block-image.manifeste-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 18%; }
.manifeste-sur { margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.manifeste-texte {
  margin-top: 28px;
  font-size: clamp(24px, 2.6vw, 36px); line-height: 1.28; font-weight: 500; letter-spacing: -0.02em;
  text-wrap: balance;
}
.manifeste-texte em { font-size: 1.08em; }
.manifeste-signe { margin-top: 32px; font-size: 15px; font-weight: 600; }
.manifeste-role { margin-top: 6px; font-size: 13px; color: var(--taupe); }

.wp-block-image.carte-penchee {
  position: absolute;
  width: clamp(120px, 13vw, 190px); aspect-ratio: 1;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 50px -18px rgba(52, 49, 44, .38);
}
.wp-block-image.carte-penchee img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.penchee-gauche { left: 6.5%; top: 18%; transform: rotate(-16deg); }
.wp-block-image.penchee-gauche img { object-position: 40% 40%; }
.wp-block-image.penchee-droite { right: 7%; top: 52%; transform: rotate(22deg); }
.wp-block-image.penchee-droite img { object-position: 30% 25%; }

/* ==========================================================================
   EN-TÊTES DE SECTION (centrés)
   ========================================================================== */
.entete-section { text-align: center; max-width: 900px; margin: 0 auto; }
.entete-section h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; font-weight: 500; letter-spacing: -0.035em; }
.entete-section h2 em { font-size: 1.1em; }
.entete-section p { margin: 18px auto 0; max-width: 540px; font-size: 15px; line-height: 1.5; color: var(--taupe); }
.entete-clair { color: var(--ivoire); }
.entete-clair p { color: rgba(243, 237, 221, .75); }

/* ==========================================================================
   PRESTATIONS — cartes photo pleine largeur, texte posé sur le fond studio
   ========================================================================== */
.prestations {
  background: var(--creme);
  padding: clamp(80px, 9vw, 130px) 0 clamp(90px, 10vw, 140px);
}
.prestations .entete-section { margin-bottom: 64px; }

.carte-service {
  position: relative;
  min-height: 480px;
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex; align-items: center;
  padding: 56px 64px;
  isolation: isolate;
  background: #eef0f6;
}
.carte-service + .carte-service { margin-top: 40px; }
.wp-block-image.service-visuel {
  position: absolute; z-index: -1; inset: 0;
  width: 100%; height: 100%; max-width: none;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.wp-block-image.service-visuel:not(.photo-fondu) img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.service-texte { position: relative; max-width: 520px; }
.service-texte h3 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.service-texte h3 em { font-size: 1.1em; }
.service-texte > p:not(.service-repere) { margin-top: 16px; max-width: 470px; font-size: 15px; line-height: 1.5; }
.puces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; max-width: 500px; }
.puces li {
  height: 34px; padding: 0 16px; display: inline-flex; align-items: center;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  background: rgba(72, 68, 61, .08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.service-repere { margin-top: 40px; font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.service-texte .wp-block-buttons { margin-top: 18px; }

/* cartes 1 et 3 : texte à gauche, l'élève à droite, fond studio prolongé */
.carte-service .wp-block-image.photo-fondu { inset: auto; width: auto; transform-origin: 100% 50%; }
.carte-service:hover .wp-block-image.photo-fondu { transform: scale(1.03); }
.service-portrait { background: linear-gradient(180deg, #f1f2fa 0%, #f4f6fd 50%, #fcfdfe 100%); }
.service-portrait .wp-block-image.service-visuel { left: 47%; top: -16%; height: 140%; --fondu: 5%; }
/* carte 2 : le studio, texte à droite sur un voile anthracite */
.service-studio { justify-content: flex-end; color: var(--ivoire); }
.service-studio .wp-block-image.service-visuel img { object-position: 40% 60%; }
.service-studio:hover .wp-block-image.service-visuel { transform: scale(1.03); }
.service-studio::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(270deg, rgba(52, 49, 44, .92) 0%, rgba(52, 49, 44, .8) 42%, rgba(52, 49, 44, .2) 70%, rgba(52, 49, 44, 0) 85%);
}
.service-studio .puces li { background: rgba(243, 237, 221, .14); }
.service-studio .service-texte > p:not(.service-repere) { color: rgba(243, 237, 221, .82); }
.service-fratrie { background: linear-gradient(180deg, #eaecf3 0%, #eef0f7 50%, #f3f3f7 100%); }
.service-fratrie .wp-block-image.service-visuel { left: 37%; top: -10%; height: 122%; }

/* ==========================================================================
   TRAVAUX — bande anthracite
   ========================================================================== */
.travaux {
  background: var(--anthracite);
  color: var(--ivoire);
  padding: clamp(90px, 10vw, 140px) 0 clamp(100px, 11vw, 150px);
}
.travaux .entete-section { margin-bottom: 64px; }
.oeuvre { display: block; }
.wp-block-image.oeuvre-cadre { position: relative; display: block; border-radius: var(--rayon); overflow: hidden; background: var(--anthracite-nuit); }
.wp-block-image.oeuvre-cadre a { display: block; height: 100%; }
.wp-block-image.oeuvre-cadre img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.oeuvre:hover .wp-block-image.oeuvre-cadre img { transform: scale(1.04); }
.oeuvre-large .wp-block-image.oeuvre-cadre { aspect-ratio: 1280 / 580; }
.oeuvre-large .wp-block-image.oeuvre-cadre img { object-position: 50% 18%; }
/* la pastille « Voir » de la grande photo : un pseudo-élément, rien à éditer */
.oeuvre-large .wp-block-image.oeuvre-cadre::after {
  content: "Voir";
  position: absolute; left: 50%; top: 50%;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: var(--anthracite); color: var(--ivoire);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 500;
  transition: transform .35s ease;
  pointer-events: none;
}
:lang(en) .oeuvre-large .wp-block-image.oeuvre-cadre::after { content: "View"; }
.oeuvre:hover .wp-block-image.oeuvre-cadre::after { transform: scale(1.12); }
.oeuvre-legende { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 24px; min-height: 1.2em; }
.oeuvre-legende::after { content: "→"; font-family: var(--sans); font-size: 20px; margin-left: auto; transition: transform .25s ease; }
.oeuvre:hover .oeuvre-legende::after { transform: translateX(4px); }
.grille-oeuvres { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 40px; margin-top: 48px; }
.grille-oeuvres .wp-block-image.oeuvre-cadre { aspect-ratio: 1 / .96; }
.grille-oeuvres .oeuvre:nth-child(1) .wp-block-image img { object-position: 25% 40%; }
.grille-oeuvres .oeuvre:nth-child(2) .wp-block-image img { object-position: 50% 22%; }
.grille-oeuvres .oeuvre:nth-child(3) .wp-block-image img { object-position: 45% 50%; }
.grille-oeuvres .oeuvre:nth-child(4) .wp-block-image img { object-position: 50% 40%; }

/* ==========================================================================
   CITATION
   ========================================================================== */
.citation { background: var(--blanc); padding: clamp(90px, 9vw, 130px) 0; text-align: center; }
.citation .wp-block-quote {
  max-width: 900px; margin: 0 auto; padding: 0; border: 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 2.9vw, 42px); line-height: 1.2;
  text-wrap: balance;
}
.villes { display: grid; grid-template-columns: repeat(4, minmax(0, 170px)); justify-content: center; gap: 16px; margin-top: 56px; }
/* les quatre villes au même niveau : aucune n'est mise en avant */
.ville { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--anthracite); }
.ville .wp-block-image { margin-bottom: 12px; }
.ville .wp-block-image img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ville-nom { font-size: 14px; font-weight: 500; }
.ville-pays { font-size: 13px; color: var(--taupe); }

/* ==========================================================================
   POSES — bande crème
   ========================================================================== */
.poses { padding: clamp(90px, 9vw, 130px) 0; background: var(--creme); text-align: center; }
.poses h2 { font-size: clamp(30px, 3vw, 42px); font-weight: 500; letter-spacing: -0.035em; }
.poses h2 em { font-size: 1.1em; }
.bande-poses { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 56px; }
.bande-poses > .wp-block-image { border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4.3; background: var(--blanc); }
.bande-poses > .wp-block-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.bande-poses > .wp-block-image:hover img { transform: scale(1.05); }
.bande-poses > .wp-block-image:nth-child(1) img { object-position: 31% 40%; }
.bande-poses > .wp-block-image:nth-child(2) img { object-position: 43% 40%; }
.bande-poses > .wp-block-image:nth-child(3) img { object-position: 49% 40%; }
.bande-poses > .wp-block-image:nth-child(4) img { object-position: 38% 40%; }
.bande-poses > .wp-block-image:nth-child(5) img { object-position: 36% 40%; }

/* ==========================================================================
   PIED DE PAGE (partie « footer »)
   ========================================================================== */
.pied { background: var(--anthracite); color: var(--ivoire); padding: clamp(70px, 7vw, 100px) 0 32px; }
.pied-haut { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.pied-contact { display: flex; flex-direction: column; gap: 6px; }
.pied-contact p { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.pied-contact a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.pied-contact .pied-whatsapp { margin-top: 10px; font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.15; color: rgba(243, 237, 221, .78); }
.pied-contact .pied-whatsapp a::after { content: "→"; display: inline-block; margin-left: .3em; transition: transform .25s ease; }
.pied-contact .pied-whatsapp a:hover { color: var(--ivoire); text-underline-offset: 4px; }
.pied-contact .pied-whatsapp a:hover::after { transform: translateX(4px); }
.pied-colonne { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pied-colonne p:not(.pied-titre) { color: rgba(243, 237, 221, .78); }
.pied-colonne a:hover { color: var(--ivoire); }
.pied-titre { margin-bottom: 8px; font-size: 14px; font-weight: 500; }
/* encadré de fin : le logo en signature, comme la dernière page des plaquettes */
.pied-banniere {
  margin-top: 72px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  padding: clamp(36px, 4.5vw, 64px);
  border-radius: var(--rayon);
  background: var(--creme); color: var(--anthracite);
}
.wp-block-image.pied-logo { width: min(38%, 430px); }
.wp-block-image.pied-logo img { width: 100%; height: auto; }
.pied-signature { text-align: right; }
.pied-signature-titre { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; }
.pied-signature-villes {
  margin-top: 10px;
  font-family: var(--sans); font-style: normal; font-size: 12px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  color: var(--taupe);
}
.pied-bas { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: rgba(243, 237, 221, .55); }
.pied-bas a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pied-bas a:hover { color: var(--ivoire); }

/* ==========================================================================
   EN-TÊTE DES PAGES INTÉRIEURES
   ========================================================================== */
.entete-page { background: var(--blanc); padding-bottom: clamp(64px, 7vw, 100px); }
.entete-page-corps { padding-top: clamp(72px, 9vw, 120px); text-align: center; }
.entete-page-corps .surtitre { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.entete-page-corps h1 {
  margin-top: 18px;
  font-size: clamp(44px, 6vw, 88px); line-height: 1; font-weight: 500; letter-spacing: -0.045em;
}
.entete-page-corps h1 em { font-size: 1.08em; }
.entete-page-corps h1 + p { margin: 24px auto 0; max-width: 560px; font-size: 16px; color: var(--taupe); }

/* ==========================================================================
   PAGE CONTACTS — formulaire Contact Form 7 aux classes de la maquette
   ========================================================================== */
.contact { background: var(--creme); padding: clamp(72px, 8vw, 120px) 0 clamp(90px, 10vw, 140px); scroll-margin-top: 0; }
.contact-grille { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: start; }
.formulaire {
  position: relative;
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: clamp(28px, 4vw, 52px);
}
.formulaire .wpcf7 form { margin: 0; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ-large { grid-column: 1 / -1; }
.champ-titre { font-size: 13px; font-weight: 600; }
.champ .wpcf7-form-control-wrap { display: block; }
.champ input, .champ textarea {
  display: block; width: 100%;
  font: inherit; font-size: 15px; color: var(--anthracite);
  background: var(--blanc);
  border: 1px solid rgba(72, 68, 61, .22);
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 150px; }   /* 6 lignes, comme la maquette */
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--anthracite); box-shadow: 0 0 0 3px rgba(72, 68, 61, .12);
}
.champ input::placeholder, .champ textarea::placeholder { color: #a9a39a; }
/* champ piège contre les robots : invisible pour les personnes, rempli par les robots */
.champ-piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .wpcf7-submit {
  display: inline-flex; align-items: center;
  height: 42px; margin-top: 28px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: var(--anthracite); color: var(--ivoire);
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.5;
  cursor: pointer;
  transition: transform .25s ease;
}
.formulaire .wpcf7-submit:hover { transform: translateY(-2px); }
.formulaire .wpcf7-spinner { display: none; }
.formulaire form.submitting .wpcf7-submit { opacity: .45; pointer-events: none; }
/* mention sous le bouton : simple information (le RGPD n'exige pas de case à cocher pour répondre à une demande) */
.mention { margin-top: 16px; max-width: 62ch; font-size: 13px; line-height: 1.5; color: var(--taupe); }
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0; padding: 18px 20px;
  border: 0; border-radius: 12px;
  background: var(--creme); color: var(--anthracite);
  font-size: 15px;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { background: #f6e4dc; }
.wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: #9b3f2a; }
.champ input.wpcf7-not-valid, .champ textarea.wpcf7-not-valid { border-color: #b8664f; }

.contact-infos { display: flex; flex-direction: column; gap: 28px; }
.wp-block-image.contact-photo { margin: 0; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--blanc); }
.wp-block-image.contact-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 30%; }
.coordonnees { display: flex; flex-direction: column; gap: 18px; }
.coordonnee-titre { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.coordonnee-valeur { display: block; margin-top: 4px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.02em; }
.coordonnee-valeur a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ==========================================================================
   PAGE À PROPOS — les tranches de portraits de la plaquette « 20 ans »
   ========================================================================== */
.apropos-tranches { background: var(--blanc); padding-bottom: clamp(36px, 4vw, 56px); }
.tranches {
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: clamp(420px, 42vw, 600px);
  border-radius: var(--rayon); overflow: hidden;
}
.tranches > .wp-block-image { overflow: hidden; background: var(--creme); height: 100%; }
.tranches > .wp-block-image a { display: block; height: 100%; }
.tranches > .wp-block-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.tranches > .wp-block-image:hover img { transform: scale(1.04); }

.savoir { background: var(--creme); padding: clamp(48px, 5vw, 72px) 0 clamp(90px, 10vw, 140px); }
.savoir-grille { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.savoir h2 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; font-weight: 500; letter-spacing: -0.04em; }
.savoir h2 em { font-size: 1.1em; }
.savoir-chapo { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; }
.savoir-texte p + p { margin-top: 20px; font-size: 16px; color: var(--taupe); }
.savoir-texte .wp-block-buttons { margin-top: 32px; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(64px, 7vw, 96px); }
.chiffre { background: var(--blanc); border-radius: var(--rayon); padding: clamp(24px, 3vw, 36px); }
.chiffre-nombre { display: block; font-size: clamp(40px, 4.4vw, 62px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.chiffre-texte { display: block; margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.2; }

/* ==========================================================================
   PAGE GALERIE — un thème par section, mosaïque de photos non recadrées
   ========================================================================== */
.themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.themes a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px;
  border-radius: 999px; background: rgba(72, 68, 61, .07);
  font-size: 14px; font-weight: 500;
  transition: background .2s, color .2s;
}
.themes a:hover { background: var(--anthracite); color: var(--ivoire); }

.theme { padding: clamp(80px, 9vw, 130px) 0; scroll-margin-top: 0; }
.theme-blanc { background: var(--blanc); }
.theme-creme { background: var(--creme); }
.theme-fonce { background: var(--anthracite); color: var(--ivoire); }
.theme .entete-section { margin-bottom: 56px; }
/* Galerie : en-tête resserré, pour que les premières photos apparaissent dès l'arrivée sur la page */
/* À propos : les portraits suivent de près le titre, le texte vient après eux */
.entete-apropos { padding-bottom: clamp(28px, 3vw, 40px); }
.entete-galerie { padding-bottom: 24px; }
.entete-galerie .entete-page-corps { padding-top: clamp(28px, 3vw, 48px); }
.entete-galerie .entete-page-corps h1 { margin-top: 12px; font-size: clamp(40px, 4.8vw, 76px); }
.entete-galerie .entete-page-corps h1 + p { margin-top: 14px; max-width: 720px; }
.entete-galerie .themes { margin-top: 20px; }
.entete-galerie + .theme { padding-top: clamp(36px, 3.6vw, 56px); }
.entete-galerie + .theme .entete-section { margin-bottom: 28px; }
.entete-galerie + .theme .entete-section p { margin-top: 12px; max-width: 720px; }

/* mosaïque = bloc Galerie natif (ajout de photos par glisser-déposer), en GRILLE : les colonnes en cascade
   (columns) étaient mal réparties par Safari sur iPad (3 + 1 au lieu de 4). Les photos d'une même mosaïque ont
   les mêmes proportions, la grille donne la même mise en page, dans l'ordre de la galerie (ligne par ligne).
   Le CSS du bloc galerie vise les images avec :not(#individual-image) : on le dépasse de la même façon. */
.wp-block-gallery.has-nested-images.mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; align-items: start; }
.wp-block-gallery.has-nested-images.mosaique.mosaique-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-block-gallery.has-nested-images.mosaique.mosaique-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-gallery.has-nested-images.mosaique.mosaique-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wp-block-gallery.has-nested-images.mosaique.mosaique-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wp-block-gallery.has-nested-images.mosaique figure.wp-block-image:not(#mosaique) {
  display: block; width: 100%; margin: 0 0 20px;
  break-inside: avoid; border-radius: 14px; overflow: hidden;
  background: var(--creme);
}
.theme-creme .wp-block-gallery.has-nested-images.mosaique figure.wp-block-image:not(#mosaique) { background: var(--blanc); }
.theme-fonce .wp-block-gallery.has-nested-images.mosaique figure.wp-block-image:not(#mosaique) { background: var(--anthracite-nuit); }
.wp-block-gallery.has-nested-images.mosaique figure.wp-block-image:not(#mosaique) a { display: block; }
.wp-block-gallery.has-nested-images.mosaique figure.wp-block-image:not(#mosaique) img {
  display: block; width: 100%; height: auto; transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.wp-block-gallery.has-nested-images.mosaique figure.wp-block-image:not(#mosaique):hover img { transform: scale(1.03); }

.appel { background: var(--blanc); padding: clamp(80px, 9vw, 120px) 0; text-align: center; }
.appel h2 { max-width: 760px; margin: 0 auto; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
.appel h2 em { font-size: 1.08em; }
.appel .wp-block-buttons { margin-top: 32px; justify-content: center; }

/* ==========================================================================
   PAGE PROTECTION DES DONNÉES — texte courant, une colonne lisible
   ========================================================================== */
.legal { background: var(--creme); padding: clamp(56px, 6vw, 96px) 0 clamp(80px, 9vw, 120px); }
.legal-corps { max-width: 720px; margin: 0 auto; }
.legal h2 { margin-top: 48px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; }
.legal p { margin-top: 14px; }
.legal ul { margin-top: 16px; display: grid; gap: 10px; }
.legal li { position: relative; padding-left: 22px; }
.legal li::before { content: ""; position: absolute; left: 0; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--taupe); }
.legal a, .mention a { text-decoration: underline; text-underline-offset: 3px; }
.legal .legal-maj { margin-top: 48px; font-size: 13px; color: var(--taupe); }

/* ==========================================================================
   AGRANDISSEMENT AU CLIC — visionneuse plein écran
   (photo liée à son fichier : le thème sert la version avec filigrane)
   ========================================================================== */
/* le lien occupe tout le cadre, comme a.agrandir dans la maquette : la photo peut le remplir (object-fit) */
.wp-block-post-content .wp-block-image > a { display: block; height: 100%; cursor: zoom-in; }
.wp-block-post-content .wp-block-image > a:focus-visible { outline: 3px solid var(--anthracite); outline-offset: -3px; }
.visionneuse-ouverte { overflow: hidden; }

/* bouton WhatsApp flottant, aux couleurs du site (pour Dubaï : canal de contact habituel des écoles).
   Sur écran tactile seulement (téléphone, tablette) ; sur ordinateur, le lien WhatsApp est
   dans le pied de page et la page Contacts. Il apparaît une fois le haut de la page dépassé. */
.wp-block-buttons.whatsapp-flottant {
  display: none !important;
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 50;
  margin: 0;
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.wp-block-buttons.whatsapp-flottant.attente { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); }
.wp-block-button.whatsapp .wp-block-button__link {
  display: grid; place-items: center;
  width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--anthracite); color: var(--creme);
  font-size: 0; line-height: 0; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(245, 240, 227, .3), 0 6px 22px rgba(30, 27, 23, .22); /* liseré clair : reste visible sur le pied de page foncé */
  transition: transform .3s ease;
}
.wp-block-button.whatsapp .wp-block-button__link::before {
  content: ""; width: 26px; height: 26px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%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'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-button.whatsapp .wp-block-button__link:hover { transform: scale(1.06); }
.wp-block-button.whatsapp .wp-block-button__link:focus-visible { outline: 2px solid var(--anthracite); outline-offset: 3px; }

.visionneuse {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52, 49, 44, .95);
  animation: visionneuse-entree .25s ease;
}
.visionneuse[hidden] { display: none; }
@keyframes visionneuse-entree { from { opacity: 0; } }
.visionneuse figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; cursor: zoom-out; }
.visionneuse img {
  max-width: min(92vw, 1600px); max-height: calc(100vh - 120px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 6px; cursor: default;
}
.visionneuse figcaption { font-size: 13px; letter-spacing: .08em; color: rgba(243, 237, 221, .7); }
.visionneuse button {
  position: absolute;
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(243, 237, 221, .12); color: var(--ivoire);
  font: 400 22px/1 var(--sans); cursor: pointer;
  transition: background .2s;
}
.visionneuse button:hover, .visionneuse button:focus-visible { background: rgba(243, 237, 221, .26); outline: none; }
.visionneuse-fermer { top: 22px; right: 22px; font-size: 30px !important; }
.visionneuse-prec { left: 22px; top: 50%; margin-top: -26px; }
.visionneuse-suiv { right: 22px; top: 50%; margin-top: -26px; }
.visionneuse.seule .visionneuse-prec, .visionneuse.seule .visionneuse-suiv, .visionneuse.seule figcaption { display: none; }
@media (max-width: 640px) {
  .visionneuse img { max-width: 100vw; max-height: calc(100vh - 160px); border-radius: 0; }
  .visionneuse-prec, .visionneuse-suiv { top: auto; bottom: 22px; margin-top: 0; }
}

/* lien d'évitement de WordPress (« Aller au contenu ») : visible seulement au clavier */
.skip-link.screen-reader-text:focus { background: var(--blanc); color: var(--anthracite); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  nav.wp-block-navigation.menu, .barre > .barre-reserver { display: none !important; }
  .langues { margin-left: auto; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0 11px;
    border-radius: 50%; background: var(--anthracite); cursor: pointer;
    font-size: 0; color: transparent; user-select: none;
  }
  .burger::before, .burger::after { content: ""; display: block; height: 2px; background: var(--ivoire); border-radius: 2px; }
  .barre.ouverte nav.wp-block-navigation.menu {
    display: flex !important; flex-direction: column;
    position: absolute; top: 84px; right: var(--gouttiere);
    padding: 24px 28px; border-radius: var(--rayon);
    background: var(--anthracite); color: var(--ivoire); font-size: 17px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .barre.ouverte nav.wp-block-navigation.menu .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 18px; }
  .barre.ouverte nav.wp-block-navigation.menu .menu-reserver { display: block !important; margin-top: 6px; }
  .menu .menu-reserver .wp-block-navigation-item__content {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 20px; border-radius: 999px;
    background: var(--ivoire); color: var(--anthracite); font-size: 15px;
  }
  .wp-block-buttons.heros-reserver { display: flex !important; align-self: flex-start; margin-top: 20px; }
  .wp-block-image.heros-photo { left: 44%; top: 0; height: 100%; }
  .carte-service { padding: 40px 32px; min-height: 0; }
  .service-portrait, .service-fratrie { padding-top: 320px; align-items: flex-end; }
  /* en colonne, la photo reprend un cadrage plein cadre au-dessus du texte */
  .carte-service .wp-block-image.photo-fondu,
  .service-portrait .wp-block-image.service-visuel,
  .service-fratrie .wp-block-image.service-visuel {
    inset: 0 0 auto 0; width: 100%; height: 340px;
    -webkit-mask-image: none; mask-image: none;
  }
  .carte-service .wp-block-image.photo-fondu img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
  .carte-service:hover .wp-block-image.photo-fondu { transform: none; }
  .service-studio { padding-top: 260px; justify-content: flex-start; align-items: flex-end; }
  .service-studio::after { background: linear-gradient(0deg, rgba(52, 49, 44, .94) 0%, rgba(52, 49, 44, .6) 55%, rgba(52, 49, 44, .1) 100%); }
  .pied-haut { grid-template-columns: 1fr 1fr; }
  .pied-contact { grid-column: 1 / -1; }
  .contact-grille { grid-template-columns: 1fr; }
  .wp-block-gallery.has-nested-images.mosaique,
  .wp-block-gallery.has-nested-images.mosaique.mosaique-4,
  .wp-block-gallery.has-nested-images.mosaique.mosaique-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-block-gallery.has-nested-images.mosaique.mosaique-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .savoir-grille { grid-template-columns: 1fr; }
  .contact-infos { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
}

@media (max-width: 640px) {
  :root { --barre: 88px; }   /* téléphone : barre de 26 + 44 px (menu) + 18 px sous elle */
  body { font-size: 14px; }
  .heros { min-height: max(100svh, 640px); }
  .wp-block-image.logo img { height: 38px; }
  .home .barre > .logo { visibility: visible; }
  .barre { gap: 18px; padding-bottom: 18px; }
  /* sur téléphone, la photo passe dans le flux, sous la barre de navigation,
     et le logo se pose sous elle, sur le fond studio */
  .heros { min-height: 0; }
  .wp-block-image.heros-photo {
    position: relative; order: 2;
    left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 4 / 4.3;
    -webkit-mask-image: none; mask-image: none;
  }
  .wp-block-image.heros-photo img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 0% 30%; }
  .heros-corps { order: 3; padding-top: 28px; padding-bottom: 84px; }
  .heros-annee { margin-top: 26px; }
  .heros-intro { max-width: 200px; font-size: 14px; }
  .heros-titre { margin-bottom: 72px; }
  .heros-titre img { width: 74vw; }
  .pastille { bottom: 22px; height: 30px; font-size: 12px; padding: 0 12px; }
  .pastille-droite { display: none; }
  .wp-block-image.carte-penchee { width: 92px; }
  .wp-block-image.penchee-gauche { left: -16px; top: 26px; }
  .wp-block-image.penchee-droite { right: -14px; top: auto; bottom: 30px; }
  .manifeste { padding-top: 120px; padding-bottom: 130px; }
  .carte-service { padding: 28px 22px; }
  .service-portrait, .service-fratrie { padding-top: 270px; }
  .carte-service .wp-block-image.photo-fondu,
  .service-portrait .wp-block-image.service-visuel,
  .service-fratrie .wp-block-image.service-visuel { height: 280px; }
  .service-studio { padding-top: 210px; }
  .service-repere { margin-top: 28px; font-size: 15px; }
  .grille-oeuvres { grid-template-columns: 1fr; gap: 36px; }
  .oeuvre-large .wp-block-image.oeuvre-cadre { aspect-ratio: 4 / 3.4; }
  .oeuvre-legende { font-size: 21px; }
  .villes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .bande-poses {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-left: calc(-1 * var(--gouttiere)); margin-right: calc(-1 * var(--gouttiere));
    padding: 0 var(--gouttiere);
    scrollbar-width: none;
  }
  .bande-poses > .wp-block-image { scroll-snap-align: center; }
  .pied-haut { grid-template-columns: 1fr; gap: 28px; }
  .champs { grid-template-columns: 1fr; }
  .tranches { height: 360px; }
  .wp-block-gallery.has-nested-images.mosaique { column-gap: 10px; }
  .wp-block-gallery.has-nested-images.mosaique.mosaique-2,
  .wp-block-gallery.has-nested-images.mosaique.mosaique-3 { grid-template-columns: minmax(0, 1fr); }
  .wp-block-gallery.has-nested-images.mosaique figure.wp-block-image:not(#mosaique) { margin-bottom: 10px; border-radius: 10px; }
  .savoir-grille, .chiffres { grid-template-columns: 1fr; }
  .contact-infos { display: flex; }
  .pied-banniere { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 48px; }
  .wp-block-image.pied-logo { width: 72%; }
  .pied-signature { text-align: left; }
  .pied-banniere { padding: 28px; }
  .pied-signature-villes { font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
}

/* écrans tactiles : bouton WhatsApp flottant, et place sous la dernière ligne du pied de page */
@media (hover: none) and (pointer: coarse) {
  .wp-block-buttons.whatsapp-flottant { display: block !important; }
  .pied { padding-bottom: 104px; }
}

:where(a, button, input, textarea, [tabindex]):focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.entete-page .appel-boutons { margin-top: 32px; justify-content: center; }