/**
 * Socle global.
 *
 * Tout ce qui est exprimable dans theme.json y est resté. Ce fichier ne
 * contient que le complément : détails d'interface, accessibilité et
 * comportements que le moteur de styles de WordPress ne génère pas.
 */

/* --------------------------------------------------------------------------
   1. Réglages de document
   -------------------------------------------------------------------------- */

/*
 * Reset de boîte, repris tel quel de la maquette (`* { box-sizing: border-box }`).
 * Sans lui, tout élément qui combine une largeur en pourcentage et un padding
 * — les champs de formulaire en premier — calcule une boîte plus large que
 * la maquette et déborde de son conteneur.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* L'en-tête est collant : on décale les ancres d'autant. */
	scroll-padding-top: 86px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/*
 * `overflow-x: hidden` sur le corps de page a l'air inoffensif : il fait en
 * réalité du corps un conteneur de défilement, ce qui empêche l'en-tête
 * collant de tenir en haut de l'écran. Les relevés de largeur montrent
 * qu'aucune page ne déborde de 320 à 1440 px : la garde n'a plus lieu d'être.
 */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   2. Accessibilité
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Sur fond sombre, le bleu ne ressort pas : on passe au ciel. */
:where(.has-contrast-background-color, .is-style-carte-sombre, .is-style-section-sombre)
	:where(a, button, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--ciel);
}

.skip-link:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 12px 20px;
	border-radius: var(--wp--custom--rayon--md);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. Rythme typographique
   -------------------------------------------------------------------------- */

/*
 * La maquette n'équilibre que deux titres : l'accroche du héros et celui de
 * la section « Votre projet ». Généraliser text-wrap changerait tous les
 * retours à la ligne du site par rapport à la maquette.
 */
.ipd-equilibre {
	text-wrap: balance;
}

/* Mesure de lecture imposée par la maquette sur certains paragraphes. */
.ipd-mesure-52 {
	max-width: 52ch;
}

.ipd-mesure-70 {
	max-width: 70ch;
	margin-inline: auto;
}

/* Les chiffres des statistiques doivent rester alignés pendant l'animation. */
.ipd-chiffre {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: clamp(26px, 2.8vw, 32px);
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Grilles natives (layout « grid » du bloc Groupe)
   -------------------------------------------------------------------------- */

/*
 * WordPress génère `grid-template-columns` et pose `container-type: inline-size`.
 * On complète seulement l'alignement vertical, non exposé par l'éditeur.
 */
.ipd-grille-centree > * {
	align-self: center;
}

.ipd-grille-etiree > * {
	align-self: stretch;
}

/* Une colonne visuelle peut devoir s'étirer dans une grille centrée. */
.ipd-grille-centree > .ipd-media-plein--haut {
	align-self: stretch;
}

/* --------------------------------------------------------------------------
   4 bis. Gouttières fluides
   -------------------------------------------------------------------------- */

/*
 * Les gouttières de la maquette sont des clamp(). Elles ne peuvent pas passer
 * par l'attribut blockGap d'un bloc : WordPress rejette toute valeur contenant
 * une parenthèse (wp-includes/block-supports/layout.php, « Skip if gap value
 * contains unsupported characters »), et retombe silencieusement sur la
 * gouttière globale. On les applique donc par classe, avec deux classes pour
 * passer devant « :root :where(.is-layout-grid) ».
 */
.wp-block-group.ipd-gouttiere--duo {
	gap: clamp(28px, 4vw, 52px);
}

.wp-block-group.ipd-gouttiere--cartes {
	gap: clamp(28px, 4vw, 48px);
}

.wp-block-group.ipd-gouttiere--newsletter {
	gap: clamp(28px, 4vw, 56px);
}

.wp-block-group.ipd-gouttiere--service {
	gap: clamp(20px, 3vw, 48px);
}

.wp-block-post-template.ipd-gouttiere--actus {
	gap: clamp(18px, 2.5vw, 28px);
}

.wp-block-group.ipd-gouttiere--partenaires {
	gap: 16px;
}

/* --------------------------------------------------------------------------
   5. Médias
   -------------------------------------------------------------------------- */

/*
 * Le navigateur applique « margin: 1em 40px » aux citations. Le thème pose
 * lui-même leurs marges : sans cette remise à zéro, chaque citation est
 * rentrée de 40 px et sa largeur — donc ses coupures de ligne — diffère de
 * la maquette.
 */
blockquote {
	margin-inline: 0;
}

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

/* Visuel qui remplit sa colonne : utilisé dans les héros à deux colonnes. */
/* Réservation du visuel, comme dans la maquette. */
.ipd-media-plein {
	background-color: #e8e8e6;
}

.ipd-media-plein img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   6. Apparition au défilement (progressive)
   -------------------------------------------------------------------------- */

/*
 * Sans JavaScript, rien n'est masqué : la classe `ipd-anime` n'agit que si le
 * script a marqué le document comme capable de l'animer.
 */
.ipd-js .ipd-anime {
	opacity: 0;
	transform: translateY(14px);
}

.ipd-js .ipd-anime.est-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.ipd-js .ipd-anime {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * Un bloc plus étroit que la colonne reçoit de WordPress des marges
 * automatiques, qui le centrent. La maquette ne centre que les blocs dont le
 * texte l'est aussi ; les autres restent calés à gauche.
 *
 * La marge gauche reprend le décalage qu'un bloc pleine largeur obtiendrait
 * du conteneur : le bloc s'aligne donc sur la colonne de contenu, et non sur
 * le bord de la marge interne.
 *
 * `!important` est ici obligatoire : la règle de mise en page contrainte du
 * cœur (`.is-layout-constrained > :where(…)`) déclare elle-même ses marges
 * automatiques en `!important`, et aucune spécificité ne suffit à l'écarter.
 */
[class*="ipd-mesure-"]:not(.has-text-align-center):not(.ipd-mesure--centre) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

.ipd-mesure-24 {
	max-width: 24ch;
}

.ipd-mesure-26 {
	max-width: 26ch;
}

.ipd-mesure-62 {
	max-width: 62ch;
}

.ipd-mesure-60 {
	max-width: 60ch;
}

/* Bloc d'introduction centré de la section stratégie (max-width 640 px). */
.ipd-mesure-640 {
	max-width: 640px;
	margin-inline: auto;
}

.ipd-mesure-34 {
	max-width: 34ch;
}

.ipd-mesure-80 {
	max-width: 80ch;
}

.ipd-mesure-64 {
	max-width: 64ch;
}

/*
 * La maquette ramène les passages en gras au quasi-noir : sans cela ils
 * héritent de la couleur atténuée du paragraphe qui les porte.
 */
:where(p, li) strong {
	color: var(--wp--preset--color--contrast);
}

/* Sur fond sombre, c'est le blanc qui reprend ce rôle. */
:is(.is-style-carte-sombre, .is-style-section-sombre, .has-contrast-background-color) :where(p, li) strong {
	color: var(--wp--preset--color--base);
}

/* Emphase colorée dans le texte courant, reprise de la maquette. */
.ipd-accent-plein {
	color: var(--wp--preset--color--primary-dark);
	font-style: italic;
}

/*
 * Le bandeau d'en-tête reste collé en haut : un lien d'ancre doit arrêter le
 * défilement en dessous, faute de quoi la cible passe sous le bandeau.
 */
:target {
	scroll-margin-top: 96px;
}

/*
 * Un élément collant ne peut tenir qu'à l'intérieur de son parent. Le bloc
 * « partie de modèle » produit une division qui fait exactement la hauteur de
 * l'en-tête : celui-ci n'avait donc aucune marge pour coller et disparaissait
 * au premier défilement. Cette division n'est qu'une enveloppe : on l'efface
 * de la mise en page.
 */
.wp-block-template-part {
	display: contents;
}