/*
 * Feuille de charte du cabinet — plugin Dr Donia Ben Jemia Design System.
 *
 * Les jetons (couleurs, typographie, espacements, rayons, ombres) viennent
 * de `data/theme-json.php` et sont exposés par WordPress sous forme de
 * variables `--wp--preset--*`. Ce fichier ne contient que ce que theme.json
 * ne sait pas exprimer : focus, survols, décorations, accordéons, formulaire.
 */

/* -------------------------------------------------------------------------
 * Défilement
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* Compense l'en-tête fixe lors de l'ancrage. */
	scroll-padding-top: 5.5rem;
}

/* -------------------------------------------------------------------------
 * Focus visible — WCAG 2.2 AA (2.4.11, 2.4.13)
 * L'or texte (#7F5620) offre 6.18:1 sur ivoire.
 * ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-700, #7f5620);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Sur-titre or (`is-style-eyebrow`, variation déclarée en PHP)
 * theme.json porte couleurs, typographie, bordure et padding ; `display`
 * n'est pas exprimable en theme.json.
 * ---------------------------------------------------------------------- */

.is-style-eyebrow {
	display: inline-block;
	vertical-align: top;
}

/*
 * Pastille avec icône (`core/group` + `outermost/icon-block` + paragraphe).
 * inline-flex plutôt que flex : en layout contraint, un bloc à largeur
 * ajustée serait centré par les marges automatiques du parent.
 */
.wp-block-group.is-style-eyebrow {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.4em;
	width: fit-content;
}

.wp-block-group.is-style-eyebrow > * {
	margin: 0;
}

.wp-block-group.is-style-eyebrow .wp-block-outermost-icon-block {
	flex: none;
	line-height: 0;
}

/*
 * Sur-titre → titre : écart unique sur tout le site (jeton spacing|20).
 * Couvre la pastille seule et la pastille enveloppée (groupe de centrage).
 * `!important` : de nombreux titres portent un `margin-top:0` en ligne.
 */
:is(.is-style-eyebrow, :has(> .is-style-eyebrow:only-child)) + :is(.wp-block-heading, .wp-block-post-title) {
	margin-block-start: var(--wp--preset--spacing--20) !important;
}

/* En pile flex, l'écart est déjà porté par `gap`. */
.is-layout-flex > :is(.is-style-eyebrow, :has(> .is-style-eyebrow:only-child)) + :is(.wp-block-heading, .wp-block-post-title) {
	margin-block-start: 0 !important;
}

/* Dans une pile flex verticale, la pastille garde la largeur de son texte. */
.is-layout-flex.is-vertical > .is-style-eyebrow {
	align-self: flex-start;
}

.is-layout-flex.is-vertical.is-content-justification-center > .is-style-eyebrow {
	align-self: center;
}

/* Variante avec point « ouvert » (hero d'accueil). */
.is-style-eyebrow.drd-badge--dot::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-inline-end: 0.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--success);
	vertical-align: 0.05em;
}

/* -------------------------------------------------------------------------
 * Carte cliquable (`drd-card-link`) — le titre est le lien étiré.
 * ---------------------------------------------------------------------- */

.drd-card-link :is(h2, h3, h4, p) a {
	text-decoration: none;
}

.drd-card-link {
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.drd-card-link:hover,
.drd-card-link:focus-within {
	border-color: var(--wp--preset--color--gold-500);
}

@media (prefers-reduced-motion: no-preference) {

	.drd-card-link:hover {
		transform: translateY(-0.25rem);
	}
}

/* -------------------------------------------------------------------------
 * Carte informative (`drd-info-card`) — section Botox.
 * La carte n'est pas cliquable : seule la bordure s'éclaire au survol.
 * ---------------------------------------------------------------------- */

.drd-info-card {
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.drd-info-card:hover {
	border-color: var(--wp--preset--color--gold-500);
}

@media (prefers-reduced-motion: no-preference) {

	.drd-info-card:hover {
		transform: translateY(-0.25rem);
	}
}

/* -------------------------------------------------------------------------
 * Cartes techniques (Greffe) — quart de cercle décoratif.
 * ---------------------------------------------------------------------- */

.drd-technique-card {
	position: relative;
	overflow: hidden;
}

.drd-technique-card::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 7rem;
	height: 7rem;
	border-end-start-radius: 100%;
	pointer-events: none;
	background: color-mix(in srgb, var(--wp--preset--color--gold-500) 10%, transparent);
}

.drd-technique-card--rose::after {
	background: color-mix(in srgb, var(--wp--preset--color--rose-gold) 10%, transparent);
}

.drd-technique-card > * {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
 * Liens-pilules (Greffe) — survol de la bordure et du texte.
 * ---------------------------------------------------------------------- */

.drd-pill-link {
	transition: border-color 0.2s ease;
}

.drd-pill-link:hover {
	border-color: var(--wp--preset--color--gold-500);
}

.drd-pill-link a:hover {
	color: var(--wp--preset--color--gold-700);
}

/* -------------------------------------------------------------------------
 * Grilles Greffe / Problèmes — points de rupture de la source.
 * ---------------------------------------------------------------------- */

.drd-greffe-indications {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {

	.drd-greffe-indications {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

.drd-problemes-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/*
 * Grille des diplômes (Approche).
 * `container-type: inline-size` (généré par le layout grid) provoque, dans un
 * conteneur flex, un étirement vertical de la grille à la hauteur du parent.
 * On neutralise le containment et on fixe les colonnes de la source.
 */
.drd-approche-credentials {
	container-type: normal !important;
	grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {

	.drd-approche-credentials {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 768px) {

	.drd-problemes-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1024px) {

	.drd-problemes-grid {
		grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
	}
}

/* -------------------------------------------------------------------------
 * Bande Botox — colonnes empilées jusqu'à 1024 px.
 * Core empile les colonnes sous 768 px seulement ; la source bascule à `lg`.
 * ---------------------------------------------------------------------- */

@media (max-width: 1023px) {

	.drd-botox-band .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.drd-botox-band .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* -------------------------------------------------------------------------
 * Grille Botox — 4 colonnes à partir de 1024 px.
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.drd-botox-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* -------------------------------------------------------------------------
 * FAQ native (`core/details`) — carte et chevron.
 * ---------------------------------------------------------------------- */

.drd-faq-item {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
	border-radius: var(--wp--preset--border-radius--lg);
	overflow: hidden;
}

.drd-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
}

.drd-faq-item summary::-webkit-details-marker {
	display: none;
}

.drd-faq-item summary::after {
	content: "+";
	flex-shrink: 0;
	color: var(--wp--preset--color--gold-700);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}

.drd-faq-item[open] summary::after {
	content: "−";
}

.drd-faq-item summary:hover {
	color: var(--wp--preset--color--gold-700);
}

.drd-faq-item > :not(summary) {
	margin: 0;
	padding: 0 1.25rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

/* -------------------------------------------------------------------------
 * Formulaire Contact Form 7 — champs et messages.
 * ---------------------------------------------------------------------- */

/* Les contrôles de formulaire n'héritent pas la police par défaut (Arial). */
:where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.drd-contact-form .drd-form-row {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 640px) {

	.drd-contact-form .drd-form-row--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.drd-contact-form .field-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.drd-contact-form .field,
.drd-contact-form input[type="text"],
.drd-contact-form input[type="tel"],
.drd-contact-form input[type="email"],
.drd-contact-form select,
.drd-contact-form textarea {
	/* border-box : padding et bordure restent dans la largeur de la carte. */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.875rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--surface-card);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Liste déroulante : chevron or à la place de la flèche système. */
.drd-contact-form select.field,
.drd-contact-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-inline-end: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F5620' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}

[dir="rtl"] .drd-contact-form select.field,
[dir="rtl"] .drd-contact-form select {
	background-position: left 1rem center;
	background-size: 1rem;
	cursor: pointer;
}

.drd-contact-form textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.drd-contact-form ::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 1;
}

.drd-contact-form .field:focus {
	border-color: var(--wp--preset--color--gold-500);
	outline: none;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--gold-500) 35%, transparent);
}

.drd-contact-form .wpcf7-form-control-wrap {
	display: block;
}

.drd-contact-form .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--error);
}

.drd-contact-form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.875rem 1rem;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--wp--preset--border-radius--md);
	font-size: var(--wp--preset--font-size--small);
}

.drd-contact-form .wpcf7-spinner {
	margin: 0 0 0 0.75rem;
}

.drd-contact-form .drd-form-field p,
.drd-contact-form p:has(.wpcf7-submit) {
	margin: 0;
}

.drd-contact-form .drd-form-field br {
	display: none;
}

.drd-contact-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.875rem 1.75rem;
	border: 0;
	border-radius: 9999px;
	background-image: var(--wp--preset--gradient--gold-cta);
	background-color: var(--wp--preset--color--gold-300);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.drd-contact-form .wpcf7-submit:hover {
	background-image: none;
	background-color: var(--wp--preset--color--gold-500);
}

.drd-contact-form .wpcf7-submit:active {
	background-color: var(--wp--preset--color--gold-600);
}

/* Actions du formulaire : envoi et WhatsApp côte à côte dès 640 px. */
.drd-contact-form .drd-form-actions {
	gap: 0.75rem;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

/* Le spinner CF7 se superpose au bouton au lieu d'allonger la cellule. */
.drd-contact-form .drd-form-actions .drd-form-field {
	position: relative;
}

.drd-contact-form .drd-form-actions .wpcf7-spinner {
	position: absolute;
	top: 50%;
	inset-inline-end: 1rem;
	margin: -12px 0 0;
}

.drd-contact-form .drd-form-actions .wpcf7-submit {
	min-height: 3.25rem;
}

.drd-contact-form .drd-form-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.25rem;
	padding: 0.875rem 1.75rem;
	border: 1px solid var(--wp--preset--color--gold-500);
	border-radius: 9999px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.drd-contact-form .drd-form-whatsapp::before {
	content: "";
	flex: none;
	width: 1.25em;
	height: 1.25em;
	background-color: var(--wp--preset--color--success);
	-webkit-mask: var(--drd-icon-whatsapp) center / contain no-repeat;
	mask: var(--drd-icon-whatsapp) center / contain no-repeat;
}

.drd-contact-form .drd-form-whatsapp:hover {
	background-color: var(--wp--preset--color--surface-alt);
}

/* -------------------------------------------------------------------------
 * Section coordonnées (`section-contact`) — cartes, horaires, plan.
 * ---------------------------------------------------------------------- */

.drd-contact-item .drd-icon-box {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
}

.drd-contact-item a {
	text-decoration: none;
	overflow-wrap: anywhere;
}

.drd-contact-item:hover a {
	color: var(--wp--preset--color--gold-700);
}

.drd-hours-row {
	padding-block: 0.375rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
}

.drd-hours-row:last-child {
	border-bottom: 0;
}

.drd-map {
	overflow: hidden;
	height: 18rem;
}

.drd-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(0.4) contrast(1.1);
	opacity: 0.9;
}

@media (max-width: 639px) {

	.drd-map {
		height: 16rem;
	}
}

/* -------------------------------------------------------------------------
 * Or gravé — texte en dégradé.
 * La couleur est posée avant le @supports : si background-clip: text n'est
 * pas supporté, le texte reste lisible en or plein.
 * ---------------------------------------------------------------------- */

.drd-gold-text {
	color: var(--wp--preset--color--gold-700, #7f5620);
}

.drd-h1 em {
	-webkit-text-fill-color: transparent;
	background: linear-gradient(135deg, #aa7e37 0%, #7f5620 50%, #63421a 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {

	.drd-gold-text {
		background-image: var(--wp--preset--gradient--gold-engraved);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* -------------------------------------------------------------------------
 * Pages internes — composants des patterns `page-*` et `section-*`.
 * ---------------------------------------------------------------------- */

/* Pastille de sur-titre du hero : largeur ajustée au texte. */
.drd-badge {
	display: inline-block;
	width: fit-content;
}

/* Pastille avec point « ouvert » (hero d'accueil). */
.drd-badge--dot::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-inline-end: 0.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--success);
	vertical-align: 0.05em;
}

/* Hero d'accueil : photo avec cartes flottantes et cartouche. */
.drd-hero-media {
	position: relative;
}

.drd-hero-media > .wp-block-image {
	margin: 0;
}

.drd-hero-caption {
	background-color: rgb(255 255 255 / 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

@media (min-width: 1024px) {

	.drd-hero-media > .drd-hero-float,
	.drd-hero-media > .drd-hero-caption {
		position: absolute;
		z-index: 1;
		margin: 0;
	}

	.drd-hero-float--top {
		top: -1.25rem;
		inset-inline-start: -1.5rem;
	}

	.drd-hero-float--side {
		top: 58%;
		inset-inline-end: -1.5rem;
	}

	.drd-hero-caption {
		inset-inline: 1.25rem;
		bottom: 1.25rem;
	}
}

/*
 * En dessous de 1024 px : les cartes flottantes (redondantes avec les
 * pastilles « pôles ») sont masquées ; le cartouche reste posé sur la photo.
 */
@media (max-width: 1023px) {

	.drd-hero-media > .drd-hero-float {
		display: none;
	}

	.drd-hero-media > .drd-hero-caption {
		position: absolute;
		z-index: 1;
		inset-inline: var(--wp--preset--spacing--20);
		bottom: var(--wp--preset--spacing--20);
		margin: 0;
	}
}

/*
 * Hero d'accueil sur mobile (colonnes empilées, < 782 px) : la colonne texte
 * est « dissoute » (display: contents) pour intercaler la photo juste après
 * l'accroche : sur-titre → H1 → accroche → photo → boutons → pôles → chiffres.
 */
@media (max-width: 781px) {

	.drd-home-hero .wp-block-columns {
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
	}

	.drd-home-hero .wp-block-columns > .wp-block-column:first-child {
		display: contents;
	}

	.drd-home-hero .wp-block-columns > .wp-block-column:first-child > * {
		order: 10;
		margin-block: 0;
	}

	.drd-home-hero .wp-block-columns > .wp-block-column:first-child > .is-style-eyebrow {
		order: 1;
		align-self: flex-start;
	}

	.drd-home-hero .drd-h1 {
		order: 2 !important;
	}

	.drd-home-hero .drd-hero-lede {
		order: 3 !important;
	}

	.drd-home-hero .wp-block-columns > .wp-block-column:last-child {
		order: 4;
	}

	.drd-home-hero .drd-hero-actions {
		order: 5 !important;
	}

	/* `container-type` (layout grid) réduirait la grille à sa largeur minimale. */
	.drd-home-hero :is(.drd-hero-poles, .drd-hero-stats) {
		container-type: normal !important;
		width: 100%;
	}

	.drd-home-hero .drd-hero-poles {
		order: 6 !important;
		grid-template-columns: 1fr !important;
	}

	.drd-home-hero .drd-hero-stats {
		order: 7 !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		column-gap: var(--wp--preset--spacing--20);
	}

	.drd-home-hero .drd-hero-media img {
		aspect-ratio: 1 !important;
		object-position: center 15%;
	}
}

/* Bouton WhatsApp : icône en masque, couleur héritée du texte. */
.drd-btn-whatsapp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.drd-btn-whatsapp .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.25em;
	height: 1.25em;
	background-color: currentcolor;
	-webkit-mask: var(--drd-icon-whatsapp) center / contain no-repeat;
	mask: var(--drd-icon-whatsapp) center / contain no-repeat;
}

:root {
	--drd-icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91c0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2m.01 1.67c2.2 0 4.26.86 5.82 2.42a8.23 8.23 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23c-1.48 0-2.93-.39-4.19-1.15l-.3-.17l-3.12.82l.83-3.04l-.2-.32a8.2 8.2 0 0 1-1.26-4.38c.01-4.54 3.7-8.24 8.25-8.24M8.53 7.33c-.16 0-.43.06-.66.31c-.22.25-.87.86-.87 2.07c0 1.22.89 2.39 1 2.56c.14.17 1.76 2.67 4.25 3.73c.59.27 1.05.42 1.41.53c.59.19 1.13.16 1.56.1c.48-.07 1.46-.6 1.67-1.18s.21-1.07.15-1.18c-.07-.1-.23-.16-.48-.27c-.25-.14-1.47-.74-1.69-.82c-.23-.08-.37-.12-.56.12c-.16.25-.64.81-.78.97c-.15.17-.29.19-.53.07c-.26-.13-1.06-.39-2-1.23c-.74-.66-1.23-1.47-1.38-1.72c-.12-.24-.01-.39.11-.5c.11-.11.27-.29.37-.44c.13-.14.17-.25.25-.41c.08-.17.04-.31-.02-.43c-.06-.11-.56-1.35-.77-1.84c-.2-.48-.4-.42-.56-.43c-.14 0-.3-.01-.47-.01'/%3E%3C/svg%3E");
}

/* Liste « L'essentiel » : deux colonnes à partir de la tablette. */
@media (min-width: 768px) {

	.drd-list-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--50);
	}
}

/* Pastille d'icône des cartes : carré fixe dans une carte en flex vertical. */
.drd-icon-box {
	align-self: flex-start;
	width: 3rem;
	height: 3rem;
}

/* Texte éditorial : rythme vertical régulier dans la colonne de droite. */
.drd-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.drd-prose :is(h3, h4) {
	color: var(--wp--preset--color--ink);
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Numéro d'étape en pastille carrée. */
.drd-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--gold-300);
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--wp--preset--color--surface-alt);
}

/* Tableaux comparatifs : défilement horizontal sur mobile, en-tête sable. */
.drd-table {
	overflow-x: auto;
}

.drd-table table {
	min-width: 36rem;
	border-collapse: collapse;
	background-color: var(--wp--preset--color--surface-card);
}

.drd-table :is(th, td) {
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--surface-deep);
	text-align: start;
	vertical-align: top;
}

.drd-table thead {
	border-bottom: 0;
}

.drd-table thead th {
	background-color: var(--wp--preset--color--surface-deep);
	color: var(--wp--preset--color--ink);
}

.drd-table tbody td:first-child {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Cas avant / après : libellé en pastille plutôt qu'en voile sur la photo. */
/* Spécificité supérieure à la règle core `.wp-block-gallery.has-nested-images figure.wp-block-image figcaption`. */
.drd-case .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	inset: 0.5rem auto auto 0.5rem;
	width: auto;
	max-width: calc(100% - 1rem);
	max-height: none;
	margin: 0;
	overflow: visible;
	text-align: start;
	color: var(--wp--preset--color--base);
	padding: 0.25rem 0.75rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: rgba(22, 20, 26, 0.72);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.drd-case-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

/* -------------------------------------------------------------------------
 * Pied de page — barre légale : cible tactile ≥ 24 px (WCAG 2.5.8).
 * ---------------------------------------------------------------------- */

.drd-footer-legal p {
	margin: 0;
}

.drd-footer-legal a {
	display: inline-block;
	padding-block: 0.25rem;
}

/* -------------------------------------------------------------------------
 * Boutons sur mobile — marges latérales resserrées pour tenir sur une ligne.
 * La clé `@mobile` de theme.json n'est pas appliquée aux éléments ; la
 * variation `is-style-outline` impose en outre son propre padding.
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {

	.wp-block-button__link,
	.drd-contact-form .wpcf7-submit {
		padding-inline: 1rem !important;
		text-wrap: balance;
	}
}

/* Sur-titre → titre dans les piles flex dont le `gap` dépasse spacing|20. */
#medias .is-style-eyebrow + .wp-block-heading {
	margin-block-start: calc(var(--wp--preset--spacing--20) - var(--wp--preset--spacing--30)) !important;
}

@media (max-width: 781px) {

	/* Spécificité ≥ à la règle générique (dont le :has() compte pour 0,2,0). */
	.drd-home-hero .is-style-eyebrow + .drd-h1 {
		margin-block-start: calc(var(--wp--preset--spacing--20) - var(--wp--preset--spacing--40)) !important;
	}
}

/* -------------------------------------------------------------------------
 * Accessibilité — mouvement
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * Arabe (pages `lang="ar"`, `dir="rtl"`)
 * Les familles `sans-ar` / `serif-ar` sont des jetons de theme.json : on
 * réaffecte simplement les variables utilisées partout par les blocs.
 * ---------------------------------------------------------------------- */

html[lang^="ar"] {
	--wp--preset--font-family--sans: var(--wp--preset--font-family--sans-ar);
	--wp--preset--font-family--serif: var(--wp--preset--font-family--serif-ar);
}

/*
 * L'écriture arabe est cursive : tout interlettrage casse les liaisons, et
 * les capitales n'existent pas. Les sur-titres, boutons et libellés reçoivent
 * leur interlettrage via theme.json (spécificité variable) : !important est
 * ici le seul moyen fiable de l'annuler en bloc.
 */
html[lang^="ar"] body * {
	letter-spacing: normal !important;
}

/* Pas d'italique en arabe : l'accent reste porté par la couleur. */
html[lang^="ar"] :where(em, i, .has-serif-font-family em) {
	font-style: normal;
}

/* Le coufique est plus haut que le Cormorant : on aère les titres. */
html[lang^="ar"] :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
	line-height: 1.45;
}

html[lang^="ar"] body {
	line-height: 1.8;
}

/*
 * Icônes directionnelles (chevrons, flèches) : miroir en RTL. Les icônes
 * sont des SVG inline sans nom : l'import ajoute la classe `drd-icon-dir`.
 */
[dir="rtl"] .drd-icon-dir svg {
	transform: scaleX(-1);
}

/* -------------------------------------------------------------------------
 * Top bar (template part `top-bar`) et sélecteur de langue
 * (`drd/language-switcher`). Non collante : elle défile avec la page,
 * le header collant prend le relais. Visible sur tous les écrans.
 * ---------------------------------------------------------------------- */

.wp-site-blocks > .drd-top-bar-part + * {
	margin-block-start: 0;
}

.drd-lang-switch {
	position: relative;
	font-size: var(--wp--preset--font-size--label, 0.75rem);
	line-height: 1.2;
}

.drd-lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2rem;
	padding: 0.25rem 0.625rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	border-radius: var(--wp--preset--border-radius--pill);
	background: transparent;
	color: var(--wp--preset--color--ink-soft);
	font: inherit;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.drd-lang-switch__toggle:hover,
.drd-lang-switch__toggle[aria-expanded="true"] {
	border-color: var(--wp--preset--color--gold-500);
	color: var(--wp--preset--color--ink);
}

.drd-lang-switch__globe,
.drd-lang-switch__check {
	flex: none;
	color: var(--wp--preset--color--gold-700);
	font-size: 1rem;
}

.drd-lang-switch__chevron {
	flex: none;
	opacity: 0.7;
}

.drd-lang-switch__current {
	font-weight: 600;
}

.drd-lang-switch__menu {
	position: absolute;
	inset-block-start: calc(100% + 0.5rem);
	inset-inline-end: 0;
	z-index: 60;
	min-width: 10rem;
	margin: 0;
	padding: 0.375rem;
	list-style: none;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold-500) 25%, transparent);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--surface-card);
	box-shadow: 0 20px 40px -12px color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent);
}

.drd-lang-switch__menu[hidden] {
	display: none;
}

.drd-lang-switch__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.75rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

a.drd-lang-switch__item:hover,
a.drd-lang-switch__item:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent);
	color: var(--wp--preset--color--gold-800);
}

.drd-lang-switch__item.is-current {
	color: var(--wp--preset--color--ink-muted);
	cursor: default;
}

.drd-lang-switch__code {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--label, 0.75rem);
	text-transform: uppercase;
}

/* Les noms de langue s'affichent chacun dans leur écriture. */
.drd-lang-switch__item[lang="ar"],
.drd-lang-switch__item[lang^="ar"] {
	font-family: var(--wp--preset--font-family--sans-ar);
}

/*
 * Logo arabe (option `drd_site_logo_ar`) : horizontal (670 × 104) là où le
 * logo français est carré. Hauteurs du site source : 40 px en en-tête,
 * 52 px en pied de page.
 */
html[lang^="ar"] header .wp-block-site-logo img {
	width: auto;
	height: 2.5rem;
}

html[lang^="ar"] footer .wp-block-site-logo img {
	width: auto;
	max-width: 100%;
	height: 3.25rem;
}