/* forum.css — formulaire public « Publiez votre avis » (#FORMULAIRE_FORUM).
 *
 * Chargée par formulaires/forum.html lui-même, et non par chaque squelette :
 * le composant arrive avec son conteneur et sa feuille, si bien qu'il tombe
 * juste sur les douze gabarits qui l'appellent, qu'ils l'enveloppent ou non.
 *
 * Deux pièges de styles.css conditionnent tout ce qui suit :
 * - la règle universelle « * { font-size:18px; color:#0A1339 } » s'applique à
 *   chaque élément et bat l'héritage : un enfant ne reprend ni la taille ni la
 *   couleur de son parent tant qu'on ne le lui dit pas ;
 * - « form:not(.avis-wiki) input / textarea / label » pèse (0,2,2) ou (0,1,2) :
 *   les sélecteurs des champs ci-dessous pèsent (0,3,0) pour passer devant.
 *
 * Mêmes repères que css/formulaire-prix.css : libellé au-dessus du champ,
 * cibles tactiles de 48px, focus toujours visible, erreur signalée par la
 * bordure ET le texte, jamais par la seule couleur.
 */

/* --- Bloc --------------------------------------------------------------- */

/* La carte reprend le fond et l'arrondi des cartes d'avis qui la précèdent.
   Le .container du squelette lui donne la largeur des autres sections. */
.publier-avis {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	padding: 2rem 1.25rem;
	border-radius: 20px;
	background: #F6F7FC;
}

@media (min-width: 768px) {
	.publier-avis {
		padding: 2.5rem;
	}
}

/* Au-delà de la tablette, deux colonnes : la présentation à gauche, le
   formulaire à droite. Un formulaire étiré sur 1270px donnerait des champs
   illisibles ; ici la colonne de saisie plafonne autour de 760px. */
@media (min-width: 992px) {
	.publier-avis {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 3rem;
		padding: 3rem;
	}
}

.publier-avis .publier-avis__titre {
	margin: 0 0 .75rem;
	font-size: 26px;
	line-height: 1.2;
}

@media (min-width: 768px) {
	.publier-avis .publier-avis__titre {
		font-size: 30px;
	}
}

.publier-avis .publier-avis__intro {
	margin: 0 0 1rem;
	font-size: 17px;
	line-height: 1.5;
}

.publier-avis .publier-avis__garanties {
	margin: 0;
	padding: 0;
	list-style: none;
}

.publier-avis .publier-avis__garanties li {
	position: relative;
	margin: 0 0 .5rem;
	padding-left: 1.75rem;
	font-size: 16px;
	line-height: 1.45;
}

/* Coche verte dessinée en CSS : pas d'image à charger, pas de span. */
.publier-avis .publier-avis__garanties li::before {
	content: "";
	position: absolute;
	left: .2rem;
	top: .2em;
	width: .45rem;
	height: .8rem;
	border: solid #61CD81;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* Après un envoi, l'ancre #formulaire_forum ramène le visiteur ici ; le lien
   « Modifier mon texte » de l'aperçu vise #texte. Sans marge, la cible se
   colle au bord de l'écran et son libellé passe au-dessus. */
.publier-avis .publier-avis__corps {
	scroll-margin-top: 1.5rem;
}

.publier-avis #texte {
	scroll-margin-top: 3rem;
}

/* --- Champs ------------------------------------------------------------- */

.publier-avis .publier-avis__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 1rem;
}

@media (min-width: 560px) {
	.publier-avis .publier-avis__duo {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.publier-avis .publier-avis__champ {
	margin: 0 0 1.25rem;
}

.publier-avis .publier-avis__champ label {
	display: block;
	margin: 0 0 .4rem;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.publier-avis .publier-avis__champ .publier-avis__facultatif {
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: #4A5170;
}

.publier-avis .publier-avis__champ .publier-avis__input {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: .65rem .85rem;
	border: 1px solid #C7CAD3;
	border-radius: 8px;
	background: #fff;
	font-size: 16px;
	line-height: 1.45;
	color: #0A1339;
}

.publier-avis .publier-avis__champ textarea.publier-avis__input {
	height: auto;
	min-height: 9.5rem;
	resize: vertical;
}

.publier-avis .publier-avis__champ .publier-avis__input:focus {
	border-color: #0A1339;
	outline: none;
}

.publier-avis .publier-avis__champ .publier-avis__input:focus-visible,
.publier-avis button:focus-visible,
.publier-avis a:focus-visible {
	outline: 3px solid #0A1339;
	outline-offset: 2px;
}

.publier-avis .publier-avis__aide {
	margin: .4rem 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: #4A5170;
}

/* --- Erreurs et confirmations ------------------------------------------- */

.publier-avis .publier-avis__champ--erreur .publier-avis__input {
	border: 2px solid #C0392B;
}

.publier-avis .publier-avis__erreur {
	margin: .4rem 0 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #A5301F;
}

.publier-avis .publier-avis__message {
	margin: 0 0 1.5rem;
	padding: 1rem 1.2rem;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.5;
}

.publier-avis .publier-avis__message--ok {
	border: 2px solid #61CD81;
	background: #EAF8EE;
}

.publier-avis .publier-avis__message--erreur {
	border: 2px solid #C0392B;
	background: #FDF3F2;
	color: #A5301F;
}

/* Les messages de SPIP portent leur propre balisage (<b>, <p>…) : sans ceci,
   la règle universelle leur rendrait 18px et le bleu marine du site. */
.publier-avis .publier-avis__erreur *,
.publier-avis .publier-avis__message * {
	font-size: inherit;
	color: inherit;
}

/* --- Envoi -------------------------------------------------------------- */

.publier-avis .publier-avis__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin-top: .25rem;
}

/* Sur téléphone, le bouton occupe toute la largeur : c'est la cible la plus
   facile à atteindre du pouce, et son libellé ne se coupe pas. */
.publier-avis .publier-avis__actions .btn,
.publier-avis .publier-avis__previsu-actions .btn {
	width: 100%;
	justify-content: center;
	text-align: center;
}

/* Sous 400px, le rembourrage du site (19px 30px) coupait le libellé en deux. */
@media (max-width: 399px) {
	.publier-avis .publier-avis__actions .btn,
	.publier-avis .publier-avis__previsu-actions .btn {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media (min-width: 560px) {
	.publier-avis .publier-avis__actions .btn,
	.publier-avis .publier-avis__previsu-actions .btn {
		width: auto;
	}
}

.publier-avis .publier-avis__etape {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #4A5170;
}

/* --- Aperçu avant envoi (formulaires/inc-forum_previsu.html) ------------ */

.publier-avis .publier-avis__previsu {
	margin: 0 0 2rem;
	padding: 1.25rem;
	border: 2px solid #0A1339;
	border-radius: 12px;
	background: #fff;
}

@media (min-width: 768px) {
	.publier-avis .publier-avis__previsu {
		padding: 1.5rem 1.75rem;
	}
}

.publier-avis .publier-avis__previsu-titre {
	margin: 0 0 1rem;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.publier-avis .publier-avis__apercu {
	margin: 0 0 1.25rem;
	padding: 0 0 0 1rem;
	border-left: 3px solid #61CD81;
}

.publier-avis .publier-avis__apercu-auteur {
	margin: 0 0 .4rem;
	font-size: 16px;
	font-weight: 700;
}

/* Le texte de l'aperçu sort des traitements de #TEXTE : paragraphes, liens,
   longues chaînes. On le garde lisible et on l'empêche de déborder. */
.publier-avis .publier-avis__apercu-texte,
.publier-avis .publier-avis__apercu-texte * {
	font-size: 16px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.publier-avis .publier-avis__apercu-texte p {
	margin: 0 0 .6rem;
}

.publier-avis .publier-avis__previsu-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.5rem;
}

/* L'envoi définitif est l'action principale : le vert du site, comme les
   « Comparez maintenant ». Il faut (0,4,2) pour passer la règle qui teint en
   bleu marine tout « form button.btn[type=submit] ». */
.publier-avis form button.btn.publier-avis__publier[type=submit] {
	background-color: #61CD81;
	color: #0A1339 !important;
}

.publier-avis form button.btn.publier-avis__publier[type=submit]:hover {
	background-color: #FFB84E;
}

.publier-avis .publier-avis__modifier {
	font-size: 16px;
	font-weight: 700;
	color: #0A1339;
	text-decoration: underline;
}

.publier-avis .publier-avis__modifier:hover {
	color: #61CD81;
}