/*
 * Écarts volontaires par rapport à la maquette.
 *
 * L'apparence est décidée par maquette.css, porté depuis la maquette validée
 * et chargé juste avant. Cette feuille ne contient QUE ce qui doit s'en
 * écarter, et chaque écart est justifié — sans quoi on recrée deux sources de
 * vérité qui divergent.
 *
 * Trois motifs admis : accessibilité, contenu dynamique, erreur manifeste.
 * Un style qui n'entre dans aucun des trois n'a rien à faire ici : il se
 * corrige dans la maquette, ou se signale au client.
 */

/* ------------------------------------------------------------------ */
/* Accessibilité — focus visible                                       */
/* ------------------------------------------------------------------ */

/*
 * La maquette pose `outline: none` sur les champs et le remplace par une ombre
 * à 1,2:1 — invisible. Un anneau natif à 6,57:1 le rétablit (RGAA 10.7).
 */

/* Sur fond sombre, l'anneau doit rester visible. */

/* ------------------------------------------------------------------ */
/* Accessibilité — contraste                                           */
/* ------------------------------------------------------------------ */

/*
 * La maquette écrit le terracotta de marque sur son propre fond teinté :
 * 4,12:1, sous le seuil de 4,5:1 pour du petit texte. On garde le dessin en
 * assombrissant le texte d'un cran (6,35:1). Concerne l'étiquette de date d'un
 * événement, le sur-titre de la bande écosystème et l'accroche du bloc « lieu ».
 */
/*
 * La spécificité suit celle du CSS porté. `.c-event.c-event .c-event__tag
 * .c-event__tag` vaut 0-4-0 : à 0-2-0, ce correctif était écrit, lisible dans
 * la feuille, et battu — la pastille restait à 4,12:1 sur les trois pages de
 * liste, là où elle est répétée des centaines de fois.
 */

/*
 * Bordure de bouton secondaire à 1,57:1 dans la maquette : sous le seuil de
 * 3:1 exigé pour un élément d'interface (WCAG 1.4.11).
 */

/* ------------------------------------------------------------------ */
/* Accessibilité — cible tactile                                       */
/* ------------------------------------------------------------------ */

/*
 * WCAG 2.2, critère 2.5.8 — cible tactile.
 *
 * Le seuil AA est de 24 × 24 px, pas 44 : ce dernier relève du niveau AAA.
 * Imposer 44 px à des liens de navigation en liste doublait la hauteur du
 * pied de page et s'écartait de la maquette sans nécessité. On vise donc 24 px
 * de zone cliquable, obtenus par le remplissage vertical, en gardant
 * l'espacement entre cibles voisines que le critère exige aussi.
 */

/* Les vraies commandes — boutons, réseaux — gardent 44 px. */

/*
 * Coordonnées joignables du bloc de contact.
 *
 * L'adresse postale reste du texte, l'e-mail et le téléphone sont des liens —
 * mais rien ne les distinguait : même couleur, aucun soulignement, et 38 px de
 * haut. Un lien qui ne dit pas qu'il en est un ne sert personne, et sur un
 * téléphone c'est justement le geste attendu.
 *
 * La spécificité suit celle du CSS porté (`.c-contact__facts.c-contact__facts
 * .c-contact__fact.c-contact__fact`, 0-4-0).
 */


/*
 * Liens à l'intérieur d'un texte rédactionnel.
 *
 * La maquette pose `a{color:inherit;text-decoration:none}` — elle n'a que des
 * liens de navigation, tous identifiables par leur place. Les pages légales,
 * elles, ont des liens **dans des phrases** : l'adresse de la déléguée à la
 * protection des données, le formulaire du Défenseur des droits, la politique
 * de confidentialité. Onze au total, dans les trois pages où l'on vient
 * précisément chercher un recours — et aucun ne se distinguait du texte : ni
 * couleur, ni soulignement.
 *
 * WCAG 1.4.1 : la couleur ne peut pas être le seul indice. On souligne donc, et
 * on colore ; le survol et le focus renforcent les deux.
 */


/*
 * Pastille de date de la fiche.
 *
 * La maquette ne dessine pas de fiche : elle n'a que la carte, dont la pastille
 * est portée par `.c-event .c-event__tag`. Réemployer cette classe hors de son
 * bloc revenait à ne rien styler du tout — la date s'affichait en texte nu,
 * sans fond ni arrondi, au-dessus du titre de l'événement.
 *
 * Reprise du dessin de la carte, à l'identique (maquette.css:227).
 */

/* ------------------------------------------------------------------ */
/* Accessibilité — mouvement                                           */
/* ------------------------------------------------------------------ */

/*
 * RGAA 13.8 : un défilement automatique de plus de cinq secondes doit pouvoir
 * être arrêté. La maquette n'offre aucune commande — on ajoute la pause au
 * survol, au focus clavier, et un bouton qui fige durablement.
 */

/* ------------------------------------------------------------------ */
/* Contenu dynamique                                                   */
/* ------------------------------------------------------------------ */

/*
 * La maquette place ses logos en <img> figées. Sur le site, ils viennent de la
 * médiathèque et Bricks ne transmet pas de dimension à la balise : on la fixe
 * ici, sinon le logo s'affiche à sa taille naturelle.
 */

/*
 * Les cartes d'événement viennent d'une boucle de requête : la maquette en
 * fige trois, le site en affiche autant qu'il en existe. Le lien se cale en
 * bas quelle que soit la hauteur du texte.
 */

/*
 * Une grille de quatre cartes se répartit en deux fois deux.
 *
 * La maquette n'en dessine que par trois, et la grille est donc à trois
 * colonnes. Le contenu réel, lui, ne se compte pas par trois : les quatre
 * établissements d'enseignement supérieur laissaient une carte seule sur la
 * seconde rangée, ce qui se lit comme un oubli plutôt que comme une liste.
 * Deux fois deux se lit comme une composition.
 *
 * Le sélecteur ne vise que ce cas : `:last-child:nth-child(4)` n'est vrai que
 * si la grille compte exactement quatre enfants. Cinq cartes font 3 + 2, qui
 * tient debout ; six en font deux rangées pleines.
 *
 * Au-dessus de 1000 px seulement : la maquette retombe à deux colonnes sous ce
 * seuil, puis à une seule sous 660 px. Sans la media query, cette règle battait
 * les deux — quatre cartes restaient côte à côte par deux sur un téléphone, à
 * 160 px de large.
 */

/*
 * Pastille de catégorie dans l'univers vert.
 *
 * La maquette ne teinte les pastilles en vert que dans la section
 * « accompagnement », par un sélecteur d'ancêtre : `.c-accompagnement .l-grid
 * .c-media-card__kicker`. Les pages internes reprennent cet univers sans
 * reprendre ce conteneur — d'où le modificateur, qui porte la couleur sans
 * dépendre de l'endroit où la carte se trouve.
 *
 * Spécificité alignée sur celle du CSS porté (0-4-0), sinon la règle est
 * écrite, lisible, et sans effet.
 */

/*
 * Titre et ligne de contexte bornés en hauteur.
 *
 * La maquette montre trois titres courts sur une ligne. Le fonds réel en
 * compte de très longs — « Niort TECH Live #18 : “Ne restez pas seul avec vos
 * conflits…” » — et une carte de trois cent trente-quatre voisines ne peut pas
 * grandir au gré de son titre : la grille deviendrait un escalier. On borne
 * donc l'affichage ; le texte complet reste dans le document, donc lisible par
 * un lecteur d'écran, et entier sur la fiche de l'événement.
 */

/*
 * Toute la carte est cliquable, et un seul lien la porte.
 *
 * La maquette met le lien sur « En savoir plus », en bas de carte. Répété
 * trois cent trente-quatre fois, ce libellé ne dit plus rien à un lecteur
 * d'écran — et cliquer une carte de 300 px de haut ne devrait pas demander de
 * viser une ligne de 15. Le titre porte donc le lien, et son pseudo-élément
 * couvre la carte. Le rendu, lui, ne change pas d'un pixel.
 */

/* Le survol appartient à la carte : l'anneau de focus aussi. */

/*
 * Alternance de couleur de la maquette — une carte sur trois en vert.
 *
 * Le modificateur la réserve à la page d'accueil, où le nombre de cartes est
 * fixe. Sur la liste filtrable, `nth-child` compte la position dans le
 * document, pas parmi les cartes visibles : la couleur sauterait à chaque
 * filtrage sans qu'aucune règle ne l'explique.
 */

/*
 * La maquette annule la marge basse du sur-titre par un style en ligne
 * (`style="margin-bottom:0"`), que le portage ne peut pas reprendre : il ne
 * lit que les feuilles. On le rétablit ici.
 */

/* Page des événements : l'en-tête est un titre de page, pas de section. */

/* ------------------------------------------------------------------ */
/* Fiche d'un événement                                                */
/* ------------------------------------------------------------------ */

/*
 * La maquette ne dessine pas de page d'événement : elle reprend les composants
 * de la carte — pastille de date, ligne de contexte — à l'échelle d'une page.
 */

/* ------------------------------------------------------------------ */
/* Erreur manifeste                                                    */
/* ------------------------------------------------------------------ */

/*
 * La liste à puces de Bricks rend `<li><div class="content">` avec un
 * séparateur en trait et `justify-content: space-between`, ce qui écarte la
 * puce du texte. La maquette, elle, montre une liste simple.
 */
.brxe-list {
  list-style: none;
  padding-inline-start: 0;
}

.brxe-list > li > .content {
  justify-content: flex-start;
  gap: var(--space-2xs);
}

.brxe-list .separator {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Navigation mobile                                                   */
/* ------------------------------------------------------------------ */

/*
 * La maquette vise `.burger span` et `#mobnav nav a`. Le balisage du site
 * nomme ses éléments — `c-burger__trait`, `c-mobile-nav__liens` — parce qu'un
 * `span` nu n'est repérable ni dans le panneau de structure de Bricks, ni dans
 * une recherche. On raccorde ici les deux, sans toucher aux valeurs.
 */

/* Sur fond sombre, l'anneau de focus doit rester visible. */

/* La croix de fermeture est une cible tactile, pas seulement un caractère. */

/*
 * Le filtre des événements héritait du `outline: none` de la maquette, remplacé
 * par une ombre à 1,2:1 — invisible. Même correctif que pour les formulaires
 * (RGAA 10.7).
 */

/* ------------------------------------------------------------------ */
/* Pages de texte — légales, éditoriales                               */
/* ------------------------------------------------------------------ */

/*
 * La maquette ne dessine pas de page de texte. Une seule règle compte ici :
 * la longueur de ligne. Au-delà d'environ 75 caractères, l'œil perd la ligne
 * suivante — et une politique de confidentialité se lit déjà assez mal.
 */

/*
 * Question laissée au client.
 *
 * Volontairement voyante : c'est une page publiée dont il manque une mention
 * légalement obligatoire. Tant qu'un de ces encadrés subsiste, la page n'est
 * pas livrable — `build-textes.py --verifier` le fait échouer.
 */

/* ------------------------------------------------------------------ */
/* Erreur manifeste — l'en-tête collant ne collait pas                 */
/* ------------------------------------------------------------------ */

/*
 * La maquette pose `overflow-x: hidden` sur le corps pour contenir le
 * carrousel de logos, **et** `position: sticky` sur l'en-tête. Les deux
 * s'annulent : un ancêtre dont l'`overflow` n'est pas `visible` devient le
 * conteneur de défilement de son descendant collant. L'en-tête reste donc
 * accroché à un conteneur qui, lui, défile — autrement dit il s'en va.
 *
 * `clip` produit le même écrêtage sans créer de conteneur de défilement.
 * C'est exactement ce que la propriété a été introduite pour résoudre.
 */

/*
 * Repli pour les navigateurs sans `overflow: clip` : on écrête sur un
 * conteneur intérieur, et le corps redevient le contexte du collage.
 */

/*
 * Et c'est l'enveloppe de Bricks qui doit coller, pas la section.
 *
 * Un élément `sticky` se déplace **dans le bloc de son parent**. Bricks
 * enveloppe le template d'en-tête dans un `<header id="brx-header">` dont la
 * hauteur vaut exactement celle de l'en-tête : la section n'a donc aucune
 * marge de manœuvre, et s'en va avec son parent. Deuxième moitié du même bug,
 * invisible tant qu'on ne regarde que la règle de la maquette — qui, elle,
 * est juste.
 */

/* ------------------------------------------------------------------ */
/* Colonne de lecture                                                  */
/* ------------------------------------------------------------------ */

/*
 * `l-container--narrow` était écrit dans neuf gabarits et défini nulle part.
 *
 * Le token existait — `--size-container-narrow` — et le blueprint définit bien
 * un `u-container--narrow`, mais pas le modificateur de mise en page que les
 * arbres réclamaient. Le résultat ne se voyait qu'aux endroits sans garde-fou :
 * la citation et le bloc de suite couraient sur 1304 px, quand les paragraphes
 * voisins s'arrêtaient à 648 px. Une soixantaine de mots par ligne — l'œil perd
 * le début de la ligne suivante.
 *
 * Il ne rétrécit pas le conteneur : il **cadre ses enfants**. Rétrécir le
 * conteneur le recentrerait, et le titre d'une page se retrouverait décalé de
 * 300 px vers la droite par rapport aux sections pleine largeur qui suivent.
 * Ici, tout reste aligné sur la même verticale.
 */

/* ------------------------------------------------------------------ */
/* Citation                                                            */
/* ------------------------------------------------------------------ */

/*
 * La maquette n'en dessine pas. Celle-ci reprend ses codes : le pignon du logo
 * en repère, la couleur de marque, et rien d'autre — une citation dans une
 * page de texte n'a pas à devenir une affiche.
 */

/* ------------------------------------------------------------------ */
/* Peaufinage responsive                                               */
/* ------------------------------------------------------------------ */

/*
 * Longueur de ligne, une fois les colonnes retombées.
 *
 * En dessous de 1000 px, la maquette fait passer ses blocs à deux colonnes en
 * une seule. Le texte occupe alors toute la largeur : à 1000 px, cela donne des
 * lignes de 944 px, soit près de 140 caractères. L'œil perd la ligne suivante
 * bien avant. La maquette a le même défaut à cette largeur — elle a été dessinée
 * à 1440 et à 375, pas entre les deux.
 *
 * On borne donc la mesure là où les colonnes ont disparu, sans toucher au rendu
 * large, qui lui est juste.
 */
@media (max-width: 1000px) {
  .c-form__help.c-form__help{
    max-inline-size: var(--size-measure);
  }
}

/*
 * Les petites majuscules, sur petit écran.
 *
 * Les pastilles de la maquette descendent à 0,72 rem — 11,5 px — en majuscules
 * espacées. C'est tenable sur un écran large où elles servent de repère ; sur un
 * téléphone tenu à bout de bras, cela ne se lit plus. On les remonte de deux
 * dixièmes de rem là où elles sont réellement lues de près, sans changer le
 * rendu large.
 */
@media (max-width: 660px) {
  /* La spécificité suit celle du CSS porté — `.c-media-card.c-media-card
     .c-media-card__kicker.c-media-card__kicker` vaut 0-4-0 — sinon la règle
     est écrite, lisible dans la feuille, et sans effet. */
}

/*
 * Le bandeau de chiffres passe à une colonne sous 660 px : trois nombres côte à
 * côte sur 375 px les réduisent à des timbres-poste.
 */

/*
 * Les boutons d'un appel à l'action s'étirent sur téléphone : deux boutons
 * côte à côte dans 375 px se retrouvent à deux mots par ligne.
 */

/* Sur un téléphone, la marge latérale de la maquette est trop généreuse : elle
   mange un dixième de la largeur utile. */