/* xDB Informatique — feuille de style du site.
   Les couleurs sont celles de xDB Thermo (Specs/00_Decisions.md, D2 et D3) :
   fond marine, texte clair, jamais de blanc criard. */

:root{
  --marine-0:#0B1220; --marine-1:#16233A; --marine-1b:#121D31; --marine-2:#253A5A; --marine-3:#2F4A70;
  --piste:#1C2A44;
  --texte:#E5E7EB; --texte-2:#B8C4D6; --texte-3:#8E9DB5;
  --rouge:#E2001A; --rouge-logo:#FF0000; --bleu:#4A9EE0; --vert:#22C55E; --jaune:#EAB308; --orange:#F97316; --rose:#EC4899;
  --rayon:14px;
  --police:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --police-logo:"Century Gothic","URW Gothic","Avant Garde","Futura","Trebuchet MS",sans-serif;
  --police-x:"Bradley Hand ITC","Segoe Script","Brush Script MT","Comic Sans MS",cursive;
  --logo-nom:#94A3B8;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--marine-0);color:var(--texte);font-family:var(--police);font-size:16px;line-height:1.55}
body{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
main{flex:1}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.5vw,48px)}
h2{font-size:clamp(24px,3vw,32px)}
h3{font-size:19px}
p{margin:0 0 1em}
.sur{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--texte-3);margin:0 0 10px}
.muet{color:var(--texte-3)}
.doux{color:var(--texte-2)}
.conteneur{width:min(1140px,100% - 32px);margin:0 auto}
section{padding:56px 0}
section + section{border-top:1px solid var(--marine-1)}
@media (min-width:760px){section{padding:76px 0}}

/* ---------- la marque : x rouge manuscrit + DB gras, en tracés (assets/marque.js) ---------- */
.marque{display:inline-block;white-space:nowrap;line-height:1}
.marque svg{display:inline-block;height:.86em;width:auto;vertical-align:-.13em;overflow:visible}
.marque .m-x{fill:var(--rouge-logo);stroke:var(--rouge-logo);stroke-width:2.2;stroke-linejoin:round}
.marque .m-db{fill:currentColor}
.marque .m-nom{fill:var(--logo-nom)}
.bouton:not(.second) .marque .m-x{fill:#C8001A;stroke:#C8001A}
.bouton.rouge .marque .m-x{fill:#fff;stroke:#fff}
/* avant le chargement du script, ou sans lui : le logo en texte */
.logo{display:inline-flex;align-items:baseline;font-family:var(--police-logo);font-weight:700;font-size:24px;color:var(--texte);text-decoration:none!important;white-space:nowrap;line-height:1}
.logo .x{color:var(--rouge-logo);font-family:var(--police-x);font-weight:700;font-style:italic;font-size:1.45em;line-height:1;margin-right:1px}
.logo .db{color:var(--texte);margin-right:.3em}
.logo .nom{color:var(--logo-nom);font-weight:400}
.logo .marque svg{height:1.06em;vertical-align:-.16em}
.logo.grand{font-size:clamp(34px,6vw,60px)}

/* ---------- en-tête ---------- */
.entete{position:sticky;top:0;z-index:20;background:rgba(11,18,32,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--marine-1)}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.entete-droite{display:flex;align-items:center;gap:8px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:var(--texte-2);padding:8px 11px;border-radius:8px;font-size:15px;white-space:nowrap}
.nav a:hover{background:var(--marine-1);color:var(--texte);text-decoration:none}
.nav a.actif{color:var(--texte)}
.nav .bouton{margin-left:6px;color:#061021}
.menu-bouton{display:none;background:none;border:1px solid var(--marine-2);color:var(--texte);border-radius:8px;width:40px;height:36px;font-size:18px;cursor:pointer}
@media (max-width:980px){
  .menu-bouton{display:inline-flex;align-items:center;justify-content:center}
  .nav{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;background:var(--marine-0);border-bottom:1px solid var(--marine-1);padding:10px 16px 16px}
  .nav.ouvert{display:flex}
  .nav a{padding:12px}
  .nav .bouton{margin:8px 0 0}
}

/* ---------- langue : la planète, comme dans xDB Thermo ---------- */
.langue{position:relative}
.langue-bouton{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--marine-2);background:none;color:var(--texte-2);font:600 13px var(--police);cursor:pointer;letter-spacing:.5px}
.langue-bouton:hover{background:var(--marine-1);color:var(--texte)}
.langue-bouton svg{width:16px;height:16px}
.langue-menu{position:absolute;right:0;top:44px;min-width:170px;background:var(--marine-1);border:1px solid var(--marine-2);border-radius:10px;padding:6px;display:none;box-shadow:0 18px 40px -16px #000c;z-index:30}
.langue.ouvert .langue-menu{display:block}
.langue-menu button{display:flex;width:100%;justify-content:space-between;gap:12px;background:none;border:0;color:var(--texte-2);font:15px var(--police);padding:9px 10px;border-radius:7px;cursor:pointer;text-align:left}
.langue-menu button:hover{background:var(--marine-2);color:var(--texte)}
.langue-menu button[aria-checked="true"]{color:var(--texte)}
.langue-menu button[aria-checked="true"]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--bleu);align-self:center}
.langue-menu small{color:var(--texte-3);font-size:12px;letter-spacing:.5px}

/* ---------- boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;font-weight:600;font-size:15px;
  background:var(--bleu);color:#061021!important;border:1px solid transparent;cursor:pointer;text-decoration:none!important;transition:filter .2s,transform .1s;font-family:inherit}
.bouton:hover{filter:brightness(1.08)}
.bouton:active{transform:translateY(1px)}
.bouton.second{background:transparent;color:var(--texte)!important;border-color:var(--marine-3)}
.bouton.second:hover{background:var(--marine-1)}
.bouton.rouge{background:var(--rouge);color:#fff!important}
.bouton.grand{padding:14px 26px;font-size:17px}
.bouton[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none}
.bouton .petit{font-weight:400;opacity:.75;font-size:.85em}
.boutons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- étiquettes ---------- */
.etiquette{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--marine-2);color:var(--texte-2);white-space:nowrap}
.etiquette.vert{background:rgba(34,197,94,.15);color:var(--vert)}
.etiquette.bleu{background:rgba(74,158,224,.15);color:var(--bleu)}
.etiquette.gris{background:var(--marine-1);color:var(--texte-3)}
.etiquette.rouge{background:rgba(226,0,26,.16);color:#FF6B7A}
.etiquette.pro{background:linear-gradient(90deg,#E2001A,#F97316);color:#fff}

/* ---------- héros ---------- */
.heros{padding:64px 0 48px;position:relative;overflow:hidden}
.heros::before{content:"";position:absolute;inset:-40% -20% auto;height:80%;background:radial-gradient(60% 60% at 50% 40%,rgba(74,158,224,.14),transparent 70%);pointer-events:none}
.heros .conteneur{position:relative}
.heros p.chapeau{font-size:clamp(17px,2vw,20px);color:var(--texte-2);max-width:640px}
.heros-grille{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.heros-grille{grid-template-columns:1fr 1.1fr}}
.plateformes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.plateformes span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--texte-2);background:var(--marine-1);border:1px solid var(--marine-2);border-radius:999px;padding:5px 12px}
.plateformes svg{width:15px;height:15px;fill:currentColor}

/* ---------- cartes ---------- */
.grille{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grille.deux{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.carte{background:linear-gradient(180deg,var(--marine-1),var(--marine-1b));border:1px solid var(--marine-2);border-radius:var(--rayon);padding:22px;position:relative;display:flex;flex-direction:column;gap:10px}
.carte h3{margin:0}
.carte p{margin:0;color:var(--texte-2);font-size:15px}
.carte .pied{margin-top:auto;padding-top:10px}
.carte.lien{transition:border-color .2s,transform .2s;text-decoration:none!important;color:inherit}
.carte.lien:hover{border-color:var(--marine-3);transform:translateY(-2px)}
.carte .entete-carte{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.carte .prix{font-size:30px;font-weight:600;letter-spacing:-.5px}
.carte .prix small{font-size:14px;font-weight:400;color:var(--texte-3);letter-spacing:0}
.carte.mise-en-avant{border-color:var(--bleu);box-shadow:0 0 0 1px rgba(74,158,224,.35),0 20px 50px -30px rgba(74,158,224,.5)}
.carte.pro{border-color:#E2001A;box-shadow:0 0 0 1px rgba(226,0,26,.35),0 24px 60px -30px rgba(226,0,26,.55)}
.carte.cible{border-color:var(--vert);box-shadow:0 0 0 1px rgba(34,197,94,.4)}
.carte ul{margin:0;padding-left:18px;color:var(--texte-2);font-size:15px}
.carte li{margin:3px 0}
/* carte produit : le logo complet sur une ligne, l'étiquette au-dessus */
.produit .etiquette{align-self:flex-start}
.produit .logo{font-size:26px}
.produit .plates{font-size:13px;color:var(--texte-3)}

/* ---------- listes à coches ---------- */
.coches{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.coches li{padding-left:28px;position:relative;color:var(--texte-2)}
.coches li::before{content:"";position:absolute;left:0;top:.35em;width:17px;height:17px;border-radius:50%;background:rgba(34,197,94,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2322C55E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.coches li b{color:var(--texte)}

/* ---------- tableaux ---------- */
.tableau-defile{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--marine-1);vertical-align:top}
th{color:var(--texte-3);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase}
td{color:var(--texte-2)}
td:first-child{color:var(--texte)}
table.comparer td:not(:first-child),table.comparer th:not(:first-child){text-align:center;width:120px}
.oui{color:var(--vert);font-weight:700}
.non{color:var(--texte-3)}

/* ---------- blocs divers ---------- */
.encart{background:var(--marine-1);border:1px solid var(--marine-2);border-radius:var(--rayon);padding:20px 22px}
.encart.bleu{border-color:rgba(74,158,224,.4)}
.encart h3{margin-top:0}
.encart p:last-child{margin-bottom:0}
code,kbd{font-family:Consolas,"Cascadia Mono",Menlo,monospace;font-size:.92em;background:var(--marine-1);border:1px solid var(--marine-2);border-radius:5px;padding:1px 6px;color:var(--texte)}
details{border:1px solid var(--marine-1);border-radius:10px;padding:0 18px;background:var(--marine-1b)}
details + details{margin-top:10px}
summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--texte-3);font-size:20px;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--texte-2);margin:0 0 14px}
.deux-colonnes{display:grid;gap:32px}
@media (min-width:860px){.deux-colonnes{grid-template-columns:1fr 1fr}}
.largeur-texte{max-width:720px}
.centre{text-align:center}
.centre .boutons{justify-content:center}
.centre .largeur-texte{margin-left:auto;margin-right:auto}

/* =====================================================================
   La fenêtre xDB Thermo en démonstration, aux couleurs de ses thèmes
   (xThermo.Theme.pas : TColor $00BBGGRR convertis en #RRGGBB)
   ===================================================================== */
.theme-cryo{--t-page:#0B1220;--t-entete:#0B1220;--t-c1:#16233A;--t-c1b:#121D31;--t-c2:#253A5A;--t-c3:#2F4A70;--t-piste:#1C2A44;--t-tx:#E5E7EB;--t-tx2:#B8C4D6;--t-tx3:#8E9DB5;--t-sec:#8E9DB5;--t-accent:#4A9EE0;--t-cadre:#0F1829;--t-cadre-bord:#22314D;--t-vis:#2B3A55;--t-ph:#8A97AB;--t-pm:#4B5A72;--t-pb:#2B3850;--t-poh:#4B5564;--t-pob:#1F2937;--t-mc:#3A4A66;--t-mb:#121B2B;--t-creux:#0B1220}
.theme-xdark{--t-page:#000000;--t-entete:#000000;--t-c1:#111214;--t-c1b:#0C0D0F;--t-c2:#1F2125;--t-c3:#2A2D33;--t-piste:#1A1C20;--t-tx:#F2F2F3;--t-tx2:#B5B8BF;--t-tx3:#80858F;--t-sec:#80858F;--t-accent:#4A9EE0;--t-cadre:#0A0B0D;--t-cadre-bord:#24272C;--t-vis:#2E3137;--t-ph:#9AA0A8;--t-pm:#4E535B;--t-pb:#2B2E33;--t-poh:#3A3D42;--t-pob:#1A1C1F;--t-mc:#34373D;--t-mb:#0E0F11;--t-creux:#000000}
.theme-sakura{--t-page:#FFF0F6;--t-entete:#FFF0F6;--t-c1:#FFE3EE;--t-c1b:#FBD7E6;--t-c2:#F8C4DB;--t-c3:#E892B5;--t-piste:#F3D0E0;--t-tx:#4A1230;--t-tx2:#7A3056;--t-tx3:#A05C7E;--t-sec:#A05C7E;--t-accent:#C2185B;--t-cadre:#F8D8E6;--t-cadre-bord:#E89CBC;--t-vis:#D87AA2;--t-ph:#E892B5;--t-pm:#D05A8A;--t-pb:#AD1457;--t-poh:#E8C0D2;--t-pob:#D0A0B8;--t-mc:#F0B8D0;--t-mb:#C87AA0;--t-creux:#FFF0F6}
.theme-synthwave{--t-page:#221019;--t-entete:#FFF0F6;--t-c1:#FFE3EE;--t-c1b:#FBD7E6;--t-c2:#F8C4DB;--t-c3:#E892B5;--t-piste:#F3D0E0;--t-tx:#4A1230;--t-tx2:#7A3056;--t-tx3:#A05C7E;--t-sec:#E8B4CC;--t-accent:#C2185B;--t-cadre:#F8D8E6;--t-cadre-bord:#E89CBC;--t-vis:#D87AA2;--t-ph:#E892B5;--t-pm:#D05A8A;--t-pb:#AD1457;--t-poh:#E8C0D2;--t-pob:#D0A0B8;--t-mc:#F0B8D0;--t-mb:#C87AA0;--t-creux:#FFF0F6}
.theme-vampire{--t-page:#1A0A14;--t-entete:#1A0A14;--t-c1:#3A1628;--t-c1b:#2E1020;--t-c2:#5A2540;--t-c3:#70304F;--t-piste:#442038;--t-tx:#F5E7EF;--t-tx2:#E0B8CE;--t-tx3:#C08EA5;--t-sec:#C08EA5;--t-accent:#EC4899;--t-cadre:#22101C;--t-cadre-bord:#4D2238;--t-vis:#552B40;--t-ph:#AB8A9C;--t-pm:#724B60;--t-pb:#502B40;--t-poh:#4B3540;--t-pob:#291F24;--t-mc:#663A52;--t-mb:#2B121F;--t-creux:#1A0A14}

.fenetre{border-radius:12px;overflow:hidden;border:1px solid var(--t-c2);background:var(--t-page);box-shadow:0 30px 70px -30px #000d,0 0 0 1px #0006;color:var(--t-tx)}
.fenetre .barre-titre{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 4px 0 12px;background:var(--t-entete);font-size:12px;color:var(--t-tx3);border-bottom:1px solid var(--t-c2)}
.fenetre .barre-titre .controles{display:flex;gap:0}
.fenetre .barre-titre .controles i{width:34px;height:30px;display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--t-tx3)}
.fenetre .bandeau{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--t-entete);border-bottom:1px solid var(--t-c2)}
.fenetre .bandeau .logo{font-size:19px;color:var(--t-tx);--logo-nom:var(--t-tx3)}
.fenetre .bandeau .logo .db{color:var(--t-tx)}
.fenetre .pastilles{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t-tx2);flex-wrap:wrap;justify-content:flex-end}
.fenetre .pastille{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--t-c2);border-radius:7px;padding:3px 8px;background:var(--t-c1);color:var(--t-tx2);white-space:nowrap}
.fenetre .pastille .pt{width:7px;height:7px;border-radius:50%;background:var(--vert);box-shadow:0 0 6px var(--vert)}
.fenetre .pastille.theme{color:var(--t-accent);font-weight:600;min-width:84px;justify-content:center}
.fenetre .corps{padding:12px 14px 14px}
.fenetre .section-titre{font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--t-sec);margin:2px 0 8px}
@media (max-width:520px){.fenetre .pastille.etat{display:none}}

.demo{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:460px){.demo{grid-template-columns:repeat(2,minmax(0,1fr))}.demo .tuile:nth-child(3){grid-column:1/-1;max-width:200px;margin:0 auto;width:100%}}
.tuile{background:linear-gradient(180deg,var(--t-c1),var(--t-c1b));border:1px solid var(--t-c2);border-radius:12px;padding:11px 11px 10px;position:relative;overflow:hidden;color:var(--t-tx)}
.tuile .titre{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:6px}
.tuile .titre b{font-weight:600;font-size:12.5px;white-space:nowrap}
.tuile .titre span{color:var(--t-tx3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jauge,.ventilo{display:block;width:100%;height:auto}
.jauge .valeur{font-size:38px;font-weight:600;letter-spacing:-1px;fill:var(--t-tx);font-family:var(--police)}
.jauge .unite{font-size:16px;font-weight:400;fill:var(--t-tx2)}
.jauge .zone{font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;font-family:var(--police)}
.jauge .tick{stroke:var(--t-c3);stroke-width:1.2}
.jauge .tick-txt{fill:var(--t-tx3);font-size:8.5px;font-family:var(--police)}
.jauge .piste{stroke:var(--t-piste)}
.minmax{display:flex;justify-content:space-between;color:var(--t-tx3);font-size:10.5px;margin-top:2px;padding:0 2px}
.minmax b{color:var(--t-tx2);font-weight:500}
.coeurs{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-top:7px}
.coeur{height:16px;border-radius:3px;background:var(--t-c2);position:relative;overflow:hidden}
.coeur i{position:absolute;left:0;right:0;bottom:0;border-radius:3px}
.coeur small{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;font-style:normal;text-shadow:0 1px 2px #0008}
.ventilo .rpm{font-size:24px;font-weight:600;letter-spacing:-.5px;fill:var(--t-tx);font-family:var(--police)}
.ventilo .rpm-u{font-size:11px;fill:var(--t-tx2)}
.ventilo .v-cadre{fill:var(--t-cadre);stroke:var(--t-cadre-bord)}
.ventilo .v-vis{fill:var(--t-vis)}
.ventilo .v-creux{fill:var(--t-creux);stroke:var(--t-piste)}
.ventilo .v-moyeu-bord{stroke:var(--t-vis)}
.ventilo .v-anneau{stroke:var(--t-piste)}
.barre{height:4px;border-radius:2px;background:var(--t-c2);margin:7px 2px 0;overflow:hidden}
.barre i{display:block;height:100%;border-radius:2px;transition:width .4s}

/* le choix du thème sous la fenêtre */
.choix-theme{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.choix-theme button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--marine-2);background:var(--marine-1);color:var(--texte-2);font:600 13.5px var(--police);padding:7px 13px;border-radius:999px;cursor:pointer}
.choix-theme button:hover{border-color:var(--marine-3);color:var(--texte)}
.choix-theme button[aria-pressed="true"]{border-color:var(--bleu);color:var(--texte);box-shadow:0 0 0 1px rgba(74,158,224,.35)}
.choix-theme .pastille-couleur{width:14px;height:14px;border-radius:50%;border:1px solid #fff3}
.choix-theme .nouveau{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--rose)}
.legende-demo{font-size:12.5px;color:var(--texte-3);margin-top:10px;text-align:center}

/* deux fenêtres côte à côte : Cryo et Sakura */
.duo-themes{display:grid;gap:22px}
@media (min-width:900px){.duo-themes{grid-template-columns:1fr 1fr}}
.duo-themes figure{margin:0}
.duo-themes figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px;color:var(--texte-2);font-size:15px}
.duo-themes figcaption b{color:var(--texte);font-size:17px}

/* =====================================================================
   La tuile qui se détache : un bureau, la fenêtre, la tuile, la barre des tâches
   ===================================================================== */
.scene{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--marine-2);
  background:radial-gradient(120% 90% at 20% 10%,#1d3557 0%,#0f1e36 45%,#081020 100%)}
.scene::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 80%,rgba(236,72,153,.12),transparent 70%);pointer-events:none}
.scene .s-barre{position:absolute;left:0;right:0;bottom:0;height:8%;background:rgba(10,16,28,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;gap:1.4%;border-top:1px solid #ffffff14;z-index:3}
.scene .s-icone{width:3.1%;aspect-ratio:1;border-radius:22%;background:#ffffff1c}
.scene .s-icone.thermo{background:#0B1220;border:1px solid #2F4A70;display:grid;place-items:center;position:relative}
.scene .s-icone.thermo::after{content:"";position:absolute;bottom:-18%;left:35%;right:35%;height:8%;border-radius:2px;background:var(--bleu);opacity:0;transition:opacity .4s}
.scene.reduite .s-icone.thermo::after{opacity:1}
.scene .s-icone.thermo svg{width:70%;height:auto}
.scene .s-fen{position:absolute;left:5%;top:9%;width:56%;height:72%;border-radius:1.2vmin;overflow:hidden;background:#0B1220;border:1px solid #253A5A;box-shadow:0 2vmin 5vmin -2vmin #000c;
  transform-origin:46% 128%;transition:transform .75s cubic-bezier(.5,0,.3,1),opacity .6s;z-index:1}
.scene.reduite .s-fen{transform:scale(.06);opacity:0}
.scene .s-fen-titre{height:9%;background:#0B1220;border-bottom:1px solid #253A5A;display:flex;align-items:center;padding:0 3%;gap:2%}
.scene .s-fen-titre .logo{font-size:clamp(7px,1.25vw,14px)}
.scene .s-fen-corps{position:absolute;left:3%;right:3%;top:16%;bottom:5%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:3%}
.scene .s-case{border-radius:.8vmin;border:1px dashed #2F4A70;opacity:0;transition:opacity .4s}
.scene.detachee .s-case.vide{opacity:1}
.scene .s-tuile{border-radius:.8vmin;background:linear-gradient(180deg,#16233A,#121D31);border:1px solid #253A5A;display:grid;place-items:center;position:relative}
.scene .s-tuile svg{width:78%;height:auto}
.scene .s-mobile{position:absolute;z-index:2;border-radius:.9vmin;background:linear-gradient(180deg,#16233A,#121D31);border:1px solid #253A5A;display:grid;place-items:center;
  transition:left .9s cubic-bezier(.4,0,.2,1),top .9s cubic-bezier(.4,0,.2,1),transform .35s,box-shadow .35s;box-shadow:0 0 0 0 #0000}
.scene .s-mobile svg{width:78%;height:auto}
.scene.leve .s-mobile{transform:scale(1.07);box-shadow:0 2.5vmin 4vmin -1.5vmin #000e,0 0 0 1px #4A9EE066}
.scene .s-mobile .poignee{position:absolute;bottom:4%;left:0;right:0;text-align:center;font-size:clamp(5px,.7vw,9px);color:#8E9DB5;opacity:0;transition:opacity .4s}
.scene.detachee .s-mobile .poignee{opacity:1}
.scene .s-curseur{position:absolute;width:2.3%;z-index:4;transition:left .8s cubic-bezier(.4,0,.2,1),top .8s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 1px 2px #000a)}
.scene .s-clic{position:absolute;width:5%;aspect-ratio:1;border-radius:50%;border:2px solid #4A9EE0;transform:translate(-50%,-50%) scale(.2);opacity:0;z-index:4;pointer-events:none}
.scene .s-clic.anim{animation:clic .7s ease-out}
@keyframes clic{0%{opacity:.9;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
.scene .s-bulle{position:absolute;z-index:5;max-width:44%;background:rgba(11,18,32,.92);border:1px solid #2F4A70;border-radius:1vmin;padding:1% 1.6%;font-size:clamp(9px,1.25vw,14px);color:#E5E7EB;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.scene .s-bulle.visible{opacity:1;transform:none}
.scene .s-bulle .etiquette{font-size:.75em;padding:2px 7px;margin-right:6px;vertical-align:1px}
.etapes{display:grid;gap:12px;margin-top:16px}
@media (min-width:760px){.etapes{grid-template-columns:repeat(3,1fr)}}
.etape{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;border:1px solid var(--marine-1);background:var(--marine-1b);transition:border-color .4s,background-color .4s}
.etape.active{border-color:var(--bleu);background:var(--marine-1)}
.etape .num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--marine-2);color:var(--texte)}
.etape.active .num{background:var(--bleu);color:#061021}
.etape b{display:block;color:var(--texte);margin-bottom:2px}
.etape p{margin:0;font-size:14.5px;color:var(--texte-2)}
.etape .etiquette{margin-top:8px}
/* sans animation : l'état final, avec la flèche */
@media (prefers-reduced-motion:reduce){
  .scene *{transition:none!important;animation:none!important}
}

/* =====================================================================
   Mobile et tableaux de bord : cadres d'appareils, photo ou maquette
   ===================================================================== */
.vitrine{display:grid;gap:28px;align-items:end}
@media (min-width:980px){.vitrine{grid-template-columns:1.7fr .8fr .8fr}}
@media (min-width:600px) and (max-width:979px){.vitrine{grid-template-columns:1fr 1fr}.vitrine figure:first-child{grid-column:1/-1}}
.vitrine figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.vitrine figcaption{text-align:center;color:var(--texte-2);font-size:14.5px;max-width:340px}
.vitrine figcaption b{display:block;color:var(--texte);font-size:16px;margin-bottom:2px}
.ecran{position:relative;overflow:hidden;background:#060b12}
.ecran > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
/* moniteur Windows */
.moniteur{width:100%;max-width:640px}
.moniteur .cadre{border-radius:12px;padding:10px;background:linear-gradient(180deg,#1b2433,#0d131d);border:1px solid #2a3850;box-shadow:0 30px 60px -30px #000}
.moniteur .ecran{aspect-ratio:16/10;border-radius:4px}
.moniteur .pied-m{width:22%;height:34px;margin:0 auto;background:linear-gradient(180deg,#1a2230,#0f151f);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.moniteur .socle{width:38%;height:8px;margin:0 auto;border-radius:6px;background:#1f2938}
/* iPhone */
.iphone{width:min(230px,70vw);border-radius:40px;padding:10px;background:linear-gradient(160deg,#3a3f48,#14171c);border:1px solid #4b515c;box-shadow:0 30px 60px -30px #000,inset 0 0 0 2px #0008}
.iphone .ecran{aspect-ratio:9/19.5;border-radius:31px}
.iphone .ilot{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:32%;height:22px;border-radius:12px;background:#000;z-index:3}
/* terminal Android durci (type Zebra) */
.terminal{width:min(220px,68vw);border-radius:26px;padding:16px 12px 40px;background:linear-gradient(160deg,#2b2f36,#121418);border:1px solid #3c424c;box-shadow:0 30px 60px -30px #000;position:relative}
.terminal::before{content:"";position:absolute;left:-5px;top:30%;width:5px;height:16%;border-radius:3px 0 0 3px;background:#E2001A}
.terminal::after{content:"";position:absolute;right:-5px;top:30%;width:5px;height:16%;border-radius:0 3px 3px 0;background:#E2001A}
.terminal .ecran{aspect-ratio:9/16;border-radius:8px}
.terminal .touches{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:18px}
.terminal .touches i{width:16px;height:16px;border-radius:50%;border:2px solid #4b525e}

/* les maquettes à l'intérieur des écrans (remplacées par la photo si elle existe) */
.mq{position:absolute;inset:0;padding:5%;display:flex;flex-direction:column;gap:4%;font-family:var(--police);color:#d8e8f8}
.mq .mq-t{display:flex;justify-content:space-between;align-items:center;font-size:clamp(8px,1.4vw,13px);font-weight:700}
.mq .mq-t small{font-weight:500;color:#6a8aaa;font-size:.8em}
.mq .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:3%}
.mq .kpi{border-radius:6px;background:#101d2e;border:1px solid #1b2c44;padding:7% 8%;position:relative;overflow:hidden}
.mq .kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.mq .kpi small{display:block;font-size:clamp(5px,.75vw,9px);color:#6a8aaa;text-transform:uppercase;letter-spacing:.5px}
.mq .kpi b{font-size:clamp(11px,2.2vw,26px);font-weight:800;letter-spacing:-.5px}
.mq .graphe{flex:1;border-radius:6px;background:#0b1520;border:1px solid #1b2c44;display:flex;align-items:flex-end;gap:2%;padding:4%}
.mq .graphe i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#4f9dff,#4f9dff44)}
.mq .graphe i:nth-child(3n){background:linear-gradient(180deg,#22d3ee,#22d3ee44)}
.mq .lignes{display:grid;gap:5px}
.mq .ligne{display:flex;justify-content:space-between;align-items:center;font-size:clamp(6px,.9vw,11px);padding:4% 5%;border-radius:5px;background:#101d2e;border:1px solid #1b2c44}
.mq .ligne em{font-style:normal;color:#22c55e;font-weight:700}
.mq.mobile{padding:22% 7% 7%;gap:3%}
.mq.mobile .mq-t{font-size:12px}
.mq.mobile .kpis{grid-template-columns:1fr 1fr}
.mq.mobile .kpi b{font-size:18px}
.mq.mobile .kpi small{font-size:7.5px}
.mq.mobile .ligne{font-size:9.5px;padding:6px 8px}
.mq.mobile .graphe{min-height:70px}
.mq.android{padding:7%;background:#0b1220;gap:3%}
.mq.android .mq-t{font-size:11px;background:#16233A;margin:-7% -7% 0;padding:8% 7% 5%}
.mq.android .scan{border:2px dashed #4A9EE0;border-radius:8px;padding:9% 6%;text-align:center;font-size:10px;color:#B8C4D6}
.mq.android .scan b{display:block;font-size:13px;color:#E5E7EB;letter-spacing:1px;font-family:Consolas,monospace}
.mq.android .ligne{font-size:9.5px;padding:6px 8px}
.mq.android .ok{margin-top:auto;border-radius:8px;background:#22c55e;color:#06210f;text-align:center;font-weight:700;font-size:11px;padding:8px}

/* ---------- pied de page ---------- */
footer.pied{border-top:1px solid var(--marine-1);padding:28px 0;color:var(--texte-3);font-size:14px}
footer.pied .conteneur{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer.pied a{color:var(--texte-2)}
footer.pied nav{display:flex;flex-wrap:wrap;gap:6px 18px}

/* ---------- divers ---------- */
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.carte.lien,.bouton{transition:none}}
.scene .s-icone.thermo .marque{width:72%;display:block}
.scene .s-icone.thermo .marque svg{width:100%;height:auto;vertical-align:middle}
.scene .s-icone.thermo .marque .m-db{fill:#E5E7EB}
.scene .s-fen-titre{justify-content:space-between}
.scene .s-ctl{display:flex;height:100%}
.scene .s-ctl i{font-style:normal;color:#8E9DB5;font-size:clamp(6px,1vw,12px);width:clamp(14px,2.6vw,34px);display:grid;place-items:center}

/* =====================================================================
   La capture réelle de la fenêtre xDB Thermo (assets/photos/xdb-thermo-fenetre.webp, 2000 × 1283).
   Des caches posés en pourcentage de l'image : la pastille d'essai devient « Pro »,
   le numéro de série et le WWN du disque sont masqués.
   ===================================================================== */
.capture{margin:28px 0 0;width:min(1440px,100vw - 32px);position:relative;left:50%;transform:translateX(-50%)}
.capture a{display:block;text-decoration:none!important}
.capture-cadre{position:relative;container-type:inline-size;border-radius:12px;overflow:hidden;border:1px solid var(--marine-2);
  box-shadow:0 40px 90px -40px #000,0 0 0 1px #0006;background:#0B1220}
.capture-cadre img{display:block;width:100%;height:auto}
.capture .cache{position:absolute;display:flex;align-items:center;justify-content:flex-end;font-family:var(--police);color:#E5E7EB;font-weight:600;white-space:nowrap}
.capture .cache.essai{left:69.55%;top:3.85%;width:4.9%;height:2.15%;justify-content:center;gap:.35cqw;
  background:#101a2c;border:1px solid #2a3b58;border-radius:.45cqw;font-size:.66cqw}
.capture .cache.essai i{width:.5cqw;height:.5cqw;border-radius:50%;background:#22C55E;box-shadow:0 0 .4cqw #22C55E}
.capture .cache.serie{left:78.2%;top:79.85%;width:4.3%;height:1.6%;background:#121c30;font-size:.62cqw;color:#8E9DB5;letter-spacing:.1cqw}
.capture .cache.wwn{left:75.3%;top:83.6%;width:7.2%;height:1.6%;background:#121c30;font-size:.62cqw;color:#8E9DB5;letter-spacing:.1cqw}
.capture figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:12px;color:var(--texte-3);font-size:14px}
/* la capture de la tuile Historique, sous celle de la fenêtre */
.capture.historique{margin-top:22px}

/* ---------- l'agrandissement d'une capture (site.js, liens data-agrandir) ---------- */
.visionneuse{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:56px 16px 16px;
  background:rgba(4,8,16,.92);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s;cursor:zoom-out}
.visionneuse.ouverte{opacity:1}
.visionneuse img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 80px -20px #000;cursor:default}
.visionneuse .fermer{position:absolute;top:12px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid var(--marine-3);
  background:var(--marine-1);color:var(--texte);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.visionneuse .fermer:hover{background:var(--marine-2)}
.visionneuse .aide{position:absolute;top:22px;left:16px;color:var(--texte-3);font-size:13px}
.capture a[data-agrandir]{cursor:zoom-in}
/* l'icône d'un logiciel à côté de son nom */
.titre-icone{display:flex;align-items:center;gap:16px}
.icone-produit{width:72px;height:72px;flex:none;border-radius:16px;box-shadow:0 10px 30px -12px #000}
.icone-produit.petite{width:44px;height:44px;border-radius:11px}
.produit .titre-icone{gap:12px}
/* la grande icône d'un logiciel dans un en-tête de page */
.icone-vedette{width:min(256px,60vw);height:auto;border-radius:56px;box-shadow:0 40px 80px -30px #000,0 0 90px -20px rgba(74,158,224,.45)}
.capture.naturelle{width:min(1268px,100vw - 32px)}