/**
 * Dahu Theme Annad 2026 — composition « Trois photos à légende dépliable » (devenir-photos), 4.61.0.
 *
 * Composition posée sur « Devenir revendeur » ET sur « Nos revendeurs » (et partout où on l'insère) :
 * cette feuille ne dépend d'aucun modèle de page ni d'aucune enveloppe (.annad-devenir, .annad-blocks),
 * seulement des classes de la composition. Chargée d'après le contenu de la page
 * (annad_theme_photos_assets(), functions.php : classe annad-devenir__photos dans le contenu ou dans
 * un bloc synchronisé qu'il insère), et dans l'éditeur (inc/blocks.php).
 *
 * Historique : écrite dans devenir-revendeur.css, déplacée dans front-page.css (4.21.15) pour servir
 * aussi « Nos revendeurs », puis ici (4.61.0) avec le correctif d'alignement du 7/10 (4.59.0), qui
 * restait dans devenir-revendeur.css et ne s'appliquait donc pas à « Nos revendeurs ». Les classes
 * gardent leur nom d'origine : le contenu déjà publié les porte.
 * Mobile-first, palier 48em.
 */

/* Premier ajout au déplacement : la largeur « large » (80rem, celle de theme.json) est écrite ici, pour
   que la rangée garde sa taille même si les alignements du bloc sont retirés dans l'éditeur. Avec
   les alignements d'origine, la valeur est la même : rendu inchangé. */
.annad-devenir__photos-section.wp-block-group {
	max-width: none;
}

.annad-devenir__photos.wp-block-group {
	max-width: var(--container-max);
	margin-inline: auto;
}


.annad-devenir__photos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

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

/* Format vertical 2/3 au lieu d'une hauteur fixe : la carte se dimensionne sur sa largeur, donc le
   ratio tient à toutes les tailles d'écran. Au repos elle occupe 80 % de sa colonne et se centre ;
   au survol (et au focus clavier, pour que l'effet ne soit pas réservé à la souris) elle passe à
   100 %. La hauteur suit la largeur via le ratio, d'où la transition sur `width` seule.
   Le texte déplié se superpose à la photo au lieu de la pousser (voir .annad-devenir__caption). */
.annad-devenir__photo {
	position: relative;
	width: 80%;
	margin-inline: auto;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	border-radius: var(--annad-radius-small);
	transition: width var(--annad-transition-base) var(--annad-ease);
}

.annad-devenir__photo:hover,
.annad-devenir__photo:focus-within {
	width: 100%;
}

/* Trois cartes côte à côte à partir de 48em : même haut, même taille (retours du 7/10, 4.59.0, à
   l'origine pour « Devenir revendeur » seule ; partout depuis la 4.61.0). Le décalage de la première
   maquette (2e carte plus haute) est abandonné. margin-top: 0 annule aussi la marge haute que la mise
   en page « flux » du groupe donne aux 2e et 3e cartes. `align-items: start` empêche
   l'agrandissement au survol de pousser les voisines. Empilées (moins de 48em), rien ne change. */
@media (min-width: 48em) {
	.annad-devenir__photos {
		align-items: start;
	}

	.annad-devenir__photos > .annad-devenir__photo {
		margin-top: 0;
	}
}

.annad-devenir__caption {
	position: absolute;
	inset: auto 0 0;
	padding: 1rem;
	color: var(--color-on-surface);
}

/* Voile sombre sous la légende, étendu à toute la carte quand elle est ouverte */
.annad-devenir__caption::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 85%, transparent), transparent);
	transition: inset var(--annad-transition-base) var(--annad-ease);
}

.annad-devenir__caption[open] {
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.annad-devenir__caption > summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

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

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

.annad-devenir__caption > 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);
	background-color: color-mix(in srgb, var(--color-on-surface) 25%, transparent);
	border-radius: 50%;
}

.annad-devenir__caption[open] > summary::after {
	content: "\2212";
}

/* Second ajout au déplacement : carte étroite (trois colonnes juste au-dessus de 48em, soit moins
   de 222px de large). Un mot long du titre (« Développement ») ne tenait plus à côté du rond, qui
   sortait de la carte et était rogné. La légende se resserre alors (requête de conteneur sur la
   carte) ; à partir de 222px rien ne change. overflow-wrap : dernier filet, un mot encore trop long
   se coupe au lieu de pousser le rond. */
.annad-devenir__photo {
	container-type: inline-size;
}

.annad-devenir__caption > summary {
	overflow-wrap: anywhere;
}

@container (max-width: 13.85rem) {
	.annad-devenir__caption {
		padding: 0.75rem;
	}

	.annad-devenir__caption > summary {
		gap: 0.5rem;
		font-size: 0.875rem;
	}
}

/* Texte révélé : sous le titre, au-dessus du voile (ordre de la maquette) */
.annad-devenir__caption > :not(summary) {
	position: relative;
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
	.annad-devenir__caption::before,
	.annad-devenir__photo {
		transition: none;
	}
}