/* Pages fixes (includes/pages-fixes.php) et texte de présentation des pages
   de catégories : blocs de l'accueil (.og-accueil-bloc, .og-accueil-titre,
   .og-accueil-fond-creme, accueil.css), jetons de la charte (grilles.css). */

/* Texte courant : une colonne lisible, titres de la charte. */
.og-page-texte {
	max-width: 780px;
}

/* Bloc de page qui est aussi la colonne de texte : le bloc garde toute la
   largeur (sa marge latérale est la gouttière), ses enfants la largeur de
   lecture. */
.og-accueil-bloc.og-page-texte {
	max-width: none;
}

.og-accueil-bloc.og-page-texte > * {
	max-width: 780px;
}

.og-page-texte ul,
.og-page-texte ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.og-page-texte li + li {
	margin-top: 0.3em;
}

.og-page-texte table {
	width: 100%;
	margin: 0 0 1em;
	border-collapse: collapse;
}

.og-page-texte th,
.og-page-texte td {
	padding: 8px 10px;
	border: 1px solid var(--og-gris);
	text-align: left;
	vertical-align: top;
}

.og-page-texte img {
	max-width: 100%;
	height: auto;
}

.og-page-texte p {
	margin: 0 0 1em;
}

.og-page-texte p:last-child {
	margin-bottom: 0;
}

.og-page-texte a {
	color: var(--og-or);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.og-page-texte h2,
.og-page-texte h3 {
	margin: 1.4em 0 0.5em;
	color: var(--og-brun);
	font: 700 var(--og-taille-titre)/1.25 var(--og-police);
}

.og-page-texte h3 {
	font-size: var(--og-taille-xl);
}

.og-page-texte > .og-accueil-titre {
	margin-bottom: 20px;
}

.og-page-chapeau {
	font-size: var(--og-taille-xl);
}

/* Photo et texte côte à côte, la photo à droite pour « inverse ». */
.og-page-duo {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 48px;
	align-items: start;
}

.og-page-duo-inverse .og-page-duo-photo {
	order: 2;
}

.og-page-duo .og-page-texte {
	max-width: none;
}

.og-page-duo-photo {
	display: grid;
	gap: 20px;
	margin: 0;
}

.og-page-duo-photo figure {
	margin: 0;
}

.og-page-duo-photo img.og-accueil-image {
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: var(--og-arrondi);
}

.og-page-citation {
	margin: 0;
	padding: 16px 20px;
	border-left: 4px solid var(--og-or-clair);
	background: var(--og-blanc);
	font-style: italic;
}

/* Points de vente. */
.og-page-points {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px 32px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.og-page-points li {
	display: grid;
	padding: 12px 0;
	border-bottom: 1px solid var(--og-gris);
}

.og-page-points span {
	color: var(--og-gris-texte);
	font-size: var(--og-taille-m);
}

/* FAQ : questions repliables. */
.og-page-faq .og-accueil-titre {
	margin-bottom: 16px;
}

.og-page-question {
	border-bottom: 1px solid var(--og-gris);
}

.og-page-question summary {
	position: relative;
	padding: 16px 40px 16px 0;
	color: var(--og-brun);
	font: 600 var(--og-taille-l)/1.4 var(--og-police);
	list-style: none;
	cursor: pointer;
}

.og-page-question summary::-webkit-details-marker {
	display: none;
}

.og-page-question summary::after {
	content: "+";
	position: absolute;
	top: 12px;
	right: 8px;
	color: var(--og-or);
	font-size: var(--og-taille-titre);
}

.og-page-question[open] summary::after {
	content: "−";
}

.og-page-question .og-page-texte {
	padding: 0 0 20px;
}

/* Page en deux colonnes : contenu à gauche, encadré des coordonnées à
   droite (og_page_avec_coordonnees : Contact, FAQ). */
.og-page-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	gap: 56px;
	align-items: start;
}

.og-page-faq + .og-page-faq {
	margin-top: 48px;
}

.og-page-aparte {
	position: sticky;
	top: 24px;
	padding: 24px;
	border-radius: var(--og-arrondi);
	background: var(--og-creme);
}

.og-page-aparte-titre {
	margin: 0 0 16px;
	color: var(--og-brun);
	font: 700 var(--og-taille-xl)/1.3 var(--og-police);
}

/* Coordonnées (og_coordonnees) : pied de page et encadré. */
.og-coordonnees {
	font-style: normal;
}

.og-coordonnees ul {
	display: grid;
	gap: 14px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.og-coordonnees li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.og-coordonnees .og-accueil-icone,
.og-coordonnees-sans-icone {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.og-coordonnees-page {
	color: var(--og-texte);
	font: var(--og-taille-m)/1.5 var(--og-police);
}

.og-coordonnees-page .og-accueil-icone {
	color: var(--og-roue);
}

.og-coordonnees-page a {
	color: var(--og-texte);
}

.og-reseaux {
	display: flex;
	gap: 16px;
}

.og-reseaux a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--og-or);
	font: 600 var(--og-taille-m)/1.4 var(--og-police);
}

.og-reseaux .og-accueil-icone {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
}

/* Formulaire du site (contact) : composant commun .og-formulaire. */
.og-formulaire {
	display: grid;
	gap: 18px;
	max-width: 720px;
}

.og-formulaire p {
	display: grid;
	gap: 6px;
	margin: 0;
}

.og-formulaire label,
.og-page-woo form .form-row label {
	color: var(--og-brun);
	font: 600 var(--og-taille-m)/1.4 var(--og-police);
}

.og-formulaire input,
.og-formulaire textarea,
.og-page-woo :is(input.input-text, textarea, select, .select2-container .select2-selection--single),
body .og-page-woo form .form-row :is(input.input-text, textarea.input-text, select) {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--og-gris);
	border-radius: var(--og-arrondi);
	background: var(--og-blanc);
	color: var(--og-texte);
	font: 400 var(--og-taille-l)/1.4 var(--og-police-texte);
}

.og-formulaire input:focus,
.og-formulaire textarea:focus,
.og-page-woo :is(input.input-text, textarea, select):focus,
body .og-page-woo form .form-row :is(input.input-text, textarea.input-text, select):focus {
	outline: 2px solid var(--og-or-clair);
	outline-offset: 1px;
}

.og-formulaire-ligne {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.og-formulaire-piege {
	position: absolute;
	left: -9999px;
}

.og-formulaire-merci {
	padding: 16px 20px;
	border-left: 4px solid var(--og-vert);
	background: var(--og-vert-clair);
}

@media (max-width: 992px) {
	.og-page-duo,
	.og-page-colonnes {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.og-page-aparte {
		position: static;
	}

	.og-page-duo-inverse .og-page-duo-photo {
		order: 0;
	}

	.og-page-duo-photo img.og-accueil-image {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 576px) {
	.og-formulaire-ligne {
		grid-template-columns: minmax(0, 1fr);
	}
}