/*
 * Toily — composants du design system.
 * Dépend de tokens.css (à charger avant). N'utilise que les tokens sémantiques.
 * Aperçu de tous les composants : /design-system.html
 */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-4); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg-default);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-accent-blue); outline-offset: 3px; border-radius: var(--radius-xs); }

.skip-link { position: fixed; left: var(--space-3); top: -100px; z-index: 100; padding: var(--space-3); background: var(--color-bg-default); color: var(--color-accent-blue); border-radius: var(--radius-sm); box-shadow: 0 2px 12px #1a273622; }
.skip-link:focus { top: var(--space-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Mise en page ---------- */

.container { width: min(100% - 2 * var(--container-gutter), var(--container-max)); margin-inline: auto; }
.section { padding-block: var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }

/* Grille bento : 12 colonnes, cartes réparties avec .span-*. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .span-3 { grid-column: span 6; }
  .span-4 { grid-column: span 6; }
  .span-5, .span-7 { grid-column: span 6; }
  .span-8 { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .bento > * { grid-column: 1 / -1; }
}

/* Deux colonnes texte + image, alignées au centre. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4); }
.split--reverse > :first-child { order: 2; }
.split__copy { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.split__copy p strong { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.split__media { margin: 0; min-width: 0; }
.split__media img { width: 100%; object-fit: cover; border-radius: var(--radius-md); }

/* Sous-grille de 2 colonnes à l'intérieur d'un bloc bento. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); min-width: 0; }
.grid-2 > * { min-width: 0; }

/* Carte de fonctionnalité : icône à gauche, titre et liste à droite. */
.feature { flex-direction: row; align-items: flex-start; }
.feature > .stack { gap: var(--space-3); min-width: 0; }
.feature h3 { font-family: var(--font-body); font-size: var(--text-body-medium); font-weight: var(--weight-medium); line-height: var(--leading-body); }

@media (max-width: 767px) {
  .split, .grid-2 { grid-template-columns: 1fr; }
  .split { padding: var(--space-3); }
  .split--reverse > :first-child { order: 0; }
}

/* ---------- Typographie ---------- */

.t-display, .t-h1, .t-h2, .t-h3, h1, h2, h3 { font-family: var(--font-heading); line-height: var(--leading-heading); color: var(--color-text-primary); letter-spacing: 0; }
.t-display { font-size: var(--text-display); font-weight: var(--weight-bold); }
h1, .t-h1 { font-size: var(--text-h1); font-weight: var(--weight-semibold); }
h2, .t-h2 { font-size: var(--text-h2); font-weight: var(--weight-medium); }
h3, .t-h3 { font-size: var(--text-h3); font-weight: var(--weight-medium); }
.t-body-large { font-size: var(--text-body-large); }
.t-body-medium { font-size: var(--text-body-medium); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.t-body { font-size: var(--text-body); }
.t-body-small { font-size: var(--text-body-small); }
.t-body-xsmall { font-size: var(--text-body-xsmall); }
.t-muted { color: var(--color-text-muted); }
.t-strong { font-weight: var(--weight-bold); color: var(--color-text-primary); }
.t-center { text-align: center; }

/* Label / sur-titre (« LA PRÉ-COMPTABILITÉ DU CABINET »). */
.label { font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--leading-mono); text-transform: uppercase; color: var(--color-text-secondary); }
.label--blue { color: var(--color-text-hover); }
.caption { font-family: var(--font-mono); font-size: var(--text-caption); line-height: var(--leading-mono); color: var(--color-text-primary); }

/* Mot mis en couleur dans un titre : <span class="hl hl--orange">…</span>. */
.hl { color: var(--color-accent-blue); }
.hl--green { color: var(--color-accent-green); }
.hl--orange { color: var(--color-accent-orange); }

/* Bloc titre de section : label + titre (+ intro). */
.heading { display: flex; flex-direction: column; gap: var(--space-3); }
.heading--center { align-items: center; text-align: center; }

/* ---------- Icônes ---------- */

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.icon--xs { width: 16px; height: 16px; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 34px; height: 34px; }
.icon--blue { color: var(--color-accent-blue); }
.icon--green { color: var(--color-accent-green); }
.icon--orange { color: var(--color-accent-orange); }
.icon--navy { color: var(--color-brand-primary); }

/* Case d'icône : 66 px (lg) ou 40 px (sm). */
.icon-tile { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-bg-blue-soft); color: var(--color-accent-blue); }
.icon-tile .icon { width: 24px; height: 24px; }
.icon-tile--lg { width: 66px; height: 66px; border-radius: var(--radius-md); }
.icon-tile--lg .icon { width: 34px; height: 34px; }
.icon-tile--lg .emoji { font-size: 34px; line-height: 1; }
.icon-tile--navy { background: var(--color-brand-primary); color: var(--color-bg-default); }
.icon-tile--green { background: var(--color-bg-green-soft); color: var(--color-accent-green); }
.icon-tile--orange { background: var(--color-bg-orange-soft); color: var(--color-accent-orange); }
.icon-tile--grey { background: var(--color-bg-grey-soft); color: var(--color-brand-primary); }
.icon-tile--white { background: var(--color-bg-default); color: var(--color-brand-primary); }

/* Drapeau français en CSS (rendu identique sur tous les systèmes, contrairement à l'emoji). */
.flag-fr { display: inline-flex; width: 24px; height: 17px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--color-border-default); flex: none; }
.flag-fr i { flex: 1; background: #1744B8; }
.flag-fr i:nth-child(2) { background: #FFFFFF; }
.flag-fr i:nth-child(3) { background: #EC3E49; }
.icon-tile--lg .flag-fr { width: 34px; height: 24px; }

/* ---------- Boutons ---------- */
/* Plein : .btn + couleur. Texte seul : .btn--text. Icône seule : .btn--icon. */

.btn {
  --btn-bg: var(--color-button-primary);
  --btn-fg: var(--color-bg-default);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 51px; padding: var(--space-3);
  border: 0; border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-size: var(--text-button); font-weight: var(--weight-medium); line-height: var(--leading-body);
  cursor: pointer; text-align: center;
  transition: filter .15s, transform .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 16px; height: 16px; }
.btn--blue { --btn-bg: var(--color-button-blue); }
.btn--green { --btn-bg: var(--color-button-green); }
.btn--orange { --btn-bg: var(--color-button-orange); }
.btn--grey { --btn-bg: var(--color-button-grey); --btn-fg: var(--color-button-grey-text); }
.btn--light { --btn-bg: var(--color-button-grey); --btn-fg: var(--color-text-primary); }
.btn--block { width: 100%; }

.btn--text { min-height: 0; padding: 0; background: none; color: var(--color-text-primary); justify-content: flex-start; text-align: left; }
.btn--text:hover { filter: none; text-decoration: underline; text-underline-offset: 4px; }
.btn--text.btn--blue { color: var(--color-button-blue); }
.btn--text.btn--green { color: var(--color-button-green); }
.btn--text.btn--orange { color: var(--color-accent-orange); }
.btn--text.btn--grey { color: var(--color-button-grey-text); }

.btn--icon { min-height: 0; width: 32px; height: 32px; padding: var(--space-2); }
.btn--icon.btn--lg { width: 48px; height: 48px; }

/* ---------- Tags ---------- */

.tag {
  display: inline-flex; align-items: center; width: fit-content;
  padding: var(--space-1); border: 1px solid transparent; border-radius: var(--radius-xs);
  font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--leading-mono); text-transform: uppercase;
  background: var(--color-accent-blue); color: var(--color-bg-default);
}
.tag--blue-light { background: var(--color-bg-blue-soft); border-color: var(--color-bg-blue-soft-2); color: var(--color-text-hover); }
.tag--green { background: var(--color-accent-green); }
.tag--green-light { background: var(--color-bg-green-soft); border-color: var(--color-border-green); color: var(--color-accent-green); }
.tag--orange { background: var(--color-accent-orange); color: var(--color-text-on-dark); }
.tag--orange-light { background: var(--color-bg-orange-soft); border-color: var(--orange-300); color: var(--color-accent-orange); }
.tag--grey { background: var(--color-text-muted); }
.tag--grey-light { background: var(--color-bg-grey-soft); border-color: var(--color-border-default); color: var(--color-text-muted); }

/* ---------- Logo ---------- */

.logo { display: inline-flex; align-items: center; gap: 10px; padding: var(--space-2); font-family: var(--font-body); font-size: 24px; font-weight: var(--weight-medium); line-height: 1; color: var(--color-text-primary); }
.logo svg { width: 27px; height: 31px; flex: none; }
.logo--on-dark { color: var(--color-text-on-dark); }
.logo-block { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-orange-pale); color: var(--color-text-secondary); }
.logo-block .logo { padding: 0; }
.logo-block p { font-size: var(--text-body-large); }
.logo-block strong { font-weight: var(--weight-medium); color: var(--color-text-primary); }
.logo-block--dark { background: var(--color-brand-primary); color: var(--color-text-on-dark); }
.logo-block--dark .logo, .logo-block--dark strong { color: var(--color-text-on-dark); }

/* ---------- Surfaces (blocs bento) ---------- */
/* .card + une surface. Taille : par défaut 32 px de rayon et de marge ; --md = 16 px. */

.card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg-grey-soft); min-width: 0; }
.card--md { gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); }
.card--lg { padding: var(--space-5); }
.card--between { justify-content: space-between; }
.card--center { justify-content: center; }
.card--bordered { border: 1px solid var(--color-border-default); }

.surface-white { background: var(--color-bg-default); }
.surface-surface { background: var(--color-bg-surface); }
.surface-blue-3 { background: var(--color-bg-blue-soft-3); }
.surface-grey { background: var(--color-bg-grey-soft); }
.surface-blue { background: var(--color-bg-blue-soft); }
.surface-blue-2 { background: var(--color-bg-blue-soft-2); }
.surface-lochmara-light { background: var(--color-brand-secondary); }
.surface-green { background: var(--color-bg-green-soft); }
.surface-green-pale { background: var(--color-bg-green-pale); }
.surface-green-light { background: var(--green-300); }
.surface-orange { background: var(--color-bg-orange-soft); }
.surface-orange-pale { background: var(--color-bg-orange-pale); }
.surface-orange-light { background: var(--orange-300); }

/* Surfaces foncées : texte clair. */
.surface-main, .surface-lochmara, .surface-persian-green, .surface-vermillon { color: var(--color-bg-default); }
.surface-main { background: var(--color-brand-primary); }
.surface-lochmara { background: var(--gradient-lochmara); }
.surface-persian-green { background: var(--gradient-persian-green); }
.surface-vermillon { background: var(--gradient-vermillon); }
:is(.surface-main, .surface-lochmara, .surface-persian-green, .surface-vermillon) :is(h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3, .t-body-medium, .label) { color: inherit; }
:is(.surface-main, .surface-lochmara, .surface-persian-green, .surface-vermillon) .t-muted { color: var(--color-bg-blue-soft); }

/* Image dans un bloc. */
.media { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius-md); }
.card > .media:only-child { border-radius: inherit; }

/* ---------- Listes ---------- */

.checklist { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; list-style: none; font-size: var(--text-body-small); color: var(--color-text-secondary); }
.checklist li { display: flex; gap: var(--space-2); align-items: flex-start; }
.checklist .icon { width: 18px; height: 18px; margin-top: -1px; color: var(--color-accent-blue); }
.checklist--green .icon { color: var(--color-accent-green); }
.checklist--orange .icon { color: var(--color-accent-orange); }
.checklist--navy .icon { color: var(--color-brand-primary); }
.checklist--body { font-size: var(--text-body); }

/* ---------- Encadré technique (« Préparation de pièces : … ») ---------- */

.note { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border-left: 1px solid var(--color-accent-orange); background: var(--color-bg-orange-soft); font-family: var(--font-mono); font-size: var(--text-caption); line-height: 1.5; color: var(--color-text-primary); }
.note strong { font-weight: var(--weight-bold); }
.note--blue { border-color: var(--color-accent-blue); background: var(--color-bg-blue-soft); }
.note--green { border-color: var(--color-accent-green); background: var(--color-bg-green-soft-2); }

/* ---------- Chiffre clé ---------- */

.stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); }
/* Fond par défaut de faible priorité, pour qu'une classe .surface-* le remplace. */
:where(.stat) { background: var(--color-bg-grey-soft); }
.stat strong { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: var(--leading-heading); color: var(--color-text-primary); }
.stat--xl strong { font-size: var(--text-h1); font-weight: var(--weight-semibold); color: var(--color-accent-orange); }
.stat span { font-size: var(--text-body); }

/* Bandeau de chiffre (« +30 % de gain de productivité… »). */
.banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--gradient-lochmara); color: var(--color-bg-default); }
.banner--vermillon { background: var(--gradient-vermillon); }
.banner__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.banner__line { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.banner__figure { font-family: var(--font-heading); font-size: var(--text-h1); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.banner__text { font-size: var(--text-body-medium); font-weight: var(--weight-medium); }
.banner__note { font-size: var(--text-body-xsmall); color: var(--color-bg-blue-soft); }
.banner--vermillon .banner__note { color: var(--color-bg-orange-soft); }
@media (max-width: 767px) { .banner { flex-direction: column; align-items: flex-start; } }

/* ---------- Pastille de confiance (bandeau du hero) ---------- */

.chip { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-grey-soft); }
.chip .icon { color: var(--color-accent-blue); }
.chip strong { display: block; font-size: var(--text-body-small); font-weight: var(--weight-bold); color: var(--color-text-primary); }
.chip > div > span { display: block; margin-top: var(--space-1); font-size: var(--text-body-xsmall); }

/* ---------- Onglets / ancres en pastilles ---------- */

.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); width: fit-content; max-width: 100%; margin-inline: auto; padding: var(--space-1); border-radius: var(--radius-sm); background: var(--color-bg-blue-soft); }
.pills a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); font-size: var(--text-body-small); font-weight: var(--weight-medium); color: var(--color-accent-blue); }
.pills a:hover { background: var(--color-bg-default); }
.pills a[aria-current="true"], .pills a.is-active { background: var(--color-accent-blue); color: var(--color-bg-default); }
.pills--orange { background: var(--color-bg-orange-soft); }
.pills--orange a { color: var(--color-accent-orange); }
/* Survol : pastille orange pleine, comme l'onglet actif. */
.pills--orange a:hover { background: var(--color-accent-orange); color: var(--color-bg-default); }
.pills--orange a[aria-current="true"], .pills--orange a.is-active { background: var(--color-accent-orange); }

/* ---------- Vignette logo partenaire ---------- */

.logo-tile { display: grid; place-items: center; height: 50px; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--color-bg-default); }
.logo-tile img { max-height: 34px; width: auto; max-width: 100%; object-fit: contain; }
/* Logos dont le fichier n'a aucune marge autour du dessin (Cegid, Agiris) : réduits pour
   s'aligner visuellement sur les autres. */
.logo-tile img.is-tight { max-height: 20px; }
.logo-tile--lg img.is-tight { max-height: 36px; }
.logo-tile--lg { height: 120px; }
.logo-tile--lg img { max-height: 56px; }
.logo-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); }

/* Carte d'intégration : logo(s), statut, nom, texte, lien. */
.integration { gap: var(--space-3); }
.integration__body { display: flex; flex-direction: column; gap: var(--space-2); }
.integration__body h3 { font-family: var(--font-body); font-size: var(--text-body-medium); font-weight: var(--weight-medium); line-height: var(--leading-body); }

/* ---------- FAQ (accordéon natif <details>) ---------- */

.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--color-border-default); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); list-style: none; cursor: pointer; font-size: var(--text-body-medium); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { width: 20px; height: 20px; color: var(--color-accent-blue); transition: transform .2s; }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__answer { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-3); }
.faq__answer a { color: var(--color-accent-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Formulaires ---------- */

.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form > .field--full, .form > .form__actions { grid-column: 1 / -1; }
.form__actions { display: flex; justify-content: flex-end; }
@media (max-width: 767px) { .form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field label { font-size: var(--text-body-medium); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.field .req { color: var(--color-accent-orange); }
.input, .select { width: 100%; min-height: 48px; padding: 12px var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-default); font-size: var(--text-body); color: var(--color-text-primary); }
.input:hover, .select:hover { border-color: var(--color-bg-blue-soft-2); }
.input:focus, .select:focus { outline: none; border-color: var(--color-accent-blue); box-shadow: 0 0 0 3px var(--color-bg-blue-soft); }
.input[aria-invalid="true"] { border-color: var(--color-accent-orange); }
.field__error { font-size: var(--text-body-small); color: var(--color-accent-orange); }
.field__row { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-2); }
.select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpolyline points='208 96 128 176 48 96' fill='none' stroke='%231A2736' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }

/* Curseur (estimateur de tarif). */
.range { width: 100%; height: 24px; margin: 0; appearance: none; background: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--color-brand-primary) var(--fill, 20%), var(--color-bg-blue-soft) 0); }
.range::-moz-range-track { height: 12px; border-radius: 6px; background: var(--color-bg-blue-soft); }
.range::-moz-range-progress { height: 12px; border-radius: 6px; background: var(--color-brand-primary); }
.range::-webkit-slider-thumb { appearance: none; width: 20px; height: 24px; margin-top: -6px; border: 3px solid var(--color-brand-primary); border-radius: 6px; background: var(--color-bg-default); }
.range::-moz-range-thumb { width: 14px; height: 18px; border: 3px solid var(--color-brand-primary); border-radius: 6px; background: var(--color-bg-default); }

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

.site-header { position: relative; z-index: 20; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--header-height); }
.site-header__start { display: flex; align-items: center; gap: var(--space-5); }
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav a { padding-block: var(--space-2); font-size: var(--text-navigation); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-text-hover); }
.menu-panel__actions { display: none; }
.menu-toggle { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--color-brand-primary); cursor: pointer; }
.menu-toggle .icon { width: 28px; height: 28px; }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1023px) {
  .site-header__start { gap: var(--space-4); }
  .nav { gap: var(--space-3); }
}

/* Mobile : panneau blanc qui descend sous le logo et la croix. */
@media (max-width: 767px) {
  .site-header__cta { display: none; }
  .menu-toggle { display: grid; position: relative; z-index: 2; }
  .site-header .logo { position: relative; z-index: 2; }
  .menu-panel { display: none; }
  .js .menu-panel.open { display: flex; }
  .menu-panel {
    position: absolute; inset: 0 0 auto; z-index: 1;
    flex-direction: column; gap: var(--space-5);
    padding: calc(var(--header-height) + var(--space-3)) var(--container-gutter) var(--space-4);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-bg-default); box-shadow: 0 24px 40px #1a27361a;
  }
  .menu-panel .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-panel .nav a { padding: 18px var(--space-2); font-size: 20px; color: var(--color-text-primary); }
  .menu-panel .nav a[aria-current="page"] { color: var(--color-text-hover); }
  .menu-panel__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-grey-soft); }
  .menu-panel__actions .btn--text { justify-content: center; padding-block: var(--space-2); color: var(--color-brand-primary); }
  /* Sans JavaScript, la navigation reste visible sous l'en-tête. */
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; }
  html:not(.js) .menu-panel { display: flex; position: static; width: 100%; padding: 0 0 var(--space-3); box-shadow: none; }
  html:not(.js) .menu-panel__actions { display: none; }
}

/* ---------- Pied de page ---------- */

.site-footer { padding-block: var(--space-4); }
.site-footer__main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-default); }
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-2); max-width: 260px; }
.site-footer__brand .logo { padding-inline: 0; }
.site-footer__brand p, .site-footer__fr { font-size: var(--text-body-small); color: var(--color-text-muted); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-footer__links a { padding-block: var(--space-2); font-size: var(--text-navigation); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.site-footer__links a:hover, .site-footer__legal a:hover,
.site-footer__links a[aria-current="page"], .site-footer__legal a[aria-current="page"] { color: var(--color-text-hover); }
.site-footer__contact { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__contact > a { font-weight: var(--weight-medium); color: var(--color-accent-blue); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); font-size: var(--text-body-xsmall); color: var(--color-text-muted); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
@media (max-width: 1023px) {
  .site-footer__main { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .site-footer__main { flex-direction: column; align-items: flex-start; }
  .site-footer__links { flex-direction: column; gap: 0; }
  .site-footer__bottom { flex-wrap: wrap; }
}

/* ---------- Pages de texte (mentions légales, confidentialité) ---------- */

.page-head { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-5) var(--space-4); }
.page-head .label { margin-bottom: var(--space-2); }
.page-head p { font-size: var(--text-body-large); }
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: var(--space-5); align-items: start; }
.page-layout > aside { position: sticky; top: var(--space-4); }
@media (max-width: 1023px) {
  .page-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .page-layout > aside { position: static; order: -1; }
}

/* Texte courant d'une page légale. */
.prose { display: flex; flex-direction: column; gap: var(--space-3); }
.prose h2 { margin-top: var(--space-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-2); }
.prose a { color: var(--color-accent-blue); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--space-1); }
.prose .t-body-small { color: var(--color-text-secondary); }

/* Tableau de définitions : une ligne par donnée, valeur alignée à droite. */
.dl { display: flex; flex-direction: column; margin: 0; }
.dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border-default); }
.dl dt { font-weight: var(--weight-bold); color: var(--color-text-primary); }
.dl dd { margin: 0; text-align: right; }
.dl a { color: var(--color-accent-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .dl > div { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .dl dd { text-align: left; }
}

/* Sommaire. */
.toc { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-blue-soft); }
.toc strong { font-weight: var(--weight-medium); color: var(--color-text-primary); }
.toc ol { margin: 0; padding-left: 1.1em; list-style: "· "; display: flex; flex-direction: column; gap: var(--space-1); }
.toc a { font-weight: var(--weight-medium); color: var(--color-text-primary); }
.toc a:hover { color: var(--color-text-hover); }

/* ---------- Bandeau d'appel à l'action ---------- */

.cta { align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-4); text-align: center; }
.cta p { font-size: var(--text-body-large); }

/* Survol des blocs d'appel à l'action : le fond passe au dégradé sombre.
   Un calque ::before sous le contenu permet une transition douce entre deux dégradés.
   Concerne .cta, .banner et toute carte marquée .cta-hover. */
:is(.cta, .banner, .cta-hover) { position: relative; isolation: isolate; }
:is(.cta, .banner, .cta-hover)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gradient-lochmara-hover); opacity: 0; transition: opacity .25s; pointer-events: none; }
:is(.cta, .cta-hover).surface-persian-green::before { background: var(--gradient-persian-green-hover); }
:is(.cta, .cta-hover).surface-vermillon::before, .banner--vermillon::before { background: var(--gradient-vermillon-hover); }
:is(.cta, .banner, .cta-hover):is(:hover, :focus-within)::before { opacity: 1; }

/* ---------- Mobile : règles communes à tous les blocs et boutons (retours de Coline) ---------- */

@media (max-width: 767px) {
  /* Tous les blocs : rayon et marges intérieures de 16 px. */
  .card, .card--md, .card--lg, .cta, .split, .logo-block, .toc, .banner, .stat { border-radius: var(--radius-md); padding: var(--space-3); }
  /* Tous les boutons pleins en pleine largeur (les liens texte et boutons icône gardent leur taille). */
  .btn:not(.btn--text):not(.btn--icon) { width: 100%; align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .faq__item summary .icon, :is(.cta, .banner, .cta-hover)::before { transition: none; }
}