/*
Theme Name:   Ollie Child – Pour les médias
Theme URI:    https://pourlesmedias.org
Description:  Thème enfant d'Ollie pour pourlesmedias.org.
Author:       Medianes Studio
Author URI:   https://medianes.org
Template:     ollie
Version:      1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ollie-child
*/

/* ---------------------------------------------------------------
 * Typographie : variantes stylistiques des polices Polymath
 * ------------------------------------------------------------- */

.has-primary-font-family,
body .wp-site-blocks .site-footer {
	font-feature-settings: "ss06" 1;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.has-display-font-family,
.wp-element-button,
.wp-block-button__link {
	font-feature-settings: "ss09" 1, "ss06" 1;
}

/* ---------------------------------------------------------------
 * Boutons : même taille de texte partout (WordPress rend sinon
 * la taille fluide et le texte rétrécit sur mobile).
 * ------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	font-size: 1.125rem !important;
	font-weight: 600 !important;
}

/* ---------------------------------------------------------------
 * Boutons avec icône
 * ------------------------------------------------------------- */

.wp-block-button.is-style-arrow .wp-block-button__link,
.wp-block-button.is-style-mail .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button.is-style-arrow .wp-block-button__link {
	gap: 0.375rem;
}

.wp-block-button.is-style-mail .wp-block-button__link {
	gap: 0.75rem;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after,
.wp-block-button.is-style-mail .wp-block-button__link::before {
	content: "";
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--plm-icon) center / contain no-repeat;
	mask: var(--plm-icon) center / contain no-repeat;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
	--plm-icon: url("assets/icons/arrow.svg");
	width: 12px;
	height: 12px;
	margin: 6px;
}

.wp-block-button.is-style-mail .wp-block-button__link::before {
	--plm-icon: url("assets/icons/mail.svg");
	width: 22px;
	height: 20px;
}

/* ---------------------------------------------------------------
 * En-tête et pied de page
 * ------------------------------------------------------------- */

.site-logo img {
	display: block;
	height: auto;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
 * Mobile (maquette « Mobile », < 1280px côté Figma)
 * ------------------------------------------------------------- */

@media (max-width: 781px) {
	.site-header .site-logo img {
		width: 200px !important;
	}

	.site-footer .site-logo img {
		width: 200px !important;
	}

	.wp-element-button,
	.wp-block-button__link {
		padding: 0.75rem 1.5rem !important;
	}

	/* Sur mobile, le bouton Contact s'affiche sans icône. */
	.site-header .wp-block-button.is-style-mail .wp-block-button__link::before {
		display: none;
	}
}

/* Pas d'espace entre en-tête, contenu et pied de page. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
 * Formulaires Gravity Forms (maquette : champs violet pâle,
 * libellé flottant, bordure violette au focus, rouge en erreur)
 * ------------------------------------------------------------- */

/* Gravity Forms injecte ses propres variables par formulaire
 * (#gform_wrapper_N[data-form-index].gform-theme) : !important
 * est nécessaire pour que celles de la charte l'emportent. */
.gform-theme--framework {
	--gf-color-primary: #9b99ff !important;
	--gf-color-primary-rgb: 155, 153, 255 !important;
	--gf-color-primary-contrast: #0d0d0d !important;
	--gf-color-primary-darker: #7d7aff !important;
	--gf-color-primary-lighter: #c9c8fe !important;
	--gf-color-danger: #c4320a !important;
	--gf-ctrl-bg-color: #e6e6fc !important;
	--gf-ctrl-bg-color-hover: #e6e6fc !important;
	--gf-ctrl-bg-color-focus: #e6e6fc !important;
	--gf-ctrl-border-color: #e6e6fc !important;
	--gf-ctrl-border-color-focus: #7d7aff !important;
	--gf-ctrl-border-color-error: #c4320a !important;
	--gf-ctrl-shadow: none !important;
	--gf-ctrl-outline-color-focus: transparent !important;
	--gf-radius: 4px !important;
	--gf-ctrl-font-family: polymath-text, ui-sans-serif, system-ui, sans-serif !important;
	--gf-ctrl-font-size: 1.125rem !important;
	--gf-ctrl-color: #0d0d0d !important;
	--gf-ctrl-placeholder-color: #616161 !important;
	--gf-ctrl-label-color-primary: #616161 !important;
	--gf-ctrl-label-font-family-primary: polymath-text, ui-sans-serif, system-ui, sans-serif !important;
	--gf-ctrl-label-font-size-primary: 0.8125rem !important;
	--gf-ctrl-label-font-weight-primary: 400 !important;
	--gf-ctrl-label-color-secondary: #0d0d0d !important;
	--gf-ctrl-label-font-family-secondary: polymath-text, ui-sans-serif, system-ui, sans-serif !important;
	--gf-ctrl-label-font-size-secondary: 1.125rem !important;
	--gf-ctrl-desc-font-family: polymath-text, ui-sans-serif, system-ui, sans-serif !important;
	--gf-ctrl-desc-font-size: 0.9375rem !important;
	--gf-ctrl-desc-color: #616161 !important;
	--gf-ctrl-btn-font-family: polymath-display, ui-sans-serif, system-ui, sans-serif !important;
	--gf-ctrl-btn-font-size: 1.125rem !important;
	--gf-ctrl-btn-font-weight: 600 !important;
	--gf-ctrl-btn-radius: 40px !important;
	--gf-ctrl-btn-bg-color-primary: #9b99ff !important;
	--gf-ctrl-btn-bg-color-hover-primary: #c9c8fe !important;
	--gf-ctrl-btn-bg-color-focus-primary: #c9c8fe !important;
	--gf-ctrl-btn-color-primary: #0d0d0d !important;
	--gf-ctrl-btn-color-hover-primary: #0d0d0d !important;
	--gf-ctrl-btn-color-focus-primary: #0d0d0d !important;
	--gf-form-gap-y: 1.25rem !important;
	--gf-form-gap-x: 1.25rem !important;
}

/* Champs à libellé flottant : le libellé s'affiche en petit dans le champ
 * dès qu'il est rempli ou actif, sinon c'est le texte indicatif qui s'affiche. */
.plm-form_wrapper .gfield--type-text,
.plm-form_wrapper .gfield--type-email,
.plm-form_wrapper .gfield--type-phone,
.plm-form_wrapper .gfield--type-website,
.plm-form_wrapper .gfield--type-textarea {
	position: relative;
}

.plm-form_wrapper :is(.gfield--type-text, .gfield--type-email, .gfield--type-phone, .gfield--type-website, .gfield--type-textarea) > .gfield_label {
	position: absolute;
	top: 0.625rem;
	left: 1rem;
	z-index: 1;
	margin: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.plm-form_wrapper :is(.gfield--type-text, .gfield--type-email, .gfield--type-phone, .gfield--type-website, .gfield--type-textarea):has(:placeholder-shown):not(:focus-within) > .gfield_label {
	opacity: 0;
}

.plm-form_wrapper .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"]):not(.gf-telephone) {
	block-size: 3.75rem !important;
	padding: 1.5rem 1rem 0.5rem !important;
	border-width: 1px !important;
}

.plm-form_wrapper .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"]):not(.gf-telephone):placeholder-shown:not(:focus) {
	padding: 1rem !important;
}

.plm-form_wrapper .gfield textarea {
	min-block-size: 13rem !important;
	padding: 1.75rem 1rem 1rem !important;
	border-width: 1px !important;
	resize: vertical;
}

.plm-form_wrapper .gfield textarea:placeholder-shown:not(:focus) {
	padding-top: 1rem !important;
}

/* Téléphone international (extension « Telephone field for Gravity Forms ») :
 * libellé en petit en haut du champ, comme un champ rempli (le drapeau et
 * l'indicatif sont toujours affichés). La marge gauche du champ est calculée
 * par l'extension : ne pas la forcer. */
.plm-form_wrapper .gfield--type-telephone {
	position: relative;
}

.plm-form_wrapper .gfield--type-telephone > .gfield_label {
	position: absolute;
	top: 0.625rem;
	left: 1rem;
	z-index: 3;
	margin: 0;
	pointer-events: none;
}

.plm-form_wrapper .gfield--type-telephone .iti {
	display: block;
	width: 100%;
}

.plm-form_wrapper .gfield--type-telephone input.gf-telephone {
	inline-size: 100%;
	block-size: 3.75rem;
	padding-block: 1.5rem 0.5rem;
	padding-inline-end: 1rem;
	border: 1px solid #e6e6fc;
	border-radius: 4px;
	background-color: #e6e6fc;
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-size: 1.125rem;
	color: #0d0d0d;
}

.plm-form_wrapper .gfield--type-telephone input.gf-telephone::placeholder {
	color: #616161;
}

.plm-form_wrapper .gfield--type-telephone input.gf-telephone:focus {
	border-color: #7d7aff;
	outline: none;
}

.plm-form_wrapper .gfield--type-telephone.gfield_error input.gf-telephone {
	border-color: #c4320a;
	color: #c4320a;
}

.plm-form_wrapper .iti--separate-dial-code .iti__selected-flag {
	padding-inline: 1rem 0.5rem;
	padding-block-start: 1rem;
	background-color: transparent;
}

.plm-form_wrapper .iti--separate-dial-code .iti__selected-flag:hover,
.plm-form_wrapper .iti--separate-dial-code .iti__selected-flag:focus {
	background-color: #c9c8fe;
}

.plm-form_wrapper .iti__selected-dial-code {
	margin-inline-start: 0.375rem;
	color: #0d0d0d;
}

.plm-form_wrapper .iti__selected-dial-code,
.plm-form_wrapper .iti__country-list {
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
}

.plm-form_wrapper .iti__country-list {
	border-radius: 4px;
	border-color: #c9c8fe;
}

/* Erreur : bordure, libellé et saisie en rouge. */
.plm-form_wrapper .gfield_error :is(input, textarea) {
	border-color: #c4320a !important;
	color: #c4320a !important;
}

.plm-form_wrapper .gfield_error > .gfield_label {
	color: #c4320a !important;
	opacity: 1 !important;
}

.plm-form_wrapper .gfield_validation_message,
.plm-form_wrapper .gform_validation_errors {
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	color: #c4320a;
}

/* Le libellé masqué de la case de consentement reste lu par les lecteurs d'écran. */
.plm-form_wrapper .gfield--type-consent .gfield_consent_label {
	font-size: 1.125rem;
}

.gform_wrapper .gform_button,
.gform_wrapper .gform-button {
	font-feature-settings: "ss09" 1, "ss06" 1;
	padding: 1rem 2.5rem !important;
	block-size: auto !important;
	line-height: 1.45 !important;
}

@media (max-width: 781px) {
	.gform_wrapper .gform_button,
	.gform_wrapper .gform-button {
		padding: 0.75rem 1.5rem !important;
	}
}

.gform_wrapper a {
	text-decoration: underline;
}

.gform_required_legend:empty {
	display: none;
}

/* ---------------------------------------------------------------
 * Lisibilité des contenus
 * ------------------------------------------------------------- */

h1, h2, h3,
.wp-block-heading {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/* Les intertitres ouvrent une nouvelle section : plus d'air au-dessus. */
.wp-block-post-content > h2.wp-block-heading {
	margin-block-start: clamp(2.5rem, 6vw, 3.5rem);
	margin-block-end: 1rem;
}

.wp-block-post-content > h2.wp-block-heading + * {
	margin-block-start: 0;
}

.wp-block-post-title {
	margin-block-end: clamp(1.5rem, 4vw, 2rem);
}

@media (max-width: 600px) {
	/* Césure sur mobile pour éviter les grands blancs en fin de ligne. */
	.wp-block-post-content p,
	.wp-block-post-content li {
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	.wp-block-post-content > * + * {
		margin-block-start: 1.5rem;
	}
}


/* ---------------------------------------------------------------
 * Page d'atterrissage : sections pleine largeur et visuels à venir
 * ------------------------------------------------------------- */

.plm-landing > * + * {
	margin-block-start: 0;
}

.plm-landing > .alignfull + .alignfull {
	margin-block-start: 0;
}

.plm-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 14rem;
	padding: 1.5rem;
	border: 2px dashed #9b99ff;
	border-radius: 12px;
	background-color: #e6e6fc;
	color: #000052;
	text-align: center;
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.4;
}

.plm-placeholder > * {
	margin: 0 !important;
}

.plm-placeholder strong {
	font-family: polymath-display, ui-sans-serif, system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8125rem;
}

.plm-placeholder--portrait {
	aspect-ratio: 4 / 5;
	min-height: 0;
}

.plm-placeholder--square {
	aspect-ratio: 1;
	min-height: 0;
}

.plm-placeholder--landscape {
	aspect-ratio: 16 / 10;
	min-height: 0;
}

.plm-placeholder--icon {
	width: 4rem;
	height: 4rem;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	font-size: 0.75rem;
}

.plm-stat-number {
	font-family: polymath-display, ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	line-height: 1;
	font-feature-settings: "ss09" 1, "ss06" 1;
}

.plm-card {
	border-radius: 12px;
	height: 100%;
}

/* ---------------------------------------------------------------
 * Typographie : Loretta n'existe qu'en romain et italique.
 * Pas de faux gras : les mots en gras passent en Polymath Text.
 * ------------------------------------------------------------- */

body {
	font-synthesis-weight: none;
}

body :where(p, li, blockquote) :is(strong, b) {
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.95em;
	font-feature-settings: "ss06" 1;
}

/* Surtitre de section en capitales (maquette « Ce qui nous rassemble »). */
.plm-kicker {
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-feature-settings: "ss06" 1;
}

/* Liste d'intitulés suivis d'un texte (charte, convictions). */
.plm-items > h3.wp-block-heading {
	margin-block-start: 2rem;
	margin-block-end: 0.375rem;
}

.plm-items > h3.wp-block-heading:first-child {
	margin-block-start: 0;
}

.plm-items > h3.wp-block-heading + p {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
 * Textes administratifs (mentions légales, confidentialité) :
 * intertitres et texte en Polymath Text, introduction en Loretta.
 * ------------------------------------------------------------- */

.plm-legal :where(p, li) {
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-size: 1.125rem;
	line-height: 1.45;
	font-feature-settings: "ss06" 1;
}

.plm-legal p.plm-lead {
	font-family: loretta, Georgia, serif;
	font-size: var(--wp--preset--font-size--base);
	font-feature-settings: normal;
}

.plm-legal :where(p, li) :is(strong, b) {
	font-size: 1em;
}

.wp-block-post-content.plm-legal > * + * {
	margin-block-start: 1.45rem;
}

.wp-block-post-content.plm-legal > h2.wp-block-heading {
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.45;
	font-feature-settings: "ss06" 1;
	margin-block-start: 2.5rem;
	margin-block-end: 0;
}

.wp-block-post-content.plm-legal > h2.wp-block-heading + * {
	margin-block-start: 0.25rem;
}

/* Pictogrammes illustrés (aquarelle) de la page d'accueil. */
.plm-picto {
	margin: 0;
}

.plm-picto img {
	display: block;
	border-radius: 8px;
}

/* Hero de l'accueil : titre sur toute la largeur, texte à une largeur de lecture confortable. */
.plm-hero p {
	max-width: 46rem;
}

/* ---------------------------------------------------------------
 * Annuaire des membres
 * ------------------------------------------------------------- */

.plm-annuaire table {
	width: 100%;
	border-collapse: collapse;
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-size: 1.125rem;
	font-feature-settings: "ss06" 1;
}

.plm-annuaire thead th {
	padding: 0.75rem 1rem;
	border: 0;
	background-color: #e6e6fc;
	font-family: polymath-display, ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	text-align: left;
}

.plm-annuaire thead th:first-child {
	border-top-left-radius: 4px;
}

.plm-annuaire thead th:last-child {
	border-top-right-radius: 4px;
}

.plm-annuaire tbody td {
	padding: 0.75rem 1rem;
	border: 0;
	border-bottom: 1px solid #e6e6fc;
	vertical-align: top;
}

.plm-annuaire figcaption {
	margin-top: 0.75rem;
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-size: 0.9375rem;
	color: #616161;
	text-align: left;
}

@media (max-width: 600px) {
	.plm-annuaire table {
		font-size: 1rem;
	}

	.plm-annuaire :is(th, td) {
		padding: 0.625rem 0.5rem;
	}
}

/* Style « Note » de la maquette (Polymath Text 15 px). */
.plm-note {
	font-family: polymath-text, ui-sans-serif, system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.2;
	font-feature-settings: "ss06" 1;
}

/* Mention de crédit : dernière ligne du pied de page, sur toute la largeur. */
.site-footer .plm-footer-credit {
	flex-basis: 100%;
	margin-block-start: 0;
	color: #4d4d59;
}

.site-footer .plm-footer-credit a {
	color: inherit;
	text-decoration: underline;
}