@charset 'utf-8';/**
 * Page Vos souvenirs — refonte 2026
 * Complete page_recit.css (habillage, formulaire, mois repliables) :
 * cartes des souvenirs, reponses, filtres. Couleurs de _charte.css.
 */

/** ------------------------------------------------------------ barre et filtres */

html:has(#_str.recit) #_str.recit .sv_intro {
	margin:0 0 24px;
}

html:has(#_str.recit) #_str.recit .sv_barre {
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	align-items:center;
	justify-content:space-between;
	margin:0 0 28px;
}

html:has(#_str.recit) #_str.recit .sv_filtres {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

html:has(#_str.recit) #_str.recit .sv_filtre {
	font:inherit;
	font-size:15px;
	min-height:44px;
	padding:0 18px;
	border:1px solid var(--pierre);
	border-radius:999px;
	background:transparent;
	color:var(--suie);
	cursor:pointer;
}

html:has(#_str.recit) #_str.recit .sv_filtre.actif {
	background:var(--suie);
	border-color:var(--suie);
	color:var(--panneau);
	font-weight:700;
}

html:has(#_str.recit) #_str.recit .sv_partager {
	display:inline-flex;
	align-items:center;
	min-height:44px;
	padding:0 22px;
	border-radius:8px;
	background:var(--braise);
	color:#fff;
	font-weight:700;
	text-decoration:none;
}

html:has(#_str.recit) #_str.recit .sv_partager:hover {
	background:#8E3216;
}

/** ------------------------------------------------------------ mois */

html:has(#_str.recit) #_str.recit .sv_mois {
	margin:0 0 24px;
}

html:has(#_str.recit) #_str.recit .sv_mois_titre {
	margin:0 0 18px;
}

html:has(#_str.recit) #_str.recit details.sv_mois > .sv_grille {
	padding:10px 0 20px;
}

html:has(#_str.recit) #_str.recit .sv_masque {
	display:none !important;
}

/** ------------------------------------------------------------ cartes */

html:has(#_str.recit) #_str.recit .sv_grille {
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:24px;
	align-items:start;
}

html:has(#_str.recit) #_str.recit .sv_carte {
	background:#fff;
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 1px 2px rgba(42,33,26,.08), 0 6px 18px rgba(42,33,26,.05);
}

html:has(#_str.recit) #_str.recit .sv_carte.sv_sans_photo {
	background:var(--calcaire);
	box-shadow:none;
}

html:has(#_str.recit) #_str.recit .sv_corps {
	padding:20px 22px 22px;
}

html:has(#_str.recit) #_str.recit .sv_sans_photo .sv_corps::before {
	content:"\201C";
	display:block;
	font-family:var(--display);
	font-size:56px;
	line-height:.6;
	color:var(--braise);
	margin:6px 0 10px;
}

html:has(#_str.recit) #_str.recit .sv_texte {
	margin:0 0 12px;
	font-family:var(--display);
	font-size:19px;
	line-height:1.45;
	color:var(--suie);
}

html:has(#_str.recit) #_str.recit .sv_meta {
	margin:0;
	font-size:14px;
	color:var(--lauze);
}

html:has(#_str.recit) #_str.recit .sv_meta strong {
	color:var(--suie-clair);
}

/* photos : une grande, les suivantes en vignettes */
html:has(#_str.recit) #_str.recit .sv_photos {
	display:grid;
	gap:3px;
	grid-template-columns:repeat(2, minmax(0, 1fr));
}

html:has(#_str.recit) #_str.recit .sv_photos_1 {
	grid-template-columns:1fr;
}

html:has(#_str.recit) #_str.recit .sv_photo {
	display:block;
	aspect-ratio:4 / 3;
	overflow:hidden;
}

html:has(#_str.recit) #_str.recit .sv_photos .sv_photo_1 {
	grid-column:1 / -1;
}

html:has(#_str.recit) #_str.recit .sv_photos_2 .sv_photo:not(.sv_photo_1) {
	grid-column:1 / -1;
	aspect-ratio:16 / 7;
}

html:has(#_str.recit) #_str.recit .sv_photo img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/** ------------------------------------------------------------ a la une */

html:has(#_str.recit) #_str.recit .sv_une_wrap {
	margin:0 0 36px;
}

html:has(#_str.recit) #_str.recit .sv_une.sv_avec_photo {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
}

html:has(#_str.recit) #_str.recit .sv_une .sv_corps {
	padding:36px 40px;
	align-self:center;
}

html:has(#_str.recit) #_str.recit .sv_une .sv_texte {
	font-size:25px;
	font-style:italic;
}

html:has(#_str.recit) #_str.recit .sv_une .sv_photos {
	height:100%;
}

html:has(#_str.recit) #_str.recit .sv_une .sv_photo_1 {
	aspect-ratio:auto;
	min-height:340px;
	height:100%;
}

html:has(#_str.recit) #_str.recit .sv_badge_une {
	display:inline-block;
	margin:0 0 14px;
	padding:5px 10px;
	border-radius:6px;
	background:#F6E7C8;
	color:#7A4E0B;
	font-size:12px;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
}

/** ------------------------------------------------------------ reponses */

html:has(#_str.recit) #_str.recit .sv_fil {
	margin:16px 0 0;
	padding:14px 0 0;
	border-top:1px solid rgba(42,33,26,.12);
}

html:has(#_str.recit) #_str.recit .sv_reponse {
	display:flex;
	gap:10px;
	align-items:flex-start;
	margin:0 0 12px;
}

html:has(#_str.recit) #_str.recit .sv_avatar {
	flex-shrink:0;
	width:30px;
	height:30px;
	border-radius:999px;
	background:#D9C9A8;
	color:var(--suie-clair);
	font-weight:700;
	font-size:13px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-transform:uppercase;
}

html:has(#_str.recit) #_str.recit .sv_reponse_famille .sv_avatar {
	background:#4C6B2F;
	color:#fff;
}

html:has(#_str.recit) #_str.recit .sv_reponse p {
	margin:0;
}

html:has(#_str.recit) #_str.recit .sv_reponse_meta {
	font-size:13px;
	color:var(--lauze);
}

html:has(#_str.recit) #_str.recit .sv_reponse_meta strong {
	color:var(--suie-clair);
}

html:has(#_str.recit) #_str.recit .sv_reponse_texte {
	font-size:15px;
	line-height:1.45;
	color:var(--suie);
}

html:has(#_str.recit) #_str.recit .sv_badge_famille {
	display:inline-block;
	padding:1px 6px;
	border-radius:4px;
	background:#4C6B2F;
	color:#fff;
	font-size:11px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
}

html:has(#_str.recit) #_str.recit .sv_pied {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:8px;
}

html:has(#_str.recit) #_str.recit .sv_compte {
	font-size:13px;
	color:var(--lauze);
}

html:has(#_str.recit) #_str.recit .sv_repondre {
	font:inherit;
	font-size:14px;
	font-weight:700;
	min-height:40px;
	padding:0 14px;
	border:1px solid var(--braise);
	border-radius:8px;
	background:transparent;
	color:#A3301A;
	cursor:pointer;
}

/* formulaire de reponse, place sous la carte choisie */
html:has(#_str.recit) #_str.recit .sv_rep_form {
	margin:14px 0 0;
	padding:14px;
	border-radius:10px;
	background:var(--panneau);
	display:flex;
	flex-direction:column;
	gap:10px;
}

html:has(#_str.recit) #_str.recit .sv_rep_form[hidden] {
	display:none;
}

html:has(#_str.recit) #_str.recit .sv_rep_form p {
	margin:0;
	font-size:14px;
}

html:has(#_str.recit) #_str.recit .sv_rep_titre {
	font-weight:700;
}

html:has(#_str.recit) #_str.recit .sv_rep_form label {
	display:block;
	font-weight:700;
	font-size:13px;
	margin:0 0 4px;
}

html:has(#_str.recit) #_str.recit .sv_rep_form input[type=text],
html:has(#_str.recit) #_str.recit .sv_rep_form textarea {
	width:100%;
	box-sizing:border-box;
	font:inherit;
	font-size:16px;
	padding:10px 12px;
	border:1px solid var(--pierre);
	border-radius:8px;
	background:#fff;
	color:var(--suie);
}

html:has(#_str.recit) #_str.recit .sv_rep_form .err_required {
	border-color:var(--braise);
}

html:has(#_str.recit) #_str.recit .sv_rep_actions {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}

html:has(#_str.recit) #_str.recit .sv_rep_envoyer,
html:has(#_str.recit) #_str.recit .sv_rep_annuler {
	font:inherit;
	font-size:15px;
	font-weight:700;
	min-height:44px;
	padding:0 18px;
	border-radius:8px;
	cursor:pointer;
}

html:has(#_str.recit) #_str.recit .sv_rep_envoyer {
	border:0;
	background:var(--braise);
	color:#fff;
}

html:has(#_str.recit) #_str.recit .sv_rep_annuler {
	border:1px solid var(--pierre);
	background:transparent;
	color:var(--suie);
}

html:has(#_str.recit) #_str.recit .sv_rep_message.ok {
	color:#3E5A22;
	font-weight:700;
}

html:has(#_str.recit) #_str.recit .sv_rep_message.ko {
	color:#A3301A;
	font-weight:700;
}

/** ------------------------------------------------------------ depot */

html:has(#_str.recit) #_str.recit .sv_appel {
	margin:0 0 24px;
}

html:has(#_str.recit) #_str.recit #souvenirs_form textarea,
html:has(#_str.recit) #_str.recit #souvenirs_form select {
	width:100%;
	box-sizing:border-box;
	font:inherit;
}

html:has(#_str.recit) #_str.recit .sv_apercu {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	margin:8px 0 0;
}

html:has(#_str.recit) #_str.recit .sv_apercu img {
	width:96px;
	height:72px;
	object-fit:cover;
	border-radius:6px;
}

html:has(#_str.recit) #_str.recit .sv_accord {
	display:flex;
	gap:10px;
	align-items:flex-start;
	font-weight:400;
	line-height:1.45;
}

html:has(#_str.recit) #_str.recit .sv_accord input {
	width:22px;
	height:22px;
	margin:0;
	flex-shrink:0;
	accent-color:var(--braise);
}

html:has(#_str.recit) #_str.recit .err_accord .sv_accord {
	color:#A3301A;
}

html:has(#_str.recit) #_str.recit .sv_vide,
html:has(#_str.recit) #_str.recit .sv_ferme {
	padding:24px;
	border-radius:12px;
	background:var(--calcaire);
	text-align:center;
}

/** ------------------------------------------------------------ ecrans etroits */

@media screen and (max-width:900px) {

	html:has(#_str.recit) #_str.recit .sv_grille {
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}

	html:has(#_str.recit) #_str.recit .sv_une.sv_avec_photo {
		grid-template-columns:1fr;
	}

	html:has(#_str.recit) #_str.recit .sv_une .sv_photo_1 {
		min-height:0;
		aspect-ratio:4 / 3;
	}

	html:has(#_str.recit) #_str.recit .sv_une .sv_corps {
		padding:22px;
	}

}

@media screen and (max-width:600px) {

	html:has(#_str.recit) #_str.recit .sv_grille {
		grid-template-columns:1fr;
	}

	html:has(#_str.recit) #_str.recit .sv_une .sv_texte {
		font-size:20px;
	}

	html:has(#_str.recit) #_str.recit .sv_partager {
		width:100%;
		justify-content:center;
	}

}

/* la feuille generale (_body) impose a tous les <button> un texte blanc, une ombre
   et un fond gris au survol, en !important : on reprend la main sur nos boutons */
html:has(#_str.recit) #_str.recit .sv_filtre,
html:has(#_str.recit) #_str.recit .sv_rep_annuler {
	color:var(--suie) !important;
	box-shadow:none;
}
html:has(#_str.recit) #_str.recit .sv_filtre.actif {
	color:var(--panneau) !important;
}
html:has(#_str.recit) #_str.recit .sv_repondre {
	color:#A3301A !important;
	box-shadow:none;
}
html:has(#_str.recit) #_str.recit .sv_rep_envoyer {
	color:#fff !important;
	box-shadow:none;
}
html:has(#_str.recit) #_str.recit .sv_filtre:hover,
html:has(#_str.recit) #_str.recit .sv_repondre:hover,
html:has(#_str.recit) #_str.recit .sv_rep_annuler:hover {
	background-color:rgba(42,33,26,.07) !important;
}
html:has(#_str.recit) #_str.recit .sv_filtre.actif:hover {
	background-color:var(--suie) !important;
}
html:has(#_str.recit) #_str.recit .sv_rep_envoyer:hover {
	background-color:var(--braise) !important;
	filter:brightness(.92);
}

/** ------------------------------------------------- bouton flottant « Partager » */

/* _body.css met un transform sur #_str (astuce anti-saccades) : un element fixe
   s'y accrocherait au lieu de l'ecran. On l'enleve sur cette page seulement. */
html:has(#souvenirs_mur) #_str {
	-webkit-transform:none;
	transform:none;
}

html:has(#_str.recit) #_str.recit .sv_flottant {
	position:fixed;
	right:20px;
	bottom:calc(20px + env(safe-area-inset-bottom, 0px));
	z-index:35;
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:48px;
	padding:0 22px;
	border-radius:999px;
	background:var(--braise);
	color:#fff !important;
	font-weight:700;
	text-decoration:none;
	box-shadow:0 6px 20px rgba(42,33,26,.28);
	opacity:0;
	visibility:hidden;
	transition:opacity .45s ease, visibility .45s, bottom .28s ease;
}

html:has(#_str.recit) #_str.recit .sv_flottant::before {
	content:"+";
	font-size:20px;
	line-height:1;
}

html:has(#_str.recit) #_str.recit .sv_flottant.visible {
	opacity:1;
	visibility:visible;
}

html:has(#_str.recit) #_str.recit .sv_flottant:hover {
	background:#8E3216;
}

/* telephone : au-dessus de la barre d'appel, centre ; descend quand la barre se cache */
@media screen and (max-width:760px) {
	html:has(#_str.recit) #_str.recit .sv_flottant {
		left:50%;
		right:auto;
		bottom:calc(76px + env(safe-area-inset-bottom, 0px));
		transform:translateX(-50%);
		white-space:nowrap;
	}
	html.barre_tel_cachee:has(#_str.recit) #_str.recit .sv_flottant {
		bottom:calc(16px + env(safe-area-inset-bottom, 0px));
	}
}

/* clic sur « Partager » : la page s'efface puis reapparait sur le formulaire */
html:has(#souvenirs_mur) #_str {
	transition:opacity .28s ease;
}

html:has(#souvenirs_mur) #_str.sv_fondu {
	opacity:0;
}

@media (prefers-reduced-motion:reduce) {
	html:has(#_str.recit) #_str.recit .sv_flottant {
		transition:none;
	}
}