/*
Theme Name: SuiteVise (Gutenberg)
Theme URI: https://suitevise.com
Author: SuiteVise
Description: Thème bloc sur mesure de SuiteVise (conseil Oracle NetSuite). Contenu 100 % en blocs natifs Gutenberg, éditable depuis l'éditeur de pages et l'éditeur de site.
Version: 1.5.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suitevise
Tags: block-theme, full-site-editing, business
*/
/* ##########################################################################
   Source : maquette/styles.css
   ########################################################################## */

/* ==========================================================================
   SuiteVise — maquette d'accueil (phase 2)
   Registre relevé sur la référence : une sans-serif à graisse moyenne,
   un seul accent (rouge), fond blanc froid, panneaux arrondis encartés,
   boutons pilule, titres alignés à gauche, grand CTA rouge centré.
   ========================================================================== */

:root {
  --rouge: #EF0130;
  --rouge-fonce: #C80028;
  --aubergine: #18042B;
  --violet: #6B6177;
  --violet-clair: #A39CAB;
  --blanc: #FFFFFF;
  --fond-doux: #F8FAFF;
  --trait: #D9E3F0;

  --titres: 'Manrope', system-ui, sans-serif;
  --texte: 'Inter', system-ui, sans-serif;

  --gouttiere: 24px;
  --haut-entete: 76px;
  --espace-section: clamp(72px, 8vw, 112px);

  --ombre-douce: 0 18px 40px -22px rgba(24, 4, 43, .22);
  --ombre-rouge: 0 14px 30px -14px rgba(239, 1, 48, .55);

  /* Icônes : masques SVG, la couleur vient de background-color. */
  --i-cible: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E");
  --i-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14 7 22l5-3 5 3-1.5-8'/%3E%3C/svg%3E");
  --i-reglages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
  --i-boucle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
  --i-boussole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E");
  --i-courbe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");
  --i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 8-4 4 4 4M16 8l4 4-4 4M14 5l-4 14'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-droite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-haut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
  --i-nuage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4 4 0 0 1-.5-8A6 6 0 0 1 18 9a4.5 4.5 0 0 1-.5 9Z'/%3E%3C/svg%3E");
  --i-flux: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M6 8.5V12a3 3 0 0 0 3 3h6.5'/%3E%3C/svg%3E");
  --i-barres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M11 20V5M17 20v-6M3 20h18'/%3E%3C/svg%3E");
  --i-recu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2Z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");
  --i-lien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--violet);
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
/* Espacement automatique de Gutenberg : désactivé dans theme.json
   (settings.spacing.blockGap = null). Avec "0px", WordPress génère encore
   « :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 } »,
   de spécificité (0,2,0), qui écrase les marges des composants. Filet de
   sécurité ici À SPÉCIFICITÉ NULLE (blocs-gutenberg.md). */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
mark.has-inline-color { background: none; }
h1, h2, h3 { margin: 0; color: var(--aubergine); font-family: var(--titres); text-wrap: balance; hyphens: none; overflow-wrap: break-word; }
p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[id] { scroll-margin-top: calc(var(--haut-entete) + 20px); }
.rouge { color: var(--rouge); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
  border-radius: 6px;
}

.evitement {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--aubergine); color: var(--blanc);
  padding: 10px 16px; border-radius: 8px;
}
.evitement:focus { top: 12px; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gouttiere); }
.wrap-large { max-width: 1440px; }

.section { padding-top: var(--espace-section); }

/* --- Éléments communs --------------------------------------------------- */

.surtitre {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--fond-doux);
  color: var(--aubergine);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 18px;
}
.surtitre-rouge { background: var(--blanc); border-color: #FBD0D9; color: var(--rouge); }
.surtitre-majuscule { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; }

.titre-section {
  font-size: clamp(28px, 1.9vw + 18px, 46px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.022em;
}
.chapeau { margin-top: 16px; max-width: 520px; font-size: 15px; }

/* Boutons : core/button pose la classe sur le conteneur div.wp-block-button,
   le style va donc sur le lien qu'il contient (blocs-gutenberg.md). */
.wp-block-button.bouton > .wp-block-button__link,
.formulaire .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: auto;
  padding: 15px 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--texte);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.wp-block-button.bouton-petit > .wp-block-button__link { padding: 11px 22px; font-size: 13.5px; }
.wp-block-button.bouton-plein > .wp-block-button__link,
.formulaire .wpcf7-submit { background: var(--rouge); color: var(--blanc); cursor: pointer; }
.wp-block-button.bouton-plein > .wp-block-button__link:hover,
.formulaire .wpcf7-submit:hover { background: var(--rouge-fonce); box-shadow: var(--ombre-rouge); transform: translateY(-2px); }
.wp-block-button.bouton-contour > .wp-block-button__link { border-color: var(--trait); color: var(--aubergine); background: var(--blanc); }
.wp-block-button.bouton-contour > .wp-block-button__link:hover { border-color: var(--rouge); color: var(--rouge); transform: translateY(-2px); }
.wp-block-button.bouton-blanc > .wp-block-button__link { background: var(--blanc); color: var(--rouge); }
.wp-block-button.bouton-blanc > .wp-block-button__link:hover { background: var(--aubergine); color: var(--blanc); transform: translateY(-2px); }
/* Rangées de boutons : flex comme dans la maquette (le gap du bloc vaut 0). */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; }
.wp-block-buttons > .wp-block-button { margin: 0; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--rouge);
  font-size: 14px; font-weight: 600;
}
.lien-fleche::after {
  content: ''; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--i-droite) center / contain no-repeat; mask: var(--i-droite) center / contain no-repeat;
  transition: transform .25s;
}
.lien-fleche:hover::after { transform: translateX(4px); }
.lien-fleche-blanc { color: var(--blanc); }

/* Pastille rouge à icône blanche — le motif des puces de la référence.
   Dans les blocs, elle est dessinée par le bloc qui la porte (.a-pastille) :
   ::before pour le disque, ::after pour l'icône, posée par-dessus. */
.a-pastille { position: relative; }
.a-pastille::before {
  content: '';
  flex: none;
  display: block;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--rouge);
}
.a-pastille::after {
  content: ''; position: absolute; top: calc(var(--pastille-y, 0px) + 8.5px); left: calc(var(--pastille-x, 0px) + 8.5px);
  width: 17px; height: 17px; background: var(--blanc);
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
}
.pastille-cible { --icone: var(--i-cible); }
.pastille-badge { --icone: var(--i-badge); }
.pastille-engrenage { --icone: var(--i-reglages); }
.pastille-boucle { --icone: var(--i-boucle); }
.pastille-boussole { --icone: var(--i-boussole); }
.pastille-courbe { --icone: var(--i-courbe); }
.pastille-code { --icone: var(--i-code); }

.carte-image { overflow: hidden; border-radius: 10px; background: var(--fond-doux); }
.carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
/* Le bloc image impose .wp-block-image img { height: auto } (imprimé après cette
   feuille) : les photos recadrées dans un cadre fixe le surclassent ici. */
.wp-block-image:is(.carte-image, .pourquoi-visuel, .vedette-visuel, .profil-photo, .intro-figure, .article-couverture) img,
:is(.bandeau-visuel, .etapes-cote, .pack-vitrine) .wp-block-image img { height: 100%; }

.tete-section {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 32px;
  margin-bottom: clamp(36px, 4vw, 52px);
}
.tete-texte { max-width: 640px; min-width: 0; }
.tete-section > .wp-block-buttons { flex: none; }

/* --- Barre d'annonce et en-tête ----------------------------------------- */

.annonce {
  background: var(--rouge);
  color: var(--blanc);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  padding: 9px 16px;
}
.annonce em { font-style: normal; }
.annonce a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.entete.est-defile { border-bottom-color: var(--trait); box-shadow: 0 8px 24px -18px rgba(24, 4, 43, .35); }
.entete-rangee { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--haut-entete); }
/* Le logo ne se laisse jamais comprimer : c'était la cause du chevauchement. */
.marque { flex: none; display: block; }
/* Logo : bloc « Logo du site », dont l'image reçoit ses dimensions en attributs. */
.marque { line-height: 0; }
.marque a { display: inline-block; }
.marque img { height: 60px !important; width: auto !important; max-width: none; }
/* Pied de page : le logo d'origine, empilé, en plus grand. */
.pied-marque .marque img { height: 96px !important; }
/* La navigation (mega menus, panneau mobile) est dans megamenu.css. */

/* Barre de progression de lecture, pilotée par le défilement : pseudo-élément
   de l'en-tête (une couche décorative n'a rien à faire dans le contenu). */
.entete::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--rouge);
  transform-origin: 0 50%;
  scale: var(--avancement, 0) 1;
  pointer-events: none;
}

.entete-actions { flex: none; display: flex; align-items: center; gap: 16px; }
.langues { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--violet-clair); }
.langues a { padding: 4px 2px; transition: color .2s; }
.langues a:first-child { color: var(--aubergine); }
.langues a:hover { color: var(--rouge); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--trait); border-radius: 50%;
  background: var(--blanc);
  place-items: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--aubergine);
  transition: transform .3s, background-color .3s;
}
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- Héros -------------------------------------------------------------- */

.hero { padding-block: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 36px); }
.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.wp-block-buttons.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2vw, 26px); }
.wp-block-button.puce > .wp-block-button__link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--fond-doux);
  color: var(--aubergine);
  font-family: var(--texte); font-size: 12px; font-weight: 500; line-height: inherit;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background-color .2s;
}
.wp-block-button.puce > .wp-block-button__link:hover { border-color: var(--rouge); color: var(--rouge); }
.wp-block-button.puce-active > .wp-block-button__link { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.wp-block-button.puce-active > .wp-block-button__link:hover { background: var(--rouge-fonce); color: var(--blanc); }

.titre-hero {
  max-width: 11.5em;
  font-size: clamp(32px, 4.6vw, 68px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.hero-chapeau { margin-top: clamp(16px, 1.8vw, 24px); max-width: 470px; font-size: 15.5px; }
.wp-block-buttons.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.6vw, 34px); }

/* Preuve sociale : toute la ligne est cliquable (le lien du texte s'étend). */
.hero-preuve { position: relative; display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(24px, 2.6vw, 36px); }
.avatars { display: flex; }
.avatars > :is(*, .wp-block-image) {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin: 0 0 0 -10px;
  overflow: hidden;
  border: 2px solid var(--blanc); border-radius: 50%;
  background: var(--aubergine); color: var(--blanc);
  font-family: var(--titres); font-size: 11px; font-weight: 700;
}
.avatars .wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.avatars > :first-child:is(*, .wp-block-image) { margin-left: 0; }
.hero-preuve-texte { font-size: 13px; line-height: 1.45; }
.hero-preuve-texte a::after { content: ''; position: absolute; inset: 0; }
.hero-preuve-texte strong { color: var(--aubergine); font-weight: 600; transition: color .2s; }
.hero-preuve:hover strong { color: var(--rouge); }

/* Le hub : NetSuite au centre, les domaines d'expertise en satellites —
   l'équivalent du schéma central de la référence. Centrage par marges
   (en % de la largeur : le hub est carré), pour laisser translate, transform
   et scale libres pour les animations. */
.hub {
  --ampleur: .09px;
  position: relative;
  width: 100%; max-width: 580px;
  aspect-ratio: 1;
  justify-self: end;
  container-type: inline-size;
}
.hub-traits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-orbites { transform-box: view-box; transform-origin: 50% 50%; }
.hub-orbites circle { fill: none; stroke: var(--trait); stroke-width: 1.2; stroke-dasharray: 3 6; }
.hub-liens line { stroke: var(--aubergine); stroke-width: 1.1; opacity: .55; }
.hub-centre, .noeud, .hub-point {
  --taille: calc(var(--d) / 560 * 100%);
  position: absolute;
  left: calc(var(--x) / 560 * 100%);
  top: calc(var(--y) / 560 * 100%);
  width: var(--taille);
  aspect-ratio: 1;
  margin-left: calc(var(--taille) / -2);
  margin-top: calc(var(--taille) / -2);
  border-radius: 50%;
}
.hub-centre {
  display: grid; place-content: center; text-align: center;
  background: var(--rouge);
  color: var(--blanc);
  box-shadow: 0 0 0 4.2cqw rgba(239, 1, 48, .09), 0 0 0 8.6cqw rgba(239, 1, 48, .045), var(--ombre-rouge);
}
.hub-centre strong { font-family: var(--titres); font-size: clamp(16px, 4.3cqw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.hub-centre em { font-style: normal; font-size: clamp(9px, 2.1cqw, 12.5px); opacity: .85; margin-top: 2px; }
.noeud {
  display: grid; place-items: center; text-align: center;
  background: var(--aubergine);
  color: var(--blanc);
  font-size: clamp(9px, 2.25cqw, 13px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
  box-shadow: 0 12px 24px -14px rgba(24, 4, 43, .7);
  transition: background-color .25s, scale .25s;
  animation: flotter 6s ease-in-out infinite;
}
/* Les satellites sont des paragraphes : le centre est le 1er, d'où le décalage d'un rang. */
.noeud:nth-of-type(2n+1) { animation-delay: -2s; }
.noeud:nth-of-type(3n+1) { animation-delay: -4s; }
.noeud:hover { background: var(--rouge); scale: 1.08; }
.noeud a::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.hub-point { background: var(--rouge); box-shadow: 0 0 0 5px rgba(239, 1, 48, .14); }
@keyframes flotter { 50% { transform: translateY(-7px); } }

/* Petit hub (téléphone) : les satellites grossissent pour rester lisibles. */
@container (max-width: 430px) {
  .noeud { --taille: calc(var(--d) * 1.22 / 560 * 100%); --ampleur: .05px; font-size: 9px; }
}

/* --- Bande technologies ------------------------------------------------- */

/* Bande en défilement continu : trois copies de la liste glissent d'une
   largeur de liste puis recommencent, sans couture. Pause au survol.
   La piste dérive en plus légèrement avec le défilement de la page. */

.techno { padding-top: clamp(48px, 6vw, 88px); view-timeline-name: --techno; }
.techno-titre { text-align: center; font-size: 12.5px; color: var(--violet-clair); margin-bottom: 14px; }
.techno-defile {
  overflow: clip;
  padding-block: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.techno-piste { display: flex; width: max-content; }
.techno-liste {
  flex: none;
  display: flex; align-items: center; gap: 56px;
  padding-right: 56px;
  animation: techno-boucle 38s linear infinite;
}
.techno-defile:hover .techno-liste { animation-play-state: paused; }
.techno-liste li {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--violet-clair);
  font-family: var(--titres); font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .25s, translate .3s cubic-bezier(.2, .7, .2, 1);
}
.techno-liste li:hover { color: var(--aubergine); translate: 0 -2px; }
.techno-liste li::before {
  content: ''; width: 21px; height: 21px; background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
  transition: background-color .25s;
}
.techno-liste li:hover::before { background: var(--rouge); }
@keyframes techno-boucle { to { transform: translateX(-100%); } }
@keyframes techno-derive { from { translate: 60px 0; } to { translate: -60px 0; } }
@media (prefers-reduced-motion: no-preference) {
  .sda .techno-piste { animation: techno-derive linear both; animation-timeline: --techno; animation-range: cover; }
  .no-sda .techno-piste { translate: calc((var(--p, .5) - .5) * -120px) 0; }
}
/* Sans animation : une seule liste, centrée et repliée sur plusieurs lignes. */
@media (prefers-reduced-motion: reduce) {
  .techno-liste[aria-hidden="true"] { display: none; }
  .techno-defile { -webkit-mask-image: none; mask-image: none; }
  .techno-piste { width: auto; }
  .techno .techno-liste { flex: 1; flex-wrap: wrap; justify-content: center; gap: 14px 32px; padding-right: 0; }
}
.techno-liste li:nth-child(1) { --icone: var(--i-nuage); }
.techno-liste li:nth-child(2) { --icone: var(--i-code); }
.techno-liste li:nth-child(3) { --icone: var(--i-flux); }
.techno-liste li:nth-child(4) { --icone: var(--i-barres); }
.techno-liste li:nth-child(5) { --icone: var(--i-recu); }
.techno-liste li:nth-child(6) { --icone: var(--i-lien); }

/* --- Pourquoi ----------------------------------------------------------- */

.section-pourquoi { padding-top: clamp(56px, 6vw, 96px); }
.panneau { background: var(--fond-doux); border-radius: 22px; }
.pourquoi-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding: clamp(40px, 5vw, 72px) clamp(36px, 5vw, 72px) clamp(40px, 5vw, 72px) clamp(32px, 4.4vw, 64px);
}
.pourquoi-visuel { border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1.06; }
.pourquoi-visuel img { width: 100%; height: 100%; object-fit: cover; }
.atouts { margin-top: 30px; display: grid; gap: 24px; }
.atout { display: flex; gap: 16px; }
.atout h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.atout p { margin-top: 6px; font-size: 14px; }

/* --- Services ----------------------------------------------------------- */

.grille-services { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 52px 28px; }
.carte-service { grid-column: span 2; display: flex; flex-direction: column; }
.carte-service.carte-large { grid-column: span 3; }
.carte-service .carte-image { height: clamp(200px, 17vw, 238px); }
.carte-service h3, .industrie h3 {
  margin-top: 22px;
  font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
  transition: color .25s;
}
.carte-service p:not(.lien-fleche) { margin-top: 8px; font-size: 14px; max-width: 520px; }
.carte-service .lien-fleche, .industrie .lien-fleche { margin-top: 14px; }
.carte-service:hover .carte-image img, .industrie:hover .carte-image img { transform: scale(1.05); }
.carte-service:hover h3, .industrie:hover h3 { color: var(--rouge); }
.carte-service .carte-image { box-shadow: 0 0 0 0 rgba(24, 4, 43, 0); transition: box-shadow .4s; }
.carte-service:hover .carte-image { box-shadow: var(--ombre-douce); }

/* --- Packs -------------------------------------------------------------- */

.tete-chiffres { align-items: flex-end; }
.chiffres { display: flex; gap: clamp(24px, 3vw, 44px); }
.chiffre-valeur {
  color: var(--aubergine);
  font-family: var(--titres); font-size: clamp(34px, 3vw, 42px); font-weight: 500; line-height: 1; letter-spacing: -0.03em;
  white-space: nowrap;
}
.compteur { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.chiffre-libelle { margin-top: 8px; max-width: 120px; font-size: 13px; line-height: 1.4; }

.grille-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pack-vitrine {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 360px;
  padding: 32px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--rouge);
  color: var(--blanc);
}
.pack-vitrine img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: multiply;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.pack-vitrine::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--rouge) 8%, rgba(239, 1, 48, .55) 45%, rgba(239, 1, 48, 0) 75%);
}
.pack-vitrine:hover img { transform: scale(1.05); }
/* La photo reste un bloc image remplaçable ; son cadre s'efface de la mise en page. */
.pack-vitrine > .wp-block-image { display: contents; }
.pack-vitrine .lien-fleche a::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.pack-vitrine-texte { display: grid; gap: 14px; }
.pack-vitrine-titre { font-family: var(--titres); font-size: 25px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }

.pack {
  display: flex; flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid var(--trait); border-radius: 14px;
  background: var(--blanc);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s;
}
.pack:hover { transform: translateY(-6px); box-shadow: var(--ombre-douce); border-color: #C9D5E6; }
.pack-numero {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--rouge); color: var(--blanc);
  font-family: var(--titres); font-size: 13px; font-weight: 700;
  transition: scale .35s;
}
.pack:hover .pack-numero { scale: 1.1; }
.pack-etape { margin-top: 24px; font-size: 12.5px; }
.pack h3 { margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.pack p:not(.pack-numero):not(.pack-etape):not(.lien-fleche) { margin-top: 12px; font-size: 14px; flex: 1; }
.pack .lien-fleche { margin-top: 20px; }

/* --- Expertise ---------------------------------------------------------- */

.vedette {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(22px, 3.4vw, 48px);
  border: 1px solid var(--trait); border-radius: 18px;
}
.vedette-texte { padding-left: clamp(0px, .6vw, 8px); }
.titre-vedette { font-size: clamp(26px, 1.2vw + 18px, 36px); font-weight: 500; line-height: 1.16; letter-spacing: -0.02em; }
.vedette-texte > p:not(.surtitre) { margin-top: 16px; font-size: 14.5px; max-width: 480px; }
.domaines { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 24px 30px; }
.domaines a {
  display: inline-block; padding: 7px 14px;
  border: 1px solid var(--trait); border-radius: 999px;
  color: var(--aubergine); font-size: 13px;
  transition: border-color .2s, color .2s;
}
.domaines a:hover { border-color: var(--rouge); color: var(--rouge); }
.vedette-visuel { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3.1; }
.vedette-visuel img { width: 100%; height: 100%; object-fit: cover; }

/* --- Équipe ------------------------------------------------------------- */
/* Quatre portraits en vague : les profils pairs sont décalés et glissent
   à contre-temps au défilement. */

.equipe-tete { align-items: flex-end; }
.equipe-tete .tete-texte { max-width: 560px; }
.equipe-tete-droite { max-width: 450px; }
.equipe-tete-droite .chapeau { margin-top: 0; font-size: 14.5px; }
.equipe-tete-droite .lien-fleche { margin-top: 14px; }
.equipe-profils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.profil:nth-child(even) { margin-top: 48px; }
.profil-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background: var(--fond-doux);
}
.profil-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.profil:hover .profil-photo img { transform: scale(1.04); }
/* Trait rouge qui se déploie sous la photo au survol. */
.profil-photo::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: var(--rouge);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.profil:hover .profil-photo::after { transform: scaleX(1); }
.profil-sans-photo {
  display: grid; place-content: center; justify-items: center; gap: 10px;
  background: var(--aubergine) radial-gradient(circle at 75% 20%, rgba(239, 1, 48, .45), transparent 55%);
  color: var(--blanc);
}
.profil-initiales { font-family: var(--titres); font-size: clamp(44px, 5vw, 72px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.profil-legende { font-size: 12px; opacity: .7; }
.profil-texte { padding-top: 20px; }
.profil h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; transition: color .25s; }
.profil:hover h3 { color: var(--rouge); }
.profil-role { margin-top: 4px; color: var(--aubergine); font-size: 13.5px; font-weight: 500; }
.profil-bio { margin-top: 10px; font-size: 14px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.etiquettes li {
  padding: 3px 10px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--fond-doux);
  color: var(--aubergine); font-size: 12px;
}

/* --- Industries --------------------------------------------------------- */

.grille-industries { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.industrie { display: flex; flex-direction: column; min-width: 0; }
.industrie .carte-image { aspect-ratio: 4 / 5; }
.industrie h3 { margin-top: 18px; font-size: 16px; }
.industrie p:not(.lien-fleche) { margin-top: 6px; font-size: 13.5px; flex: 1; }

/* --- Projets & références ----------------------------------------------- */

.projets-grille { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
.projets-texte .wp-block-buttons { margin-top: 30px; }
.situations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.situation {
  padding: 28px;
  border: 1px solid var(--trait); border-radius: 14px;
  background: var(--blanc);
  transition: border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.situation:hover { border-color: #C9D5E6; box-shadow: var(--ombre-douce); transform: translateY(-4px); }
.situation h3 { margin-top: 20px; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.situation p { margin-top: 8px; font-size: 14px; }
.situation.a-pastille { --pastille-x: 28px; --pastille-y: 28px; }

/* --- Blog --------------------------------------------------------------- */

.article { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: center; }
.article-image { aspect-ratio: 16 / 9; border-radius: 12px; }
.article-categorie { font-size: 12.5px; color: var(--violet); }
.article h3 { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.article h3 a { transition: color .2s; }
.article h3 a:hover { color: var(--rouge); }
.article-texte > p:not(.article-categorie):not(.article-meta) { margin-top: 14px; font-size: 14.5px; }
.article-meta { margin-top: 16px; font-size: 13px; color: var(--violet-clair); }
.article .lien-fleche { margin-top: 18px; }
.article:hover .carte-image img { transform: scale(1.04); }

/* --- FAQ ---------------------------------------------------------------- */

.faq-grille { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.faq { margin-top: 34px; display: grid; gap: 12px; }
.faq-q {
  position: relative;
  width: 100%;
  min-height: 52px;
  padding: 15px 56px 15px 20px;
  border: 1px solid var(--trait); border-radius: 10px;
  background: var(--blanc);
  color: var(--aubergine);
  font-family: var(--titres); font-size: 15px; font-weight: 600; line-height: 1.4; text-align: left;
  cursor: pointer; user-select: none;
  transition: background-color .25s, border-color .25s, color .25s;
}
.faq-q::before, .faq-q::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 14px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: currentColor;
  transition: transform .3s;
}
.faq-q::after { transform: rotate(90deg); }
.faq-q:hover { border-color: var(--rouge); }
.est-ouvert > .faq-q { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.est-ouvert > .faq-q::after { transform: rotate(0); }
.faq-r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-r > div { overflow: hidden; min-height: 0; }
.faq-r p {
  margin-top: 8px;
  padding: 18px 20px;
  border: 1px solid var(--trait); border-radius: 10px;
  font-size: 14px;
}
.faq-r a { color: var(--rouge); font-weight: 500; }
.est-ouvert > .faq-r { grid-template-rows: 1fr; }

.faq-visuel { position: relative; isolation: isolate; padding: 0 0 36px 36px; }
.faq-visuel::before {
  content: ''; position: absolute; inset: 22% 14% 0 0; z-index: -1;
  border-radius: 20px;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
}
.faq-visuel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 14px; box-shadow: var(--ombre-douce); }

/* --- Appel à l'action --------------------------------------------------- */

.section-cta { padding-top: calc(var(--espace-section) + 8px); }
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(56px, 7vw, 92px) clamp(20px, 4vw, 32px);
  border-radius: 24px;
  background: var(--rouge);
  color: var(--blanc);
  text-align: center;
}
/* Les filets courbes discrets du bloc rouge de la référence. */
.cta::before, .cta::after {
  content: ''; position: absolute; z-index: -1;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
}
.cta::before { width: 620px; height: 620px; left: -260px; top: -330px; box-shadow: 0 0 0 70px rgba(255, 255, 255, .025); }
.cta::after { width: 520px; height: 520px; right: -200px; bottom: -330px; box-shadow: 0 0 0 60px rgba(255, 255, 255, .03); }
.cta-etiquette {
  display: inline-block; padding: 5px 14px; margin-bottom: 22px;
  border-radius: 999px; background: rgba(255, 255, 255, .16);
  font-size: 12px; font-weight: 500;
}
.titre-cta {
  max-width: 15em; margin-inline: auto;
  color: var(--blanc);
  font-size: clamp(28px, 2.6vw + 14px, 50px); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em;
}
.cta-texte { max-width: 520px; margin: 20px auto 34px; color: rgba(255, 255, 255, .86); font-size: 15.5px; }
.cta .wp-block-buttons { justify-content: center; }
.cta.est-visible .bouton-blanc > .wp-block-button__link { animation: halo 1.8s ease-out .5s 2; }
@keyframes halo {
  from { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
  to { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); }
}

/* --- Contact ------------------------------------------------------------ */

.section-contact { padding-bottom: var(--espace-section); }
.contact-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 64px); align-items: start; }
.coordonnees { margin-top: 34px; display: grid; gap: 20px; }
.coordonnees li {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: center;
  color: var(--aubergine); font-size: 15px; font-weight: 500;
  overflow-wrap: anywhere;
}
.coordonnees li::before {
  content: ''; grid-row: span 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--rouge) var(--icone-blanche, none) center / 18px no-repeat;
}
.coordonnees em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--violet); }
.coordonnees a { transition: color .2s; }
.coordonnees a:hover { color: var(--rouge); }
.coordonnees li:nth-child(1) { --icone-blanche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.coordonnees li:nth-child(2) { --icone-blanche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.coordonnees li:nth-child(3) { --icone-blanche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.coordonnees li:nth-child(4) { --icone-blanche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

.formulaire {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--trait); border-radius: 16px;
  background: var(--blanc);
  box-shadow: var(--ombre-douce);
}
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-bottom: 26px; }
.champ-large { grid-column: 1 / -1; }
.champ label { display: block; margin-bottom: 7px; color: var(--aubergine); font-size: 13px; font-weight: 600; }
.champ abbr { color: var(--rouge); text-decoration: none; }
.champ input:not([type="checkbox"]), .champ select, .champ textarea {
  display: block; width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--trait); border-radius: 10px;
  background: var(--blanc);
  color: var(--aubergine);
  font: inherit; font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
.champ select { appearance: none; padding-right: 40px; background: var(--blanc) no-repeat right 14px center / 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6177' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.champ textarea { resize: vertical; min-height: 128px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--rouge); box-shadow: 0 0 0 4px rgba(239, 1, 48, .1); }
.champ [aria-invalid="true"] { border-color: var(--rouge); }
.champ-erreur { display: block; color: var(--rouge); font-size: 12.5px; line-height: 1.4; }
.champ-erreur:not(:empty) { margin-top: 6px; }
.champ-case { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.champ-case input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--rouge); }
.champ-case label { margin: 0; font-size: 13px; font-weight: 400; color: var(--violet); }
.champ-case .champ-erreur { grid-column: 2; }
.form-statut {
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--trait); border-left: 3px solid var(--rouge); border-radius: 10px;
  background: var(--fond-doux);
  color: var(--aubergine); font-size: 14px;
}

/* --- Pied de page ------------------------------------------------------- */

.pied { border-top: 1px solid var(--trait); padding-top: clamp(48px, 5vw, 72px); }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.pied-marque p { margin-top: 18px; max-width: 330px; font-size: 14px; }
.pied-adresse { color: var(--aubergine); }
.pied-colonne h2 { margin-bottom: 16px; font-size: 15px; font-weight: 600; }
.pied-colonne li { margin-bottom: 10px; font-size: 14px; }
.pied-colonne a { display: inline-block; padding-block: 2px; transition: color .2s; }
.pied-colonne a:hover { color: var(--rouge); }
.pied-social { margin-top: 56px; padding-block: 22px; border-top: 1px solid var(--trait); text-align: center; font-size: 14px; }
.pied-social a { color: var(--aubergine); font-weight: 500; transition: color .2s; }
.pied-social a:hover { color: var(--rouge); }
.pied-bas { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-block: 20px 28px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--violet-clair); }

/* --- Retour en haut ----------------------------------------------------- */

.haut {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--trait); border-radius: 50%;
  background: var(--blanc);
  box-shadow: var(--ombre-douce);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s, background-color .2s;
}
.haut::before {
  content: ''; width: 18px; height: 18px; background: var(--rouge);
  -webkit-mask: var(--i-haut) center / contain no-repeat; mask: var(--i-haut) center / contain no-repeat;
}
/* Paragraphe du pied de page : son lien couvre le disque, son texte reste pour les lecteurs d'écran. */
.haut a { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; color: transparent; font-size: 0; }
.haut.est-visible { opacity: 1; visibility: visible; transform: none; }
.haut:hover { background: var(--rouge); border-color: var(--rouge); }
.haut:hover::before { background: var(--blanc); }

/* ==========================================================================
   Adaptatif — testé à 320, 375, 390, 430, 768, 1024, 1280, 1440 et 1920 px.
   ========================================================================== */

/* En-tête resserré sous 1440 px (la navigation elle-même : megamenu.css). */
@media (max-width: 1439px) {
  .entete-rangee { gap: 12px; }
  .marque img { height: 56px !important; }
  .entete-actions { gap: 12px; }
}
@media (max-width: 1279px) {
  .marque img { height: 56px !important; }
}

@media (max-width: 1100px) {
  .grille-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
  .carte-service, .carte-service.carte-large { grid-column: span 1; }
  .carte-service:last-child { grid-column: 1 / -1; }
  .carte-service:last-child .carte-image { height: clamp(220px, 30vw, 300px); }
  .tete-chiffres { flex-direction: column; align-items: flex-start; }
  .grille-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-industries { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 22px; }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pourquoi-grille { grid-template-columns: minmax(0, 1fr); }
  .pourquoi-visuel { aspect-ratio: 16 / 9; }
  .vedette { grid-template-columns: minmax(0, 1fr); }
  .vedette-texte { padding-left: 0; }
  .projets-grille { grid-template-columns: minmax(0, 1fr); }
  .article { grid-template-columns: minmax(0, 1fr); }
  .faq-grille { grid-template-columns: minmax(0, 1fr); }
  .faq-visuel { max-width: 460px; }
  .contact-grille { grid-template-columns: minmax(0, 1fr); }
}

/* Équipe : deux colonnes sur tablette. */
@media (max-width: 1023px) {
  .equipe-profils { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .profil:nth-child(even) { margin-top: 0; }
  .equipe-tete-droite { max-width: 640px; }
}

/* Héros empilé : le texte d'abord, le schéma centré dessous. */
@media (max-width: 759px) {
  .hero-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hub { justify-self: center; max-width: min(440px, 100%); }
  .titre-hero { font-size: clamp(32px, 6.4vw + 10px, 48px); }
}

@media (max-width: 680px) {
  :root { --haut-entete: 64px; --gouttiere: 20px; }
  .annonce em { display: none; }
  .marque img { height: 48px !important; }
  .entete-actions { gap: 10px; }
  .wp-block-buttons.boutons > .wp-block-button { flex: 1 1 100%; }
  .wp-block-buttons.boutons > .wp-block-button > .wp-block-button__link { width: 100%; }
  .tete-section { flex-direction: column; align-items: flex-start; }
  .techno-liste { gap: 40px; padding-right: 40px; animation-duration: 30s; }
  .techno-liste li { font-size: 15px; }
  .pourquoi-grille { padding: 24px 20px 28px; border-radius: 18px; gap: 28px; }
  .grille-services, .grille-packs, .situations { grid-template-columns: minmax(0, 1fr); }
  .carte-service:last-child { grid-column: auto; }
  .carte-service .carte-image, .carte-service:last-child .carte-image { height: auto; aspect-ratio: 16 / 10; }
  /* Quatre chiffres : deux par rangée sur téléphone. */
  .chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .pack-vitrine { min-height: 300px; }
  .equipe-profils { gap: 32px 14px; }
  .profil-texte { padding-top: 14px; }
  .profil h3 { font-size: 16px; }
  .profil-role { font-size: 12.5px; }
  .profil-bio { font-size: 13px; }
  .etiquettes li { padding: 2px 8px; font-size: 11px; }
  /* Industries : rail horizontal au doigt, la carte suivante dépasse pour le signaler. */
  .grille-industries {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere) 12px;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .grille-industries::-webkit-scrollbar { display: none; }
  .industrie { flex: 0 0 min(76%, 300px); scroll-snap-align: start; }
  .faq-q { font-size: 14.5px; padding-left: 16px; }
  .faq-visuel { padding: 0 0 24px 24px; }
  .champs { grid-template-columns: minmax(0, 1fr); }
  .pied-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; }
  .pied-marque { grid-column: 1 / -1; }
  .pied-bas { flex-direction: column; }
  .haut { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* Équipe sur petit téléphone : profils compacts, photo à gauche. */
@media (max-width: 480px) {
  .equipe-profils { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .profil { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--trait); border-radius: 14px; }
  .profil-photo { border-radius: 10px; }
  .profil-initiales { font-size: 32px; }
  .profil-legende { font-size: 10px; }
  .profil-texte { padding-top: 2px; }
}

@media (max-width: 400px) {
  .puce { padding: 5px 11px; font-size: 11.5px; }
  .chiffres { gap: 18px; }
  .profil { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); }
  .langues { font-size: 12px; }
}

@media (min-width: 1920px) {
  .wrap { max-width: 1320px; }
}

/* ==========================================================================
   Animations liées au défilement
   - .sda : le navigateur gère animation-timeline (Chrome, Edge, Safari 26+) :
     tout est déclaratif, lié à la position et réversible à la remontée.
   - .no-sda : repli JavaScript (IntersectionObserver + variables CSS).
   Rien ne bouge si l'utilisateur a demandé moins d'animations.
   Seuls transform, translate, scale, opacity et clip-path sont animés :
   aucun décalage de mise en page.
   ========================================================================== */

/* La barre de progression suit le défilement : ce n'est pas un mouvement autonome. */
.sda .entete::after {
  animation: progression linear both;
  animation-timeline: scroll(root);
}
@keyframes progression { from { scale: 0 1; } to { scale: 1 1; } }

@media (prefers-reduced-motion: no-preference) {

  /* --- Natif ------------------------------------------------------------ */

  /* Apparitions : chaque bloc monte et apparaît à mesure qu'il entre.
     --rang (posé par le script selon la colonne) décale les voisins d'une même rangée. */
  .sda .reveal {
    animation: monter linear both;
    animation-timeline: view();
    animation-range: entry calc(var(--rang, 0) * 7%) cover calc(26% + var(--rang, 0) * 7%);
  }
  .sda .reveal-profondeur { animation-name: profondeur; }

  /* Héros : le titre et les boutons ne bougent pas ; le schéma réagit. */
  .sda .hub-orbites { animation: orbite linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .sda .hub-liens { animation: estomper linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .sda .hub-centre { animation: centre-recul linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .sda .noeud {
    animation: flotter 6s ease-in-out infinite, deriver linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 100vh;
  }
  .sda .noeud:nth-of-type(2n+1) { animation-delay: -2s, 0s; }
  .sda .noeud:nth-of-type(3n+1) { animation-delay: -4s, 0s; }

  /* Transition de section : le panneau « Pourquoi » se déploie en entrant. */
  .sda .panneau {
    animation: deployer linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }

  /* Parallaxe discrète des photos dans leur cadre. */
  .sda .parallaxe { view-timeline-name: --cadre; }
  .sda .parallaxe img {
    scale: 1.14;
    animation: parallaxe linear both;
    animation-timeline: --cadre;
    animation-range: cover;
  }

  /* Équipe : la photo se dévoile par le bas, la colonne paire glisse à contre-temps. */
  .sda .profil-photo {
    animation: rideau linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 34%;
  }
  .sda .equipe-profils .profil:nth-child(even) {
    animation: monter linear both, contre-temps linear both;
    animation-timeline: view(), view();
    animation-range: entry 0% cover 26%, cover 0% cover 100%;
  }

  /* FAQ : le fond et la photo défilent à deux vitesses. */
  .sda .faq-visuel { view-timeline-name: --calques; }
  .sda .faq-visuel::before { animation: fond-lent linear both; animation-timeline: --calques; animation-range: cover; }

  /* Appel final : le bloc rouge s'ouvre, puis son contenu monte. */
  .sda .cta { animation: ouvrir linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .sda .cta > * { animation: monter linear both; animation-timeline: view(); animation-range: entry 15% cover 42%; }

  /* --- Repli JavaScript ------------------------------------------------- */

  .no-sda .reveal {
    opacity: 0; translate: 0 40px;
    transition: opacity .8s ease, translate .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--rang, 0) * 90ms);
  }
  .no-sda .reveal-profondeur { scale: .94; transition-property: opacity, translate, scale; }
  .no-sda .reveal.est-visible { opacity: 1; translate: 0 0; scale: 1; }
  .no-sda .hub-orbites { rotate: calc(var(--defile, 0) * 60deg); }
  .no-sda .hub-liens { opacity: calc(1 - var(--defile, 0) * .6); }
  .no-sda .hub-centre { scale: calc(1 - var(--defile, 0) * .16); }
  .no-sda .noeud {
    translate: calc((var(--x) - 280) * var(--ampleur) * var(--defile, 0)) calc((var(--y) - 280) * var(--ampleur) * var(--defile, 0));
  }
  .no-sda .parallaxe img { scale: 1.14; translate: 0 calc((var(--p, .5) - .5) * 14%); }
  .no-sda .profil-photo { clip-path: inset(100% 0 0 0 round 14px); transition: clip-path 1s cubic-bezier(.2, .7, .2, 1) .1s; }
  .no-sda .profil.est-visible .profil-photo { clip-path: inset(0 0 0 0 round 14px); }
  .no-sda .faq-visuel::before { translate: 0 calc((var(--p, .5) - .5) * -90px); }
  .no-sda .cta { scale: calc(.9 + var(--p-cta, 1) * .1); }
}

@keyframes monter { from { opacity: 0; translate: 0 56px; } to { opacity: 1; translate: 0 0; } }
@keyframes profondeur { from { opacity: 0; translate: 0 72px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes deployer { from { scale: .94; opacity: .4; } to { scale: 1; opacity: 1; } }
@keyframes parallaxe { from { translate: 0 -6%; } to { translate: 0 6%; } }
@keyframes rideau { from { clip-path: inset(100% 0 0 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
@keyframes contre-temps { from { transform: translateY(48px); } to { transform: translateY(-32px); } }
@keyframes fond-lent { from { translate: 0 48px; } to { translate: 0 -40px; } }
@keyframes ouvrir { from { scale: .88; opacity: .35; } to { scale: 1; opacity: 1; } }
@keyframes orbite { to { rotate: 60deg; } }
@keyframes estomper { to { opacity: .4; } }
@keyframes centre-recul { to { scale: .84; } }
@keyframes deriver {
  to { translate: calc((var(--x) - 280) * var(--ampleur)) calc((var(--y) - 280) * var(--ampleur)); }
}

/* Sans colonne décalée, plus de contre-temps sur les profils pairs. */
@media (max-width: 1023px) {
  .sda .equipe-profils .profil:nth-child(even) {
    animation: monter linear both;
    animation-timeline: view();
    animation-range: entry calc(var(--rang, 0) * 7%) cover calc(26% + var(--rang, 0) * 7%);
  }
}

/* Sur téléphone, le rail des industries défile à l'horizontale : pas de parallaxe verticale. */
@media (max-width: 680px) {
  .sda .grille-industries .reveal, .sda .grille-industries .parallaxe img { animation: none; }
  .no-sda .grille-industries .reveal { opacity: 1; translate: 0 0; }
  .grille-industries .parallaxe img { scale: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sda .entete::after { animation: progression linear both !important; animation-timeline: scroll(root) !important; }
}


/* ##########################################################################
   Source : maquette/ecosysteme.css
   ########################################################################## */

/* ==========================================================================
   Section « Tous vos processus. Un seul écosystème. »
   Isolée : toutes les classes portent le préfixe eco-, rien n'est partagé
   avec le héros. Seuls les jetons (:root), .wrap, .surtitre et .bouton
   viennent de styles.css.

   Chorégraphie pilotée par le défilement : chaque .eco-anim porte --debut et
   --fin, fractions (0 → 1) de la progression de la section.
   - Grand écran : la scène reste épinglée pendant que l'on fait défiler
     la piste ; la progression est celle de la piste (contain).
   - Tablette, mobile, écran bas : pas d'épinglage ; la progression est
     celle du diagramme qui traverse l'écran (cover 0 → 50 %).
   ========================================================================== */

.eco {
  --eco-course: 860px;
  --eco-trait: rgba(239, 1, 48, .3);
  --eco-orbite: rgba(107, 97, 119, .2);
  --eco-pastille: rgba(239, 1, 48, .08);
  padding-top: clamp(12px, 2vw, 24px);
}

.eco-panneau {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .78fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid #E8EEF7;
  border-radius: 22px;
  background: var(--fond-doux);
}
.eco-diagramme { order: -1; }
.eco-texte { max-width: 420px; }
.eco-titre {
  font-size: clamp(30px, 1.6vw + 18px, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.eco-titre mark { display: block; }
.eco-description { margin-top: 18px; font-size: 15px; }
.eco-action { margin-top: 28px; }

/* --- Diagramme orbital -------------------------------------------------- */

.eco-diagramme {
  position: relative;
  aspect-ratio: 1000 / 640;
  container-type: inline-size;
}
.eco-liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco-orbite { fill: none; stroke: var(--eco-orbite); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eco-orbite-int { stroke: rgba(239, 1, 48, .14); }
.eco-trait { stroke: var(--eco-trait); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Impulsions qui circulent des modules vers le noyau, une fois tout connecté. */
.eco-flux line {
  stroke: var(--rouge);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .03 .97;
  animation: eco-flux 3s linear infinite;
  animation-delay: var(--retard, 0s);
}

.eco-noyau {
  position: absolute; left: 50%; top: 50%;
  width: 19%; aspect-ratio: 1;
  translate: -50% -50%;
  display: grid; place-content: center; text-align: center;
  border: 2px solid var(--rouge);
  border-radius: 50%;
  background: var(--blanc);
  box-shadow:
    0 0 0 1.6cqw rgba(239, 1, 48, .07),
    0 0 0 3.4cqw rgba(239, 1, 48, .035),
    0 22px 40px -22px rgba(239, 1, 48, .55);
}
.eco-noyau strong {
  color: var(--aubergine);
  font-family: var(--titres); font-size: clamp(15px, 2.7cqw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
}
.eco-noyau em { display: block; font-style: normal; margin-top: 3px; color: var(--rouge); font-size: clamp(9px, 1.3cqw, 12px); font-weight: 600; line-height: 1.2; }
/* Le halo pulsant est un pseudo-élément du noyau. */
.eco-noyau::before {
  content: '';
  position: absolute; inset: -12%;
  border: 1px solid rgba(239, 1, 48, .3);
  border-radius: 50%;
  animation: eco-pouls 3.2s ease-out infinite;
  pointer-events: none;
}

.eco-modules { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.eco-module {
  --dx: calc((500 - var(--x)) * .035cqw);
  --dy: calc((320 - var(--y)) * .035cqw);
  position: absolute;
  left: calc(var(--x) / 1000 * 100%);
  top: calc(var(--y) / 640 * 100%);
  translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: 0 10px 24px -16px rgba(24, 4, 43, .35);
  color: var(--aubergine);
  font-family: var(--titres); font-size: clamp(12px, 1.75cqw, 14.5px); font-weight: 600; line-height: 1.2;
  white-space: nowrap;
  transition: border-color .25s, box-shadow .25s;
}
.eco-module::before {
  content: '';
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--eco-pastille) var(--icone) center / 16px no-repeat;
  transition: background-color .25s;
}
.eco-module:hover { border-color: rgba(239, 1, 48, .45); box-shadow: 0 14px 30px -16px rgba(239, 1, 48, .5); }
.eco-module:hover::before { background-color: rgba(239, 1, 48, .16); }

.eco-m-finances { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF0130' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M7 9.5v5M17 9.5v5'/%3E%3C/svg%3E"); }
.eco-m-crm { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF0130' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M15.5 15a5 5 0 0 1 5.5 5'/%3E%3C/svg%3E"); }
.eco-m-filiales { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF0130' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l6-4v17M11 21V10h8v11'/%3E%3Cpath d='M8 10h.01M8 14h.01M15 14h.01M15 18h.01'/%3E%3C/svg%3E"); }
.eco-m-ecommerce { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF0130' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.4h11.2L21 7H6'/%3E%3C/svg%3E"); }
.eco-m-stocks { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF0130' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E"); }
.eco-m-projets { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF0130' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M8 12h12M6 18h8'/%3E%3Cpath d='M4 3v18'/%3E%3C/svg%3E"); }
.eco-m-analytique { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF0130' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M11 20V5M17 20v-6M3 20h18'/%3E%3C/svg%3E"); }
.eco-m-integrations { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF0130' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }

/* Petit diagramme : modules plus compacts pour garder l'orbite lisible. */
@container (max-width: 640px) {
  .eco-module { gap: 7px; padding: 5px 12px 5px 5px; font-size: 11.5px; }
  .eco-module::before { width: 24px; height: 24px; background-size: 13px; }
}

/* Écran moyen : le diagramme prend davantage de place que le texte. */
@media (max-width: 1279px) {
  .eco-panneau { grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); }
}

/* --- Tablette : texte au-dessus, orbite resserrée sur toute la largeur -- */

@media (max-width: 1023px) {
  .eco-panneau { grid-template-columns: minmax(0, 1fr); }
  .eco-diagramme { order: 0; width: 100%; max-width: 760px; justify-self: center; }
  .eco-texte { max-width: 600px; }
}

/* --- Mobile : le noyau en tête, les modules branchés sur un axe vertical - */

@media (max-width: 767px) {
  .eco-panneau { padding: 28px 16px 32px; border-radius: 18px; gap: 36px; }
  .eco-diagramme { aspect-ratio: auto; container-type: normal; display: grid; justify-items: center; gap: 30px; }
  .eco-liens { display: none; }
  .eco-noyau { position: relative; left: auto; top: auto; translate: none; width: 138px; box-shadow: 0 0 0 10px rgba(239, 1, 48, .07), 0 0 0 20px rgba(239, 1, 48, .035), 0 22px 40px -22px rgba(239, 1, 48, .55); }
  .eco-noyau strong { font-size: 21px; }
  .eco-noyau em { font-size: 11px; }
  .eco-modules { position: relative; inset: auto; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
  .eco-modules::before {
    content: ''; position: absolute; left: 50%; top: -30px; bottom: 24px;
    width: 2px; margin-left: -1px;
    background: linear-gradient(var(--eco-trait), rgba(239, 1, 48, .12));
    transform-origin: 50% 0;
  }
  .eco-module {
    position: relative; left: auto; top: auto; translate: none;
    min-height: 50px;
    padding: 6px 10px 6px 6px; gap: 8px;
    border-radius: 14px;
    font-size: 12.5px;
    white-space: normal;
    --dy: 0px;
  }
  .eco-module:nth-child(odd) { --dx: -22px; }
  .eco-module:nth-child(even) { --dx: 22px; }
  .eco-module::before { width: 28px; height: 28px; background-size: 14px; }
  .eco-module::after { content: ''; position: absolute; top: 50%; width: 13px; height: 2px; margin-top: -1px; background: var(--eco-trait); }
  .eco-module:nth-child(odd)::after { right: -14px; transform-origin: 100% 50%; }
  .eco-module:nth-child(even)::after { left: -14px; transform-origin: 0 50%; }
}

/* Très petits écrans : icône au-dessus du libellé pour que tout tienne. */
@media (max-width: 380px) {
  .eco-module { flex-direction: column; justify-content: center; text-align: center; padding: 10px 6px; gap: 6px; }
}

/* --- Animations liées au défilement ------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* Natif — défilement libre (tablette, mobile, écran bas). */
  .sda .eco-noyau { animation: eco-noyau linear both; }
  .sda .eco-orbite, .sda .eco-trait { animation: eco-tracer linear both; }
  .sda .eco-module { animation: eco-module linear both; }
  .sda .eco-flux { animation: eco-apparaitre linear both; }
  .sda .eco-texte .eco-anim { animation: eco-texte linear both; }
  .sda .eco-modules::before { animation: eco-axe linear both; }
  .sda .eco-module::after { animation: eco-connecteur linear both; }

  .sda .eco-diagramme { view-timeline-name: --eco; }
  .sda .eco-diagramme .eco-anim {
    animation-timeline: --eco;
    animation-range: cover calc(var(--debut) * 50%) cover calc(var(--fin) * 50%);
  }
  .sda .eco-texte .eco-anim { animation-timeline: view(); animation-range: entry 0% cover 30%; }
  .sda .eco-modules::before { animation-timeline: --eco; animation-range: cover 7% cover 30%; }
  .sda .eco-module::after {
    animation-timeline: --eco;
    animation-range: cover calc((var(--debut) + .06) * 50%) cover calc((var(--fin) + .06) * 50%);
  }

  /* Repli JavaScript : ecosysteme.js pose --eco-p (0 → 1). */
  .no-sda .eco-anim { --k: clamp(0, (var(--eco-p, 1) - var(--debut)) / (var(--fin) - var(--debut)), 1); }
  .no-sda .eco-noyau { opacity: var(--k); scale: calc(.55 + .45 * var(--k)); }
  .no-sda .eco-orbite, .no-sda .eco-trait { stroke-dashoffset: calc(1 - var(--k)); }
  .no-sda .eco-module {
    opacity: var(--k);
    transform: translate(calc((1 - var(--k)) * var(--dx)), calc((1 - var(--k)) * var(--dy))) scale(calc(.86 + .14 * var(--k)));
  }
  .no-sda .eco-flux { opacity: var(--k); }
  .no-sda .eco-texte .eco-anim { opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 26px)); }
  .no-sda .eco-modules::before { scale: 1 clamp(0, (var(--eco-p, 1) - .14) / .46, 1); }
  .no-sda .eco-module::after { scale: clamp(0, (var(--eco-p, 1) - var(--debut) - .06) / (var(--fin) - var(--debut)), 1) 1; }
}

/* Grand écran : la scène s'épingle, la piste donne la course du défilement. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) and (min-height: 700px) {
  .js .eco-piste { height: calc(100svh + var(--eco-course)); }
  .js .eco-scene {
    position: sticky; top: var(--haut-entete);
    height: calc(100svh - var(--haut-entete));
    display: grid; align-items: center;
  }
  .sda .eco-piste { view-timeline-name: --eco; }
  .sda .eco-diagramme { view-timeline-name: none; }
  /* La chorégraphie démarre avant l'épinglage (-85 % de la course), dès que
     le panneau entre à l'écran, pour ne jamais montrer un panneau vide. */
  .sda .eco-anim,
  .sda .eco-diagramme .eco-anim,
  .sda .eco-texte .eco-anim {
    animation-timeline: --eco;
    animation-range: contain calc(-85% + var(--debut) * 185%) contain calc(-85% + var(--fin) * 185%);
  }
}

@keyframes eco-noyau { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }
@keyframes eco-tracer { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes eco-module { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes eco-apparaitre { from { opacity: 0; } to { opacity: 1; } }
@keyframes eco-texte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes eco-axe { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes eco-connecteur { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes eco-flux { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes eco-pouls { from { opacity: .8; scale: .9; } to { opacity: 0; scale: 1.35; } }


/* ##########################################################################
   Source : maquette/megamenu.css
   ########################################################################## */

/* ==========================================================================
   Navigation principale — mega menus
   Entrées, ordre, intitulés et URL repris à l'identique du menu en ligne
   (suitevise.com). Préfixes : menu-, mega-. Comportement : megamenu.js.
   ========================================================================== */

/* Icônes du menu, déclarées à la racine : les pages internes les réutilisent. */
:root {
  --m-integration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E");
  --m-amoa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --m-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 8-4 4 4 4M16 8l4 4-4 4M14 5l-4 14'/%3E%3C/svg%3E");
  --m-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 20a4 4 0 0 1-4 2h-2'/%3E%3C/svg%3E");
  --m-mallette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E");
  --m-fenetre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 13l-2 2 2 2M12 17h4'/%3E%3C/svg%3E");
  --m-camion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
  --m-usine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10l6 4v-4l6 4V4h4v17z'/%3E%3Cpath d='M7 17h2M13 17h2'/%3E%3C/svg%3E");
  --m-tasse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16 10h1.5a2.5 2.5 0 0 1 0 5H16M8 3v3M12 3v3'/%3E%3C/svg%3E");
  --m-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E");
  --m-fiole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L5 18a2 2 0 0 0 1.8 3h10.4A2 2 0 0 0 19 18l-5-9V3'/%3E%3Cpath d='M7.5 14h9'/%3E%3C/svg%3E");
  --m-boutique: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
  --m-barres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M11 20V5M17 20v-6M3 20h18'/%3E%3C/svg%3E");
  --m-billet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M7 9.5v5M17 9.5v5'/%3E%3C/svg%3E");
  --m-panier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.4h11.2L21 7H6'/%3E%3C/svg%3E");
  --m-clients: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M15.5 15a5 5 0 0 1 5.5 5'/%3E%3C/svg%3E");
  --m-filiales: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l6-4v17M11 21V10h8v11'/%3E%3C/svg%3E");
  --m-boite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E");
  --m-gantt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v18M4 6h9M8 12h12M6 18h8'/%3E%3C/svg%3E");
  --m-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}

.menu {
  align-self: stretch;
  display: flex;
  min-width: 0;
}

/* --- Barre principale --------------------------------------------------- */

.menu-liste { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Chaque entrée occupe toute la hauteur de l'en-tête : la souris passe du
   libellé au panneau sans « trou » qui refermerait le menu. */
.menu-item { display: flex; align-items: center; }
.menu-lien {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: var(--aubergine);
  font-family: var(--texte); font-size: 14px; font-weight: 500; line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s;
}
/* Trait rouge qui se déploie sous l'entrée survolée, ouverte ou courante. */
.menu-lien::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; border-radius: 2px;
  background: var(--rouge);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.menu-lien:hover,
.menu-lien.est-actif,
.est-courant > .menu-lien,
.a-mega.est-ouvert > .menu-lien { color: var(--rouge); }
.menu-lien:hover::after,
.menu-lien.est-actif::after,
.est-courant > .menu-lien::after,
.a-mega.est-ouvert > .menu-lien::after { transform: scaleX(1); }
.est-courant > .mega-bascule { color: var(--rouge); }
/* Les entrées sont des paragraphes (blocs) : leur lien couvre toute l'entrée. */
.menu-lien a::before, .menu-contact a::before { content: ''; position: absolute; inset: 0; }
.menu-lien a, .menu-contact a { color: inherit; }
.menu-contact { position: relative; }
.mega-libelle a::before { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.mega-declencheur { user-select: none; }

.mega-chevron {
  width: 12px; height: 12px;
  background: currentColor; opacity: .75;
  -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.a-mega.est-ouvert .mega-chevron { transform: rotate(180deg); }
/* « Industries » garde son lien vers /industries/ : le chevron est un bouton à part. */
.menu-lien-parent { padding-right: 2px; }
.menu-lien-parent::after { right: 0; }
.mega-bascule {
  display: grid; place-items: center;
  width: 26px; height: 32px; margin-right: 6px;
  padding: 0; border: 0; border-radius: 8px;
  background: none;
  color: var(--aubergine);
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.mega-bascule:hover, .a-mega.est-ouvert > .mega-bascule { color: var(--rouge); }

.menu-item-contact { margin-left: 8px; }
.menu-contact {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px 10px 10px;
  border-radius: 999px;
  background: var(--rouge);
  color: var(--blanc);
  font-size: 13.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap;
  transition: background-color .25s, box-shadow .25s, transform .25s;
}
.menu-contact::before {
  content: '';
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .2) center / 13px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}
.menu-contact:hover { background: var(--rouge-fonce); box-shadow: var(--ombre-rouge); transform: translateY(-1px); }

/* --- Panneaux --------------------------------------------------------- */

/* Le panneau se place sous tout l'en-tête (premier ancêtre positionné). */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 10px var(--gouttiere) 0;
  opacity: 0; visibility: hidden; translate: 0 -8px;
  pointer-events: none;
  /* visibility bascule à la fin de la fermeture, mais tout de suite à
     l'ouverture : le panneau peut recevoir le focus clavier immédiatement. */
  transition: opacity .22s ease, translate .32s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .22s;
}
.a-mega.est-ouvert > .mega,
html:not(.js) .a-mega:hover > .mega,
html:not(.js) .a-mega:focus-within > .mega { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition-delay: 0s; }

.mega-cadre {
  max-width: 1192px;
  margin-inline: auto;
  display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 8px;
  padding: 10px;
  border: 1px solid var(--trait);
  border-radius: 18px;
  background: var(--blanc);
  box-shadow: 0 32px 64px -32px rgba(24, 4, 43, .38), 0 10px 24px -14px rgba(24, 4, 43, .14);
}
.mega-intro {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 24px 22px;
  border-radius: 12px;
  background: var(--fond-doux);
}
/* Filet courbe discret, rappel du bloc rouge de la page. */
.mega-intro::after {
  content: ''; position: absolute; right: -70px; bottom: -90px;
  width: 200px; height: 200px; border-radius: 50%;
  border: 1px solid rgba(239, 1, 48, .16);
  box-shadow: 0 0 0 26px rgba(239, 1, 48, .03);
}
.mega-titre { color: var(--aubergine); font-family: var(--titres); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.mega-texte { margin-top: 8px; font-size: 13.5px; line-height: 1.55; }
.mega-signature {
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--rouge); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.mega-signature::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--rouge); }

.mega-liste {
  --colonnes: 2;
  display: grid; grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  align-content: start; align-items: start; gap: 4px;
  margin: 0; padding: 6px; list-style: none;
}
.mega-liste-4 { --colonnes: 4; }

.mega-lien {
  position: relative;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--aubergine);
  transition: background-color .2s;
}
/* Pastille (::before) et icône (::after) séparées pour pouvoir changer
   la couleur de l'une et de l'autre au survol. */
.mega-lien::before {
  content: ''; grid-row: 1 / span 2;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(239, 1, 48, .08);
  transition: background-color .25s, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.mega-lien::after {
  content: ''; position: absolute; left: 26px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  background: var(--rouge);
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
  transition: background-color .25s;
}
.mega-libelle {
  font-family: var(--titres); font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  transition: color .2s;
}
.mega-libelle::after {
  content: '→';
  display: inline-block; margin-left: 6px;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .25s;
}
.mega-desc { grid-column: 2; margin-top: 2px; color: var(--violet); font-size: 12.5px; line-height: 1.45; }
.mega-lien:hover, .mega-lien:focus-within { background: var(--fond-doux); }
.mega-lien:hover::before, .mega-lien:focus-within::before { background: var(--rouge); transform: scale(1.04); }
.mega-lien:hover::after, .mega-lien:focus-within::after { background: var(--blanc); }
.mega-lien:hover .mega-libelle, .mega-lien:focus-within .mega-libelle { color: var(--rouge); }
.mega-lien:hover .mega-libelle::after, .mega-lien:focus-within .mega-libelle::after { opacity: 1; transform: none; }
/* Page en cours : la tuile reste marquée. */
.mega-lien.est-actif { background: var(--fond-doux); }
.mega-lien.est-actif .mega-libelle { color: var(--rouge); }

/* Les entrées arrivent en léger décalé à l'ouverture. */
.a-mega.est-ouvert .mega-liste > * { animation: mega-entree .38s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms + 40ms); }
.mega-liste > *:nth-child(2) { --i: 1; }
.mega-liste > *:nth-child(3) { --i: 2; }
.mega-liste > *:nth-child(4) { --i: 3; }
.mega-liste > *:nth-child(5) { --i: 4; }
.mega-liste > *:nth-child(6) { --i: 5; }
.mega-liste > *:nth-child(7) { --i: 6; }
.mega-liste > *:nth-child(8) { --i: 7; }
@keyframes mega-entree { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

.mega-i-integration { --icone: var(--m-integration); }
.mega-i-amoa { --icone: var(--m-amoa); }
.mega-i-code { --icone: var(--m-code); }
.mega-i-support { --icone: var(--m-support); }
.mega-i-services { --icone: var(--m-mallette); }
.mega-i-logiciel { --icone: var(--m-fenetre); }
.mega-i-distribution { --icone: var(--m-camion); }
.mega-i-fabrication { --icone: var(--m-usine); }
.mega-i-alimentation { --icone: var(--m-tasse); }
.mega-i-sante { --icone: var(--m-coeur); }
.mega-i-sciences { --icone: var(--m-fiole); }
.mega-i-commerce { --icone: var(--m-boutique); }
.mega-i-analytique { --icone: var(--m-barres); }
.mega-i-finances { --icone: var(--m-billet); }
.mega-i-ecommerce { --icone: var(--m-panier); }
.mega-i-crm { --icone: var(--m-clients); }
.mega-i-filiales { --icone: var(--m-filiales); }
.mega-i-stocks { --icone: var(--m-boite); }
.mega-i-projets { --icone: var(--m-gantt); }

/* --- Écran moyen ------------------------------------------------------- */

@media (max-width: 1279px) {
  .menu-lien { padding-inline: 9px; font-size: 13.5px; }
  .menu-lien::after { left: 9px; right: 9px; }
  .menu-lien-parent { padding-right: 2px; }
  .menu-lien-parent::after { right: 0; }
  .mega-cadre { grid-template-columns: 220px minmax(0, 1fr); }
  .mega-liste-4 { --colonnes: 3; }
}

/* --- Tablette et mobile : panneau plein écran, menus en accordéon ------- */

@media (max-width: 1023px) {
  .burger { display: grid; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: block;
    height: calc(100dvh - var(--haut-entete));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gouttiere) 32px;
    background: var(--blanc);
    border-top: 1px solid var(--trait);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .menu.est-ouvert { opacity: 1; visibility: visible; transform: none; }
  .menu-liste { display: block; max-width: 640px; margin-inline: auto; }
  .menu-item { flex-wrap: wrap; border-bottom: 1px solid var(--trait); }
  .menu-lien { flex: 1; justify-content: space-between; padding: 16px 0; font-size: 16px; text-align: left; }
  .menu-lien::after { display: none; }
  .mega-chevron { width: 16px; height: 16px; }
  .menu-lien-parent { padding-right: 0; }
  .mega-bascule { width: 48px; height: 48px; margin-right: -12px; }
  .mega-bascule .mega-chevron { width: 16px; height: 16px; }
  .mega {
    position: static; flex-basis: 100%;
    display: none;
    padding: 0 0 12px;
    opacity: 1; visibility: visible; translate: none; pointer-events: auto;
    transition: none;
  }
  .a-mega.est-ouvert > .mega { display: block; }
  .mega-cadre { display: block; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .mega-intro { display: none; }
  .mega-liste, .mega-liste-4 { --colonnes: 1; padding: 0; gap: 2px; }
  .mega-lien { min-height: 0; grid-template-columns: 34px minmax(0, 1fr); padding: 9px 8px; }
  .mega-lien::before { width: 34px; height: 34px; border-radius: 9px; }
  .mega-lien::after { left: 17px; }
  .mega-desc { display: none; }
  .mega-libelle { font-size: 14.5px; }
  .menu-item-contact { margin: 24px 0 0; border-bottom: 0; }
  .menu-contact { width: 100%; justify-content: center; padding: 14px 20px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .mega { translate: none; }
}


/* ##########################################################################
   Source : maquette/pages.css
   ########################################################################## */

/* ==========================================================================
   SuiteVise — pages internes (phase 3)
   Mêmes jetons et mêmes composants que l'accueil (styles.css) : ce fichier
   n'ajoute que les gabarits propres aux pages internes, dans le même registre
   (fond blanc froid, panneaux arrondis encartés, un seul accent rouge,
   titres à gauche, boutons pilule).
   ========================================================================== */

:root {
  --i-loupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --i-calendrier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --i-diplome: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2 9 2 12 0v-5M22 9v6'/%3E%3C/svg%3E");
  --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  --i-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --i-pouls: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-5 4 10 2-5h6'/%3E%3C/svg%3E");
  --i-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E");
  --i-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E");
  --i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --i-lecture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m10 8 6 4-6 4z'/%3E%3C/svg%3E");
  --i-cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  --i-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
  --i-dossier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --i-porte-voix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4h4l6 4V6l-6 4z'/%3E%3Cpath d='M16.5 9a4 4 0 0 1 0 6M19 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E");
  --i-liste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6v3H9z'/%3E%3Cpath d='M8 5H6v16h12V5h-2M9 13l2 2 4-4'/%3E%3C/svg%3E");
  --i-equipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Ccircle cx='5' cy='10' r='2'/%3E%3Ccircle cx='19' cy='10' r='2'/%3E%3Cpath d='M7 20a5 5 0 0 1 10 0M2 20a3 3 0 0 1 4-3M22 20a3 3 0 0 0-4-3'/%3E%3C/svg%3E");
}

/* Icônes : les classes posent --icone, la tuile ou la pastille la dessine. */
.ic-integration { --icone: var(--m-integration); }
.ic-amoa { --icone: var(--m-amoa); }
.ic-code { --icone: var(--m-code); }
.ic-support { --icone: var(--m-support); }
.ic-services { --icone: var(--m-mallette); }
.ic-logiciel { --icone: var(--m-fenetre); }
.ic-distribution { --icone: var(--m-camion); }
.ic-fabrication { --icone: var(--m-usine); }
.ic-alimentation { --icone: var(--m-tasse); }
.ic-sante { --icone: var(--m-coeur); }
.ic-sciences { --icone: var(--m-fiole); }
.ic-commerce { --icone: var(--m-boutique); }
.ic-analytique { --icone: var(--m-barres); }
.ic-finances { --icone: var(--m-billet); }
.ic-ecommerce { --icone: var(--m-panier); }
.ic-crm { --icone: var(--m-clients); }
.ic-filiales { --icone: var(--m-filiales); }
.ic-stocks { --icone: var(--m-boite); }
.ic-projets { --icone: var(--m-gantt); }
.ic-cible { --icone: var(--i-cible); }
.ic-badge { --icone: var(--i-badge); }
.ic-reglages { --icone: var(--i-reglages); }
.ic-boucle { --icone: var(--i-boucle); }
.ic-boussole { --icone: var(--i-boussole); }
.ic-courbe { --icone: var(--i-courbe); }
.ic-flux { --icone: var(--i-flux); }
.ic-recu { --icone: var(--i-recu); }
.ic-lien { --icone: var(--i-lien); }
.ic-nuage { --icone: var(--i-nuage); }
.ic-loupe { --icone: var(--i-loupe); }
.ic-calendrier { --icone: var(--i-calendrier); }
.ic-diplome { --icone: var(--i-diplome); }
.ic-globe { --icone: var(--i-globe); }
.ic-horloge { --icone: var(--i-horloge); }
.ic-pouls { --icone: var(--i-pouls); }
.ic-base { --icone: var(--i-base); }
.ic-etoile { --icone: var(--i-etoile); }
.ic-doc { --icone: var(--i-doc); }
.ic-lecture { --icone: var(--i-lecture); }
.ic-cadenas { --icone: var(--i-cadenas); }
.ic-mobile { --icone: var(--i-mobile); }
.ic-dossier { --icone: var(--i-dossier); }
.ic-porte-voix { --icone: var(--i-porte-voix); }
.ic-liste { --icone: var(--i-liste); }
.ic-equipe { --icone: var(--i-equipe); }

/* Tuile d'icône : le motif des mega menus (fond rouge pâle, icône rouge).
   Dessinée par le bloc qui la porte (.a-tuile + .ic-…) : ::before pour la tuile,
   ::after pour l'icône, centrée sur la tuile. --tuile-x / --tuile-y donnent la
   position du coin de la tuile dans le bloc, selon le composant. */
.a-tuile { --tuile: 46px; --tuile-icone: 20px; --tuile-rayon: 12px; position: relative; }
.a-tuile.tuile-petite { --tuile: 38px; --tuile-icone: 17px; --tuile-rayon: 10px; }
.a-tuile::before {
  content: '';
  flex: none;
  display: block;
  width: var(--tuile); height: var(--tuile);
  border-radius: var(--tuile-rayon);
  background: rgba(239, 1, 48, .08);
  transition: background-color .25s, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.a-tuile::after {
  content: ''; position: absolute;
  left: calc(var(--tuile-x, 0px) + (var(--tuile) - var(--tuile-icone)) / 2);
  top: calc(var(--tuile-y, 0px) + (var(--tuile) - var(--tuile-icone)) / 2);
  width: var(--tuile-icone); height: var(--tuile-icone);
  background: var(--rouge);
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat;
  transition: background-color .25s;
  pointer-events: none;
}

/* --- Bandeau de page ----------------------------------------------------- */
/* Panneau encarté comme le bloc « Pourquoi » de l'accueil ; la photo
   déborde par le bas pour donner la profondeur du héros. */

.bandeau { padding-top: clamp(14px, 1.8vw, 24px); }
.bandeau-panneau {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(30px, 4vw, 60px) clamp(22px, 4.4vw, 64px) 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, transparent 0 229px, var(--trait) 230px 231px, transparent 232px),
    radial-gradient(circle at 100% 0, transparent 0 359px, rgba(217, 227, 240, .7) 360px 361px, transparent 362px),
    var(--fond-doux);
}
.bandeau-texte { padding-bottom: clamp(36px, 4.4vw, 64px); min-width: 0; }
.ariane { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 20px; font-size: 12.5px; }
.ariane li { display: inline-flex; align-items: center; gap: 8px; }
.ariane li + li::before { content: '/'; color: var(--violet-clair); }
.ariane a { transition: color .2s; }
.ariane a:hover { color: var(--rouge); }
.ariane li:last-child { color: var(--aubergine); font-weight: 500; }
.titre-page {
  max-width: 14em;
  font-size: clamp(30px, 2.2vw + 14px, 48px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.titre-page mark { display: block; }
.bandeau-chapeau { margin-top: clamp(14px, 1.6vw, 22px); max-width: 520px; font-size: 15.5px; }
.bandeau .wp-block-buttons.boutons { margin-top: clamp(22px, 2.4vw, 32px); }

.bandeau-visuel { position: relative; align-self: end; margin-bottom: -56px; }
.bandeau-visuel figure { overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3.3; box-shadow: var(--ombre-douce); background: var(--trait); }
.bandeau-visuel img { width: 100%; height: 100%; object-fit: cover; }
/* Étiquette posée à cheval sur la photo : tuile à gauche, deux lignes de texte. */
.bandeau-badge {
  position: absolute; left: -28px; bottom: 36px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px;
  max-width: calc(100% - 24px);
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--trait); border-radius: 14px;
  background: var(--blanc);
  box-shadow: var(--ombre-douce);
  font-size: 12px; line-height: 1.4;
}
.bandeau-badge.a-tuile { --tuile-x: 10px; --tuile-y: calc(50% - var(--tuile) / 2); position: absolute; }
.bandeau-badge::before { grid-row: span 2; }
.bandeau-badge strong { display: block; align-self: end; color: var(--aubergine); font-family: var(--titres); font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.bandeau-badge em { display: block; align-self: start; font-style: normal; }

/* Variante sans visuel (contact, blog, pages légales). */
.bandeau-simple .bandeau-panneau { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
.bandeau-simple .titre-page { max-width: 18em; }
.bandeau-simple .bandeau-chapeau { max-width: 640px; }

.apres-bandeau { padding-top: calc(var(--espace-section) + 24px); }
/* La dernière section d'une page interne laisse respirer le pied de page. */
main > :last-child:not(.wp-block-post-content),
.wp-block-post-content:not(.article-contenu) > :last-child { padding-bottom: var(--espace-section); }
.bandeau-simple + .apres-bandeau, .bandeau-simple + .section { padding-top: var(--espace-section); }

/* --- Introduction : titre accroché à gauche, texte long à droite ---------- */

.intro { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.intro-tete { position: sticky; top: calc(var(--haut-entete) + 32px); }
.intro-tete .titre-section { font-size: clamp(26px, 1.2vw + 18px, 38px); }
.intro-tete .lien-fleche, .intro-tete .coches { margin-top: 22px; }
.texte-long { display: grid; gap: 16px; max-width: 640px; font-size: 15.5px; line-height: 1.75; }
.texte-long strong { color: var(--aubergine); font-weight: 600; }
/* Liens de maillage dans le texte courant : même traitement que dans les réponses de la FAQ. */
.texte-long a, .coches a, .point p a, .article-contenu p a, .texte-fin a { color: var(--rouge); font-weight: 500; }

/* Reconnaissance du revenu (page Finances) : du projet aux écritures, en quatre étapes. */
ol.flux-revenu { display: flex; gap: 12px; margin: 0 0 clamp(28px, 3vw, 40px); padding: 0; list-style: none; counter-reset: flux; }
ol.flux-revenu li {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--trait); border-radius: 14px;
  background: var(--fond-doux);
  color: var(--aubergine); font-size: 14px; font-weight: 500; line-height: 1.35;
  counter-increment: flux;
}
ol.flux-revenu li::before {
  content: counter(flux); flex: none;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--rouge); color: var(--blanc); font-size: 12.5px; font-weight: 600;
}
ol.flux-revenu li:not(:last-child)::after {
  content: ''; position: absolute; z-index: 1; right: -10px; top: 50%;
  width: 8px; height: 8px; border-top: 2px solid var(--rouge); border-right: 2px solid var(--rouge);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 900px) {
  ol.flux-revenu { flex-direction: column; gap: 14px; }
  ol.flux-revenu li:not(:last-child)::after { right: auto; left: 25px; top: auto; bottom: -11px; transform: rotate(135deg); }
}
figure.intro-figure { margin-top: 30px; overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; }
.intro-figure img { width: 100%; height: 100%; object-fit: cover; }

/* --- Étapes : frise numérotée qui se remplit au défilement -------------- */

.etapes-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.etapes-cote { position: sticky; top: calc(var(--haut-entete) + 32px); }
.etapes-cote figure { margin-top: 30px; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3.2; }
.etapes-cote img { width: 100%; height: 100%; object-fit: cover; }
.etapes { display: grid; }
.etape { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 24px; padding-bottom: 44px; }
.etape:last-child { padding-bottom: 0; }
.etape::before, .etape::after {
  content: ''; position: absolute; left: 27px; top: 64px; bottom: 8px; width: 2px; border-radius: 2px;
}
.etape::before { background: var(--trait); }
.etape::after { background: var(--rouge); transform-origin: 50% 0; scale: 1 0; }
.etape:last-child::before, .etape:last-child::after { display: none; }
.etape-numero {
  grid-row: span 3;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--trait);
  background: var(--blanc);
  color: var(--rouge);
  font-family: var(--titres); font-size: 15px; font-weight: 700;
}
.etape h3 { padding-top: 14px; font-size: clamp(18px, .5vw + 15px, 21px); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.etape p:not(.etape-numero) { margin-top: 10px; font-size: 14.5px; max-width: 600px; }

/* --- Grille de points (méthodologie, missions, solutions, raisons) ------- */

.grille-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grille-points-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.point {
  display: flex; flex-direction: column;
  padding: 28px;
  border: 1px solid var(--trait); border-radius: 14px;
  background: var(--blanc);
  transition: border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.point:hover { border-color: #C9D5E6; box-shadow: var(--ombre-douce); transform: translateY(-4px); }
.point:hover::before { background: var(--rouge); transform: scale(1.06); }
.point:hover::after { background: var(--blanc); }
.point.a-tuile { --tuile-x: 28px; --tuile-y: 28px; }
.point h3 { margin-top: 20px; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.point p { margin-top: 8px; font-size: 14px; }

/* Section posée sur un panneau doux : varie le poids d'une section à l'autre. */
.section-panneau .panneau-contenu {
  padding: clamp(32px, 4.4vw, 64px) clamp(22px, 4vw, 56px);
  border-radius: 22px;
  background: var(--fond-doux);
}
.section-panneau .point { border-color: transparent; }
.section-panneau .point:hover { border-color: var(--trait); }

/* --- Liste à coches ------------------------------------------------------ */

.coches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 36px; }
.coches-1 { grid-template-columns: minmax(0, 1fr); }
.coches li { position: relative; padding-left: 36px; font-size: 14.5px; }
.coches li::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.coches-espace { margin-top: 30px; }
.texte-fin { margin-top: 26px; max-width: 640px; color: var(--aubergine); font-size: 15px; font-weight: 500; }
.coches strong { display: block; margin-bottom: 2px; color: var(--aubergine); font-family: var(--titres); font-size: 15px; font-weight: 600; }

/* --- Fonctionnalités (pages expertise) ----------------------------------- */

.fonctions-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.fonctions-grille .titre-section { font-size: clamp(26px, 1.2vw + 18px, 38px); }
.fonctions-grille .texte-long { margin-top: 22px; }
.fonctions-carte {
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--trait); border-radius: 18px;
  background: var(--blanc);
  box-shadow: var(--ombre-douce);
}
.fonctions-carte h3 { color: var(--aubergine); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fonctions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.fonction {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px 14px 14px;
  border: 1px solid var(--trait); border-radius: 12px;
  background: var(--blanc);
  color: var(--aubergine);
  font-family: var(--titres); font-size: 14.5px; font-weight: 600; line-height: 1.3;
  transition: border-color .25s, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.fonction:hover { border-color: var(--rouge); transform: translateX(4px); }
.fonction:hover::before { background: var(--rouge); }
.fonction:hover::after { background: var(--blanc); }
.fonction.a-tuile { --tuile-x: 14px; --tuile-y: calc(50% - var(--tuile) / 2); }

/* --- Ressources (fiches techniques, vidéos) ------------------------------ */

.ressources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ressource {
  display: flex; flex-direction: column;
  padding: 26px;
  border: 1px solid var(--trait); border-radius: 14px;
  background: var(--blanc);
  transition: border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.ressource:hover { border-color: #C9D5E6; box-shadow: var(--ombre-douce); transform: translateY(-4px); }
.ressource-type.a-tuile { --tuile-y: calc(50% - var(--tuile) / 2); }
.ressource-type { display: flex; align-items: center; gap: 10px; color: var(--rouge); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ressource h3 { margin-top: 18px; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.ressource p:not(.lien-fleche) { flex: 1; margin-top: 8px; font-size: 14px; }
.ressource .lien-fleche { margin-top: 18px; }
.ressource:only-child { grid-column: 1 / -1; max-width: 760px; }

/* --- Pages sœurs (autres industries, expertises, services) --------------- */

.voisins-bloc {
  display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); align-items: center;
  gap: 22px 40px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--trait); border-radius: 18px;
}
.voisins-bloc h2 { font-size: clamp(22px, .8vw + 16px, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.voisins-bloc h2 + p { margin-top: 8px; font-size: 14px; }
.voisins { display: flex; flex-wrap: wrap; gap: 8px; }
.lien-voisin {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--blanc);
  color: var(--aubergine); font-size: 13.5px; font-weight: 500;
  transition: border-color .2s, color .2s, background-color .2s;
}
.lien-voisin.a-tuile { --tuile: 30px; --tuile-icone: 15px; --tuile-rayon: 50%; --tuile-x: 6px; --tuile-y: calc(50% - 15px); }
.lien-voisin a::before { content: ''; position: absolute; inset: 0; border-radius: 999px; }

.lien-voisin:hover { border-color: var(--rouge); color: var(--rouge); }
.lien-voisin.est-courant { border-color: var(--rouge); background: var(--rouge); color: var(--blanc); }
.lien-voisin.est-courant::before { background: rgba(255, 255, 255, .18); }
.lien-voisin.est-courant::after { background: var(--blanc); }

/* --- Pages de regroupement (services, industries) ------------------------ */

.grille-industries-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 22px; }
.grille-services-2 .carte-service { grid-column: span 3; }
.grille-services-2 .carte-service .carte-image { height: clamp(220px, 21vw, 300px); }

/* --- Packs --------------------------------------------------------------- */

.packs-liste { display: grid; }
.pack-ligne {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, .95fr);
  gap: 24px clamp(28px, 4vw, 56px); align-items: start;
  padding-block: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--trait);
}
.pack-ligne:last-child { border-bottom: 1px solid var(--trait); }
.pack-ligne-numero {
  color: var(--rouge);
  font-family: var(--titres); font-size: clamp(48px, 4vw, 72px); font-weight: 500; line-height: .9; letter-spacing: -0.04em;
}
.pack-ligne h2 { margin-top: 4px; font-size: clamp(26px, 1.2vw + 18px, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -0.022em; }
.pack-ligne .texte-long { margin-top: 16px; font-size: 15px; }
.pack-inclus { padding: 28px; border-radius: 16px; background: var(--fond-doux); }
.pack-inclus h3 { margin-bottom: 18px; font-size: 15px; font-weight: 600; }
.pack-ligne:hover .pack-ligne-numero { translate: 6px 0; }
.pack-ligne-numero { transition: translate .4s cubic-bezier(.2, .7, .2, 1); }

/* --- Why Suitevise ------------------------------------------------------- */

.bande-chiffres {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px;
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 4vw, 56px);
  border: 1px solid var(--trait); border-radius: 18px;
}
.bande-chiffres > p { max-width: 380px; color: var(--aubergine); font-family: var(--titres); font-size: clamp(18px, .5vw + 15px, 22px); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; }
.mission {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 72px);
  border-radius: 22px;
  background: var(--fond-doux);
}
.mission::before {
  content: ''; position: absolute; z-index: -1; right: -120px; top: -180px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid var(--trait); box-shadow: 0 0 0 64px rgba(217, 227, 240, .28);
}
.mission-texte {
  max-width: 24em; margin-top: 4px;
  color: var(--aubergine);
  font-family: var(--titres); font-size: clamp(24px, 1.6vw + 14px, 38px); font-weight: 500; line-height: 1.22; letter-spacing: -0.022em;
  text-wrap: balance;
}
.mission-suite { margin-top: 22px; max-width: 620px; font-size: 15px; }

/* --- Article de blog ----------------------------------------------------- */

/* Liste des articles : même carte que l'accueil, titre de niveau 2. */
.article-titre { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.article-titre a { transition: color .2s; }
.article-titre a:hover { color: var(--rouge); }

.article-meta-bandeau { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; font-size: 13px; }
.article-meta-bandeau > * { display: inline-flex; align-items: center; gap: 8px; }
.article-meta-bandeau > * + *::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--violet-clair); }
.bandeau-texte:has(.article-couverture) { padding-bottom: 0; }
.article-couverture { position: relative; margin-top: clamp(28px, 3vw, 40px); margin-bottom: -64px; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 7.2; box-shadow: var(--ombre-douce); }
.article-couverture img { width: 100%; height: 100%; object-fit: cover; }
.article-corps { display: grid; grid-template-columns: 240px minmax(0, 720px); justify-content: space-between; gap: 48px; align-items: start; }
.sommaire { position: sticky; top: calc(var(--haut-entete) + 32px); }
.sommaire-titre { margin-bottom: 14px; color: var(--aubergine); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sommaire ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--trait); }
.sommaire a {
  display: block; margin-left: -2px; padding: 7px 0 7px 16px;
  border-left: 2px solid transparent;
  font-size: 13.5px; line-height: 1.45;
  transition: color .2s, border-color .2s;
}
.sommaire a:hover { color: var(--aubergine); }
.sommaire a.est-actif { border-left-color: var(--rouge); color: var(--rouge); font-weight: 500; }
.article-contenu { font-size: 16px; line-height: 1.8; }
.article-contenu > p { margin-top: 18px; }
.article-contenu > p:first-child { margin-top: 0; color: var(--aubergine); font-size: 18px; line-height: 1.7; }
.article-contenu h2 { margin-top: 56px; font-size: clamp(22px, .9vw + 16px, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.article-contenu figure { margin-top: 24px; overflow: hidden; border-radius: 12px; }
.article-contenu figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-contenu ul { margin-top: 16px; display: grid; gap: 10px; }
.article-contenu ul li { position: relative; padding-left: 22px; }
.article-contenu ul li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); }
.article-contenu li strong, .article-contenu p strong { color: var(--aubergine); font-weight: 600; }
.encart {
  margin-top: 24px; padding: 20px 24px;
  border-left: 3px solid var(--rouge); border-radius: 0 12px 12px 0;
  background: var(--fond-doux);
  color: var(--aubergine); font-size: 15px; line-height: 1.7;
}
.encart strong { color: var(--rouge); font-weight: 600; }
.article-signature {
  display: flex; align-items: center; gap: 16px;
  margin-top: 56px; padding: 22px 24px;
  border: 1px solid var(--trait); border-radius: 14px;
}
.article-signature img { width: 84px; height: auto; }
.article-signature p { font-size: 14px; }
.article-signature .lien-fleche { margin-top: 4px; }

/* --- Pages légales ------------------------------------------------------- */

.texte-legal { max-width: 760px; }
.texte-legal h2 { margin-top: 44px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p, .texte-legal ul { margin-top: 14px; font-size: 15px; line-height: 1.75; }
.texte-legal ul { display: grid; gap: 8px; }
.texte-legal li { position: relative; padding-left: 20px; }
.texte-legal li::before { content: ''; position: absolute; left: 2px; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--rouge); }
.texte-legal a { color: var(--rouge); font-weight: 500; }
.texte-legal strong { color: var(--aubergine); font-weight: 600; }
/* Information que seul le client peut fournir : visible tant qu'elle manque. */
.texte-legal em {
  font-style: normal;
  padding: 1px 8px;
  border: 1px dashed var(--rouge); border-radius: 6px;
  background: #FFF3F5;
  color: var(--rouge); font-size: .92em; font-weight: 500;
  white-space: nowrap;
}
.note-legale {
  margin-bottom: 36px; padding: 16px 20px;
  border: 1px dashed var(--rouge); border-radius: 12px;
  background: #FFF3F5;
  color: var(--aubergine); font-size: 14px;
}

/* --- 404 ----------------------------------------------------------------- */

.code-erreur { color: var(--rouge); font-family: var(--titres); font-size: clamp(64px, 8vw, 120px); font-weight: 600; line-height: .9; letter-spacing: -0.05em; }

/* --- Pied de page : liens légaux ---------------------------------------- */

.pied-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pied-legal a { transition: color .2s; }
.pied-legal a:hover { color: var(--rouge); }
/* « Gestion des cookies » : un bouton (il rouvre le bandeau), habillé comme les liens voisins. */
.lien-cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transition: color .2s; }
.lien-cookies:hover { color: var(--rouge); }

/* --- Articles : « Résumez cet article avec votre IA » --------------------- */

.resume-ia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-bottom: clamp(28px, 3vw, 40px);
  padding: 18px 22px;
  border: 1px solid var(--trait); border-radius: 16px;
  background: var(--fond-doux);
}
.resume-ia p { margin: 0; }
.resume-ia-titre { color: var(--aubergine); font-family: var(--titres); font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.resume-ia-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.resume-ia-liens a,
.resume-ia-copier {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--blanc); color: var(--aubergine);
  font: 500 13.5px/1.2 var(--texte); text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.resume-ia-liens a:hover, .resume-ia-copier:hover { border-color: var(--rouge); color: var(--rouge); }
.resume-ia-copier { border-style: dashed; }
.resume-ia-etat { flex-basis: 100%; color: var(--violet); font-size: 13px; }
.resume-ia-etat:empty { display: none; }
@media (max-width: 680px) {
  .resume-ia { padding: 16px; }
  .resume-ia-titre { flex-basis: 100%; }
}

/* --- Bandeau cookies (assets/consentement.js) ---------------------------- */

.consentement {
  position: fixed; left: 24px; bottom: 24px; z-index: 1000;
  width: min(420px, calc(100vw - 32px));
  padding: 22px 24px;
  border: 1px solid var(--trait); border-radius: 18px;
  background: var(--blanc);
  box-shadow: 0 24px 60px -24px rgba(24, 4, 43, .35);
  color: var(--violet); font-size: 14px; line-height: 1.55;
}
.consentement[hidden] { display: none; }
.consentement-titre { margin-bottom: 8px; color: var(--aubergine); font-family: var(--titres); font-size: 16px; font-weight: 600; }
.consentement-texte a { color: var(--rouge); font-weight: 500; }
/* Accepter et refuser ont exactement le même style : aucun choix n'est mis en avant. */
.consentement-boutons { display: flex; gap: 10px; margin-top: 16px; }
.consentement-bouton {
  flex: 1 1 0;
  padding: 11px 18px;
  border: 1.5px solid var(--aubergine); border-radius: 999px;
  background: var(--blanc); color: var(--aubergine);
  font: 600 13.5px/1.2 var(--texte);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.consentement-bouton:hover { background: var(--aubergine); color: var(--blanc); }
@media (max-width: 680px) {
  .consentement { left: 16px; bottom: 16px; padding: 18px 18px 16px; }
}
@media print {
  .consentement { display: none; }
}

/* ==========================================================================
   Adaptatif
   ========================================================================== */

@media (max-width: 1100px) {
  .grille-industries-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ressources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-ligne { grid-template-columns: 84px minmax(0, 1fr); }
  .pack-inclus { grid-column: 2; }
  .article-corps { grid-template-columns: minmax(0, 1fr); }
  .sommaire { position: static; padding: 20px 22px; border: 1px solid var(--trait); border-radius: 14px; }
  .sommaire ol { border-left: 0; }
  .sommaire a { margin-left: 0; padding-left: 0; border-left: 0; }
  .sommaire a.est-actif { color: inherit; font-weight: 400; }
  .grille-services-2 .carte-service { grid-column: span 1; }
  .grille-services-2 .carte-service:last-child { grid-column: auto; }
  .grille-services-2 .carte-service:last-child .carte-image { height: clamp(220px, 21vw, 300px); }
}

@media (max-width: 900px) {
  .bandeau-panneau { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bandeau-texte { padding-bottom: 32px; }
  .bandeau-visuel { margin-bottom: -44px; }
  .bandeau-visuel figure { aspect-ratio: 16 / 10; }
  .bandeau-badge { left: 14px; bottom: 14px; }
  .intro, .etapes-grille, .fonctions-grille { grid-template-columns: minmax(0, 1fr); }
  .intro-tete, .etapes-cote { position: static; }
  .etapes-cote figure { aspect-ratio: 16 / 9; }
  .voisins-bloc { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .bandeau-panneau { padding: 26px 20px 0; border-radius: 18px; }
  .bandeau-visuel { margin-inline: -6px; }
  .bandeau-badge { padding: 8px 14px 8px 8px; }
  .bandeau-badge.a-tuile { --tuile: 38px; --tuile-icone: 17px; --tuile-x: 8px; }
  .titre-page mark { display: inline; }
  .grille-points, .grille-points-2, .ressources, .coches, .fonctions { grid-template-columns: minmax(0, 1fr); }
  .point { padding: 24px 22px; }
  .point.a-tuile { --tuile-x: 22px; --tuile-y: 24px; }
  .section-panneau .panneau-contenu { padding: 28px 18px; border-radius: 18px; }
  /* Page Industries : grille en deux colonnes, pas de rail horizontal. */
  .grille-industries.grille-industries-4 {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px;
    overflow: visible; margin-inline: 0; padding: 0;
  }
  .grille-industries-4 .industrie p:not(.lien-fleche) { font-size: 13px; }
  .grille-services-2 .carte-service .carte-image, .grille-services-2 .carte-service:last-child .carte-image { height: auto; }
  .pack-ligne { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pack-inclus { grid-column: auto; padding: 22px 20px; }
  .bande-chiffres { flex-direction: column; align-items: flex-start; }
  .etape { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .etape-numero { width: 44px; height: 44px; font-size: 13px; }
  .etape::before, .etape::after { left: 21px; top: 52px; }
  .etape h3 { padding-top: 9px; }
  .article-couverture { margin-bottom: -40px; aspect-ratio: 16 / 9; }
  .article-contenu { font-size: 15.5px; }
  .article-contenu > p:first-child { font-size: 16.5px; }
  .article-signature { flex-direction: column; align-items: flex-start; }
  .texte-legal em {
  font-style: normal; white-space: normal; }
}

@media (max-width: 400px) {
  .titre-page { font-size: 27px; letter-spacing: -0.024em; }
  .grille-industries.grille-industries-4 { grid-template-columns: minmax(0, 1fr); }
  .grille-industries-4 .industrie .carte-image { aspect-ratio: 16 / 10; }
  .lien-voisin { font-size: 13px; }
}

/* ==========================================================================
   Animations — même principe que l'accueil : natif (.sda) ou repli (.no-sda),
   rien si l'utilisateur a demandé moins d'animations.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Le bandeau s'installe au chargement : le texte monte, la photo se dévoile. */
  .bandeau-texte > * { animation: monter-charge .8s cubic-bezier(.2, .7, .2, 1) both; }
  .bandeau-texte > :nth-child(2) { animation-delay: .06s; }
  .bandeau-texte > :nth-child(3) { animation-delay: .12s; }
  .bandeau-texte > :nth-child(4) { animation-delay: .18s; }
  .bandeau-texte > :nth-child(5) { animation-delay: .24s; }
  .bandeau-visuel figure { animation: devoiler 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .bandeau-badge { animation: monter-charge .8s cubic-bezier(.2, .7, .2, 1) .5s both; }

  /* Puis il réagit au défilement, comme le schéma du héros. */
  .sda .bandeau-visuel img { scale: 1.08; animation: bandeau-derive linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  .sda .bandeau-badge {
    animation: monter-charge .8s cubic-bezier(.2, .7, .2, 1) .5s both, badge-derive linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 90vh;
  }
  .no-sda .bandeau-visuel img { scale: 1.08; translate: 0 calc(var(--defile, 0) * 5%); }

  /* Frise des étapes : le trait rouge se remplit, la pastille s'allume. */
  .sda .etape::after { animation: remplir linear both; animation-timeline: view(); animation-range: cover 30% cover 70%; }
  .sda .etape-numero { animation: allumer linear both; animation-timeline: view(); animation-range: cover 22% cover 34%; }
  .no-sda .etape::after { transition: scale 1.2s cubic-bezier(.2, .7, .2, 1) .3s; }
  .no-sda .etape.est-visible::after { scale: 1 1; }
  .no-sda .etape-numero { transition: background-color .4s, color .4s, border-color .4s; }
  .no-sda .etape.est-visible .etape-numero { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }

  /* Numéros des packs : glissent légèrement à contre-sens du défilement. */
  .sda .pack-ligne-numero { animation: numero-glisse linear both; animation-timeline: view(); animation-range: cover; }

  /* Panneau de mission : s'ouvre en entrant, comme le bloc « Pourquoi ». */
  .sda .mission { animation: deployer linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}

@keyframes monter-charge { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes devoiler { from { clip-path: inset(0 0 100% 0 round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes bandeau-derive { to { translate: 0 6%; } }
@keyframes badge-derive { to { translate: 0 -28px; } }
@keyframes remplir { to { scale: 1 1; } }
@keyframes allumer { to { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); } }
@keyframes numero-glisse { from { translate: 0 20px; } to { translate: 0 -20px; } }

/* Sans animation, les étapes sont toutes « allumées ». */
@media (prefers-reduced-motion: reduce) {
  .etape::after { scale: 1 1; }
  .etape-numero { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
}

/* ##########################################################################
   Couche WordPress — ce que la maquette n'avait pas : parties de modèle,
   blocs dynamiques (articles, termes, dates), lien d'évitement.
   ########################################################################## */

/* L'en-tête est une partie de modèle : son enveloppe s'efface pour que la
   barre d'annonce défile et que l'en-tête reste collé en haut de la page. */
.wp-block-template-part:has(> .entete),
.wp-block-template-part:has(> .pied) { display: contents; }

/* Lien d'évitement ajouté par WordPress. */
.skip-link.screen-reader-text:focus {
  left: 16px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--aubergine); color: var(--blanc);
  clip-path: none; width: auto; height: auto;
}

/* Fil d'Ariane fait de blocs (modèle d'article) : même rendu que la liste. */
.ariane > * { display: inline-flex; align-items: center; gap: 8px; }
.ariane > * + *::before { content: '/'; color: var(--violet-clair); }
.ariane > :last-child { color: var(--aubergine); font-weight: 500; }

/* Termes (catégorie · étiquette) côte à côte, séparés par un point médian. */
.termes { display: flex; flex-wrap: wrap; align-items: baseline; }
.termes > :empty { display: none; }
.termes > * + *::before { content: '·'; margin-inline: .28em; }
.surtitre.termes { display: inline-flex; }
.wp-block-post-terms a { transition: color .2s; }
.wp-block-post-terms a:hover { color: var(--rouge); }

/* Cartes d'articles (boucle de requête) : la carte de la maquette. */
.wp-block-post-template.liste-articles { display: grid; gap: clamp(48px, 6vw, 72px); margin: 0; padding: 0; list-style: none; }
.wp-block-post-featured-image.carte-image { margin: 0; }
.wp-block-post-featured-image.carte-image a { display: block; height: 100%; }
.wp-block-post-featured-image:is(.carte-image, .article-couverture) img { width: 100%; height: 100%; object-fit: cover; }
.article .article-titre { margin-top: 10px; }
.article-texte .wp-block-post-excerpt { margin-top: 14px; font-size: 14.5px; }
.article-texte .wp-block-post-excerpt__excerpt { margin: 0; }
.article-meta.termes { margin-top: 16px; font-size: 13px; color: var(--violet-clair); }
.wp-block-read-more.lien-fleche { display: inline-flex; width: auto; }
.pagination-articles { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 48px; font-size: 14px; }
.pagination-articles a:hover { color: var(--rouge); }

/* Article : en-tête, colonne de lecture, signature. */
.article-meta-bandeau { color: var(--violet); }
.article-meta-bandeau > :empty { display: none; }
.wp-block-post-featured-image.article-couverture { margin-top: clamp(28px, 3vw, 40px); margin-bottom: -64px; }
@media (max-width: 680px) {
  .wp-block-post-featured-image.article-couverture { margin-bottom: -40px; }
}
.article-colonne { min-width: 0; }
.article-signature .signature-logo img { width: 84px !important; height: auto !important; }
/* Dans la maquette, la signature héritait du corps de l'article (16 px, interligne 1,8). */
.article-colonne .article-signature { font-size: 16px; line-height: 1.8; }
.signature-texte .lien-fleche { margin-top: 4px; }
.sommaire[hidden] { display: none; }

/* Formulaire Contact Form 7 : les champs de la maquette, sans les enveloppes. */
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--rouge); font-size: 12.5px; line-height: 1.4; }
.formulaire .wpcf7-not-valid { border-color: var(--rouge) !important; }
.formulaire .wpcf7-response-output {
  margin: 18px 0 0 !important; padding: 14px 16px !important;
  border: 1px solid var(--trait) !important; border-left: 3px solid var(--rouge) !important; border-radius: 10px;
  background: var(--fond-doux);
  color: var(--aubergine); font-size: 14px;
}
.formulaire .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }
.formulaire .wpcf7-list-item { margin: 0; }
/* Case de consentement : la case et son libellé redeviennent les deux colonnes de la maquette. */
.formulaire .champ-case :is(.wpcf7-form-control-wrap, .wpcf7-acceptance, .wpcf7-list-item, .wpcf7-list-item > label) { display: contents; }
.formulaire .champ-case .wpcf7-list-item-label { color: var(--violet); font-size: 13px; line-height: 1.65; }
.formulaire .champ-case .wpcf7-list-item-label a { color: var(--rouge); font-weight: 500; }
.formulaire .champ-case .wpcf7-not-valid-tip { grid-column: 2; }
/* Rangée réservée au message d'erreur sous le consentement, comme dans la maquette. */
.formulaire .champ-case::after { content: ''; grid-column: 2; }
/* Contact Form 7 désactive l'envoi tant que le consentement n'est pas coché : on le montre. */
.formulaire .wpcf7-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* @@variables — généré par scripts/construire-theme.ps1, ne pas modifier à la main */
/* fr accueil */
.hub-centre { --x:280;--y:280;--d:174; }
.noeud-finances { --x:282;--y:62;--d:96; }
.noeud-crm { --x:464;--y:132;--d:78; }
.noeud-stocks { --x:508;--y:318;--d:84; }
.noeud-e-commerce { --x:404;--y:482;--d:96; }
.noeud-projets { --x:206;--y:500;--d:78; }
.noeud-filiales { --x:74;--y:398;--d:84; }
.noeud-reporting { --x:86;--y:168;--d:96; }
.eco-surtitre { --debut:0;--fin:.14; }
.eco-titre { --debut:.02;--fin:.17; }
.eco-description { --debut:.04;--fin:.2; }
.eco-action { --debut:.06;--fin:.23; }
.eco-noyau { --debut:0;--fin:.18; }
.eco-m-finances { --x:500;--y:85;--debut:.18;--fin:.34; }
.eco-m-crm { --x:769;--y:154;--debut:.245;--fin:.405; }
.eco-m-filiales { --x:880;--y:320;--debut:.31;--fin:.47; }
.eco-m-ecommerce { --x:769;--y:486;--debut:.375;--fin:.535; }
.eco-m-stocks { --x:500;--y:555;--debut:.44;--fin:.6; }
.eco-m-projets { --x:231;--y:486;--debut:.505;--fin:.665; }
.eco-m-analytique { --x:120;--y:320;--debut:.57;--fin:.73; }
.eco-m-integrations { --x:231;--y:154;--debut:.635;--fin:.795; }
/* en en */
.hub-centre { --x:280;--y:280;--d:174; }
.noeud-finance { --x:282;--y:62;--d:96; }
.noeud-crm { --x:464;--y:132;--d:78; }
.noeud-inventory { --x:508;--y:318;--d:84; }
.noeud-e-commerce { --x:404;--y:482;--d:96; }
.noeud-projects { --x:206;--y:500;--d:78; }
.noeud-entities { --x:74;--y:398;--d:84; }
.noeud-reporting { --x:86;--y:168;--d:96; }
.surtitre-a-unified-view-of-your-busin { --debut:0;--fin:.14; }
.eco-titre { --debut:.02;--fin:.17; }
.eco-description { --debut:.04;--fin:.2; }
.eco-action { --debut:.06;--fin:.23; }
.eco-noyau { --debut:0;--fin:.18; }
.eco-m-finances { --x:500;--y:85;--debut:.18;--fin:.34; }
.eco-m-crm { --x:769;--y:154;--debut:.245;--fin:.405; }
.eco-m-filiales { --x:880;--y:320;--debut:.31;--fin:.47; }
.eco-m-ecommerce { --x:769;--y:486;--debut:.375;--fin:.535; }
.eco-m-stocks { --x:500;--y:555;--debut:.44;--fin:.6; }
.eco-m-projets { --x:231;--y:486;--debut:.505;--fin:.665; }
.eco-m-analytique { --x:120;--y:320;--debut:.57;--fin:.73; }
.eco-m-integrations { --x:231;--y:154;--debut:.635;--fin:.795; }
/* @@fin-variables */