/*
Theme Name: Augustin Arnal (enfant TT4)
Theme URI: https://augustinarnal.com
Description: Child theme de Twenty Twenty-Four pour augustinarnal.com. Remplace Divi : sections plein écran avec scroll-snap, menu plein écran, header/footer en fichiers.
Author: Ludovic Arnal
Template: twentytwentyfour
Version: 1.0.0
Requires at least: 6.5
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: augustin-tt4
*/

/* ==========================================================================
   RÈGLE DU JEU
   - Les valeurs de design (couleurs, polices, tailles) sont dans theme.json.
   - Ce fichier ne contient que ce que theme.json ne sait pas faire :
     sections plein écran, header en surimpression, hamburger, overlay du menu.
   - Les 3 variables ci-dessous sont les seuls réglages « visuels » à ajuster.
   ========================================================================== */

:root {
	--nav-top: 40px;      /* position du hamburger depuis le haut  (Divi : top: 40px)   */
	--nav-right: 30px;    /* position du hamburger depuis la droite (Divi : right: 30px) */
	--site-max: 1400px;   /* largeur max de la barre d'en-tête (nom + hamburger)        */
}
/* Connecté : on décale le hamburger sous la barre d'admin WordPress (visiteurs : sans effet). */
body.admin-bar {
	--nav-top: calc(40px + var(--wp-admin--admin-bar--height, 32px));
}

/* ==========================================================================
   0. POLICES
   Déclarées ici (et pas dans theme.json) : les URL sont relatives à CE fichier, donc
   toujours celles du child theme. Dans theme.json, « file:./ » peut pointer vers le thème
   parent selon la version de WordPress. Les noms de famille sont listés dans theme.json
   (fontFamilies) pour apparaître dans le sélecteur de police de l'éditeur.
   Fichiers à copier depuis l'ancien thème : Divi-child/fonts/Aileron → assets/fonts/Aileron
   et Divi-child/fonts/Akkordeon → assets/fonts/Akkordeon (versions .woff2 uniquement).
   ========================================================================== */

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-LightItalic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-SemiBoldItalic.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/Aileron/Aileron-BlackItalic.woff2") format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Akkordeon";
	src: url("assets/fonts/Akkordeon/Akkordeon.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Merriweather";
	src: url("assets/fonts/merriweather/merriweather-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Merriweather";
	src: url("assets/fonts/merriweather/merriweather-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Merriweather";
	src: url("assets/fonts/merriweather/merriweather-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   1. STRUCTURE GÉNÉRALE
   ========================================================================== */

/* Pas d'espace automatique entre header / main / footer (sections plein écran collées). */
.wp-site-blocks > *,
.page-dark > * {
	margin-block-start: 0;
}

.wp-site-blocks {
	position: relative; /* repère du header en surimpression */
}

/* Les hauteurs « plein écran » : 100svh évite le saut de la barre d'adresse sur iOS. */
.section {
	min-height: 100vh;
	min-height: 100svh;
}

/* Pages intérieures sombres (page.html) : fond noir jusqu'en bas, footer collé en bas. */
body:has(.page-dark) {
	background-color: var(--wp--preset--color--contrast);
}
.page-dark {
	min-height: 100vh;
	min-height: 100svh;
}
.page-dark > .page-main {
	flex: 1 1 auto;
}

.page-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Le header est en surimpression : sur les pages sombres, on réserve sa hauteur pour que le
   contenu (portrait sur mobile, par exemple) ne passe jamais dessous. */
.page-dark > .page-main {
	padding-top: 6.5rem;
}


/* ==========================================================================
   2. SECTIONS PLEIN ÉCRAN
   Classe « section » sur un bloc Groupe = au moins la hauteur de l'écran (voir §1).
   Le scroll-snap (un cran = une section) est volontairement retiré pour l'instant.
   ========================================================================== */

.section {
	box-sizing: border-box;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}
/* Groupe en disposition « Pile » (flex vertical) : contenu centré verticalement */
.section.is-layout-flex.is-vertical {
	justify-content: center;
}

/* De l'air en haut et en bas de toutes les sections, sauf les photos plein écran. */
.section:not(.section-photo) { padding-block: clamp(4rem, 10svh, 7rem); }

/* Festivals */
/* Récompenses : deux images côte à côte, 200 px maximum chacune, elles rétrécissent sur mobile. */
.festivals { display: flex; flex-wrap: nowrap; justify-content: center; gap: 1rem; }
.festivals .wp-block-image { flex: 0 1 200px; min-width: 0; margin: 0; }
.festivals .wp-block-image img { width: 100%; height: auto; }

/* Affiche */
.section .affiche img { width: auto; max-width: 100%; max-height: 75vh; max-height: 75svh; }

/* Résumé & générique */
@media (max-width: 781px) {
	.section-affiche-resume .wp-block-columns {
		gap: 2rem;
	}
	.section-affiche-resume p,
	.section-generique p {
		font-size: 1rem;
	}
}

/* Photo plein écran : classes « section section-photo » sur le Groupe, l'Image directement dedans. */
.section.section-photo {
	padding-inline: 0;
	margin-block-start: 0;
}
.section-photo > .wp-block-image {
	margin: 0;
	height: 100vh;
	height: 100lvh;
}
.section-photo > .wp-block-image > img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

/* Générique : texte centré dans chaque colonne, sur ordinateur seulement (mobile inchangé). */
@media (min-width: 782px) { .section-generique { text-align: center; } }

/* Générique : contenu centré verticalement dans la section plein écran. */
.section-generique { display: flex; flex-direction: column; justify-content: center; }
.section-generique > .wp-block-columns { width: 100%; }

/* Scroll-snap sur la home : un geste = une section. */
/* Fonctionne mal sur mobile : html:has(body.home) { scroll-snap-type: y proximity; } */
@media (min-width: 782px) { html:has(body.home) { scroll-snap-type: y mandatory; } }
.section { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { html:has(body.home) { scroll-snap-type: none; } }

/* Accueil : le pied de page est le dernier point d'accroche du snap strict (sinon il serait inatteignable). */
footer.wp-block-template-part { scroll-snap-align: end; }

/* ==========================================================================
   3. HEADER — nom + tagline en surimpression, hamburger fixe
   ========================================================================== */

/* En surimpression sur le contenu (front-page.html et page.html seulement,
   qui posent la classe .site-header sur la partie de template). */
header.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}
.site-header__bar,
.site-footer__bar {
	box-sizing: border-box;
	max-width: var(--site-max);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}
.site-header__bar {
	padding-top: 2.25rem;
	align-items: flex-start;
}
.site-footer__bar {
	padding-block: 1.5rem;
}
.site-footer__bar p {
	margin: 0;
	font-size: 0.75rem!important; /* Annule ce qu'il doit y avoir dans le Footer */
}
.site-header__bar .wp-block-site-title,
.site-header__bar .wp-block-site-tagline {
	margin: 0;
}
.site-identity {
	margin-top: 2px;
}

/* --- Hamburger : 3 barres de 3 px dessinées en CSS (remplace l'icône par défaut) --- */
.wp-block-navigation__responsive-container-open {
	position: fixed;
	top: var(--nav-top);
	right: var(--nav-right);
	z-index: 1001;
	box-sizing: border-box;
	width: 30px;
	height: 22px;
	padding: 0;
	color: inherit;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 100% 3px no-repeat,
		linear-gradient(currentColor, currentColor) 0 50% / 100% 3px no-repeat,
		linear-gradient(currentColor, currentColor) 0 100% / 100% 3px no-repeat;
	transition: color 0.3s ease;
}
.wp-block-navigation__responsive-container-open svg {
	display: none;
}
/* Couleur du hamburger selon la section dessous (posée par assets/js/section-tone.js) */
body[data-nav-tone="on-light"] .wp-block-navigation__responsive-container-open {
	color: #000;
}
body[data-nav-tone="on-dark"] .wp-block-navigation__responsive-container-open {
	color: #fff;
}

/* ==========================================================================
   4. MENU PLEIN ÉCRAN (bloc Navigation en overlay « toujours »)
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	justify-content: center; /* le conteneur est une colonne flex plein écran : on centre la liste verticalement */
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	gap: 1.25rem;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 2rem;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
	transition: color 0.3s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--contrast-3);
}
/* Pas de contour sur le lien focalisé automatiquement à l'ouverture (souris) ; le contour reste au clavier. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none;
}
/* Page courante en orange (posé par inc/nav-current.php ou nativement par WordPress) */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] {
	color: var(--wp--preset--color--accent);
}
/* Croix de fermeture : même emplacement que le hamburger */
.wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc(var(--nav-top) - 6px);
	right: calc(var(--nav-right) - 6px);
	z-index: 1002;
	color: var(--wp--preset--color--base);
}
.wp-block-navigation__responsive-container-close svg {
	width: 42px;
	height: 42px;
}
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.5rem;
	}
}

/* ==========================================================================
   5. PAGES SOMBRES
   ========================================================================== */

/* Images des pages sombres (portrait de « À propos »…) : jamais plus hautes que 75 % de l'écran. */
.page-dark .wp-block-image img {
	width: auto;
	max-width: 100%;
	max-height: 75vh;
	max-height: 75svh;
}

/* Contact : e-mail et téléphone sur une ligne (ordinateur), sur deux lignes sans séparateur (mobile). */
@media (max-width: 781px) {
	.page-main .separator { display: none; }
	.page-main a[href^="mailto:"] { display: block; }
}