/*
Theme Name: Liatopie
Template: twentytwentyfive
Description: Thème enfant Liatopie, construit sur Twenty Twenty-Five. Porte la charte graphique et les compositions du site liatopie.fr.
Author: Liatopie
Version: 1.0
Text Domain: liatopie
*/

/* Supprime la marge de respiration que Twenty Twenty-Five ajoute par défaut
   en bas du conteneur de contenu (classe .has-global-padding) : sans ça, le
   fond Ivoire du site apparaît en filet entre la dernière section de page
   (souvent Pétrole) et le footer. Les sections gardent leur propre padding
   inline, donc rien d'autre n'est affecté. */
main.wp-block-group > .has-global-padding {
	padding-bottom: 0 !important;
}
main.wp-block-group {
	margin-top: 0 !important;
}

/* Le bloc Logo du site réservait une hauteur de 140px (celle du réglage de
   largeur), bien plus que la hauteur réelle du logo, ce qui gonflait tout
   le header. On force la hauteur à suivre le contenu réel. */
.wp-block-site-logo {
	height: auto !important;
}
.wp-block-site-logo img {
	height: auto !important;
	max-height: 44px;
	width: auto !important;
}

/* Deuxième source du même filet Ivoire : WordPress applique une marge haute
   par défaut (~19px) sur le template part de pied de page. */
footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* Le gabarit de page affiche automatiquement le titre de la page au-dessus
   du contenu. Chaque page de ce thème fournit son propre titre dans son
   contenu (H1 de hero sur l'accueil, bandeau titre d'offre sur les pages
   d'offres) : le titre automatique double toujours quelque chose, donc on
   le masque partout. */
.wp-block-post-title {
	display: none;
}

/* Label repère tracké, style "eyebrow", pour structurer les sections comme
   sur les références 2026 (Chat4Good, Specia1ne) plutôt que de tout confier
   aux tailles de titre. */
/* Soulignement Cuivre pour mettre en valeur un groupe de mots dans un titre
   (repris du design généré le 13/09 : plus lisible qu'un simple gras dans
   un H1). À appliquer à la main autour des mots-clés d'un titre. */
.liatopie-accent {
	background-image: linear-gradient(rgba(224, 122, 46, 0.9), rgba(224, 122, 46, 0.9));
	background-size: 100% 0.14em;
	background-position: 0 92%;
	background-repeat: no-repeat;
	padding-bottom: 0.02em;
}

/* Halo dégradé en fond des bandeaux sombres (hero, bandeau titre d'offre,
   CTA final) : deux taches floues Cuivre et Pétrole, pour un rendu moins
   plat que l'aplat de couleur pur. Le bloc porteur doit être en
   position:relative + overflow:hidden (voir .liatopie-halo ci-dessous). */
.liatopie-halo {
	position: relative;
	overflow: hidden;
}
.liatopie-halo::before,
.liatopie-halo::after {
	content: "";
	position: absolute;
	border-radius: 9999px;
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}
.liatopie-halo::before {
	top: -160px;
	right: -160px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(224, 122, 46, 0.35), transparent 70%);
}
.liatopie-halo::after {
	bottom: -200px;
	left: 20%;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(0, 69, 101, 0.9), transparent 70%);
}
.liatopie-halo > * {
	position: relative;
	z-index: 1;
}

/* Applique le halo automatiquement aux bandeaux déjà publiés (bandeau titre
   d'offre, CTA final Pétrole) : ces sélecteurs existent déjà dans le contenu
   publié, donc l'effet s'active sans repasser par les pages. */
.liatopie-offre-bandeau,
.wp-block-post-content > .has-petrole-background-color {
	position: relative;
	overflow: hidden;
}
.liatopie-offre-bandeau::before,
.liatopie-offre-bandeau::after,
.wp-block-post-content > .has-petrole-background-color::before,
.wp-block-post-content > .has-petrole-background-color::after {
	content: "";
	position: absolute;
	border-radius: 9999px;
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}
.liatopie-offre-bandeau::before,
.wp-block-post-content > .has-petrole-background-color::before {
	top: -160px;
	right: -160px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(224, 122, 46, 0.35), transparent 70%);
}
.liatopie-offre-bandeau::after,
.wp-block-post-content > .has-petrole-background-color::after {
	bottom: -200px;
	left: 20%;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(0, 69, 101, 0.9), transparent 70%);
}
.liatopie-offre-bandeau > *,
.wp-block-post-content > .has-petrole-background-color > * {
	position: relative;
	z-index: 1;
}

.liatopie-eyebrow {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-blue);
	margin: 0 0 8px 0;
}

/* ==========================================================================
   Renforcement de la séparation des blocs et de la mise en valeur du texte
   — audit du 13/09/2026 : l'alternance Ivoire/Blanc ne se voyait pas assez,
   le texte en gras existant ne ressortait pas. Corrections purement CSS,
   donc effectives immédiatement sur les pages déjà publiées.
   ========================================================================== */

/* Séparateur fin entre chaque section de contenu, INDÉPENDANT de la couleur
   de fond : la césure reste visible même quand deux sections voisines ont
   des teintes proches (Ivoire sur Ivoire, Blanc sur Blanc). */
main.wp-block-group .entry-content.wp-block-post-content > .wp-block-group {
	border-top: 1px solid rgba(44, 44, 42, 0.08);
}
main.wp-block-group .entry-content.wp-block-post-content > .wp-block-group:first-child {
	border-top: none;
}
/* On ne trace pas ce filet sur les bandeaux de couleur pleine (Pétrole,
   Pétrole Nuit, Cuivre) : la rupture de couleur suffit déjà à les isoler. */
main.wp-block-group .entry-content.wp-block-post-content > .wp-block-group.has-petrole-background-color,
main.wp-block-group .entry-content.wp-block-post-content > .wp-block-group.has-petrole-nuit-background-color,
main.wp-block-group .entry-content.wp-block-post-content > .wp-block-group.liatopie-offre-bandeau {
	border-top: none;
}

/* Accent visuel sur chaque H2 de section : petite barre Cuivre avant le
   texte, pour que le début d'une section se voie au premier coup d'œil
   même sur un fond peu contrasté. */
.wp-block-post-content h2,
.entry-content h2 {
	position: relative;
	padding-left: 20px;
}
.wp-block-post-content h2::before,
.entry-content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	background-color: var(--wp--preset--color--cuivre);
	border-radius: 2px;
}
/* Même accent sur les H3, plus fin, pour que la hiérarchie H2 > H3 reste
   visible au lieu de s'arrêter net au niveau H2. */
.wp-block-post-content h3,
.entry-content h3 {
	position: relative;
	padding-left: 14px;
}
.wp-block-post-content h3::before,
.entry-content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	bottom: 0.1em;
	width: 3px;
	background-color: var(--wp--preset--color--slate-blue);
	border-radius: 2px;
}

/* Texte en gras : coloré et en Sora, pour qu'il fonctionne comme une vraie
   mise en valeur plutôt qu'un simple graissage de la police système. */
.wp-block-post-content strong,
.entry-content strong {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	color: var(--wp--preset--color--petrole);
}

/* Callout (encart Cuivre) et "Pour qui ce n'est pas" (encart Slate Blue) :
   renforcés pour ressortir davantage du corps de texte environnant. */
.liatopie-callout {
	background-color: rgba(224, 122, 46, 0.12);
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--petrole);
}
.liatopie-pour-qui-pas {
	background-color: rgba(91, 154, 160, 0.14);
	border-left: 3px solid var(--wp--preset--color--slate-blue);
	border-radius: 0 8px 8px 0;
}

/* Kicker de bandeau d'offre : légèrement agrandi pour plus de présence. */
.liatopie-offre-kicker {
	font-size: 14px;
	padding: 6px 14px;
}

/* Catalogue éditorial (cascade des offres) : titre-lien surdimensionné,
   inspiré de Chat4Good Technologies. */
.liatopie-catalogue-titre {
	margin: 0;
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1.15;
}
.liatopie-catalogue-titre a {
	color: var(--wp--preset--color--petrole);
	text-decoration: none;
}
.liatopie-catalogue-titre a:hover {
	color: var(--wp--preset--color--cuivre);
}
.liatopie-catalogue-fleche {
	display: inline-block;
	transition: transform 0.2s ease;
}
.liatopie-catalogue-titre a:hover .liatopie-catalogue-fleche {
	transform: translateX(6px);
}
.liatopie-catalogue-item p.has-standard-font-size {
	max-width: 640px;
	margin-top: 8px;
}

/* Bouton "Prendre RDV" mis en évidence dans la navigation, cf. structure de menu validée le 1er septembre 2026 */
.wp-block-navigation-item.is-style-liatopie-cta > a {
	background-color: var(--wp--preset--color--cuivre);
	color: var(--wp--preset--color--blanc) !important;
	padding: 10px 20px;
	border-radius: 9999px;
}
.wp-block-navigation-item.is-style-liatopie-cta > a:hover {
	background-color: var(--wp--preset--color--petrole-nuit);
	color: var(--wp--preset--color--blanc) !important;
}

/* Menus déroulants (Formations, Accompagnement) : le panneau du sous-menu a
   un fond blanc par défaut, mais héritait de la couleur blanche du texte de
   la nav principale — texte invisible sur fond blanc. On fixe une couleur
   de texte sombre propre au panneau. */
.wp-block-navigation__submenu-container {
	color: #004565 !important;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 41, 61, 0.18);
}
.wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	color: #004565 !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
	color: #E07A2E !important;
}

/* Bouton secondaire (variant "outline") : lien souligné animé, direction 2026 revue le 12/09 — remplace l'ancien cadre 2px Pétrole */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: none;
	padding: 0;
	color: var(--wp--preset--color--petrole);
	background-color: transparent;
	position: relative;
	border-radius: 0;
}
.wp-block-button.is-style-outline > .wp-block-button__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background-color: var(--wp--preset--color--cuivre);
	transform: scaleX(0.3);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover::after {
	transform: scaleX(1);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--petrole);
}

/* Repère numéroté (01, 02, 03...) : gros caractère fin en fond de section, direction éditoriale Specia1ne */
.liatopie-repere {
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--repere);
	font-weight: 600;
	color: #004565;
	opacity: 0.12;
	line-height: 1;
	margin: 0;
}

/* ==========================================================================
   Composants "Pages Formations et Accompagnement" — brief du 12/09/2026
   ========================================================================== */

/* 1. Bandeau titre d'offre : fond Pétrole plein, kicker Cuivre, H1 dédié
   (Sora 700, 28px desktop / 22px mobile) — ne touche pas au H1 global du
   thème, cette taille est propre à ce composant. */
.liatopie-offre-bandeau {
	background-color: var(--wp--preset--color--petrole-nuit);
	color: var(--wp--preset--color--ivoire);
}
.liatopie-offre-kicker {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cuivre);
	background-color: #00293D;
	padding: 4px 12px;
	border-radius: 4px;
	margin: 0 0 16px 0;
}
.liatopie-offre-titre {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	color: var(--wp--preset--color--ivoire);
	font-size: 22px;
	line-height: 1.3;
	margin: 0;
}
@media (min-width: 782px) {
	.liatopie-offre-titre {
		font-size: 28px;
	}
}

/* 2. Accroche (taille H1 mais balise p, pour garder un seul vrai H1 par
   page) + lede. */
.liatopie-offre-accroche {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	color: var(--wp--preset--color--petrole);
	font-size: clamp(28px, 4vw, 32px);
	line-height: 1.25;
	margin: 0 0 16px 0;
}
.liatopie-offre-lede {
	font-size: 19px;
	line-height: 1.6;
	margin: 0;
}

/* 3. Bandeau modalités (formations) : carte blanche, grille 4 colonnes
   (2 sur mobile). */
.liatopie-modalites {
	background-color: var(--wp--preset--color--blanc);
	border-radius: 8px;
	padding: 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 600px) {
	.liatopie-modalites {
		grid-template-columns: repeat(2, 1fr);
	}
}
.liatopie-modalites-label {
	display: block;
	font-family: var(--wp--preset--font-family--sora);
	text-transform: uppercase;
	font-size: 13px;
	color: var(--wp--preset--color--petrole);
	margin: 0 0 4px 0;
}
.liatopie-modalites-valeur {
	display: block;
	font-size: 14px;
	margin: 0;
}

/* 4. Listes à puce flèche (→ Cuivre) */
.liatopie-liste-fleche {
	list-style: none;
	margin: 0;
	padding: 0;
}
.liatopie-liste-fleche li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
}
.liatopie-liste-fleche li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--cuivre);
	font-weight: 600;
}

/* 5. Accordéon programme (natif <details>/<summary>, pas de JS) */
.liatopie-accordeon-programme details {
	border-bottom: 1px solid #00456533;
	padding: 16px 0;
}
.liatopie-accordeon-programme summary {
	font-family: var(--wp--preset--font-family--sora);
	font-size: 15px;
	color: var(--wp--preset--color--petrole);
	cursor: pointer;
	list-style: none;
}
.liatopie-accordeon-programme summary::-webkit-details-marker {
	display: none;
}
.liatopie-accordeon-programme summary::before {
	content: "+ ";
	color: var(--wp--preset--color--cuivre);
	font-weight: 700;
}
.liatopie-accordeon-programme details[open] summary::before {
	content: "– ";
}
.liatopie-accordeon-programme details p {
	margin: 12px 0 0 0;
	font-size: 16px;
}

/* 6. Callout : fond Cuivre 8%, bordure gauche Cuivre 3px */
.liatopie-callout {
	background-color: rgba(224, 122, 46, 0.08);
	border-left: 3px solid var(--wp--preset--color--cuivre);
	padding: 16px 24px;
	margin: 0;
}

/* 7. Bloc "Pour qui ce n'est pas" : fond Slate Blue 8%, radius 8px */
.liatopie-pour-qui-pas {
	background-color: rgba(91, 154, 160, 0.08);
	border-radius: 8px;
	padding: 24px;
}

/* 8. Table (page Partenaire IA) */
.liatopie-table-offre table {
	width: 100%;
	border-collapse: collapse;
}
.liatopie-table-offre th {
	font-family: var(--wp--preset--font-family--sora);
	text-transform: uppercase;
	font-size: 13px;
	color: var(--wp--preset--color--petrole);
	text-align: left;
	padding: 8px 12px;
	border-bottom: 1px solid rgba(44, 44, 42, 0.12);
}
.liatopie-table-offre td {
	padding: 12px;
	border-bottom: 1px solid rgba(44, 44, 42, 0.12);
	font-size: 15px;
}

/* 9. Bandeau CTA de fin de page : bouton primaire inversé */
.liatopie-cta-inverse {
	background-color: var(--wp--preset--color--blanc) !important;
	color: var(--wp--preset--color--petrole-nuit) !important;
	border-radius: 9999px !important;
}
.liatopie-cta-inverse:hover {
	background-color: var(--wp--preset--color--cuivre) !important;
	color: var(--wp--preset--color--blanc) !important;
}

/* Le CTA final (fond Pétrole en pleine largeur) devient une carte flottante
   arrondie sur desktop, comme le composant PageCta de la maquette générée,
   au lieu d'un bandeau plat qui touche les deux bords de l'écran. Rétro-
   compatible avec les 4 pages déjà publiées : ce sélecteur cible ce qui
   existe déjà dans leur contenu, aucune retouche de page nécessaire. */
@media (min-width: 900px) {
	.wp-block-post-content > .has-petrole-background-color {
		max-width: 1140px;
		margin-left: auto !important;
		margin-right: auto !important;
		border-radius: 24px;
	}
}

/* 10. Cartes offre (accueil) : fond blanc, bordure Slate Blue 35%, radius 8px */
.liatopie-carte-offre {
	background-color: var(--wp--preset--color--blanc);
	border: 1px solid rgba(91, 154, 160, 0.35);
	border-radius: 8px;
	padding: 24px;
}
.liatopie-carte-offre-tag {
	display: block;
	font-family: var(--wp--preset--font-family--sora);
	text-transform: uppercase;
	font-size: 13px;
	color: var(--wp--preset--color--slate-blue);
	margin: 0 0 8px 0;
}
.liatopie-carte-offre-nom {
	color: var(--wp--preset--color--cuivre);
	font-weight: 600;
}