/* Studio Legal 42 — feuille propre au site. Site AUTONOME : ni base.css ni tokens.
   Écrite à la main (T2), grammaire empruntée à Hermès : du vide, une idée par
   écran, des titres qui portent, une grille irrégulière.
   Aucune ressource externe. Aucun script. */

/* ── Fontes ────────────────────────────────────────────────────────────────
   Un site AUTONOME ne reçoit PAS base.css, donc pas non plus ses `@font-face`.
   Cette feuille nommait « Source Serif 4 » et « Source Sans 3 » en tête de ses
   piles sans les déclarer nulle part : la production rendait en Charter et en
   Helvetica, sans qu'aucun test ni aucun contrôle ne le signale. La direction
   visuelle repose sur sa typographie — c'était la perdre en silence.

   Les fichiers vivent dans CE dossier (art. III), et non en référence à
   `/static/fonts/` : un site autonome qui dépendrait d'un actif de plateforme
   verrait son rendu changer sans que son dossier bouge. Chemins relatifs à
   cette feuille, servie depuis /static/sites/studiolegal42/. Aucune requête hors
   du domaine (art. V). Licences : docs/licences/. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/sourceserif4-400.c71b20994c3e.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/sourceserif4-700.eb430d5263cb.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/sourcesans3-400.2b1383219171.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Socle ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }

:root {
  /* VOCABULAIRE FERMÉ. Ces six noms ne sont pas un goût : ce sont ceux que le
     harnais sait confronter aux seuils WCAG (contrôle 4). Un site qui invente
     ses propres noms de couleurs rend la vérification automatique impossible.
     Tout token de couleur SUPPLÉMENTAIRE est permis, mais il échappe au
     contrôle — d'où --color-rule, tenu à l'œil plutôt que par la machine. */
  --color-text:        #14100D;
  --color-background:  #EDE3D1;  /* sable franc, pas un blanc cassé */
  --color-surface:     #E0D2B9;
  --color-primary:     #B03A0F;  /* terre vive — 4,77:1 sur le fond */
  --color-on-primary:  #FEFBF6;
  --color-muted:       #564C42;
  --color-rule:        #C9B896;
  --serif:    "Source Serif 4", Charter, "Bitstream Charter", Cambria, Georgia, serif;
  --sans:     "Source Sans 3", Inter, "Helvetica Neue", Arial, sans-serif;
  --marge:    clamp(1.5rem, 6vw, 9rem);
  --souffle:  clamp(5rem, 14vw, 13rem);   /* l'air entre deux sections */
  --colonne:  min(100% - 2 * var(--marge), 82rem);
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  font-synthesis: none;
  /* Le signe du favicon, aussi sous le pointeur. Fichier du dossier, jamais
     une URL distante. Le repli `auto` / `pointer` / `text` tient si le
     navigateur refuse l'image (taille, format, accessibilité système). */
  cursor: url("img/curseur.da243c1db322.png") 16 16, auto;
}

a, button, summary, label { cursor: url("img/curseur.da243c1db322.png") 16 16, pointer; }
input, textarea, select { cursor: text; }

.mesure { width: var(--colonne); margin-inline: auto; }

a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--color-text); color: var(--color-background); padding: 0.75rem 1rem;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }

/* ── En-tête et pied : rendus par le layout, habillés ici ──────────────── */
.header { padding: 2rem var(--marge); }
.header__inner { display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap; }
.header__name { font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0.02em; text-decoration: none; }
.header__logo { display: none; }
.header__phone { margin-left: auto; font-size: 0.9rem; color: var(--color-muted); }
.nav { display: flex; gap: 1.75rem; flex-wrap: wrap; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; }
.nav__link, .nav .button {
  text-decoration: none;
  color: var(--color-muted);
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.nav-repli { display: none; }
@media (max-width: 52rem) {
  .nav-desktop { display: none; }
  .nav-repli { display: block; margin-left: auto; }
  .nav-repli summary { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .nav-repli .nav { flex-direction: column; gap: 0.75rem; padding-top: 1rem; }
}

/* ── 1. Ouverture ──────────────────────────────────────────────────────── */
.ouverture { padding: clamp(4rem, 14vw, 12rem) 0 var(--souffle); }
.ouverture .mesure { position: relative; }
.ouverture__titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 1.4rem + 6vw, 8rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  max-width: 16ch;
  text-wrap: balance;
}

/* Constellation : le vide à droite du titre, grand écran seulement. Au
   téléphone le titre occupe déjà tout l'écran ; une décoration par-dessus
   le casserait. Aucune phrase, aucun lien : aria-hidden dans le gabarit. */
.constellation { display: none; }
@media (min-width: 60rem) {
  .constellation {
    display: block;
    position: absolute;
    top: 0.5rem;
    right: 0;
    width: min(22rem, 40%);
    height: 16rem;
    pointer-events: auto;
  }
}
.forme { position: absolute; background: var(--color-primary); }
.forme--disque {
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 50%;
  top: 0.25rem;
  right: 1.25rem;
}
.forme--barre {
  width: 1.05rem;
  height: 7.25rem;
  border-radius: 999px;
  top: 2.75rem;
  right: 12.25rem;
  background: var(--color-muted);
}
.forme--tuile {
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 0.55rem;
  top: 8.5rem;
  right: 8.75rem;
  background: var(--color-text);
}
.forme--trait {
  width: 6.5rem;
  height: 0.38rem;
  border-radius: 999px;
  top: 13.75rem;
  right: 2.25rem;
}
.ouverture__chapo {
  margin-top: clamp(2rem, 5vw, 4rem);
  margin-left: auto;
  max-width: 34ch;
  color: var(--color-muted);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
}
.ouverture__action { margin-top: 2.5rem; margin-left: auto; max-width: 34ch; }
.ouverture__action a { font-size: 1.0625rem; }

/* ── 2. La planche photographique, à fond perdu ────────────────────────── */
.planche { margin-bottom: var(--souffle); }
.planche img { width: 100%; max-height: 82vh; object-fit: cover; }

/* ── Titres de section : discrets, ce sont les contenus qui parlent ────── */
.section__titre {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-rule);
}

/* ── 3. Les offres en escalier — la grille délibérément irrégulière ────── */
.offres { padding-bottom: var(--souffle); }
.escalier { width: var(--colonne); margin-inline: auto; }
.palier { padding: clamp(3rem, 7vw, 6rem) 0; border-bottom: 1px solid var(--color-rule); }
.palier__rang {
  display: block;
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.palier__titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.palier__titre a { text-decoration: none; }
.palier__resume { margin-top: 1.5rem; max-width: 46ch; color: var(--color-muted); }

/* Le décalage : chaque palier avance un peu plus que le précédent. C'est ce
   qu'aucun token ne sait faire, et c'est tout l'intérêt d'écrire à la main. */
@media (min-width: 60rem) {
  .palier { padding-left: 0; }
  .palier:nth-child(2) { padding-left: 14%; }
  .palier:nth-child(3) { padding-left: 28%; }
  .palier:nth-child(n+4) { padding-left: 42%; }
}

/* ── 4. Les questions ──────────────────────────────────────────────────── */
.questions { padding-bottom: var(--souffle); }
.serie { margin-top: clamp(2.5rem, 6vw, 5rem); }
.serie__q {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  line-height: 1.25;
  padding-top: 2.5rem;
}
.serie__r { margin: 0.85rem 0 2.5rem; max-width: 58ch; color: var(--color-muted); }
.serie__r + .serie__q { border-top: 1px solid var(--color-rule); }

/* ── 5. L'équipe ───────────────────────────────────────────────────────── */
.equipe { padding-bottom: var(--souffle); }
.signatures {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.signature__nom { font-family: var(--serif); font-size: 1.75rem; line-height: 1.15; }
.signature__role { margin-top: 0.35rem; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }
.signature__bio { margin-top: 1.25rem; color: var(--color-muted); max-width: 42ch; }

/* ── 6. Clore — LE bandeau de couleur ───────────────────────────────────
   Seule surface du site où le primaire porte du texte, et elle le fait par
   --color-on-primary : la paire est mesurée par le harnais (5,88:1). Partout
   ailleurs la couleur principale ne sert qu'aux filets et aux surtitres. */
.clore {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--souffle) 0;
  margin-bottom: 0;
}
.clore a { color: inherit; }
.clore :focus-visible { outline-color: var(--color-on-primary); }
.clore__phrase {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 3.2vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  max-width: 20ch;
}
.clore__action { margin-top: 2.5rem; font-size: 1.0625rem; }
.clore__coordonnees { margin-top: clamp(3rem, 6vw, 5rem); font-style: normal; line-height: 2; opacity: 0.86; }

/* ── Pied ────────────────────────────────────────────────────────────────
   Variante servie : colonnes (défaut de plateforme). Sans ces règles le
   pied s'empilait à gauche : le site est autonome, il ne reçoit pas la
   grille de base.css. Le padding horizontal est sur .container, pas ici —
   sinon le pied est rentré deux fois et ne s'aligne plus sur .mesure. */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-rule);
  padding-block: clamp(3rem, 6vw, 5rem);
  font-size: 0.875rem;
  color: var(--color-muted);
}
.footer__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: start;
}
.footer__identity { font-family: var(--serif); font-size: 1rem; color: var(--color-text); }
.footer__heading {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 1rem;
}
.footer__contact, .footer__hours, .footer__areas { font-style: normal; line-height: 1.9; }
.footer__contact, .footer__hours { margin-top: 1.25rem; }
.footer__bandeau-inner { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.footer__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-rule); }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__col .footer-links { flex-direction: column; gap: 0.65rem; }
.footer__link { color: inherit; }

/* ── Mouvement : se tait si le visiteur l'a demandé ───────────────────────
   Apparitions au scroll : animation-timeline: view(), zéro script. Sans
   support, les blocs restent simplement visibles — le contenu n'attend pas. */
@keyframes apparaitre {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  a, .bouton, .nav__link, .nav .button, .header__name, summary {
    transition:
      color 220ms ease,
      background-color 220ms ease,
      background-size 220ms ease,
      border-color 220ms ease,
      text-decoration-color 220ms ease,
      text-underline-offset 220ms ease,
      text-decoration-thickness 220ms ease,
      transform 220ms ease;
  }

  @supports (animation-timeline: view()) {
    .palier,
    .serie__q,
    .signature,
    .section__titre,
    .clore__phrase,
    .clore__action,
    .clore__coordonnees,
    .prose h2,
    .prose > p,
    .champ,
    .aparte,
    .footer__col {
      animation: apparaitre 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  a:hover {
    color: var(--color-primary);
    text-decoration-color: var(--color-primary);
    text-underline-offset: 0.38em;
  }
  .header__name:hover { color: var(--color-primary); }
  .nav__link:hover, .nav .button:hover {
    color: var(--color-primary);
    background-size: 100% 1px;
  }
  .palier__titre a:hover { color: var(--color-primary); }
  .footer__link:hover { color: var(--color-primary); }
  .clore a:hover {
    color: inherit;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.38em;
  }
  .bouton:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-0.12rem);
  }
  .forme { transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .constellation:hover .forme--disque { transform: translate(0.7rem, -1.1rem) scale(1.06); }
  .constellation:hover .forme--barre { transform: translate(-0.85rem, -1.35rem) rotate(10deg); }
  .constellation:hover .forme--tuile { transform: translate(-1.4rem, 0.95rem) rotate(-14deg); }
  .constellation:hover .forme--trait { transform: translate(1.15rem, 0.55rem) rotate(-8deg); }
}

/* ── Contact ────────────────────────────────────────────────────────────
   Deux colonnes inégales à partir du grand écran : le formulaire porte, la
   colonne d'à-côté commente. Même parti pris d'asymétrie que l'escalier. */
.ouverture--courte { padding-bottom: clamp(3rem, 8vw, 6rem); }
.ouverture__titre--court { font-size: clamp(2.25rem, 1.4rem + 4vw, 5.5rem); }

.formulaire { padding-bottom: var(--souffle); }
.formulaire__grille { display: grid; gap: clamp(3rem, 7vw, 6rem); }
@media (min-width: 62rem) {
  .formulaire__grille { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.champ { margin-bottom: 2rem; }
.champ__etiquette {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.field__input {
  width: 100%;
  padding: 0.9rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.field__input:hover { border-bottom-color: var(--color-muted); }
.field__input:focus-visible { outline: 0; border-bottom: 2px solid var(--color-primary); }
textarea.field__input { resize: vertical; }
.champ--faute .field__input { border-bottom-color: var(--color-primary); }
.champ__faute { display: block; margin-top: 0.5rem; font-size: 0.9375rem; color: var(--color-primary); }

.bouton {
  display: inline-block;
  padding: 1rem 2.5rem;
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: var(--color-background);
  font-family: inherit;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.bouton:hover { background: var(--color-primary); border-color: var(--color-primary); }

.aparte { padding-top: 0.5rem; }
.aparte__avis { color: var(--color-muted); max-width: 40ch; }
.aparte__coordonnees,
.aparte__horaires { margin-top: 2.5rem; font-style: normal; line-height: 2; color: var(--color-muted); }

/* ── Pages intérieures ──────────────────────────────────────────────────── */
.surtitre {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}
.corps { padding-bottom: var(--souffle); }

.prose { max-width: 62ch; }
.prose > * + * { margin-top: 1.35em; }
.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  margin-top: 2.5em;
}
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; margin-top: 2em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5em; }
.prose strong { font-weight: 600; }

/* La réponse directe ouvre l'article : c'est le bloc que citent les moteurs.
   Elle se distingue par un filet épais côté texte, jamais par un fond de
   couleur principale — la doctrine tient. */
.reponse-directe {
  border-left: 3px solid var(--color-primary);
  padding: 0.25rem 0 0.25rem 1.75rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 62ch;
}
.reponse-directe__texte {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
}

.pied-article {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
  max-width: 62ch;
}
.pied-article__meta { font-size: 0.9375rem; color: var(--color-muted); }
.pied-article__meta + .pied-article__meta { margin-top: 0.5rem; }

.avertissement {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.9375rem;
  max-width: 62ch;
}

.pagination {
  display: flex;
  gap: 2rem;
  align-items: baseline;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  font-size: 0.9375rem;
}
.pagination__etat { color: var(--color-muted); }

/* ── Pages LÉGALES — servies par le gabarit de plateforme ────────────────
   Mentions légales et politique de confidentialité ne sont pas des surfaces
   de design : leur structure est dictée par la loi et identique chez tous les
   clients. Les recopier dans ce dossier ferait diverger un texte juridique
   d'un site à l'autre, pour un gain esthétique nul. On les habille, on ne les
   réécrit pas — d'où ces sélecteurs, seuls vestiges du vocabulaire de
   base.css dans cette feuille. */
.section { padding-bottom: var(--souffle); }
.container { width: var(--colonne); margin-inline: auto; }
.container--narrow { max-width: 62ch; }
.page-header { padding: clamp(4rem, 10vw, 8rem) 0 clamp(2rem, 4vw, 3rem); }
.page-header__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}
.page-header__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.4rem + 4vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.lede { color: var(--color-muted); max-width: 46ch; margin-top: 1.5rem; }