/* =========================================================================
   FILIA · Réseau d'avocats — maquette front
   Charte : crème #F3E8D6 · bleu nuit #1A3348 · ciel #8FB9CC · brique #A6432F
   Typographie, trois registres et pas un de plus :
     · Cormorant Garamond — les phrases de DISCOURS, celles qui s'adressent au
       lecteur. Trois par page au maximum. C'est le seul endroit où un mot peut
       passer en italique de couleur, et une seule fois sur tout le site.
     · Outfit — les RUBRIQUES : titres de section, noms de pôle, étiquettes.
       Interlettrage négatif marqué (-0,03 em), poids 400.
     · Jost — la LECTURE.
   Le piège évité : une seule fonte de titrage sur toute la page fait ouvrir
   toutes les sections du même geste, et c'est ce qui se lit comme un gabarit.
   ========================================================================= */

:root {
  --papier:        #F3E8D6;
  --papier-clair:  #FAF4E8;
  --encre:         #1A3348;
  --encre-2:       #22405A;
  --ciel:          #8FB9CC;
  --brique:        #A6432F;
  --brique-sombre: #8E3826;
  --terre:         #BE8862;

  --out:  cubic-bezier(0.23, 1, 0.32, 1);
  --fort: cubic-bezier(0.77, 0, 0.175, 1);

  --arche: 40% 40% 14px 14px / 16% 16% 14px 14px;
  --marge: clamp(1.25rem, 5vw, 5.5rem);
  --barre-h: 74px;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

::selection { background: var(--brique); color: var(--papier-clair); }

/* ---------- grain d'imprimé ---------- */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- le F calligraphique, servi en masque ---------- */
.f-masque {
  display: block;
  -webkit-mask-image: url("assets/f-calligraphique.png");
  mask-image: url("assets/f-calligraphique.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
  background: currentColor;
}
.f-masque--petit { width: 30px; height: 24px; }

/* =========================  TYPOGRAPHIE D'AFFICHE  ======================= */

.affiche {
  font-family: "Cormorant Garamond", Georgia, serif;
  text-wrap: balance;
  font-weight: 300;
  font-size: clamp(2.4rem, 4.7vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.022em;
  margin: 0;
}
/* Le mot en italique de couleur ne sert QU'À L'ACCUEIL. Répété de section en
   section, un geste de titrage cesse d'être un geste et devient un tic. */
.affiche em { font-style: italic; color: var(--brique); }
.affiche--moyenne { font-size: clamp(2.05rem, 3.6vw, 3.3rem); line-height: 1.04; }
.affiche--sombre { color: var(--papier); }

/* ---------- les rubriques : grotesque, jamais le serif ----------
   Relevé sur lwl-avocats.com : le serif n'y sert qu'aux phrases qui parlent au
   lecteur ; dès qu'un titre NOMME une rubrique, il passe en grotesque à
   interlettrage négatif. C'est ce qui empêche la page de ronronner. */
.rubrique {
  font-family: "Outfit", "Jost", system-ui, sans-serif;
  text-wrap: balance;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.1vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}
.etiquette {
  font-family: "Outfit", sans-serif; font-weight: 400;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(26,51,72,.5); margin: 0;
}

/* =========================  BOUTONS ET LIENS  ============================ */

/* Le bouton pilule à pastille ronde et chevron est la signature de la page
   d'atterrissage de gabarit. Les deux références du métier (lwl-avocats.com,
   robin-avocat.com) posent toutes deux un rectangle plein, libellé en
   capitales interlettrées. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 2.1rem;
  border: 0; border-radius: 2px;
  background: var(--encre); color: var(--papier-clair);
  font-family: "Outfit", sans-serif; font-size: .74rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--out), background-color 220ms ease;
}
.bouton--brique { background: var(--brique); }
.bouton--clair {
  background: transparent; color: var(--papier-clair);
  box-shadow: inset 0 0 0 1px rgba(250,244,232,.45);
}
.bouton:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { background: var(--encre-2); }
  .bouton--brique:hover { background: var(--brique-sombre); }
  .bouton--clair:hover { background: rgba(250,244,232,.1); }
}

.lien {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 320ms var(--out);
}
@media (hover: hover) and (pointer: fine) { .lien:hover { background-size: 100% 1px; } }

/* =========================  BARRE DE NAVIGATION  ========================= */

.barre {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--barre-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--marge);
  color: var(--encre);
  background: rgba(243, 232, 214, 0);
  border-bottom: 1px solid rgba(26, 51, 72, 0);
  transition: background-color 320ms ease, border-color 320ms ease, color 320ms ease;
}
/* sur la photographie d'accueil, la barre s'écrit en crème */
.a-hero-sombre .barre:not(.est-pose) { color: var(--papier-clair); }
.a-hero-sombre .barre:not(.est-pose) .barre__nav a { color: rgba(250,244,232,.82); }
.a-hero-sombre .barre:not(.est-pose) .barre__burger span { background: var(--papier-clair); }
.barre.est-pose {
  background: rgba(243, 232, 214, .94);
  border-bottom-color: rgba(26, 51, 72, .12);
}
.barre__marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.barre__mot { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; letter-spacing: .02em; }
.barre__nav { margin-left: auto; display: flex; gap: 1.9rem; }
.barre__nav a {
  font-size: .9rem; text-decoration: none; color: rgba(26,51,72,.72);
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .barre__nav a:hover { color: var(--brique); } }
.barre__tel { font-size: .9rem; text-decoration: none; }
.barre__burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
}
.barre__burger span {
  display: block; height: 1px; background: var(--encre);
  transition: width 240ms var(--out);
}
.barre__burger span:nth-child(1) { width: 26px; }
.barre__burger span:nth-child(2) { width: 18px; }

/* menu plein écran — rendu au niveau du body, jamais dans la barre */
.menu {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: var(--marge);
  background: var(--encre); color: var(--papier);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--out), visibility 0s 240ms;
}
.menu.est-ouvert { opacity: 1; visibility: visible; transition: opacity 320ms var(--out); }
.menu a { font-family: "Cormorant Garamond", serif; font-size: 2.3rem; line-height: 1.5; text-decoration: none; }
.menu__fermer {
  position: absolute; top: 14px; right: var(--marge);
  width: 44px; height: 44px; background: none; border: 0; color: var(--papier);
  font-size: 1.6rem; cursor: pointer;
}

/* =========================  ACCUEIL PLEIN CADRE  ========================= */

.accueil {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--barre-h) + 2rem) var(--marge) clamp(2rem, 5vh, 3.5rem);
  color: var(--papier-clair);
  background: var(--encre);
}
.accueil__fond { position: absolute; inset: 0; z-index: -2; display: block; }
/* Le fond est une macro abstraite, pas un portrait : la matière porte seule.
   Un grain léger lui garde une peau photographique et empêche les grands
   aplats de bleu nuit de se bander sur un écran large. */
.accueil__fond::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.accueil__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* voile dirigé : la lame porte la colonne de texte en bas, et se dissipe
   avant le milieu pour laisser la matière occuper les deux tiers hauts. */
.accueil__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* la lame qui porte le texte : opaque en bas, éteinte à mi-hauteur */
    linear-gradient(to top, rgba(10,24,38,.94) 0%, rgba(10,24,38,.88) 18%,
                            rgba(10,24,38,.52) 34%, rgba(10,24,38,.14) 50%, rgba(10,24,38,0) 64%),
    /* un souffle à gauche pour asseoir la colonne de titre */
    linear-gradient(to right, rgba(10,24,38,.42) 0%, rgba(10,24,38,.12) 38%, rgba(10,24,38,0) 62%),
    /* sous la barre : la matière y est claire par endroits, le menu a besoin
       d'un fond tenu pour rester lisible d'un bout à l'autre */
    linear-gradient(to bottom, rgba(10,24,38,.62) 0%, rgba(10,24,38,.3) 9%, rgba(10,24,38,0) 20%);
}
.accueil__texte { max-width: 54rem; margin-top: auto; }
.accueil .affiche { color: var(--papier-clair); }
.accueil .affiche em { color: #E8A892; }
.accueil__chapo {
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  max-width: 34rem; font-size: 1.05rem; color: rgba(250,244,232,.8);
}
.accueil__actions {
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
}
.accueil__autre { margin: 0; font-size: .95rem; color: rgba(250,244,232,.7); }
.accueil__autre a { text-decoration: underline; text-underline-offset: 3px; }
.accueil__legende {
  margin: clamp(2.5rem, 6vh, 4.5rem) 0 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(250,244,232,.22);
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-size: .8rem; letter-spacing: .03em; color: rgba(250,244,232,.72);
}
.accueil__legende span { color: rgba(250,244,232,.52); }

/* =========================  BARRE DE REPÈRES  ===========================
   Elle remplace une section centrée de 620 px qui ne portait aucune
   information absente du reste de la page. Deux blocs de largeurs inégales
   séparés d'un filet : trois tuiles de même largeur, c'est la rangée de
   cartes que rend n'importe quel gabarit.
   ========================================================================= */

.reperes {
  background: var(--papier-clair);
  padding: clamp(2.5rem, 5vh, 4rem) var(--marge);
  display: grid; grid-template-columns: 7fr 4fr;
  column-gap: clamp(2rem, 5vw, 5rem);
}
.repere--chiffre {
  padding-left: clamp(2rem, 4vw, 4rem);
  border-left: 1px solid rgba(26,51,72,.18);
}
.repere__cle {
  margin: 0 0 .7rem;
  font-family: "Outfit", sans-serif; font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.2;
}
.repere__nombre {
  margin: 0 0 .7rem;
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: .95; letter-spacing: -0.03em;
  color: var(--brique);
}
.repere__dit {
  margin: 0; max-width: 46ch; text-wrap: pretty;
  font-size: .93rem; line-height: 1.75; color: rgba(26,51,72,.7);
}
.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem;
  font-family: "Outfit", sans-serif; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--brique); border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.lien-fleche svg { width: 13px; height: 13px; transition: transform 240ms var(--out); }
@media (hover: hover) and (pointer: fine) { .lien-fleche:hover svg { transform: translateX(3px); } }

/* =========================  LE RÉSEAU  ===================================
   Trois rangées en zigzag, portraits de formats francs et inégaux.
   Jamais trois colonnes jumelles : c'est la page « notre équipe » que rend
   n'importe quel gabarit de site d'avocat, relevée sur vingt épingles.
   ========================================================================= */

.reseau {
  background: var(--papier-clair);
  padding: clamp(3rem, 7vh, 5rem) var(--marge) clamp(3rem, 8vh, 6rem);
}

.rang {
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3.5rem); row-gap: 2rem;
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(26,51,72,.14);
}
.rang:last-of-type { border-bottom: 1px solid rgba(26,51,72,.14); }
.rang[data-filet="encre"]  { --filet: var(--encre); }
.rang[data-filet="ciel"]   { --filet: var(--ciel); }
.rang[data-filet="brique"] { --filet: var(--brique); }

/* trois cadrages différents, réglés à la main */
.rang .portrait       { grid-column: 1 / span 4; margin: 0; }
.rang .portrait img   { width: 100%; height: clamp(300px, 34vw, 480px); object-fit: cover; object-position: 50% 14%; }
.rang__texte          { grid-column: 6 / span 6; }

.rang--inverse .portrait     { grid-column: 9 / span 4; order: 2; }
.rang--inverse .portrait img { height: clamp(320px, 38vw, 540px); object-position: 50% 10%; }
.rang--inverse .rang__texte  { grid-column: 2 / span 6; order: 1; }

.rang:last-of-type .portrait     { grid-column: 2 / span 3; }
.rang:last-of-type .portrait img { height: clamp(280px, 30vw, 420px); }
.rang:last-of-type .rang__texte  { grid-column: 6 / span 6; }

.portrait picture { display: block; border-radius: var(--arche); overflow: hidden; }

.rang__nom {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height: 1.02; letter-spacing: -0.022em;
}
/* le filet de couleur de l'associée court sous son nom, pleine colonne */
.rang__ou {
  margin: 1.1rem 0 0; padding-top: .9rem;
  border-top: 2px solid var(--filet);
  font-size: .82rem; letter-spacing: .05em; color: rgba(26,51,72,.6);
}
.rang__dit {
  margin: .5rem 0 1.3rem;
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 1.22rem; color: var(--brique);
}
.rang__corps { font-size: .98rem; color: rgba(26,51,72,.78); max-width: 46ch; }

.rang__plus { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--out); }
.rang__plus > div { min-height: 0; overflow: hidden; }
.rang__plus > div > p { padding-top: .2rem; font-size: .92rem; color: rgba(26,51,72,.7); max-width: 56ch; }
.rang__plus.est-ouvert { grid-template-rows: 1fr; }

.rang__pied {
  margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem 1.6rem; font-size: .85rem; color: rgba(26,51,72,.66);
}
/* LinkedIn : une icône seule, donc une cible tactile portée à 44 px par le
   remplissage plutôt que par la taille du dessin, qui resterait énorme. */
.lien-li {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin: -10px 0 -10px -11px;
  color: rgba(26,51,72,.55);
  transition: color 220ms ease;
}
.lien-li svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) { .lien-li:hover { color: var(--brique); } }

.deplier {
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  font-family: "Jost", sans-serif; font-size: .85rem; color: var(--encre);
  border-bottom: 1px solid rgba(26,51,72,.3);
  transition: color 200ms ease, border-color 200ms ease;
}
.deplier::after { content: " +"; }
.deplier[aria-expanded="true"]::after { content: " –"; }
@media (hover: hover) and (pointer: fine) {
  .deplier:hover { color: var(--brique); border-color: var(--brique); }
}

/* =========================  EXPERTISES, EN ACCORDÉON  ===================
   La grille de douze cellules faisait 1 094 px de haut : on ne voyait jamais
   la section entière, on en lisait des morceaux au défilement. Même geste
   que fbl-avocats.com et que les maquettes relevées sur Pinterest : les
   trois pôles tiennent dans un écran, le premier est ouvert, et on déplie
   celui qui nous concerne.

   La hauteur est posée en pixels par le script, pas en `auto` : `height`
   ne s'anime pas depuis `auto`, et `max-height` avec une valeur arbitraire
   fait un repli qui traîne quand le contenu est plus court que la borne.
   ========================================================================= */

.expertises { padding: clamp(3.5rem, 8vh, 6rem) var(--marge) clamp(3rem, 7vh, 5rem); }
.expertises__ouverture {
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3.5rem); align-items: end;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem);
}
.expertises__ouverture .affiche { grid-column: 2 / span 7; font-size: clamp(2.1rem, 3.6vw, 3.7rem); }
.expertises__sous {
  grid-column: 10 / span 3; margin: 0; text-wrap: pretty;
  font-size: .93rem; color: rgba(26,51,72,.68);
}

.accordeon { border-top: 1px solid rgba(26,51,72,.22); }
.pole { border-bottom: 1px solid rgba(26,51,72,.22); }
.pole__titre { margin: 0; font-size: inherit; font-weight: inherit; }

.pole__tete {
  width: 100%; border: 0; background: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr) 2rem;
  align-items: center; column-gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.3rem, 2.2vw, 1.9rem) 0;
  text-align: left; color: inherit; font-family: inherit;
}
.pole__nom {
  font-family: "Outfit", sans-serif; font-weight: 400;
  font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.12; letter-spacing: -0.03em;
  transition: color 240ms ease;
}
.pole__resume { font-size: .9rem; color: rgba(26,51,72,.6); line-height: 1.6; }
.pole__chevron {
  width: 20px; height: 20px; justify-self: end; color: var(--brique);
  transition: transform 300ms var(--out);
}
.pole__tete[aria-expanded="true"] .pole__chevron { transform: rotate(180deg); }
.pole__tete[aria-expanded="true"] .pole__nom { color: var(--brique); }
/* Au survol, le nom avance de deux pixels : le geste dit « cette rangée
   répond » sans rien déplacer autour d'elle. */
.pole__tete .pole__nom { display: inline-block; transition: color 240ms ease, transform 240ms var(--out); }
@media (hover: hover) and (pointer: fine) {
  .pole__tete:hover .pole__nom { color: var(--brique); transform: translateX(2px); }
}

.pole__corps { height: 0; overflow: hidden; transition: height 380ms var(--out); }
/* Le contenu du volet ne se contente pas d'être découvert : il monte, avec
   un retard juste suffisant pour que la hauteur ait commencé à s'ouvrir. */
.pole__dedans {
  opacity: 0; transform: translateY(10px);
  transition: opacity 320ms var(--out) 90ms, transform 380ms var(--out) 90ms;
}
.pole__corps[data-ouvert] .pole__dedans { opacity: 1; transform: none; }
/* Une seule colonne, pleine largeur. À deux colonnes, trois ou cinq
   situations laissent un trou en fin de grille, et c'est ce trou qu'on voit
   avant de lire quoi que ce soit. */
.pole__dedans { padding: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.situation {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr) 2rem;
  column-gap: clamp(1.5rem, 3vw, 3rem); align-items: baseline;
  padding: .9rem 0; border-top: 1px solid rgba(26,51,72,.12);
  color: inherit; text-decoration: none;
}
.situation__nom {
  font-family: "Outfit", sans-serif; font-size: 1rem; letter-spacing: -0.02em;
  line-height: 1.3; transition: color 240ms ease;
}
.situation__dit { font-size: .84rem; line-height: 1.6; color: rgba(26,51,72,.6); }
.situation__nom { display: inline-block; transition: color 240ms ease, transform 240ms var(--out); }
@media (hover: hover) and (pointer: fine) {
  .situation:hover .situation__nom { color: var(--brique); transform: translateX(3px); }
}

.pole__page {
  margin-top: 1.5rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Outfit", sans-serif; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--brique); border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.pole__page svg { width: 13px; height: 13px; transition: transform 240ms var(--out); }
@media (hover: hover) and (pointer: fine) { .pole__page:hover svg { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .pole__corps, .pole__chevron, .pole__dedans { transition: none; }
  .pole__dedans { opacity: 1; transform: none; }
}

/* =========================  LE MOMENT SOMBRE  ============================
   Les quatre engagements étaient quatre colonnes de même largeur séparées de
   filets : la rangée de tuiles identiques. Ce sont maintenant quatre
   paragraphes coulés sur deux colonnes, chacun ouvert par son intitulé en
   attaque de ligne. C'est la mise en page d'un article : ça se lit d'un
   trait au lieu de se compter.
   ========================================================================= */

.methode {
  position: relative; overflow: hidden;
  background: var(--encre); color: var(--papier);
  padding: clamp(3.5rem, 7vh, 5.5rem) var(--marge) clamp(3rem, 6vh, 4.5rem);
}
.methode__filigrane {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 34%; height: 110%; color: var(--papier); opacity: .05; pointer-events: none;
}
/* Deux titres d'ouverture de la même taille à trois cents pixels d'écart, et
   la page se lit comme une grille. Les Expertises plafonnent à 4,1 rem : la
   méthode s'arrête volontairement plus bas. */
.methode__phrase {
  position: relative; z-index: 2;
  max-width: 21ch;
  font-size: clamp(1.95rem, 3.4vw, 3.4rem); line-height: 1.08;
  margin: 0 0 clamp(2.4rem, 5vw, 4rem);
}
.engagements {
  position: relative; z-index: 2;
  columns: 2; column-gap: clamp(2.5rem, 6vw, 6rem);
  max-width: 72rem;
}
.engagements p {
  break-inside: avoid; margin: 0 0 1.5rem;
  font-size: .92rem; line-height: 1.85; color: rgba(243,232,214,.7);
}
.engagements b {
  font-family: "Outfit", sans-serif; font-weight: 400;
  letter-spacing: -0.01em; color: var(--papier);
}

/* =========================  HONORAIRES  ==================================
   Deux titres de même taille à trois cents pixels d'écart, c'était deux
   squelettes jumeaux. La colonne de gauche ouvre seule, en rubrique ; la
   droite n'a plus de titre d'affiche mais un intitulé, un fond et un filet,
   et elle descend de deux rangs. Elle répond, elle ne rejoue pas.
   ========================================================================= */

.honoraires {
  background: var(--papier-clair);
  padding: clamp(3.5rem, 7vh, 5.5rem) var(--marge);
  align-items: start;
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2rem, 4vw, 5rem);
}
.honoraires__corps { grid-column: 3 / span 5; }
.honoraires__corps p:last-child { margin-bottom: 0; }
.honoraires__corps .rubrique { margin-bottom: 1.6rem; }
.honoraires p { font-size: .95rem; color: rgba(26,51,72,.78); }
.lettrine::first-letter {
  float: left; font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: 3.9em; line-height: .78; padding: .06em .12em 0 0; color: var(--brique);
}

/* align-self: end — les deux colonnes s'arrêtent ensemble. Deux colonnes qui
   ne finissent pas au même endroit laissent un vide qui n'a pas été décidé,
   et c'est le défaut qu'on voit en premier sur une capture. */
/* Le décalage vers le bas laissait un vide sous la colonne de lecture : les
   deux colonnes partent du même rang, c'est leur largeur qui les distingue. */
.refus {
  grid-column: 9 / span 4;
  margin-top: 0;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--papier);
  border-left: 2px solid var(--brique);
}
/* En bas de casse : sur quatre pages, dix intitulés en capitales
   interlettrées finissent par se lire comme un motif, pas comme un système. */
.refus__intitule {
  font-family: "Outfit", sans-serif; font-weight: 400;
  font-size: 1.02rem; letter-spacing: -0.02em;
  color: var(--brique); margin: 0 0 1.2rem;
}
.refus p:last-child { margin-bottom: 0; }

/* =========================  CONTACT  ===================================== */

.contact {
  padding: clamp(3.5rem, 7vh, 5.5rem) var(--marge) clamp(3rem, 6vh, 4.5rem);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2rem, 5vw, 6rem); row-gap: 3.5rem;
}
.contact__gauche { grid-column: 8 / span 5; order: 2; align-self: start; }
.contact__titre {
  font-family: "Outfit", sans-serif; font-weight: 400;
  font-size: clamp(1.7rem, 2.5vw, 2.35rem); line-height: 1.12; letter-spacing: -0.03em;
  text-wrap: balance;
}
.bureaux { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 1.6rem; }

.bureaux p { margin: 0; font-size: .98rem; line-height: 1.7; }
.bureaux a { text-decoration: none; }
.contact__rappel {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.8rem;
  border-top: 1px solid rgba(26,51,72,.16);
  font-size: .92rem; color: rgba(26,51,72,.68); max-width: 30rem;
}
.contact__tel {
  display: inline-block; margin-top: .4rem; text-decoration: none;
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; letter-spacing: -0.015em;
  transition: color 240ms ease;
}
@media (hover: hover) and (pointer: fine) { .contact__tel:hover { color: var(--brique); } }

.formulaire { grid-column: 1 / span 6; order: 1; }
.formulaire__note { font-size: .8rem; color: rgba(26,51,72,.55); margin-bottom: 2.2rem; max-width: 34rem; }
.champ { margin-bottom: 1.7rem; }
.champ label { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(26,51,72,.6); margin-bottom: .4rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 46px; padding: .4rem 0;
  background: transparent; border: 0; border-bottom: 1px solid rgba(26,51,72,.26);
  font-family: "Jost", sans-serif; font-size: 1rem; font-weight: 300; color: var(--encre);
  border-radius: 0; transition: border-color 220ms ease;
}
.champ textarea { resize: vertical; line-height: 1.6; }
.champ select { appearance: none; cursor: pointer; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-bottom-color: var(--brique);
}

/* =========================  PIED DE PAGE  ================================ */

.pied {
  background: var(--encre); color: var(--papier);
  padding: clamp(3.5rem, 8vh, 6rem) var(--marge) clamp(2rem, 4vh, 3rem);
}
.pied__carte { text-align: center; display: grid; justify-items: center; }
.pied__f { width: 92px; height: 70px; color: var(--papier); opacity: .9; }
.pied__nom {
  font-family: "Cormorant Garamond", serif; font-size: 2.6rem; margin: 1rem 0 .2rem; letter-spacing: .04em;
}
.pied__ligne { font-size: .84rem; color: rgba(243,232,214,.62); margin: 0; }

.pied__mail {
  display: block; margin: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(1.5rem, 6.4vw, 5.4rem); line-height: 1; letter-spacing: -0.02em;
  text-align: center; text-decoration: none; word-break: break-word;
  transition: color 260ms ease;
}
@media (hover: hover) and (pointer: fine) { .pied__mail:hover { color: var(--ciel); } }

.pied__bas {
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-top: 1.6rem; border-top: 1px solid rgba(243,232,214,.16);
}
.pied__bas p { margin: 0; font-size: .76rem; color: rgba(243,232,214,.5); }

/* =========================  PAGES DE PÔLE  ===============================
   Même grammaire, registre inversé : le titre arrive sur un fond d'encre,
   puis l'article se lit en pleine page.
   ========================================================================= */

.tete-pole {
  background: var(--encre); color: var(--papier-clair);
  padding: calc(var(--barre-h) + clamp(3.5rem, 9vh, 7rem)) var(--marge) clamp(3rem, 7vh, 5rem);
  position: relative; overflow: hidden;
}
.tete-pole__filigrane {
  position: absolute; right: -6%; top: -20%;
  width: 44%; height: 150%; color: var(--papier); opacity: .05; pointer-events: none;
}
.tete-pole__grille {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3.5rem); row-gap: 1.4rem;
}
.tete-pole h1 { grid-column: 1 / span 8; color: var(--papier-clair); }
.tete-pole h1 em { color: var(--ciel); }
/* L'intro passe SOUS le titre et non à sa droite : les noms de pôle sont
   courts, et une colonne posée en 9-12 laissait un trou au milieu de la
   bande. Empilée, elle forme un bloc tenu à gauche et rend au filigrane la
   moitié droite, qui est son seul endroit. */
.tete-pole__intro {
  grid-column: 1 / span 6; margin: .4rem 0 0; max-width: 56ch;
  font-size: .98rem; line-height: 1.75; color: rgba(250,244,232,.74);
  text-wrap: pretty;
}
.fil { grid-column: 1 / span 12; margin: 0; font-size: .82rem; color: rgba(250,244,232,.55); }
.fil a { text-decoration: none; }

/* =========================  PAGES DE PÔLE  ==============================
   Une page d'expertise est longue par nature : trois à cinq situations, deux
   paragraphes et quatre interventions chacune. Ce qui fait qu'on la quitte à
   la deuxième section, ce n'est pas la longueur, c'est de ne pas savoir
   combien il en reste. D'où, dans l'ordre : une jauge muette qui dit où l'on
   en est, un parcours numéroté qui annonce le chemin, et une respiration
   sombre au milieu pour que la file des situations ne devienne pas une liste.
   ========================================================================= */

/* ---------- la jauge de lecture ----------
   Deux pixels sous la barre, aucun chiffre, aucun pourcentage. Elle répond à
   « combien il reste » sans jamais le dire, et c'est pour ça qu'on la
   supporte sur toute la page. */
.jauge {
  position: fixed; top: var(--barre-h); left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none; background: rgba(26,51,72,.08);
  opacity: 0; transition: opacity 300ms ease;
}
.jauge.est-vue { opacity: 1; }
.jauge__barre {
  display: block; height: 100%; width: 0%;
  background: var(--brique); transform-origin: left center;
}

/* ---------- la planche photographique ----------
   Une image d'ouverture d'article, pas un bandeau : elle occupe huit colonnes
   et sa légende répond dans les trois dernières, calée en bas. Aucun texte
   posé dessus : la photographie respire seule et la légende la commente.
   Le système maison veut un filet décalé sous la planche ; ici il est brique
   et déborde en bas à droite, ce qui donne l'épaisseur d'un tirage posé. */
.planche {
  margin: 0; isolation: isolate;
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--marge) clamp(1rem, 2vh, 2rem);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3.5rem); row-gap: 1.6rem;
  align-items: end;
}
.planche__cadre {
  grid-column: 1 / span 8; position: relative;
  border-radius: 2px; overflow: hidden;
}
.planche__cadre::after {
  content: ""; position: absolute; inset: auto -14px -14px auto;
  width: 46%; height: 62%; z-index: -1;
  border-right: 1px solid var(--brique); border-bottom: 1px solid var(--brique);
  opacity: .55;
}
/* 16/9 plutôt que le 16/10 du fichier : la légende est calée en bas, et une
   image plus haute laissait un vide de 400 px au-dessus d'elle. */
.planche__cadre img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.planche__legende { grid-column: 10 / span 3; margin: 0; }
.planche__intro {
  margin: 0 0 1.2rem;
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.45;
  color: rgba(26,51,72,.82); text-wrap: pretty;
}
.planche__credit {
  margin: 0; padding-top: .8rem;
  border-top: 1px solid rgba(26,51,72,.18);
  font-size: .72rem; letter-spacing: .04em; color: rgba(26,51,72,.45);
}

/* ---------- le parcours ---------- */
.parcours {
  padding: clamp(2.5rem, 5vh, 3.5rem) var(--marge) clamp(1rem, 2vh, 1.5rem);
  background: var(--papier-clair);
}
.parcours__intitule {
  margin: 0 0 1rem;
  font-family: "Outfit", sans-serif; font-size: 1.02rem;
  letter-spacing: -0.02em; color: rgba(26,51,72,.55);
}
.parcours__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(26,51,72,.2); }
.parcours__liste a {
  display: grid; align-items: baseline;
  grid-template-columns: 3.2rem minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(1rem, 2vw, 2rem);
  padding: .95rem 0; border-bottom: 1px solid rgba(26,51,72,.12);
  color: inherit; text-decoration: none;
}
.parcours__n {
  font-family: "Outfit", sans-serif; font-size: .8rem;
  color: var(--brique); letter-spacing: .04em;
}
.parcours__nom {
  font-family: "Outfit", sans-serif; font-size: 1.05rem;
  letter-spacing: -0.02em; line-height: 1.3;
  display: inline-block; transition: color 240ms ease, transform 240ms var(--out);
}
.parcours__dit { font-size: .85rem; line-height: 1.6; color: rgba(26,51,72,.6); }
@media (hover: hover) and (pointer: fine) {
  .parcours__liste a:hover .parcours__nom { color: var(--brique); transform: translateX(3px); }
}

/* ---------- une situation ----------
   Le numéro vit en marge, petit, dans la fonte de rubrique. Pas de chiffre
   géant en creux : c'est la signature du modèle, relevée en capture.
   La première situation est traitée plus grand que les suivantes : une page
   dont toutes les sections ouvrent à la même échelle n'a pas de début. */
.situation-page {
  padding: clamp(3rem, 6vh, 4.5rem) var(--marge);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3.5rem); row-gap: 1.8rem;
  border-top: 1px solid rgba(26,51,72,.14);
}
.situation-page:first-of-type { border-top: 0; }
.situation-page__tete { grid-column: 1 / span 4; }
.situation-page__n {
  margin: 0 0 .9rem;
  font-family: "Outfit", sans-serif; font-size: .78rem;
  letter-spacing: .14em; color: var(--brique);
}
.situation-page__tete .rubrique { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.situation-page--premiere .situation-page__tete .rubrique { font-size: clamp(1.9rem, 3.4vw, 3rem); }
/* L'accroche sort dans la marge, en italique de titrage : c'est l'exergue
   d'un article, et c'est elle qui donne le ton de la situation. */
.situation-page__accroche {
  margin: 1rem 0 0; max-width: 24ch;
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.35;
  color: rgba(26,51,72,.72);
}
.situation-page__corps { grid-column: 6 / span 4; }
.situation-page__corps p { font-size: .95rem; line-height: 1.85; color: rgba(26,51,72,.8); text-wrap: pretty; }
.situation-page__corps p:last-child { margin-bottom: 0; }

.situation-page__faire { grid-column: 10 / span 3; }
.situation-page__intitule {
  margin: 0 0 .9rem; padding-bottom: .7rem;
  border-bottom: 1px solid rgba(26,51,72,.2);
  font-family: "Outfit", sans-serif; font-size: .82rem;
  letter-spacing: -0.01em; color: rgba(26,51,72,.55);
}
.situation-page__faire ul { margin: 0; padding: 0; list-style: none; }
.situation-page__faire li {
  padding: .6rem 0; border-bottom: 1px solid rgba(26,51,72,.1);
  font-size: .85rem; line-height: 1.55; color: rgba(26,51,72,.75);
}

/* ---------- la respiration ---------- */
.respiration {
  position: relative; overflow: hidden;
  background: var(--encre); color: var(--papier);
  padding: clamp(3.5rem, 7vh, 5.5rem) var(--marge);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2rem, 4vw, 5rem); row-gap: 2rem; align-items: center;
}
.respiration__filigrane {
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: 24%; height: 140%; color: var(--papier); opacity: .05; pointer-events: none;
}
.respiration__phrase {
  position: relative; z-index: 2;
  grid-column: 1 / span 5; font-size: clamp(1.8rem, 3vw, 2.8rem); max-width: 16ch;
}
.respiration__droite { position: relative; z-index: 2; grid-column: 7 / span 5; }
.respiration__droite > p { font-size: .95rem; color: rgba(243,232,214,.72); max-width: 44ch; text-wrap: pretty; }
.respiration__tel { margin: 1.2rem 0 0; font-size: .9rem; color: rgba(243,232,214,.72); }
.respiration__tel a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- les deux autres pôles ----------
   Deux rangées, pas deux cartes : ni fond, ni ombre, ni rayon. */
.suite {
  background: var(--papier-clair);
  padding: clamp(3rem, 6vh, 4.5rem) var(--marge);
}
.suite__intitule {
  margin: 0 0 1rem;
  font-family: "Outfit", sans-serif; font-size: 1.02rem;
  letter-spacing: -0.02em; color: rgba(26,51,72,.55);
}
.suite__liste { border-top: 1px solid rgba(26,51,72,.2); }
.suite__pole {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  padding: 1.3rem 0; border-bottom: 1px solid rgba(26,51,72,.12);
  color: inherit; text-decoration: none;
}
.suite__nom {
  font-family: "Outfit", sans-serif; font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  letter-spacing: -0.03em; line-height: 1.2;
  display: inline-block; transition: color 240ms ease, transform 240ms var(--out);
}
.suite__dit { font-size: .84rem; line-height: 1.6; color: rgba(26,51,72,.58); }
.suite__voir {
  justify-self: end; display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Outfit", sans-serif; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brique);
  white-space: nowrap;
}
.suite__voir svg { width: 13px; height: 13px; transition: transform 240ms var(--out); }
@media (hover: hover) and (pointer: fine) {
  .suite__pole:hover .suite__nom { color: var(--brique); transform: translateX(3px); }
  .suite__pole:hover .suite__voir svg { transform: translateX(3px); }
}

/* =========================  ENTRÉES ANIMÉES  =============================
   Trois gestes, selon la nature de l'objet :
   .tire   — le titre se tire de sa ligne de base
   .rideau — le cadre s'ouvre par la gauche
   .pose   — le portrait arrive de biais et se redresse
   ⚠ inset() refuse les valeurs négatives : la queue des « q » et des « g »
   se protège avec le rembourrage bas, jamais avec un inset négatif, sinon
   la déclaration entière est jetée et le titre ne réapparaît jamais.
   ========================================================================= */

.entree {
  opacity: 0; transform: translateY(22px);
  transition: opacity 760ms var(--out) var(--d, 0ms), transform 760ms var(--out) var(--d, 0ms);
}
.entree.vu { opacity: 1; transform: none; }

.tire {
  clip-path: inset(0 0 100% 0); transform: translateY(.24em);
  padding-bottom: .18em; margin-bottom: -.18em;
  transition: clip-path 880ms var(--out), transform 880ms var(--out);
}
.tire.vu { clip-path: inset(0); transform: none; }

/* ⚠ `display: block` obligatoire : un <picture> est inline par défaut, et un
   clip-path posé sur un élément inline se réfère à une boîte dégénérée, ce
   qui masque TOUT, y compris à `inset(0)`. L'image ne s'affichait jamais, et
   le JS rapportait pourtant un clip ouvert et une image chargée. */
.rideau picture {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1000ms var(--fort);
}
.rideau img { transform: scale(1.1); transition: transform 1200ms var(--out); }
.rideau.vu picture { clip-path: inset(0); }
.rideau.vu img { transform: none; }

.pose {
  opacity: 0; transform: rotate(-1.4deg) translateY(26px);
  transition: opacity 820ms var(--out) var(--d, 0ms), transform 820ms var(--out) var(--d, 0ms);
}
.pose.vu { opacity: 1; transform: none; }

/* .cascade — les listes. Le décalage est posé sur CHAQUE ENFANT par le
   script, jamais sur la liste : une liste qui monte d'un bloc n'a pas de
   rythme, et c'est le rythme qui fait qu'on la lit au lieu de la compter.
   Décalage de 55 ms, dans la fourchette 30-80 au-delà de laquelle la page
   paraît lente. Le filet de chaque rangée se tire en même temps, ce qui
   donne l'impression que la ligne écrit la rangée. */
.cascade > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 560ms var(--out) var(--d, 0ms),
              transform 560ms var(--out) var(--d, 0ms);
}
.cascade.vu > * { opacity: 1; transform: none; }

.filet-tire { position: relative; }
.filet-tire::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--encre); opacity: .18; transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--fort) var(--d, 0ms);
}
.cascade.vu .filet-tire::before { transform: scaleX(1); }

/* =========================  RESPONSIVE  ================================== */

@media (max-width: 1080px) {
  .accueil__texte { max-width: none; }
  .accueil__voile {
    background:
      linear-gradient(to top, rgba(10,24,38,.95) 0%, rgba(10,24,38,.9) 30%,
                              rgba(10,24,38,.5) 52%, rgba(10,24,38,.1) 72%, rgba(10,24,38,0) 84%),
      linear-gradient(to bottom, rgba(10,24,38,.45) 0%, rgba(10,24,38,0) 18%);
  }

  .rang .portrait, .rang__texte,
  .rang--inverse .portrait, .rang--inverse .rang__texte,
  .rang:last-of-type .portrait, .rang:last-of-type .rang__texte { grid-column: 1 / span 12; }
  .rang--inverse .portrait { order: 0; }
  .rang--inverse .rang__texte { order: 1; }
  .rang .portrait img { height: clamp(300px, 56vw, 460px); }
  .engagements { grid-template-columns: repeat(2, 1fr); }

  .expertises__ouverture .affiche, .expertises__sous { grid-column: 1 / span 12; }
  .methode__phrase { max-width: none; }
  .expertises__sous { margin-top: 1.5rem; }
  .contact__gauche, .formulaire { order: 0; }

  .methode .affiche, .engagements { grid-column: 1 / span 12; }

  .colonne:first-child, .colonne:last-child { grid-column: 1 / span 12; }
  .colonne:last-child { margin-top: 3rem; }

  .contact__gauche, .formulaire { grid-column: 1 / span 12; }

  .tete-pole h1, .tete-pole__intro { grid-column: 1 / span 12; }
  .expertise h2, .expertise__corps { grid-column: 1 / span 12; position: static; }
  .rappel-pole h2, .rappel-pole__action { grid-column: 1 / span 12; }
}

@media (max-width: 760px) {
  /* Sur mobile tout s'empile, donc les respirations verticales comptent
     double : un rembourrage de bureau fait glisser la section sous l'écran
     avant même qu'on ait commencé à la lire. */
  .expertises, .methode, .honoraires, .appel, .choix, .bureaux-page,
  .reperes, .rappel-pole, .rappel-contact {
    padding-top: clamp(2.2rem, 5vh, 3rem);
    padding-bottom: clamp(2.2rem, 5vh, 3rem);
  }
  .expertises__ouverture { margin-bottom: 1.6rem; }
  .methode__phrase { margin-bottom: 1.8rem; }
  .refus { padding: 1.4rem; }
  .destinataires { margin-bottom: 2rem; }

  /* les césures composées pour le grand format deviennent des veuves sur mobile */
  .accueil h1 br, .expertises h2 br, .methode .affiche br { display: none; }
  .accueil { min-height: 92svh; }
  .accueil__actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .accueil__legende { flex-direction: column; gap: .2rem; }
  /* ⚠ La nav disparaît, donc le bouton du menu DOIT apparaître : sans cette
     ligne, le site n'a plus aucune navigation sous 760 px. */
  .barre__nav, .barre__tel { display: none; }
  .barre__burger { display: flex; }
  .engagements { columns: 1; }
  .rang__nom br { display: none; }
  .pied__bas { flex-direction: column; gap: .6rem; }
}

/* =========================  MOUVEMENT RÉDUIT  ============================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entree, .pose { transform: none; transition: opacity 240ms ease; }
  .tire { clip-path: none; transform: none; transition: none; }
  .rideau picture { clip-path: none; transition: none; }
  .rideau img { transform: none; transition: none; }
  .bouton, .lien { transition: none; }
  .cascade > * { transform: none; transition: opacity 240ms ease; }
  .filet-tire::before { transform: scaleX(1); transition: none; }
  .pole__nom, .situation__nom, .destinataire__nom { transition: color 160ms ease; }
}

/* =========================  FOCUS VISIBLE  =============================== */

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brique); outline-offset: 3px; border-radius: 2px;
}

/* =========================  PAGES INTÉRIEURES : TÊTE  ====================
   La tête de la page réseau : sur-titre, titre d'affiche, deux paragraphes,
   et rien d'autre avant la première associée.
   ========================================================================= */

.tete-page {
  background: var(--papier-clair);
  padding: calc(var(--barre-h) + clamp(3rem, 8vh, 6rem)) var(--marge) clamp(2rem, 4vh, 3rem);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2rem, 4vw, 5rem); row-gap: 1.8rem;
}
.tete-page__fil {
  grid-column: 1 / -1; margin: 0;
  font-family: "Outfit", sans-serif; font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(26,51,72,.5);
}
.tete-page .affiche { grid-column: 1 / span 8; font-size: clamp(2.1rem, 4vw, 4rem); }
.tete-page__texte { grid-column: 1 / span 7; }
.tete-page__texte p { font-size: .97rem; color: rgba(26,51,72,.76); }
.tete-page__texte p:last-child { margin-bottom: 0; }

/* ---------- le rappel de contact en pied de page intérieure ----------
   Relevé sur lwl-avocats.com : une bande sombre, la phrase à gauche, le
   chemin à droite. Un seul bouton, et l'autre chemin en clair dans une
   phrase : deux boutons côte à côte sont la signature du gabarit. */
.rappel-contact {
  background: var(--encre); color: var(--papier);
  padding: clamp(3.5rem, 8vh, 6rem) var(--marge);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2rem, 4vw, 5rem); row-gap: 2rem; align-items: center;
}
.rappel-contact__phrase { grid-column: 1 / span 5; font-size: clamp(1.9rem, 3.4vw, 3.2rem); }
.rappel-contact__droite { grid-column: 7 / span 5; }
.rappel-contact__droite p { font-size: .95rem; color: rgba(243,232,214,.72); max-width: 42ch; }
.rappel-contact__tel { margin: 1.1rem 0 0; font-size: .88rem; }
.rappel-contact__tel a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- bureaux : la ville n'est pas un titre de niveau 3 ---------- */
.bureaux__ville {
  margin: 0 0 .45rem;
  font-family: "Outfit", sans-serif; font-size: 1.02rem;
  letter-spacing: -0.02em; color: var(--brique);
}

@media (max-width: 62rem) {
  .expertises__ouverture .affiche,
  .expertises__sous { grid-column: 1 / -1; }
  .expertises__sous { margin-top: 1.4rem; }
  .pole__tete { grid-template-columns: minmax(0,1fr) 2rem; row-gap: .4rem; }
  .pole__resume { grid-column: 1; grid-row: 2; }
  .pole__chevron { grid-column: 2; grid-row: 1 / span 2; }
  .pole__dedans { grid-template-columns: 1fr; }
  .reperes { grid-template-columns: 1fr; row-gap: 2.2rem; }
  .repere--chiffre { padding-left: 0; border-left: 0; padding-top: 2rem; border-top: 1px solid rgba(26,51,72,.18); }
  .engagements { columns: 1; }
  .honoraires__corps, .refus { grid-column: 1 / -1; }
  .refus { margin-top: 2.5rem; }
  .tete-page .affiche, .tete-page__texte { grid-column: 1 / -1; }
  .rappel-contact__phrase, .rappel-contact__droite { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .situation { grid-template-columns: 1fr; row-gap: .2rem; }
}

/* =========================  LA BANDE D'APPEL  ===========================
   Elle clôt l'accueil et les pages intérieures. Une phrase à gauche, le
   chemin à droite, et un seul bouton : deux boutons côte à côte, l'un plein
   l'autre contour, sont la signature de la page d'atterrissage de gabarit.
   L'autre chemin, le téléphone, est en clair dans une phrase.
   ========================================================================= */

.appel {
  position: relative; overflow: hidden;
  background: var(--encre); color: var(--papier);
  padding: clamp(3.5rem, 7vh, 5.5rem) var(--marge);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2rem, 4vw, 5rem); row-gap: 2rem; align-items: center;
}
.appel__filigrane {
  position: absolute; left: 42%; top: 50%; transform: translateY(-50%);
  width: 26%; height: 150%; color: var(--papier); opacity: .05; pointer-events: none;
}
.appel__phrase {
  position: relative; z-index: 2;
  grid-column: 1 / span 5; font-size: clamp(1.9rem, 3.2vw, 3rem); max-width: 14ch;
}
.appel__droite { position: relative; z-index: 2; grid-column: 7 / span 5; }
.appel__droite > p {
  font-size: .95rem; color: rgba(243,232,214,.72); max-width: 44ch; text-wrap: pretty;
}
.appel__tel { margin: 1.2rem 0 0; font-size: .9rem; color: rgba(243,232,214,.72); }
.appel__tel a { text-decoration: underline; text-underline-offset: 3px; }

/* =========================  PAGE CONTACT  ================================
   Le choix de l'interlocutrice d'abord, le formulaire ensuite. Quatre rangées
   pleine largeur à filets plutôt que trois cartes jumelles, et une quatrième
   option pour qui ne sait pas : sans elle, la page pose une question à
   laquelle la moitié des visiteurs ne peut pas répondre.
   ========================================================================= */

.choix { padding: clamp(1rem, 2vh, 2rem) var(--marge) clamp(3.5rem, 7vh, 5.5rem); }
/* Les rangées de choix courent d'un bord à l'autre, comme l'accordéon des
   expertises ; seuls les champs sont bornés, parce qu'un champ de saisie de
   deux mille pixels de large ne se remplit pas. */
.formulaire--contact { max-width: none; }
.formulaire--contact .champs,
.formulaire--contact .formulaire__pied { max-width: 68rem; }

.destinataires { border: 0; padding: 0; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.destinataires__titre {
  padding: 0; margin-bottom: .7rem;
  font-family: "Outfit", sans-serif; font-size: 1.02rem;
  letter-spacing: -0.02em; color: rgba(26,51,72,.6);
}

.destinataire {
  position: relative; display: grid; align-items: baseline;
  grid-template-columns: 1.6rem minmax(0, 5fr) minmax(0, 6fr) minmax(0, 2fr);
  column-gap: clamp(1rem, 2vw, 2rem);
  padding: 1.15rem 0;
  cursor: pointer;
}
/* Pas de border-top ici : c'est le filet animé de .filet-tire qui tient ce
   rôle, et deux filets superposés donnent une ligne deux fois trop épaisse. */
.destinataire:last-of-type { border-bottom: 1px solid rgba(26,51,72,.18); }
/* Le bouton natif n'est pas stylable proprement : on le garde pour le clavier
   et les lecteurs d'écran, posé sur toute la rangée, et on dessine la marque. */
.destinataire input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.destinataire__marque {
  width: 15px; height: 15px; border-radius: 50%; align-self: center;
  box-shadow: inset 0 0 0 1px rgba(26,51,72,.4);
  transition: box-shadow 200ms ease;
}
.destinataire input:checked ~ .destinataire__marque {
  background: var(--brique);
  box-shadow: inset 0 0 0 1px var(--brique), inset 0 0 0 3.5px var(--papier-clair);
}
.destinataire input:focus-visible ~ .destinataire__marque {
  outline: 2px solid var(--brique); outline-offset: 3px;
}
.destinataire__nom {
  font-family: "Outfit", sans-serif; font-size: 1.1rem;
  letter-spacing: -0.02em; line-height: 1.3; transition: color 200ms ease;
}
.destinataire input:checked ~ .destinataire__nom { color: var(--brique); }
.destinataire__dit { font-size: .86rem; line-height: 1.6; color: rgba(26,51,72,.62); }
.destinataire__ou {
  justify-self: end; text-align: right;
  font-family: "Outfit", sans-serif; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(26,51,72,.5);
}
.destinataire__nom { display: inline-block; transition: color 200ms ease, transform 200ms var(--out); }
@media (hover: hover) and (pointer: fine) {
  .destinataire:hover .destinataire__nom { color: var(--brique); transform: translateX(2px); }
}

.champs {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 4vw, 4rem);
}
.champ--large { grid-column: 1 / -1; }
.champ__option {
  font-size: .68rem; letter-spacing: .1em; color: rgba(26,51,72,.4);
  text-transform: none;
}
.formulaire__pied {
  margin-top: 1.5rem; display: flex; align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem); flex-wrap: wrap;
}
.formulaire--contact .formulaire__note { margin: 0; max-width: 40ch; }
.formulaire--contact .formulaire__note strong { font-weight: 400; color: var(--brique); }

.bureaux-page {
  background: var(--papier-clair);
  padding: clamp(3rem, 6vh, 4.5rem) var(--marge);
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2rem, 4vw, 5rem); row-gap: 2.5rem;
}
.bureau:nth-child(1) { grid-column: 1 / span 3; }
.bureau:nth-child(2) { grid-column: 4 / span 3; }
.bureau--tel { grid-column: 8 / span 5; }
.bureaux-page p { margin: 0; font-size: .97rem; line-height: 1.7; }
.bureau--tel p { font-size: .92rem; color: rgba(26,51,72,.68); max-width: 40ch; }
.bureau a.lien { text-decoration: none; }

@media (max-width: 62rem) {
  .appel__phrase, .appel__droite { grid-column: 1 / -1; }
  .appel__filigrane { display: none; }
  .destinataire {
    grid-template-columns: 1.6rem minmax(0, 1fr);
    row-gap: .3rem; column-gap: 1rem;
  }
  .destinataire__dit, .destinataire__ou { grid-column: 2; justify-self: start; text-align: left; }
  .champs { grid-template-columns: 1fr; }
  .bureau:nth-child(1) { grid-column: 1 / span 6; }
  .bureau:nth-child(2) { grid-column: 7 / span 6; }
  .bureau--tel { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .bureau:nth-child(1), .bureau:nth-child(2) { grid-column: 1 / -1; }
}

/* =========================  GARDE-FOU MOBILE  ===========================
   Une grille de douze colonnes ne tient pas sous 760 px : onze gouttières de
   24 px font 264 px à elles seules sur un écran de 390. Chaque section avait
   sa propre bascule, et il en manquait toujours une, ce qui faisait déborder
   la page horizontalement. Ici la bascule est écrite une fois pour toutes :
   toute grille de douze colonnes passe à une seule, et ses enfants reprennent
   la pleine largeur quel que soit le `grid-column` qu'ils portaient.
   ========================================================================= */

@media (max-width: 760px) {
  .rang,
  .expertises__ouverture,
  .honoraires,
  .contact,
  .tete-pole__grille,
  .expertise__grille,
  .rappel-pole,
  .planche,
  .tete-page,
  .rappel-contact,
  .appel,
  .bureaux-page {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .rang > *,
  .expertises__ouverture > *,
  .honoraires > *,
  .contact > *,
  .tete-pole__grille > *,
  .expertise__grille > *,
  .rappel-pole > *,
  .planche > *,
  .tete-page > *,
  .rappel-contact > *,
  .appel > *,
  .bureaux-page > * {
    grid-column: 1 / -1;
  }
}

/* =========================  CIBLES TACTILES  ============================
   Relevé au banc Playwright : les liens de contact (adresses, téléphones),
   les liens de nav et le « Son parcours » faisaient 22 à 35 px de haut. La
   norme est 44 px. On l'obtient par un rembourrage vertical compensé d'une
   marge négative, pour que la cible grandisse sans que la mise en page bouge.
   ========================================================================= */

@media (pointer: coarse) {
  .barre__nav a,
  .barre__tel,
  .barre__marque,
  .menu a,
  .rang__pied a,
  .rang__pied .deplier,
  .pied__mail,
  .appel__tel a,
  .rappel-contact__tel a,
  .respiration__tel a,
  .contact__tel,
  .bureau a,
  .lien-fleche,
  .pole__page,
  .accueil__autre a,
  .formulaire__note a {
    padding-top: 11px; padding-bottom: 11px;
    margin-top: -11px; margin-bottom: -11px;
  }
  /* Le logo porte une cible carrée plutôt qu'une barre très plate. */
  .barre__marque { padding-right: 11px; margin-right: -11px; }
  /* Les pastilles de sommaire des pages de pôle et les liens « autres pôles ».
     Ce sont des pastilles : on gagne la hauteur par le rembourrage interne,
     sans marge négative, sinon elles se chevauchent. */
  .sommaire a { padding-top: 11px; padding-bottom: 11px; }
  .rappel-pole__action p a,
  .fil a,
  .tete-page__fil a { padding-top: 11px; padding-bottom: 11px;
                      margin-top: -11px; margin-bottom: -11px; }
  /* Les rangées de l'accordéon et du choix de l'interlocutrice sont déjà
     hautes ; c'est le lien inline à l'intérieur qu'il faut dégager. */
  .situation { padding-top: 1.05rem; padding-bottom: 1.05rem; }
}