/* Accueil : les widgets flottants dans le style de la console de « L'heure libérée » (proposition du 4/11/2026,
   à montrer à Adam). Cartes blanches fines, ligne d'heure en tête, visages, pastilles ; seule la carte de Yanis,
   celle qui prend l'heure, porte le saphir et l'ombre glacier. Positions et histoire : v5.css et v5.js. */

.haut-texte .haut-widgets .flottant.wc,.flottant.wc{display:block;width:max-content;max-width:320px;padding:10px 14px 12px;border-radius:20px;background:rgb(255 255 255 / .94);color:var(--text-primary);
 border:1px solid var(--border-subtle);box-shadow:0 18px 40px -22px rgb(23 43 70 / .35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 transition:opacity .4s,scale .6s var(--ressort),border-color .4s,box-shadow .4s}
.wc-haut{display:flex;align-items:center;gap:7px;margin:0 0 8px;font:600 11px/1 Lexend;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.wc-point{width:7px;height:7px;border-radius:50%;flex:none}
.p-rouge{background:var(--status-danger)}.p-saphir{background:var(--brand-primary)}.p-vert{background:var(--status-success)}.p-glacier{background:var(--brand-accent)}
.wc-corps{display:flex;align-items:center;gap:11px}
.wc-corps>div{min-width:0;margin-right:auto}
.wc b{display:block;font:700 14.5px/1.25 Lexend}
.wc small{display:block;font-size:12.5px;line-height:1.3;color:var(--text-secondary)}
.wc-photo,.wc-av img{width:38px;height:38px;border-radius:50%;background:var(--brand-primarySoft);flex:none}
.wc-av{position:relative;flex:none;display:block;width:38px;height:38px}
.wc-av .w-cloche{position:absolute;right:-5px;bottom:-4px;width:20px;height:20px;padding:4px;border-radius:50%;background:var(--status-danger);color:#fff;box-shadow:0 0 0 2px #fff}
.wc .pile img{width:30px;height:30px;border:2px solid #fff;background:var(--brand-primarySoft);margin-left:-9px}
.wc .pile img:first-child{margin-left:0}
.wc-pastille{flex:none;margin-left:6px;padding:4px 10px;border-radius:99px;font:600 12px Lexend;font-style:normal;white-space:nowrap}
.ps-rouge{background:var(--status-dangerSoft,#FDECEC);color:var(--status-danger)}
.ps-pris{background:var(--brand-primary);color:#fff;box-shadow:.14em .14em 0 var(--brand-accent)}

/* La carte de Yanis : celle qui gagne */
.haut-texte .haut-widgets .flottant.wc.f-yanis{min-width:0;border:1.5px solid var(--brand-primary);box-shadow:5px 5px 0 var(--brand-accent),0 18px 40px -22px rgb(36 87 167 / .5)}
.wc .w-bulle{display:flex;align-items:center;min-height:1.3em;font-weight:600;color:var(--brand-primary)}

/* La carte du forfait de Tom : « Annulée, en attente » puis « Heure rendue » (libellés du logiciel) */
.wc-bascule{display:grid}
.wc-bascule>span{grid-area:1/1;transition:opacity .35s,transform .45s var(--ressort)}
.wc-avant{opacity:0}
.w-anime .wc-avant{opacity:1}
.w-anime .wc-apres{opacity:0;transform:translateY(8px)}
.w-anime.e4 .wc-avant{opacity:0;transform:translateY(-8px)}
.w-anime.e4 .wc-apres{opacity:1;transform:none}
.wc .w-ok{margin-left:8px}
.w-anime .f-sauve .w-ok{scale:0;transition:scale .45s var(--ressort)}
.w-anime.e4 .f-sauve .w-ok{scale:1}
.haut-texte .haut-widgets.w-anime.e4 .f-sauve{border-color:var(--brand-accent);background:var(--brand-accentSoft)}

/* Pastilles qui apparaissent au bon moment */
.w-anime .f-annule .wc-pastille,.w-anime .f-yanis .wc-pastille{opacity:0;scale:.7;transition:opacity .3s,scale .45s var(--ressort)}
.w-anime.e1 .f-annule .wc-pastille,.w-anime.e3b .f-yanis .wc-pastille{opacity:1;scale:1}
/* Yanis : tant qu'il n'a pas répondu, sa carte reste discrète */
.haut-texte .haut-widgets.w-anime:not(.e3b) .f-yanis{border-color:var(--border-subtle);box-shadow:0 18px 40px -22px rgb(23 43 70 / .35)}
.w-anime .f-yanis .w-ok{display:none}

@media (max-width:640px){
 .haut-texte .haut-widgets .flottant.wc{width:auto;max-width:none;padding:9px 11px 10px;border-radius:16px;box-shadow:0 14px 30px -20px rgb(23 43 70 / .35)}
 .haut-texte .haut-widgets .flottant.wc.f-yanis{box-shadow:4px 4px 0 var(--brand-accent),0 14px 30px -20px rgb(36 87 167 / .5)}
 .wc-haut{font-size:10px;margin-bottom:6px}
 .haut-widgets{align-items:start}
 .wc-corps{gap:8px}
 .wc-pastille,.wc .w-ok{display:none!important}
 .wc-photo,.wc-av,.wc-av img{width:30px;height:30px}
 .wc-av .w-cloche{width:16px;height:16px;padding:3px}
 .wc .pile img{width:24px;height:24px;margin-left:-8px}
 .haut-widgets .f-prevenus .wc-corps{flex-direction:column;align-items:flex-start}
}

/* L'accueil remplit l'écran et son contenu est centré verticalement (sans le lien « Découvrir le logiciel ») */
@media (min-width:641px){
 .haut{min-height:min(100svh,1000px);display:flex;flex-direction:column;justify-content:center;padding:112px 0 64px}
}

/* ---------- Le fond : aurore saphir et glacier + le nom Yodriv immense, posé en bas et coupé par le bord (Heysimon) ----------
   Choix d'Abdellah du 4/11/2026 (version B « Signature », préférée au filigrane centré et au contour). */
.haut{isolation:isolate}
.haut-fond{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.haut-aurore{position:absolute;left:50%;top:40%;width:min(1400px,130vw);height:900px;translate:-50% -50%;filter:blur(60px);opacity:.9}
.haut-aurore i{position:absolute;border-radius:50%;animation:aurore 18s ease-in-out infinite alternate}
.haut-aurore i:nth-child(1){left:8%;top:18%;width:42%;height:55%;background:radial-gradient(closest-side,rgb(114 217 228 / .75),transparent)}
.haut-aurore i:nth-child(2){right:6%;top:8%;width:40%;height:60%;background:radial-gradient(closest-side,rgb(36 87 167 / .32),transparent);animation-duration:22s;animation-direction:alternate-reverse}
.haut-aurore i:nth-child(3){left:30%;bottom:4%;width:44%;height:45%;background:radial-gradient(closest-side,rgb(114 217 228 / .6),transparent);animation-duration:26s}
@keyframes aurore{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-5%) scale(1.12)}100%{transform:translate(-5%,4%) scale(.95)}}
/* le nom en dégradé saphir → glacier, découpé dans le logo officiel (masque) */
.logo-plein{position:absolute;left:50%;bottom:-9vw;width:118vw;aspect-ratio:1722/555;translate:-50% 0;opacity:.13;
 background:linear-gradient(100deg,var(--brand-primary) 15%,var(--brand-accent) 95%);
 -webkit-mask:url(../img/yodriv-principal.svg) center/contain no-repeat;mask:url(../img/yodriv-principal.svg) center/contain no-repeat;
 transform:translateY(calc(var(--py,0) * 1px))}
@media (max-width:640px){
 .haut-aurore{top:32%;height:700px}
 .logo-plein{bottom:auto;top:calc(100% - 22vw);width:140vw}
}
@media (prefers-reduced-motion:reduce){.haut-aurore i{animation:none}.logo-plein{transform:none}}