/*
Theme Name: Antony Barbier
Theme URI: https://antonybarbier.fr
Author: Antony Barbier
Description: Thème sur mesure pour antonybarbier.fr, construit à partir de la maquette de refonte 2026. Thème bloc léger : la charte vit dans theme.json, les pages se composent en blocs natifs, les sections réutilisables sont fournies comme compositions.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: antonybarbier
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu
*/

/* -------------------------------------------------------------------------
   Ce fichier ne contient QUE ce que theme.json ne sait pas exprimer :
   effets de survol, décors de fond, quelques ajustements de rendu.
   Les couleurs, tailles et espacements se règlent dans theme.json et dans
   Apparence > Styles. Ne pas dupliquer ici ce qui vit là-bas.
   ---------------------------------------------------------------------- */

/* Ancrage doux quand on clique sur un lien du menu vers une section */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Compense la hauteur de l'en-tête collant lors d'un saut d'ancre */
:target { scroll-margin-top: 6rem; }

/* --- Accessibilité : le focus clavier doit rester visible --- */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Lien d'évitement, affiché seulement au focus clavier */
.ab-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--action);
  color: var(--wp--preset--color--blanc);
  font-weight: 600;
}
.ab-skip-link:focus { left: 0; }

/* --- En-tête --- */
.ab-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--wp--preset--color--nuit) 85%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* La barre d'admin WordPress ne doit pas masquer l'en-tête collant */
.admin-bar .ab-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .ab-header { top: 46px; }
}

/* --- Logo --- */
.ab-logo {
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.ab-logo a { color: var(--wp--preset--color--titre); text-decoration: none; }
.ab-logo a:hover { color: var(--wp--preset--color--titre); }
/* Le point bleu, entre le prénom et le nom */
.ab-logo-point { color: var(--wp--preset--color--accent); }

/* --- Jamais de mot coupé dans un titre --- */
/* Un titre en très grande taille dans une colonne étroite déclenche la coupure
   automatique du navigateur : « Référencem / ent ». Inacceptable sur un site
   professionnel, et le signe que la place manque. On interdit la coupure ici,
   et on donne la largeur nécessaire côté mise en page. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.ab-logo,
.is-style-etiquette,
.wp-block-button__link {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Équilibre les lignes des titres plutôt que de laisser un mot seul en bas */
h1, h2, .wp-block-heading { text-wrap: balance; }

/* Un bouton ne se coupe jamais au milieu d'un mot, mais il ne déborde jamais
   non plus de ce qui le contient. `nowrap` seul provoquait le second défaut :
   un libellé long sortait de sa carte, et de l'écran sur mobile. */
.wp-block-button__link {
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}
.wp-block-buttons { max-width: 100%; }

/* Un prix ne se sépare jamais de sa devise ni de son unité */
.ab-prix { white-space: nowrap; }

/* Numérotation 01, 02, 03 devant les entrées du menu */
.ab-nav .wp-block-navigation-item__label::before {
  content: attr(data-num);
  color: var(--wp--preset--color--accent);
  margin-right: 0.4em;
}
.ab-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--titre); }

/* --- Étiquettes --- */
/* Les sélecteurs `.is-style-*` sont les classes que WordPress ajoute quand on
   choisit un style dans l'éditeur. Les classes `.ab-*` servent aux gabarits du
   thème. Les deux mènent au même rendu.

   Mesuré sur la maquette : Manrope 600, 12px, interlettrage 0,2em. Le
   JetBrains Mono à 0,14em qui figurait ici venait des annotations du cadre de
   présentation de la maquette (« Desktop - 1440px »), pas du site lui-même. */
.ab-etiquette,
.is-style-etiquette {
  font-family: var(--wp--preset--font-family--texte);
  font-size: var(--wp--preset--font-size--etiquette);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--discret);
}

/* Étiquette qui ouvre une grande section : 01 - SERVICES, 02 - APPROCHE…
   En bleu accent dans la maquette, contrairement aux étiquettes de carte
   (SERVICE 01) qui restent grises. */
.ab-etiquette-section,
.is-style-etiquette-section {
  font-family: var(--wp--preset--font-family--texte);
  font-size: var(--wp--preset--font-size--etiquette);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}

/* Étiquette d'accroche : « Consultant digital indépendant », « Plus direct ».
   Bleu clair, interlettrage un peu plus serré. */
.ab-etiquette-claire,
.is-style-etiquette-claire {
  font-family: var(--wp--preset--font-family--texte);
  font-size: var(--wp--preset--font-size--etiquette);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-clair);
}

/* Ligne des outils du hero : Google · ChatGPT · Perplexity · Brevo · WordPress.
   Ce ne sont pas des étiquettes : dans la maquette elles gardent leurs
   majuscules d'origine et un interlettrage discret. */
.ab-outils,
.is-style-outils {
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--texte);
}

/* --- En-tête de section --- */
/* Le titre est bridé à la largeur du texte courant mais reste calé à gauche,
   sur la même verticale que le contenu de la section. Un titre centré au-dessus
   d'une grille alignée à gauche donne une page bancale. */
/* Double classe volontaire : WordPress centre les enfants d'un bloc « contenu
   limité » avec une règle d'une seule classe. Il faut passer devant. */
.ab-entete-section.wp-block-group > *,
.ab-entete-section > *,
.ab-section.wp-block-group > *,
.ab-section > * {
  max-width: 760px;
  /* WordPress impose « margin-left: auto !important » aux enfants d un bloc a
     largeur limitee, pour les centrer. Sans !important ici, le texte revenait
     au milieu pendant que les cartes restaient a gauche : trois alignements
     differents dans une meme section. */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Dans une section, ce qui n'est pas du texte courant occupe toute la largeur :
   les rangees de cartes, les bandes, les emplacements d'image. Sans cette
   exception, une grille de trois cartes serait bridee a 760px. */
.ab-section > .wp-block-columns,
.ab-section > .ab-pleine-largeur,
.ab-section > .ab-emplacement-photo,
.ab-section > .wp-block-separator {
  max-width: none !important;
}

/* Les ancres du menu : le titre visé ne doit pas se coller au bord haut. */
/* La barre du haut est collante et mesure de 66 a 86px selon la largeur.
   Un repere de 2rem faisait atterrir le titre vise dessous. Mesure au
   navigateur, la valeur suit la hauteur reelle de la barre. */
:target,
[id] { scroll-margin-top: calc(5.5rem + 1vw); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Titre qu'on veut tenir sur une seule ligne : il occupe toute la largeur du
   contenu, et sa taille est plafonnée à 44px. Mesuré : à 48px, « Trois leviers,
   un seul objectif : vous faire gagner des clients. » réclame 1373px pour
   1280px disponibles, et repasse donc sur deux lignes. */
.ab-entete-section.wp-block-group > .ab-titre-large,
.ab-entete-section > .ab-titre-large {
  max-width: none;
  font-size: clamp(1.875rem, 1.46rem + 1.71vw, 2.75rem);
}

/* --- Bande des chiffres clés --- */
/* Reprise fidèle de la maquette : une seule bande bordée en haut et en bas,
   trois cellules séparées par un filet vertical. Sans ces filets, les trois
   chiffres flottent côte à côte sans structure. */
.ab-chiffres {
  --ab-filet: 1px solid rgba(255, 255, 255, 0.09);
  /* Les filets encadrent la bande elle-meme, pas toute la largeur de l'ecran.
     Une bande coloree d'un bord a l'autre alors que le contenu s'arrete a
     1280px donnait un ensemble visuellement decentre. */
  border-top: var(--ab-filet);
  border-bottom: var(--ab-filet);
}
/* Grille et non flex : avec flex-basis:0 en border-box, le decalage de 48px
   des cellules 2 et 3 se retranche de la premiere, qui devient plus etroite
   (mesure : 394 / 443 / 443 au lieu de trois fois 426). La maquette utilise
   repeat(3,1fr), ou les colonnes restent egales quel que soit leur padding. */
.ab-chiffres.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
@media (max-width: 781px) {
  .ab-chiffres.wp-block-columns { grid-template-columns: 1fr; }
}
.ab-chiffres .wp-block-column {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
.ab-chiffres .wp-block-column + .wp-block-column {
  border-left: var(--ab-filet);
  padding-left: 3rem;
}
.ab-chiffre {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--chiffre-cle);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--accent);
  white-space: nowrap;
}
/* Empilées sur mobile, les cellules retrouvent un filet horizontal */
@media (max-width: 781px) {
  .ab-chiffres .wp-block-column + .wp-block-column {
    border-left: 0;
    border-top: var(--ab-filet);
    padding-left: 0;
  }
}

/* --- Cadre du Pack Complet --- */
/* C'est l'offre mise en avant : elle reagit plus franchement que les cartes
   ordinaires, avec un halo bleu et une bordure qui s'allume. */
.ab-pack {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ab-pack:hover {
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--accent) !important;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.35),
    0 24px 60px -24px rgba(37, 99, 235, 0.55);
}

/* --- Cartes --- */
.ab-carte,
.is-style-carte {
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.ab-carte:hover,
.is-style-carte:hover {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--accent);
}

/* --- Décor : grille et halo de la maquette --- */
.ab-grille,
.is-style-grille { position: relative; isolation: isolate; }
.ab-grille::before,
.is-style-grille::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.02)  0 1px, transparent 1px 90px);
}
.ab-halo,
.is-style-halo {
  position: relative;
  isolation: isolate;
  /* Le halo est plus large que son conteneur : sans cela, il crée une barre de
     défilement horizontale sur mobile. `clip` coupe le débordement latéral tout
     en laissant le halo dépasser vers le haut, ce que `hidden` interdirait. */
  overflow-x: clip;
}
.ab-halo::before,
.is-style-halo::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  width: min(1100px, 130%);
  height: 620px;
  z-index: -1;
  transform: translateX(-46%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(37,99,235,0.20), rgba(37,99,235,0) 68%);
}

/* --- Lien avec flèche --- */
.ab-lien-fleche { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; }
.ab-lien-fleche::after { content: "→"; transition: transform 0.18s ease; }
.ab-lien-fleche:hover::after { transform: translateX(4px); }

/* --- Emplacement réservé à une photo --- */
/* Occupe la place exacte que prendra l'image, pour qu'on puisse juger de la
   mise en page avant d'avoir la photo. Une petite boîte au milieu du vide ne
   permet de juger de rien. */
.ab-emplacement-photo,
.is-style-emplacement-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 1.5rem;
  box-sizing: border-box;
  text-align: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(245, 158, 11, 0.06) 0 12px,
    rgba(245, 158, 11, 0.12) 12px 24px
  );
  border: 1px dashed #F59E0B;
  border-radius: 10px;
  color: #FCD34D;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}
/* Format paysage, pour les visuels plus larges que hauts */
.ab-emplacement-photo.est-paysage,
.is-style-emplacement-photo.est-paysage { aspect-ratio: 16 / 10; }
/* Plafond de hauteur : a 1280px de large, un 16/10 faisait 800px de haut et
   ecrasait tout le reste de la page. */
.ab-emplacement-photo { max-height: 420px; }
/* Dimensionne a la taille reelle que la photo occupera, pour que la mise en
   page soit juste des maintenant. */
.ab-emplacement-photo.est-portrait { aspect-ratio: 4 / 5; max-width: 400px; max-height: 500px; }

/* --- Marqueur des contenus provisoires --- */
/* Rend visible dans l'éditeur ET sur le site tout texte encore à compléter,
   pour qu'aucun texte de remplissage ne parte en ligne par inadvertance. */
.ab-a-completer,
.is-style-a-completer {
  background: rgba(245, 158, 11, 0.15);
  border: 1px dashed #F59E0B;
  border-radius: 4px;
  padding: 0.1em 0.45em;
  color: #FCD34D;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.875em;
}

/* --- Champs de formulaire --- */
/* 16px minimum : en dessous, iOS zoome automatiquement à la saisie. */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
textarea, select {
  width: 100%;
  font-size: 1rem;
  font-family: var(--wp--preset--font-family--texte);
  color: var(--wp--preset--color--titre);
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
input::placeholder, textarea::placeholder { color: var(--wp--preset--color--discret); }
input:focus, textarea:focus, select:focus {
  border-color: var(--wp--preset--color--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* --- Listes --- */
/* La maquette utilise un tiret en retrait, pas la puce ronde par defaut. Cette
   regle vivait par erreur dans l'outil d'apercu seulement : le site reel
   affichait donc des puces rondes. */
.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.wp-block-list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.5em;
}
.wp-block-list li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--discret);
}

/* Listes de navigation du pied de page : ce sont des liens, pas une enumeration.
   Ni puce ni tiret. */
.ab-liste-pied li { padding-left: 0; margin-bottom: 0.6em; }
.ab-liste-pied li::before { content: none; }
.ab-liste-pied a { color: var(--wp--preset--color--texte); text-decoration: none; }
.ab-liste-pied a:hover { color: var(--wp--preset--color--titre); }

/* --- Images --- */
img { max-width: 100%; height: auto; }
/* Les navigateurs appliquent margin:1em 40px aux <figure>. Sur mobile, ces
   80px de marges laterales retrecissaient la photo de 350 a 270px. */
.wp-block-image { margin-left: 0; margin-right: 0; }
/* Photo du bloc d'accueil : elle occupe toute sa colonne. */
.ab-photo-hero img { width: 100%; height: auto; }
/* Le portrait est detoure et s'arrete net en bas de la section, ce qui donne
   l'impression d'une photo coupee. Un fondu progressif vers le fond referme la
   section proprement, sans avoir a retoucher l'image. */
.ab-photo-hero img {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 99%);
}

/* --- Rendu du texte long --- */
.entry-content p { max-width: 68ch; }


/* --- Rythme vertical d'une section --- */
/* Chaque enfant direct d'une section respire, sans avoir a poser une marge sur
   chaque bloc dans l'editeur. Antony doit pouvoir ajouter un paragraphe sans
   se demander quelle marge appliquer. */
.ab-section > * + * { margin-top: 1.5rem; }
.ab-section > .wp-block-heading + * { margin-top: 1.75rem; }
.ab-section > .wp-block-columns { margin-top: 3rem; }
.ab-section > .ab-emplacement-photo { margin-top: 2.5rem; }

/* L'etiquette et le titre d'une section restent solidaires. */
.ab-section > .is-style-etiquette-section + .wp-block-heading { margin-top: 1rem; }

/* --- Cartes --- */
/* Les titres de carte tenaient sur trois lignes a cause de la taille heritee
   des titres de niveau 3. Une carte n'est pas un chapitre. */
.wp-block-column.is-style-carte > .wp-block-heading,
.wp-block-column.ab-carte > .wp-block-heading {
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  line-height: 1.25;
}
/* Les cartes d'une meme rangee ont la meme hauteur, et leur contenu se cale en
   haut plutot que de flotter au milieu. */
.wp-block-columns .wp-block-column.is-style-carte { align-self: stretch; }

/* --- Mobile --- */
@media (max-width: 781px) {
  /* Une section garde ses respirations mais pas ses grands ecarts. */
  .ab-section > .wp-block-columns { margin-top: 2rem; }
  .ab-emplacement-photo { max-height: 300px; }
  .ab-emplacement-photo.est-portrait { max-width: 100%; }
}

/* --- En-tete sur petit ecran --- */
/* A 390px, le logo, le bouton menu et le bouton d'action ne tenaient pas sur
   une ligne : le groupe de droite passait en dessous et se calait a gauche,
   sous le logo. On resserre juste assez pour que tout tienne en une ligne,
   logo a gauche et menu a droite. */
@media (max-width: 600px) {
  /* Mesure faite au navigateur : la rangee ne dispose que de 282px, a cause
     d un rembourrage applique deux fois. Le logo, le bouton menu et le bouton
     d action en reclamaient 323. */
  .ab-header .wp-block-group.alignwide {
    padding-left: 0;
    padding-right: 0;
    gap: 0.75rem;
  }
  .ab-header .ab-logo { font-size: 0.9375rem; }
}

/* Le point de bascule de la navigation n est pas celui du contenu. Entre 601
   et 899px, le menu redevient horizontal mais le bouton d action ne tient
   plus : mesure au navigateur, l entete passait sur deux lignes et montait a
   127px de haut a 768px. Le bouton disparait donc jusqu a 900px. Le menu
   contient deja Contact, et le bouton flottant prend le relais des qu aucun
   appel a l action n est a l ecran. */
@media (max-width: 899px) {
  .ab-header .wp-block-buttons { display: none; }
}

/* --- Bloc visuel abstrait --- */
/* Sert a occuper le cote droit d une section quand le texte ne suffit pas a
   remplir la largeur. Purement decoratif, donc masque sur mobile ou il ne
   ferait qu allonger la page. Construit en degrades : aucune image a charger. */
.ab-visuel {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--wp--preset--color--surface);
  background-image:
    radial-gradient(circle at 72% 28%, rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0) 58%),
    radial-gradient(circle at 22% 82%, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0) 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.035) 0 1px, transparent 1px 56px);
}
/* Deux formes geometriques discretes, dans les bleus de la charte. */
.ab-visuel::before,
.ab-visuel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ab-visuel::before {
  inset: 22% 30% 30% 18%;
  border: 1px solid rgba(59, 130, 246, 0.45);
}
.ab-visuel::after {
  width: 38%;
  aspect-ratio: 1;
  right: 14%;
  top: 18%;
  background: linear-gradient(140deg, rgba(59,130,246,0.55), rgba(37,99,235,0.12));
  border-radius: 14px;
  transform: rotate(12deg);
}
@media (max-width: 781px) {
  /* Un decor n a pas sa place sur mobile : il n apporte rien et rallonge. */
  .ab-visuel { display: none; }
}

/* --- Citation mise en valeur --- */
/* Une phrase qu on veut faire ressortir sans en faire un titre. */
.ab-citation {
  border-left: 2px solid var(--wp--preset--color--accent);
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--titre);
}

/* --- Encadre lateral --- */
/* Une carte posee a cote du texte, plus discrete qu une carte de rangee. */
.ab-encadre {
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
/* Dans une colonne, l encadre ne s etire pas jusqu en bas pour rien. */
.wp-block-column > .ab-encadre { align-self: flex-start; }

/* ==================================================================
   Rythme visuel, maquette du 2026-08-30
   ================================================================== */

/* --- Graisse des titres --- */
/* La maquette n'utilise qu'une seule graisse pour les titres : 600. A 800, le
   grand titre ecrasait tout le reste de la page. */
h1, h2, h3, h4, .wp-block-heading,
.ab-logo, .ab-citation {
  font-weight: 600;
}
h1, .ab-titre-large { letter-spacing: -0.03em; }

/* --- Etiquettes en monospace --- */
/* La maquette passe toutes les petites mentions en capitales sur JetBrains
   Mono. C'est une police deja declaree dans la charte, et ce grain technique
   va bien a un metier qui vend de la mesure. */
.ab-etiquette,
.is-style-etiquette,
.ab-etiquette-section,
.is-style-etiquette-section,
.ab-etiquette-claire,
.is-style-etiquette-claire,
.is-style-outils {
  font-family: var(--wp--preset--font-family--mono);
  letter-spacing: 0.14em;
  font-weight: 500;
}
/* Les etiquettes de section passent du bleu vif au gris discret : le bleu est
   reserve a ce qui doit vraiment ressortir. */
.ab-etiquette-section,
.is-style-etiquette-section { color: var(--wp--preset--color--discret); }
.is-style-outils { letter-spacing: 0.08em; text-transform: none; }

/* --- Deux encadres en opposition --- */
/* Le premier est en retrait, le second domine : c'est la bascule d'hier a
   aujourd'hui, racontee par la mise en page plutot que par une phrase. */
.ab-opposition { padding-top: 52px; }
.ab-opposition > * + * { margin-top: 1.25rem; }
.ab-encadre.est-attenue { opacity: 0.72; transition: opacity 0.2s ease; }
.ab-encadre.est-attenue:hover { opacity: 1; }
.ab-encadre.est-dominant {
  border-color: var(--wp--preset--color--action);
  /* Portee volontairement courte : a 0 24px 60px -30px, l auréole reclamait
     54px sous la carte et se faisait couper par le bas de la section. */
  box-shadow: 0 14px 36px -26px rgba(37, 99, 235, 0.85);
}
/* Le petit connecteur « puis » entre les deux encadres. */
.ab-connecteur {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 4px;
  color: var(--wp--preset--color--discret);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ab-connecteur::before {
  content: "";
  width: 1px;
  height: 26px;
  background: var(--wp--preset--color--bordure);
}
@media (max-width: 781px) { .ab-opposition { padding-top: 0; } }

/* --- Visuel du releve --- */
/* Une grille : une colonne par moteur, une ligne par question, une case
   allumee quand l'entreprise est citee. Dessinee entierement en CSS, donc
   aucune image a charger. C'est un exemple de format, pas une mesure : la
   legende le dit explicitement juste en dessous. */
.ab-releve {
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: 10px;
  background: var(--wp--preset--color--nuit);
  padding: 1.625rem;
}
.ab-releve-entete {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--discret);
}
.ab-releve-grille {
  margin-top: 1.25rem;
  height: 168px;
  border-radius: 6px;
  background-color: #122740;
  background-image:
    linear-gradient(#2563EB, #2563EB),
    linear-gradient(#3B82F6, #3B82F6),
    linear-gradient(#2563EB, #2563EB),
    linear-gradient(#93B4FF, #93B4FF),
    linear-gradient(#2563EB, #2563EB),
    linear-gradient(#2563EB, #2563EB),
    linear-gradient(#3B82F6, #3B82F6),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), var(--wp--preset--color--nuit) calc(25% - 2px) 25%),
    repeating-linear-gradient(0deg, transparent 0 26px, var(--wp--preset--color--nuit) 26px 28px);
  background-repeat: no-repeat;
  background-size:
    25% 26px, 25% 26px, 25% 26px, 25% 26px, 25% 26px, 25% 26px, 25% 26px,
    100% 100%, 100% 100%;
  background-position:
    0 0, 100% 0, 66.6% 28px, 33.3% 56px, 0 84px, 100% 112px, 33.3% 140px,
    0 0, 0 0;
}
.ab-releve-legende {
  margin-top: 1rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--wp--preset--color--discret);
}

/* --- Escalier --- */
/* Trois cartes decalees, reliees par un filet qui part du bleu et s'eteint.
   Le decalage dit l'ordre sans avoir a l'ecrire. */
.ab-escalier { position: relative; padding-top: 1px; }
.ab-escalier::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--wp--preset--color--action), var(--wp--preset--color--bordure));
}
.ab-escalier .wp-block-column {
  position: relative;
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  /* Pas de « overflow: hidden » ici : il coupait en deux le point bleu pose
     sur le filet. Le numero en filigrane est donc cale a l interieur de la
     carte plutot que de deborder vers le haut. */
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ab-escalier .wp-block-column:hover {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--accent);
}
/* Le point bleu pose sur le filet, au depart de chaque carte. */
.ab-escalier .wp-block-column::before {
  content: "";
  position: absolute;
  left: 30px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wp--preset--color--action);
  z-index: 1;
}
.ab-escalier .wp-block-column:nth-child(2) { margin-top: 28px; }
.ab-escalier .wp-block-column:nth-child(3) { margin-top: 56px; }

/* Le numero geant en filigrane, dans l'angle de la carte. */
/* Tout le reste de la carte passe devant le filigrane. */

@media (max-width: 781px) {
  /* En colonne unique, l'escalier n'a plus de sens : on remet des cartes
     ordinaires, et le filigrane disparait. */
  .ab-escalier::before { display: none; }
  .ab-escalier .wp-block-column {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin-top: 0 !important;
  }
  .ab-escalier .wp-block-column::before { display: none; }
  /* Le rembourrage haut servait a degager le filigrane, qui n existe plus. */
  .ab-escalier .wp-block-column { padding-top: 1.875rem !important; }
}

/* --- Etapes numerotees, sans carte --- */
/* Le deroule de la maquette : un gros chiffre bleu, un titre, un texte, et
   un filet vertical qui separe les etapes. */
.ab-etapes .wp-block-column { padding-right: 3.5rem; }
.ab-etapes .wp-block-column + .wp-block-column {
  border-left: 1px solid var(--wp--preset--color--bordure);
  padding-left: 3.5rem;
}
.ab-etape-numero {
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 600;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  line-height: 1;
  color: var(--wp--preset--color--action);
  margin: 0;
}
@media (max-width: 781px) {
  .ab-etapes .wp-block-column { padding-right: 0; }
  .ab-etapes .wp-block-column + .wp-block-column {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--wp--preset--color--bordure);
    padding-top: 2rem;
  }
}

/* --- Halo radial de bas de page --- */
.ab-halo-bas { position: relative; isolation: isolate; overflow-x: clip; }
.ab-halo-bas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Le centre etait a 110 % de la hauteur, donc sous la section : le halo
     etait a son maximum pile sur le bord bas et s arretait net, ce qui
     dessinait la couture avec le pied de page. Il remonte, et un fondu
     garantit qu il ne reste rien du tout sur les derniers pixels, quelle que
     soit la hauteur de la section. */
  background: radial-gradient(760px 360px at 12% 78%, rgba(37, 99, 235, 0.18), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 92%);
}
@media (max-width: 781px) { .ab-halo-bas::before { display: none; } }

/* --- Bande du constat --- */
/* Trois colonnes egales separees par un filet vertical, comme la bande des
   chiffres. Sans ces filets, les trois idees flottent cote a cote. */
.ab-constat.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.ab-constat .wp-block-column + .wp-block-column {
  border-left: 1px solid var(--wp--preset--color--bordure);
  padding-left: 3rem;
}
.ab-constat .wp-block-column:not(:last-child) { padding-right: 3rem; }
@media (max-width: 781px) {
  .ab-constat.wp-block-columns { grid-template-columns: 1fr; gap: 2rem; }
  .ab-constat .wp-block-column + .wp-block-column {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--wp--preset--color--bordure);
    padding-top: 2rem;
  }
  .ab-constat .wp-block-column:not(:last-child) { padding-right: 0; }
}

/* ==================================================================
   DIRECTION ARTISTIQUE, 2026-08-30
   « Le carnet de mesure ». Voir DIRECTION-ARTISTIQUE.md a la racine
   du dossier. Cette couche vient en dernier et fait autorite sur ce
   qui precede.
   ================================================================== */

/* --- Mouvement --- */
/* Une seule duree, une seule courbe, sur tout le site. */
:root {
  --ab-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- 1. La grille se voit --- */
/* Un filet court sur toute la hauteur de la page, dans la gouttiere gauche,
   avec un repere horizontal a l'ouverture de chaque section. Les sections
   deviennent les entrees numerotees d'un meme document. */
@media (min-width: 1200px) {
  .entry-content > .wp-block-group { position: relative; }
  .entry-content > .wp-block-group::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 680px);
    width: 1px;
    background: var(--wp--preset--color--bordure);
    pointer-events: none;
    z-index: 0;
  }
  /* Le repere horizontal qui marque l'ouverture de la section. */
  .ab-section { position: relative; }
  .ab-section::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 0.5rem;
    width: 40px;
    height: 1px;
    background: var(--wp--preset--color--bordure);
  }
  /* Le contenu passe devant le filet. */
  .entry-content > .wp-block-group > * { position: relative; z-index: 1; }
}

/* --- 2. Les notes en marge --- */
/* Ce qu'un document technique met en marge : une precision courte, en
   monospace, avec un filet a gauche. Ni fond, ni bordure fermee, ni ombre :
   ce n'est pas une carte, c'est du texte annexe. */
.ab-note {
  border-left: 1px solid var(--wp--preset--color--bordure);
  padding-left: 1.25rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--wp--preset--color--texte);
}
.ab-note + .ab-note { margin-top: 1.75rem; }
.ab-note-titre {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--discret);
  margin-bottom: 0.5rem;
}
/* Une colonne de notes se cale en haut, elle ne s'etire pas. */
.ab-marge { align-self: start; }
@media (max-width: 1023px) {
  /* Sous 1024px, les notes retombent dans le flux, avec le meme filet. */
  .ab-note { font-size: 0.875rem; }
}

/* --- 3. Un seul accent par section --- */
/* Les etiquettes passent au gris : le bleu ne signale plus rien quand il est
   partout. Il reste sur les boutons, les liens, et un element par section. */
.ab-etiquette,
.is-style-etiquette,
.ab-etiquette-section,
.is-style-etiquette-section {
  color: var(--wp--preset--color--discret);
  font-size: 0.6875rem;
}

/* --- Typographie --- */
/* Un titre large et leger a plus d'autorite qu'un titre gras et petit. */
h1, .wp-block-heading[class*="level-1"] {
  letter-spacing: -0.035em;
  line-height: 1.02;
}
h2, .ab-titre-large {
  letter-spacing: -0.025em;
  line-height: 1.1;
}
h3 { letter-spacing: -0.01em; line-height: 1.3; }
.has-chapo-font-size { color: var(--wp--preset--color--texte-fort); }

/* --- 4. Les surfaces s'etagent --- */
/* Une carte se detache par son fond et son filet, jamais par une ombre :
   l'ombre portee est le marqueur numero un du modele generique. */
.ab-carte,
.is-style-carte,
.ab-encadre {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color var(--ab-transition), transform var(--ab-transition), background-color var(--ab-transition);
}
.ab-carte:hover,
.is-style-carte:hover,
.ab-encadre:hover {
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--accent);
}
/* La carte mise en avant monte d'un niveau de surface au lieu de s'auréoler. */
.ab-encadre.est-dominant,
.is-style-carte.est-dominant {
  background: var(--wp--preset--color--surface-haute);
  border-color: var(--wp--preset--color--action);
  box-shadow: none;
}
.ab-encadre.est-attenue { opacity: 1; background: transparent; }

/* Plus aucune ombre portee nulle part. */
.ab-pack, .ab-pack:hover, .wp-block-column, .wp-block-group { box-shadow: none; }
.ab-pack:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent) !important; }

/* --- Boutons --- */
.wp-block-button__link {
  border-radius: 8px;
  font-weight: 600;
  transition: background-color var(--ab-transition), transform var(--ab-transition), color var(--ab-transition);
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent);
}

/* --- Liens du texte courant --- */
/* Souligne discret plutot que couleur seule : lisible et sobre. */
.entry-content p a:not(.wp-block-button__link),
.entry-content li a {
  color: var(--wp--preset--color--accent-clair);
  text-decoration: underline;
  text-decoration-color: rgba(147, 180, 255, 0.35);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--ab-transition), color var(--ab-transition);
}
.entry-content p a:not(.wp-block-button__link):hover,
.entry-content li a:hover {
  color: var(--wp--preset--color--titre);
  text-decoration-color: var(--wp--preset--color--accent);
}

/* --- Focus clavier --- */
/* Visible sur fond sombre, sans casser la composition. */
:where(a, button, input, select, textarea, .wp-block-button__link, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Le filigrane et l'escalier, ajustes a la nouvelle palette --- */
.ab-escalier .wp-block-column:hover { transform: translateY(-4px); }

/* --- Le decor de fond, allege --- */
/* La grille de fond descend a un contraste ou elle se devine sans se voir. */
.ab-grille::before,
.is-style-grille::before {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.014) 0 1px, transparent 1px 80px);
}
/* Le halo perd en opacite : il chauffe le haut de page, il ne l'eclaire pas. */
.ab-halo::before,
.is-style-halo::before {
  background: radial-gradient(ellipse at center, rgba(37,99,235,0.16), rgba(37,99,235,0) 66%);
}

/* --- Rythme vertical --- */
/* Tout est multiple de 8. Le titre respire, le corps suit. */
.ab-section > .wp-block-heading + * { margin-top: 2.5rem; }
.ab-section > * + * { margin-top: 1.5rem; }
.ab-section > .is-style-etiquette-section + .wp-block-heading { margin-top: 1rem; }
.ab-section > .wp-block-columns { margin-top: 3.5rem; }

/* --- Listes --- */
/* Le tiret passe au bleu : c'est le seul endroit ou la couleur segmente. */
/* Ces deux regles reprennent celles du bloc de liste plus haut. Sans le
   :not(), elles ecrasaient l alignement de la liste du pied de page, definie
   avant elles : les liens etaient decales de 21px sous leur intitule. */
.wp-block-list:not(.ab-liste-pied) li::before { color: var(--wp--preset--color--action); }
.wp-block-list:not(.ab-liste-pied) li { padding-left: 1.4em; }

/* --- Passe d'homogeneite --- */

/* Une note en monospace au-dela de 50 caracteres devient penible a lire. */
.ab-note { max-width: 46ch; }

/* Les emplacements provisoires se calment : ils doivent rester reperables
   sans etre l'element le plus voyant de la page. Le site doit etre beau meme
   avec les emplacements visibles. */
.ab-emplacement-photo,
.is-style-emplacement-photo {
  background: repeating-linear-gradient(
    45deg,
    rgba(245, 158, 11, 0.025) 0 14px,
    rgba(245, 158, 11, 0.055) 14px 28px
  );
  border: 1px dashed rgba(245, 158, 11, 0.45);
  color: rgba(252, 211, 77, 0.75);
  font-size: 0.75rem;
}

/* Legende sous une image ou un emplacement : meme grain que les notes. */
.ab-legende {
  margin-top: 1rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--wp--preset--color--discret);
}

/* --- Passe de detail : contrastes mesures --- */
/* Le marqueur provisoire etait a 1.5 de contraste, donc illisible. Il doit
   rester voyant, mais lisible : c'est un texte qu'Antony doit pouvoir relire. */
.ab-a-completer,
.is-style-a-completer {
  color: #FDE68A;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.55);
}
/* Meme raison pour le texte des emplacements d'image. */
.ab-emplacement-photo,
.is-style-emplacement-photo { color: #FDE68A; }

/* L'emplacement de l'agenda occupait 1280px de large : un agenda de prise de
   rendez-vous fait environ 760 sur 500. On le dimensionne pour de vrai, sinon
   la mise en page sera fausse le jour ou on le branche. */
.ab-emplacement-photo.est-paysage {
  aspect-ratio: 3 / 2;
  max-width: 760px;
  max-height: 480px;
}

/* ==================================================================
   PASSE D'ALLEGEMENT, 2026-08-30
   Inventaire fait : le filet de gouttiere apparaissait sur 9 sections
   sur 9, le repere sur 7, les cartes sur 5, les notes sur 4. Un
   traitement present partout ne signale plus rien : il devient du
   bruit de fond. On retire avant d'ajouter.
   ================================================================== */

/* --- Retire : le filet de gouttiere et son repere --- */
/* C'etait une des quatre decisions de la direction artistique. Elle ne tient
   pas : un filet sur chaque section attire l'oeil sans jamais rien designer.
   La page se lit mieux sans. */
.entry-content > .wp-block-group::after { display: none !important; }
.ab-section::before { display: none !important; }

/* --- Tete de colonne --- */
/* Remplace la carte quand trois idees sont paralleles : un filet en haut, du
   blanc autour. Une boite ferme, un filet ordonne. Plus leger, et ca laisse la
   typographie faire le travail. */
.ab-colonnes-filet .wp-block-column {
  border-top: 1px solid var(--wp--preset--color--bordure);
  padding-top: 1.75rem;
  padding-right: 2.5rem;
}
.ab-colonnes-filet .wp-block-column:last-child { padding-right: 0; }
@media (max-width: 781px) {
  .ab-colonnes-filet .wp-block-column { padding-right: 0; padding-top: 1.5rem; }
}

/* --- Echelles --- */
/* Un element visuel trop petit passe pour un accident. Les deux moments forts
   de la page, la grille de releve et l'escalier, montent d'un cran. */
.ab-releve { padding: 2rem; }
.ab-releve-grille { height: 224px; }
.ab-releve-grille {
  background-size:
    25% 34px, 25% 34px, 25% 34px, 25% 34px, 25% 34px, 25% 34px, 25% 34px,
    100% 100%, 100% 100%;
  background-position:
    0 0, 100% 0, 66.6% 38px, 33.3% 76px, 0 114px, 100% 152px, 33.3% 190px,
    0 0, 0 0;
  background-image:
    linear-gradient(#2563EB, #2563EB),
    linear-gradient(#3B82F6, #3B82F6),
    linear-gradient(#2563EB, #2563EB),
    linear-gradient(#93B4FF, #93B4FF),
    linear-gradient(#2563EB, #2563EB),
    linear-gradient(#2563EB, #2563EB),
    linear-gradient(#3B82F6, #3B82F6),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), var(--wp--preset--color--nuit) calc(25% - 2px) 25%),
    repeating-linear-gradient(0deg, transparent 0 34px, var(--wp--preset--color--nuit) 34px 38px);
}

/* Le filigrane etait a 5 % d'opacite : invisible, donc inutile. A 160px et
   7 %, il se lit comme un reperage volontaire. */
/* Le filigrane geant a ete retire : l ordre etait deja dit par le decalage des
   cartes, le filet, les points et les libelles « Chantier 01 ». Un quatrieme
   signal redondant, qui en plus chevauchait la derniere ligne de la carte 3. */

/* --- Respiration --- */
/* Les sections qui perdent leur decor doivent respirer davantage. */
.ab-section > .wp-block-columns { margin-top: 4rem; }
.ab-section > .wp-block-heading + .has-chapo-font-size { margin-top: 2rem; }

/* --- Escalier : hauteurs egalisees --- */
/* Sans le filigrane, le bas des cartes est vide et inegal selon la longueur du
   texte. Les colonnes s'etirent a la meme hauteur, le rembourrage bas se
   resserre : les trois cartes se repondent. */
.ab-escalier .wp-block-column {
  padding-bottom: 2.25rem;
  align-self: stretch;
}

/* --- Un seul dispositif de colonnes --- */
/* Il y avait deux traitements pour la meme situation : filets verticaux entre
   les colonnes ici, filet horizontal en tete la-bas. Deux dispositifs pour un
   meme besoin, c'est ce qui donne l'impression d'un systeme applique au hasard.
   On garde le filet en tete, le plus discret, et on l'applique partout. */
.ab-constat .wp-block-column + .wp-block-column,
.ab-etapes .wp-block-column + .wp-block-column {
  border-left: 0;
  padding-left: 0;
}
.ab-constat .wp-block-column,
.ab-etapes .wp-block-column {
  border-top: 1px solid var(--wp--preset--color--bordure);
  padding-top: 1.75rem;
  padding-right: 2.5rem;
}
.ab-constat .wp-block-column:last-child,
.ab-etapes .wp-block-column:last-child { padding-right: 0; }

@media (max-width: 781px) {
  .ab-constat .wp-block-column,
  .ab-etapes .wp-block-column {
    padding-right: 0;
    padding-top: 1.5rem;
  }
  .ab-constat .wp-block-column + .wp-block-column,
  .ab-etapes .wp-block-column + .wp-block-column {
    border-top: 1px solid var(--wp--preset--color--bordure);
    padding-top: 1.5rem;
  }
}

/* Sur le fond surelevé d'une carte dominante, le gris discret tombe a 4.4 de
   contraste. Les etiquettes y passent au gris de texte courant. */
.est-dominant .is-style-etiquette,
.est-dominant .ab-etiquette { color: var(--wp--preset--color--texte); }

/* ==================================================================
   INDEX DES SERVICES, 2026-08-30
   Le site devient une carte de visite : cinq services listes, courts,
   scannables. Une rangee par service, titre a gauche, description a
   droite, separees par un filet. C'est le meme filet que les groupes
   de colonnes : aucun dispositif nouveau.
   ================================================================== */
.ab-service {
  border-top: 1px solid var(--wp--preset--color--bordure);
  padding-top: 2rem;
  padding-bottom: 2rem;
  transition: background-color var(--ab-transition);
}
.ab-service:last-of-type { border-bottom: 1px solid var(--wp--preset--color--bordure); }
/* Le survol eclaire la rangee entiere : on comprend qu'elle fait bloc. */
.ab-service:hover { background-color: color-mix(in srgb, var(--wp--preset--color--surface) 60%, transparent); }
.ab-service .wp-block-column:first-child { padding-right: 2.5rem; }

@media (max-width: 781px) {
  .ab-service { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .ab-service .wp-block-column:first-child { padding-right: 0; padding-bottom: 0.75rem; }
}

/* ==================================================================
   AJUSTEMENTS DE LA CARTE DE VISITE, 2026-08-30
   La page est passee de neuf sections a cinq. Les espacements
   calibres pour une page longue sont trop genereux pour une page
   courte : ils la font paraitre vide plutot qu'aeree.
   ================================================================== */

/* Les sections respirent moins largement : 96px au lieu de 120 sur grand
   ecran. Sur cinq sections, c'est 240px de moins sans rien serrer. */
.entry-content > .wp-block-group {
  padding-top: clamp(3rem, 2rem + 3.2vw, 6rem) !important;
  padding-bottom: clamp(3rem, 2rem + 3.2vw, 6rem) !important;
}

/* Les rangees de services : le texte fait deux lignes, la rangee en faisait
   cinq. On resserre, la liste se parcourt d'un coup d'oeil. */
.ab-service {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Le portrait etait dimensionne pour une page longue ou il avait du texte en
   face. Ici la presentation tient en quatre lignes : un portrait de 500px de
   haut laissait 440px de vide a sa droite. */
.ab-emplacement-photo.est-portrait {
  max-width: 320px;
  max-height: 400px;
}

/* Chaque rangee de service est un bloc de colonnes : elle heritait donc de la
   marge de 4rem prevue pour separer deux groupes de colonnes distincts. Cinq
   rangees, 320px de marge parasite dans une liste censee etre serree. */
.ab-section > .ab-service + .ab-service { margin-top: 0; }

/* ==================================================================
   CARTES EN RELIEF, 2026-08-30
   Les services et les points de methode passent en vraies cartes.
   Le relief au repos vient du niveau de surface et du filet, pas
   d'une ombre : c'est la regle de la direction artistique. L'ombre
   n'apparait qu'au survol, ou elle repond a un geste au lieu de
   decorer.
   ================================================================== */
.ab-carte-relief {
  background: var(--wp--preset--color--surface-haute);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: 12px;
  transition:
    transform var(--ab-transition),
    border-color var(--ab-transition),
    box-shadow var(--ab-transition),
    background-color var(--ab-transition);
}
.ab-carte-relief:hover {
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--accent);
  background-color: color-mix(in srgb, var(--wp--preset--color--surface-haute) 88%, #FFFFFF);
  /* Portee courte : 12 + 26 - 20 = 18px, largement dans le rembourrage de
     section. Le controle des debordements le verifie. */
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.9);
}

/* Toutes les cartes d'une rangee font la meme hauteur, quelle que soit la
   longueur du texte : c'est ce qui donnait un rendu bancal. */
.wp-block-columns > .wp-block-column.ab-carte-relief { align-self: stretch; }

/* La specificite : un filet bleu au repos, sans fond different. Elle se
   distingue sans ecraser les autres. */
.ab-carte-relief.est-specificite { border-color: var(--wp--preset--color--action); }
/* Sans cette ligne, la specificite du selecteur ci-dessus l emporte sur
   l effet de survol et la carte GEO est la seule a ne pas s eclaircir. */
.ab-carte-relief.est-specificite:hover { border-color: var(--wp--preset--color--accent); }

/* Le numero d'un point de methode : gros, bleu, en tete de carte. */
.ab-numero-point {
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--accent);
  margin: 0;
}

/* --- Finitions des cartes --- */
/* Les quatre cartes de service font la meme hauteur parce que leurs textes
   font tous deux lignes : c est le texte qui est cale, pas une hauteur
   plancher qui creuserait du vide sous les plus courtes.

   Dans les quatre points de methode, les titres font une ou deux lignes selon
   le point. Le titre reserve ses deux lignes pour que les quatre descriptions
   demarrent sur la meme ligne. */
@media (min-width: 782px) {
  .ab-rangee-methode .ab-carte-relief > .wp-block-heading {
    /* Deux lignes de titre. La seconde declaration est la mesure exacte pour
       les navigateurs qui connaissent l unite lh ; la premiere est le repli. */
    min-height: 3.9rem;
    min-height: 2lh;
  }
}

/* --- Grille des services --- */
/* Cinq services, une seule anatomie : un numero en tete, un titre, deux ou
   trois lignes de texte. C est la grille qui fait la regularite, pas une
   hauteur imposee carte par carte. Les colonnes en flex de WordPress ne
   savent pas faire tenir cinq cartes dans un module regulier : une grille,
   si. */
.ab-grille-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Les enfants d une grille ne doivent rien heriter des marges de flux que
   WordPress pose sur les groupes : une marge automatique les decalerait dans
   leur cellule. */
.ab-grille-services > * {
  margin: 0 !important;
  max-width: none !important;
}

@media (max-width: 1080px) {
  .ab-grille-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Une colonne unique seulement sur telephone. Entre 601 et 780px, une
   tablette en portrait tient deux colonnes sans serrer : y rester a une
   colonne allongeait la page pour rien. */
@media (max-width: 600px) {
  .ab-grille-services { grid-template-columns: minmax(0, 1fr); }
}

/* La tete de carte : le numero a gauche, l etiquette de specificite a droite
   quand il y en a une. Meme ligne pour les cinq, meme si une seule carte
   porte l etiquette. */
.ab-tete-carte {
  display: flex;
  align-items: baseline;
  /* Collee au numero, pas repoussee au bord : sur la carte double elle
     partait a 700px du numero et ne se rattachait plus a rien. */
  justify-content: flex-start;
  gap: 0.875rem;
}
.ab-tete-carte > * { margin: 0 !important; }

/* Le titre et le texte demarrent au meme endroit dans les cinq cartes. */
/* L anatomie des cinq cartes : numero, titre, texte, toujours aux memes
   distances. Rien ne force l alignement des descriptions et rien n en a
   besoin : les titres d une meme rangee font le meme nombre de lignes, donc
   les textes demarrent d eux-memes sur la meme ligne. Le mou eventuel part au
   fond de la carte, ou il ne se voit pas.

   Deux dispositifs ont ete essayes avant celui-la et retires : une hauteur
   reservee au titre, qui creusait un trou sous les titres courts, et un
   calage du texte sur le bas de la carte, qui deplacait ce trou au lieu de le
   supprimer. */
.ab-carte-service > .wp-block-heading {
  margin-top: 1.5rem !important;
  margin-bottom: 0.875rem !important;
}
.ab-carte-service > p { margin-top: 0 !important; }

/* La cellule de cloture d une grille de services : pas de fond, pas de filet
   autour, juste un filet bleu a gauche. Elle ferme la grille sans se faire
   passer pour un service de plus. */
.ab-note-grille {
  border-left: 2px solid var(--wp--preset--color--action);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ab-note-grille > p { margin: 0 !important; }
.ab-note-grille > * + * { margin-top: 1rem !important; }

/* Le debut de la phrase de cloture est ce qui resume la facon de travailler :
   il se lit comme une accroche, la suite reste du texte courant. */
.ab-note-accroche {
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--titre);
}
@media (max-width: 781px) {
  .ab-note-grille {
    border-left: none;
    border-top: 2px solid var(--wp--preset--color--action);
  }
}

/* Le bouton de l accroche. A 13px et 40px de haut, il ne pesait rien a cote
   d un titre de 76px. Les autres boutons du site ne bougent pas : dans une
   entete ou un pied de page, cette taille est la bonne. */
.ab-bouton-large .wp-block-button__link {
  font-size: 1rem;
  padding: 1.15rem 2.1rem;
}

/* Le portrait de la section « Qui suis-je ». La photo est en pied et le
   creneau de la maquette est en 4/5 : le cadrage remonte pour garder de l air
   au-dessus de la tete et couper en bas plutot qu au visage. */
.ab-portrait img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-position: 50% 18%;
}

/* --- La biographie de « Qui suis-je » --- */
/* Sans limite de mesure, le texte courait sur 790px, soit plus de 95 signes
   par ligne.

   Le portrait en 4/5 reste plus haut que le texte, quelle que soit la largeur
   qu on donne aux deux colonnes : c est arithmetique. Plutot que de rapetisser
   la photo jusqu a ce qu elle n ait plus de presence, la derniere phrase, la
   seule mise en avant, se cale sur le bas du portrait. Elle ferme les deux
   colonnes sur la meme ligne. */
/* Le calage de la derniere phrase sur le bas de la colonne a ete essaye puis
   retire : il fermait bien les deux colonnes sur la meme ligne, mais au prix
   d un trou de 130px au milieu du texte. Un espacement normal vaut mieux qu un
   alignement parfait paye ce prix-la. */
/* Pas de mesure imposee ici : bridee a 62 signes, la colonne s arretait
   130px avant le bord droit alors que les cartes des sections precedentes
   vont jusqu au bout, et la section paraissait plus etroite que les autres.
   C est la largeur de la colonne du portrait qui tient lieu de mesure. */

/* --- L encadre de contact --- */
/* Trois liens empiles ne remplissaient pas le cadre et ne se lisaient pas
   comme des coordonnees. Chaque ligne porte son etiquette et se detache de la
   precedente par un filet : le cadre a une structure, pas seulement un fond. */
.ab-ligne-contact {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.9375rem;
  margin-top: 0.9375rem !important;
}
.ab-ligne-contact > * { margin: 0 !important; }
.ab-ligne-contact > .ab-valeur-contact { margin-top: 0.375rem !important; }

.ab-valeur-contact {
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* Le pied de l encadre se detache lui aussi, c est la meme information de
   nature differente. */
.ab-pied-encadre {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.125rem;
  margin-top: 1.375rem !important;
}

/* Pas de soulignement au repos : dans un bloc de coordonnees deja etiquetees,
   le souligne fait du bruit sur les trois lignes a la fois. Le survol prend le
   relais, et le focus clavier garde son cadre. La regle globale des liens de
   texte courant est plus specifique qu il n y parait, d ou le :not() ici. */
.ab-contact .ab-valeur-contact a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--titre);
  text-decoration: none;
  transition: color var(--ab-transition), text-decoration-color var(--ab-transition);
}
.ab-contact .ab-valeur-contact a:not(.wp-block-button__link):hover {
  color: var(--wp--preset--color--accent-clair);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent);
  text-underline-offset: 4px;
}

/* --- Liens de coordonnees --- */
/* Meme traitement que dans l encadre de la section rendez-vous : rien au
   repos, le survol prend le relais. */
.ab-liens-nets p a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--titre);
  text-decoration: none;
  transition: color var(--ab-transition), text-decoration-color var(--ab-transition);
}
.ab-liens-nets p a:not(.wp-block-button__link):hover {
  color: var(--wp--preset--color--accent-clair);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent);
  text-underline-offset: 4px;
}

/* --- Bouton flottant --- */
/* Il ne parait que lorsque aucun bouton de rendez-vous de la page n est a
   l ecran. La barre du haut est collante et porte deja le sien, mais elle est
   masquee sur mobile : c est justement la que ce bouton sert le plus.
   Cache par defaut, c est le script qui l affiche ; sans JavaScript, rien ne
   s affiche plutot qu un bouton fige par-dessus le texte. */
.ab-flottant {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--ab-transition), transform var(--ab-transition), visibility var(--ab-transition);
}
.ab-flottant.est-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ab-flottant .wp-block-button__link {
  /* Meme taille que les boutons de la page : plus petit, il passait pour un
     element secondaire. L ombre est la seule du site au repos, et elle est
     justifiee : ce bouton flotte au-dessus du contenu, il doit s en detacher
     franchement. Deux couches, une large et diffuse pour le decollement, une
     courte et dense pour l assise. */
  font-size: 1rem;
  padding: 1.15rem 2.1rem;
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.75),
    0 4px 12px -4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 781px) {
  /* Coin bas droit, au-dessus de la zone de geste des telephones recents, et
     un peu plus petit : il ne doit pas couvrir la ligne qu on est en train de
     lire. */
  .ab-flottant {
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .ab-flottant .wp-block-button__link {
    font-size: 0.9375rem;
    padding: 1rem 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-flottant { transition: opacity var(--ab-transition), visibility var(--ab-transition); transform: none; }
  .ab-flottant.est-visible { transform: none; }
}

/* Les trois coordonnees du pied suivent le meme rythme vertical que la liste
   de la colonne voisine. Sans cela elles etaient espacees de 48px contre 34
   pour les liens d a cote, et les deux colonnes ne se lisaient pas ensemble.
   Le selecteur ne prend que la deuxieme et la troisieme : la premiere garde sa
   marge d ecart avec l intitule. */
.ab-liens-nets p.has-custom-font-size + p.has-custom-font-size {
  margin-top: 0.6em !important;
}

/* --- Colonne de la section rendez-vous --- */
/* Les deux colonnes s etirent sur la hauteur de la rangee et le bouton se cale
   sur le bas : le bloc de gauche ouvre et ferme exactement sur les bords de
   l encadre. Centrer les deux colonnes ne suffisait pas, le texte demarrait
   37px plus bas que l encadre et s arretait 37px plus haut. */
/* Deux facons d egaliser les hauteurs ont ete essayees et retirees : caler le
   bouton sur le bas, qui ouvrait un trou de 145px, puis repartir le mou entre
   les quatre elements, qui delayait toute la colonne. Un espacement serre et
   normal vaut mieux qu une hauteur egale payee au prix du rythme : les deux
   colonnes demarrent sur la meme ligne, celle de gauche finit plus haut, et
   c est tres bien ainsi. */

/* --- Adaptations de la gamme intermediaire --- */
/* Les colonnes de WordPress ne se replient qu en dessous de 782px : entre 782
   et 1180px, les quatre points de methode se retrouvaient sur 110px de large
   chacun, avec des titres sur quatre lignes. On les passe en deux fois deux. */
/* Deux fois deux entre 601 et 1180px. En flex, deux elements a
   « 50% - gouttiere/2 » plus la gouttiere font exactement 100 % : au pixel
   pres, le navigateur replie quand meme. La grille ne pose pas la question,
   c est le conteneur qui decide du nombre de colonnes. */
@media (min-width: 601px) and (max-width: 1180px) {
  .ab-rangee-methode.wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .ab-rangee-methode.wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    width: auto !important;
  }
}

/* Le portrait de l accroche occupe toute sa colonne. Quand les colonnes se
   replient, sous 782px, cette colonne fait toute la largeur de l ecran : le
   portrait passait a 768px de large et mangeait un ecran entier de haut.
   On lui donne une largeur de lecture et on le centre. */
@media (max-width: 781px) {
  .ab-photo-hero { max-width: 340px; margin-inline: auto; }
}

/* ==================================================================
   Passe responsive du 2026-08-31
   ================================================================== */

/* --- Socle --- */
/* Garde-fous que le theme n avait pas. Aucun n est visible tant que tout va
   bien ; chacun evite un defaut connu sur telephone. */
html, body {
  /* Backstop contre un debordement lateral. « clip » et non « hidden » :
     hidden creerait un conteneur de defilement et casserait la barre du haut
     qui est en position collante. */
  overflow-x: clip;
  /* Coupe le rebond horizontal de Safari iOS. */
  overscroll-behavior-x: none;
}
body {
  /* Safari iOS grossit le texte de lui-meme en paysage sans cette ligne. */
  -webkit-text-size-adjust: 100%;
}
button, a {
  /* Le rectangle bleu d Android au toucher. L etat :active ci-dessous prend
     le relais comme retour tactile. */
  -webkit-tap-highlight-color: transparent;
}
.wp-block-button__link:active { transform: translateY(1px); }

/* Evite le mot seul en derniere ligne d un paragraphe. */
.entry-content p { text-wrap: pretty; }

/* --- Longueur de ligne --- */
/* Le chapo de l accroche courait sur 83 signes par ligne, au-dela des 75 qui
   restent confortables, et sur toute la largeur de l ecran une fois les
   colonnes repliees. */
/* 52ch et non 70ch : l unite ch vaut la largeur du zero, 9,8px chez Manrope,
   alors qu un caractere moyen en fait 7,2. 70ch laissait passer 95 signes. */
.ab-halo .has-chapo-font-size { max-width: 54ch; }

/* Les pages legales sont en colonne unique : sans mesure, leur prose montait a
   91 signes par ligne sur grand ecran. */
/* Le selecteur vise la structure, pas un identifiant de page : sur les pages
   legales les paragraphes sont des enfants directs du contenu, alors que sur
   l accueil tout est imbrique dans des groupes de section. */
.entry-content > p,
.entry-content > ul { max-width: 52ch; }

/* --- Cibles tactiles --- */
/* 44px de haut sur tout ce qui se touche au doigt, sans grossir le dessin :
   c est le rembourrage qui s etend, pas le texte. Les liens au fil d une
   phrase sont exclus, la norme ne les vise pas et les elargir casserait
   l interligne. */
@media (max-width: 1024px) {
  .ab-nav .wp-block-navigation-item__content,
  .ab-liste-pied a,
  .ab-liens-nets p a,
  .ab-cible-large a,
  .ab-contact .ab-valeur-contact a {
    display: inline-block;
    /* 0.8rem et non 0.75 : mesure au navigateur, la cible tombait a 43,6px,
       juste sous le seuil de 44. */
    padding-block: 0.8rem;
  }
  /* Les coordonnees des pages legales sont dans une liste : un peu de
     rembourrage suffit a passer le minimum de 24px sans defaire le rythme. */
  .entry-content > ul li a { display: inline-block; padding-block: 0.7rem; }
  .entry-content > ul li { margin-bottom: 0; }
  /* Le rembourrage ajoute remplace l ecart qui existait deja entre les
     lignes, sinon la colonne double de hauteur. */
  .ab-liste-pied li { margin-bottom: 0; }
  /* Le bouton de l entete mesurait 40px de haut a 1024px. */
  /* Le rembourrage du bouton est pose en style en ligne par le bloc : seul
     un !important peut le reprendre. */
  .ab-header .wp-block-button__link { padding-block: 1.05rem !important; }
  .ab-liens-nets p.has-custom-font-size + p.has-custom-font-size { margin-top: 0 !important; }

  /* Le logo et le bouton de menu : la zone s etend sans que le dessin bouge. */
  /* Le logo et le bouton de menu : on rembourre pour de vrai. Une zone
     etendue en pseudo-element fonctionne au doigt mais reste invisible aux
     outils de controle, donc invisible a la prochaine session. */
  .ab-logo a {
    display: inline-block;
    /* Sous 600px le logo passe a 15px : il faut un peu plus de rembourrage
       pour atteindre les 44px. */
    padding-block: 0.95rem;
    padding-inline: 0.25rem;
    margin-inline: -0.25rem;
  }
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Ecrans bas : telephone en paysage --- */
/* Mesure au navigateur : en paysage sur un telephone, la barre collante
   occupait 93px sur 390 de haut, soit un quart de l ecran. On la resserre.
   Les cibles du menu retombent a 40px au lieu de 44 : c est un arbitrage
   assume, rendre un quart de l ecran a la lecture vaut mieux que quatre
   pixels de cible dans une position ou l on tient le telephone a deux mains. */
@media (max-height: 500px) and (orientation: landscape) {
  .ab-header { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .ab-nav .wp-block-navigation-item__content { padding-block: 0.55rem; }
  .ab-header .wp-block-button__link { padding-block: 0.7rem !important; }
  .ab-logo a { padding-block: 0.55rem; }
}

/* --- Bande 601 a 781px : petites tablettes --- */
/* WordPress empile toutes les colonnes sous 782px. Sur une tablette en
   portrait, cela laisse quatre cartes de methode en pleine largeur, tres
   basses et tres larges, et un portrait qui occupe un ecran entier. On reprend
   la main sur cette bande, avec le !important qu impose la regle de
   WordPress. */
/* Le portrait de « Qui suis-je » suit la meme regle que celui de l accroche :
   une fois la colonne repliee, il ne doit pas manger tout l ecran. */
@media (max-width: 781px) {
  .ab-portrait { max-width: 360px; margin-inline: auto; }
  .ab-portrait + .ab-legende { text-align: center; }
}
/* ==================================================================
   Passe mobile du 2026-08-31
   ================================================================== */

/* --- Le portrait de l accroche sur telephone --- */
/* Trois formules ont ete montees et capturees : sans portrait, en medaillon
   rond au-dessus du texte, et en bande basse pleine largeur. Le medaillon
   rend le visage trop petit et laisse voir le detourage. Sans portrait,
   l accroche est propre mais on ne voit plus personne, sur l ecran ou la
   plupart des visiteurs arrivent. La bande l emporte : le visage y est aussi
   grand que sur ordinateur, et elle ferme la section au lieu de laisser une
   decoupe flotter au milieu du vide. */
@media (max-width: 600px) {
  /* Le portrait chevauche le bloc de texte et deborde du bord droit, comme sur
     ordinateur ou les deux colonnes se partagent la largeur. Trois formules
     ont ete montees et capturees avant celle-la : une bande basse pleine
     largeur, qui juxtaposait au lieu d integrer ; un fond ancre en bas a
     droite, qui delavait la photo sans la relier au texte ; et pas de
     portrait du tout, propre mais sans personne sur l ecran ou arrive la
     plupart des visiteurs. Ici le titre passe devant, la photo s efface vers
     le bas, et l accroche ne gagne que 28px de hauteur. */
  .ab-halo .wp-block-columns {
    position: relative;
    /* La colonne du portrait est vide, son contenu est en position absolue :
       la gouttiere de 3rem ajoutait 48px de vide sous le bouton. */
    row-gap: 0 !important;
  }
  .ab-halo .wp-block-column:first-child { position: relative; z-index: 1; }
  .ab-photo-hero {
    position: absolute;
    /* Plus etroit, donc plus court : le portrait accompagne le titre et
       s efface avant le chapo, au lieu de descendre derriere lui. */
    top: -1.5rem;
    /* Le portrait sort volontairement du cadre a droite : un sujet coupe
       par le bord est plus vivant qu un sujet pose au milieu. Le
       debordement est rogne par la section, il ne cree aucune barre de
       defilement, ce que le controle verifie. */
    right: -22%;
    width: 72%;
    max-width: none;
    margin: 0;
    z-index: 0;
    pointer-events: none;
  }
  .ab-photo-hero img {
    width: 100%;
    height: auto;
    opacity: 0.58;
    /* Le portrait est plus grand, donc plus haut : le fondu demarre d autant
       plus tot pour qu il ne reste presque rien a la hauteur du chapo. */
    -webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent 66%);
    mask-image: linear-gradient(to bottom, #000 34%, transparent 66%);
  }
  /* Le texte s arrete avant le visage. */
  /* L etiquette disparait : sur un ecran etroit elle passe sur deux lignes,
     empiete sur le visage et repousse le titre vers le bas pour une
     information que le chapo redonne. Le titre remonte d autant. */
  .ab-halo .is-style-etiquette-claire { display: none; }
  .ab-halo h1 { margin-top: 0 !important; }
  .ab-halo h1 { max-width: 84%; }
  /* Le chapo s arrete avant la verticale du portrait. */
  .ab-halo .has-chapo-font-size { max-width: 80%; }
}

/* --- Le menu deroulant --- */
/* La cause du menu casse : « backdrop-filter » sur la barre du haut cree un
   bloc conteneur pour ses descendants en position fixe. Le panneau du menu,
   pourtant en « position: fixed; inset: 0 », se calait donc sur la barre, 90px
   de haut, au lieu de l ecran. On retire le flou le temps de l ouverture. Le
   bloc de navigation de WordPress n est pas touche : Antony garde la main sur
   ses entrees de menu. */
.ab-header:has(.is-menu-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border-bottom-color: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: 7.5rem 1.5rem 2.5rem;
  align-items: flex-start;
  justify-content: flex-start;
}
.is-menu-open .wp-block-navigation__responsive-container-content { width: 100%; }
.is-menu-open .wp-block-navigation__container {
  width: 100%;
  gap: 0 !important;
  align-items: stretch !important;
}
.is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-top: 1px solid var(--wp--preset--color--bordure);
}
.is-menu-open .wp-block-navigation-item:last-child {
  border-bottom: 1px solid var(--wp--preset--color--bordure);
}
/* WordPress pose « padding: 0 » sur ce lien avec exactement le meme
   selecteur, et sa feuille passe apres celle du theme : a egalite de
   precision, c est la sienne qui gagne. On ajoute le conteneur de l entete
   pour passer devant, plutot qu un !important. */
.ab-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding-block: 1.25rem;
  font-family: var(--wp--preset--font-family--titre);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Le menu du haut est en capitales, ce qui convient a une barre. A 22px
     dans un panneau plein ecran, les capitales crient. */
  text-transform: none;
  color: var(--wp--preset--color--titre);
  padding-block: 1.35rem;
}
.wp-block-navigation__responsive-container-close {
  top: 1.1rem;
  right: 1.1rem;
  color: var(--wp--preset--color--titre);
}
.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 26px;
  height: 26px;
}

/* --- La barre de rendez-vous sur telephone --- */
/* Sur mobile ce n est plus un bouton pose dans un coin mais une barre pleine
   largeur, collee en bas. La zone de geste des telephones recents est
   respectee par « env(safe-area-inset-bottom) ». */
@media (max-width: 600px) {
  .ab-flottant {
    left: 0;
    right: 0;
    /* Decollee du bord bas, et rien autour du bouton : ni fond, ni filet. */
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    padding: 0 1rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    transform: translateY(140%);
  }
  .ab-flottant.est-visible { transform: translateY(0); }
  .ab-flottant .wp-block-button { width: 100%; }
  .ab-flottant .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    padding-block: 1rem;
    box-shadow:
      0 18px 40px -12px rgba(0, 0, 0, 0.75),
      0 4px 12px -4px rgba(0, 0, 0, 0.5);
  }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .ab-flottant { transform: none; }
}

/* --- Le pied de page sur telephone --- */
/* Il faisait 751px de haut pour trois colonnes empilees. Les intitules se
   rapprochent de leurs liens, les colonnes se resserrent, et les cibles
   tactiles restent a 44px. */
@media (max-width: 600px) {
  footer.wp-block-group {
    padding-top: 2.25rem !important;
    /* De quoi finir la page sans que la barre de rendez-vous passe sur la
       derniere ligne. Elle disparait des que le pied entre a l ecran, cette
       reserve est une ceinture en plus des bretelles. */
    padding-bottom: 3.5rem !important;
  }
  footer .wp-block-columns { gap: 1.5rem !important; }
  footer .wp-block-columns > .wp-block-column + .wp-block-column { margin-top: 0 !important; }
  footer .is-style-etiquette + * { margin-top: 0.375rem !important; }
  footer .ab-logo + p { margin-top: 0.5rem !important; }
  footer .ab-logo ~ .is-style-etiquette { margin-top: 0.875rem !important; }

  /* Les trois liens du site tiennent sur une ligne et demie au lieu de trois
     lignes de 44px. Les cibles gardent leur hauteur, c est l empilement qui
     disparait. */
  footer .ab-liste-pied {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
  }
  footer .ab-liste-pied li { width: auto; }

  footer .wp-block-separator {
    margin-top: 1.5rem !important;
    margin-bottom: 0.875rem !important;
  }
  /* La mention de droits et les liens legaux se suivent au lieu de flotter a
     deux hauteurs differentes. */
  footer .wp-block-separator ~ .wp-block-group {
    gap: 0.5rem !important;
    row-gap: 0.5rem !important;
  }
  footer .wp-block-separator ~ .wp-block-group p { margin: 0 !important; }
}

/* --- Premier bloc d une section --- */
/* Mesure au navigateur : le vide avant « Prenons rendez-vous » faisait 245px
   contre 181px partout ailleurs. Sa premiere rangee de colonnes portait une
   marge haute de 4rem qui s ajoutait au rembourrage de la section. Ailleurs le
   premier bloc est une etiquette, qui n en porte pas. */
.ab-section > *:first-child { margin-top: 0 !important; }



/* --- L accroche se resserre sur telephone --- */
/* La barre du haut separe deja l accroche du bord de l ecran : 48px de
   rembourrage en plus repoussaient le titre pour rien. En bas, la section se
   ferme juste apres le bouton. Les quatre autres sections ne bougent pas. */
@media (max-width: 600px) {
  /* Le rembourrage des sections vient de « .entry-content > .wp-block-group »,
     en !important et avec deux classes : il faut au moins autant de precision
     pour le reprendre sur la seule accroche. */
  .entry-content > .wp-block-group.ab-halo {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ==================================================================
   Tunnel de prise de rendez-vous
   ==================================================================
   Le conteneur est un <dialog> natif : il apporte le piege de focus, la
   fermeture par Echap et le fond assombri sans une ligne de JavaScript.
   Sur ordinateur c est une modale centree, sur telephone un panneau qui
   monte du bas, parce qu une modale etroite plus un clavier virtuel ne
   laissent rien a lire. */

.ab-rdv {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  overscroll-behavior: contain;
}
/* Le centrage passe par flex, pas par « margin: auto » : un <dialog> est un
   bloc, et une marge automatique verticale n y fait rien. Mesure au
   navigateur, le panneau se collait en haut de l ecran. La regle vise
   « [open] » parce qu un dialogue ferme doit rester en display: none. */
.ab-rdv[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-rdv::backdrop {
  /* Pas de flou : sur un grand ecran, flouter toute la page a chaque
     ouverture coute un rendu complet, et c est la que se sentait la latence
     au clic. Un fond plus sombre isole aussi bien la fenetre. */
  background: rgba(4, 8, 16, 0.82);
}
/* Le fond de page ne defile plus derriere la modale. */
html.ab-rdv-ouvert { overflow: hidden; }

.ab-rdv-panneau {
  display: flex;
  flex-direction: column;
  width: min(34rem, 100%);
  max-height: min(90vh, 46rem);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: 16px;
  overflow: hidden;
}

/* --- Tete --- */
.ab-rdv-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.125rem;
  border-bottom: 1px solid var(--wp--preset--color--bordure);
}
.ab-rdv-etape {
  margin: 0 0 0.375rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--discret);
}
.ab-rdv-titre {
  margin: 0;
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--titre);
}
.ab-rdv-titre:focus-visible { outline: none; }
.ab-rdv-fermer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -0.5rem -0.5rem 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--wp--preset--color--texte);
  cursor: pointer;
  transition: color var(--ab-transition), background-color var(--ab-transition);
}
.ab-rdv-fermer:hover {
  color: var(--wp--preset--color--titre);
  background: var(--wp--preset--color--surface-haute);
}

/* --- Corps : le seul element qui defile --- */
.ab-rdv-corps {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem;
}

/* --- Calendrier --- */
.ab-rdv-mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
}
.ab-rdv-mois-nom {
  margin: 0;
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--titre);
}
.ab-rdv-fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--wp--preset--color--surface-haute);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: 10px;
  color: var(--wp--preset--color--texte-fort);
  cursor: pointer;
  transition: border-color var(--ab-transition), color var(--ab-transition);
}
.ab-rdv-fleche:hover:not(:disabled) {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--titre);
}
.ab-rdv-fleche:disabled { opacity: 0.32; cursor: not-allowed; }

.ab-rdv-jours-tete,
.ab-rdv-grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
}
.ab-rdv-jours-tete {
  margin-bottom: 0.5rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--discret);
  text-align: center;
}
.ab-rdv-jour {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  background: var(--wp--preset--color--surface-haute);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: 10px;
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.9375rem;
  color: var(--wp--preset--color--titre);
  cursor: pointer;
  transition: border-color var(--ab-transition), background-color var(--ab-transition);
}
.ab-rdv-jour:hover:not(:disabled) { border-color: var(--wp--preset--color--accent); }
.ab-rdv-jour:disabled {
  background: none;
  border-color: transparent;
  color: var(--wp--preset--color--discret);
  opacity: 0.45;
  cursor: not-allowed;
}
.ab-rdv-jour.est-vide { background: none; border: 0; }
/* L etat choisi ne tient pas qu a la couleur : le filet epaissit aussi. */
.ab-rdv-jour.est-choisi {
  background: var(--wp--preset--color--action);
  border-color: var(--wp--preset--color--accent-clair);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-clair);
  color: var(--wp--preset--color--blanc);
  font-weight: 600;
}

.ab-rdv-note {
  margin: 1.25rem 0 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--wp--preset--color--discret);
}

/* --- Creneaux --- */
.ab-rdv-jour-choisi {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--wp--preset--color--texte-fort);
}
.ab-rdv-groupe {
  margin: 0 0 0.625rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--discret);
}
.ab-rdv-groupe + .ab-rdv-creneaux { margin-bottom: 1.5rem; }
.ab-rdv-creneaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
  gap: 0.5rem;
}
.ab-rdv-creneau {
  min-height: 46px;
  padding: 0 0.5rem;
  background: var(--wp--preset--color--surface-haute);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: 10px;
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.9375rem;
  color: var(--wp--preset--color--titre);
  cursor: pointer;
  transition: border-color var(--ab-transition), background-color var(--ab-transition);
}
.ab-rdv-creneau:hover { border-color: var(--wp--preset--color--accent); }
.ab-rdv-creneau.est-choisi {
  background: var(--wp--preset--color--action);
  border-color: var(--wp--preset--color--accent-clair);
  color: var(--wp--preset--color--blanc);
  font-weight: 600;
}

/* --- Recapitulatif --- */
.ab-rdv-recap {
  padding: 1rem 1.125rem;
  margin-bottom: 1.5rem;
  background: var(--wp--preset--color--surface-haute);
  border: 1px solid var(--wp--preset--color--bordure);
  border-left: 2px solid var(--wp--preset--color--action);
  border-radius: 10px;
}
.ab-rdv-recap-date {
  margin: 0;
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--titre);
}
.ab-rdv-recap-mode {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--wp--preset--color--texte);
}

/* --- Formulaire --- */
.ab-rdv-champ { margin-bottom: 1.25rem; }
.ab-rdv-champ label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--discret);
}
.ab-rdv-champ input[type="text"],
.ab-rdv-champ input[type="email"],
.ab-rdv-champ input[type="tel"],
.ab-rdv-champ textarea {
  width: 100%;
  /* Les champs de formulaire ne sont pas en border-box par defaut dans ce
     theme : mesure au navigateur, un champ a 100 % debordait de 10px du
     panneau, rembourrage et filet compris. */
  box-sizing: border-box;
  padding: 0.8rem 0.875rem;
  background: var(--wp--preset--color--nuit);
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: 10px;
  font-family: var(--wp--preset--font-family--texte);
  /* 16px au minimum : en dessous, Safari iOS zoome a la prise de focus. */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--wp--preset--color--titre);
  transition: border-color var(--ab-transition);
}
.ab-rdv-champ textarea { resize: vertical; min-height: 6rem; }
.ab-rdv-champ input:focus,
.ab-rdv-champ textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent);
}
.ab-rdv-champ input.est-en-defaut,
.ab-rdv-champ textarea.est-en-defaut { border-color: #F0A05A; }
.ab-rdv-aide,
.ab-rdv-erreur {
  margin: 0.4375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.ab-rdv-aide { color: var(--wp--preset--color--discret); }
.ab-rdv-erreur { color: #F0A05A; }
.ab-rdv-erreur:empty { display: none; }

.ab-rdv-consentement label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--texte-fort);
  cursor: pointer;
}
.ab-rdv-consentement input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  accent-color: var(--wp--preset--color--action);
}
.ab-rdv-consentement a { color: var(--wp--preset--color--accent-clair); }

/* Le piege a robots sort du cadre sans etre masque : un robot qui lit le CSS
   repere un « display: none », pas une position hors ecran. */
.ab-rdv-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Confirmation --- */
.ab-rdv-coche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 1.25rem;
  background: color-mix(in srgb, var(--wp--preset--color--action) 18%, transparent);
  border: 1px solid var(--wp--preset--color--action);
  border-radius: 50%;
  color: var(--wp--preset--color--accent-clair);
}

/* --- Pied --- */
.ab-rdv-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.5rem;
  border-top: 1px solid var(--wp--preset--color--bordure);
}
.ab-rdv-pied:not(:has(button:not([hidden]))) { display: none; }
.ab-rdv-retour {
  min-height: 44px;
  padding: 0 1rem;
  background: none;
  border: 1px solid var(--wp--preset--color--bordure);
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--texte);
  font-size: 0.875rem;
  color: var(--wp--preset--color--texte-fort);
  cursor: pointer;
  transition: border-color var(--ab-transition), color var(--ab-transition);
}
.ab-rdv-retour:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--titre);
}
.ab-rdv-valider {
  min-height: 48px;
  margin-left: auto;
  padding: 0 1.75rem;
  background: var(--wp--preset--color--action);
  border: 0;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--texte);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--wp--preset--color--blanc);
  cursor: pointer;
  transition: background-color var(--ab-transition);
}
.ab-rdv-valider:hover:not(:disabled) { background: var(--wp--preset--color--accent); }
.ab-rdv-valider:disabled { opacity: 0.6; cursor: progress; }

.ab-rdv-annonce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Telephone : un panneau qui monte du bas --- */
@media (max-width: 600px) {
  /* Sur telephone le panneau monte du bas : c est le conteneur qui l aligne. */
  .ab-rdv[open] { align-items: flex-end; }
  .ab-rdv-panneau {
    width: 100%;
    /* Le panneau prend la hauteur de son contenu, sans depasser l ecran :
       a 92dvh fixes, l etape du calendrier laissait les deux tiers du
       panneau vides. */
    height: auto;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    animation: ab-rdv-monte 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .ab-rdv-tete { padding: 1.25rem 1.25rem 1rem; }
  .ab-rdv-corps { padding: 1.25rem 1.25rem 2rem; }
  .ab-rdv-pied { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .ab-rdv-valider { flex: 1 1 auto; }
}
@keyframes ab-rdv-monte {
  from { transform: translateY(6%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-rdv-panneau { animation: none; }
}

/* --- Message general du tunnel --- */
.ab-rdv-message {
  margin: 0;
  padding: 0.875rem 1.5rem;
  background: color-mix(in srgb, #F0A05A 12%, transparent);
  border-top: 1px solid color-mix(in srgb, #F0A05A 40%, transparent);
  font-size: 0.875rem;
  line-height: 1.5;
  color: #F0A05A;
}

/* Squelette de chargement des creneaux : la place est reservee, rien ne saute
   quand la liste arrive. Un tourniquet ne dit pas combien de temps attendre et
   decale la mise en page a l arrivee. */
.ab-rdv-creneau.est-squelette {
  background: var(--wp--preset--color--surface-haute);
  border-color: transparent;
  opacity: 0.45;
  animation: ab-rdv-respire 1.4s ease-in-out infinite;
}
@keyframes ab-rdv-respire {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-rdv-creneau.est-squelette { animation: none; }
}

@media (max-width: 600px) {
  .ab-rdv-message { padding: 0.875rem 1.25rem; }
}

/* La note sous le bouton de la page Contact : une ligne de 104 signes, trop
   longue pour une mention discrete. */
.ab-section > .ab-note-rdv { max-width: 44ch !important; }