/*
Theme Name:  PIVOD TT4
Template:    twentytwentyfour
Description: Thème enfant de Twenty Twenty-Four pour pivod75.org
Author:      Ludovic Arnal
Author URI:  https://webdesign.ludovicarnal.com
Version:     0.1.0
Text Domain: pivod-tt4
*/

/* Couleurs, polices, largeurs : dans theme.json.
   Ici : seulement ce que theme.json ne sait pas faire.
   Le CSS des formulaires / listes du plugin est dans le plugin (style-plugin.css). */


/************************************************
 * 00. ESPACEMENTS DANS LE CONTENU
 *
 * WordPress met 1.2rem au-dessus de chaque bloc (:root :where(.is-layout-…) > *).
 * On l'annule dans le <main> et on gère l'espacement nous-mêmes, à la Divi :
 * un peu d'air sous les paragraphes et listes, sauf le dernier.
 * Sélecteurs de faible priorité : les classes plus bas (etiquette, bloc-cta…) passent devant.
 ************************************************/

:root :where(main .is-layout-constrained, main .is-layout-flow) > * {
	margin-block-start: 0;
}
:where(main) :where(p, ul, ol):not(:last-child) {
	margin-block-end: 1em;
}
/* Un H2 au milieu d'une section se détache de ce qui précède */
:where(main) :where(h2):not(:first-child) {
	margin-block-start: 2rem;
}


/************************************************
 * 0. POLICES (DM Sans variable, auto-hébergée)
 ************************************************/

@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url('assets/fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
	font-family: 'DM Sans';
	font-style: italic;
	font-weight: 100 1000;
	font-display: swap;
	src: url('assets/fonts/dm-sans-latin-wght-italic.woff2') format('woff2-variations');
}


/************************************************
 * 1. HEADER (parts/header.html)
 ************************************************/

/* Header collant, fond blanc, léger ombrage */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
	padding: 10px var(--wp--preset--spacing--40, 2rem);
}

/* Liens du menu : pas de soulignement, léger fondu au survol (comme Divi) */
header .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	transition: opacity .2s ease;
}
header .wp-block-navigation .wp-block-navigation-item__content:hover {
	opacity: .7;
}

/* Page active : orange et gras.
   La couleur est posée sur le <li> : WordPress force « color: inherit »
   sur le lien avec un sélecteur très spécifique, le lien hérite donc du <li>. */
header .wp-block-navigation .current-menu-item {
	color: var(--wp--preset--color--accent);
}
header .wp-block-navigation .current-menu-item > a {
	font-weight: bold;
}

/* Hamburger orange (mobile) */
header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--accent);
}


/************************************************
 * 2. FOOTER (patterns/footer.php)
 ************************************************/

/* Pas d'espace blanc entre le contenu et le footer, ni entre ses deux bandes */
footer.wp-block-template-part,
.sous-footer {
	margin-block-start: 0;
}

/* Liens du footer : soulignés seulement au survol */
footer.wp-block-template-part a {
	text-decoration: none;
}
footer.wp-block-template-part a:hover {
	text-decoration: underline;
}

.site-footer {
	padding-top: 40px;
	padding-bottom: 20px;
}
.site-footer h4 {
	font-size: 16px;
	letter-spacing: 1px;
	margin-bottom: 10px;
}
.site-footer p,
.site-footer li {
	font-size: 16px;
	line-height: 1.5;
}
.site-footer ul.wp-block-list {
	list-style: none;
	padding-left: 0;
}
.site-footer ul.wp-block-list li {
	margin-bottom: 10px;
}

/* Réseaux sociaux : pastilles orange, icônes blanches */
.site-footer .wp-block-social-links .wp-social-link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.sous-footer {
	padding-top: 10px;
	padding-bottom: 10px;
}
.sous-footer p {
	font-size: 13px;
	margin: 0;
}
.sous-footer a {
	color: var(--wp--preset--color--contrast);
}
.sous-footer a:hover {
	color: var(--wp--preset--color--accent);
}


/************************************************
 * 3. BANDEAU HAUT DE PAGE
 *
 * Composition « Bandeau haut de page » (patterns/bandeau.php).
 * La photo dépend de la page : classe = slug de la page sur <body>
 * (voir functions.php), « home » pour l'accueil.
 ************************************************/

.bandeau {
	position: relative;
	height: 400px;
	padding: 0 !important;
}

/* Dégradé orange à gauche */
.bandeau::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, var(--wp--preset--color--accent) 50%, rgba(255, 51, 0, 0.6) 100%);
	z-index: 1;
}

/* Photo à droite (55 %) */
.bandeau::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 55%;
	height: 100%;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	z-index: 0;
}

.home .bandeau::after           { background-image: url(/wp-content/uploads/2026/03/ambre-esteve-6-iunIrJtbQ-unsplash-1200x800px.jpg); }
.accompagnement .bandeau::after { background-image: url(/wp-content/uploads/2026/03/vitaly-gariev-CjP2TAGUlGY-unsplash-1200x675px.jpg); }
.formations .bandeau::after     { background-image: url(/wp-content/uploads/2026/03/vitaly-gariev-c6QLJhezaYs-unsplash-1200x675px.jpg); }
.nous-connaitre .bandeau::after { background-image: url(/wp-content/uploads/2026/03/photo-galette-2025-1200x900px.jpg); }
.evenements .bandeau::after     { background-image: url(/wp-content/uploads/2026/03/initial-mairie-du-17e-1200x798px.jpg); }
.nous-rejoindre .bandeau::after { background-image: url(/wp-content/uploads/2026/03/Gemini_Generated_Image_qcrez1qcrez1qcre.png); }
.error404 .bandeau::after       { background-image: url(/wp-content/uploads/2026/03/ambre-esteve-6-iunIrJtbQ-unsplash-1200x800px.jpg); }

/* Les enfants ne suivent pas la largeur de contenu du groupe */
.bandeau > .slogan,
.bandeau > .titre {
	max-width: none;
	margin: 0 !important;
}

.bandeau .slogan {
	position: absolute;
	top: 80px;
	left: 15%;
	z-index: 2;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 4px;
	line-height: 1.8em;
}

.bandeau .titre {
	position: absolute;
	bottom: 20px;
	left: 1%;
	z-index: 2;
	padding: 0;
	color: #ffffff !important;
	font-size: 10vw;
	font-weight: 700;
	line-height: 1;
	transform: translateY(32%);
}

@media screen and (max-width: 768px) {
	.bandeau         { height: 200px; }
	.bandeau .slogan { top: 20px; left: 5%; font-size: 14px; }
	.bandeau .titre  { transform: translateY(65%); }
}


/************************************************
 * 4. SECTIONS DE PAGE
 ************************************************/

/* Groupe avec la classe « section » : espacement vertical */
.section {
	padding-top: 75px;
	padding-bottom: 50px;
}
@media screen and (max-width: 768px) {
	.section { padding-top: 40px; }
}

/* Titres H2 des sections : de l'air en dessous.
   Les marges verticales entre blocs voisins fusionnent :
   c'est la plus grande (ici 2rem) qui l'emporte sur le 1.2rem de WordPress. */
.section h2.wp-block-heading {
	margin-bottom: 2rem;
}

/* Paragraphe « etiquette » : le texte est surligné (<mark>), la pastille suit le texte */
.etiquette {
	margin: 1.25em 0 .5em;
}
.etiquette mark {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
	padding: .35em .75em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Colonne « partenaire » : logos alignés sur une même hauteur */
.partenaire figure.wp-block-image {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 25px 0;
}
.partenaire h3 {
	font-size: 1.125rem;
	text-transform: none;
	margin: 0 0 .5rem;
}
.partenaire p {
	font-size: 16px;
}

/* Paragraphe « autres-partenaires » sous les logos */
.autres-partenaires {
	font-size: 16px;
	text-align: center;
	padding: 50px 0 30px;
}

/* Liste avec la classe « liste-aeree » : 10px entre les puces */
.liste-aeree li:not(:last-child) {
	padding-bottom: 10px;
}

/* Paragraphe ou liste « texte-etroit » : plus étroit que les titres (80 % de 1080),
   centré. Sur mobile, la colonne est plus étroite que 864px : tout s'aligne. */
.texte-etroit {
	max-width: 864px;
}
/* Variante « texte-tres-etroit » : 65 % de 1080 */
.texte-tres-etroit {
	max-width: 702px;
}

/* Une liste qui termine une section : un peu d'air en dessous */
.section > .wp-block-list:last-child {
	margin-bottom: 20px;
}

/* Chiffres clés (page Nous connaître) */
.chiffre {
	text-align: center;
}
.chiffre__nombre {
	font-size: 72px;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	margin-bottom: .5rem;
}
.chiffre h3 {
	font-size: 1.125rem;
	text-transform: none;
	margin-top: 0;
}
.chiffres + .chiffres {
	margin-top: 50px;
}

/* Section « don » (page Nous connaître) */
.don__accroche {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}
.don__note {
	font-weight: 300;
	line-height: 1.4;
}
.don .wp-block-buttons {
	margin-top: 30px;
}

/* Groupe pleine largeur « colonne-60 » : comme une rangée Divi à 60 %,
   soit 60 % de l'écran (vw, car le groupe a un padding latéral) sans dépasser 1080px ; 80 % sur mobile */
.section.colonne-60 > * {
	max-width: min(60vw, 1080px);
}
@media screen and (max-width: 768px) {
	.section.colonne-60 > * {
		max-width: 80vw;
	}
}

/* Défilement doux vers les ancres (remplace le script jQuery de Divi),
   en laissant la place du header collant */
html {
	scroll-behavior: smooth;
}
[id] {
	scroll-margin-top: 100px;
}

/* Visible uniquement sur mobile */
@media screen and (min-width: 768px) {
	.mobile-seulement {
		display: none;
	}
}

/* Page Accompagnement */
.accroche {
	font-size: 23px;
	font-weight: 600;
	line-height: 1.6;
}
.fleche {
	text-align: center;
}
.fleche a {
	color: var(--wp--preset--color--accent-2);
}
.texte-17 p {
	font-size: 17px;
	line-height: 1.6;
}
.section .colonnes-rdv {
	column-gap: 7.5%;
}
/* H2 suivi d'une note en petit, collée dessous */
.section h2.titre-note {
	margin-bottom: 0;
}
.titre-note + p {
	margin-top: 0;
	font-size: 13px;
}

/* Page Accueil */
.texte-21 {
	font-size: 21px;
	line-height: 1.6;
}
.section .bloc-cta {
	margin-top: 60px;
}
.section.avis {
	padding-top: 10px;
	padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
	.accroche { font-size: 21px; }
	.texte-21 { font-size: 19px; }
}

/* H1 de page sans bandeau (Politique de protection des données) */
.titre-page {
	font-size: 25px;
	font-weight: 600;
	line-height: 1.3;
}