/* avocat-brevet.fr — V4-norme, teinte 130 (vert bouteille), Roboto Slab en titrage.
   Préfixe brv-. Aucune photo : les planches de brevet en SVG portent le visuel.
   G28 : --ink et --accent sont écrits en LITTÉRAL, les triplets -rgb vivent à côté
   pour les voiles ; tout bloc à fond coloré porte une `color:` explicite. */

@font-face {
  font-family: "Roboto Slab"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/fonts/roboto-slab-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Slab"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/fonts/roboto-slab-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --papier: #f6f7f5;          /* blanc froid */
  --surface: #eceeea;
  --ink: #14181c;             /* encre bleu-noir, littéral (G28) */
  --ink-2: #414a52;
  --ink-3: #5b6469;
  --accent: #3f7a34;          /* vert bouteille, teinte 130, littéral (G28) */
  --accent-fort: #2c5624;
  --papier-rgb: 246 247 245;
  --ink-rgb: 20 24 28;
  --accent-rgb: 63 122 52;
  --trait: #c9cec7;
  --trait-fort: #767e75;
  --titre: "Roboto Slab", "DejaVu Serif", Georgia, serif;
  --corps: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gout: clamp(1.15rem, 4vw, 2rem);   /* gouttière : jamais de H1 au pixel 0 */
  --max: 74rem;
  --max-etroit: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--ink);
  font-family: var(--corps); font-size: 1.02rem; line-height: 1.66;
  font-variant-numeric: tabular-nums lining-nums;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent-fort); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.18; letter-spacing: -.008em; color: var(--ink); }
h1 { font-size: clamp(1.85rem, 4.6vw, 3rem); margin: 0 0 .6em; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .7em; text-wrap: balance; }
h3 { font-size: 1.06rem; margin: 0 0 .4em; }
p { margin: 0 0 1.1em; }

.brv-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gout); }
.brv-narrow { max-width: calc(var(--max-etroit) + 2 * var(--gout)); }
main > section { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.brv-bg-s { background: var(--surface); }
.brv-bg-ink { background: var(--ink); color: var(--papier); }
.brv-bg-ink h1, .brv-bg-ink h2, .brv-bg-ink h3 { color: var(--papier); }
.brv-bg-ink a { color: #a7d69b; }
.brv-bg-ink .brv-lede, .brv-bg-ink p { color: #d6dbd4; }
.brv-filet { border: 0; border-top: 1px solid var(--trait); margin: 0; }
.brv-skip { position: absolute; left: -9999px; }
.brv-skip:focus { left: var(--gout); top: .5rem; z-index: 40; background: var(--ink); color: var(--papier); padding: .6rem 1rem; }

/* ── En-tête ─────────────────────────────────────────────── */
.brv-bandeau { background: var(--ink); color: var(--papier); font-size: .78rem; }
.brv-bandeau .brv-wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: space-between; padding-block: .45rem; }
.brv-bandeau a { color: #a7d69b; }
.brv-hdr { position: sticky; top: 0; z-index: 30; background: var(--papier); border-bottom: 2px solid var(--ink); }
.brv-hdr > .brv-wrap { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; }
.brv-mark { display: block; text-decoration: none; color: var(--ink); min-width: 0; flex: 1 1 auto; }
.brv-mark b { display: block; font-family: var(--titre); font-size: 1.12rem; letter-spacing: -.01em; }
.brv-mark span { display: block; font-size: .72rem; color: var(--ink-3); text-transform: none; }
.brv-burger { flex: 0 0 auto; font: inherit; font-size: .88rem; background: var(--papier); color: var(--ink);
  border: 2px solid var(--ink); padding: .38rem .8rem; cursor: pointer; }
.brv-nav ul { list-style: none; margin: 0; padding: 0; }
.brv-nav > ul { display: flex; flex-wrap: wrap; gap: .2rem; }
.brv-drop > button { font: inherit; font-size: .92rem; background: none; border: 0; color: var(--ink);
  padding: .5rem .7rem; cursor: pointer; border-bottom: 3px solid transparent; }
.brv-drop > button:hover, .brv-drop[data-open="1"] > button { border-bottom-color: var(--accent); }
.brv-panel { display: none; }
.brv-drop[data-open="1"] .brv-panel { display: block; }
.brv-panel a { display: block; text-decoration: none; color: var(--ink); padding: .5rem .7rem; border-left: 3px solid transparent; }
.brv-panel a:hover { background: var(--surface); border-left-color: var(--accent); }
.brv-panel small { display: block; font-size: .74rem; color: var(--ink-3); }

@media (min-width: 61rem) {
  .brv-burger { display: none; }
  .brv-nav { flex: 0 0 auto; }
  .brv-drop { position: relative; }
  .brv-panel { position: absolute; top: 100%; left: 0; min-width: 17rem; background: var(--papier);
    border: 2px solid var(--ink); box-shadow: 0 10px 0 -6px rgb(var(--ink-rgb) / .12); }
}
@media (max-width: 60.99rem) {
  .brv-nav { display: none; flex-basis: 100%; }
  .brv-hdr[data-nav="1"] .brv-nav { display: block; }
  .brv-nav > ul { display: block; }
  .brv-drop > button { display: block; width: 100%; text-align: left; border-bottom: 1px solid var(--trait); }
  .brv-panel { border-left: 3px solid var(--accent); margin: 0 0 .4rem .4rem; }
}

/* ── Hero ────────────────────────────────────────────────── */
.brv-hero { padding-block: clamp(1.8rem, 4.5vw, 3.2rem) clamp(2rem, 5vw, 3.4rem); }
.brv-hero-g { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); align-items: start; }
@media (min-width: 62rem) { .brv-hero-g { grid-template-columns: 1.08fr .92fr; } }
.brv-kick { font-family: var(--mono); font-size: .74rem; color: var(--accent-fort); margin: 0 0 .9em;
  border-left: 3px solid var(--accent); padding-left: .6rem; }
.brv-lede { font-size: clamp(1.02rem, 2vw, 1.16rem); color: var(--ink-2); }
.brv-hero-sec { border-bottom: 1px solid var(--trait); }
/* Mobile : le titre passe AVANT le formulaire visuellement, DOM inchangé (mesure G37/G32) */
@media (max-width: 61.99rem) { .brv-hero-g { display: flex; flex-direction: column; } .brv-hero-t { order: 1; } .brv-hero-f { order: 2; } }

/* ── Formulaire ──────────────────────────────────────────── */
.brv-form { background: var(--papier); border: 2px solid var(--ink); padding: clamp(1rem, 3vw, 1.5rem); }
.brv-bg-s .brv-form, .brv-bg-ink .brv-form { background: var(--papier); color: var(--ink); }
.brv-form-t { font-size: 1.2rem; margin-bottom: .5em; }
/* Variante compacte : formulaire de tête des pages internes, sans champ libre */
.brv-form-c { padding: clamp(.9rem, 2.4vw, 1.2rem); }
.brv-form-c .brv-form-t { font-size: 1.08rem; }
.brv-form-c .brv-garde { font-size: .84rem; }
.brv-garde { border-left: 4px solid var(--accent); background: rgb(var(--accent-rgb) / .07); color: var(--ink);
  padding: .65rem .8rem; font-size: .88rem; margin: 0 0 1.1em; }
.brv-f-g { display: grid; gap: .9rem; margin-bottom: .9rem; }
@media (min-width: 34rem) { .brv-f-g { grid-template-columns: 1fr 1fr; } }
.brv-f-c label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .28rem; }
.brv-req { font-weight: 400; font-size: .72rem; color: var(--ink-3); }
.brv-form input[type="email"], .brv-form input[type="text"], .brv-form select, .brv-form textarea {
  width: 100%; font: inherit; font-size: .95rem; padding: .58rem .6rem; color: var(--ink);
  background: var(--papier); border: 1px solid var(--trait-fort); border-radius: 0;
}
.brv-form textarea { resize: vertical; min-height: 7.4em; }
.brv-f-aide { font-size: .76rem; color: var(--ink-3); margin: .35rem 0 0; }
.brv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brv-consent { display: flex; gap: .6rem; align-items: start; margin: 1rem 0; font-size: .8rem; color: var(--ink-2); }
.brv-consent input { margin-top: .25rem; flex: 0 0 auto; }
.brv-btn { display: inline-block; font: inherit; font-weight: 600; font-size: .95rem; text-decoration: none;
  background: var(--accent-fort); color: #ffffff; border: 2px solid var(--accent-fort);
  padding: .62rem 1.15rem; cursor: pointer; }
.brv-btn:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.brv-btn-l { background: var(--papier); color: var(--ink); border-color: var(--ink); }
.brv-btn-l:hover { background: var(--ink); color: var(--papier); }
.brv-bg-ink .brv-btn-l { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.brv-rassure { font-size: .78rem; color: var(--ink-3); margin: .8rem 0 0; }

/* ── Blocs de contenu ────────────────────────────────────── */
.brv-loi { border: 1px solid var(--trait-fort); border-left: 5px solid var(--accent);
  background: var(--papier); color: var(--ink); padding: 1rem 1.1rem; margin: 0 0 1.4em; }
.brv-loi h3 { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--accent-fort); letter-spacing: .01em; }
.brv-loi p { margin: 0; }
.brv-liste { margin: 0 0 1.2em; padding-left: 1.1rem; }
.brv-liste li { margin-bottom: .5em; }
.brv-steps { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .brv-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .brv-steps { grid-template-columns: repeat(4, 1fr); } }
.brv-steps > div { border-top: 3px solid var(--ink); padding-top: .8rem; }
/* Variante « déroulé » : filet d'accent, aucune numérotation décorative (G47, règle du parc) */
.brv-steps-num > div { border-top-color: var(--accent); }
.brv-steps-num h3 { font-family: var(--corps); font-size: .98rem; }
.brv-steps p { font-size: .9rem; color: var(--ink-2); margin: 0; }
.brv-cards { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .brv-cards { grid-template-columns: repeat(2, 1fr); } }
.brv-cards a { display: block; text-decoration: none; color: var(--ink); background: var(--papier);
  border: 1px solid var(--trait-fort); border-left: 5px solid var(--accent); padding: 1rem 1.1rem; }
.brv-cards a:hover { border-color: var(--ink); border-left-color: var(--ink); }
.brv-cards strong { display: block; font-family: var(--titre); font-size: 1.02rem; margin-bottom: .3rem; }
.brv-cards span { display: block; font-size: .88rem; color: var(--ink-2); }
.brv-trust { display: grid; gap: 1.2rem; }
@media (min-width: 52rem) { .brv-trust { grid-template-columns: repeat(3, 1fr); } }
.brv-trust > div { border-top: 3px solid var(--accent); padding-top: .8rem; }
.brv-trust p { font-size: .9rem; color: var(--ink-2); margin: 0; }
.brv-relance { border: 1px dashed var(--trait-fort); padding: 1rem 1.1rem; margin: 1.6rem 0 0;
  display: grid; gap: .8rem; align-items: center; }
@media (min-width: 44rem) { .brv-relance { grid-template-columns: 1fr auto; } }
.brv-relance p { margin: 0; font-size: .94rem; color: var(--ink-2); }

/* Tableaux : le cœur de deux pages, chiffres tabulaires */
.brv-tw { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--trait-fort); }
.brv-tw table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 32rem; }
.brv-tw caption { text-align: left; font-size: .78rem; color: var(--ink-3); padding: .6rem .7rem; background: var(--surface); }
.brv-tw th, .brv-tw td { text-align: left; padding: .55rem .7rem; border-top: 1px solid var(--trait); vertical-align: top; }
.brv-tw thead th { background: var(--ink); color: var(--papier); font-size: .8rem; border-top: 0; }
.brv-tw tbody th { font-weight: 600; }
.brv-tw tbody tr:nth-child(even) { background: rgb(var(--ink-rgb) / .035); }

.brv-faq details { border-top: 1px solid var(--trait); }
.brv-faq details:last-of-type { border-bottom: 1px solid var(--trait); }
.brv-faq summary { cursor: pointer; padding: .8rem 0; font-weight: 600; font-size: .96rem; list-style: none; }
.brv-faq summary::-webkit-details-marker { display: none; }
.brv-faq summary::before { content: "+"; font-family: var(--mono); color: var(--accent-fort); margin-right: .6rem; }
.brv-faq details[open] summary::before { content: "–"; }
.brv-a { padding: 0 0 .9rem 1.4rem; color: var(--ink-2); font-size: .94rem; }
.brv-maj { font-size: .78rem; color: var(--ink-3); margin-top: 1.4rem; }
.brv-crumb { padding-block: .7rem 0; font-size: .78rem; color: var(--ink-3); }
.brv-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.brv-crumb li + li::before { content: "/"; margin-right: .4rem; color: var(--trait-fort); }
.brv-index { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .brv-index { grid-template-columns: repeat(2, 1fr); } }
.brv-index a { display: block; text-decoration: none; color: var(--ink); border-top: 3px solid var(--ink); padding-top: .8rem; }
.brv-index a:hover { border-top-color: var(--accent); }
.brv-index strong { display: block; font-family: var(--titre); font-size: 1.02rem; margin-bottom: .3rem; }
.brv-index span { display: block; font-size: .86rem; color: var(--ink-2); }

/* ── Planche de brevet (module signature) ────────────────── */
.brv-planche { margin: 0 0 1.4em; }
.brv-planche svg { display: block; width: 100%; background: var(--papier); }
/* Sous 700 px, une planche mise à l'échelle rendrait ses libellés à 7 px (G-SVG-TEXTE-RENDU).
   On garde donc sa taille naturelle et on la fait défiler dans sa propre boîte. */
@media (max-width: 43.7rem) {
  .brv-planche { overflow-x: auto; }
  .brv-planche svg { width: 600px; min-width: 600px; }
  .brv-planche figcaption { position: sticky; left: 0; }
}
.brv-planche figcaption { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); margin-top: .5rem; }
.brv-planche-bord { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.brv-tr { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.brv-dash { stroke-dasharray: 5 4; }
.brv-hatch { fill: rgb(var(--accent-rgb) / .14); stroke: var(--accent-fort); }
.brv-axe { stroke: var(--ink-2); stroke-width: 1.2; }
.brv-arrow { marker-end: none; }
.brv-pt { fill: var(--ink-2); }
.brv-rep line { stroke: var(--trait-fort); stroke-width: 1; }
.brv-rep circle { fill: var(--papier); stroke: var(--accent-fort); stroke-width: 1.4; }
.brv-rep text { font-family: var(--mono); font-size: 12px; fill: var(--accent-fort); text-anchor: middle; }
.brv-rep-lab, .brv-rep text.brv-rep-lab { font-family: var(--corps); font-size: 12px; fill: var(--ink-2); text-anchor: start; }
.brv-rep-lab-r, .brv-rep text.brv-rep-lab-r { text-anchor: end; }
.brv-tick line { stroke: var(--ink); stroke-width: 1.2; }
.brv-tick-m { font-family: var(--mono); font-size: 12px; fill: var(--accent-fort); text-anchor: middle; }
.brv-tick-l { font-family: var(--corps); font-size: 12px; fill: var(--ink); text-anchor: start; }
.brv-mid { text-anchor: middle; }
.brv-big { font-family: var(--titre); font-size: 26px; fill: var(--ink); font-weight: 700; text-anchor: middle; }
.brv-cart rect { fill: var(--papier); stroke: var(--ink); stroke-width: 1.2; }
.brv-cart-sep { stroke: var(--trait); stroke-width: 1; }
.brv-cart text { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.brv-cart-sub { font-size: 12px; fill: var(--ink-3); }

/* ── Pied ────────────────────────────────────────────────── */
.brv-ft { background: var(--ink); color: var(--papier); padding-block: clamp(2rem, 5vw, 3rem) 1.4rem; margin-top: 0; }
.brv-ft h3 { color: var(--papier); font-size: .94rem; }
.brv-ft a { color: #a7d69b; }
.brv-ft-cols { display: grid; gap: 1.6rem; }
@media (min-width: 50rem) { .brv-ft-cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.brv-ft ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.brv-ft li { margin-bottom: .38em; }
.brv-ft-nature { font-size: .86rem; color: #cfd5cd; }
.brv-ft-nature strong { color: var(--papier); }
.brv-ft-src { font-size: .74rem; color: #aeb5ac; border-top: 1px solid #333b41; padding-top: 1rem; margin-top: 1.8rem; }
.brv-ft-end { font-size: .74rem; color: #aeb5ac; margin: .6rem 0 0; }

/* ── Compression du premier écran mobile (G32) ────────────────────────────
   L'action primaire doit être ENTIÈREMENT visible sans défiler à 390×844.
   Rien n'est supprimé du document : seuls le rappel de vérification (repris
   en pied de page dans .brv-maj) et la ligne de périmètre du bandeau (reprise
   au pied) cèdent la place sur petit écran. */
@media (max-width: 38.7rem) {
  .brv-bandeau .brv-wrap > span:first-child { display: none; }
  .brv-hero { padding-block: .8rem 1.4rem; }
  .brv-hero .brv-kick { display: none; }
  .brv-hero h1 { font-size: 1.5rem; line-height: 1.14; margin-bottom: .4em; }
  .brv-hero .brv-lede { font-size: .92rem; line-height: 1.46; margin-bottom: 0; }
  .brv-hero-g { gap: 1.1rem; }
  .brv-form-c { padding: .85rem; }
  .brv-form-c .brv-form-t { font-size: 1rem; margin-bottom: .35em; }
  .brv-form-c .brv-garde { padding: .45rem .55rem; margin-bottom: .7em; font-size: .78rem; line-height: 1.4; }
  .brv-form-c .brv-f-c { margin-bottom: .6rem; }
  .brv-form-c .brv-f-c label { font-size: .78rem; }
  .brv-form-c input, .brv-form-c select { padding: .5rem .55rem; }
  .brv-form-c .brv-consent { margin: .6rem 0; font-size: .76rem; }
  .brv-bandeau .brv-wrap { padding-block: .35rem; }
}