/*
 * Acordia — Layout & Gutenberg structural fixes
 *
 * Single-file CSS, ecrit a la main, zero build step, zero framework.
 *
 * Principe :
 *   - Tokens design (couleurs, typo, spacing) vivent dans theme.json (SSOT
 *     derive de theme/src/design-tokens.css via sync-theme-from-tokens.js).
 *   - WordPress genere les utilities has-*-color / has-*-font-size / les
 *     custom properties --wp--preset--* automatiquement a partir de
 *     theme.json. Les patterns consomment ces slugs via les attributs natifs
 *     (backgroundColor, textColor, fontSize, fontFamily, style.spacing).
 *   - Ce fichier ne contient QUE des regles structurelles Gutenberg non
 *     couvertes par theme.json (fixes cascade, dimensions par defaut des
 *     blocs natifs, etat actif navigation).
 *
 * Regle absolue : zero `!important`. Specificite plate (1 classe ou 1 element
 * + pseudo-classe max). Si un conflit de cascade apparait, diagnostiquer la
 * source (editor styles, block supports, plugin tiers) au lieu de patcher.
 *
 * Ce fichier est charge via wp_enqueue_style() ET add_editor_style() pour
 * garantir Back = Front (cf. theme/functions.php).
 */

/* ==========================================================================
   STACKING — flush vertical entre blocs top-level
   Supprime l'espacement par defaut que WP ajoute entre frere-du-site, pour
   laisser les patterns gerer leur propre padding vertical (section-py).
   ========================================================================== */

.wp-site-blocks > * + * { margin-block-start: 0; }
.is-layout-constrained > .alignfull + .alignfull { margin-block-start: 0; }

/* ==========================================================================
   SEPARATOR — largeur 60px par defaut, full width via is-style-wide
   ========================================================================== */

.wp-block-separator:not(.is-style-wide) { width: 60px; max-width: 60px; }
.wp-block-separator.is-style-wide { width: 100%; max-width: 100%; }
.is-content-justification-center > .wp-block-separator { margin-inline: auto; }

/* ==========================================================================
   NAVIGATION — etat actif
   Hover gere dans theme.json > styles.elements.link.
   ========================================================================== */

.wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--primary); }

/* ==========================================================================
   COLUMNS — egaliser la hauteur des cards imbriquees
   ========================================================================== */

.wp-block-columns > .wp-block-column { display: flex; flex-direction: column; }
.wp-block-columns > .wp-block-column > .wp-block-group { flex: 1; }

/* ==========================================================================
   NAVIGATION OFF-CANVAS — overrides projet
   Surcharge les variables exposees par le mu-plugin acordia-navigation.
   Decommenter les lignes utiles, supprimer les autres.
   Doc complete : wp-content/mu-plugins/acordia-navigation/README.md
   ========================================================================== */

/*
.acordia-nav-offcanvas {
	--acordia-nav-offcanvas-bg:      var(--wp--preset--color--bg-dark);
	--acordia-nav-offcanvas-color:   var(--wp--preset--color--text-white);
	--acordia-nav-offcanvas-overlay: rgba(0, 0, 0, .7);
	--acordia-nav-offcanvas-width:   min(480px, 90vw);
}
*/

/* === Accueil — structurel === */

/* NAV — surcharge des variables du mu-plugin acordia-navigation pour le theme sombre.
   Vars posees sur les elements cibles (pas :root) : une declaration propre bat
   la valeur heritee du :root du plugin, quel que soit l'ordre de chargement. */
.acordia-nav {
	--acordia-nav-link-color:       var(--wp--preset--color--cream);
	--acordia-nav-link-color-hover: var(--wp--preset--color--primary);
	--acordia-nav-link-size:        var(--wp--preset--font-size--sm);
	--acordia-nav-link-weight:      500;
	--acordia-nav-link-transform:   none;
	--acordia-nav-link-spacing:     0;
	--acordia-nav-burger-color:     var(--wp--preset--color--cream);
}
/* MENU MOBILE — overlay PLEIN ECRAN (maquette client Figma 2178:1995), en lieu
   et place du drawer lateral par defaut du mu-plugin.

   Tout se joue en surcharge CSS depuis le theme : navigation.css vit dans
   `@layer acordia-nav`, layout.css est hors-layer -> nos regles gagnent a
   specificite egale, sans !important. Le mu-plugin (JS, clonage du menu,
   focus trap, Escape, scroll lock) n'est pas touche, et parts/header.html non
   plus -> aucun sync de template-part en BDD. */
.acordia-nav-offcanvas {
	--acordia-nav-offcanvas-bg:             var(--wp--preset--color--bg-footer); /* #303326 maquette */
	--acordia-nav-offcanvas-color:          var(--wp--preset--color--cream);
	--acordia-nav-offcanvas-overlay:        rgba(0, 0, 0, .6);
	--acordia-nav-offcanvas-link-transform: none;
	--acordia-nav-offcanvas-link-weight:    600; /* SemiBold maquette */
	--acordia-nav-offcanvas-width:          100vw;
	--acordia-nav-offcanvas-padding:        var(--wp--preset--spacing--16) var(--wp--preset--spacing--24) var(--wp--preset--spacing--40);
}

/* Le panel est injecte dans <body>, hors `.wp-site-blocks` : le reset
   border-box de WP ne l'atteint pas. En content-box, `width:100vw` + le padding
   horizontal deborderait de la largeur du padding. */
.acordia-nav-offcanvas__panel { box-sizing: border-box; }

/* Croix de fermeture dessinee en CSS. Le mu-plugin pose un "×" texte : on le
   masque (font-size:0, le libelle reste porte par aria-label) et on trace deux
   barres. Cible 48x48 la ou le glyphe seul faisait ~28. */
.acordia-nav-offcanvas__close {
	position: relative;
	width: 48px;
	height: 48px;
	font-size: 0;
	padding: 0;
	color: var(--wp--preset--color--cream);
}
.acordia-nav-offcanvas__close::before,
.acordia-nav-offcanvas__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px; /* taille du picto maquette */
	height: 2px;
	background: currentColor;
}
.acordia-nav-offcanvas__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.acordia-nav-offcanvas__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Liens centres, occupant l'espace libre entre la croix et le bas de panel.
   Le gap maquette (55px) est mesure entre BOITES DE TEXTE ; le mu-plugin pose
   deja `padding: 12px 0` sur chaque lien (cible tactile 44px, a conserver).
   Gap CSS = 55 - 12 - 12 = 31 -> preset 30 : 54px rendus contre 55 dessines. */
.acordia-nav-offcanvas__menu {
	flex: 1;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
/* Le mu-plugin etire les liens (width:100%, space-between) pour un drawer
   lateral ; en plein ecran ils se centrent sur leur propre largeur. */
.acordia-nav-offcanvas__menu > li > a {
	width: auto;
	justify-content: center;
	text-align: center;
}

/* Telephone au-dessus du CTA "PAYER EN LIGNE" (maquette), alors que le header
   desktop les ordonne CTA puis telephone. column-reverse inverse l'affichage
   sans toucher au markup ni au clonage JS — l'ordre DOM (donc l'ordre de
   tabulation) reste celui du header. */
.acordia-nav-offcanvas__ctas {
	flex-direction: column-reverse;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	margin-top: 0; /* le menu absorbe l'espace libre via flex:1 */
}
/* Bouton a sa largeur naturelle (208px maquette) : le mu-plugin l'etire a 100%
   pour le drawer, trop large en plein ecran. */
.acordia-nav-offcanvas__ctas .wp-block-button__link { width: auto; }

/* Telephone : 16px jaune dans le menu (maquette), contre 14px creme dans le
   header desktop dont il est clone. Les utilities has-*-font-size / has-*-color
   de WP sont marquees prioritaires, mais elles sont portees par le <p> PARENT —
   styler le <a> lui-meme les bat par simple heritage, sans !important et sans
   toucher au markup du header. */
.acordia-nav-offcanvas__ctas .acordia-nav__phone {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--primary);
}
.acordia-nav-offcanvas__ctas .acordia-nav__phone:hover,
.acordia-nav-offcanvas__ctas .acordia-nav__phone:focus-visible {
	color: var(--wp--preset--color--primary); /* bat le `color:inherit` du hover desktop */
}

/* NAV — lien mis en avant "Solutions entreprises" (core/navigation ignore la couleur par-lien).
   href^= : couvre /solutions (legacy, redirige 301) et /solutions-entreprises. */
.acordia-nav a[href^="/solutions"],
.acordia-nav-offcanvas a[href^="/solutions"] { color: var(--wp--preset--color--primary); }

/* NAV — desktop tient sur une ligne (pas de wrap) */
.acordia-nav .wp-block-navigation__container { flex-wrap: nowrap; }
.acordia-nav .wp-block-navigation-item__label { white-space: nowrap; }
.acordia-nav .acordia-nav__cta-zone .wp-block-button__link,
.acordia-nav .acordia-nav__cta-zone p { white-space: nowrap; }

/* A — Header fixe au scroll (CSS pur, leger). z-index sous l'overlay off-canvas (9999).
   Le sticky porte sur le WRAPPER template-part (enfant direct de .wp-site-blocks,
   conteneur haut) : sur .acordia-nav seul il ne colle pas, son conteneur
   (le template-part) faisant exactement sa hauteur → aucune course de sticky. */
.wp-block-template-part:has(> .acordia-nav) { position: sticky; top: 0; z-index: 100; }

/* A bis — Reduction tres legere du padding vertical du header au scroll.
   Padding vertical retire du markup (file + DB part 42) pour etre pilote ici :
   base 24 → 16 quand <html> porte .acordia-scrolled (togglee par reveal.js au
   scroll > 40px). Transition douce dans les deux sens. */
.acordia-nav {
	padding-block: var(--wp--preset--spacing--24);
	transition: padding-block .25s ease;
}
.acordia-scrolled .acordia-nav { padding-block: var(--wp--preset--spacing--16); }

@media (prefers-reduced-motion: reduce) {
	.acordia-nav { transition: none; }
}

/* B — Menu header : soulignement glissant au survol (ref amiparis).
   Barre en currentColor (suit la teinte du lien). Le changement de couleur du
   texte au survol reste gere par le mu-plugin (specificite superieure). */
.acordia-nav-menu a { position: relative; }
.acordia-nav-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.acordia-nav-menu a:hover::after { transform: scaleX(1); }

/* B — Telephone : lien tel: direct, aucun effet de survol (desktop). */
.acordia-nav__phone { text-decoration: none; }
.acordia-nav__phone:hover { color: inherit; text-decoration: none; }

/* B — Picto telephone : le figure (flex item) etait ecrase a 0px quand le header
   manque de place (le p en nowrap ne cede rien, l'image absorbe tout le shrink).
   flex-shrink:0 sur les images de la zone CTA = picto toujours visible
   (retour recette client 2026-07). */
.acordia-nav__ctas .wp-block-image { flex-shrink: 0; margin: 0; }

/* HERO — cover hauteur mini + image plein cadre (aucun border-radius) */
.wp-block-cover { min-height: 600px; }
.wp-block-cover .wp-block-cover__image-background { object-fit: cover; }

/* HERO — rangee logos paiement : alignement vertical des SVG de hauteurs differentes */
.acordia-pay-row .wp-block-image { margin: 0; }
.acordia-pay-row .wp-block-image img { display: block; width: 200px; height: auto; }

/* MEDIA-CARDS — image plein cadre sur toute la hauteur de la colonne en desktop */
.acordia-media-img { height: 100%; margin: 0; }
.acordia-media-img img { width: 100%; height: 100%; object-fit: cover; }

/* MEDIA-CARDS — la pile de 3 cartes epouse la hauteur de la photo : les cartes
   s'etirent (flex) pour que le haut de la 1re et le bas de la 3e s'alignent sur
   les bords de la photo. Colonnes a hauteur egale via .wp-block-column (regle
   COLUMNS ci-dessus, display:flex column) + le groupe interne flex:1. */
.acordia-media-cards .wp-block-column > .wp-block-group { height: 100%; }
/* cartes etirees (flex) + contenu (titre + phrases) centre verticalement.
   align-self:stretch : en flex vertical WP aligne les items sur flex-start
   (largeur = contenu) ; on force la carte a occuper toute la largeur de colonne. */
.acordia-media-cards .wp-block-column > .wp-block-group > .wp-block-group { flex: 1 1 0; justify-content: center; align-self: stretch; }
/* Gutenberg pose flex-wrap:wrap sur TOUT layout flex, meme orientation:vertical
   (baseStyles de la definition flex, wp-includes/block-supports/layout.php).
   Combine au flex:1 1 0 ci-dessus, la hauteur de la carte devient contrainte :
   un flex column en wrap ne deborde pas vers le bas, il reporte le contenu en
   COLONNES vers la droite -> titre et phrases cote a cote, texte coupe hors
   ecran. Safari resout le height:100% contre un flex item etire comme hauteur
   definie la ou Chrome la laisse auto, d'ou le bug visible en Safari iOS
   uniquement (retour recette client 2026-07). nowrap : la carte grandit
   (min-height:auto) au lieu de reflower. */
.acordia-media-cards .wp-block-column > .wp-block-group,
.acordia-media-cards .wp-block-column > .wp-block-group > .wp-block-group { flex-wrap: nowrap; }

/* FAQ — chevron / fleche native des details + ouverture fluide */
.acordia-faq-item summary { cursor: pointer; list-style: none; }
.acordia-faq-item summary::-webkit-details-marker { display: none; }

/* FAQ — marqueur "+" a droite (remplace le triangle natif) */
.faq-item summary { position: relative; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--wp--preset--color--cream); font-size: 1.5rem; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }

/* FAQ dynamique (CPT) — bloc acordia/faq-list : items empiles, separateur, marqueur +/- */
.acordia-faq-list { display: flex; flex-direction: column; }
.acordia-faq-item { border-bottom: 1px solid var(--wp--preset--color--divider); } /* separateur source imgLine4 */
.acordia-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--wp--preset--spacing--16); padding-block: var(--wp--preset--spacing--24); font-weight: 600; }
.acordia-faq-item summary::after { content: "+"; color: var(--wp--preset--color--cream); font-size: var(--wp--preset--font-size--xl); line-height: 1; }
.acordia-faq-item[open] summary::after { content: "\2212"; } /* signe moins */
.acordia-faq-item__answer { padding-bottom: var(--wp--preset--spacing--24); }

/* E — FAQ hover : rond kaki autour du "+", ligne kaki (survol de la ligne OU du +).
   Le "+" (::after) devient une pastille ronde ; bordure transparente au repos
   (pas de saut de layout), kaki au survol. Separateur bas gere par la regle
   .acordia-faq-item ci-dessus (deplace du markup inline, cf faq.php). */
.acordia-faq-item summary::after {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: color .2s ease, border-color .2s ease;
}
.acordia-faq-item { transition: border-bottom-color .2s ease; }
.acordia-faq-item:hover { border-bottom-color: var(--wp--preset--color--kaki); }
.acordia-faq-item summary:hover::after {
	color: var(--wp--preset--color--kaki);
	border-color: var(--wp--preset--color--kaki);
}

/* Mobile : pas de rond kaki autour du "+" (le :hover reste colle apres un tap
   sur ecran tactile). Seule la couleur du marqueur change. */
@media (max-width: 781px) {
	.acordia-faq-item summary:hover::after { border-color: transparent; }
}

/* Mini FAQ (homepage) — items consecutifs sans gap, comme la page FAQ (retour
   recette client 2026-07 : hauteurs trop hautes). Annule le blockGap 40px du
   groupe parent (regle WP .wp-container-* > * + *, specificite inferieure) ;
   le rythme vertical vient du padding-block 24 des summary + separateur. */
.acordia-faq-item.faq-item + .acordia-faq-item.faq-item { margin-block-start: 0; }

/* Homepage mini FAQ (wp:details, reponse = <p> direct sans wrapper __answer) :
   espace sous la reponse avant le separateur, comme le padding-bottom 24 de
   .acordia-faq-item__answer sur la page FAQ. Sinon le trait colle au texte. */
.faq-item[open] > :last-child { padding-bottom: var(--wp--preset--spacing--24); }

/* FAQ — ouverture fluide du contenu (details natif) via ::details-content +
   interpolate-size (anime height:auto). Degrade proprement en ouverture
   instantanee sur navigateurs sans ::details-content (Safari/FF anterieurs). */
:root { interpolate-size: allow-keywords; }
.acordia-faq-item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
.acordia-faq-item[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
	.acordia-faq-item::details-content { transition: none; }
}

/* HERO — contenu aligne a gauche dans la colonne ~640px */
.hero-left { margin-left: 0; margin-right: auto; align-items: flex-start; }
.hero-left .wp-block-heading,
.hero-left p { text-align: left; }

/* ============ PAGE QUI SOMMES-NOUS ============ */

/* HERO INTRO — vague decorative olive (Figma node 84:154) en fond haut */
.acordia-hero-intro { position: relative; isolation: isolate; }
.acordia-hero-intro::before {
	content: "";
	position: absolute;
	/* Vague "Acordia-Forme-Green 1" (Figma 84:154) calee sur la registration Figma :
	   dans la maquette le titre est a 17,5% de la hauteur de vague et le dernier texte
	   a 98%. On reproduit ce calage sur la boite contenu reelle.
	   - top negatif : la 1re bande remonte au-dessus du titre (zone au-dessus = SVG
	     transparent, pas de bande visible dans le header).
	   - bottom = section-py : la vague s'arrete au bas du dernier paragraphe (pas
	     jusqu'au bas du groupe) => etirement minime (~6%), bandes a proportion quasi
	     native, PAS ecrasees.
	   Resultat : 1er paragraphe dans le creux entre 2 bandes, dernier paragraphe dans
	   la bande verte pleine du bas. preserveAspectRatio="none" (SVG) + size 100% 100%. */
	top: -56px;
	bottom: var(--wp--preset--spacing--section-py);
	left: 0;
	right: 0;
	background: url("../images/qsn-wave.svg") center / 100% 100% no-repeat;
	z-index: -1; /* devant le fond bg-dark, derriere le contenu */
	pointer-events: none;
}

/* HERO INTRO — gap colonnes texte/image (Figma ~125px entre les deux colonnes).
   Override du layout WP (blockGap) : selecteur a specificite +haute, zero !important. */
.acordia-hero-intro .wp-block-columns { column-gap: var(--wp--preset--spacing--120); }

/* HERO INTRO — photo ratio source 531/410, plein cadre */
.acordia-hero-intro__img img { aspect-ratio: 531 / 410; object-fit: cover; width: 100%; }

/* BANNER CARDS — image banniere plein cadre. Ratio source 1196/511, hauteur
   plafonnee a 400px (retour recette client 2026-07 : visuel trop haut). */
.acordia-banner-cards__img img { aspect-ratio: 1196 / 511; max-height: 400px; object-fit: cover; width: 100%; }

/* BANNER / CONTACT — cards a hauteur egale dans leurs colonnes */
.acordia-banner-cards .wp-block-column,
.acordia-contact-cards .wp-block-column { display: flex; }
.acordia-value-card { width: 100%; }
/* Contact — contenu centre vertical (WP n'emet pas justify-content en flex vertical) */
.acordia-contact-card { width: 100%; min-height: 209px; justify-content: center; } /* hauteur mini design */

/* Banner value cards — hauteur 390px (maquette) + contenu centre vertical */
.acordia-banner-cards .acordia-value-card {
	min-height: 390px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Mobile : cartes empilees (core/columns stacke a 781px) → hauteur reduite pour
   eviter une colonne de blocs tres hauts, et banniere masquee (decorative). */
@media (max-width: 781px) {
	.acordia-banner-cards .acordia-value-card { min-height: 250px; }
	.acordia-banner-cards__img { display: none; }
}

/* CTA — transition douce fond + texte */
.wp-element-button { transition: background-color 0.2s ease, color 0.2s ease; }

/* C — CTA jaunes (boutons sans fond explicite) : hover crème + texte noir.
   Les boutons a fond defini (ex: footer "Nous contacter" ink) conservent leur
   hover theme.json (bg-white). Selecteur specifique (0,3,0) > theme.json (:where). */
.wp-element-button:not(.has-background):hover,
.wp-element-button:not(.has-background):focus {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

/* C bis — CTA outline "Une question ?" (texte creme au repos, encre au hover).
   textColor retire du bloc car les utilities has-*-color de WP sont en
   !important et bloqueraient le passage a l'encre au hover ; couleur pilotee
   ici en specificite plate (bg creme fourni par la regle C ci-dessus). */
.acordia-cta-outline .wp-block-button__link { color: var(--wp--preset--color--cream); }
.acordia-cta-outline .wp-block-button__link:hover,
.acordia-cta-outline .wp-block-button__link:focus { color: var(--wp--preset--color--ink); }

/* C ter — Footer "Nous contacter" : fond jaune + texte noir au repos, inverse au
   survol (fond ink + texte jaune) — retour recette client 2026-07.
   textColor/backgroundColor retires du bloc (les utilities has-*-color de WP
   sont marquees prioritaires et bloqueraient le survol) ; couleurs pilotees
   ici. Specificite (0,4,0) au hover > regle C (0,3,0) pour imposer le fond ink
   plutot que le creme. */
.wp-block-button.acordia-cta-contact .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.acordia-cta-contact .wp-block-button__link:hover,
.wp-block-button.acordia-cta-contact .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--primary);
}

/* HEADER — icone CB a l'interieur du bouton PAYER EN LIGNE (maquette 85:510, asset 29x17) */
.acordia-cta-cb .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--8); }
.acordia-cta-cb .wp-block-button__link::before {
	content: "";
	width: 29px;
	height: 17px;
	flex-shrink: 0;
	background-image: url(../images/cb-icon.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* CTA BORDERED — bouton "FAQ" elargi (retour recette client 2026-07) : le
   libelle fait 3 lettres, le bouton tombait a ~70px de large — cible tactile
   trop juste en mobile. Meme traitement que .acordia-intro-cta ci-dessous.
   Le bouton reste centre (justifyContent du bloc buttons) et garde son
   border-radius 35px pose en attribut. */
.acordia-cta-bordered .wp-block-button { width: 230px; max-width: 100%; }
.acordia-cta-bordered .wp-block-button__link { width: 100%; text-align: center; }

/* ============ SOLUTIONS ENTREPRISES ============ */
/* Hero intro-cta — boutons CTA de meme largeur (source 207px) */
.acordia-intro-cta .wp-block-button { width: 230px; }
.acordia-intro-cta .wp-block-button__link { width: 100%; white-space: nowrap; text-align: center; }

/* Hero intro-cta — vague decorative en fond haut (reuse qsn-wave, node 121:191) */
.acordia-intro-cta { position: relative; isolation: isolate; }
.acordia-intro-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 663px; /* hauteur vague source (node 121:191) */
	background: url("../images/qsn-wave.svg") top center no-repeat;
	background-size: 100% auto;
	z-index: -1;
	pointer-events: none;
}

/* Nos valeurs — cercles jaunes decoratifs (sources ellipses 121:395-397).
   Cercles PLEINS repartis a l'interieur (haut, bas-gauche, milieu-droite) au
   lieu de demi-cercles tronques aux bords. UN cercle PAR couche pour que les 3
   flottent independamment (periodes/amplitudes/directions differentes) :
   - .acordia-values::before        → cercle haut
   - .acordia-values-grid::before   → cercle bas-gauche (pseudo absolue calee sur
     .acordia-values, seul ancetre positionne → meme repere que ::before)
   - .acordia-values::after         → cercle droite */
.acordia-values { position: relative; isolation: isolate; overflow: hidden; }
.acordia-values::before,
.acordia-values::after,
.acordia-values-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.acordia-values::before {
	background: radial-gradient(circle at calc(40% + 5rem) 25%, var(--wp--preset--color--primary) 80px, transparent 81px);
	animation: acordia-float-a 7s ease-in-out infinite alternate;
	translate: 0 calc(var(--acordia-vp, 0px) * 0.08);
}
.acordia-values-grid::before {
	background: radial-gradient(circle at 7% 87%, var(--wp--preset--color--primary) 80px, transparent 81px);
	animation: acordia-float-b 9s ease-in-out infinite alternate;
	translate: 0 calc(var(--acordia-vp, 0px) * -0.06);
}
.acordia-values::after {
	background: radial-gradient(circle at 92% 63%, var(--wp--preset--color--primary) 80px, transparent 81px);
	animation: acordia-float-c 11s ease-in-out infinite alternate;
	translate: 0 calc(var(--acordia-vp, 0px) * 0.12);
}

@keyframes acordia-float-a {
	from { transform: translateY(-24px); }
	to   { transform: translateY(24px); }
}
@keyframes acordia-float-b {
	from { transform: translate(9px, 22px); }
	to   { transform: translate(-9px, -20px); }
}
@keyframes acordia-float-c {
	from { transform: translateY(26px); }
	to   { transform: translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
	.acordia-values::before,
	.acordia-values::after,
	.acordia-values-grid::before { animation: none; translate: none; }
}

/* Nos valeurs — grille 2 colonnes (base). WP grid natif ne stack pas seul sur
   mobile (contrairement a core/columns) → empilement force sous 781px. */
@media (max-width: 781px) {
	.acordia-values-grid { grid-template-columns: 1fr; }
}

/* Nos valeurs — composition decalee (direction client, cf maquette Image #4).
   Largeur de bloc (contraint le retour a la ligne du texte) + offsets par valeur
   pour l'agencement asymetrique. Ordre grille : 1 PEOPLE, 2 TECH, 3 PROCESS,
   4 TRUST.
   Gate a >=1024px UNIQUEMENT : les largeurs fixes (max 335px) + gap 10rem ne
   rentrent que si la track >= 335px, or track = (contenu - 160)/2 avec
   contenu = vw - 2*gutter (gutter = clamp(25px, -10px+9vw, 120px)). A 1024px :
   gutter 82px -> track 350px >= 335 (OK, se creuse en montant). Sous 1024px la
   grille retombe sur son defaut natif (columnCount:2, gap token) = 2 colonnes
   ALIGNEES (tablette) ; sous 782px, 1 colonne (mobile). */
@media (min-width: 1024px) {
	.acordia-values-grid { gap: 10rem; }
	.acordia-values-grid > .acordia-value:nth-child(1) { width: 300px; }
	.acordia-values-grid > .acordia-value:nth-child(2) { width: 335px; margin-top: -25px; }
	.acordia-values-grid > .acordia-value:nth-child(3) { width: 295px; justify-self: center; margin-top: -40px; }
	.acordia-values-grid > .acordia-value:nth-child(4) { width: 270px; margin-left: -30px; }
}

/* Nos valeurs — bulles decoratives masquees sous 1024px. Leurs positions (7% /
   40% / 92%) sont calees sur les "trous vides" de la composition desktop ; en
   grille alignee (tablette) et en pile (mobile) ces trous disparaissent et les
   cercles passeraient derriere le texte (creme sur jaune = illisible). Purement
   decoratif → on les retire tant que la composition asymetrique n'est pas active. */
@media (max-width: 1023px) {
	.acordia-values::before,
	.acordia-values::after,
	.acordia-values-grid::before { display: none; }
}

/* Cartes services — icône hauteur fixe (largeurs sources variables) */
.acordia-service-card__icon img { height: 40px; width: auto; }

/* Cartes services — léger zoom au survol (ref voyageur du monde). transform
   n'affecte pas le flux → aucun decalage des colonnes a hauteur egale. */
.acordia-service-card { transition: transform .3s ease; }
.acordia-service-card:hover { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.acordia-service-card { transition: none; }
	.acordia-service-card:hover { transform: none; }
}

/* Stats — nombre + label alignés sur la ligne de base basse */
.acordia-stat__head { align-items: flex-end; flex-wrap: wrap; }
.acordia-stat__head > * { white-space: nowrap; } /* nombre + label jamais coupés en plein mot */

/* Valeurs — le badge bordé épouse la largeur du label */
.acordia-value__badge { display: inline-block; width: auto; }

/* Mur de logos — grille 5 colonnes, logos blancs centrés (object-fit) */
.acordia-logos__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	align-items: center;
}
.acordia-logos__item { margin: 0; }
.acordia-logos__item img { max-height: 48px; width: auto; margin-inline: auto; object-fit: contain; }

@media (max-width: 1024px) {
	.acordia-logos__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.acordia-logos__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   F — FOOTER : soulignement jaune discret au survol des liens (texte only)
   Cible les liens de paragraphe (legal / a propos / adresse). Le bouton
   "Nous contacter" et le lien image LinkedIn sont exclus (pas dans un <p>).
   ========================================================================== */
.acordia-footer p a { transition: text-decoration-color .2s ease; }
.acordia-footer p a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* ==========================================================================
   G — RETOUR AU TOP (retour recette client 2026-07)
   Pastille fixe bas-droite, revelee passe un ecran de scroll — donc de fait
   seulement sur les pages longues. Le bouton est injecte par reveal.js : pas
   de markup a propager en BDD, et rien dans l'editeur.
   ========================================================================== */

.acordia-to-top {
	position: fixed;
	right: var(--wp--preset--spacing--24);
	bottom: var(--wp--preset--spacing--24);
	z-index: 90; /* sous le header sticky (100) et l'overlay off-canvas (9999) */
	display: grid;
	place-items: center;
	width: 48px; /* cible tactile confortable (WCAG 2.5.5 : 44px mini) */
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, background-color .2s ease, visibility 0s linear .25s;
}

.acordia-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* Chevron dessine en CSS : chevron.svg est un export Figma inutilisable (c'est
   un "+", avec le fond d'artboard 1440x3326 incruste) et il n'est reference
   nulle part. currentColor -> le glyphe suit la couleur au survol. Meme parti
   pris que les marqueurs FAQ ("+" / "\2212") deja dessines sans asset. */
.acordia-to-top::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: translateY(2px) rotate(45deg); /* coin haut-gauche -> chevron vers le haut */
}

.acordia-to-top:hover,
.acordia-to-top:focus-visible {
	background: var(--wp--preset--color--cream);
}

@media (prefers-reduced-motion: reduce) {
	.acordia-to-top { transition: none; }
}

/* ==========================================================================
   D — CASCADE REVEAL (media-cards) : fade-up staggered a l'entree viewport.
   L'etat cache n'est applique QUE si JS present (classe .acordia-js posee tot
   par wp_head) → editeur Gutenberg & navigateurs no-JS : contenu visible
   (Back = Front). Le staggering (transition-delay) est pose par reveal.js.
   reduced-motion : apparition instantanee, aucune transform.
   ========================================================================== */
.acordia-reveal { transition: opacity .6s ease, transform .6s ease; }
.acordia-js .acordia-reveal { opacity: 0; transform: translateY(24px); }
.acordia-js .acordia-reveal.is-revealed { opacity: 1; transform: none; }

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

/* Mobile : reveal desactive (retour recette client 2026-07 — les cartes empilees
   apparaissent une a une en translateY au scroll et "font danser la page" ;
   en pile verticale le stagger n'apporte rien). Contenu visible immediatement. */
@media (max-width: 781px) {
	.acordia-js .acordia-reveal { opacity: 1; transform: none; }
	.acordia-reveal { transition: none; }
}