/**
 * Darb Race — socle typographique et règles d'interface.
 *
 * Les familles sont déclarées ICI et nulle part ailleurs. Les réglages Porto
 * portent les mêmes valeurs pour ce que le thème génère lui-même ; tout ajout
 * ultérieur doit passer par ces variables, jamais par un nom de police en dur.
 */

:root {
	--darb-font-display: "Barlow Condensed", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
	--darb-font-text:    "Barlow", "Helvetica Neue", Arial, sans-serif;
	--darb-font-arabic:  "Tajawal", "Geeza Pro", "Segoe UI", sans-serif;

	/* Palette relevée sur la maquette de septembre 2026 : vert forêt en
	   primaire, sable chaud en fond, corail en action. Les noms de jetons sont
	   conservés pour ne pas propager un renommage dans tout le CSS. */
	--darb-ink:   #22322A;  /* vert presque noir, titres */
	--darb-body:  #4A5A50;  /* vert-gris, texte courant */
	--darb-muted: #5C6A60;  /* vert-gris, secondaire — 5,7:1 sur blanc */

	--darb-vert:   #235C3E;  /* primaire */
	--darb-vert-2: #1B4A32;  /* survol */
	/* La maquette pose #E4553A. Sur blanc, ce corail plafonne à 3,7:1 : sous le
	   seuil AA pour du texte de 16 px. Assombri au strict nécessaire pour
	   franchir 4,5:1 — l'écart visuel est imperceptible, le gain ne l'est pas. */
	--darb-corail: #D24328;  /* action — 4,6:1 sur blanc */
	--darb-creme:  #FFF6EC;  /* texte sur corail */
	--darb-ambre:  #F2B134;  /* mention à valider */
	--darb-menthe: #C3DCC9;

	--darb-sable:   #FBF0DC;  /* fond de page */
	--darb-sable-2: #EFE7DA;  /* surface creusée */
	--darb-filet:   #E7DFD1;  /* filets */

	/* La maquette arrondit : pastilles pleines pour les actions, rayon doux
	   pour les cartes. C'est ce qui sépare son registre chaleureux du registre
	   documentaire que produisent des angles vifs. */
	--darb-rayon-pastille: 999px;
	--darb-rayon-carte:    14px;
	--darb-rayon-petit:    6px;

	/* Le condensé en capitales se referme sans interlettrage : ces deux
	   valeurs sont ce qui sépare ce système d'un mauvais choix. */
	--darb-caps:  0.06em;
	--darb-micro: 0.13em;

	/* Cible tactile minimale, appliquée aux commandes et aux champs. */
	--darb-touch: 44px;
}

/* -------------------------------------------------------------------------
 * 0. Corps de texte.
 *
 * Le Bootstrap compilé par Porto garde la police du corps figée à la valeur
 * présente lors de sa dernière génération, et son compilateur ne la relit pas
 * quand les réglages changent. On la pose donc ici, en aval, plutôt que de
 * dépendre d'une recompilation du thème.
 * ---------------------------------------------------------------------- */
body {
	font-family: var(--darb-font-text);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--darb-body);
	background: var(--darb-sable);
}

/* Porto réduit la taille de racine sur petit écran : 1rem y vaut 15 px et le
   corps tombe sous le seuil où iOS zoome à la prise de focus. On exprime donc
   la valeur mobile en pixels, pas en rem. */
@media (max-width: 767px) {
	body { font-size: 16px; }
}

/* -------------------------------------------------------------------------
 * 1. Échelle fluide.
 *
 * Porto ne sait exprimer qu'une taille fixe par niveau, plus une valeur
 * mobile globale. Sur un titre de 46 px, cela donne un débordement à 360 px
 * de large. On reprend la main sur l'interpolation.
 * ---------------------------------------------------------------------- */
h1, .h1 { font-size: clamp(2rem,    1.34rem + 2.6vw,  2.875rem); line-height: 1.05; }
h2, .h2 { font-size: clamp(1.625rem, 1.2rem + 1.7vw,  2.125rem); line-height: 1.12; }
h3, .h3 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.625rem); line-height: 1.2;  }
h4, .h4 { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem); line-height: 1.28; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	font-family: var(--darb-font-display);
	text-wrap: balance;
}

/* Les titres restent en casse normale : les capitales sont réservées aux
   éléments d'interface. Un titre d'actualité en capitales devient illisible
   et perd ses accents dans certains contextes. */

/* -------------------------------------------------------------------------
 * 2. Capitales : jamais sans interlettrage.
 * ---------------------------------------------------------------------- */
/* La navigation garde les capitales : c'est ainsi qu'elle est dessinée dans
   la maquette. */
.darb-display,
.main-menu > li > a,
#header .main-menu > li > a {
	font-family: var(--darb-font-display);
	text-transform: uppercase;
	letter-spacing: var(--darb-caps);
	font-weight: 700;
}

/* Les actions, elles, sont en casse normale et en pastille pleine. */
.btn,
.button,
.elementor-button,
button:not(.tribe-common-c-btn--unstyled),
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.tribe-tickets__tickets-buy,
.tribe-common-c-btn {
	font-family: var(--darb-font-text);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
	border-radius: var(--darb-rayon-pastille);
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Action principale : corail. Action secondaire : vert forêt. */
.btn-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.tribe-tickets__tickets-buy,
input[type="submit"] {
	background: var(--darb-corail);
	border-color: var(--darb-corail);
	color: var(--darb-creme);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.tribe-tickets__tickets-buy:hover {
	background: var(--darb-vert);
	border-color: var(--darb-vert);
	color: #fff;
}

/* Sur-titres, étiquettes de formulaire, mentions : plus petit, donc plus ouvert. */
.darb-label,
.tribe-tickets__form-field-label,
.woocommerce form .form-row label,
.tribe-tickets__tickets-item-attendee-fields label {
	font-family: var(--darb-font-display);
	text-transform: uppercase;
	letter-spacing: var(--darb-micro);
	font-weight: 600;
	color: var(--darb-muted);
}

/* -------------------------------------------------------------------------
 * 3. Chiffres alignés partout où ils se comparent.
 *
 * Prix, stocks de dossards, quantités, temps, compte à rebours : sans cela
 * les colonnes tremblent d'une ligne à l'autre.
 * ---------------------------------------------------------------------- */
.price,
.amount,
.woocommerce-Price-amount,
.tribe-tickets__tickets-item-quantity,
.tribe-tickets__tickets-item-price,
.tribe-tickets__tickets-footer-total,
.darb-nums,
.darb-countdown,
table td.darb-time {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* -------------------------------------------------------------------------
 * 4. Cibles tactiles et champs de saisie.
 *
 * Les champs descendent à 16 px minimum : en dessous, iOS zoome à la prise
 * de focus et déforme le tunnel d'inscription à chaque champ.
 * ---------------------------------------------------------------------- */
.btn,
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.tribe-common-c-btn,
.elementor-button {
	min-height: var(--darb-touch);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
select,
textarea {
	font-family: var(--darb-font-text);
	font-size: max(16px, 1rem);
	min-height: var(--darb-touch);
}

textarea { min-height: calc(var(--darb-touch) * 2); }

/* Le menu principal doit rester confortable au pouce sur mobile. */
@media (max-width: 991px) {
	#header .main-menu > li > a,
	.mobile-sidebar .main-menu > li > a {
		min-height: var(--darb-touch);
		display: flex;
		align-items: center;
	}
}

/* -------------------------------------------------------------------------
 * 5. Confort de lecture des textes longs.
 *
 * Règlement, conditions générales, FAQ : sans limite de longueur de ligne,
 * ces pages s'étalent sur toute la largeur de l'écran.
 * ---------------------------------------------------------------------- */
.entry-content > p,
.elementor-widget-text-editor p {
	max-width: 68ch;
}

.entry-content > p:lang(ar),
.elementor-widget-text-editor p:lang(ar) {
	max-width: 60ch;
}

/* -------------------------------------------------------------------------
 * 6. Version arabe.
 *
 * Tajawal remplace Barlow, elle ne s'y ajoute pas : le budget reste à deux
 * familles par page. Les chiffres restent en chiffres arabes occidentaux,
 * comme sur le dossard et sur la puce de chronométrage.
 * ---------------------------------------------------------------------- */
[lang="ar"],
[dir="rtl"] body,
body.rtl {
	font-family: var(--darb-font-arabic);
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4 {
	font-family: var(--darb-font-arabic);
	letter-spacing: 0;
}

/* L'arabe n'a pas de capitales : forcer la casse n'a aucun effet et
   l'interlettrage y dégrade la liaison des lettres. */
[dir="rtl"] .darb-display,
[dir="rtl"] .main-menu > li > a,
[dir="rtl"] .btn,
[dir="rtl"] .button,
body.rtl .darb-display,
body.rtl .main-menu > li > a,
body.rtl .btn,
body.rtl .button {
	font-family: var(--darb-font-arabic);
	text-transform: none;
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
 * 7. Accessibilité.
 * ---------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--darb-corail);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * 8. Formulaires de contact et de bénévolat.
 * ---------------------------------------------------------------------- */
.darb-contact-form {
	max-width: 46rem;
}

.darb-contact-form__ligne {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0 1.25rem;
}

.darb-contact-form__champ {
	margin: 0 0 1.1rem;
}

.darb-contact-form__champ label {
	font-family: var(--darb-font-display);
	text-transform: uppercase;
	letter-spacing: var(--darb-micro);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--darb-muted);
	display: block;
	margin-bottom: 0.3rem;
}

/* Le caractère facultatif se lit dans l'étiquette, pas dans un astérisque
   qu'il faut aller décoder ailleurs. */
.darb-contact-form__champ label span {
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--darb-font-text);
	font-weight: 400;
	font-size: 0.875rem;
}

.darb-contact-form .form-control {
	width: 100%;
}

.darb-contact-form__envoi {
	margin: 0.5rem 0 0;
}

/* -------------------------------------------------------------------------
 * 9. FAQ.
 *
 * Accordéon en <details> natifs : accessible au clavier et fonctionnel sans
 * JavaScript, contrairement au widget du constructeur. L'audit relevait une
 * FAQ inatteignable depuis un téléphone.
 * ---------------------------------------------------------------------- */
.darb-faq { max-width: 52rem; }

.darb-faq__intro {
	font-size: 1.125rem;
	color: var(--darb-muted);
	margin: 0 0 2rem;
}

.darb-faq__cat {
	font-family: var(--darb-font-display);
	text-transform: uppercase;
	letter-spacing: var(--darb-caps);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--darb-ink);
	margin: 2.5rem 0 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--darb-ink);
}

.darb-faq__item {
	border-bottom: 1px solid var(--darb-filet);
}

.darb-faq__item summary {
	font-family: var(--darb-font-text);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--darb-ink);
	cursor: pointer;
	padding: 1rem 2.5rem 1rem 0;
	position: relative;
	list-style: none;
	min-height: var(--darb-touch);
	display: flex;
	align-items: center;
}

.darb-faq__item summary::-webkit-details-marker { display: none; }

/* Le signe est dessiné en CSS : deux trais dont l'un disparaît à l'ouverture,
   plutôt qu'un caractère qui dépendrait de la police installée. */
.darb-faq__item summary::before,
.darb-faq__item summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	background: var(--darb-muted);
}
.darb-faq__item summary::before { width: 0.85rem; height: 2px; margin-top: -1px; }
.darb-faq__item summary::after  { width: 2px; height: 0.85rem; margin-top: -0.425rem; right: 0.775rem; }
.darb-faq__item[open] summary::after { display: none; }
.darb-faq__item[open] summary { color: var(--darb-ink); }

.darb-faq__item summary:hover { color: var(--darb-vert); }
.darb-faq__item summary:focus-visible { outline: 2px solid var(--darb-corail); outline-offset: 2px; }

.darb-faq__reponse {
	padding: 0 2.5rem 1.25rem 0;
	color: var(--darb-body);
}
.darb-faq__reponse p { margin: 0; max-width: 62ch; }
.darb-faq__reponse strong { font-weight: 600; color: var(--darb-ink); }

.darb-faq__sortie {
	margin: 2.5rem 0 0;
	padding: 1rem 1.25rem;
	background: var(--darb-sable-2);
	border-left: 3px solid var(--darb-vert);
}

/* -------------------------------------------------------------------------
 * 11. Aucun défilement horizontal.
 *
 * Un conteneur Elementor du pied de page dépasse la largeur de la fenêtre
 * autour de 1024 px et fait défiler toute la page latéralement. On borne les
 * conteneurs plutôt que de masquer le débordement sur body : overflow-x
 * masqué sur body casserait position:sticky, dont dépend le bouton de
 * commande sur mobile.
 * ---------------------------------------------------------------------- */
/* overflow-x: clip, et non hidden : « clip » ne crée pas de conteneur de
   défilement, donc position:sticky continue de fonctionner — ce dont dépend
   le bouton de commande sur mobile. Les gouttières Elementor existent en
   plusieurs variantes, chacune avec ses marges négatives : ce garde-fou les
   couvre toutes plutôt que de les poursuivre une à une. */
html,
body {
	overflow-x: clip;
}

.elementor-container,
.elementor-section-boxed > .elementor-container {
	max-width: 100%;
}

img,
video,
iframe,
table {
	max-width: 100%;
}

/* Les tableaux larges défilent dans leur propre conteneur, pas dans la page. */
.entry-content table {
	display: block;
	overflow-x: auto;
}

/* -------------------------------------------------------------------------
 * 12. État des inscriptions.
 *
 * Le libellé change seul selon la fenêtre de vente et les stocks. La couleur
 * suit : neutre quand tout va bien, chaude quand la rareté devient
 * l'information utile.
 * ---------------------------------------------------------------------- */
.darb-statut {
	font-family: var(--darb-font-display);
	text-transform: uppercase;
	letter-spacing: var(--darb-caps);
	font-weight: 700;
}

.darb-statut--derniers,
.darb-statut--complet { color: var(--darb-corail); }
.darb-statut--closes  { color: var(--darb-muted); }

/* -------------------------------------------------------------------------
 * 15. Accessibilité au clavier.
 * ---------------------------------------------------------------------- */

/* Masqué à l'œil, lu par les technologies d'assistance. Ne pas remplacer par
   display:none, qui le retirerait aussi de l'arbre d'accessibilité. */
.darb-titre-invisible {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Le lien d'évitement ne se montre qu'au clavier, au premier tabulation. */
/* position: fixed, et non absolute : en absolu le lien se cale sur le premier
   ancêtre positionné, qui peut faire plusieurs milliers de pixels — il ne
   revient alors jamais dans le champ de vision au focus. */
.darb-evitement {
	position: fixed;
	left: 0;
	top: -4rem;
	transition: top 120ms ease-out;
	z-index: 100000;
	background: var(--darb-vert);
	color: var(--darb-creme);
	font-family: var(--darb-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--darb-caps);
	padding: 0.85rem 1.5rem;
	border-radius: 0 0 var(--darb-rayon-petit) 0;
	text-decoration: none;
}

.darb-evitement:focus,
.darb-evitement:focus-visible {
	top: 0;
	outline: 2px solid var(--darb-corail);
	outline-offset: -4px;
}

#darb-contenu { display: block; scroll-margin-top: 5rem; }