/* Style global du site : titre principal (H1) gras, jaune vif, boutons pleins.
   Chargé après theme.css sur toutes les pages : il reprend les valeurs
   de la page CV et remplace les anciens réglages fins (poids 200) et le doré foncé.
   Les couleurs et polices de base se règlent dans theme.json. */

:root {
	--de-header-bg: #1a1711;
	/* Marge latérale du site : un peu plus large qu'avant pour que rien ne colle aux bords. */
	--de-gutter: clamp(1.5rem, 5vw, 3rem);
	/* Colonne unique du site : le titre de page et le contenu partent du même bord gauche. */
	--de-col: min(64rem, 100%);
}

/* ---------- Titre de page (H1) : très gros, gras, en minuscules ---------- */
main .wp-block-post-title {
	font-weight: 800;
	line-height: 0.85;
	letter-spacing: -0.04em;
	text-transform: lowercase;
	padding-bottom: 0.08em; /* les queues de lettres (g, j, p) ne touchent pas la suite */
}

/* ---------- Marges et espaces ---------- */

/* En-tête : le logo et le burger ne collent jamais aux bords de l'écran. */
.site-header {
	padding-inline: var(--de-gutter) !important;
}

/* Transition entre les pages : désactivée (test).
   Sur iPhone (Safari), elle empêchait le menu burger de s'afficher après un changement de page.
   Pour la remettre, supprimer ce bloc. */
@view-transition {
	navigation: none;
}

/* En-tête : rien ne doit apparaître au-dessus de la barre.
   Sur mobile, le contenu défilait dans l'espace libre au-dessus de l'en-tête fixe
   (par exemple là où la barre d'administration WordPress a défilé).
   Un fond de la même couleur prolonge donc l'en-tête vers le haut et masque ce contenu. */
.site-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 100vh;
	background: var(--de-header-bg);
	pointer-events: none;
}

/* Titres H2 : de l'air avant, et le texte qui suit reste proche de son titre. */
.wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-post-content :is(h2, h3) + :is(p, ul, ol, figure, .wp-block-gallery, .wp-block-embed, .wp-block-buttons) {
	margin-top: var(--wp--preset--spacing--20);
}

/* Espace entre le titre de page (H1) et ce qui suit : un peu plus d'air. */
.wp-block-post-content > :first-child {
	margin-top: 2.5rem;
}

.wp-block-post-content > h2:first-child {
	margin-top: 3rem;
}

/* Menu ouvert (mobile) : mêmes marges que le reste du site, rien ne colle aux bords. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--de-gutter) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.5rem;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.35em 0;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.5rem;
}

/* ---------- Navigation principale : états d'interaction (desktop) ----------
   Survol et focus clavier : le lien passe en jaune (couleur d'accent).
   Page courante : le lien reste jaune. Jamais de soulignement. */
.wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.2s ease;
	text-decoration: none !important;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent) !important;
	text-decoration: none !important;
}

/* Visuels et vidéos : l'alignement « Pleine largeur » les fait aller jusqu'aux bords de l'écran,
   sans marge. Le texte, lui, garde toujours ses marges. */
main:not(.home-main) .alignfull,
.de-section .alignfull {
	max-width: none !important;
	width: auto !important;
	margin-left: calc(var(--de-gutter) * -1) !important;
	margin-right: calc(var(--de-gutter) * -1) !important;
}

main .alignfull img,
main .alignfull video {
	width: 100%;
}

/* Bas de page : le contenu ne colle pas au pied de page. */
main {
	padding-bottom: var(--wp--preset--spacing--60);
}

/* ---------- Masthead d'accueil : nom (H1) plus gras, lueur jaune vif ---------- */
.de-hero__title {
	font-weight: 800;
}

.de-hero .wp-block-cover__background {
	background:
		linear-gradient(to top, var(--wp--preset--color--base) 0%, rgba(5, 5, 5, 0.85) 24%, rgba(5, 5, 5, 0) 60%),
		radial-gradient(60% 45% at 70% 30%, rgba(245, 184, 46, 0.2), rgba(245, 184, 46, 0) 70%) !important;
}

@media (min-width: 900px) {
	.de-hero .wp-block-cover__background {
		background:
			linear-gradient(to top, var(--wp--preset--color--base) 0%, rgba(5, 5, 5, 0) 26%),
			radial-gradient(40% 40% at 68% 32%, rgba(245, 184, 46, 0.18), rgba(245, 184, 46, 0) 70%) !important;
	}
}

/* ---------- Pied de page ---------- */
.site-footer {
	background: var(--wp--preset--color--surface);
}

/* ---------- Colonne unique : titre de page ET contenu alignés ----------
   Une seule règle pour toutes les pages (galerie, CV, projets, contact) : le titre et chaque bloc du contenu
   (y compris galeries et vidéos en « Large ») ont la même largeur (1024 px) et le même bord gauche.
   Les textes courants (paragraphes, listes) restent en lignes courtes (720 px) mais partent du même bord.
   « Pleine largeur » reste l'exception voulue : les visuels vont jusqu'aux bords de l'écran. */
main:not(.home-main) > .wp-block-post-title,
main:not(.home-main) > .wp-block-post-content,
main:not(.home-main) .wp-block-post-content > :not(.alignfull) {
	max-width: var(--de-col);
	margin-left: auto;
	margin-right: auto;
}

/* Taille du titre de page : la même sur toutes les pages, et qui s'adapte à l'écran pour que
   le mot reste TOUJOURS sur une seule ligne (jamais coupé). 3,55 = largeur du mot le plus long
   (« contact ») en multiple de la taille de police, avec une petite marge de sécurité. */
main:not(.home-main) > .wp-block-post-title {
	font-size: clamp(3rem, calc((100vw - 2 * var(--de-gutter)) / 3.55), 14rem);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

main:not(.home-main) .wp-block-post-content > :is(p, ul, ol, blockquote):not(.alignfull):not(.alignwide) {
	max-width: min(45rem, 100%);
	margin-left: 0;
}

/* ---------- Accueil : tailles du masthead ----------
   Sous-titre : taille « Normal » du thème (comme le texte courant) sur mobile,
   taille « Grand » du thème (comme le logo) sur grand écran.
   « découvrir » : taille « Normal » du thème (comme le texte courant et le menu). */
.de-hero p.de-hero__tagline {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.12em !important;
}

@media (min-width: 900px) {
	.de-hero p.de-hero__tagline {
		font-size: var(--wp--preset--font-size--large);
		letter-spacing: 0.04em !important;
	}
}

.de-hero p.de-hero__cue a {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.2em;
}

/* ---------- Accueil : derniers projets (titre sur chaque photo) ----------
   Le titre est la légende de l'image (modifiable dans l'éditeur). La photo entière
   est un lien vers le projet : pas de visionneuse ici. */
.de-slider .de-slide {
	position: relative;
}

.de-slider .de-slide a {
	display: block;
	height: 100%;
}

.de-slider .de-slide img {
	transition: transform 0.6s ease;
}

.de-slider .de-slide a:hover img {
	transform: scale(1.03);
}

.de-slider .de-slide figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 4rem 1.5rem 1.5rem;
	background: linear-gradient(to top, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0) 100%);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-align: left;
	text-transform: lowercase;
	pointer-events: none;
}

.de-slider .de-slide figcaption strong {
	display: block;
	margin-bottom: 0.1rem;
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s ease;
}

.de-slider .de-slide a:hover + figcaption strong,
.de-slider .de-slide a:focus-visible + figcaption strong {
	color: var(--wp--preset--color--accent);
}

/* ---------- Accueil : aperçu de la galerie ---------- */
.de-galerie-apercu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

@media (min-width: 900px) {
	.de-galerie-apercu {
		grid-template-columns: repeat(4, 1fr);
	}
}

.de-galerie-apercu > * {
	margin: 0 !important;
}

.de-galerie-apercu .wp-block-image {
	overflow: hidden;
}

.de-galerie-apercu .wp-block-image a {
	display: block;
}

.de-galerie-apercu .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.de-galerie-apercu .wp-block-image a:hover img {
	transform: scale(1.03);
}

/* ---------- Accueil : derniers projets (boucle de projets) ----------
   La frise est alimentée par les projets qui ont une photo (menu « Projets » de l'administration).
   Chaque photo est un lien vers la carte du projet ; le titre et l'année sont posés dessus. */
.wp-block-post-template.de-slider {
	display: flex;
	flex-wrap: nowrap;
	max-width: none;
	margin-block: 0;
	padding-block: 0;
	padding-inline: var(--de-gutter);
	margin-inline: calc(var(--de-gutter) * -1);
}

.de-slider > .wp-block-post {
	position: relative;
	flex: 0 0 auto;
	height: min(62svh, 34rem);
	margin: 0 !important;
	scroll-snap-align: start;
	overflow: hidden;
}

.de-slider > .wp-block-post .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

.de-slider > .wp-block-post .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}

.de-slider > .wp-block-post .wp-block-post-featured-image img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
}

@media (hover: hover) {
	.de-slider > .wp-block-post .wp-block-post-featured-image img {
		transition: transform 1.1s var(--de-ease);
	}

	.de-slider > .wp-block-post:hover .wp-block-post-featured-image img {
		transform: scale(1.05);
	}
}

.de-slide__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 4rem 1.5rem 1.5rem;
	background: linear-gradient(to top, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0) 100%);
	pointer-events: none;
}

.de-slide__caption > * {
	margin: 0 !important;
}

.de-slide__caption .wp-block-post-title {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: lowercase;
	color: var(--wp--preset--color--contrast);
}

.de-slide__caption .wp-block-post-date {
	margin-bottom: 0.2rem !important;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent);
}

.de-slider > .wp-block-post:hover .de-slide__caption .wp-block-post-title {
	color: var(--wp--preset--color--accent);
}

/* Le titre de la légende ne s'anime pas à l'apparition (il est dans une frise qui défile). */
html.js .de-slide__caption .wp-block-post-title {
	opacity: 1 !important;
	transform: none !important;
	transition: color 0.2s ease !important;
}

/* ---------- Icône dans un bouton (CTA) ----------
   Une icône peut être placée À GAUCHE du texte d'un bouton. Elle prend la couleur du texte du bouton
   (donc elle suit le survol). Deux façons de l'obtenir, sans toucher au code :
   1) Automatique selon le lien : un bouton « tel: » (appel) a l'icône téléphone portable,
      un bouton « mailto: » (e-mail) a l'icône enveloppe,
      un bouton vers un fichier .pdf (ou à télécharger) a la flèche de téléchargement,
      un bouton vers la bande-démo a l'icône lecture (play).
   2) À la demande : dans l'éditeur, sélectionner le bouton > Avancé > « Classe(s) CSS supplémentaire(s) » :
      de-icone-telephone · de-icone-mail · de-icone-telecharger · de-icone-play
      (de-sans-icone retire l'icône automatique). */
.wp-block-button__link[href^="tel:"] { --de-icone: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%276.5%27%20y=%272.5%27%20width=%2711%27%20height=%2719%27%20rx=%272.5%27/%3E%3Cpath%20d=%27M11%2018.5h2%27/%3E%3C/svg%3E"); }
.wp-block-button__link:is([href$=".pdf"], [download], [href*="bande-demo"]) { --de-icone: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%204v11M7.5%2010.5L12%2015l4.5-4.5M5%2020h14%27/%3E%3C/svg%3E"); }
.wp-block-button__link[href*="bande-demo"] { --de-icone: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M7.5%204.5v15l12-7.5z%27%20fill=%27%23000%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E"); }
.wp-block-button__link[href^="mailto:"] { --de-icone: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%273%27%20y=%275%27%20width=%2718%27%20height=%2714%27%20rx=%272.5%27/%3E%3Cpath%20d=%27M3.5%207.5l8.5%206%208.5-6%27/%3E%3C/svg%3E"); }
.wp-block-button.de-icone-telephone .wp-block-button__link { --de-icone: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%276.5%27%20y=%272.5%27%20width=%2711%27%20height=%2719%27%20rx=%272.5%27/%3E%3Cpath%20d=%27M11%2018.5h2%27/%3E%3C/svg%3E"); }
.wp-block-button.de-icone-play .wp-block-button__link { --de-icone: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M7.5%204.5v15l12-7.5z%27%20fill=%27%23000%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E"); }
.wp-block-button.de-icone-mail .wp-block-button__link { --de-icone: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%273%27%20y=%275%27%20width=%2718%27%20height=%2714%27%20rx=%272.5%27/%3E%3Cpath%20d=%27M3.5%207.5l8.5%206%208.5-6%27/%3E%3C/svg%3E"); }
.wp-block-button.de-icone-telecharger .wp-block-button__link { --de-icone: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-width=%271.8%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%204v11M7.5%2010.5L12%2015l4.5-4.5M5%2020h14%27/%3E%3C/svg%3E"); }

.wp-block-button__link:is([href^="tel:"], [href^="mailto:"], [href$=".pdf"], [download], [href*="bande-demo"]),
.wp-block-button:is(.de-icone-telephone, .de-icone-mail, .de-icone-telecharger, .de-icone-play) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.wp-block-button__link:is([href^="tel:"], [href^="mailto:"], [href$=".pdf"], [download], [href*="bande-demo"])::before,
.wp-block-button:is(.de-icone-telephone, .de-icone-mail, .de-icone-telecharger, .de-icone-play) .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.3em;
	height: 1.3em;
	background: currentColor;
	-webkit-mask: var(--de-icone) center / contain no-repeat;
	mask: var(--de-icone) center / contain no-repeat;
}
.wp-block-button.de-sans-icone .wp-block-button__link::before {
	display: none;
}