/* KEA LIVE, lot D30 : feuille unique du lecteur, de la fenetre d'achat et de la page de resultat, copiee de la maquette normative
   docs/maquettes/d30/kea-live-d30.css (contrat docs/contrat-design-lecteur-kea-live-d30-r3.md, section 2), avec les reserves de la
   revue R3 : le mot-cle transparent est un jeton (--kea-transparent) ; le chevron du menu suit --kea-texte-doux (masque).
   Direction : standard du streaming payant (choix de Terema, 2026-11-08). Toutes les valeurs de design sont des jetons ci-dessous :
   une correction future change un jeton, jamais une regle. Base telephone ; la largeur du lecteur (cadre ou page), pas celle de
   l'ecran, declenche les variantes (@container). Aucun style en ligne, aucune ressource tierce (politique de contenu). */

/* 1. Jetons : declares sur :root pour que le corps de page les lise aussi ; la glu remplace --kea-action sur .kea-player (D35). */
:root {
  /* Couleurs (contrastes mesures, WCAG AA) */
  --kea-fond: #140A10;            /* fond, nuit prune */
  --kea-panneau: #2A1621;         /* champs, menus, panneaux */
  --kea-trait: #8C6378;           /* bordures des controles : 3,38:1 sur panneau */
  --kea-texte: #FFFFFF;
  --kea-texte-doux: #F4CFE0;      /* 13,7:1 sur fond */
  --kea-texte-discret: #C9A3B6;   /* 7,6:1 sur panneau */
  --kea-action: #D60F6B;          /* remplacee par data-action (D35) si la marque est lisible */
  --kea-sur-action: #FFFFFF;      /* 5,07:1 sur l'action par defaut */
  --kea-succes: #2EC4A6;          /* seulement « Paiement recu » */
  --kea-erreur: #FF8FA3;          /* 9:1 sur fond */
  --kea-focus: #F4CFE0;
  --kea-video: #000000;           /* fond derriere la video */
  --kea-masque: #000000;          /* reference d'opacite des fondus de l'affiche (masque, pas une couleur affichee) */
  --kea-transparent: transparent; /* fin des fondus, fond du bouton secondaire (reserve R3) */

  /* Espacement : grille de 4 px */
  --kea-e1: 4px; --kea-e2: 8px; --kea-e3: 12px; --kea-e4: 16px; --kea-e5: 24px; --kea-e6: 32px; --kea-e7: 40px; --kea-e8: 48px;

  /* Typographie : une seule famille, la police systeme */
  --kea-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kea-t-titre: clamp(1.75rem, 7vw, 2.75rem);      /* repli sans requetes de conteneur ; voir @supports plus bas */
  --kea-t-passcode: clamp(2rem, 11vw, 3.25rem);
  --kea-t-titre-compact: clamp(1.25rem, 4.2vw, 1.75rem);
  --kea-t-texte: 1rem;
  --kea-t-petit: .875rem;
  --kea-t-mention: .8125rem;

  /* Formes */
  --kea-rayon: 10px;
  --kea-cible: 48px;               /* hauteur des boutons et des champs (au moins 44 px) */
  --kea-colonne: 34rem;            /* largeur maximale du contenu */
  --kea-fondu: 220ms;
  --kea-courbe: cubic-bezier(.16, 1, .3, 1);
  --kea-survol: 88%;              /* part de l'action dans le survol, le reste vers le fond : 6,09:1 avec le blanc */
}
@supports (container-type: inline-size) {
  :root { --kea-t-titre: clamp(1.75rem, 7cqi, 2.75rem); --kea-t-passcode: clamp(2rem, 11cqi, 3.25rem); --kea-t-titre-compact: clamp(1.25rem, 4.2cqi, 1.75rem); }
}

/* 2. Base */
.kea-corps { margin: 0; background: var(--kea-fond); color: var(--kea-texte); -webkit-text-size-adjust: 100%; }
.kea-player {
  container-type: inline-size;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--kea-fond); color: var(--kea-texte);
  font: 400 var(--kea-t-texte)/1.5 var(--kea-police);
  caret-color: var(--kea-action);
  accent-color: var(--kea-action);
  scrollbar-color: var(--kea-trait) var(--kea-fond);
}
.kea-player ::selection { background: var(--kea-action); color: var(--kea-sur-action); }
.kea-player :focus-visible { outline: 2px solid var(--kea-focus); outline-offset: 2px; }
.kea-player p, .kea-player h1, .kea-player h2 { margin: 0; }

/* 3. Scene : l'affiche en haut, fondue dans le fond ; la video la remplace en lecture */
.kea-scene { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
.kea-affiche {
  position: absolute; inset: 0 0 auto 0; width: 100%; height: 62%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, var(--kea-masque) 55%, var(--kea-transparent));
  mask-image: linear-gradient(to bottom, var(--kea-masque) 55%, var(--kea-transparent));
}
.kea-video { position: absolute; inset: 0; display: none; background: var(--kea-video); }
.kea-iframe { border: 0; width: 100%; height: 100%; display: block; }

/* 4. Superposition : la colonne d'action, centree */
.kea-superposition {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--kea-colonne); margin: 0 auto; box-sizing: border-box;
  padding: var(--kea-e6) var(--kea-e4) var(--kea-e5);
  display: flex; flex-direction: column; gap: var(--kea-e4);
  text-align: center;
}
.kea-entete { display: flex; flex-direction: column; align-items: center; gap: var(--kea-e1); }
.kea-organisateur { font-size: var(--kea-t-petit); color: var(--kea-texte-doux); }
.kea-logo { height: 28px; width: auto; }
.kea-titre { font-size: var(--kea-t-titre); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.kea-prix { font-size: var(--kea-t-texte); color: var(--kea-texte-doux); font-variant-numeric: tabular-nums; }
.kea-mur { display: flex; flex-direction: column; gap: var(--kea-e3); }

/* 5. Controles */
.kea-bouton {
  min-height: var(--kea-cible); width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: var(--kea-e3);
  padding: 0 var(--kea-e5); border-radius: var(--kea-rayon);
  font: 700 var(--kea-t-texte)/1.2 var(--kea-police); text-decoration: none; cursor: pointer;
  transition: transform var(--kea-fondu) var(--kea-courbe), background-color var(--kea-fondu) var(--kea-courbe);
}
.kea-bouton:active { transform: scale(.98); }
.kea-bouton:disabled, .kea-bouton[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; }
.kea-principal { background: var(--kea-action); color: var(--kea-sur-action); border: 0; }
.kea-principal:hover { background: color-mix(in srgb, var(--kea-action) var(--kea-survol), var(--kea-fond)); }
.kea-secondaire { background: var(--kea-transparent); color: var(--kea-texte-doux); border: 1px solid var(--kea-trait); }
.kea-secondaire:hover { border-color: var(--kea-texte-doux); }
.kea-lien { background: none; border: 0; padding: var(--kea-e2) 0; color: var(--kea-texte-doux); font: 600 var(--kea-t-petit)/1.4 var(--kea-police); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kea-montant { font-variant-numeric: tabular-nums; font-weight: 700; }

.kea-champ, .kea-choix {
  min-height: var(--kea-cible); width: 100%; box-sizing: border-box;
  padding: 0 var(--kea-e4); border-radius: var(--kea-rayon);
  border: 1px solid var(--kea-trait); background: var(--kea-panneau); color: var(--kea-texte);
  font: 500 var(--kea-t-texte)/1.2 var(--kea-police);
}
.kea-champ::placeholder { color: var(--kea-texte-discret); opacity: 1; }
.kea-champ:focus, .kea-choix:focus { border-color: var(--kea-texte-doux); }
.kea-choix {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: var(--kea-e8);
}
/* Chevron du menu : l'image sert de masque, la couleur est --kea-texte-doux (reserve R3) */
.kea-menu { position: relative; }
.kea-menu::after {
  content: ""; position: absolute; top: 50%; right: var(--kea-e4); width: 16px; height: 16px; margin-top: -8px; pointer-events: none;
  background: var(--kea-texte-doux);
  -webkit-mask: url("/assets/chevron.svg") center / contain no-repeat;
  mask: url("/assets/chevron.svg") center / contain no-repeat;
}
.kea-passcode-champ { text-transform: uppercase; letter-spacing: .14em; text-align: center; }
.kea-passcode-champ::placeholder { text-transform: none; letter-spacing: 0; }
.kea-detail { font-size: var(--kea-t-petit); color: var(--kea-texte-discret); }
/* Libelle lu par les lecteurs d'ecran, invisible a l'ecran */
.kea-masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Ligne de saisie du passcode : champ + « Entrer » */
.kea-ligne { display: flex; gap: var(--kea-e2); }
.kea-ligne .kea-champ { flex: 1; min-width: 0; }
.kea-ligne .kea-bouton { width: auto; flex: none; }
.kea-separation { border: 0; border-top: 1px solid var(--kea-panneau); margin: var(--kea-e2) 0 0; }

/* 6. Messages */
.kea-message { font-size: var(--kea-t-texte); color: var(--kea-texte-doux); }
.kea-attente { font-size: var(--kea-t-texte); color: var(--kea-texte-doux); }
.kea-refus { font-size: var(--kea-t-texte); color: var(--kea-erreur); }
.kea-succes { display: inline-flex; align-items: center; justify-content: center; gap: var(--kea-e2); color: var(--kea-succes); font-weight: 700; }
.kea-icone { width: 20px; height: 20px; flex: none; }
.kea-mention { display: inline-flex; align-items: center; justify-content: center; gap: var(--kea-e2); font-size: var(--kea-t-mention); color: var(--kea-texte-discret); }

/* 7. Etats du lecteur (attribut data-etat pose par la glu) */
.kea-superposition[data-etat="S5"] { display: none; }
.kea-player[data-lecture] .kea-video { display: block; }
.kea-player[data-lecture] .kea-affiche { display: none; }

/* 8. Fenetre d'achat et page de resultat */
.kea-fenetre .kea-scene { justify-content: flex-start; }
.kea-fenetre .kea-affiche { height: 34%; }
.kea-fenetre .kea-superposition { padding-top: var(--kea-e4); text-align: left; }
.kea-fenetre .kea-entete { align-items: flex-start; margin-top: 18vh; margin-top: 18dvh; }
.kea-retour-lecteur { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--kea-e1); color: var(--kea-texte-doux); font: 600 var(--kea-t-petit)/1.4 var(--kea-police); text-decoration: none; padding: var(--kea-e2) var(--kea-e2) var(--kea-e2) 0; }
.kea-resultat .kea-superposition { justify-content: center; min-height: 100vh; min-height: 100dvh; text-align: center; }
.kea-code { font-size: var(--kea-t-passcode); font-weight: 800; letter-spacing: .1em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all; }

/* 9. Largeurs : tablette et bureau (largeur du lecteur) */
@container (min-width: 600px) {
  .kea-superposition { padding: var(--kea-e8) var(--kea-e5) var(--kea-e6); gap: var(--kea-e5); }
  .kea-affiche { height: 70%; }
}
@container (min-width: 960px) {
  .kea-scene { justify-content: center; }
  .kea-affiche { height: 100%; -webkit-mask-image: linear-gradient(to right, var(--kea-masque) 35%, var(--kea-transparent) 85%); mask-image: linear-gradient(to right, var(--kea-masque) 35%, var(--kea-transparent) 85%); width: 70%; }
  .kea-superposition { margin: 0 6% 0 auto; text-align: left; }
  .kea-entete { align-items: flex-start; }
  .kea-fenetre .kea-affiche { width: 100%; height: 40%; -webkit-mask-image: linear-gradient(to bottom, var(--kea-masque) 40%, var(--kea-transparent)); mask-image: linear-gradient(to bottom, var(--kea-masque) 40%, var(--kea-transparent)); }
  .kea-fenetre .kea-superposition, .kea-resultat .kea-superposition { margin: 0 auto; }
}

/* 10. Cadre bas (lecteur integre en 16:9 sur la page de l'organisateur) : tout tient dans la hauteur du cadre */
@media (max-height: 520px) {
  .kea-player { --kea-t-titre: var(--kea-t-titre-compact); --kea-cible: 44px; }
  .kea-scene { justify-content: center; }
  .kea-affiche { height: 100%; opacity: .4; -webkit-mask-image: none; mask-image: none; }
  .kea-superposition { padding: var(--kea-e3) var(--kea-e4); gap: var(--kea-e2); }
  .kea-mur { gap: var(--kea-e2); }
  .kea-detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kea-separation { display: none; }
}
@media (max-height: 260px) {
  /* Cadre de telephone en 16:9 : l'action d'abord ; le reste defile dans le cadre */
  .kea-organisateur, .kea-detail { display: none; }
}

/* 11. Mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  .kea-bouton { transition: none; }
  .kea-bouton:active { transform: none; }
}