/* simulateur-monte-escalier.fr
   Lisibilité d'abord : corps à 18 px, interlignage large, cibles tactiles à 48 px,
   contrastes AAA sur le texte courant. Le public a 70 ans et plus. */

:root {
  --ink: #17211d;
  --ink2: #4c5b54;
  --ink3: #6d7c74;
  --bg: #f2f5f3;
  --card: #ffffff;
  --line: #d7e0da;
  --line2: #eaefec;
  --acc: #0f5c46;
  --acc-d: #0a4234;
  --acc-t: #e3efe9;
  --alert: #8f3316;
  --alert-t: #fbeee7;
  --r: 10px;
  --sh: 0 1px 2px rgba(23, 33, 29, .06), 0 8px 24px -12px rgba(23, 33, 29, .18);
  --wrap: 1180px;
}

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

/* Racine à 18 px : sans cela, tous les rem de cette feuille se calculent sur les
   16 px par défaut du navigateur et le texte secondaire tombe à 13-15 px, ce qui
   est illisible pour le public visé. Les media queries restent sur 16 px par
   définition CSS, les points de rupture ne bougent donc pas. */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.65 "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Schibsted Grotesk", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem); margin-top: 0; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); }

p { margin: 0 0 1.05em; }
p, li { max-width: 68ch; }

a { color: var(--acc-d); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--acc); }

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

img { max-width: 100%; height: auto; display: block; }

.hlz-wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }

.hlz-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--acc); color: #fff; padding: .8rem 1.2rem; z-index: 99;
}
.hlz-skip:focus { left: .5rem; top: .5rem; }

/* ---------- en-tête ---------- */

.hlz-top {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.hlz-top__in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 72px;
}
.hlz-brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: "Schibsted Grotesk", sans-serif; font-weight: 700; font-size: 1.06rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.02em; line-height: 1.2;
  margin-right: auto;
}
.hlz-brand svg { flex: none; }
/* L'en-tête est collant : sous 34rem, la baseline ferait grimper la marque à
   quatre lignes et mangerait un huitième de l'écran sur toute la navigation. */
.hlz-brand span { display: none; font-weight: 400; font-size: .74rem; letter-spacing: 0; color: var(--ink3); }
@media (min-width: 34rem) { .hlz-brand span { display: block; } }

.hlz-burger {
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink); cursor: pointer;
}
.hlz-burger__x { display: none; }
.hlz-burger[aria-expanded="true"] .hlz-burger__x { display: block; }
.hlz-burger[aria-expanded="true"] .hlz-burger__b { display: none; }

.hlz-nav { display: none; }
.hlz-nav a {
  display: block; padding: .85rem .2rem; color: var(--ink);
  text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line2);
}
.hlz-nav a:hover { color: var(--acc); }
.hlz-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: .4rem 1.2rem 1.2rem; box-shadow: var(--sh);
}
/* `.hlz-nav a` est plus spécifique que `.hlz-btn` et écrase display et padding :
   le libellé viendrait coller aux bords du bouton, dans le menu comme en barre. */
.hlz-nav .hlz-btn { display: flex; margin-top: .9rem; border-bottom: 0; padding: .78rem 1.35rem; }

@media (min-width: 62rem) {
  .hlz-burger { display: none; }
  .hlz-nav { display: flex; align-items: center; gap: 1.55rem; }
  .hlz-nav a { border-bottom: 0; padding: .5rem 0; font-size: .97rem; }
  .hlz-nav .hlz-btn { margin-top: 0; flex: none; }
}

/* ---------- boutons ---------- */

.hlz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .78rem 1.35rem;
  font: 700 1.02rem/1.2 "Schibsted Grotesk", sans-serif;
  border-radius: var(--r); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.hlz-btn--main { background: var(--acc); color: #fff; }
.hlz-btn--main:hover { background: var(--acc-d); color: #fff; }
.hlz-btn--line { background: var(--card); color: var(--acc-d); border-color: var(--line); }
.hlz-btn--line:hover { border-color: var(--acc); color: var(--acc-d); }
.hlz-btn:active { transform: translateY(1px); }
.hlz-btn--wide { width: 100%; }

/* ---------- héros ---------- */

.hlz-hero { background: var(--card); border-bottom: 1px solid var(--line); }
.hlz-hero__in { display: flex; flex-direction: column; gap: 1.6rem; padding: 1.8rem 0 2.2rem; }
.hlz-hero__txt { order: 3; }
.hlz-hero__head { order: 1; }
.hlz-hero__panel { order: 2; }
.hlz-hero h1 { margin-bottom: .55rem; }
.hlz-hero__sub { font-size: 1.09rem; color: var(--ink2); max-width: 58ch; }

.hlz-eyebrow {
  display: inline-block; margin-bottom: .7rem;
  font: 700 .78rem/1 "Schibsted Grotesk", sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--acc);
  background: var(--acc-t); padding: .45rem .7rem; border-radius: 6px;
}

.hlz-points { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.hlz-points li { display: flex; gap: .6rem; align-items: flex-start; font-size: 1rem; color: var(--ink2); }
.hlz-points svg { flex: none; margin-top: .38rem; color: var(--acc); }

@media (min-width: 64rem) {
  .hlz-hero__in {
    display: grid; grid-template-columns: 1fr 30rem; gap: 2.6rem 3.2rem;
    /* Le panneau du formulaire s'étend sur les deux rangées et dépasse largement
       la colonne de gauche. Avec deux rangées intrinsèques, la grille répartit
       son excédent entre elles et creuse un trou de 190 px sous le titre. La
       deuxième rangée en 1fr absorbe seule le dépassement. */
    grid-template-rows: max-content 1fr;
    align-items: start; padding: 3rem 0 3.4rem;
  }
  .hlz-hero__head { grid-column: 1; }
  .hlz-hero__txt { grid-column: 1; margin-top: -1.2rem; }
  .hlz-hero__panel { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 92px; }
}

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

.hlz-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh); padding: 1.4rem;
}
.hlz-panel--tint { background: var(--acc-t); border-color: #c5ddd3; }
.hlz-panel__t { font-size: 1.25rem; margin-bottom: .25rem; }
.hlz-panel__s { font-size: .95rem; color: var(--ink2); margin-bottom: 1.1rem; }

.hlz-field { margin-bottom: .95rem; }
.hlz-field > label, .hlz-legend {
  display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem;
}
.hlz-hint { display: block; font-weight: 400; font-size: .87rem; color: var(--ink3); margin-bottom: .4rem; }

.hlz-input, .hlz-select, .hlz-area {
  width: 100%; min-height: 52px; padding: .7rem .85rem;
  font: 400 1.02rem/1.4 inherit; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r);
}
.hlz-area { min-height: 104px; resize: vertical; }
.hlz-input:focus, .hlz-select:focus, .hlz-area:focus { border-color: var(--acc); }
.hlz-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234c5b54' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.6rem;
}
.hlz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hlz-two { display: grid; gap: .95rem; }
@media (min-width: 30rem) { .hlz-two { grid-template-columns: 1fr 1fr; } }

.hlz-note { font-size: .85rem; color: var(--ink3); line-height: 1.55; margin: .8rem 0 0; }
.hlz-note a { color: var(--ink2); }

.hlz-consent {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: start; margin: 1.1rem 0 .2rem;
  padding: .85rem .95rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--acc-t);
}
.hlz-consent input { width: 1.55rem; height: 1.55rem; margin: .1rem 0 0; accent-color: var(--acc); }
.hlz-consent label { font-size: .92rem; line-height: 1.5; color: var(--ink2); cursor: pointer; }

/* ---------- bandeau de réassurance ---------- */

.hlz-band { background: var(--acc-d); color: #dbe9e3; }
.hlz-band__in {
  display: flex; flex-wrap: wrap; gap: .5rem 1.8rem;
  padding: .85rem 0; font-size: .93rem;
}
.hlz-band b { color: #fff; }

/* ---------- sections ---------- */

.hlz-sec { padding: 3rem 0; }
.hlz-sec--tint { background: var(--card); border-block: 1px solid var(--line); }
.hlz-sec__head { max-width: 60ch; margin-bottom: 1.8rem; }
.hlz-sec__head p { color: var(--ink2); }

.hlz-grid { display: grid; gap: 1.1rem; }
@media (min-width: 44rem) { .hlz-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .hlz-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 44rem) { .hlz-grid--3 { grid-template-columns: repeat(2, 1fr); } }

.hlz-tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.25rem;
}
.hlz-tile h3 { margin-bottom: .4rem; }
.hlz-tile p { font-size: .97rem; color: var(--ink2); margin-bottom: 0; }
.hlz-tile__px { font: 700 1.28rem/1 "Schibsted Grotesk", sans-serif; color: var(--acc-d); display: block; margin: .55rem 0 .5rem; }
a.hlz-tile { text-decoration: none; color: inherit; display: block; }
a.hlz-tile:hover { border-color: var(--acc); }
a.hlz-tile h3 { color: var(--acc-d); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- encart d'alerte factuelle ---------- */

.hlz-alert {
  background: var(--alert-t); border: 1px solid #eccdbf; border-left: 5px solid var(--alert);
  border-radius: var(--r); padding: 1.15rem 1.25rem; margin: 1.6rem 0;
}
.hlz-alert h3 { color: var(--alert); margin-bottom: .35rem; font-size: 1.1rem; }
.hlz-alert p { margin-bottom: 0; font-size: .99rem; }
.hlz-alert p + p { margin-top: .7rem; }

/* ---------- tableaux ---------- */

/* Ombres de défilement : le dégradé de droite ne s'affiche que tant qu'il reste
   du tableau à découvrir, parce que la couche « local » se décale avec le contenu
   et vient masquer la couche « scroll » en fin de course. Sans ce repère, rien
   n'indique à l'écran que le tableau continue au-delà du bord. */
.hlz-scroll {
  overflow-x: auto; margin: 1.4rem 0;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  background-image:
    linear-gradient(to right, var(--card), rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--card), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(23, 33, 29, .26), rgba(255, 255, 255, 0)),
    linear-gradient(to left,  rgba(23, 33, 29, .26), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.4rem 100%, 2.4rem 100%, .95rem 100%, .95rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.hlz-scroll:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.hlz-table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 34rem; }
/* La légende hérite du min-width de la table et se ferait donc tronquer hors du
   cadre visible. Collée à gauche et bornée à la largeur d'écran, elle reste lisible
   sans avoir à faire défiler le tableau. */
.hlz-table caption {
  position: sticky; left: 0;
  box-sizing: border-box; width: min(100%, 100vw - 3.2rem);
  text-align: left; padding: .9rem 1rem .2rem; font-size: .88rem; color: var(--ink3);
}
.hlz-table th, .hlz-table td { padding: .72rem 1rem; text-align: left; border-bottom: 1px solid var(--line2); }
.hlz-table thead th { background: var(--acc-t); font-size: .88rem; color: var(--acc-d); border-bottom: 1px solid var(--line); }
.hlz-table tbody tr:last-child td { border-bottom: 0; }
.hlz-table td b { font-family: "Schibsted Grotesk", sans-serif; }

/* ---------- simulateur ---------- */

.hlz-sim { display: grid; gap: 1.8rem; }
@media (min-width: 62rem) { .hlz-sim { grid-template-columns: 1fr 26rem; align-items: start; } }

.hlz-out { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; }
.hlz-out__lab { font-size: .9rem; color: var(--ink3); }
.hlz-out__big {
  font: 700 clamp(2rem, 1.4rem + 2.6vw, 2.9rem)/1 "Schibsted Grotesk", sans-serif;
  color: var(--acc); letter-spacing: -.03em; display: block; margin: .15rem 0 .1rem;
}
.hlz-out__row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line2); font-size: .98rem; }
.hlz-out__row:last-of-type { border-bottom: 0; }
.hlz-out__row b { font-family: "Schibsted Grotesk", sans-serif; white-space: nowrap; }
.hlz-out__ko { background: var(--alert-t); border-color: #eccdbf; }
.hlz-out__ko .hlz-out__big { color: var(--alert); }
.hlz-out ul { margin: .6rem 0 0; padding-left: 1.15rem; }
.hlz-out li { font-size: .96rem; color: var(--ink2); margin-bottom: .45rem; }

.hlz-bar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; display: flex; margin: 1rem 0 .5rem; }
.hlz-bar i { display: block; height: 100%; }
.hlz-bar i:first-child { background: var(--acc); }
.hlz-bar i:last-child { background: #b9c6bf; }
.hlz-key { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .88rem; color: var(--ink2); }
.hlz-key span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .4rem; }
.hlz-key .k1::before { background: var(--acc); }
.hlz-key .k2::before { background: #b9c6bf; }

/* ---------- questions ---------- */

.hlz-faq { border-top: 1px solid var(--line); }
.hlz-faq details { border-bottom: 1px solid var(--line); }
.hlz-faq summary {
  cursor: pointer; padding: 1.05rem .5rem 1.05rem 0; list-style: none;
  font: 700 1.05rem/1.4 "Schibsted Grotesk", sans-serif;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.hlz-faq summary::-webkit-details-marker { display: none; }
.hlz-faq summary::after { content: "+"; color: var(--acc); font-size: 1.5rem; line-height: 1; flex: none; }
.hlz-faq details[open] summary::after { content: "\2212"; }
.hlz-faq details > div { padding-bottom: 1.1rem; }
.hlz-faq details > div p:last-child { margin-bottom: 0; }

/* ---------- maillage ---------- */

.hlz-links { columns: 2 12rem; column-gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.hlz-links li { break-inside: avoid; font-size: .97rem; }
/* Le lien occupe toute la largeur de la colonne : la cible tactile atteint 48 px
   de haut même sur un libellé court, sur une seule ligne. */
.hlz-links a { display: block; padding: .68rem 0 .28rem; color: var(--acc-d); }
.hlz-links .hlz-links__n { display: block; padding-bottom: .68rem; color: var(--ink3); font-size: .85rem; }

.hlz-crumb { font-size: .89rem; color: var(--ink3); padding: .9rem 0 0; }
.hlz-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.hlz-crumb li::after { content: "›"; margin-left: .35rem; color: var(--ink3); }
.hlz-crumb li:last-child::after { content: ""; }
.hlz-crumb a { color: var(--ink2); }

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

.hlz-foot { background: var(--ink); color: #b9c7c0; padding: 2.6rem 0 1.8rem; margin-top: 0; font-size: .95rem; }
.hlz-foot__in { display: grid; gap: 1.8rem; }
@media (min-width: 50rem) { .hlz-foot__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.hlz-foot h2 { color: #fff; font-size: 1rem; margin-bottom: .7rem; }
.hlz-foot a { color: #cfe0d8; }
.hlz-foot ul { list-style: none; margin: 0; padding: 0; }
.hlz-foot li { display: flex; }
.hlz-foot li a { flex: 1; padding: .62rem 0; }
.hlz-foot__legal { border-top: 1px solid #2c3a34; margin-top: 1.8rem; padding-top: 1.2rem; font-size: .85rem; color: #8b9a93; }
.hlz-foot__legal p { max-width: none; }

/* ---------- divers ---------- */

.hlz-lede { font-size: 1.09rem; color: var(--ink2); }
.hlz-src { font-size: .85rem; color: var(--ink3); }
.hlz-src a { color: var(--ink2); }
.hlz-prose h2 { margin-top: 2.4rem; }
.hlz-prose h3 { margin-top: 1.7rem; }
.hlz-prose ul, .hlz-prose ol { padding-left: 1.3rem; }
.hlz-prose li { margin-bottom: .5rem; }
.hlz-figure { margin: 1.8rem 0; }
.hlz-figure img { border-radius: var(--r); border: 1px solid var(--line); width: 100%; }
.hlz-figure figcaption { font-size: .87rem; color: var(--ink3); margin-top: .55rem; }