/*
Theme Name: IDA-2027
Theme URI: https://idealternative.fr/
Author: Idéalternative
Author URI: https://idealternative.fr/
Description: Thème enfant de Twenty Twenty-Five, fidèle à la charte des extensions Idéalternative et conçu selon les exigences WCAG 2.2 AA / RGAA 4.1.
Template: twentytwentyfive
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.21.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ida-2027
Tags: block-patterns, block-styles, custom-colors, custom-logo, editor-style, full-site-editing, wide-blocks, accessibility-ready
*/

:root {
	--ida-radius-sm: 8px;
	--ida-radius: 12px;
	--ida-radius-lg: 16px;
	--ida-radius-pill: 999px;
	--ida-shadow: 0 1px 2px rgba(20, 12, 24, 0.05), 0 8px 20px rgba(20, 12, 24, 0.06);
	--ida-shadow-lg: 0 14px 34px rgba(20, 12, 24, 0.14);
	--ida-check-mark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

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

/* Le défilement animé n'est activé que si la personne ne demande pas moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Une ancre ne doit pas se retrouver sous l'en-tête collant. */
:target {
	scroll-margin-top: var(--wp--preset--spacing--50);
}

body {
	-webkit-font-smoothing: antialiased;
	font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	font-family: "American Typewriter ITC Pro", "American Typewriter", Georgia, serif;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.12;
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

body h1:not([class*="-font-size"]),
.editor-styles-wrapper h1:not([class*="-font-size"]) {
	font-size: clamp(45px, 6vw, 83px);
}

body h2:not([class*="-font-size"]),
.editor-styles-wrapper h2:not([class*="-font-size"]) {
	font-size: clamp(34px, 4vw, 59px);
}

body h3:not([class*="-font-size"]),
.editor-styles-wrapper h3:not([class*="-font-size"]) {
	font-size: clamp(19px, 1.5vw, 22px);
}

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

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

a:hover {
	text-decoration-thickness: 0.12em;
}

:where(a, button, summary, input, select, textarea, [tabindex], .wp-element-button, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
	box-shadow: 0 0 0 4px rgba(174, 81, 12, 0.28);
}

/*
 * Sur fond violet, l'orange reste au-dessus du seuil de WCAG 1.4.11 mais de peu
 * (3,21:1 sur violet, 3,52:1 sur violet foncé). L'accent clair porte la marge à
 * 7,12:1 : le focus reste franchement visible sur les bandeaux sombres.
 */
.has-violet-band-gradient-background :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.has-violet-background-color :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.has-violet-dark-background-color :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.ida-site-footer :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	box-shadow: 0 0 0 4px rgba(236, 147, 74, 0.3);
	outline-color: var(--wp--preset--color--orange-light);
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	left: 8px;
	padding: 12px 16px;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* En-tête et navigation. */
.ida-site-header {
	position: relative;
	z-index: 40;
	box-shadow: 0 1px 0 var(--ida-filet-entete, var(--wp--preset--color--line));
	padding-block: var(--wp--preset--spacing--30);
}

.ida-site-header .wp-block-site-logo img {
	border-radius: var(--ida-radius-sm);
}

.ida-site-header .wp-block-navigation-item__content {
	text-decoration: none;
}

.ida-site-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--violet);
}

.ida-site-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--violet);
	font-weight: 500;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--50);
}

/* Boutons de la charte. */
.wp-element-button,
.wp-block-button__link {
	box-shadow: 0 2px 0 var(--wp--preset--color--violet-dark), 0 8px 18px rgba(41, 20, 51, 0.3);
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background: var(--wp--preset--gradient--accent);
	box-shadow: 0 3px 0 var(--wp--preset--color--orange-dark), 0 10px 22px rgba(174, 81, 12, 0.34);
	color: var(--wp--preset--color--white);
	transform: translateY(-1px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	box-shadow: 0 1px 0 var(--wp--preset--color--orange-dark);
	transform: translateY(1px);
}

/*
 * Le halo de focus est déclaré plus haut avec :where() (spécificité nulle) :
 * les box-shadow de bouton ci-dessus l'emportaient et le supprimaient.
 * Cette règle, de spécificité réelle, le rétablit. A11Y-005.
 */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	box-shadow: 0 0 0 4px rgba(174, 81, 12, 0.28);
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
}

.has-violet-band-gradient-background .wp-element-button:focus-visible,
.has-violet-band-gradient-background .wp-block-button__link:focus-visible,
.has-violet-background-color .wp-element-button:focus-visible,
.has-violet-background-color .wp-block-button__link:focus-visible,
.has-violet-dark-background-color .wp-element-button:focus-visible,
.has-violet-dark-background-color .wp-block-button__link:focus-visible,
.ida-site-footer .wp-element-button:focus-visible,
.ida-site-footer .wp-block-button__link:focus-visible {
	box-shadow: 0 0 0 4px rgba(236, 147, 74, 0.3);
	outline-color: var(--wp--preset--color--orange-light);
}

.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--wp--preset--gradient--accent);
	box-shadow: 0 2px 0 var(--wp--preset--color--orange-dark), 0 8px 18px rgba(174, 81, 12, 0.34);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
	filter: brightness(1.04);
}

/*
 * La bordure est le seul indicateur visuel de la limite du bouton :
 * WCAG 1.4.11 impose 3:1. Beige sur blanc valait 1,52:1, lilas vaut 5,42:1.
 */
.wp-block-button.is-style-outline-ida .wp-block-button__link {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--lilas);
	box-shadow: none;
	color: var(--wp--preset--color--violet);
}

.wp-block-button.is-style-outline-ida .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--orange);
}

.wp-block-button.is-style-ghost-ida .wp-block-button__link {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.42);
	box-shadow: none;
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-ghost-ida .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--wp--preset--color--white);
}

/* Rythme de page.

   Ces classes portent l'espacement des sections. Elles existent pour que la
   valeur vive ici et non dans le balisage : une composition est recopiée dans
   la page au moment de l'insertion, donc tout ce que son balisage contient
   devient du contenu et échappe définitivement aux mises à jour du thème. Un
   nom de classe, lui, reste un renvoi — le changer ici met à jour toutes les
   pages déjà écrites, sans y toucher.

   Les noms disent le rôle et non la valeur : `ida-section` peut passer à un
   autre palier sans devenir un mensonge. */
.ida-section {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}

/* Section pleine largeur, sans gouttière : le contenu gère lui-même sa marge. */
.ida-section-flush {
	padding: var(--wp--preset--spacing--60) 0;
}

/* Détache un bloc de ce qui le précède. */
.ida-space-before {
	margin-top: var(--wp--preset--spacing--50);
}

/* Détache un bloc de ce qui le suit. Symétrique de `.ida-space-before`. */
.ida-space-after {
	margin-block-end: var(--wp--preset--spacing--50);
}

.ida-space-after--tight {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Crochets des gabarits et des parties.

   Ces fichiers-là ne sont pas recopiés dans le contenu : une mise à jour du
   thème les remplace. Mais la première modification depuis l'éditeur de site
   en crée une copie en base, qui masque le fichier de façon permanente — et
   gèlerait avec lui toute valeur restée dans son balisage. Un nom de classe
   continue, lui, de renvoyer ici. */

/* Jonction entre l'en-tête et le contenu.

   WordPress espace les blocs de premier niveau d'un gabarit du pas global, et
   un gabarit peut y ajouter le sien. Sous un en-tête blanc, cet écart découvre
   une bande claire au-dessus de la première section, quelle que soit sa
   couleur : le contenu doit reprendre au contact de l'en-tête.

   La règle vise le voisin immédiat de l'en-tête, donc tous les gabarits, y
   compris ceux qu'une modification depuis l'éditeur de site a recopiés en base.
   L'air propre aux pages titrées reste, lui, à l'intérieur du `<main>`. */
.wp-site-blocks > header + * {
	margin-block-start: 0;
}

/* Enveloppe `<main>` d'un gabarit. */
.ida-main {
	padding-block-end: var(--wp--preset--spacing--60);
}

/* Le palier de tête dit ce que la page montre en premier, mais il appartient au
   premier bloc et non au `<main>` qui le porte.

   Un bloc qui a son propre fond doit ouvrir la page au contact de l'en-tête :
   l'air qu'il lui faut, il le porte à l'intérieur. Un bloc sans fond, lui,
   reçoit ici de quoi se décoller du bandeau de navigation ; l'écart reste
   invisible puisque les deux surfaces sont blanches. */
.ida-main--document > :first-child:not(.has-background) {
	padding-block-start: var(--wp--preset--spacing--40);
}

.ida-main--list > :first-child:not(.has-background) {
	padding-block-start: var(--wp--preset--spacing--50);
}

.ida-main--message > :first-child:not(.has-background) {
	padding-block-start: var(--wp--preset--spacing--60);
}

/* Pied d'un document : le filet reste au balisage, ce n'est pas un espacement. */
.ida-post-footer {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
}

/* Image à la une d'un article. */
.ida-featured-image {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* Un commentaire dans la liste. */
.ida-comment {
	margin-block: var(--wp--preset--spacing--30);
}

/* Composants IDA disponibles comme styles de blocs. */
.ida-eyebrow {
	color: var(--wp--preset--color--orange);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.05em;
	margin-block-end: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.ida-on-dark .ida-eyebrow {
	color: var(--wp--preset--color--orange-light);
}

.ida-contact-cta {
	border-radius: var(--ida-radius-lg);
	overflow: hidden;
	padding: 0 var(--wp--preset--spacing--40);
}

.ida-contact-cta__columns {
	margin-bottom: 0;
	min-height: 430px;
}

.ida-contact-cta__copy {
	padding-block: var(--wp--preset--spacing--50);
}

.ida-contact-cta__copy > p:not(.ida-eyebrow) {
	color: #d8cfe0 !important;
	max-width: 680px;
}

.ida-contact-cta__promises {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin-block: var(--wp--preset--spacing--30);
	padding: 0;
}

/* La coche est purement décorative : elle est peinte par un masque et non par
   `content: "✓"`, qui serait restitué par les lecteurs d’écran avant chaque
   élément de liste (RGAA 10.1, aucune information portée par la CSS). */
.ida-contact-cta__promises li::before {
	background-color: var(--wp--preset--color--orange-light);
	content: "";
	display: inline-block;
	flex: none;
	height: 1em;
	margin-right: 8px;
	mask: var(--ida-check-mark) center / contain no-repeat;
	-webkit-mask: var(--ida-check-mark) center / contain no-repeat;
	vertical-align: -0.15em;
	width: 1em;
}

.ida-contact-cta__portrait-column {
	align-self: stretch !important;
	min-height: 430px;
	position: relative;
}

.ida-contact-portrait {
	bottom: 0;
	margin: 0;
	position: absolute;
	right: 0;
	width: min(100%, 310px);
}

.ida-contact-portrait img {
	display: block;
	filter: drop-shadow(0 18px 26px rgba(4, 1, 7, 0.38));
	height: auto;
	width: 100%;
}

.ida-contact-cta__identity {
	border-left: 4px solid var(--wp--preset--color--orange);
	border-radius: var(--ida-radius-sm);
	box-shadow: var(--ida-shadow-lg);
	left: auto;
	padding: 10px 13px;
	position: absolute;
	bottom: 56px;
	right: -20px;
	top: auto;
	z-index: 2;
}

.ida-contact-cta__identity p {
	color: var(--wp--preset--color--violet);
	font-size: 13px;
	line-height: 1.3;
	margin: 0;
}

/* Le nom, renseigné par liaison de bloc depuis les réglages du thème. */
.ida-contact-cta__identity p:first-child {
	font-weight: 700;
}

.ida-contact-cta__identity p + p {
	color: var(--wp--preset--color--lilas);
}

.ida-contact-cta__identity small {
	color: var(--wp--preset--color--lilas);
}

.ida-lead {
	color: #5a5560;
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.65;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Titre et chapô de l'introduction d'accueil. Le 1,125 rem reprend au pixel
   près le 18 px qui était écrit dans le balisage ; il ne figure pas sur
   l'échelle de tailles du thème (small 14, medium 16, large 19), écart signalé
   plutôt que corrigé d'autorité. En rem, la taille suit l'agrandissement du
   texte seul, ce que le pixel ne faisait pas. */
.ida-hero-title {
	margin-bottom: var(--wp--preset--spacing--30);
}

.ida-hero-lead {
	font-size: 1.125rem;
	line-height: 1.55;
	margin-bottom: var(--wp--preset--spacing--40);
}

.ida-card h3,
.wp-block-group.is-style-ida-card h3,
.wp-block-group.is-style-ida-card-accent h3 {
	font-size: clamp(19px, 1.5vw, 22px);
}

.ida-contact-cta h2 {
	font-size: clamp(32px, 3.8vw, 52px);
}

.ida-band {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.ida-band::after {
	background: radial-gradient(120% 140% at 100% 0%, rgba(174, 81, 12, 0.4), transparent 58%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Bandeau en bloc « Couverture » : une image de fond peut alors passer sous le
   dégradé, dont l'opacité reste réglable dans l'éditeur. Deux ajustements sont
   nécessaires. D'abord la gouttière : core impose « padding: 1em » avec la même
   spécificité que « .ida-section », on tranche par un sélecteur plus précis.
   Ensuite le halo : la couche de dégradé de core est un descendant positionné,
   elle recouvrirait un « ::after » en z-index négatif. Le halo est donc porté
   par cette couche, où il reste au-dessus du dégradé et sous le contenu. */
.wp-block-cover.ida-section {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}

.wp-block-cover.ida-band::after {
	content: none;
}

.wp-block-cover.ida-band .wp-block-cover__background::after {
	background: radial-gradient(120% 140% at 100% 0%, rgba(174, 81, 12, 0.4), transparent 58%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* Bandeau de tête d'un gabarit. `.ida-band` ne pose aucun retrait : ces deux
   paliers ne corrigent donc rien, ils l'établissent. */
.ida-band--header {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.ida-band--header-tall {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.ida-card,
.wp-block-group.is-style-ida-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ida-radius);
	box-shadow: var(--ida-shadow);
	/* min-height et non height : sous WCAG 1.4.12 (espacement du texte augmenté), une
	   hauteur fixe couplée à overflow:hidden tronquerait le contenu de la carte. */
	min-height: 100%;
	overflow: hidden;
	padding: var(--wp--preset--spacing--40);
	position: relative;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.ida-card:hover,
.wp-block-group.is-style-ida-card:hover {
	box-shadow: var(--ida-shadow-lg);
	transform: translateY(-3px);
}

.ida-card-accent,
.wp-block-group.is-style-ida-card-accent {
	border-left: 5px solid var(--wp--preset--color--orange);
}

/* Variantes de respiration des cartes.

   Elles sont écrites avec deux classes pour porter la même spécificité que
   `.wp-block-group.is-style-ida-card` ci-dessus : l'ordre du fichier tranche
   alors seul, et une carte reste prévisible même si le style de bloc « Carte
   IDA » lui est appliqué depuis l'éditeur. */
.ida-card.ida-icon-library-card {
	padding: var(--wp--preset--spacing--30);
}

.ida-card.ida-stat-card,
.ida-card.ida-approach-card {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

/* L'image à la une affleure les bords : la carte ne garde que son pied. */
.ida-card.ida-query-card {
	padding: 0 0 var(--wp--preset--spacing--30);
}

.ida-query-card__body {
	padding: 0 var(--wp--preset--spacing--30);
}

.wp-block-group.is-style-ida-section-violet {
	background: var(--wp--preset--gradient--violet-band);
	border-radius: var(--ida-radius-lg);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--50);
}

.wp-block-group.is-style-ida-section-violet :where(h2, h3, h4) {
	color: var(--wp--preset--color--white);
}

/* Variante « Parlons de votre projet » : la carte violette accueille le portrait,
   qui doit reposer sur son bord bas — d'où la suppression du seul padding bas. */
.wp-block-group.is-style-ida-section-violet.ida-project-cta {
	overflow: hidden;
	padding-bottom: 0;
}

.ida-project-cta__columns {
	margin-bottom: 0;
}

.ida-project-cta__copy {
	padding-bottom: var(--wp--preset--spacing--50);
}

.ida-project-cta__portrait {
	margin: 0 0 0 auto;
	width: min(100%, 260px);
}

.ida-project-cta__portrait img {
	display: block;
	filter: drop-shadow(0 18px 26px rgba(4, 1, 7, 0.38));
	height: auto;
	width: 100%;
}

.wp-block-group.is-style-ida-section-accent-soft {
	background: var(--wp--preset--color--orange-soft);
	border-left: 5px solid var(--wp--preset--color--orange);
	border-radius: var(--ida-radius);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-ida-section-framed {
	border: 1px solid var(--wp--preset--color--beige);
	border-radius: var(--ida-radius-lg);
	padding: var(--wp--preset--spacing--40);
}

.ida-trust-strip {
	padding: var(--wp--preset--spacing--30);
}

.ida-trust-item {
	align-items: center;
}

/* Pastille de couleur du guide de style. */
.ida-swatch {
	padding: var(--wp--preset--spacing--30);
}

.ida-trust-item :is(.ida-icon-block, .ida-pictogram) {
	flex: 0 0 48px;
	margin: 0;
	width: auto;
}

.ida-trust-item p {
	color: var(--wp--preset--color--violet);
	font-size: 14px;
	line-height: 1.35;
	margin: 0;
}

.ida-trust-item small {
	color: var(--wp--preset--color--lilas);
}

.ida-stat-card h3 {
	color: var(--wp--preset--color--orange);
	font-size: clamp(21px, 2vw, 28px);
	margin-bottom: 6px;
}

.ida-stat-card :is(.ida-icon-block, .ida-pictogram) {
	justify-content: center;
	margin-inline: auto;
}

.ida-stat-card p {
	color: var(--wp--preset--color--lilas);
	margin-bottom: 0;
}

.ida-testimonial {
	border-left: 5px solid var(--wp--preset--color--orange);
}

.ida-testimonial p {
	color: var(--wp--preset--color--violet);
	font-size: 18px;
}

.ida-testimonial cite {
	color: var(--wp--preset--color--lilas);
	font-size: 13px;
}

.ida-pricing-card {
	display: flex;
	flex-direction: column;
}

.ida-pricing-card .wp-block-buttons {
	margin-top: auto;
}

.ida-price {
	color: var(--wp--preset--color--orange);
	font-family: "American Typewriter ITC Pro", "American Typewriter", Georgia, serif;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 500;
}

/*
 * Région défilante : le conteneur reçoit tabindex="0" et role="region" côté
 * serveur (inc/blocks.php) pour rester atteignable au clavier — WCAG 2.1.1.
 */
.ida-comparison-table {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ida-radius);
	box-shadow: var(--ida-shadow);
	overflow-x: auto;
}

.ida-comparison-table:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
}

.ida-comparison-table table {
	min-width: 680px;
}

.ida-comparison-table thead {
	background: var(--wp--preset--color--violet);
	color: var(--wp--preset--color--white);
}

.ida-comparison-table th,
.ida-comparison-table td {
	padding: 14px 16px;
}

.ida-comparison-table td:nth-child(n + 2),
.ida-comparison-table th:nth-child(n + 2) {
	text-align: center;
}

/* Intitulés de ligne : th scope="row", donc alignés à gauche comme du texte. */
.ida-comparison-table tbody th {
	font-weight: 700;
	text-align: left;
}

.ida-icon-tile {
	align-items: center;
	background: var(--wp--preset--color--violet-soft);
	border-radius: var(--ida-radius-sm);
	color: var(--wp--preset--color--violet);
	display: inline-flex;
	font-size: 1.2rem;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.ida-media-placeholder {
	align-content: center;
	min-height: 340px;
	text-align: center;
}

.ida-icon-library-card p:last-child {
	margin-bottom: 0;
}

.ida-badge {
	border-radius: var(--ida-radius-pill);
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 11px;
}

.ida-badge-accent {
	background: var(--wp--preset--color--orange-soft);
	color: var(--wp--preset--color--orange-dark);
}

.ida-section-title {
	margin-bottom: var(--wp--preset--spacing--50);
}

.ida-section-title::after {
	background: var(--wp--preset--gradient--accent-bar);
	border-radius: 3px;
	content: "";
	display: block;
	height: 3px;
	margin-top: 10px;
	width: 46px;
}

.has-text-align-center.ida-section-title::after {
	margin-inline: auto;
}

/* Boucles, métadonnées et contenu éditorial. */
.ida-query-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 240ms ease;
}

.ida-query-card:hover .wp-block-post-featured-image img {
	transform: scale(1.025);
}

.ida-post-meta {
	color: var(--wp--preset--color--lilas);
	font-size: var(--wp--preset--font-size--small);
}

/* Sur la bande violette, le lilas ne donne que 3,42:1 : la méta bascule sur
   le beige (12,18:1) pour rester au-dessus de 4,5:1 (WCAG 1.4.3). */
.ida-on-dark .ida-post-meta {
	color: var(--wp--preset--color--beige);
}

.ida-comment-meta {
	align-items: baseline;
	color: var(--wp--preset--color--lilas);
	font-size: var(--wp--preset--font-size--small);
	gap: 4px 12px;
}

.wp-block-post-content :where(ul, ol) {
	padding-inline-start: 1.4em;
}

.wp-block-post-content :where(li + li) {
	margin-block-start: 0.45em;
}

.wp-block-quote {
	background: var(--wp--preset--color--violet-soft);
	border-radius: 0 var(--ida-radius) var(--ida-radius) 0;
	margin-inline: 0;
	padding: var(--wp--preset--spacing--30);
}

.wp-block-details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ida-radius);
	box-shadow: var(--ida-shadow);
	padding: 14px 18px;
}

.wp-block-details summary {
	color: var(--wp--preset--color--violet);
	cursor: pointer;
	font-weight: 500;
}

.wp-block-details[open] summary {
	margin-block-end: 12px;
}

/* ------------------------------------------------------------------
   Formulaires.
   Le thème ne fournit aucun formulaire : il prépare l’habillage des
   champs produits par l’extension de formulaire retenue, en visant
   RGAA 11 (étiquettes, champs obligatoires, erreurs) sans imposer de
   balisage. Les sélecteurs restent volontairement génériques.
   ------------------------------------------------------------------ */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea,
.wp-block-search__input {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--lilas);
	border-radius: var(--ida-radius-sm);
	color: var(--wp--preset--color--ink);
	font: inherit;
	max-width: 100%;
	padding: 10px 12px;
}

/* Une étiquette visible et persistante ; le placeholder ne remplace jamais
   l’étiquette (RGAA 11.1 et 11.2). */
form label,
.ida-form-field > label {
	display: block;
	font-weight: 500;
	margin-block-end: 6px;
}

form :where(label) input[type="checkbox"],
form :where(label) input[type="radio"] {
	margin-inline-end: 8px;
}

/* Cible d’activation d’au moins 24 × 24 px (WCAG 2.2, 2.5.8). */
input[type="checkbox"],
input[type="radio"] {
	block-size: 24px;
	inline-size: 24px;
}

fieldset {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ida-radius-sm);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
}

legend {
	font-weight: 600;
	padding-inline: 6px;
}

/* Marque de champ obligatoire : la couleur ne porte pas l’information,
   l’astérisque et la mention textuelle restent lisibles seules (RGAA 3.1). */
.ida-required,
form .required,
form abbr[title="required"],
form abbr[title="obligatoire"] {
	color: var(--wp--preset--color--orange-dark);
	font-weight: 700;
	text-decoration: none;
}

/* Texte d’aide, rattaché au champ par aria-describedby côté extension. */
.ida-form-help,
form .description {
	color: var(--wp--preset--color--lilas);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: 6px;
}

/* Erreurs : jamais :invalid, qui se déclenche avant toute saisie. Seul
   aria-invalid, posé par l’extension après validation, change l’aspect. */
[aria-invalid="true"] {
	border-color: var(--wp--preset--color--orange-dark);
	border-width: 2px;
}

.ida-form-error,
form .error,
form [role="alert"] {
	color: var(--wp--preset--color--orange-dark);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-block-start: 6px;
}

/* ------------------------------------------------------------------
   Pages légales.
   Ligne de lecture courte et interlignage aéré : ces pages sont longues
   et denses, et c’est le seul endroit du thème où l’on ajuste le confort
   de lecture plutôt que la mise en page.
   ------------------------------------------------------------------ */
.ida-legal-body {
	margin-top: var(--wp--preset--spacing--50);
}

.ida-legal-body :where(p, li) {
	line-height: 1.75;
}

.ida-legal-body :where(h2) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.ida-legal-body :where(h3) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Avertissement des trames : visible sans dépendre de la seule couleur. */
.ida-legal-notice {
	background: var(--wp--preset--color--orange-soft);
	border-left: 4px solid var(--wp--preset--color--orange);
	border-radius: 0 var(--ida-radius-sm) var(--ida-radius-sm) 0;
	padding: 14px 18px;
}

/* ------------------------------------------------------------------
   Fil d’Ariane.
   Rendu par [ida_fil_ariane] : un repère `nav` nommé, une liste
   ordonnée, la page courante marquée `aria-current` et non cliquable.
   Le chevron est décoratif ; l’ordre de la liste porte seul la
   hiérarchie.
   ------------------------------------------------------------------ */
.ida-breadcrumbs {
	margin-block: 0;
	padding-block: 12px;
}

.ida-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ida-fil-texte, var(--wp--preset--color--lilas));
	font-size: 14px;
}

.ida-breadcrumbs li + li::before {
	content: "›";
	margin-inline-end: 8px;
	color: inherit;
}

.ida-breadcrumbs a {
	color: inherit;
}

/* La page courante se distingue par la graisse, pas par la seule couleur. */
.ida-breadcrumbs [aria-current="page"] {
	color: var(--ida-fil-courant, var(--wp--preset--color--ink));
	font-weight: 600;
}

/* Fond de l’emplacement du fil.

   Le fil est le seul élément admis entre l’en-tête et le contenu. Pour ne pas
   rouvrir là la bande claire que la 1.19.1 vient de fermer, il reprend le fond
   du premier bloc de contenu et bascule avec lui ses couleurs de texte.

   Le premier bloc est reconnu à la classe que WordPress pose sur un fond de
   palette : la règle ne cite aucun nom de gabarit et vaut donc aussi pour une
   copie en base. Sans fond reconnu, aucune variable n’est définie et
   l’emplacement reste transparent, comme avant.

   Contrastes calculés sur la palette : beige sur le dégradé violet 12,2:1 et
   blanc 18,5:1 ; violet sur beige 11,8:1. Le lilas, lui, ne passe ni sur le
   violet (3,4:1) ni sur le beige (3,6:1) : d’où la bascule. */
.wp-site-blocks:has(> header + * > :first-child.has-violet-band-gradient-background) {
	--ida-fond-tete: var(--wp--preset--gradient--violet-band);
	--ida-fond-tete-lueur: radial-gradient(120% 140% at 100% 100%, rgba(174, 81, 12, 0.4), transparent 58%);
	--ida-fil-texte: var(--wp--preset--color--beige);
	--ida-fil-courant: var(--wp--preset--color--white);
	--ida-filet-entete: transparent;
}

.wp-site-blocks:has(> header + * > :first-child.has-violet-soft-background-color) {
	--ida-fond-tete: var(--wp--preset--color--violet-soft);
}

.wp-site-blocks:has(> header + * > :first-child.has-orange-soft-background-color) {
	--ida-fond-tete: var(--wp--preset--color--orange-soft);
}

.wp-site-blocks:has(> header + * > :first-child.has-beige-background-color) {
	--ida-fond-tete: var(--wp--preset--color--beige);
	--ida-fil-texte: var(--wp--preset--color--violet);
}

.ida-breadcrumbs-slot {
	background: var(--ida-fond-tete, transparent);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/* La lueur chaude de `.ida-band` naît de son coin haut droit et s’éteint vers
   la gauche. Reprise au coin bas droit de l’emplacement, avec le même rayon
   horizontal et les mêmes arrêts, elle présente à la jonction le même profil
   exactement : les deux boîtes se referment l’une sur l’autre sans marche. */
.ida-breadcrumbs-slot::after {
	background: var(--ida-fond-tete-lueur, none);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Forme du fond : le fil épouse le premier bloc de contenu.

   Quand ce bloc traverse la page, la bande la traverse avec lui. Quand il est
   en encart, la bande se referme sur la même largeur et prend sa gouttière :
   les deux ne font plus qu’un panneau, aux angles vifs comme le bloc. La forme
   ne se déclenche que sous un bloc qui porte un fond ; sans fond, il n’y a rien
   à épouser et le fil garde son alignement ordinaire. */
.wp-site-blocks:has(> header + * > :first-child.alignwide.has-background) .ida-breadcrumbs-slot,
.wp-site-blocks:has(> header + * > :first-child.alignwide.has-background) .ida-breadcrumbs-slot::after {
	background: none;
}

.wp-site-blocks:has(> header + * > :first-child.alignwide.has-background) .ida-breadcrumbs-slot > .alignwide {
	background: var(--ida-fond-tete, transparent);
	isolation: isolate;
	padding-inline: var(--wp--preset--spacing--40);
	position: relative;
}

.wp-site-blocks:has(> header + * > :first-child.alignwide.has-background) .ida-breadcrumbs-slot > .alignwide::after {
	background: var(--ida-fond-tete-lueur, none);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/*
 * L’emplacement du fil est posé une fois pour toutes dans l’en-tête, mais
 * [ida_fil_ariane] ne rend rien sur l’accueil ni là où le fil se réduirait à
 * un maillon. Le conteneur resté vide est alors retiré du flux.
 *
 * Le conteneur ne porte volontairement ni marge ni remplissage : là où `:has()`
 * manque, un emplacement vide n’occupe de toute façon aucune hauteur propre.
 */
.ida-breadcrumbs-slot:not(:has(.ida-breadcrumbs)) {
	display: none;
}

/* ------------------------------------------------------------------
   Lien d’évitement.
   WordPress insère lui-même le lien et sa feuille de style ; on se
   contente de l’aligner sur la charte sans toucher à son comportement.
   ------------------------------------------------------------------ */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--violet);
	border-radius: 0 0 var(--ida-radius-sm) 0;
	color: var(--wp--preset--color--white);
	outline: 2px solid var(--wp--preset--color--orange-light);
	outline-offset: 2px;
}

/* Pied de page. */
.ida-site-footer a {
	color: #d8cfe0;
}

.ida-site-footer a:hover {
	color: var(--wp--preset--color--white);
}

.ida-site-footer .wp-block-site-tagline {
	color: #b9aec2;
}

/* Recherche du pied de page : second système de navigation exigé par
   RGAA 12.1, avec étiquette visible. */
/* Respiration du pied de page. La variante minimale suit la règle générale et
   la corrige : à spécificité égale, l'ordre du fichier tranche. */
.ida-site-footer {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.ida-site-footer--minimal {
	padding-block: var(--wp--preset--spacing--40);
}

.ida-footer-search {
	margin-top: var(--wp--preset--spacing--40);
}

/* Slogan du site, sous le bloc identité. */
.ida-footer-tagline {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Filet qui sépare le corps du pied de page de sa ligne de mentions. */
.ida-footer-rule {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.ida-footer-search .wp-block-search__label {
	color: var(--wp--preset--color--white);
	display: block;
	font-weight: 500;
	margin-block-end: 8px;
}

.ida-footer-search .wp-block-search__inside-wrapper {
	gap: 8px;
}

.ida-footer-search .wp-block-search__input {
	border-color: var(--wp--preset--color--white);
	min-width: 0;
}

/* Bouton orange clair et non violet : sur le violet foncé du pied de page,
   un bouton violet ne se distinguerait pas du fond (1,10:1) alors que
   l’orange clair atteint 7,81:1, au-dessus du seuil de 3:1 de WCAG 1.4.11. */
.ida-footer-search .wp-block-search__button {
	background-color: var(--wp--preset--color--orange-light);
	color: var(--wp--preset--color--violet-dark);
}

.ida-footer-search .wp-block-search__button:hover,
.ida-footer-search .wp-block-search__button:focus {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--violet-dark);
}

@media (max-width: 781px) {
	.ida-desktop-cta {
		display: none;
	}

	.ida-site-header .wp-block-group.is-layout-flex {
		gap: 12px;
	}

	.ida-contact-cta {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.ida-contact-cta__columns {
		min-height: 0;
	}

	.ida-contact-cta__copy {
		padding-block: var(--wp--preset--spacing--40) 0;
	}

	.ida-contact-cta__portrait-column {
		min-height: 290px;
	}

	.ida-contact-portrait {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(100%, 223px);
	}

	.ida-contact-cta__identity {
		bottom: 34px;
		left: auto;
		right: 0;
		top: auto;
	}

	.ida-project-cta__copy {
		padding-bottom: 0;
	}

	.ida-project-cta__portrait {
		margin-inline: auto;
		width: min(100%, 190px);
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.ida-card:hover,
	.wp-block-group.is-style-ida-card:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.wp-element-button,
	.wp-block-button__link,
	.ida-card,
	.wp-block-group[class*="is-style-ida-"] {
		border: 1px solid CanvasText;
	}

	:focus-visible {
		outline: 3px solid Highlight !important;
	}

	/* Le masque n’est pas garanti en couleurs forcées : on repeint la coche
	   avec une couleur système, seule façon de rester visible dans ce mode. */
	.ida-contact-cta__promises li::before {
		background-color: CanvasText;
	}

	.ida-form-field label .ida-required,
	.ida-required {
		color: CanvasText;
	}

	[aria-invalid="true"] {
		outline: 2px solid CanvasText;
	}
}

@media print {
	.ida-site-header,
	.ida-site-footer,
	.ida-contact-cta,
	.ida-project-cta__portrait,
	.wp-block-navigation,
	.wp-block-buttons {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		break-after: avoid;
		color: #000 !important;
	}

	:where(p, li, figure, table) {
		break-inside: avoid;
	}

	.wp-block-post-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		overflow-wrap: anywhere;
	}
}