/**
 * Cyril-Elec — styles principaux (no-build, CSS vanilla).
 *
 * Design tokens en :root (palette + typo relevées depuis fusion_options, voir
 * docs/reference/tokens/tokens.md côté prod). Le calage visuel pixel-accurate
 * (header/footer, sections) arrive en T5+.
 *
 * @package cyril-elec
 */

:root {
	/* Palette de marque (Avada color_palette relevée) */
	--color-white: #ffffff;
	--color-grey-50: #f7f7f7;
	--color-grey-200: #e0e0e0;
	--color-grey-400: #bdbdbd;
	--color-primary: #0ab3d1; /* cyan de marque : liens, boutons, footer, header au scroll */
	--color-title: #0ab3d1; /* couleur des titres de section H2/H3 — indépendante du cyan de marque (par défaut identique) */
	--color-header: #009abc; /* fond du header au repos (sticky -> --color-primary au scroll, cf. .is-stuck) */
	--color-grey-600: #757575;
	--color-navy: #003e70; /* texte courant */
	--color-orange: #db6606; /* accent */
	--color-orange-bright: #ff9900;
	--color-accent: #ff8a00; /* accent ambre : couleur des boutons d'appel à l'action (règle 60-30-10, ~10% du visuel) */
	--color-accent-strong: #db6606; /* ambre foncé : survol/appui des boutons accent */
	--color-ink: #4c4c4c;
	--overlay-dark: rgba(0, 0, 0, 0.64); /* overlay sombre sur fond photo (compteurs, formulaire, contact — data-bg live) */
	--overlay-navy: rgba(0, 62, 112, 0.35); /* scrim navy sur le slider plein écran (T16) — texte lisible sur photo/vidéo */

	/* Sections sombres (Niveaux de qualification, Processus, Primes & fiscalité) :
	   fond dégradé + nappes « aurore » animées. Décoratif (effet tech), hors
	   palette de marque mais éditable via l'écran « Couleurs du site ». */
	--section-dark-bg: #0c2233; /* base sombre (repli sous le dégradé) */
	--section-dark-1: #0b2a3a; /* dégradé — début (teal foncé) */
	--section-dark-2: #0f2340; /* dégradé — milieu (navy foncé) */
	--section-dark-3: #171a45; /* dégradé — fin (indigo) */
	--aurora-1: rgba(10, 179, 209, 0.48); /* nappe animée — teal */
	--aurora-2: rgba(34, 78, 168, 0.48); /* nappe animée — bleu */
	--aurora-3: rgba(20, 130, 190, 0.40); /* nappe animée — bleu clair */
	--aurora-4: rgba(74, 58, 150, 0.40); /* nappe animée — indigo */

	/* Typo */
	--font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--fs-body: 16px;
	--fs-h1: 32px;
	--fs-h2: 26px;
	--fs-h3: 22px;
	--fs-h4: 16px;

	/* Divers */
	--container-max: 1200px;
	--radius: 6px;
	--transition: 200ms ease;
}

/*
 * Polices — Montserrat auto-hébergée (Google Fonts v31, sous-ensemble latin
 * uniquement : couvre les caractères accentués français). Fichiers dans
 * assets/fonts/, récupérés une fois pour toutes (pas d'appel à
 * fonts.googleapis.com/fonts.gstatic.com au chargement des pages — voir
 * CLAUDE.md, convention no-build / self-host).
 */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300;
	font-display: optional;
	src: url("../fonts/montserrat-v31-latin-300.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: optional;
	src: url("../fonts/montserrat-v31-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	font-display: optional;
	src: url("../fonts/montserrat-v31-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: optional;
	src: url("../fonts/montserrat-v31-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: optional;
	src: url("../fonts/montserrat-v31-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reset léger */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--color-navy);
	background-color: var(--color-white);
}

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

/* Embeds (avis Google, cartes, WPForms) : jamais de débordement horizontal. */
iframe {
	max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-body);
	line-height: 1.25;
	margin-top: 0;
}

h1 {
	font-size: var(--fs-h1);
	color: var(--color-grey-600);
}

h2 {
	font-size: var(--fs-h2);
	color: var(--color-title);
}

h3 {
	font-size: var(--fs-h3);
	color: var(--color-title);
}

h4 {
	font-size: var(--fs-h4);
}

a {
	color: var(--color-primary);
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--color-orange);
}

/* Layout */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.grid-auto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, 3vw, 2rem);
}

/* Rythme vertical commun à toutes les sections ACF Flexible Content de la
   page d'accueil (champ `sections`, cf. inc/acf-fields.php et front-page.php).
   L'habillage propre à chaque layout (fond, disposition…) vit dans
   assets/css/sections.css, sous la classe `.section--{layout}` associée. */
.section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	/* Décalage pour l'en-tête sticky (~100px) : au saut vers une ancre
	   #section, le titre n'est plus masqué sous la barre. */
	scroll-margin-top: 110px;
}

/* ==========================================================================
   En-tête (.site-header) — iso du layout Avada 442 « Header - Logo + Nav »
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	background-color: var(--color-header); /* #009abc au repos */
	transition: background-color var(--transition);
}

/* Classe ajoutée par cyrilElecStickyHeaderState() (assets/js/main.js) dès que
   la barre sticky a quitté sa position naturelle en haut de page. */
.site-header.is-stuck {
	background-color: var(--color-primary); /* #0ab3d1 au scroll */
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 1.5rem;
	min-height: 100px;
}

.site-header__branding {
	flex: 0 0 auto;
	margin: 0;
}

.site-header__branding .custom-logo {
	display: block;
	max-width: 250px;
	width: auto;
	height: auto;
}

.site-header__site-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

.site-header__site-title a {
	color: var(--color-white);
}

/* Menu principal (wp_nav_menu 'main_navigation') */
.site-header__nav {
	flex: 1 1 auto;
}

/* Espacement resserré depuis l'ajout de la bulle FAQ : le conteneur plafonne à
   1200px (soit ~1136px utiles) et doit désormais loger logo + menu + bulle.
   Avec les 45px d'origine (repris d'Avada), « CONTACT » repassait à la ligne.
   `nowrap` garantit qu'un débordement se verrait tout de suite plutôt que de
   casser silencieusement la barre en deux lignes. */
.site-header__nav ul {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__nav li {
	white-space: nowrap;
}

.site-header__nav a {
	position: relative;
	display: inline-block;
	padding-block: 6px;
	color: var(--color-white);
	font-size: 15px;
	text-transform: none;
	text-decoration: none;
	transition: color var(--transition);
}

/* Soulignement orange : se déploie de gauche à droite au survol, et reste
   affiché sur l'entrée active (classe `.is-active`, posée par
   cyrilElecMenuActiveState() dans main.js — le menu étant fait d'ancres
   one-page, WordPress ne pose jamais `current-menu-item` dessus).
   `scaleX` plutôt qu'une largeur animée : la transformation est composée par
   le GPU et n'entraîne aucun recalcul de mise en page image par image. */
.site-header__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 2px;
	background-color: var(--color-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--transition);
}

.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after,
.site-header__nav .is-active > a::after,
.site-header__nav .current-menu-item > a::after {
	transform: scaleX(1);
}

.site-header__nav a:hover,
.site-header__nav a:focus {
	color: var(--color-navy); /* #003e70 */
}

.site-header__nav .current-menu-item > a,
.site-header__nav .is-active > a {
	color: var(--color-white);
}

/* Bulle « On vous répond » → page FAQ (cf. header.php, inc/faq.php).
   Deux libellés sont rendus côte à côte dans le HTML ; un seul est visible à
   la fois selon la largeur, ce qui évite tout JS. Teinte pilotée par les
   tokens orange, donc modifiable depuis « Couleurs du site ». */
.site-header__faq {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border-radius: 16px;
	background-color: var(--color-orange);
	color: var(--color-white);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--transition);
}

/* Ergot de la bulle, pointant vers le bas. */
.site-header__faq::after {
	content: "";
	position: absolute;
	left: 18px;
	bottom: -6px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid var(--color-orange);
	transition: border-top-color var(--transition);
}

.site-header__faq:hover,
.site-header__faq:focus-visible {
	background-color: var(--color-orange-bright);
	color: var(--color-white);
	text-decoration: none;
}

.site-header__faq:hover::after,
.site-header__faq:focus-visible::after {
	border-top-color: var(--color-orange-bright);
}

.site-header__faq-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Texte au survol, posé SOUS la pastille et hors du flux : il peut donc être
   long sans jamais repousser le menu. Un texte qui s'élargirait à l'intérieur
   de la pastille réclamerait ~145px, alors qu'il n'en reste qu'une centaine
   dans la barre — la barre se casserait en deux lignes au survol. */
.site-header__faq-tip {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 1;
	padding: 0.4rem 0.7rem;
	border-radius: var(--radius);
	background-color: var(--color-navy);
	color: var(--color-white);
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition), visibility var(--transition);
}

.site-header__faq:hover .site-header__faq-tip,
.site-header__faq:focus-visible .site-header__faq-tip {
	opacity: 1;
	visibility: visible;
}

/* Bouton burger — injecté dans le DOM par cyrilElecMobileMenuToggle() (main.js),
   masqué au-dessus du breakpoint de bascule (cf. media query plus bas). */
.site-header__toggle {
	display: none;
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	background-color: var(--color-primary);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}

.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	background-color: currentColor;
	transform: translateX(-50%);
	transition:
		transform var(--transition),
		background-color var(--transition);
}

.site-header__toggle-icon {
	top: 50%;
	margin-top: -1px;
}

.site-header__toggle-icon::before {
	content: "";
	top: -7px;
}

.site-header__toggle-icon::after {
	content: "";
	top: 7px;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
	background-color: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before {
	top: 0;
	transform: translateX(-50%) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after {
	top: 0;
	transform: translateX(-50%) rotate(-45deg);
}

/* Bascule en menu burger. Le breakpoint d'origine était 895px (repris de la
   config Avada `custom_breakpoint="895"`), mais la bulle FAQ occupe désormais
   le bout de la barre : en dessous de ~1150px, logo + menu + bulle ne tiennent
   plus sur une ligne et « CONTACT » repassait dessous. Ce seuil dépend
   directement de la longueur du libellé de la bulle (« FAQ » par défaut) et du
   nombre d'entrées du menu — le rallonger ou ajouter une 6e entrée obligera à
   le remonter. */
@media (max-width: 1149px) {
	.site-header__inner {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: 15px;
	}

	.site-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.site-header__nav {
		flex-basis: 100%;
	}

	/* Bulle FAQ : le menu passe en flex-basis 100% et l'en-tête en flex-wrap,
	   ce qui renverrait la bulle sur une 3e ligne (elle est après le menu dans
	   le DOM). On force donc l'ordre de la première rangée : logo, bulle,
	   burger — le menu déroulé occupant la seconde. Contrepartie assumée :
	   l'ordre de tabulation clavier inverse bulle et burger, deux contrôles
	   voisins. */
	.site-header__faq {
		order: 1;
		margin-left: auto;
		padding: 0.4rem 0.7rem;
		font-size: 12px;
	}

	.site-header__toggle {
		order: 2;
	}

	.site-header__nav {
		order: 3;
	}

	.site-header__faq::after {
		left: 14px;
	}

	/* Pas de survol au doigt : l'infobulle ne servirait à rien et pourrait
	   apparaître de façon parasite au tap (survol émulé). */
	.site-header__faq-tip {
		display: none;
	}

	.site-header__nav.is-collapsed {
		display: none;
	}

	.site-header__nav ul {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		background-color: var(--color-navy); /* menu déroulé : fond navy foncé */
	}

	.site-header__nav li {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.site-header__nav a {
		display: block;
		padding: 0.9rem 1rem;
	}

	.site-header__nav .current-menu-item > a,
	.site-header__nav .is-active > a {
		background-color: var(--color-primary); /* item actif : fond cyan */
		text-decoration: none;
	}

	/* Le menu déroulé marque déjà l'entrée active par un fond cyan pleine
	   largeur : la barre orange ferait doublon et se confondrait avec les
	   séparateurs entre items. */
	.site-header__nav a::after {
		display: none;
	}
}

/* ==========================================================================
   Pied de page (.site-footer) — bandeau multi-colonnes + barre du bas,
   paramétrable via Apparence → Pied de page (cf. inc/footer.php, footer.php)
   ========================================================================== */

.site-footer {
	background: linear-gradient(120deg, #0a1a24 0%, #0f2733 55%, #12314a 100%);
	color: rgba(255, 255, 255, 0.82);
}

/* --- Bandeau supérieur (logo/blurb + colonnes de liens) --- */
.site-footer__band {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.site-footer__band-inner {
	display: grid;
	grid-template-columns: minmax(220px, 1.2fr) 3fr;
	gap: clamp(2rem, 6vw, 4rem);
	align-items: start;
}

.site-footer__logo img {
	max-width: 190px;
	height: auto;
}

.site-footer__logo-text {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-white);
}

.site-footer__blurb {
	margin: 1rem 0 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
}

.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

.site-footer__col-title {
	margin: 0 0 1.1rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-white);
}

.site-footer__col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.site-footer__col-list a,
.site-footer__col-list span {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	font-size: 0.95rem;
	transition: color var(--transition);
}

.site-footer__col-list a:hover,
.site-footer__col-list a:focus {
	color: var(--color-primary);
}

/* --- Barre du bas (copyright + légal + crédit) --- */
.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: 1.25rem;
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	font-size: 0.8125rem;
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__copyright {
	color: rgba(255, 255, 255, 0.65);
}

.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.site-footer__legal a,
.site-footer__credit a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color var(--transition);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus,
.site-footer__credit a:hover,
.site-footer__credit a:focus {
	color: var(--color-primary);
}

.site-footer__credit {
	color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 782px) {
	.site-footer__band-inner {
		grid-template-columns: 1fr;
	}

	.site-footer__bottom-inner {
		justify-content: center;
		text-align: center;
	}

	.site-footer__legal {
		justify-content: center;
	}
}

/* Micro-interactions sobres */
button,
.btn,
input[type="submit"] {
	font-family: inherit;
	cursor: pointer;
	border-radius: var(--radius);
	transition:
		background-color var(--transition),
		color var(--transition),
		border-color var(--transition),
		box-shadow var(--transition),
		transform var(--transition);
}

.btn:hover,
button:hover {
	transform: translateY(-1px);
}

/* Habillage visuel de `.btn` (le style structurel — radius, transition — est
   déjà porté par la règle groupée ci-dessus). Premier bouton réel du thème :
   CTA du Hero (T6) ; classe générique réutilisable par les prochaines
   sections (ex. layout `cta_raccourci`, T9). */
.btn {
	display: inline-block;
	padding: 0.85em 2em;
	/* Accent ambre : les CTA « claquent » sur la base cyan/navy/blanc (contraste
	   chaud/froid), avec une ombre colorée douce pour donner du relief. */
	background-color: var(--color-accent);
	color: var(--color-white);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: 0;
	box-shadow: 0 6px 16px rgba(219, 102, 6, 0.28);
}

.btn:hover,
.btn:focus-visible {
	background-color: var(--color-accent-strong);
	color: var(--color-white);
	box-shadow: 0 8px 20px rgba(219, 102, 6, 0.34);
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Lien d'évitement : caché, mais réapparaît au focus clavier (accessibilité). */
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	margin: 0;
	padding: 0.7rem 1.1rem;
	background-color: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius);
	font-weight: 600;
	text-decoration: none;
}

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

/* ==========================================================================
   Bandeau de consentement cookies (RGPD) — cf. inc/cookie-consent.php,
   assets/js/cookie-consent.js
   ========================================================================== */

.cookie-banner {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 9999;
	max-width: 720px;
	margin-inline: auto;
	background: #0f2733;
	color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.cookie-banner[hidden] {
	display: none;
}

.cookie-banner__inner {
	padding: clamp(1rem, 3vw, 1.5rem);
}

.cookie-banner__text {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	line-height: 1.55;
}

.cookie-banner__policy {
	color: var(--color-primary);
	text-decoration: underline;
	white-space: nowrap;
}

.cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: flex-end;
}

.cookie-btn {
	padding: 0.6rem 1.1rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--transition),
		color var(--transition),
		border-color var(--transition);
}

.cookie-btn--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.cookie-btn--primary:hover,
.cookie-btn--primary:focus {
	background-color: var(--color-primary-dark, #0284a3);
}

.cookie-btn--ghost {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.35);
}

.cookie-btn--ghost:hover,
.cookie-btn--ghost:focus {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Panneau « Personnaliser » */
.cookie-banner__prefs {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.cookie-banner__prefs[hidden] {
	display: none;
}

.cookie-banner__cats {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.cookie-banner__cat-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.925rem;
}

.cookie-banner__cat-label input {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--color-primary);
}

.cookie-banner__always {
	margin-left: auto;
	font-style: normal;
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
}

.cookie-banner__cat-desc {
	margin: 0.35rem 0 0 1.55rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}

.cookie-banner__prefs-actions {
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 600px) {
	.cookie-banner__actions {
		justify-content: stretch;
	}

	.cookie-banner__actions .cookie-btn {
		flex: 1 1 100%;
	}
}

/* Petit bouton flottant « Gérer les cookies » (rouvre le panneau) */
.cookie-toggle {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: var(--color-white);
	background: #0f2733;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	transition:
		background-color var(--transition),
		color var(--transition),
		transform var(--transition);
}

.cookie-toggle[hidden] {
	display: none;
}

.cookie-toggle svg {
	width: 24px;
	height: 24px;
}

.cookie-toggle:hover,
.cookie-toggle:focus {
	background-color: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
}

/* Bouton « retour en haut » (cf. assets/js/back-to-top.js, footer.php) */
.back-to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: var(--color-white);
	background: var(--color-primary);
	border: none;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity var(--transition),
		visibility var(--transition),
		transform var(--transition),
		background-color var(--transition);
}

.back-to-top[hidden] {
	display: none;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top svg {
	width: 24px;
	height: 24px;
}

.back-to-top:hover,
.back-to-top:focus {
	background-color: var(--color-navy);
	transform: translateY(-2px);
}

/* ==========================================================================
   Image de fond universelle des sections (champs ACF bg_image / bg_overlay,
   injectée par cyril_elec_inject_section_bg() — cf. front-page.php)
   ========================================================================== */

.section--has-bg {
	position: relative;
	isolation: isolate;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	color: var(--color-white);
}

/* Voile d'assombrissement au-dessus de l'image, sous le contenu. Opacité
   pilotée par --bg-overlay (posée en inline, 0 à 0.9). */
.section--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(2, 20, 33, var(--bg-overlay, 0.45));
	pointer-events: none;
}

/* Titres/textes de niveau section repassent en blanc pour rester lisibles sur
   la photo. Les composants "carte" (fond propre) gardent leurs couleurs. */
.section--has-bg > .container > .section__title,
.section--has-bg [class$="__title"]:not([class*="card"]):not([class*="bloc-title"]),
.section--has-bg [class$="__subtitle"],
.section--has-bg [class$="__intro"],
.section--has-bg [class$="__text"]:not([class*="card"]) {
	color: var(--color-white);
}

/* ==========================================================================
   Carte d'article (.blog-card) — composant réutilisable
   Rendu par template-parts/blog/card.php, consommé par l'aperçu de l'accueil
   (section `blog_apercu`), le listing /blog (home.php) et les archives
   (archive.php). Vit ici (et pas dans blog.css) parce que l'accueil l'utilise
   aussi : main.css est chargé partout.
   ========================================================================== */

.blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--color-white);
	color: var(--color-ink);
	border: 1px solid var(--color-grey-200);
	border-radius: var(--radius);
	box-shadow: 0 6px 18px rgba(0, 62, 112, 0.08);
	transition:
		transform var(--transition),
		box-shadow var(--transition),
		border-color var(--transition);
}

.blog-card:hover,
.blog-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--color-primary);
	box-shadow: 0 14px 32px rgba(0, 62, 112, 0.16);
}

/* Vignette en ratio fixe : la grille reste alignée quelles que soient les
   proportions des images à la une téléversées par le client. */
.blog-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-grey-50);
}

.blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.blog-card:hover .blog-card__image {
	transform: scale(1.04);
}

/* Repli quand l'article n'a pas d'image à la une : dégradé de marque + éclair. */
.blog-card__media-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-header) 0%, var(--color-navy) 100%);
	color: rgba(255, 255, 255, 0.72);
}

.blog-card__media-fallback svg {
	width: 42px;
	height: 42px;
}

.blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem;
}

.blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-grey-600);
}

.blog-card__cat {
	padding: 0.2em 0.7em;
	background-color: rgba(10, 179, 209, 0.12);
	color: var(--color-header);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
}

.blog-card__title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-navy);
}

.blog-card__title-link {
	color: inherit;
	text-decoration: none;
}

/* Lien « étiré » : toute la carte est cliquable, mais un seul lien réel dans le
   DOM (le titre) — pas de liens imbriqués, texte de lien explicite. */
.blog-card__title-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.blog-card:hover .blog-card__title,
.blog-card:focus-within .blog-card__title {
	color: var(--color-header);
}

.blog-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-ink);
}

.blog-card__more {
	margin-top: auto;
	padding-top: 0.25rem;
	color: var(--color-accent-strong);
	font-size: 0.875rem;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.blog-card,
	.blog-card__image {
		transition: none;
	}

	.blog-card:hover,
	.blog-card:focus-within {
		transform: none;
	}

	.blog-card:hover .blog-card__image {
		transform: none;
	}
}