/* =====================================================================
   TSIPIKA Consulting — feuille de style commune à toutes les pages
   (version 2026-10-12 : bloc V6 « site vivant » en fin de fichier ; blocs V4 « confort de navigation » et V5 « titres, chiffres, deux langues » en fin de fichier)
   ---------------------------------------------------------------------
   Pour changer une couleur partout : modifiez la variable ci-dessous.
   Charte : encre, gris et or = couleurs principales ; émeraude = accent.
   Règle d'accessibilité : l'or (--or) n'est jamais utilisé pour un petit
   texte sur fond clair — utilisez --or-texte à la place.
   ===================================================================== */
:root {
  --encre: #0D1B2A;        /* texte principal, fonds sombres, boutons */
  --or: #C9A961;           /* accents, filets, boutons sur fond sombre */
  --or-texte: #8A6B2E;     /* or lisible pour petit texte sur fond clair */
  --ivoire: #FBFAF5;       /* fond de page */
  --creme: #F2EDE2;        /* sections alternées */
  --sable: #E5E0D5;        /* filets et bordures */
  --gris: #5A5A5A;         /* texte secondaire */
  --texte: #3E4650;        /* texte courant */
  --texte-clair: #C3C8CE;  /* texte courant sur fond sombre */
  --emeraude: #0F6E56;     /* accent secondaire (WhatsApp) */
  /* Couleurs qui changent en mode sombre (voir le bloc « Mode sombre » plus bas) */
  --fond: #FBFAF5;         /* fond de page */
  --band: #0D1B2A;         /* bandeaux sombres, tableau, carte WhatsApp */
  --hd-bg: rgba(251,250,245,0.92);  /* en-tête translucide */
  --champ: #FFFFFF;        /* fond des champs du formulaire */
  --champ-bord: #D8D2C4;   /* bordure des champs */
  --survol: rgba(13,27,42,0.06);    /* fond léger au survol des icônes */
  /* Couleur fixe : ne change jamais, même en mode sombre */
  --nuit: #0D1B2A;
  color-scheme: light;
}
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }  /* champ anti-spam invisible */
body.menu-open { overflow: hidden; }
/* ---- Mobile et tablette (moins de 900 px) ---- */
@media (max-width: 900px) { .ml-bloc { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } }
.hd-logo { mix-blend-mode: multiply; }  /* fond blanc du logo fondu dans l'ivoire, logo inchangé */

body { margin: 0; font-family: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif; background: var(--fond); color: var(--encre); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p, h1, h2, h3 { margin: 0; text-wrap: pretty; }
.w { max-width: 1240px; margin: 0 auto; padding: 0 56px; box-sizing: border-box; }
.serif { font-family: Georgia, 'Times New Roman', serif; }
.d1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 82px; line-height: 1.02; letter-spacing: -0.022em; color: var(--encre); }
.d1 em { font-style: italic; color: var(--or-texte); }
.d2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 52px; line-height: 1.08; letter-spacing: -0.015em; }
.d3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.005em; }
.lead { font-size: 21px; line-height: 1.6; color: var(--texte); }
.body { font-size: 17px; line-height: 1.72; color: var(--texte); }
.small { font-size: 14px; line-height: 1.6; color: var(--gris); }
.kicker { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--or-texte); font-weight: 600; }
.node { width: 9px; height: 9px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px rgba(201,169,97,0.18); flex-shrink: 0; }
.rule { height: 1px; background: var(--sable); border: 0; margin: 0; }

.hd { position: sticky; top: 0; z-index: 40; background: var(--hd-bg); transition: box-shadow .3s; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(13,27,42,0.08); }
.hd-in { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 32px; }
.hd-logo { width: 128px; height: auto; display: block; }
.nv { display: flex; align-items: center; gap: 34px; }
.nv a { position: relative; font-size: 15px; color: var(--texte); text-decoration: none; padding: 8px 0; transition: color .2s; }
.nv a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.nv a:hover { color: var(--encre); } .nv a:hover::after, .nv a.on::after { transform: scaleX(1); }
.nv a.on { color: var(--encre); font-weight: 600; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 3px; background: var(--nuit); color: var(--ivoire); font-size: 15.5px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; transition: background .2s, transform .2s, box-shadow .2s; }
.cta:hover { background: #1B2B3D; color: var(--ivoire); transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgba(13,27,42,0.55); }
.cta-sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.cta-gold { background: var(--or); color: var(--nuit); } .cta-gold:hover { background: #D6BA78; color: var(--nuit); }
.tl { display: inline-flex; align-items: center; min-height: 44px; font-size: 15.5px; font-weight: 600; color: var(--encre); text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: text-underline-offset .2s, color .2s; }
.tl:hover { text-underline-offset: 9px; color: var(--encre); }
.tl-light { color: var(--ivoire); } .tl-light:hover { color: var(--ivoire); }
.burger { display: none; color: var(--encre); width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; }
.sheet { position: fixed; inset: 0; z-index: 70; background: var(--nuit); overflow-y: auto; display: flex; flex-direction: column; padding: 22px 24px 36px; box-sizing: border-box; animation: sheet .35s cubic-bezier(.2,.7,.2,1); }
/* ---- Menu mobile ---- */
@keyframes sheet { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.sheet a.m { font-family: Georgia, serif; font-size: 34px; color: var(--ivoire); text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(251,250,245,0.1); }
.sheet a.m.on { color: var(--or); }

.band { background: var(--band); color: var(--ivoire); position: relative; overflow: hidden; }
.band .body, .band .lead { color: var(--texte-clair); }
.band .kicker { color: var(--or); }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.stick { position: sticky; top: 120px; }
.ex { display: flex; flex-direction: column; gap: 14px; padding: 32px 0 36px; border-top: 1px solid var(--sable); text-decoration: none; color: inherit; transition: border-color .3s; }
.ex:hover { border-top-color: var(--or); color: inherit; }
.ex .d3 { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ex:hover .d3 { transform: translateX(6px); }
.tag { font-size: 13.5px; color: var(--gris); }

/* ---- Diagnostic (accueil) ---- */
.q-opt { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 64px; padding: 16px 22px; box-sizing: border-box; background: rgba(251,250,245,0.04); border: 1px solid rgba(251,250,245,0.14); border-radius: 3px; color: var(--ivoire); font-family: inherit; font-size: 16.5px; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.q-opt:hover { background: rgba(201,169,97,0.1); border-color: var(--or); transform: translateX(4px); }
.q-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--or); flex-shrink: 0; box-sizing: border-box; }
.q-fade { animation: qf .45s cubic-bezier(.2,.7,.2,1); }
@keyframes qf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bar { height: 2px; background: rgba(251,250,245,0.14); position: relative; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--or); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.ghost { background: none; border: 0; padding: 0; min-height: 44px; font-family: inherit; font-size: 15px; color: var(--texte-clair); cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.ghost:hover { color: var(--ivoire); }

.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; padding: 20px 22px; font-size: 16px; border-bottom: 1px solid var(--sable); vertical-align: top; }
.cmp th { font-weight: 600; font-size: 14.5px; color: var(--gris); }
.cmp td:first-child { color: var(--encre); font-weight: 600; padding-left: 0; }
.cmp .us { background: var(--band); color: var(--ivoire); }
.cmp th.us { color: var(--or); border-radius: 3px 3px 0 0; }
.cmp td.us { border-bottom-color: rgba(251,250,245,0.1); }
.cmp td.mute { color: var(--gris); }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14.5px; font-weight: 600; color: var(--encre); }
.field input, .field textarea { min-height: 54px; padding: 0 16px; border: 1px solid var(--champ-bord); border-radius: 3px; background: var(--champ); font-family: inherit; font-size: 16px; color: var(--encre); box-sizing: border-box; width: 100%; transition: border-color .2s, box-shadow .2s; }
.field textarea { padding: 15px 16px; min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(201,169,97,0.35); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.wa { position: fixed; right: 26px; bottom: 26px; z-index: 50; width: 58px; height: 58px; border-radius: 50%; background: var(--emeraude); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -10px rgba(13,27,42,0.45); transition: transform .2s; }
.wa:hover { transform: scale(1.06); }

@keyframes signal { from { stroke-dashoffset: 560; } to { stroke-dashoffset: 0; } }
.sig { stroke-dasharray: 30 560; animation: signal 6s linear infinite; }
@keyframes nodepulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.np { animation: nodepulse 4.5s ease-in-out infinite; }
.chk { display: flex; align-items: flex-start; gap: 10px; }
.flag { width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.li-name { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--encre); text-decoration: none; align-self: flex-start; }
.li-name span { background-image: linear-gradient(var(--or), var(--or)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s; }
.li-name:hover span, .li-name:focus-visible span { background-size: 100% 1.5px; }
/* ---- Animations (désactivées si l'utilisateur réduit les animations) ---- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.in { animation: rise 1s cubic-bezier(.2,.7,.2,1) backwards; }
.i1 { animation-delay: .05s; } .i2 { animation-delay: .2s; } .i3 { animation-delay: .38s; } .i4 { animation-delay: .56s; } .i5 { animation-delay: .8s; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.trace { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 2.2s .5s cubic-bezier(.45,0,.2,1) backwards; }
@keyframes pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
.pop { transform-box: fill-box; transform-origin: center; animation: pop .5s cubic-bezier(.3,1.6,.5,1) backwards; }
@keyframes shrink { to { height: 64px; } }
@supports (animation-timeline: scroll()) {
  .hd-in { animation: shrink linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
}
/* ---- Mobile et tablette (moins de 900 px) ---- */
@media (max-width: 900px) {
  .w { padding: 0 22px; }
  .nv, .hd-cta { display: none !important; } .burger { display: flex; }
  .hd-in { height: 66px; }
  .d1 { font-size: 46px; } .d2 { font-size: 34px; } .d3 { font-size: 24px; } .lead { font-size: 18.5px; }
  .g2, .g3, .g4, .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .stick { position: static; }
  .hide-m { display: none !important; }
  .pad { padding-top: 88px !important; padding-bottom: 88px !important; }
  .cmp th, .cmp td { padding: 14px 10px; font-size: 14.5px; }
  .stack-m { flex-direction: column !important; align-items: flex-start !important; }
  .sprints { grid-template-columns: minmax(0, 1fr) !important; } .sprints > div { grid-column: auto !important; }
  .g4.pl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- Diagnostic : chantiers et formulaire ---- */
.diag-prio { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid rgba(251,250,245,0.1); }
.form-status { padding: 16px 18px; border-radius: 3px; font-size: 15.5px; line-height: 1.6; }
.form-status.ok { background: #E1F5EE; color: #073A2D; }
.form-status.err { background: #F6E3DF; color: #7A2E22; }

/* =====================================================================
   V4 — CONFORT DE NAVIGATION
   Mode sombre · chargement · barre de progression · retour en haut ·
   recherche · boutons copier · bandeau cookies · effets de survol
   ===================================================================== */

/* ---- Mode sombre : activé par le bouton lune/soleil (choix mémorisé) ---- */
[data-theme="dark"] {
  --fond: #0A131D;
  --encre: #EEE9DE;        /* devient la couleur du texte principal */
  --creme: #0F1C29;
  --sable: rgba(238,233,222,0.13);
  --gris: #9BA3AC;
  --texte: #C3C8CE;
  --or-texte: #D4B876;
  --band: #102133;
  --hd-bg: rgba(10,19,29,0.86);
  --champ: #0F1C29;
  --champ-bord: rgba(238,233,222,0.2);
  --survol: rgba(238,233,222,0.08);
  color-scheme: dark;
}
[data-theme="dark"] .cta:not(.cta-gold) { background: var(--or); color: var(--nuit); }
[data-theme="dark"] .cta:not(.cta-gold):hover { background: #D6BA78; color: var(--nuit); }
[data-theme="dark"] .band { border-top: 1px solid rgba(201,169,97,0.12); }
/* Logo inchangé : posé sur une pastille claire, comme sur son fond d'origine */
[data-theme="dark"] .hd-logo, [data-theme="dark"] .loader img { mix-blend-mode: normal; background: #F7F7F7; border-radius: 6px; padding: 5px 9px; box-sizing: content-box; }
[data-theme="dark"] .hd-logo { width: 112px; }
[data-theme="dark"] .hero-circuit [stroke="#0D1B2A"] { stroke: #EEE9DE; }
[data-theme="dark"] .hero-circuit [fill="#0D1B2A"] { fill: #EEE9DE; }
[data-theme="dark"] .hero-circuit [fill="#FBFAF5"] { fill: var(--fond); }
[data-theme="dark"] .hero-circuit [stroke="#5A5A5A"] { stroke: #8C939B; }
[data-theme="dark"] .hero-circuit [fill="#5A5A5A"] { fill: #8C939B; }
[data-theme="dark"] .form-status.ok { background: rgba(15,110,86,0.22); color: #9BE3C7; }
[data-theme="dark"] .form-status.err { background: rgba(170,70,50,0.22); color: #F2B8AC; }
[data-theme="dark"] .field input::placeholder, [data-theme="dark"] .field textarea::placeholder { color: #7D858E; }
.i-soleil { display: none; }
[data-theme="dark"] .i-soleil { display: block; }
[data-theme="dark"] .i-lune { display: none; }
::selection { background: rgba(201,169,97,0.35); }

/* Animation du changement de thème : cercle qui s'ouvre depuis le bouton */
@keyframes vt-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); } }
html.theme-anim::view-transition-old(root) { animation: none; }
html.theme-anim::view-transition-new(root) { animation: vt-reveal .65s cubic-bezier(.4,0,.2,1); }
/* Transition douce entre les pages (navigateurs récents ; ignorée ailleurs) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
html:not(.theme-anim) .hd { view-transition-name: entete; }

/* ---- Lien d'évitement visible au clavier ---- */
a.visually-hidden:focus { position: fixed !important; top: 12px; left: 12px; z-index: 200; width: auto; height: auto; clip: auto; padding: 10px 16px; border-radius: 4px; background: var(--nuit); color: var(--ivoire); }

/* ---- En-tête collant : icônes, ombre au défilement, barre de progression ---- */
.hd.defile { box-shadow: 0 10px 26px -20px rgba(13,27,42,0.32); }
.hd-act { display: flex; align-items: center; gap: 4px; }
.hd-act .hd-cta { margin-left: 14px; }
.ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--encre); cursor: pointer; transition: background .2s, color .2s; }
.ic:hover { background: var(--survol); }
.ic svg { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.ic[data-theme-toggle]:hover svg { transform: rotate(-20deg); }
.ic[data-search-open]:hover svg { transform: scale(1.08); }
.hd .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--or), #E3CB8F); transform: scaleX(0); transform-origin: left; pointer-events: none; }
[id] { scroll-margin-top: 96px; }

/* ---- Chargement : logo + filet or, une fois par visite ---- */
.loader { display: none; }
.premiere .loader { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: var(--fond); pointer-events: none; animation: ld-out .55s 1s cubic-bezier(.7,0,.3,1) forwards; }
.loader-in { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loader img { width: 170px; height: auto; mix-blend-mode: multiply; animation: ld-logo .7s cubic-bezier(.2,.7,.2,1) backwards; }
.loader i { position: relative; display: block; width: 170px; height: 2px; background: var(--sable); overflow: hidden; }
.loader i::after { content: ""; position: absolute; inset: 0; background: var(--or); transform-origin: left; animation: ld-bar .9s .1s cubic-bezier(.6,0,.2,1) backwards; }
@keyframes ld-logo { from { opacity: 0; transform: translateY(8px); } }
@keyframes ld-bar { from { transform: scaleX(0); } }
@keyframes ld-out { to { opacity: 0; visibility: hidden; } }
.premiere .i1 { animation-delay: 1.05s; } .premiere .i2 { animation-delay: 1.2s; } .premiere .i3 { animation-delay: 1.38s; } .premiere .i4 { animation-delay: 1.56s; } .premiere .i5 { animation-delay: 1.8s; }

/* ---- Apparition des blocs au défilement (ajoutée par site.js) ---- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
.js .rv.vis { opacity: 1; transform: none; }

/* ---- Retour en haut ---- */
.haut { position: fixed; right: 33px; bottom: 98px; z-index: 49; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--sable); border-radius: 50%; background: var(--fond); color: var(--encre); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(13,27,42,0.45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s, visibility .3s, background .2s, color .2s, border-color .2s; }
.haut.visible { opacity: 1; visibility: visible; transform: none; }
.haut:hover { background: var(--nuit); border-color: var(--nuit); color: var(--or); }
.haut svg { transition: transform .3s; } .haut:hover svg { transform: translateY(-2px); }

/* ---- Boutons « copier » (e-mail, téléphone) ---- */
.cp-row { display: inline-flex; align-items: center; gap: 4px; }
.cp { display: none; }
.js .cp { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .65; cursor: pointer; transition: opacity .2s, background .2s, color .2s; }
.js .cp:hover, .js .cp:focus-visible { opacity: 1; background: rgba(201,169,97,0.16); }
.cp .i-ok { display: none; } .cp.ok .i-ok { display: block; } .cp.ok .i-cp { display: none; }
.js .cp.ok { opacity: 1; color: var(--emeraude); } .band .cp.ok { color: #9BE3C7; } [data-theme="dark"] .js .cp.ok { color: #9BE3C7; }
.cp::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; padding: 4px 9px; border-radius: 4px; background: var(--nuit); color: var(--ivoire); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .2s, transform .2s; }
.band .cp::after, [data-theme="dark"] .cp::after { background: var(--or); color: var(--nuit); }
.cp:hover::after, .cp:focus-visible::after, .cp.ok::after { opacity: 1; transform: translate(-50%, 0); }

/* ---- Bandeau cookies (informatif : aucun cookie publicitaire) ---- */
.ck { position: fixed; left: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 14px; max-width: 390px; padding: 20px 22px; box-sizing: border-box; border: 1px solid rgba(201,169,97,0.35); border-radius: 6px; background: var(--nuit); color: var(--texte-clair); font-size: 14.5px; line-height: 1.6; box-shadow: 0 24px 50px -20px rgba(13,27,42,0.6); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1); }
.ck.visible { opacity: 1; transform: none; pointer-events: auto; }
.ck p { display: flex; gap: 12px; } .ck .node { margin-top: 7px; } .ck strong { color: var(--ivoire); }
.ck-act { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ck .tl { min-height: 40px; color: var(--ivoire); font-size: 14px; }
.ck .cta { min-height: 40px; background: var(--or); color: var(--nuit); }
.ck .cta:hover { background: #D6BA78; color: var(--nuit); }

/* ---- Recherche sur tout le site (Ctrl + K ou « / ») ---- */
body.rch-open { overflow: hidden; }
.rch { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 11vh 16px 16px; box-sizing: border-box; }
.rch-fond { position: absolute; inset: 0; background: rgba(13,27,42,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: rch-fade .25s; }
.rch-panneau { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 660px; max-height: 76vh; overflow: hidden; border: 1px solid var(--sable); border-radius: 8px; background: var(--fond); box-shadow: 0 40px 90px -30px rgba(13,27,42,0.6); animation: rch-in .38s cubic-bezier(.2,.7,.2,1); }
@keyframes rch-fade { from { opacity: 0; } }
@keyframes rch-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
.rch-champ { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--sable); color: var(--or-texte); }
.rch-champ input { flex: 1; min-width: 0; height: 64px; padding: 0; border: 0; outline: none; background: transparent; color: var(--encre); font-family: inherit; font-size: 18px; }
.rch-champ input::placeholder { color: var(--gris); }
.rch-champ input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rch-x { flex-shrink: 0; padding: 5px 9px; border: 1px solid var(--sable); border-radius: 4px; background: var(--creme); color: var(--gris); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.rch-corps { overflow-y: auto; padding: 6px 8px 10px; }
.rch-etat { padding: 12px 12px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--gris); }
.rch-liste { margin: 0; padding: 0; list-style: none; }
.rch-liste a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-left: 2px solid transparent; border-radius: 5px; color: var(--encre); text-decoration: none; transition: background .15s, border-color .15s; }
.rch-liste a[aria-selected="true"], .rch-liste a:hover { border-left-color: var(--or); background: var(--creme); }
.rch-page { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--or-texte); }
.rch-titre { font-family: Georgia, 'Times New Roman', serif; font-size: 19px; line-height: 1.3; }
.rch-extrait { font-size: 14px; line-height: 1.55; color: var(--texte); }
.rch mark { padding: 0 1px; border-radius: 2px; background: rgba(201,169,97,0.32); color: inherit; }
.rch-vide { padding: 18px 14px 22px; font-size: 15px; line-height: 1.6; color: var(--texte); }
.rch-vide a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; }
.rch-pied { display: flex; gap: 18px; padding: 10px 20px; border-top: 1px solid var(--sable); font-size: 12px; color: var(--gris); }
kbd { margin-right: 3px; padding: 1px 6px; border: 1px solid var(--sable); border-bottom-width: 2px; border-radius: 4px; background: var(--creme); font-family: inherit; font-size: 11px; }

/* ---- Menu mobile ---- */
.sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sheet-nav { display: flex; flex-direction: column; }
.sheet a.m { display: flex; align-items: baseline; gap: 16px; animation: m-in .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }
.sheet a.m i { min-width: 24px; font-family: 'Open Sans', sans-serif; font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: .05em; color: var(--or); }
@keyframes m-in { from { opacity: 0; transform: translateY(16px); } }
.sheet-outils { display: flex; gap: 10px; margin: 28px 0; animation: m-in .55s .38s cubic-bezier(.2,.7,.2,1) backwards; }
.sheet-btn, .sheet-rapide a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 12px; border: 1px solid rgba(251,250,245,0.18); border-radius: 3px; background: rgba(251,250,245,0.04); color: var(--ivoire); font-family: inherit; font-size: 15px; text-decoration: none; cursor: pointer; }
.sheet-btn svg { color: var(--or); }
.sheet-pied { display: flex; flex-direction: column; gap: 12px; margin-top: auto; animation: m-in .55s .45s cubic-bezier(.2,.7,.2,1) backwards; }
.sheet-rapide { display: flex; gap: 10px; }

/* ---- Effets au survol (souris uniquement) ---- */
@media (hover: hover) {
  .cta { position: relative; overflow: hidden; }
  .cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%); transform: translateX(-120%); transition: transform .75s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
  .cta:hover::after { transform: translateX(120%); }
  .crd { position: relative; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .crd::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .crd:hover { transform: translateY(-4px); }
  .crd:hover::before { transform: scaleX(1); }
  .step { transition: border-color .3s; }
  .step:hover { border-top-color: var(--or) !important; }
  .step .num { display: inline-block; transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s; }
  .step:hover .num { transform: translateX(8px); color: var(--or) !important; }
  .step .d3 { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .step:hover .d3 { transform: translateX(4px); }
  .sprints > div { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s; }
  .sprints > div:hover { transform: translateY(-4px); border-color: var(--or) !important; }
  .cmp tbody td { transition: background .25s; }
  .cmp tbody tr:hover td:not(.us) { background: rgba(201,169,97,0.09); }
  .cmp tbody tr:hover td.us { background: #16293D; }
  .fl { background-image: linear-gradient(var(--or), var(--or)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s, color .2s; }
  .fl:hover { background-size: 100% 1px; color: var(--ivoire) !important; }
  .wa-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
  .wa-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(13,27,42,0.7); }
  .ml-bloc { transition: border-color .3s; } .ml-bloc:hover { border-top-color: var(--or) !important; }
  .wa:hover { box-shadow: 0 0 0 8px rgba(15,110,86,0.15), 0 14px 30px -10px rgba(13,27,42,0.45); }
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
  .hd-act { gap: 0; }
  .ic { width: 40px; height: 40px; }
  .haut { right: 33px; bottom: 96px; }
  .ck { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .rch { padding: 0; }
  .rch-panneau { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; }
  .rch-pied { display: none; }
  .sheet a.m { font-size: 32px; }
  .split { grid-template-columns: minmax(0, 1fr) !important; }  /* corrige la page Contact sur mobile */
  .ck { font-size: 14px; padding: 16px 18px; }
}
@media print { .js .rv { opacity: 1; transform: none; } .ck, .haut, .wa, .loader { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* =====================================================================
   V5 — TITRES QUI SE REMARQUENT, CHIFFRES LISIBLES, DEUX LANGUES
   ===================================================================== */

/* ---- Chiffres des titres ----
   Georgia dessine 0 et 1 comme des minuscules (« o6 », « oı »), peu lisibles.
   Dans les titres, seuls les chiffres 0-9 passent sur une police à chiffres
   pleine hauteur, plus marquée (extrait de DM Serif Display, licence libre
   OFL : voir assets/fonts/LICENCE-chiffres.txt). Les lettres restent en Georgia. */
@font-face { font-family: 'Tsipika Chiffres'; src: url('/assets/fonts/chiffres.woff2') format('woff2'); font-display: swap; unicode-range: U+0030-0039; }
.serif, .d1, .d2, .d3, .rch-titre { font-family: 'Tsipika Chiffres', Georgia, 'Times New Roman', serif; }

/* ---- Or des grands titres : plus vif que --or-texte, réservé aux textes de 24 px et plus ---- */
:root { --or-vif: #A47F2F; }
[data-theme="dark"] { --or-vif: #D4B876; }

/* ---- Accents de couleur dans les titres ----
   <em>…</em>              : mots clés en italique or
   <span class="nb">…</span> : chiffres (et leur mot) en or, droits */
.d1 em, .d2 em { font-style: italic; color: var(--or-vif); }
.nb { font-weight: 700; color: var(--or-texte); white-space: nowrap; }
.d1 .nb, .d2 .nb, .d3 .nb { font-weight: 400; color: var(--or-vif); }
.band .nb, .band .d2 em, .band .d2 .nb { color: var(--or); }
[data-count] { color: var(--or-vif); }

/* ---- Sous-titres (au-dessus des titres) : plus grands, chiffre en vedette ---- */
.kicker { gap: 14px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.node { width: 11px; height: 11px; box-shadow: 0 0 0 5px rgba(201,169,97,0.2); }
.kicker .nb { margin: 0 .05em; font-family: 'Tsipika Chiffres', Georgia, serif; font-size: 1.7em; font-weight: 400; line-height: .9; color: inherit; vertical-align: -0.05em; }

/* ---- Textes d'accompagnement plus lisibles ---- */
.intro { font-size: 19.5px; line-height: 1.65; }                          /* paragraphe sous un titre de section */
.note { font-size: 15px; color: #A3AAB3; }                                /* précision sous le diagnostic */
.rep { font-size: 15.5px; font-weight: 700; color: var(--or-texte); }     /* « Notre réponse : … », familles de technologies */
.lab { font-size: 16px; color: var(--texte); }                            /* légende sous un grand chiffre */
.num { font-size: 54px; line-height: 1; color: var(--or-vif); }           /* numéros des étapes (page Méthode) */

/* ---- Titres des expertises : numéro et « & » en or, étiquettes en pastilles ---- */
.ix { font-family: 'Tsipika Chiffres', Georgia, serif; color: var(--or-vif); }
h2 .ix { margin-right: .45em; }
.ex > .ix { font-size: 24px; line-height: 1; }
.amp { margin-right: .06em; font-style: italic; color: var(--or-vif); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 4px 12px; border: 1px solid rgba(164,127,47,0.32); border-radius: 999px; background: rgba(201,169,97,0.1); color: var(--or-texte); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
[data-theme="dark"] .chip { border-color: rgba(212,184,118,0.3); }
@media (hover: hover) {
  .ex .d3 { transition: transform .35s cubic-bezier(.2,.7,.2,1), color .3s; }
  .ex:hover .d3 { color: var(--or-vif); }
}

/* ---- Choix de la langue : drapeaux (langue active entourée d'or) ---- */
.lg { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.lg > * { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; border-radius: 5px; text-decoration: none; }
.dr { display: block; width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(13,27,42,0.18); }
.lg .on .dr { box-shadow: 0 0 0 1px var(--fond), 0 0 0 3px var(--or); }
.lg a .dr { opacity: .62; filter: saturate(.8); transition: opacity .2s, filter .2s, transform .25s cubic-bezier(.2,.7,.2,1); }
.lg a:hover .dr, .lg a:focus-visible .dr { opacity: 1; filter: none; transform: translateY(-1px); }
.sheet .lg { margin-left: auto; margin-right: 6px; }
.sheet .lg .on .dr { box-shadow: 0 0 0 1px var(--nuit), 0 0 0 3px var(--or); }
.sheet .lg a .dr, [data-theme="dark"] .lg a .dr { opacity: .75; }
footer .dr { width: 18px; height: 12px; border-radius: 2px; }

@media (max-width: 900px) {
  .kicker { font-size: 16.5px; }
  .intro { font-size: 18px; }
  .num { font-size: 44px; }
  .lg { margin-right: 2px; }
  .lg > * { width: 31px; }
  h2 .ix { display: block; margin: 0 0 8px; font-size: .82em; }
}
@media (max-width: 380px) {
  .hd-in { gap: 8px; }
  .hd-logo { width: 96px; }
  .ic, .hd-act .burger { width: 34px; }
  .lg > * { width: 28px; }
  .dr { width: 20px; height: 14px; }
}

/* =====================================================================
   V6 — SITE VIVANT (effets pilotés par assets/js/vivant.js)
   ===================================================================== */
/* 1. Circuit vivant (haut de l'accueil) */
.vif { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
@media (max-width: 900px) { .vif { opacity: .55; } }

/* 2. Schéma TSIPIKA → 06 expertises */
.schema { max-width: 440px; margin-top: 30px; }
.schema svg { display: block; width: 100%; height: auto; overflow: visible; }
.schema .racine circle { fill: var(--nuit); transition: fill .3s; }
[data-theme="dark"] .schema .racine circle { fill: var(--or); }
.schema.actif .racine circle { fill: var(--or); }
.schema .tr { fill: none; stroke: var(--encre); stroke-opacity: .22; stroke-width: 1.4; transition: stroke .3s, stroke-opacity .3s, stroke-width .3s; }
.schema .flux { fill: none; stroke: var(--or); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .035 .065; opacity: 0; transition: opacity .3s; }
.schema .nd { fill: var(--fond); stroke: var(--or-vif); stroke-width: 1.6; transition: fill .3s, r .3s; }
.schema .br { cursor: pointer; outline: none; }
.schema .zone { fill: transparent; }
.schema .br.on .tr { stroke: var(--or); stroke-opacity: 1; stroke-width: 2; }
.schema .br.on .flux { opacity: 1; animation: sch-flux 2.4s linear infinite; }
.schema .br.on .nd { fill: var(--or); }
.js .schema .tr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .schema .nd { opacity: 0; transition: opacity .5s, fill .3s; }
.js .schema.trace .tr { animation: sch-trace 1.1s calc(var(--i) * .13s + .15s) cubic-bezier(.45,0,.2,1) forwards; }
.js .schema.trace .nd { opacity: 1; transition-delay: calc(var(--i) * .13s + .9s), 0s; }
@keyframes sch-trace { to { stroke-dashoffset: 0; } }
@keyframes sch-flux { to { stroke-dashoffset: -1; } }
a.ex.lie { border-top-color: var(--or); }
a.ex.lie .d3 { color: var(--or-vif); }

/* 3. Halo or qui suit la souris sur les bandes sombres */
.band.spot { background-image: radial-gradient(520px circle at var(--mx) var(--my), rgba(201,169,97,0.13), transparent 62%); }

/* 4. Cartes en relief */
.tilt { position: relative; transition: transform .25s cubic-bezier(.2,.7,.2,1) !important; will-change: transform; }
.tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(201,169,97,0.16), transparent 65%); }
.tilt:hover::after { opacity: 1; }

/* 5. Boutons aimantés */
.aimant { transition: transform .3s cubic-bezier(.2,.7,.2,1), background .2s, box-shadow .2s, color .2s, opacity .3s, visibility .3s !important; }

/* 6. Titres mot par mot */
.mots .mot { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .6s, transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--k) * 45ms); }
.mots.vis .mot { opacity: 1; transform: none; }

/* 7. Ligne des étapes (page Méthode) */
.etapes-fil { position: relative; }
.etapes-fil .fil { position: absolute; left: -36px; top: 58px; bottom: 90px; width: 2px; background: var(--sable); }
.etapes-fil .fil i { position: absolute; inset: 0; background: linear-gradient(var(--or), var(--or-vif)); transform-origin: top; transform: scaleY(var(--p, 0)); }
.etapes-fil .step { position: relative; }
.etapes-fil .step::before { content: ""; position: absolute; left: -42px; top: 52px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sable); background: var(--fond); transition: all .4s; }
.etapes-fil .step.atteinte::before { border-color: var(--or); background: var(--or); box-shadow: 0 0 0 6px rgba(201,169,97,0.18); }
.etapes-fil .step.atteinte .num { color: var(--or); }
@media (max-width: 900px) { .etapes-fil .fil { left: -13px; } .etapes-fil .step::before { left: -19px; } }

@media (prefers-reduced-motion: reduce) {
  .schema .tr { stroke-dashoffset: 0 !important; } .js .schema .nd { opacity: 1; }
  .mots .mot { opacity: 1; transform: none; } .etapes-fil .fil i { transform: none; }
}

/* =====================================================================
   V7 — ILLUSTRATIONS FONDUES DANS LES PAGES (assets/js/demos.js)
   Décoratives (aria-hidden) : aucun texte du site n'est ajouté.
   1. Photo de démonstration de sprint (accueil, section Méthode), animée au défilement
   2. Illustrations des 06 expertises (page Expertises + écran de l'accueil)
   3. Habillage commun des interfaces (thème clair fixe)
   ===================================================================== */

/* 1. Photo : s'ouvre au défilement (--p de 0 à 1), puis les écrans s'allument */
.scene { --p: 1; position: relative; aspect-ratio: 1568 / 720; border-radius: 10px; overflow: hidden; background: #E8E4DA;
  clip-path: inset(calc((1 - var(--p)) * 8%) calc((1 - var(--p)) * 12%) round 14px); }
.js .scene { --p: 0; }
.sc-cadre { position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 1568 / 881; transform: translateY(-50%) scale(calc(1.18 - .16 * var(--p))); transform-origin: 55% 42%; }
.sc-cam { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.sc-fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-pp { position: absolute; height: auto; pointer-events: none; }
.sc-ecran { position: absolute; overflow: hidden; background: #111A24; }
.sc-ecran::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #0B1118; transition: opacity .5s .1s; }
.sc-ecran::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%); }
.scene.allume .sc-ecran::before { opacity: 0; } .scene.allume .sc-pc::before { transition-delay: .55s; }
.sc-ecran > .dm-app { position: absolute; left: 0; top: 0; transform: scale(var(--s, .5)); transform-origin: 0 0; border: 0; border-radius: 0; box-shadow: none; transition: opacity .9s; pointer-events: none; }
.sc-mur > .dm-app { width: 1100px; } .sc-pc > .dm-app { width: 1000px; }
.sc-ecran > .dm-diapos, .vg-bi > .dm-diapos { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; opacity: 0; transition: opacity .9s; }
.sc-ecran .dm-bar, .vg-bi .dm-diapos .dm-bar { display: none; }
.sc-ecran .dm-pile, .vg-bi .dm-pile { height: 100%; aspect-ratio: auto; background: #F3F2EE; } .sc-ecran .dm-pile img, .vg-bi .dm-pile img { object-fit: contain; }
.sc-mur.reel > .dm-diapos, .vg-bi.reel > .dm-diapos { opacity: 1; } .sc-mur.reel > .dm-bi, .vg-bi.reel > .dm-bi { opacity: 0; }

/* Photos d'ambiance des pages intérieures : s'ouvrent et se recadrent au défilement (--p de 0 à 1) */
.photo-band { margin-top: -24px; margin-bottom: 56px; }
@media (max-width: 900px) { .photo-band { margin-top: -8px; margin-bottom: 40px; } }
.photo { --p: 1; margin: 0; position: relative; aspect-ratio: 21 / 8; overflow: hidden; border-radius: 10px; background: #E8E4DA;
  clip-path: inset(calc((1 - var(--p)) * 6%) calc((1 - var(--p)) * 8%) round 12px); }
.js .photo { --p: 0; }
.photo img { position: absolute; left: 0; width: 100%; height: 132%; top: calc(-16% - (1 - var(--p)) * 8%); object-fit: cover; object-position: center 40%; transform: scale(calc(1.12 - .12 * var(--p))); }
@media (max-width: 900px) { .photo { aspect-ratio: 4 / 3; } }

/* Informations confidentielles volontairement illisibles dans les illustrations */
.flou { filter: blur(4.5px); user-select: none; } .dm-v.flou { filter: blur(10px); }

/* 2. Illustrations des expertises */
.ex.ex-vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); grid-template-rows: 1fr auto 1fr; column-gap: 64px; row-gap: 18px; }
.ex-vis > h2 { grid-column: 1; grid-row: 1; align-self: end; } .ex-vis > div:not(.vg-cadre) { grid-column: 1; grid-row: 2; }
.vg-cadre, .vg-hub { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #F7F5EF; border: 1px solid #E7E2D6;
  box-shadow: 0 30px 60px -36px rgba(13,27,42,.4); }
.ex-vis > .vg-cadre { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.js .vg-cadre { opacity: 0; transform: perspective(1200px) rotateY(-12deg) translateX(24px); transition: opacity .8s, transform 1s cubic-bezier(.2,.7,.2,1); }
.js .ex.vu .vg-cadre { opacity: 1; transform: none; }
.vg-hub { margin-top: 18px; }
.js .vg-hub { opacity: 0; transform: translateY(20px); transition: opacity .8s, transform .9s cubic-bezier(.2,.7,.2,1); } .js .vg-hub.vu { opacity: 1; transform: none; }
.vg-hub::after { content: attr(data-n); position: absolute; right: 12px; bottom: 8px; z-index: 5; font: 400 22px/1 'Tsipika Chiffres', Georgia, serif; color: var(--or-vif); opacity: .9; }
.vg-hub > .vg { opacity: 0; transition: opacity .6s; } .vg-hub > .vg.on { opacity: 1; }
#expertises a.ex.vg-actif, #expertise a.ex.vg-actif { border-top-color: var(--or); }
[data-theme="dark"] .vg-cadre, [data-theme="dark"] .vg-hub { border-color: #2A3B4E; }

/* une illustration : dessin de 560 × 350, réduit à la taille du cadre */
.vg { position: absolute; left: 0; top: 0; width: 560px; height: 350px; transform: scale(var(--s, .7)); transform-origin: 0 0; box-sizing: border-box; padding: 18px 20px;
  font-family: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 13px; color: #0D1B2A; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.vg-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .vg-h b { font-size: 15px; } .vg-h i { font-style: normal; font-size: 12px; color: #5A5A5A; }
.vg-sync { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; background: #E1F5EE; color: #0F6E56; font-size: 11.5px; font-weight: 600; }
.vg-sync i { width: 8px; height: 8px; border-radius: 50%; background: #0F6E56; animation: vg-pouls 1.6s ease-in-out infinite; }
@keyframes vg-pouls { 50% { opacity: .3; transform: scale(.7); } }
/* 01 audit */
.vg-audit .vg-c { flex: 1; display: grid; grid-template-columns: 250px 1fr; gap: 14px; align-items: center; min-height: 0; }
.vg-radar { width: 100%; height: 100%; } .vg-radar .g { fill: none; stroke: #E5E0D5; } .vg-radar text { font-size: 11px; fill: #5A5A5A; text-anchor: middle; }
.vg-radar .cible { fill: rgba(15,110,86,.06); stroke: #0F6E56; stroke-dasharray: 4 4; stroke-width: 1.5; }
.vg-radar .actuel { fill: rgba(201,169,97,.32); stroke: #A47F2F; stroke-width: 2; transition: all 1.2s cubic-bezier(.2,.7,.2,1); }
.vg-ch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vg-ch li { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: #fff; border: 1px solid #E7E2D6; border-radius: 8px; font-weight: 600; font-size: 12.5px; }
.vg-ch em { font-style: normal; color: #A47F2F; margin-right: 8px; font-family: 'Tsipika Chiffres', Georgia, serif; font-size: 15px; }
.vg-ch li > i { height: 5px; border-radius: 3px; background: linear-gradient(90deg, #C9A961 var(--w), #EEEAE0 var(--w)); }
.vg-audit.plein .vg-ch li > i { background: linear-gradient(90deg, #0F6E56 100%, #EEEAE0 100%); transition: background 1s; }
/* 02 web & mobile : deux téléphones */
.vg-web { padding: 0; display: block; background: radial-gradient(circle at 70% 30%, #EFE9DA, #F7F5EF 60%); }
.vg-tel, .vg-tel2 { position: absolute; width: 150px; height: 300px; border-radius: 26px; background: #0D1B2A; padding: 9px; box-sizing: border-box; box-shadow: 0 24px 40px -22px rgba(13,27,42,.6); }
.vg-tel { left: 130px; top: 26px; } .vg-tel2 { left: 296px; top: 40px; transform: rotate(6deg); }
.vg-tel-ecran { position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #F7F5EF; }
.vg-tel-ecran > .dm-app { position: absolute; left: 0; top: 0; width: 400px; transform: scale(.33); transform-origin: 0 0; border: 0; border-radius: 0; box-shadow: none; }
.vg-tel-ecran .dm-bar, .vg-tel-ecran .dm-new, .vg-tel-ecran .dm-tri { display: none; }
/* 03 logiciels métier */
.vg-tab { display: flex; flex-direction: column; background: #fff; border: 1px solid #E7E2D6; border-radius: 8px; overflow: hidden; }
.vg-tr { display: grid; grid-template-columns: 90px 1fr 110px 92px; gap: 10px; align-items: center; padding: 13px 14px; border-top: 1px solid #F0ECE3; font-size: 12.5px; }
.vg-tr.th { border-top: 0; background: #FAF8F3; font-size: 11px; font-weight: 700; color: #5A5A5A; text-transform: uppercase; letter-spacing: .04em; }
.vg-tr span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.vg-tr.flash { animation: vg-flash 1.4s ease-out; } @keyframes vg-flash { from { background: rgba(201,169,97,.28); } }
.st { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; transition: background .4s, color .4s; }
.st.s0 { background: #EEEAE0; color: #5A5A5A; } .st.s1 { background: #EEEEFB; color: #4646B8; } .st.s2 { background: #E1F5EE; color: #0F6E56; } .st.s3 { background: #FBF1DC; color: #8A6B2E; }
/* 04 BI */
.vg-bi { padding: 0; display: block; } .vg-bi > .dm-bi { position: absolute; left: 0; top: 0; width: 1100px; transform: scale(.5091); transform-origin: 0 0; border: 0; border-radius: 0; box-shadow: none; transition: opacity .9s; }
/* 05 automatisation */
.vg-flux { position: relative; padding: 8px 0 0; }
.vg-flux { margin-top: 18px; } .vg-flux svg { width: 100%; height: 50px; } .vg-flux .fl { stroke: #E5E0D5; stroke-width: 3; stroke-dasharray: 6 6; fill: none; }
.vg-flux .jt { fill: #C9A961; animation: vg-jeton 3.6s linear infinite; } .vg-flux .j2 { animation-delay: -1.2s; fill: #0F6E56; } .vg-flux .j3 { animation-delay: -2.4s; }
@keyframes vg-jeton { from { transform: translateX(40px); } to { transform: translateX(480px); } }
.vg-noeuds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: -4px; }
.vg-noeuds span { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12.5px; font-weight: 600; }
.vg-noeuds i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0D1B2A; color: #fff; font-style: normal; font-size: 12px; box-shadow: 0 0 0 4px #F7F5EF, 0 0 0 5px #E5E0D5; animation: vg-noeud 3.6s calc(var(--i) * .9s) infinite; }
@keyframes vg-noeud { 0%, 70%, 100% { background: #0D1B2A; } 10%, 30% { background: #C9A961; } }
.vg-kpi { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vg-kpi div { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: #fff; border: 1px solid #E7E2D6; border-radius: 8px; }
.vg-kpi b { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; } .vg-kpi span { font-size: 11px; color: #5A5A5A; line-height: 1.35; }
.vg-kpi div:first-child b { color: #0F6E56; }
/* 06 support */
.vg-up { padding: 3px 10px; border-radius: 999px; background: #E1F5EE; color: #0F6E56; font-weight: 700; font-size: 12px; }
.vg-uptime { display: flex; flex-direction: column; gap: 7px; padding: 12px; background: #fff; border: 1px solid #E7E2D6; border-radius: 8px; } .vg-uptime > span { font-size: 11px; color: #5A5A5A; }
.vg-uptime > div { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 46px; }
.vg-uptime i { border-radius: 2px; background: #3FA27F; transform-origin: bottom; animation: vg-barre .6s calc(var(--i) * 25ms) both cubic-bezier(.2,.7,.2,1); } .vg-uptime i.o { background: #D9922E; }
@keyframes vg-barre { from { transform: scaleY(.1); opacity: 0; } }
.vg-tk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.vg-tk li { display: grid; grid-template-columns: 34px 1fr 74px 74px; gap: 8px; align-items: center; padding: 12px 12px; background: #fff; border: 1px solid #E7E2D6; border-radius: 8px; font-size: 12px; transition: background .4s, border-color .4s; }
.vg-tk em { font-style: normal; font-size: 10.5px; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 4px; } .vg-tk em.p2 { background: #FCF3E4; color: #A8661C; } .vg-tk em.p3 { background: #EEEAE0; color: #5A5A5A; }
.vg-tk b { font-size: 11px; color: #A8661C; } .vg-tk time { font-size: 11px; color: #5A5A5A; text-align: right; font-variant-numeric: tabular-nums; }
.vg-tk li.ok { background: #EFF8F4; border-color: #BFE3D3; } .vg-tk li.ok b { color: #0F6E56; }

/* 3. Applications de démonstration */
.dm-app { --dm-b: #E7E2D6; --dm-t: #0D1B2A; --dm-g: #5A5A5A; --dm-ok: #0F6E56; --dm-ko: #B85042; --dm-or: #A47F2F;
  position: relative; background: #F7F5EF; color: var(--dm-t); border: 1px solid var(--dm-b); border-radius: 8px; overflow: hidden;
  font-family: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4; box-shadow: 0 30px 60px -36px rgba(13,27,42,.35); text-align: left; }
.dm-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--dm-b); }
.dm-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E5E0D5; } .dm-bar i:first-child { background: #E8B4A6; } .dm-bar i:nth-child(2) { background: #E9D29B; }
.dm-bar span { margin-left: 10px; font-size: 12.5px; font-weight: 600; color: var(--dm-g); }
.dm-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.dm-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.dm-top > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.dm-h { font-size: 20px; font-weight: 700; } .dm-s { font-size: 12.5px; color: var(--dm-g); }
.dm-seg { display: inline-flex; padding: 3px; background: #fff; border: 1px solid var(--dm-b); border-radius: 999px; }
.dm-seg button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--dm-g); cursor: pointer; transition: background .25s, color .25s; }
.dm-seg button.on { background: var(--dm-t); color: #fff; }
.dm-seg button:focus-visible, .dm-chips button:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.dm-units { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dm-unit, .dm-kpi, .dm-chart, .dm-al, .dm-card { background: #fff; border: 1px solid var(--dm-b); border-radius: 8px; }
.dm-unit { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.dm-uh { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .dm-uh b { font-size: 16px; }
.dm-badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .dm-badge.ok { background: #E1F5EE; color: var(--dm-ok); } .dm-badge.ko { background: #F8E3DE; color: var(--dm-ko); }
.dm-ub { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dm-trio { display: flex; gap: 22px; } .dm-trio span { display: flex; flex-direction: column; } .dm-trio i { font-style: normal; font-size: 12px; color: var(--dm-g); } .dm-trio b { font-size: 22px; font-weight: 600; } .dm-trio b.neg { color: var(--dm-ko); }
.dm-ring { width: 56px; height: 56px; flex-shrink: 0; } .dm-ring circle { fill: none; stroke-width: 7; } .dm-ring .f { stroke: #EEEAE0; }
.dm-ring .v { stroke: var(--dm-ok); transform: rotate(-90deg); transform-origin: 50% 50%; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1); }
.dm-ring text { font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--dm-t); }
.dm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dm-kpi { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-l { font-size: 12px; color: var(--dm-g); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-v { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-d { font-size: 11.5px; font-weight: 600; color: var(--dm-g); } .dm-d.up { color: var(--dm-ok); } .dm-d.down { color: var(--dm-ko); }
.dm-kpi svg { width: 100%; height: 26px; margin-top: 4px; } .dm-kpi path { fill: none; stroke: #4A76C8; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dm-kr .dm-v { color: var(--dm-ko); font-size: 30px; }
.dm-row { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 12px; }
.dm-chart, .dm-al { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.dm-st { font-size: 13.5px; }
.dm-leg { display: flex; gap: 16px; font-size: 12px; color: var(--dm-g); } .dm-leg span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.dm-leg .la::before { background: var(--dm-ok); } .dm-leg .lb::before { background: #C9A961; } .dm-leg .lx::before { background: repeating-linear-gradient(90deg, #8A8A8A 0 4px, transparent 4px 7px); }
.dm-svg { width: 100%; height: 170px; overflow: visible; } .dm-svg line { stroke: #EEEAE0; }
.dm-svg path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; } .dm-svg .ar { fill: rgba(15,110,86,.07); stroke: none; }
.dm-svg .pa { stroke: var(--dm-ok); } .dm-svg .pb { stroke: #C9A961; } .dm-svg .xa, .dm-svg .xb { stroke-dasharray: 5 4; stroke-width: 1.3; } .dm-svg .xa { stroke: rgba(15,110,86,.6); } .dm-svg .xb { stroke: rgba(164,127,47,.75); }
.dm-al ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dm-al li { display: flex; flex-direction: column; padding: 8px 10px 8px 12px; border-radius: 6px; border-left: 3px solid; font-size: 12.5px; }
.dm-al li.r { border-color: var(--dm-ko); background: #FBEEEA; } .dm-al li.o { border-color: #D9922E; background: #FCF3E4; }
.dm-al li b { font-size: 13px; } .dm-al li span { color: var(--dm-g); }
.trace .dm-svg .pa, .trace .dm-svg .pb { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dm-trace 1.4s cubic-bezier(.45,0,.2,1) forwards; }
.trace .dm-svg .pb { animation-delay: .15s; }
.trace .dm-al li { animation: dm-in .5s calc(var(--i) * 90ms + .2s) both cubic-bezier(.2,.7,.2,1); }
@keyframes dm-trace { to { stroke-dashoffset: 0; } }
@keyframes dm-in { from { opacity: 0; transform: translateX(12px); } }
/* catalogue */
.dm-new { padding: 9px 16px; border-radius: 999px; background: #5B5BD6; color: #fff; font-size: 13px; font-weight: 600; }
.dm-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; background: #fff; border: 1px solid var(--dm-b); border-radius: 8px; }
.dm-search { flex: 1 1 220px; } .dm-search input, .dm-tri select { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border: 1px solid var(--dm-b); border-radius: 6px; background: #fff; font: inherit; font-size: 13.5px; color: var(--dm-t); }
.dm-search input:focus, .dm-tri select:focus { outline: 3px solid var(--or); outline-offset: 1px; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; } .dm-chips button { border: 1px solid var(--dm-b); background: #fff; padding: 7px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--dm-g); cursor: pointer; transition: all .2s; }
.dm-chips button.on { background: #EEEEFB; border-color: #C9C9F2; color: #4646B8; }
.dm-tri { flex: 0 0 170px; }
.dm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 260px; align-content: start; }
.dm-card { overflow: hidden; animation: dm-pop .45s calc(var(--i) * 45ms) both cubic-bezier(.2,.7,.2,1); transition: transform .3s, box-shadow .3s; }
.dm-card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(13,27,42,.35); }
@keyframes dm-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.dm-ill { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff)); }
.dm-ill svg { width: 58px; height: 58px; padding: 10px; border-radius: 50%; background: rgba(255,255,255,.18); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-ill em { position: absolute; bottom: 7px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.25); color: #fff; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dm-ci { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; } .dm-ci b { font-size: 13.5px; line-height: 1.3; min-height: 2.6em; }
.dm-pr { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .dm-pr span { font-weight: 700; color: #4646B8; font-size: 14px; white-space: nowrap; }
.dm-pr i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #E1F5EE; color: var(--dm-ok); white-space: nowrap; } .dm-pr i.bas { background: #F8E3DE; color: var(--dm-ko); }
.dm-vide { grid-column: 1 / -1; color: var(--dm-g); text-align: center; padding: 40px 0; }
/* captures floutées */
.dm-pile { position: relative; aspect-ratio: 16 / 7.4; overflow: hidden; background: #F2EDE2; }
.dm-pile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.04); transition: opacity 1s, transform 6s linear; }
.dm-pile img.on { opacity: 1; transform: scale(1.12); }

@container (max-width: 760px) {
  .dm-units, .dm-row { grid-template-columns: minmax(0, 1fr); }
  .dm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dm-kr { grid-column: 1 / -1; }
  .dm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-body { padding: 14px; } .dm-trio { gap: 14px; } .dm-trio b { font-size: 19px; }
}

.dm-app { container-type: inline-size; }
@media (max-width: 900px) {
  .ex.ex-vis { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ex-vis > h2, .ex-vis > div:not(.vg-cadre), .ex-vis > .vg-cadre { grid-column: 1; grid-row: auto; align-self: auto; }
  .ex-vis > .vg-cadre { margin-top: 8px; }
  .js .vg-cadre { transform: translateY(24px); }
  .scene { aspect-ratio: 4 / 3; } .sc-cadre { left: -40%; right: -12%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .scene, .js .photo { --p: 1; } .scene .sc-ecran::before { opacity: 0; }
  .js .vg-cadre, .js .vg-hub { opacity: 1 !important; transform: none !important; }
  .sc-cam, .dm-card, .trace .dm-al li, .vg *, .vg-sync i { animation: none !important; transition: none !important; }
  .trace .dm-svg .pa, .trace .dm-svg .pb { animation: none; stroke-dashoffset: 0; }
  .dm-pile img { transition: none; transform: none; }
}