/* ===========================================================================
   UGM-Group — design system
   Charte : design-system/ugm/charte-graphique.md
   Navy #0A0F1A/#1D1E20 · Ice #E3EAF2 · Paper #FFFFFF · DM Serif Display
   (titres) / Poppins (corps) / DM Sans (UI) — mêmes composants que
   trustiatis.com/workynet.com, retintés sur la charte réelle d'UGM-Group :
   registre le plus sobre des trois marques, **aucune couleur d'accent
   vive** (charte, §Palette). Les interactions (focus, sélection, bouton
   primaire) s'appuient sur le navy lui-même en clair, et sur un bleu-acier
   désaturé — dérivé de la même famille navy, pas une teinte de marque
   séparée — en sombre, où le navy pur devient le fond et non plus un
   premier plan possible.

   Thème : 3 états. :root = palette claire complète ; le média
   prefers-color-scheme redéfinit les tokens pour l'état "système" ;
   [data-theme] gagne dans les deux sens quand l'utilisateur a choisi.
   Aucun composant ne définit de couleur en dur — tout passe par les tokens.
   =========================================================================== */

:root {
  /* Marque — invariants. #1D1E20 et #0A0F1A sont les deux fonds sombres
     relevés sur ugm-group.com (charte, §Logo/§Palette) ; le logo (blanc sur
     transparent) n'a pas d'autre fond possible. */
  --navy: #1D1E20;
  --navy-deep: #0A0F1A;
  --ink-brand: #1D1E20;

  /* Fonds & texte — palette claire : blanc uni, "ice" (bleu-gris très pâle,
     pas blanc pur) pour l'alternance de sections — charte §Palette. */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #E3EAF2;
  --surface-3: #D6E1EC;
  --ink: #1D1E20;
  --ink-2: rgba(29, 30, 32, .72);
  --ink-3: rgba(29, 30, 32, .52);
  --border: rgba(29, 30, 32, .13);
  --border-strong: rgba(29, 30, 32, .27);
  /* Pas de vert/couleur de marque sur les titres (contrairement à
     Trustiatis/Workynet) : la charte est volontairement monochrome, la
     hiérarchie vient de la serif + du poids, jamais de la teinte. */
  --heading: #1D1E20;

  /* Teintes dérivées — neutres (ink), pas de teinte de marque à diluer. */
  --navy-tint: rgba(29, 30, 32, .06);
  --navy-tint-2: rgba(29, 30, 32, .10);
  --ink-tint: rgba(29, 30, 32, .06);
  --accent-on-brand: #FFFFFF;

  /* Reflet brillant des cartes */
  --shine: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.65) 48%, rgba(255,255,255,.18) 54%, transparent 68%);

  /* Bandes pleines — navy et navy-deep, les deux fonds sombres de la charte. */
  --band-navy: #1D1E20;
  --band-navy-ink: #FFFFFF;
  --band-ink: #0A0F1A;
  --band-ink-ink: #E3EAF2;

  --shadow-sm: 0 1px 2px rgba(29, 30, 32, .04), 0 2px 8px rgba(29, 30, 32, .04);
  --shadow-md: 0 2px 6px rgba(29, 30, 32, .05), 0 12px 32px rgba(29, 30, 32, .08);
  --shadow-lg: 0 4px 12px rgba(29, 30, 32, .06), 0 24px 60px rgba(29, 30, 32, .12);
  --glow: radial-gradient(60% 60% at 50% 0%, var(--navy-tint) 0%, transparent 70%);

  --container: 1180px;
  /* Angulaire plutôt qu'arrondi — charte §Composants : bouton primaire
     rayon 8px, pas de pilule sur les surfaces structurantes. Le registre le
     plus sobre des quatre sites. */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --space-card: 32px;
  --space-card-sm: 24px;
  --section-py: clamp(64px, 9vw, 120px);
  --hero-py: clamp(56px, 7.5vw, 100px);
  --block-py: clamp(40px, 5.5vw, 72px);
}

@media (max-width: 640px) {
  :root { --space-card: 24px; --space-card-sm: 18px; }
}

/* Sombre — état "système" (aucun data-theme posé). Le navy-deep de la charte
   sert de fond (pas de noir pur générique) ; le texte courant bascule sur
   "ice" plutôt qu'un blanc générique. Le navy, qui sert de premier plan
   interactif en clair, n'a plus assez de contraste comme foreground sur un
   fond déjà navy : il est remplacé par un bleu-acier désaturé, dérivé de la
   même famille (pas une couleur de marque nouvelle), pour le bouton
   primaire, la sélection et le focus. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0F1A;
    --surface: #10151F;
    --surface-2: #161C28;
    --surface-3: #1C2431;
    --ink: #E3EAF2;
    --ink-2: rgba(227, 234, 242, .76);
    --ink-3: rgba(227, 234, 242, .54);
    --border: rgba(227, 234, 242, .14);
    --border-strong: rgba(227, 234, 242, .30);
    --heading: #F5F8FC;

    --navy: #7C93B3;
    --navy-deep: #A9BCD6;
    --ink-brand: #E3EAF2;

    --navy-tint: rgba(124, 147, 179, .18);
    --navy-tint-2: rgba(124, 147, 179, .26);
    --ink-tint: rgba(227, 234, 242, .08);
    --accent-on-brand: #0A0F1A;

    --band-navy: #141B27;
    --band-navy-ink: #E3EAF2;
    --band-ink: #000000;
    --band-ink-ink: #E3EAF2;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .7);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, .65), 0 0 34px rgba(124, 147, 179, .14);
    --shadow-lg: 0 6px 24px rgba(0, 0, 0, .75), 0 0 72px rgba(124, 147, 179, .18);
    --glow: radial-gradient(60% 60% at 50% 0%, rgba(124, 147, 179, .22) 0%, transparent 70%);
    --shine: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 48%, rgba(124,147,179,.12) 54%, transparent 70%);
  }
}

/* Sombre — choix explicite de l'utilisateur (bat un OS clair). */
:root[data-theme="dark"] {
  --bg: #0A0F1A;
  --surface: #10151F;
  --surface-2: #161C28;
  --surface-3: #1C2431;
  --ink: #E3EAF2;
  --ink-2: rgba(227, 234, 242, .76);
  --ink-3: rgba(227, 234, 242, .54);
  --border: rgba(227, 234, 242, .14);
  --border-strong: rgba(227, 234, 242, .30);
  --heading: #F5F8FC;

  --navy: #7C93B3;
  --navy-deep: #A9BCD6;
  --ink-brand: #E3EAF2;

  --navy-tint: rgba(124, 147, 179, .18);
  --navy-tint-2: rgba(124, 147, 179, .26);
  --ink-tint: rgba(227, 234, 242, .08);
  --accent-on-brand: #0A0F1A;

  --band-navy: #141B27;
  --band-navy-ink: #E3EAF2;
  --band-ink: #000000;
  --band-ink-ink: #E3EAF2;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .7);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, .65), 0 0 34px rgba(124, 147, 179, .14);
  --shadow-lg: 0 6px 24px rgba(0, 0, 0, .75), 0 0 72px rgba(124, 147, 179, .18);
  --glow: radial-gradient(60% 60% at 50% 0%, rgba(124, 147, 179, .22) 0%, transparent 70%);
  --shine: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 48%, rgba(124,147,179,.12) 54%, transparent 70%);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Poppins", -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .35s var(--ease), color .35s var(--ease);
  position: relative;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(32% 40% at 8% 12%, var(--navy-tint) 0%, transparent 65%),
    radial-gradient(28% 36% at 96% 22%, var(--ink-tint) 0%, transparent 65%),
    radial-gradient(34% 42% at 50% 96%, var(--navy-tint) 0%, transparent 70%);
  animation: bodyAura 22s ease-in-out infinite alternate;
}
@keyframes bodyAura {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-1.5%, 1%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--navy); color: var(--accent-on-brand); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
  color: var(--heading);
}
h1 { font-size: clamp(38px, 5.6vw, 64px); letter-spacing: -.025em; font-weight: 600; }
h2 { font-size: clamp(27px, 3.6vw, 40px); letter-spacing: -.02em; }
h3 { font-size: 20px; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

strong { font-weight: 600; color: var(--ink); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 34px; }
@media (max-width: 720px) { .container { padding-inline: 20px; } }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: saturate(220%) blur(22px);
  -webkit-backdrop-filter: saturate(220%) blur(22px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  isolation: isolate;
}
.nav::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--navy), var(--band-ink), var(--navy-deep), var(--navy));
  background-size: 300% 100%;
  animation: navGradient 8s linear infinite;
}
.nav::after {
  content: ""; position: absolute; inset: -60% -10% auto -10%; height: 220%; z-index: -1;
  background: radial-gradient(50% 100% at 18% 0%, var(--navy-tint-2) 0%, transparent 60%),
              radial-gradient(35% 100% at 85% 0%, var(--ink-tint) 0%, transparent 60%);
  opacity: .7; pointer-events: none;
  animation: navAura 10s ease-in-out infinite alternate;
}
@keyframes navGradient { to { background-position: -300% 0; } }
@keyframes navAura { from { opacity: .5; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .nav::before, .nav::after { animation: none; } }
.nav.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 12px 40px -18px rgba(49, 103, 54, .35);
}
.nav-inner {
  max-width: var(--container); margin-inline: auto;
  padding: 14px 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding .3s var(--ease);
}
.nav.scrolled .nav-inner { padding: 10px 34px; }
@media (max-width: 720px) { .nav-inner { padding: 10px 20px; } .nav.scrolled .nav-inner { padding: 8px 20px; } }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; position: relative; }
/* Logo définitif (badge carré, monogramme seul, sans texte de service —
   remplace le wordmark provisoire). Deux tuiles fournies (fond blanc/logo
   noir, fond noir/logo blanc) : bascule claire/sombre comme le reste du
   site, plutôt qu'une tuile unique qui perd le contraste en thème sombre. */
.brand img {
  height: 168px; width: 168px; border-radius: var(--radius-sm);
  transition: transform .3s var(--ease), height .3s var(--ease), width .3s var(--ease);
}
.nav.scrolled .brand img { height: 96px; width: 96px; }
.brand:hover img { transform: scale(1.06); }
@media (max-width: 720px) { .brand img { height: 96px; width: 96px; } .nav.scrolled .brand img { height: 68px; width: 68px; } }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark { display: block; }
}
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }

/* Logos de filiales/marques (cartes "Deux sociétés d'exploitation") — même
   bascule claire/sombre pour Workynet et IoTiatis (texte non lisible sur
   l'autre fond) ; Trustiatis a une seule version, ses couleurs de marque
   (sage/terracotta) passent sur les deux thèmes sans réglage. */
.sub-logo { height: 30px; width: auto; margin-bottom: 14px; }
.sub-logo.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sub-logo.logo-light { display: none; }
  :root:not([data-theme="light"]) .sub-logo.logo-dark { display: block; }
}
:root[data-theme="dark"] .sub-logo.logo-light { display: none; }
:root[data-theme="dark"] .sub-logo.logo-dark { display: block; }

.nav-links { display: flex; align-items: center; gap: 14px; }
/* Barre à onglets soulignés plutôt que pilule verre dépoli : signature nav
   de ce site, à l'opposé du .nav-pill flottant de trustiatis.com. */
.nav-pill {
  display: flex; align-items: center; gap: 2px;
  font-family: "DM Sans", system-ui, sans-serif; font-size: 15px;
}
.nav-cta {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 26px -6px var(--navy); }
.nav-pill > a:not(.nav-lang) {
  text-decoration: none; color: var(--ink-2);
  padding: 10px 14px; border-bottom: 2px solid transparent;
  position: relative; white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav-pill > a:not(.nav-lang):hover { color: var(--ink); border-bottom-color: var(--border-strong); }
.nav-pill > a.active {
  color: var(--heading); font-weight: 600;
  border-bottom-color: var(--navy);
}
.nav-lang {
  text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 11px; font-size: 13.5px; font-weight: 500;
  font-family: "DM Sans", sans-serif;
  transition: border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-lang:hover { border-color: var(--navy); color: var(--heading); box-shadow: inset 0 0 0 1px var(--navy); }

/* Menu centré : logo à gauche, liens au centre, actions (langue/thème/CTA)
   à droite — format à 3 zones des sites de holding, plutôt que le menu
   collé à droite d'un simple flex space-between. Placé après les règles
   .nav-links/.nav-pill de base pour gagner la cascade (même spécificité,
   la déclaration la plus tardive l'emporte). */
@media (min-width: 1001px) {
  .nav-inner { display: grid; grid-template-columns: auto 1fr auto; }
  .nav-links { display: contents; }
  .nav-pill { justify-self: center; }
  .nav-actions { justify-self: end; }
}

.theme-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.theme-toggle:hover { border-color: var(--navy); color: var(--heading); background: var(--navy-tint); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 9px; color: var(--ink); }
.nav-toggle span { display: block; width: 21px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: block; order: 3; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 14px 20px 22px;
    display: none;
  }
  .nav-links.open { display: flex; animation: navDrop .28s var(--ease); }
  .nav-pill {
    flex-direction: column; align-items: stretch; gap: 2px;
  }
  .nav-pill > a:not(.nav-lang) { width: 100%; padding: 12px 14px; border-bottom: none; border-left: 2px solid transparent; }
  .nav-pill > a.active { border-bottom: none; border-left-color: var(--navy); background: var(--navy-tint); }
  .nav-cta { width: 100%; justify-content: center; }
  .nav-lang, .theme-toggle { align-self: flex-start; }
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Boutons ---------- */
/* white-space normal (pas nowrap) + pas d'overflow:hidden, volontairement :
   un libellé trop long pour son conteneur (barre latérale du configurateur,
   mobile étroit...) doit passer à la ligne, jamais être coupé en silence —
   bug relevé par l'utilisateur avec le bouton du configurateur. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: "DM Sans", sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: .01em; line-height: 1.3; text-align: center;
  border-radius: var(--radius);
  flex-shrink: 0;
  padding: 13px 26px;
  text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  position: relative;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:hover svg.arrow { transform: translateX(3px); }

/* Primaire — charte §Composants : fond blanc, texte navy, rayon 8px
   (angulaire). Fonctionne sur fond clair ET sombre (c'est tout l'intérêt :
   un aplat navy sur les bandes déjà navy du site — .cta-band notamment —
   perdrait tout contraste ; le blanc, lui, ressort partout). */
.btn-primary { background: #FFFFFF; color: var(--navy-deep); box-shadow: var(--shadow-sm); border-color: var(--border); }
.btn-primary:hover { background: var(--surface-2); box-shadow: var(--shadow-md); }

.btn-primary-alt { background: #FFFFFF; color: var(--navy-deep); box-shadow: var(--shadow-sm); border-color: var(--border); }
.btn-primary-alt:hover { background: var(--surface-2); box-shadow: var(--shadow-md); }

/* Secondaire — charte §Composants : fond navy, texte blanc, rayon en
   pilule. Réservé aux fonds clairs (sur fond déjà navy, cf. primaire). */
.btn-secondary { background: var(--navy); color: var(--accent-on-brand); box-shadow: var(--shadow-sm); border-radius: 999px; }
.btn-secondary:hover { background: var(--navy-deep); box-shadow: var(--shadow-md); }

.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--navy); background: var(--navy-tint); color: var(--heading); }

.btn-outline-white { background: transparent; border-color: currentColor; color: inherit; opacity: .9; }
.btn-outline-white:hover { opacity: 1; background: rgba(255, 255, 255, .12); }

.btn-lg { font-size: 18px; padding: 16px 32px; }
.btn-row { display: flex; gap: 13px; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.section { padding: var(--section-py) 0; position: relative; }
.section-paper { background: var(--bg); }
.section-warm { background: var(--surface-2); }

.section-band { background: var(--band-navy); color: var(--band-navy-ink); }
.section-band h1, .section-band h2, .section-band h3 { color: var(--band-navy-ink); }
.section-band .lede { color: color-mix(in srgb, var(--band-navy-ink) 82%, transparent); }
.section-deep { background: var(--band-ink); color: var(--band-ink-ink); }
.section-deep h1, .section-deep h2, .section-deep h3 { color: var(--band-ink-ink); }
.section-deep .lede { color: color-mix(in srgb, var(--band-ink-ink) 82%, transparent); }

/* Hachures diagonales plutôt qu'une grille de points : texture propre à ce
   site, cohérente avec le langage anguleux des cartes. */
.section-dotted::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 15px);
  opacity: .05;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.section > .container { position: relative; z-index: 1; }

.section-head { max-width: 66ch; margin-bottom: clamp(40px, 5.5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-statement { padding: var(--hero-py) 0; }
.section-statement .section-head { max-width: 58ch; margin-bottom: 0; }

.eyebrow {
  font-family: "DM Sans", sans-serif; text-transform: uppercase;
  letter-spacing: .14em; font-size: 12px; font-weight: 600;
  color: var(--heading);
  margin-bottom: 16px; display: block;
}
.section-band .eyebrow, .section-deep .eyebrow { color: inherit; opacity: .82; }
.section-head.center .eyebrow { text-align: center; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: var(--hero-py); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 0 auto 0; height: 130%;
  background: var(--glow); pointer-events: none;
}
.hero-layout { position: relative; display: grid; grid-template-columns: 1fr .82fr; gap: clamp(40px, 5.5vw, 80px); align-items: center; }
@media (max-width: 940px) { .hero-layout { grid-template-columns: 1fr; } .hero-art { order: -1; } }

.hero h1 { max-width: 19ch; margin-bottom: .34em; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.08; }
.hero .lede { max-width: 44ch; font-size: 18px; }
.hero .btn-row { margin-top: 36px; }

.hero-art { position: relative; }

/* Photo du hero — lent zoom continu ("Ken Burns"), plutôt que la pulsation
   de nœuds / rotation du schéma SVG utilisé avant. */
.hero-photo-frame {
  position: relative; overflow: hidden; margin-inline: auto;
  max-width: 380px; aspect-ratio: 2 / 3;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.hero-photo-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, transparent 55%, color-mix(in srgb, var(--band-ink) 55%, transparent) 100%);
}
.hero-photo-frame picture, .hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo-frame img { animation: heroKenBurns 24s ease-in-out infinite alternate; transform-origin: 60% 30%; }
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .hero-photo-frame img { animation: none; } }
@media (max-width: 940px) { .hero-photo-frame { max-width: 300px; } }
.hero-badge {
  position: absolute; left: -18px; bottom: -18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 14px 20px; display: flex; flex-direction: column;
  line-height: 1.15;
}
.hero-badge strong { font-family: "DM Serif Display", Georgia, serif; font-size: 24px; font-weight: 700; color: var(--heading); letter-spacing: -.01em; }
.hero-badge span { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 640px) { .hero-badge { left: 14px; bottom: -14px; padding: 10px 16px; } .hero-badge strong { font-size: 19px; } }

.proof-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 1px; margin-top: clamp(44px, 6vw, 72px);
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.proof-item {
  background: var(--surface); padding: var(--space-card-sm);
  font-family: "DM Sans", sans-serif; font-size: 14.5px; line-height: 1.45;
  color: var(--ink-2);
  display: flex; flex-direction: column; gap: 8px;
  transition: background .25s var(--ease);
}
.proof-item:hover { background: var(--surface-2); }
.proof-item svg { width: 22px; height: 22px; color: var(--navy); }
.proof-item strong { display: block; font-family: "DM Serif Display", Georgia, serif; font-size: 15.5px; color: var(--ink); font-weight: 700; }

/* ---------- Cartes ---------- */
.g-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.g-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.g-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1040px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

/* Filet d'accent à gauche, qui passe au vert forêt au survol : signature
   visuelle des cartes de ce site, à l'opposé du rayon large + filet
   dégradé horizontal de trustiatis.com. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-card);
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); border-left-color: var(--navy); }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--ink-2); font-size: 15px; margin-bottom: 0; }
.card .tag {
  display: inline-block; font-family: "DM Sans", sans-serif; font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--heading);
  font-weight: 600; margin-bottom: 10px;
}

.card-icon {
  width: 46px; height: 46px; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--navy-tint); color: var(--heading);
  transition: background .3s var(--ease), transform .35s var(--ease);
}
.card-icon svg { width: 23px; height: 23px; }
.card:hover .card-icon { background: var(--navy-tint-2); transform: scale(1.07) rotate(-3deg); }
.card-icon.alt { background: var(--ink-tint); color: var(--ink); }

.section-band .card, .section-deep .card {
  background: rgba(0, 0, 0, .16);
  border-color: rgba(255, 255, 255, .18);
}
.section-band .card p, .section-deep .card p { color: color-mix(in srgb, currentColor 94%, transparent); }
.section-band .card-icon, .section-deep .card-icon { background: rgba(255, 255, 255, .16); color: inherit; }
.section-band .card:hover, .section-deep .card:hover { background: rgba(0, 0, 0, .24); }

a.card { text-decoration: none; display: block; }

/* ---------- Piliers ---------- */
.pillar {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
  padding: var(--block-py) 0;
  border-top: 1px solid var(--border);
}
.pillar:first-of-type { border-top: 0; padding-top: 0; }
.pillar-reverse .pillar-body { order: 2; }
@media (max-width: 880px) {
  .pillar { grid-template-columns: 1fr; gap: 30px; }
  .pillar-reverse .pillar-body { order: 0; }
}
.pillar-num {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; color: var(--navy);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.pillar-num::after { content: ""; width: 32px; height: 1px; background: var(--border-strong); }
.pillar h3 { font-size: clamp(23px, 2.8vw, 30px); margin-bottom: 12px; }
.pillar-body > p { color: var(--ink-2); max-width: 46ch; }
.pillar .btn { margin-top: 24px; }

.pillar-visual {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-card);
  box-shadow: var(--shadow-sm);
}
.pillar-visual ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.pillar-visual li {
  padding: 14px 0 14px 34px; position: relative; font-size: 15px; color: var(--ink-2);
  border-bottom: 1px solid var(--border);
}
.pillar-visual li:last-child { border-bottom: 0; }
.pillar-visual li strong { color: var(--ink); }
.pillar-visual li::before {
  content: ""; position: absolute; left: 4px; top: 21px;
  width: 8px; height: 8px; border-radius: 3px; background: var(--navy);
  box-shadow: 0 0 0 4px var(--navy-tint);
}

/* ---------- Étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: step; position: relative; }
@media (max-width: 1040px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .steps { grid-template-columns: 1fr; } }
.step { counter-increment: step; position: relative; padding-top: 56px; }
.step-icon {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; gap: 8px;
}
.step-icon svg {
  width: 40px; height: 40px; padding: 10px; box-sizing: border-box;
  color: var(--heading);
  border-radius: 50%;
  background: var(--navy-tint); border: 1px solid var(--navy-tint-2);
}
.step-icon span {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 700; font-size: 12.5px;
  color: var(--ink-3); letter-spacing: .04em;
}
.step::after {
  content: ""; position: absolute; top: 19px; left: 46px; right: -22px; height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.step:last-child::after { display: none; }
@media (max-width: 1040px) { .step:nth-child(3n)::after { display: none; } }
@media (max-width: 660px) { .step::after { display: none; } }
.step h3 { font-size: 17.5px; margin-bottom: 7px; }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* ---------- Statistiques ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }
.stat { text-align: left; }
.stat > svg {
  width: 30px; height: 30px; margin-bottom: 12px; padding: 7px; box-sizing: border-box;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.14); color: inherit;
}
.stat-value {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 700;
  font-size: clamp(34px, 4.4vw, 52px); line-height: 1;
  letter-spacing: -.03em; margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 15px; opacity: .82; }

/* ---------- Témoignages ---------- */
.testimonial {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-card);
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial::before {
  content: "\201C"; position: absolute; top: 8px; right: 22px;
  font-family: "DM Serif Display", Georgia, serif; font-size: 76px; line-height: 1;
  color: var(--navy); opacity: .13;
}
.testimonial-stars { color: var(--heading); letter-spacing: 3px; font-size: 14px; }
.testimonial p { font-size: 15px; color: var(--ink-2); margin: 0; flex: 1; }
.testimonial-org {
  font-family: "DM Serif Display", Georgia, serif; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; gap: 11px; color: var(--ink);
}
.testimonial-avatar {
  width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--navy-tint); color: var(--heading);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}

/* ---------- FAQ ---------- */
.faq { max-width: 80ch; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; list-style: none;
  font-family: "DM Serif Display", Georgia, serif; font-weight: 500; font-size: 18px;
  padding: 22px 44px 22px 0; position: relative;
  transition: color .2s var(--ease);
  display: flex; align-items: center; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg {
  width: 20px; height: 20px; flex-shrink: 0; color: var(--heading); opacity: .8;
}
.faq-item summary:hover { color: var(--heading); }
.faq-item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transform-origin: center;
  transition: transform .3s var(--ease);
  opacity: .55;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item p { padding: 0 44px 24px 0; color: var(--ink-2); margin: 0 0 0 34px; animation: fadeUp .35s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-group { margin-bottom: 44px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group h2 { font-size: clamp(21px, 2.4vw, 26px); margin-bottom: 14px; }

/* ---------- Bandeau CTA ---------- */
.cta-band {
  background: var(--band-ink); color: var(--band-ink-ink);
  border-radius: var(--radius-lg);
  padding: clamp(38px, 5vw, 62px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 28px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: ""; position: absolute; right: -14%; top: -70%;
  width: 62%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--navy) 0%, transparent 66%);
  opacity: .3; pointer-events: none;
}
.cta-band::after {
  content: ""; position: absolute; left: -12%; bottom: -78%;
  width: 48%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--navy-deep) 0%, transparent 66%);
  opacity: .22; pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--band-ink-ink); margin-bottom: 8px; }
.cta-band p { color: color-mix(in srgb, var(--band-ink-ink) 74%, transparent); margin: 0; max-width: 48ch; }

/* ---------- Formulaires ---------- */
.form-grid { display: grid; gap: 18px; max-width: 540px; }
label { font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 500; display: block; margin-bottom: 7px; color: var(--ink-2); }
input, textarea, select {
  width: 100%; font-family: "Poppins", -apple-system, sans-serif; font-size: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; background: var(--surface); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }
textarea { resize: vertical; min-height: 130px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-2); }
.check-row input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--navy); flex-shrink: 0; }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
  font-family: "DM Sans", sans-serif; font-size: 13.5px; color: var(--ink-3);
  max-width: var(--container); margin-inline: auto; padding: 22px 34px 0;
}
@media (max-width: 720px) { .breadcrumb { padding-inline: 20px; } }
.breadcrumb a { text-decoration: none; transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--heading); }
.breadcrumb .sep { margin: 0 8px; opacity: .5; }

/* ---------- Pied de page ---------- */
.footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--band-ink); color: color-mix(in srgb, var(--band-ink-ink) 76%, transparent);
  padding: var(--section-py) 0 32px;
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--navy), var(--band-ink), var(--navy-deep), var(--navy));
  background-size: 300% 100%;
  animation: navGradient 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .footer::before, .footer .footer-aura { animation: none !important; } }
.footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--band-ink-ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--band-ink-ink) 7%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(90% 70% at 20% 0%, #000 0%, transparent 75%);
}
.footer-aura {
  position: absolute; inset: -20% -10% -40% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 55% at 12% 8%, var(--navy-tint-2) 0%, transparent 65%),
    radial-gradient(30% 45% at 92% 30%, var(--navy-tint) 0%, transparent 65%),
    radial-gradient(45% 40% at 55% 100%, var(--navy-tint) 0%, transparent 70%);
  animation: navAura 12s ease-in-out infinite alternate;
}
.footer > .container { position: relative; z-index: 1; }
.footer-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "DM Sans", sans-serif; font-size: 12.5px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--band-ink-ink) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--band-ink-ink) 16%, transparent);
  border-radius: 100px; padding: 7px 16px 7px 12px;
  margin-bottom: 40px;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--navy);
  box-shadow: 0 0 0 0 var(--navy);
  animation: statusPulse 2.4s ease-out infinite;
}
@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--navy) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 44px; padding-bottom: 44px;
  position: relative;
}
.footer-grid > div:not(:last-child)::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; right: -22px; width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--band-ink-ink) 16%, transparent) 20%, color-mix(in srgb, var(--band-ink-ink) 16%, transparent) 80%, transparent);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } .footer-grid > div::after { display: none; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-about { font-size: 14.5px; max-width: 34ch; margin-top: 16px; color: color-mix(in srgb, var(--band-ink-ink) 62%, transparent); }
.footer-col h4 {
  font-family: "DM Sans", sans-serif; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: color-mix(in srgb, var(--band-ink-ink) 55%, transparent);
  margin-bottom: 16px; display: flex; align-items: center; gap: 9px;
}
.footer-col h4 svg {
  width: 26px; height: 26px; padding: 6px; box-sizing: border-box; flex-shrink: 0;
  color: var(--navy); background: color-mix(in srgb, var(--navy) 14%, transparent);
  border-radius: 8px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-col a { text-decoration: none; font-size: 15px; transition: color .2s var(--ease), padding-left .2s var(--ease); }
.footer-col a:hover { color: var(--navy); padding-left: 4px; }
.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--band-ink-ink) 14%, transparent);
  padding-top: 26px; display: flex; flex-wrap: wrap; gap: 18px;
  justify-content: space-between; font-size: 13px;
  color: color-mix(in srgb, var(--band-ink-ink) 50%, transparent);
}
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { text-decoration: none; transition: color .2s var(--ease); }
.footer-legal a:hover { color: var(--band-ink-ink); }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--band-ink-ink) 16%, transparent);
  color: color-mix(in srgb, var(--band-ink-ink) 62%, transparent);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.footer-social a:hover {
  color: var(--band-ink-ink); border-color: var(--navy);
  background: rgba(255, 255, 255, .07); transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 22px -4px var(--navy);
}

/* Réseaux sociaux des filiales, affichés sur leurs cartes (Filiales,
   accueil) : UGM-Group n'a pas de compte propre, ce sont ceux de
   Trustiatis/Workynet, sourcés sur leurs propres sites. */
.entity-social { display: flex; gap: 8px; margin-top: 12px; }
.entity-social a {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--ink-3);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.entity-social a:hover { color: var(--navy); border-color: var(--navy); transform: translateY(-2px); }

.article-card { display: block; text-decoration: none; color: inherit; }
.article-card .inline-link { margin-top: 6px; }

/* Bandeaux d'illustration pleine largeur (noir & blanc, géométrie abstraite —
   pas de photo) : entre les sections du homepage, en écho au concept réel
   de "strates" et de "réseau" de Notre histoire/Gouvernance. */
.media-band { margin: 0; background: var(--ink, #111); }
.media-band img { display: block; width: 100%; height: clamp(200px, 28vw, 380px); object-fit: cover; }
.media-band figcaption {
  max-width: var(--container); margin-inline: auto; padding: 16px 34px 0;
  font-family: "DM Sans", sans-serif; font-size: 13.5px; color: var(--ink-3);
}
@media (max-width: 720px) { .media-band figcaption { padding: 14px 20px 0; } }

.faq-teaser-cta { margin-top: 28px; text-align: center; }

/* ---------- Retour en haut ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--band-ink); color: var(--band-ink-ink);
  border: 1px solid color-mix(in srgb, var(--band-ink-ink) 16%, transparent);
  cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.94);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 19px; height: 19px; }

/* ---------- Apparitions au défilement ---------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .07s; }
[data-reveal-delay="2"] { transition-delay: .14s; }
[data-reveal-delay="3"] { transition-delay: .21s; }
[data-reveal-delay="4"] { transition-delay: .28s; }


/* ---------- Utilitaires ---------- */
.mt-40 { margin-top: 40px; }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -180%);
  background: var(--band-ink); color: var(--band-ink-ink);
  padding: 11px 20px; border-radius: var(--radius-sm); z-index: 100;
  text-decoration: none; font-family: "DM Sans", sans-serif; font-size: 14px;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Spécifications (métiers, offres) ---------- */
.specs { display: grid; gap: 20px; }
.spec {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-card);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.spec:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
@media (max-width: 820px) { .spec { grid-template-columns: 1fr; gap: 18px; } }
.spec-head { display: flex; gap: 16px; align-items: flex-start; }
.spec-head .card-icon { margin-bottom: 0; flex-shrink: 0; }
.spec-head h3 { margin-bottom: 6px; }
.spec-head p { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.spec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.spec-list li {
  position: relative; padding: 11px 0 11px 28px; font-size: 15px; color: var(--ink-2);
  border-bottom: 1px solid var(--border);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list li::before {
  content: ""; position: absolute; left: 2px; top: 17px;
  width: 12px; height: 7px; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg);
}
.spec-note {
  font-family: "DM Sans", sans-serif; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-2); padding: 12px 14px; margin-top: 14px;
  background: var(--navy-tint); border-radius: var(--radius-sm);
}

/* ---------- Offres packagées (starter / growth / premium) ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; } }
.tier-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-card); position: relative;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tier-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-left-color: var(--navy); }
.tier-card.featured { border-color: var(--navy); border-left-color: var(--navy); border-width: 1px; border-left-width: 3px; box-shadow: var(--shadow-md); }
.tier-card .tag { font-family: "DM Sans", sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--heading); font-weight: 600; }
.tier-card p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* ===========================================================================
   Effet "clinquant" — reflet brillant balayant les cartes au survol, et
   halo lumineux en mode sombre.
   =========================================================================== */
.card, .testimonial, .tier-card, .spec, .stat {
  position: relative;
}
.card, .testimonial, .tier-card {
  overflow: hidden;
}
.card::before, .tier-card::before, .testimonial::after {
  content: ""; position: absolute; inset: -50% -70%;
  background: var(--shine);
  transform: translateX(-130%) rotate(8deg);
  transition: transform .85s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none; z-index: 3;
}
.card:hover::before, .tier-card:hover::before, .testimonial:hover::after {
  transform: translateX(30%) rotate(8deg);
}

.card:hover, .tier-card:hover, .testimonial:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--navy);
}

.section-band, .section-deep, .section-dotted {
  position: relative; overflow: hidden;
}
.section-band::before, .section-deep::before {
  content: ""; position: absolute; inset: 0; background: var(--glow);
  opacity: .6; pointer-events: none;
}
.section-band > .container, .section-deep > .container { position: relative; z-index: 1; }

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tier-card,
:root[data-theme="dark"] .testimonial {
  box-shadow: var(--shadow-md);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .tier-card,
  :root:not([data-theme="light"]) .testimonial {
    box-shadow: var(--shadow-md);
  }
}

/* ---------- Trustpilot ---------- */
.trustpilot-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: #FFFFFF; border-radius: var(--radius-md);
  padding: 10px 16px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.trustpilot-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.trustpilot-badge img { height: 28px; width: auto; display: block; }
.trustpilot-badge .tp-text { font-family: "DM Sans", sans-serif; font-size: 12.5px; color: #191919; line-height: 1.3; }
.trustpilot-badge .tp-text strong { color: #191919; display: block; font-size: 13.5px; }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }

/* ---------- Diaporama d'avis ---------- */
.review-slideshow {
  position: relative; min-height: 172px; margin: 34px 0;
  border-radius: var(--radius-lg); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  overflow: hidden;
}
.review-slide {
  position: absolute; inset: 0; padding: var(--space-card);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  opacity: 0; transform: scale(1.02);
  transition: opacity 1.1s ease, transform 1.1s ease;
  pointer-events: none;
}
.review-slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }
.review-slide p { font-size: 16.5px; color: var(--ink); margin: 0; max-width: 68ch; }
.review-slide .review-org { font-family: "DM Serif Display", Georgia, serif; font-weight: 700; color: var(--heading); font-size: 14px; }
.review-dots { position: absolute; bottom: 14px; right: 20px; display: flex; gap: 6px; z-index: 2; }
.review-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong);
  border: 0; padding: 0; cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease);
}
.review-dot.is-active { background: var(--navy); transform: scale(1.3); }
@media (max-width: 640px) { .review-slideshow { min-height: 220px; } .review-slide { padding: var(--space-card-sm); } }

.statement-icon {
  width: 52px; height: 52px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: var(--radius);
  background: var(--ink-tint); color: var(--ink);
}
.statement-icon svg { width: 26px; height: 26px; }

.section-paper h2 svg, .section-warm h2 svg {
  width: 22px; height: 22px; margin-right: 10px; margin-bottom: -4px;
  color: var(--navy); display: inline-block; vertical-align: baseline;
}

/* ---------- Bandeau teaser ---------- */
.teaser-card {
  margin-top: 26px; padding: var(--space-card-sm); border-radius: var(--radius-lg);
  display: flex; align-items: center; gap: 18px; text-decoration: none;
  background: linear-gradient(120deg, var(--navy-tint), var(--ink-tint));
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.teaser-card::before {
  content: ""; position: absolute; inset: -50% -70%;
  background: var(--shine);
  transform: translateX(-130%) rotate(8deg);
  transition: transform .85s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
.teaser-card:hover::before { transform: translateX(30%) rotate(8deg); }
.teaser-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--navy); }
.teaser-card > svg:first-child {
  width: 46px; height: 46px; padding: 11px; box-sizing: border-box; flex-shrink: 0;
  color: var(--heading); background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.teaser-card div { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.teaser-card strong { font-family: "DM Serif Display", Georgia, serif; font-size: 17px; color: var(--heading); }
.teaser-card span:not(.teaser-arrow) { font-size: 14px; color: var(--ink-2); }
.teaser-arrow { flex-shrink: 0; }
.teaser-arrow svg, .teaser-arrow.arrow { width: 20px; height: 20px; color: var(--heading); transition: transform .3s var(--ease); }
.teaser-card:hover .teaser-arrow svg { transform: translateX(4px); }
@media (max-width: 560px) { .teaser-card { flex-wrap: wrap; } }

.card-wide { max-width: 78ch; padding: var(--space-card); }
.card-wide .card-icon { margin-bottom: 16px; }
.card-wide .btn { margin-top: 8px; }

/* ---------- Pages légales transcrites ---------- */
.legal-updated {
  font-family: "DM Sans", sans-serif; font-size: 13.5px; color: var(--ink-3);
  margin: 0 0 28px;
}
.legal-note {
  background: var(--navy-tint); border-left: 3px solid var(--navy);
  border-radius: var(--radius-sm); padding: var(--space-card-sm); margin: 0 0 32px;
}
.legal-note h2 { font-size: 17px; margin: 0 0 8px; }
.legal-note p { margin: 0; font-size: 15px; }
.legal-toc {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-card-sm); margin: 0 0 40px;
}
.legal-toc h2 { font-size: 16px; margin: 0 0 12px; }
.legal-toc ol {
  margin: 0; padding-left: 20px; columns: 2; column-gap: 32px;
  font-family: "DM Sans", sans-serif; font-size: 14.5px;
}
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }
.legal-toc a { color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover { color: var(--heading); text-decoration: underline; }
.legal-section { scroll-margin-top: 90px; margin-bottom: 34px; }
.legal-section h2 {
  font-size: clamp(19px, 2.2vw, 23px); margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.legal-section h3 { font-size: 16px; margin: 18px 0 6px; }
.legal-section p { margin: 0 0 10px; }
.legal-contact {
  margin-top: 44px; padding: var(--space-card-sm); background: var(--surface-2);
  border-radius: var(--radius-md); border: 1px solid var(--border);
}
.legal-contact h2 { font-size: 17px; margin: 0 0 8px; }

/* ---------- Notre histoire ---------- */
.history-prose h3 {
  font-size: 21px; margin: 40px 0 12px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.history-prose h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.history-prose p { color: var(--ink-2); margin: 0 0 14px; }
.history-prose ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-2); }
.history-prose li { margin-bottom: 4px; }
.history-em, p.history-em {
  font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-size: 18px;
  color: var(--heading); margin: 0 0 16px; line-height: 1.5;
}
.chain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 820px) { .chain-grid { grid-template-columns: repeat(2, 1fr); } }
.chain-col {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-card-sm);
}
.chain-col h4 { font-size: 15px; margin: 0 0 10px; color: var(--heading); }
.chain-col p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }

/* ---------- Widget anti-robot ---------- */
.cf-turnstile { margin: 4px 0 16px; min-height: 65px; }

/* ---------- Contact : numéros directs ---------- */
.phone-block { margin: 0 0 12px; font-size: 15px; }
.phone-block a { color: var(--heading); font-weight: 600; text-decoration: none; font-size: 17px; }
.phone-block a:hover { text-decoration: underline; }
.muted { color: var(--ink-3); font-size: 13.5px; margin: 0 0 16px; }

.inline-link { display: inline-flex; align-items: center; gap: 6px; color: var(--heading); text-decoration: underline; text-decoration-color: var(--navy-tint-2); text-underline-offset: 2px; font-weight: 500; transition: text-decoration-color .2s var(--ease); }
.inline-link:hover { text-decoration-color: var(--heading); }
.inline-link svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .25s var(--ease); }
.inline-link:hover svg.arrow { transform: translateX(3px); }

/* ---------- Configurateur (aide au choix) ---------- */
.configurator {
  display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start;
}
@media (max-width: 900px) { .configurator { grid-template-columns: 1fr; } }
.configurator-form { display: grid; gap: 18px; }
.config-group {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-card);
  position: relative; overflow: hidden;
}
.config-group > .card-icon { margin-bottom: 12px; }
.config-group h3 { font-size: 18px; margin-bottom: 14px; }
.config-checks { display: grid; gap: 10px; }
.config-check {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-sm);
  transition: background .2s var(--ease);
}
.config-check:hover { background: var(--navy-tint); }
.config-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--navy); flex-shrink: 0; cursor: pointer; }
.config-check span { font-size: 15px; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.config-check strong { font-family: "DM Serif Display", Georgia, serif; font-weight: 600; font-size: 15px; color: var(--heading); }
.config-check em { font-style: normal; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.config-blurb { font-size: 13.5px; color: var(--ink-2); margin: 0 0 16px; line-height: 1.5; }
.config-context { background: var(--navy-tint); border-color: var(--navy-tint-2); }
.config-field { margin-top: 16px; }
.config-field label { display: block; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.config-field select {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font-family: "Poppins", -apple-system, sans-serif; font-size: 14.5px;
}
.config-radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.config-radio {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--surface); font-size: 14px; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.config-radio:has(input:checked) { border-color: var(--navy); background: var(--navy-tint-2); font-weight: 600; }
.config-radio input { accent-color: var(--navy); cursor: pointer; }
.config-context-line {
  background: var(--navy-tint-2) !important; font-weight: 600;
}
.config-ai {
  margin-top: 6px; padding: var(--space-card-sm);
  background: var(--surface-3); border: 1px dashed var(--border-strong);
  display: none;
}
.config-ai.is-visible { display: block; animation: fadeUp .3s var(--ease); }
.config-ai p { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--ink-2); }
.config-ai-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.config-ai-row label { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.config-ai-row input { accent-color: var(--navy); cursor: pointer; }

.configurator-summary {
  position: sticky; top: 100px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--space-card);
  box-shadow: var(--shadow-md);
}
.configurator-summary h3 { font-size: 17px; margin-bottom: 14px; }
.configurator-summary ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.configurator-summary li {
  font-size: 13.5px; color: var(--ink); padding: 8px 10px;
  background: var(--navy-tint); border-radius: var(--radius-sm);
  animation: fadeUp .25s var(--ease);
}
.configurator-summary li.config-empty { background: none; color: var(--ink-3); padding: 0; font-style: italic; }
.configurator-summary .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .configurator-summary { position: static; } }

/* ---------- Photographies ----------
   <picture> WebP + repli JPEG, coin coupé assorti aux cartes. Le ratio est
   fixé pour réserver la place avant chargement (pas de CLS). */
picture { display: block; position: relative; }
picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo {
  overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}
.photo picture, .photo img { aspect-ratio: 4 / 3; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 32px 0; }
.photo-pair .photo:nth-child(2) { margin-top: 28px; }
@media (max-width: 700px) { .photo-pair { grid-template-columns: 1fr; } .photo-pair .photo:nth-child(2) { margin-top: 0; } }

/* ---------- Badge "augmenté IA" — posé sur les cartes de spécialité ---------- */
.ai-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--heading); background: var(--navy-tint);
  border: 1px solid var(--navy-tint-2);
  border-radius: 100px; padding: 3px 10px 3px 8px;
  vertical-align: middle; margin-left: 8px;
  white-space: nowrap;
}
.ai-badge svg { width: 12px; height: 12px; }
.card h3, .spec-head h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }