/* ================================================================== * Loading pages « v2 » — modeles 4 (Ludigital v2) et 5 (Marque blanche v2) * * Feuille autonome. Ces deux modeles ne chargent ni landing-styles.css * (bundle Bootstrap 4 de 10 000 lignes), ni games.css, ni jQuery : ils * s'appuient sur Bootstrap 5 pour la grille et la fenetre modale, et sur * ce fichier pour tout le reste. * * Les couleurs et les polices viennent du back-office, par variables * posees en ligne dans le de LandingModernView. * ================================================================== */ :root{ --lm-titre: #ffffff; --lm-texte: #e9e6e1; --lm-bouton: #ffffff; --lm-bouton-txt: #14161a; --lm-fond: #101215; --lm-voile: rgba(10, 12, 15, .42); --lm-rayon: 16px; --lm-font-titre: 'Varela Round', system-ui, sans-serif; --lm-font-texte: 'Nunito', system-ui, sans-serif; } /* ------------------------------------------------------------------ * Ossature : la page tient dans la fenetre, quoi qu'il arrive. * ---------------------------------------------------------------- */ body.lm{ display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; /* barres d'adresse mobiles comprises */ min-height: 100dvh; /* et leur repli, quand elles s'escamotent */ margin: 0; background-color: var(--lm-fond); background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--lm-texte); font-family: var(--lm-font-texte); -webkit-font-smoothing: antialiased; } /* Voile sombre entre l'image de fond et le texte : sans lui, un fond clair rend le titre blanc illisible. */ body.lm::before{ content: ""; position: fixed; inset: 0; background: var(--lm-voile); pointer-events: none; z-index: 0; } /* Seuls les blocs de contenu passent au-dessus du voile. Vise larges, la regle attrapait aussi .modal et .modal-backdrop, que Bootstrap pose en position:fixed : la fenetre du reglement se retrouvait dans le flux, pleine largeur et sans fond. */ body.lm > .lm-main, body.lm > .lm-pied{ position: relative; z-index: 1; } /* Le pied garde sa hauteur ; c'est la scene qui cede la place. */ body.lm > .lm-pied{ flex: 0 0 auto; } /* Colonne, et non rangee : la barre de partage est emise a la suite de la scene, elle se posait donc a sa droite, collee au bord de l'ecran. */ .lm-main{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0; } /* La scene absorbe la hauteur disponible, le partage garde la sienne. */ .lm-main > .lg-share{ flex: 0 0 auto; margin: 0 0 14px; } .lm-scene{ display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 0; padding: 28px 20px 12px; text-align: center; } /* ------------------------------------------------------------------ * Contenu * ---------------------------------------------------------------- */ .lm-logo{ max-width: min(240px, 55vw); max-height: 22vh; height: auto; object-fit: contain; } .lm-titre{ margin: 0; font-family: var(--lm-font-titre); font-size: clamp(1.9rem, 5.2vw, 3.6rem); font-weight: 700; line-height: 1.1; letter-spacing: .01em; color: var(--lm-titre); text-shadow: 0 2px 18px rgba(0, 0, 0, .45); } .lm-sous-titre{ margin: 0; max-width: 46ch; font-size: clamp(1rem, 2.1vw, 1.25rem); line-height: 1.5; color: var(--lm-texte); text-shadow: 0 1px 12px rgba(0, 0, 0, .4); } .lm-dates{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(4px); font-size: .95rem; font-weight: 600; color: var(--lm-texte); } .lm-texte{ max-width: 58ch; margin: 0; font-size: 1rem; line-height: 1.6; color: var(--lm-texte); } .lm-texte p:last-child{ margin-bottom: 0; } /* Bouton de participation : la couleur vient du back-office. */ .lm-cta{ display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 38px; border: 0; border-radius: 999px; background: var(--lm-bouton); color: var(--lm-bouton-txt); font-family: var(--lm-font-texte); font-size: 1.05rem; font-weight: var(--lm-bouton-graisse, 700); font-style: var(--lm-bouton-style, normal); letter-spacing: .04em; text-transform: var(--lm-bouton-casse, uppercase); text-decoration: none; text-transform: uppercase; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .lm-cta:hover, .lm-cta:focus{ color: var(--lm-bouton-txt); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .42); filter: brightness(1.04); } .lm-cta:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; } .lm-cta-img{ display: inline-block; max-width: min(320px, 78vw); height: auto; border: 0; background: none; transition: transform .15s ease; } .lm-cta-img:hover{ transform: translateY(-2px); } /* ------------------------------------------------------------------ * Bas de page * ---------------------------------------------------------------- */ /* Barre de bas de page : partage a gauche, reglement au centre, signature a droite. Trois colonnes egales, pour que le reglement reste centre sur la page meme quand les deux cotes n'ont pas la meme largeur. * * La marge basse tient compte de l'encoche et de la barre de gestes : sur * un iPhone, le bouton du reglement passait dessous et devenait * inatteignable. env() vaut 0 partout ailleurs. */ .lm-pied{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 4px 22px calc(22px + env(safe-area-inset-bottom, 0px)); } .lm-pied__gauche{ justify-self: start; } .lm-pied__centre{ justify-self: center; } .lm-pied__droite{ justify-self: end; } .lm-pied .lg-share{ margin: 0; } /* En dessous, les trois blocs s'empilent au centre : cote a cote, ils deviennent illisibles. */ @media (max-width: 780px){ .lm-pied{ grid-template-columns: 1fr; justify-items: center; gap: 10px; padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); } .lm-pied__gauche, .lm-pied__centre, .lm-pied__droite{ justify-self: center; } /* Ordre a l'empilement : partage, signature, reglement. */ .lm-pied__gauche{ order: 1; } .lm-pied__droite{ order: 2; } .lm-pied__centre{ order: 3; } } /* Signature Ludigital : pastille claire, pour rester lisible sur n'importe quelle image de fond. */ .lm-marque{ display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 20px 9px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); } .lm-marque__mention{ font-size: 11px; font-weight: 700; letter-spacing: .07em; line-height: 1.2; color: #6b7280; } .lm-marque__logo{ height: 30px; width: auto; max-width: 55vw; object-fit: contain; } .lm-reglement{ padding: 8px 22px; border: 0; border-radius: 999px; /* Fond franc : sur une image claire, un noir a 40 % laissait un bouton gris sur gris. Les deux couleurs se choisissent dans le back-office. */ background: var(--lm-reglement-fond, #fff); color: var(--lm-reglement-texte, #23211c); font-family: var(--lm-font-texte); font-size: .9rem; font-weight: var(--lm-reglement-graisse, 600); font-style: var(--lm-reglement-style, normal); text-transform: var(--lm-reglement-casse, none); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .lm-reglement{ box-shadow: 0 4px 14px rgba(0,0,0,.18); } .lm-reglement:hover{ filter: brightness(.96); } .lm-mention{ margin: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } /* ------------------------------------------------------------------ * Modele 5 — marque blanche : l'image porte tout le message, la page ne * pose que le bouton, bas dans l'ecran. * ---------------------------------------------------------------- */ body.lm--blanche::before{ background: transparent; } .lm--blanche .lm-scene{ justify-content: flex-end; padding-bottom: 5vh; } /* ------------------------------------------------------------------ * Fenetre du reglement * ---------------------------------------------------------------- */ .lm-modale .modal-content{ border: 0; border-radius: var(--lm-rayon); background: #fbfaf8; color: #23211c; } .lm-modale .modal-header{ border-bottom-color: #e7e4de; } .lm-modale .modal-title{ font-family: var(--lm-font-titre); font-size: 1.15rem; } .lm-modale .modal-body{ line-height: 1.6; overflow-wrap: break-word; } .lm-modale .modal-footer{ border-top-color: #e7e4de; } /* Le bouton de fermeture reprend la forme des boutons de la page — pilule, fond franc — au lieu du .btn-dark de Bootstrap, carre et etranger au reste. Il garde sa propre couleur : celle du bouton du reglement est choisie pour un fond d'image, pas pour un fond clair. */ .lm-modale__fermer{ padding: 9px 26px; border: 0; border-radius: 999px; background: #23211c; color: #fff; font-family: var(--lm-font-texte); font-size: .92rem; font-weight: 700; cursor: pointer; transition: filter .15s ease; } .lm-modale__fermer:hover{ filter: brightness(1.35); } .lm-modale__fermer:focus-visible{ outline: 2px solid #23211c; outline-offset: 2px; } /* ------------------------------------------------------------------ * Ecrans courts et telephones * ---------------------------------------------------------------- */ @media (max-height: 640px){ .lm-scene{ gap: 12px; padding: 16px 16px 8px; } .lm-logo{ max-height: 16vh; } .lm-cta{ min-height: 46px; padding: 11px 28px; font-size: .95rem; } .lm-marque{ height: 30px; } .lm-texte{ display: none; } /* le message tient dans le titre */ } @media (max-width: 480px){ .lm-scene{ gap: 14px; } .lm-dates{ font-size: .85rem; padding: 6px 13px; } } @media print{ body.lm::before{ display: none; } .lm-cta, .lm-reglement{ display: none; } } @media (prefers-reduced-motion: reduce){ .lm-cta, .lm-cta-img{ transition: none; } .lm-cta:hover, .lm-cta-img:hover{ transform: none; } } /* ------------------------------------------------------------------ * Modele 4 — carte claire posee sur l'affiche * * L'affiche horizontale habille le fond de page ; tout le contenu tient * dans une carte centree, qui defile en son sein quand l'ecran est court. * Palette propre a la carte, sombre sur clair : les couleurs du * back-office sont pensees pour un fond photographique. * ---------------------------------------------------------------- */ .lm-scene--carte{ justify-content: center; padding: 20px 16px 10px; } .lm-carte{ display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 600px; max-height: 100%; padding: 26px 26px 24px; /* La carte ne defile pas : c'est son texte qui le fait, pour que le bouton reste sous les yeux quel que soit le volume de contenu. */ overflow: hidden; border-radius: 18px; /* L'image de fond, quand elle est chargee, passe au-dessus de la couleur : celle-ci reste visible sur les bords d'une image qui ne couvre pas tout, et sert de repli tant qu'aucune image n'est posee. */ background-color: var(--lm-carte-fond, #fff); background-image: var(--lm-carte-image, none); background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--lm-carte-texte, #23211c); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .38); } .lm-carte__logo{ flex: 0 0 auto; max-width: min(190px, 60%); max-height: 64px; height: auto; object-fit: contain; } .lm-carte__titre{ margin: 0; color: var(--lm-carte-titre, inherit); font-family: var(--lm-font-titre); font-size: clamp(1.35rem, 4.4vw, 1.85rem); font-weight: 700; line-height: 1.22; text-shadow: none; } .lm-carte__visuel{ flex: 0 0 auto; width: 100%; max-height: 34vh; border-radius: 12px; object-fit: cover; } .lm-carte__texte{ color: inherit; opacity: .88; flex: 0 1 auto; min-height: 0; overflow-y: auto; width: 100%; /* De la place pour la barre de defilement, sinon le texte vient la toucher des qu'elle apparait. */ padding-right: 6px; font-size: .96rem; line-height: 1.55; } /* Barre de defilement discrete. * * Celle du systeme, large et grise, cassait la carte — surtout sur un fond * sombre. Un gris translucide tient sur les deux : il fonce sur une carte * claire, s'eclaircit sur une carte sombre. * * scrollbar-width pour Firefox, ::-webkit-scrollbar pour les autres. */ /* Declarer scrollbar-color fait basculer Chrome sur la barre standard et lui fait ignorer les pseudo-elements ci-dessous — arrows comprises. Les proprietes normalisees sont donc reservees aux moteurs qui n'ont pas ::-webkit-scrollbar, c'est-a-dire Firefox. */ @supports not selector(::-webkit-scrollbar){ .lm-carte__texte, .lm-modale .modal-body{ scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, .45) transparent; } } .lm-carte__texte::-webkit-scrollbar, .lm-modale .modal-body::-webkit-scrollbar{ width: 6px; } .lm-carte__texte::-webkit-scrollbar-track, .lm-modale .modal-body::-webkit-scrollbar-track{ background: transparent; } /* Les fleches d'extremite, encore dessinees par certains navigateurs. */ .lm-carte__texte::-webkit-scrollbar-button, .lm-modale .modal-body::-webkit-scrollbar-button{ display: none; width: 0; height: 0; } .lm-carte__texte::-webkit-scrollbar-thumb, .lm-modale .modal-body::-webkit-scrollbar-thumb{ border-radius: 999px; background: rgba(128, 128, 128, .45); } .lm-carte__texte:hover::-webkit-scrollbar-thumb, .lm-modale .modal-body::-webkit-scrollbar-thumb:hover{ background: rgba(128, 128, 128, .7); } .lm-carte__texte p:last-child{ margin-bottom: 0; } .lm-carte__dates{ flex: 0 0 auto; display: inline-flex; margin: 0; padding: 6px 15px; border-radius: 999px; background: #f1efe9; font-size: .85rem; font-weight: 600; color: #4a463d; } /* Bouton pleine largeur, comme dans la maquette. */ .lm-carte__cta{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; /* La carte est passee a 600 px : un bouton pleine largeur y devenait une barre. Il est borne, la carte le centrant deja. */ max-width: 350px; min-height: 52px; margin-top: 2px; padding: 14px 24px; border: 0; border-radius: 10px; background: var(--lm-bouton); color: var(--lm-bouton-txt); font-family: var(--lm-font-texte); font-size: 1rem; font-weight: var(--lm-bouton-graisse, 700); font-style: var(--lm-bouton-style, normal); letter-spacing: .02em; text-transform: var(--lm-bouton-casse, none); text-decoration: none; transition: filter .15s ease, transform .15s ease; } .lm-carte__cta:hover{ color: var(--lm-bouton-txt); filter: brightness(1.06); transform: translateY(-1px); } .lm-carte__cta:focus-visible{ outline: 3px solid var(--lm-bouton); outline-offset: 3px; } /* Bouton image : la carte n'impose ni fond ni cadre. */ .lm-carte__cta--image{ min-height: 0; padding: 0; background: none; } .lm-carte__cta--image img{ max-width: 100%; height: auto; } /* Le voile assombrit l'affiche derriere la carte, pour la detacher. */ body.lm:has(.lm-scene--carte)::before{ background: rgba(10, 12, 15, .5); } /* Hauteur bornee, et non simple hauteur minimale : c'est la carte qui defile en son sein, pas la page. Sans cela, un texte long poussait le partage, la signature et le reglement hors de l'ecran. */ body.lm:has(.lm-scene--carte){ height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; } @media (max-height: 700px){ .lm-carte{ gap: 10px; padding: 18px 20px 18px; } .lm-carte__logo{ max-height: 46px; } .lm-carte__visuel{ max-height: 24vh; } .lm-carte__cta{ min-height: 46px; padding: 11px 20px; } } @media (max-width: 420px){ .lm-scene--carte{ padding: 14px 12px 8px; } .lm-carte{ padding: 20px 18px; border-radius: 16px; } } /* Ecran court : le bas de page se resserre plutot que de deborder. */ @media (max-height: 640px){ .lm-pied{ gap: 8px; padding-top: 0; } .lm-marque{ padding: 5px 14px 6px; } .lm-marque__logo{ height: 22px; } .lm-marque__mention{ font-size: 10px; } .lm-reglement{ padding: 6px 18px; font-size: .82rem; } .lm-pied .lg-share__btn{ width: 34px; height: 34px; } .lm-pied .lg-share__btn svg{ width: 16px; height: 16px; } } /* ------------------------------------------------------------------ * Fenetre d'information habillee d'un fond * * Le fond — couleur, image, ou les deux — est pose sur la fenetre entiere. * Le texte, lui, reste sur un aplat clair : sur une photo, il devenait * illisible, et sa couleur n'est pas reglable ici. * ---------------------------------------------------------------- */ .lm-modale--fond{ overflow: hidden; border: 0; } /* Entete de la fenetre d'information : pas de barre, un petit bloc noir pour le compte a rebours et une croix ronde. La bande claire pleine largeur coupait l'image en deux. */ .lm-modale__entete{ gap: 10px; padding: 12px 12px 0; border-bottom: 0; background: none; } .lm-modale__chrono{ padding: 6px 14px; border-radius: 999px; background: #14161a; color: #ffffff; font-size: .8rem; font-weight: 600; line-height: 1.2; } /* La croix est redessinee en blanc plutot que d'ajouter .btn-close-white : ce dernier inverse tout l'element, fond compris — le bouton noir ressortait blanc. */ .lm-modale__croix{ width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 999px; background-color: #14161a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M2.7 2a.7.7 0 0 0-.5 1.2L6.9 8l-4.7 4.8a.7.7 0 1 0 1 1L8 9.1l4.8 4.7a.7.7 0 1 0 1-1L9.1 8l4.7-4.8a.7.7 0 0 0-1-1L8 6.9 3.2 2.2A.7.7 0 0 0 2.7 2Z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 11px; opacity: 1; } .lm-modale__croix:hover{ background-color: #35383d; } .lm-modale__croix:focus{ box-shadow: 0 0 0 3px rgba(20, 22, 26, .25); } .lm-modale--fond .modal-body{ /* De la place pour que l'image se voie autour du texte : quelques lignes ne suffisaient pas a la montrer, elle etait rognee a une bande. */ min-height: min(58vh, 480px); padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; } .lm-modale--fond .lm-modale__contenu{ padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .9); } .lm-modale__contenu > :first-child{ margin-top: 0; } .lm-modale__contenu > :last-child{ margin-bottom: 0; } .lm-modale__contenu img{ max-width: 100%; height: auto; } /* ------------------------------------------------------------------ * Fenetre d'information reduite a une image * * Sans texte, l'image n'est plus un fond : elle est le contenu. La fenetre * epouse alors ses proportions au lieu de la rogner dans un cadre fixe. * ---------------------------------------------------------------- */ .lm-modale__dialogue--image{ width: auto; max-width: min(92vw, 900px); } .lm-modale--image{ background: transparent; } .lm-modale--image .modal-body{ padding: 0; } .lm-modale__image{ display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; border-radius: 0 0 var(--lm-rayon) var(--lm-rayon); } /* L'entete flotte au-dessus de l'image, qui occupe toute la fenetre. */ .lm-modale--image .lm-modale__entete{ position: absolute; top: 0; left: 0; right: 0; z-index: 1; } .lm-modale--image{ position: relative; overflow: hidden; border-radius: var(--lm-rayon); }