/* =====================================================================
   YD Studio · hero · TOUS LES RÉGLAGES
   Couleurs, polices, tailles, rayon, positions, angles des téléphones,
   opacités et fondus. Aucune couleur n'est écrite ailleurs que dans ce fichier.

   Les positions et tailles de la scène sont en « unités de maquette » :
   la maquette ordinateur fait 1440 × 900, la maquette téléphone 390 × 844.
   1 unité = var(--u), calculée pour que la scène tienne dans l'écran.
   x = distance au centre de l'écran (négatif = à gauche), y = distance au haut.
   ===================================================================== */

:root {
  /* ---------- Couleurs du site (DESIGN.md) ---------- */
  --ciel: #2C76DC;              /* principale : haut du ciel */
  --ciel-clair: #7DBBF2;        /* bas du ciel */
  --mandarine: #FF8A2A;         /* accent : flèche dessinée, détails */
  --encre: #0F2A4F;             /* texte, bouton principal */
  --encre-survol: #1B3D6B;      /* bouton au survol (encre éclaircie) */
  --nuage: #FFFFFF;             /* nuages, menu, cartes */
  --nuage-ombre: #CFE2F7;       /* dessous des nuages */
  --nuage-lumiere: #FFF3D3;     /* reflets chauds des nuages */
  --gris-maquette: #DCE2EA;     /* maquette Figma, croquis */
  --gris-maquette-fonce: #C3CCD8;
  --gris-crayon: #8796A8;       /* traits de crayon des croquis */
  --selection-figma: #2C76DC;   /* cadre de sélection Figma = couleur principale */
  --masque: #FFFFFF;            /* valeur technique des masques SVG (blanc = visible) */
  --reflet-ecran: rgba(255, 255, 255, 0);     /* plus de reflet sur les écrans (06/10 : il les voilait, Yoann les trouvait flous) */
  --ombre-sol: rgba(31, 95, 184, 0.22);       /* ombre douce des téléphones sur le nuage */
  --statut-pret: #2E8B57;       /* pastille « Prêt pour la distribution » (reproduction d'App Store Connect) */
  --figma-barre: #2C2C2C;       /* barre d'outils de la fenêtre Figma (étape 2, reproduction d'interface) */

  /* ---------- Sections sous la hero (05/10/2026, DESIGN.md « Les sections sous la hero ») ---------- */
  --encre-douce: #425A7D;       /* texte secondaire (6,9:1 sur blanc) */
  --trait: #E3EAF2;             /* bords des cartes, séparateurs */
  --ciel-texte: #1F5FB8;        /* le ciel foncé pour les petits textes sur blanc (6,2:1 ; le ciel seul fait 4,4:1) */
  --etiquette-fond: rgba(44, 118, 220, 0.1);        /* fond des étiquettes sur blanc (ciel à 10 %) */
  --etiquette-fond-ciel: #FFFFFF;                   /* fond des étiquettes sur le ciel : blanc plein (texte --ciel-texte) */
  --ciel-carte-haut: rgba(125, 187, 242, 0.45);   /* ciel des cartes des 4 étapes : ciel clair à 45 %… */
  --app-booxs: #A81225;         /* couleurs des apps, mesurées sur leurs vrais écrans, fond de leur carte seulement */
  --app-klaps: #313BBF;
  --app-talkana: #FB851A;
  --app-audicheck: #C4CFE5;
  --app-fixscan: #E94462;
  --app-voxen: #EED8AB;
  /* La même couleur, assombrie juste ce qu'il faut pour se lire sur blanc (même teinte, même saturation ;
     seule la clarté baisse, jusqu'à un contraste d'au moins 4,6). Sert à l'étiquette et au lien de chaque carte.
     07/10 (Yoann) : « il faudrait quand même garder les couleurs en rapport avec Talkana, Books, etc. » */
  --app-booxs-texte: #A81225;
  --app-klaps-texte: #313BBF;
  --app-talkana-texte: #B95903;
  --app-audicheck-texte: #5474B4;
  --app-fixscan-texte: #E41D41;
  --app-voxen-texte: #956E1E;

  /* ---------- Études de cas : les couleurs de chaque marque sont dans css/marque-<app>.css (une feuille par app, DESIGN.md exception 15) ---------- */
  /* L'ouverture d'une étude : la carte voyage jusqu'à la hero (css/etude.css et js/ouverture.js posent le nom,
     css/hero.css mène le voyage). La courbe traîne au départ, puis ouvre d'un coup. */
  --ouverture-courbe: cubic-bezier(0.74, 0, 0.14, 1);
  --ouverture-duree: 900ms;

  /* Le téléphone (cadre, tranche, îlot) : les écrans sont des captures des vraies apps (assets/ecrans/) */
  --demo-telephone: #1A2230;    /* cadre des téléphones */
  --demo-telephone-tranche: #2C3646;
  --demo-ilot: #05070A;

  /* ---------- Ciel ---------- */
  --ciel-degrade-debut: 30%;    /* le bleu foncé tient jusque-là (derrière tout le titre, pour le contraste)… */
  --ciel-degrade-fin: 92%;      /* …et devient clair ici */
  --grain-opacite: 0.22;        /* grain posé sur le ciel et les nuages */

  /* ---------- Titre ---------- */
  --titre-couleur: #FFFFFF;
  --geant-opacite-haut: 0.98;
  --geant-opacite-milieu: 0.94;
  --geant-opacite-bas: 0.88;
  --geant-lumiere: #FFFFFF;
  --geant-ombre: #1F5FB8;

  /* ---------- Polices ---------- */
  --police-titre: "Fredoka", "Rethink Sans", sans-serif;
  --police-texte: "Rethink Sans", sans-serif;

  /* ---------- Formes ---------- */
  --rayon: 12px;                /* LE rayon unique du site */
  --rayon-telephone: 44px;      /* exception : coins physiques du téléphone (à 290 de large) */
  --grille: 8px;

  /* ---------- Mouvement ---------- */
  --apparition-duree: 600ms;
  --apparition-decalage: 120ms;
  --apparition-courbe: cubic-bezier(0.22, 0.8, 0.3, 1);
  --douce: cubic-bezier(0.22, 0.8, 0.3, 1);   /* la courbe de tous les survols (boutons, onglets) */
  --flotte-duree: 19s;  --flotte-ampleur: 14px;  --flotte-cote: 16px;  /* la montgolfière qui dérive : une boucle lente, surtout de gauche à droite */

  /* ======================= SCÈNE · ORDINATEUR (1440 × 900) ======================= */
  --u: min(calc(100vw / 1440), calc(100vh / 900));
  --hauteur-scene: 900;

  /* Menu */
  --menu-y: 24;
  --menu-hauteur: 56;

  /* Titre */
  --haut-y: 100;   --haut-l: 893;          /* ligne « ON MET TON IDÉE SUR L’APP STORE EN » (même hauteur de lettres qu'avant) */
  --geant-y: 162.8; --geant-l: 1046;        /* « 21 JOURS » */

  /* Ruban de vignettes (PLAN 4, SKILLFIRE) : même place et même taille qu'à l'origine */

  /* Outils du métier (PLAN 4, assets/scene/outils/dessiner-outils.py) :
     x / y = place de la POINTE de l'outil ; l = taille du dessin (600 = taille dessinée, 300 = moitié) */
  --plume-x: -552;   --plume-y: 402;  --plume-l: 740;     /* 07/10 : décalée à droite et agrandie (Yoann : « il est vraiment minuscule ») */
  --crayon-x: -440;  --crayon-y: 580; --crayon-l: 600;    /* la mine touche le bord du téléphone de gauche */

  /* Téléphones : position du centre (x), haut (y), largeur (l) */
  --tel-c-x: 0;     --tel-c-y: 372;  --tel-c-l: 290;
  --tel-cote-x: 300; --tel-cote-y: 432; --tel-cote-l: 250;
  --tel-cote-rotation-y: 24deg;   /* tournés vers l'extérieur */
  --tel-cote-rotation-z: 7deg;    /* penchés */
  --tel-cote-recul: -40px;        /* reculés */
  --perspective: 1600px;
  --ombre-c-y: 650;                 /* hauteur de l'ombre au sol du téléphone du centre */
  --ombre-cote-x: 318; --ombre-cote-y: 712;

  /* Montgolfière (décor coupé par le bord droit) */
  --montgolfiere-x: 668; --montgolfiere-y: 112; --montgolfiere-l: 150; --montgolfiere-rotation: 6deg;

  /* Éléments flottants */
  --carte-x: 404;  --carte-y: 398;  --carte-l: 268;

  /* Nuages */
  --nuages-fond-y: 420;  --nuages-fond-h: 330;
  --nuages-devant-y: 600; --nuages-devant-h: 360;
  --nuages-haut-y: 138;   --nuages-haut-h: 150;

  /* Sous-titre et bouton posés sur le nuage */
  --texte-y: 724;  --texte-l: 560;
  --sous-titre-taille: 21;
  --bouton-hauteur: 56;  --bouton-taille: 17;

  /* Flèche dessinée */
  --fleche-l: 176;  --fleche-air: 16;  /* largeur de la flèche ; air entre sa pointe et le bouton (05/10 : 0 jugé trop collé, 16 = un petit écart) */

  /* Menu (tailles de texte) */
  --menu-taille: 15;
  --legende-taille: 13;

  /* Logo dans le menu : la capitale de « Studio » vaut 1,25 × celle du texte du menu
     (à 1 ×, le logo se lisait comme un lien de plus ; voir marque/phase-2/essais/studio/planche-studio.png) */
  --logo-echelle: 1.25;
  --logo-air: 14;               /* air entre le logo et le premier trait */
  --onglet-air: 18;             /* air de chaque côté d'un onglet, jusqu'aux traits */
  --separateur-h: 20;           /* hauteur des traits verticaux du menu */
  --separateur: rgba(15, 42, 79, 0.18);  /* l’encre #0F2A4F à 18 % */
  --logo-calage: -1.56;         /* remonte le logo pour que « Studio » soit sur la ligne de base des liens (mesuré) */
}

/* ======================= SCÈNE · TÉLÉPHONE (390 × 844) ======================= */
@media (max-width: 640px) {
  :root {
    --u: calc(100vw / 390);
    --hauteur-scene: 844;

    --menu-y: 16;  --menu-hauteur: 48;

    --haut-y: 102.25; --haut-l: 313.5;  /* 1re ligne « ON MET TON IDÉE » (même hauteur de lettres qu'avant) */
    --haut2-y: 142.25; --haut2-l: 337;   /* 2e ligne « SUR L’APP STORE EN » */
    --geant-y: 174.3; --geant-l: 354;

    --tel-c-x: 0;     --tel-c-y: 300;  --tel-c-l: 206;
    --tel-cote-x: 128; --tel-cote-y: 340; --tel-cote-l: 170;   /* rapprochés le 05/10 : on lit « Klaps » et on voit Taro au téléphone */
    --tel-cote-rotation-y: 22deg;
    --tel-cote-rotation-z: 6deg;
    --perspective: 1100px;
    --ombre-c-y: 580; --ombre-cote-x: 200; --ombre-cote-y: 600;

    --nuages-fond-y: 360;  --nuages-fond-h: 230;
    --nuages-devant-y: 548; --nuages-devant-h: 340;
    --nuages-haut-y: 250;  --nuages-haut-h: 90;

    --texte-y: 652;  --texte-l: 336;
    --sous-titre-taille: 17;
    --bouton-hauteur: 52;  --bouton-taille: 16;

    --montgolfiere-x: 176; --montgolfiere-y: 238; --montgolfiere-l: 62;
    --fleche-l: 84;  --fleche-air: 12;

    --menu-taille: 15;
  }
}