/* =====================================================================
   RÉGLAGES DE LA BORNE O'CROUSTY — écrans Menu et Produits
   ---------------------------------------------------------------------
   Toutes les valeurs de mise en page (couleurs, tailles, marges) sont
   ici. Les écrans sont conçus en 1080×1920 px : toutes les tailles sont
   en pixels de cet écran de référence, puis l'ensemble est mis à
   l'échelle pour remplir la borne.
   ===================================================================== */

:root {
  /* ---------- Écran de référence ---------- */
  --ecran-largeur: 1080px;
  --ecran-hauteur: 1920px;
  --etirement: 1;                         /* calculé par borne.js sur les écrans plus allongés (téléphones) */

  /* ---------- Couleurs ---------- */
  --rose: #e0217a;
  --orange: #ff6a1f;
  --sombre: #1a0510;                      /* contours des textes, compteur */
  --fond-borne: #000;
  --texte: #fff;
  --degrade-panier: linear-gradient(90deg, #d81b6a, #ff6a1f);
  --degrade-plus: linear-gradient(135deg, #e0217a 0%, #ff6a1f 100%);   /* bouton "+" des produits */

  /* ---------- Style papier déchiré ---------- */
  /* Contour noir épais des textes posés sur le papier (comme "NOTRE MENU") */
  --contour-epais:
    4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000,
    3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000,
    5px 6px 0 #000;
  /* Épaisseur affichée des bords du cadre papier dans les fenêtres
     (choix de taille, "Êtes-vous toujours là ?") : haut droite bas gauche */
  --cadre-papier-bords: 63px 47px 81px 47px;

  /* ---------- Polices (fichiers locaux dans assets/polices) ---------- */
  --police-titre: 'Bangers', Impact, sans-serif;
  --police-texte: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* ---------- Barre du bas (commune) ---------- */
  --bas-zone: 210px;                      /* hauteur de la barre du bas */
  --retour-texte: 52px;
  --retour-hauteur-min: 96px;
  --retour-espace: 18px;

  /* ---------- Retour automatique (écrans Menu et Produits) ---------- */
  --veille-attente: 60s;                 /* sans toucher l'écran -> fenêtre "Êtes-vous toujours là ?" */
  --veille-compte-a-rebours: 15s;        /* sans réponse -> panier vidé, retour à l'accueil */
  --veille-largeur: 860px;
  --veille-titre-texte: 64px;
  --veille-texte: 36px;
  --veille-compte-texte: 170px;
  --veille-bouton-hauteur: 150px;
  --veille-bouton-texte: 52px;
}

/* =====================================================================
   ÉCRAN D'ACCUEIL
   Positions mesurées sur maquettes/accueil_1080x1920.png.
   Les largeurs sont celles des images entières (fichiers recadrés).
   ===================================================================== */
.ecran-accueil {
  /* Logo (logo-accueil.webp a de petites marges transparentes : le dessin visible
     fait ≈ 62 % de la largeur et commence ≈ 80 px sous le haut) */
  --logo-largeur: 769px;
  --logo-haut: 59px;

  /* Barquette, posée sur la bande colorée (y ≈ 814 → 1358) */
  --barquette-largeur: 959px;
  --barquette-haut: 814px;
  --barquette-flottement: -12px;         /* amplitude du flottement */
  --ombre-largeur: 64%;                   /* ombre sous la barquette, en % de la barquette */
  --ombre-hauteur: 54px;
  --ombre-bas: -14px;                     /* position sous le bas de la barquette */
  --ombre-decalage: 4%;                   /* vers la droite : suit le bord avant de la barquette */
  --ombre-opacite: .6;

  /* Bouton "Touchez pour commander" (y ≈ 1437 → 1852) */
  --bouton-largeur: 933px;
  --bouton-haut: 1437px;
  --bouton-pulsation: 1.04;
  --reflet-opacite: .75;
  --appui-echelle: .95;

  /* Animation d'entrée (enchaînement total ≈ 1,5 s) */
  --entree-fond-delai: 0s;          --entree-fond-duree: .6s;
  --entree-logo-delai: .15s;        --entree-logo-duree: .8s;
  --entree-barquette-delai: .45s;   --entree-barquette-duree: .7s;
  --entree-bouton-delai: 1s;        --entree-bouton-duree: .5s;

  /* Animations en boucle */
  --boucle-bouton-duree: 3s;              /* reflet + pulsation, synchronisés */
  --boucle-bouton-delai: 1.6s;
  --boucle-barquette-duree: 4s;
  --boucle-fond-duree: 20s;               /* zoom aller-retour */
  --fond-zoom: 1.05;
  --boucle-logo-duree: 3.5s;

  /* Toucher : enfoncement puis fondu de sortie */
  --appui-duree: 110ms;
  --sortie-duree: .3s;
}

/* =====================================================================
   ÉCRAN MENU
   ===================================================================== */
.ecran-menu {
  /* Zone qui défile (sous le titre "NOTRE MENU" du fond).
     Le bas de la bande déchirée du titre est à y = 353 px (bord gauche,
     là où elle descend le plus) : la zone commence 30 px plus bas. */
  --haut-zone: 383px;
  --fondu-haut: 70px;                     /* fondu en haut de la grille */
  --fondu-bas: 110px;                     /* fondu en bas de la grille */

  /* Grille de catégories */
  --grille-espace: 44px 40px;             /* entre les rangées / entre les colonnes */
  --grille-marges: 50px 70px 160px;       /* haut / côtés / bas */
  --hauteur-case: 500px;

  /* Photo dans la case : centrée dans l'intérieur noir du cadre papier
     (intérieur sûr de la case 450×500 : x 24 → 426, y 33 → 458) */
  --photo-haut: 84px;
  --photo-cote: 58px;
  --photo-hauteur: 262px;

  /* Étiquette en papier déchiré + nom */
  --etiquette-debord: -18px;              /* dépasse du cadre à gauche et à droite */
  --etiquette-bas: 22px;
  --etiquette-hauteur: 138px;             /* = largeur / 3,53 : proportions de l'image, sans déformation */
  --etiquette-texte: 60px;
  --etiquette-rotation: -7.2deg;          /* inclinaison mesurée de la bande */

  /* Toucher une case : léger agrandissement + ombre portée */
  --case-choisie-echelle: 1.05;
  --case-choisie-ombre: 0 34px 46px rgba(0, 0, 0, .85);

  /* Barre du bas */
  --barre-marges: 0 70px 50px;
  --barre-espace: 32px;
  --panier-espace: 22px;
  --panier-hauteur: 120px;
  --panier-cotes: 56px;
  --panier-texte: 50px;
  --compteur-taille: 64px;
}

/* =====================================================================
   ÉCRAN PRODUITS
   ===================================================================== */
.ecran-produits {
  /* Zones */
  --haut-zone: 250px;                     /* début de la zone sous l'en-tête */
  --largeur-barre: 280px;                 /* barre des catégories à gauche */
  --fondu-haut: 40px;
  --fondu-bas: 90px;

  /* En-tête */
  --logo-largeur: 250px;
  --logo-haut: 34px;
  --logo-gauche: 26px;
  --titre-haut: 40px;
  --titre-largeur: 560px;
  --titre-hauteur: 170px;
  --titre-texte: 84px;
  --titre-rotation: -7.5deg;              /* suit l'inclinaison de l'étiquette papier */

  /* Barre des catégories */
  --cat-texte: 40px;
  --cat-hauteur-max: 136px;
  --cat-marges: 6px 0 6px 18px;
  --cat-couleur: rgba(255, 255, 255, .85);      /* catégories inactives */
  --cat-contour: 2px 2px 0 rgba(0, 0, 0, .85), -1px -1px 0 rgba(0, 0, 0, .7), 1px -1px 0 rgba(0, 0, 0, .7), -1px 1px 0 rgba(0, 0, 0, .7);
  --cat-fond: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .6) 85%, rgba(0, 0, 0, 0) 100%);

  /* Bouton "Mon panier" quand le panier est vide */
  --panier-vide-opacite: .7;

  /* Liste et grille de produits */
  --liste-marges: 30px 48px 0 22px;
  --section-bas: 120px;                   /* espace sous la dernière rangée */
  --grille-espace: 30px 28px;
  --grille-petite-espace: 22px 20px;      /* option "petite" : 3 colonnes */
  --carte-ratio: 9 / 10;                  /* largeur / hauteur d'une carte */

  /* Carte produit : positions dans l'intérieur noir du cadre papier
     (intérieur sûr : 5,4 % à gauche et à droite, 6,6 % en haut, 8,4 % en bas) */
  --carte-photo-haut: 15%;
  --carte-photo-cote: 13%;
  --carte-photo-hauteur: 31%;
  --carte-nom-haut: 48%;
  --carte-nom-cote: 13%;
  --carte-prix-gauche: 13%;
  --carte-prix-bas: 16%;
  --carte-plus-droite: 12%;
  --carte-plus-bas: 15.5%;
  --carte-option-haut: 15.5%;
  --carte-option-droite: 13%;
  --nom-texte: 28px;
  --nom-lignes: 3;
  --prix-texte: 44px;
  --plus-taille: 80px;
  --plus-icone: 44px;
  --option-texte: 22px;
  --tampon-texte: 32px;

  /* Fenêtre de choix Normal / XXL */
  --choix-largeur: 860px;
  --choix-marges: 10px 30px 0;            /* marges intérieures, en plus des bords du cadre papier (--cadre-papier-bords) */
  --choix-nom-texte: 70px;
  --choix-taille-titre: 54px;
  --choix-taille-prix: 34px;
  --choix-qte-bouton: 96px;
  --choix-qte-texte: 72px;
  --choix-ajouter-hauteur: 150px;
  --choix-ajouter-texte: 56px;

  /* Suppléments dans la fenêtre de choix */
  --choix-marge-ecran: 70px;              /* espace minimum au-dessus et au-dessous de la fenêtre */
  --choix-photo-supp: 44%;                /* photo réduite quand il y a des suppléments */
  --supp-colonnes: 3;
  --supp-espace: 14px;
  --supp-titre-texte: 46px;
  --supp-regle-texte: 26px;
  --supp-nom-texte: 30px;
  --supp-prix-texte: 24px;
  --supp-hauteur: 96px;

  /* Barre du bas */
  --barre-marges: 0 60px 50px;
  --barre-espace: 30px;
  --panier-espace: 20px;
  --panier-hauteur: 124px;
  --panier-cotes: 50px;
  --panier-texte: 46px;
  --compteur-taille: 60px;
}

/* =====================================================================
   ÉCRAN PANIER (même fond que l'écran Produits)
   ===================================================================== */
.ecran-panier {
  /* Zones */
  --haut-zone: 250px;                     /* début de la liste, sous l'en-tête */
  --pied-hauteur: 360px;                  /* total + boutons en bas */
  --fondu-haut: 30px;
  --fondu-bas: 70px;
  --liste-marges: 24px 60px 60px;
  --liste-espace: 26px;                   /* entre deux lignes */

  /* En-tête (comme l'écran Produits) */
  --logo-largeur: 250px;
  --logo-haut: 34px;
  --logo-gauche: 26px;
  --titre-haut: 40px;
  --titre-largeur: 600px;
  --titre-hauteur: 170px;
  --titre-texte: 84px;
  --titre-rotation: -7.5deg;

  /* Une ligne du panier (cadre papier fin) */
  --ligne-bords: 30px 22px 38px 22px;     /* bords du cadre papier des lignes (plus fins que les fenêtres) */
  --ligne-photo: 160px;
  --ligne-nom-texte: 40px;
  --ligne-taille-texte: 24px;
  --ligne-supp-texte: 25px;
  --ligne-prix-texte: 46px;
  --ligne-detail-texte: 24px;
  --qte-bouton: 76px;
  --qte-texte: 52px;
  --supprimer-taille: 68px;

  /* Pied : total et boutons */
  --pied-marges: 0 60px 50px;
  --recap-texte: 34px;
  --total-texte: 70px;
  --continuer-texte: 44px;
  --commander-hauteur: 132px;
  --commander-cotes: 70px;
  --commander-texte: 56px;

  /* Fenêtre "Confirmer la commande" */
  --conf-largeur: 860px;
  --conf-titre-texte: 72px;
  --conf-detail-texte: 38px;
  --conf-bouton-hauteur: 150px;
  --conf-bouton-texte: 54px;

  /* Écran "Votre numéro de commande" */
  --merci-titre-texte: 130px;
  --merci-texte: 52px;
  --numero-texte: 300px;
  --numero-largeur: 760px;
  --numero-hauteur: 380px;
  --merci-duree: 20s;                     /* retour automatique à l'accueil */
}