/* =====================================================================
 * Complements aux landings : pied de page, bouton Reglement, et
 * presentation « version 2 » (carte centree sur image plein cadre).
 *
 * Fichier separe a dessein : landing-styles.css est un bundle Bootstrap
 * compile de plus de 10 000 lignes, qu'on evite de modifier a la main.
 * ================================================================== */

/* ------------------------------------------------------------------
 * Pied de page commun
 * ---------------------------------------------------------------- */
.landing-footer{
    position: relative;
    z-index: 5;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px 32px;
    text-align: center;
}

/* Le reglement etait un lien nu dans un pied de page minuscule, illisible
   en bas de page. C'est desormais un bouton, lisible sur fond clair comme
   sur fond sombre grace au liisere clair. */
.landing-footer__rules{
    display: inline-block;
    padding: 11px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--landing-reglement-fond, rgba(17, 17, 17, .92));
    color: var(--landing-reglement-texte, #fff);
    font-size: 15px;
    font-weight: var(--landing-reglement-graisse, 700);
    font-style: var(--landing-reglement-style, normal);
    text-transform: var(--landing-reglement-casse, none);
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: transform .15s ease, background .15s ease;
}
.landing-footer__rules:hover,
.landing-footer__rules:focus{
    transform: translateY(-2px);
    background: #000;
    color: #fff;
}
.landing-footer__rules:focus-visible{
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.landing-footer__brand{
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

@media print{
    .landing-footer{ display: none; }
}

/* ------------------------------------------------------------------
 * Version 2 : carte centree sur image plein cadre
 * ---------------------------------------------------------------- */
/* La mise en page en colonne vaut maintenant pour les trois modeles :
   voir « Hauteur de page » plus bas. */

.masthead-v2{
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 28px 16px 12px;
}

.landing-card{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    padding: 30px 26px;
    border-radius: 26px;
    background: #141414;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    text-align: center;
    overflow: auto;
}

.landing-card__title{
    margin: 0 0 10px;
    font-size: clamp(30px, 6vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}

.landing-card__subtitle{
    margin: 0 0 22px;
    font-size: clamp(15px, 3.4vw, 21px);
    font-style: italic;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.landing-card__media{
    display: block;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    max-height: 34vh;
    height: auto;
    margin: 0 auto 22px;
    border-radius: 14px;
    object-fit: contain;
}

.landing-card__text{
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
}
.landing-card__text p:last-child{ margin-bottom: 0; }

.landing-card__cta{
    display: block;
    width: 100%;
    padding: 15px 24px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform .15s ease, opacity .15s ease;
}
.landing-card__cta:hover,
.landing-card__cta:focus{
    transform: translateY(-2px);
    opacity: .92;
    text-decoration: none;
}

.landing-card__cta-img{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 480px){
    .landing-card{ padding: 24px 18px; border-radius: 20px; }
    .masthead-v2{ padding: 20px 12px 4px; }
}

/* ------------------------------------------------------------------
 * Structure et accessibilite de la landing
 * ---------------------------------------------------------------- */

/* Titre reserve aux lecteurs d'ecran et aux moteurs : le modele 2
   incruste le sien dans l'image de fond, la page n'avait donc aucun h1.
   On ne masque pas en display:none, qui le retirerait de l'arbre
   d'accessibilite. */
.visually-hidden{
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Signature Ludigital, entre la barre de partage et le reglement : une
   pastille claire, pour que le logo reste lisible quel que soit le fond
   du commercant. */
.landing-brand{
    display: flex;
    justify-content: center;
    padding: 6px 16px 2px;
}
.landing-brand__carte{
    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);
}
.landing-brand__mention{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1.2;
    color: #6b7280;
}
.landing-brand__logo{
    width: auto;
    height: 30px;
    max-width: 55vw;
    object-fit: contain;
}
@media (max-width: 480px){
    .landing-brand__carte{ padding: 6px 16px 8px; }
    .landing-brand__logo{ height: 26px; }
}
@media print{
    .landing-brand{ display: none; }
}


/* ------------------------------------------------------------------
 * Hauteur de page — les trois modeles
 *
 * Le bandeau reclamait toute la fenetre (height:100vh sur .masthead au
 * dessus de 992px, height:100% sur .masthead-t2) : la barre de partage, le
 * logo et le bouton du reglement se retrouvaient systematiquement sous la
 * ligne de flottaison, et rien ne disait au visiteur qu'ils existaient.
 *
 * A la place, <body> est une colonne : le bandeau prend la place qui
 * reste, le bas de page se pose dessous, et l'ensemble tient dans la
 * fenetre. min-height plutot que height : une landing dont le contenu
 * depasse vraiment doit encore pouvoir defiler.
 *
 * ⚠️ Ne pas remettre de hauteur fixe sur un masthead : elle s'ajouterait a
 * celle du bas de page et ramenerait la barre de defilement.
 * ---------------------------------------------------------------- */
body#page-top{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

body#page-top > #contenu{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Le bandeau absorbe l'espace disponible. */
#contenu > header{
    flex: 1 1 auto;
    min-height: 0;
}

/* Partage, logo et pied gardent leur hauteur propre. */
#contenu > .lg-share,
body#page-top > .landing-brand,
body#page-top > footer{
    flex: 0 0 auto;
}

.masthead,
.masthead-t2,
.masthead-v2{
    height: auto;
    min-height: 0;
}
.masthead{ padding: 2.5rem 0; }

@media (min-width: 992px){
    .masthead{ height: auto; padding: 2rem 0; }
}

/* Les marges du bas de page se resserrent : trois blocs empiles sous le
   bandeau, ils prenaient un tiers de l'ecran sur un portable. */
#contenu > .lg-share{ margin: 12px 0 6px; }
.landing-footer{ padding-top: 4px; }

@media (max-height: 620px){
    #contenu > .lg-share{ margin: 8px 0 4px; }
    .lg-share__btn{ width: 36px; height: 36px; }
    .lg-share__btn svg{ width: 17px; height: 17px; }
    .landing-brand__logo{ height: 32px; }
    .masthead{ padding: 1.25rem 0; }
}

/* ------------------------------------------------------------------
 * Modele 2 : bouton de participation
 *
 * .btn-position vaut position:fixed; bottom:10% dans le bundle compile :
 * le bouton se posait par-dessus la barre de partage, le logo et le pied
 * de page, qu'il masquait purement et simplement. Il reprend sa place dans
 * le flux, centre dans le bandeau — le modele 3 annulait deja ce
 * positionnement de son cote.
 * ---------------------------------------------------------------- */
body#page-top .btn-position{
    position: static;
    bottom: auto;
}

/* Le bouton se pose bas dans le bandeau, comme le faisait le bottom:10%
   d'origine : centre verticalement, il retombait au milieu du titre
   incruste dans l'image de fond. */
/* Le bandeau devient lui-meme un conteneur flex : sans cela, min-height
   en pourcentage n'a aucune hauteur de reference et le bouton se pose ou
   il veut. */
.masthead-t2{
    display: flex;
}
.masthead-t2__inner{
    display: flex;
    /* flex-direction explicite : sans elle, le conteneur repartait en
       colonne — l'axe principal devenait vertical et align-items:flex-end
       poussait le bouton a droite au lieu de le poser en bas. */
    flex-direction: row;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 6vh;
    text-align: center;
}

@media (max-height: 620px){
    .masthead-t2__inner{ padding-bottom: 3vh; }
}


/* ------------------------------------------------------------------
 * Fenetre du reglement — bouton de fermeture
 *
 * .modal-btn n'avait aucun style : le navigateur affichait son bouton gris
 * par defaut, sans rapport avec le reste de la page.
 * ---------------------------------------------------------------- */
.modal-btn{
    padding: 9px 26px;
    border: 0;
    border-radius: 999px;
    background: #23211c;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: filter .15s ease;
}
.modal-btn:hover{ filter: brightness(1.35); color: #fff; }
.modal-btn:focus-visible{ outline: 2px solid #23211c; outline-offset: 2px; }


/* ------------------------------------------------------------------
 * Marge basse sur telephone
 *
 * Barre d'adresse, barre de gestes et encoche mangent le bas de l'ecran :
 * le bouton du reglement s'y cachait sur plusieurs modeles. env() vaut 0
 * sur les navigateurs qui l'ignorent, la regle est donc sans effet
 * ailleurs.
 * ---------------------------------------------------------------- */
body#page-top{
    min-height: 100svh;
    min-height: 100dvh;
}

.landing-footer{
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 700px){
    .landing-footer{ padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}


/* Graisse et style du bouton de participation, choisis dans le back-office.
   Le bandeau du modele 2 et la carte du modele 3 emploient chacun leur
   classe : les deux sont visees. */
body#page-top .btn-position,
body#page-top .masthead .btn,
body#page-top .landing-card__cta{
    font-weight: var(--landing-bouton-graisse, 700);
    font-style: var(--landing-bouton-style, normal);
    text-transform: var(--landing-bouton-casse, none);
}

/* ------------------------------------------------------------------
 * Fenetre d'information reduite a une image (modeles 1 a 3)
 *
 * Sans texte, l'image est le contenu : la fenetre epouse ses proportions
 * plutot que de la rogner dans un cadre fixe.
 * ---------------------------------------------------------------- */
.intervention-container--image{
    width: auto;
    max-width: min(92vw, 900px);
    padding: 0;
    background: transparent;
}
.intervention-image{
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 8px;
}