@charset "UTF-8";

/*

 * WordPress sert cette feuille sans en-tête « charset » : sans cette

 * déclaration, le navigateur devine, et les caractères non ASCII des

 * propriétés « content » — un tiret cadratin, un point médian — dépendent

 * de l’encodage de la page qui l’appelle. La règle doit rester le tout

 * premier octet du fichier ; l’en-tête de thème qui suit est lu par

 * WordPress n’importe où dans les huit premiers kilo-octets.

 */

/*
Theme Name:   ACBD Avord
Theme URI:    https://acbd-avord.fr
Author:       ACBD Avord
Description:  Thème bloc du site de l'ACBD Avord, club de savate boxe française.
Version:      1.0.0
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
License:      GNU General Public License v2 or later
Text Domain:  acbd-avord
*/

/**
 * Texte réservé aux technologies d'assistance.
 *
 * WordPress fournit cette classe à ses propres écrans, mais rien ne la sert
 * sur le front d'un thème bloc : sans elle, les mentions destinées aux
 * lecteurs d'écran — « (nouvelle fenêtre) » du bloc Partenaires — s'affichent
 * en clair à côté des logos.
 *
 * Le contenu reste dans le flux d'accessibilité : ni display:none, ni
 * visibility:hidden, qui le retireraient aussi de la restitution vocale.
 */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/**
 * Bandeau de consentement.
 *
 * Les deux réponses partagent exactement la même mise en forme : les lignes
 * directrices de la CNIL veulent que refuser soit aussi simple qu'accepter, et
 * c'est le point le plus souvent sanctionné.
 */
.acbd-consentement {
    background: var(--wp--preset--color--fond);
    border-top: 3px solid var(--wp--preset--color--bleu-acbd);
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    inset-inline: 0;
    margin-inline: auto;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--wp--preset--spacing--30);
    position: fixed;
    z-index: 90;
}

.acbd-consentement[hidden] {
    display: none;
}

.acbd-consentement__titre {
    font-size: var(--wp--preset--font-size--grand);
    margin-block: 0 0.5rem;
}

.acbd-consentement__texte {
    margin-block: 0;
    max-width: 70ch;
}

.acbd-consentement__reponses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block: 1rem 0.5rem;
}

.acbd-consentement__reponses button {
    cursor: pointer;
    flex: 0 1 14rem;
}

.acbd-consentement__detail {
    font-size: var(--wp--preset--font-size--petit);
    margin-block: 0;
}

/* Reste visible et lisible dès qu'un lien de ce type reçoit le focus clavier. */
.screen-reader-text:focus {
    clip-path: none;
    height: auto;
    margin: 0;
    padding: 0.5rem 1rem;
    position: static;
    white-space: normal;
    width: auto;
}

/**
 * Indicateur de focus.
 *
 * Le lien d'évitement est celui de WordPress — le thème bloc en pose un vers
 * #wp--skip-link--target — et la règle ci-dessus le rend visible. Rien à
 * ajouter dans l'en-tête : un second lien ferait doublon au clavier.
 */
:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--wp--preset--color--rouge-acbd);
    outline-offset: 2px;
}

/**
 * Couleur primaire de Fluent Forms.
 *
 * Sa valeur par défaut (#1A7EFB) ne tient que 3,87:1 sur blanc : axe la relève
 * en violation AA sur le bouton d'envoi des pages contact et séance d'essai.
 * La variable est corrigée à la racine plutôt que le seul bouton — bordures de
 * champ au focus et cases cochées y puisent la même teinte.
 */
:root {
    --fluentform-primary: var(--wp--preset--color--bleu-acbd);
}

.acbd-creneau--annule {
    background: var(--wp--preset--color--fond-secondaire);
}

.acbd-creneau__mention {
    /* Pastille pleine, et non du rouge sur le fond de la ligne : posé sur le
       fond secondaire, le rouge de la charte tombe à 4,49:1 — sous le seuil AA
       de un centième. Renversé, il donne 5,09:1, et ne dépendra plus de la
       teinte de la bande qui le porte. Le libellé reste explicite : la couleur
       ne porte pas l'information (WCAG 1.4.1). */
    background: var(--wp--preset--color--rouge-acbd);
    border-radius: 2px;
    color: var(--wp--preset--color--fond);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
}

/* Le bandeau des cours annulés est traité dans la couche de présentation. */

/**
 * Un bandeau, pas une section.
 *
 * Le bloc précède la bannière d'accueil : ses trois lignes espacées de marges
 * de paragraphe le portaient à 184 pixels et repoussaient les deux appels à
 * l'action sous le premier écran, ce que la spec §7 interdit.
 *
 * ponytail: tient tant que l'annulation reste courte ; au-delà de deux ou
 * trois créneaux annulés, le bandeau devra passer sous la bannière.
 */


.acbd-planning {
    width: 100%;
    border-collapse: collapse;
}

.acbd-planning :where(th, td) {
    border: 1px solid #C9CCD8;
    padding: 0.6rem 0.8rem;
    text-align: left;
}

@media (max-width: 640px) {
    .acbd-planning {
        display: block;
        overflow-x: auto;
    }
}

/* Carte sous consentement : l'aperçu doit se lire comme une zone en attente. */
.acbd-carte__apercu {
    background: var(--wp--preset--color--fond-secondaire);
    border: 1px dashed #C9CCD8;
    padding: var(--wp--preset--spacing--30);
    text-align: center;
}

.acbd-carte__avertissement {
    font-size: var(--wp--preset--font-size--petit);
    margin-inline: auto;
    max-width: 46ch;
}

.acbd-carte iframe {
    display: block;
    width: 100%;
}

/* Statut d'une discipline à venir : même code couleur que l'alerte. */
.acbd-statut {
    background: var(--wp--preset--color--fond-secondaire);
    border-left: 5px solid var(--wp--preset--color--bleu-acbd);
    padding: var(--wp--preset--spacing--20);
}

.acbd-statut__mention {
    font-weight: 700;
}

/* Listes de fiches : une grille qui se replie en une colonne sur mobile. */
.acbd-encadrement,
.acbd-partenaires {
    display: grid;
    gap: var(--wp--preset--spacing--30);
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.acbd-encadrement__fiche {
    text-align: center;
}

.acbd-encadrement__photo {
    border-radius: 50%;
    height: auto;
    object-fit: cover;
    width: 10rem;
}

.acbd-encadrement__nom {
    font-weight: 700;
    margin-bottom: 0;
}

.acbd-encadrement__role,
.acbd-encadrement__diplomes {
    font-size: var(--wp--preset--font-size--petit);
    margin-top: 0.25rem;
}

.acbd-partenaires img {
    height: auto;
    max-width: 100%;
    /* Logos de fabricants variés : la nuance de gris les uniformise au repos. */
    filter: grayscale(1);
    transition: filter 0.2s ease;
}

.acbd-partenaires li:hover img,
.acbd-partenaires li:focus-within img {
    filter: none;
}

/* Documents et palmarès : des listes, pas des tableaux déguisés. */
.acbd-documents__liste,
.acbd-palmares__liste,
.acbd-rendez-vous {
    list-style: none;
    margin: 0;
    padding: 0;
}

.acbd-documents__liste li,
.acbd-palmares__liste li,
.acbd-rendez-vous__element {
    border-bottom: 1px solid #E3E5EC;
    padding-block: 0.6rem;
}

.acbd-rendez-vous__titre {
    display: block;
    font-weight: 700;
}

.acbd-rendez-vous__date,
.acbd-rendez-vous__lieu {
    color: var(--wp--preset--color--gris);
    font-size: var(--wp--preset--font-size--petit);
}

.acbd-rendez-vous__lieu::before {
    content: " — ";
}

/* Un état vide reste un message, pas une absence silencieuse. */
.acbd-documents__vide,
.acbd-encadrement__vide,
.acbd-palmares__vide,
.acbd-partenaires__vide,
.acbd-planning__vide {
    color: var(--wp--preset--color--gris);
    font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    .acbd-partenaires img {
        transition: none;
    }
}

/* Champ-piège du formulaire de lettre d'information. Masqué par la feuille de
   style et non par type="hidden" : un robot ignore le CSS mais reconnaît un
   champ caché, et l'éviterait. */
.acbd-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   Couche de présentation
   --------------------------------------------------------------------------
   Ce qui suit ne peut pas être exprimé dans theme.json : mise en page de
   l'en-tête, traitement des cartes, formulaires du plugin.
   Tout le reste — couleurs, échelle typographique, espacements — vit dans
   theme.json et doit y rester : un jeton défini à deux endroits finit par
   diverger, et c'est la copie périmée qu'on lit le jour où ça compte.
   ========================================================================== */

/*
 * En-tête collant. Le bouton « Séance d'essai » est la conversion du site :
 * le perdre au premier défilement, c'est le perdre sur les pages longues —
 * horaires, disciplines, agenda — qui sont précisément celles qu'on lit avant
 * de se décider.
 */
header.wp-block-template-part {
	background: var(--wp--preset--color--fond);
}

/*
 * Collant à partir de la tablette seulement. Sur un téléphone, une barre fixe
 * prend un dixième de la hauteur utile et recouvre ce vers quoi la page vient
 * de défiler : le bouton qu'on croit viser est sous l'en-tête.
 */
@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
	header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 50;
	}
}

.acbd-entete {
	padding-block: 0.75rem;
}

/*
 * Trois zones, une seule ligne : marque à gauche, navigation au centre,
 * actions à droite. Le sélecteur porte trois classes pour passer devant la
 * mise en page générée par le cœur, qui en porte deux.
 */
.acbd-entete > .acbd-entete__rangee.wp-block-group {
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.75rem;
}

.acbd-entete .acbd-entete__marque.wp-block-group {
	align-items: center;
	gap: 0.75rem;
	margin-inline-end: auto;
}

.acbd-entete .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.acbd-entete .wp-block-site-title a:hover {
	color: var(--wp--preset--color--bleu-acbd);
}

.acbd-entete .wp-block-site-logo img {
	display: block;
}

/*
 * Logotype de l'en-tête. La hauteur seule est fixée : le rapport du fichier
 * fait le reste, et les dimensions déclarées sur l'image réservent sa place
 * avant qu'elle n'arrive — sans quoi l'en-tête sautille au chargement.
 */
.acbd-marque {
	display: block;
	line-height: 0;
}

.acbd-marque__logo {
	display: block;
	height: 38px;
	width: auto;
}

@media (max-width: 781px) {
	.acbd-marque__logo {
		height: 28px;
	}
}

.acbd-entete .acbd-entete__nav .wp-block-navigation__container {
	column-gap: 1.4rem;
	row-gap: 0.5rem;
}

.acbd-entete .acbd-entete__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--encre);
	font-size: 0.9375rem;
	font-weight: 600;
	padding-block: 0.35rem;
	text-decoration: none;
}

.acbd-entete .acbd-entete__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--bleu-acbd);
}

/*
 * Rubrique courante : un trait rouge sous l'entrée, jamais la couleur seule.
 * Le trait reste perceptible en monochrome et sans distinction de teinte.
 */
.acbd-entete .acbd-entete__nav .current-menu-item > .wp-block-navigation-item__content,
.acbd-entete .acbd-entete__nav .current-menu-ancestor > .wp-block-navigation-item__content {
	box-shadow: inset 0 -3px 0 0 var(--wp--preset--color--rouge-acbd);
	color: var(--wp--preset--color--bleu-acbd);
}

.acbd-entete .acbd-entete__actions.wp-block-group {
	align-items: center;
	gap: 0.75rem;
}

/*
 * Recherche compacte. Le champ reste servi et visible — le masquer derrière
 * une bascule le retirerait du parcours au clavier autant que du regard.
 */
.acbd-entete .wp-block-search__inside-wrapper {
	border: 1px solid #C9CEDF;
	border-radius: 2px;
	padding: 0;
}

.acbd-entete .wp-block-search__input {
	border: 0;
	font-size: 0.9375rem;
	padding: 0.5rem 0.7rem;
	width: 9.5rem;
}

.acbd-entete .wp-block-search__input:focus {
	outline: none;
}

.acbd-entete .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--bleu-acbd);
	box-shadow: 0 0 0 3px rgba(34, 40, 185, 0.18);
}

.acbd-entete .wp-block-search__button {
	background: var(--wp--preset--color--fond-secondaire);
	border: 0;
	color: var(--wp--preset--color--encre);
	padding-inline: 0.7rem;
}

.acbd-entete .wp-block-search__button:hover {
	background: var(--wp--preset--color--bleu-acbd);
	color: var(--wp--preset--color--fond);
}

/* Le bouton de l'en-tête est plus compact que ceux du corps de page. */
.acbd-entete .wp-block-button__link {
	font-size: 0.9375rem;
	padding: 0.6rem 1.1rem;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.acbd-entete .wp-block-search__input {
		width: 7rem;
	}

	.acbd-entete .wp-block-site-title {
		font-size: 1rem;
	}
}

/*
 * Rail des grades. Sept segments, dans l'ordre fédéral. Le gant blanc est un
 * gris très clair et non du blanc pur : sur fond de page, un segment blanc
 * n'existerait pas.
 */
/*
 * Le rail vit à l'intérieur de l'en-tête : il colle donc avec lui, et n'a
 * besoin ni de « position: sticky » ni de « z-index » propres. Il en portait,
 * et c'était le défaut : dans le contexte d'empilement de l'en-tête, son
 * z-index de 49 passait devant le sous-menu « Disciplines », qui vaut 2. Le
 * rail barrait alors la première entrée du menu déroulant.
 */
.acbd-rail {
	display: flex;
	height: 5px;
}

.acbd-rail__gant {
	background: var(--gant);
	flex: 1;
	/* Le gant blanc est un gris très clair : sans ce filet, son segment
	   n'existe pas contre le fond de page, et le rail paraît troué. */
	box-shadow: inset 0 -1px 0 0 rgba(11, 21, 51, 0.16);
}

/*
 * Cartes des boucles de contenu — disciplines, actualités, produits, albums.
 * Le survol ne déplace rien : un décalage au survol fait sauter la grille sous
 * le pointeur, et rate la cible sur les écrans tactiles qui simulent un survol.
 */
.wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--30);
}

.wp-block-post-template > li.wp-block-post {
	background: var(--wp--preset--color--fond);
	border: 1px solid #E0E4F0;
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-template > li.wp-block-post {
		transition: none;
	}
}

.wp-block-post-template > li.wp-block-post:hover,
.wp-block-post-template > li.wp-block-post:focus-within {
	border-color: var(--wp--preset--color--bleu-acbd);
	box-shadow: 0 6px 20px rgba(11, 21, 51, 0.10);
}

.wp-block-post-template > li.wp-block-post > .wp-block-post-featured-image {
	margin: 0;
}

.wp-block-post-template > li.wp-block-post > .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

.wp-block-post-template > li.wp-block-post > :not(.wp-block-post-featured-image) {
	margin-inline: var(--wp--preset--spacing--20);
}

.wp-block-post-template > li.wp-block-post > :not(.wp-block-post-featured-image):first-child {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-post-template > li.wp-block-post > :last-child {
	margin-block-end: var(--wp--preset--spacing--20);
}

/*
 * Écart interne des cartes. L'écart général de deux rem sépare des sections,
 * pas un titre de sa date. Un extrait vide — une discipline dont le texte
 * n'est pas encore écrit — laisse alors une ligne creuse, et non un trou.
 */
.wp-block-post-template > li.wp-block-post > * + * {
	margin-block-start: 0.5rem;
}

.wp-block-post-template > li.wp-block-post .wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-template > li.wp-block-post .wp-block-post-title a:hover {
	text-decoration: underline;
}

/*
 * Carte sans image à la une. Le club n'a pas encore remis son kit média, et une
 * carte qui attend un fichier pour tenir debout est une carte cassée : le
 * bandeau tramé la termine tant que la photo n'est pas là, et disparaît de
 * lui-même le jour où elle l'est.
 */
.wp-block-post-template > li.wp-block-post:not(:has(.wp-block-post-featured-image))::before {
	background: linear-gradient(160deg, var(--wp--preset--color--bleu-acbd), #161C86);
	border-block-end: 4px solid var(--wp--preset--color--rouge-acbd);
	content: "";
	display: block;
	height: 5.5rem;
}

/*
 * Photos des disciplines éteintes depuis Réglages → Lecture. Sans cette règle,
 * la carte perdrait sa photo pour retrouver le bandeau ci-dessus : la bascule
 * ne gagnerait qu'un centimètre, là où elle promet de raccourcir la page. Le
 * bandeau reste pour toute autre carte, et pour une discipline qui attend
 * encore sa photo tant que la bascule est allumée.
 */
.acbd-sans-photo-discipline .wp-block-post-template > li.wp-block-post.type-acbd_discipline::before {
	content: none;
}

/*
 * Bandeau principal. Le titre s'aligne à gauche sur une colonne étroite : une
 * ligne de héros centrée sur toute la largeur se lit mal, et rien n'accroche
 * l'oeil au point où commence la lecture.
 */
.acbd-heros {
	min-height: 72vh;
}

@media (max-width: 781px) {
	.acbd-heros {
		min-height: 0;
		padding-block: var(--wp--preset--spacing--30);
	}
}

.acbd-heros .wp-block-cover__inner-container {
	margin-inline: 0;
	max-width: 40rem;
}

.acbd-heros__surtitre {
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-block-end: 0.75rem;
	text-transform: uppercase;
}

.acbd-heros__surtitre::before {
	background: var(--wp--preset--color--rouge-acbd);
	content: "";
	display: inline-block;
	height: 3px;
	margin-inline-end: 0.6rem;
	vertical-align: middle;
	width: 2.2rem;
}

/*
 * Bandes de section. L'alternance fond / fond secondaire donne le rythme que
 * n'a pas une suite de titres séparés par du vide.
 */
.acbd-bande {
	padding-block: var(--wp--preset--spacing--40);
}

.acbd-bande__titre {
	margin-block-end: var(--wp--preset--spacing--20);
}

.acbd-bande__chapeau {
	color: var(--wp--preset--color--gris);
	margin-block-end: var(--wp--preset--spacing--30);
	max-width: 52ch;
}

/*
 * Chiffres clés. Le nombre porte la police de titrage : c'est la seule donnée
 * de la page qui se lit d'un coup d'oeil, elle mérite la même voix que les
 * titres.
 */
.acbd-chiffre {
	font-family: var(--wp--preset--font-family--titrage);
	font-size: clamp(2.75rem, 6vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.acbd-chiffre__legende {
	color: var(--wp--preset--color--gris);
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * Boutons rendus par le plugin. Sans cette règle, ils retombent sur le bouton
 * par défaut du navigateur — c'est le cas de « S'inscrire » de la lettre
 * d'information, seul bouton gris d'un site qui n'en a aucun autre.
 */
.acbd-bouton {
	background: var(--wp--preset--color--encre);
	border: 0;
	border-radius: 2px;
	color: var(--wp--preset--color--fond);
	cursor: pointer;
	display: inline-block;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: 1rem;
	font-weight: 700;
	padding: 0.8rem 1.5rem;
	text-decoration: none;
}

.acbd-bouton:hover,
.acbd-bouton:focus {
	background: var(--wp--preset--color--bleu-acbd);
	color: var(--wp--preset--color--fond);
}

.acbd-bouton--action {
	background: var(--wp--preset--color--rouge-acbd);
}

/* Lettre d'information du pied de page. */
.acbd-newsletter__titre {
	font-size: var(--wp--preset--font-size--grand);
	margin-block: 0 0.5rem;
}

.acbd-newsletter__accroche {
	color: var(--wp--preset--color--gris);
	max-width: 46ch;
}

.acbd-newsletter label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-block-end: 0.25rem;
}

.acbd-newsletter :where(input[type="text"], input[type="email"], input[type="date"]) {
	background: var(--wp--preset--color--fond);
	border: 1px solid #C9CEDF;
	/* Sans cela le champ vaut sa largeur PLUS ses marges intérieures et ses
	   bordures : dans une colonne de grille, il déborde de vingt-quatre pixels
	   et recouvre son voisin. */
	box-sizing: border-box;
	border-radius: 2px;
	font: inherit;
	max-width: 22rem;
	padding: 0.6rem 0.7rem;
	width: 100%;
}

.acbd-newsletter :where(input[type="text"], input[type="email"], input[type="date"]):focus {
	border-color: var(--wp--preset--color--bleu-acbd);
	outline: 3px solid rgba(34, 40, 185, 0.35);
	outline-offset: 1px;
}

.acbd-newsletter input[type="checkbox"] {
	margin-inline-end: 0.4rem;
}

.acbd-newsletter__mention {
	color: var(--wp--preset--color--gris);
	font-size: 0.875rem;
	max-width: 46ch;
}

.acbd-facultatif {
	color: var(--wp--preset--color--gris);
	font-weight: 400;
}

/*
 * Indicateur de focus. Posé sur :focus-visible pour ne pas cerner ce que la
 * souris vient de cliquer, et jamais retiré : il est la seule façon de savoir
 * où l'on est quand on navigue au clavier.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--rouge-acbd);
	outline-offset: 2px;
}

/* Tableau du planning : la police de titrage pour les en-têtes de colonne. */
.acbd-planning th {
	font-family: var(--wp--preset--font-family--titrage);
	letter-spacing: 0.02em;
}

/*
 * Voile du bandeau principal. Un voile plat suffisant au centre de la photo ne
 * l'est plus sur les zones claires — les cordes du ring. Le dégradé assombrit
 * le côté où le texte se pose et ne redescend jamais sous 0,86 d'opacité :
 * contre le point le plus clair de l'image, le blanc reste au-dessus de 5:1.
 */
.acbd-heros > .wp-block-cover__background {
	background-image: linear-gradient(
		100deg,
		rgba(11, 21, 51, 0.94) 0%,
		rgba(11, 21, 51, 0.90) 45%,
		rgba(11, 21, 51, 0.86) 100%
	);
	opacity: 1;
}

.acbd-heros .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * Bouton secondaire du bandeau : un contour blanc, et non le contour bleu par
 * défaut, qui disparaît sur fond encre.
 */
.acbd-heros .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: var(--wp--preset--color--fond);
}

.acbd-heros .is-style-outline .wp-block-button__link:hover,
.acbd-heros .is-style-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--fond);
	color: var(--wp--preset--color--encre);
}

/*
 * Chiffres clés. Les colonnes s'alignent en haut : cadrées au centre, la
 * phrase du compteur et les nombres à un caractère ne partageaient aucune
 * ligne de base commune.
 */
.acbd-chiffres.wp-block-columns {
	align-items: start;
	gap: var(--wp--preset--spacing--30);
}

.acbd-chiffre {
	color: var(--wp--preset--color--bleu-acbd);
	margin-block-end: 0.25rem;
}

/*
 * Le compteur occupe la même case qu'un chiffre, mais rend une phrase tant
 * qu'aucun dossier n'est enregistré. Le filet bleu lui donne le poids d'une
 * cellule de la série au lieu d'un paragraphe égaré.
 */
.acbd-compteur {
	border-inline-start: 4px solid var(--wp--preset--color--bleu-acbd);
	margin-block: 0;
	padding-inline-start: var(--wp--preset--spacing--20);
}

.acbd-compteur--vide {
	color: var(--wp--preset--color--gris);
}

/*
 * Fréquentation. Gris, petite, alignée à gauche sous la série : une mention de
 * bas de bande, du même registre qu'un chapeau, pas un indicateur.
 */
.acbd-visites {
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--petit);
	margin-block-end: 0;
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * Bandeau principal sur téléphone. Les deux appels à l'action doivent tenir
 * au-dessus de la ligne de flottaison : c'est la seule chose que le bandeau
 * doit réussir, et un Pixel 5 n'offre que 727 pixels de haut. L'écart général
 * de deux rem sépare des sections, pas les quatre lignes d'un même bloc — il
 * coûtait à lui seul près de cent pixels ici.
 */
@media (max-width: 781px) {
	.acbd-entete {
		padding-block: 0.4rem;
	}

	.acbd-entete > .acbd-entete__rangee.wp-block-group {
		row-gap: 0.5rem;
	}

	.acbd-heros .wp-block-cover__inner-container > * + * {
		margin-block-start: 1rem;
	}

	.acbd-heros .wp-block-buttons {
		gap: 0.6rem;
		margin-block-start: 1.25rem;
	}

	.acbd-heros__surtitre {
		margin-block-end: 0;
	}
}

/* ==========================================================================
   Bandeau des cours annulés
   --------------------------------------------------------------------------
   Servi avant l'en-tête, hors de « wp-site-blocks » : une annulation se lit
   avant le menu. Rouge plein plutôt qu'un rose pâle bordé — c'est la seule
   information du site qui contredit ce que le planning annonce, et personne
   ne la cherche : elle doit s'imposer.
   ========================================================================== */

.acbd-alerte {
	align-items: baseline;
	background: var(--wp--preset--color--rouge-acbd);
	color: var(--wp--preset--color--fond);
	column-gap: 1.2rem;
	display: flex;
	/* Une ligne, à toute largeur. Un bandeau qui se replie sur trois lignes
	   repousse la page entière vers le bas et cesse d'être un bandeau. Ce qui
	   ne tient pas est tronqué visuellement, jamais retiré du document : le
	   texte reste lu par les technologies d'assistance, et le lien mène au
	   détail complet. */
	flex-wrap: nowrap;
	white-space: nowrap;
	/* Pleine largeur, contenu aligné sur la grille du site. */
	padding: 0.55rem max(var(--wp--preset--spacing--20), calc((100% - 1280px) / 2));
}

.acbd-alerte > * {
	margin-block: 0;
}

.acbd-alerte__titre {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*
 * La liste est rendue en ligne, et non en boîte flexible : seul un bloc de
 * texte se laisse tronquer par un unique « … ». En boîte flexible, chaque
 * créneau serait coupé séparément.
 */
.acbd-alerte__liste {
	flex: 1 1 auto;
	font-size: 0.9375rem;
	list-style: none;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
}

.acbd-alerte__liste li {
	display: inline;
}

.acbd-alerte__liste li + li::before {
	content: "\00A0\00B7\00A0";  /* espaces insécables explicites : une espace placée après un échappement CSS le termine et disparaît */
}

.acbd-alerte__lien {
	flex: 0 0 auto;
	font-size: 0.9375rem;
	margin-inline-start: auto;
}

/*
 * Sous la tablette, le lien s'efface. Il ne mène nulle part d'unique — la page
 * « Horaires » est dans le menu de chaque page —, et les quelque deux cents
 * pixels qu'il prend sont ceux qui manquent au créneau annulé, qui est la seule
 * information que ce bandeau porte vraiment.
 */
@media (max-width: 781px) {
	.acbd-alerte__lien {
		display: none;
	}

	.acbd-alerte {
		column-gap: 0.7rem;
	}

	.acbd-alerte__titre {
		font-size: 0.75rem;
	}

	.acbd-alerte__liste {
		font-size: 0.875rem;
	}
}

/*
 * Blanc sur le rouge de la charte : 5,09:1. Le soulignement est conservé —
 * sur un aplat d'une seule couleur, rien d'autre ne signale un lien.
 */
.acbd-alerte__lien a {
	color: var(--wp--preset--color--fond);
	text-decoration: underline;
}

/* ==========================================================================
   Lettre d'information
   --------------------------------------------------------------------------
   Sa propre bande, avant le pied de page. Rangée dans une colonne du pied, elle
   l'écrasait. Les trois champs de saisie se répartissent en ligne sur un écran
   large et s'empilent d'eux-mêmes en dessous ; les repères sont structurels —
   un champ texte porte un « br », une case à cocher porte son « input » — et
   non des rangs, qu'un changement du bloc décalerait sans prévenir.
   ========================================================================== */

.acbd-bande--lettre .acbd-newsletter {
	display: grid;
	gap: 1rem 1.5rem;
	/* Trois pistes sur un écran large — un champ par piste —, deux puis une
	   en dessous, sans point de rupture à tenir à jour. */
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	max-width: 60rem;
}

/*
 * Case à cocher et libellé alignés par un retrait négatif, et non par une boîte
 * flexible : celle-ci ferait du lien « politique de confidentialité » un
 * élément à part, et la phrase se disloquerait autour de lui.
 */
.acbd-newsletter p:has(input[type="checkbox"]) label {
	display: block;
	font-weight: 400;
	padding-inline-start: 1.7rem;
	text-indent: -1.7rem;
}

.acbd-newsletter p:has(input[type="checkbox"]) label > * {
	text-indent: 0;
}

.acbd-bande--lettre .acbd-newsletter > :is(
	.acbd-newsletter__titre,
	.acbd-newsletter__accroche,
	.acbd-newsletter__mention,
	p:has(input[type="checkbox"]),
	p:has(button)
) {
	grid-column: 1 / -1;
	margin-block: 0;
}

.acbd-bande--lettre .acbd-newsletter > p:has(> br) {
	margin-block: 0;
}

.acbd-bande--lettre .acbd-newsletter :where(input[type="text"], input[type="email"], input[type="date"]) {
	max-width: none;
}

/*
 * Contre-couleurs sur fond encre. Le gris du texte secondaire et le bleu des
 * liens sont réglés pour le blanc de la page : posés tels quels ici, le premier
 * disparaît et le second tombe à un contraste inacceptable. Le bleu très clair
 * donne 11:1 sur l'encre.
 */
.acbd-bande--lettre :is(.acbd-newsletter__accroche, .acbd-newsletter__mention, .acbd-facultatif) {
	color: #C3CADF;
}

.acbd-bande--lettre .acbd-newsletter__titre {
	color: var(--wp--preset--color--fond);
}

.acbd-bande--lettre .acbd-newsletter label {
	color: var(--wp--preset--color--fond);
}

.acbd-bande--lettre .acbd-newsletter a {
	color: var(--wp--preset--color--fond);
	text-decoration: underline;
}

/* Le champ reste blanc : un champ sombre sur fond sombre ne se voit pas. */
.acbd-bande--lettre .acbd-newsletter :where(input[type="text"], input[type="email"], input[type="date"]) {
	border-color: transparent;
}

.acbd-bande--lettre .acbd-newsletter :where(input[type="text"], input[type="email"], input[type="date"]):focus {
	outline-color: rgba(255, 255, 255, 0.6);
}