/* Les règles propres à loste-avocat, chargées APRÈS design/systeme.css. Aucune couleur écrite
 * à la main ici : une nouvelle surface = un nouveau jeton --fond-X / --texte-X, déclaré dans
 * design/test/systeme.test.mjs pour être vérifié en contraste. Identité propre (client) :
 * voir design/README.md. La forme voulue est décrite dans PLAN.md — la page emprunte celle
 * d'un jeu de conclusions : chiffres romains, filets pleine largeur, notes en marge. */

/* ── Trame ───────────────────────────────────────────────────────────────────────────── */

.bande {
  padding-inline: var(--espace-4);
}

.bande > * {
  max-width: var(--mesure-large);
  margin-inline: auto;
}

.mesure {
  max-width: var(--mesure);
}

.encre {
  background: var(--fond-encre);
  color: var(--texte-encre);
}

.encre a {
  color: var(--texte-encre);
}

/* Le sur-titre : capitales interlettrées, le seul ornement typographique du site.
   Il sert aussi de <h2> de section : la police doit donc être redite, sinon la règle
   h1/h2/h3 du système lui impose le display. */
.mention {
  font-family: var(--police);
  font-weight: var(--graisse-normale);
  line-height: var(--interligne-texte);
  font-size: var(--taille-mention);
  letter-spacing: var(--interlettrage-mention);
  text-transform: uppercase;
  color: var(--encre-discrete);
  margin: 0 0 var(--espace-3);
}

.encre .mention {
  color: var(--texte-encre-discret);
}

.filet {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 0;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fond-encre);
  color: var(--texte-encre);
  padding: var(--espace-3);
  z-index: 10;
}

.lien-evitement:focus {
  left: 0;
}

/* ── En-tête ─────────────────────────────────────────────────────────────────────────── */

.entete {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-4);
  padding: var(--espace-4);
}

.marque {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--cible-tactile);
  text-decoration: none;
  line-height: 1;
}

.marque__mot {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--taille-intertitre);
  letter-spacing: var(--interlettrage-mention);
  text-transform: uppercase;
}

.marque__metier {
  display: block;
  margin-top: var(--espace-1);
  font-size: var(--taille-mention);
  letter-spacing: var(--interlettrage-mention);
  text-transform: uppercase;
  color: var(--encre-discrete);
}

/* Sur le hero, l'en-tête est posée sur l'encre : le gris du papier n'y tient pas. */
.hero .marque__metier {
  color: var(--texte-encre-discret);
}

/* Les pages satellites portent la même en-tête, sur papier, fermée par un filet. */
.entete--papier {
  border-bottom: 1px solid var(--filet);
  max-width: var(--mesure-large);
  margin-inline: auto;
}

.nav {
  display: flex;
  gap: var(--espace-4);
  /* Sur mobile la nav prend sa propre ligne et défile DANS sa boîte. Sans `flex: 1 1 100%`
     et `min-width: 0`, sa largeur de contenu élargit l'en-tête, donc la page entière :
     tout le site partait en défilement horizontal. Trouvé à l'écran, en 375 px. */
  flex: 1 1 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* Pas de hamburger : quatre ancres qui défilent. Un menu caché derrière une icône, sur un
   * site de quatre sections, ne cache que le contenu. */
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  /* 44 px : le plancher tactile du système. Les liens faisaient 36 px de haut. */
  min-height: var(--cible-tactile);
  font-size: var(--taille-mention);
  letter-spacing: var(--interlettrage-mention);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a:focus-visible {
  border-bottom-color: currentColor;
}

/* ── Hero ────────────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  min-height: 78svh;
  /* `minmax(0, 1fr)` et pas `1fr` : une colonne de grille vaut `auto` par défaut, donc la
     largeur de contenu de la nav qui défile élargissait le hero, donc la page. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
  background: var(--fond-encre);
  color: var(--texte-encre);
}

.hero__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Le voile : un aplat d'encre en opacité, faute de pouvoir écrire une couleur translucide
 * à la main (c'est la règle du système, et elle a raison). Deux couches : un voile léger
 * partout pour tenir le contraste de la nav, et un dégradé qui ancre le titre dans le noir
 * en bas. Un voile uniforme assez sombre pour le texte rendait la pierre grise et morte. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--fond-encre) 4%, transparent 64%),
    linear-gradient(to bottom, var(--fond-encre) 0%, transparent 24%);
}

.hero__voile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fond-encre);
  opacity: 0.24;
}



.hero__corps {
  align-self: end;
  padding: var(--espace-4) var(--espace-4) var(--espace-5);
  max-width: var(--mesure-large);
  margin-inline: auto;
  width: 100%;
}

.hero h1 {
  font-size: var(--taille-affiche);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

.hero__metier {
  margin: var(--espace-3) 0 0;
  max-width: 28rem;
  font-size: var(--taille-intertitre);
  color: var(--texte-encre);
}

.hero__pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3) var(--espace-5);
  align-items: baseline;
  padding: var(--espace-3) var(--espace-4) var(--espace-5);
  max-width: var(--mesure-large);
  margin-inline: auto;
  width: 100%;
  border-top: 1px solid var(--filet-encre);
}

.tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  font-family: var(--police-titre);
  font-size: var(--taille-titre);
  text-decoration: none;
  border-bottom: 1px solid var(--texte-encre-accent);
  padding-bottom: var(--espace-1);
}

.tel:hover {
  color: var(--texte-encre-accent);
}

/* Le même numéro, posé sur le papier. */
.tel--papier {
  color: var(--encre-marque);
  border-bottom-color: var(--encre-marque);
}

.hero__pied .mention {
  margin: 0;
}

/* ── Préambule ───────────────────────────────────────────────────────────────────────── */

.preambule {
  padding-block: var(--espace-7);
}

.preambule__texte {
  font-family: var(--police-titre);
  font-size: var(--taille-titre);
  line-height: 1.24;
  max-width: 42rem;
}

/* La note en marge : le terme de droit, l'épigraphe, la précision. Jamais l'information
 * principale — elle passe sous le texte sur petit écran. */
.note {
  font-size: var(--taille-petite);
  line-height: 1.5;
  color: var(--encre-discrete);
  border-top: 1px solid var(--bordure);
  padding-top: var(--espace-2);
  margin-top: var(--espace-4);
}

.note b {
  display: block;
  font-family: var(--police-titre);
  font-weight: var(--graisse-normale);
  font-size: var(--taille-base);
  color: var(--encre-marque);
  letter-spacing: var(--interlettrage-mention);
  text-transform: uppercase;
}

/* ── Les situations, en conclusions ──────────────────────────────────────────────────── */

.situations {
  padding-bottom: var(--espace-7);
}

.situation {
  display: grid;
  gap: var(--espace-3);
  padding-block: var(--espace-5);
  border-top: 1px solid var(--filet);
}

.situation:last-of-type {
  border-bottom: 1px solid var(--filet);
}

.situation__num {
  font-family: var(--police-titre);
  font-size: var(--taille-intertitre);
  color: var(--encre-marque);
  letter-spacing: var(--interlettrage-mention);
}

.situation h3 {
  font-size: var(--taille-titre);
  max-width: 20ch;
}

.situation__corps {
  max-width: var(--mesure);
}

.situation__corps p:last-child {
  margin-bottom: 0;
}

/* ── Le cabinet : texte fixe, image qui défile (la mécanique de Hando) ───────────────── */

.cabinet {
  padding-block: var(--espace-7);
  border-top: 1px solid var(--filet);
}

.cabinet__grille {
  display: grid;
  gap: var(--espace-5);
}

.cabinet__titre {
  font-size: var(--taille-titre);
  max-width: 22ch;
  margin-bottom: var(--espace-4);
}

.cabinet__portrait {
  width: 100%;
  max-width: 24rem;
  height: auto;
  justify-self: center;
}

.faits {
  margin: 0;
  display: grid;
  gap: 0;
}

.faits > div {
  display: grid;
  gap: var(--espace-1);
  padding-block: var(--espace-3);
  border-top: 1px solid var(--bordure);
}

.faits dt {
  font-size: var(--taille-mention);
  letter-spacing: var(--interlettrage-mention);
  text-transform: uppercase;
  color: var(--encre-discrete);
}

.faits dd {
  margin: 0;
}

/* Un fait qu'elle doit fournir. Visible comme tel : on n'invente pas le parcours d'une
 * avocate, et un trou doit se voir pour être comblé. */
.a-fournir {
  color: var(--encre-marque);
  border-bottom: 1px dotted var(--encre-marque);
}

/* Le carmin du papier tombe à 1.9:1 sur l'encre : sur fond sombre, c'est l'accent clair qui
   marque les trous. Trouvé à l'écran, section contact. */
.encre .a-fournir {
  color: var(--texte-encre-accent);
  border-bottom-color: var(--texte-encre-accent);
}

/* ── Images de respiration ───────────────────────────────────────────────────────────── */

.plaque {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: cover;
}

.plaque--fine {
  height: clamp(120px, 16vw, 200px);
}

.plaque--marge {
  margin-top: var(--espace-6);
}

/* ── Contact ─────────────────────────────────────────────────────────────────────────── */

.contact {
  padding-block: var(--espace-7);
}

.contact h2 {
  font-size: var(--taille-hero);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--espace-5);
}

.coordonnees {
  display: grid;
  gap: var(--espace-5);
  margin: 0;
}

.coordonnees dt {
  font-size: var(--taille-mention);
  letter-spacing: var(--interlettrage-mention);
  text-transform: uppercase;
  color: var(--texte-encre-discret);
  margin-bottom: var(--espace-2);
}

.coordonnees dd {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-intertitre);
}

.coordonnees a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  text-decoration: none;
  border-bottom: 1px solid var(--texte-encre-accent);
}

/* ── Pied ────────────────────────────────────────────────────────────────────────────── */

.pied {
  padding-block: var(--espace-5);
  font-size: var(--taille-petite);
}

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3) var(--espace-4);
  margin-bottom: var(--espace-3);
}

.pied__liens a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
}

.pied a {
  color: var(--encre-discrete);
}

.pied p {
  color: var(--encre-discrete);
  max-width: var(--mesure-large);
}

/* ── La barre d'appel, mobile seulement ──────────────────────────────────────────────── */

.barre-appel {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  min-height: var(--barre-appel);
  padding: 0 var(--espace-4);
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--fond-encre);
  color: var(--texte-encre);
  font-size: var(--taille-mention);
  letter-spacing: var(--interlettrage-mention);
  text-transform: uppercase;
  border-top: 1px solid var(--filet-encre);
}

.barre-appel a {
  color: var(--texte-encre-accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: var(--barre-appel);
  padding-left: var(--espace-4);
}

/* ── Page satellite (honoraires, mentions) ───────────────────────────────────────────── */

.satellite {
  padding-block: var(--espace-6) var(--espace-7);
}

.satellite h1 {
  font-size: var(--taille-hero);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--espace-5);
}

.satellite .preambule__texte {
  margin-bottom: var(--espace-5);
}

.satellite__action {
  margin-top: var(--espace-5);
}

.satellite h2 {
  font-size: var(--taille-titre);
  margin: var(--espace-6) 0 var(--espace-3);
  padding-top: var(--espace-4);
  border-top: 1px solid var(--filet);
}

.satellite p,
.satellite li {
  max-width: var(--mesure);
}

.satellite ul {
  padding-left: var(--espace-3);
}

.satellite li {
  margin-bottom: var(--espace-2);
}

/* ── Tablette ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 41rem) {
  .bande {
    padding-inline: var(--espace-5);
  }

  .entete,
  .hero__corps,
  .hero__pied {
    padding-inline: var(--espace-5);
  }

  .situation {
    grid-template-columns: 4rem minmax(0, 1fr);
    column-gap: var(--espace-5);
  }

  .situation__num {
    grid-row: span 2;
  }

  /* Sans ce placement, la note se rangeait toute seule dans la cellule libre suivante —
     la colonne de 4 rem du chiffre romain — et se composait à un mot par ligne. */
  .situation .note {
    grid-column: 2;
  }

  .nav {
    flex: 0 1 auto;
    margin-left: auto;
  }

  .cabinet__grille {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--espace-6);
  }

  .cabinet__portrait {
    max-width: none;
  }

  .coordonnees {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Desktop ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 64rem) {
  .bande {
    padding-inline: var(--espace-6);
  }

  .entete,
  .hero__corps,
  .hero__pied {
    padding-inline: var(--espace-6);
  }

  /* La gouttière de marge : c'est là que vivent les notes, comme dans des conclusions. */
  .preambule__grille,
  .situations__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    column-gap: var(--espace-6);
  }

  .note {
    margin-top: 0;
  }

  .situation {
    grid-template-columns: 4rem minmax(0, 34rem) 16rem;
    column-gap: var(--espace-6);
    align-items: start;
  }

  .situation h3 {
    grid-column: 2;
  }

  .situation__corps {
    grid-column: 2;
  }

  .situation .note {
    grid-column: 3;
    grid-row: 1 / span 3;
  }

  .situation__num {
    grid-row: 1 / span 3;
  }

  .cabinet__grille {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--espace-7);
  }

  /* Le texte tient pendant que la colonne d'images défile. Le collant se pose sur le
     <picture> : c'est LUI l'élément de grille. Sur l'<img>, la boîte de référence est le
     <picture>, qui fait exactement la hauteur de l'image — il n'y a alors rien à parcourir
     et le collant ne fait rien du tout, en silence. */
  .cabinet__grille > picture:first-child {
    position: sticky;
    top: var(--espace-5);
    align-self: start;
  }

  .coordonnees {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .barre-appel {
    display: none;
  }
}

@media (max-width: 63.999rem) {
  body {
    /* La barre ajoute l'encoche à sa propre hauteur : réserver 56 px tout court laissait
       la dernière ligne du pied sous la barre sur un téléphone à encoche. */
    padding-bottom: calc(var(--barre-appel) + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Impression : les coordonnées, pas les images ────────────────────────────────────── */

@media print {
  .hero__fond,
  .hero__voile,
  .plaque,
  .barre-appel,
  .nav {
    display: none !important;
  }

  .hero,
  .encre {
    background: none;
    color: var(--texte-page);
  }

  .hero {
    min-height: 0;
  }

  body {
    padding-bottom: 0;
  }
}