/* ============================================================
 * ASSOFINDER — Accompagnement du formulaire de depot.
 *
 * COULEURS : on consomme les tokens du thema (--msf-*, definis dans
 * listeo/style.css:44431 et utilises par le formulaire multi-etapes
 * lui-meme). Coder une couleur en dur ici produirait un encadre qui
 * jure avec le formulaire juste en dessous — c'etait le cas de la
 * premiere version, qui posait un bleu sur un thema rouge.
 * Les valeurs apres la virgule ne servent que si le thema change.
 * ============================================================ */

/* --- Encart d'aide de la page : masque ------------------------
 * « Besoin d'aide pour ajouter votre annonce ?… » vivait dans le
 * contenu de la page. Ses deux liens sont desormais dans la bande
 * d'accueil ci-dessous : le garder ferait une troisieme boite avant
 * le premier champ, avec les memes liens.
 *
 * Ce fichier n'est charge QUE sur la page de depot : la regle est
 * donc deja limitee a cette page, sans avoir a la porter sur un
 * page-id qui changerait si la page etait recreee.
 *
 * ON NE TOUCHE PAS A .notification : c'est la classe des vrais
 * messages de Listeo — erreurs de validation, « vous modifiez la
 * fiche… ». Les masquer rendrait le formulaire muet en cas d'erreur.
 * ------------------------------------------------------------- */
.vc_message_box,
.wpb_alert {
	display: none !important;
}

/* --- Bloc d'accueil du formulaire ----------------------------
 * Une bande foncee en tete, trois reperes clairs en dessous.
 *
 * Le contraste fait le travail : sur une page entierement blanche, un
 * aplat sombre est la seule chose que l'oeil va chercher en premier. La
 * version precedente — carte blanche sur fond blanc, texte gris — se
 * fondait dans le formulaire et se lisait comme une notice.
 *
 * La bande reprend la couleur des pastilles d'en-tete de section, donc
 * le bloc appartient visiblement a la meme famille que le formulaire.
 * ------------------------------------------------------------- */
.assofinder-avant {
	border: 1px solid var(--msf-color-neutral-border, #e0e0e0);
	border-radius: 6px;
	background: #fff;
	margin-bottom: 32px;
	overflow: hidden;
}

.assofinder-avant-tete {
	padding: 22px 26px 20px;
	background: var(--msf-color-primary, #26324b);
	color: #fff;
}

.assofinder-avant-tete h2 {
	margin: 0 0 6px;
	color: #fff;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
}

.assofinder-avant-tete p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .85);
}

.assofinder-avant-grille {
	display: flex;
	flex-wrap: wrap;
}

.assofinder-fait {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	flex: 1 1 0;
	min-width: 220px;
	padding: 18px 22px;
	border-left: 1px solid var(--msf-color-neutral-border, #e0e0e0);
}

.assofinder-fait:first-child {
	border-left: 0;
}

.assofinder-fait-icone {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--msf-color-primary-light-bg, #eef0f6);
	color: var(--msf-color-primary, #26324b);
	font-size: 16px;
	line-height: 1;
}

.assofinder-fait-texte {
	display: block;
	min-width: 0;
}

.assofinder-fait-texte strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 3px;
}

.assofinder-fait-texte span {
	display: block;
	/* 15 px et non 13,5 : le public de ce formulaire est age, et c'est
	   la ligne qui porte la reassurance — celle qu'il ne faut surtout
	   pas rendre penible a lire. Le gris est aussi assombri pour tenir
	   le contraste AA. */
	font-size: 15px;
	line-height: 1.5;
	color: #5f6980;
}

/* Liens d'aide, dans la bande foncee : presents sans se disputer
   l'attention avec l'accroche. */
.assofinder-avant-liens {
	display: inline-block;
	margin-left: 4px;
	white-space: nowrap;
}

.assofinder-avant-tete a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: .8;
}

.assofinder-avant-tete a:hover {
	opacity: 1;
}

.assofinder-avant-liens .sep {
	opacity: .45;
	margin: 0 3px;
}

/* --- Bandeau d'etat du brouillon ------------------------------
 * Il remplace le bouton « Enregistrer ». Une pastille de couleur porte
 * l'etat, pilotee par l'attribut data-etat : pas de dependance a une
 * police d'icones, lisible en un dixieme de seconde, et le texte reste
 * disponible pour les lecteurs d'ecran (role="status").
 * ------------------------------------------------------------- */
.assofinder-brouillon {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #5f6980;
}

.assofinder-brouillon:before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c9ced9;
	transform: translateY(-1px);
}

.assofinder-brouillon[data-etat="cours"]:before {
	background: var(--msf-color-warning, #ffb100);
}

.assofinder-brouillon[data-etat="ok"]:before {
	background: #38b653;
}

.assofinder-brouillon[data-etat="erreur"]:before {
	background: var(--msf-color-error-border, #ff6565);
}

.assofinder-brouillon[data-etat="erreur"] {
	color: var(--msf-color-error-text, #cc545f);
}

.assofinder-brouillon-reessayer {
	background: none;
	border: 0;
	padding: 0;
	margin-left: 6px;
	font-size: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* --- Conseil de redaction, en tete de section -----------------
 * Une ampoule, une etiquette courte, une phrase — dans la bande
 * d'en-tete qui existe deja, a droite du titre de section.
 *
 * PAS D'ENCADRE, PAS D'APLAT. Le formulaire compte deja six sections ;
 * une boite de conseil par section en ferait douze. Ici le conseil
 * n'ajoute aucun bloc a la page : il occupe la place vide a droite
 * d'un titre de 22 px, celle que l'oeil traverse de toute facon.
 *
 * La taille (14,5 px contre 22) et le gris font la hierarchie : on
 * lit le titre d'abord, le conseil ensuite — et seulement si on en
 * a besoin. Un conseil qu'on remarque avant le champ est rate.
 *
 * LA CLASSE VIENT DU PHP. `has-headline-aside` n'est posee que si un
 * conseil existe reellement pour la section (voir le filtre
 * listeo_core_submit_section_headline_aside dans listing-submit.php).
 * Sans elle, la bande garde exactement la mise en page du thema : les
 * sections sans conseil ne bougent pas d'un pixel.
 * ------------------------------------------------------------- */
.add-listing-headline.has-headline-aside {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 34px;
}

.add-listing-headline.has-headline-aside h3 {
	flex: 0 1 auto;
}

.assofinder-conseil {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex: 0 1 470px;
	/* Pousse le conseil contre le bord droit de la bande quel que soit
	   la longueur du titre, sans `justify-content: space-between` qui
	   ecarterait aussi les elements une fois passes a la ligne. */
	margin: 0 0 0 auto;
	font-size: 14.5px;
	line-height: 1.5;
	color: #5f6980;
}

/* Le thema applique `padding-right: 7px` et `top: 1px` a TOUT <i> de la
   bande d'en-tete, pour les pastilles d'icone des titres. On les annule :
   ici l'ecart est tenu par le `gap`, et le decalage vertical est celui
   d'un titre de 22 px, pas d'une ligne de 14,5. */
.assofinder-conseil-icone {
	flex: 0 0 auto;
	padding-right: 0;
	top: 2px;
	font-size: 17px;
	line-height: 1;
	color: var(--msf-color-primary, #26324b);
	opacity: .7;
}

.assofinder-conseil-texte {
	min-width: 0;
}

/* L'etiquette (« Le saviez-vous ? », « Trois photos ideales ») donne au
   conseil un statut : ce n'est pas une consigne de plus, c'est un
   repere. En petites capitales, elle se lit sans peser. */
.assofinder-conseil strong {
	display: block;
	margin-bottom: 2px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--msf-color-primary, #26324b);
}

/* --- Conseil : ecrans etroits ---------------------------------
 * En dessous de 992 px, la place a droite du titre n'existe plus : le
 * conseil passe sous le titre, separe par un filet.
 *
 * Le thema reserve 100 px a droite de la bande pour l'interrupteur des
 * sections activables — aucune des sections d'AssoFinder n'en a un, et
 * cette reserve amputerait le conseil d'un tiers de sa largeur sur
 * telephone. On la reprend, uniquement sur les bandes a conseil.
 * ------------------------------------------------------------- */
@media (max-width: 991px) {
	.add-listing-headline.has-headline-aside {
		display: block;
		/* Meme valeur qu'a gauche : la bande deborde la carte de 20 px de
		   chaque cote, 40 px de padding realignent donc le texte sur les
		   champs en dessous. */
		padding-right: 40px;
	}

	.assofinder-conseil {
		flex-basis: auto;
		margin: 14px 0 0;
		padding-top: 13px;
		border-top: 1px solid #ececec;
	}
}

/* -------------------------------------------------------------
 * LA BANDE D'ACCUEIL : DE LA PLACE, ET QUELQU'UN QUI FAIT SIGNE.
 *
 * CE QU'ELLE ETAIT. Trois lignes serrees dans 22 px de marge, posees
 * au-dessus d'un formulaire de plusieurs dizaines de champs. Tout etait
 * juste et l'ensemble ressemblait a une notice — dense avant meme
 * d'avoir commence.
 *
 * DEUX LEVIERS, ET AUCUN N'EST DECORATIF.
 *
 * La place d'abord. Les marges passent de 22/26 a 30/34, l'interligne
 * de l'accroche s'ouvre, et les trois colonnes de faits respirent de
 * 4 px de plus. Un bloc aere se lit comme une invitation ; le meme
 * texte serre se lit comme un reglement.
 *
 * La main ensuite. Elle ne dit rien que le texte ne dise deja : elle
 * change ce qu'on ressent avant de lire. Un salut, pas un pictogramme.
 *
 * L'INCLINAISON EST VOULUE. Une main parfaitement droite est une main
 * arretee ; c'est le leger pivot qui la fait saluer. Dix degres
 * suffisent — au-dela on tombe dans l'autocollant.
 *
 * DEUX SELECTEURS POUR UNE IMAGE. Imagify enveloppe les <img> dans un
 * <picture> et DEPLACE LA CLASSE sur l'enveloppe. Une regle qui ne
 * viserait que .assofinder-avant-main s'appliquerait alors au conteneur
 * et pas a l'image, qui reprendrait sa taille native de 430 px. Ca s'est
 * produit deux fois sur ce site — la banniere de cookies puis la page
 * 404. On vise donc les deux, et height: auto porte !important parce que
 * le thema impose une hauteur aux images (listeo/style.css:177).
 * ------------------------------------------------------------- */
.assofinder-avant-tete {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 30px 34px 28px;
}

.assofinder-avant-mots {
	flex: 1 1 auto;
	min-width: 0;
}

/* La salutation : presente, discrete, et surtout pas en capitales.
   Une graisse moyenne et une opacite legere suffisent a la distinguer du
   titre sans en faire une etiquette. */
.assofinder-avant-salut {
	display: block;
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(255, 255, 255, .72);
}

.assofinder-avant-tete h2 {
	margin: 0 0 9px;
	font-size: 22px;
	line-height: 1.35;
}

.assofinder-avant-tete p {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}

.assofinder-avant-main,
.assofinder-avant-main img {
	display: block;
	flex: 0 0 auto;
	width: 84px;
	max-width: 100%;
	height: auto !important;
	transform: rotate(-10deg);
	transform-origin: 50% 80%;
}

/* A GAUCHE PAR L'ORDRE D'AFFICHAGE, PAS PAR L'ORDRE DU CODE.
 *
 * Le titre reste le premier element du balisage — c'est lui qui doit
 * ouvrir le bloc pour un lecteur d'ecran, et c'est le premier <h2> de la
 * page. `order` ne deplace que le rendu : la structure du document ne
 * bouge pas, l'image reste ce qu'elle est, un ornement place apres le
 * texte qu'il accompagne. */
.assofinder-avant-main {
	order: -1;
}

/* Le pivot ne s'applique qu'une fois : si Imagify a enveloppe l'image,
   c'est l'enveloppe qui tourne, pas les deux l'une dans l'autre. */
.assofinder-avant-main img {
	transform: none;
}

/* Les traits qui separent les trois faits etaient de la meme valeur que
   la bordure du bloc : trois cloisons dans une boite deja bordee. On les
   allege, et on rend aux colonnes la place qui leur manquait. */
.assofinder-fait {
	padding: 22px 24px;
	border-left-color: #eceef3;
}

/* --- Mobile --------------------------------------------------- */
@media (max-width: 767px) {
	.assofinder-avant-tete {
		padding: 18px 18px 16px;
	}

	.assofinder-avant-tete h2 {
		font-size: 19px;
	}

	.assofinder-fait {
		flex-basis: 100%;
		border-left: 0;
		border-top: 1px solid var(--msf-color-neutral-border, #e0e0e0);
		padding: 14px 18px;
	}

	.assofinder-fait:first-child {
		border-top: 0;
	}
}

/* --- La bande d'accueil sur petit ecran ------------------------ */
@media (max-width: 767px) {

	.assofinder-avant-tete {
		/* On empile plutot que de retrecir : a 320 px de large, une main
		   de 104 px et trois lignes de texte cote a cote ne laissent a
		   aucun des deux la place de fonctionner. */
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 22px 20px 20px;
	}

	.assofinder-avant-tete h2 {
		font-size: 19px;
	}

	.assofinder-avant-main,
	.assofinder-avant-main img {
		width: 66px;
	}

	/* Empile : la main passe au-dessus du texte, ce que `order: -1` fait
	   deja. On la cale a gauche comme le reste plutot qu'au centre — deux
	   alignements differents dans un bloc de trois lignes se remarquent. */
	.assofinder-avant-main {
		align-self: flex-start;
	}

	.assofinder-fait {
		padding: 16px 20px;
	}
}