/*
Theme Name:   Residence Les Roches
Theme URI:    https://kriesi.at/themes/enfold/
Description:  Thème enfant Enfold — composants Tris (plugin Tris Component Engine), utilisables dans le flexible content ACF PRO et dans l'éditeur Avia.
Author:       Tris Informatique
Template:     enfold
Version:      2.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  theme
*/

/* --------------------------------------------------------------------------
   Styles propres au projet.

   Couleurs, polices et tailles : jamais en dur. Les composants consomment les tokens
   --component-* définis par le plugin (assets/css/base.css), eux-mêmes alimentés par
   les réglages d'Enfold (Couleurs, Styling). Pour adapter le design d'un projet :
     1. régler couleurs et polices dans Enfold (polices téléversées dans l'onglet
        « Upload » d'Enfold, jamais choisies dans la liste Google, chargée depuis un CDN) ;
     2. si besoin, surcharger un token ici, par exemple :
        :root { --component-radius: 0; --component-font-size-title: 2rem; }
   Voir CLAUDE.md §6.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Éditeur Avia (ALB) : section pleine largeur.
   Enfold contient le contenu d'une section dans .container (largeur max du site) ; un composant à fond
   plein écran (hero, bandeau…) doit s'étendre jusqu'aux bords. Ajouter la classe
   « component-section-full » dans le réglage « Classe CSS personnalisée » de la section : le composant
   gère alors lui-même sa largeur de contenu (.component-inner).
   -------------------------------------------------------------------------- */
/* Un seul conteneur pour tout le site : header, barre de titre, sections Avia ordinaires et footer utilisent la
   même largeur max et la même marge latérale que les composants (.component-inner : tokens
   --component-max-width / --component-gutter). Le logo et le contenu sont ainsi alignés à tous les formats.
   Enfold donne à .container `padding: 0 50px` puis `width: 85 %` en mobile avec
   `.responsive #top #wrap_all .container` : on reprend exactement ce sélecteur pour l'emporter. */
.responsive #top #wrap_all .container {
	width: 100%;
	max-width: var(--component-max-width);
	padding-left: var(--component-gutter);
	padding-right: var(--component-gutter);
	box-sizing: border-box;
}

/* Section pleine largeur : le conteneur d'Enfold disparaît (le composant gère .component-inner). */
#top #wrap_all .container_wrap.component-section-full > .container.av-section-cont-open {
	width: 100%;
	max-width: none;
	padding: 0;
}

#top #wrap_all .container_wrap.component-section-full .content.av-content-full {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

/* Enfold ajoute `margin-bottom: 20px` aux colonnes en mobile (`.responsive #top #wrap_all .flex_column`) :
   sans ce rappel, un espace apparaît entre deux sections pleine largeur. */
#top #wrap_all .container_wrap.component-section-full .flex_column {
	margin: 0;
}

/* Page Contact : formulaire (gauche) et coordonnées (droite) côte à côte, dans le conteneur standard du site.
   Chaque composant garde ses propres marges verticales mais perd sa largeur/gouttière interne : la colonne
   Avia fait déjà office de conteneur. Les coordonnées s'empilent en une colonne. Sous 768 px, Enfold
   empile les colonnes. */
#top #wrap_all .contact-split .flex_column:first-child { padding-right: clamp(24px, 4vw, 64px); box-sizing: border-box; }
#top #wrap_all .contact-split .flex_column:last-child { padding-left: clamp(24px, 4vw, 64px); box-sizing: border-box; }
#top #wrap_all .contact-split :is(.component-inner, .component-ninja-form__inner) {
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
#top #wrap_all .contact-split .component-contact-details__list { grid-template-columns: 1fr; gap: 32px; }
@media (max-width: 767px) {
	#top #wrap_all .contact-split .flex_column:is(:first-child, :last-child) { padding-left: 0; padding-right: 0; }
}

/* Enfold met ses titres en capitales (`.template-page .entry-content-wrapper h1, h2`) avec 1 px d'espacement
   des lettres : les composants posés dans l'ALB gardent la casse saisie et un espacement normal.
   Un composant qui veut autre chose (libellé en capitales, titre resserré) l'impose avec un sélecteur plus
   fort commençant par `body#top` (le moteur ne préfixe pas les sélecteurs commençant par body/html/:root). */
#top .tce-avia :is(h1, h2, h3, h4, h5, h6) {
	text-transform: none;
	letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   Footer (colonnes de widgets 1 à 4 + barre du bas ; voir bin/footer-widgets.php).
   Couleurs : jeu « footer » d'Enfold (--enfold-footer-color-*), réglé dans bin/enfold-settings.php.
   Colonnes : 1 marque (logo + texte), 2 « Nous trouver », 3 « Nous joindre », 4 « Raccourcis » (menu).
   Disposition responsive, en trois paliers :
     ≥ 1280 px : 4 colonnes (marque 300 px + 3 colonnes égales), comme la maquette ;
     768–1279 px : la marque passe sur toute la largeur (logo à côté du texte), puis 3 colonnes égales ;
     480–767 px : marque pleine largeur, « Nous trouver » et « Nous joindre » côte à côte, « Raccourcis » en
                  deux colonnes de liens ;
     < 480 px : une seule colonne, sections séparées par un filet, liens et numéros en lignes de 48 px.
   -------------------------------------------------------------------------- */
/* Enfold pose des ::before / ::after de nettoyage de flottants sur ces conteneurs : en grille ou en flex ils
   deviendraient des éléments à part entière (colonne vide, décalages). */
#top #footer .container::before,
#top #footer .container::after,
#top #footer .flex_column::before,
#top #footer .flex_column::after,
#top #socket .container::before,
#top #socket .container::after { display: none; }

#top #wrap_all #footer .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 32px;
	padding-top: 48px;
	padding-bottom: 24px;
}

#top #wrap_all #footer .container > .flex_column {
	float: none;
	width: auto;
	margin: 0;
	padding: 24px 0;
	border-top: 1px solid var(--enfold-footer-color-border);
}

#top #wrap_all #footer .container > .flex_column:first-child {
	padding-top: 0;
	border-top: 0;
}

#top #wrap_all #footer .widget {
	margin: 0 0 14px;
	padding: 0;
}

#top #footer .seperator { display: none; }

/* Pas de marge sous le dernier widget d'une colonne (le rythme vertical vient du remplissage de la colonne). */
#top #wrap_all #footer .flex_column .widget:last-child { margin-bottom: 0; }

/* Marque : logo à côté du texte sur petit et moyen écran, empilés sur grand écran. */
#top #wrap_all #footer .container > .flex_column:first-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 24px;
}

#top #wrap_all #footer .container > .flex_column:first-child .widget { margin: 0; }

@media (min-width: 480px) {
	#top #wrap_all #footer .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	#top #wrap_all #footer .container > .flex_column:first-child,
	#top #wrap_all #footer .container > .flex_column:last-child { grid-column: 1 / -1; }

	/* « Raccourcis » pleine largeur : ses liens se répartissent sur deux colonnes. */
	#top #footer .widget_nav_menu .menu { column-count: 2; column-gap: 32px; }
}

@media (min-width: 768px) {
	#top #wrap_all #footer .container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 40px;
		padding-top: 64px;
		padding-bottom: 32px;
	}

	#top #wrap_all #footer .container > .flex_column:last-child { grid-column: auto; }

	#top #footer .widget_nav_menu .menu { column-count: 1; }
}

@media (min-width: 1280px) {
	#top #wrap_all #footer .container {
		grid-template-columns: 300px repeat(3, minmax(0, 1fr));
		gap: 0 56px;
		padding-top: 72px;
		padding-bottom: 40px;
	}

	#top #wrap_all #footer .container > .flex_column {
		padding: 0;
		border-top: 0;
	}

	#top #wrap_all #footer .container > .flex_column:first-child {
		display: block;
		grid-column: auto;
	}

	#top #wrap_all #footer .container > .flex_column:first-child .widget { margin: 0 0 14px; }
}

/* Libellés de colonne (titres de bloc ou de widget). */
#top #footer .widget .wp-block-heading,
#top #footer .widget .widgettitle {
	margin: 0;
	padding: 0;
	font-family: var(--component-font-family);
	font-size: var(--component-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--enfold-footer-color-meta);
}

#top #footer .widget .widgettitle { margin-bottom: 14px; }

#top #footer .widget p {
	margin: 0;
	font-size: var(--component-font-size-md);
	line-height: 1.8;
	color: var(--enfold-footer-color-color);
}

#top #footer .widget p a {
	color: var(--enfold-footer-color-heading);
	text-decoration: none;
}

#top #footer .widget p a:hover,
#top #footer .widget p a:focus-visible { text-decoration: underline; }

#top #footer .widget .footer-brand {
	font-size: var(--component-font-size-sm);
	line-height: 1.7;
	color: var(--enfold-footer-color-meta);
}

/* Logo sur une plaque claire (le logo est un JPEG fond blanc). */
#top #footer .widget .footer-logo {
	display: inline-block;
	margin: 0 0 10px;
	padding: 12px 14px;
	background: var(--component-color-text-invert);
}

#top #footer .widget .footer-logo img {
	display: block;
	width: 96px;
	height: auto;
}

@media (min-width: 1280px) {
	#top #footer .widget .footer-logo { padding: 14px 16px; }
	#top #footer .widget .footer-logo img { width: 128px; }
}

#top #footer .widget .footer-link a {
	font-size: var(--component-font-size-sm);
	font-weight: 600;
}

/* Liens du footer : zones tactiles confortables (≥ 44 px) sur mobile. */
#top #footer .widget .footer-link a,
#top #footer .widget p a {
	display: inline-block;
	padding: 6px 0;
}

/* Adresse e-mail : jamais coupée sur 2 lignes (le navigateur cassait aux tirets de
   « residence-les-roches »). Sur mobile, la taille suit la largeur de l'écran pour que
   l'adresse tienne toujours entière dans la colonne. */
#top #footer .widget a[href^="mailto:"] {
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	#top #footer .widget a[href^="mailto:"] {
		font-size: min(var(--component-font-size-sm), 3.8vw);
	}
}

/* Colonne « Raccourcis » (widget « Menu de navigation »). */
#top #footer .widget_nav_menu ul,
#top #footer .widget_nav_menu .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#top #footer .widget_nav_menu li {
	margin: 0;
	padding: 0;
	border: 0;
	break-inside: avoid;
}

#top #footer .widget_nav_menu li::before,
#top #footer .widget_nav_menu li a::before { display: none; }

#top #footer .widget_nav_menu a {
	display: block;
	padding: 7px 0;
	border: 0;
	font-size: var(--component-font-size-md);
	line-height: 1.5;
	text-decoration: none;
	color: var(--enfold-footer-color-color);
}

#top #footer .widget_nav_menu a:hover,
#top #footer .widget_nav_menu a:focus-visible {
	color: var(--enfold-footer-color-heading);
	text-decoration: underline;
}

@media (max-width: 767.98px) {
	#top #footer .widget_nav_menu a { padding: 13px 0; }
	#top #footer .widget .footer-link a,
	#top #footer .widget p a { padding: 12px 0; }
}

#top #footer a:focus-visible {
	outline: 3px solid var(--enfold-footer-color-primary);
	outline-offset: 2px;
}

/* Barre du bas (sub-footer), sur une seule ligne :
   « © 2026 Fondation Les Roches, Orvin | Tous droits réservés | Mentions légales … »   « Powered by Tris informatique ⬤ »
   Le texte du copyright, le menu « Liens légaux » (emplacement avia3) et la signature de l'agence
   (inc/socket.php) sont trois éléments de la ligne : le copyright d'Enfold est un <span> dont les enfants
   (texte, signature) passent au même niveau que le menu (`display: contents`) pour pouvoir être réordonnés. */
#top #wrap_all #socket .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: var(--component-font-size-sm);
	color: var(--enfold-socket-color-meta);
}

#top #socket .copyright {
	display: contents;
	float: none;
	margin: 0;
	color: var(--enfold-socket-color-meta);
}

#top #socket .sub_menu_socket {
	order: 2;
	float: none;
	margin: 0;
}

#top #socket .sub_menu_socket ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top #socket .sub_menu_socket li {
	display: flex;
	align-items: center;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Barre verticale entre les éléments : dans le texte du copyright (`.socket-sep`, posé par inc/socket.php) et avant
   chaque lien (la première sépare le copyright du premier lien) — même espacement partout. */
#top #socket .socket-sep { margin: 0 0.6em; }

#top #socket .sub_menu_socket li::before {
	content: '|';
	content: '|' / '';
	margin: 0 0.6em;
}

#top #socket .sub_menu_socket a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	font-size: var(--component-font-size-sm);
	text-decoration: none;
	color: var(--enfold-socket-color-meta);
}

#top #socket .sub_menu_socket a:hover,
#top #socket .sub_menu_socket a:focus-visible,
#top #socket .powered-by__link:hover,
#top #socket .powered-by__link:focus-visible {
	color: var(--enfold-socket-color-heading);
	text-decoration: underline;
}

#top #socket .sub_menu_socket a:focus-visible,
#top #socket .powered-by__link:focus-visible {
	outline: 3px solid var(--enfold-socket-color-primary);
	outline-offset: 2px;
}

/* Signature de l'agence : à droite de la ligne. */
#top #socket .powered-by {
	order: 3;
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	white-space: nowrap;
	color: var(--enfold-socket-color-meta);
}

#top #socket .powered-by__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-left: 0.35em;
	text-decoration: none;
	color: var(--enfold-socket-color-meta);
}

#top #socket .powered-by__logo {
	display: block;
	width: 29px;
	height: 30px;
}

/* ---- Responsive du sub-footer ----------------------------------------------------------------------------
   ≥ 1200 px : une seule ligne (copyright | liens ………… signature).
   < 1200 px : trois blocs empilés — 1) copyright, 2) liens légaux, 3) signature. Les barres « | » du MENU sont
               retirées (elles se retrouveraient en début de ligne dès que les liens passent à la ligne) ; celle du
               copyright reste, entre « © 2026 … » et « Tous droits réservés ».
   < 600 px :  les liens légaux forment une liste verticale (lignes de 40 px).
   < 480 px :  « Tous droits réservés » passe à la ligne sous « © 2026 … ». */
@media (max-width: 1199.98px) {
	#top #wrap_all #socket .container {
		row-gap: 2px;
		padding-top: 14px;
		padding-bottom: 12px;
	}

	#top #socket .sub_menu_socket {
		flex-basis: 100%;
		margin-top: 6px;
	}

	#top #socket .sub_menu_socket ul { gap: 0 28px; }

	#top #socket .sub_menu_socket li::before { display: none; }

	#top #socket .sub_menu_socket a { min-height: 40px; }

	#top #socket .powered-by {
		flex-basis: 100%;
		margin-left: 0;
	}

	#top #socket .powered-by__link { min-height: 40px; }
}

@media (max-width: 599.98px) {
	#top #socket .sub_menu_socket ul {
		flex-direction: column;
		gap: 0;
	}
}

@media (max-width: 479.98px) {
	/* Le séparateur du texte devient un saut de ligne : « © 2026 … » puis « Tous droits réservés ». */
	#top #socket .socket-sep {
		flex-basis: 100%;
		height: 0;
		margin: 0;
		overflow: hidden;
		font-size: 0;
	}
}

/* --------------------------------------------------------------------------
   Header (inc/header.php, assets/js/header.js). Couleurs : jeu « header » d'Enfold (--enfold-header-color-*).
   Structure : barre d'information (#header_meta) puis barre principale (#header_main : logo + .site-nav).
   Point de bascule ordinateur / mobile : 1280 px (le même dans header.js) — les 6 entrées de menu, le logo et le bouton
   d'admission ne tiennent pas sur une ligne en dessous.
   Sélecteurs en #top #header : ils doivent l'emporter sur les règles de couleur et de taille d'Enfold.
   -------------------------------------------------------------------------- */

/* ---- Barre d'information ---- */
#top #wrap_all #header_meta {
	min-height: 0;
	border-bottom: 1px solid var(--enfold-header-color-border);
	background: var(--enfold-header-color-bg);
}

#top #wrap_all #header_meta .container {
	display: block;
	min-height: 0;
	height: auto;
	padding-top: 0;
	padding-bottom: 0;
}

#top #header_meta .phone-info {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	font-size: var(--component-font-size-sm);
	line-height: 1.4;
}

#top #header_meta .phone-info > div {
	width: 100%;
	padding: 0;
}

#top #header .header-utility {
	display: flex;
	width: 100%;
	font-weight: 400;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	min-height: 44px;
	color: var(--enfold-header-color-meta);
}

#top #header .header-utility__info,
#top #header .header-utility__contact {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0 26px;
	white-space: nowrap;
}

/* La barre reste sur une seule ligne : la précision sur le téléphone (la plus longue) disparaît quand la place
   manque ; elle est reprise dans le panneau du menu mobile. */
@media (max-width: 1099.98px) {
	#top #header .header-utility__note { display: none; }
}

#top #header .header-utility__sep { color: var(--enfold-header-color-border); }

#top #header .header-utility__phone {
	font-weight: 600;
	text-decoration: none;
	color: var(--enfold-header-color-heading);
}

#top #header a.header-utility__phone:hover,
#top #header a.header-utility__phone:focus-visible {
	color: var(--enfold-header-color-primary);
	text-decoration: underline;
}

/* ---- Barre principale ---- */
#top #wrap_all #header_main {
	border-bottom: 1px solid var(--enfold-header-color-border);
	background: var(--enfold-header-color-bg);
}

#top #wrap_all #header_main .container.av-logo-container {
	height: 112px;
	line-height: 1.4;
}

#top #header .av-logo-container .inner-container {
	position: static;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	height: 100%;
}

#top #wrap_all #header .logo {
	position: static;
	display: block;
	flex: 0 0 auto;
	float: none;
	width: auto;
	height: 100px;
	margin: 0;
	padding: 0;
}

#top #wrap_all #header .logo a { display: block; height: 100%; }

#top #wrap_all #header .logo img {
	display: block;
	width: auto;
	height: 100%;
	max-height: none;
	padding: 0;
}

/* ---- Menu (ordinateur) ---- */
#top #header .site-nav {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 34px;
	margin-left: auto;
}

#top #header .site-nav__panel {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 34px;
}

#top #header .site-nav__list {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top #header .site-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top #header .site-nav__link {
	display: block;
	padding: 6px 0 3px;
	border-bottom: 2px solid transparent;
	font-size: var(--component-font-size-md);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	color: var(--enfold-header-color-heading);
}

#top #header .site-nav__item.is-current > .site-nav__link { border-bottom-color: var(--enfold-header-color-primary); }

#top #header .site-nav__link:hover,
#top #header .site-nav__link:focus-visible { color: var(--enfold-header-color-primary); }

#top #header .site-nav__link:focus-visible,
#top #header .site-nav__cta:focus-visible,
#top #header .site-nav__call:focus-visible,
#top #header .site-nav__toggle:focus-visible,
#top #header .site-nav__close:focus-visible,
#top #header .site-nav__phone:focus-visible {
	outline: 3px solid var(--enfold-header-color-primary);
	outline-offset: 3px;
}

/* Entrée avec sous-menu : un bouton (clavier, lecteurs d'écran) qui a l'apparence d'un lien, suivi d'une flèche. */
#top #header .site-nav__link--toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}

#top #header .site-nav__chevron { flex: 0 0 auto; transition: transform var(--component-transition); }
#top #header .site-nav__item.is-open > .site-nav__link--toggle .site-nav__chevron { transform: rotate(180deg); }

/* Sous-menu déroulant : même langage que le reste du site (angles droits, filet de la couleur principale en
   haut comme les colonnes de « Le quotidien », texte seul), avec un repère à gauche de l'entrée survolée. */
#top #header .site-nav__sub {
	position: absolute;
	top: 100%;
	left: -24px;
	z-index: 30;
	display: none;
	min-width: 320px;
	margin: 0;
	padding: 6px 0;
	border: 1px solid var(--enfold-header-color-border);
	border-top: 2px solid var(--enfold-header-color-primary);
	background: var(--enfold-header-color-bg);
	box-shadow: var(--component-shadow);
	list-style: none;
}

/* Le sous-menu s'ouvre au clic (jamais au survol) : classe posée par header.js. */
#top #header .site-nav__item.is-open > .site-nav__sub {
	display: block;
	animation: site-nav-drop 0.18s ease-out;
}

@keyframes site-nav-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

#top #header .site-nav__sub .site-nav__item {
	display: block;
	height: auto;
}

#top #header .site-nav__sub .site-nav__item + .site-nav__item > .site-nav__link {
	border-top: 1px solid var(--enfold-header-color-border);
}

#top #header .site-nav__sub .site-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 15px 24px;
	border-bottom: 0;
	font-size: var(--component-font-size-md);
	font-weight: 500;
	white-space: normal;
	box-shadow: inset 3px 0 0 transparent;
	transition: background var(--component-transition), color var(--component-transition), box-shadow var(--component-transition);
}

/* Flèche discrète, qui apparaît au survol (texte alternatif vide : non lue par les lecteurs d'écran). */
#top #header .site-nav__sub .site-nav__link::after {
	content: '\2192';
	content: '\2192' / '';
	flex: 0 0 auto;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--component-transition), transform var(--component-transition);
}

#top #header .site-nav__sub .site-nav__link:hover,
#top #header .site-nav__sub .site-nav__link:focus-visible {
	background: var(--enfold-header-color-bg2);
	color: var(--enfold-header-color-primary);
	box-shadow: inset 3px 0 0 var(--enfold-header-color-primary);
}

#top #header .site-nav__sub .site-nav__link:hover::after,
#top #header .site-nav__sub .site-nav__link:focus-visible::after {
	opacity: 1;
	transform: none;
}

#top #header .site-nav__sub .site-nav__link:focus-visible { outline-offset: -3px; }

/* Page affichée et page parente (« Vue d'ensemble ») mises en valeur. */
#top #header .site-nav__sub .site-nav__item.is-current > .site-nav__link {
	color: var(--enfold-header-color-primary);
	box-shadow: inset 3px 0 0 var(--enfold-header-color-primary);
}

#top #header .site-nav__sub .site-nav__item--overview > .site-nav__link { font-weight: 600; }

/* Entrée parente ouverte : soulignée, comme une entrée de la page affichée. */
#top #header .site-nav__item.is-open > .site-nav__link--toggle {
	border-bottom-color: var(--enfold-header-color-primary);
	color: var(--enfold-header-color-primary);
}

/* Le bouton parent : anneau de focus plus fin que celui des autres boutons (il est dans une ligne de texte). */
#top #header .site-nav__link--toggle:focus-visible {
	outline-width: 2px;
	outline-offset: 5px;
}

/* Bouton d'admission. */
#top #header .site-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 26px;
	border: 1px solid var(--enfold-header-color-primary);
	font-size: var(--component-font-size-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	color: var(--enfold-header-color-primary);
	transition: background var(--component-transition), color var(--component-transition);
}

#top #header .site-nav__cta:hover,
#top #header .site-nav__cta:focus-visible {
	background: var(--enfold-header-color-primary);
	color: var(--component-color-text-invert);
}

/* Éléments réservés au mobile : masqués sur ordinateur. */
#top #header .site-nav__call,
#top #header .site-nav__toggle,
#top #header .site-nav__panel-head,
#top #header .site-nav__contact { display: none; }

/* Entre 1280 et 1439 px la place est juste (logo agrandi + 6 entrées + bouton) : espacements resserrés. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
	#top #header .site-nav,
	#top #header .site-nav__panel { gap: 24px; }

	#top #header .site-nav__list { gap: 22px; }

	#top #header .site-nav__cta { padding: 0 20px; }

	#top #header .av-logo-container .inner-container { gap: 24px; }
}

/* ---- Menu (tablette et mobile) : panneau plein écran ----
   Public visé : résidents et leurs proches — grandes zones tactiles, libellé « Menu » en toutes lettres (pas
   seulement une icône), appel en un geste depuis la barre du haut, et rappel de l'admission et des
   coordonnées en bas du panneau. */
@media (max-width: 1279.98px) {
	#top #wrap_all #header_main .container.av-logo-container { height: 92px; }

	/* Enfold impose en mobile `.responsive #top .logo { height: 80px !important }` et `.logo img { height: auto !important }` :
	   seul `!important` peut les battre (seule exception à la règle « pas de !important » du thème). */
	#top #wrap_all #header .logo {
		height: 76px !important;
		width: auto !important;
	}

	#top #wrap_all #header .logo img {
		height: 100% !important;
		max-height: none !important;
		width: auto !important;
	}

	#top #header .site-nav { gap: 10px; }

	#top #header .site-nav__call,
	#top #header .site-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		border: 1px solid var(--enfold-header-color-primary);
		border-radius: 0;
		background: transparent;
		cursor: pointer;
		text-decoration: none;
		color: var(--enfold-header-color-primary);
	}

	#top #header .site-nav__call { width: 48px; }

	#top #header .site-nav__toggle {
		gap: 10px;
		padding: 0 16px;
		font-size: var(--component-font-size-sm);
		font-weight: 600;
	}

	/* Trois barres, dessinées en CSS. */
	#top #header .site-nav__bars,
	#top #header .site-nav__bars::before,
	#top #header .site-nav__bars::after {
		display: block;
		width: 20px;
		height: 2px;
		background: currentcolor;
	}

	#top #header .site-nav__bars { position: relative; }

	#top #header .site-nav__bars::before,
	#top #header .site-nav__bars::after {
		content: '';
		position: absolute;
		left: 0;
	}

	#top #header .site-nav__bars::before { top: -6px; }
	#top #header .site-nav__bars::after { top: 6px; }

	/* Le panneau. Fermé : sorti du flux d'accessibilité (visibility). */
	#top #header .site-nav__panel {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100000;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		align-self: auto;
		gap: 0;
		padding: 0 var(--component-gutter) 32px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--enfold-header-color-bg);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-12px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	#top #header .site-nav.is-open .site-nav__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	/* Le panneau défile : ses blocs gardent leur hauteur au lieu de s'écraser pour tenir dans l'écran. */
	#top #header .site-nav__panel > * { flex-shrink: 0; }

	html.site-nav-open { overflow: hidden; }

	/* Enfold donne `#header_meta { z-index: 10 }` et `#header_main { z-index: 1 }` : le panneau, contenu dans la
	   barre principale, passait donc derrière la barre d'information (visible dès 768 px). Panneau ouvert, la
	   barre principale repasse devant. */
	html.site-nav-open #top #wrap_all #header_main { z-index: 20; }

	#top #header .site-nav__panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 92px;
		border-bottom: 1px solid var(--enfold-header-color-border);
	}

	/* En-tête du panneau : le logo (celui de la barre, même hauteur) à gauche, le bouton « Fermer » à droite. */
	#top #header .site-nav__panel-head .logo { flex: 0 0 auto; }

	#top #header .site-nav__close {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		height: 48px;
		padding: 0 16px;
		border: 1px solid var(--enfold-header-color-primary);
		border-radius: 0;
		background: transparent;
		cursor: pointer;
		font-size: var(--component-font-size-sm);
		font-weight: 600;
		color: var(--enfold-header-color-primary);
	}

	/* Croix en CSS. */
	#top #header .site-nav__close-icon {
		position: relative;
		width: 18px;
		height: 18px;
	}

	#top #header .site-nav__close-icon::before,
	#top #header .site-nav__close-icon::after {
		content: '';
		position: absolute;
		top: 8px;
		left: 0;
		width: 18px;
		height: 2px;
		background: currentcolor;
	}

	#top #header .site-nav__close-icon::before { transform: rotate(45deg); }
	#top #header .site-nav__close-icon::after { transform: rotate(-45deg); }

	#top #header .site-nav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		align-self: auto;
		gap: 0;
		margin: 8px 0 0;
	}

	#top #header .site-nav__item {
		flex-wrap: wrap;
		height: auto;
		border-bottom: 1px solid var(--enfold-header-color-border);
	}

	#top #header .site-nav__link {
		flex: 1 1 0;
		padding: 18px 0;
		border-bottom: 0;
		font-family: var(--component-font-family-heading);
		font-size: var(--component-font-size-title-xs);
		font-weight: 400;
		line-height: 1.25;
		white-space: normal;
	}

	#top #header .site-nav__item.is-current > .site-nav__link { color: var(--enfold-header-color-primary); }

	/* L'entrée entière est le bouton : grande zone tactile, flèche à droite. */
	#top #header .site-nav__link--toggle {
		flex: 1 1 100%;
		justify-content: space-between;
		width: 100%;
		min-height: 64px;
		border: 0;
	}

	#top #header .site-nav__chevron {
		width: 22px;
		height: 22px;
	}

	/* Sous-menu en accordéon : bloc beige relié à l'entrée par le filet de la couleur principale. Chaque page
	   est une ligne de 52 px minimum, avec sa flèche. */
	#top #header .site-nav__sub {
		position: static;
		display: none;
		flex: 0 0 100%;
		min-width: 0;
		margin: 0 0 20px;
		padding: 4px 20px;
		border: 0;
		border-left: 3px solid var(--enfold-header-color-primary);
		background: var(--enfold-header-color-bg2);
		box-shadow: none;
	}

	#top #header .site-nav__item.is-open > .site-nav__sub {
		display: block;
		animation: none;
	}

	#top #header .site-nav__sub .site-nav__item {
		border-bottom: 0;
	}

	#top #header .site-nav__sub .site-nav__item + .site-nav__item > .site-nav__link {
		border-top: 1px solid color-mix(in srgb, var(--enfold-header-color-heading) 12%, transparent);
	}

	#top #header .site-nav__sub .site-nav__link {
		min-height: 52px;
		padding: 14px 0;
		font-family: var(--component-font-family);
		font-size: var(--component-font-size-lg);
		font-weight: 500;
		color: var(--enfold-header-color-heading);
		box-shadow: none;
	}

	/* Sur écran tactile la flèche est toujours visible. */
	#top #header .site-nav__sub .site-nav__link::after {
		opacity: 1;
		transform: none;
		color: var(--enfold-header-color-primary);
	}

	#top #header .site-nav__sub .site-nav__link:hover,
	#top #header .site-nav__sub .site-nav__link:focus-visible {
		background: none;
		box-shadow: none;
	}

	#top #header .site-nav__sub .site-nav__item.is-current > .site-nav__link { box-shadow: none; }

	/* Entrée parente ouverte : repérable dans la liste. */
	#top #header .site-nav__item.is-open > .site-nav__link--toggle { border-bottom: 0; }

	#top #header .site-nav__cta {
		height: 56px;
		margin-top: 28px;
		font-size: var(--component-font-size-md);
		background: var(--enfold-header-color-primary);
		color: var(--component-color-text-invert);
	}

	#top #header .site-nav__cta:hover,
	#top #header .site-nav__cta:focus-visible {
		background: var(--enfold-header-color-secondary);
		color: var(--component-color-text-invert);
	}

	#top #header .site-nav__contact {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 28px;
		padding-top: 24px;
		border-top: 1px solid var(--enfold-header-color-border);
	}

	#top #header .site-nav__contact p { margin: 0; }

	#top #header .site-nav__contact-label {
		font-size: var(--component-font-size-xs);
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--enfold-header-color-meta);
	}

	#top #header .site-nav__phone {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: 12px;
		min-height: 48px;
		font-family: var(--component-font-family-heading);
		font-size: var(--component-font-size-title-xs);
		line-height: 1.2;
		text-decoration: none;
		color: var(--enfold-header-color-primary);
	}

	#top #header .site-nav__contact-note {
		font-size: var(--component-font-size-sm);
		line-height: 1.5;
		color: var(--enfold-header-color-meta);
	}
}

/* La barre d'information passe dans le panneau sur petit écran. */
@media (max-width: 767.98px) {
	#top #wrap_all #header_meta { display: none; }
}

@media (max-width: 479.98px) {
	/* Sur très petit écran, le libellé « Menu » reste (public peu à l'aise avec une icône seule). */
	#top #wrap_all #header .logo { height: 64px !important; }
}

@media (prefers-reduced-motion: reduce) {
	#top #header .site-nav__panel { transition: none; transform: none; }
	#top #header .site-nav__item.is-open > .site-nav__sub { animation: none; }
	#top #header .site-nav__sub .site-nav__link,
	#top #header .site-nav__sub .site-nav__link::after { transition: none; }
}

/* Page d'accueil : le titre de page d'Enfold reste dans le DOM (unique h1 de la page, les composants de
   l'ALB émettent des h2) mais n'est pas affiché — le hero porte le message. */
body.home .title_container {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Tokens du projet (maquette : angles droits, titre display jusqu'à 74 px). */
:root {
	/* Conteneur de la maquette : max-width 1240 px + padding 60 px en content-box = contenu de 1240 px.
	   Nos conteneurs sont en border-box, donc max-width = 1240 + 2 × 60. */
	--component-max-width: 1360px;
	--component-gutter: clamp(20px, 5vw, 60px);
	--component-radius: 0;
	--component-radius-lg: 0;
	--component-font-size-display: clamp(2.75rem, 7vw, 4.625rem);   /* 74 px : titre du hero */
	--component-font-size-title: clamp(1.75rem, 3.6vw, 2.75rem);    /* 44 px : titre de section */
	--component-font-size-number: clamp(2rem, 4vw, 2.625rem);       /* 42 px : chiffres clés */
	--component-font-size-title-sm: clamp(1.375rem, 2.4vw, 2rem);  /* 32 px : chapô éditorial */
	--component-font-size-title-xs: clamp(1.375rem, 2vw, 1.6875rem); /* 27 px : titre de carte */
	--component-font-size-xl: 1.25rem;                             /* 20 px : titre de colonne */
	--component-font-size-quote: clamp(1.375rem, 2.6vw, 2.125rem); /* 34 px : citation */
	--component-font-size-lead: clamp(1.0625rem, 1.6vw, 1.1875rem); /* 19 px : chapô */
}

/* --------------------------------------------------------------------------
   Page 404 (404.php) : bandeau sombre façon « page-hero », gros « 404 » en filigrane, deux boutons et
   raccourcis vers les rubriques du menu. Pas de recherche.
   -------------------------------------------------------------------------- */
#top .error-404 {
	position: relative;
	overflow: hidden;
	background-color: var(--component-color-dark);
	color: var(--component-color-text-invert);
}

#top .error-404__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 52vw, 600px);
	padding-top: clamp(56px, 7vw, 104px);
	padding-bottom: clamp(56px, 7vw, 104px);
}

/* Chiffre en filigrane, décoratif (masqué aux lecteurs d'écran). */
#top .error-404__code {
	position: absolute;
	right: var(--component-gutter);
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
	font-family: var(--component-font-family-heading);
	font-size: clamp(9rem, 28vw, 24rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: color-mix(in srgb, var(--component-color-text-invert) 8%, transparent);
	pointer-events: none;
	user-select: none;
}

#top .error-404__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.4rem;
	max-width: 660px;
}

#top .error-404__eyebrow {
	margin: 0;
	font-size: var(--component-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--component-color-primary) 35%, var(--component-color-text-invert));
}

#top .error-404 .error-404__title {
	margin: 0;
	font-size: var(--component-font-size-display);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--component-color-text-invert);
}

#top .error-404__text {
	margin: 0;
	max-width: 56ch;
	font-size: var(--component-font-size-lead);
	line-height: 1.6;
	color: color-mix(in srgb, var(--component-color-text-invert) 88%, transparent);
}

#top .error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0.4rem 0 0;
}

#top .error-404 a.error-404__cta {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding: 0 32px;
	border: 1px solid var(--component-color-text-invert);
	border-radius: var(--component-radius);
	background: var(--component-color-text-invert);
	font-size: var(--component-font-size-md);
	font-weight: 700;
	text-decoration: none;
	color: var(--component-color-primary-dark);
	transition: background var(--component-transition), color var(--component-transition), border-color var(--component-transition);
}

#top .error-404 a.error-404__cta:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--component-color-text-invert) 88%, transparent);
	color: var(--component-color-primary-dark);
}

#top .error-404 a.error-404__cta--outline {
	border-color: color-mix(in srgb, var(--component-color-text-invert) 55%, transparent);
	background: transparent;
	font-weight: 600;
	color: var(--component-color-text-invert);
}

#top .error-404 a.error-404__cta--outline:is(:hover, :focus-visible) {
	border-color: var(--component-color-text-invert);
	background: color-mix(in srgb, var(--component-color-text-invert) 12%, transparent);
	color: var(--component-color-text-invert);
}

#top .error-404 a:focus-visible {
	outline: 3px solid currentcolor;
	outline-offset: 3px;
}

/* Raccourcis : bande claire sous le bandeau. */
#top .error-404__shortcuts {
	padding: clamp(32px, 4vw, 48px) 0;
	background-color: var(--component-color-bg2);
	color: var(--component-color-text);
}

#top .error-404__shortcuts-label {
	margin: 0 0 12px;
	font-size: var(--component-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--component-color-meta);
}

#top .error-404__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .error-404__list li { margin: 0; padding: 0; border: 0; }
#top .error-404__list li::before { display: none; }

#top .error-404__list a {
	display: inline-block;
	padding: 10px 0;
	font-size: var(--component-font-size-lg);
	font-weight: 600;
	text-decoration: none;
	color: var(--component-color-dark);
}

#top .error-404__list a:is(:hover, :focus-visible) {
	color: var(--component-color-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 767px) {
	#top .error-404__code {
		top: auto;
		bottom: 8px;
		transform: none;
		font-size: clamp(7rem, 40vw, 11rem);
	}
	#top .error-404__inner { align-items: flex-start; padding-bottom: clamp(120px, 38vw, 180px); }
	#top .error-404 a.error-404__cta { justify-content: center; width: 100%; }
}