/* Cabinet Samuel Sellam — feuille autonome.
   Identité haussmannienne : pierre de taille en fond, encre de ferronnerie,
   zinc pour le chrome. Illustrations dessinées, aucune photographie de décor.
   Aucune ressource externe. */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/sourceserif4-400.c71b20994c3e.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/sourceserif4-700.eb430d5263cb.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/sourcesans3-400.2b1383219171.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Socle ─────────────────────────────────────────────────────────────── */

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

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

body,
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
address {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
button {
  font: inherit;
  color: inherit;
}

/* ── Vocabulaire ───────────────────────────────────────────────────────── */

:root {
  /* IDENTITÉ HAUSSMANNIENNE (27/08) — trois matières, trois zones verticales :
     zinc en haut, pierre au milieu, pavé en bas. La page descend du toit à la
     rue, et le contraste descend avec elle.

     Les six jetons du contrat, mesurés au module `tenants.wcag` :
     LA PIERRE A CHANGÉ DE PLACE (01/09). Fond de page et cartes portaient deux
     beiges si proches — #EFE9DC contre #E7E2D6 — que rien ne se détachait de
     rien. Le fond passe au blanc à peine chaud (#FFFFFF pur ferait ressortir
     le papier des dessins comme une tache), la pierre descend sur les cartes.
     Le bleu quitte le cobalt d'écran pour un bleu de nuit de menuiserie.

     Les six jetons du contrat, mesurés au module `tenants.wcag` :
       encre / fond        15,39      encre / pierre            13,26
       muted / fond         6,22      muted / pierre             5,36
       clair / bleu        11,25      bleu / fond               11,86  */
  --color-background: #FCFAF6;
  --color-surface: #EFE9DC;
  --color-text: #1C2228;
  --color-primary: #1D3557;
  --color-on-primary: #F7F4ED;
  --color-muted: #565F69;

  /* MATIÈRES. Elles échappent au contrôle du harnais, qui ne mesure que les
     six jetons ci-dessus. Leurs ratios sont donc mesurés à la main, et la
     règle qui les accompagne est la seule protection : le texte d'une bande
     colorée est TOUJOURS `--color-on-primary` ou `--color-on-ink-muted`. */
  /* Ces deux-là ne sont pas inventées : elles sont RELEVÉES dans le dessin de
     l'immeuble — l'arête de toiture que le ciel touche, le bleu du store du
     rez-de-chaussée. Le chrome et l'illustration ne peuvent donc pas diverger,
     puisqu'ils tiennent leur couleur du même endroit.
     Le creux d'ombre et le joint debout ont disparu avec les motifs qu'ils
     habillaient (28/08) : l'en-tête et le pied sont des aplats. */
  --zinc-crete: #58626D;    /* arête de toiture, éclairée. Texte clair : 5,65:1 */
  --pave: #2C3A48;          /* le bleu du store, la rue au soir. Texte clair : 10,59:1 */
  --laiton: #B4884A;        /* liserés, moulures. JAMAIS de texte : 3,07:1 */

  /* LA PLAQUE DE RUE. Émail bleu, listel vert, lettres blanches et quatre
     rivets aux angles : le bouton du site EST une plaque parisienne. Le vert
     oxydé donne 4,82:1 sur la pierre : il délimite franchement la commande.
     Les valeurs sont relevées sur une plaque réelle — cobalt émaillé, cadre
     vert-de-gris, listel blanc franc, quatre rivets dans les angles du champ
     bleu. Le bleu n'est pas ardoise : une plaque parisienne est BLEUE. */
  --vert-plaque: #3F6E5E;
  --listel-plaque: rgb(247 244 237 / 0.94);
  --rivet-plaque: rgb(247 244 237 / 0.92);

  /* Traits des motifs. Ils vivent ici parce qu'aucune couleur littérale n'a le
     droit d'exister hors du `:root` — c'est ce qui rend le contrôle possible. */
  /* Opaque pur, pour les masques : seul l'alpha compte, mais aucune couleur
     littérale n'a le droit d'exister hors de ce bloc. */
  --masque-plein: rgb(0 0 0 / 1);
  --color-rule: #D9D2C2;
  --color-on-ink-muted: #CBD0D5;

  --serif: "Source Serif 4", Charter, Cambria, Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  --marge: clamp(1.25rem, 5vw, 7rem);
  --souffle: clamp(4rem, 10vw, 8rem);
  --colonne: min(100% - 2 * var(--marge), 78rem);
  --mesure: 62ch;
  --radius: 0.85rem;
  --ombre: rgb(28 34 40 / 0.22);
  --ombre-proche: rgb(28 34 40 / 0.16);
  --ombre-loin: rgb(28 34 40 / 0.32);
}

body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  overflow-wrap: break-word;
  overflow-x: clip;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
}

p + p {
  margin-top: 1rem;
}

a {
  color: var(--color-text);
}

/* ── Accessibilité plancher — ne pas retirer ───────────────────────────── */

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.header :focus-visible,
.footer :focus-visible,
.ouverture :focus-visible,
.carte:focus-visible {
  outline-color: var(--color-on-primary);
}

/* `.skip-link` vit dans le SOCLE de plateforme (sites/_base/assets/chrome.css)
   depuis le 25/08 : le lien d'évitement est rendu par le layout, sur toutes
   les pages, et son masquage n'est pas un choix de dessin. Deux cabinets en
   avaient écrit deux versions, dont l'une posait un fond sans couleur de
   texte. Le redéclarer ici superposerait deux mécanismes de masquage — c'est
   exactement ce qui l'a rendu invisible au focus pendant une heure. */

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-timeline: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Enveloppes ────────────────────────────────────────────────────────── */

.mesure,
.container {
  width: var(--colonne);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}

.mesure--etroite,
.container--narrow {
  max-width: min(var(--mesure), 100%);
}

.bloc,
.section {
  padding-block: var(--souffle);
}

.bloc--surface,
.section--surface {
  background: var(--color-surface);
}

.bloc__titre,
.section__title,
.page-header__title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}

.section__label {
  /* C'ÉTAIT UNE ÉTIQUETTE, C'EST UN TITRE. Douze pixels de capitales grises à
     trois rem de vide au-dessus de titres sérif deux fois plus gros : le h2
     était le plus petit texte de sa section, et il flottait. Sérif, encre,
     taille de h2, et un filet de laiton qui l'ATTACHE à ce qu'il ouvre. */
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: none;
  color: var(--color-text);
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

.section__label::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 2px;
  margin-top: 0.9rem;
  background: var(--laiton);
}

/* ── Ouverture — la photo porte le titre ───────────────────────────────── */

.ouverture {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-height: min(92vh, 54rem);
  padding: clamp(6rem, 14vw, 10rem) 0 clamp(7rem, 12vw, 10rem);
  /* L'ouverture n'est plus une photo qui porte un titre blanc : c'est la
     PIERRE qui porte un titre à l'encre, et le dessin qui tient l'angle. On
     sort donc du régime « texte clair sur image sombre » — d'où l'encre. */
  background: var(--color-background);
  color: var(--color-text);
  overflow: hidden;
}

.ouverture::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8rem;
  background: linear-gradient(transparent, var(--color-background));
  z-index: 1;
}

.ouverture__fond {
  /* MOBILE D'ABORD : le dessin passe SOUS le texte, en pleine largeur. Il n'est
     ni masqué ni décoratif — il porte un `alt` et décrit le cabinet, le retirer
     de l'arbre d'accessibilité serait une perte de contenu. */
  order: 2;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-top: 2rem;
  /* Le papier du dessin est DÉTOURÉ dans le fichier (canal alpha) : `multiply`
     laissait une boîte visible, plus sombre que la pierre, parce qu'un blanc
     cassé multiplié par de la pierre reste plus sombre que la pierre. */
}

@media (max-width: 63.99rem) {
  /* TOUT CE QUI N'A PAS LA GRILLE À DEUX COLONNES, donc téléphones ET
     tablettes. L'ouverture y empile texte puis dessin, et elle mesurait
     924 px sur un écran de 812, 1 299 px sur un de 900 : plus d'un plein
     écran, deux fois, avant de voir quoi que ce soit d'autre. */
  .ouverture {
    /* `min-height` forçait 92 vh même quand le contenu tient en 350 px, et le
       padding ajoutait 208 px de vide par-dessus. Une contrainte de grand
       écran appliquée à un appareil qui n'en a pas la place. */
    min-height: 0;
    padding-block: 2.75rem 3rem;
  }

  .ouverture__fond {
    /* Le dessin prenait TOUTE la largeur : 375 px sur un téléphone, ce qui est
       juste, mais 768 px sur une tablette, où il devenait à lui seul plus haut
       que l'écran. Le plafond rend la tablette lisible d'un coup d'œil.
       LA MARGE EST RETIRÉE, et c'est le point : sur téléphone `min(100%, 26rem)`
       rendait 100 %, donc le dessin courait d'un bord à l'autre pendant que le
       surtitre, le titre, le chapô et la plaque s'arrêtaient tous à la marge.
       Il était le seul élément de l'ouverture à ne pas tenir dans la colonne,
       et c'est ce décalage qu'on voyait sous le bouton. */
    width: min(100% - 2 * var(--marge), 26rem);
    margin-inline: auto;
  }
}

.ouverture__voile {
  /* Sans objet depuis que l'ouverture est en pierre : ce voile existait pour
     rendre lisible un texte clair sur une photo. Il reste dans le gabarit de
     plateforme, il ne peint plus rien. */
  display: none;
}

.ouverture__texte {
  position: relative;
  z-index: 2;
  max-width: 100%;
  min-width: 0;
}

.ouverture .surtitre {
  margin-bottom: 1.25rem;
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.35rem);
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.ouverture__titre {
  max-width: min(14ch, 100%);
  font-size: clamp(2.6rem, 2rem + 6vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.ouverture__chapo {
  max-width: 42ch;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-muted);
}

.ouverture a:not(.bouton):not(.button) {
  /* Les BOUTONS sont exclus : cette règle est plus spécifique qu'eux, et elle
     repeignait le libellé de la plaque en bleu sur bleu — une plaque vide. */
  color: var(--color-primary);
}

/* L'inversion du bouton de l'ouverture est SUPPRIMÉE : elle existait quand le
   héros était une photo sombre. Sur la pierre, elle donnait un bouton crème
   sur fond crème — et depuis que le bouton est une plaque de rue, elle
   effaçait la plaque. */

/* ── Expertises — cartes photographiques ───────────────────────────────── */

.expertises {
  position: relative;
  z-index: 1;
  margin-top: -7rem;
  padding-block: 0 clamp(2.25rem, 5vw, 3.5rem);
  scroll-margin-top: 1.5rem;
}

.expertises .section__label {
  /* CENTRÉ : il ne coiffe plus une liste, il coiffe DEUX cases côte à côte.
     Aligné à gauche, il se lisait comme le titre de la première seulement. */
  text-align: center;
}

.expertises .section__label::after {
  margin-inline: auto;
}

.expertises .mesure {
  background: var(--color-background);
  padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem) 0;
  border-radius: var(--radius);
}

/* LE SEUIL D'UN PÔLE. Un simple <p> en gros corps ouvrait chaque série : les
   huit cartes se lisaient d'affilée, et le cabinet paraissait ne faire que de
   l'immobilier. Le filet de laiton et le chapô donnent au pôle une ENTRÉE — on
   sait qu'on change de matière avant de lire le premier titre de carte.
   Les cartes restent TOUTES visibles : un repli par pôle a été essayé et
   refusé, il fallait deux clics pour voir ce que le cabinet fait. */
.pole {
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  border-top: 2px solid var(--laiton);
}

.expertises__pole {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.expertises__pole a {
  color: inherit;
  text-decoration: none;
}

.expertises__pole a:hover,
.expertises__pole a:focus-visible {
  text-decoration: underline;
}

.expertises__chapo {
  max-width: var(--mesure);
  margin-top: 0.55rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.cartes + .pole {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.cartes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.cartes > li {
  border-radius: var(--radius);
  box-shadow:
    0 0.12rem 0.35rem var(--ombre-proche),
    0 0.85rem 1.85rem var(--ombre-loin);
}

@media (min-width: 40rem) {
  .cartes {
    grid-template-columns: 1fr 1fr;
  }

  /* La CÉSURE vit ici, avec la justification : sur un bord irrégulier elle
     coupe des mots sans rien remplir — « socié-tés » sur une case de 295 px.
     `.cabinet__bio`, `.prose` et `.question p` la portent depuis toujours à
     toute largeur, et ce n'est pas ce lot qui le tranche. */
  .ouverture__chapo,
  .carte__resume,
  .chapo,
  .expertises__chapo,
  .cabinet__bio,
  .question p,
  .prose {
    hyphens: auto;
    text-align: justify;
    /* La justification s'applique au TEXTE COURANT, jamais aux titres : sur
       une ligne courte elle écarte les mots jusqu'à l'absurde — « Assurance
       de responsabilité civile » s'étirait sur toute la mesure. */
  }

  .prose h2,
  .prose h3,
  .cabinet__bio h2 {
    text-align: left;
  }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .cartes--immo > li:last-child,
  .cartes--affaires > li:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  /* DEUX COLONNES, dans la colonne de la page. Le texte était auparavant un
     bloc de 52 % CENTRÉ par `.mesure` : il flottait au milieu, laissant un
     tiers de vide à gauche et chevauchant le dessin à droite. Une grille dit
     ce qu'on veut vraiment — le texte tient la colonne de gauche, l'immeuble
     celle de droite, et les deux partagent la même gouttière. */
  .ouverture {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    width: var(--colonne);
    margin-inline: auto;
    padding-block: clamp(4rem, 7vw, 6.5rem);
    min-height: min(84vh, 50rem);
  }

  .ouverture__texte {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .ouverture__fond {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    width: 100%;
    height: auto;
    margin-top: 0;
    align-self: end;
  }

  /* Le titre tient la colonne, pas 14 caractères. La borne en `ch` datait du
     temps où il flottait sur une photo pleine largeur ; dans une grille elle
     coupait « Entreprendre. » en deux — et un mot césuré à la main dans un
     titre de héros, ça se voit de la rue. */
  .ouverture__titre {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  .cartes--immo {
    grid-template-columns: repeat(6, 1fr);
  }

  .cartes--immo > li:nth-child(-n+2) {
    grid-column: span 3;
  }

  .cartes--immo > li:nth-child(n+3) {
    grid-column: span 2;
  }

  .cartes--immo > li:nth-child(-n+2) .carte {
    min-height: 26rem;
  }

  .cartes--affaires {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.carte {
  /* La carte n'est plus une photo sombre sous un voile : c'est une PIERRE sur
     laquelle un dessin est posé. Le voile existait pour rendre lisible un
     texte blanc sur une photographie ; un dessin détouré demande l'inverse —
     de la lumière derrière lui, et de l'encre sous lui. */
  /* LA BANDE SUIT LE RAPPORT DES DESSINS, sans quoi ils flottent dedans. Les
     huit partagent un canevas de 656 sur 605, soit un rapport de 1,08 — plus
     large que haut. Une bande trop courte les fait tenir par la HAUTEUR : à
     375 px l'ancien plancher de 10 rem donnait une bande de 292 sur 160, et le
     dessin s'y réduisait à 173 px de large, perdu au milieu du vide.
     Le plancher monté à 15 rem et la pente resserrée à 21 vw rapprochent la
     bande du rapport des dessins : ils la remplissent au lieu d'y nager. */
  --bande: clamp(15rem, 21vw, 19rem);
  position: relative;
  display: flex;
  flex-direction: column;
  /* LE TEXTE PART DU HAUT, sous la bande, et jamais du bas. Collé en bas, le
     bloc remontait d'une ligne dès qu'un résumé en faisait trois au lieu de
     deux : sur une rangée de trois cartes, le titre du milieu se retrouvait
     plus haut que ses voisins. Aligner par le haut fait tomber les trois
     titres sur la même ligne, et laisse le vide en bas de carte, où le fond
     uni le rend invisible. */
  justify-content: flex-start;
  min-height: 33rem;
  /* LA BANDE DU DESSIN EST RÉSERVÉE, PAS ESPÉRÉE. Le dessin vivait en fond de
     carte, dimensionné à 80 % de la HAUTEUR de celle-ci. Sous 1 152 px la
     carte tombe à 18 rem : 80 % faisaient 230 px, le titre commençait à 138 px,
     et le texte s'imprimait sur 92 px d'immeuble — illisible sur tout téléphone
     et toute tablette. Ici le dessin occupe `::after` et le `padding-top` lui
     garde sa place : le texte vit dans la boîte de contenu, qui commence SOUS
     la bande. Un titre de trois lignes fait grandir la carte ; il ne peut plus
     monter sur le dessin. */
  padding: calc(var(--bande) + 1.5rem) 1.35rem 1.4rem;
  background-color: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--radius);
  /* Trois beiges empilés ne faisaient aucune arête. La carte est la PIERRE
     sur un fond clair, bordée d'un trait de laiton : elle se voit de loin. */
  border: 1px solid var(--laiton);
}

.carte__dessin {
  /* MÊME GÉOMÉTRIE QU'AVANT, sur un élément réel plutôt qu'un fond CSS — c'est
     ce qui rend le chargement paresseux possible, et il vaut 596 Ko sur
     l'accueil. La boîte est fixée par les décalages et la bande, donc elle ne
     dépend pas des pixels de l'image : rien ne saute au chargement, sans avoir
     à écrire les dimensions des huit fichiers dans le gabarit.
     `contain` tient le dessin DANS la bande sur les DEUX axes, quel que soit
     son rapport — les huit vont de 0,86 à 1,08. Ni `cover`, qui ampute un
     immeuble, ni `fill`, qui l'étire.
     `center bottom` : les huit façades reposent sur une même ligne de sol,
     sans quoi elles flotteraient chacune à sa hauteur. */
  /* LARGEUR EXPLICITE, et surtout pas déduite des décalages. Une image est un
     élément REMPLACÉ : positionnée en absolu avec `width: auto`, elle prend sa
     largeur INTRINSÈQUE et non celle que `left` et `right` définiraient. Le
     `right` était donc purement ignoré, la boîte partait de la marge gauche sur
     toute la largeur de la carte, et les huit dessins se retrouvaient décalés
     de 1,35 rem vers la droite — 22 px, débordant sous le bord droit. */
  position: absolute;
  top: 1rem;
  left: 1.35rem;
  width: calc(100% - 2.7rem);
  height: var(--bande);
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}

.carte::before {
  /* Un liseré de laiton au pied de la carte, à la place du voile. */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--laiton);
  opacity: 0.85;
}

.carte__titre,
.carte__resume {
  position: relative;
  z-index: 1;
}

.carte__titre {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.carte__resume {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-muted);
}

/* ── L'élévation qui ouvre une page de domaine ─────────────────────────── */

.elevation--transactions-immobilieres {
  background-image: url("img/domaine-transactions-immobilieres.58993deb5b0d.webp");
}

.elevation--asset-management {
  background-image: url("img/domaine-asset-management.b36edf63f188.webp");
}

.elevation--baux-commerciaux {
  background-image: url("img/domaine-baux-commerciaux.4c5e21642c58.webp");
}

.elevation--baux-habitation {
  background-image: url("img/domaine-baux-habitation.d3a7061e6463.webp");
}

.elevation--contentieux-immobilier {
  background-image: url("img/domaine-contentieux-immobilier.5a940784a661.webp");
}

.elevation--droit-des-societes {
  background-image: url("img/domaine-droit-des-societes.53a86bcc615d.webp");
}

.elevation--contrats-commerciaux {
  background-image: url("img/domaine-contrats-commerciaux.84f29281c9d2.webp");
}

.elevation--contentieux-commercial {
  background-image: url("img/domaine-contentieux-commercial.0de785d9d867.webp");
}


.elevation {
  /* MOBILE : le dessin ouvre la page, en pleine largeur mais SANS l'occuper
     entière — un carré de 34 rem repoussait le titre et le premier paragraphe
     sous la ligne de flottaison. */
  width: min(100%, 20rem);
  aspect-ratio: 1 / 1;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

@media (min-width: 52rem) {
  .elevation {
    /* GRAND ÉCRAN : le dessin passe à DROITE et le texte l'habille. Le titre
       revient en haut de page, le premier paragraphe démarre à hauteur d'œil,
       et l'immeuble reste entier — c'est le flottant qui fait le travail,
       sans une ligne de grille à débattre. */
    float: right;
    width: 100%;
    max-width: 34rem;
    margin: 0;
    /* Le dessin s'efface là où il rencontre le texte, au lieu de lui opposer
       un bord franc. Un masque, donc rien de peint : le fond de page reste
       visible au travers. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, var(--masque-plein) 30%);
    mask-image: linear-gradient(to right, transparent 0, var(--masque-plein) 30%);
  }

  /* La colonne du titre est plus étroite qu'une pleine mesure, et une règle
     globale autorise la coupure n'importe où : « Transactions immobilières »
     se brisait en « Transaction / s ». Un titre ne se césure pas à la hache. */
  .bloc__titre {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }
}

/* Les huit règles `.carte--<slug>::after` ont disparu avec le fond CSS : le
   gabarit compose le nom de fichier depuis le slug, et un domaine ajouté
   demain n'a plus besoin d'une ligne de feuille — seulement de son dessin. */

/* ── Respiration — une barre, et rien d'autre ──────────────────────────── */

.respiration {
  /* C'était une bande d'encre de neuf rem de haut, traversée d'un filet et
     ponctuée d'un losange : un grand rectangle noir en plein milieu de la
     page, qui coupait la lecture au lieu de l'articuler. Il ne reste que ce
     qu'une articulation demande — une barre. */
  height: 0;
  border-top: 2px solid var(--laiton);
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
  margin-inline: var(--marge);
}

/* ── Cabinet ───────────────────────────────────────────────────────────── */

.cabinet {
  padding-block: clamp(3rem, 6vw, 5rem) var(--souffle);
  scroll-margin-top: 1.5rem;
}

.cabinet__item {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .cabinet__item {
    /* La biographie s'étalait sur 912 px, soit plus de cent signes par ligne :
       illisible, et c'est ce déséquilibre — une petite photo contre un pavé
       très large — qui faisait paraître la section décalée alors qu'elle était
       centrée. Colonnes bornées, et le couple photo-texte centré dans la page. */
    grid-template-columns: minmax(12rem, 26rem) minmax(0, 34rem);
    justify-content: center;
    /* CENTRÉ, le portrait débordait en haut d'un texte plus court : il
       paraissait « trop haut ». Les deux colonnes partent de la même ligne. */
    align-items: start;
    gap: clamp(1.75rem, 3vw, 3rem);
  }
}

.cabinet__photo {
  width: 100%;
  border-radius: var(--radius);
}

/* ── Le portrait qui se retourne ───────────────────────────────────────── */

.carton {
  /* La profondeur vit sur le PARENT du pivot, jamais sur l'élément qui tourne :
     posée sur lui, la rotation serait plate — un dessin qui s'écrase au lieu
     d'un carton qu'on retourne. */
  perspective: 60rem;
}

.carton__pivot {
  display: grid;
  transform-style: preserve-3d;
}

.carton__face {
  /* Les deux faces occupent la MÊME cellule de grille : superposées sans
     `position: absolute`, la ligne garde donc la hauteur de l'image et rien ne
     saute au retournement. Les deux fichiers ont le même rapport, 1,2 — c'est
     la condition, et le dessin a été recadré pour l'obtenir. */
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.carton__face--dos {
  /* Le dos est posé RETOURNÉ. Quand le pivot fait son demi-tour, il revient
     d'aplomb pendant que la face part se cacher.
     `rotateY` et non `rotateX` : le carton tourne autour de sa VERTICALE, la
     main qui retourne une page. L'axe doit être le même ici et au survol,
     sinon le dos arrive en miroir. */
  transform: rotateY(180deg);
}

.cabinet__nom {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
}

.cabinet__bio {
  max-width: var(--mesure);
  margin-top: 1rem;
  hyphens: auto;
}

/* LA FORMATION, en une ligne. Le panneau de cinq lignes séparées de filets
   pesait autant que la biographie, pour de l'information de second rang. Ici
   elle se lit d'un trait, sous le texte qu'elle complète. */
.diplomes {
  max-width: var(--mesure);
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ── Questions fréquentes ──────────────────────────────────────────────── */

.faq {
  padding-block: 0 var(--souffle);
}

.question {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--color-rule);
}

.question:first-of-type {
  border-top: 1px solid var(--color-rule);
}

.question__intitule {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  font-family: var(--serif);
  font-size: 1.25rem;
  cursor: pointer;
}

.question__intitule::after {
  /* RIEN ne disait qu'une question s'ouvre. `list-style-type:
     disclosure-closed` était bien déclaré, mais un `summary` en `display:
     flex` n'est plus un `list-item` : son `::marker` ne se peint jamais. Le
     triangle n'a donc jamais existé, et la FAQ se lisait comme une liste de
     titres morts.
     Un chevron tracé en bordures, pas un glyphe : aucune fonte à charger, et
     il tourne. Le trait est en `--color-primary` — la couleur principale TRACE
     et ne porte pas de texte, c'est exactement son emploi. */
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: translateY(-0.15em) rotate(45deg);
}

.question[open] .question__intitule::after {
  transform: translateY(0.1em) rotate(-135deg);
}

.question p {
  margin-top: 0.85rem;
  color: var(--color-muted);
  hyphens: auto;
}

.disclaimer-local {
  margin-top: 2.5rem;
}

/* ── Listes, pages intérieures ─────────────────────────────────────────── */

.liste {
  margin-top: 2.5rem;
}

.liste__item + .liste__item {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-rule);
}

.liste__titre {
  font-size: 1.5rem;
}

.surtitre,
.page-header__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.bloc .surtitre {
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.chapo,
.lede {
  max-width: var(--mesure);
  margin-top: 1.25rem;
  font-size: 1.125em;
  color: var(--color-muted);
}

.attenue {
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.reponse-directe {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  border-radius: var(--radius);
}

.prose {
  margin-top: 2rem;
  hyphens: auto;
}

.prose h2 {
  margin-top: 2rem;
  /* Le socle remet toutes les marges à zéro : sans cette ligne, l'intertitre
     COLLE au paragraphe qui le suit. Invisible jusqu'au 23/08, parce qu'aucun
     corps de domaine n'avait encore d'intertitre à habiller. */
  margin-bottom: 0.6rem;
  font-size: 1.5rem;
}

.prose ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: 1rem;
}

.prose li + li {
  margin-top: 0.35rem;
}

.apres,
.pages {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
}

.apres {
  display: block;
}

/* ── Formulaire ────────────────────────────────────────────────────────── */

.formulaire {
  margin-top: 2rem;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.25rem;
}

.champ input,
.champ textarea {
  width: 100%;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-rule);
  background: var(--color-background);
  border-radius: var(--radius);
}

.champ--erreur input,
.champ--erreur textarea {
  border-width: 2px;
  border-color: var(--color-text);
}

.champ__erreur {
  font-size: 0.9375rem;
  font-weight: 600;
}

.coordonnees {
  margin-top: 3rem;
  font-style: normal;
}

.faq--contact {
  margin-top: 3rem;
}

/* ── Bouton ────────────────────────────────────────────────────────────── */

.bouton,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius);
}

.bouton {
  margin-top: 2.25rem;
}

/* La plaque de rue est définie EN FIN DE FEUILLE : deux règles de portée
   plus étroite (`.header .button--primary`, `.footer .button--primary`)
   l'emportaient sur elle et repeignaient le bouton en crème sur crème. */


.bouton:hover,
.button:hover {
  text-decoration: underline;
}

/* ── Chrome — en-tête et pied en encre ─────────────────────────────────── */

.header {
  position: relative;
  z-index: 20;
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  /* LA TOITURE, EN APLAT. La photographie de couverture en zinc a été retirée
     (28/08) : plus d'image, plus de voile de crête, une seule valeur sur toute
     la bande.
     `--zinc-crete` et non `--zinc-creux` : c'est le zinc ÉCLAIRÉ, le versant
     que le ciel touche — le plus clair des deux qui puisse encore porter du
     texte crème, à 5,65:1. Le vrai `--zinc-clair` (#8D99A6) ne tient que
     2,57:1 : sur lui, ni le texte ni le logo, tous deux crème, ne se
     liraient. */
  background-color: var(--zinc-crete);
  color: var(--color-on-primary);
  /* Le bandeau de laiton : la ligne d'égout d'une toiture, là où le zinc
     rencontre la pierre. C'est le seul accent chaud de la page. */
  border-bottom: 3px solid var(--laiton);
}

.header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
  max-width: 100%;
  min-width: 0;
}

.header__name {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  overflow: visible;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-on-primary);
}

.header__name:not(.header__name--has-logo) .header__logo {
  display: none;
}

.header__logo {
  /* LA BALANCE EST D'APLOMB. Elle penchait de 12 degres, transform-origin en
     bas a droite : le geste d'un marteau d'audience qui s'arme avant de
     frapper, herite de l'ancienne identite. Le dessin n'est plus un marteau,
     et une balance penchee sur le site d'un avocat dit exactement le contraire
     de ce qu'il vend.
     `height: auto` parce que 3.1rem sur 2.45rem etirait le dessin de 7 % en
     hauteur : le fichier fait 230 sur 169. L'attribut `height` pose par le
     gabarit donne le rapport au navigateur, qui reserve la place sans
     decalage de mise en page. */
  width: 3.1rem;
  height: auto;
  flex-shrink: 0;
}

/* Ni socle ni eclat. `::after` peignait la barre claire sous le logo : le
   billot que le marteau frappait. `::before` masquait `impact.svg`, l'etoile
   du choc, maintenue a `opacity: 0` faute d'animation pour la lever depuis que
   « frappe-marteau » a ete retire. Les deux moities du meme effet mort, dont
   une seule se voyait. */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.15rem 1.4rem;
}

.nav__item:has(> .nav__link[href="/#domaines"]) {
  order: 1;
}

.nav__item:has(> .nav__link[href="/#cabinet"]) {
  order: 2;
}

.nav__item:has(> .nav__link[href*="tarification"]) {
  order: 3;
}

.nav__item:has(> .nav__link[href*="nous-rejoindre"]) {
  order: 4;
}

.nav__item:has(> .nav__link[href*="droit-immobilier"]),
.nav__item:has(> .nav__link[href*="droit-des-affaires"]) {
  display: none;
}

.nav__item:has(> .nav__link[href*="articles"]) {
  order: 5;
}

.nav__item:has(> .button) {
  order: 9;
}

.nav__link {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-primary);
}

.nav__link:hover {
  text-decoration: underline;
}

.header .button--primary {
  background: var(--color-on-primary);
  color: var(--color-primary);
  border-color: var(--color-on-primary);
  font-weight: 700;
}

.nav-repli {
  display: none;
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
}

/* Panneau : HORS media query, une seule fois. Le <details> est `display:
   none` au-dessus du seuil — ces règles ne peignent rien tant qu'une
   bascule ne l'a pas montré. Leçon 11.18 : un details fermé ne peint pas. */
.nav-repli > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  color: var(--color-text);
  background: var(--color-on-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}

.nav-repli > summary:focus-visible {
  outline-color: var(--color-primary);
}

.nav-repli > summary::-webkit-details-marker {
  display: none;
}

.nav-repli > summary::marker {
  content: "";
}

.nav-repli > summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.45rem;
  border-right: 0.12rem solid currentColor;
  border-bottom: 0.12rem solid currentColor;
  transform: rotate(45deg) translateY(-0.12rem);
}

.nav-repli[open] > summary::after {
  transform: rotate(-135deg) translateY(-0.05rem);
}

.nav-repli > .nav {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 21;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  padding: 0.35rem var(--marge) 1.35rem;
  background: var(--color-text);
  box-shadow: 0 1.25rem 2rem var(--ombre-loin);
}

.nav-repli[open] > .nav {
  display: flex;
}

.nav-repli > .nav .nav__link,
.nav-repli > .nav .button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
}

.nav-repli > .nav .nav__item + .nav__item {
  box-shadow: inset 0 1px var(--color-on-ink-muted);
}

.nav-repli > .nav .button {
  margin-top: 0.65rem;
  justify-content: center;
}

/* Six intitulés en capitales : la rangée ne tient qu'vers 72 rem.
   En dessous, le panneau — y compris si `nav-repliee` est posée. */
body.nav-repliee .nav-desktop {
  display: flex;
}

body.nav-repliee .nav-repli {
  display: none;
}

@media (max-width: 72rem) {
  .nav-desktop,
  body.nav-repliee .nav-desktop {
    display: none;
  }

  .nav-repli,
  body.nav-repliee .nav-repli {
    display: block;
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }

  .header__inner {
    gap: 0.75rem;
    padding-block: 0.85rem;
  }

  .header__name--has-logo .header__wordmark {
    display: none;
  }

  .header__logo {
    width: 2.4rem;
    height: auto;
  }

  .ouverture__texte,
  .bloc > .mesure {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--marge);
  }

  .ouverture .surtitre {
    max-width: 100%;
    font-size: clamp(0.8rem, 2.8vw, 1.05rem);
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
  }

  .ouverture__titre {
    max-width: 100%;
    font-size: clamp(1.65rem, 6.8vw, 2.45rem);
    letter-spacing: -0.02em;
    overflow-wrap: normal;
  }

  .bloc__titre,
  .page-header__title {
    max-width: 100%;
    font-size: clamp(1.55rem, 6.4vw, 2.15rem);
    overflow-wrap: normal;
  }

  .ouverture__chapo {
    max-width: 100%;
  }

  .expertises {
    margin-top: -3rem;
  }

  .carte {
    /* 18 rem ne suffisent plus : la bande est réservée par le padding, et une
       carte plus courte que « bande + texte » grandirait toute seule. Autant
       l'accorder, pour que les huit gardent la même hauteur. */
    min-height: 23rem;
  }
}

.footer {
  padding-block: clamp(2rem, 4vw, 3.25rem);
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  /* LA RUE, EN APLAT. Le pavé photographié a été retiré (28/08) : aplat
     uniforme, sans texture ni halo de réverbère. Le pavé n'est PAS l'encre —
     `--color-text` est un noir de ferronnerie, il lisait comme un aplat de
     texte. Ce gris-bleu lit comme de la pierre, et il porte le texte crème à
     10,59:1. C'est la seule surface de la page qui ne raconte plus rien : elle
     ferme la descente au lieu de la commenter. */
  background-color: var(--pave);
  color: var(--color-on-primary);
  border-top: 3px solid var(--laiton);
}

.footer a,
.footer__link,
.footer__heading {
  color: var(--color-on-primary);
}

.footer .button--primary {
  /* Une plaque de rue sur le pavé : c'est sa place naturelle. */
  border-color: var(--vert-plaque);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}

.footer__col {
  flex: 1 1 14rem;
}

.footer__heading {
  margin-bottom: 0.5rem;
  font-family: var(--serif);
  font-weight: 700;
}

.footer__contact {
  font-style: normal;
}

.footer__hours,
.footer__areas,
.footer-links {
  margin-top: 0.75rem;
}

.footer__hours li + li,
.footer__areas li + li,
.footer-links li + li {
  margin-top: 0.35rem;
}

.footer__copy {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--color-on-ink-muted);
}

.disclaimer {
  max-width: var(--mesure);
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.section--entete {
  padding-bottom: 0;
}

.section:has(.page-header) {
  padding-bottom: 0;
}

.section:has(.page-header) + .section {
  padding-top: 1.25rem;
}

.section .prose > h2:first-child {
  margin-top: 0;
}

/* ── Mouvement : se tait si le visiteur l'a demandé ─────────────────────── */

@keyframes apparaitre {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes frappe-marteau {
  0% {
    transform: rotate(12deg);
  }

  68% {
    transform: rotate(-22deg);
  }

  82% {
    transform: rotate(-12deg);
  }

  100% {
    transform: rotate(-16deg);
  }
}

@keyframes trait-impact {
  0%,
  52% {
    opacity: 0;
    transform: scale(0.35) translateY(0.2rem);
  }

  68% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 0.85;
    transform: scale(1);
  }
}

@keyframes choc-socle {
  0%,
  62% {
    transform: none;
  }

  74% {
    transform: scaleX(1.14) translateY(1px);
  }

  100% {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  a,
  .bouton,
  .button,
  .nav__link,
  .header__name,
  .carte,
  .cartes > li,
  summary {
    transition:
      color 220ms ease,
      background-color 220ms ease,
      border-color 220ms ease,
      text-decoration-color 220ms ease,
      text-underline-offset 220ms ease,
      transform 220ms ease,
      opacity 220ms ease,
      box-shadow 220ms ease;
  }

  @supports (animation-timeline: view()) {
    .carte,
    .cabinet__item,
    .question,
    .footer__col,
    .bloc__titre,
    .champ {
      animation: apparaitre 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  body,
  a,
  button,
  summary,
  label,
  .button {
    cursor: url("img/curseur.13bad389db32.png") 1 1, url("img/curseur.ee120ead4b2b.svg") 1 1, auto;
  }

  input,
  textarea,
  select {
    cursor: text;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  a:hover {
    text-underline-offset: 0.38em;
  }

  .header__name:hover,
  .nav__link:hover,
  .footer__link:hover {
    /* Le survol SOULIGNE au laiton, il ne pâlit plus le texte. Pâlir coûtait
       du contraste sur une bande déjà moyenne — le gris secondaire ne donnait
       que 4,00:1 sur l'arête de toiture, sous le seuil AA. */
    text-decoration: underline;
    text-decoration-color: var(--laiton);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.32em;
  }

  /* Le logo ne s'anime plus au survol : « frappe-marteau », « trait-impact »
     et « choc-socle » mimaient un marteau d'audience qui frappe. Le logo est
     désormais une balance — elle ne frappe pas, elle s'équilibre. */

  .cartes > li:hover {
    transform: translateY(-0.2rem);
    box-shadow:
      0 0.2rem 0.45rem var(--ombre-proche),
      0 1.15rem 2.4rem var(--ombre-loin);
  }

  .carte:hover::before {
    opacity: 0.32;
  }

  .bouton:hover,
  .button--primary:hover {
    transform: translateY(-0.12rem);
    text-decoration: underline;
  }

  /* LE RETOURNEMENT. Il vit ici, et pas ailleurs, parce que ce bloc exige les
     deux conditions à la fois : un pointeur qui sait survoler, et un visiteur
     qui n'a pas demandé moins de mouvement. Sans survol — donc sur tout
     mobile — le dessin ne se voit jamais, et c'est assumé : la face porte la
     photographie, qui est l'information. Le dos est un plaisir, pas un
     contenu. */
  .carton__pivot {
    transition: transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .carton:hover .carton__pivot {
    transform: rotateY(180deg);
  }
}

@media (max-width: 39.99rem) {
  /* LA PLAQUE TIENT LA COLONNE. Son bord gauche était déjà au pixel sur celui
     du surtitre, du titre, du chapô et du dessin — c'est le bord DROIT qui
     manquait : seule de l'ouverture, elle s'arrêtait aux deux tiers, et cette
     dentelure se lisait comme un défaut d'alignement.
     Pleine largeur elle borne la colonne des deux côtés, et la cible du doigt
     passe de 253 à 335 px, ce qui ne se plaide pas contre. */
  .ouverture .bouton {
    display: block;
    text-align: center;
  }
}

/* ── La plaque de rue — dernier mot de la feuille ──────────────────────── */

.bouton,
.button--primary,
.header .button--primary,
.footer .button--primary,
.ouverture .bouton {
  background-color: var(--color-primary);
  /* Les quatre rivets. Des dégradés radiaux plutôt que des pseudo-éléments :
     un bouton n'a que deux pseudo-éléments et le site en a déjà l'usage. */
  background-image:
    radial-gradient(circle at 1.05rem 0.95rem, var(--rivet-plaque) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 1.05rem) 0.95rem, var(--rivet-plaque) 0 2px, transparent 2.6px),
    radial-gradient(circle at 1.05rem calc(100% - 0.95rem), var(--rivet-plaque) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 1.05rem) calc(100% - 0.95rem), var(--rivet-plaque) 0 2px, transparent 2.6px);
  color: var(--color-on-primary);
  /* Le listel blanc de l'émail, à l'intérieur du cadre vert. */
  box-shadow: inset 0 0 0 4px var(--listel-plaque);
  border: 4px solid var(--vert-plaque);
  border-radius: 0.55rem;
  padding: 0.95rem 2.2rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Le bouton Contact ne figure plus dans l'en-tête ───────────────────── */

.header .button--primary {
  /* `templates/partials/nav_links.html` appartient à la plateforme : le retirer
     là-bas priverait tous les cabinets de leur appel au contact. Il se masque
     donc ici, dans la feuille de ce site — et `display: none` le retire aussi
     de l'arbre d'accessibilité, ce qui est bien l'intention.
     Le contact reste atteignable : bouton du héros, bloc de contact, pied de
     page. */
  display: none;
}

/* ── Le pied, resserré ─────────────────────────────────────────────────── */

.footer {
  /* Il faisait 465 px de haut, dont 240 pour la seule liste des huit domaines
     empilés, et 102 de marges. Aucune ligne n'est retirée : la liste passe sur
     deux colonnes et les marges se resserrent. */
  padding-block: clamp(1.4rem, 2.4vw, 1.9rem);
}

.footer__areas {
  line-height: 1.5;
}

/* Deux colonnes ont été essayées et abandonnées : à demi-largeur, « Transactions
   immobilières » tient sur deux lignes, et huit libellés cassés en deux ne
   gagnaient pas un pixel. Une seule colonne, plus serrée, fait mieux. */

.footer__areas .footer__link,
.footer-links .footer__link {
  font-size: 0.875rem;
}

.footer__hours li + li,
.footer__areas li + li,
.footer-links li + li {
  margin-top: 0.15rem;
}

/* ── Page de domaine : le texte à gauche, l'immeuble à droite ──────────── */

/* 52 rem et non 64 : entre les deux, le dessin FLOTTAIT dans le texte, et les
   lignes s'enroulaient autour de lui — courtes tant qu'il est là, longues
   ensuite. Une mesure qui change au milieu d'un paragraphe se lit mal, et le
   flottant n'existait que faute de grille. En grille, `float` n'a plus aucun
   effet sur un élément : la règle du dessus devient muette d'elle-même. */
@media (min-width: 52rem) {
  .bloc--domaine {
    display: grid;
    /* La colonne de texte vaut EXACTEMENT sa mesure, pas « tout le reste ».
       En `1fr` elle prenait 525 px pour n'en remplir que 397 : le texte
       s'arrêtait à sa mesure et laissait 147 px de vide contre le dessin.
       Bornée à `--mesure`, la piste ne dépasse plus le texte, et `justify-
       content` recentre le couple au lieu de l'étirer. */
    grid-template-columns: minmax(0, 27rem) minmax(0, 38rem);
    justify-content: center;
    align-items: start;
    column-gap: clamp(0.75rem, 1.5vw, 1.75rem);
    width: var(--colonne);
    margin-inline: auto;
  }

  .bloc--domaine > .mesure--etroite {
    /* La RANGÉE est explicite, pas seulement la colonne. Depuis que le dessin
       passe en premier dans le DOM, le placement automatique le pose en
       rangée 1 colonne 2, puis ne peut plus revenir en arrière : le texte
       tombait en rangée 2, sous un immeuble qui le regardait de haut. */
    grid-row: 1;
    grid-column: 1;
    margin-inline: 0;
    padding-inline: 0;
    max-width: 100%;
    /* `width` AUSSI, et pas seulement `max-width`. `.mesure` porte
       `width: var(--colonne)`, c'est-à-dire « 100 % moins deux marges » : dans
       une cellule de grille, ces marges se retranchaient une seconde fois et
       le texte s'arrêtait 128 px avant le bord de sa piste. C'est ce vide-là
       qu'on voyait entre le texte et l'immeuble, et il ne venait ni de la
       gouttière ni du dessin. */
    width: 100%;
  }

  .bloc--domaine > .elevation {
    grid-row: 1;
    grid-column: 2;
    max-width: 100%;
    /* LE MASQUE TOMBE ICI. Il vient de la mise en page à 52 rem, où le dessin
       FLOTTE dans le texte : là, un bord franc contre les lignes serait dur, et
       le dégradé l'adoucit. En grille, les deux vivent dans des colonnes
       séparées — le masque n'adoucit plus rien, il mange le tiers gauche du
       dessin et creuse le vide qu'on voyait entre le texte et l'immeuble. */
    -webkit-mask-image: none;
    mask-image: none;
    /* Elle accompagne la lecture au lieu de disparaître au premier
       défilement : un immeuble qui reste en vue pendant qu'on lit sa matière. */
    position: sticky;
    top: 5rem;
  }
}