/* Cabinet Léonard & Associés — feuille unique. Voir SYSTEME.md. */

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

:root {
  --fond: #F2F4F0;
  --surface: #E6E9E2;
  --texte: #1C2420;
  --texte-doux: #586158;
  --accent: #A8791F;
  --trait: #C9CFC4;
  --encre: #141A17;

  --t7: clamp(2.75rem, 1.60rem + 4.60vw, 5.25rem);
  --t6: clamp(2.00rem, 1.35rem + 2.60vw, 3.25rem);
  --t5: clamp(1.50rem, 1.20rem + 1.20vw, 2.125rem);
  --t4: clamp(1.1875rem, 1.08rem + 0.42vw, 1.4375rem);
  --t3: clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);
  --t2: 1rem;
  --t1: 0.8125rem;

  --e1: 0.375rem; --e2: 0.75rem; --e3: 1.25rem; --e4: 2rem;
  --e5: 3.25rem; --e6: 5.25rem; --e7: 8.5rem;

  --marge-disp: 0px;
}

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

body {
  background: var(--fond);
  color: var(--texte);
  font-family: "Epilogue", sans-serif;
  font-size: var(--t2);
  line-height: 1.68;
  font-weight: 400;
}

h1, h2, h3 { font-family: "Newsreader", serif; font-weight: 500; line-height: 1.08; letter-spacing: -0.012em; }
h1 { font-size: var(--t6); }
h2 { font-size: var(--t5); }
h3 { font-size: var(--t4); font-weight: 600; }

h1 + p, h2 + p, h2 + ul, h3 + p { margin-top: var(--e3); }

p + p { margin-top: var(--e3); }

a { color: inherit; }

img { display: block; max-width: 100%; height: auto; border: 1px solid var(--trait); }

/* ---------- grille de page : la gouttière du dispositif ---------- */

.page {
  display: grid;
  grid-template-columns: var(--marge-disp) minmax(0, 1fr);
  column-gap: var(--e5);
  padding-inline: var(--e4);
  max-width: 1680px;
  margin-inline: auto;
  width: 100%;
}

.entete { padding-block: var(--e4); align-items: baseline; border-bottom: 1px solid var(--trait); }
.entete .marque { grid-column: 2; }
.entete .nav { grid-column: 2; }

.marque { text-decoration: none; display: block; }
.marque-nom { font-family: "Newsreader", serif; font-size: var(--t5); font-weight: 500; display: block; letter-spacing: -0.015em; }
.marque-sous { display: block; font-size: var(--t1); text-transform: uppercase; letter-spacing: .16em; color: var(--texte-doux); margin-top: var(--e1); }

.nav { display: flex; flex-wrap: wrap; gap: var(--e4); margin-top: var(--e3); font-size: var(--t2); }
.nav a { text-decoration: none; color: var(--texte-doux); padding-block: var(--e1); border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--texte); border-bottom-color: var(--texte); }
.nav a[aria-current="page"] { color: var(--texte); border-bottom-color: var(--texte); font-weight: 600; }

.corps { align-items: start; }
.principal { grid-column: 2; min-width: 0; }

.grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--e4); }

.bloc { padding-block: var(--e6); border-top: 1px solid var(--trait); }
.bloc:first-child { border-top: 0; }
.bloc--nuit { background: var(--encre); color: var(--fond); padding-inline: var(--e5); border-top: 0; margin-block: var(--e6); }
.bloc--nuit h2, .bloc--nuit h3 { color: var(--fond); }
.bloc--nuit .surtitre, .bloc--nuit .texte-long { color: #B9C2B8; }

.surtitre { font-size: var(--t1); text-transform: uppercase; letter-spacing: .16em; color: var(--texte-doux); font-weight: 600; }
.filet-accent { display: block; width: 56px; height: 3px; background: var(--accent); margin-block: var(--e3) var(--e4); }
.chapo { font-size: var(--t4); line-height: 1.45; color: var(--texte-doux); }
.texte-long { font-size: var(--t3); color: var(--texte-doux); }

/* colonnes nommées — asymétrie imposée, aucun bloc 1/13 */
.col-a { grid-column: 1 / 8; }
.col-b { grid-column: 8 / 13; }
.col-c { grid-column: 2 / 12; }
.col-d { grid-column: 1 / 10; }
.pleine { grid-column: 1 / 12; }
/* série de trois : 5-4-3, jamais trois colonnes égales */
.col-e { grid-column: 1 / 6; }
.col-f { grid-column: 6 / 10; }
.col-g { grid-column: 10 / 13; }

/* ---------- hero ---------- */

.hero { padding-block: var(--e6) var(--e6); }
.hero-texte { grid-column: 1 / 9; }
.hero-texte h1 { font-size: var(--t7); }
.hero-vis { grid-column: 4 / 13; margin-top: var(--e5); }
.vis { width: 100%; }
.vis-large { width: 100%; }
.legende { font-size: var(--t1); color: var(--texte-doux); margin-top: var(--e2); letter-spacing: .02em; }

.appel {
  display: inline-block; margin-top: var(--e4);
  font-size: var(--t2); font-weight: 600; text-decoration: none;
  color: var(--fond); background: var(--accent);
  padding-block: var(--e2); padding-inline: var(--e4);
  border: 1px solid var(--accent);
}
.appel:hover { background: var(--texte); border-color: var(--texte); }

.lien { color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--trait); padding-bottom: 2px; }
.lien:hover { border-bottom-color: var(--texte); }

/* ---------- fiches, listes ---------- */

.fiche { border-top: 1px solid var(--trait); padding-block: var(--e4); }
.fiche-num { font-size: var(--t1); letter-spacing: .16em; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.fiche-titre { margin-top: var(--e2); }

.liste { list-style: none; }
.liste li { border-top: 1px solid var(--trait); padding-block: var(--e2); font-size: var(--t3); color: var(--texte-doux); }
.liste li:first-child { border-top: 0; }

.liste-def { list-style: none; }
.liste-def li { padding-block: var(--e3); border-top: 1px solid var(--trait); }
.liste-def li strong { font-family: "Newsreader", serif; font-size: var(--t4); font-weight: 600; display: block; }
.liste-def li span { display: block; margin-top: var(--e2); color: var(--texte-doux); font-size: var(--t3); }

.pastille { display: inline-block; border: 1px solid var(--trait); border-radius: 999px; padding-block: 2px; padding-inline: var(--e2); font-size: var(--t1); color: var(--texte-doux); letter-spacing: .06em; }

/* ---------- honoraires ---------- */

.tarif { border: 1px solid var(--trait); padding-block: var(--e4); padding-inline: var(--e4); background: var(--surface); }
.tarif-tete { font-family: "Newsreader", serif; font-size: var(--t4); font-weight: 600; }
.tarif-prix { font-size: var(--t5); font-variant-numeric: tabular-nums; margin-top: var(--e2); font-family: "Newsreader", serif; }
.tarif-prix small { font-size: var(--t1); color: var(--texte-doux); font-family: "Epilogue", sans-serif; display: block; letter-spacing: .04em; }
.tarif-liste { list-style: none; margin-top: var(--e3); }
.tarif-liste li { font-size: var(--t2); color: var(--texte-doux); padding-block: var(--e1); border-top: 1px solid var(--trait); }

.echeance { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--e4); border-top: 1px solid var(--trait); padding-block: var(--e3); }
.echeance-date { font-size: var(--t1); text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.echeance-objet { font-size: var(--t3); }

/* ---------- formulaire ---------- */

.formulaire { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--e4); }
.champ { display: block; margin-top: var(--e3); }
.champ span { display: block; font-size: var(--t1); text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); margin-bottom: var(--e1); }
.champ input, .champ textarea, .champ select {
  width: 100%; font-family: "Epilogue", sans-serif; font-size: var(--t2); color: var(--texte);
  background: var(--fond); border: 1px solid var(--trait); border-radius: 0;
  padding-block: var(--e2); padding-inline: var(--e2);
}
.champ textarea { min-height: 7.5rem; resize: vertical; }
.note { font-size: var(--t1); color: var(--texte-doux); margin-top: var(--e3); }

/* ---------- pied ---------- */

.pied { background: var(--encre); color: var(--fond); padding-block: var(--e6); max-width: none; }
.pied-corps { grid-column: 2; font-size: var(--t2); color: #B9C2B8; }
.pied-nom { font-family: "Newsreader", serif; font-size: var(--t5); color: var(--fond); margin-bottom: var(--e3); }
.pied-corps a { color: var(--fond); }
.mention { margin-top: var(--e4); font-size: var(--t1); color: #7C877B; }

/* ---------- le dispositif : le rapprochement ---------- */

.rappro {
  grid-column: 2;
  font-size: var(--t1);
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
  border: 1px solid var(--trait);
  padding-block: var(--e3);
  padding-inline: var(--e3);
  margin-block: var(--e4) 0;
}
.rappro-titre { font-size: var(--t1); text-transform: uppercase; letter-spacing: .16em; color: var(--texte-doux); }
.rappro-tetes { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e2); margin-top: var(--e2); padding-bottom: var(--e1); border-bottom: 1px solid var(--trait); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; }
.rappro-lignes { list-style: none; }
.rappro-ligne {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e2);
  padding-block: var(--e1);
  border-bottom: 1px solid transparent;
  line-height: 1.3;
}
.rappro-a { text-align: right; }
.rappro-b { text-align: right; transform: translateY(0.35em); transition: transform .45s ease, color .45s ease; color: var(--texte-doux); }
.rappro-d { grid-column: 1 / 3; text-align: right; font-size: 0.6875rem; color: var(--texte-doux); opacity: .85; }
.rappro-ligne.appariee { border-bottom-color: var(--trait); }
.rappro-ligne.appariee .rappro-b { transform: translateY(0); color: var(--texte); }
.rappro-ligne.appariee .rappro-a { color: var(--texte); }
.rappro-ligne.appariee .rappro-d { opacity: .4; }
.rappro-pied { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid var(--trait); display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); text-transform: uppercase; letter-spacing: .12em; font-size: 0.6875rem; }
.rappro-ecart { color: var(--accent); white-space: nowrap; font-size: var(--t2); letter-spacing: 0; text-transform: none; font-weight: 600; }

.rappro--nuit { color: #B9C2B8; border-color: #3A423B; }

@media (prefers-reduced-motion: reduce) {
  .rappro-b { transition: none; }
}

/* sous 1180px : le dispositif quitte la gouttière et se compacte en bandeau de flux */
@media (max-width: 1179px) {
  .rappro-lignes { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e4); }
  .rappro-ligne { padding-block: 2px; }
}

/* ---------- révélations ---------- */

/* l'état fermé n'existe que si JS est actif : sans JS, la page reste entièrement lisible */
.js .ouvre { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .ouvre-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .ouvre { opacity: 1; transform: none; transition: none; }
  .js .ouvre-visible { opacity: 1; transform: none; transition: none; }
}

/* ---------- ≥1180px : la marge de lecture existe ---------- */

@media (min-width: 1180px) {
  :root { --marge-disp: 132px; }
  .rappro-pied { flex-direction: column; align-items: flex-start; gap: var(--e1); }
  .page { padding-inline: var(--e5); }
  .rappro { grid-column: 1; position: sticky; top: 16vh; margin-block: 0; border: 0; padding-inline: 0; padding-block: 0; border-left: 1px solid var(--trait); padding-left: var(--e2); }
  .entete .marque { grid-column: 2; }
  .entete .nav { grid-column: 2; }
  .pied-corps { grid-column: 2; }
}

@media (min-width: 1180px) {
  .entete { display: grid; grid-template-columns: var(--marge-disp) minmax(0, 1fr); }
  .entete .marque { grid-column: 2; }
  .entete .nav { grid-column: 2; justify-self: start; margin-top: var(--e3); }
}

/* ---------- sous 900px : la grille se replie ---------- */

@media (max-width: 900px) {
  .grille { grid-template-columns: repeat(6, 1fr); column-gap: var(--e3); }
  .col-a { grid-column: 1 / 7; }
  .col-b { grid-column: 1 / 7; margin-top: var(--e4); }
  .col-c { grid-column: 1 / 7; }
  .col-d { grid-column: 1 / 7; }
  .pleine { grid-column: 1 / 7; }
  .col-e { grid-column: 1 / 7; }
  .col-f { grid-column: 1 / 7; margin-top: var(--e4); }
  .col-g { grid-column: 1 / 7; margin-top: var(--e4); }
  .hero-texte { grid-column: 1 / 7; }
  .hero-vis { grid-column: 1 / 7; }
  .formulaire { grid-template-columns: repeat(6, 1fr); }
  .bloc { padding-block: var(--e5); }
  .bloc--nuit { padding-inline: var(--e4); }
  .echeance { grid-template-columns: minmax(0, 1fr); row-gap: var(--e1); }
}

@media (max-width: 560px) {
  .page { padding-inline: var(--e3); }
  .nav { gap: var(--e3); }
}