/* Réseau local (assurance-lyon.com et les trois sites spécialisés) : la feuille commune. Reprise de pistes/b/commun.css le 9 novembre 2026, puis augmentée des pages intérieures. */
@font-face { font-family: "Gambarino"; font-weight: 400; font-display: swap; src: url("../fonts/gambarino-400.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 400; font-display: swap; src: url("../fonts/general-sans-400.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 500; font-display: swap; src: url("../fonts/general-sans-500.woff2") format("woff2"); }

:root {
  /* noir et champagne : une façade laquée, des lettres dorées, des montants ivoire */
  --nuit: #0d0b09;         /* le fond de la page, la façade */
  --nuit-2: #15120f;       /* un pas plus clair : les surfaces */
  --nuit-3: #1f1a16;       /* la porte laquée, les plaques */
  --nuit-4: #2a241e;       /* survols sur noir */
  --profond: #080706;      /* le pied de page */
  --ivoire: #ede6d8;       /* le texte, les montants peints */
  --doux: #b7ad9c;         /* texte secondaire sur noir */
  --champagne: #c9ae76;    /* l'accent : l'enseigne, l'action, la plaque de laiton */
  --champagne-2: #dcc48f;  /* son survol */
  --filet: rgba(237, 230, 216, 0.14);        /* séparations sur noir */
  --ouvert: #8fc28a;
  --ferme: #7d7468;

  --serif: "Gambarino", "Iowan Old Style", Georgia, serif;
  --sans: "General Sans", "Segoe UI", system-ui, sans-serif;
  --t-petit: 0.875rem;
  --t-texte: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --t-lead: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  --t-titre: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem);
  --t-marque: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem);

  --marge: clamp(20px, 2.4vw, 36px);
  --g: clamp(14px, 1.7vw, 26px);
  --montant: 14px;            /* l'épaisseur des montants de la devanture */
  --section: clamp(96px, 11vw, 168px);
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out exponentiel */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--nuit-4) var(--nuit); background: var(--nuit); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nuit); color: var(--ivoire); font: 400 var(--t-texte)/1.55 var(--sans); font-variant-numeric: tabular-nums; caret-color: var(--champagne); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--champagne); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: var(--marge); top: 10px; z-index: 60; padding: 10px 16px; background: var(--champagne); color: var(--nuit); }
.evitement:not(:focus) { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--marge); }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* la marque : le petit logo au trait, puis le nom ; toujours en champagne, jamais en grand */
.marque { display: inline-flex; align-items: center; gap: 0.5em; font: 400 var(--t-marque)/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; color: var(--champagne); }
.logo { width: 1.75em; height: 1.75em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* boutons : rectangles pleins, un seul dessin ; l'action est champagne */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 0;
  background: var(--champagne); color: var(--nuit); font: 500 var(--t-texte)/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color 240ms var(--sortie), transform 240ms var(--sortie); }
.bouton .ico { transition: transform 320ms var(--sortie); }
.bouton:hover { background: var(--champagne-2); }
.bouton:hover .ico { transform: translateX(4px); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: 0.55; cursor: progress; }
.lien { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; color: var(--champagne); }
.lien span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 320ms var(--sortie); padding-bottom: 2px; }
.lien:hover span { background-size: 0 1px; background-position: 100% 100%; }
.lien .ico { transition: transform 320ms var(--sortie); }
.lien:hover .ico { transform: translateX(4px); }

/* ============ l'enseigne : lettres dorées sur bandeau laqué ============ */
.enseigne { background: var(--nuit); color: var(--ivoire); padding: 18px var(--marge); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: 8px; }
.enseigne__liens { display: flex; gap: 26px; font-size: var(--t-petit); }
.enseigne__liens a { text-decoration: none; color: var(--doux); white-space: nowrap; transition: color 200ms; }
.enseigne__liens a:hover { color: var(--ivoire); }
.enseigne__nom { grid-column: 2; }
.enseigne__tel { grid-column: 3; justify-self: end; display: grid; gap: 2px; font-size: var(--t-petit); text-align: right; }
.enseigne__tel a { text-decoration: none; color: var(--doux); }
.enseigne__tel a b { color: var(--ivoire); font-weight: 500; }
.enseigne__tel a:hover b { text-decoration: underline; }

/* ============ la devanture : la vitrine et la porte, dans un châssis ivoire ============ */
.devanture { background: var(--nuit); color: var(--ivoire); padding: 0 var(--marge) var(--montant); }
.chassis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--montant); padding: var(--montant); background: var(--ivoire); min-height: max(600px, calc(100svh - 140px)); }
.vitrine { grid-column: 1 / span 6; position: relative; overflow: hidden; background: var(--nuit-3); min-height: 420px; }
.vitrine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.8s ease, transform 9s linear; }
.vitrine img.actif { opacity: 1; transform: scale(1); }
.vitrine__plaque { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--nuit); color: var(--ivoire); font-size: var(--t-petit); transition: opacity 500ms ease; }
.vitrine__plaque::before { content: ""; width: 7px; height: 7px; background: var(--champagne); border-radius: 50%; }
.vitrine__points { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; gap: 0; align-items: center; }
.vitrine__points button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ivoire); }
.vitrine__points .pause::after { display: none; }
.vitrine__points .pause svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.vitrine__points button::after { content: ""; width: 18px; height: 3px; background: rgba(237, 230, 216, 0.55); transition: background-color 300ms, width 300ms var(--sortie); }
.vitrine__points button[aria-current="true"]::after { background: var(--champagne); width: 26px; }
.js .vitrine { clip-path: inset(100% 0 0 0); animation: rideau 1500ms 150ms var(--sortie) forwards; }
@keyframes rideau { to { clip-path: inset(0 0 0 0); } }

.porte { grid-column: 7 / span 6; background: var(--nuit-3); color: var(--ivoire); padding: clamp(24px, 2.6vw, 40px) clamp(24px, 2.6vw, 40px) 0; display: flex; flex-direction: column; }
.porte h1 { font: 400 clamp(2.125rem, 1rem + 2.6vw, 3.25rem)/1.04 var(--serif); letter-spacing: -0.015em; max-width: 15em; text-wrap: balance; }
.porte__phrase { margin-top: 14px; color: var(--doux); max-width: 44ch; }
.appel { margin-top: 28px; margin-bottom: 28px; display: grid; gap: 14px; }
/* la plaque de propreté en laiton, au pied de la porte, porte les numéros */
.porte__tels { margin: auto calc(-1 * clamp(24px, 2.6vw, 40px)) 0; padding: 16px clamp(24px, 2.6vw, 40px); background: var(--champagne); color: #3a2f22; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--t-petit); }
.porte__tels a { color: var(--nuit); text-decoration: none; font-weight: 500; }
.porte__tels a:hover { text-decoration: underline; }
.appel legend { font-size: var(--t-petit); color: var(--doux); margin-bottom: 8px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { position: relative; }
.puce input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.puce span { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; background: transparent; box-shadow: inset 0 0 0 1px rgba(237, 230, 216, 0.28); color: var(--ivoire); font-size: var(--t-petit); transition: background-color 200ms, color 200ms, box-shadow 200ms; }
.puce input:hover + span { box-shadow: inset 0 0 0 1px rgba(237, 230, 216, 0.6); }
.puce input:checked + span { background: var(--champagne); box-shadow: none; color: var(--nuit); }
.puce input:checked + span::before { content: ""; width: 8px; height: 8px; background: var(--nuit); }
.puce input:focus-visible + span { outline: 2px solid var(--champagne); outline-offset: 2px; }
/* la puce-lien mène aux assurances personnelles, au lieu de se cocher */
.puce--lien { text-decoration: none; color: inherit; }
.puce--lien .ico { color: var(--champagne); transition: transform 320ms var(--sortie); }
.puce--lien:hover span { box-shadow: inset 0 0 0 1px rgba(237, 230, 216, 0.6); }
.puce--lien:hover .ico { transform: translateX(3px); }
.puce--lien:focus-visible { outline: none; }
.puce--lien:focus-visible span { outline: 2px solid var(--champagne); outline-offset: 2px; }
.appel__ligne { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.appel label.champ { display: grid; gap: 6px; font-size: var(--t-petit); color: var(--doux); }
.appel input[type="tel"], .formulaire input[type="tel"], .formulaire input[type="text"], .formulaire input[type="email"], .formulaire select {
  height: 52px; padding: 0 14px; border: 0; border-radius: 0; background: var(--ivoire); color: var(--nuit); font-size: var(--t-texte); width: 100%; }
.appel input::placeholder, .formulaire input::placeholder, .formulaire textarea::placeholder { color: #6a5a50; }
.formulaire textarea { display: block; width: 100%; min-height: 128px; padding: 12px 14px; border: 0; border-radius: 0; background: var(--ivoire); color: var(--nuit); font: 400 var(--t-texte)/1.45 var(--sans); resize: vertical; }
.accord { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-petit); line-height: 1.45; color: var(--doux); }
.accord input { flex: none; appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--ivoire); border-radius: 0; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background-color 180ms, border-color 180ms; }
.accord input::after { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--nuit); border-bottom: 2px solid var(--nuit); transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform 200ms var(--sortie); }
.accord input:checked { background: var(--champagne); border-color: var(--champagne); }
.accord input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.accord a { color: var(--ivoire); }
.appel__retour { font-size: var(--t-petit); }
.appel__retour:empty { display: none; }
.cache-robot { position: absolute; left: -9999px; }

.soubassement { background: var(--nuit); color: var(--doux); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 32px; padding: 0 var(--marge) 22px; font-size: var(--t-petit); }
.soubassement b { color: var(--ivoire); font-weight: 500; }
.etat::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 8px 1px 4px; background: var(--ferme); }
.etat[data-ouvert="oui"]::before { background: var(--ouvert); }

/* la barre qui suit, une fois la devanture passée */
.barre { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 24px; padding: 10px var(--marge); background: var(--nuit); color: var(--ivoire); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(-110%); transition: transform 420ms var(--sortie); }
.barre.visible { transform: none; }
.barre__nom { margin-right: auto; font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); }
.barre a.tel { font-size: var(--t-petit); text-decoration: none; color: var(--doux); }
.barre a.tel b { color: var(--ivoire); font-weight: 500; }
.barre .bouton { min-height: 44px; }
.barre a.tel, .barre .bouton { white-space: nowrap; }

/* ============ ce que nous assurons ============ */
.besoins { padding-block: var(--section); }
.besoins__tete { grid-column: 1 / span 6; }
.besoins__tete h2, .dirigeant h2, .presentation h2, .demarche h2, .agences h2, .questions h2, .dernier h2 { font: 400 var(--t-titre)/1.05 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.besoins__tete p { margin-top: 18px; color: var(--doux); max-width: 46ch; }
.besoins__liste { grid-column: 1 / span 6; margin-top: 48px; }
.besoin { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; width: 100%; padding: 18px 0; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--doux); transition: color 260ms var(--sortie); position: relative; }
.besoin + .besoin { border-top: 1px solid var(--filet); }
.besoin__nom { font: 400 var(--t-titre)/1.05 var(--serif); letter-spacing: -0.015em; transition: color 260ms var(--sortie); }
.besoin__pour { grid-column: 1; font-size: var(--t-petit); }
.besoin .ico { grid-row: 1 / span 2; grid-column: 2; width: 1.5rem; height: 1.5rem; opacity: 0; transform: translateX(-8px); transition: opacity 260ms, transform 320ms var(--sortie); color: var(--champagne); }
.besoin:hover, .besoin[aria-selected="true"] { color: var(--ivoire); }
.besoin[aria-selected="true"] .ico, .besoin:hover .ico { opacity: 1; transform: none; }
.besoin[aria-selected="true"] .besoin__nom { color: var(--champagne); }
.fiche { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: start; position: sticky; top: 96px; margin-top: 8px; background: var(--nuit-2); box-shadow: inset 0 0 0 1px var(--filet); padding: clamp(28px, 3vw, 44px); }
.fiche__corps { transition: opacity 260ms ease, transform 420ms var(--sortie); }
.fiche.change .fiche__corps { opacity: 0; transform: translateY(10px); }
.fiche h3 { font: 400 var(--t-lead)/1.15 var(--serif); }
.fiche__pour { margin-top: 6px; color: var(--doux); font-size: var(--t-petit); }
.fiche dl { margin-top: 26px; display: grid; gap: 22px; }
.fiche dt { font-size: var(--t-petit); font-weight: 500; color: var(--champagne); margin-bottom: 6px; }
.fiche dd ul { display: grid; gap: 6px; }
.fiche dd li { padding-left: 18px; position: relative; }
.fiche dd li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1.5px; background: var(--champagne); }
.fiche .bouton { margin-top: 30px; }
/* un second chemin sous le bouton : le tarif estimatif en ligne, quand le besoin en a un */
.fiche__en-ligne { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--filet); }
.fiche__en-ligne .lien { font-size: var(--t-petit); }
.fiche__en-ligne p { margin-top: 8px; font-size: var(--t-petit); color: var(--doux); max-width: 46ch; }
.fiche__en-ligne b { color: var(--ivoire); font-weight: 500; }
.texte-bouton { padding: 0; border: 0; background: none; color: var(--ivoire); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; cursor: pointer; }
.texte-bouton:hover { color: var(--champagne); }

/* ============ le dirigeant : tout ce qui le protège, lui, et pas seulement l'entreprise ============ */
.dirigeant { background: var(--nuit-2); padding-block: var(--section); }
.dirigeant__tete { grid-column: 1 / span 5; align-self: start; position: sticky; top: 96px; }
.dirigeant__tete p { margin-top: 18px; color: var(--doux); max-width: 44ch; }
.dirigeant__tete .bouton { margin-top: 32px; }
.dirigeant__liste { grid-column: 7 / span 6; }
.dirigeant__liste li { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--filet); }
.dirigeant__liste li:last-child { border-bottom: 1px solid var(--filet); }
.dirigeant__liste b { font: 400 var(--t-lead)/1.2 var(--serif); color: var(--ivoire); }
.dirigeant__liste span { color: var(--doux); max-width: 56ch; }
/* les lignes montent une à une quand la liste arrive à l'écran */
.js [data-reveler] > * { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--sortie), transform 900ms var(--sortie); transition-delay: calc(var(--rang, 0) * 70ms); }
.js [data-reveler].vu > * { opacity: 1; transform: none; }

/* ============ la bande : une photographie entière ============ */
.bande { position: relative; height: min(78svh, 760px); overflow: hidden; background: var(--nuit-3); }
.bande img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.bande figcaption { position: absolute; left: var(--marge); bottom: 20px; padding: 9px 14px; background: var(--nuit); color: var(--ivoire); font-size: var(--t-petit); }

/* ============ la présentation : qui nous sommes, sur un champ de nuit comme le reste ============ */
.presentation { background: var(--nuit-2); color: var(--ivoire); padding-block: var(--section); align-items: center; }
.presentation__vue { grid-column: 2 / span 4; }
.presentation__cadre { background: var(--nuit); padding: 18px; }
.presentation__cadre img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.presentation__vue figcaption { margin-top: 12px; font-size: var(--t-petit); color: var(--doux); }
.presentation__texte { grid-column: 7 / span 5; }
.presentation__texte p { margin-top: 22px; color: var(--doux); max-width: 54ch; }
.presentation__texte p.lead { font: 400 var(--t-lead)/1.3 var(--serif); color: var(--ivoire); margin-top: 26px; }
.presentation__faits { margin-top: 40px; display: grid; gap: 0; }
.presentation__faits li { display: grid; grid-template-columns: 2.4em 1fr; gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--filet); }
.presentation__faits li .ico { width: 1.25rem; height: 1.25rem; color: var(--champagne); transform: translateY(3px); }

/* ============ la démarche ============ */
.demarche { padding-block: var(--section); }
.demarche h2 { grid-column: 1 / span 6; }
.demarche__intro { grid-column: 8 / span 5; align-self: end; color: var(--doux); }
.demarche ol { grid-column: 1 / -1; margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.demarche li { padding-top: 26px; border-top: 2px solid var(--filet); }
.demarche li:first-child { border-top-color: var(--champagne); }
.demarche li b { display: block; font: 400 var(--t-lead)/1.1 var(--serif); margin-bottom: 12px; }
.demarche li p { color: var(--doux); max-width: 30ch; }

/* ============ les agences ============ */
.agences { background: var(--nuit-2); padding-block: var(--section); }
.agences h2 { grid-column: 1 / span 6; }
.agences__intro { grid-column: 8 / span 5; align-self: end; color: var(--doux); }
.agence { grid-column: span 6; margin-top: 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g); align-items: start; }
.agence img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.agence h3 { font: 400 var(--t-lead)/1.15 var(--serif); }
.agence address { font-style: normal; margin-top: 10px; color: var(--doux); }
.agence__tel { display: inline-block; margin-top: 14px; font: 400 var(--t-lead)/1 var(--serif); text-decoration: none; color: var(--champagne); }
.agence__tel:hover { color: var(--champagne-2); }
.agence .etat { display: block; margin-top: 12px; font-size: var(--t-petit); color: var(--doux); }
.agence table, .horaires { margin-top: 18px; border-collapse: separate; border-spacing: 0; padding: 8px 12px; box-sizing: border-box; font-size: var(--t-petit); width: 100%; background: var(--nuit-3); }
.agence th, .horaires th { text-align: left; font-weight: 400; color: var(--doux); padding: 5px 14px 5px 0; white-space: nowrap; }
.agence td, .horaires td { padding: 5px 0; color: var(--doux); }
.agence tr.aujourdhui th, .agence tr.aujourdhui td, .horaires tr.aujourdhui th, .horaires tr.aujourdhui td { color: var(--champagne); font-weight: 500; }
.agence .lien { margin-top: 18px; font-size: var(--t-petit); }
/* le secteur : où sont nos clients, des deux côtés de l'agence de Saint-Priest */
.secteur { grid-column: 1 / -1; margin-top: 88px; padding-top: 36px; border-top: 1px solid var(--filet); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.secteur h3 { grid-column: 1 / span 4; font: 400 var(--t-lead)/1.15 var(--serif); }
.secteur > p { grid-column: 1 / span 4; margin-top: 12px; color: var(--doux); font-size: var(--t-petit); max-width: 34ch; }
.secteur__zones { grid-column: 6 / -1; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--g); }
.secteur h4 { margin: 0 0 8px; font: 500 var(--t-petit)/1.4 var(--sans); color: var(--ivoire); }
.secteur__zones p { font-size: var(--t-petit); color: var(--doux); }

/* ============ questions ============ */
.questions { padding-block: var(--section); }
.questions h2 { grid-column: 1 / span 4; }
.questions__liste { grid-column: 6 / span 7; }
.questions details { border-top: 1px solid var(--filet); }
.questions details:last-child { border-bottom: 1px solid var(--filet); }
.questions summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font: 400 var(--t-lead)/1.25 var(--serif); transition: color 220ms; }
.questions summary:hover { color: var(--champagne); }
.questions summary::-webkit-details-marker { display: none; }
.questions summary .ico { width: 1.25rem; height: 1.25rem; color: var(--champagne); transition: transform 320ms var(--sortie); }
.questions details[open] summary .ico { transform: rotate(45deg); }
.questions details p { padding: 0 0 24px; max-width: 62ch; color: var(--doux); }

/* ============ le dernier mot : être rappelé ============ */
.dernier { background: var(--nuit-3); color: var(--ivoire); padding-block: var(--section); }
.dernier__tete { grid-column: 1 / span 5; }
.dernier__tete p { margin-top: 18px; color: var(--doux); max-width: 40ch; }
.dernier__tete .tels { margin-top: 32px; display: grid; gap: 10px; }
.dernier__tete .tels a { font: 400 var(--t-lead)/1.1 var(--serif); text-decoration: none; color: var(--champagne); }
.dernier__tete .tels a span { display: block; font: 400 var(--t-petit)/1.4 var(--sans); color: var(--doux); }
.formulaire { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formulaire label.champ { display: grid; gap: 6px; font-size: var(--t-petit); color: var(--doux); }
.formulaire .large { grid-column: 1 / -1; }
.formulaire select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d0b09' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.formulaire .bouton { justify-self: start; }

/* ============ pied ============ */
.pied { background: var(--profond); color: var(--doux); padding: clamp(72px, 8vw, 120px) var(--marge) 28px; }
.pied__marque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.pied__marque p { color: var(--doux); max-width: 52ch; }
.pied__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); margin-top: 48px; font-size: var(--t-petit); }
.pied__cols > div { grid-column: span 3; display: grid; gap: 6px; align-content: start; }
.pied__cols h3 { font: 500 var(--t-petit)/1.4 var(--sans); color: var(--ivoire); margin-bottom: 6px; }
.pied__cols a { text-decoration: none; }
.pied__cols a:hover { color: var(--ivoire); text-decoration: underline; }
.pied__legal { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--filet); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: var(--t-petit); }
.pied__legal a { color: var(--ivoire); }

/* ============ téléphone et tablette ============ */
@media (max-width: 980px) {
  .enseigne { grid-template-columns: 1fr auto; }
  .enseigne__liens { display: none; }
  .barre a.tel { display: none; }
  .enseigne__nom { grid-column: 1; grid-row: 1; }
  .enseigne__tel { grid-column: 2; grid-row: 1; align-self: center; }
  .devanture { height: auto; display: flex; flex-direction: column; gap: var(--montant); padding-inline: var(--marge); }
  .porte { order: -1; }
  .vitrine { aspect-ratio: 4 / 5; min-height: 0; }
  .chassis { display: flex; flex-direction: column; min-height: 0; }
  .vitrine__points { top: 6px; bottom: auto; right: 6px; }
  .besoins__tete, .besoins__liste, .fiche { grid-column: 1 / -1; }
  .dirigeant__tete, .dirigeant__liste { grid-column: 1 / -1; }
  .dirigeant__tete { position: static; }
  .dirigeant__liste { margin-top: 48px; }
  .secteur h3, .secteur > p, .secteur__zones { grid-column: 1 / -1; grid-row: auto; }
  .secteur__zones { margin-top: 32px; }
  .fiche { position: static; grid-row: auto; margin-top: 32px; }
  .presentation__vue, .presentation__texte { grid-column: 1 / -1; }
  .presentation__vue { max-width: 360px; margin-bottom: 48px; }
  .demarche h2, .demarche__intro, .agences h2, .agences__intro, .questions h2, .questions__liste, .dernier__tete, .formulaire { grid-column: 1 / -1; }
  .demarche__intro, .agences__intro { margin-top: 18px; }
  .demarche ol { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .agence { grid-column: 1 / -1; }
  .questions__liste { margin-top: 32px; }
  .formulaire { margin-top: 48px; }
  .pied__cols > div { grid-column: span 6; margin-bottom: 28px; }
}
@media (max-width: 560px) {
  .enseigne__tel { display: none; }
  .demarche ol { grid-template-columns: 1fr; }
  .agence { grid-template-columns: 1fr; }
  .agence img { aspect-ratio: 3 / 2; }
  .secteur__zones { grid-template-columns: 1fr; }
  .formulaire { grid-template-columns: 1fr; }
  .formulaire .bouton, .appel .bouton { width: 100%; }
  .appel__ligne { grid-template-columns: 1fr; }
  .barre a.tel { display: none; }
  .barre { gap: 12px; }
  .barre .bouton { padding: 0 18px; white-space: nowrap; }
  .pied__cols > div { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .js .vitrine { clip-path: none; }
  .bande img { transform: none !important; }
  .js [data-reveler] > * { opacity: 1; transform: none; }
}

/* =====================================================================================
   Les pages intérieures (ajouté le 9 novembre 2026) : entrée, agences, devis, textes légaux
   ===================================================================================== */
.titre-section { font: 400 var(--t-titre)/1.05 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.intro { color: var(--doux); }

/* l'entrée : le fil, le titre, une photographie dans son cadre de nuit */
.entree { padding-block: clamp(40px, 5vw, 80px) var(--section); align-items: center; }
.entree--court { padding-bottom: clamp(56px, 6vw, 96px); }
.entree__texte { grid-column: 1 / span 7; }
.entree--seule .entree__texte { grid-column: 1 / span 9; }
.fil { font-size: var(--t-petit); color: var(--doux); }
.fil a { color: var(--doux); text-decoration: none; }
.fil a:hover { color: var(--ivoire); text-decoration: underline; }
.entree h1 { margin-top: 18px; font: 400 clamp(2.5rem, 1.3rem + 3.4vw, 4.25rem)/1.02 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.entree__phrase { margin-top: 20px; color: var(--doux); max-width: 50ch; }
.entree__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.entree__vue { grid-column: 9 / span 4; }
.entree__cadre { background: var(--nuit-2); padding: 18px; }
.entree__cadre img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.entree__vue figcaption { margin-top: 12px; font-size: var(--t-petit); color: var(--doux); }
.js .entree__cadre { clip-path: inset(100% 0 0 0); animation: rideau 1400ms 120ms var(--sortie) forwards; }

/* l'agence en tête de sa page : l'adresse, le numéro, l'état d'ouverture */
.coordonnees { margin-top: 32px; display: grid; gap: 8px; justify-items: start; }
.coordonnees address { font-style: normal; }
.coordonnees .agence__tel { margin-top: 4px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.coordonnees .etat { font-size: var(--t-petit); color: var(--doux); }

/* une section de contenu : titre sur 6 colonnes, introduction sur 5 à partir de la 8e */
.section { padding-block: var(--section); }
.section--2 { background: var(--nuit-2); }
.section > .titre-section { grid-column: 1 / span 6; }
.section > .intro { grid-column: 8 / span 5; align-self: end; }

/* des colonnes ouvertes par un filet de 2 px, le premier en champagne : accès, zones */
.colonnes { grid-column: 1 / -1; margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--g); }
.colonnes > * { padding-top: 24px; border-top: 2px solid var(--filet); }
.colonnes > :first-child { border-top-color: var(--champagne); }
.colonnes h3 { font: 400 var(--t-lead)/1.15 var(--serif); }
.colonnes h3 + p { margin-top: 10px; color: var(--doux); }
.colonnes .points { margin-top: 16px; display: grid; gap: 14px; }
.colonnes .points li { color: var(--doux); }
.colonnes .points b { display: block; color: var(--ivoire); font-weight: 500; }
.colonnes .liens { margin-top: 20px; display: grid; gap: 10px; justify-items: start; font-size: var(--t-petit); }

/* familles de contrats : une ligne par contrat, une flèche champagne */
.familles { grid-column: 1 / -1; margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px var(--g); }
.familles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.famille { padding-top: 24px; border-top: 2px solid var(--filet); }
.famille:first-child { border-top-color: var(--champagne); }
.famille h3 { font: 400 var(--t-lead)/1.15 var(--serif); }
.famille > p { margin-top: 8px; font-size: var(--t-petit); color: var(--doux); }
.famille ul { margin-top: 18px; }
.produit { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--filet); text-decoration: none; color: var(--ivoire); transition: color 220ms; }
.produit .ico { color: var(--champagne); opacity: 0.45; transition: opacity 220ms, transform 320ms var(--sortie); }
.produit:hover { color: var(--champagne); }
.produit:hover .ico, .produit:focus-visible .ico { opacity: 1; transform: translateX(4px); }

/* formulaires : ce qui est facultatif le dit ; les grandes puces */
.formulaire .facultatif { color: var(--doux); font-weight: 400; }
.dernier__tete .aide { margin-top: 18px; font-size: var(--t-petit); }
.dernier__tete .aide a, .intro a { color: var(--ivoire); }
.puces--grandes .puce span { min-height: 44px; padding: 0 18px; font-size: var(--t-texte); }

/* ============ le devis en trois étapes ============ */
.devis { background: var(--nuit-3); padding-block: clamp(64px, 7vw, 112px) var(--section); }
.devis__cote { grid-column: 1 / span 4; align-self: start; position: sticky; top: 96px; }
.etapes { counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: 2em 1fr; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--filet); color: var(--doux); font: 400 var(--t-lead)/1.2 var(--serif); counter-increment: etape; transition: color 260ms var(--sortie), border-color 260ms var(--sortie); }
.etapes li:last-child { border-bottom: 1px solid var(--filet); }
.etapes li::before { content: counter(etape); font: 500 var(--t-petit)/1 var(--sans); }
.etapes li.faite { color: var(--ivoire); }
.etapes li[aria-current="step"] { color: var(--champagne); }
.devis__aide { margin-top: 40px; }
.devis__aide h2 { font: 500 var(--t-petit)/1.4 var(--sans); color: var(--ivoire); }
.devis__aide ul { margin-top: 10px; display: grid; gap: 6px; font-size: var(--t-petit); color: var(--doux); }
.devis__aide li, .legal__texte ul li { padding-left: 18px; position: relative; }
.devis__aide li::before, .legal__texte ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1.5px; background: var(--champagne); }
.devis__aide p { margin-top: 14px; font-size: var(--t-petit); color: var(--doux); max-width: 36ch; }
.devis__aide p a { color: var(--ivoire); }
.devis__cote .tels { margin-top: 32px; display: grid; gap: 10px; }
.devis__cote .tels a { font: 400 var(--t-lead)/1.1 var(--serif); text-decoration: none; color: var(--champagne); }
.devis__cote .tels a span { display: block; font: 400 var(--t-petit)/1.4 var(--sans); color: var(--doux); }
.formulaire--devis { grid-column: 6 / span 7; display: block; }
.etape { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.etape + .etape { margin-top: 64px; }
/* flottante, la légende redevient une case de la grille (sinon le navigateur la pose à part, au-dessus) */
.etape__titre { float: left; width: 100%; grid-column: 1 / -1; padding: 0; margin-bottom: 6px; font: 400 var(--t-titre)/1.05 var(--serif); letter-spacing: -0.015em; }
.etape__fin { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 10px; }
.formulaire--devis { scroll-margin-top: 96px; }
.formulaire--devis > [data-retour] { margin-top: 20px; }
.etape__titre span { display: block; margin-bottom: 10px; font: 400 var(--t-petit)/1.4 var(--sans); color: var(--doux); letter-spacing: 0; }
.etape__note { grid-column: 1 / -1; color: var(--doux); font-size: var(--t-petit); }
.etape__note a { color: var(--ivoire); }
.etape .puces { grid-column: 1 / -1; }
.etape__suite { grid-column: 1 / -1; display: none; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 10px; }
.js .etape__suite { display: flex; }
.js .formulaire--devis .etape:not(.actif) { display: none; }
.js .formulaire--devis .etape + .etape { margin-top: 0; }
.js .etape.actif { animation: monter 560ms var(--sortie); }
@keyframes monter { from { opacity: 0; transform: translateY(12px); } }
.retour { padding: 0; border: 0; background: none; color: var(--doux); font: 500 var(--t-petit)/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.retour .ico { transform: scaleX(-1); }
.retour:hover { color: var(--ivoire); }

/* ============ les textes légaux : un sommaire à gauche, le texte à droite ============ */
.legal { padding-bottom: var(--section); }
.legal__sommaire { grid-column: 1 / span 3; align-self: start; position: sticky; top: 96px; }
.legal__sommaire h2 { font: 500 var(--t-petit)/1.4 var(--sans); color: var(--ivoire); }
.legal__sommaire ol { margin-top: 12px; display: grid; gap: 8px; font-size: var(--t-petit); }
.legal__sommaire a { color: var(--doux); text-decoration: none; }
.legal__sommaire a:hover { color: var(--ivoire); text-decoration: underline; }
.legal__texte { grid-column: 5 / span 8; }
.legal__texte > section + section { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--filet); }
.legal__texte h2 { font: 400 var(--t-lead)/1.15 var(--serif); scroll-margin-top: 96px; }
.legal__texte h3 { margin-top: 28px; font: 500 var(--t-texte)/1.4 var(--sans); color: var(--ivoire); }
.legal__texte p, .legal__texte ul, .legal__texte dl { margin-top: 14px; color: var(--doux); max-width: 66ch; }
.legal__texte ul { display: grid; gap: 8px; }
.legal__texte dl { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 10px 24px; }
.legal__texte dt { color: var(--ivoire); }
.legal__texte a, .legal__texte b { color: var(--ivoire); }
.legal__texte b { font-weight: 500; }
.legal__texte .credits li { padding-left: 0; }
.legal__texte .credits li::before { display: none; }
.legal__texte .credits li + li { padding-top: 10px; border-top: 1px solid var(--filet); }
/* ce qui manque encore : visible dans l'aperçu, à remplacer avant la mise en ligne */
.a-completer { color: var(--champagne); outline: 1px dashed var(--champagne); outline-offset: 2px; padding: 0 4px; }

/* ============ merci ============ */
.merci__etats { margin-top: 32px; display: grid; gap: 8px; font-size: var(--t-petit); color: var(--doux); }
.merci__etats b { color: var(--ivoire); font-weight: 500; }

@media (max-width: 980px) {
  .entree__texte, .entree--seule .entree__texte, .entree__vue { grid-column: 1 / -1; }
  .entree__vue { max-width: 360px; margin-top: 56px; }
  .section > .titre-section, .section > .intro { grid-column: 1 / -1; }
  .section > .intro { margin-top: 18px; }
  .colonnes { grid-template-columns: 1fr 1fr; }
  .familles { grid-template-columns: 1fr 1fr; }
  .devis__cote, .formulaire--devis { grid-column: 1 / -1; }
  .devis__cote { position: static; }
  .devis__aide, .devis__cote .tels { display: none; }
  .etapes { display: flex; gap: var(--g); }
  .etapes li { flex: 1; grid-template-columns: 1fr; gap: 6px; font: 400 var(--t-petit)/1.3 var(--sans); border-top-width: 2px; }
  .etapes li:last-child { border-bottom: 0; }
  .etapes li[aria-current="step"], .etapes li.faite { border-top-color: var(--champagne); }
  .formulaire--devis { margin-top: 40px; }
  .legal__sommaire, .legal__texte { grid-column: 1 / -1; }
  .legal__sommaire { position: static; margin-bottom: 48px; }
}
@media (max-width: 560px) {
  .colonnes, .familles, .familles--2 { grid-template-columns: 1fr; }
  .entree__actions .bouton { width: 100%; }
  .etape { grid-template-columns: 1fr; }
  .etape__suite .bouton { width: 100%; }
  .legal__texte dl { grid-template-columns: 1fr; gap: 2px; }
  .legal__texte dd + dt { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .js .entree__cadre { clip-path: none; } }

/* =====================================================================================
   Les pages produits (ajouté le 9 novembre 2026) : l'essentiel, la découpe, les pièces, l'encadré, les voisins
   ===================================================================================== */
/* l'essentiel, à droite de l'entrée : une plaque de nuit, comme la fiche de l'accueil */
.essentiel { grid-column: 9 / span 4; align-self: center; background: var(--nuit-2); box-shadow: inset 0 0 0 1px var(--filet); padding: clamp(24px, 2.4vw, 36px); }
.essentiel h2 { font: 500 var(--t-petit)/1.4 var(--sans); color: var(--ivoire); }
.essentiel dl { margin-top: 18px; display: grid; gap: 18px; }
.essentiel dt { font-size: var(--t-petit); font-weight: 500; color: var(--champagne); margin-bottom: 4px; }
.essentiel dd { font-size: var(--t-petit); color: var(--doux); }
.js .essentiel { clip-path: inset(100% 0 0 0); animation: rideau 1400ms 120ms var(--sortie) forwards; }

/* une liste à droite, son titre à gauche qui reste en vue : garanties, situations, obligations */
.decoupe { padding-block: var(--section); }
.decoupe--2 { background: var(--nuit-2); }
.decoupe__tete { grid-column: 1 / span 5; align-self: start; position: sticky; top: 96px; }
.decoupe__tete p { margin-top: 18px; color: var(--doux); max-width: 44ch; }
.decoupe__tete p a { color: var(--ivoire); }
.decoupe__tete .bouton { margin-top: 32px; }
.decoupe__liste { grid-column: 7 / span 6; }
.decoupe__liste li { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--filet); }
.decoupe__liste li:last-child { border-bottom: 1px solid var(--filet); }
.decoupe__liste b { font: 400 var(--t-lead)/1.2 var(--serif); color: var(--ivoire); }
.decoupe__liste span { color: var(--doux); max-width: 58ch; }
.decoupe__liste span a { color: var(--ivoire); }

/* les pièces du devis : deux colonnes de lignes, un tiret champagne */
.pieces { grid-column: 1 / -1; margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); }
.pieces li { position: relative; padding: 16px 0 16px 26px; border-top: 1px solid var(--filet); color: var(--doux); }
.pieces li::before { content: ""; position: absolute; left: 0; top: calc(16px + 0.72em); width: 10px; height: 1.5px; background: var(--champagne); }
.pieces li b { color: var(--ivoire); font-weight: 500; }
.section__suite { grid-column: 1 / -1; margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* l'encadré : ce qu'il faut savoir avant de signer (risques, limites), sur une plaque de nuit-3 */
.encadre { grid-column: 1 / -1; margin-top: 56px; background: var(--nuit-3); padding: clamp(26px, 3vw, 44px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.encadre h3 { grid-column: 1 / span 4; font: 400 var(--t-lead)/1.15 var(--serif); }
.encadre ul { grid-column: 6 / -1; display: grid; gap: 12px; color: var(--doux); }
.encadre li { position: relative; padding-left: 18px; }
.encadre li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1.5px; background: var(--champagne); }
.encadre b { color: var(--ivoire); font-weight: 500; }

/* les pages voisines : une ligne par page, trois colonnes */
.voisins { grid-column: 1 / -1; margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); }
.voisins li { border-top: 1px solid var(--filet); }
.voisins .produit { border-bottom: 0; padding: 16px 0; }

/* le lien « en détail » sous le bouton de la fiche, sur l'accueil */
.fiche__plus { margin-top: 18px; font-size: var(--t-petit); }

@media (max-width: 980px) {
  .essentiel { grid-column: 1 / -1; margin-top: 56px; max-width: 560px; }
  .decoupe__tete, .decoupe__liste { grid-column: 1 / -1; }
  .decoupe__tete { position: static; }
  .decoupe__liste { margin-top: 40px; }
  .encadre h3, .encadre ul { grid-column: 1 / -1; }
  .encadre ul { margin-top: 20px; }
  .voisins { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pieces, .voisins { grid-template-columns: 1fr; }
  .section__suite .bouton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .js .essentiel { clip-path: none; } }
/* la dernière section d'une page produit, juste après les questions : sans marge haute */
.section--suite { padding-top: 0; }
.familles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .familles--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .familles--3 { grid-template-columns: 1fr; } }
/* les liens dans les colonnes, les encadrés et les titres de la découpe */
.colonnes p a, .encadre a { color: var(--ivoire); }
.decoupe__liste b a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 220ms, background-size 320ms var(--sortie); }
.decoupe__liste b a:hover { color: var(--champagne); background-size: 100% 1px; }

/* les exemples d'indemnisation, tirés des documents de l'assureur : une plaque par cas, le calcul en lignes */
.exemples { grid-column: 1 / -1; margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.exemples--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exemple { display: flex; flex-direction: column; background: var(--nuit-3); padding: clamp(24px, 2.6vw, 38px); }
.exemple h3 { font: 400 var(--t-lead)/1.2 var(--serif); }
.exemple > p { margin-top: 12px; color: var(--doux); }
.exemple dl { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 0; font-size: var(--t-petit); }
.exemple dl > div { display: contents; }
.exemple dt { color: var(--doux); }
.exemple dd { padding-left: 16px; color: var(--ivoire); text-align: right; white-space: nowrap; }
.exemple .solde dt, .exemple .solde dd { padding-top: 10px; border-top: 1px solid var(--filet); color: var(--ivoire); font-weight: 500; }
.exemples__note { grid-column: 1 / -1; margin-top: 20px; font-size: var(--t-petit); color: var(--doux); max-width: 80ch; }
@media (max-width: 980px) { .exemples, .exemples--3 { grid-template-columns: 1fr; max-width: 640px; } }