/* ==================================================================
   STYLE.CSS — L'APPARENCE DU SITE
   Plan du fichier :
     1. Variables (palette)       5. Icônes du bureau
     2. Base de la page           6. Fenêtres
     3. Fond (silhouette, bulles) 7. Contenu des fenêtres
     4. Menu en pastilles         8. Éléments divers + mobile
   Astuce : un commentaire CSS s'écrit entre barre-étoile, comme ici.
   ================================================================== */


/* ------------------------------------------------------------------
   1. VARIABLES — la palette du site
   On les déclare une fois dans :root, puis on les réutilise avec var(--nom).
   Pour changer les couleurs de tout le site, modifie ces lignes.
   ------------------------------------------------------------------ */
:root{
  --ink:#063d70;                      /* couleur du texte (bleu foncé) */
  --txt:#fff;                         /* blanc */
  --glass:rgba(255,255,255,.28);      /* verre léger (rgba = couleur + transparence) */
  --glass2:rgba(236,252,255,.82);     /* verre des fenêtres (plus opaque) */
  --line:rgba(255,255,255,.7);        /* contours blancs translucides */
  --cyan:#53e8ff;
  --blue:#078fe0;
  box-sizing:border-box;
  /* env(safe-area-inset-…) = marges de sécurité du téléphone (encoche, barre du bas).
     Vaut 0 sur ordinateur. */
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)
}

/* MODE SOMBRE : si l'appareil de la personne est en mode sombre,
   on remplace quelques variables (texte clair, fenêtres bleu nuit). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ink:#e8fbff;--glass2:rgba(6,50,95,.82);--glass:rgba(255,255,255,.14)}
}
:root[data-theme="dark"]{--ink:#e8fbff;--glass2:rgba(6,50,95,.82);--glass:rgba(255,255,255,.14)}


/* ------------------------------------------------------------------
   2. BASE DE LA PAGE
   ------------------------------------------------------------------ */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}   /* le padding et la bordure sont inclus dans la largeur : plus simple à calculer */
html,body{
  height:100%;              /* la page occupe tout l'écran */
  margin:0;                 /* supprime la marge par défaut du navigateur */
  overflow:hidden           /* pas de barres de défilement : le bureau est fixe */
}
body{
  font-family:'Nunito',sans-serif;   /* police principale (sans-serif = police de secours) */
  color:var(--ink);
  /* Dégradé en diagonale (145°) : cyan clair → bleu → bleu océan → menthe */
  background:linear-gradient(145deg,#c9f7ff 0%,#6fd3fb 30%,#1a96e2 62%,#a9f5ec 100%);
  user-select:none;                  /* empêche de sélectionner le texte en glissant les icônes */
  touch-action:manipulation          /* évite le zoom au double-tap sur mobile */
}
#desk{position:relative;height:100%;overflow:hidden}  /* "relative" : sert de repère pour placer les éléments en absolu */


/* ------------------------------------------------------------------
   3. LE FOND : halos, silhouette floue, bulles
   ------------------------------------------------------------------ */
/* Deux taches de lumière : une blanche en haut à gauche, une cyan en bas à droite */
.bg-glow{
  position:absolute;inset:0;   /* inset:0 = couvre toute la zone (haut, bas, gauche, droite à 0) */
  background:
    radial-gradient(ellipse at 15% 20%,rgba(255,255,255,.85),transparent 20rem),
    radial-gradient(ellipse at 90% 80%,rgba(83,232,255,.5),transparent 28rem)
}

/* La silhouette : un cadre centré qui contient trois formes */
.figure{
  position:absolute;left:50%;top:14%;
  width:min(46vw,380px);        /* min() = prend la plus petite valeur : jamais plus de 380px */
  height:min(70vh,520px);
  transform:translateX(-50%);   /* décale de la moitié de sa largeur pour la centrer parfaitement */
  filter:blur(16px);            /* LE FLOU : floute les trois formes */
  animation:sway 7s ease-in-out infinite   /* applique l'animation "sway", 7 s, en boucle */
}
.figure i{position:absolute;display:block;border-radius:50%}   /* chaque forme est ronde par défaut */
.head{left:28%;top:0;width:44%;height:42%;
  background:radial-gradient(circle at 40% 35%,#fff,#9eeaff 45%,#2b9ee6);opacity:.85}
.body{left:0;top:36%;width:100%;height:70%;
  border-radius:45% 45% 0 0!important;     /* arrondi seulement en haut = épaules */
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(7,143,224,.55))}
.ghost{left:34%;top:2%;width:44%;height:42%;background:rgba(255,255,255,.45)}  /* copie décalée = flou de mouvement */

/* ANIMATION : à mi-parcours (50%), la silhouette penche de 3° et descend de 8px,
   puis revient à sa position de départ. */
@keyframes sway{50%{transform:translateX(-50%) rotate(-3deg) translateY(8px)}}

/* Respect des personnes qui ont désactivé les animations dans leur système */
@media(prefers-reduced-motion:reduce){.figure{animation:none}}

/* BULLES : un cercle + des dégradés pour imiter une bulle de savon en 3D */
.orb{
  position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  /* le point de reflet (blanc) est placé en haut à gauche (30% 24%), puis cyan, puis transparent */
  background:radial-gradient(circle at 30% 24%,#fff 0 4%,rgba(255,255,255,.7) 8%,rgba(99,246,255,.55) 30%,rgba(0,134,229,.2) 60%,rgba(255,255,255,.4));
  /* "inset" = ombre à l'INTÉRIEUR (volume) ; la deuxième ombre est un halo à l'extérieur */
  box-shadow:inset -8px -10px 18px rgba(0,81,179,.2),0 0 18px rgba(255,255,255,.5)
}


/* ------------------------------------------------------------------
   4. MENU EN PASTILLES (accueil / à propos / contact / s'abonner)
   ------------------------------------------------------------------ */
nav{
  position:absolute;top:16px;left:50%;
  transform:translateX(-50%);          /* centrage horizontal */
  display:flex;gap:8px;                /* flex = alignés côte à côte ; gap = espace entre eux */
  z-index:9000;                        /* très haut : le menu reste au-dessus des fenêtres */
  width:max-content;max-width:96%
}
nav button{
  font:800 12px 'Nunito';              /* raccourci : graisse, taille, police */
  color:#fff;padding:7px 14px;
  border-radius:20px;                  /* bords très arrondis = forme de pastille */
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.16);    /* fond blanc quasi transparent */
  cursor:pointer;                      /* curseur en forme de main au survol */
  backdrop-filter:blur(8px);           /* floute ce qui est DERRIÈRE la pastille = effet verre dépoli */
  -webkit-backdrop-filter:blur(8px);   /* même chose pour Safari */
  transition:.2s                       /* les changements (survol) se font en douceur sur 0,2 s */
}
nav button:hover,nav button.on{background:rgba(255,255,255,.5);color:#0565a6}  /* au survol OU si active */


/* ------------------------------------------------------------------
   5. ICÔNES DU BUREAU
   ------------------------------------------------------------------ */
.ico{
  position:absolute;                   /* positionnée librement (left/top posés par le JavaScript) */
  width:84px;text-align:center;cursor:pointer;
  touch-action:none;                   /* IMPORTANT : empêche la page de défiler quand on glisse l'icône au doigt */
  color:#fff;font:800 10px 'Nunito';
  text-shadow:0 1px 6px rgba(0,60,120,.6)   /* ombre du texte pour rester lisible sur le fond clair */
}
.ico:hover .thumb{transform:translateY(-3px) scale(1.06)}   /* au survol : la vignette monte et grossit */
.thumb{
  width:48px;height:48px;margin:0 auto 4px;   /* "auto" à gauche/droite = centrée */
  border:2px solid #fff;border-radius:6px;    /* cadre blanc façon photo */
  box-shadow:0 6px 14px rgba(0,70,130,.3);
  transition:.2s;
  display:grid;place-items:center;            /* centre le contenu (emoji, lettre) */
  font-size:28px;background-size:cover
}
.thumb.sq{background:linear-gradient(135deg,#fff,#cfeaf7)}   /* fond de l'icône loupe */

/* Le dossier bleu est dessiné sans image : un rectangle + un petit onglet */
.folder{width:56px;height:44px;border:0;border-radius:6px;
  background:linear-gradient(180deg,#4fc3ff,#0b8ae0);position:relative;
  box-shadow:0 6px 14px rgba(0,70,130,.3)}
.folder::before{                      /* ::before = élément créé par le CSS (ici l'onglet) */
  content:"";position:absolute;left:0;top:-7px;width:24px;height:10px;
  border-radius:5px 5px 0 0;background:#4fc3ff}


/* ------------------------------------------------------------------
   6. FENÊTRES
   Elles sont créées par le JavaScript (fonction openWin).
   ------------------------------------------------------------------ */
.win{
  position:absolute;min-width:260px;
  max-width:calc(100% - 20px);         /* calc() = calcul : jamais plus large que l'écran moins 20px */
  border-radius:18px;border:1px solid var(--line);
  background:var(--glass2);color:var(--ink);   /* var(...) = utilise la variable de la palette */
  box-shadow:0 22px 50px rgba(0,60,120,.35),inset 0 1px 0 #fff;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);   /* verre dépoli */
  overflow:hidden;                     /* rien ne dépasse des coins arrondis */
  animation:pop .22s ease-out          /* animation d'apparition (définie juste dessous) */
}
@keyframes pop{from{transform:scale(.92);opacity:0}}   /* part de 92 % de taille et invisible → taille normale */

/* Barre de titre (c'est elle qu'on attrape pour déplacer la fenêtre) */
.bar{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(83,232,255,.35));
  cursor:grab;                         /* curseur "main ouverte" */
  touch-action:none;                   /* permet le glisser au doigt */
  font:800 12px 'Orbitron'
}
.bar b{flex:1;color:#063d70;font-size:11px}   /* flex:1 = le titre prend toute la place restante */

/* Bouton de fermeture : une petite bulle */
.x{width:16px;height:16px;border-radius:50%;border:1px solid #fff;
  background:radial-gradient(circle at 30% 30%,#fff,#53e8ff 60%,#078fe0);cursor:pointer;padding:0}
.x:hover{background:radial-gradient(circle at 30% 30%,#fff,#ff9aa8 60%,#e0516a)}   /* devient rose au survol */


/* ------------------------------------------------------------------
   7. CONTENU DES FENÊTRES (titres, fiches de jeux, champs, boutons)
   ------------------------------------------------------------------ */
.cnt{padding:16px 18px;font-size:14px;line-height:1.55;
  max-height:60vh;overflow:auto}       /* vh = % de la hauteur d'écran ; "auto" = barre de défilement si trop long */
.cnt h3{margin:0 0 6px;font:800 18px 'Orbitron';letter-spacing:-.5px}
.cards{display:grid;gap:10px}          /* grid = empile les fiches avec 10px d'espace */
.card{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;
  background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.8)}
.card .th{flex:0 0 58px;height:58px;border-radius:10px;border:2px solid #fff}   /* la vignette garde 58px fixes */
.card small{opacity:.75;font-weight:800;letter-spacing:.5px}

input{width:100%;padding:11px 14px;margin:8px 0;border-radius:14px;
  border:1px solid #9bdcf5;background:rgba(255,255,255,.7);color:#063d70;
  user-select:text}                    /* on réactive la sélection de texte dans les champs de saisie */

.btn{font:900 13px 'Nunito';padding:11px 18px;border-radius:22px;border:1px solid #fff;
  color:#0565a6;background:linear-gradient(180deg,#fff,#d4f8ff);
  box-shadow:0 5px 14px rgba(0,75,144,.2);cursor:pointer}


/* ------------------------------------------------------------------
   8. ÉLÉMENTS DIVERS + ADAPTATION MOBILE
   ------------------------------------------------------------------ */
/* Bouton couronne en bas à droite */
.crown{position:absolute;right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));   /* 16px + la marge de sécurité du téléphone */
  width:44px;height:36px;border-radius:14px;border:1px solid rgba(255,255,255,.8);
  background:rgba(60,70,90,.55);color:#ffd36b;font-size:18px;cursor:pointer;z-index:9000}

/* Gros titre "AquaByte" */
.hello{position:absolute;left:0;right:0;bottom:12%;text-align:center;color:#fff;
  pointer-events:none;                 /* le texte "laisse passer" les clics vers ce qui est dessous */
  padding:0 20px}
.hello h1{margin:0;
  font:900 clamp(34px,7vw,72px)/1 'Nunito';   /* clamp(min, idéal, max) = taille qui s'adapte à l'écran */
  letter-spacing:-2px;text-shadow:0 3px 18px rgba(0,73,147,.35)}
.hello p{margin:8px 0 0;font:800 12px 'Nunito';letter-spacing:2px;text-shadow:0 1px 8px rgba(0,73,147,.4)}

/* MOBILE : sur un écran de 600px de large ou moins */
@media(max-width:600px){
  .ico{width:72px}                     /* icônes un peu plus étroites */
  /* Les fenêtres s'étirent presque sur toute la largeur.
     !important est nécessaire car le JavaScript écrit déjà left/width directement sur chaque fenêtre. */
  .win{left:10px!important;right:10px;width:auto!important}
}