@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 (grand écran : 1140px, voir plus bas) */
  --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) */
/* grand écran (≥ 1100 px) : cadre plus large, 3 boutons par rangée → un grand rectangle qui remplit mieux l'écran.
   Les autres pages prennent exactement la même taille (pages/shared/site.js, via sessionStorage « hd-frame »). */
@media (min-width:1100px){
  :root{--frame-w:1140px}
  .buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}
}

/* ---------- 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 — PLEIN ÉCRAN : plus de grand cadre arrondi ni de liseré, le contenu occupe tout l'écran
   (zones sûres de l'iPhone respectées : encoche et barre du bas)
   ===================================================================== */
@media (max-width:760px){
  body,.page{background:var(--frame-bg)}
  .frame{width:100vw;min-height:100vh;min-height:100dvh;border-radius:0;box-shadow:none;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .frame::after{display:none}
  .frame{display:flex;flex-direction:column}
  .frame > .buttons{flex:1 0 auto;align-content:center}
  :root[data-theme="light"] .frame{box-shadow:none}
}

/* jour / nuit (lampe) : bascule instantanée — toutes les transitions sont coupées pendant le changement */
html.theme-instant *,html.theme-instant *::before,html.theme-instant *::after{transition:none!important;animation:none!important}