/* tginvest.fr — « Tout le cabinet, d'un seul fil » (24/09/2026)
   Même famille visuelle que soiagent.ai : fond clair, scènes 3D, titres en dégradé bleu.
   Une couleur par étape du parcours : avant (bleu) · pendant (sarcelle) · après (corail) · coulisses (violet).
   Aucune ressource externe : fontes du système, images servies par tginvest.fr. */

:root{
  --fond:#F4F6FB; --papier:#FFFFFF; --encre:#0A1122; --encre-2:#27314A; --gris:#5A6478; --gris-2:#8690A2;
  --trait:rgba(12,24,52,.09); --trait-2:rgba(12,24,52,.16);
  --b1:#1B3FD6; --b2:#2F6BFF; --b3:#27B8E6;
  --avant:#2F6BFF; --pendant:#0E9FB0; --apres:#EE5A36; --coulisses:#8B5CF6; --aussi:#B08A3E;
  --ok:#0E9F57; --ombre:0 24px 60px -32px rgba(16,32,80,.35), 0 2px 6px -2px rgba(16,32,80,.08);
  --ombre-l:0 40px 90px -40px rgba(16,32,80,.45), 0 4px 14px -6px rgba(16,32,80,.12);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --gout:clamp(16px,5vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--b2);outline-offset:3px;border-radius:8px}
[id]{scroll-margin-top:84px}

.hold{max-width:1180px;margin:0 auto;padding-inline:var(--gout)}
.hold-large{max-width:1320px}
h1{font-size:clamp(2.7rem,8.2vw,6.1rem);letter-spacing:-.052em;line-height:.96}
h2{font-size:clamp(2.05rem,5.2vw,3.7rem);letter-spacing:-.048em}
h3{font-size:clamp(1.55rem,3.1vw,2.35rem)}
.grad{background:linear-gradient(100deg,var(--b1) 0%,var(--b2) 48%,var(--b3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.06em}
.surtitre{font-size:.72rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--b2)}
.chapo{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:var(--gris);max-width:62ch}
.lien{color:var(--b2);font-weight:550}
.lien:hover{text-decoration:underline}

/* ── boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:100px;
  font-size:.98rem;font-weight:600;letter-spacing:-.01em;border:1px solid transparent;cursor:pointer;
  transition:transform .25s cubic-bezier(.3,1.4,.6,1),box-shadow .25s,background .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-plein{background:linear-gradient(135deg,var(--b1),var(--b2) 60%,#3F86FF);color:#fff;box-shadow:0 14px 30px -14px rgba(47,107,255,.8)}
.btn-plein:hover{box-shadow:0 18px 36px -14px rgba(47,107,255,.95)}
.btn-ligne{background:var(--papier);border-color:var(--trait-2);color:var(--encre)}
.btn-ligne:hover{border-color:var(--encre)}
.btn-blanc{background:#fff;color:var(--b1);box-shadow:0 14px 30px -16px rgba(0,0,0,.45)}
.btn-s{min-height:38px;padding:8px 18px;font-size:.86rem}
.actes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── bandeau de proposition ── */
.bandeau{background:var(--encre);color:#DCE3F2;font-size:.8rem;text-align:center;padding:8px var(--gout)}
.bandeau a{color:#fff;text-decoration:underline;margin-left:6px}

/* ── barre du haut ── */
.barre{position:sticky;top:0;z-index:50;background:rgba(244,246,251,.78);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--trait)}
.barre-in{display:flex;align-items:center;gap:22px;min-height:64px}
.marque{display:inline-flex;align-items:center;gap:10px;margin-right:auto;white-space:nowrap}
.marque-logo{width:34px;height:34px;flex:none;overflow:visible}
.marque-mot{height:14px;width:auto;color:var(--encre);display:block}
.marque-sous{font-size:.68rem;color:var(--gris);border:1px solid var(--trait-2);border-radius:100px;padding:2px 9px}
.menu{display:flex;gap:4px}
.menu a{font-size:.9rem;color:var(--encre-2);padding:8px 12px;border-radius:100px;white-space:nowrap;transition:background .2s}
.menu a:hover{background:rgba(47,107,255,.08);color:var(--encre)}
@media (max-width:980px){.marque-sous{display:none}}
@media (max-width:880px){
  .barre-in{flex-wrap:wrap;gap:0 12px;padding-top:10px}
  .menu{order:3;width:calc(100% + 2*var(--gout));margin:6px calc(-1*var(--gout)) 0;padding:0 var(--gout) 8px;
    overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .menu::-webkit-scrollbar{display:none}
  .menu a{background:var(--papier);border:1px solid var(--trait);font-size:.84rem;padding:6px 13px}
}

/* ── apparitions ── */
.js .ap{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s;transition-delay:calc(var(--d,0)*110ms)}
.js .ap.vu{opacity:1;transform:none;filter:none}

/* ── nuages de couleur (fond vivant) ── */
.nuages{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.nuages i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.34;animation:derive 22s ease-in-out infinite alternate}
.nuages i:nth-child(1){background:var(--avant);left:-14vmax;top:-22vmax}
.nuages i:nth-child(2){background:var(--pendant);right:-18vmax;top:-10vmax;animation-delay:-6s;opacity:.26}
.nuages i:nth-child(3){background:var(--coulisses);left:30%;top:30%;animation-delay:-11s;opacity:.18}
.nuages i:nth-child(4){background:var(--apres);right:8%;top:48%;width:26vmax;height:26vmax;animation-delay:-3s;opacity:.14}
@keyframes derive{to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}

/* ── héros ── */
.heros{position:relative;overflow:hidden;padding:clamp(48px,9vh,110px) 0 clamp(48px,8vh,90px)}
.heros>.hold{position:relative;z-index:1}
.heros-texte{text-align:center;display:grid;justify-items:center;gap:22px;margin-bottom:clamp(40px,7vh,72px)}
.heros-texte .chapo{margin-inline:auto}
.heros-texte .actes{justify-content:center}
.tarifs-ligne{font-size:.86rem;color:var(--gris)}
.tarifs-ligne b{color:var(--encre);font-weight:600}

/* ── le plan : quatre étapes sur une ligne, un voyageur qui la parcourt ── */
.plan{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:28px 22px 24px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:30px;box-shadow:var(--ombre-l);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.plan-rail{position:absolute;left:12.5%;right:12.5%;top:50px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--avant),var(--pendant) 34%,var(--apres) 67%,var(--coulisses))}
.voyageur{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px var(--avant),0 0 22px 6px rgba(47,107,255,.55);animation:voyage 10s cubic-bezier(.45,0,.25,1) infinite}
@keyframes voyage{
  0%{left:0;box-shadow:0 0 0 4px var(--avant),0 0 22px 6px rgba(47,107,255,.5)}
  8%{left:0}
  30%{left:33.3%;box-shadow:0 0 0 4px var(--pendant),0 0 22px 6px rgba(14,159,176,.5)}
  38%{left:33.3%}
  60%{left:66.6%;box-shadow:0 0 0 4px var(--apres),0 0 22px 6px rgba(238,90,54,.5)}
  68%{left:66.6%}
  92%,100%{left:100%;box-shadow:0 0 0 4px var(--coulisses),0 0 22px 6px rgba(139,92,246,.5)}
}
.plan-col{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.plan-noeud{align-self:center;position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:3px solid var(--e);box-shadow:0 10px 24px -10px var(--e);transition:transform .3s cubic-bezier(.3,1.5,.6,1)}
.plan-noeud:hover{transform:scale(1.1)}
.plan-noeud i{font-style:normal;font-weight:750;font-size:.86rem;color:var(--e)}
.plan-nom{text-align:center;font-weight:700;font-size:1rem;letter-spacing:-.02em;color:var(--encre);margin-bottom:2px}
.plan-apps{display:flex;flex-direction:column;gap:8px}
.plan-relais{margin-top:auto;padding-top:6px;font-size:.8rem;color:var(--gris);text-align:center;line-height:1.35}
.plan-relais span{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--e);font-weight:650;margin-bottom:2px}
.plan-relais span::after{content:" →"}
.plan-fin span::after{content:""}

/* ── pastille d'application ── */
.puce{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;column-gap:10px;row-gap:3px;padding:9px 11px;border-radius:15px;
  background:var(--papier);border:1px solid var(--trait);transition:border-color .25s,transform .25s cubic-bezier(.3,1.4,.6,1),box-shadow .25s}
.puce:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);transform:translateY(-2px);box-shadow:0 14px 30px -18px var(--c)}
.puce>.gl{grid-row:span 2}
.puce-x{min-width:0}
.puce-x b{display:block;font-size:.93rem;font-weight:650;letter-spacing:-.015em;line-height:1.2}
.puce-x small{display:block;font-size:.76rem;color:var(--gris);line-height:1.3}
.puce>.st{grid-column:2;justify-self:start}

/* glyphe : initiales teintées, ou portrait 3D */
.gl{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:.74rem;font-weight:750;letter-spacing:-.02em;
  background:color-mix(in srgb,var(--c) 15%,#fff);color:color-mix(in srgb,var(--c) 78%,#000);border:1px solid color-mix(in srgb,var(--c) 26%,#fff)}
.gl-img{overflow:hidden;padding:0;background:color-mix(in srgb,var(--c) 22%,#fff);border:2px solid color-mix(in srgb,var(--c) 45%,#fff)}
.gl-img img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.gl-l{width:52px;height:52px;border-radius:15px;font-size:.95rem}

/* statut */
.st{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;border:1px solid;white-space:nowrap;line-height:1.3}
.st-dispo{color:var(--ok);background:#E9F8F0;border-color:#BFE9D2}
.st-beta{color:#A45F00;background:#FFF4DF;border-color:#F8D9A0}
.st-bientot{color:var(--gris);background:transparent;border-color:var(--trait-2);border-style:dashed}
.st-devis{color:#4B3AA8;background:#F1EEFD;border-color:#D9D1FA}

/* ── blocs ── */
.bloc{position:relative;padding:clamp(72px,11vh,130px) 0}
.bloc-serre{padding:clamp(36px,6vh,64px) 0}
.tete-bloc{display:grid;gap:18px;margin-bottom:clamp(40px,6vh,64px)}

/* ── parcours ── */
.parcours{background:linear-gradient(180deg,var(--fond),#fff 12%,#fff 88%,var(--fond))}
.etape{padding:clamp(24px,4vh,40px) 0}
.etape-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,6vw,80px);align-items:center}
.etape-inverse .etape-texte{order:2}
.etape-texte{display:grid;gap:20px}
.etape-texte>p:not(.etape-num){color:var(--gris);font-size:1.06rem;line-height:1.65;max-width:56ch}
.etape-num{display:flex;align-items:center;gap:12px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--e)}
.etape-num i{font-style:normal;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:.95rem;letter-spacing:0;color:#fff;
  background:var(--e);box-shadow:0 12px 24px -12px var(--e)}
.etape h3{font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.045em}
.etape-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}

.etape-visuel{position:relative;margin:0}
.etape-visuel figcaption{margin-top:44px;font-size:.72rem;color:var(--gris-2);text-align:right}
.scene>img,.duo>img{border-radius:28px;box-shadow:var(--ombre-l);width:100%;object-fit:cover}
.scene>img{aspect-ratio:16/11.5}
.scene-portrait>img{aspect-ratio:5/4.6;object-position:50% 30%}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.duo>img{aspect-ratio:4/5;object-position:50% 20%}
.duo>img:nth-of-type(2){margin-top:48px}
.duo figcaption{grid-column:1/-1}

/* fil de notifications posé sur la scène */
.fil{position:absolute;left:-28px;bottom:-30px;width:min(300px,62%);display:grid;gap:7px;z-index:2}
.etape-inverse .fil{left:auto;right:-28px}
.duo .fil{position:relative;left:auto;right:auto;bottom:auto;grid-column:1/-1;width:auto;grid-template-columns:1fr 1fr;margin:-70px 18px 0}
.fil li{display:grid;gap:0;padding:8px 12px 8px 34px;border-radius:15px;position:relative;
  background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 40px -22px rgba(16,32,80,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fil li::before{content:"";position:absolute;left:12px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--e);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--e) 18%,transparent)}
.fil b{font-size:.8rem;font-weight:650;letter-spacing:-.01em}
.fil span{font-size:.72rem;color:var(--gris)}
.js .fil li{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .6s,transform .6s cubic-bezier(.3,1.3,.6,1);
  transition-delay:calc(400ms + var(--i)*420ms)}
.js .vu .fil li{opacity:1;transform:none}

/* écran Sonolix dessiné */
.ecran{padding:50px 0 34px}
.fenetre{border-radius:20px;overflow:hidden;background:#0B1220;box-shadow:var(--ombre-l);border:1px solid #1E2A3E}
.fenetre-barre{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#111A2B;border-bottom:1px solid #1E2A3E}
.fenetre-barre i{width:10px;height:10px;border-radius:50%;background:#2A3950}
.fenetre-barre i:first-child{background:#FF6159}.fenetre-barre i:nth-child(2){background:#FFBD2E}.fenetre-barre i:nth-child(3){background:#28C940}
.fenetre-barre span{margin-left:10px;font-size:.74rem;color:#8FA0B8;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fenetre-corps{display:grid;grid-template-columns:1.05fr 1fr}
.echo{position:relative;background:#000;min-height:100%}
.echo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.3;opacity:.95}
.mesure{position:absolute;left:44%;top:42%;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.66rem;color:#22E3FF}
.mesure i{width:54px;height:2px;background:#22E3FF;position:relative;box-shadow:0 0 8px #22E3FF}
.mesure i::before,.mesure i::after{content:"";position:absolute;top:-5px;width:2px;height:12px;background:#22E3FF}
.mesure i::before{left:0}.mesure i::after{right:0}
.echo-legende{position:absolute;left:10px;bottom:8px;font-size:.6rem;color:#8FA0B8;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cr{padding:16px 16px 14px;display:flex;flex-direction:column;gap:9px;color:#DCE5F2;background:linear-gradient(180deg,#0E1728,#0B1220)}
.cr-titre{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#22E3FF;font-weight:650}
.cr-l{font-size:.8rem;line-height:1.45;color:#B9C6D9}
.cr-l b{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#7F90A8;font-weight:600}
.tape{color:#fff}
.js .tape.tape-encours::after{content:"";display:inline-block;width:2px;height:1em;background:#22E3FF;margin-left:2px;vertical-align:-2px;animation:clign .9s steps(1) infinite}
@keyframes clign{50%{opacity:0}}
.cr-pied{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid #1E2A3E}
.ia{font-size:.62rem;font-family:var(--mono);color:#FFB44D;letter-spacing:.04em}
.signer{font-size:.74rem;font-weight:650;color:#0B1220;background:#22E3FF;border-radius:100px;padding:5px 14px}
.flotte{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;z-index:2;max-width:300px;
  background:rgba(255,255,255,.94);border:1px solid #fff;box-shadow:0 20px 44px -22px rgba(16,32,80,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.flotte>span:last-child{display:grid;font-size:.76rem;color:var(--gris);line-height:1.3}
.flotte b{font-size:.86rem;color:var(--encre);font-weight:650}
.flotte-a{top:0;right:-22px}
.flotte-b{bottom:0;left:-22px}
.onde{display:flex;align-items:center;gap:3px;height:26px;padding:0 4px}
.onde i{width:3px;border-radius:3px;background:#F59E0B;height:30%;animation:onde 1.1s ease-in-out infinite}
.onde i:nth-child(2){animation-delay:-.2s}.onde i:nth-child(3){animation-delay:-.45s}.onde i:nth-child(4){animation-delay:-.1s}
.onde i:nth-child(5){animation-delay:-.6s}.onde i:nth-child(6){animation-delay:-.3s}.onde i:nth-child(7){animation-delay:-.75s}
@keyframes onde{50%{height:100%}}
.mini-gl{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.68rem;font-weight:750;color:#334155;background:#EEF2F7;border:1px dashed #A7B2C2}

/* relais entre deux étapes */
.relais{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:64px 16px;text-align:center}
.relais::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;border-radius:3px;
  background:linear-gradient(180deg,var(--e1),var(--e2))}
.relais::after{content:"";position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px var(--e1),0 0 16px 4px color-mix(in srgb,var(--e1) 60%,transparent);animation:descend 2.6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes descend{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 11px);opacity:0}}
.relais span,.relais b{position:relative;z-index:1;background:#fff;padding:0 12px}
.relais span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-2);font-weight:650}
.relais b{font-size:1.02rem;font-weight:650;letter-spacing:-.015em;background:#fff;border:1px solid var(--trait);border-radius:100px;padding:9px 20px;
  box-shadow:0 14px 30px -20px rgba(16,32,80,.5)}

.socle{margin-top:clamp(40px,7vh,72px);padding:clamp(28px,5vw,52px);border-radius:30px;text-align:center;display:grid;gap:16px;justify-items:center;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(100deg,var(--avant),var(--pendant),var(--apres),var(--coulisses)) border-box;
  border:2px solid transparent;box-shadow:var(--ombre)}
.socle-titre{font-size:clamp(1.4rem,2.8vw,2.1rem);font-weight:700;letter-spacing:-.035em;line-height:1.15;max-width:30ch}
.socle>p:last-child{color:var(--gris);max-width:64ch}

/* ── pour qui ── */
.onglets{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 14px;margin-bottom:10px}
.onglets::-webkit-scrollbar{display:none}
.onglet{flex:1 0 190px;text-align:left;display:grid;align-content:start;gap:2px;padding:14px 16px;border-radius:18px;border:1px solid var(--trait);background:rgba(255,255,255,.6);
  cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.onglet b{font-size:.95rem;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.onglet span{font-size:.78rem;color:var(--gris)}
.onglet:hover{background:#fff}
.onglet[aria-selected="true"]{background:#fff;border-color:var(--b2);box-shadow:0 16px 34px -20px rgba(47,107,255,.7)}
.onglet[aria-selected="true"] b{color:var(--b1)}
.panneau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);padding:clamp(24px,4vw,44px);
  border-radius:30px;background:#fff;border:1px solid var(--trait);box-shadow:var(--ombre)}
.js .panneau[data-cache]{display:none}
.no-js .onglets{display:none}
.no-js .panneau+.panneau{margin-top:16px}
.panneau-texte{display:grid;gap:16px;align-content:start}
.panneau-texte h3{font-size:clamp(1.6rem,3vw,2.3rem)}
.panneau-texte>p:not(.surtitre){color:var(--gris);line-height:1.65}
.panneau-texte .plus{color:var(--encre)!important;font-weight:600;padding:12px 16px;border-radius:14px;background:#F1F5FF;border:1px solid #DCE6FF}
.panneau-texte .btn{justify-self:start}
.panneau-equipe{display:grid;gap:12px;align-content:start}
.panneau-equipe ul{display:grid;gap:10px}
.panneau-equipe li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;column-gap:14px;row-gap:2px;padding:12px 14px;border-radius:18px;
  background:var(--fond);border:1px solid var(--trait)}
.panneau-equipe li>.gl{grid-row:span 2;width:52px;height:52px;border-radius:15px}
.panneau-equipe li b{display:block;font-weight:650;letter-spacing:-.015em}
.panneau-equipe li small{display:block;font-size:.8rem;color:var(--gris)}
.panneau-equipe li em{grid-column:2/-1;font-style:normal;font-size:.8rem;font-weight:600;color:color-mix(in srgb,var(--c) 70%,#000)}
.js .panneau.vient li{animation:monte .55s cubic-bezier(.3,1.3,.6,1) both}
.js .panneau.vient li:nth-child(2){animation-delay:.07s}.js .panneau.vient li:nth-child(3){animation-delay:.14s}
.js .panneau.vient li:nth-child(4){animation-delay:.21s}.js .panneau.vient li:nth-child(5){animation-delay:.28s}
@keyframes monte{from{opacity:0;transform:translateY(12px)}}

/* ── catalogue ── */
.catalogue{background:#fff}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filtre{padding:8px 16px;border-radius:100px;border:1px solid var(--trait-2);background:#fff;font-size:.88rem;font-weight:550;cursor:pointer;transition:all .2s}
.filtre i{font-style:normal;color:var(--gris-2);margin-left:3px}
.filtre[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:#fff}
.filtre[aria-pressed="true"] i{color:#AFC0DA}
.no-js .filtres{display:none}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:16px}
.carte{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 20px 18px;border-radius:24px;background:var(--fond);border:1px solid var(--trait);
  overflow:hidden;transition:transform .3s cubic-bezier(.3,1.3,.6,1),box-shadow .3s,background .3s}
.carte::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--e)}
.carte:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--ombre)}
.carte[hidden]{display:none}
.carte-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.carte-etape{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--e)}
.carte h3{font-size:1.4rem;letter-spacing:-.03em}
.carte-court{font-size:.9rem;font-weight:550;color:var(--encre-2)}
.carte-dit{font-size:.86rem;color:var(--gris);line-height:1.55}
.prix{margin-top:auto;padding-top:12px;border-top:1px solid var(--trait);display:grid;gap:1px}
.prix b{font-size:.95rem;font-weight:650;letter-spacing:-.01em}
.prix span{font-size:.76rem;color:var(--gris)}
.prix-vide b{color:var(--gris)}
.carte-actes{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;padding-top:4px}
.lien-fort{color:var(--b1);font-weight:650}

/* ── preuve ── */
.preuve-in{display:grid;gap:clamp(28px,5vh,52px)}
.preuve-image{margin:0}
.preuve-image img{width:100%;border-radius:32px;box-shadow:var(--ombre-l);aspect-ratio:1600/686;object-fit:cover}
.preuve-image figcaption{margin-top:12px;font-size:.72rem;color:var(--gris-2);text-align:right}
.preuve-texte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 48px;align-items:start}
.preuve-texte .surtitre{grid-column:1/-1}
.preuve-texte .chapo{align-self:center}
.chiffres{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.chiffres p{padding:20px 22px;border-radius:22px;background:#fff;border:1px solid var(--trait);display:grid;gap:4px}
.chiffres b{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:750;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(100deg,var(--b1),var(--b2) 50%,var(--b3));-webkit-background-clip:text;background-clip:text;color:transparent}
.chiffres span{font-size:.86rem;color:var(--gris)}

/* ── confiance ── */
.confiance{background:#fff}
.tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tuile{padding:24px 22px;border-radius:24px;background:var(--fond);border:1px solid var(--trait);display:grid;gap:10px;align-content:start}
.tuile h3{font-size:1.12rem;letter-spacing:-.02em;line-height:1.25}
.tuile p{font-size:.9rem;color:var(--gris);line-height:1.55}
.tuile-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--b1),var(--b2) 55%,var(--b3));box-shadow:0 12px 24px -12px rgba(47,107,255,.9)}
.tuile-ic svg{width:24px;height:24px}

/* ── contact ── */
.contact-carte{position:relative;overflow:hidden;border-radius:36px;padding:clamp(32px,6vw,80px);color:#fff;
  background:linear-gradient(125deg,#1433B8 0%,var(--b2) 55%,#1FA6DA 100%);box-shadow:0 50px 100px -50px rgba(27,63,214,.8)}
.contact-carte .nuages i{opacity:.35;filter:blur(60px)}
.contact-carte .nuages i:nth-child(1){background:#6FD3FF}
.contact-carte .nuages i:nth-child(2){background:#8B5CF6}
.contact-carte .nuages i:nth-child(3){background:#22E3FF}
.contact-in{position:relative;z-index:1;display:grid;gap:20px;max-width:720px}
.contact .surtitre{color:#CFE0FF}
.contact h2{color:#fff}
.contact .chapo{color:#DCE8FF}
.mail{font-family:var(--mono);font-size:.86rem;color:#E4EEFF;user-select:all}
.essais{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding-top:14px;border-top:1px solid rgba(255,255,255,.25);font-size:.92rem}
.essais p{color:#CFE0FF}
.essais a{font-weight:600;border-bottom:1px solid rgba(255,255,255,.5)}
.essais a:hover{border-color:#fff}

/* ── pied ── */
.pied{background:#fff;border-top:1px solid var(--trait);padding:52px 0 36px;font-size:.88rem;color:var(--gris)}
.pied-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:36px}
.pied-marque{display:grid;gap:12px;align-content:start}
.pied-marque .marque{margin:0}
.pied-liens{display:grid;gap:12px;align-content:start}
.pied-liens div{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px 16px}
.pied-liens a:hover{color:var(--encre)}
.pied-legal{margin-top:36px;padding-top:22px;border-top:1px solid var(--trait);display:grid;gap:8px;font-size:.76rem;color:var(--gris-2);line-height:1.6}

/* ── pages : /applications/ et fiches ── */
.entete{position:relative;padding:clamp(56px,10vh,110px) 0 0}
.entete .hold{display:grid;gap:20px}
.fiche-heros{position:relative;overflow:hidden;padding:clamp(40px,8vh,90px) 0 clamp(36px,6vh,64px)}
.nuages-fiche i:nth-child(1){background:var(--c);opacity:.28}
.nuages-fiche i:nth-child(2){background:var(--e);opacity:.18}
.fiche-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.fiche-texte{display:grid;gap:20px}
.fil-ariane{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--gris)}
.fil-ariane a:hover{color:var(--encre)}
.fiche-id{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fiche-nom{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:color-mix(in srgb,var(--c) 75%,#000)}
.fiche h1{font-size:clamp(2.1rem,4.4vw,3.5rem)}
.fiche-prix{font-size:1rem;color:var(--gris)}
.fiche-prix b{color:var(--encre);font-weight:650}
.fiche-portrait{margin:0;display:grid;gap:10px;justify-items:center}
.fiche-portrait img{width:min(100%,400px);border-radius:32px;box-shadow:var(--ombre-l);aspect-ratio:4/5;object-fit:cover;object-position:50% 15%}
.fiche-portrait small{font-size:.72rem;color:var(--gris-2)}
.fiche-glyphe{display:grid;place-items:center}
.fiche-glyphe span{width:min(100%,300px);aspect-ratio:1;border-radius:60px;display:grid;place-items:center;font-size:clamp(3.4rem,9vw,6.4rem);font-weight:750;letter-spacing:-.05em;
  color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 85%,#000),var(--c) 55%,color-mix(in srgb,var(--c) 55%,#fff));
  box-shadow:0 50px 90px -40px var(--c),inset 0 2px 0 rgba(255,255,255,.35)}
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.points li{position:relative;padding:18px 20px 18px 54px;border-radius:20px;background:#fff;border:1px solid var(--trait);font-size:1rem;font-weight:500}
.points li::before{content:"";position:absolute;left:20px;top:19px;width:20px;height:20px;border-radius:50%;
  background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.voisins{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:20px 40px;align-items:center;padding:clamp(24px,4vw,40px);
  border-radius:30px;background:#fff;border:1px solid var(--trait)}
.voisins h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-top:8px}
.voisins-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.voisins .btn{grid-column:1/-1;justify-self:start}

/* ── petits écrans ── */
@media (max-width:1100px){
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .plan{grid-template-columns:1fr;gap:6px;padding:22px 16px}
  .plan-rail{left:39px;right:auto;top:44px;bottom:60px;width:4px;height:auto;
    background:linear-gradient(180deg,var(--avant),var(--pendant) 34%,var(--apres) 67%,var(--coulisses))}
  .voyageur{left:50%;top:0;margin:-8px 0 0 -8px;animation-name:voyage-v}
  @keyframes voyage-v{
    0%,8%{top:0;box-shadow:0 0 0 4px var(--avant),0 0 22px 6px rgba(47,107,255,.5)}
    30%,38%{top:33.3%;box-shadow:0 0 0 4px var(--pendant),0 0 22px 6px rgba(14,159,176,.5)}
    60%,68%{top:66.6%;box-shadow:0 0 0 4px var(--apres),0 0 22px 6px rgba(238,90,54,.5)}
    92%,100%{top:100%;box-shadow:0 0 0 4px var(--coulisses),0 0 22px 6px rgba(139,92,246,.5)}
  }
  .plan-col{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:8px;padding-bottom:18px}
  .plan-noeud{grid-row:1/span 3;align-self:start}
  .plan-nom{text-align:left;align-self:center;margin:0}
  .plan-relais{text-align:left;margin:0}
  .etape-in{grid-template-columns:1fr}
  .etape-inverse .etape-texte{order:0}
  .fil,.etape-inverse .fil,.duo .fil{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:-36px 12px 0}
  .duo .fil{grid-column:1/-1;grid-template-columns:1fr}
  .etape-visuel figcaption{margin-top:12px}
  .ecran{padding:0}
  .flotte{position:relative;top:auto;right:auto;bottom:auto;left:auto;margin:12px 0 0;max-width:none}
  .panneau{grid-template-columns:1fr}
  .preuve-texte{grid-template-columns:1fr}
  .fiche-in{grid-template-columns:1fr}
  .fiche-visuel{order:-1}
  .fiche-portrait img{width:min(100%,280px)}
  .fiche-glyphe span{width:120px;border-radius:30px;font-size:2.6rem}
  .fiche-glyphe{justify-items:start}
  .voisins{grid-template-columns:1fr}
  .pied-in{grid-template-columns:1fr}
}
@media (max-width:620px){
  .plan-apps{flex-direction:row;flex-wrap:wrap;gap:6px}
  .plan .puce{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:100px}
  .plan .puce .gl{width:26px;height:26px;border-radius:50%;font-size:.6rem}
  .plan .puce-x small,.plan .puce>.st{display:none}
  .plan .puce-x b{font-size:.84rem}
  .plan .puce:has(.st-bientot){border-style:dashed;background:transparent}
  .plan-col{padding-bottom:12px}
  .fenetre-corps{grid-template-columns:1fr}
  .echo img{aspect-ratio:16/10}
  .duo>img:nth-of-type(2){margin-top:28px}
  .chiffres{grid-template-columns:1fr}
  .tuiles{grid-template-columns:1fr}
  .points{grid-template-columns:1fr}
  .relais{padding:48px 8px}
  .relais b{font-size:.94rem;padding:8px 16px}
  .panneau-equipe li{grid-template-columns:44px minmax(0,1fr)}
  .panneau-equipe li>.gl{width:44px;height:44px;border-radius:13px}
  .panneau-equipe li>.st{grid-column:2;justify-self:start}
  .panneau-equipe li em{grid-column:2}
  .carte-actes{flex-wrap:wrap}
}


/* ── Le signe TG Invest : L15 « Une seule lumière » + verre L16 (24/09/2026) ──────────────
   En-tête : A1 « La division » à la première page vue de la visite (le patient se divise en quatre
   comme une cellule, la grille se pose), puis A3 « Le battement », lent et discret.
   Section #signe : le verre L16 (reflet qui suit le pointeur, coins qui s'allument à tour de rôle). */
.marque-logo *{transform-box:fill-box;transform-origin:center}
.marque-logo .goutte{opacity:0}
@keyframes tg-pat{0%{opacity:0;transform:scale(0)}65%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes tg-coin{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes tg-sort{0%,22%{transform:none}100%{transform:translate(var(--dx),var(--dy))}}
@keyframes tg-goutte{0%,78%{opacity:1}100%{opacity:0}}
@keyframes tg-net{0%,72%{opacity:0}100%{opacity:1}}
@keyframes tg-bat{0%,62%,100%{transform:none}68%{transform:scale(1.06)}73%{transform:scale(.99)}78%{transform:scale(1.04)}86%{transform:none}}
.js.premiere .barre .marque-logo .gp{animation:tg-pat .55s cubic-bezier(.2,.9,.25,1.2) .15s both}
.js.premiere .barre .marque-logo .gc{animation:tg-sort 1.15s cubic-bezier(.55,0,.2,1) .4s both}
.js.premiere .barre .marque-logo .goutte{animation:tg-goutte 1.75s linear both}
.js.premiere .barre .marque-logo .net{animation:tg-net 1.75s linear both}
.js.premiere .barre .marque-logo .net .tg-c{animation:tg-coin .6s ease-out calc(1.7s + var(--i) * .1s) both}
.js .barre .marque-logo .net .tg-p{animation:tg-bat 6.8s ease-in-out 2.6s infinite}

.signe{background:var(--fond)}
.signe-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.signe-plaque{appearance:none;border:0;padding:clamp(36px,6vw,72px);margin:0;cursor:pointer;background:#fff;border-radius:44px;
  box-shadow:var(--ombre-l);display:grid;place-items:center;aspect-ratio:1;max-width:100%;width:100%}
.signe-plaque .verre{width:100%;max-width:380px}
@keyframes tg-case{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1.08)}}
@keyframes tg-lum{from{opacity:0;transform:scale(.15)}to{opacity:1;transform:none}}
@keyframes tg-allume{0%,100%{opacity:1}6%,18%{opacity:.12}26%{opacity:1}}
/* Le verre ne s'anime pas lui-même (Chrome recalcule mal un flou d'arrière-plan qui change de taille) :
   c'est le patient qui apparaît, puis la lumière qui éclot derrière les plaques. */
.js .signe-plaque .verre .vp,.js .signe-plaque .verre .vl b{opacity:0}
.js .signe-plaque.vu .verre .vp{animation:tg-case .7s cubic-bezier(.2,.9,.25,1.2) .3s both}
.js .signe-plaque.vu .verre .vl b{animation:tg-lum 1.1s cubic-bezier(.2,.8,.2,1) .75s both}
.js .signe-plaque.vu .verre .vl .s2{animation-delay:.87s}
.js .signe-plaque.vu .verre .vl .s3{animation-delay:.99s}
.js .signe-plaque.vu .verre .vl .s4{animation-delay:1.11s}
.js .signe-plaque.vu .verre .vk::before{animation:tg-allume 12s ease-in-out calc(3.2s + var(--i) * 3s) infinite}
.signe-texte{display:grid;gap:18px;align-content:start}
.signe-liste{display:grid;gap:14px;margin-top:6px}
.signe-liste li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;color:var(--gris);line-height:1.55}
.signe-liste b{color:var(--encre);font-weight:650}
.sg{width:22px;height:22px;margin-top:1px;border-radius:7px;display:block}
.sg-p{border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff 0 6%,#B9CEFF 14%,#3D76FF 42%,#1435C4)}
.sg-t{background:radial-gradient(circle at 50% 0,#2F6BFF,transparent 70%),radial-gradient(circle at 100% 50%,#27B8E6,transparent 70%),radial-gradient(circle at 50% 100%,#EE5A36,transparent 70%),radial-gradient(circle at 0 50%,#8B5CF6,transparent 70%),#6A7BFF}
.sg-c{background:linear-gradient(135deg,#DCD8FB,#D8E6FA)}
@media (max-width:900px){.signe-in{grid-template-columns:minmax(0,1fr)}.signe-plaque{max-width:420px;justify-self:center}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nuages i,.voyageur,.relais::after,.onde i{animation:none}
  .js .marque-logo *,.js .signe-plaque *,.js .signe-plaque .verre *::before{animation:none!important;opacity:1!important}
  .marque-logo .goutte{opacity:0!important}
  .verre,.verre .vl{transition:none!important}
  .js .ap,.js .fil li{opacity:1;transform:none;filter:none;transition:none}
  .btn:hover,.puce:hover,.carte:hover{transform:none}
}

/* ── Oursiva (25/09/2026) : fiche en images, palette de l'application (forêt, crème, miel) ── */
.ours{--ours:#33604A;--ours-f:#1F3D2F;--miel:#E8A33D;--creme:#FFF8EC;padding:clamp(48px,7vw,92px) 0}
.ours .surtitre{color:var(--ours)}
.ours h2{color:var(--ours-f);font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.025em;line-height:1.08;margin:8px 0 0;max-width:22ch}
.ours h3{color:var(--ours-f);font-size:1.18rem;letter-spacing:-.01em;margin:0}
.ours p{color:#4A5A50}
.ours-marche{background:linear-gradient(180deg,var(--creme) 0%,#FCF0DB 100%);border-radius:44px 44px 0 0;margin-top:clamp(20px,4vw,48px)}
.ours-etapes{list-style:none;margin:clamp(24px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.ours-etapes li{position:relative;display:grid;gap:10px;align-content:start}
.ours-etapes figure{margin:0 0 8px;border-radius:28px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -34px rgba(51,96,74,.55),0 2px 8px -4px rgba(51,96,74,.25)}
.ours-etapes img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ours-etapes li:hover img{transform:scale(1.04)}
.ours-n{position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--miel);color:#fff;
  font-size:1.05rem;box-shadow:0 6px 16px -4px rgba(232,163,61,.7);border:3px solid #fff}
.ours-etapes p{margin:0;font-size:.98rem;line-height:1.55}
.ours-histoires{background:#FCF0DB}
.ours-chapo{max-width:62ch;font-size:1.05rem;margin:14px 0 0}
.ours-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(22px,3.4vw,38px)}
.ours-cartes article{background:#fff;border-radius:30px;overflow:hidden;box-shadow:0 26px 50px -36px rgba(51,96,74,.6);border:1px solid rgba(51,96,74,.1);display:flex;flex-direction:column}
.ours-cartes img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.ours-cartes div{padding:18px 20px 22px;display:grid;gap:8px}
.ours-cartes span{justify-self:start;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--ours);background:rgba(51,96,74,.1);border-radius:100px;padding:4px 11px}
.ours-cartes p{margin:0;font-size:.95rem;line-height:1.5}
.ours-legende{font-size:.72rem;color:#8A958D!important;margin:16px 0 0}
.ours-formules{background:linear-gradient(180deg,#FCF0DB 0%,var(--creme) 60%,var(--fond) 100%)}
.ours-prix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px);margin-top:clamp(22px,3.4vw,36px)}
.ours-prix div{background:#fff;border-radius:28px;padding:24px 24px 22px;border:1px solid rgba(51,96,74,.12);box-shadow:0 20px 44px -34px rgba(51,96,74,.55);display:grid;gap:6px}
.ours-prix p{margin:0}
.ours-qui{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#B0781F!important}
.ours-montant{color:var(--ours-f)!important;font-size:.95rem}
.ours-montant b{font-size:2.6rem;letter-spacing:-.03em;margin-right:4px;color:var(--ours)}
.ours-inclus{margin:20px 0 0;font-size:.92rem}
.ours .actes{margin-top:22px}
@media (max-width:860px){
  .ours-etapes,.ours-cartes,.ours-prix{grid-template-columns:minmax(0,1fr)}
  .ours-marche{border-radius:30px 30px 0 0}
  .ours-cartes article{flex-direction:row}
  .ours-cartes img{width:38%;aspect-ratio:auto;min-height:100%}
  .ours-cartes div{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){.ours-etapes img{transition:none}}
.fiche-logo{height:clamp(40px,5vw,52px);width:auto;display:block}

.verre{container-type:inline-size;position:relative;display:block;aspect-ratio:1;border-radius:24%;overflow:hidden;background:#EEF3FF;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 30px 60px -30px rgba(16,40,120,.45),inset 0 0 0 1px rgba(255,255,255,.7)}
.verre .vl{position:absolute;inset:0;filter:blur(7cqw);transform:translate(var(--px,0),var(--py,0));transition:transform .6s ease-out}
.verre .vl b{position:absolute;width:44cqw;height:44cqw;border-radius:50%}
.verre .s1{left:28cqw;top:-3cqw;background:#2F6BFF}
.verre .s2{left:59cqw;top:28cqw;background:#27B8E6}
.verre .s3{left:28cqw;top:59cqw;background:#EE5A36}
.verre .s4{left:-3cqw;top:28cqw;background:#8B5CF6}
.verre .vg{position:absolute;inset:15%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4.6cqw}
.verre .vc{position:relative;display:block;border-radius:30%;overflow:hidden;
  -webkit-backdrop-filter:blur(2.6cqw) saturate(1.7);backdrop-filter:blur(2.6cqw) saturate(1.7);
  border:max(1px,.35cqw) solid rgba(255,255,255,.7);
  box-shadow:inset 0 .5cqw .3cqw rgba(255,255,255,.85),inset 0 -1.4cqw 2.4cqw rgba(255,255,255,.18),0 2.4cqw 4cqw -2.4cqw rgba(16,40,120,.4)}
.verre .vb{background:linear-gradient(155deg,rgba(255,255,255,.42),rgba(255,255,255,.04) 58%)}
.verre .vk{background:linear-gradient(155deg,rgba(255,255,255,.42),rgba(255,255,255,.04) 58%)}
.verre .vk::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(255,255,255,.66))}
.verre .vc::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at var(--lx,30%) var(--ly,18%),rgba(255,255,255,.75),rgba(255,255,255,0) 70%);opacity:.8}
.verre .vp{display:block;border-radius:50%;transform:scale(1.08);position:relative;
  background:radial-gradient(circle at 36% 30%,#fff 0 5%,#C4D5FF 11%,#3D76FF 42%,#1435C4 100%);
  box-shadow:0 0 7cqw rgba(47,107,255,.55),inset 0 -1.2cqw 2.4cqw rgba(0,10,60,.35),inset 0 .6cqw .6cqw rgba(255,255,255,.5)}

/* ════════ Le logo en verre, sans fond ════════
   Neuf pièces posées dans un carré de référence (grille 64). Chaque pièce : une base de verre clair
   (flou + saturation de ce qui est derrière), une teinte dans la masse (::before), un lustre (::after).
   --hx/--hy : côté éclairé du bord (suit la lumière). Les ombres sont colorées : la lumière traverse le verre. */
.lg{--t:200px;container-type:inline-size;position:relative;display:block;width:var(--t);max-width:100%;aspect-ratio:1;touch-action:none;
  --hx:1;--hy:1;transition:transform .5s var(--ressort)}
.lg.grand{--t:min(400px,78vw)}
.lg.moyen{--t:190px}
.lg.mini{--t:34px}
.lg.icone{--t:60px}
.lg .p{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:26.5625%;height:26.5625%;border-radius:31%;
  -webkit-backdrop-filter:blur(.55cqw) saturate(2) brightness(1.06);backdrop-filter:blur(.55cqw) saturate(2) brightness(1.06);
  background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(206,220,250,.2) 70%);
  box-shadow:
    inset calc(var(--hx) * .6cqw) calc(var(--hy) * .6cqw) .3cqw -.12cqw rgba(255,255,255,1),
    inset calc(var(--hx) * -.55cqw) calc(var(--hy) * -.55cqw) .5cqw -.15cqw rgba(255,255,255,.62),
    inset calc(var(--hx) * -.22cqw) calc(var(--hy) * -.22cqw) .35cqw rgba(20,40,110,.10),
    inset 0 0 0 max(.5px,.2cqw) rgba(255,255,255,.5),
    inset 0 1.1cqw 1.4cqw -.8cqw rgba(255,255,255,.7),
    inset 0 -1.1cqw 1.6cqw -.8cqw rgba(255,255,255,.55),
    0 3.4cqw 5.2cqw -2.4cqw var(--oc,rgba(70,100,200,.26)),
    0 .5cqw 1.1cqw -.4cqw rgba(10,20,60,.14)}
.lg .p::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--teinte,none);opacity:var(--op,1);transition:opacity .4s}
.lg .p::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 60% at var(--lx,28%) var(--ly,16%),rgba(255,255,255,.72),rgba(255,255,255,0) 60%),
             linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 52%)}
.lg .bleu{--teinte:linear-gradient(165deg,rgba(120,160,255,.38),rgba(47,107,255,.8) 58%,rgba(30,78,232,.92));--oc:rgba(47,107,255,.62)}
.lg .ciel{--teinte:linear-gradient(165deg,rgba(140,226,248,.36),rgba(39,184,230,.8) 58%,rgba(18,150,205,.92));--oc:rgba(39,184,230,.58)}
.lg .corail{--teinte:linear-gradient(165deg,rgba(255,168,140,.38),rgba(238,90,54,.8) 58%,rgba(214,64,30,.92));--oc:rgba(238,90,54,.58)}
.lg .violet{--teinte:linear-gradient(165deg,rgba(196,168,255,.38),rgba(139,92,246,.8) 58%,rgba(112,62,228,.92));--oc:rgba(139,92,246,.58)}
.lg .clair{--op:0;--teinte:linear-gradient(135deg,rgba(139,92,246,.7),rgba(47,107,255,.78))}
.lg .clair:nth-child(2){--teinte:linear-gradient(135deg,rgba(47,107,255,.78),rgba(39,184,230,.78))}
.lg .clair:nth-child(3){--teinte:linear-gradient(135deg,rgba(39,184,230,.78),rgba(238,90,54,.74))}
.lg .clair:nth-child(4){--teinte:linear-gradient(135deg,rgba(139,92,246,.74),rgba(238,90,54,.74))}
.lg .bille{position:absolute;left:35.47%;top:35.47%;width:29.06%;height:29.06%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0 3.5%,rgba(214,228,255,.95) 8%,#6C98FF 26%,#2F6BFF 48%,#1537C8 86%,#0F2A9E);
  box-shadow:0 3.4cqw 5.4cqw -2.2cqw rgba(47,107,255,.7),inset 0 -1.4cqw 2.4cqw rgba(0,10,70,.35),inset 0 .5cqw .6cqw rgba(255,255,255,.55)}
.lg .bille::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 70% 78%,rgba(160,210,255,.85),rgba(160,210,255,0) 32%)}
.lg .onde{position:absolute;left:35.47%;top:35.47%;width:29.06%;height:29.06%;border-radius:50%;border:max(1px,.5cqw) solid rgba(47,107,255,.55);opacity:0;pointer-events:none}

/* Réfraction (Chrome) : les bords du verre dévient ce qui est derrière, comme une lentille. */
.lentille .lg .p{-webkit-backdrop-filter:url(#lentille-carre) blur(.7cqw) saturate(1.9) brightness(1.04);backdrop-filter:url(#lentille-carre) blur(.7cqw) saturate(1.9) brightness(1.04)}

/* Appui : la gelée s'écarte puis revient en ressort. */
.lg .p,.lg .bille{transition:transform .55s var(--ressort)}
.lg.appuye .p{transform:translate(calc(var(--vx) * 7%),calc(var(--vy) * 7%)) scale(.94)}
.lg.appuye .bille{transform:scale(.9)}

/* Arrivée : la bille (le patient) tombe, les pièces sortent d'elle en ressort. */
@keyframes lg-bille{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:none}}
@keyframes lg-piece{from{opacity:0;transform:translate(calc((.3672 - var(--x)) * 376.47%),calc((.3672 - var(--y)) * 376.47%)) scale(.3)}to{opacity:1;transform:none}}
.lg.arrive .bille{animation:lg-bille .7s cubic-bezier(.2,.9,.25,1.2) backwards}
.lg.arrive .bras{animation:lg-piece 1.1s var(--ressort) calc(.35s + var(--i) * .08s) backwards}
.lg.arrive .clair{animation:lg-piece 1s var(--ressort) calc(.75s + var(--i) * .08s) backwards}

/* Chargement : la lumière tourne autour du patient (les teintes s'éteignent et se rallument à tour de rôle). */
@keyframes lg-charge{0%,100%{opacity:.14}12%,30%{opacity:1}46%{opacity:.14}}
@keyframes lg-souffle{0%,100%{transform:none}50%{transform:scale(1.05)}}
.lg.charge .bras::before{animation:lg-charge 1.6s ease-in-out calc(var(--i) * .4s) infinite}
.lg.charge .bille{animation:lg-souffle 1.6s ease-in-out infinite}

/* Une case s'allume : un coin se teinte de la lumière de ses deux voisins. */
@keyframes lg-allume{0%,100%{opacity:0}8%,24%{opacity:1}34%{opacity:0}}
.lg.allume .clair::before{animation:lg-allume 12s ease-in-out calc(var(--i) * 3s) infinite}

/* Battement : un « poum-poum » par battement (lub, puis dub 0,28 s plus tard), déclenché par le script. */
@keyframes lg-lub{0%{transform:none}9%{transform:scale(1.12)}20%{transform:scale(.99)}30%{transform:scale(1.07)}42%,100%{transform:none}}
@keyframes lg-onde{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
@keyframes lg-recoit{0%,100%{filter:none}30%{filter:brightness(1.18) saturate(1.2)}}
.lg.bat .bille{animation:lg-lub .9s cubic-bezier(.3,.7,.3,1)}
.lg.bat .onde{animation:lg-onde .9s cubic-bezier(.2,.7,.3,1)}
.lg.bat .bras::before{animation:lg-recoit .9s ease-out calc(.12s + var(--i) * .03s)}


.lg i{display:block}

/* Essais du logo en verre : en-tête et section « Notre signe » */
.marque .verre{width:34px;flex:none;border-radius:24%;box-shadow:0 6px 14px -8px rgba(16,40,120,.55),inset 0 0 0 1px rgba(255,255,255,.7)}
.marque .lg.mini{--t:36px;flex:none}
.js.premiere .barre .verre .vp{animation:tg-case .7s cubic-bezier(.2,.9,.25,1.2) .2s both}
.js.premiere .barre .verre .vl b{animation:tg-lum 1.1s cubic-bezier(.2,.8,.2,1) .5s both}
.signe-plaque:has(.lg){background:transparent;box-shadow:none;padding:clamp(12px,3vw,40px)}
.signe-plaque .lg{--t:min(360px,70vw)}

/* Plan compact « autour du patient » : la grille du logo, en grand */
.pp{--g:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr);grid-template-areas:"hg h hd" "g c d" "bg b bd";gap:var(--g);
  padding:clamp(14px,2vw,22px);border-radius:36px;background:rgba(255,255,255,.55);border:1px solid var(--trait);box-shadow:var(--ombre)}
.pp-case{border-radius:26px;padding:16px 16px 14px;display:grid;gap:10px;align-content:start;min-width:0;position:relative}
.pp-bras{background:linear-gradient(165deg,color-mix(in srgb,var(--e) 13%,#fff),#fff 70%);border:1px solid color-mix(in srgb,var(--e) 28%,transparent);
  box-shadow:0 18px 34px -26px color-mix(in srgb,var(--e) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.9);transition:box-shadow .5s,transform .5s}
.pp-h{grid-area:h}.pp-d{grid-area:d}.pp-b{grid-area:b}.pp-g{grid-area:g}
.pp-hg{grid-area:hg}.pp-hd{grid-area:hd}.pp-bg{grid-area:bg}.pp-bd{grid-area:bd}
.pp-tete{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:700;letter-spacing:-.01em;color:var(--encre)}
.pp-tete i{font-style:normal;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:.68rem;font-weight:800;color:#fff;
  background:var(--e);box-shadow:0 6px 12px -6px var(--e)}
.pp-apps{display:grid;gap:6px}
.pp-app{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:6px 8px;border-radius:14px;background:rgba(255,255,255,.72);
  border:1px solid rgba(12,24,52,.06);transition:transform .2s,box-shadow .2s}
.pp-app:hover{transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(16,32,80,.45)}
.pp-app .gl{width:30px;height:30px;border-radius:9px;font-size:.7rem}
.pp-app .gl img{border-radius:9px}
.pp-app span{display:grid;min-width:0;line-height:1.25}
.pp-app b{font-size:.84rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-app small{font-size:.7rem;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-st{width:8px;height:8px;border-radius:50%;background:#0E9F57;box-shadow:0 0 0 3px rgba(14,159,87,.14)}
.pp-st.st-beta{background:#D98A0B;box-shadow:0 0 0 3px rgba(217,138,11,.15)}
.pp-st.st-devis{background:#5B5BD6;box-shadow:0 0 0 3px rgba(91,91,214,.14)}
.pp-st.st-bientot{background:transparent;border:1.5px dashed #8690A2;box-shadow:none}
.pp-relais{font-size:.72rem;color:var(--gris);display:flex;gap:6px;align-items:baseline}
.pp-relais b{color:var(--e);font-weight:800}
.pp-coin{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(236,241,250,.55));border:1.5px dashed rgba(90,110,160,.28);align-content:center}
.pp-coin .pp-tete{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2)}
.pp-coin .pp-app{background:rgba(255,255,255,.55)}
.pp-c{grid-area:c;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding:18px 10px}
.pp-coeur{position:relative;width:118px;height:118px;display:grid;place-items:center}
.pp-bille{width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0 4%,rgba(214,228,255,.95) 9%,#6C98FF 27%,#2F6BFF 49%,#1537C8 86%,#0F2A9E);
  box-shadow:0 18px 30px -12px rgba(47,107,255,.7),inset 0 -8px 14px rgba(0,10,70,.35),inset 0 3px 4px rgba(255,255,255,.55)}
.pp-orbite{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(47,107,255,.28);animation:pp-tour 12s linear infinite}
.pp-orbite i{position:absolute;top:-6px;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:#2F6BFF;
  box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 14px 2px currentColor;color:#2F6BFF;animation:pp-teinte 12s linear infinite}
@keyframes pp-tour{to{transform:rotate(360deg)}}
@keyframes pp-teinte{0%,100%{background:#2F6BFF;color:#2F6BFF}25%{background:#27B8E6;color:#27B8E6}50%{background:#EE5A36;color:#EE5A36}75%{background:#8B5CF6;color:#8B5CF6}}
@keyframes pp-visite{0%,100%{transform:none}4%,18%{transform:translateY(-2px);box-shadow:0 26px 44px -24px var(--e),inset 0 1px 0 #fff}}
.pp-bras{animation:pp-visite 12s ease-in-out infinite}
.pp-d{animation-delay:3s}.pp-b{animation-delay:6s}.pp-g{animation-delay:9s}.pp-h{animation-delay:-.4s}
.pp-c b{font-size:1.05rem;letter-spacing:-.02em}
.pp-c small{font-size:.74rem;color:var(--gris);max-width:22ch}
.pp-aussi{grid-column:1/-1;font-size:.8rem;color:var(--gris);text-align:center}
.pp-aussi a{color:var(--b2);font-weight:650}
.pp-legende{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:.72rem;color:var(--gris)}
.pp-legende span{display:inline-flex;align-items:center;gap:6px}
.pp-transition{margin:34px 0 14px;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-2)}
@media (max-width:860px){
  .pp{grid-template-columns:minmax(0,1fr);grid-template-areas:"c" "h" "d" "b" "g" "hd" "bd" "bg" "hg";border-radius:28px}
  .pp-coin{grid-template-columns:86px minmax(0,1fr);align-items:center;padding:10px 12px}
  .pp-c{grid-template-columns:auto 1fr;justify-items:start;text-align:left;padding:6px 8px}
  .pp-coeur{width:84px;height:84px}.pp-bille{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){.pp-orbite,.pp-orbite i,.pp-bras{animation:none}}