/**
 * Dahu Theme Annad 2026 — page « Devenir revendeur » (maquette modeles/devenir_revendeur.png).
 *
 * Page sombre. Sont réutilisés sans être redéfinis : le bandeau (banner.css), les titres
 * (.annad-title, .annad-center) et l'espacement des sections (.annad-section, front-page.css), le
 * surlignage vert (.annad-name-highlight, buybox.css), les tokens de couleur et de transition.
 * La carte du formulaire réutilise le socle clair par la classe .annad-light-zone (light-zone.css) :
 * mêmes tokens, champs et boutons que Mon compte, la FAQ et le Panier, sans fond clair de page.
 * Mobile-first, breakpoints 40em / 64em.
 */

/* ---------- Intro ---------- */
/* Titre nettement plus léger que les titres de section du site (800) : la maquette le montre en
   graisse normale. Il doit tenir sur une seule ligne en desktop : la largeur de contenu de
   .annad-blocks (48rem) le couperait, la section passe donc en pleine largeur de conteneur et le
   texte n'est plus équilibré sur deux lignes (text-wrap: balance hérité de .annad-title). */

.annad-devenir__intro .annad-title {
	max-width: var(--container-max);
	margin-inline: auto;
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
	font-weight: 500;
	text-wrap: normal;
}

/* Pas de white-space: nowrap : un titre rallongé dans l'éditeur déborderait horizontalement.
   À 2rem, la phrase de la maquette (~47 signes) occupe environ 47rem, elle tient donc sur une ligne
   dès que la largeur utile dépasse cette valeur — le cas à partir de 64em. */

.annad-devenir__intro p {
	max-width: 38rem;
	margin-inline: auto;
	color: var(--color-text-muted);
}

/* ---------- Carte du formulaire ---------- */

.annad-devenir__form.wp-block-columns {
	gap: 3rem;
	margin: 0;
	padding: 2.5rem var(--gutter);
	background-color: #f0f0f0; /* carte claire propre à cette page (maquette) */
	border-radius: var(--radius-large);
}

@media (min-width: 64em) {
	.annad-devenir__form.wp-block-columns {
		padding: 3.5rem 4rem;
	}
}

.annad-devenir__form-title {
	margin-bottom: 1.25rem;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
}

.annad-devenir__form-text {
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: justify;
	color: var(--light-muted);
}

/* Emplacement du shortcode Contact Form 7 : même principe que le store locator de « Nos revendeurs ».
   Le repli n'apparaît que tant que le bloc est vide. */
.annad-devenir__cf7:empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 14rem;
	padding: 2rem;
	text-align: center;
	background-color: color-mix(in srgb, var(--color-on-surface-light) 8%, transparent);
	border: 1px dashed var(--light-line);
	border-radius: var(--light-card-radius);
}

.annad-devenir__cf7:empty::after {
	content: attr(data-annad-form-placeholder);
	max-width: 22rem;
	font-weight: 700;
}

/* ---------- Habillage du formulaire ----------
   Plus rien ici : grille à deux colonnes (.annad-half), libellés, astérisque, listes, consentement
   (.annad-consent), bouton et messages de Contact Form 7 sont dans assets/css/forms.css, communs à
   tous les formulaires du site. Ils visent .wpcf7-form, pas .annad-devenir__cf7 : le formulaire est
   habillé même inséré par le bloc Contact Form 7 hors de cet emplacement (cas du staging, où les
   anciennes règles, attachées à .annad-devenir__cf7, ne s'appliquaient pas). */

/* ---------- « Pourquoi devenir revendeur Annad ? » ---------- */
/* Photo de fond posée sur le groupe depuis l'éditeur, passée en noir et blanc, assombrie par un
   voile pour que les cartes claires ressortent. */

.annad-devenir__why {
	position: relative;
	padding: 2rem var(--gutter) 2.5rem;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	border-radius: var(--radius-large);
}

.annad-devenir__why::before {
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: grayscale(1);
	background-color: color-mix(in srgb, var(--color-bg) 35%, transparent);
}

.annad-devenir__why > * {
	position: relative; /* au-dessus du voile */
}

@media (min-width: 64em) {
	.annad-devenir__why {
		padding: 3rem;
	}
}

.annad-devenir__why-title {
	margin-bottom: 2rem;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-on-surface);
}

.annad-devenir__why-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-items: start; /* une carte dépliée n'étire pas sa voisine */
}

@media (min-width: 48em) {
	.annad-devenir__why-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem 2rem;
	}
}

/* Carte claire repliable. Le rond « + » / « − » reprend le dessin de la FAQ produit
   (.annad-faq__icon, faq.css) sans le dupliquer : il est ici dessiné sur le ::after du summary,
   faute de balise dédiée dans un bloc « Détails » natif. */
.annad-devenir__reason {
	padding: 0;
	color: var(--color-on-surface-light);
	background-color: var(--color-light-bg);
	border-radius: var(--radius-large);
}

.annad-devenir__reason > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1rem 1rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.annad-devenir__reason > summary::-webkit-details-marker {
	display: none;
}

.annad-devenir__reason > summary:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: -2px;
}

.annad-devenir__reason > summary::after {
	content: "+";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	color: var(--color-on-surface-light);
	background-color: color-mix(in srgb, var(--color-on-surface-light) 12%, transparent);
	border-radius: 50%;
}

.annad-devenir__reason[open] > summary::after {
	content: "\2212"; /* signe moins */
}

.annad-devenir__reason > :not(summary) {
	margin: 0 1.25rem 1.25rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--color-on-surface-light) 75%, transparent);
}

/* Les trois photos à légende dépliable (.annad-devenir__photos, composition devenir-photos) sont
   dans front-page.css depuis la 4.21.15 : la composition sert aussi à la page « Nos revendeurs », et
   cette feuille-ci n'est chargée qu'avec le modèle « Page Devenir revendeur ». */