@view-transition{navigation:auto}   /* fondu doux vers les pages des boutons (navigateurs récents, site en ligne) */
/* =====================================================================
   PAGE D'ACCUEIL — mise en page uniquement
   (chaque composant garde ses propres styles dans components/…)

   1. Page        : fond noir, cadre centré dans l'écran
   2. Cadre       : bordure lumineuse arrondie qui contient les 4 sections
   3. Sections    : header · hero · 6 boutons (2 colonnes × 3) · footer
   4. Écran       : sur ordinateur/tablette, le cadre est mis à l'échelle (page.js) pour tenir
                    entièrement dans l'écran → aucune barre de défilement
   5. Téléphone   : une seule colonne de boutons ; défilement naturel, sans barre visible
   6. Mode clair  : activé par la lampe du hero (html[data-theme="light"])
   ===================================================================== */

/* ---------- 1. Page ---------- */
:root{
  --page-bg:#000;
  --frame-w:960px;                 /* largeur du cadre à l'échelle 1 */
  --frame-pad:24px;                /* marge intérieure du cadre */
  --frame-radius:24px;
  --frame-line:rgba(120,140,255,.75);
  --frame-glow:rgba(70,90,255,.38);
  --frame-bg:linear-gradient(180deg,#00031c 0,#000 22%,#000 70%,#00041e 100%);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:var(--page-bg);-webkit-text-size-adjust:100%;overflow:hidden}
body{background:radial-gradient(60% 50% at 50% 50%,rgba(40,60,200,.10),transparent 70%),var(--page-bg);
  font-family:Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  overflow:hidden;                 /* ordinateur : la page tient dans l'écran, jamais de barre */
  transition:background-color .4s ease}

/* ordinateur : la scène occupe exactement la fenêtre ; le cadre est centré au milieu, quelle que soit sa taille */
.page{position:fixed;inset:0;overflow:hidden}

/* ---------- 2. Cadre ---------- */
.frame{
  width:var(--frame-w);flex:none;
  padding:0 var(--frame-pad);
  border-radius:var(--frame-radius);
  background:var(--frame-bg);
  box-shadow:0 0 24px var(--frame-glow),0 0 80px rgba(70,90,255,.12);
  overflow:clip;                   /* découpe le hero aux coins arrondis (clip : n'empêche pas ses effets) */
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(var(--fit,1));   /* --fit : échelle calculée par page.js */
  transform-origin:50% 50%;
}

/* le liseré lumineux est dessiné PAR-DESSUS le contenu : le hero (bord à bord) ne le recouvre jamais */
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  box-shadow:inset 0 0 0 1.5px var(--frame-line)}

/* ---------- 3. Sections ---------- */
/* hero : bord à bord dans le cadre (comme sur la maquette) */
.frame > .hr-hero{width:auto;margin-inline:calc(var(--frame-pad) * -1)}
/* les 6 boutons : 2 colonnes × 3 rangées → 3 à gauche, 3 à droite */
.buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;padding:8px 0 22px}
.buttons > [class$="-btn-wrap"]{width:100%}   /* chaque bouton remplit sa colonne (tout y est proportionnel) */

/* ---------- 5. Téléphone : tout tient dans l'écran, sans défilement ----------
   Mise en page compacte (sections resserrées, polices réduites) ; si l'écran est encore trop court,
   page.js réduit légèrement l'ensemble, comme sur ordinateur. */
@media (max-width:760px){
  :root{--frame-pad:12px;--frame-radius:18px}
  html,body{overflow:hidden;overscroll-behavior:none}
  .frame{width:min(calc(100vw - 16px),520px)}
  .buttons{grid-template-columns:1fr;gap:6px;padding:4px 0 8px}
}

/* ---------- 6. Mode clair ---------- */
:root[data-theme="light"]{
  --page-bg:#e9edf6;
  --frame-line:rgba(43,140,255,.45);
  --frame-glow:rgba(43,140,255,.16);
  --frame-bg:linear-gradient(180deg,#fff 0,#f7f9fd 60%,#eef2fa 100%);
  color-scheme:light;
}
:root[data-theme="light"] body{background:radial-gradient(60% 50% at 50% 45%,#fff,transparent 75%),var(--page-bg)}
:root[data-theme="light"] .frame{box-shadow:0 24px 60px rgba(13,19,48,.14)}

@media (prefers-reduced-motion:reduce){ body{transition:none} }

/* =====================================================================
   TÉLÉPHONE / TABLETTE TACTILE — FLUIDITÉ
   Sur écran tactile, les 6 boutons restent des images fixes (plus de scène 3D, de flous ni de reflets calculés en
   continu) : la page reste à 60 images / seconde. Retour visuel à l'appui : léger enfoncement, immédiat.
   ===================================================================== */
@media (hover:none),(pointer:coarse){
  .cv-stage,.cp-stage,.sb-stage,.bd-stage,.sn-stage,.cu-stage{perspective:none}
  .cv-drift,.cp-drift,.sb-drift,.bd-drift,.sn-drift,.cu-drift,.cv-scene,.cp-scene,.sb-scene,.bd-scene,.sn-scene,.cu-scene{transform-style:flat;transform:none!important}
  .cv-plane--far::before,.cp-plane--far::before,.sb-plane--far::before,.bd-plane--far::before,.sn-plane--far::before,.cu-plane--far::before{filter:none}
  .cv-btn__icon,.cp-btn__icon,.sb-btn__icon,.bd-btn__icon,.sn-btn__icon,.cu-btn__icon,.cv-btn__arrow,.cp-btn__arrow,.sb-btn__arrow,.bd-btn__arrow,.sn-btn__arrow,.cu-btn__arrow{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .cv-btn__icon,.cp-btn__icon,.sb-btn__icon,.bd-btn__icon,.sn-btn__icon,.cu-btn__icon{background:rgba(20,20,26,.72)}
  :root[data-theme="light"] :is(.cv-btn__icon,.cp-btn__icon,.sb-btn__icon,.bd-btn__icon,.sn-btn__icon,.cu-btn__icon){background:rgba(255,255,255,.86)}
  .cv-fx-spot,.cp-fx-spot,.sb-fx-spot,.bd-fx-spot,.sn-fx-spot,.cu-fx-spot,.cv-fx-burst,.cp-fx-burst,.sb-fx-burst,.bd-fx-burst,.sn-fx-burst,.cu-fx-burst,.cv-fx-flash,.cp-fx-flash,.sb-fx-flash,.bd-fx-flash,.sn-fx-flash,.cu-fx-flash,.cv-fx-pop,.cp-fx-pop,.sb-fx-pop,.bd-fx-pop,.sn-fx-pop,.cu-fx-pop{display:none}
  .cv-btn,.cp-btn,.sb-btn,.bd-btn,.sn-btn,.cu-btn{transition:transform .14s cubic-bezier(.2,.8,.2,1)!important;-webkit-tap-highlight-color:transparent}
  .cv-btn.is-tap,.cp-btn.is-tap,.sb-btn.is-tap,.bd-btn.is-tap,.sn-btn.is-tap,.cu-btn.is-tap{transform:scale(.97)!important}
  .cv-btn *,.cp-btn *,.sb-btn *,.bd-btn *,.sn-btn *,.cu-btn *{animation:none!important}
}