/**
 * Couche d'accessibilité (RGAA) du thème hh.
 *
 * Chargée après dist/min.css, sans recompilation : dist/min.css contient
 * des correctifs manuels absents des sources SCSS. Les sélecteurs reprennent
 * ceux du CSS compilé pour l'emporter à spécificité égale.
 */

/* ------------------------------------------------------------------
 * CARROUSELS (lot A – 7.1, 12.8, 13.8)
 * ------------------------------------------------------------------ */

/* Puce active : indicateur de forme en plus de la couleur. */
.bloc_etapes .etapes .etape .contenu .logos .bx-controls .bx-pager a {
	transition: width 150ms ease-in-out;
}

.bloc_etapes .etapes .etape .contenu .logos .bx-controls .bx-pager a.active {
	width: 24px;
}

/* Bouton pause / lecture : même gabarit que les flèches du carrousel. */
.bx-autoplay-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	background: #fff;
	color: #3B3C40;
	border: 2px solid #3B3C40;
	border-radius: 100px;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: all 150ms ease-in-out;
}

.bx-autoplay-toggle:hover {
	color: #5C7921;
	border-color: #5C7921;
}

/* Aligné sur la ligne des puces, à gauche du carrousel. */
.bloc_etapes .etapes .etape .contenu .logos .bx-autoplay-toggle {
	position: absolute;
	left: 0;
	bottom: -70px;
	z-index: 2;
}

.bx-autoplay-toggle:focus-visible,
.bx-wrapper .bx-controls a:focus-visible {
	outline: 3px solid #3B3C40;
	outline-offset: 2px;
}

/* Les contrôles n'apparaissent qu'au survol : ils doivent aussi apparaître
   quand le focus clavier est dans le carrousel. */
.bx-wrapper:focus-within .bx-controls {
	opacity: 1;
}

/* ==========================================================================
   MENU MOBILE (lot B – 10.7, 12.8)
   ========================================================================== */

/* Fermé, le panneau n'était qu'à opacity: 0 : ses liens restaient
   atteignables au clavier. visibility suit la fin du fondu. */
nav.mobile > div {
	visibility: hidden;
	transition: opacity 300ms ease, visibility 0s linear 300ms;
}

nav.mobile > input:checked ~ div {
	visibility: visible;
	transition: opacity 300ms ease, visibility 0s linear 0s;
}

nav.mobile .infoactivated:focus-visible {
	outline: 3px solid #3B3C40;
	outline-offset: 3px;
}

nav.mobile > div a:focus-visible {
	outline: 3px solid #FFF;
	outline-offset: 2px;
}

/* Le chevron des sous-menus est un glyphe FA en CSS : il s'ajoutait au nom
   du lien. Texte alternatif vide, ignoré par les navigateurs qui ne le
   gèrent pas (lot D – 1.2). */
nav.mobile > div ul > li.menu-item-has-children > a:after {
	content: "\f0d7";
	content: "\f0d7" / "";
}

/* ==========================================================================
   CONTRASTES (lot C – 3.2, 3.3)
   #81BC00 : 2,30:1 avec le blanc → #5C7921 (vert foncé de la charte) : 4,99:1.
   #00A9E0 : 2,71:1 avec le blanc → #007EA7 (même teinte) : 4,62:1.
   ========================================================================== */

/* Accroches « Maria… », « Mila… » */
.gooTitle span {
	background: #5C7921;
}

/* Boutons « Plus de détails… », « Cliquez-ici… » ; le survol passe au gris
   foncé puisque #5C7921 était déjà la couleur de survol. */
.bouton,
form input[type=submit] {
	background: #5C7921;
}

.bouton:hover,
.bouton:focus,
.bouton:active,
form input[type=submit]:hover,
form input[type=submit]:focus,
form input[type=submit]:active {
	background: #3B3C40;
}

/* Variante contour de la FAQ : la règle précédente, plus tardive, ne doit
   pas lui donner de fond. */
.bloc_questionreponse .bouton:focus,
.bloc_questionreponse .bouton:active {
	background: transparent;
	color: #3B3C40;
}

.bloc_questionreponse .bouton:hover {
	background: transparent;
	border-color: #007EA7;
	color: #007EA7;
}

/* Pastilles 1/2/3 */
.bloc_etapes .etapes .etape .contenu .titre span {
	background: #5C7921;
}

/* Menu mobile : le gris de l'entrée active n'atteint que 2,2:1 sur le
   nouveau fond ; elle passe en blanc, le soulignement la distingue. */
nav.mobile > div {
	background: rgba(92, 121, 33, .99);
}

nav.mobile > div ul > li.current-menu-item > a,
nav.mobile > div ul > li.current-page-ancestor > a {
	color: #FFF;
}

/* Textes et liens verts sur fond blanc */
a,
nav.main > ul > li > a:hover,
nav.main > ul > li.current-menu-item:not(.btn) > a,
nav.main > ul > li.current-page-ancestor:not(.btn) > a,
nav.menutopbar > ul > li > a:hover,
nav.menutopbar > ul > li.current-menu-item:not(.btn) > a,
nav.menutopbar > ul > li.current-page-ancestor:not(.btn) > a,
nav.copyrights li a:hover,
#tarteaucitronManager:hover,
.contactPopupContainer .contactPopupMask .contactPopup .close:hover {
	color: #5C7921;
}

#header .main .bouton:hover {
	border-color: #5C7921;
	color: #5C7921;
}

.bloc_hdp_slider .bx-controls .bx-controls-direction a:hover,
.bloc_etapes .etapes .etape .contenu .logos .bx-controls .bx-controls-direction a:hover {
	color: #5C7921 !important;
	border-color: #5C7921;
}

/* Bouton Contact */
.popupTrigger {
	background: #007EA7;
}

/* ==========================================================================
   FOCUS (lot C – 10.7)
   dist/min.css retire l'outline des boutons ; « Espace de connexion »
   n'avait aucun indicateur de focus.
   ========================================================================== */

.bouton:focus-visible,
.login-button:focus-visible,
form input[type=submit]:focus-visible,
nav.main li.btn > a:focus-visible {
	outline: 3px solid #3B3C40;
	outline-offset: 3px;
}

/* ==========================================================================
   STRUCTURE (lot E – 9.1, 12.7)
   ========================================================================== */

/* Lien d'évitement : hors écran, visible au focus, au-dessus de l'en-tête
   fixe et du bouton Contact. */
.skip-link {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000000;
	padding: 12px 20px;
	background: #3B3C40;
	color: #FFF;
	font-weight: 600;
	text-decoration: underline;
	transform: translateY(-120%);
}

.skip-link:focus {
	transform: none;
	color: #FFF;
	outline: 3px solid #5C7921;
	outline-offset: 0;
}

#contenu {
	scroll-margin-top: 150px;
}

/* La cible du lien d'évitement n'est pas un composant interactif. */
#contenu:focus {
	outline: none;
}

/* Titre de la première diapositive de l'accueil, passé en h1 : rendu
   identique au h2 des autres diapositives. */
.bloc_hdp_slider .texte h1 {
	font-weight: 700;
	font-size: 1.6666666667em;
	line-height: 36px;
	margin-bottom: .83em;
}

@media (max-width: 1279px) {
	.bloc_hdp_slider .texte h1 {
		font-size: 1.4444444444em;
	}
}

@media (max-width: 959px) {
	.bloc_hdp_slider .texte h1 {
		font-size: 1.2222222222em;
	}
}

/* ==========================================================================
   RESPONSIVE (lot F – 10.4, 10.11)
   Vérifié à 320 px, et à 200 % dans des fenêtres de 700 et 1280 px.
   ========================================================================== */

@media (max-width: 959px) {

	/* La rotation de -5° élargit la boîte de l'accroche au-delà de la
	   colonne : la marge droite compense. */
	body.home .gooTitle {
		margin-right: 30px;
	}

	/* Titre et bouton des diapositives ne touchent plus les bords. */
	.bloc_hdp_slider .hdp_slider .slide .texte {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Accroche des hauts de page (« Mila… ») : masquée jusqu'ici en mobile,
	   affichée dans le flux comme celle de l'accueil. */
	.bloc_hdp .inner .accrocheContainer {
		display: block;
		padding-right: 0;
	}

	.bloc_hdp .gooTitle {
		position: relative;
		bottom: auto;
		margin: 0 30px 60px 20px;
		font-size: 28px;
		line-height: 40px;
	}
}

@media (max-width: 639px) {
	.bloc_hdp .gooTitle {
		margin-left: 10px;
		font-size: 26px;
	}
}

/* La base CSS active la césure automatique sous 320 px : elle coupait les
   mots des titres et des accroches (« plu-sieurs »). */
@media (max-width: 320px) {
	h1,
	h2,
	h3,
	.gooTitle {
		-webkit-hyphens: manual;
		hyphens: manual;
	}
}

/* Une URL longue, en texte ou en lien, ne se coupait pas et créait un
   défilement horizontal (page Cookies). Les liens sont en inline-block :
   il leur faut "anywhere" pour que leur largeur se réduise. */
#contenu p,
#contenu li,
#contenu td {
	overflow-wrap: break-word;
}

#contenu p a,
#contenu li a,
#contenu td a {
	overflow-wrap: anywhere;
}

/* Entrée active : soulignement en plus de la couleur (3.1). */
nav.mobile > div ul > li.current-menu-item > a,
nav.mobile > div ul > li.current-page-ancestor > a,
nav.main > ul > li.current-menu-item:not(.btn) > a,
nav.main > ul > li.current-page-ancestor:not(.btn) > a,
nav.menutopbar > ul > li.current-menu-item:not(.btn) > a,
nav.menutopbar > ul > li.current-page-ancestor:not(.btn) > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}