/*
 * Identité Stitch « Concierge Digital » — jetons et composants communs
 * (refonte décidée le 28/09/2026 ; source : DESIGN.md des maquettes Stitch).
 * Traduction à la main des utilitaires Tailwind de la maquette : aucune
 * dépendance à Tailwind (son CDN n'est pas fait pour la production).
 *
 * Écart volontaire, pour l'accessibilité (contraste AA) : le cyan
 * `on-tertiary-container` #0092D0 de la maquette n'est jamais une couleur
 * de TEXTE ici (3,4:1 sur blanc) — seulement de décor (points).
 */
:root {
  /* Couleurs (DESIGN.md) */
  --st-surface: #fcf9f4;
  --st-surface-dim: #dcdad5;
  --st-conteneur-plus-bas: #ffffff;
  --st-conteneur-bas: #f6f3ee;
  --st-conteneur: #f0ede9;
  --st-conteneur-haut: #ebe8e3;
  --st-conteneur-plus-haut: #e5e2dd;
  --st-texte: #1c1c19;
  --st-texte-variant: #44474d;
  --st-contour: #74777e;
  --st-contour-variant: #c4c6cd;
  --st-primaire: #000c1c;
  --st-primaire-conteneur: #0d233a;
  --st-primaire-survol: #13334c;
  --st-primaire-fixe-dim: #b3c8e6;
  --st-secondaire: #6c5c46;
  --st-secondaire-conteneur: #f2dcc0;
  --st-sur-secondaire-conteneur: #70604a;
  --st-secondaire-fixe: #f5dfc3;
  --st-sable: #d9c4a9;
  --st-cyan: #0092d0;
  --st-cyan-texte: #004c6e;
  --st-cyan-doux: #c9e6ff;
  --st-vert: #059669;
  --st-erreur: #ba1a1a;
  /* Typographies */
  --st-serif: "Noto Serif", "Noto Naskh Arabic", Georgia, serif;
  --st-sans: "Hanken Grotesk", "Noto Sans Arabic", system-ui, sans-serif;
  /* Arrondis et ombres */
  --st-rayon-sm: 0.25rem;
  --st-rayon: 0.5rem;
  --st-rayon-md: 0.75rem;
  --st-rayon-lg: 1rem;
  --st-rayon-xl: 1.5rem;
  --st-ombre-1: 0 4px 20px -2px rgba(13, 35, 58, 0.04);
  --st-ombre-2: 0 12px 32px -4px rgba(13, 35, 58, 0.08), 0 4px 12px -2px rgba(217, 196, 169, 0.25);
  --st-ombre-bouton: 0 4px 16px -2px rgba(13, 35, 58, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--st-surface);
  color: var(--st-texte);
  font: 400 14px/22px var(--st-sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

.st-conteneur { max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
.st-conteneur--moyen { max-width: 72rem; }
.st-conteneur--etroit { max-width: 56rem; }
@media (min-width: 1024px) { .st-conteneur { padding-inline: 3rem; } }

.st-evitement { position: absolute; inset-inline-start: -999px; top: 0; }
.st-evitement:focus { inset-inline-start: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .5rem 1rem; border-radius: var(--st-rayon); }
:focus-visible { outline: 2px solid var(--st-primaire-conteneur); outline-offset: 2px; }

/* --- Typographie (échelle DESIGN.md) --- */
.st-titre-display {
  font: 400 34px/42px var(--st-serif);
  letter-spacing: -0.01em;
  color: var(--st-primaire);
  margin: 0;
}
.st-titre-display em { font-style: italic; color: var(--st-secondaire); }
@media (min-width: 1024px) { .st-titre-display { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; } }
.st-titre-lg { font: 400 26px/34px var(--st-serif); letter-spacing: -0.01em; color: var(--st-primaire); margin: 0; }
@media (min-width: 1024px) { .st-titre-lg { font-size: 36px; line-height: 44px; letter-spacing: -0.015em; } }
.st-titre-md { font: 500 24px/32px var(--st-serif); letter-spacing: -0.01em; color: var(--st-primaire); margin: 0; }
.st-titre-sm { font: 500 20px/28px var(--st-serif); color: var(--st-primaire); margin: 0; }
.st-texte-lg { font-size: 16px; line-height: 26px; color: var(--st-texte-variant); }
.st-surtitre {
  font: 600 11px/14px var(--st-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-secondaire);
  margin: 0;
}

/* --- Pastilles, badges, points --- */
.st-point { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; background: var(--st-cyan); flex: none; }
.st-point--vert { background: var(--st-vert); }
.st-pastille {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .65rem; border-radius: 999px;
  font: 600 11px/14px var(--st-sans); letter-spacing: 0.04em;
  margin: 0;
}
.st-pastille--vivante { background: rgba(242, 220, 192, 0.5); color: var(--st-secondaire); }
.st-pastille--claire { background: var(--st-surface); color: var(--st-texte); font-weight: 500; font-size: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.st-pastille--sable { background: var(--st-secondaire-conteneur); color: var(--st-sur-secondaire-conteneur); border-radius: var(--st-rayon-sm); }
.st-pastille--neutre { background: var(--st-conteneur); color: var(--st-primaire); font-size: 12px; font-weight: 700; }
.st-pastille--or { background: var(--st-secondaire); color: var(--st-surface); font-size: 12px; font-weight: 700; }
.st-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: var(--st-secondaire-conteneur); color: var(--st-sur-secondaire-conteneur);
  font: 600 11px/14px var(--st-sans); letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0;
}
.st-badge .material-symbols-outlined { font-size: 14px; }
.st-badge--petit { padding: .25rem .75rem; letter-spacing: .06em; }

/* --- Boutons --- */
.st-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 2.75rem; padding: .6rem 1.25rem;
  border: 0; border-radius: var(--st-rayon-md);
  font: 600 14px/22px var(--st-sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s, transform .1s;
}
.st-bouton:active { transform: scale(.99); }
.st-bouton .material-symbols-outlined { font-size: 20px; }
.st-bouton--primaire { background: var(--st-primaire); color: var(--st-surface); box-shadow: var(--st-ombre-bouton); }
.st-bouton--primaire:hover { background: var(--st-primaire-conteneur); }
.st-bouton--doux { background: var(--st-conteneur); color: var(--st-primaire); font-weight: 500; }
.st-bouton--doux:hover { background: var(--st-conteneur-haut); }
.st-bouton--clair { background: var(--st-surface); color: var(--st-primaire-conteneur); }
.st-bouton--clair:hover { background: #fff; }
.st-bouton--plein { width: 100%; }
.st-bouton--entete { min-height: 2.5rem; padding: .5rem 1rem; border-radius: var(--st-rayon); background: var(--st-primaire-conteneur); font-weight: 500; }
@media (max-width: 639px) { .st-bouton--entete { display: none; } }

/* --- En-tête --- */
.st-entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 249, 244, 0.9);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 1px 8px rgba(13, 35, 58, 0.04);
}
.st-entete__barre { height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.st-entete__gauche { display: flex; align-items: center; gap: 1rem; flex: none; }
.st-marque { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--st-primaire-conteneur); }
.st-marque__monogramme {
  width: 2.25rem; height: 2.25rem; border-radius: var(--st-rayon);
  background: var(--st-primaire-conteneur); color: var(--st-surface);
  display: flex; align-items: center; justify-content: center;
  font: 400 18px/1 var(--st-serif); box-shadow: 0 2px 10px rgba(13, 35, 58, 0.12);
}
.st-marque__texte { display: flex; flex-direction: column; }
.st-marque__nom { font: 500 18px/24px var(--st-serif); letter-spacing: -0.01em; }
.st-marque__sous { font: 600 11px/14px var(--st-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--st-secondaire); }
.st-entete__gauche .st-pastille { display: none; }
@media (min-width: 1280px) { .st-entete__gauche .st-pastille { display: inline-flex; } }
.st-nav { display: none; }
@media (min-width: 1024px) {
  .st-nav { display: flex; align-items: center; gap: .5rem; padding: .25rem; border-radius: var(--st-rayon-md); background: rgba(246, 243, 238, 0.7); }
}
.st-nav a { padding: .5rem .875rem; border-radius: var(--st-rayon); color: var(--st-texte-variant); text-decoration: none; transition: color .2s; }
.st-nav a:hover { color: var(--st-texte); }
.st-nav a[aria-current="page"] { background: var(--st-primaire-conteneur); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.st-entete__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.st-compte {
  width: 2rem; height: 2rem; border-radius: 999px; background: var(--st-primaire); color: #fff;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.st-compte .material-symbols-outlined { font-size: 18px; }

/* --- Bandeau d'information sous l'en-tête --- */
.st-bandeau-info { background: rgba(242, 220, 192, 0.4); color: var(--st-secondaire); font-size: 12px; line-height: 18px; padding-block: .625rem; }
.st-bandeau-info__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.st-bandeau-info p { margin: 0; }
.st-bandeau-info p .st-point { margin-inline-end: .5rem; vertical-align: middle; }
.st-bandeau-info strong { color: var(--st-primaire); }
.st-bandeau-info a { display: inline-flex; align-items: center; gap: .35rem; color: var(--st-primaire); font-weight: 500; text-decoration: none; }
.st-bandeau-info a .material-symbols-outlined { font-size: 16px; }

/* --- En-tête de section, questions --- */
.st-entete-section { text-align: center; max-width: 42rem; margin: 0 auto 3rem; display: grid; gap: .5rem; justify-items: center; }
.st-entete-section p { margin: 0; color: var(--st-texte-variant); }
.st-question { background: var(--st-conteneur-bas); border-radius: var(--st-rayon-lg); margin-bottom: 1rem; }
.st-question summary {
  list-style: none; cursor: pointer; padding: 1.25rem 1.25rem; font-weight: 500; color: var(--st-primaire);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.st-question summary::-webkit-details-marker { display: none; }
.st-question summary::after { content: "expand_more"; font-family: "Material Symbols Outlined"; font-size: 22px; transition: transform .2s; }
.st-question[open] summary::after { transform: rotate(180deg); }
.st-question p { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--st-texte-variant); }

/* --- Pied de page --- */
.st-pied { background: var(--st-conteneur-bas); padding-block: 4rem 2rem; margin-top: 0; }
.st-pied__grille { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .st-pied__grille { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.st-pied__marque p { color: var(--st-texte-variant); max-width: 24rem; margin: 1rem 0 0; }
.st-pied__titre { font: 600 14px/20px var(--st-sans); color: var(--st-primaire); margin: 0 0 1rem; }
.st-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.st-pied ul a { color: var(--st-texte-variant); text-decoration: none; }
.st-pied ul a:hover { color: var(--st-primaire); }
.st-pied__bas { border-top: 1px solid var(--st-conteneur-plus-haut); margin-top: 3rem; padding-top: 1.5rem; font-size: 12px; color: var(--st-texte-variant); }
.st-pied__bas p { margin: 0; }