/*
@charset "UTF-8";
	Theme Name: Callon Avocat & Conseil
	Theme URI: https://nature-digitale.fr
	Description: Theme sur mesure - Cabinet Callon Avocat & Conseil. Base sur le starter Nature Digitale (framework ND MetaBox).
	Author: Nature Digitale - Agence Web Eco Responsable
	Author URI: https://nature-digitale.fr
	Version: 1.0.0
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: nature-digitale
*/

/* =========================================================
   Callon Avocat & Conseil
   Mood : editorial-warm x archive-research
   Display : Cormorant Garamond | Texte + marqueurs : Source Serif 4

   Ce fichier est le portage direct du socle de la maquette
   validee (maquettes/callon-v3-serif/style.css). Les sections
   de page sont ajoutees au fur et a mesure de l'integration.

   Regles de direction artistique (non negociables) :
   - jamais de blanc pur ni de noir pur
   - aucune carte : filets fins et aplats pleine largeur
   - sections numerotees en chiffres romains
   - deux serifs, aucun sans-serif
   ========================================================= */

/* =========================================================
   POLICES AUTO-HEBERGEES
   Variables, sous-ensemble latin, telechargees une fois et
   servies depuis le serveur. AUCUN appel a l'API Google Fonts
   (render-blocking + RGPD) - cf. PERFORMANCE.md section 1.

   Cormorant Garamond : VF wght 300-700 (37 / 39 Ko)
   Source Serif 4     : VF wght 400-600, opsz fige a 20 (49 / 50 Ko)
   ========================================================= */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-var-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-latin-var-italic.woff2") format("woff2");
}

:root {
  --bg:           #FBFAF6;
  --bg-alt:       #F1ECDF;
  --bg-deep:      #14110D;
  --ink:          #1F1A17;
  --ink-soft:     #4D433D;
  --ink-muted:    #7D7466;
  --or:           #C08030;
  --or-deep:      #9A6624;
  --turquoise:    #50A090;
  --turquoise-soft: #80C0C0;
  --rule:         #D4CDBA;
  --rule-strong:  #A89B82;

  --display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --body:    "Source Serif 4", Cambria, "Times New Roman", Georgia, serif;
  /* v3-serif : plus de monospace, les marqueurs sont composes en Source Serif 4 */
  --mono:    "Source Serif 4", Cambria, "Times New Roman", Georgia, serif;

  --gutter: 5vw;
  --max-w: 1320px;
  --section-y: clamp(72px, 12vw, 160px);

  /* ----- Vocabulaire de mouvement -----
     Deux durees pour tout le site, pas une par composant. Avant, chaque
     glissement avait la sienne (200, 240, 260 ms) et deux elements voisins
     ne bougeaient pas au meme rythme.

     --mouvement : tout ce qui se deplace ou pivote (fleches, chevrons,
                   panneau du menu, entrees de sous-menu).
     --ouverture : le depliage des panneaux <details>, plus lent parce que
                   la hauteur parcourue est bien plus grande.

     La courbe part vite et finit doucement : le mouvement se lit des le
     premier tiers, sans l'effet elastique d'un rebond. */
  --mouvement: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --ouverture: 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----- Panneaux depliants -----
   L'ouverture est animee en JavaScript (`assets/js/app.js`), pas en CSS.
   Un <details> ferme ne rend pas son contenu : aucune transition posee sur un
   enfant ne peut demarrer, il n'y a pas d'etat « avant ». La voie CSS moderne
   (`::details-content` + `interpolate-size`) a ete essayee puis abandonnee :
   sur le Chrome de test, le selecteur est bien reconnu
   (`CSS.supports('selector(::details-content)')` renvoie true) mais
   `[open]::details-content { block-size: auto }` reste sans effet, meme force
   en `!important` — le panneau ne s'ouvrait plus du tout. Ne pas la remettre
   sans verifier l'ouverture reelle, pas seulement le support declare.

   Sans JavaScript, les panneaux s'ouvrent d'un coup : le comportement natif
   du <details> reste intact. */

/* ----- Reset minimal ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding: 0; margin: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: transparent; border: 0; cursor: pointer; color: inherit; }

::selection { background: var(--turquoise-soft); color: var(--ink); }

/* ----- Skip link ----- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bg);
  padding: 12px 16px; font-size: 14px; z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ----- Layout helpers ----- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ====================================================
   HEADER
   ==================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.brand img {
  height: 44px; width: auto;
  object-fit: contain;
}
.primary-nav ul {
  display: flex;
  gap: 32px;
  justify-content: flex-end;
  align-items: center;
}
.primary-nav a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color 200ms ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--ink); }
.primary-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--or);
  transition: right 240ms ease;
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { right: 0; }

/* Page courante : filet dore permanent, pas de couleur d'accent en plus.
   aria-current="page" sur la page exacte, ="true" sur la rubrique parente. */
.primary-nav a[aria-current] { color: var(--ink); }
.primary-nav a[aria-current]::after { right: 0; }
.primary-nav .sub-nav a[aria-current] { color: var(--ink); font-weight: 600; }

/* ----- Sous-menu Domaines (desktop : panneau au survol / focus) -----
   `.has-sub` reste en position statique : le bloc conteneur du panneau
   devient alors `.site-header` (positionne en sticky), donc `top: 100%`
   le cale exactement sur le bas du header et non sous le libelle. */
.primary-nav .has-sub { position: static; }
/* row-reverse : le chevron est un ::before dans le flux, mais doit se lire
   APRES le libelle. Le ::after (filet dore) est en absolu, donc intouche. */
.primary-nav .has-sub > a {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 7px;
}
.primary-nav .has-sub > a::before {
  /* chevron discret, en data-URI : zero requete (cf. PERFORMANCE.md section 4) */
  content: "";
  display: inline-block;
  width: 9px; height: 6px;
  flex: none;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 200ms ease;
}
.primary-nav .has-sub:hover > a::before,
.primary-nav .has-sub:focus-within > a::before { transform: rotate(-180deg); }

.primary-nav .sub-nav {
  display: block;
  position: absolute;
  top: 100%;
  /* `left` reste auto : le panneau garde sa position statique horizontale,
     c'est-a-dire l'aplomb du libelle. Le retrait compense la marge interieure
     pour aligner la premiere lettre sur celle de « Domaines ». */
  margin-left: -32px;
  min-width: 320px;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 22px 32px 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease,
              visibility 0s linear 200ms;
}
/* Passerelle transparente entre le libelle et le panneau : sans elle, le
   curseur quitte `.has-sub` en traversant le padding du header et le menu
   se referme avant d'etre atteint. */
.primary-nav .sub-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 28px;
}
.primary-nav .has-sub:hover .sub-nav,
.primary-nav .has-sub:focus-within .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.primary-nav .sub-nav li + li { margin-top: 20px; }
.primary-nav .sub-nav a {
  display: block;
  padding: 0;
  font-family: var(--body);
  font-size: 15px;
  letter-spacing: 0;
  font-weight: 400;
  text-transform: none;
  line-height: 1.4;
  color: var(--ink-soft);
  /* Aucun trait au survol : ni le filet dore de la nav principale (::after),
     ni le soulignement anime des liens de contenu (background-image).
     Le seul retour visuel est le glissement vers la droite. */
  background-image: none !important;
}
/*
 * Les negations sont indispensables, pas decoratives. Le selecteur global
 * `a:not(.btn-outline):not(.link-arrow):not(.brand)` pese 0,3,1 et impose
 * `transition: background-size, color`. Un simple `.primary-nav .sub-nav a`
 * (0,2,1) se faisait ecraser : `transform` disparaissait de la liste des
 * proprietes animees et le glissement de 8px se faisait d'un coup, sans
 * transition. En reprenant ses negations on passe a 0,5,1.
 */
.primary-nav .sub-nav a:not(.btn-outline):not(.link-arrow):not(.brand) {
  transition: color 200ms ease, transform var(--mouvement);
}
.primary-nav .sub-nav a::after { content: none; }
.primary-nav .sub-nav a:hover,
.primary-nav .sub-nav a:focus-visible {
  color: var(--ink);
  transform: translateX(8px);
}
@media (prefers-reduced-motion: reduce) {
  /* Memes negations que la regle ci-dessus, pour la meme raison de poids. */
  .primary-nav .sub-nav a:not(.btn-outline):not(.link-arrow):not(.brand) {
    transition: color 200ms ease;
  }
  .primary-nav .sub-nav a:hover,
  .primary-nav .sub-nav a:focus-visible { transform: none; }
}

.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  padding: 0; position: relative;
}
.nav-toggle span {
  position: absolute; left: 6px; right: 6px; height: 1px;
  background: var(--ink);
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 24px; }

/* ====================================================
   TYPO COMMUN
   ==================================================== */
.eyebrow,
.section-tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 24px;
}
.section-tag::before {
  content: ""; display: inline-block;
  width: 32px; height: 1px;
  background: var(--rule-strong);
  vertical-align: middle;
  margin-right: 12px;
}

.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 32px;
}
.section-title em {
  font-style: italic;
  color: var(--or);
  font-weight: 500;
}

p { margin: 0 0 1.1em; }
em { font-style: italic; }
strong { font-weight: 600; }
sup { font-size: 0.65em; vertical-align: super; line-height: 0; }

a:not(.btn-outline):not(.link-arrow):not(.brand) {
  color: var(--turquoise);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  padding-bottom: 1px;
  transition: background-size 320ms ease, color 200ms ease;
}
a:not(.btn-outline):not(.link-arrow):not(.brand):hover,
a:not(.btn-outline):not(.link-arrow):not(.brand):focus-visible {
  background-size: 100% 1px;
  color: var(--turquoise);
}

/* CTA outline (pas de bouton plein, mood editorial) */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 32px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 240ms ease, color 240ms ease;
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--ink); color: var(--bg);
}
.btn-outline--solid {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.btn-outline--solid:hover,
.btn-outline--solid:focus-visible {
  background: var(--or-deep); border-color: var(--or-deep);
}

.link-arrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 12px;
  transition: color 200ms ease, gap 240ms ease;
}
.link-arrow::after {
  content: "\2192";
  font-family: var(--body);
  font-size: 16px;
  transition: transform 240ms ease;
}
.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--ink); gap: 16px;
}
.link-arrow:hover::after { transform: translateX(4px); }

/* Renvoi de fin de bloc vers la page dediee */
.more {
  margin-top: 32px;
  margin-bottom: 0;
}
.more--center { text-align: center; }

/* Captions sous figures */
figure { margin: 0; }
figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-muted);
}
figcaption .num {
  color: var(--or);
  margin-right: 8px;
}
/* ====================================================
   HERO
   ==================================================== */
.hero {
  padding: clamp(56px, 9vw, 120px) 0 var(--section-y);
}
.hero__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  /* L'image est alignee sur le HAUT de la rangee, bord superieur au niveau du
     surtitre. Elle etait collee au pied (`align-items: end`) : sa position
     verticale dependait donc de la hauteur de la colonne de texte, laquelle
     est incompressible — les specialites sont quatre lignes du repeteur, pas
     un titre qui se replie. Sur un portable 1366x768 a 125 % (~1090x510 px
     CSS), son bord haut tombait 340 px sous l'en-tete : le visiteur devait
     descendre pour la voir (retour client du 17/08).

     `start` et non `stretch` : l'image garde son carre, et c'est aussi ce qui
     laisse a `.hero__visual` la course necessaire pour etre `sticky` — un
     element etire occupe deja toute sa zone de grille et n'a nulle part ou
     glisser. */
  align-items: start;
}
.hero__title {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 32px;
  color: var(--ink);
  font-size: inherit;
}
.hero__lead-line {
  display: block;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.3;
  color: var(--ink-soft);
  letter-spacing: 0;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.hero__lead-line em {
  font-style: italic;
  color: var(--or);
}
.hero__specialites {
  display: block;
}
.hero__specialites span {
  display: block;
  font-style: italic;
  font-size: clamp(30px, 3.9vw, 52px);
  line-height: 1.18;
  color: var(--ink);
}
.hero__specialites span + span { margin-top: 2px; }
.hero__deck {
  max-width: 28em;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 40px;
}
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 28px;
}
.hero__visual {
  /* Meme vocabulaire que `.cabinet__visual` : l'image accompagne la colonne de
     texte pendant le defilement au lieu de sortir du champ des le premier
     geste. Sa course s'arrete au pied de sa zone de grille, donc au pied du
     hero — elle ne suit pas la page au-dela. Le decalage de 96 px degage le
     header, lui-meme `sticky` a top: 0. */
  position: sticky;
  top: 96px;
}
.hero__visual img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--rule);
}

/* ====================================================
   REPERES (chiffres cles)
   ==================================================== */
.reperes {
  padding: clamp(48px, 8vw, 96px) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.reperes__row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1.4fr 0.8fr;
  align-items: end;
  gap: 0;
  /* filet de tete au meme poids que les separations internes */
  border-top: 1px solid var(--rule);
  padding-top: 36px;
}
.repere {
  padding: 0 32px 0 0;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  gap: 14px;
}
.repere:last-child { border-right: 0; padding-right: 0; }
.repere:not(:first-child) { padding-left: 32px; }
.repere__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(48px, 5.6vw, 84px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.repere__num .plus {
  font-size: 0.55em;
  color: var(--or);
  vertical-align: super;
  margin-left: 2px;
  font-style: italic;
}
.repere__lib {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 20em;
}

/* ====================================================
   CABINET
   ==================================================== */
.cabinet { padding: var(--section-y) 0; }
.cabinet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.cabinet__text { padding-top: 24px; }
.lead {
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1em;
}
.dropcap {
  float: left;
  font-family: var(--display);
  font-weight: 500;
  font-size: 4.4em;
  line-height: 0.85;
  margin: 0.05em 0.12em 0 0;
  color: var(--or);
}
.values {
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}
.values li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.values li span {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  margin-right: 8px;
}
.cabinet__visual img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.cabinet__visual {
  position: sticky; top: 96px;
}

/* ====================================================
   ENGAGEMENTS
   ==================================================== */
.exergue {
  background: var(--bg-deep);
  color: var(--bg);
  padding: clamp(72px, 10vw, 132px) 0;
  position: relative;
}
.exergue .section-tag {
  color: rgba(251, 250, 246, 0.55);
}
.exergue .section-tag::before {
  background: rgba(251, 250, 246, 0.3);
}
.exergue__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.1;
  color: var(--bg);
  margin: 0 0 clamp(40px, 5vw, 64px);
  max-width: 14em;
}
.exergue__title em {
  font-style: italic;
  color: var(--or);
}
.engagements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(251, 250, 246, 0.22);
}
.engagements li {
  padding: 36px 40px 8px 0;
  border-right: 1px solid rgba(251, 250, 246, 0.14);
}
.engagements li:not(:first-child) { padding-left: 40px; }
.engagements li:last-child { border-right: 0; padding-right: 0; }
.engagement__num {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--or);
  margin-bottom: 20px;
}
.engagement__txt {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.4;
  color: rgba(251, 250, 246, 0.92);
  margin: 0;
}

/* ====================================================
   DOMAINES
   ==================================================== */
.domaines { padding: var(--section-y) 0; }
.domaines .section-title { margin-bottom: 80px; }
.domaines__list {
  display: flex; flex-direction: column;
  /* filet de tete au meme poids que les separations internes */
  border-top: 1px solid var(--rule);
}
.domaine {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
}
.domaine--featured {
  background: var(--bg-alt);
  margin: 24px calc(-1 * var(--gutter));
  /* haut legerement reduit : le line-box du h3 ajoute deja ~12px optiques */
  padding: 46px var(--gutter) 58px;
  border-bottom: 0;
}
/* le filet colle au bord du fond beige : on le reporte en haut de l'item
   suivant pour qu'il reste aligne sur la gouttiere comme les autres */
.domaine--featured + .domaine { border-top: 1px solid var(--rule); }
.domaine__num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  color: var(--or);
  padding-top: 6px;
}
.domaine__body h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 18px;
}
.domaine__body p {
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
}
/* le dernier paragraphe ne doit pas ajouter de marge : sinon le bloc
   en surbrillance (--featured) parait desequilibre haut/bas */
.domaine__body > *:last-child { margin-bottom: 0; }
.domaine__cases {
  margin-top: 14px;
  font-size: 0.94em;
  color: var(--ink-muted);
}
.domaine__cases .lbl {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--turquoise);
  margin-right: 8px;
  display: inline-block;
}
/* Le titre du domaine ouvre sa page dediee : pas de soulignement anime
   herite des liens de contenu, le filet du bloc suffit. */
.domaine__body h3 a {
  background-image: none !important;
  transition: color 200ms ease;
}
/* Negations reprises du selecteur global des liens de contenu (0,3,1),
   sinon le titre du domaine passerait en turquoise. */
.domaine__body h3 a:not(.btn-outline):not(.link-arrow):not(.brand) { color: var(--ink); }
.domaine__body h3 a:not(.btn-outline):not(.link-arrow):not(.brand):hover,
.domaine__body h3 a:not(.btn-outline):not(.link-arrow):not(.brand):focus-visible { color: var(--or-deep); }
.domaine__more {
  margin-top: 22px;
  margin-bottom: 0;
}

/* ====================================================
   EQUIPE - layout vertical (photo en haut, texte dessous)
   ==================================================== */
.equipe {
  padding: var(--section-y) 0;
  background: var(--bg-alt);
}
.equipe .section-title { margin-bottom: 64px; }
.equipe__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  margin-bottom: 56px;
}
.membre {
  display: flex;
  flex-direction: column;
}
.portrait {
  width: 100%;
  margin: 0 0 36px;
  border: 1px solid var(--rule-strong);
  background: #E5DFCD;
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.membre__body { padding-right: clamp(0px, 2vw, 24px); }
.membre__body h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.membre__role {
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  color: var(--turquoise);
  line-height: 1.4;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.membre__body p:not(.membre__role) {
  color: var(--ink-soft);
  font-size: 0.96em;
}
.equipe__note {
  text-align: center;
  font-style: italic;
  font-family: var(--display);
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  max-width: 720px;
  margin: 0 auto;
}

/* ====================================================
   HONORAIRES
   ==================================================== */
.honoraires { padding: var(--section-y) 0; }
.honoraires__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.honoraires__list {
  margin: 0;
  /* meme filet leger que les separations internes : le --rule-strong faisait
     un trait de tete plus marque que les trois autres */
  border-top: 1px solid var(--rule);
}
.honoraires__list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.honoraires__list dt {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink-muted);
}
.honoraires__list dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 40px);
  color: var(--ink);
  text-align: right;
}
.honoraires__list .unit {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink-muted);
  display: inline-block;
  margin-left: 6px;
  vertical-align: baseline;
}
.honoraires__principle dd {
  font-family: var(--display);
  font-size: clamp(17px, 1.3vw, 20px);
  font-style: italic;
  color: var(--turquoise);
  text-align: right;
  font-weight: 500;
  line-height: 1.45;
  max-width: 22em;
  margin-left: auto;
}

/* ====================================================
   PANNEAUX DEPLIANTS
   Un seul dessin pour les deux accordeons du site : la foire aux
   questions (accueil ET pages domaine) et « Affaires recentes »
   (pages domaine). Ces regles vivent ici et non dans pages.css
   parce que la FAQ existe aussi sur l'accueil, qui ne charge que
   cette feuille (cf. PERFORMANCE.md section 5) - `.affaires` n'y
   coute qu'un selecteur de plus, pas une regle dupliquee.

   <details name="..."> : ouverture exclusive. L'ouverture est
   animee par assets/js/app.js ; sans JavaScript le panneau garde
   son comportement natif, il s'ouvre d'un coup.
   ==================================================== */
.affaires,
.faq__liste {
  /* filet de tete au meme poids que les separations internes */
  border-top: 1px solid var(--rule);
}
.affaires details,
.faq__liste details {
  border-bottom: 1px solid var(--rule);
}
.affaires summary,
.faq__liste summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  transition: color 200ms ease;
}
.affaires summary::-webkit-details-marker,
.faq__liste summary::-webkit-details-marker { display: none; }
.affaires summary::after,
.faq__liste summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 7px;
  align-self: center;
  background: var(--or);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--mouvement);
}
.affaires details[open] summary::after,
.faq__liste details[open] summary::after { transform: rotate(-180deg); }
.affaires summary:hover,
.affaires summary:focus-visible,
.faq__liste summary:hover,
.faq__liste summary:focus-visible { color: var(--or-deep); }
/* Le volet ouvert est pose sur l'aplat beige : sans cela le texte flottait
   sous l'intitule, sans rien qui signale la zone depliee. Aplat franc, ni
   angle arrondi ni ombre - ce n'est pas une carte. */
.affaires__corps,
.faq__corps {
  margin: 0 0 22px;
  padding: 20px 24px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
}
.faq__corps > *:last-child { margin-bottom: 0; }

/* ====================================================
   QUESTIONS FREQUENTES
   Accueil (section VII) et pages domaine, meme rubrique. Fond creme
   et filet de tete : la rubrique suit ailleurs un aplat beige ou
   sombre, qui se separe deja tout seul - le filet est neutralise
   dans ce cas par pages.css.

   Composition CENTREE, titre au-dessus des questions : c'est le
   traitement des en-tetes de pages interieures (.page-head--centre),
   et une FAQ n'a pas de colonne de texte a mettre en regard - le
   titre annonce la liste, il ne lui repond pas.
   ==================================================== */
.faq {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--rule);
}
.faq__head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
/* Surtitre centre : le filet du .section-tag est repris en miroir a
   droite, sinon le seul tiret de gauche desaxe la ligne. */
.faq .section-tag { text-align: center; }
.faq .section-tag::after {
  content: ""; display: inline-block;
  width: 32px; height: 1px;
  background: var(--rule-strong);
  vertical-align: middle;
  margin-left: 12px;
}
.faq .section-title {
  margin: 0 auto 24px;
  max-width: 14em;
}
.faq__intro {
  color: var(--ink-soft);
  max-width: 34em;
  margin-inline: auto;
}
.faq__intro > *:last-child { margin-bottom: 0; }
/* La liste ne prend pas toute la largeur du conteneur : a 1320px, une
   question courte laissait un vide de 700px avant son chevron. */
.faq__liste {
  max-width: 48em;
  margin-inline: auto;
}

/* ====================================================
   CONTACT
   ==================================================== */
.contact {
  padding: var(--section-y) 0;
  background: var(--bg-alt);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contact__bandeau {
  margin: 0 0 clamp(40px, 5vw, 72px);
  border: 1px solid var(--rule);
}
.contact__bandeau img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

.contact__coords {
  font-style: normal;
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}
.contact__coords p {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(17px, 1.3vw, 20px);
}
.contact__lbl {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-muted);
}

/* Le lien est un element de grille : par defaut il s'etire sur toute la
   colonne, et le soulignement anime des liens de contenu court alors jusqu'au
   bord de la cellule au lieu de s'arreter au numero. On le ramene a la largeur
   de son texte. Vaut pour les coordonnees du bandeau d'appel comme pour celles
   de la page contact. */
.contact__coords a,
.appel__coords a { justify-self: start; }

.contact__form {
  background: var(--bg);
  /* Resserre : les champs sont soulignes d'un simple filet, sans cadre
     propre, donc ils respirent deja beaucoup. A 48px le panneau ajoutait une
     marge que rien ne venait occuper. Le terme central ne joue qu'entre 625
     et 750px de large : au-dela on est au plafond de 30px. */
  padding: clamp(25px, 4vw, 30px);
  border: 1px solid var(--rule);
}
.field { display: flex; flex-direction: column; margin-bottom: 24px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.field label {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.field .opt {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  margin-left: 4px;
}
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 10px 0;
  transition: border-color 200ms ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.field select { padding-right: 24px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath fill='none' stroke='%237D7466' stroke-width='1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 12px 7px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--or);
}
.field__note {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 28px;
  font-style: italic;
  line-height: 1.5;
}

/* ====================================================
   BANDEAU D'APPEL (fin de page, accueil comprise)
   ==================================================== */
.appel {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  padding: clamp(56px, 8vw, 104px) 0;
}
.appel__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.appel .section-title { margin-bottom: 20px; }
.appel__txt { color: var(--ink-soft); max-width: 30em; }
.appel__coords {
  font-style: normal;
  /* filet de tete au meme poids que les separations internes */
  border-top: 1px solid var(--rule);
}
.appel__coords p {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
  font-family: var(--display);
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--ink);
}
.appel__actions { margin-top: 32px; }

/* ====================================================
   FOOTER
   ==================================================== */
.site-footer {
  background: var(--bg-deep);
  color: rgba(251, 250, 246, 0.7);
  padding: 48px 0;
  border-top: 1px solid rgba(251, 250, 246, 0.1);
}
.site-footer__inner {
  text-align: center;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.8;
}
.site-footer__inner p { margin: 0 0 6px; }
.site-footer__legal { font-size: 11px; opacity: 0.7; }
.site-footer__legal a {
  color: rgba(251, 250, 246, 0.7);
  border-bottom: 1px dotted rgba(251, 250, 246, 0.3);
  padding-bottom: 1px;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--or);
  border-bottom-color: var(--or);
}

/* ====================================================
   ANIMATIONS REVEAL
   ==================================================== */
main > section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
main > section.is-visible,
main > section:first-child {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  main > section { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ====================================================
   SPECIFIQUES WORDPRESS
   Classes produites par WP qui n'existaient pas dans la
   maquette statique (barre d'admin, menu du pied de page,
   accessibilite du coeur).
   ==================================================== */

/* La barre d'admin est en position: fixed sur mobile : elle recouvrirait
   le header sticky. On decale le header d'autant. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Liens legaux du pied de page : rendus par le menu WordPress
   (Apparence > Menus > emplacement « Menu Footer »), separes par un
   point median en CSS plutot qu'en dur dans le markup. */
/* Seul le separateur est stylé : les liens gardent exactement le rendu de la
   maquette validee (la regle globale `a:not(...)` l'emporte sur
   `.site-footer__legal a` — comportement d'origine, on n'y touche pas). */
.site-footer__menu {
  display: inline;
  color: rgba(251, 250, 246, 0.4);
}

/* Repli si aucun logo n'est encore televerse dans Options Site. */
.brand__txt {
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}

/* Eco-badge Nature Digitale : composant d'agence, hors systeme graphique
   du cabinet. Rendu uniquement s'il est configure dans Options Dev. */
.footer-pill {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.footer-pill .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 50px;
  padding: 4px 12px 4px 4px;
  background-image: none !important;
  transition: opacity 200ms ease;
}
.footer-pill .pill:hover { opacity: 0.85; }
.footer-pill .pill .note {
  border-radius: 50px;
  padding: 4px 10px;
  font-weight: 600;
  font-size: 13px;
}
.footer-pill .pill .carbon p {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}

/* Texte reserve aux lecteurs d'ecran (wp_body_open, sauts de navigation). */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static;
  width: auto; height: auto;
  margin: 0; padding: 12px 16px;
  clip: auto; clip-path: none;
  background: var(--ink); color: var(--bg);
}

/* ====================================================
   RESPONSIVE - BASCULE DU MENU (la nav desktop ne tient plus sous 900px)
   ==================================================== */
@media (max-width: 900px) {
  /* Header */
  .site-header__inner {
    grid-template-columns: 1fr auto;
    padding: 14px var(--gutter);
  }
  .nav-toggle { display: block; justify-self: end; }

  /* Le backdrop-filter du header en fait le bloc conteneur des descendants
     position:fixed : le panneau serait clippe dans la hauteur du header.
     On le neutralise pendant l'ouverture (le flou n'a plus d'utilite,
     le menu est opaque et couvre la page). */
  body.nav-open .site-header {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .primary-nav {
    position: fixed;
    inset: var(--header-h, 72px) 0 0 0;
    background: var(--bg);
    padding: 20px var(--gutter) 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 280ms ease, opacity 280ms ease,
                visibility 0s linear 280ms;
  }
  .primary-nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 280ms ease, opacity 280ms ease;
  }
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .primary-nav li {
    /* apparition en cascade a l'ouverture */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 340ms ease, transform 340ms ease;
  }
  .primary-nav.is-open li { opacity: 1; transform: none; }
  .primary-nav.is-open li:nth-child(1) { transition-delay: 80ms; }
  .primary-nav.is-open li:nth-child(2) { transition-delay: 130ms; }
  .primary-nav.is-open li:nth-child(3) { transition-delay: 180ms; }
  .primary-nav.is-open li:nth-child(4) { transition-delay: 230ms; }
  .primary-nav.is-open li:nth-child(5) { transition-delay: 280ms; }

  .primary-nav a {
    display: block;
    font-size: 15px;
    letter-spacing: 0.14em;
    padding: 18px 0; /* cible tactile ~52px */
  }
  .primary-nav a::after { content: none; }

  /* Pas de survol sur tactile : le sous-menu est deroule en permanence,
     en retrait, plutot qu'accroche a un hover impossible a declencher. */
  /* Panneau deroule dans le flux : ni passerelle de survol, ni retrait
     d'alignement a compenser. */
  .primary-nav .sub-nav::before { content: none; }
  .primary-nav .sub-nav {
    position: static;
    min-width: 0;
    border: 0;
    border-left: 1px solid var(--rule);
    background: transparent;
    padding: 0 0 8px 20px;
    margin: 0 0 8px;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .primary-nav .sub-nav li + li { margin-top: 0; }
  .primary-nav .sub-nav a {
    padding: 11px 0;
    font-size: 15px;
  }
  .primary-nav .has-sub > a::before { transform: none; }

  /* Burger -> croix */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  body.nav-open { overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .primary-nav,
    .primary-nav li { transition: none; }
    .primary-nav li { opacity: 1; transform: none; }
  }
}

/* ====================================================
   RESPONSIVE - TABLET
   ==================================================== */
@media (max-width: 1100px) {
  :root { --gutter: 6vw; }
  .reperes__row {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .repere {
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 24px;
  }
  .repere:nth-child(2n) { border-right: 0; }
  .repere:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
  .repere:not(:first-child) { padding-left: 0; }

  .engagements { grid-template-columns: 1fr; }
  .engagements li {
    padding: 28px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(251, 250, 246, 0.14);
  }
  .engagements li:not(:first-child) { padding-left: 0; }
  .engagements li:last-child { border-bottom: 0; }
  .engagement__num { margin-bottom: 12px; }
}


/* ====================================================
   RESPONSIVE - MOBILE
   ==================================================== */
@media (max-width: 768px) {
  :root { --gutter: 24px; --section-y: clamp(56px, 12vw, 96px); }


  /* Hero */
  .hero { padding-top: 32px; }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Une seule colonne : l'image ne longe plus le texte, elle le precede.
     Le `sticky` n'aurait aucune course (sa zone de grille fait sa hauteur) et
     la collerait sous le header en la detachant du titre qu'elle annonce. */
  .hero__visual { order: -1; position: static; }
  .hero__visual img { max-height: 60vh; }
  .hero__lead-line { font-size: clamp(19px, 5vw, 24px); padding-bottom: 16px; margin-bottom: 18px; }
  .hero__specialites span { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.25; }

  /* Reperes */
  .reperes__row {
    grid-template-columns: 1fr;
  }
  .repere {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 20px;
  }
  .repere:last-child { border-bottom: 0; padding-bottom: 0; }

  /* Cabinet */
  .cabinet__grid {
    grid-template-columns: 1fr;
  }
  .cabinet__visual { position: static; }

  /* Engagements */
  .exergue__title { max-width: none; }
  .engagement__txt { font-size: clamp(19px, 4.6vw, 24px); }

  /* Domaines - le chiffre romain passe au-dessus du titre */
  .domaine {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 40px 0;
  }
  .domaine__num {
    padding-top: 0;
    line-height: 1;
  }
  .domaine--featured {
    margin: 16px calc(-1 * var(--gutter));
    padding: 34px var(--gutter) 44px;
  }

  /* Equipe */
  .equipe__grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .portrait {
    margin-left: 0;
    margin-right: 0;
  }

  /* Honoraires + contact */
  .honoraires__grid,
  .contact__grid,
  .appel__grid {
    grid-template-columns: 1fr;
  }
  .field-row { grid-template-columns: 1fr; }
  .contact__coords p,
  .appel__coords p {
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: 17px;
  }
}

/* ====================================================
   PRINT (placeholder pour future page imprimable)
   ==================================================== */
@media print {
  .site-header, .site-footer, .nav-toggle, .contact__form { display: none; }
  body { background: #fff; color: #000; }
  main > section { opacity: 1; transform: none; }
}