/*
Theme Name: Duo
Theme URI: 
Author: Axbri
Description: Thème de blocs sur mesure pour le duo violon & accordéon de Marie-Sophie Baumgartner et Dantong Wang. Là où le classique rencontre le jazz.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 5.7.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: duo-theme
Tags: full-site-editing, block-theme, one-page, music
*/

/* ---- Défilement doux vers les ancres ---- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 6.5rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---- En-tête collant, fond qui se densifie au défilement ----
   Le flou et le fond sont portés par un pseudo-élément, pas par l'en-tête
   lui-même : `backdrop-filter` sur l'en-tête en ferait le bloc conteneur de
   ses descendants en position fixed, et le menu mobile plein écran se
   retrouverait enfermé dans la hauteur de la barre. */
/* C'est l'enveloppe de la partie de modèle (<header class="wp-block-template-part">)
   qui colle, pas .duo-header : celle-ci remplit exactement son enveloppe, et un
   élément collant ne peut pas glisser dans un parent de sa propre hauteur — l'en-tête
   défilait donc avec la page au lieu de rester en haut. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
}

.duo-header {
	position: relative;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease;
}

.duo-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
	transition: background-color 0.3s ease;
}

.duo-header.is-scrolled::before {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
}

.duo-header.is-scrolled {
	border-bottom-color: #242B34;
}

/* ---- Surtitre : petite capitale espacée, façon programme de concert ----
   Précédé d'un filet d'or. Le premier surtitre de chaque section porte en plus
   son numéro en chiffres romains (I, II, III, IV), comme les mouvements d'un
   programme — voir le compteur « duo-section » plus bas. */
.duo-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0;
}

.duo-eyebrow::before {
	content: "";
	flex: 0 0 2.2rem;
	height: 1px;
	background: var(--wp--preset--color--accent);
}

.duo-eyebrow.has-text-align-center {
	justify-content: center;
}

.duo-eyebrow.has-text-align-center::after {
	content: "";
	flex: 0 0 2.2rem;
	height: 1px;
	background: var(--wp--preset--color--accent);
}

main {
	counter-reset: duo-section;
}

main > section {
	counter-increment: duo-section;
}

main > section > .duo-eyebrow:first-child::before {
	content: counter(duo-section, upper-roman);
	flex: 0 0 auto;
	height: auto;
	padding-right: 3.1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 1.45rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
	background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) no-repeat right 58% / 2.2rem 1px;
}

/* ---- Bande photo d'ouverture ----
   Trois couches distinctes : la photo (en noir et blanc), le fondu vers le fond,
   puis le grain. Le filtre noir et blanc ne porte QUE sur la photo — s'il portait
   sur le conteneur, il désaturerait aussi le noir du fondu, qui ne correspondrait
   alors plus au fond de la page et laisserait un raccord visible. */
.duo-hero-media-wrap {
	position: relative;
	line-height: 0;
	isolation: isolate;
}

.duo-hero__media {
	position: relative;
	width: 100%;
	height: clamp(340px, 44vw, 660px);
	max-height: 78svh;
	overflow: hidden;
}

/* Couche 1 — la photo en noir et blanc, avec le grain fondu dedans.
   Le grain est une seconde image de fond en mode « overlay » plutôt qu'une
   couche par-dessus : posé au-dessus du dégradé, il éclaircissait légèrement
   le fond et laissait un liseré net au bas de la bande. */
.duo-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Le diptyque est au format paysage (les deux portraits côte à côte) :
	   contrairement à la photo provisoire (portrait), il n'y a plus besoin de
	   le borner en largeur ni d'estomper ses bords latéraux — il couvre
	   naturellement toute la largeur de la bande, comme une photo de hero
	   ordinaire. Si une photo au format portrait revient un jour, relire la
	   note dans README.md (§ Bande photo d'ouverture) : ce bornage-là devra
	   être remis en place.
	   Le grain est stocké dans une variable pour ne pas répéter la longue URI
	   dans chaque déclinaison de taille ci-dessous. */
	--duo-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
	background-image: var(--duo-grain), url("assets/images/duo-diptyque-800.webp?v=5.7.3");
	background-size: 180px 180px, cover;
	/* Les deux têtes sont cadrées serré, tout près du haut de la photo source
	   (peu de marge au-dessus des cheveux). Sur un écran large, la bande a une
	   hauteur plafonnée (voir .duo-hero__media) alors que sa largeur continue
	   de grandir : `cover` doit alors rogner une part de plus en plus grande de
	   la hauteur de l'image, et un centrage à 30% coupait le haut des deux
	   têtes dès ~1500px de large. Recalé près du haut (4%) pour que les cheveux
	   restent visibles même sur un très grand écran ; mesuré et vérifié en
	   simulant le rendu réel (position + taille de fond) plutôt qu'à l'œil. */
	background-position: 0 0, center 4%;
	background-repeat: repeat, no-repeat;
	background-blend-mode: overlay, normal;
	filter: grayscale(100%) contrast(1.12) brightness(0.92);
}

@media (min-width: 600px) {
	.duo-hero__media::before {
		background-image: var(--duo-grain), url("assets/images/duo-diptyque-1120.webp?v=5.7.3");
	}
}

@media (min-width: 1000px) {
	.duo-hero__media::before {
		background-image: var(--duo-grain), url("assets/images/duo-diptyque-1500.webp?v=5.7.3");
	}
}

/* Couche 2 — fondu vers le fond, en haut (sous l'en-tête) et en bas (vers le texte) */
.duo-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--base) 0%,
		color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent) 9%,
		color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent) 26%,
		transparent 44%,
		transparent 52%,
		color-mix(in srgb, var(--wp--preset--color--base) 50%, transparent) 66%,
		color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent) 82%,
		var(--wp--preset--color--base) 97%
	);
}

@media (max-width: 782px) {
	.duo-hero__media {
		height: clamp(380px, 88vw, 560px);
		max-height: 62svh;
	}

	.duo-hero__media::before {
		background-position: 0 0, center 22%;
	}
}

/* ---- Titre du hero : le logo, pas du texte stylé ----
   Un vrai <h1> pour le référencement et les lecteurs d'écran (le nom est
   dans l'attribut alt de l'image), mais visuellement c'est le même fichier
   que le logo de l'en-tête — même fil tissé, même D et V en ambre — en
   beaucoup plus grand. */
.duo-hero-title {
	margin: 0;
	line-height: 0;
	display: flex;
	justify-content: center;
}

.duo-hero-title img {
	width: auto;
	height: clamp(96px, 14vw, 178px);
	display: block;
}

/* ---- Première lettre des titres, en ambre — écho du surtitre ---- */
.wp-site-blocks main > section h2::first-letter,
.duo-header .wp-block-navigation-item__label::first-letter {
	color: var(--wp--preset--color--accent);
}

/* ::first-letter ne s'applique qu'aux éléments de type bloc : le <span> du
   libellé de menu est inline par défaut, donc invisible sans cette ligne. */
.duo-header .wp-block-navigation-item__label {
	display: inline-block;
}

/* ---- Portraits : cadrage identique, couleur révélée au survol ---- */
.duo-portrait {
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 2px;
}

.duo-portrait img {
	filter: grayscale(100%) contrast(1.05);
	transition: filter 0.6s ease, transform 0.9s ease;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.duo-portrait:hover img,
.duo-portrait:focus-within img {
	filter: grayscale(0%);
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.duo-portrait img { transition: none; }
	.duo-portrait:hover img,
	.duo-portrait:focus-within img { transform: none; }
}

/* Libellé d'instrument, au-dessus de chaque nom : même graphie que les
   surtitres, avec le même filet d'or. */
.duo-instrument {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0;
}

.duo-instrument::before {
	content: "";
	flex: 0 0 1.6rem;
	height: 1px;
	background: currentColor;
}

/* ---- Vidéos : trois cadres de film ----
   Chaque cadre porte des coins de visée dorés, son numéro en italique et un
   bouton de lecture. La première vidéo, « très bientôt », est mise en avant :
   filet et bouton en or, halo qui respire. */
.duo-videos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 900px) {
	.duo-videos { grid-template-columns: 1fr; }
}

.duo-video {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	text-align: center;
	border: 1px solid var(--duo-filet-pale);
	background:
		radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--wp--preset--color--accent) 7%, transparent), transparent 70%),
		color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent);
	overflow: hidden;
	transition: border-color 0.5s ease;
}

/* Coins de visée : quatre équerres fines, dessinées en dégradés. */
.duo-video::before {
	--c: color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent);
	content: "";
	position: absolute;
	inset: 12px;
	pointer-events: none;
	opacity: 0.55;
	transition: opacity 0.5s ease, inset 0.5s ease;
	background:
		linear-gradient(var(--c), var(--c)) top left / 16px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) top left / 1px 16px no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 16px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 1px 16px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 16px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 1px 16px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 16px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 1px 16px no-repeat;
}

.duo-video:hover { border-color: var(--duo-filet); }
.duo-video:hover::before { opacity: 1; inset: 9px; }

.duo-video__num {
	position: absolute;
	top: 1.35rem;
	left: 1.7rem;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 1.6rem;
	color: var(--wp--preset--color--accent);
	line-height: 1;
}

.duo-video__lecture {
	position: relative;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 32%, transparent);
	transition: transform 0.5s ease, border-color 0.5s ease;
}

.duo-video__lecture::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0.8rem;
	height: 0.9rem;
	transform: translate(-50%, -50%);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.duo-video:hover .duo-video__lecture {
	transform: scale(1.06);
	border-color: var(--wp--preset--color--accent);
}

.duo-video__label {
	font-size: 0.68rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.duo-video--prochaine {
	border-color: var(--duo-filet);
}

.duo-video--prochaine .duo-video__lecture {
	border-color: var(--wp--preset--color--accent);
	animation: duo-pouls 2.8s ease-out infinite;
}

.duo-video--prochaine .duo-video__lecture::after {
	background: var(--wp--preset--color--accent);
}

.duo-video--prochaine .duo-video__label {
	color: var(--wp--preset--color--accent);
}

.duo-video:not(.duo-video--prochaine) {
	opacity: 0.72;
}

@keyframes duo-pouls {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent); }
	70%  { box-shadow: 0 0 0 16px color-mix(in srgb, var(--wp--preset--color--accent) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--accent) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
	.duo-video--prochaine .duo-video__lecture { animation: none; }
}

.duo-video iframe,
.duo-video video {
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Ligne d'agenda ---- */
.duo-event {
	display: grid;
	grid-template-columns: 8rem 1fr auto;
	gap: var(--wp--preset--spacing--40);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid #242B34;
}

.duo-event__date {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

.duo-event__place { color: var(--wp--preset--color--muted); }

@media (max-width: 600px) {
	.duo-event {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/* ---- Navigation : soulignement animé ---- */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 2px;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

/* ---- Apparition douce des sections ----
   Le masquage initial n'est appliqué que si le script a pu poser la classe
   « duo-js » sur <html> : sans JavaScript, tout reste lisible. */
.duo-js .duo-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.duo-js .duo-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.duo-js .duo-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Formulaire de contact (Contact Form 7)
   ============================================================ */

.duo-contact-form {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
	border-radius: 3px;
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

.duo-contact-form .wpcf7-form p {
	margin: 0 0 1rem;
}

/* Contact Form 7 enveloppe les champs dans un <p> et les sépare d'un <br> :
   la mise en ligne porte donc sur ce <p>, pas sur le conteneur. */
.duo-form-row > p,
.duo-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 1rem;
}

.duo-form-row > p {
	flex: 1 1 100%;
	margin-bottom: 0;
}

.duo-form-row br {
	display: none;
}

.duo-form-row .wpcf7-form-control-wrap {
	flex: 1 1 220px;
}

.duo-contact-form input[type="text"],
.duo-contact-form input[type="email"],
.duo-contact-form textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #2C3540;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	padding: 0.85rem 0.25rem;
	transition: border-color 0.25s ease;
}

.duo-contact-form textarea {
	min-height: 150px;
	resize: vertical;
}

.duo-contact-form input::placeholder,
.duo-contact-form textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.duo-contact-form input:focus,
.duo-contact-form textarea:focus {
	border-bottom-color: var(--wp--preset--color--accent);
	outline: none;
}

.duo-contact-form input[type="submit"] {
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 0;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin-top: var(--wp--preset--spacing--40);
	padding: 1.1rem 2.4rem;
	background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) no-repeat left / 100% 100%;
	transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.35s ease;
}

.duo-contact-form input[type="submit"]:hover,
.duo-contact-form input[type="submit"]:focus-visible {
	background-size: 0% 100%;
	color: var(--wp--preset--color--accent);
}

.duo-contact-form .wpcf7-spinner {
	margin-left: 0.75rem;
}

.duo-contact-form .wpcf7-response-output {
	border-color: #2C3540 !important;
	border-radius: 2px !important;
	font-size: 0.9375rem;
	margin: var(--wp--preset--spacing--40) 0 0 !important;
	padding: 0.85rem 1rem !important;
}

.duo-contact-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--accent);
	font-size: 0.85rem;
	margin-top: 0.35rem;
}

/* ============================================================
   Accessibilité
   ============================================================ */

/* Contenu réservé aux lecteurs d'écran */
.duo-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Lien d'évitement : hors écran, il revient au premier coup de tabulation */
.duo-skip-link {
	position: absolute;
	top: -100vh;
	left: 1rem;
	z-index: 100;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: 0.7rem 1.3rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	text-decoration: none;
}

.duo-skip-link:focus {
	top: 1rem;
	color: var(--wp--preset--color--base);
}

/* Indicateur de focus visible et homogène.
   Le thème repose beaucoup sur le survol ; sans cette règle, la navigation au
   clavier n'aurait aucun repère. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.duo-contact-form input:focus-visible,
.duo-contact-form textarea:focus-visible {
	outline-offset: 2px;
}

/* ============================================================
   Filets d'or
   ------------------------------------------------------------
   Un seul ton, défini ici, réutilisé partout : les filets doivent
   se lire comme une variation de lumière, pas comme des traits
   dessinés. Ils ne soulignent que des limites réelles — haut de
   section, colonne de texte, lignes d'agenda.
   ============================================================ */
:root {
	--duo-filet: color-mix(in srgb, var(--wp--preset--color--accent) 24%, transparent);
	--duo-filet-pale: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

/* Filet en tête de chaque section */
.wp-site-blocks main > section {
	position: relative;
}

.wp-site-blocks main > section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100% - 2 * var(--wp--preset--spacing--50), var(--wp--style--global--wide-size, 1180px));
	height: 1px;
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--duo-filet) 18%,
		var(--duo-filet) 82%,
		transparent 100%
	);
}

/* Les traits déjà présents adoptent le même ton */
.duo-header.is-scrolled {
	border-bottom-color: var(--duo-filet-pale);
}

.duo-event {
	border-bottom-color: var(--duo-filet-pale);
}

.duo-contact-form {
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}

/* ============================================================
   Menu mobile
   ------------------------------------------------------------
   WordPress ouvre le panneau plein écran en blanc sur noir dès
   lors que le bloc de navigation n'a pas de fond déclaré. Sur un
   site sombre, l'effet est brutal. Les !important sont là parce
   que la règle du cœur est au moins aussi spécifique.
   ============================================================ */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--70);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 2.75rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.1;
}

/* Le soulignement animé du menu de bureau n'a pas de sens ici */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--50);
	right: var(--wp--preset--spacing--50);
}

/* Le menu de bureau est aligné à droite ; en plein écran, l'alignement à
   gauche se lit mieux et suit la composition du reste du site.
   La variable est redéclarée sur le conteneur lui-même : WordPress la pose
   au même endroit, une déclaration sur un ancêtre ne suffirait pas. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	align-items: flex-start;
}


/* ============================================================
   Paille d'or — accents ponctuels
   ------------------------------------------------------------
   Plus un fond répété : une poignée d'amas de filaments, chacun
   placé une seule fois, à un endroit précis. Moins nombreux, de
   tailles franchement différentes, choisis pour accompagner un
   point de la composition plutôt que pour couvrir la page.

   Chaque image (dans assets/motifs/paille-<taille>-<n>.svg) est
   un fichier séparé — la variété du dessin compte autant que la
   position. Masqués sous 900px : à cette largeur ils tomberaient
   sur le texte plutôt qu'à côté.
   ============================================================ */
.wp-site-blocks > * {
	position: relative;
}

.duo-paille {
	pointer-events: none;
}

.duo-paille::before {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.8;
}

/* Dans l'en-tête, au bord extérieur droit — au-delà du menu, dans la marge de
   respiration de l'en-tête pleine largeur, jamais au contact d'un lien. */
/* L'éclat d'or suit le menu, pas le bord de la fenêtre : il était calé à droite de
   l'écran pendant que le menu, lui, suit la largeur du contenu — selon la taille de
   l'écran, les deux finissaient par se chevaucher sur « Contact ». Le menu réserve
   maintenant la place de l'éclat à sa droite (il se décale d'autant vers la gauche),
   et l'éclat s'y pose, toujours au même écart du dernier mot. */
@media (min-width: 1241px) {
	/* nav.… seulement : WordPress donne aussi la classe wp-block-navigation à la
	   liste des liens (<ul>), ce qui dédoublait l'éclat. */
	.duo-header nav.wp-block-navigation {
		position: relative;
		padding-right: calc(72px + 1.6rem);
		/* L'ensemble menu + éclat glisse un peu à droite, dans la marge de
		   l'en-tête (44 px) ; le décalage fond jusqu'à 0 vers 1250 px pour que
		   l'éclat ne touche jamais le bord de la fenêtre. */
		margin-right: calc(-1 * clamp(0px, (100vw - 1250px) * 0.6, 44px));
	}

	.duo-header nav.wp-block-navigation::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		width: 72px;
		height: 72px;
		transform: translateY(-50%);
		background: url("assets/motifs/paille-moyen-2.svg") no-repeat center / contain;
		opacity: 0.75;
		pointer-events: none;
	}
}

/* Haut à droite de « Le duo », dans le padding de la section : marque
   l'ouverture de la première. */
#le-duo::before {
	top: var(--wp--preset--spacing--30);
	right: clamp(0.5rem, 5vw, 4.5rem);
	width: 92px;
	height: 92px;
	background-image: url("assets/motifs/paille-grand-2.svg");
}

/* Bas à gauche de « Musique » — un amas moyen, en écho discret au premier. */
#musique::before {
	bottom: var(--wp--preset--spacing--50);
	left: clamp(0.5rem, 4vw, 3rem);
	width: 56px;
	height: 56px;
	background-image: url("assets/motifs/paille-moyen-1.svg");
}

/* Haut à droite de « Concerts » — le plus petit des trois, presque un point. */
#concerts::before {
	top: var(--wp--preset--spacing--50);
	right: clamp(0.5rem, 4vw, 3rem);
	width: 34px;
	height: 34px;
	background-image: url("assets/motifs/paille-petit-1.svg");
}

/* Bas à droite de « Contact », près du bouton Envoyer — le second grand amas,
   pour refermer la page en écho à celui qui l'ouvre. */
#contact::before {
	bottom: var(--wp--preset--spacing--60);
	right: clamp(0.5rem, 5vw, 4.5rem);
	width: 84px;
	height: 84px;
	background-image: url("assets/motifs/paille-grand-1.svg");
	transform: scaleX(-1);
}

#le-duo,
#musique,
#concerts,
#contact {
	position: relative;
	overflow: hidden;
}

#le-duo::before,
#musique::before,
#concerts::before,
#contact::before {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.75;
	pointer-events: none;
}

@media (max-width: 900px) {
	#le-duo::before,
	#musique::before,
	#concerts::before,
	#contact::before {
		display: none;
	}
}

/* La bande photo d'ouverture reste nette : aucun accent ne s'y pose. */
.duo-hero-media-wrap {
	background: var(--wp--preset--color--base);
}

/* ---- Lettrine du nom du site : D et V en ambre, un peu plus grands ---- */
.duo-titre-lettre {
	color: var(--wp--preset--color--accent);
	font-size: 1.2em;
}

/* ---- « Agenda » en attente ----
   Pas de boîte : deux filets d'or en haut et en bas, un losange au centre du
   filet supérieur, et la phrase en grand italique. */
.duo-agenda-vide {
	position: relative;
	border-top: 1px solid var(--duo-filet);
	border-bottom: 1px solid var(--duo-filet);
	padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1rem, 4vw, 2.75rem);
	text-align: center;
}

.duo-agenda-vide::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	width: 7px;
	height: 7px;
	background: var(--wp--preset--color--accent);
	transform: translateX(-50%) rotate(45deg);
}

.duo-agenda-phrase {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(2rem, 3.6vw, 3rem) !important;
	font-weight: 300;
	line-height: 1.12;
	text-wrap: balance;
}

/* ---- Logo dans l'en-tête : image plutôt que texte, taille contenue ----
   Servi comme fichier du thème, pas via la médiathèque : sur ce serveur, GD
   (le moteur d'images de WordPress) aplatit la transparence des PNG en blanc
   dès qu'il les retouche — y compris le fichier original, pas seulement les
   vignettes. Un simple <img> pointant sur le thème n'est jamais retouché. */
.duo-logo-header {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.duo-logo-header img {
	/* Assez grand pour que le fil tissé et les volutes se voient — en dessous
	   d'une cinquantaine de pixels, ça se lisait juste comme du texte plat. */
	width: auto;
	height: 68px;
	display: block;
}

@media (max-width: 480px) {
	.duo-logo-header img {
		height: 46px;
	}
}

/* ============================================================
   Finitions typographiques — Cormorant Garamond
   ------------------------------------------------------------
   Les titres sont en Cormorant (même famille que le logo), le
   texte courant en Inter léger. Chaque titre de section finit sur
   quelques mots en italique (<em>) ; chaque section s'ouvre sur un
   paragraphe d'introduction en grand italique (.duo-lead).
   ============================================================ */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

main p {
	font-weight: 350;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 86%, transparent);
}

h1, h2, h3 {
	text-wrap: balance;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures discretionary-ligatures;
}

h2 em,
h3 em {
	font-style: italic;
	font-weight: 300;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 62%, var(--wp--preset--color--contrast));
}

main > section h2 {
	max-width: 15ch;
}

.duo-lead {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.5rem, 2.3vw, 1.95rem);
	line-height: 1.38;
	color: var(--wp--preset--color--contrast) !important;
	text-wrap: pretty;
}

main > section p:not(.duo-lead):not(.duo-eyebrow):not(.duo-instrument):not(.duo-agenda-phrase):not(.duo-mail) {
	text-wrap: pretty;
	hanging-punctuation: first;
}

.wp-block-column h3 {
	font-weight: 400;
	letter-spacing: -0.005em;
}

/* ---- Ouverture : logo, noms et boutons centrés, qui mordent sur la photo ---- */
.duo-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.duo-hero__kicker {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.25rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.duo-hero__kicker::before,
.duo-hero__kicker::after {
	content: "";
	width: clamp(2rem, 6vw, 4rem);
	height: 1px;
	background: linear-gradient(to right, transparent, var(--wp--preset--color--accent));
}

.duo-hero__kicker::after {
	background: linear-gradient(to left, transparent, var(--wp--preset--color--accent));
}

.duo-hero__names {
	margin: 1.4rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	letter-spacing: 0.01em;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 90%, transparent);
}

.duo-nom {
	display: inline-block;
}

.duo-amp {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--accent);
	margin: 0 0.15em;
}

.duo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Le texte mord sur le bas de la photo, déjà fondu dans le noir : photo, logo,
   noms et boutons tiennent ensemble dans le premier écran. Sélecteur renforcé :
   WordPress remet à zéro la marge du premier enfant d'un groupe avec une règle
   plus spécifique qu'une simple classe. */
.duo-hero > .duo-hero__content.duo-hero__content {
	margin-block-start: clamp(-13rem, -13vw, -4rem);
}

@media (max-width: 600px) {
	.duo-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: min(100%, 18rem);
	}
}

/* Indication de défilement : un trait vertical où glisse une goutte d'or. */
.duo-hero__scroll {
	display: block;
	margin-top: clamp(2.75rem, 6vw, 4.5rem);
	padding: 0.5rem;
}

.duo-hero__scroll span {
	position: relative;
	display: block;
	width: 1px;
	height: 3.75rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.duo-hero__scroll span::after {
	content: "";
	position: absolute;
	left: 0;
	top: -40%;
	width: 1px;
	height: 40%;
	background: var(--wp--preset--color--accent);
	animation: duo-goutte 2.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes duo-goutte {
	0%   { top: -40%; }
	100% { top: 100%; }
}

/* Entrée en scène : la photo se pose en dézoomant lentement (ancrée en
   haut, pour ne jamais rogner les têtes), puis le texte monte, élément
   après élément. Seulement si le script est là et le mouvement autorisé. */
.duo-js .duo-hero__media::before {
	transform-origin: 50% 0;
	animation: duo-respiration 9s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

@keyframes duo-respiration {
	from { transform: scale(1.07); opacity: 0.35; }
	30%  { opacity: 1; }
	to   { transform: scale(1); opacity: 1; }
}

/* Délais courts : le grand logo est le premier élément que le navigateur
   considère comme « affiché » (mesure de vitesse LCP). Le retarder d'une
   seconde pénaliserait la note de vitesse du site. */
.duo-js .duo-hero__content > * {
	animation: duo-monter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.duo-js .duo-hero__content > :nth-child(1) { animation-delay: 0.05s; }
.duo-js .duo-hero__content > :nth-child(2) { animation-delay: 0.12s; }
.duo-js .duo-hero__content > :nth-child(3) { animation-delay: 0.3s; }
.duo-js .duo-hero__content > :nth-child(4) { animation-delay: 0.45s; }
.duo-js .duo-hero__content > :nth-child(5) { animation-delay: 0.8s; }

@keyframes duo-monter {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.duo-hero__scroll span::after { animation: none; top: 30%; }
}

/* ---- Logo de l'en-tête : caché tant que le grand logo de l'ouverture est
   à l'écran, pour ne pas afficher deux fois le nom. Le script pose la classe
   « avec-grand-logo » ; sans script, le logo de l'en-tête reste visible. ---- */
.duo-logo-header {
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0s;
}

.duo-header.avec-grand-logo .duo-logo-header {
	opacity: 0;
	transform: translateY(-6px);
	visibility: hidden;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

/* ---- Boutons : rectangles fins, capitales espacées, remplissage qui glisse ---- */
.duo-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.1rem 2.4rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 38%, transparent);
	color: var(--wp--preset--color--contrast);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) no-repeat left / 0% 100%;
	transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.35s ease, border-color 0.35s ease;
}

.duo-bouton:hover,
.duo-bouton:focus-visible {
	background-size: 100% 100%;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.duo-bouton--plein {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	background-size: 100% 100%;
	background-position: right;
}

.duo-bouton--plein:hover,
.duo-bouton--plein:focus-visible {
	background-size: 0% 100%;
	color: var(--wp--preset--color--accent);
}

/* ---- Portraits : cadre d'or décalé ----
   Les deux portraits restent alignés en haut : un essai en quinconce (le second
   plus bas) se lisait comme une erreur d'alignement, pas comme un effet. */
.duo-portrait {
	outline: 1px solid var(--duo-filet);
	outline-offset: 12px;
	transition: outline-color 0.6s ease, outline-offset 0.6s ease;
	overflow: hidden;
	border-radius: 0;
}

.duo-portrait:hover,
.duo-portrait:focus-within {
	outline-color: var(--wp--preset--color--accent);
	outline-offset: 7px;
}


/* ---- Adresse e-mail : texte droit, filet discret qui passe à l'or au survol ----
   Pas d'italique ni de grande taille : un essai en grand Cormorant italique
   faisait trop décoratif pour une adresse, et l'arobase y est disgracieuse. */
.duo-mail {
	margin: 0;
}

.duo-mail a,
.duo-footer__mail a {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-weight: 400;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding-bottom: 0.3rem;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) no-repeat left bottom / 0% 1px,
		linear-gradient(var(--duo-filet), var(--duo-filet)) no-repeat left bottom / 100% 1px;
	transition: background-size 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.3s ease;
	overflow-wrap: anywhere;
}

.duo-mail a:hover,
.duo-mail a:focus-visible,
.duo-footer__mail a:hover,
.duo-footer__mail a:focus-visible {
	background-size: 100% 1px, 100% 1px;
	color: var(--wp--preset--color--accent);
}

.duo-footer__mail a {
	font-size: 0.9375rem;
}

/* ---- Formulaire : cadre adouci, dans le ton des autres filets ---- */
.duo-contact-form {
	border-color: var(--duo-filet-pale);
	border-radius: 0;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 40%, transparent);
}

/* ---- Pied de page : signature centrée autour du logo ---- */
.duo-footer {
	border-top: 1px solid var(--duo-filet-pale);
	text-align: center;
}

.duo-footer__signature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}

.duo-footer__logo {
	display: inline-block;
	line-height: 0;
	transition: opacity 0.3s ease;
}

.duo-footer__logo:hover { opacity: 0.8; }

.duo-footer__logo img {
	height: clamp(64px, 8vw, 88px);
	width: auto;
}

.duo-footer__devise {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.duo-footer__mail {
	margin: 0.4rem 0 0;
}

.duo-footer__bas {
	margin-top: var(--wp--preset--spacing--70) !important;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--duo-filet-pale);
}

.duo-footer__bas p {
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: color-mix(in srgb, var(--wp--preset--color--muted) 80%, transparent);
}

@media (max-width: 600px) {
	.duo-footer__bas {
		justify-content: center !important;
		text-align: center;
	}
}

/* ============================================================
   Formulaire : sauts de ligne parasites
   ------------------------------------------------------------
   Contact Form 7 insère un <br> après chaque étiquette (masquée
   pour les lecteurs d'écran seulement) : une ligne vide en plus
   devant certains champs, d'où un espacement irrégulier.
   ============================================================ */
.duo-contact-form .wpcf7-form br {
	display: none;
}

/* ============================================================
   Téléphone et petite tablette
   ------------------------------------------------------------
   Vérifié en capture à 390 px (iPhone). Même soin que sur
   ordinateur : moins de vide, en-tête plus compact, vidéos en
   carrousel au doigt, formulaire pleine largeur.
   ============================================================ */
@media (max-width: 781px) {
	/* En-tête plus bas : il reste collé en haut et mangeait ~95 px. */
	.duo-header {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}

	/* Ouverture : pas de trait « défiler » (le geste est naturel au doigt), et une
	   marge basse raisonnable avant la première section. */
	.duo-hero__scroll {
		display: none;
	}

	.wp-site-blocks .duo-hero {
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	/* Sections : un peu moins d'air qu'à l'écran large, où la place ne manque pas. */
	.wp-site-blocks main > section {
		padding-top: 3.75rem !important;
		padding-bottom: 3.75rem !important;
	}

	/* Cadre or des portraits plus serré : il frôlait le bord de l'écran. */
	.duo-portrait {
		outline-offset: 7px;
	}

	/* Vidéos : carrousel horizontal. Chaque cadre occupe l'essentiel de la
	   largeur et laisse voir le suivant, qui invite à glisser. Le carrousel
	   déborde jusqu'aux bords de l'écran, au-delà des marges du texte. */
	.duo-videos {
		display: flex;
		gap: 0.9rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* !important : WordPress impose des marges automatiques en !important
		   aux enfants d'un groupe « contraint », qui annulaient le débordement. */
		margin-left: calc(-1 * var(--wp--style--root--padding-left, 1.5rem)) !important;
		margin-right: calc(-1 * var(--wp--style--root--padding-right, 1.5rem)) !important;
		max-width: none !important;
		padding-inline: var(--wp--style--root--padding-left, 1.5rem);
		scroll-padding-inline: var(--wp--style--root--padding-left, 1.5rem);
	}

	.duo-videos::-webkit-scrollbar {
		display: none;
	}

	.duo-video {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}

	/* Formulaire : moins de cadre, plus de champ ; bouton pleine largeur, facile
	   à atteindre du pouce. */
	.duo-contact-form {
		padding: 1.5rem 1.25rem;
	}

	.duo-contact-form input[type="submit"] {
		width: 100%;
	}

	.duo-contact-form .wpcf7-form > p:last-of-type {
		margin-bottom: 0;
	}

	.duo-agenda-vide {
		padding-inline: 0.5rem;
	}
}

/* Tablette (600–781 px) : les colonnes de WordPress s'empilent sous 782 px, ce qui
   donnait deux portraits de plus d'un écran de haut chacun. Côte à côte ici, comme
   sur ordinateur ; le carrousel vidéo montre davantage du cadre suivant. */
@media (min-width: 600px) and (max-width: 781px) {
	.duo-portraits {
		flex-wrap: nowrap !important;
		gap: 2rem;
	}

	.duo-portraits > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	.duo-video {
		flex-basis: 62%;
	}
}

/* ============================================================
   Texte justifié
   ------------------------------------------------------------
   Toujours avec la césure française (hyphens: auto, la page
   est déclarée lang="fr-FR") : sans elle, le justifié creuse de
   grands blancs entre les mots, surtout dans les colonnes étroites
   du téléphone. Coupures seulement dans les mots d'au moins
   7 lettres, avec au moins 3 lettres de part et d'autre.
   Restent alignés à gauche ou centrés : titres, surtitres, phrases
   centrées (agenda), adresse e-mail.
   ============================================================ */
main > section p:not(.duo-eyebrow):not(.duo-instrument):not(.has-text-align-center):not(.duo-mail) {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 7 3 3;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	/* Retour à la ligne normal : combiné au justifié, l'équilibrage « pretty »
	   donnait des lignes plus irrégulières (constaté sur les introductions). */
	text-wrap: wrap;
}

/* Sur téléphone (colonne d'une quarantaine de signes), le texte courant justifié
   se troue de grands blancs, quel que soit le navigateur : WebKit ne coupe les mots
   qu'en dernier recours, et Chrome n'en coupait que deux sur toute la page. Il
   repasse donc à gauche, comme dans les applications de presse — introductions
   comprises : même en grand italique, elles se trouaient de blancs à cette largeur. */
@media (max-width: 599px) {
	main > section p:not(.duo-eyebrow):not(.duo-instrument):not(.has-text-align-center):not(.duo-mail) {
		text-align: start;
		/* Aligné à gauche, couper les mots n'apporte plus rien (« répon-dons »). */
		-webkit-hyphens: manual;
		hyphens: manual;
	}
}


/* ============================================================
   Téléphone : confort de lecture et de toucher
   ============================================================ */
html {
	/* iOS agrandit sinon le texte tout seul quand on tourne le téléphone. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

a,
button,
input,
textarea {
	-webkit-tap-highlight-color: transparent;
}

@media (max-width: 599px) {
	/* Bios : le petit corps gris se lisait mal sur un écran de téléphone. */
	.duo-portraits .has-small-font-size {
		font-size: 1rem !important;
		line-height: 1.65;
		color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent) !important;
	}

	/* Champ « Votre message » : il occupait presque un demi-écran vide. */
	.duo-contact-form textarea {
		min-height: 0;
		height: 9.5rem;
	}
}

/* Formulaire : le paragraphe que Contact Form 7 glisse dans la rangée Nom / E-mail
   gardait sa marge basse en plus de celle de la rangée — 32 px sous l'e-mail contre
   16 px entre les autres champs, sur téléphone comme sur ordinateur. */
.duo-contact-form .duo-form-row > p {
	margin-bottom: 0;
}