/* ==========================================================================
   Maître Camille Delorme, avocat à Toulouse
   Feuille de style unique : système de design « La plaque sur la façade »

   Règles d’écriture de cette feuille
   - Mobile d’abord. Points de rupture : 30em (480), 48em (768), 60em (960), 75em (1200).
   - Un sélecteur = une classe (nommage BEM : .bloc, .bloc__element, .bloc--variante).
   - Exceptions admises et documentées :
     1. états natifs ou ARIA sur la même classe ([open], [aria-expanded],
        [aria-current], :hover, :last-child), y compris pour styler un élément enfant
        (ex. .faq__item[open] .faq__marker) ;
     2. contenus rédactionnels (.prose, .legal) : descendants ciblés via :where() pour garder
        une spécificité minimale, afin qu’un composant posé dans un texte garde ses propres styles ;
     3. combinateur de voisinage entre classes identiques pour le rythme (.duo__col + .duo__col) ;
     4. variante de bloc qui recolore ses éléments : l’en-tête posé sur le mur du héros
        de l’accueil (.site-header--overlay .wordmark).
   - Styles d’éléments (h1, p, a…) posés via :where() : spécificité nulle, jamais en conflit.
   - Aucun sélecteur d’ID, aucun !important (sauf bloc « mouvement réduit »), pas de style en ligne.
   - Couleurs : uniquement via les jetons de :root. Une seule couleur d’accent : le pastel (woad).

   Sommaire
    1. Polices
    2. Jetons
    3. Réinitialisation et base
    4. Typographie (titres, texte courant, prose)
    5. Mise en page (conteneur, grille 12 colonnes, sections)
    6. Utilitaires (masquage accessible, lien d’évitement, icônes)
    7. Liens et boutons
    8. En-tête et navigation (menu mobile, liste « Domaines d’intervention »)
    9. Accueil : héros « travelling », plaque
   10. Accueil : domaines, conseil et contentieux, étapes, l’avocat, venir au cabinet
   11. Pages intérieures : en-tête de page, page courte (404), fil d’Ariane, deux colonnes
   12. Composants de contenu
   13. (supprimée : le site n’a pas de formulaire)
   14. Pied de page
   15. Éléments à compléter
   16. (déplacée dans .tools/styleguide.css : guide de style, non publié)
   17. Mouvement (préférences de l’utilisateur)
   18. Impression
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Polices (auto-hébergées, aucune requête vers un service tiers)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/spectral-latin-300-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spectral-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spectral-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/spectral-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/spectral-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
}


/* --------------------------------------------------------------------------
   2. Jetons
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Couleurs : thème clair (par défaut) */
  --c-paper: #F7F8FA;        /* fond de page, blanc froid */
  --c-surface: #EDF0F4;      /* sections teintées, encarts */
  --c-surface-2: #E3E8EF;    /* survol, état pressé */
  --c-ink: #141C2E;          /* texte principal, indigo presque noir */
  --c-ink-soft: #4A5469;     /* texte secondaire (≥ 4.5:1 sur paper et surface) */
  --c-line: #D3D9E2;         /* filets */
  --c-line-strong: #737D92;  /* bordures de champs (≥ 3:1, critère 1.4.11) */
  --c-woad: #27407A;         /* l’accent : liens, bouton principal, focus */
  --c-woad-deep: #1A2B52;    /* survol du bouton principal, émail de la plaque */
  --c-woad-wash: #DFE5F0;    /* lavis de pastel : cadre portrait */
  --c-woad-tint: rgba(39, 64, 122, .07); /* fond très léger : éléments à compléter */
  --c-brique: #B46A5C;       /* façade : une surface, jamais une couleur de texte */
  --c-on-woad: #F3EFE8;      /* lettres gravées, texte sur pastel et sur le mur du héros */
  --c-on-woad-2: #E2D9CB;    /* crème pressée : survol des boutons clairs du héros */
  --c-on-woad-soft: rgba(243, 239, 232, .84); /* texte secondaire sur le mur du héros */

  /* Bouton principal */
  --c-btn: var(--c-woad);
  --c-btn-hover: var(--c-woad-deep);
  --c-btn-text: var(--c-on-woad);

  /* Plaque émaillée */
  --plaque-email: var(--c-woad-deep);
  --plaque-bord: rgba(243, 239, 232, 0);
  --plaque-tranche: #101C3A; /* épaisseur visible sous la plaque */
  --plaque-ombre: 0 .15em .2em rgba(20, 28, 46, .35), 0 1.9em 3.4em -1.25em rgba(20, 28, 46, .75); /* en em : suit la taille de la plaque */
  --brique-texture: url("../img/brique.svg");

  /* Ombres (teintées indigo, jamais gris-noir) */
  --shadow-card: 0 1px 2px rgba(20, 28, 46, .06), 0 10px 28px -14px rgba(20, 28, 46, .22);
  --shadow-pop: 0 2px 4px rgba(20, 28, 46, .06), 0 18px 40px -16px rgba(20, 28, 46, .28);

  /* Familles */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Échelle typographique (px : 14, 16, 18, 21, 24, 30, 36, 48, 60) */
  --fs-14: .875rem;
  --fs-15: .9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-21: 1.3125rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-h1: clamp(2.4rem, 4.2vw, 3.75rem);
  --fs-h2: clamp(1.9rem, 3vw, 2.25rem);
  --fs-h3: 1.5rem;

  /* Espacements (rem : 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8) */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-pad: clamp(3rem, 1.9rem + 4.2vw, 5.75rem);

  /* Mise en page */
  --container: 1200px;
  --gutter: 1rem;
  --gap: 1.5rem;
  --header-h: 4rem;
  --measure: 66ch;

  /* Formes */
  --r-ui: 2px;      /* tout élément interactif, champ, encart, cadre */
  --r-plaque: 6px;  /* la plaque seulement : c’est un objet */

  /* Mouvement */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --hero-duree: 2s;                          /* recul de la caméra du héros (section 17) */
  --hero-fin: calc(var(--hero-duree) + .4s); /* entrée de l’en-tête et du bandeau du héros */
}

@media (min-width: 30em) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (min-width: 60em) {
  :root {
    --gap: 2rem;
    --header-h: 4.5rem;
  }
}


/* --------------------------------------------------------------------------
   3. Réinitialisation et base
   Les styles d’éléments sont posés via :where() : spécificité nulle,
   toute classe de composant les remplace sans conflit.
   -------------------------------------------------------------------------- */

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

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s-5);
}

:where(body) {
  margin: 0;
  min-height: 100vh;
  background-color: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  line-height: 1.65;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  overflow-wrap: break-word; /* un mot plus large que la ligne (texte agrandi) se coupe au lieu de déborder */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, address, fieldset, pre) {
  margin: 0;
}

:where(ul, ol) {
  padding: 0;
}

:where(img, svg, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(address) {
  font-style: normal;
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(button) {
  cursor: pointer;
}

:where(hr) {
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--c-line);
}

:where(strong, b) {
  font-weight: 600;
}

:where(abbr[title]) {
  text-decoration: underline dotted;
  text-underline-offset: .15em;
}

::selection {
  background-color: var(--c-woad);
  color: var(--c-paper);
}

/* Focus visible : anneau pastel 2px, décalé de 3px, sur tout élément focalisable */
:focus-visible {
  outline: 2px solid var(--c-woad);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

[hidden] {
  display: none;
}


/* --------------------------------------------------------------------------
   4. Typographie
   -------------------------------------------------------------------------- */

:where(h1, h2, h3, h4) {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--c-ink);
  text-wrap: balance;
}

:where(h1),
.h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
}

:where(h2),
.h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
}

:where(h3),
.h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
}

:where(h4),
.h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.35;
}

:where(p, li, dd) {
  text-wrap: pretty;
}

/* Exposant (1er, 9e) : ne creuse pas l’interligne de la ligne qui le porte */
:where(sup) {
  font-size: .7em;
  line-height: 0;
  vertical-align: super;
}

/* Chapeau : paragraphe d’introduction sous un titre */
.lead {
  font-size: var(--fs-21);
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: 60ch;
}

/* Petit texte d’interface (méta, mentions) */
.meta {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--c-ink-soft);
}

/* Prose : texte juridique long (pages domaines, cabinet, honoraires).
   Mesure 66 caractères, rythme vertical régulier, titres aérés. */
.prose {
  max-width: var(--measure);
}

:where(.prose) > * + * {
  margin-block-start: 1.25rem;
}

:where(.prose) > :where(h2) {
  margin-block-start: 3.25rem;
  font-size: var(--fs-30);
  line-height: 1.2;
  scroll-margin-top: var(--s-5);
}

:where(.prose) > :where(h3) {
  margin-block-start: 2.25rem;
  font-size: var(--fs-21);
  font-weight: 500;
  line-height: 1.3;
  scroll-margin-top: var(--s-5);
}

:where(.prose) > :where(h2, h3) + * {
  margin-block-start: .75rem;
}

/* Composant à filets juste sous un intertitre : plus d’air, pour que le premier
   filet ne se lise pas comme un soulignement du titre. */
:where(.prose) > :where(h2, h3) + :where(.situations, .tarifs, .faq) {
  margin-block-start: var(--s-5);
}

/* Encadré juste après un composant à filets (questions fréquentes en fin de page
   domaine) : il se détache du dernier filet au lieu de s’y coller. */
:where(.prose) > :where(.situations, .tarifs, .faq) + :where(.callout) {
  margin-block-start: var(--s-7);
}

:where(.prose) > :where(:first-child) {
  margin-block-start: 0;
}

/* Listes et liens « bruts » seulement (sans classe) : les composants posés
   dans la prose (.situations, .faq, .related…) gardent leurs propres règles. */
:where(.prose) :where(ul:not([class]), ol:not([class])) {
  padding-inline-start: 1.25rem;
}

:where(.prose) :where(ul:not([class]), ol:not([class])) > :where(li) {
  padding-inline-start: .25rem;
}

:where(.prose) :where(ul:not([class]), ol:not([class])) > :where(li + li) {
  margin-block-start: .5rem;
}

:where(.prose) :where(ul:not([class])) > :where(li)::marker {
  color: var(--c-woad);
}

:where(.prose) :where(ol:not([class])) > :where(li)::marker {
  color: var(--c-woad);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 500;
}

:where(.prose) :where(a:not([class])) {
  color: var(--c-woad);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

:where(.prose) :where(a:not([class])):hover {
  text-decoration-thickness: 2px;
  text-underline-offset: .24em;
}

:where(.prose) :where(blockquote) {
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--c-line);
  color: var(--c-ink-soft);
}

:where(.prose) :where(blockquote) > * + * {
  margin-block-start: .75rem;
}

/* Citation d’un texte de loi : <figure> (sans classe) > <blockquote> + <figcaption class="meta">
   (source : « Article 1641 du Code civil »), alignée sur le texte cité. */
:where(.prose) :where(figure:not([class])) > :where(figcaption) {
  margin-block-start: .5rem;
  padding-inline-start: calc(1.25rem + 2px);
}

:where(.prose) :where(em) {
  font-style: italic;
}


/* --------------------------------------------------------------------------
   5. Mise en page
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Grille 12 colonnes à partir de 960px ; une seule colonne en dessous.
   Placement : .span-N (largeur) et .start-N (colonne de départ). */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6) var(--gap);
}

@media (min-width: 60em) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .span-3 { grid-column-end: span 3; }
  .span-4 { grid-column-end: span 4; }
  .span-5 { grid-column-end: span 5; }
  .span-6 { grid-column-end: span 6; }
  .span-7 { grid-column-end: span 7; }
  .span-8 { grid-column-end: span 8; }
  .span-9 { grid-column-end: span 9; }
  .span-10 { grid-column-end: span 10; }
  .span-11 { grid-column-end: span 11; }
  .span-12 { grid-column-end: span 12; }
  .start-1 { grid-column-start: 1; }
  .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
  .start-9 { grid-column-start: 9; }
}

/* Sections : seul l’espacement vertical est géré ici */
.section {
  padding-block: var(--section-pad);
}

.section--tinted {
  background-color: var(--c-surface);
}

.section--rule {
  border-top: 1px solid var(--c-line);
}

.section--tight {
  padding-block: calc(var(--section-pad) * .66);
}

/* En-tête de section : titre puis texte, empilés (jamais côte à côte) */
.section-head {
  max-width: 44rem;
  margin-block-end: var(--s-7);
}

.section-head__title {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.section-head__lead {
  margin-block-start: var(--s-4);
  color: var(--c-ink-soft);
  max-width: 58ch;
}


/* --------------------------------------------------------------------------
   6. Utilitaires
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d’évitement « Aller au contenu » : premier élément focalisable */
.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background-color: var(--c-btn);
  color: var(--c-btn-text);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-ui);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Icônes Phosphor « light » en ligne : <svg class="icon" aria-hidden="true" focusable="false"> */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -.25em;
  fill: currentColor;
}

/* Garde ensemble un nom composé ou une adresse (Jean-Pierre, Saint-Gaudens).
   Bloc en ligne plutôt que white-space: nowrap : le groupe passe à la ligne entier,
   et ne se coupe que s’il est plus large que la ligne (texte agrandi à 200 %),
   au lieu de déborder de l’écran. Jamais à l’intérieur d’un lien. */
.nowrap {
  display: inline-block;
  text-decoration: inherit;
}

.icon--sm {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
}

.icon--lg {
  width: 1.5em;
  height: 1.5em;
}


/* --------------------------------------------------------------------------
   7. Liens et boutons
   -------------------------------------------------------------------------- */

:where(a) {
  color: var(--c-woad);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

:where(a):hover {
  text-decoration-thickness: 2px;
  text-underline-offset: .24em;
}

/* Lien descriptif avec flèche (icône Phosphor, jamais de flèche typographique en texte).
   Zone tactile : 12 + 20,8 + 12 = 44,8px. */
.link-arrow {
  display: inline-block;
  padding-block: .75rem;
  color: var(--c-woad);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.3;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: .3em;
}

.link-arrow:hover {
  text-decoration-color: currentColor;
}

.link-arrow__icon {
  display: inline-block;
  width: 1.125em;
  height: 1.125em;
  margin-inline-start: .25rem;
  vertical-align: -.2em;
  fill: currentColor;
}

/* Lien discret (texte secondaire) */
.link-quiet {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--c-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.link-quiet:hover {
  color: var(--c-woad);
  text-decoration-color: currentColor;
}

/* Boutons. Variantes : --ghost (contour), --small, --large, --block ;
   sur le mur du héros (fond sombre) : --light (crème plein), --ghost-light (contour crème) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3rem;
  padding: .75rem 1.375rem;
  border: 1px solid var(--c-btn);
  border-radius: var(--r-ui);
  background-color: var(--c-btn);
  color: var(--c-btn-text);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.25; /* = hauteur de l’icône (1,25em) : même hauteur avec ou sans icône */
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  text-wrap: balance; /* sous 768px, un libellé peut passer à la ligne (texte agrandi à 200 %) */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 48em) {
  .btn {
    white-space: nowrap;
  }
}

.btn:hover {
  border-color: var(--c-btn-hover);
  background-color: var(--c-btn-hover);
  color: var(--c-btn-text);
}

.btn:focus-visible {
  outline: 2px solid var(--c-woad);
  outline-offset: 3px;
}

.btn--ghost {
  border-color: var(--c-woad);
  background-color: transparent;
  color: var(--c-woad);
}

.btn--ghost:hover {
  border-color: var(--c-woad);
  background-color: var(--c-surface-2);
  color: var(--c-woad);
}

.btn--light {
  border-color: var(--c-on-woad);
  background-color: var(--c-on-woad);
  color: var(--c-woad-deep);
}

.btn--light:hover {
  border-color: var(--c-on-woad-2);
  background-color: var(--c-on-woad-2);
  color: var(--c-woad-deep);
}

.btn--ghost-light {
  border-color: rgba(243, 239, 232, .62);
  background-color: rgba(15, 21, 36, .2);
  color: var(--c-on-woad);
}

.btn--ghost-light:hover {
  border-color: var(--c-on-woad);
  background-color: rgba(243, 239, 232, .12);
  color: var(--c-on-woad);
}

.btn--light:focus-visible,
.btn--ghost-light:focus-visible {
  outline-color: var(--c-on-woad);
}

.btn--small {
  min-height: 2.75rem; /* 44px : reste une cible tactile (tablette à l’horizontale) */
  padding: .5rem 1rem;
  font-size: var(--fs-15);
}

.btn--large {
  min-height: 3.5rem;
  padding: .9375rem 1.75rem;
  font-size: var(--fs-18);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn__icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  flex-shrink: 0;
}

/* Groupe de boutons */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

/* --------------------------------------------------------------------------
   8. En-tête et navigation
   Sans JavaScript : le bouton « Menu » reste masqué (attribut hidden) et la
   navigation s’affiche en liste sous le nom.
   JavaScript activé : sous 960px, le menu est replié dès le premier affichage
   (@media (scripting: enabled)), sans attendre main.js, chargé avec defer :
   pas de saut de mise en page à l’arrivée. main.js retire ensuite hidden du
   bouton et pose .site-nav--collapsible et .site-nav__panel--collapsible
   (mêmes règles, pour les navigateurs qui ignorent « scripting »), puis
   --open à l’ouverture. Si main.js ne se charge pas, la liste « Rubriques »
   du pied de page donne accès à toutes les pages.
   Bureau (≥ 960px) : une seule ligne, 72px de haut, avec ou sans JS.
   « Domaines d’intervention » : élément <details> (fonctionne sans JS),
   amélioré par main.js (Échap, clic extérieur, perte de focus).
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 20;
  background-color: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap; /* sans JS, la navigation passe à la ligne sous le nom */
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  min-height: calc(var(--header-h) - 1px); /* + filet inférieur = 72px au total sur bureau */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Nom sur deux lignes */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: .125rem;
  padding-block: var(--s-2);
  color: var(--c-ink);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--c-ink);
}

.wordmark__name {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.005em;
}

.wordmark__title {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--c-ink-soft);
}

/* Très petits écrans (320px, ou zoom à 400 %) : le nom et le bouton « Menu »
   tiennent sur une ligne, l’en-tête garde sa hauteur de 64px (sinon le panneau
   du menu, haut de 100dvh moins --header-h, dépasserait). Règles du bouton plus bas. */
@media (max-width: 22.49em) {
  .site-header__inner {
    column-gap: var(--s-2);
  }

  .wordmark__name {
    font-size: var(--fs-16);
  }

  .wordmark__title {
    letter-spacing: 0;
  }
}

/* Sans JS : la navigation occupe toute une ligne sous le nom */
.site-nav {
  flex-basis: 100%;
  padding-block-end: var(--s-4);
}

.site-nav--collapsible {
  flex-basis: auto;
  padding-block-end: 0;
}

/* Bouton « Menu » (mobile) : masqué tant que main.js ne l’a pas activé */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin-inline-end: -.5rem;
  padding: .5rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--r-ui);
  background-color: transparent;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1;
}

.site-nav__toggle:hover {
  background-color: var(--c-surface);
}

@media (max-width: 22.49em) {
  .site-nav__toggle {
    padding-inline: .5rem;
  }
}

.site-nav__toggle[aria-expanded="true"] {
  border-color: var(--c-line);
  background-color: var(--c-surface);
}

.site-nav__toggle[hidden] {
  display: none;
}

.site-nav__toggle-icon {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
}

/* Panneau : sans JS, simple liste dans le flux (aucun style ici).
   Avec JS (--collapsible), menu déroulant fermé par défaut sous 960px. */
.site-nav__panel--collapsible {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--s-2) var(--gutter) var(--s-6);
  background-color: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-pop);
}

/* Même état replié dès le premier affichage quand JavaScript est activé
   (copie de --collapsible) : rien ne bouge quand main.js s’exécute. */
@media (scripting: enabled) and (max-width: 59.99em) {
  .site-nav {
    flex-basis: auto;
    padding-block-end: 0;
  }

  .site-nav__toggle[hidden] {
    display: inline-flex;
  }

  .site-nav__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--s-2) var(--gutter) var(--s-6);
    background-color: var(--c-paper);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-pop);
  }
}

.site-nav__panel--open {
  display: block;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__item {
  border-bottom: 1px solid var(--c-line);
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: 500;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--c-woad);
}

.site-nav__link[aria-current="page"] {
  color: var(--c-woad);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

/* Mobile : bouton à taille tactile (48px) ; réduit à --small sur bureau */
.site-nav__cta {
  min-height: 3rem;
  margin-block-start: var(--s-5);
  font-size: var(--fs-16);
}

/* Liste « Domaines d’intervention » */
.nav-domaines__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .375rem;
  min-height: 3.25rem;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-domaines__toggle::-webkit-details-marker {
  display: none;
}

.nav-domaines__toggle:hover {
  color: var(--c-woad);
}

/* Rubrique courante (pages domaines) : classe et aria-current="true" posés par
   .tools/sync-partials.mjs. Couleur ET soulignement, à toutes les largeurs. */
.nav-domaines__toggle--current {
  color: var(--c-woad);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}

.nav-domaines__caret {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  flex-shrink: 0;
}

.nav-domaines[open] .nav-domaines__caret {
  transform: rotate(180deg);
}

.nav-domaines__list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s-3) var(--s-4);
  border-inline-start: 1px solid var(--c-line);
  margin-inline-start: .125rem;
}

.nav-domaines__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--s-3) 0;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
}

.nav-domaines__link:hover {
  color: var(--c-woad);
  text-decoration-line: underline;
  text-underline-offset: .3em;
}

/* Page courante : couleur ET soulignement, comme les autres liens courants
   (la couleur seule ne se distingue pas assez : 1,7:1 entre pastel et encre) */
.nav-domaines__link[aria-current="page"] {
  color: var(--c-woad);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}

/* Bureau */
@media (min-width: 60em) {
  .site-nav__toggle {
    display: none;
  }

  .site-nav__panel,
  .site-nav__panel--collapsible,
  .site-nav__panel--open {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
    box-shadow: none;
  }

  .site-nav,
  .site-nav--collapsible {
    flex-basis: auto;
    padding-block-end: 0;
  }

  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }

  .site-nav__item {
    border-bottom: 0;
  }

  .site-nav__link,
  .nav-domaines__toggle {
    min-height: 2.75rem;
    padding-inline: .25rem;
    font-size: var(--fs-15);
    white-space: nowrap;
  }

  .site-nav__link:hover,
  .nav-domaines__toggle:hover {
    color: var(--c-woad);
  }

  .site-nav__link[aria-current="page"] {
    text-underline-offset: .55em;
  }

  .nav-domaines__toggle--current {
    text-underline-offset: .55em;
  }

  .site-nav__cta {
    min-height: 2.75rem;
    margin-block-start: 0;
    font-size: var(--fs-15);
  }

  .nav-domaines {
    position: relative;
  }

  .nav-domaines__list {
    position: absolute;
    top: calc(100% + .875rem);
    left: -1.25rem;
    z-index: 30;
    min-width: 21rem;
    margin: 0;
    padding: var(--s-2) 0;
    background-color: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r-ui);
    box-shadow: var(--shadow-pop);
  }

  .nav-domaines__link {
    min-height: 2.75rem;
    padding: .5rem 1.25rem;
    font-size: var(--fs-15);
  }

  .nav-domaines__link:hover {
    background-color: var(--c-surface);
  }
}


/* En-tête posé sur le mur du héros (accueil) : variante ajoutée par
   .tools/sync-partials.mjs. Fond transparent, texte crème ; le panneau du menu
   mobile et la liste des domaines gardent leur fond papier.
   Seulement quand le menu mobile est replié (JavaScript) ou sur bureau : sans
   JavaScript sur mobile, la liste des rubriques s’afficherait sur la plaque ;
   l’en-tête reste alors au-dessus du héros, sur fond papier. */
@media (scripting: enabled), (min-width: 60em) {
  .site-header--overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: transparent;
    border-bottom-color: transparent;
  }

  .site-header--overlay .wordmark,
  .site-header--overlay .wordmark:hover {
    color: var(--c-on-woad);
  }

  .site-header--overlay .wordmark__title {
    color: var(--c-on-woad-soft);
  }

  .site-header--overlay .site-nav__toggle {
    border-color: rgba(243, 239, 232, .5);
    color: var(--c-on-woad);
  }

  .site-header--overlay .site-nav__toggle:hover,
  .site-header--overlay .site-nav__toggle[aria-expanded="true"] {
    border-color: var(--c-on-woad);
    background-color: rgba(243, 239, 232, .14);
  }

  .site-header--overlay .wordmark:focus-visible,
  .site-header--overlay .site-nav__toggle:focus-visible {
    outline-color: var(--c-on-woad);
  }
}

@media (min-width: 60em) {
  .site-header--overlay .site-nav__link,
  .site-header--overlay .nav-domaines__toggle {
    color: var(--c-on-woad);
  }

  .site-header--overlay .site-nav__link:hover,
  .site-header--overlay .nav-domaines__toggle:hover {
    color: var(--c-on-woad);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .55em;
  }

  .site-header--overlay .site-nav__cta {
    border-color: rgba(243, 239, 232, .62);
    background-color: rgba(15, 21, 36, .2);
    color: var(--c-on-woad);
  }

  .site-header--overlay .site-nav__cta:hover {
    border-color: var(--c-on-woad);
    background-color: rgba(243, 239, 232, .12);
    color: var(--c-on-woad);
  }

  .site-header--overlay .site-nav__link:focus-visible,
  .site-header--overlay .nav-domaines__toggle:focus-visible,
  .site-header--overlay .site-nav__cta:focus-visible {
    outline-color: var(--c-on-woad);
  }
}


/* --------------------------------------------------------------------------
   9. Accueil : héros « travelling », plaque
   Le mur de brique occupe tout le premier écran ; l’en-tête est posé dessus
   (.site-header--overlay, section 8). Trois couches :
   - .hero__scene : la « caméra ». C’est la zone de la plaque, entre l’en-tête
     et le bandeau : la plaque y est centrée, et le mur (.hero__mur) déborde
     largement pour couvrir tout le héros quel que soit le cadrage.
     Au repos : scale(--hero-recul) ;
   - les voiles sombres (::before en haut sous l’en-tête, ::after en vignette,
     .hero__bandeau::before en bas) : texte crème lisible sur la brique ;
   - .hero__bandeau : titre, domaines, actions.
   Mouvement (section 17) : gros plan sur la plaque au centre de l’écran
   (--hero-zoom, scène décalée de --hero-depart), gravure du nom, vis ; puis la
   caméra recule (--hero-duree) et le bandeau entre (--hero-fin).
   Sans mouvement (préférence de l’utilisateur, impression) : l’état final.
   Réglages : téléphone par défaut, tablette (≥ 768px), bureau (≥ 960px).
   -------------------------------------------------------------------------- */

.hero {
  --hero-zoom: 1.2;       /* gros plan de départ */
  --hero-recul: .8;       /* cadrage final : la caméra recule au-delà de la taille de pose */
  --hero-depart: 10.5rem; /* départ au centre de l’écran : (bandeau − en-tête) / 2 */
  --hero-vis: 2.1s;       /* les vis se serrent pendant le recul */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  overflow: hidden;
  background-color: var(--c-brique);
  color: var(--c-on-woad);
}

/* En-tête posé sur le mur (même condition qu’en section 8) : tout l’écran */
@media (scripting: enabled), (min-width: 60em) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-block-start: var(--header-h);
  }
}

@media (min-width: 48em) {
  .hero {
    --hero-zoom: 1.6;
    --hero-recul: 1;
    --hero-depart: 6.5rem;
    --hero-vis: .45s; /* plaque entière dans le gros plan : les vis se serrent avant le recul */
  }
}

@media (min-width: 60em) {
  .hero {
    --hero-zoom: 1.9;   /* gros plan modéré : le mur reste visible autour de la plaque */
    --hero-recul: .9;   /* la caméra recule au-delà de la taille de pose */
    --hero-depart: 4rem;
  }
}

/* Voile du haut (lisibilité de l’en-tête) et vignette */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero::before {
  bottom: auto;
  height: 9rem;
  background-image: linear-gradient(rgba(15, 21, 36, .55), rgba(15, 21, 36, 0));
}

.hero::after {
  background-image: radial-gradient(ellipse 80% 75% at 50% 45%, rgba(15, 21, 36, 0) 55%, rgba(15, 21, 36, .4) 100%);
}

/* La caméra : zone de la plaque, entre l’en-tête et le bandeau */
.hero__scene {
  position: relative;
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  padding: var(--s-5) var(--gutter);
  transform: scale(var(--hero-recul));
}

/* Le mur : la texture du site. Il déborde de la zone pour couvrir tout le héros
   (en-tête et bandeau compris) au cadrage le plus large, sans jamais laisser
   voir son bord pendant le travelling. */
.hero__mur {
  position: absolute;
  inset: -30vh -20vw -100vh;
  background-color: var(--c-brique);
  background-image: var(--brique-texture);
  background-size: 924px 510px; /* tuile de .tools/brique.mjs à 75 % */
  background-position: 50% 0;
}

/* Lumière chaude sur la plaque */
.hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(ellipse 45% 55% at 50% 50%, rgba(255, 228, 200, .22), rgba(255, 228, 200, 0) 72%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Taille de la plaque : toutes ses cotes sont en em */
.hero__plaque {
  position: relative;
  z-index: 2;
  width: 30em;
  max-width: 100%;
  font-size: .6875rem;
}

@media (min-width: 48em) {
  .hero__mur {
    inset: -6rem 0 -24rem; /* recul jusqu’à 1 : déborder de l’en-tête et du bandeau suffit */
    background-size: 1232px 680px;
  }

  .hero__plaque {
    font-size: .8125rem;
  }
}

@media (min-width: 60em) {
  .hero__mur {
    inset: -30vh -15vw -60vh; /* recul jusqu’à .9 (marge jusqu’à .8) : couvrir tout le héros, en-tête et bandeau compris */
    background-size: 1540px 850px; /* tuile à 125 % : la plaque couvre environ deux briques et demie */
  }

  .hero__plaque {
    font-size: clamp(.8125rem, 1.2vw, 1.125rem);
  }
}

/* Plaque émaillée : pastel profond, filet gravé intérieur, quatre vis.
   Cotes en em : la taille se règle sur le parent (.hero__plaque). */
.plaque {
  position: relative;
  display: block;
  padding: 1.6em;
  border: 1px solid var(--plaque-bord);
  border-radius: var(--r-plaque);
  background-color: var(--plaque-email);
  background-image:
    linear-gradient(158deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .02) 34%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(0deg, rgba(5, 10, 26, .18) 0%, rgba(5, 10, 26, 0) 30%);
  color: var(--c-on-woad);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(243, 239, 232, .16),
    inset 0 -1px 0 rgba(5, 10, 26, .4),
    0 2px 0 var(--plaque-tranche),
    var(--plaque-ombre);
}

/* Champ gravé : filet intérieur en creux */
.plaque__champ {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.1em .8em 1.9em;
  border: 1px solid rgba(243, 239, 232, .42);
  border-radius: .2em;
  box-shadow: 0 1px 0 rgba(5, 10, 26, .35), inset 0 1px 0 rgba(5, 10, 26, .35);
  font-family: var(--font-serif);
  text-align: center;
  text-shadow: 0 1px 0 rgba(5, 10, 26, .45);
}

.plaque__prenom {
  display: block;
  font-size: 1.7em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .05em;
}

.plaque__nom {
  display: block;
  margin-block-start: .08em;
  margin-inline-end: -.16em;
  font-size: 2.35em;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .16em;
  text-transform: uppercase;
  overflow-wrap: anywhere; /* texte agrandi à 200 % : coupe plutôt que déborder */
}

.plaque__filet {
  display: block;
  width: 3.6em;
  height: 1px;
  margin-block: 1.25em 1.1em;
  background-color: rgba(243, 239, 232, .6);
  box-shadow: 0 1px 0 rgba(5, 10, 26, .4);
}

.plaque__titre {
  display: block;
  font-size: 1.6em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}

.plaque__barreau {
  display: block;
  margin-block-start: .55em;
  margin-inline-end: -.2em;
  font-size: .98em;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .92;
}

/* Vis à tête fendue, une par angle, fentes orientées différemment */
.plaque__vis {
  --fente: 35deg;
  position: absolute;
  z-index: 1;
  width: .72em;
  height: .72em;
  border-radius: 50%;
  background-image:
    linear-gradient(var(--fente), transparent 42%, rgba(40, 38, 36, .62) 43%, rgba(40, 38, 36, .62) 57%, transparent 58%),
    radial-gradient(circle at 34% 30%, #F6F3EE 0%, #CFCAC1 42%, #8E897F 100%);
  box-shadow: 0 1px 1.5px rgba(5, 10, 26, .55), inset 0 -.5px .5px rgba(0, 0, 0, .3);
}

.plaque__vis--hg { top: .55em; left: .55em; --fente: 28deg; }
.plaque__vis--hd { top: .55em; right: .55em; --fente: 112deg; }
.plaque__vis--bg { bottom: .55em; left: .55em; --fente: 74deg; }
.plaque__vis--bd { bottom: .55em; right: .55em; --fente: 151deg; }

/* Reflet qui balaie l’émail (section 17) ; hors champ au repos */
.plaque__reflet {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .15) 48%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-120%);
  pointer-events: none;
}

/* Bandeau : voile sombre derrière, prolongé vers le haut en dégradé */
.hero__bandeau {
  position: relative;
  z-index: 2;
  padding-block-end: var(--s-5);
}

.hero__bandeau::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: calc(100% + 10rem);
  background-image: linear-gradient(0deg, rgba(15, 21, 36, .93) 0%, rgba(15, 21, 36, .82) calc(100% - 10rem), rgba(15, 21, 36, 0) 100%);
  pointer-events: none;
}

.hero__trait {
  display: block;
  height: 1px;
  background-color: rgba(243, 239, 232, .42);
  transform-origin: left center;
}

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5) var(--gap);
  padding-block-start: var(--s-5);
}

.hero__title {
  font-size: clamp(1.875rem, 2.8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--c-on-woad);
}

.hero__domaines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__domaine + .hero__domaine {
  border-top: 1px solid rgba(243, 239, 232, .18);
}

.hero__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 2.75rem;
  color: var(--c-on-woad);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.hero__lien:hover {
  color: var(--c-on-woad);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
}

.hero__lien:focus-visible {
  outline-color: var(--c-on-woad);
}

.hero__lien-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  flex-shrink: 0;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

/* Tablette : titre sur toute la largeur, domaines et actions côte à côte */
@media (min-width: 48em) {
  .hero__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__title {
    grid-column: 1 / -1;
  }
}

/* Bureau : un « générique » sur la grille 12 colonnes */
@media (min-width: 60em) {
  .hero__bandeau {
    padding-block-end: var(--s-6);
  }

  .hero__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    padding-block-start: var(--s-6);
  }

  .hero__title {
    grid-column: 1 / span 5;
  }

  .hero__domaines {
    grid-column: 6 / span 4;
  }

  .hero__actions {
    grid-column: 10 / span 3;
  }
}


/* --------------------------------------------------------------------------
   10. Accueil : sections
   -------------------------------------------------------------------------- */

/* 10.1 Domaines : colonne de titre collante à gauche, domaines empilés à droite */
.domaines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.domaines__title {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.domaines__intro {
  margin-block-start: var(--s-4);
  color: var(--c-ink-soft);
  max-width: 34rem;
}

.domaines__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 60em) {
  .domaines {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .domaines__head {
    grid-column: 1 / span 4;
    align-self: start;
    position: sticky;
    top: var(--s-6);
  }

  .domaines__list {
    grid-column: 6 / span 7;
  }
}

.domaine {
  padding-block: var(--s-6) var(--s-7);
  border-top: 1px solid var(--c-line);
}

.domaine:last-child {
  padding-block-end: 0;
}

.domaine__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
}

.domaine__text {
  margin-block-start: var(--s-3);
  max-width: 60ch;
}

.domaine__situations {
  margin-block-start: 1.25rem;
}

.domaine__link {
  margin-block-start: var(--s-3);
}

/* Liste de situations en ligne : discrète, séparée par des filets verticaux */
.situations-inline {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-inline-start: calc(-1 * (.75rem + 1px));
  padding: 0;
  /* masque le filet du premier élément de chaque ligne */
  clip-path: inset(0 0 0 calc(.75rem + 1px));
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.4;
  color: var(--c-ink-soft);
}

.situations-inline__item {
  margin-block: .1875rem;
  padding-inline: .75rem;
  border-inline-start: 1px solid var(--c-line-strong);
}

/* Téléphone : espaces resserrés, moins de mots-clés isolés en fin de ligne */
@media (max-width: 29.99em) {
  .situations-inline {
    margin-inline-start: calc(-1 * (.5rem + 1px));
    clip-path: inset(0 0 0 calc(.5rem + 1px));
  }

  .situations-inline__item {
    padding-inline: .5rem;
  }
}

/* 10.2 Conseil et contentieux : deux colonnes séparées par un filet vertical */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.duo__col {
  max-width: 34rem;
}

.duo__col + .duo__col {
  padding-block-start: var(--s-6);
  border-top: 1px solid var(--c-line);
}

.duo__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
}

.duo__text {
  margin-block-start: var(--s-3);
}

@media (min-width: 48em) {
  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .duo__col {
    padding-inline-end: var(--s-7);
  }

  .duo__col + .duo__col {
    padding-block-start: 0;
    padding-inline: var(--s-7) 0;
    border-top: 0;
    border-inline-start: 1px solid var(--c-line-strong);
  }
}

/* 10.3 Étapes : une vraie séquence, numérotée. Verticale sur mobile, horizontale sur bureau. */
.etapes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.etape {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--s-4);
}

.etape__num {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-serif);
  font-size: var(--fs-36);
  font-weight: 300;
  line-height: 1;
  color: var(--c-woad);
  font-variant-numeric: lining-nums;
}

.etape__num::after {
  content: "";
  flex: 1;
  width: 1px;
  margin-block: var(--s-3);
  background-color: var(--c-line-strong);
}

.etape:last-child .etape__num::after {
  background-color: transparent;
}

.etape__title {
  padding-block-start: .375rem;
  font-size: var(--fs-21);
  font-weight: 500;
  line-height: 1.3;
}

.etape__text {
  margin-block-start: var(--s-2);
  padding-block-end: var(--s-6);
  font-size: var(--fs-18);
}

@media (min-width: 60em) {
  .etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .etape {
    display: block;
  }

  .etape__num {
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
    font-size: var(--fs-48);
  }

  .etape__num::after {
    width: auto;
    height: 1px;
    margin-block: 0;
    margin-inline-end: calc(-1 * var(--gap) + var(--s-4)); /* s’arrête 1rem avant le chiffre suivant */
  }

  .etape:last-child .etape__num::after {
    margin-inline-end: 0;
    background-color: var(--c-line-strong);
  }

  .etape__title {
    padding-block-start: var(--s-5);
  }

  .etape__text {
    padding-block-end: 0;
    padding-inline-end: var(--s-2);
  }
}

/* 10.4 L’avocat : portrait (4:5) et biographie */
.avocat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}

.avocat__portrait {
  max-width: 16rem;
}

.avocat__title {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.avocat__bio {
  margin-block-start: var(--s-5);
  max-width: 60ch;
}

.avocat__bio + .avocat__bio {
  margin-block-start: var(--s-4);
}

.avocat__link {
  margin-block-start: var(--s-4);
}

/* Les deux actions de contact après la biographie (cabinet.html seulement) */
.avocat__actions {
  margin-block-start: var(--s-6);
}

/* Empilées, même largeur : sur téléphone (pleine largeur) et entre 768 et 960px,
   où la colonne de texte est trop étroite pour deux boutons (comme le héros) */
@media (max-width: 29.99em), (min-width: 48em) and (max-width: 59.99em) {
  .avocat__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 48em) and (max-width: 59.99em) {
  .avocat__actions {
    max-width: 18rem;
  }
}

@media (min-width: 48em) {
  .avocat {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-7);
  }

  .avocat__portrait {
    max-width: none;
  }
}

@media (min-width: 60em) {
  .avocat {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .avocat__portrait {
    grid-column: 1 / span 4;
    max-width: none;
  }

  .avocat__body {
    grid-column: 6 / span 6;
  }
}

/* 10.5 Venir au cabinet : l’adresse comme objet typographique.
   Bureau : adresse et actions à gauche (colonnes 1 à 5), liste libellé / valeur
   à droite (colonnes 7 à 12, même axe que la seconde colonne de .duo).
   Téléphone et tablette : tout s’empile, libellé au-dessus de la valeur. */
.venir__title {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.venir__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  margin-block-start: var(--s-6);
}

.venir__adresse {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); /* 28px à 390, 48px au plus : sous le h1 */
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--c-ink);
}

.venir__ville {
  display: block;
  color: var(--c-ink-soft);
}

.venir__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.venir__infos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block-start: var(--s-4); /* + écart de la grille (2rem) = 3rem */
}

.venir__info {
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-line);
}

.venir__label {
  display: flex;
  align-items: baseline; /* ligne de base du libellé = celle du texte (alignée sur la valeur) */
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-ink-soft);
}

.venir__icon {
  align-self: center;
}

.venir__value {
  margin-block-start: var(--s-2);
  font-size: var(--fs-18);
  line-height: 1.5;
}

@media (min-width: 60em) {
  .venir__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr; /* la hauteur en plus des coordonnées va sous les actions */
    column-gap: var(--gap);
    row-gap: var(--s-6);
    align-items: start;
  }

  /* Piste de 6 colonnes : « 12, rue des Lois » tient sur une ligne ; le texte,
     plus court que la piste, laisse au moins 3rem d’air avant la colonne 7. */
  .venir__adresse {
    grid-column: 1 / span 6;
  }

  .venir__actions {
    grid-column: 1 / span 5;
    grid-row: 2;
  }

  .venir__infos {
    grid-column: 7 / span 6;
    grid-row: 1 / span 2;
    margin-block-start: 0;
  }

  .venir__info {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: baseline;
  }

  .venir__value {
    margin-block-start: 0;
  }
}


/* --------------------------------------------------------------------------
   11. Pages intérieures
   -------------------------------------------------------------------------- */

/* En-tête de page : fil d’Ariane, h1, chapeau */
.page-head {
  padding-block: var(--s-6) var(--s-7);
  border-bottom: 1px solid var(--c-line);
}

.page-head__title {
  max-width: 18em;
  margin-block-start: var(--s-6);
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -.015em;
}

.page-head__lead {
  max-width: 60ch;
  margin-block-start: var(--s-5);
  font-size: var(--fs-21);
  line-height: 1.5;
  color: var(--c-ink-soft);
}

@media (min-width: 60em) {
  .page-head {
    padding-block: var(--s-6) var(--s-8);
  }

}

/* Page courte centrée : réservée à la page 404, seule mise en page centrée du site.
   S’utilise avec .container. */
.page-short {
  max-width: calc(40rem + 2 * var(--gutter));
  padding-block: var(--section-pad);
  text-align: center;
}

.page-short__title {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -.015em;
}

.page-short__lead {
  margin-block-start: var(--s-5);
  font-size: var(--fs-21);
  line-height: 1.5;
  color: var(--c-ink-soft);
}

/* Deux boutons de même largeur : empilés sur téléphone, côte à côte au-delà */
.page-short__actions {
  display: inline-grid;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}

@media (min-width: 30em) {
  .page-short__actions {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }
}

/* Liens connexes dans la page courte (nav.related.page-short__nav) : bloc centré
   dans la page, libellés alignés à gauche comme partout ailleurs */
.page-short__nav {
  margin-inline: auto;
}

.page-short__list {
  text-align: start;
}

/* Fil d’Ariane */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.4;
  color: var(--c-ink-soft);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/" / "";
  margin-inline: .625rem;
  color: var(--c-line-strong);
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* cible tactile de 44px */
  color: var(--c-ink-soft);
  text-decoration-line: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: .22em;
}

.breadcrumb__link:hover {
  color: var(--c-woad);
  text-decoration-color: currentColor;
}

.breadcrumb__current {
  color: var(--c-ink);
}

/* Mise en page article : prose (8 colonnes) + colonne latérale (4 colonnes).
   Dans le HTML, l’<aside> vient AVANT le contenu. Sous 960px : le sommaire
   apparaît en tête, suivi de la carte de contact réduite (titre et deux boutons),
   sur la largeur de la prose. À partir de 960px : colonne latérale à droite,
   collante seulement si la fenêtre est assez haute pour la montrer entière. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  padding-block: var(--s-7) var(--section-pad);
}

.article-layout__main {
  min-width: 0;
}

/* Sous 960px : même bord droit que le texte (66ch de la prose en Spectral 18px) */
.article-layout__aside {
  max-width: 37.125rem;
}

.article-layout__sticky {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 60em) {
  .article-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    padding-block-start: var(--s-8);
  }

  .article-layout__main {
    grid-column: 1 / span 8;
    grid-row: 1;
  }

  .article-layout__aside {
    grid-column: 9 / span 4;
    grid-row: 1;
    max-width: none;
  }

  .article-layout__sticky {
    gap: var(--s-6);
  }
}

/* Colonne collante seulement si elle tient dans la fenêtre : sinon les boutons de la
   carte de contact restent hors écran quand ils reçoivent le focus. 58em (928px) couvre
   le cas le plus haut, honoraires à 960px de large : 883 + 32px. À remesurer si les
   horaires ou le téléphone, une fois renseignés, allongent la carte. */
@media (min-width: 60em) and (min-height: 58em) {
  .article-layout__sticky {
    position: sticky;
    top: var(--s-6);
  }
}

/* Sommaire « Sur cette page ». Sous 960px : même bord droit que la prose, comme la
   colonne latérale, y compris quand il n’est pas dans cette colonne (cabinet.html). */
.toc {
  max-width: 37.125rem;
  padding: var(--s-4) var(--s-5) var(--s-5);
  background-color: var(--c-surface);
  border-radius: var(--r-ui);
  font-family: var(--font-sans);
}

@media (min-width: 60em) {
  .toc {
    max-width: none;
    padding: var(--s-2) 0 0;
    background-color: transparent;
  }
}

.toc__title {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink-soft);
}

.toc__list {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  border-inline-start: 1px solid var(--c-line);
}

.toc__link {
  display: block;
  margin-inline-start: -1px;
  padding: .75rem 0 .75rem .875rem; /* 12 + 21 + 12 = 45px */
  border-inline-start: 2px solid transparent;
  color: var(--c-ink);
  font-size: var(--fs-15);
  line-height: 1.4;
  text-decoration: none;
}

.toc__link:hover {
  border-inline-start-color: var(--c-woad);
  color: var(--c-woad);
}

/* Carte de contact (colonne latérale) : seule carte surélevée du site.
   Complète à partir de 960px ; dessous, réduite au titre et aux deux boutons,
   juste après le sommaire (voir plus bas). */
.contact-card {
  padding: var(--s-5);
  background-color: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-ui);
  box-shadow: var(--shadow-card);
}

.contact-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-21);
  font-weight: 500;
  line-height: 1.3;
}

.contact-card__text {
  margin-block-start: var(--s-2);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--c-ink-soft);
}

.contact-card__list {
  display: grid;
  gap: var(--s-2);
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--c-line);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.45;
}

.contact-card__line {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}

.contact-card__icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: .125rem;
  fill: var(--c-woad);
  flex-shrink: 0;
}

.contact-card__actions {
  display: grid;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
}

/* Sous 960px, la carte suit le sommaire : titre et deux boutons seulement
   (adresse, téléphone et horaires restent dans le pied de page) */
@media (max-width: 59.99em) {
  .contact-card__text,
  .contact-card__list {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   12. Composants de contenu
   -------------------------------------------------------------------------- */

/* 12.1 Liste de situations (pages domaines) : 1 colonne, 2 à partir de 768px */
/* Pas de marge ici : la réinitialisation :where() suffit, et la prose garde la main
   sur l’espacement vertical quand la liste y est posée. Même règle pour .tarifs,
   .portrait et .etapes. */
.situations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
  column-gap: var(--s-6);
}

.situations__item {
  margin: 0;
  padding-block: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line);
}

.situations__title {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.35;
}

.situations__text {
  margin-block-start: var(--s-1);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

@media (min-width: 48em) {
  .situations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 12.2 Cadre portrait (en attendant la photo)
   L’icône et la légende « à compléter » forment un seul groupe centré dans le cadre :
   l’icône remonte de la moitié de la hauteur du groupe, la légende se place dessous.
   Quand la photo arrive, la légende à compléter est supprimée. */
.portrait {
  position: relative;
}

.portrait__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: var(--s-4);
  background-color: var(--c-woad-wash);
  border-radius: var(--r-ui);
  overflow: hidden;
}

.portrait__frame::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid var(--c-woad);
  border-radius: 1px;
  opacity: .5;
}

.portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-block-end: 3.25rem; /* remonte l’icône de 1,625rem : groupe icône + légende (2 lignes) centré */
  fill: var(--c-woad);
  opacity: .55;
}

.portrait__caption {
  position: absolute;
  top: calc(50% + .875rem); /* 0,75rem sous l’icône */
  inset-inline: 1.75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.45;
  text-align: center;
  color: var(--c-ink-soft);
}

/* 12.3 Encadrés : information (filet pastel, fond teinté) et attention
   (filet et icône encre, fond plus soutenu) */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-4);
  background-color: var(--c-surface);
  border-inline-start: 3px solid var(--c-woad);
  border-radius: 0 var(--r-ui) var(--r-ui) 0;
}

.callout--attention {
  background-color: var(--c-surface-2);
  border-inline-start-color: var(--c-ink);
}

.callout__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-block-start: .0625rem;
  fill: var(--c-woad);
}

.callout__icon--attention {
  fill: var(--c-ink);
}

.callout__title {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.5;
}

.callout__body {
  max-width: 66ch;
  font-size: var(--fs-16);
  line-height: 1.6;
}

.callout__title + .callout__body {
  margin-block-start: var(--s-1);
}

/* 12.4 Questions fréquentes : <details>/<summary>, marqueur « + » qui devient « − » */
.faq {
  border-bottom: 1px solid var(--c-line);
}

.faq__item {
  border-top: 1px solid var(--c-line);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--c-woad);
}

.faq__marker {
  position: relative;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-block-start: .3rem;
  color: var(--c-woad);
}

.faq__marker::before,
.faq__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -.75px;
  background-color: currentColor;
}

.faq__marker::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__marker::after {
  transform: rotate(0deg);
}

/* Contraste élevé (Windows) : les fonds sont remplacés par la couleur de la page ;
   une couleur système garde les traits du marqueur visibles, sans changer l’affichage habituel. */
@media (forced-colors: active) {
  .faq__marker::before,
  .faq__marker::after {
    background-color: CanvasText;
  }
}

.faq__answer {
  padding-block-end: var(--s-5);
  max-width: 62ch;
  font-size: var(--fs-18);
}

.faq__answer > * + * {
  margin-block-start: var(--s-3);
}

/* 12.5 Liste de définitions (honoraires) */
.tarifs {
  border-bottom: 1px solid var(--c-line);
}

.tarifs__row {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-line);
}

.tarifs__term {
  font-family: var(--font-serif);
  font-size: var(--fs-21);
  font-weight: 500;
  line-height: 1.3;
}

.tarifs__desc {
  margin: 0;
  font-size: var(--fs-18);
}

.tarifs__desc > * + * {
  margin-block-start: var(--s-3);
}

@media (min-width: 48em) {
  .tarifs__row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--gap);
  }
}

/* Variante --axe (cabinet.html, liste sur .span-12) : à partir de 960px, le terme
   sur les colonnes 1 à 4 et la description sur l’axe de la colonne 6, comme les
   autres sections de la page ; description limitée à la mesure de la prose. */
@media (min-width: 60em) {
  .tarifs__row--axe {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .tarifs__term--axe {
    grid-column: 1 / span 4;
  }

  .tarifs__desc--axe {
    grid-column: 6 / span 7;
    max-width: var(--measure);
  }
}

/* 12.6 Bandeau d’appel : panneau teinté (jamais inversé), posé dans le conteneur
   pour rester distinct du pied de page, lui aussi teinté. */
.cta-band {
  padding-block: 0 var(--section-pad);
}

.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-6) var(--s-5);
  background-color: var(--c-surface);
  border-top: 2px solid var(--c-woad);
  border-radius: 0 0 var(--r-ui) var(--r-ui);
}

@media (min-width: 48em) {
  .cta-band__inner {
    padding: var(--s-7) var(--s-7);
  }
}

.cta-band__title {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.cta-band__text {
  margin-block-start: var(--s-3);
  max-width: 52ch;
  color: var(--c-ink-soft);
}

/* Deux boutons empilés, de même largeur (celle du libellé le plus long) ;
   pleine largeur sur téléphone. */
.cta-band__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 30em) {
  .cta-band__actions {
    grid-template-columns: minmax(0, max-content);
  }
}

@media (min-width: 60em) {
  .cta-band__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: end;
  }

  .cta-band__body {
    grid-column: 1 / span 7;
  }

  .cta-band__actions {
    grid-column: 8 / span 5;
    justify-content: end;
  }
}

/* 12.7 Bloc adresse et coordonnées */
.address-block {
  display: grid;
  gap: var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1.5;
}

.address-block__line {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.address-block__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: .125rem;
  fill: var(--c-woad);
  flex-shrink: 0;
}

.address-block__label {
  display: block;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--c-ink-soft);
}

.address-block__value {
  display: block;
  color: var(--c-ink);
}

.address-block__street {
  font-family: var(--font-serif);
  font-size: var(--fs-21);
  line-height: 1.35;
}

/* Page contact : sous-titre de chaque colonne (joindre le cabinet, venir au cabinet) */
.contact-page__title {
  margin-block-end: var(--s-5);
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1.25;
}

/* Page contact : questions fréquentes, 40rem au plus pour une ligne de lecture confortable */
.contact-page__faq {
  max-width: 40rem;
}

/* 12.8 Liens connexes : liste à filets, flèche Phosphor */
.related {
  max-width: var(--measure);
  margin-block-start: var(--s-7);
}

.related__title {
  font-family: var(--font-serif);
  font-size: var(--fs-21);
  font-weight: 500;
  line-height: 1.3;
}

.related__list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--c-line);
}

.related__item {
  border-top: 1px solid var(--c-line);
}

.related__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 3.5rem;
  padding-block: var(--s-3);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.related__link:hover {
  color: var(--c-woad);
}

.related__icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--c-woad);
  flex-shrink: 0;
}

/* 12.9 Texte légal : prose dense (mentions légales, confidentialité) */
.legal {
  max-width: 72ch;
  font-size: var(--fs-16);
  line-height: 1.6;
}

:where(.legal) > * + * {
  margin-block-start: .875rem;
}

:where(.legal) > :where(h2) {
  margin-block-start: 2.5rem;
  font-size: var(--fs-24);
  line-height: 1.25;
  scroll-margin-top: var(--s-5);
}

:where(.legal) > :where(h3) {
  margin-block-start: 1.5rem;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.35;
}

:where(.legal) > :where(h2, h3) + * {
  margin-block-start: .5rem;
}

:where(.legal) > :where(:first-child) {
  margin-block-start: 0;
}

:where(.legal) :where(ul:not([class]), ol:not([class])) {
  padding-inline-start: 1.25rem;
}

:where(.legal) :where(ul:not([class]), ol:not([class])) > :where(li + li) {
  margin-block-start: .25rem;
}

:where(.legal) :where(dl) {
  display: grid;
  gap: .25rem 1.5rem;
}

:where(.legal) :where(dt) {
  font-weight: 600;
}

/* Liste empilée (téléphone) : un peu d’air avant chaque nouveau libellé */
:where(.legal) :where(dd + dt) {
  margin-block-start: .75rem;
}

@media (min-width: 48em) {
  :where(.legal) :where(dl) {
    grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr);
  }

  :where(.legal) :where(dd + dt) {
    margin-block-start: 0;
  }
}

/* 12.10 Note de bas de page domaine : information générale */
.disclaimer {
  max-width: var(--measure);
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--c-ink-soft);
}


/* --------------------------------------------------------------------------
   14. Pied de page (surface teintée, jamais inversée)
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--c-surface);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--c-ink);
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  padding-block: var(--s-7) var(--s-6);
}

@media (min-width: 48em) {
  .site-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .site-footer__ident {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60em) {
  .site-footer__main {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-block: var(--s-8) var(--s-7);
  }

  .site-footer__ident {
    grid-column: 1 / span 5;
  }

  .site-footer__nav {
    grid-column: 7 / span 3;
  }

  .site-footer__legal {
    grid-column: 10 / span 3;
  }
}

/* Marque : miniature de la plaque sur brique + nom */
.footer-mark {
  display: inline-flex;
  flex-wrap: wrap; /* texte agrandi : le nom passe sous la miniature */
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
  max-width: 100%;
  color: var(--c-ink);
  text-decoration: none;
}

.footer-mark:hover {
  color: var(--c-ink);
}

.footer-mark__facade {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 3.25rem;
  border-radius: 1px;
  background-color: var(--c-brique);
  background-image: var(--brique-texture);
  background-size: 308px 170px; /* tuile au quart : briques de 44 × 8,5 px */
  background-position: -14px -6px;
  flex-shrink: 0;
}

.footer-mark__plaque {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  width: 2.5rem;
  height: 1.75rem;
  border: 1px solid var(--plaque-bord);
  border-radius: 2px;
  background-color: var(--plaque-email);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 3px 6px -2px rgba(20, 28, 46, .55);
}

.footer-mark__plaque::before,
.footer-mark__plaque::after {
  content: "";
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background-color: var(--c-on-woad);
  opacity: .9;
}

.footer-mark__plaque::before {
  width: 1.375rem;
}

.footer-mark__plaque::after {
  width: .75rem;
  opacity: .65;
}

.footer-mark__text {
  display: grid;
  gap: .125rem;
}

.footer-mark__name {
  font-family: var(--font-serif);
  font-size: var(--fs-21);
  font-weight: 500;
  line-height: 1.15;
}

.footer-mark__title {
  font-size: var(--fs-14);
  line-height: 1.3;
  color: var(--c-ink-soft);
}

.site-footer__coords {
  display: grid;
  gap: var(--s-1);
  margin-block-start: var(--s-5);
  color: var(--c-ink);
}

.site-footer__coord-label {
  color: var(--c-ink-soft);
}

.site-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink-soft);
}

.site-footer__list {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* cible tactile de 44px */
  color: var(--c-ink);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

/* Souris ou pavé tactile sur grand écran : liste resserrée */
@media (min-width: 60em) and (pointer: fine) {
  .site-footer__link {
    min-height: 2.25rem;
  }
}

.site-footer__link:hover {
  color: var(--c-woad);
  text-decoration-color: currentColor;
}

.site-footer__link[aria-current="page"] {
  color: var(--c-woad);
  text-decoration-color: currentColor;
}

.site-footer__bottom {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5) var(--s-6);
  /* filet limité à la largeur du contenu (le conteneur porte la gouttière) */
  background: linear-gradient(var(--c-line), var(--c-line)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px;
  font-size: var(--fs-14);
  color: var(--c-ink-soft);
}

@media (min-width: 60em) {
  .site-footer__bottom {
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
  }
}


/* --------------------------------------------------------------------------
   15. Éléments à compléter
   Format : 05&nbsp;00&nbsp;00&nbsp;00&nbsp;00
   Visible en aperçu pour le propriétaire, discret pour l’œil.
   -------------------------------------------------------------------------- */

.a-completer {
  /* bloc en ligne : un seul rectangle net, même sur deux lignes */
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
  baseline-source: first; /* sur deux lignes, aligné par sa première ligne (libellé : valeur) */
  padding: .05em .35em;
  border-radius: var(--r-ui);
  outline: 1px dashed var(--c-woad);
  outline-offset: -1px; /* tracé dans la boîte : ne dépasse pas de la colonne */
  background-color: var(--c-woad-tint);
  color: inherit;
  font-style: normal;
}


/* --------------------------------------------------------------------------
   17. Mouvement
   Un seul moment orchestré : le « travelling » du héros de l’accueil, une fois
   au chargement (environ 4 s) : gros plan sur la plaque au centre de l’écran,
   le nom se grave, les vis se serrent, la caméra recule, puis l’en-tête et le
   bandeau entrent et un reflet passe sur l’émail. Réglages par largeur : section 9.
   Le reste répond à une action (ouverture de menu, pression d’un bouton).
   Uniquement transform et opacity (plus le masque de la gravure), et seulement
   si l’utilisateur l’accepte : sinon, l’état final, immobile.
   -------------------------------------------------------------------------- */

@keyframes hero-travelling {
  from {
    transform: translateY(var(--hero-depart)) scale(var(--hero-zoom));
  }

  to {
    transform: translateY(0) scale(var(--hero-recul));
  }
}

@keyframes hero-apparaitre {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-descendre {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

@keyframes hero-monter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

@keyframes tracer {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Gravure : un masque à bord flou balaie la ligne de gauche à droite */
@keyframes plaque-graver {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes plaque-visser {
  0% {
    opacity: 0;
    transform: rotate(-300deg);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes plaque-reflet {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }
}

/* Même mouvement sous un autre nom : le survol de la plaque relance le reflet */
@keyframes plaque-reflet-survol {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }
}

@keyframes deplier {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Accueil : la caméra recule (mur et plaque ensemble) */
  .hero__scene {
    animation: hero-travelling var(--hero-duree) cubic-bezier(.65, 0, .25, 1) .9s both;
  }

  /* Gravure du nom, ligne par ligne, puis le filet */
  .plaque__prenom,
  .plaque__nom,
  .plaque__titre,
  .plaque__barreau {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: plaque-graver .9s cubic-bezier(.4, 0, .2, 1) .15s both;
  }

  .plaque__nom {
    animation-delay: .27s;
  }

  .plaque__titre {
    animation-delay: .55s;
  }

  .plaque__barreau {
    animation-delay: .67s;
  }

  .plaque__filet {
    animation: tracer .6s var(--ease-out) .45s both;
  }

  .plaque__vis {
    animation: plaque-visser .7s cubic-bezier(.2, .7, .2, 1) var(--hero-vis) both;
  }

  .plaque__vis--hd {
    animation-delay: calc(var(--hero-vis) + .08s);
  }

  .plaque__vis--bd {
    animation-delay: calc(var(--hero-vis) + .16s);
  }

  .plaque__vis--bg {
    animation-delay: calc(var(--hero-vis) + .24s);
  }

  /* Fin du recul : voiles, trait, titre, domaines, actions, puis le reflet */
  .hero::before,
  .hero::after,
  .hero__bandeau::before {
    animation: hero-apparaitre 1.2s ease-out var(--hero-fin) both;
  }

  .hero__trait {
    animation: tracer 1.2s var(--ease-out) var(--hero-fin) both;
  }

  .hero__title {
    animation: hero-monter 1s var(--ease-out) calc(var(--hero-fin) + .1s) both;
  }

  .hero__domaines {
    animation: hero-monter 1s var(--ease-out) calc(var(--hero-fin) + .2s) both;
  }

  .hero__actions {
    animation: hero-monter 1s var(--ease-out) calc(var(--hero-fin) + .3s) both;
  }

  .plaque__reflet {
    animation: plaque-reflet 1.6s cubic-bezier(.45, 0, .2, 1) calc(var(--hero-fin) + .5s) both;
  }

  .plaque:hover .plaque__reflet {
    animation: plaque-reflet-survol 1.2s cubic-bezier(.45, 0, .2, 1) both;
  }

  /* L’en-tête entre avec le bandeau, seulement quand il est posé sur le mur (section 8) */
  @media (scripting: enabled), (min-width: 60em) {
    .site-header--overlay {
      animation: hero-descendre .9s var(--ease-out) var(--hero-fin) both;
    }
  }

  .site-nav__panel--open {
    animation: deplier 220ms var(--ease-out);
  }

  .nav-domaines[open] .nav-domaines__list {
    animation: deplier 200ms var(--ease-out);
  }

  .faq__item[open] .faq__answer {
    animation: deplier 220ms var(--ease-out);
  }

  /* Seuls transform et opacity s’animent : les couleurs de survol changent sans transition */
  .btn,
  .site-nav__toggle {
    transition: transform 80ms ease;
  }

  .btn:active,
  .site-nav__toggle:active {
    transform: translateY(1px);
  }

  .nav-domaines__caret,
  .faq__marker::after {
    transition: transform 220ms var(--ease-out);
  }

  .link-arrow__icon,
  .related__icon {
    transition: transform 180ms var(--ease-out);
  }

  .link-arrow:hover .link-arrow__icon,
  .related__link:hover .related__icon {
    transform: translateX(3px);
  }
}

/* Mouvement réduit : garde-fou global (seul endroit où !important est admis) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   18. Impression
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --c-paper: #FFFFFE;
    --c-surface: #FFFFFE;
    --c-ink: #111111;
    --c-ink-soft: #333333;
    --c-woad: #111111;
  }

  /* Racine à 9,75pt : le texte courant (1,125rem) s’imprime à 11pt environ et
     chaque composant dimensionné en rem suit la même échelle. */
  :where(html) {
    font-size: 9.75pt;
  }

  :where(body) {
    line-height: 1.5;
  }

  .skip-link,
  .site-nav,
  .site-footer__nav,
  .site-footer__legal,
  .hero__scene,
  .hero__trait,
  .toc,
  .contact-card,
  .cta-band,
  .btn,
  .actions,
  .hero__actions,
  .venir__actions,
  .footer-mark__facade {
    display: none;
  }

  .hero,
  .domaines,
  .avocat,
  .article-layout,
  .venir__grid {
    display: block;
  }

  .section,
  .page-head,
  .article-layout {
    padding-block: 1.25rem;
  }

  .domaines__head {
    position: static;
  }

  /* Héros : le titre et les domaines en encre sur papier ; ni mur, ni plaque, ni voiles */
  .hero {
    min-height: 0;
    padding-block: 1.25rem;
    background: none;
    color: var(--c-ink);
  }

  .hero::before,
  .hero::after,
  .hero__bandeau::before {
    display: none;
  }

  .hero__title,
  .hero__lien {
    color: var(--c-ink);
  }

  :where(a) {
    color: inherit;
  }

  /* Adresse des liens dans le texte seulement (liens sans classe) : les composants
     (.related__link, .link-arrow…) sont des blocs flex où l’ajout casserait la ligne. */
  :where(.prose, .legal) :where(a:not([class])[href^="http"])::after,
  :where(.prose, .legal) :where(a:not([class])[href$=".html"])::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    color: #333333;
    word-break: break-all;
  }

  :where(h2, h3) {
    break-after: avoid;
  }

  .a-completer {
    outline: 1px dashed #333333;
    background: none;
  }
}

/* Réponses des questions fréquentes à l’impression : main.js ouvre les <details>
   (beforeprint) ; cette règle couvre l’impression sans JavaScript là où
   ::details-content existe (règle isolée : ignorée ailleurs). */
@media print {
  .faq__item::details-content {
    content-visibility: visible;
  }
}