/* Maquette d'accueil de Frédéric (design/Home-CRA.jpg.jpeg, 02/11) : couleurs relevées sur la maquette.
   Bandeau turquoise, en-tête bleu nuit sur l'accueil qui passe en blanc au défilement, hero, newsletters.
   Illustrations de la maquette : en attente des fichiers sources de Frédéric. */

/* Police des titres de la maquette : Marianne (fichiers du Système de design de l'État). */
@font-face { font-family: Marianne; font-weight: 300; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.12.1/dist/fonts/Marianne-Light.woff2") format("woff2"); }
@font-face { font-family: Marianne; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.12.1/dist/fonts/Marianne-Regular.woff2") format("woff2"); }
@font-face { font-family: Marianne; font-weight: 700; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.12.1/dist/fonts/Marianne-Bold.woff2") format("woff2"); }

:root {
	--tnd-vert-fonce: #599dac;
	--tnd-vert: #67cccc;
	--tnd-vert-clair: #a0d9db;
	--tnd-bleu-fonce: #2b2857;
	--tnd-bleu: #293377;
	--tnd-bleu-clair: #2f44a8;
	--tnd-ciel-clair: #92e5ff;
	--marianne: Marianne, Figtree, system-ui, sans-serif;
}
html { scroll-padding-top: 6.5rem; }

/* Bandeau du haut : turquoise sur toutes les pages. */
.cra-barre-haut { background: var(--tnd-vert) !important; }

/* En-tête fixé : la barre turquoise défile, l'en-tête reste (assets/js/entete.js mesure --cra-barre-h). */
header.wp-block-template-part { position: sticky; top: calc(-1 * var(--cra-barre-h, 0px)); z-index: 100; }
.cra-entete { background: #fff; transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.cra-defile .cra-entete { border-bottom-color: transparent; box-shadow: 0 10px 30px -16px rgba(17, 25, 74, 0.35); }
.cra-entete .wp-block-search__button { background: var(--tnd-vert) !important; color: #fff !important; }
.cra-entete .wp-block-search__button:hover { background: var(--tnd-vert-fonce) !important; }

/* Accueil, en haut de page : en-tête bleu nuit, logo et menu en blanc. */
.home:not(.cra-defile) .cra-entete { background: var(--tnd-bleu-fonce) linear-gradient(160deg, var(--tnd-bleu-fonce), #2a2a5e); border-bottom-color: transparent; }
.home:not(.cra-defile) .cra-entete .cra-logo { color: #fff; }
.home:not(.cra-defile) .cra-entete .cra-logo svg { filter: brightness(0) invert(1); }
.home:not(.cra-defile) .cra-entete .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.home:not(.cra-defile) .cra-entete .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon,
.home:not(.cra-defile) .cra-entete .wp-block-navigation__responsive-container-open { color: #fff; }
.cra-entete .cra-logo svg { transition: filter 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
	.cra-entete, .cra-entete .cra-logo svg { transition: none; }
}

/* Hero de l'accueil : dégradé bleu nuit (plus sombre en haut à gauche) et vagues de points (outils/generer-vague.mjs). */
.cra-accueil-hero { position: relative; overflow: hidden; margin-block-start: 0 !important; background: radial-gradient(ellipse 70% 90% at 85% 75%, rgba(47, 68, 168, 0.55) 0%, transparent 70%), linear-gradient(160deg, var(--tnd-bleu-fonce) 0%, #2a2c66 50%, var(--tnd-bleu) 100%); color: #fff; }
.cra-accueil-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: url("../assets/img/hero-vague.svg") right bottom / cover no-repeat;
	-webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 35%, #000 65%);
	mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 35%, #000 65%);
}.cra-accueil-hero > * { position: relative; }
.cra-accueil-hero h1 { font-family: var(--marianne); font-weight: 300; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.12; letter-spacing: 0; color: var(--tnd-vert); }
.cra-accueil-hero__fort { display: block; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.01em; }
.cra-accueil-hero p { font-family: var(--marianne); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.4; color: #fff !important; }
.cra-accueil-hero .wp-block-button__link { font-family: var(--marianne); font-weight: 700; background: linear-gradient(90deg, var(--tnd-vert), var(--tnd-vert-fonce)) !important; color: #fff !important; border-radius: 999px; }
.cra-accueil-hero .wp-block-button__link:hover { background: var(--tnd-vert-fonce) !important; }
.cra-accueil-hero .wp-block-image img { border-radius: 0 !important; }

/* « Les informations à la une » : fond bleuté et grandes courbes claires (Fond-Actu.svg de Frédéric, 02/11 → fond-actu.webp). */
.cra-accueil-une { position: relative; overflow: hidden; background: #ecf4f7 url("../assets/img/fond-actu.webp") center / cover no-repeat !important; }
.cra-accueil-une > * { position: relative; z-index: 1; }

/* Bandeau des newsletters : dégradé turquoise, enveloppe, titre blanc, bouton bleu. */
.cra-accueil-lettres { position: relative; background: linear-gradient(90deg, var(--tnd-vert) 0%, var(--tnd-vert-clair) 100%) !important; padding-left: 8.5rem !important; }
.cra-accueil-lettres::before {
	content: ""; position: absolute; left: 2.75rem; top: 50%; width: 4rem; height: 4rem; transform: translateY(-50%);
	/* Icône de Frédéric (Icn-Newsletter.svg, 02/11 → icone-newsletter.webp). */
	background: url("../assets/img/icone-newsletter.webp") center / contain no-repeat;
}
.cra-accueil-lettres h2 { font-family: var(--marianne); font-weight: 700; color: #fff; }
.cra-accueil-lettres p { color: var(--tnd-bleu-fonce) !important; }
.cra-accueil-lettres .cra-nl-bouton { background: var(--tnd-bleu) !important; color: #fff !important; }
.cra-accueil-lettres .cra-nl-bouton:hover { background: var(--wp--preset--color--marine) !important; }
@media (max-width: 781px) {
	.cra-accueil-lettres { padding-left: 1.75rem !important; }
	.cra-accueil-lettres::before { position: static; transform: none; width: 3.25rem; height: 3.25rem; }
}

/* Pied de page : trame de points en bas à droite (Texture-Point.svg de Frédéric, 3 Mo → texture-point.webp 720 px, 52 Ko). */
.cra-pied { position: relative; overflow: hidden; }
.cra-pied::after {
	content: ""; position: absolute; right: -4%; bottom: -12%; width: min(720px, 60%); aspect-ratio: 720 / 509; pointer-events: none;
	background: url("../assets/img/texture-point.webp") center / contain no-repeat; opacity: 0.9;
}
.cra-pied > * { position: relative; z-index: 1; }

/* Haut de l'accueil, maquette de Frédéric du 04/11 : un grand personnage à droite, posé en bas du bandeau et coupé
   par lui ; les 3 personnages se succèdent en fondu (assets/js/hero-accueil.js). La colonne descend jusqu'au bas
   du bandeau en annulant sa marge basse. */
.cra-accueil-hero .cra-bandeau__droite { align-self: flex-end !important; margin-bottom: calc(-1 * clamp(2.5rem, 5vw, 4.5rem)); }
.cra-hero-persos { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1100 / 931; }
.cra-hero-perso { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; opacity: 0; transition: opacity 1.2s ease; }
.cra-hero-perso.is-actif { opacity: 1; }
.cra-hero-pause {
	position: absolute; right: 0; bottom: 1.25rem; z-index: 2; width: 2.5rem; height: 2.5rem; padding: 0; border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px; background: rgba(43, 40, 87, 0.55); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.cra-hero-pause[hidden] { display: none; }
.cra-hero-pause:hover { background: rgba(43, 40, 87, 0.85); }
.cra-hero-pause:focus-visible { outline: 3px solid var(--tnd-vert); outline-offset: 3px; }
/* Icône pause (deux barres) ; lecture (triangle) une fois en pause. */
.cra-hero-pause__icone { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.cra-hero-pause.is-pause .cra-hero-pause__icone { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
@media (prefers-reduced-motion: reduce) {
	.cra-hero-perso { transition: none; }
}
@media (max-width: 781px) {
	.cra-hero-persos { max-width: 340px; }
}

/* Bloc newsletters : trame de points de Frédéric (Texture-Point-Newsletter.svg du 04/11 → texture-point-newsletter.webp). */
.cra-accueil-lettres { overflow: hidden; }
.cra-accueil-lettres::after {
	content: ""; position: absolute; right: -2%; top: 50%; width: min(560px, 55%); aspect-ratio: 900 / 646; transform: translateY(-50%);
	background: url("../assets/img/texture-point-newsletter.webp") center / contain no-repeat; pointer-events: none; opacity: 0.85;
}
.cra-accueil-lettres > * { position: relative; z-index: 1; }