/* ==========================================================================
   Raphaël Escondeur — Avocat au Barreau d'Aix-en-Provence
   Feuille de style unique. Mobile-first. Aucune dépendance externe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Police

   Inter Tight, une seule famille pour tout le site, comme sur les sites de
   référence. Fichiers variables hébergés avec le site (licence SIL OFL, voir
   assets/fonts/LICENSE-OFL.txt) : aucun appel à un service tiers, ce que la
   politique de sécurité (font-src 'self') impose de toute façon.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-latin-wght-italic.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {

  /* ══ COULEURS ═══════════════════════════════════════════════════════════

     Le marine #252F50 est la couleur de l'identité : c'est celle de la
     signature de courriel et du papier à en-tête, où elle a été relevée. Elle
     ne doit pas bouger. Le reste de la palette est construit autour.

     Contrastes calculés, pas estimés. Le plus serré est le texte secondaire
     sur papier, à 4,62:1. La valeur du brief (#6B7390) tombait à 4,30:1, sous
     le seuil AA : elle a été assombrie de 4 %, teinte conservée. */

  --navy:      #252F50;   /* logo, titres, boutons, liens      12,0:1 sur papier */
  --navy-900:  #1A2140;   /* survol, fond de pied de page      14,4:1 en inverse */
  --navy-600:  #3A4670;   /* liens au survol, secondaire        8,4:1 sur papier */
  --slate:     #676E8A;   /* textes secondaires, légendes       4,6:1 sur papier */
  --line:      #D9DCE5;   /* filets et bordures */
  --paper:     #F7F5F0;   /* fond « papier », relevé sur la carte imprimée */
  --white:     #FFFFFF;
  --ink:       #1E2333;   /* texte courant                     14,4:1 sur papier */

  /* ══ ESPACEMENTS — suite de Fibonacci ═══════════════════════════════════

     Toutes les marges, tous les écarts et tous les rembourrages du site
     prennent une de ces dix valeurs, et aucune autre. C'est ce qui donne au
     rythme de la page sa régularité, en écho à la construction du logo. */

  --space-1:   2px;
  --space-2:   3px;
  --space-3:   5px;
  --space-4:   8px;
  --space-5:  13px;
  --space-6:  21px;
  --space-7:  34px;
  --space-8:  55px;
  --space-9:  89px;
  --space-10:144px;

  /* ══ TYPOGRAPHIE ════════════════════════════════════════════════════════

     Le nombre d'or (1,618) sert une seule fois : entre le texte courant et le
     très grand titre d'accueil. Les niveaux intermédiaires suivent un rapport
     plus doux (1,25), sans quoi les titres deviendraient démesurés sur mobile.

     Une seule famille. Les titres se distinguent par la taille et la graisse
     fine, pas par un changement de police. */

  --font-display: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body:    "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;

  --text-sm:  clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-0:   clamp(1.0625rem, 1.03rem + 0.17vw, 1.125rem);  /* 17 → 18 px */
  --text-1:   clamp(1.25rem,  1.19rem + 0.30vw, 1.40625rem); /* ×1,25 */
  --text-2:   clamp(1.5rem,   1.38rem + 0.58vw, 1.7578rem);  /* ×1,25 */
  --text-3:   clamp(1.75rem,  1.52rem + 1.12vw, 2.1973rem);  /* ×1,25 */
  --text-4:   clamp(2.125rem, 1.56rem + 2.82vw, 2.9165rem);  /* 1,618 × --text-0 */

  --measure: 68ch;        /* 60 à 75 signes par ligne */

  /* ══ FILETS, RAYONS, MOUVEMENT ══════════════════════════════════════════

     Les angles restent francs : 2 px au maximum, en écho à la finesse du
     cercle du logo. Au-delà, le rendu bascule du côté de l'application. */

  --hairline: 1px;
  --radius:   2px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .18s;
  --slow: .5s;

  /* ══ GABARIT ════════════════════════════════════════════════════════════

     Les compositions à deux colonnes suivent la proportion d'or. */

  --gutter:    clamp(var(--space-6), 4vw, var(--space-7));
  --container: 70rem;
  --section-y: clamp(var(--space-8), 9vw, var(--space-9));
  --col-major: 61.8%;
  --col-minor: 38.2%;

  /* ══ COMPATIBILITÉ ══════════════════════════════════════════════════════

     Les anciens noms restent définis le temps que les composants migrent, de
     sorte qu'aucune page ne casse entre deux commits. À supprimer une fois la
     migration terminée. */

  --ink-soft:     var(--ink);
  --ink-mute:     var(--slate);
  --navy-deep:    var(--navy-900);
  --navy-pale:    #9FB2D6;
  --paper-warm:   #EFEDE6;
  --surface-dark: var(--navy);
  --surface-foot: var(--navy-900);
  --on-dark:      #D5DAE8;
  --rule:         var(--line);
  --rule-soft:    #E6E8EE;
  --rule-dark:    rgba(213, 218, 232, .22);
  --radius-lg:    var(--radius);
  --step--1:      var(--text-sm);
  --step-0:       var(--text-0);
  --step-1:       var(--text-1);
  --step-2:       var(--text-2);
  --step-3:       var(--text-3);
  --step-4:       var(--text-4);
}


/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}

p, ul, ol, dl, figure, blockquote { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { padding: 0; list-style: none; }

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .18s ease;
}
a:hover { color: var(--navy-deep); }

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

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Structure
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--warm { background: var(--paper-warm); }

.section--dark {
  background: var(--surface-dark);
  color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark a { color: var(--navy-pale); }
.section--dark a:hover { color: var(--paper); }

.rule-top { border-top: 1px solid var(--rule-soft); }

/* L'en-tête est collant : les ancres doivent s'arrêter en dessous. */
[id] { scroll-margin-top: 6rem; }

.skip-link {
  border-radius: var(--radius);
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: .625rem 1rem;
  background: var(--surface-dark);
  color: var(--paper);
  font-size: var(--step--1);
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: .75rem; color: var(--paper); }

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

.eyebrow {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.25rem;
}
.section--dark .eyebrow { color: var(--navy-pale); }

.h-display { font-size: var(--step-4); }
.h-section { font-size: var(--step-3); }
.h-item    { font-size: var(--step-2); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38rem;
}
.section--dark .lede { color: var(--on-dark); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.35em; }
.prose strong { font-weight: 600; color: var(--ink); }
.section--dark .prose strong { color: var(--paper); }

.note {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-mute);
}

/* Empêche la coupure aux traits d'union internes d'un nom propre
   (« Aix-en-Provence ») dans les contextes en capitales, où elle saute aux yeux. */
.nb { white-space: nowrap; }

/* Filet court sous un titre de section : le seul ornement du site.
   La marge haute est indispensable : collé au texte, il se lit comme un
   soulignement de la dernière ligne du titre et non comme un filet. */
.tick {
  width: 2.5rem;
  height: 2px;
  background: var(--navy);
  border: 0;
  border-radius: 1px;
  margin: 1.25rem 0 1.75rem;
}
.section--dark .tick { background: var(--navy-pale); }

/* --------------------------------------------------------------------------
   5. En-tête & navigation
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .masthead { background: var(--paper); }
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

/* Identité.

   Le logo est une image : un lockup dessiné, pas une composition typographique.
   Deux fichiers, la variante claire servant sur le pied de page marine où l'encre
   foncée serait invisible. Les dimensions intrinsèques sont portées par les
   attributs width/height afin que le navigateur réserve la place avant le
   chargement et n'induise aucun décalage de mise en page. */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand__logo {
  height: 2.75rem;
  width: auto;
  transition: opacity var(--fast) var(--ease);
}
.brand:hover .brand__logo { opacity: .78; }

@media (max-width: 26rem) {
  .brand__logo { height: 2.25rem; }
}

/* Bouton menu (mobile uniquement) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  margin-right: -.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 9px;
  flex: none;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .22s ease, top .22s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { top: 7.5px; }
[aria-expanded="true"] .nav-toggle__bars::before { top: 3.75px; transform: rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars::after  { top: 3.75px; transform: rotate(-45deg); }

/* Panneau de navigation */
.nav { display: none; }
.nav[data-open="true"] { display: block; }

.nav__list { display: flex; flex-direction: column; }

.nav__link {
  display: block;
  padding: .875rem 0;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step-0);
}
.nav__link:hover { color: var(--navy); }
.nav__link[aria-current="page"] { color: var(--navy); font-weight: 500; }

.nav__cta { margin-top: 1.25rem; padding-bottom: 1.5rem; }

@media (min-width: 56rem) {
  .nav-toggle { display: none; }
  .nav { display: block !important; }
  .nav__list { flex-direction: row; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.25rem); }
  .nav__link {
    padding: .375rem 0;
    border: 0;
    font-size: var(--step--1);
    letter-spacing: .02em;
    position: relative;
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -.125rem;
    height: 1px;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__cta { margin: 0 0 0 .5rem; padding: 0; }
}

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .9375rem 1.75rem;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--paper);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--paper);
}
.btn--sm { padding: .625rem 1.125rem; }

.btn--ghost {
  background: none;
  color: var(--navy);
  border-color: var(--rule);
}
.btn--ghost:hover {
  background: none;
  border-color: var(--navy);
  color: var(--navy-deep);
}

.section--dark .btn {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.section--dark .btn:hover {
  background: var(--navy-pale);
  border-color: var(--navy-pale);
  color: var(--ink);
}

/* Lien fléché */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.arrow-link::after { content: "\2192"; transition: transform .2s ease; }
.arrow-link:hover::after { transform: translateX(.25rem); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(3.5rem, 11vw, 8rem) clamp(3rem, 8vw, 6rem);
  border-bottom: 1px solid var(--rule-soft);
}
.hero__title {
  font-size: var(--step-4);
  max-width: 30ch;
  line-height: 1.1;
}
.hero__title em {
  font-style: italic;
  color: var(--navy);
}
.hero__lede { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hero__actions {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* --------------------------------------------------------------------------
   8. Listes de contenu — filets, pas de cartes ni d'icônes
   -------------------------------------------------------------------------- */

.stack > * + * { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Domaines d'intervention / étapes de méthode.
   Même raisonnement que pour .facts : on mesure le conteneur. */
.entries {
  border-top: 1px solid var(--rule);
  container-type: inline-size;
}

.entry {
  display: grid;
  gap: .625rem 2.5rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.entry__index {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  letter-spacing: .08em;
}
.entry__title { font-size: var(--step-2); }

/* Titre d'entrée cliquable : il reste un titre, pas un lien souligné. */
.entry__title a {
  color: inherit;
  text-decoration: none;
}
.entry__title a:hover {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

/* Liste d'aperçu (accueil) : intitulés plus discrets que sur la page Pratique,
   pour éviter des titres qui se cassent en trois lignes dans leur colonne. */
.entries--compact .entry__title { font-size: var(--step-1); line-height: 1.25; }
.entry__body { max-width: var(--measure); }
.entry__body > * + * { margin-top: .875rem; }
.entry__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.entry__list li { display: flex; gap: .5rem; }
.entry__list li::before { content: "\2014"; color: var(--navy); flex: none; }

@container (min-width: 34rem) {
  .entry { grid-template-columns: 3rem minmax(0, 1fr); }
  .entry__index { padding-top: .5rem; }
}
@container (min-width: 42rem) {
  .entry--titled { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}

/* Grille à deux colonnes : intitulé de section + contenu */
.split { display: grid; gap: 2rem; }
@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .split__aside { position: sticky; top: 6.5rem; align-self: start; }
}

/* Paires clé/valeur (coordonnées, mentions légales).

   Le passage à deux colonnes dépend de la largeur du CONTENEUR, pas de celle du
   viewport : ce bloc est utilisé aussi bien dans la colonne large des mentions
   légales que dans la colonne latérale de 18 rem de la page Contact. Avec une
   media query classique, la seconde se retrouvait réduite à une soixantaine de
   pixels et coupait les mots lettre à lettre. Sans prise en charge de
   @container, on reste sur une colonne : dégradation sans dommage. */
.facts {
  border-top: 1px solid var(--rule-soft);
  container-type: inline-size;
}
.facts__row {
  display: grid;
  gap: .25rem 2rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--rule-soft);
}
.facts__key {
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.facts__val { margin: 0; }

@container (min-width: 32rem) {
  .facts__row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
}

/* Citation / mise en exergue sobre */
.pull {
  margin-block: clamp(2rem, 4vw, 3rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--navy);
  border-radius: var(--radius-lg);
  background: var(--paper-warm);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--ink);
  max-width: 32rem;
}

/* --------------------------------------------------------------------------
   9. Formulaire
   -------------------------------------------------------------------------- */

.form { max-width: 34rem; }
.form__row { margin-bottom: 1.5rem; }

.form__label {
  display: block;
  margin-bottom: .4375rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
}
.form__label .opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-mute);
}

.form__hint {
  margin: -.125rem 0 .5rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

.form__control {
  width: 100%;
  padding: .8125rem .9375rem;
  background: #FFF;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--step-0);
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form__control::placeholder { color: #A4A49C; }
.form__control:hover { border-color: rgba(10, 10, 10, .28); }
.form__control:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 74, 120, .16);
}
textarea.form__control { min-height: 9rem; resize: vertical; line-height: 1.6; }

.form__control[aria-invalid="true"] { border-color: #A32E22; }
.form__control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(163, 46, 34, .14); }

.form__error {
  display: none;
  margin-top: .4375rem;
  font-size: var(--step--1);
  color: #8C271C;
}
.form__error[data-show="true"] { display: block; }

.form__check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-mute);
}
.form__check input {
  width: 1.0625rem;
  height: 1.0625rem;
  margin: .18rem 0 0;
  accent-color: var(--navy);
  flex: none;
}

.form__status {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--navy);
  border-radius: var(--radius-lg);
  background: var(--paper-warm);
  font-size: var(--step--1);
}
.form__status:empty { display: none; }
.form__status[data-state="error"] { border-left-color: #A32E22; }

/* Anti-spam : piège à robots, invisible et hors flux d'accessibilité */
.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   9 bis. Avis (fiche Google, anonymisés)

   Défilement manuel uniquement, par accrochage : pas de rotation automatique.
   Un carrousel qui bouge tout seul détourne l'attention et se lit comme une
   réclame, ce que le registre du site exclut.
   -------------------------------------------------------------------------- */

.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.reviews__nav { display: flex; gap: .5rem; }

.reviews__btn {
  border-radius: var(--radius);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.reviews__btn:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }

.reviews {
  --rev-gap: clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  /* Chaque carte garde sa hauteur propre. Les avis vont du simple au triple en
     longueur : les étirer à la plus haute creusait plus de trois cents pixels
     de vide sous les plus courts. */
  align-items: flex-start;
  gap: var(--rev-gap);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.reviews::-webkit-scrollbar { display: none; }

.review {
  flex: 0 0 100%;
  scroll-snap-align: start;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  background: #FFF;
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.review:hover { border-color: var(--rule); transform: translateY(-2px); }
/* Une citation n'est pas un titre : composée dans la didone à taille de titre,
   un avis de quatre cents signes occupait plus de cinq cents pixels et les
   cartes s'alignaient toutes sur la plus haute. On revient au corps de texte. */
.review blockquote {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-soft);
}
.review blockquote p::before { content: "\00ab\00a0"; }
.review blockquote p::after  { content: "\00a0\00bb"; }
.review footer {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

/* Deux puis trois avis de front selon la largeur, le défilement restant actif à
   toutes les tailles.

   La largeur des cartes se calcule pour que la course de défilement reste
   supérieure à la largeur d'une carte. Ce n'est pas un détail : avec
   « scroll-snap-type: x mandatory », une course inférieure à une carte rend la
   bande inutilisable, le seul point d'accrochage atteignable étant l'origine. */
@media (min-width: 40rem) {
  .review { flex-basis: calc((100% - var(--rev-gap)) / 2); }
}
@media (min-width: 64rem) {
  .review { flex-basis: calc((100% - 2 * var(--rev-gap)) / 3); }
}

/* --------------------------------------------------------------------------
   9 ter. Micro-animations

   Trois principes. Elles restent sous 300 ms, ne déplacent jamais un élément de
   plus de quelques pixels, et sont toutes neutralisées par la requête de
   mouvement réduit, en fin de fichier.

   L'apparition au défilement n'est armée que si le script a posé la classe
   « js » sur <html>. Sans JavaScript, aucun élément n'est masqué : la règle
   d'opacité ne s'applique tout simplement pas.
   -------------------------------------------------------------------------- */

.btn {
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.entry { transition: background var(--fast) var(--ease); }
.entry:hover { background: rgba(30, 74, 120, .032); }

.facts__row { transition: background var(--fast) var(--ease); }
.facts__row:hover { background: rgba(30, 74, 120, .032); }

.form__control { transition: border-color var(--fast) var(--ease),
                             box-shadow var(--fast) var(--ease); }

.nav-toggle__bars::before,
.nav-toggle__bars::after { transition: transform var(--fast) var(--ease),
                                       top var(--fast) var(--ease); }

/* Apparition au défilement */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active,
  .review:hover { transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   10. Bandeau d'appel & pied de page
   -------------------------------------------------------------------------- */

.callout__inner { max-width: 40rem; }
.callout__title { font-size: var(--step-3); }
.callout__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }

.footer {
  background: var(--surface-foot);
  color: var(--on-dark);
  font-size: var(--step--1);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer a { color: var(--paper); text-decoration: none; }
.footer a:hover { color: var(--navy-pale); text-decoration: underline; }

.footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 48rem) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 3rem; }
}

.footer .brand__logo { height: 2.5rem; }

.footer__blurb { margin-top: 1.25rem; max-width: 24rem; line-height: 1.6; }

.footer__title {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-pale);
  margin-bottom: 1rem;
}
.footer__list > li + li { margin-top: .625rem; }
.footer__list address { font-style: normal; line-height: 1.6; }

.footer__legal {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
  line-height: 1.6;
  color: rgba(203, 213, 233, .72);
}
.footer__legal p { max-width: 46rem; }
@media (min-width: 48rem) {
  .footer__legal { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; }
}

/* --------------------------------------------------------------------------
   11. Impression
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .nav, .nav-toggle, .callout, .form,
  .reviews__nav { display: none !important; }

  /* Le carrousel est une bande à défilement : à l'impression, elle serait
     tronquée au premier écran. On la déplie en liste. */
  .reviews {
    display: block;
    overflow: visible;
    scroll-snap-type: none;
  }
  .review {
    break-inside: avoid;
    border: 0;
    border-top: 1px solid #999;
    border-radius: 0;
    padding: .5rem 0;
    margin-bottom: .5rem;
  }
  body { background: #FFF; color: #000; font-size: 11pt; }
  .footer { background: none; color: #000; padding-block: 1rem; }
  .footer a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --------------------------------------------------------------------------
   12. Identité visuelle : construction du logo, portrait, sceau

   Trois emprunts directs aux supports imprimés du cabinet. Le dessin du hero
   reprend la construction du logo (cercle, diamètre, balance, spirale d'or),
   le portrait est celui des supports de présentation, le sceau est celui qui
   marque les pièces communiquées. Aucun n'ajoute de couleur : tout reste dans
   le marine de l'identité.
   -------------------------------------------------------------------------- */

/* Hero à deux colonnes, dans la proportion d'or. */
.hero { position: relative; overflow: hidden; }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }

.hero__mark {
  margin: 0;
  width: min(100%, 26rem);
  justify-self: center;
  color: var(--navy);
}
.hero__mark svg { width: 100%; height: auto; overflow: visible; }

/* Sur mobile, le dessin passe en filigrane derrière le texte. */
@media (max-width: 55.99rem) {
  .hero__mark {
    position: absolute;
    right: -22%;
    top: 50%;
    width: 30rem;
    transform: translateY(-50%);
    opacity: .16;
    pointer-events: none;
  }
  .hero__text { position: relative; }
}
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: var(--col-major) minmax(0, 1fr); }
}

.mk {
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.mk--ring   { stroke-width: .6; opacity: .5; }
.mk--fine   { stroke-width: .7; opacity: .7; }
.mk--spiral { stroke-width: 1.4; }

/* Tracé progressif au chargement, une seule fois. Sans JavaScript ou avec
   le mouvement réduit, le dessin est simplement affiché. */
@keyframes mk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .mk {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: mk-draw 1.6s var(--ease) forwards;
  }
  .mk:nth-of-type(2) { animation-delay: .15s; }
  .hero__mark g .mk:nth-child(1),
  .hero__mark g .mk:nth-child(2),
  .hero__mark g .mk:nth-child(3) { animation-delay: .7s; animation-duration: 1s; }
  .hero__mark .mk--fine   { animation-delay: 1.2s; animation-duration: 1.2s; }
  .hero__mark .mk--spiral { animation-delay: 1.4s; animation-duration: 2.2s; }
  .hero__mark g .mk:last-child { animation-delay: 1s; animation-duration: 1.4s; }
}

/* Numérotation des domaines sur l'accueil, comme sur la page Pratique. */
.entries--compact { counter-reset: entry; }
.entries--compact .entry { counter-increment: entry; }
.entries--compact .entry__title::before {
  content: counter(entry, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--slate);
}

/* Portrait : colonne mineure de la proportion d'or. */
.portrait-split { display: grid; gap: var(--space-7); align-items: center; }
.portrait {
  margin: 0;
  position: relative;
  max-width: 24rem;
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: var(--radius);
  filter: saturate(.85);
}
/* Filet décalé : le cadre fin du papier à en-tête, posé en retrait. */
.portrait::after {
  content: "";
  position: absolute;
  inset: var(--space-5) calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
  border: var(--hairline) solid var(--navy);
  border-radius: var(--radius);
  opacity: .35;
  z-index: -1;
}
.portrait-split .portrait { isolation: isolate; }

@media (min-width: 56rem) {
  .portrait-split {
    grid-template-columns: var(--col-minor) minmax(0, 1fr);
    gap: clamp(var(--space-8), 7vw, var(--space-9));
  }
  .portrait-split--hero { grid-template-columns: minmax(0, 1fr) var(--col-minor); }
  .portrait-split--hero .portrait { justify-self: end; max-width: 21rem; }
}
@media (max-width: 55.99rem) {
  .portrait { max-width: 18rem; }
  .portrait-split--hero .portrait { order: -1; max-width: 13rem; }
}

/* Sceau en filigrane dans le bandeau d'appel. */
.callout { position: relative; overflow: hidden; }
.callout__inner { position: relative; }
.callout__seal {
  position: absolute;
  right: clamp(-9rem, -6vw, -3rem);
  top: 50%;
  width: clamp(16rem, 34vw, 26rem);
  transform: translateY(-50%) rotate(-8deg);
  filter: brightness(0) invert(1);
  opacity: .07;
  pointer-events: none;
}

@media print {
  .hero__mark, .callout__seal, .portrait::after { display: none; }
}

/* Grands titres : graisse fine et interlettrage serré, à la manière des
   sites de référence. */
.h-display, .hero__title { font-weight: 300; letter-spacing: -.03em; }
.h-section, .callout__title { font-weight: 350; }
.hero__title em { font-weight: 300; }
body { letter-spacing: .003em; }

/* Mention restant à compléter : surlignée pour ne pas passer inaperçue. */
mark.todo { background: #FFF200; color: var(--ink); padding: 0 .2em; }

/* Bandeau photo pleine largeur, entre le premier écran et les domaines. */
.landscape {
  margin: 0;
  position: relative;
  height: clamp(15rem, 42vw, 34rem);
  overflow: hidden;
  background: var(--navy);
}
.landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.landscape__caption {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-5);
  font-size: var(--text-sm);
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
@media print { .landscape { display: none; } }