/* ---------------------------------------------------------------------
   Feuille de style DASA — socle visuel Hugo (phase 1 du plan de migration)

   Reprend la palette, la typographie et les espacements de l'ancien
   theme.json WordPress. Le verrouillage `theme.json` n'existe plus
   (ADR 0005) : toute valeur visuelle passe par une variable ci-dessous,
   jamais en dur dans un layout. C'est desormais site-reviewer qui tient
   cette discipline.
   --------------------------------------------------------------------- */

:root {
  /* --- Couleurs --- */
  --dasa-base:       #F6F6F3;
  /* Le fond des sections paires. L'écart avec --dasa-base est de 1,13:1 :
     assez pour que la bande se voie, trop peu pour qu'elle attire l'œil. */
  --dasa-base-alt:   #E8E8E2;
  /* Surface des cartes et des encadrés, posée sur --dasa-base. Elle s'appelait
     --dasa-white, ce qui décrivait sa valeur et non son rôle : en thème sombre
     c'est la même surface, en plus clair que le fond, et un token nommé
     « blanc » qui vaut #1E1E28 se relit mal. */
  --dasa-surface:    #FFFFFF;
  /* Texte posé SUR --dasa-blue : bouton, lien d'évitement, onglet actif. Suit
     le bleu quand il s'inverse — en sombre, le bleu s'éclaircit, donc ce
     texte-là doit s'assombrir. */
  --dasa-on-blue:    #FFFFFF;
  /* Le papier est blanc dans les deux thèmes : le bloc @media print s'y
     réfère, une page imprimée ne suit pas la préférence d'affichage. */
  --dasa-paper:      #FFFFFF;
  /* Bleu d'interface. Le bleu du logo (#0000AD) reste inchangé dans l'image :
     saturé au maximum, il est stimulant en aplat, et il occupait ici tous les
     aplats — bouton principal, accents, liens. Cette variante
     désaturée porte la même identité sans la tension. Contraste 10,9:1 sur
     --dasa-base, largement au-dessus du seuil AA. */
  --dasa-blue:       #26307A;
  /* Variante assombrie de --dasa-blue pour l'état :hover/:focus des boutons
     et liens : pas une couleur nouvelle de la palette, un état dérivé
     nécessaire au contraste au survol. */
  --dasa-blue-hover: #1B2360;
  --dasa-blue-soft:  #DDE0EF;
  --dasa-ink:        #16162A;
  /* Le gris de texte le plus clair que la palette autorise : 6,7:1 sur
     --dasa-base. Il n'y en a pas de plus pâle — une variante à #82829A a
     existé ici, sous le seuil WCAG, et n'a jamais pu servir. */
  --dasa-muted:      #55556A;
  --dasa-line:       #DEDED8;
  /* Fond de l'en-tête collant, translucide. Dérivé de --dasa-base : écrit en
     dur, il s'en serait détaché à la première retouche de palette. */
  --dasa-surface-header: rgb(246 246 243 / .94);

  /* --- Polices --- */
  --dasa-font-display: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --dasa-font-body:    "Karla", system-ui, -apple-system, sans-serif;

  /* --- Échelle typographique fluide (dérivée des fontSizes de theme.json) --- */
  --dasa-text-x-small:  0.78rem;
  --dasa-text-small:    clamp(0.85rem, 0.82rem + 0.15vw, 0.9rem);
  --dasa-text-medium:   clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --dasa-text-large:    clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem);
  --dasa-text-x-large:  clamp(1.55rem, 1.2rem + 1.75vw, 2rem);
  --dasa-text-xx-large: clamp(2rem, 1.4rem + 3vw, 2.875rem);
  /* Titre de page courante. Un cran sous --dasa-text-xx-large, qui reste
     réservé à l'accroche de l'accueil : celle-ci est une phrase qu'on lit,
     un titre de page n'est qu'un repère. Les deux au même corps donnaient à
     « Textes » le poids visuel d'un slogan. */
  --dasa-text-titre:    clamp(1.7rem, 1.35rem + 1.6vw, 2.25rem);

  /* --- Hauteurs de ligne et interlettrage --- */
  --dasa-line-height-tight:  1.25;
  --dasa-line-height-snug:   1.55;
  --dasa-line-height-normal: 1.7;
  --dasa-letter-spacing-display: -0.015em;
  --dasa-letter-spacing-label:   0.16em;

  /* --- Espacements (dérivés des spacingSizes de theme.json) --- */
  /* Les trois crans sous 12px n'existaient pas dans theme.json : tout ce qui
     était plus serré que --dasa-space-20 s'écrivait donc en dur, une vingtaine
     de fois. Ils comblent ce bas d'échelle. Les valeurs purement graphiques
     — épaisseur d'un trait, diamètre d'une pastille, seuil tactile de 44px —
     restent en dur : ce ne sont pas des espacements. */
  --dasa-space-05: 0.25rem;
  --dasa-space-10: 0.5rem;
  --dasa-space-15: 0.375rem;
  --dasa-space-20: 0.75rem;
  --dasa-space-30: 1.25rem;
  --dasa-space-40: 2rem;
  --dasa-space-50: 3rem;
  --dasa-space-60: 4.75rem;
  --dasa-space-70: 6.5rem;

  /* --- Rayons de bordure ---
     Des angles vifs (2px) lisent comme un formulaire administratif. Un rayon
     franc mais doux adoucit l'ensemble sans le rendre enfantin. */
  --dasa-radius-small: 8px;
  --dasa-radius:       12px;

  /* --- Largeurs de mise en page --- */
  /* La colonne de texte reste à 640px : environ 68 caractères par ligne,
     dans la zone de confort de lecture. L'élargir ferait perdre le début
     de la ligne suivante — un effet qui s'aggrave avec la fatigue. */
  --dasa-content-size: 640px;
  --dasa-wide-size:    1120px;

  /* Indique au navigateur que les deux thèmes existent : sans ça, les
     contrôles natifs (boutons radio des onglets, champs de formulaire,
     barres de défilement) resteraient clairs sur fond sombre. */
  color-scheme: light dark;
}

/* -------------------------------------------------------------------------
   Thème sombre

   Ce site se lit la nuit, sur un téléphone, par des personnes fatiguées : un
   fond clair plein écran à deux heures du matin est une gêne réelle. On suit
   la préférence système, qui est déjà réglée sur l'appareil du visiteur —
   pas de bascule à afficher, donc pas de JavaScript, pas de préférence
   stockée, et rien de plus à comprendre pour qui arrive ici.

   Seuls les tokens changent : aucun gabarit n'est touché, et aucune règle
   plus bas dans cette feuille n'a de variante sombre. C'est ce que garantit
   le fait que rien n'y soit écrit en dur.

   Les teintes sont celles du thème clair, luminances inversées. Les ratios
   annoncés sont mesurés sur --dasa-base.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --dasa-base:       #15151C;
    /* Même écart de bande qu'en clair : la section alternée se voit sans
       attirer l'œil. */
    --dasa-base-alt:   #1D1D26;
    --dasa-surface:    #1E1E28;
    /* Le bleu s'éclaircit : #26307A sur fond sombre tomberait à 1,7:1. Même
       teinte, luminance inversée — 7,8:1 sur --dasa-base. */
    --dasa-blue:       #9AA6E8;
    /* Le survol va vers le clair, pas vers le foncé : sur fond sombre, c'est
       l'éclaircissement qui lit comme « actif ». */
    --dasa-blue-hover: #B7C0F0;
    /* Fond des encadrés d'annonce, assez foncé pour porter --dasa-ink. */
    --dasa-blue-soft:  #242C52;
    /* Pas de blanc pur : à ce contraste, un texte long papillote. */
    --dasa-ink:        #EDEDF2;
    --dasa-muted:      #A9A9BC;
    --dasa-line:       #33333F;
    /* Le bleu étant devenu clair, le texte posé dessus doit être sombre. */
    --dasa-on-blue:    #15151C;
    --dasa-surface-header: rgb(21 21 28 / .94);
  }

  /* Rien de plus : le logo n'a pas besoin d'être retouché. C'est un disque
     bleu, mais son anneau et son cœur sont blancs — vérifié au rendu, il se
     détache seul sur --dasa-base. Un cartouche derrière lui n'aurait ajouté
     qu'une présentation différente selon le thème. */
}

/* -------------------------------------------------------------------------
   Réinitialisation minimale
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* L'en-tête est collant : sans cette marge, une ancre amène le titre visé
   sous la barre, hors de vue. */
:target, h1, h2, h3 { scroll-margin-top: var(--dasa-space-60); }

body {
  margin: 0;
  background: var(--dasa-base);
  color: var(--dasa-ink);
  font-family: var(--dasa-font-body);
  font-size: var(--dasa-text-medium);
  line-height: var(--dasa-line-height-normal);
}

img, svg { max-width: 100%; display: block; }

/* -------------------------------------------------------------------------
   Typographie
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dasa-font-display);
  font-weight: 500;
  letter-spacing: var(--dasa-letter-spacing-display);
  line-height: var(--dasa-line-height-tight);
  margin: 0 0 var(--dasa-space-30);
}
h1 { font-size: var(--dasa-text-titre); }
h2 { font-size: var(--dasa-text-x-large); }
h3 { font-size: var(--dasa-text-large); letter-spacing: -0.02em; }

p { margin: 0 0 var(--dasa-space-30); }

a { color: var(--dasa-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

button,
.dasa-button {
  display: inline-block;
  background: var(--dasa-blue);
  color: var(--dasa-on-blue);
  font-family: var(--dasa-font-body);
  font-size: var(--dasa-text-small);
  font-weight: 600;
  border: none;
  border-radius: var(--dasa-radius-small);
  padding: var(--dasa-space-20) var(--dasa-space-40);
  cursor: pointer;
  text-decoration: none;
}
button:hover,
.dasa-button:hover {
  background: var(--dasa-blue-hover);
  text-decoration: none;
}

/* --- Accessibilité : focus visible sur tous les éléments interactifs --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--dasa-blue);
  outline-offset: 3px;
  border-radius: var(--dasa-radius-small);
}

/* --- Respect des préférences de mouvement réduit --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- Lien d'évitement (accessibilité clavier) --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dasa-blue);
  color: var(--dasa-on-blue);
  padding: var(--dasa-space-20) var(--dasa-space-30);
  z-index: 999;
}
.skip-link:focus {
  left: 0;
}

/* -------------------------------------------------------------------------
   Contenu Markdown (`.dasa-prose`)

   Portée volontairement explicite plutôt que `.dasa-content *` : la page
   d'accueil utilise aussi `.dasa-content`, et ses listes (citations, étapes,
   « ce que DASA n'est pas ») ont chacune leur mise en forme. Ne stylise que
   ce qui sort de `{{ .Content }}`.

   Les textes fondateurs sont de longues listes numérotées, souvent lues d'une
   traite. Ce qui compte ici n'est pas la décoration mais l'air entre les
   items : un mur de texte se relit mal, et se relit d'autant plus mal qu'on
   est fatigué.
   ------------------------------------------------------------------------- */
.dasa-prose > *:last-child { margin-bottom: 0; }

.dasa-prose h2 {
  font-size: var(--dasa-text-large);
  margin-top: var(--dasa-space-50);
}
.dasa-prose h3 {
  font-size: var(--dasa-text-medium);
  margin-top: var(--dasa-space-40);
}

.dasa-prose ul,
.dasa-prose ol {
  margin: 0 0 var(--dasa-space-30);
  padding-left: var(--dasa-space-30);
  display: flex;
  flex-direction: column;
  gap: var(--dasa-space-30);
}
.dasa-prose li { padding-left: var(--dasa-space-20); }
.dasa-prose li::marker { color: var(--dasa-blue); }
/* Les listes imbriquées sont des sous-points, pas des items de même rang :
   moins d'air entre elles, et un retrait plus court. */
.dasa-prose li > ul,
.dasa-prose li > ol {
  margin: var(--dasa-space-20) 0 0;
  gap: var(--dasa-space-20);
}

.dasa-prose blockquote {
  margin: var(--dasa-space-40) 0;
  padding-left: var(--dasa-space-30);
  border-left: 3px solid var(--dasa-blue-soft);
  color: var(--dasa-muted);
}

.dasa-prose hr {
  border: none;
  border-top: 1px solid var(--dasa-line);
  margin: var(--dasa-space-50) 0;
}

/* Les liens de contenu sont soulignés en permanence : dans un texte suivi, la
   couleur seule ne suffit pas à les distinguer (WCAG 1.4.1). */
.dasa-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Retour vers la section d'origine --- */
.dasa-retour {
  margin-top: var(--dasa-space-50);
  padding-top: var(--dasa-space-30);
  border-top: 1px solid var(--dasa-line);
  font-size: var(--dasa-text-small);
}

/* --- Sommaire de section --- */
.dasa-index {
  list-style: none;
  margin: var(--dasa-space-40) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dasa-space-20);
}
.dasa-index a {
  display: block;
  background: var(--dasa-surface);
  border: 1px solid var(--dasa-line);
  border-radius: var(--dasa-radius);
  /* Zone tactile confortable : la cible est le bloc entier, pas le seul texte. */
  padding: var(--dasa-space-30);
  color: var(--dasa-ink);
  font-family: var(--dasa-font-display);
  font-size: var(--dasa-text-large);
}
/* Les premieres lignes du recit, sous son titre. Corps plus petit et couleur
   attenuee : c'est le titre qui reste le repere, l'extrait n'est la que si le
   titre ne suffit pas a decider. */
.dasa-index__resume {
  display: block;
  margin-top: var(--dasa-space-20);
  font-family: var(--dasa-font-body);
  font-size: var(--dasa-text-small);
  line-height: var(--dasa-line-height-snug);
  color: var(--dasa-muted);
}
.dasa-index a:hover .dasa-index__resume,
.dasa-index a:focus-visible .dasa-index__resume { color: var(--dasa-muted); }
.dasa-index a:hover,
.dasa-index a:focus-visible {
  border-color: var(--dasa-blue);
  color: var(--dasa-blue);
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   Mise en page générale
   ------------------------------------------------------------------------- */
.dasa-wrap {
  max-width: var(--dasa-wide-size);
  margin: 0 auto;
  padding-left: var(--dasa-space-30);
  padding-right: var(--dasa-space-30);
}

.dasa-content {
  max-width: var(--dasa-content-size);
  margin: 0 auto;
  padding: var(--dasa-space-50) var(--dasa-space-30);
}

/* --- Variante large : pages avec une grille (réunions, événements) --- */
/* Le titre et le chapô suivent la largeur de la grille qui les suit, plutôt
   que d'être coupés à --dasa-content-size : deux largeurs différentes sur une
   même page donnaient un chapô en retrait qui semblait appartenir à autre
   chose que l'horaire.

   La contrepartie assumée est la longueur de ligne, qui passe d'environ 75 à
   130 caractères sur grand écran. Si le chapô s'allonge, c'est le premier
   endroit où revenir : une colonne trop large fatigue à la lecture, et le
   public de ce site lit parfois dans de mauvaises conditions. */
.dasa-content--wide {
  padding-top: var(--dasa-space-50);
  padding-bottom: var(--dasa-space-50);
}

/* -------------------------------------------------------------------------
   Réunions — horaire hebdomadaire (ADR 0007)
   ------------------------------------------------------------------------- */

/* Sur grand écran, les jours se répartissent en colonnes ; sur petit écran,
   la grille redevient une liste verticale. Aucune propriété `order` n'est
   utilisée : l'ordre visuel suit toujours l'ordre du document
   (lundi→dimanche), qui est aussi l'ordre de lecture au clavier et au
   lecteur d'écran. */
/* Onglets de jour et filtre de format. Les deux ne font que réorganiser le
   regard : rien n'est chargé, rien n'est envoyé, et sans `:has()` la page
   reste intégralement lisible.

   Les onglets sont des boutons radio. Le bouton lui-même est retiré de la vue
   mais reste dans la page — jamais `display: none`, qui le retirerait aussi du
   clavier et du lecteur d'écran. L'étiquette porte l'apparence, et l'anneau de
   focus est reporté sur elle, sans quoi la navigation au clavier deviendrait
   invisible. */
.dasa-horaire__onglets {
  border: 0;
  padding: 0;
  margin: var(--dasa-space-30) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dasa-space-20);
  align-items: center;
}
.dasa-horaire__onglets legend {
  font-size: var(--dasa-text-x-small);
  letter-spacing: var(--dasa-letter-spacing-label);
  text-transform: uppercase;
  color: var(--dasa-muted);
  padding: 0;
  margin-bottom: var(--dasa-space-20);
}
.dasa-horaire__onglets p { margin: 0; }
.dasa-horaire__onglets input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dasa-horaire__onglets label {
  display: flex;
  align-items: center;
  gap: var(--dasa-space-20);
  border: 1px solid var(--dasa-line);
  border-radius: var(--dasa-radius-small);
  background: var(--dasa-surface);
  padding: var(--dasa-space-20) var(--dasa-space-30);
  /* Cible tactile : au moins 44px de haut, avec 8px d'écart entre onglets. */
  min-height: 44px;
  font-size: var(--dasa-text-small);
  cursor: pointer;
}
.dasa-horaire__onglets label:hover { background: var(--dasa-blue-soft); }
.dasa-horaire__onglets input:focus-visible + label {
  outline: 2px solid var(--dasa-blue);
  outline-offset: 2px;
}
/* L'onglet ouvert ne se signale pas que par la couleur : le trait sous
   l'étiquette le dit aussi, et le lecteur d'écran l'annonce comme coché. */
.dasa-horaire__onglets input:checked + label {
  background: var(--dasa-blue);
  border-color: var(--dasa-blue);
  color: var(--dasa-on-blue);
  box-shadow: inset 0 -3px 0 var(--dasa-ink);
}
.dasa-horaire__onglets input:checked + label .dasa-horaire__aujourdhui { color: var(--dasa-on-blue); }

/* Masquage des jours non sélectionnés. « Tous les jours » ne masque rien, donc
   il n'a pas de règle. */
.dasa-horaire:has(#onglet-lundi:checked)    .dasa-reunions__jour:not(.jour-lundi),
.dasa-horaire:has(#onglet-mardi:checked)    .dasa-reunions__jour:not(.jour-mardi),
.dasa-horaire:has(#onglet-mercredi:checked) .dasa-reunions__jour:not(.jour-mercredi),
.dasa-horaire:has(#onglet-jeudi:checked)    .dasa-reunions__jour:not(.jour-jeudi),
.dasa-horaire:has(#onglet-vendredi:checked) .dasa-reunions__jour:not(.jour-vendredi),
.dasa-horaire:has(#onglet-samedi:checked)   .dasa-reunions__jour:not(.jour-samedi),
.dasa-horaire:has(#onglet-dimanche:checked) .dasa-reunions__jour:not(.jour-dimanche) {
  display: none;
}
/* Un seul jour affiché : il occupe toute la largeur plutôt que de laisser
   deux colonnes vides à côté de lui, et ce sont alors ses réunions qui se
   répartissent sur deux colonnes. `align-items: start` évite que deux cartes
   voisines s'étirent à la hauteur de la plus longue : une réunion avec une
   annonce et une adresse ne doit pas gonfler celle d'à côté. */
.dasa-horaire:not(:has(#onglet-tous:checked)) .dasa-reunions {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .dasa-horaire:not(:has(#onglet-tous:checked)) .dasa-reunions__liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

/* Message des combinaisons vides : caché par défaut, montré seulement quand le
   filtre de format concerné est actif. */
.dasa-horaire__vide {
  display: none;
  color: var(--dasa-muted);
  font-size: var(--dasa-text-small);
  margin: 0;
}
.dasa-horaire:has(#filtre-en-ligne:checked) .dasa-horaire__vide--en-ligne,
.dasa-horaire:has(#filtre-presentiel:checked) .dasa-horaire__vide--presentiel {
  display: block;
}

/* Marqueur « aujourd'hui » : la couleur seule ne dit rien à qui ne la voit
   pas, le mot est donc écrit. */
.dasa-horaire__aujourdhui {
  font-family: var(--dasa-font-body);
  font-size: var(--dasa-text-x-small);
  letter-spacing: var(--dasa-letter-spacing-label);
  text-transform: uppercase;
}
.dasa-reunions__jour--aujourdhui h2 { border-bottom-color: var(--dasa-blue); }
.dasa-reunions__jour--aujourdhui .dasa-horaire__aujourdhui { color: var(--dasa-blue); }

.dasa-horaire__filtre {
  border: 1px solid var(--dasa-line);
  border-radius: var(--dasa-radius);
  background: var(--dasa-surface);
  padding: var(--dasa-space-20) var(--dasa-space-30);
  margin: var(--dasa-space-30) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dasa-space-20) var(--dasa-space-30);
  align-items: center;
}
.dasa-horaire__filtre legend {
  font-size: var(--dasa-text-x-small);
  letter-spacing: var(--dasa-letter-spacing-label);
  text-transform: uppercase;
  color: var(--dasa-muted);
}
.dasa-horaire__filtre p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--dasa-space-20);
  font-size: var(--dasa-text-small);
}
.dasa-horaire__filtre input { accent-color: var(--dasa-blue); }
/* La cible cliquable, c'est l'étiquette : plus large que le bouton radio. */
.dasa-horaire__filtre label { padding: var(--dasa-space-20) 0; cursor: pointer; }

/* Le filtre lui-même. */
.dasa-horaire:has(#filtre-en-ligne:checked) .reunion--presentiel,
.dasa-horaire:has(#filtre-presentiel:checked) .reunion--en-ligne {
  display: none;
}
/* Sur « Tous les jours », un jour dont toutes les réunions sont masquées
   disparaît aussi, sinon il resterait un titre suivi de rien. Quand un seul
   jour est ouvert, au contraire, on le garde : c'est son message « aucune
   réunion en ligne ce jour-là » qui répond, plutôt qu'un panneau vide. */
.dasa-horaire:has(#onglet-tous:checked):has(#filtre-en-ligne:checked) .dasa-reunions__jour:not(:has(.reunion--en-ligne)),
.dasa-horaire:has(#onglet-tous:checked):has(#filtre-presentiel:checked) .dasa-reunions__jour:not(:has(.reunion--presentiel)) {
  display: none;
}

.dasa-reunions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dasa-space-40);
  margin-top: var(--dasa-space-40);
}
@media (min-width: 640px) {
  .dasa-reunions { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .dasa-reunions { grid-template-columns: repeat(3, 1fr); }
}

.dasa-reunions__jour h2 {
  font-size: var(--dasa-text-large);
  border-bottom: 1px solid var(--dasa-line);
  padding-bottom: var(--dasa-space-20);
  margin-bottom: var(--dasa-space-30);
}

.dasa-reunions__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dasa-space-30);
}

.reunion {
  background: var(--dasa-surface);
  border: 1px solid var(--dasa-line);
  border-radius: var(--dasa-radius);
  padding: var(--dasa-space-30);
}

.reunion__heure {
  font-family: var(--dasa-font-display);
  font-weight: 700;
  font-size: var(--dasa-text-large);
  color: var(--dasa-blue);
  margin: 0 0 var(--dasa-space-15);
}

.reunion__format,
.reunion__lieu {
  display: flex;
  align-items: center;
  gap: var(--dasa-space-10);
  font-size: var(--dasa-text-small);
  color: var(--dasa-muted);
  margin: 0 0 var(--dasa-space-15);
}

.reunion__lieu { color: var(--dasa-ink); }

/* Adresse : `align-items: baseline` et non `center` comme les lignes
   au-dessus — une adresse peut passer à la ligne, et le lien doit s'aligner
   sur la première ligne de texte, pas sur le milieu du bloc. */
.reunion__adresse {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--dasa-space-05) var(--dasa-space-10);
  font-size: var(--dasa-text-small);
  color: var(--dasa-ink);
  margin: 0 0 var(--dasa-space-15);
}

.reunion__plan { white-space: nowrap; }

/* `overflow-wrap` : une adresse e-mail longue n'a pas d'espace où se couper
   et déborderait de sa carte sur un écran étroit. */
.reunion__email,
.reunion__telephone {
  font-size: var(--dasa-text-small);
  overflow-wrap: anywhere;
  margin: 0 0 var(--dasa-space-15);
}

/* Le numéro ne doit jamais se couper entre deux groupes de chiffres :
   à moitié lu, il est recopié faux. */
.reunion__telephone a { white-space: nowrap; }

/* Annonce temporaire. Le liseré et le fond la détachent, mais l'information
   ne repose jamais sur eux seuls : le mot « À noter » la porte en toutes
   lettres, lisible sans couleur et à voix haute par un lecteur d'écran. */
.reunion__annonce {
  background: var(--dasa-blue-soft);
  border-left: 3px solid var(--dasa-blue);
  border-radius: 0 var(--dasa-radius-small) var(--dasa-radius-small) 0;
  padding: var(--dasa-space-10) var(--dasa-space-20);
  margin: 0 0 var(--dasa-space-20);
  font-size: var(--dasa-text-small);
  color: var(--dasa-ink);
}

.reunion__annonce-titre {
  display: block;
  text-transform: uppercase;
  letter-spacing: var(--dasa-letter-spacing-label);
  font-size: 0.75em;
  color: var(--dasa-blue);
  margin-bottom: 2px;
}

/* markdownify enveloppe le texte dans un <p> : il ne doit pas rajouter
   ses marges par-dessus le padding de l'encadré. */
.reunion__annonce p { margin: 0; }

/* Pastille purement décorative : le format est toujours écrit en toutes
   lettres à côté, la couleur ne porte jamais seule l'information (ADR 0007). */
.reunion__pastille {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.reunion__pastille--en-ligne   { background: var(--dasa-blue); }
.reunion__pastille--presentiel { background: var(--dasa-ink); }

.reunion__infos {
  margin-top: var(--dasa-space-20);
  padding-top: var(--dasa-space-20);
  border-top: 1px solid var(--dasa-line);
  font-size: var(--dasa-text-small);
}
.reunion__infos p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Événements
   ------------------------------------------------------------------------- */
.dasa-evenements {
  list-style: none;
  margin: var(--dasa-space-40) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dasa-space-40);
  max-width: var(--dasa-content-size);
}

.evenement {
  border-bottom: 1px solid var(--dasa-line);
  padding-bottom: var(--dasa-space-40);
}
.evenement:last-child { border-bottom: none; }

.evenement__date {
  font-size: var(--dasa-text-x-small);
  letter-spacing: var(--dasa-letter-spacing-label);
  text-transform: uppercase;
  color: var(--dasa-muted);
  margin: 0 0 var(--dasa-space-15);
}

/* Affiche d'événement insérée dans le corps Markdown. */
.dasa-content img {
  max-width: 480px;
  height: auto;
  border-radius: var(--dasa-radius-small);
}

.evenement__titre {
  margin: 0;
}

/* -------------------------------------------------------------------------
   Page d'accueil (phase 3 du plan de migration)
   ------------------------------------------------------------------------- */
/* Le retrait vertical vient d'ici seul : `.dasa-content`, porté par le même
   bloc, ajoutait ses 3rem par-dessus les 4,75rem de la section. Le cumul
   faisait environ 124px de vide avant le logo, autant sous le bouton — et sur
   un écran de téléphone, « Trouver une réunion », qui est l'action principale
   du site, se retrouvait au bord du pli. */
.dasa-hero { padding: var(--dasa-space-60) 0; text-align: center; }
.dasa-hero .dasa-content { padding-block: 0; }
@media (max-width: 720px) {
  .dasa-hero { padding: var(--dasa-space-40) 0; }
}
.dasa-hero__logo { width: 84px; margin: 0 auto var(--dasa-space-30); }
/* L'accroche garde le corps le plus fort de l'échelle : c'est une phrase
   adressée au visiteur, pas un intitulé de page. */
.dasa-hero__titre {
  font-size: var(--dasa-text-xx-large);
  margin-bottom: var(--dasa-space-30);
}
.dasa-hero__accent { color: var(--dasa-blue); }
.dasa-hero__texte { color: var(--dasa-muted); }
.dasa-hero__cta { margin: var(--dasa-space-40) 0 var(--dasa-space-30); }
.dasa-hero__mention {
  color: var(--dasa-muted);
  font-size: var(--dasa-text-x-small);
  margin-bottom: 0;
}

/* La bande de fond ne délimite la section que si elle respire : avec
   --dasa-space-20 le fond collait au texte et l'alternance ne se lisait pas. */
.dasa-section { padding: var(--dasa-space-50) 0; }
.dasa-section--alt { background: var(--dasa-base-alt); }
.dasa-section h2 { text-align: center; }
/* Le corps de texte reste aligné à gauche : centré, chaque ligne repart d'un
   point différent, ce qui coûte un effort de relecture à chaque retour à la
   ligne — un effort que la fatigue ou la détresse rendent coûteux. Seuls les
   titres et les libellés, courts, restent centrés. */
.dasa-section__intro,
.dasa-section__conclusion {
  max-width: var(--dasa-content-size);
  margin-left: auto;
  margin-right: auto;
  color: var(--dasa-muted);
}
.dasa-section__voirplus { text-align: center; color: var(--dasa-muted); }
.dasa-section__voirplus { margin-top: var(--dasa-space-40); }

.dasa-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--dasa-letter-spacing-label);
  font-size: var(--dasa-text-x-small);
  color: var(--dasa-blue);
  margin: 0 0 var(--dasa-space-20);
}

/* --- Citations « est-ce que c'est pour moi » --- */
.dasa-citations {
  list-style: none;
  margin: var(--dasa-space-40) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dasa-space-30);
}
.dasa-citations blockquote {
  margin: 0;
  padding-left: var(--dasa-space-30);
  border-left: 3px solid var(--dasa-blue-soft);
  font-style: italic;
  color: var(--dasa-ink);
}

/* --- Étapes « une première réunion » --- */
.dasa-etapes {
  list-style: none;
  margin: var(--dasa-space-40) auto 0;
  padding: 0;
  max-width: var(--dasa-wide-size);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dasa-space-40);
}
@media (min-width: 720px) {
  .dasa-etapes { grid-template-columns: repeat(3, 1fr); }
}
.dasa-etapes__numero {
  font-family: var(--dasa-font-display);
  font-weight: 700;
  font-size: var(--dasa-text-x-small);
  color: var(--dasa-blue);
  margin-bottom: var(--dasa-space-15);
}

/* --- Liste double « ce que DASA n'est pas » --- */
.dasa-liste-double {
  list-style: none;
  margin: var(--dasa-space-40) auto 0;
  padding: 0;
  max-width: var(--dasa-wide-size);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dasa-space-30);
  font-size: var(--dasa-text-small);
  color: var(--dasa-muted);
}
@media (min-width: 720px) {
  .dasa-liste-double {
    grid-template-columns: repeat(2, 1fr);
    /* Le double d'écart entre les colonnes qu'entre les lignes : sans ça, les
       six items se lisent comme un seul bloc de texte et l'œil ne sait plus
       s'il doit continuer à droite ou descendre. */
    gap: var(--dasa-space-40) var(--dasa-space-50);
  }
}
/* Chaque item est une objection distincte : un filet le sépare du suivant,
   plutôt que de laisser six paragraphes se toucher. */
.dasa-liste-double li {
  border-top: 1px solid var(--dasa-line);
  padding-top: var(--dasa-space-30);
}
.dasa-liste-double strong {
  color: var(--dasa-ink);
  /* Sur sa propre ligne : l'objection se lit d'un coup d'œil, l'explication
     ne se lit que si elle intéresse. */
  display: block;
  margin-bottom: var(--dasa-space-15);
}

/* --- Aperçu des réunions du jour sur l'accueil --- */
/* La légende porte le jour, les cartes ne portent donc que l'heure. Répéter
   « Dimanche » sur chacune des quatre cartes n'apprend rien et allonge la
   lecture. */
.dasa-reunions-apercu__legende {
  max-width: var(--dasa-wide-size);
  margin: var(--dasa-space-40) auto 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--dasa-letter-spacing-label);
  font-size: var(--dasa-text-x-small);
  color: var(--dasa-muted);
}
.dasa-reunions-apercu__legende + .dasa-reunions-apercu { margin-top: var(--dasa-space-30); }

.dasa-reunions-apercu {
  list-style: none;
  margin: var(--dasa-space-40) auto 0;
  padding: 0;
  max-width: var(--dasa-wide-size);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dasa-space-30);
}
@media (min-width: 640px) {
  .dasa-reunions-apercu { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .dasa-reunions-apercu { grid-template-columns: repeat(4, 1fr); }
}

/* --- Encart de contact --- */
.dasa-encart-contact {
  background: var(--dasa-surface);
  border: 1px solid var(--dasa-line);
  border-radius: var(--dasa-radius);
  padding: var(--dasa-space-50) var(--dasa-space-40);
  text-align: center;
}
.dasa-encart-contact p { color: var(--dasa-muted); font-size: var(--dasa-text-small); }
/* Sans ça, la marge du dernier paragraphe s'ajoute au `padding` et l'encart
   paraît lesté vers le bas. */
.dasa-encart-contact > *:last-child { margin-bottom: 0; }
.dasa-encart-contact__email { font-size: var(--dasa-text-large); }
.dasa-encart-contact__delai { color: var(--dasa-muted); font-size: var(--dasa-text-x-small); }

.dasa-link-blue { color: var(--dasa-blue); font-weight: 600; }

/* -------------------------------------------------------------------------
   Formulaire de contact
   ------------------------------------------------------------------------- */
.dasa-formulaire { max-width: var(--dasa-content-size); margin-top: var(--dasa-space-40); }
.dasa-formulaire__champ { display: flex; flex-direction: column; gap: var(--dasa-space-15); }
.dasa-formulaire__champ label { font-size: var(--dasa-text-small); color: var(--dasa-muted); }
.dasa-formulaire__champ input,
.dasa-formulaire__champ select,
.dasa-formulaire__champ textarea {
  font: inherit;
  color: var(--dasa-ink);
  background: var(--dasa-surface);
  border: 1px solid var(--dasa-line);
  border-radius: var(--dasa-radius-small);
  padding: var(--dasa-space-10) var(--dasa-space-20);
}
/* --- Piège à robots : hors champ visuel, jamais display:none --- */
.dasa-formulaire__leurre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dasa-formulaire__secours {
  margin-top: var(--dasa-space-40);
  color: var(--dasa-muted);
  font-size: var(--dasa-text-small);
}

/* -------------------------------------------------------------------------
   En-tête
   ------------------------------------------------------------------------- */
.dasa-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--dasa-surface-header);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dasa-line);
}

/* Identité et navigation sur une seule ligne. `flex-wrap` reste actif : sous
   une certaine largeur, la navigation repasse sous l'identité plutôt que de
   déborder ou de se comprimer. */
.dasa-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dasa-space-30);
  flex-wrap: wrap;
  /* Le retrait horizontal vient de .dasa-wrap, porté par le même élément. */
  padding-top: var(--dasa-space-20);
  padding-bottom: var(--dasa-space-20);
}

.dasa-header__identity {
  display: flex;
  align-items: center;
  gap: var(--dasa-space-20);
  /* Ne se comprime pas : c'est la navigation qui cède la place en premier. */
  flex: none;
}

/* 40px au lieu de 56 : sur une ligne unique, c'est le logo qui fixe la
   hauteur de l'en-tête, et cet en-tête est collant. */
.dasa-header__logo { width: 40px; height: 40px; }

.dasa-header__title {
  font-family: var(--dasa-font-display);
  font-size: var(--dasa-text-medium);
  font-weight: 700;
  color: var(--dasa-blue);
}

.dasa-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dasa-nav a {
  display: inline-block;
  padding: var(--dasa-space-10) 2px;
  color: var(--dasa-muted);
  font-size: var(--dasa-text-small);
}

/* Sous cette largeur, les six entrées ne tiennent pas sur une ligne : la
   navigation passe sous l'identité et occupe deux rangs. L'en-tête étant
   collant, chaque pixel y est pris à la lecture en permanence — d'où
   l'espacement resserré, qui reste au-dessus du seuil tactile grâce au
   `padding` conservé sur les liens. */
@media (max-width: 720px) {
  /* L'en-tête cesse d'être collant : sur deux rangs, il occupait en permanence
     une part notable d'un écran de téléphone. Il reste en haut du document, on
     le retrouve par un retour en haut de page. La place ainsi rendue permet
     aussi de redonner aux liens une cible tactile correcte. */
  .dasa-header { position: static; }
  :target, h1, h2, h3 { scroll-margin-top: var(--dasa-space-40); }

  /* `flex: none` protège la ligne d'identité de la compression sur grand
     écran. Sous 390px, il forçait l'en-tête plus large que la fenêtre : le
     titre débordait à droite, coupé, et toute la page gagnait un défilement
     horizontal (WCAG 1.4.10). Ici le titre se replie sur deux lignes plutôt
     que de sortir de l'écran. */
  .dasa-header__identity { flex: 1 1 auto; min-width: 0; }
  .dasa-header__title { line-height: var(--dasa-line-height-tight); }

  .dasa-header__row {
    justify-content: center;
    gap: var(--dasa-space-20);
    padding-top: var(--dasa-space-10);
    padding-bottom: var(--dasa-space-10);
  }
  .dasa-nav { gap: 2px 14px; }
  /* Au moins 24px de haut (WCAG 2.5.8) : 6px de padding donnaient une cible
     que le pouce manque une fois sur deux. */
  .dasa-nav a { padding: 10px 6px; }
}
.dasa-nav a:hover,
.dasa-nav a:focus-visible {
  color: var(--dasa-blue);
}

/* La page courante ne se signale pas qu'au lecteur d'écran : `aria-current`
   était posé dans le gabarit sans qu'aucun style ne lui réponde. Trait et
   couleur, deux canaux plutôt qu'un (WCAG 1.4.1). */
.dasa-nav a[aria-current="page"] {
  color: var(--dasa-ink);
  box-shadow: inset 0 -2px 0 var(--dasa-blue);
}

/* -------------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------------- */
.dasa-footer {
  border-top: 1px solid var(--dasa-line);
  padding: var(--dasa-space-50) 0 var(--dasa-space-40);
  color: var(--dasa-muted);
}

.dasa-bands {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: var(--dasa-space-40);
}
.dasa-bands i {
  width: 44px;
  height: 3px;
  background: var(--dasa-blue);
  border-radius: 2px;
  opacity: .22;
}
.dasa-bands i:nth-child(2) { opacity: .45; }
.dasa-bands i:nth-child(3) { opacity: .7; }
.dasa-bands i:nth-child(4) { opacity: 1; }

.dasa-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dasa-space-40);
  margin-bottom: var(--dasa-space-40);
}

.dasa-footer__identity {
  flex: 1 1 260px;
  display: flex;
  align-items: flex-start;
  gap: var(--dasa-space-10);
}
.dasa-footer__logo { width: 28px; height: 28px; }

.dasa-footer__baseline {
  color: var(--dasa-muted);
  font-size: var(--dasa-text-small);
  margin: 0;
}

.dasa-footer__legal {
  border-top: 1px solid var(--dasa-line);
  padding-top: var(--dasa-space-30);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dasa-space-20);
  color: var(--dasa-muted);
  font-size: var(--dasa-text-x-small);
}
/* Soulignés en permanence : de la couleur du texte qui les entoure, et
   soulignés au seul survol, ces deux liens ne se distinguaient pas du reste
   de la ligne (WCAG 1.4.1). */
.dasa-footer__legal a {
  color: var(--dasa-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Impression

   L'horaire des réunions est fait pour être emporté : c'est ce qu'on garde
   quand on ne veut pas ouvrir ce site sur son téléphone. Deux choses comptent
   ici — que tout l'horaire sorte, quel que soit l'onglet ouvert à l'écran, et
   que les adresses des liens du contenu ne se perdent pas au passage.
   ------------------------------------------------------------------------- */
@media print {
  .dasa-header,
  .dasa-footer,
  .skip-link,
  .dasa-horaire__onglets,
  .dasa-horaire__filtre,
  .dasa-horaire__vide,
  .dasa-retour {
    display: none;
  }

  /* Les onglets et le filtre masquent des jours et des formats à l'écran.
     Sur papier, ces règles n'ont plus de sens : il n'y a pas de « revenir en
     arrière » sur une feuille imprimée. On rend tout visible. */
  .dasa-horaire .dasa-reunions__jour,
  .dasa-horaire .reunion {
    display: block !important;
  }

  body {
    background: var(--dasa-paper);
    font-size: 11pt;
  }

  .dasa-reunions,
  .dasa-horaire:not(:has(#onglet-tous:checked)) .dasa-reunions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--dasa-space-30);
  }

  /* Une carte de réunion coupée en deux par un saut de page est illisible. */
  .reunion,
  .dasa-reunions__jour,
  .evenement {
    break-inside: avoid;
    background: var(--dasa-paper);
  }

  .dasa-section,
  .dasa-section--alt,
  .dasa-encart-contact {
    background: var(--dasa-paper);
    padding-top: var(--dasa-space-30);
    padding-bottom: var(--dasa-space-30);
  }

  /* Un lien imprimé est un texte souligné qui ne mène nulle part : l'adresse
     doit suivre. Uniquement pour les liens externes du contenu — faire suivre
     chaque lien interne allongerait la page sans rien apprendre. */
  .dasa-prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}