/* Ali Gator — couche motion design (v140). Additive : aucune règle existante n'est modifiée. */
:root{
  --ag-ease:cubic-bezier(.22,1,.36,1);
  --ag-spring:cubic-bezier(.34,1.56,.64,1);
  --ag-glint:#b9dc6e;
  --ag-glow-a:rgba(170,206,120,.34);
  --ag-glow-b:rgba(120,170,110,.22);
  --ag-glow-c:rgba(214,232,160,.30);
  --ag-spot:rgba(185,220,110,.16);
  --ag-ripple:rgba(150,200,90,.28);
}
:root[data-theme=dark]{
  --ag-glint:#e3f5b0;
  --ag-glow-a:rgba(120,180,80,.20);
  --ag-glow-b:rgba(60,130,90,.20);
  --ag-glow-c:rgba(200,235,140,.10);
  --ag-spot:rgba(213,235,162,.10);
  --ag-ripple:rgba(213,235,162,.22);
}

/* ---------- Bouton thème (toujours actif) ---------- */
.ag-theme-toggle{
  position:relative;display:inline-grid;place-items:center;width:37px;height:37px;padding:0;
  border:1px solid var(--studio-line,var(--line,#dfe5da));border-radius:11px;background:transparent;
  color:inherit;cursor:pointer;overflow:hidden;flex:none;
  transition:border-color .25s,background-color .25s,transform .35s var(--ag-spring);
}
.ag-theme-toggle:hover{border-color:var(--green,#365c2e);transform:translateY(-1px)}
.ag-theme-toggle:active{transform:scale(.92)}
.ag-theme-toggle:focus-visible{outline:2px solid var(--green,#365c2e);outline-offset:3px}
.ag-theme-toggle svg{position:absolute;width:17px;height:17px;transition:transform .6s var(--ag-spring),opacity .35s}
.ag-theme-toggle .ag-moon{transform:rotate(-90deg) scale(.4);opacity:0}
:root[data-theme=dark] .ag-theme-toggle .ag-sun{transform:rotate(90deg) scale(.4);opacity:0}
:root[data-theme=dark] .ag-theme-toggle .ag-moon{transform:none;opacity:1}
.header-actions{gap:10px}
/* Logo lisible en sombre */
:root[data-theme=dark] .app-header .brand img{background:#f4f7ef;border-radius:12px;padding:0 8px;box-shadow:0 4px 16px #0005}

/* ---------- Bascule thème : révélation circulaire ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

@media (prefers-reduced-motion:no-preference){

  /* ---------- Fond vivant (aurore) sur l'accueil ---------- */
  main.atelier-home{position:relative;isolation:isolate;overflow-x:clip}
  main.atelier-home::before,main.atelier-home::after{
    content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;will-change:transform;
  }
  main.atelier-home::before{
    width:62vmax;height:62vmax;left:-18vmax;top:-26vmax;
    background:radial-gradient(circle at 50% 50%,var(--ag-glow-a),transparent 62%);
    animation:ag-drift-a 26s ease-in-out infinite alternate;
  }
  main.atelier-home::after{
    width:56vmax;height:56vmax;right:-20vmax;top:8vmax;
    background:radial-gradient(circle at 50% 50%,var(--ag-glow-b),transparent 60%),
               radial-gradient(circle at 30% 70%,var(--ag-glow-c),transparent 55%);
    animation:ag-drift-b 32s ease-in-out infinite alternate;
  }
  @keyframes ag-drift-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vmax,5vmax,0) scale(1.12)}100%{transform:translate3d(3vmax,11vmax,0) scale(.94)}}
  @keyframes ag-drift-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8vmax,-4vmax,0) scale(.9)}100%{transform:translate3d(-3vmax,7vmax,0) scale(1.1)}}

  /* ---------- Apparitions en cascade ---------- */
  @keyframes ag-rise{from{opacity:0;translate:0 22px;scale:.985;filter:blur(8px)}to{opacity:1;translate:0 0;scale:1;filter:none}}
  @keyframes ag-fade{from{opacity:0}to{opacity:1}}
  .ag-in{animation:ag-rise .9s var(--ag-ease) both;animation-delay:calc(var(--ag-i,0) * 75ms)}
  .ag-page{animation:ag-rise .7s var(--ag-ease) both}

  /* Titre : ligne qui se dévoile + reflet périodique */
  @keyframes ag-unveil{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
  .home-introduction h1.ag-in em{display:inline-block;padding-right:.08em;animation:ag-unveil 1.1s .45s var(--ag-ease) both}
  .ag-shine{
    display:inline-block;padding-right:.08em;
    background:linear-gradient(100deg,var(--ag-em,currentColor) 0 40%,var(--ag-glint) 50%,var(--ag-em,currentColor) 60% 100%);
    background-size:300% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:ag-unveil 1.1s .45s var(--ag-ease) both,ag-shine 8s 1.6s var(--ag-ease) infinite!important;
  }
  @keyframes ag-shine{0%{background-position:100% 0}22%,100%{background-position:0 0}}

  /* ---------- Onglets PDF / Tableur / PowerPoint : pastille glissante ---------- */
  .document-mode-tabs.ag-pill-ready{position:relative}
  .document-mode-tabs.ag-pill-ready>button{position:relative;z-index:1;background:transparent!important;box-shadow:none!important}
  .ag-tab-pill{
    position:absolute;z-index:0;top:0;left:0;border-radius:9px;pointer-events:none;
    background:var(--green,#2f5a3a);box-shadow:0 6px 16px #1b3a2a33;
    transition:transform .55s var(--ag-spring),width .55s var(--ag-spring),height .3s;
  }
  :root[data-theme=dark] .ag-tab-pill{background:#d5eba2;box-shadow:0 6px 22px #d5eba233}

  /* Changement de panneau */
  @keyframes ag-panel{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
  .home-mode-panel.is-active>*{animation:ag-panel .65s var(--ag-ease) both}
  .home-mode-panel.is-active>*:nth-child(2){animation-delay:.08s}

  /* ---------- Cartes : relief 3D + halo qui suit la souris ---------- */
  .entry-card,.drive-tile,.batch-new-card,.batch-library-card{
    --rx:0deg;--ry:0deg;--lift:0px;
    transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,var(--lift),0)!important;
    transition:transform .6s var(--ag-ease),box-shadow .6s var(--ag-ease),border-color .3s!important;
  }
  .entry-card.ag-hot,.drive-tile.ag-hot,.batch-new-card.ag-hot,.batch-library-card.ag-hot{
    --lift:-4px;transition:transform .18s ease-out,box-shadow .6s var(--ag-ease),border-color .3s!important;
    box-shadow:0 22px 50px -18px #1b3a2a55,0 2px 8px #1b3a2a14;
  }
  :root[data-theme=dark] .ag-hot{box-shadow:0 26px 60px -20px #000c,0 0 0 1px #d5eba21f!important}
  .ag-spot{
    position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--ag-spot),transparent 60%);
    transition:opacity .45s var(--ag-ease);
  }
  .ag-hot>.ag-spot{opacity:1}

  .drive-tile{position:relative;overflow:hidden}

  /* Illustrations des cartes : lévitation + éventail */
  @keyframes ag-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
  .entry-paper,.home-office-paper{animation:ag-float 5.5s ease-in-out infinite;transition:rotate .6s var(--ag-spring),scale .6s var(--ag-spring)}
  .entry-multi .entry-paper,.entry-multi .home-office-paper{animation-delay:-2.7s}
  .entry-card:hover .entry-paper,.entry-card:hover .home-office-paper{rotate:-3deg;scale:1.04}
  .entry-stack>div{transition:rotate .7s var(--ag-spring),translate .7s var(--ag-spring)}
  .entry-card:hover .entry-stack>div:nth-child(1){rotate:-7deg;translate:-10px 4px}
  .entry-card:hover .entry-stack>div:nth-child(2){rotate:3deg;translate:6px -2px}
  .entry-card:hover .entry-stack>div:nth-child(3){rotate:9deg;translate:16px -8px}
  .entry-cta svg,.drive-tile svg:last-child{transition:transform .5s var(--ag-spring)}
  .entry-card:hover .entry-cta svg,.drive-tile:hover svg:last-child{transform:translate(3px,-3px) rotate(45deg)}

  /* ---------- Boutons : pression + onde ---------- */
  button:not(:disabled):not(.entry-card):not(.drive-tile):not(.ag-theme-toggle):active{scale:.97;transition:scale .12s}
  .ag-ripple{
    position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
    background:radial-gradient(circle,var(--ag-ripple) 0,transparent 70%);
    transform:translate(-50%,-50%) scale(0);animation:ag-ripple .75s var(--ag-ease) forwards;
  }
  @keyframes ag-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

  /* Logo : petit frétillement du crocodile */
  @keyframes ag-wiggle{0%,100%{rotate:0deg}20%{rotate:-4deg}45%{rotate:3deg}70%{rotate:-1.5deg}}
  .app-header .brand:hover img{animation:ag-wiggle .8s var(--ag-ease)}

  /* ---------- Fenêtres, menus, notifications ---------- */
  @keyframes ag-pop{from{opacity:0;translate:0 16px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
  dialog[open]{animation:ag-pop .5s var(--ag-spring)}
  dialog[open]::backdrop{animation:ag-fade .4s ease both;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .settings-modal{animation:ag-pop .5s var(--ag-ease)}
  @keyframes ag-toast{from{opacity:0;translate:0 24px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
  .toast{animation:ag-toast .6s var(--ag-spring)}

  /* Bascule de thème sans View Transitions : fondu */
  .ag-theme-fading,.ag-theme-fading *{transition:background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease!important}
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}