/* 04/11 (patron : « le contenu doit être plus large… ça doit être dynamique : quand on touche les onglets, il doit y avoir des effets »)
   SOCLE design 2026 — mise en page pleine largeur + motion design, 100 % sans dépendance (static/sight-motion.js).
   Doc d'usage : docs/design_motion.md.  Coupé par « réduire les animations » et par Paramètres → Effets animés (html.mo-off). */

/* ---------- jetons ---------- */
:root{
  --sm-d1:.16s; --sm-d2:.38s; --sm-d3:.7s;                       /* durées : micro / transition / entrée */
  --sm-ease:cubic-bezier(.2,.8,.2,1);                            /* sortie douce */
  --sm-spring:cubic-bezier(.34,1.4,.5,1);                        /* léger rebond (indicateur d'onglet) */
  --sm-gap:clamp(14px,1.4vw,26px);                               /* gouttière commune des grilles */
  --sm-or:247,201,72;                                            /* or SIGHT en rgb pour les halos */
}
html[data-theme=light]{--sm-or:178,128,18}

/* ---------- mise en page pleine largeur ---------- */
/* grille qui remplit l'écran : --sm-min = largeur mini d'une carte */
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sm-min,300px)),1fr));gap:var(--sm-gap);align-items:stretch}
.sm-grid.fit{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--sm-min,300px)),1fr))}
.sm-grid>.span,.sm-grid>[data-span]{grid-column:1/-1}
/* contenu + colonne latérale collante */
.sm-split{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,24vw,460px);gap:var(--sm-gap);align-items:start}
.sm-split>aside,.sm-split>.sm-aside{position:sticky;top:76px;max-height:calc(100dvh - 96px);overflow:auto;scrollbar-width:thin}
.sm-split.l{grid-template-columns:clamp(300px,22vw,420px) minmax(0,1fr)}
@media (max-width:1100px){.sm-split,.sm-split.l{grid-template-columns:minmax(0,1fr)}.sm-split>aside,.sm-split>.sm-aside{position:static;max-height:none}}
/* panneau qui prend la hauteur de l'écran (messagerie, outils) */
.sm-fill{min-height:calc(100dvh - 130px)}
/* sort d'un conteneur : occupe toute la largeur de la page */
.sm-bleed{width:100%;max-width:none!important;margin-inline:0!important}
/* les chapeaux de page ne s'arrêtent plus à 880 px : le texte suit l'écran (lecture confortable : ~110 caractères) */
body.sg main[data-large] .v3-sous,body.sg main[data-large] .pg-hd>p,body.sg main[data-large] .pg-hd .mut{max-width:min(1180px,100%)}
body.sg main[data-large] .lb-hero-tx{max-width:min(920px,62%)}
body.sg main[data-large] .pc-slogan.big{max-width:min(1180px,100%)}
@media (min-width:1500px){
  body.sg main[data-large] .v3-pts{max-width:none}
  body.sg main[data-large] .fgrid,body.sg main[data-large] .pc-grid{gap:var(--sm-gap)}
}

/* ---------- motion : activé seulement si le membre l'accepte ---------- */
@media (prefers-reduced-motion:no-preference){

  /* 1) transition de page douce (View Transitions inter-documents) : le menu et la barre du haut restent fixes, le contenu glisse + fond */
  @view-transition{navigation:auto}
  html:not(.mo-off) .sg-side{view-transition-name:sm-side}
  html:not(.mo-off) header.top{view-transition-name:sm-top}
  ::view-transition-group(root){animation-duration:var(--sm-d2)}
  ::view-transition-old(root){animation:smOut .22s ease both}
  ::view-transition-new(root){animation:smIn .42s var(--sm-ease) both}
  ::view-transition-group(sm-side),::view-transition-group(sm-top){animation-duration:0s}
  @keyframes smOut{to{opacity:0;transform:translateY(-6px);filter:blur(3px)}}
  @keyframes smIn{from{opacity:0;transform:translateY(16px);filter:blur(4px)}}

  /* 2) onglets : un indicateur doré glisse d'un onglet à l'autre (posé par JS sur .v3-tabs, .sgx-uts, .sgx-seg, [data-sm-tabs]) */
  html:not(.mo-off) .sm-t{position:relative;isolation:isolate}
  html:not(.mo-off) .sm-t>a,html:not(.mo-off) .sm-t>button{position:relative;z-index:1}
  html:not(.mo-off) .sm-t>a.on,html:not(.mo-off) .sm-t>.on{background:transparent!important;box-shadow:none!important}
  html:not(.mo-off) .sm-t.sm-pend>a.on{color:var(--v3-mu,#aeb8cc)!important}
  html:not(.mo-off) .sm-ind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:999px;
    background:linear-gradient(180deg,#ffe08a,#d4a63a);box-shadow:0 8px 22px -8px rgba(var(--sm-or),.75);
    transition:transform var(--sm-d2) var(--sm-spring),width var(--sm-d2) var(--sm-spring),height var(--sm-d2) var(--sm-ease)}
  html:not(.mo-off) .sm-ind.nt{transition:none}
  /* 3) contenu d'un onglet interne qui apparaît : glissement + fondu + léger flou */
  html:not(.mo-off) .sm-pane{animation:smPane var(--sm-d2) var(--sm-ease) backwards}
  @keyframes smPane{from{opacity:0;transform:translateX(var(--sm-dx,18px));filter:blur(3px)}}

  /* 4) apparition en cascade des grilles (JS pose --i) */
  html:not(.mo-off) .sm-st>*{animation:smUp var(--sm-d3) var(--sm-ease) backwards;animation-delay:calc(var(--i,0)*55ms)}
  @keyframes smUp{from{opacity:0;transform:translateY(22px) scale(.985)}}

  /* 5) cartes : élévation au survol + lumière dorée qui suit le curseur */
  html:not(.mo-off) main :is(.grp,.fcard,.pc,.sgx-c,.lb-eb,.lb-in,.v3-row,.rc-row,.pf-c,.fx-tr2,.fj-hot,.v3-stat,.fx.card,[data-sm-lift]){
    transition:transform var(--sm-d1) var(--sm-ease),box-shadow var(--sm-d2) var(--sm-ease),border-color var(--sm-d2)}
  html:not(.mo-off) main :is(.grp,.fcard,.pc,.sgx-c,.lb-eb,.lb-in,.pf-c,.fj-hot,a.v3-stat,[data-sm-lift]):hover{
    transform:translateY(-4px);box-shadow:0 18px 38px -14px rgba(0,0,0,.55),0 0 0 1px rgba(var(--sm-or),.32)}
  html:not(.mo-off) main :is(.grp,.fcard,.pc,.sgx-c,.lb-eb,.lb-in,.pf-c,.fj-hot,a.v3-stat,[data-sm-lift]):active{transform:translateY(-1px) scale(.992)}
  html:not(.mo-off) main :is(.v3-row,.rc-row,.fx-tr2):hover{box-shadow:0 0 0 1px rgba(var(--sm-or),.3),0 10px 26px -14px rgba(0,0,0,.5)}
  html:not(.mo-off) .sm-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--sm-d2);
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--sm-or),.14),transparent 62%)}
  html:not(.mo-off) .sm-spot:hover::after{opacity:1}

  /* 6) micro-interactions des boutons : appui, halo de focus */
  html:not(.mo-off) :is(.btn,.v3-btn,.v3-tabs a,.sgx-uts a,.sgx-seg a):active{transform:scale(.96)}
  html:not(.mo-off) .btn,html:not(.mo-off) .v3-btn{transition:transform var(--sm-d1) var(--sm-ease),box-shadow var(--sm-d2),background-color var(--sm-d2),color var(--sm-d2)}
  html:not(.mo-off) .btn.pri:hover,html:not(.mo-off) .v3-btn.pri:hover{box-shadow:0 10px 28px -8px rgba(var(--sm-or),.7)}
  html:not(.mo-off) :is(.btn,.v3-btn,.v3-tabs a,input,select,textarea):focus-visible{outline:2px solid rgba(var(--sm-or),.9);outline-offset:3px;transition:outline-offset var(--sm-d1)}

  /* 7) squelettes de chargement + images qui se révèlent */
  .sm-skel,.sm-skel-l{position:relative;overflow:hidden;background:rgba(127,140,170,.14);border-radius:12px;color:transparent!important}
  .sm-skel-l{display:block;height:1em;margin:.5em 0;border-radius:999px}
  .sm-skel::after,.sm-skel-l::after,html:not(.mo-off) img.sm-imgw::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.14) 50%,transparent 80%);animation:smShim 1.3s infinite}
  @keyframes smShim{to{transform:translateX(100%)}}
  html:not(.mo-off) img.sm-imgw{opacity:0}
  html:not(.mo-off) img.sm-imgok{animation:smImg .5s var(--sm-ease) backwards}
  @keyframes smImg{from{opacity:0;transform:scale(1.04);filter:blur(6px)}}

  /* 8) barre de progression de lecture (fine ligne or en haut de page) */
  @supports (animation-timeline:scroll()){
    html:not(.mo-off) body.sg::before{content:"";position:fixed;left:0;top:0;height:2px;width:100%;z-index:9998;pointer-events:none;
      background:linear-gradient(90deg,#d4a63a,#ffe08a);transform-origin:0 50%;transform:scaleX(0);animation:smProg linear both;animation-timeline:scroll(root block)}
    @keyframes smProg{to{transform:scaleX(1)}}
  }
}
@media (prefers-reduced-motion:reduce){.sm-skel::after,.sm-skel-l::after{animation:none}}