/**
 * ADEL SkinAI — African Skin Test
 * Landing page publique de la campagne.
 *
 * AJOUTÉ (26/09) — palette et typographie RÉELLES de la marque
 * (Valeor/Tangier/Serotiva, déjà hébergées via fonts.css, jamais
 * Poppins) -- voir le docblock du partial pour le contexte complet.
 * Toutes les classes préfixées .as-campaign-* pour ne jamais entrer
 * en conflit avec le thème ou Elementor (contrainte explicite du
 * cahier des charges).
 */

.as-campaign-landing {
	--gold: #D1B479;
	--gold-deep: #b89a5e;
	--ink: #121314;
	--ink-soft: #1b1c1e;
	--cream: #F7F3EC;
	--text-muted: rgba(247, 243, 236, 0.72);
	--panel-border: rgba(255, 255, 255, 0.14);
	font-family: 'Serotiva', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--cream);
	background: var(--ink);
	overflow-x: hidden;
	position: relative;
	/* CORRIGÉ (27/09) — signalé : la page restait contrainte dans la
	   largeur de contenu imposée par le thème (marge visible à
	   gauche), au lieu d'occuper tout l'écran. Motif standard "pleine
	   largeur" -- fait sortir cet élément de son conteneur parent quel
	   que soit ce que le thème impose, sans jamais toucher au CSS du
	   thème lui-même. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.as-campaign-landing *, .as-campaign-landing *::before, .as-campaign-landing *::after { box-sizing: border-box; }
.as-campaign-landing img { max-width: 100%; display: block; }
.as-campaign-landing button { font-family: inherit; cursor: pointer; }

/* ===================== Header ===================== */
.as-campaign-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88px;
	padding: 0 6%;
}
.as-campaign-header__logo img {
	height: 26px;
	width: auto;
	/* CORRIGÉ (27/09), troisième passe — signalé sur capture desktop
	   réelle : le bloc restait visible malgré invert()+screen. Plutôt
	   que d'empiler un troisième bricolage CSS sur un fichier à fond
	   blanc opaque, le fichier lui-même a été traité pixel par pixel
	   (public/images/adel-logo-transparent.png, généré depuis
	   l'original, jamais l'original modifié) pour lui donner une VRAIE
	   transparence -- plus besoin d'aucun effet ici. invert() suffit
	   maintenant seul pour rendre le tracé clair, la transparence
	   réelle du fichier fait le reste. Taille nettement réduite comme
	   demandé ("toujours très gros"). */
	filter: invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.as-campaign-lang {
	display: flex; align-items: center; gap: 4px;
	background: transparent; border: none; color: var(--cream);
	font-size: 13px; font-weight: 500; letter-spacing: 0.4px;
}

/* ===================== Hero ===================== */
.as-campaign-hero {
	position: relative;
	min-height: 860px;
	display: flex;
	align-items: flex-end;
	padding: 0 6% 64px;
}
.as-campaign-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.as-campaign-hero__bg img {
	width: 100%; height: 100%; object-fit: cover;
	/* CORRIGÉ (27/09) — nouvelle photo (produit réel ADEL Cosmetic,
	   visage en haut à gauche, flacon à droite) : cadrage biaisé vers
	   le haut de l'image, où les deux éléments sont visibles -- le
	   bas (peignoir, main) n'a pas besoin d'être montré. */
	object-position: 50% 8%;
}
.as-campaign-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(18,19,20,0.55) 0%, rgba(18,19,20,0.15) 45%, rgba(18,19,20,0.75) 78%),
	            linear-gradient(0deg, rgba(18,19,20,0.85) 0%, rgba(18,19,20,0.05) 45%);
}
.as-campaign-hero__content {
	position: relative; z-index: 1;
	max-width: 560px;
}
.as-campaign-hero__kicker {
	color: var(--gold);
	font-size: 26px;
	font-family: 'Tangier', serif;
	margin: 0 0 14px;
}
.as-campaign-hero__title {
	font-family: 'Valeor', serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.15;
	color: var(--cream);
	max-width: 520px;
	margin: 0 0 20px;
}
.as-campaign-hero__desc {
	font-size: 17px;
	line-height: 1.5;
	color: var(--text-muted);
	max-width: 540px;
	margin: 0 0 28px;
}
.as-campaign-stats { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.as-campaign-stat { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--cream); line-height: 1.3; }
.as-campaign-stat svg { color: var(--gold); flex-shrink: 0; display: block; }
.as-campaign-stat strong { font-size: 15px; }

/* ===================== Panneau d'inscription ===================== */
.as-campaign-panel {
	position: relative; z-index: 1;
	width: 400px;
	flex-shrink: 0;
	margin-left: auto;
	background: rgba(10, 10, 11, 0.72);
	border: 1px solid var(--panel-border);
	border-radius: 14px;
	padding: 26px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	backdrop-filter: blur(6px);
}
.as-campaign-panel__loading { text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 13px; }
.as-campaign-panel__kicker {
	font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--text-muted); margin: 0 0 10px;
}
.as-campaign-panel__title {
	font-family: 'Valeor', serif; font-weight: 500; font-size: 28px;
	color: var(--cream); margin: 0 0 10px;
}
.as-campaign-panel__desc {
	font-size: 14px; line-height: 1.5; color: #cfcac2; margin: 0 0 20px;
}

/* ----- Champs ----- */
.as-campaign-landing .as-sr-only {
	/* AJOUTÉ (27/09) — point n°4 signalé : labels explicites requis
	   pour l'accessibilité, sans changer l'apparence visuelle actuelle
	   (icône + texte d'exemple) -- motif standard "visually hidden",
	   jamais display:none (qui serait aussi invisible pour un lecteur
	   d'écran, contrairement à ceci). */
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.as-campaign-field { position: relative; margin-bottom: 12px; }
.as-campaign-field__icon {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	color: var(--text-muted); pointer-events: none;
	z-index: 2; line-height: 0;
}
/* CORRIGÉ (27/09) — signalé sur capture réelle : le texte des champs
   ("Prénom", "Numéro WhatsApp") chevauchait l'icône, exactement le
   signe d'un style du thème/Elementor en conflit qui l'emportait sur
   ce padding-left. Spécificité renforcée (préfixée par
   .as-campaign-landing) + !important sur les propriétés de mise en
   page uniquement, jamais sur la couleur ou la police -- garantit que
   CE padding gagne toujours, quoi que le thème impose par ailleurs. */
.as-campaign-landing .as-campaign-field input,
.as-campaign-landing .as-campaign-field select {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 46px !important;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--panel-border);
	border-radius: 9px;
	color: var(--cream);
	font-size: 14px;
	padding: 0 14px 0 42px !important;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 0 !important;
}
.as-campaign-landing .as-campaign-field select { padding-right: 36px !important; }
.as-campaign-field__chevron {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	color: var(--text-muted); pointer-events: none;
	z-index: 2; line-height: 0;
}
.as-campaign-field input::placeholder { color: var(--text-muted); }
.as-campaign-field input:focus,
.as-campaign-field select:focus {
	outline: none; border-color: var(--gold);
}
.as-campaign-field__hint { font-size: 11.5px; color: var(--text-muted); margin: 5px 0 0 42px; }

/* AJOUTÉ (27/09) — autocomplétion pays. */
.as-campaign-field--autocomplete { position: relative; }

/* CORRIGÉ (03/10) — DEUXIÈME reprise : signalé à nouveau sur capture
   réelle, le préfixe débordait TOUJOURS malgré le renforcement de
   spécificité précédent (position:absolute + !important). Plutôt que
   d'empiler un troisième correctif sur la même approche fragile
   (un positionnement absolu reste intrinsèquement précaire si le
   thème interfère d'une façon que je ne peux pas observer d'ici),
   reconstruit entièrement en disposition flexible : la BOÎTE
   elle-même (.as-campaign-phone-box, un vrai conteneur flex) porte
   la bordure et le fond, l'icône, l'indicatif et le champ de saisie
   en sont des ENFANTS CÔTE À CÔTE en flux normal -- plus aucun
   positionnement absolu dont dépendre, donc rien à faire "déborder"
   même si le thème interfère ailleurs. Jamais un troisième
   rafistolage de la même méthode qui a déjà échoué deux fois. */
.as-campaign-landing .as-campaign-field--phone .as-campaign-phone-box {
	display: flex !important;
	align-items: center !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 46px !important;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--panel-border);
	border-radius: 9px;
	padding: 0 14px !important;
	gap: 8px;
	margin: 0 !important;
}
.as-campaign-landing .as-campaign-field--phone .as-campaign-phone-box:focus-within {
	border-color: var(--gold);
}
.as-campaign-phone-box__icon {
	color: var(--text-muted); flex: 0 0 auto; display: flex; line-height: 0;
}
.as-campaign-landing .as-campaign-phone-dial {
	color: var(--gold); font-weight: 600; font-size: 13.5px; flex: 0 0 auto;
	border-right: 1px solid var(--panel-border); padding-right: 8px;
	white-space: nowrap;
}
.as-campaign-landing .as-campaign-field--phone .as-campaign-phone-box input {
	flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
	background: transparent !important; border: none !important; outline: none !important;
	box-shadow: none !important;
	color: var(--cream) !important; font-size: 14px !important;
	padding: 0 !important; margin: 0 !important; height: 100% !important;
}
.as-campaign-field--phone .as-campaign-field__hint { margin-left: 4px; }
.as-campaign-country-list {
	position: absolute; left: 0; right: 0; top: calc(100% + 4px);
	background: var(--ink-soft); border: 1px solid var(--panel-border);
	border-radius: 9px; max-height: 220px; overflow-y: auto;
	z-index: 20; box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.as-campaign-country-option {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; font-size: 14px; color: var(--cream);
	cursor: pointer;
}
.as-campaign-country-option:hover,
.as-campaign-country-option.is-active { background: rgba(209,180,121,0.14); }
.as-campaign-country-flag { font-size: 18px; line-height: 1; flex-shrink: 0; }
.as-campaign-country-empty {
	padding: 14px; font-size: 13px; color: var(--text-muted); text-align: center;
}
.as-campaign-field__error {
	font-size: 12px; color: #e8867a; margin: 5px 0 0 4px; display: none;
}
.as-campaign-field.has-error input,
.as-campaign-field.has-error select { border-color: #e8867a; }
.as-campaign-field.has-error .as-campaign-field__error { display: block; }

/* AJOUTÉ (06/10) — consentement obligatoire : message d'erreur sous la case.
   Pas de classe .as-campaign-field ici (elle styliserait la case comme un
   champ texte). */
.as-campaign-consent-wrap.has-error .as-campaign-field__error { display: block; margin: -12px 0 14px 27px; }
.as-campaign-consent-wrap.has-error .as-campaign-consent input[type="checkbox"] { outline: 2px solid #e8867a; outline-offset: 2px; }
.as-campaign-consent {
	display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 18px;
	font-size: 13px; line-height: 1.45; color: #cfcac2;
}
.as-campaign-consent input[type="checkbox"] {
	width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; accent-color: var(--gold);
}
.as-campaign-consent__info { color: var(--text-muted); flex-shrink: 0; margin-left: auto; }

.as-campaign-submit {
	width: 100%; height: 48px;
	background: var(--gold);
	color: var(--ink);
	border: none; border-radius: 9px;
	font-size: 14.5px; font-weight: 500;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.as-campaign-submit:hover { background: var(--gold-deep); }
.as-campaign-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.as-campaign-privacy {
	display: flex; align-items: flex-start; gap: 8px; margin-top: 16px;
	font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}
.as-campaign-privacy svg { flex-shrink: 0; margin-top: 1px; }

/* AJOUTÉ (01/10) — bannière de bonus de parrainage, affichée une
   seule fois au retour sur la page. */
.as-campaign-bonus-banner {
	background: rgba(209, 180, 121, 0.12); border: 1px solid var(--gold);
	border-radius: 10px; padding: 14px 16px; margin: 4px 0 16px;
}
.as-campaign-bonus-banner p { margin: 0 0 4px; font-size: 13.5px; color: var(--cream); }
.as-campaign-bonus-banner p:first-child { font-weight: 700; }
.as-campaign-bonus-banner p:last-child { margin-bottom: 0; }

/* AJOUTÉ (01/10) — explication sous le bouton de parrainage. */
.as-campaign-share__hint {
	text-align: center; font-size: 12px; color: var(--text-muted);
	margin: 8px 0 0; line-height: 1.5;
}

/* AJOUTÉ (27/09) — point n°1 : "vérifier mon statut" */
.as-campaign-check-status-link {
	display: block; text-align: center; background: none; border: none;
	color: var(--gold); font-size: 12.5px; text-decoration: underline;
	margin: 4px 0 0; padding: 6px 0;
}
.as-campaign-check-status-form { margin-top: 4px; }
.as-campaign-check-status-form p { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }

.as-campaign-panel__server-error {
	background: rgba(232,134,122,0.12); border: 1px solid rgba(232,134,122,0.4);
	border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: #f0a99e;
	margin-bottom: 14px;
}

/* ----- État : succès / espace personnel ----- */
.as-campaign-success__badge {
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(209,180,121,0.16); color: var(--gold);
	display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.as-campaign-success h3 { font-family: 'Valeor', serif; font-size: 24px; font-weight: 500; margin: 0 0 10px; }
.as-campaign-success p { font-size: 14px; line-height: 1.55; color: #cfcac2; margin: 0 0 18px; }
.as-campaign-position {
	background: rgba(255,255,255,0.05); border: 1px solid var(--panel-border);
	border-radius: 10px; padding: 16px; text-align: center; margin-bottom: 16px;
}
.as-campaign-position__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 0 0 4px; }
.as-campaign-position__value { font-family: 'Valeor', serif; font-size: 34px; color: var(--gold); margin: 0; }
.as-campaign-share {
	width: 100%; height: 46px; background: rgba(37,211,102,0.12);
	border: 1px solid rgba(37,211,102,0.4); color: #6fe08a;
	border-radius: 9px; font-size: 13.5px; font-weight: 500;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin-bottom: 10px;
}
.as-campaign-status-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; text-align: center; }
.as-campaign-access-btn {
	width: 100%; height: 48px; background: var(--gold); color: var(--ink);
	border-radius: 9px; font-size: 14.5px; font-weight: 500;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	text-decoration: none; margin-bottom: 12px;
}

/* ===================== Section "Comment ça marche" ===================== */
.as-campaign-how {
	background: var(--ink);
	padding: 80px 6% 60px;
	position: relative;
}
.as-campaign-kicker { font-size: 12px; letter-spacing: 1.5px; color: var(--gold); text-transform: uppercase; margin: 0 0 12px; }
.as-campaign-how__intro h2 { font-family: 'Valeor', serif; font-weight: 400; font-size: 34px; color: var(--cream); margin: 0 0 14px; max-width: 560px; }
.as-campaign-how__desc { font-size: 15px; color: var(--text-muted); max-width: 560px; line-height: 1.5; margin: 0 0 48px; }

.as-campaign-steps {
	/* CORRIGÉ (01/10) — 5 colonnes : nouvelle étape "parrainage"
	   ajoutée, validée explicitement (bonus +2h). */
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
	margin-bottom: 48px;
}
.as-campaign-step { position: relative; padding-right: 16px; }
.as-campaign-step:not(:last-child)::after {
	content: ''; position: absolute; top: 4px; right: 0; bottom: 40px;
	width: 1px; background: rgba(255,255,255,0.08);
}
.as-campaign-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700;
	margin-bottom: 14px;
}
.as-campaign-step svg { display: block; color: var(--gold); margin-bottom: 14px; }
.as-campaign-step h3 { font-size: 17px; font-weight: 600; color: var(--cream); margin: 0 0 8px; }
.as-campaign-step p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; max-width: 240px; }

.as-campaign-trust {
	display: flex; align-items: stretch;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 14px;
	background: rgba(255,255,255,0.025);
	padding: 26px 32px;
}
.as-campaign-trust__item { display: flex; gap: 16px; flex: 1; }
.as-campaign-trust__item svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.as-campaign-trust__item h4 { font-size: 15px; font-weight: 600; color: var(--cream); margin: 0 0 6px; }
.as-campaign-trust__item p { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.as-campaign-trust__divider { width: 1px; background: rgba(255,255,255,0.1); margin: 0 32px; }

/* ===================== Footer ===================== */
.as-campaign-footer {
	background: var(--ink);
	border-top: 1px solid rgba(255,255,255,0.08);
	padding: 26px 6%;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.as-campaign-footer__logo {
	height: 22px;
	/* CORRIGÉ (27/09), troisième passe — même correction que le logo
	   du header (fichier réellement transparent, voir son docblock). */
	filter: invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.as-campaign-footer__tagline { font-size: 13px; color: var(--text-muted); margin: 0; }
.as-campaign-footer__link { font-size: 13.5px; color: var(--cream); text-decoration: none; white-space: nowrap; }
.as-campaign-footer__link:hover { color: var(--gold); }

/* ===================== Responsive ===================== */
/* Tablette */
@media (max-width: 1024px) {
	.as-campaign-hero { min-height: 560px; padding: 120px 5% 48px; flex-direction: column; align-items: stretch; gap: 40px; }
	.as-campaign-panel { width: 100%; margin-left: 0; }
	.as-campaign-hero__title { font-size: 36px; }
	.as-campaign-steps { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.as-campaign-step:nth-child(2)::after { display: none; }
	.as-campaign-trust { flex-direction: column; gap: 20px; }
	.as-campaign-trust__divider { display: none; }
}

/* Mobile — testé à 360/390/430px */
@media (max-width: 640px) {
	.as-campaign-header { height: 72px; padding: 0 5%; }
	.as-campaign-header__logo img { height: 22px; }
	.as-campaign-hero { padding: 96px 5% 32px; }
	.as-campaign-hero__bg img { object-position: 50% 6%; }
	.as-campaign-hero__kicker { font-size: 20px; }
	.as-campaign-hero__title { font-size: 30px; }
	.as-campaign-hero__desc { font-size: 15px; }
	.as-campaign-stats { gap: 18px; flex-direction: column; align-items: flex-start; }
	.as-campaign-panel { padding: 20px; border-radius: 12px; }
	.as-campaign-panel__title { font-size: 24px; }
	.as-campaign-steps { grid-template-columns: 1fr; row-gap: 28px; }
	.as-campaign-step::after { display: none; }
	.as-campaign-how { padding: 56px 5% 40px; }
	.as-campaign-how__intro h2 { font-size: 26px; }
	.as-campaign-footer { flex-direction: column; text-align: center; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.as-campaign-landing * { transition: none !important; animation: none !important; }
}

/* AJOUTÉ (04/10) — lien de désinscription, volontairement discret mais toujours visible. */
.as-campaign-landing .as-campaign-optout-link {
	display: block; margin: 18px auto 0; padding: 4px 8px !important;
	background: none !important; border: none !important; box-shadow: none !important;
	color: var(--text-muted); font-size: 12px; text-decoration: underline; cursor: pointer;
}
.as-campaign-landing .as-campaign-optout-link:hover { color: var(--cream); }
.as-campaign-landing .as-campaign-optout-link:disabled { opacity: 0.6; cursor: default; }