/*
Theme Name: Socle
Description: Thème enfant d'Ollie pour le site vitrine Socle (Médianes) — Full Site Editing, intégration de la maquette Figma « Médianes — socle ».
Author: Médianes
Author URI: https://medianes.org
Template: ollie
Version: 0.1.0
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: socle
Tags: full-site-editing, block-styles, translation-ready
*/

/*
 * Le système de design (couleurs, typographie, espacements, rayons, ombre)
 * est défini dans theme.json. Cette feuille ne contient que les styles de
 * composants non exprimables en theme.json : reset minimal (le style.css
 * d'Ollie est retiré), états contextuels, pictos des boutons, micro-layout.
 * Les valeurs proviennent de la maquette Figma (nœuds cités en commentaire) ;
 * les hypothèses hors maquette (survols, mobile) sont marquées HYPOTHÈSE.
 */

/* 0. Reset minimal + accessibilité ------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
figure {
	max-width: 100%;
	height: auto;
}

b,
strong {
	font-weight: 700;
}

input,
button,
textarea,
select {
	font: inherit;
}

/* Focus clavier visible partout (hypothèse : aucun état de focus dans Figma). */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu);
	outline-offset: 2px;
}

.has-quasi-noir-background-color :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--blanc);
}

/* 1. Header (Figma 13:1176 : 76 px, filet bas 1 px gris-04) ----------------- */

.socle-header > .wp-block-group {
	min-height: var(--wp--custom--header--hauteur);
}

.socle-header__logo img {
	display: block;
	width: 168px;
	height: auto;
}

.socle-nav .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--regulier); /* 24 + 27 + 24 = 75 (+ filet) */
}

.socle-nav .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset 0 calc(-1 * var(--wp--custom--header--soulignement)) 0 currentcolor;
}

/* HYPOTHÈSE survol : filet gris-04 sous l'entrée. */
.socle-nav .wp-block-navigation-item:not(.current-menu-item) > .wp-block-navigation-item__content:hover {
	box-shadow: inset 0 calc(-1 * var(--wp--custom--header--soulignement)) 0 var(--wp--preset--color--gris-04);
}

/* Sélecteur de langue Polyglotte (bloc `polyglotte/switcher`, style dropdown : <nav><details><summary>…).
   Rendu seulement quand une seconde langue est active ; picto « languages » avant, chevron après. */
.socle-lang .plgt-switcher__summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: var(--wp--preset--spacing--regulier);
	color: var(--wp--preset--color--quasi-noir);
	font-size: var(--wp--preset--font-size--courant);
	line-height: var(--wp--custom--line-height--corps);
	list-style: none;
	cursor: pointer;
}

.socle-lang .plgt-switcher__summary::-webkit-details-marker {
	display: none;
}

.socle-lang .plgt-switcher__summary::before,
.socle-lang .plgt-switcher__summary::after {
	content: "";
	display: inline-block;
	width: var(--wp--custom--bouton--icone);
	height: var(--wp--custom--bouton--icone);
	background-color: currentcolor;
	-webkit-mask: url(assets/icons/languages.svg) center / contain no-repeat;
	mask: url(assets/icons/languages.svg) center / contain no-repeat;
}

.socle-lang .plgt-switcher__summary::after {
	-webkit-mask-image: url(assets/icons/chevron-down.svg);
	mask-image: url(assets/icons/chevron-down.svg);
	transition: transform 0.15s ease;
}

.socle-lang .plgt-switcher__details[open] > .plgt-switcher__summary::after {
	transform: rotate(180deg);
}

.socle-lang .plgt-switcher__details {
	position: relative;
}

.socle-lang .plgt-switcher__list {
	position: absolute;
	inset-inline-end: 0;
	z-index: 20;
	min-width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--petit) 0;
	list-style: none;
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--gris-03);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--preset--shadow--carte);
}

.socle-lang .plgt-switcher__item {
	margin: 0;
}

.socle-lang .plgt-switcher__link {
	display: block;
	padding: var(--wp--preset--spacing--micro) var(--wp--preset--spacing--regulier);
	color: var(--wp--preset--color--quasi-noir);
	text-decoration: none;
	white-space: nowrap;
}

.socle-lang a.plgt-switcher__link:hover {
	text-decoration: underline;
}

/* Burger entre 600 et 781 px : le bloc Navigation ne bascule qu'à 600 px. */
@media (min-width: 600px) and (max-width: 781px) {

	.socle-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.socle-nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

/* Panneau mobile ouvert. */
.socle-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--petit);
	font-size: var(--wp--preset--font-size--sous-titre);
}

.socle-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: none;
	text-decoration: underline;
}

/* 2. Boutons (Figma 3:139 : pictos 24 px, gap 10) --------------------------- */

.wp-block-button__link {
	transition: filter 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

/* HYPOTHÈSE survols (aucun état dans Figma). */
.wp-block-button:not(.is-style-secondaire, .is-style-transparent) .wp-block-button__link:hover {
	filter: brightness(0.9);
}

.wp-block-button.is-style-secondaire .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--quasi-noir);
}

.wp-block-button.is-style-transparent .wp-block-button__link:hover {
	text-decoration: underline;
}

/* Pictos : classes additionnelles has-icon-* (+ has-icon-avant). */
.wp-block-button[class*="has-icon-"] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--bouton--gap-icone);
}

.wp-block-button[class*="has-icon-"] .wp-block-button__link::after {
	content: "";
	flex: none;
	width: var(--wp--custom--bouton--icone);
	height: var(--wp--custom--bouton--icone);
	background-color: currentcolor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.wp-block-button.has-icon-avant .wp-block-button__link::after {
	order: -1;
}

.wp-block-button.has-icon-arrow-up-right .wp-block-button__link::after {
	-webkit-mask-image: url(assets/icons/arrow-up-right.svg);
	mask-image: url(assets/icons/arrow-up-right.svg);
}

.wp-block-button.has-icon-arrow-right .wp-block-button__link::after {
	-webkit-mask-image: url(assets/icons/arrow-right.svg);
	mask-image: url(assets/icons/arrow-right.svg);
}

.wp-block-button.has-icon-arrow-left .wp-block-button__link::after {
	-webkit-mask-image: url(assets/icons/arrow-left.svg);
	mask-image: url(assets/icons/arrow-left.svg);
}

.wp-block-button.has-icon-plus .wp-block-button__link::after {
	-webkit-mask-image: url(assets/icons/plus.svg);
	mask-image: url(assets/icons/plus.svg);
}

.wp-block-button.has-icon-mail .wp-block-button__link::after {
	-webkit-mask-image: url(assets/icons/mail.svg);
	mask-image: url(assets/icons/mail.svg);
}

/* 3. Cartes et avantages (Figma bloc 13:818) -------------------------------- */

.socle-carte > .wp-block-buttons {
	margin-top: auto; /* bouton calé en bas, hauteurs alignées par la grille */
}

.socle-carte .wp-block-image img,
.socle-avantage .wp-block-image img,
.socle-logos-clients .wp-block-image img {
	width: 100%;
}

/* 4. Bande de visuels (Figma 6:657 : 4 × 385 × 216, gap 12) ----------------- */

.socle-bande {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.socle-bande::-webkit-scrollbar {
	display: none;
}

.socle-bande > .wp-block-image {
	flex: 0 0 385px;
	margin: 0;
	scroll-snap-align: start;
}

.socle-bande > .wp-block-image img {
	display: block;
	width: 100%;
	border-radius: 0;
}

/* 5. Tableau comparatif (Figma 13:1534 : 384 / 432 / 432) ------------------- */

.wp-block-table.is-style-comparatif table {
	min-width: var(--wp--custom--tableau--largeur-min-mobile);
	border-collapse: collapse;
}

.wp-block-table.is-style-comparatif thead,
.wp-block-table.is-style-comparatif tfoot {
	border: 0; /* le core pose un filet de 3 px sous thead */
}

.wp-block-table.is-style-comparatif th,
.wp-block-table.is-style-comparatif td {
	border: 1px solid var(--wp--preset--color--gris-03);
	padding: var(--wp--preset--spacing--regulier);
	text-align: left;
	vertical-align: top;
}

.wp-block-table.is-style-comparatif thead th {
	border-color: transparent;
	background: var(--wp--preset--color--gris-01);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--sous-titre);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--sous-titre);
}

.wp-block-table.is-style-comparatif thead th:first-child {
	width: var(--wp--custom--tableau--colonne-libelle);
}

.wp-block-table.is-style-comparatif tbody td:first-child {
	padding: var(--wp--preset--spacing--petit) var(--wp--preset--spacing--regulier);
	text-align: center;
	vertical-align: middle;
}

/* 6. Footer (Figma 13:1416) -------------------------------------------------- */

.socle-footer .wp-block-list {
	display: grid;
	gap: var(--wp--preset--spacing--petit);
	margin: 0;
	padding: 0;
	list-style: none;
}

.socle-footer .wp-block-list li {
	margin: 0;
}

.socle-footer .wp-block-list a {
	text-decoration: none;
}

.socle-footer .wp-block-list a:hover {
	text-decoration: underline;
}

.socle-footer img {
	display: block;
}

/* 7. Mobile (HYPOTHÈSE : aucune maquette mobile) ---------------------------- */

@media (max-width: 781px) {

	.socle-bande > .wp-block-image {
		flex-basis: min(385px, 80vw);
	}
}