/* Styles du site : catégories 0 à 6, détaillées dans doc/ux.md.
  Les adaptations responsive restent avec leur groupe ; ordre interne conservé.
  Les ajustements .page-home ne sont pas encore généralisés aux autres pages. */

/* ============================================================
  0. VARIABLES
  ------------------------------------------------------------
  Primitives dans variables.css ; rôles typographiques et rythme ci-dessous.
  Les variables de l'accueil restent limitées à :root:where(.page-home).
============================================================ */

:root:where(.page-home) {
  --type-font-heading: var(--font-family-header);
  --type-font-body: var(--font-family-text);
  --type-size-page-title: var(--font-size-3xl);
  --type-size-page-title-wide: var(--font-size-4xl);
  --type-size-section-title: var(--font-size-xl);
  --type-size-subtitle: var(--font-size-xl);
  --type-size-item-title: var(--font-size-lg);
  --type-size-body: var(--font-size-base);
  --type-size-lead: var(--font-size-lg);
  --type-size-label: var(--font-size-xs);
  --type-size-action: var(--font-size-sm);
  --type-size-navigation: var(--font-size-base);
  --type-size-navigation-wide: var(--font-size-sm);
  --type-weight-regular: var(--fw-regular);
  --type-weight-medium: var(--fw-medium);
  --type-weight-label: var(--fw-semibold);
  --type-weight-action: var(--fw-semibold);
  --type-leading-heading: var(--lh-snug);
  --type-leading-compact: var(--lh-normal);
  --type-leading-body: var(--lh-relaxed);
  --type-leading-brand: 1;
}

@media (min-width: 768px) {

  :root:where(.page-home) {
    --type-size-page-title: var(--type-size-page-title-wide);
    --type-size-navigation: var(--type-size-navigation-wide);
  }
}

:root:where(.page-home) {
  --layout-page-gutter: var(--space-4);
  --layout-section-gap: var(--space-8);
  --layout-section-content-gap: var(--space-4);
  --layout-gallery-gap: var(--space-4);
  --layout-agenda-item-gap: var(--space-7);
  --layout-agenda-list-margin-block: var(--space-6);
  --layout-card-content-gap: var(--space-3);
  --layout-text-stack-gap: var(--space-2);
  --layout-info-text-gap: var(--space-1);
  --layout-service-card-padding: var(--space-5);
  --layout-info-card-padding-block: var(--space-4);
  --layout-info-card-padding-inline: var(--space-3);
  --layout-action-gap: var(--space-2);
}

@media (min-width: 768px) {

  :root:where(.page-home) {
    --layout-page-gutter: var(--space-8);
    --layout-gallery-gap: var(--space-5);
    --layout-section-gap: var(--space-9);
  }
}

@media (min-width: 1024px) {

  :root:where(.page-home) {
    --layout-page-gutter: var(--space-9);
    --layout-service-card-padding: var(--space-6);
    --layout-section-gap: var(--space-9);
  }
}

/* ============================================================
  1. BASE
  ------------------------------------------------------------
  Styles par défaut des éléments HTML, sans classe de composant.
============================================================ */

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-text);
  color: var(--color-text-default);
  background-color: var(--color-bg-canvas);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-header);
}

h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
}

h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
}

h3 {
  font-size: var(--font-size-xl);
  line-height: var(--lh-normal);
}

p,
label {
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
}

a {
  font-family: var(--font-family-text);
  color: var(--color-link);
  border-bottom: solid 0px var(--color-link);
  transition: border-color 0.3s ease-out;
}

a:hover {
  /*border-bottom: solid var(--border-width-2) var(--color-link-hover);*/
}

/* Sections de contenu : colonne verticale, écart entre titre et contenu.
  Le hero est exclu : il a son propre pattern (deux colonnes sur grand écran). */
.l-main-container > section:not(.page-hero) {
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-content-gap, var(--space-4));
}

/* ============================================================
  2. STRUCTURE / LAYOUT
  ------------------------------------------------------------
  Ossature générale du site. Le flex/grid interne reste avec son composant.

  Conteneur principal
============================================================ */

.l-main-container {
  padding: var(--space-4) var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-gap, var(--space-8));
}

@media (max-width: 767px) {

  .l-main-container {
    padding-bottom: calc(var(--space-8) + 68px);
  }
}

@media (min-width: 768px) {

  .l-main-container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (min-width: 1024px) {

  .l-main-container {
    padding-left: var(--space-9);
    padding-right: var(--space-9);
  }
}

:where(.page-home) .l-main-container {
  padding-inline: var(--layout-page-gutter);
}

/* --- En-tête : structure --- */

header,
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
  background-color: var(--color-bg-canvas);
  border-bottom: var(--border-width-1) solid var(--color-border-default);
}

.site-header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  height: 52px;
}

@media (min-width: 768px) {

  .site-header_inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--space-8);
    height: 60px;
  }
}

@media (min-width: 1024px) {

  .site-header_inner {
    padding: 0 var(--space-9);
  }
}

:where(.page-home) .site-header_inner {
  padding-inline: var(--layout-page-gutter);
}

/* --- Pied de page : structure --- */

.site-footer {
  background-color: var(--color-gray-900);
  color: var(--color-gray-400);
  padding: var(--space-6) var(--space-4);
  padding-bottom: calc(var(--space-6) + 68px);
  /* espace contact-banner mobile */
}

.site-footer_inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 1024px;
  margin: 0 auto;
}

@media (min-width: 768px) {

  .site-footer {
    padding: var(--space-8) 0 var(--space-6);
  }

  .site-footer_inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
    padding: 0 var(--space-8);
  }
}

/* ============================================================
  3. COMPOSANTS / MODULES
  ------------------------------------------------------------
  Blocs réutilisables, variantes, états propres et responsive.
  Convention BEM visée ; aucun renommage dans cette étape.

  Identité dans l'en-tête
============================================================ */

/* --- Carte réutilisable : fond, ombre, rayon et padding unifiés --- */

.card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
}

/* --- Liste sobre avec icônes en puces --- */

.icon-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-left: var(--space-4);
}

.icon-list_item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.icon-list_item svg {
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-dots-list);
  margin-top: 2px;
}

/* Variante à puces rondes : pour les listes sans icône dédiée. */
.icon-list--dots .icon-list_item::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background-color: var(--color-dots-list);
  margin-top: 7px;
}

.site-header_logo {
  font-family: var(--font-family-header);
  font-size: var(--font-size-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-default);
  border-bottom: none;
  text-decoration: none;
  line-height: 1;
}

.site-header_logo:hover {
  color: var(--color-primary-700);
  border-bottom: none;
}

.site-header_logo-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* --- Navigation : bouton, menu et voile --- */

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-2);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-toggle:hover {
  background-color: var(--color-bg-surface);
}

.nav-toggle_bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-default);
  border-radius: var(--radius-round);
  transform-origin: center;
  transition: transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard);
}

.nav-toggle.is-open .nav-toggle_bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle_bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.is-open .nav-toggle_bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 85vw);
  z-index: var(--z-index-dropdown);
  background-color: var(--color-bg-canvas);
  border-left: var(--border-width-1) solid var(--color-border-default);
  box-shadow: var(--shadow-4);
  /* État fermé : glissé hors de l'écran à droite */
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard),
              visibility 0s var(--duration-normal);
}

.mobile-menu.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard),
              visibility 0s 0s;
}

.mobile-menu_list {
  list-style: none;
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.mobile-menu_separator {
  padding: var(--space-3) var(--space-5) var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.mobile-menu_link {
  display: block;
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-default);
  border-bottom: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.mobile-menu_link:hover {
  background-color: var(--color-bg-surface);
  color: var(--color-primary-700);
  border-bottom: none;
}

.mobile-menu_link.is-active {
  color: var(--color-primary-600);
  font-weight: var(--fw-semibold);
}

.mobile-menu_cta {
  padding: var(--space-4) var(--space-5) var(--space-2);
}

.mobile-menu_contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.mobile-menu_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  color: var(--color-primary-600);
  border: var(--border-width-1) solid var(--color-border-default);
  border-radius: var(--radius-round);
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.mobile-menu_btn:hover {
  background-color: var(--color-bg-surface);
  color: var(--color-primary-700);
  border-color: var(--color-primary-300);
}

.mobile-menu_btn svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Bouton vers un site externe (Mobilizon) : sans bord, pour le distinguer des contacts. */
.mobile-menu_btn--external {
  border-color: transparent;
  color: var(--color-text-muted);
}

.mobile-menu_btn--external:hover {
  background-color: var(--color-bg-surface);
  color: var(--color-primary-700);
  border-color: transparent;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-index-dropdown) - 1);
  background-color: hsl(27 24% 5% / 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-standard);
}

.nav-overlay.is-open {
  display: block;
  opacity: 1;
}

@media (min-width: 1100px) {

  .nav-toggle {
    display: none;
  }

  .mobile-menu {
    /* Annuler tous les styles du tiroir mobile */
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    background: none;
    border: none;
    box-shadow: none;
    transition: none;
    /* Contraindre le menu à la largeur du contenu, contenu centré */
    width: auto;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--space-8);
    display: flex;
    justify-content: center;
  }

  .mobile-menu.is-open,
  .mobile-menu {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .mobile-menu_list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
  }

  .mobile-menu_separator {
    display: none;
  }

  .mobile-menu_link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-3);
    white-space: nowrap;
  }

  .mobile-menu_link:hover {
    background-color: var(--color-bg-surface);
  }

  /* En desktop, le menu horizontal montre les liens et le bouton téléphone ; les autres contacts et Mobilizon sont masqués. */
  .mobile-menu_cta {
    padding: 0;
    margin-left: var(--space-2);
  }

  .mobile-menu_contacts,
  .mobile-menu_btn--external {
    display: none;
  }

  .mobile-menu_btn {
    width: auto;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
  }

  /* Le téléphone reste un bouton plein et marquant en desktop. */
  .mobile-menu_btn--phone {
    background-color: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: transparent;
  }

  .mobile-menu_btn--phone:hover {
    background-color: var(--color-primary-600);
    color: var(--color-gray-50);
    border-color: transparent;
  }

  .nav-overlay {
    display: none !important;
  }
}

/* --- Bandeau de contact mobile --- */

.contact-banner {
  display: none;
}

@media (max-width: 767px) {

  .contact-banner {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    /* Sous l'overlay (999) et le mobile-menu (1000) */
    background-color: var(--color-gray-900);
    border-top: var(--border-width-1) solid var(--color-gray-700);
    box-shadow: 0 -4px 16px hsl(27 24% 5% / 0.4);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .contact-banner_gallery {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
  }

  .contact-banner_item {
    flex: 1;
  }

  .contact-banner_link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    color: var(--color-gray-300);
    border-bottom: none;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
  }

  .contact-banner_link:hover,
  .contact-banner_link:focus-visible {
    color: var(--color-primary-400);
    background-color: hsl(27 20% 14% / 0.6);
    border-bottom: none;
    outline: none;
  }

  .contact-banner_link:focus-visible {
    outline: var(--border-width-focus) solid var(--color-primary-400);
    outline-offset: -3px;
  }

  .contact-banner_link svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
    flex-shrink: 0;
  }

  .contact-banner_label {
    font-size: var(--font-size-xs);
    font-family: var(--font-family-text);
    letter-spacing: 0.02em;
  }

  .contact_mail:hover,
  .contact_mail:focus-visible {
    color: var(--color-primary-400);
  }

  .contact_phone:hover,
  .contact_phone:focus-visible {
    color: var(--color-primary-400);
  }

  .contact_signal:hover,
  .contact_signal:focus-visible {
    color: var(--color-primary-300);
  }

  .contact_whatsapp:hover,
  .contact_whatsapp:focus-visible {
    color: var(--color-secondary-300);
  }
}

@media (min-width: 768px) {

  .contact-banner {
    display: none !important;
  }
}

/* --- Pied de page : contenus et liens --- */

.site-footer_brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width-1) solid var(--color-gray-800);
}

.site-footer_name {
  font-family: var(--font-family-header);
  font-size: var(--font-size-base);
  color: var(--color-gray-200);
}

.site-footer_copy {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  line-height: var(--lh-normal);
}

.site-footer_nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer_nav a {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  border-bottom-color: transparent;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer_nav a:hover {
  color: var(--color-gray-300);
  border-bottom-color: transparent;
}

.site-footer_contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-width-1) solid var(--color-gray-800);
}

.site-footer_contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  border-bottom-color: transparent;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer_contact-link:hover {
  color: var(--color-primary-300);
  border-bottom-color: transparent;
}

.site-footer_contact-link svg {
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  opacity: 0.7;
}

@media (min-width: 768px) {

  .site-footer_brand {
    flex: 1.5;
    border-bottom: none;
    padding-bottom: 0;
  }

  .site-footer_nav {
    flex: 1;
  }

  .site-footer_contact {
    flex: 1.2;
    border-top: none;
    padding-top: 0;
  }
}

/* --- Hero générique --- */

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero_image-container {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-4);
  max-height: 320px;
}

.hero_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.hero_text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero_service-label {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.hero_main-title {
  font-size: var(--font-size-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
}

.hero_quote {
  padding-left: var(--space-4);
  border-left: var(--border-width-3) solid var(--color-primary-400);
  font-family: var(--font-family-header);
  font-size: var(--font-size-base);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (min-width: 768px) {

  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-6);
    align-items: center;
  }

  .hero_image-container {
    grid-row: 1 / 3;
    max-height: 480px;
    border-radius: var(--radius-5);
  }

  .hero_text {
    grid-column: 2;
    grid-row: 1;
  }

  .hero_main-title {
    font-size: var(--font-size-3xl);
  }

  .hero_service-label {
    font-size: var(--font-size-sm);
  }
}

@media (min-width: 1024px) {

  .hero_image-container {
    max-height: 560px;
  }
}

:where(.page-home) .hero_actions {
  gap: var(--layout-action-gap);
  margin-top: 0;
}

/* --- Hero partagé entre les pages --- */

.page-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.page-hero_text {
  display: flex;
  flex-direction: column;
}

.page-hero_title {
  font-size: var(--font-size-3xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  margin-bottom: var(--space-2);
}

.page-hero_location {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.page-hero_quote,
.page-hero_tagline {
  padding-left: var(--space-4);
  border-left: var(--border-width-3) solid var(--color-primary-400);
  font-family: var(--font-family-header);
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.page-hero_image-placeholder {
  width: 100%;
  height: 200px;
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-4);
  border: 2px dashed var(--color-border-default);
  /* Remplacer par une vraie image quand disponible */
}

.page-hero_image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-4);
}

@media (min-width: 768px) {

  .page-hero {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .page-hero_text {
    flex: 1;
  }

  .page-hero_image-placeholder {
    flex: 1;
    height: 280px;
  }

  .page-hero_image {
    flex: 1;
    height: 280px;
  }

  .page-hero_title {
    font-size: var(--font-size-4xl);
  }

  .page-hero {
    grid-column: 1 / -1;
  }
}

:where(.page-home) .page-hero_title,
:where(.page-home) .page-hero_location {
  margin-bottom: 0;
}

:where(.page-home) .page-hero_text {
  gap: var(--layout-card-content-gap);
}

/* --- Lien de retour --- */

.page-back {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-bottom-color: transparent;
  margin-bottom: var(--space-3);
}

.page-back:hover {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
}
/* --- PAGE ACCUEIL --- */
/* --- Offres et informations pratiques --- */

.services_gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
}

.services_item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.services_item_icon-wrapper svg {
  width: var(--size-6);
  height: var(--size-6);
}

.services_item_content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.services_item_type {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}

.services_item_header {
  font-size: var(--font-size-xl);
  line-height: var(--lh-snug);
}

.services_item_description {
  font-size: var(--font-size-sm);
  line-height: var(--lh-relaxed);
}

.services_item_nav {
  align-self: flex-end;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  border-bottom-color: transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-bottom-color var(--duration-fast) var(--ease-out);
}

.services_item_nav:hover {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-700);
}

.keys-info_gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  list-style: none;
}

.keys-info_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
  text-align: center;
}

.keys-info_item_icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  background-color: var(--color-action-primary-bg-soft);
}

.keys-info_icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.keys-info_info-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.keys-info_item_label {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.keys-info_item_title {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.keys-info_item_detail {
  font-size: var(--font-size-sm);
  line-height: var(--lh-snug);
  padding: var(--space-1) 0;
}

.keys-info_link {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  border-bottom-color: transparent;
  margin-top: auto;
  transition: color var(--duration-fast) var(--ease-out),
              border-bottom-color var(--duration-fast) var(--ease-out);
}

.keys-info_link:hover {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-700);
}

@media (min-width: 768px) {

  .services_gallery {
    flex-direction: row;
    gap: var(--space-5);
  }

  .services_item {
    flex: 1;
  }

  .keys-info_gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {

  .services_item {
    padding: var(--space-6);
  }
}

:where(.page-home) .services,
:where(.page-home) .keys-info {
  gap: var(--layout-section-content-gap);
}

:where(.page-home) .services > .section-title,
:where(.page-home) .keys-info > .section-title {
  margin-bottom: 0;
}

:where(.page-home) .services_gallery {
  gap: var(--layout-gallery-gap);
}

:where(.page-home) .keys-info_gallery {
  gap: var(--layout-gallery-gap);
}

:where(.page-home) .services_item {
  gap: var(--layout-card-content-gap);
  padding: var(--layout-service-card-padding);
}

:where(.page-home) .services_item_content {
  gap: var(--layout-text-stack-gap);
}

:where(.page-home) .keys-info_card {
  gap: var(--layout-card-content-gap);
  padding: var(--layout-info-card-padding-block) var(--layout-info-card-padding-inline);
}

:where(.page-home) .keys-info_info-container {
  gap: var(--layout-info-text-gap);
}

/* --- Présentation courte --- */

.about-me {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about-me_header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.about-me_portrait-wrapper {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-round);
  overflow: hidden;
  border: var(--border-width-3) solid var(--color-primary-400);
  box-shadow: var(--shadow-4);
}

.about-me_portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-me_intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.about-me_tagline {
  font-style: normal;
  color: var(--color-text-muted);
}

.about-me_text {
  color: var(--color-text-default);
}

.about-me_contact-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-3);
  border-left: var(--border-width-3) solid var(--color-primary-400);
}

.about-me_contact {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  align-items: baseline;
}

.about-me_contact-label {
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  min-width: 80px;
  flex-shrink: 0;
}

.about-me_contact-link {
  color: var(--color-link);
  border-bottom-color: transparent;
}

.about-me_contact-link:hover {
  border-bottom-color: var(--color-link-hover);
  color: var(--color-link-hover);
}

.about-me_more-link {
  align-self: flex-start;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-600);
  border-bottom-color: transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-bottom-color var(--duration-fast) var(--ease-out);
}

.about-me_more-link:hover {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-700);
}

@media (min-width: 768px) {

  .about-me_portrait-wrapper {
    width: 128px;
    height: 128px;
  }

  .about-me_header {
    gap: var(--space-6);
  }
}

/* --- Témoignages --- */

.testimonials_grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial_card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-4);
  border-left: var(--border-width-3) solid var(--color-primary-300);
}

.testimonial_author {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {

  .testimonials_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

:where(.page-home) .testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

:where(.page-home) .testimonial_quote {
  padding-left: var(--space-4);
  border-left: var(--border-width-3) solid var(--color-primary-400);
  font-family: var(--type-font-heading);
  font-size: var(--type-size-lead);
  font-style: italic;
  line-height: var(--type-leading-body);
  color: var(--color-text-muted);
}

:where(.page-home) .testimonial_author {
  margin-top: var(--space-4);
}

/* --- Agenda : liste, actions et indisponibilité --- */

/* Message de secours quand le flux est vide ou inaccessible : sobre et compact. */
.group-agenda_fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

/* L'attribut hidden doit primer sur le display:flex ci-dessus. */
.group-agenda_fallback[hidden] {
  display: none;
}

.group-agenda_fallback svg {
  width: var(--size-6);
  height: var(--size-6);
  color: var(--color-text-muted);
}

.group-agenda_fallback p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.agenda-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-6);
}

.agenda-item {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: baseline;
}

.agenda-item a {
  text-decoration: none;
}

.agenda-item strong {
  display: block;
}

.agenda-col {
  display: grid;
  gap: var(--space-1);
}

.agenda-field-error {
  margin: 0;
}

.agenda-field-error a {
  display: inline;
  text-decoration: underline;
}

.agenda-actions {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}

.agenda-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-3);
  background-color: transparent;
  border: var(--border-width-1) solid var(--color-border-default);
  text-decoration: none;
}

.agenda-btn:hover {
  background-color: var(--color-bg-surface);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

:where(.page-home) .group-agenda .agenda-list {
  gap: var(--layout-agenda-item-gap);
  margin-block: var(--layout-agenda-list-margin-block);
}

/* --- Newsletter --- */
.newsletter_inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.newsletter_button {
  align-self: center;
}

/* --- Appel à contact partagé entre les pages --- */

.section-title.cf-cta_title {
  color: var(--color-text-inverse);
}

.cf-cta_inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-gray-900);
  border-radius: var(--radius-5);
  align-items: flex-start;
}

.cf-cta_title {
  color: var(--color-text-inverse);
}

.cf-cta_text {
  color: var(--color-gray-300);
  line-height: var(--lh-relaxed);
}

.cf-cta_actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  align-items: center;
}

.cf-cta_actions svg {
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
}

@media (min-width: 768px) {

  .cf-cta_actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* --- PAGE CONSTELLATIONS FAMILIALES --- */


/* --- Boutons du design system : accueil --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-round);
  font-family: var(--type-font-body);
  font-size: var(--type-size-action);
  font-weight: var(--type-weight-action);
  line-height: var(--type-leading-compact);
  text-align: center;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.button--primary {
  background-color: var(--color-action-primary-bg-soft);
  border-color: var(--color-border-default);
  color: var(--color-primary-600);
}

.button--primary:hover {
  background-color: var(--color-primary-200);
  border-color: var(--color-primary-400);
  color: var(--color-primary-700);
}

.button--transparent {
  background-color: transparent;
  border-color: var(--color-border-default);
  color: var(--color-primary-600);
}

.button--transparent:hover {
  background-color: var(--color-primary-200);
  border-color: var(--color-primary-400);
  color: var(--color-primary-700);
}

.button--text {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary-600);
  text-align: initial;
  border-bottom: var(--border-width-1) solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-bottom-color var(--duration-fast) var(--ease-out);
}

.button--text:hover {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-700);
}

.button:focus-visible {
  outline: var(--border-width-focus) solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Variantes sur fond foncé : même forme et police, couleurs adaptées. */
.on-dark .button--primary {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-gray-50);
}

.on-dark .button--primary:hover {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: var(--color-gray-50);
}

.on-dark .button--transparent {
  background-color: transparent;
  border-color: var(--color-gray-700);
  color: var(--color-gray-300);
}

.on-dark .button--transparent:hover {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-700);
  color: var(--color-gray-100);
}

.on-dark .button:focus-visible {
  outline-color: var(--color-primary-400);
}

/* --- Typographie et liens de texte ---
  Les rôles .type-* suivent les styles historiques des composants
  pour conserver leur priorité à spécificité égale. */

h2.section-title {
  font-size: var(--font-size-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  color: var(--color-text-default);
  margin-bottom: var(--space-4);
}

.type-brand {
  font-family: var(--type-font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-brand);
}

.type-caption {
  font-family: var(--type-font-body);
  font-size: var(--type-size-label);
  font-weight: var(--type-weight-regular);
}

.type-navigation {
  font-family: var(--type-font-body);
  font-size: var(--type-size-navigation);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-leading-compact);
}

.type-meta {
  font-family: var(--type-font-body);
  font-size: var(--type-size-label);
  font-weight: var(--type-weight-label);
  line-height: var(--type-leading-compact);
  letter-spacing: 0;
  text-transform: uppercase;
}

.type-page-title {
  font-family: var(--type-font-heading);
  font-size: var(--type-size-page-title);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-heading);
}

h2.type-section-title {
  font-family: var(--type-font-heading);
  font-size: var(--type-size-section-title);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-heading);
  color: var(--color-text-muted);
}

.type-subtitle {
  font-family: var(--type-font-heading);
  font-size: var(--type-size-subtitle);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-leading-heading);
}

.type-lead {
  font-family: var(--type-font-heading);
  font-size: var(--type-size-lead);
  font-weight: var(--type-weight-regular);
  font-style: italic;
  line-height: var(--type-leading-body);
  color: var(--color-text-muted);
}

.type-item-title {
  font-family: var(--type-font-heading);
  font-size: var(--type-size-item-title);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-leading-heading);
}

.type-body {
  font-family: var(--type-font-body);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
}

.type-action {
  font-family: var(--type-font-body);
  font-size: var(--type-size-action);
  font-weight: var(--type-weight-action);
  line-height: var(--type-leading-compact);
}

.type-text-link,
#mobilizon-events .agenda-title {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

#mobilizon-events .agenda-title,
#mobilizon-events .agenda-title:hover {
  color: var(--color-primary-700);
}

.type-text-link:hover,
#mobilizon-events .agenda-title:hover {
  text-decoration-thickness: var(--border-width-2);
}

.type-text-link:focus-visible,
#mobilizon-events .agenda-title:focus-visible {
  outline: var(--border-width-focus) solid currentColor;
  outline-offset: 2px;
}

/* ============================================================
  4. ÉTATS
  ------------------------------------------------------------
  Réservé aux états transversaux. Aucun pour le moment.
  .is-open et .is-active restent avec la navigation.
  :hover et :focus-visible restent avec les composants concernés.
============================================================ */

/* ============================================================
  5. PAGES
  ------------------------------------------------------------
  Compositions et exceptions propres à une page ; pas de rubrique divers.

  Accueil : variante du hero
============================================================ */

.page-hero--home .page-hero_image {
  height: auto;
  max-height: 320px;
  aspect-ratio: 16 / 9;
  min-width: 0;
}

.page-hero--home .hero_actions {
  display: none;
}

@media (min-width: 768px) {

  .page-hero--home {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .page-hero--home .page-hero_text {
    flex: initial;
  }

  .page-hero--home .page-hero_image {
    flex: initial;
    height: auto;
    max-height: 320px;
    aspect-ratio: 16 / 9;
    min-width: 0;
  }
}

@media (min-width: 960px) {

  .page-hero--home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--space-8);
  }

  .page-hero--home .page-hero_text {
    min-width: 0;
  }

  .page-hero--home .hero_actions {
    display: flex;
  }

  .page-hero--home .page-hero_image {
    width: 100%;
    height: 280px;
    max-height: none;
    aspect-ratio: auto;
    min-width: 0;
  }
}

/* --- Constellations familiales --- */

.cf-situations_item p {
  font-style: italic;
}

/* --- Ateliers en groupe --- */

.group-home_inner {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.group-home_icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  background-color: var(--color-action-primary-bg-soft);
  color: var(--color-primary-600);
}

.group-home_icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.group-home_content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.group-home_text {
  color: var(--color-text-default);
  line-height: var(--lh-relaxed);
}

.group-home_link {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-600);
  border-bottom-color: transparent;
  align-self: flex-start;
  transition: color var(--duration-fast) var(--ease-out),
              border-bottom-color var(--duration-fast) var(--ease-out);
}

.group-home_link:hover {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-700);
}

/* --- Comment ça se passe : sections et composition avec sidebar --- */

.how-hero_intro {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-3);
}

.how-nav {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-1) solid var(--color-border-default);
}

.how-nav_list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.how-nav_link {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-primary-600);
  border-bottom-color: transparent;
  display: block;
  transition: color var(--duration-fast) var(--ease-out);
}

.how-nav_link:hover {
  color: var(--color-primary-700);
  border-bottom-color: transparent;
}

.how-section {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-top: var(--space-2);
  border-top: var(--border-width-1) solid var(--color-border-default);
  scroll-margin-top: 68px;
  /* header mobile (52px) + marge (16px) */
}

.how-section_label {
  flex-shrink: 0;
  font-family: var(--font-family-header);
  font-size: var(--font-size-2xl);
  font-weight: var(--fw-regular);
  color: var(--color-border-strong);
  line-height: 1;
  padding-top: var(--space-1);
  min-width: 32px;
}

.how-section_content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.how-section_text {
  color: var(--color-text-default);
  line-height: var(--lh-relaxed);
}

.how-section_quote {
  padding-left: var(--space-4);
  border-left: var(--border-width-3) solid var(--color-primary-400);
  font-family: var(--font-family-header);
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.how-section_highlight {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-3);
  border-left: var(--border-width-3) solid var(--color-primary-300);
}

.how-section_highlight svg {
  flex-shrink: 0;
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--color-primary-500);
  margin-top: 2px;
}

.how-section_highlight p {
  font-size: var(--font-size-sm);
  color: var(--color-text-default);
  line-height: var(--lh-relaxed);
}

.how-section_examples {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-2);
  border-left: var(--border-width-2) solid var(--color-border-default);
}

.how-section_examples li {
  font-family: var(--font-family-header);
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.how-format {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
}

.how-format_header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.how-format_header svg {
  flex-shrink: 0;
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--color-primary-600);
}

.how-format_title {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-default);
}

.how-section_rules {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.how-section_rule {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.how-section_rule svg {
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-primary-500);
  margin-top: 3px;
}

.how-section_rule span {
  font-size: var(--font-size-sm);
  color: var(--color-text-default);
  line-height: var(--lh-relaxed);
}

.how-integration_highlight {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.how-integration_number {
  font-family: var(--font-family-header);
  font-size: var(--font-size-7xl);
  font-weight: var(--fw-regular);
  color: var(--color-primary-400);
  line-height: 1;
}

.how-integration_subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

@media (min-width: 768px) {

  .l-main-container:has(.how-nav) {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto;
    column-gap: var(--space-8);
    align-items: start;
  }

  .how-section {
    scroll-margin-top: 84px;
    /* header desktop (60px) + marge (24px) */
  }

  .how-nav {
    grid-column: 1;
    position: sticky;
    top: 80px;
    background: none;
    border: none;
    padding: 0;
  }

  .how-nav_list {
    gap: var(--space-1);
  }

  .how-nav_link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-3);
    display: block;
  }

  .how-nav_link:hover {
    background-color: var(--color-bg-surface);
  }

  .how-section,
  .cf-cta {
    grid-column: 2;
  }
}

@media (min-width: 1024px) {

  .l-main-container:has(.how-nav) {
    grid-template-columns: 220px 1fr;
  }
}

/* --- À propos --- */

.aboutp-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.aboutp-thanks-list {
  display: flex;
  flex-direction: column;
  gap:var(--space-5);
  margin-top: var(--space-5);
}

@media (min-width: 768px) {

  .about-page_portrait-wrapper {
    width: 160px;
    height: 160px;
  }
}

/* ============================================================
  6. UTILITAIRES
  ------------------------------------------------------------
  Classes .u-* à responsabilité unique. Pas de composant complet ici.
============================================================ */

:where(.page-home) .u-text-default {
  color: var(--color-text-default);
}

:where(.page-home) .u-text-muted {
  color: var(--color-text-muted);
}

:where(.page-home) .u-text-primary {
  color: var(--color-primary-600);
}

:where(.page-home) .u-text-primary-strong {
  color: var(--color-primary-700);
}