/* da.css : la direction artistique du site, déclinaison du thème sobasiq.
   Une seule famille d'accent, le jaune olive : #dad20b en aplat, #c9a227 en
   second ton, #747006 pour le texte accentué (contraste 5,6:1 sur le fond),
   #f1f0da en lavis pâle, #2f2e23 en encre. Aucune autre teinte n'entre ici. */
:root {
  --f-titre: 'Space Grotesk Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-texte: 'Roboto Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-graisse-titre: 800;
  --f-casse-kicker: none;
  --tm: 0.8rem;
  --t1: 1.0rem;
  --t2: 1.25rem;
  --t3: 1.562rem;
  --t4: 1.953rem;
  --t5: 2.441rem;
  --t6: 3.052rem;
  --t7: 3.815rem;
  --t-hero: clamp(2.44rem, 6vw, 4.4rem);
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1.0rem;
  --e5: 1.5rem;
  --e6: 2.0rem;
  --e7: 3.0rem;
  --e8: 4.0rem;
  --r-carte: 0.5rem;
  --r-bouton: 0.375rem;
  --r-image: 0.5rem;
  --largeur: 1200px;
  --ico-trait: 2;
  /* pastille (40 + 48) + bandeau (8 + 32) : le hero prend l'écran moins ça */
  --header-h: 128px;
  --c-fond: #fdfdfd;
  --c-fond-2: #f2f2f0;
  --c-surface: #ffffff;
  --c-texte: #2f2e23;
  --c-texte-2: #6b6a57;
  --c-primaire: #dad20b;
  --c-sur-primaire: #292914;
  --c-secondaire: #c9a227;
  --c-sur-secondaire: #292914;
  --c-primaire-texte: #747006;
  --c-secondaire-texte: #747006;
  --c-doux: #f1f0da;
  --c-sur-doux: #292914;
  --c-bord: #d9d9d3;
  --c-voile: #18180c;
  --c-sur-voile: #ffffff;
  --c-ombre: #24230f;
  --o-carte: 0 18px 40px -12px color-mix(in srgb, #24230f 28%, transparent);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #24230f 28%, transparent);
  --carte-fond: #ffffff;
  --carte-encre: #2f2e23;
  --carte-encre-2: #6b6a57;
  --carte-lien: #747006;
  --carte-bord: 0 solid transparent;
  --btn-fond: #2f2e23;
  --btn-texte: #fdfdfd;
  --btn-bord: 2px solid #2f2e23;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #747006;
  --lien-deco: underline;
  --lien-epaisseur: 3px;
  --lien-fond: transparent;
  --lien-fond-encre: #747006;
  /* les deux variables d'empreinte, comparées entre sites voisins */
  --brand-accent: #dad20b;
  --brand-accent-2: #c9a227;
}
html.dark, html[data-theme="dark"], html[data-mode="dark"], html.theme-dark, body.dark, [data-theme="dark"] [data-bh-home] {
  --c-fond: #181814;
  --c-fond-2: #24231c;
  --c-surface: #2b2b24;
  --c-texte: #eeede8;
  --c-texte-2: #c3c3b6;
  --c-primaire: #dad20b;
  --c-sur-primaire: #292914;
  --c-secondaire: #c9a227;
  --c-sur-secondaire: #292914;
  --c-primaire-texte: #e6e07a;
  --c-secondaire-texte: #ddc766;
  --c-doux: #3a3818;
  --c-sur-doux: #f9f9f5;
  --c-bord: #4d4d42;
  --c-voile: #18180c;
  --c-sur-voile: #ffffff;
  --c-ombre: #070703;
  --o-carte: 0 18px 40px -12px color-mix(in srgb, #070703 28%, transparent);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #070703 28%, transparent);
  --carte-fond: #2b2b24;
  --carte-encre: #eeede8;
  --carte-encre-2: #c3c3b6;
  --carte-lien: #e6e07a;
  --carte-bord: 0 solid transparent;
  --btn-fond: #eeede8;
  --btn-texte: #181814;
  --btn-bord: 2px solid #eeede8;
  --btn-ombre: none;
  --btn-deco: none;
  --lien-couleur: #e6e07a;
  --lien-deco: underline;
  --lien-epaisseur: 3px;
  --lien-fond: transparent;
  --lien-fond-encre: #e6e07a;
}

body { font-family: var(--f-texte); }
h1, h2, h3, h4 { font-family: var(--f-titre); }

/* Le kicker du thème : capitales espacées au-dessus des titres. */
.kicker {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-texte-2);
  font-weight: 600;
}

/* La pastille de rubrique, uniquement sur un lien. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  background: var(--c-doux);
  color: var(--c-primaire-texte);
  padding: 0.15rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
a.pastille:hover { background: var(--c-primaire); color: var(--c-sur-primaire); }

/* Les portraits ronds du thème portent un anneau discret. */
.portrait { border-radius: 999px; object-fit: cover; }

/* L'aplat sombre garde son encre claire dans les deux modes. */
.aplat-sombre { background: var(--c-voile); color: var(--c-sur-voile); }

/* Le bandeau du haut, dans la langue du thème : lavis pâle, hairline, refermable.
   Il est dans la pastille fixe, donc il suit le menu au défilement. */
.bandeau[data-bandeau] {
  position: static;
  z-index: auto;
  justify-content: flex-start;
  background: var(--c-doux);
  color: var(--c-texte);
  font-weight: 400;
  padding-block: 0.375rem;
}
.bandeau[data-bandeau][hidden] { display: none; }
.bandeau[data-bandeau] a { color: inherit; text-decoration: none; }
.bandeau[data-bandeau] [data-fermer] {
  font-size: 1rem;
  color: var(--c-texte-2);
  border-radius: 999px;
}
.bandeau[data-bandeau] [data-fermer]:hover { background: var(--c-primaire); color: var(--c-sur-primaire); }

/* Le numéro d'étape d'une frise, en Space Grotesk. */
.numero-etape {
  font-family: var(--f-titre);
  font-weight: var(--f-graisse-titre);
  color: var(--c-primaire-texte);
}

/* Le resultat d'un calcul est une encre olive, jamais un aplat clair sur blanc :
   #dad20b reste reserve aux fonds et aux soulignes. */
[data-calcul] [data-formule] { color: var(--c-primaire-texte); }
.resultat-calcul {
  background: var(--c-doux);
  border-radius: var(--r-carte);
  padding: 0.7rem 0.9rem;
}
.resultat-calcul [data-formule] { font-size: 1.6rem; }

/* La note dessinee : olive plein, contour slate pour le reste. */
.note-etoiles .note-pleine { color: var(--c-secondaire); }
.note-etoiles .note-vide { color: #94a3b8; }

/* Le sélecteur d'onglets passe à la ligne au lieu de déborder du cadre sur
   mobile : les quatre profils d'usage restent tous atteignables. */
@media (max-width: 640px) {
  [data-onglets] [role="tablist"] { flex-wrap: wrap; justify-content: center; }
}

/* La photo d'étape occupe toute la hauteur de la colonne : elle n'a plus de
   course à coller, on neutralise le sticky du kit pour cette mise en page. */
[data-etapes] img[data-etapes-visuel] { position: static; }