/*
 * Le dîner des prénoms by Timone : site one page.
 * Charte v2 du 2026-10-20. Toutes les couleurs, polices et espacements sont dans ce bloc,
 * pour un remplacement en une fois au passage de /brand.
 */
:root {
	--ddp-creme: #F7F3EB;
	--ddp-encre: #29465A;
	--ddp-grise: #78909A;
	--ddp-camel: #C7AD8D;
	--ddp-charbon: #343431;
	--ddp-camel-voile: rgba(199, 173, 141, 0.45); /* filet intérieur du carton */
	--ddp-camel-rabat: rgba(199, 173, 141, 0.16); /* rabat des marque-places */

	--ddp-titre: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
	--ddp-texte: "Nunito Sans", "Avenir Next", system-ui, sans-serif;
	--ddp-manuscrit: "Pinyon Script", "Snell Roundhand", cursive;

	--ddp-gouttiere: 16px;
	--ddp-espace: clamp(56px, 8vw, 112px);
	--ddp-rayon: 2px;
}

@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/ddp/BodoniModa.woff") format("woff");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Bodoni Moda";
	src: url("../fonts/ddp/BodoniModa-Italic.woff") format("woff");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Nunito Sans";
	src: url("../fonts/ddp/NunitoSans.woff") format("woff");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pinyon Script";
	src: url("../fonts/ddp/PinyonScript-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Socle : cette feuille n'est chargée que sur le site one page */
html, body { background: var(--ddp-creme); }
body { margin: 0; }
.wp-site-blocks { padding: 0 !important; }

.ddp {
	color: var(--ddp-charbon);
	font-family: var(--ddp-texte);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.ddp *, .ddp *::before, .ddp *::after { box-sizing: border-box; }
.ddp p { margin: 0; text-wrap: pretty; }
/* paragraphes centrés : lignes équilibrées, pas de mot seul en dernière ligne */
.ddp .ddp-origine, .ddp .ddp-teasing, .ddp .ddp-concept, .ddp .ddp-annonce, .ddp .ddp-relais, .ddp .ddp-pied p { text-wrap: balance; }
.ddp a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ddp :focus-visible { outline: 2px solid var(--ddp-camel); outline-offset: 3px; }

/* Boutons : capitales espacées, crème sur bleu encre (charte) */
.ddp .ddp-bouton {
	display: inline-block;
	border: 0;
	border-radius: var(--ddp-rayon);
	padding: 18px 34px;
	background: var(--ddp-encre);
	color: var(--ddp-creme);
	font-family: var(--ddp-texte);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s;
}
.ddp .ddp-bouton:hover { background: var(--ddp-charbon); }

/* Ouverture */
.ddp-ouverture {
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 104px) var(--ddp-gouttiere) clamp(40px, 6vw, 72px);
	text-align: center;
}
.ddp-logo {
	display: block;
	width: clamp(320px, 30vw, 380px);
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
/* la ligne d'origine introduit le titre : plus d'air au-dessus, collée au titre */
.ddp-origine {
	max-width: 30em;
	margin: clamp(40px, 6vw, 72px) auto 0 !important;
	color: var(--ddp-encre);
	font-family: var(--ddp-titre);
	font-size: 22px; /* minimum de la charte pour Bodoni Moda */
	font-style: italic;
	line-height: 1.35;
}
.ddp .ddp-ouverture h1 {
	margin: 14px auto 0;
	max-width: 15em;
	color: var(--ddp-encre);
	font-family: var(--ddp-titre);
	font-size: clamp(36px, 5.2vw, 56px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: 0;
	text-wrap: balance;
}
.ddp-teasing {
	max-width: 34em;
	margin: 28px auto 0 !important;
}
.ddp-ouverture .ddp-bouton { margin-top: 40px; }

/* La table : des marque-places de part et d'autre d'une nappe */
.ddp-table {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 var(--ddp-gouttiere);
}
.ddp-rang {
	display: flex;
	justify-content: center;
	gap: clamp(8px, 2vw, 22px);
}
.ddp-carte {
	flex: 0 1 140px;
	min-width: 0;
	padding: 28px 10px 14px;
	border: 1px solid var(--ddp-grise);
	border-radius: 1px;
	/* le marque-place plié : le rabat du dos, puis le pli en camel */
	background: linear-gradient(var(--ddp-camel-rabat) 0 13px, var(--ddp-camel) 13px 14px, var(--ddp-creme) 14px);
	color: var(--ddp-encre);
	font-family: var(--ddp-manuscrit);
	font-size: 40px;
	line-height: 1.1;
	text-align: center;
}
.ddp-nom {
	display: block;
	transition: opacity 0.35s ease;
}
.ddp-nom.ddp-efface { opacity: 0; }
.ddp-nappe {
	height: 2px;
	margin: clamp(18px, 3vw, 28px) 0;
	background: var(--ddp-camel);
}

/* Le seul mouvement de la page : les marque-places se posent un par un */
@media (prefers-reduced-motion: no-preference) {
	.ddp-table.ddp-anime .ddp-carte {
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.5s ease, transform 0.5s ease;
		transition-delay: calc(var(--i) * 90ms);
	}
	.ddp-table.ddp-anime.ddp-pose .ddp-carte {
		opacity: 1;
		transform: none;
	}
}

.ddp-concept {
	max-width: 36em;
	margin: clamp(40px, 6vw, 64px) auto 0 !important;
	padding: 0 var(--ddp-gouttiere);
	font-size: clamp(18px, 1.6vw, 20px);
	text-align: center;
}

/* L'invitation : bleu encre, carton à double filet camel */
.ddp-invitation {
	margin-top: clamp(48px, 6vw, 80px);
	padding: var(--ddp-espace) var(--ddp-gouttiere);
	background: var(--ddp-encre);
	color: var(--ddp-creme);
}
.ddp-carton {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(36px, 6vw, 72px) clamp(20px, 6vw, 72px);
	border: 1px solid var(--ddp-camel);
}
.ddp-carton::before {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1px solid var(--ddp-camel-voile);
	pointer-events: none;
}
.ddp .ddp-carton h2 {
	margin: 0 auto;
	max-width: 14em;
	color: var(--ddp-creme);
	font-family: var(--ddp-titre);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 450;
	/* sur fond bleu encre, les déliés de la taille d'affichage disparaissent (le 4 de « 24 ») */
	font-variation-settings: "opsz" 18;
	line-height: 1.15;
	letter-spacing: 0;
	text-align: center;
	text-wrap: balance;
}
/* les deux dates sous le titre, une par ligne */
.ddp .ddp-dates {
	margin: 16px auto 0;
	color: var(--ddp-camel);
	font-family: var(--ddp-titre);
	font-size: clamp(22px, 2.4vw, 26px);
	font-style: italic;
	font-weight: 450;
	font-variation-settings: "opsz" 18; /* déliés plus solides sur le bleu encre */
	line-height: 1.4;
	text-align: center;
}
.ddp-dates span { display: block; }
.ddp-annonce {
	max-width: 32em;
	margin: 24px auto 0 !important;
	text-align: center;
}
.ddp-relais {
	max-width: 32em;
	margin: 16px auto 0 !important;
	color: var(--ddp-camel);
	font-size: 16px;
	text-align: center;
}

/* Formulaire */
.ddp-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 32px;
	margin-top: clamp(36px, 5vw, 56px);
}
/* display:grid l'emporterait sur l'attribut hidden : le formulaire resterait affiché après l'envoi */
.ddp-form[hidden] { display: none; }
.ddp-champ { display: flex; flex-direction: column; min-width: 0; }
.ddp-champ--large, .ddp-consentement, .ddp-envoi { grid-column: 1 / -1; }
.ddp-champ label {
	margin-bottom: 2px;
	font-size: 15px;
	font-weight: 600;
}
/* champs sur une ligne camel, comme on remplit un carton-réponse */
.ddp-champ input {
	width: 100%;
	padding: 10px 0 8px;
	border: 0;
	border-bottom: 1px solid var(--ddp-camel);
	border-radius: 0;
	background: transparent;
	color: var(--ddp-creme);
	font-family: var(--ddp-texte);
	font-size: 17px;
	line-height: 1.3;
	transition: border-color 0.2s;
}
.ddp-champ input:hover { border-bottom-color: var(--ddp-creme); }
.ddp-champ input:focus-visible {
	outline: none;
	border-bottom: 2px solid var(--ddp-creme);
	padding-bottom: 7px;
}
.ddp-champ input:-webkit-autofill {
	-webkit-text-fill-color: var(--ddp-creme);
	-webkit-box-shadow: 0 0 0 40px var(--ddp-encre) inset;
	caret-color: var(--ddp-creme);
}
.ddp-aide {
	margin-top: 6px !important;
	color: var(--ddp-camel);
	font-size: 14px;
	line-height: 1.45;
}
.ddp-consentement {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.5;
}
.ddp-consentement input {
	flex: none;
	display: grid;
	place-content: center;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border: 1px solid var(--ddp-camel);
	border-radius: 1px;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.ddp-consentement input:checked { background: var(--ddp-camel); }
.ddp-consentement input:checked::after {
	content: "";
	width: 5px;
	height: 9px;
	margin-top: -2px;
	border: solid var(--ddp-encre);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ddp-envoi { text-align: center; margin-top: 8px; }
.ddp .ddp-envoi .ddp-bouton:disabled { opacity: 0.6; cursor: wait; }
.ddp .ddp-erreur {
	margin-top: 14px;
	color: var(--ddp-creme);
	font-size: 15px;
}
/* champ piège pour les robots, hors de l'écran */
.ddp-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ddp .ddp-envoi .ddp-bouton { background: var(--ddp-creme); color: var(--ddp-encre); }
.ddp .ddp-envoi .ddp-bouton:hover { background: var(--ddp-camel); }
/* confirmation : remplace le formulaire, avec une coche camel pour qu'on la repère tout de suite */
.ddp-merci {
	position: relative;
	margin: clamp(36px, 5vw, 56px) auto 0 !important;
	padding-top: 92px;
	max-width: 18em;
	color: var(--ddp-creme);
	font-family: var(--ddp-titre);
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.3;
	text-align: center;
}
.ddp-merci:focus { outline: none; }
.ddp-merci::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 64px;
	height: 64px;
	margin-left: -32px;
	border: 1px solid var(--ddp-camel);
	border-radius: 50%;
}
.ddp-merci::after {
	content: "";
	position: absolute;
	top: 18px;
	left: 50%;
	width: 12px;
	height: 22px;
	margin-left: -7px;
	border: solid var(--ddp-camel);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* Pied de page */
.ddp-pied {
	padding: 32px var(--ddp-gouttiere);
	font-size: 14px;
	text-align: center;
}

/* Ordinateur peu haut (1366 × 768) : le bouton de l'ouverture reste visible sans défiler */
@media (min-width: 601px) and (max-height: 820px) {
	.ddp-ouverture { padding-top: 40px; }
	.ddp-logo { width: 340px; }
	.ddp-origine { margin-top: 24px !important; }
	.ddp-ouverture .ddp-bouton { margin-top: 32px; }
}

/* Tablette : 4 marque-places par rang, pour que le prénom le plus large respire */
@media (min-width: 601px) and (max-width: 900px) {
	.ddp-rang .ddp-carte:nth-child(n+5) { display: none; }
}

/* Mobile */
@media (max-width: 600px) {
	/* 3 marque-places par rang ; le prénom le plus large (Thomas, 113 px à 40 px) doit tenir */
	.ddp-table { padding-inline: 10px; }
	.ddp-rang { gap: 6px; }
	.ddp-rang .ddp-carte:nth-child(n+4) { display: none; }
	.ddp-carte { flex-basis: 33%; padding-inline: 2px; }
	.ddp-form { grid-template-columns: 1fr; }
	.ddp .ddp-envoi .ddp-bouton { width: 100%; padding-inline: 16px; }
}
@media (max-width: 379px) {
	.ddp-rang .ddp-carte:nth-child(n+3) { display: none; }
	.ddp-carte { flex-basis: 45%; }
}