/**
 * Demandes de stand et accréditations.
 *
 * Tout le design des pages migrées vient du CSS figé d'Elementor (css/frozen/).
 * Cette feuille ne couvre qu'un bloc ajouté après la migration, et que le CSS
 * figé ne pouvait donc pas habiller : les demandes de stand et les
 * accréditations des créateurs de contenu.
 *
 * Elle est servie sur les deux pages qui les montrent : « Infos pratiques »,
 * qui les présente en cartes (template-parts/infos/demandes.php), et l'accueil,
 * dont la FAQ les reprend (template-parts/home/faq.php). Une seule feuille pour
 * les deux : le bouton d'un guichet ouvert est le même des deux côtés.
 *
 * Elle reprend la charte du site — le crème et le noir, les couleurs vives, la
 * Headline Gothic des titres, la Chantal du surtitre — sans emprunter aux
 * variables du kit : la section doit rester lisible le jour où Elementor n'est
 * plus là pour les poser.
 *
 * Toutes les règles sont préfixées par .vodun-demandes. La section vit au
 * milieu du markup du constructeur, et rien ici ne doit en déborder.
 */

/* Les jetons de la charte sont posés sur la section, mais aussi sur les
   morceaux qui la quittent : dans la FAQ de l'accueil, la pastille d'état et le
   bouton vivent au milieu de l'accordéon, hors de tout .vodun-demandes. Une
   variable non déclarée y rendrait chaque déclaration qui l'emploie invalide —
   le bouton perdrait son fond, son cadre et sa police d'un coup. */
.vodun-demandes,
.vodun-demandes__when,
.vodun-demandes__action,
.vodun-demandes__btn,
.vodun-demandes__more {
	--vd-black: #1D1E22;
	--vd-cream: #FFFCF2;
	--vd-paper: #F5EEDB;
	--vd-green: #22A892;
	--vd-red: #DD193A;
	--vd-yellow: #F2D22F;
	--vd-line: rgba(29, 30, 34, 0.14);
	--vd-muted: rgba(29, 30, 34, 0.72);
	--vd-display: "Headline Gothic ATF", "Arial Narrow", Impact, sans-serif;
	--vd-script: "Chantal Medium", "Segoe Print", cursive;
	--vd-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.vodun-demandes {
	color: var(--vd-black);
	font-family: var(--vd-text);
	font-size: 16px;
	line-height: 1.55;
}

.vodun-demandes *,
.vodun-demandes *::before,
.vodun-demandes *::after {
	box-sizing: border-box;
}

/* Même largeur utile que les conteneurs du constructeur (1140 px), pour que la
   section s'aligne sur celles qui l'entourent. */
.vodun-demandes {
	/* La navigation par ancres de la page pointe ici : le titre ne doit pas se
	   glisser sous l'en-tête collant à l'arrivée. Les cartes ont la leur, pour
	   les liens profonds vers un guichet précis. */
	scroll-margin-top: 120px;
}

.vodun-demandes__inner {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	/* Moins d'air en bas qu'en haut : la section est la dernière de la page,
	   et le pied de page suit. */
	padding: clamp(48px, 7vw, 96px) 20px clamp(32px, 4vw, 56px);
}

.vodun-demandes__head {
	max-width: 780px;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.vodun-demandes__kicker {
	margin: 0 0 0.35em;
	font-family: var(--vd-script);
	font-size: clamp(18px, 1.7vw, 23px);
	line-height: 1.2;
	color: var(--vd-red);
}

/* Le corps et l'interligne des autres titres de la page (« Visas », « Aéroport
   de Cotonou »), pour que la section ne paraisse pas rapportée. */
.vodun-demandes__title {
	margin: 0;
	font-family: var(--vd-display);
	font-size: clamp(34px, 3.6vw, 50px);
	font-weight: 400;
	line-height: 1.18;
	text-transform: uppercase;
	color: var(--vd-black);
}

.vodun-demandes__intro {
	margin-top: 18px;
	color: var(--vd-muted);
}

.vodun-demandes__intro p {
	margin: 0 0 0.8em;
}

.vodun-demandes__intro p:last-child {
	margin-bottom: 0;
}

/* Les cartes : autant de colonnes que la largeur en autorise, sans que le
   nombre de guichets ait à être connu ici. Le corps du sélecteur pèse plus que
   la marge qu'Astra donne aux listes du contenu : sans lui, les cartes se
   décalaient de vingt pixels sous le titre. */
.vodun-demandes ul.vodun-demandes__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Chaque guichet est un grand aplat de la charte : jaune, vert, puis sable, et
   l'on recommence. Pas de cadre — la couleur fait la carte, comme le bouton
   « Réservation » ou les boutons de l'espace presse — et un titre d'affiche.
   Elles ont été des encadrés à trait noir, puis à filet gris : trop sages pour
   une page qui annonce une fête. */
.vodun-demandes__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	/* Pas de hauteur minimale : elle laissait un grand vide sous le texte. Les
	   cartes d'une même ligne gardent la même hauteur, celle de la plus
	   remplie, par la grille. */
	padding: clamp(26px, 3.4vw, 44px);
	border-radius: clamp(16px, 2vw, 24px);
	background: var(--vd-yellow);
	overflow: hidden;
	/* La cible d'une ancre ne doit pas se glisser sous l'en-tête collant. */
	scroll-margin-top: 120px;
}

.vodun-demandes__card:nth-child(3n + 2) {
	background: var(--vd-green);
}

.vodun-demandes__card:nth-child(3n) {
	background: var(--vd-paper);
}

/* Un grand disque plus clair déborde du coin : il anime l'aplat sans rien
   ajouter à lire. */
.vodun-demandes__card::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -90px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(255, 252, 242, 0.22);
	pointer-events: none;
}

.vodun-demandes__card > * {
	position: relative;
	z-index: 1;
}

/* L'état, en pastille : pleine et noire quand on peut demander, en simple
   contour tant que le formulaire n'est pas en ligne. */
.vodun-demandes__state {
	display: inline-block;
	margin: 0;
	padding: 7px 14px 6px;
	border: 2px solid var(--vd-black);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vd-black);
}

.vodun-demandes__card--open .vodun-demandes__state {
	background: var(--vd-black);
	color: var(--vd-cream);
}

/* La classe est redoublée pour peser plus que la taille que le kit donne à
   tous les h3 : sans cela le titre restait à vingt-deux pixels. */
.vodun-demandes .vodun-demandes__name {
	margin: 0;
	font-family: var(--vd-display);
	font-size: clamp(38px, 4.2vw, 60px);
	font-weight: 400;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--vd-black);
}

.vodun-demandes__text {
	max-width: 36ch;
	font-size: 18px;
	line-height: 1.5;
}

.vodun-demandes__text p,
.vodun-demandes__when p {
	margin: 0 0 0.7em;
}

.vodun-demandes__text p:last-child,
.vodun-demandes__when p:last-child {
	margin-bottom: 0;
}

/* Le second temps de la carte : les dates et le bouton, ou la phrase d'attente.
   Il se pose en bas, pour que deux cartes voisines s'alignent quelle que soit
   la longueur de leur invitation. */
.vodun-demandes__when {
	margin-top: auto;
	padding-top: 4px;
}

.vodun-demandes__dates {
	font-weight: 600;
}

/* La phrase d'attente, en plus petit sous un filet : elle répond à
   l'invitation plutôt qu'elle ne la prolonge. */
.vodun-demandes__card--closed .vodun-demandes__when {
	align-self: stretch;
	padding-top: 16px;
	border-top: 2px solid rgba(29, 30, 34, 0.18);
	font-size: 15px;
	color: rgba(29, 30, 34, 0.78);
}

/* Sur le vert, le bouton vert ne se verrait pas : dans une carte il est noir,
   et s'éclaircit au survol. */
.vodun-demandes__card .vodun-demandes__btn {
	border-color: var(--vd-black);
	background: var(--vd-black);
	color: var(--vd-cream);
}

.vodun-demandes__card .vodun-demandes__btn:hover,
.vodun-demandes__card .vodun-demandes__btn:focus-visible {
	border-color: var(--vd-black);
	background: var(--vd-cream);
	color: var(--vd-black);
}

/* Le lien de l'invitation rougit au survol partout ailleurs ; le rouge sur le
   vert ne se lit pas, il passe ici au crème souligné de noir. */
body .vodun-demandes__card a.vodun-demandes__link:hover,
body .vodun-demandes__card a.vodun-demandes__link:focus-visible {
	color: #1D1E22;
	text-decoration-thickness: 3px;
}

.vodun-demandes__action {
	margin: 12px 0 0;
}

.vodun-demandes__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px 11px;
	border: 2px solid var(--vd-green);
	border-radius: 8px;
	background: var(--vd-green);
	font-family: var(--vd-display);
	font-size: 22px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--vd-black);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.vodun-demandes__btn:hover,
.vodun-demandes__btn:focus-visible {
	border-color: var(--vd-black);
	background: var(--vd-black);
	color: var(--vd-cream);
}

/* Astra souligne les liens du contenu : le bouton porte déjà son cadre. Le
   corps du sélecteur est là pour peser autant que la règle du thème. */
body .vodun-demandes a {
	text-decoration: none;
	box-shadow: none;
}

body .vodun-demandes__text a,
body .vodun-demandes__when a:not(.vodun-demandes__btn),
body .vodun-demandes__intro a,
body .vodun-demandes__more a {
	text-decoration: underline;
	color: inherit;
}

/* Le lien du formulaire, posé dans la phrase d'invitation : gras et souligné,
   en noir, comme « ce lien » et « Lien e-visa » dans la section des visas. Il
   rougit au survol. La règle vaut aussi dans la FAQ de l'accueil, hors de
   toute .vodun-demandes. */
body a.vodun-demandes__link {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	color: #1D1E22;
}

body a.vodun-demandes__link:hover,
body a.vodun-demandes__link:focus-visible {
	text-decoration: underline;
	color: #DD193A;
}

/* ------------------------------------------------------------------------ */
/* Les mêmes guichets, repris dans la FAQ de l'accueil                       */
/* ------------------------------------------------------------------------ */

/* Les réponses de la FAQ sont rendues par le markup du constructeur et
   habillées par le CSS figé : seules les lignes que la réponse ajoute — les
   dates, le bouton, le renvoi — ont besoin d'être dessinées ici. */
.e-n-accordion .vodun-demandes__dates {
	margin: 0.8em 0 0;
	font-weight: 600;
}

.e-n-accordion .vodun-demandes__action {
	margin: 0.8em 0 0;
	padding: 0;
}

.e-n-accordion .vodun-demandes__more {
	margin: 0.8em 0 0;
}