/* ===========================================================================
   Parcours public : echelle fluide unique (telephone -> totem 2160x3840).
   ===========================================================================

   LE PROBLEME
   -----------
   Le parcours etait ecrit pour un telephone et UNIQUEMENT pour un telephone :
     - chaque vue posait  .background { height: 845px }  puis un script
       remplacait cette hauteur par screen.height et etirait le fond a
       screen.width x screen.height ;
     - toutes les tailles etaient des clamp(min, Nvw, PLAFOND_EN_PX) dont le
       plafond etait calibre sur un ecran de telephone (22px, 36px, 96px,
       310px, 360px...).
   Sur un ecran de 2160 x 3840, tous ces plafonds sont atteints : on obtenait
   une carte de 310 px perdue au milieu de 2160 px de dore. Et screen.width
   n'est pas la largeur de la FENETRE : hors plein ecran, le fond etait etire
   au-dela du viewport.

   LE PRINCIPE
   -----------
   Deux variables, et tout le parcours s'exprime en proportion de l'une ou de
   l'autre. Plus un seul plafond en pixels.

     --col  largeur de la COLONNE du parcours (geometrie : fonds, logo, cartes
            du memory, carte du lot). Sur un ecran portrait elle vaut toute la
            largeur ; ailleurs elle est bornee par la hauteur pour garder le
            ratio des fonds plutot que de s'etaler. Voir la section 1.

     --vp   echelle TYPOGRAPHIQUE (textes, libelles, boutons, paddings).
            C'est --col, mais plafonnee : sur un totem on se tient a ~1 m, pas
            a 30 cm, et un texte proportionnel a une colonne de 1776 px serait
            absurdement gros.

   SUR TELEPHONE, LES TAILLES NE CHANGENT PAS : --col y vaut 100vw et --vp
   vaut --col, donc chaque calc() redonne la valeur que le clamp() de la vue
   produisait deja (verifie sur iPhone SE, iPhone 12 et Pixel 7 : moins d'1 px
   d'ecart). Seul le CADRAGE du fond change, et seulement sur les telephones
   courts : il est desormais agrandi-rogne au lieu d'etre etire, donc plus
   jamais deforme.

   LE SEUL REGLAGE A TOUCHER SUR LE MATERIEL REEL : --vp-max.
   -------------------------------------------------------------------------
   L'ecran cible fait 1209,6 x 680,4 mm pour 2160 x 3840 px, soit 3,17 px/mm
   (~81 ppp, pas de pixel ratio) : 1 px CSS = 0,315 mm. La bonne taille de
   texte depend de la distance de lecture dans le lieu d'installation, qu'on
   ne peut pas deviner ici. --vp-max: 900px donne des titres d'environ 70 px,
   soit ~22 mm, confortables a 1 m. Trop petit sur place ? Monter --vp-max.
   Trop gros ? Le baisser. Un seul chiffre, tout suit.

   A NOTER : --vp-max ne plafonne QUE le texte. Les elements graphiques (logo,
   cartes du memory, carte du lot) suivent --col et occupent donc tout l'ecran
   du totem - c'est voulu, c'est l'interet d'une dalle de cette taille.

   CE FICHIER DOIT ETRE CHARGE APRES $this->fetch('css') dans le layout
   public : les regles des vues ont la meme specificite, c'est donc l'ordre
   qui tranche.
   ========================================================================= */

:root{
	/* Ratio des fonds du parcours : 1285 / 2778. Tous les .jpg de
	   /img/public font cette taille. */
	--art-ratio: 0.4625;

	/* Plafond de l'echelle typographique. LE reglage, voir l'en-tete. */
	--vp-max: 900px;

	/* Colonne de CONTENU (logo, carte d'entree, plateau du memory, carte du
	   lot). Elle ne commande plus le fond : celui-ci remplit desormais tout
	   l'ecran a toutes les tailles (voir .background en section 1).

	   Le facteur 0.75 borne la colonne par la HAUTEUR, pour qu'elle ne devienne
	   jamais absurdement large par rapport a elle-meme : sans cela, sur un
	   bureau 1920x1080, le lock-up CAMEL ferait 1190 px de large.
	     iPhone SE   375 x 667  : min(375,  500) = 375  => plein ecran
	     iPhone 12   390 x 844  : min(390,  633) = 390  => plein ecran
	     iPad Mini   768 x 1024 : min(768,  768) = 768  => plein ecran, pile
	     TOTEM      2160 x 3840 : min(2160, 2880) = 2160 => plein ecran
	     bureau     1920 x 1080 : min(1920,  810) = 810  => colonne centree,
	                              mais sur un fond qui occupe tout l'ecran.
	   Telephones et tablettes portrait tombent donc sur 100vw : la colonne ET
	   le fond remplissent, il n'y a plus de bandes dorees nulle part.

	   On reste en vh (et pas svh/dvh) : svh rabattrait la colonne sur
	   telephone et changerait un rendu qui, lui, va bien. */
	--col: min(100vw, calc(100vh * 0.75));

	/* Echelle typographique. */
	--vp: min(var(--col), var(--vp-max));
}

/* ---------------------------------------------------------------------------
   1. La colonne
   ------------------------------------------------------------------------- */

/* DEUX COUCHES INDEPENDANTES - c'est tout le principe de cette section.
   -------------------------------------------------------------------------
   Il y avait un seuil (max-aspect-ratio: 5/8) qui decidait si le parcours
   remplissait l'ecran ou s'affichait en colonne centree. Resultat : un iPad
   Mini (768 x 1024, ratio 0,75) tombait du mauvais cote et montrait deux
   bandes dorees vides, exactement ce qu'on venait de corriger sur le totem.
   Un seuil se contente de deplacer le probleme d'une taille d'ecran a une
   autre.

   Le fond et le contenu sont donc desormais DEUX COUCHES separees :

     LE FOND remplit TOUJOURS tout l'ecran, a toutes les tailles, en "cover" :
     agrandi proportionnellement jusqu'a couvrir, et c'est le debord qui est
     rogne - jamais l'image qui est etiree. Plus aucune bande, nulle part.

     LE CONTENU (logo, carte, plateau) vit dans une colonne --col centree,
     bornee par la hauteur. Elle vaut 100vw sur telephone, tablette portrait
     et totem - donc le contenu remplit aussi - et se borne seulement sur les
     ecrans larges, ou une colonne de 1920 px donnerait un logo d'un metre.

   Sur le totem les deux couches coincident, puisque sa colonne vaut deja
   100vw : le rendu valide precedemment ne bouge pas.

   Le prix a payer est le rognage vertical, d'autant plus fort que l'ecran est
   large par rapport au ratio 0,4625 des images : ~0 % sur telephone, 18 % sur
   le totem, 38 % sur un iPad portrait. Il est pris EN BAS
   (background-position: center top), la ou le bandeau sanitaire couvre deja
   l'image, et jamais en haut ou se trouvent logos et titres.

   LA VRAIE CORRECTION reste de reexporter /img/public/*.jpg dans un format
   plus haut (2160 x 3840 pour le totem) : le rognage diminue d'autant. Ces
   regles restent correctes avant comme apres. */

/* .page est en flex-row : il centre la colonne de contenu horizontalement. */
.page{
	justify-content: center;
}

/* Le wrapper occupe toute la largeur : c'est lui qui porte le fond plein
   ecran. La colonne de contenu est bornee plus bas, element par element
   (.login, .brand, .game, .glass-box... s'appuient tous sur --col ou --vp),
   et non par une largeur maximale posee ici - sinon le fond serait borne avec
   elle et les bandes reviendraient. */
#kt_wrapper{
	width: 100%;
	max-width: none;
	flex: 1 1 auto;
}

/* Le fond de chaque ecran : plein ecran, a toutes les tailles.

   height: 100vh remplace le height: 845px des vues ET le screen.height que
   les scripts posaient : la hauteur suit la FENETRE et non l'ecran physique,
   et les enfants en position:absolute/height:100% gardent une hauteur
   definie a laquelle se referer. */
.background{
	width: 100%;
	height: 100vh;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Le contenu de chaque ecran se centre dans la colonne --col, quelle que
   soit la largeur du fond derriere lui. .gate et .scene centrent deja leurs
   enfants ; cette regle borne les mises en page en tableau des vues qui n'ont
   ni l'un ni l'autre (gift, code, recharge, output, step1, animateur). */
.background > table{
	max-width: var(--col);
	margin-left: auto !important;
	margin-right: auto !important;
}

/* .gate (ecran d'entree) est dans le flux : de simples marges automatiques
   suffisent a le centrer dans la colonne. */
.gate{
	max-width: var(--col);
	margin-left: auto;
	margin-right: auto;
}

/* .scene (step2, step3, loss) est en position:absolute avec left:0 : des
   marges automatiques n'ont aucun effet sur un element positionne. On le
   recentre donc sur son point milieu.
   Verifie avant d'ecrire ceci : aucune animation de ces trois vues ne porte
   sur .scene elle-meme (elles visent .emblem, .logo, .headline .line, .halo),
   ce translateX ne peut donc en ecraser aucune. */
.scene{
	max-width: var(--col);
	left: 50%;
	transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
   2. Elements fixes
   ------------------------------------------------------------------------- */

/* position:fixed se repere sur le VIEWPORT, pas sur la colonne : sur grand
   ecran ces boutons s'etalaient donc sur toute la largeur, hors de la
   colonne. On les recentre et on les borne a la colonne.
   Le selecteur vise les styles en ligne des vues (gift, step1, recharge...) ;
   d'ou les !important, qui sont la seule facon d'outranker un attribut style.
   La propriete "bottom" reste geree par Elements/public-health-warning.ctp,
   qui remonte ces boutons au-dessus du bandeau sanitaire. */
.btn[style*="position: fixed"]{
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	width: calc(var(--col) * 0.9) !important;
	max-width: calc(var(--col) * 0.9) !important;
}

/* Voile du verrou d'onglet (step3.ctp le construit en JS via style.cssText,
   donc en style en ligne : !important obligatoire). */
#tabLockVeil > div{
	font-size: calc(var(--vp) * 0.067) !important;
	max-width: calc(var(--vp) * 1.077) !important;
}

/* ---------------------------------------------------------------------------
   3. Ecran d'entree (Public/index.ctp)
   ------------------------------------------------------------------------- */

.brand{
	/* clamp(210px, 62vw, 310px) : le lock-up CAMEL est une image de marque,
	   il suit donc la colonne (--col) et non l'echelle de texte. */
	width: calc(var(--col) * 0.62);
}

.warn-1{
	font-size: calc(var(--vp) * 0.052);
}

.notice{
	font-size: calc(var(--vp) * 0.048);
	max-width: calc(var(--vp) * 1.077);
	margin-top: calc(var(--vp) * 0.051);
	padding-top: calc(var(--vp) * 0.036);
}

.login{
	padding: calc(var(--vp) * 0.067) calc(var(--vp) * 0.051);
	border-radius: calc(var(--vp) * 0.056);
	/* La carte est en width:95% dans la vue : sur le totem plein ecran, cela
	   lui faisait 2050 px (65 cm !) de large pour y poser un champ de date et
	   un texte de 47 px. C'est un FORMULAIRE, pas un visuel : il se cale sur
	   l'echelle de lecture (--vp) et non sur la largeur de l'ecran. Sur
	   telephone, 1.4 * 390 = 546 px, soit bien plus que les 95 % reels : la
	   borne est donc sans effet la-bas. */
	max-width: calc(var(--vp) * 1.4);
	margin-left: auto;
	margin-right: auto;
}

.select,
.input > label,
.checkbox > label{
	font-size: calc(var(--vp) * 0.0385);
}

input[type="text"],
input[type="number"]{
	font-size: calc(var(--vp) * 0.051);
}

.date-picker,
#DateNaissance{
	font-size: calc(var(--vp) * 0.046);
	border-radius: calc(var(--vp) * 0.031) !important;
	padding: calc(var(--vp) * 0.026) calc(var(--vp) * 0.031) !important;
}

.saveBtn{
	font-size: calc(var(--vp) * 0.044) !important;
	border-radius: calc(var(--vp) * 0.031) !important;
	padding: calc(var(--vp) * 0.031) calc(var(--vp) * 0.041) !important;
}

/* Selecteur de date maison (annee -> mois -> jour). */
.ygp-panel{
	max-width: calc(var(--vp) * 0.872);
	border-radius: calc(var(--vp) * 0.051);
}
.ygp-header{
	padding: calc(var(--vp) * 0.036) calc(var(--vp) * 0.046);
}
.ygp-range{
	font-size: calc(var(--vp) * 0.046);
}
.ygp-nav{
	font-size: calc(var(--vp) * 0.056);
	padding: calc(var(--vp) * 0.010) calc(var(--vp) * 0.026);
}
.ygp-grid,
.ygp-days{
	gap: calc(var(--vp) * 0.015);
	padding: calc(var(--vp) * 0.036);
}
.ygp-weekdays{
	gap: calc(var(--vp) * 0.015);
	padding: calc(var(--vp) * 0.026) calc(var(--vp) * 0.036) 0;
	font-size: calc(var(--vp) * 0.031);
}
.ygp-year,
.ygp-month{
	font-size: calc(var(--vp) * 0.0385);
	padding: calc(var(--vp) * 0.031) calc(var(--vp) * 0.010);
}
.ygp-day{
	font-size: calc(var(--vp) * 0.036);
	padding: calc(var(--vp) * 0.023) 0;
}
.ygp-year-label:after{
	font-size: calc(var(--vp) * 0.031);
}

/* ---------------------------------------------------------------------------
   4. Choix de la marque (Public/step1.ctp)
   ------------------------------------------------------------------------- */

/* Les deux boutons radio sont poses SUR l'illustration du fond : ils doivent
   grandir avec la colonne, sinon la zone touchable se decroche du visuel. */
input[type="radio"]{
	width: calc(var(--col) * 0.064);
	height: calc(var(--col) * 0.064);
}

/* ---------------------------------------------------------------------------
   5. Accroche (Public/step2.ctp)
   ------------------------------------------------------------------------- */

.emblem{
	/* clamp(210px, 65vw, 340px) */
	width: calc(var(--col) * 0.65);
	height: calc(var(--col) * 0.65);
}
.ring-1{ border-width: calc(var(--col) * 0.0051); }
.ring-2{ border-width: calc(var(--col) * 0.0077); }
.ring-3{ border-width: calc(var(--col) * 0.0051); }

.headline .line-1{
	/* clamp(42px, 17vw, 96px) */
	font-size: calc(var(--vp) * 0.17);
}
.headline .line-2{
	/* clamp(34px, 14vw, 78px) */
	font-size: calc(var(--vp) * 0.14);
}

/* Etincelles de step2 et de loss : des reflets poses sur le visuel, donc
   indexes sur la colonne. */
.glint{
	width: calc(var(--col) * 0.036);
	height: calc(var(--col) * 0.036);
}
.glint-2{
	width: calc(var(--col) * 0.026);
	height: calc(var(--col) * 0.026);
}
.glint-3{
	width: calc(var(--col) * 0.046);
	height: calc(var(--col) * 0.046);
}

/* ---------------------------------------------------------------------------
   6. Memory (Public/step3.ctp)
   ------------------------------------------------------------------------- */

.hud{
	max-width: calc(var(--vp) * 0.923);
	margin-bottom: calc(var(--vp) * 0.046);
}
.title{
	/* clamp(20px, 7vw, 30px) sur step3. code.ctp et gift/finish redefinissent
	   .title pour leur propre usage : ils sont traites plus bas, avec une
	   specificite superieure, et ne sont donc pas touches par cette ligne. */
	font-size: calc(var(--vp) * 0.07);
}
#incomeTicker{
	font-size: calc(var(--vp) * 0.041);
	padding: calc(var(--vp) * 0.013) calc(var(--vp) * 0.051);
	margin-top: calc(var(--vp) * 0.026);
}

/* Le plateau est la zone de JEU : des cartes a toucher. Il suit la colonne,
   pas l'echelle de texte - sur le totem les cartes font alors ~170 mm de
   cote, ce qui est l'interet d'un ecran de cette taille. */
.game{
	max-width: calc(var(--col) * 0.923);
}
.grid{
	gap: calc(var(--col) * 0.026);
}
.face{
	border-radius: calc(var(--col) * 0.036);
}

.message{
	max-width: calc(var(--vp) * 0.82);
	padding: calc(var(--vp) * 0.077) calc(var(--vp) * 0.067);
	border-radius: calc(var(--vp) * 0.072);
}
.message h2{
	/* clamp(24px, 8vw, 32px) */
	font-size: calc(var(--vp) * 0.08);
	margin-bottom: calc(var(--vp) * 0.046);
}
.overlay .btn,
.message .btn{
	font-size: calc(var(--vp) * 0.044);
	padding: calc(var(--vp) * 0.028) calc(var(--vp) * 0.077);
}

/* ---------------------------------------------------------------------------
   7. Lot gagne (Public/gift.ctp, Public/finish.ctp)
   ------------------------------------------------------------------------- */

.glass-box{
	max-width: calc(var(--col) * 0.82);
	min-height: calc(var(--col) * 0.615);
	padding: calc(var(--col) * 0.062) calc(var(--col) * 0.041);
	border-radius: calc(var(--col) * 0.087);
}
.glass-box img{
	/* height: 150px - c'est la photo du lot, elle suit la colonne. */
	height: calc(var(--col) * 0.385);
}
.glass-box picture{
	perspective: calc(var(--col) * 2.31);
}
/* Rayons derriere le lot (Elements/prize-card-animation.ctp) : 320px, centres
   par une marge negative de la moitie. Les deux doivent rester lies. */
.glass-box:after{
	width: calc(var(--col) * 0.82);
	height: calc(var(--col) * 0.82);
	margin: calc(var(--col) * -0.41) 0 0 calc(var(--col) * -0.41);
}
.glass-box .glint{
	width: calc(var(--col) * 0.031);
	height: calc(var(--col) * 0.031);
}
.glass-box .glint-2{
	width: calc(var(--col) * 0.023);
	height: calc(var(--col) * 0.023);
}
.glass-box .glint-3{
	width: calc(var(--col) * 0.036);
	height: calc(var(--col) * 0.036);
}

.congrats{
	max-width: calc(var(--vp) * 0.82);
	margin-top: calc(var(--vp) * 0.067);
}
.congrats .congrats-main,
.congrats .congrats-sub{
	/* clamp(26px, 8.5vw, 36px) */
	font-size: calc(var(--vp) * 0.085);
}
.congrats .congrats-sub{
	margin-top: calc(var(--vp) * 0.015);
}
.congrats.congrats-loss .congrats-main,
.congrats.congrats-loss .congrats-sub{
	/* clamp(34px, 12vw, 62px) */
	font-size: calc(var(--vp) * 0.12);
}

/* Pastille du code promo. Specificite volontairement plus forte que le
   ".title" de step3 traite plus haut : les deux ecrans nomment "title" deux
   choses differentes. */
.glass-box .title,
#codeBox{
	font-size: calc(var(--vp) * 0.041);
	padding: calc(var(--vp) * 0.015);
	border-radius: calc(var(--vp) * 0.051);
}

/* Ecran de remerciement de finish.ctp. */
#thankyou .lines{
	max-width: calc(var(--vp) * 0.923);
}
#thankyou .halo{
	/* clamp(260px, 78vw, 420px) */
	width: calc(var(--col) * 0.78);
	height: calc(var(--col) * 0.78);
}
#thankyou .congrats-main,
#thankyou .congrats-sub{
	/* clamp(30px, 10vw, 44px) */
	font-size: calc(var(--vp) * 0.10);
}
#nextBtn{
	margin-top: calc(var(--vp) * 0.046);
}

/* ---------------------------------------------------------------------------
   8. Lot perdu (Public/loss.ctp)
   ------------------------------------------------------------------------- */

.halo{
	width: calc(var(--col) * 0.78);
	height: calc(var(--col) * 0.78);
}
.headline{
	max-width: calc(var(--vp) * 0.923);
}
/* loss.ctp : clamp(30px, 10vw, 44px) pour les deux lignes. step2.ctp a un
   .headline identique mais des tailles differentes (0.17 / 0.14, section 5) ;
   et ".scene .headline" ne les distingue pas, les deux ecrans ayant un .scene.
   D'ou la classe .headline-loss ajoutee dans la vue : c'est explicite, et ca
   evite de faire dependre deux ecrans d'un ordre de declaration. */
.headline-loss .line-1,
.headline-loss .line-2{
	font-size: calc(var(--vp) * 0.10);
}
.rule{
	height: calc(var(--col) * 0.0051);
	margin-top: calc(var(--vp) * 0.046);
}

/* ---------------------------------------------------------------------------
   9. Code d'acces, recharge, lien partenaire
   ------------------------------------------------------------------------- */

/* Trois ecrans appellent "title" trois choses differentes (le titre du jeu sur
   step3, la pastille du code sur gift/finish, le code d'acces ici). Plutot que
   d'empiler des selecteurs pour les separer, les vues portent desormais une
   classe explicite. */
/* code.ctp : le code d'acces est l'unique contenu de l'ecran. */
.access-code{
	font-size: calc(var(--vp) * 0.064);
	padding: calc(var(--vp) * 0.015);
	margin-top: calc(var(--vp) * 0.015);
}
/* recharge.ctp */
.recharge-code,
.title2{
	font-size: calc(var(--vp) * 0.041);
}
.recharge-code{
	padding: calc(var(--vp) * 0.015);
	border-radius: calc(var(--vp) * 0.026);
}
/* output.ctp : zone cliquable posee sur le visuel du partenaire. */
.gift{
	height: auto;
}
#link{
	height: calc(var(--col) * 0.513);
}

/* ---------------------------------------------------------------------------
   10. Ecrans de service de l'animateur (Animateur/index.ctp, info.ctp)
   ------------------------------------------------------------------------- */

/* Ces deux ecrans utilisent le layout public et donc cette feuille, mais ils
   nomment "title" / "title2" autre chose que le parcours joueur. La classe
   .animateur sur leur .background les isole : .animateur .title (0,2,0) passe
   devant le .title generique de la section 6 (0,1,0). */
.animateur .title{
	font-size: calc(var(--vp) * 0.046);
}
.animateur .title2{
	font-size: calc(var(--vp) * 0.031);
	padding: calc(var(--vp) * 0.015);
	border-radius: calc(var(--vp) * 0.051);
}
.animateur .info-head{
	font-size: calc(var(--vp) * 0.051);
}
.animateur .info-body{
	font-size: calc(var(--vp) * 0.0385);
}
/* Vignette du lot : etait un width:150px en style en ligne, remplace par
   cette classe (un style en ligne ne se laisse pas reecrire sans
   !important, autant le retirer du balisage). */
.animateur .prize-thumb{
	width: calc(var(--col) * 0.385);
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   11. Paysage etroit
   ------------------------------------------------------------------------- */

/* Le parcours est portrait par construction (fonds 1285 x 2778). En paysage,
   --col se rabat sur la hauteur et la colonne devient tres etroite : au moins
   on autorise le defilement vertical plutot que de rogner le contenu. */
@media (orientation: landscape) and (max-height: 520px){
	.background{
		height: auto;
		min-height: 100vh;
	}
	.scene{
		position: relative;
		height: auto;
		min-height: 100vh;
	}
}