/*
 * front.css
 *
 * Description: Feuille de style pour le site Facile Ticket.
 * Author     : Alexandre Boni
 * Date       : 2025
 * Version    : 1.0.0
 * License    : All Rights Reserved – Proprietary. Modification of this code is strictly prohibited.
 */

/* =====================================================================
   TABLE DES MATIÈRES
   ---------------------------------------------------------------------
   1) Variables CSS & Thème
   2) Reset & Base (html/body, polices, overflow)
   3) Liens (styles + désactivation d’underline sur certains blocs)
   4) Boutons (généraux + variantes projet)
   5) Formulaires & Inputs
   6) Layout & Colonnes (gauche / droite, helpers d’arrière-plan)
   7) Composants (tooltips, carrousel, badges, vignettes, etc.)
   8) Animations
   9) Responsif
   10) Correctifs Overflow & Sécurité de mise en page
   ===================================================================== */


/* =====================================================================
   1) VARIABLES CSS & THÈME
   ===================================================================== */
:root {
    --font: #494949;
    --vert-fluo: #9ec542;
    --vert-fonce: #084734;
    --vert-fonce-hover: #03291e;
    --vert-fluo-hover : #6f8f1d;
    --menu-bottom-h: 100px; /* hauteur approximative du menu fixe bas */
}

/* =====================================================================
   2) RESET & BASE
   - On normalise la typo, la couleur, et on désactive tout scroll horizontal global.
   ===================================================================== */
html, body {
    font-family: "europa", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.95em;
    color: var(--font);
    margin: 0;
    padding: 0;
    min-height: 100dvh;       /* prend au moins la hauteur du viewport, mais autorise plus si contenu long */
    overflow-x: hidden;      /* pas de scroll horizontal global */
    overflow-y: auto;         /* autorise le scroll vertical global */
    background-color: #f5F5F5;
}

/* =====================================================================
   3) LIENS
   - Ligne animée au survol via pseudo-élément ::after.
   - On désactive cet effet sur certains blocs (contact, boutons, badges…).
   ===================================================================== */
a {
    color: var(--vert-fonce);
    text-decoration: none;
    position: relative; /* nécessaire pour positionner le ::after */
}

a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: var(--vert-fonce);
    transform: scaleX(0);
    transform-origin: left; /* l’animation démarre à gauche */
    transition: transform 0.3s ease; /* propriété animée uniquement sur transform */
}

a:hover::after {
    transform: scaleX(1);
}

.contact a { text-decoration: none; }
.contact a:hover { text-decoration: none; }

/* Désactive le soulignement (pseudo-élément ::after) dans les liens de la classe .contact */
.contact a::after,
.contact a:hover::after {
    display: none !important;
    content: none !important;
}

/* Supprime l’underline animé pour tous les éléments .btn */
a.btn::after,
a.btn:hover::after,
button.btn::after,
button.btn:hover::after,
input.btn::after,
input.btn:hover::after {
    display: none !important;
    content: none !important;
}

/* Désactive le soulignement au survol des liens contenant l’icône QR code & boutons ronds */
a.fontawesome-link,
a.fontawesome-link:hover,
.ajouter-enfant,
.ajouter-enfant:hover,
.qrcode,
.qrcode:hover {
    text-decoration: none !important;
}


a.fontawesome-link::after,
a.fontawesome-link:hover::after,
.ajouter-enfant::after,
.ajouter-enfant:hover::after,
.qrcode::after,
.qrcode:hover::after {
    display: none !important;
    content: none !important;
}

/* Désactive le soulignement animé pour les icônes du menu du bas */
.contact-icon::after,
.contact-icon:hover::after {
    display: none !important;
    content: none !important;
}

/* Désactive le soulignement au survol des liens de badge "Annuler" */
a.badge:hover::after {
    display: none !important;
    content: none !important;
}

a.badge:hover { text-decoration: none; }

/* =====================================================================
   4) BOUTONS
   - Harmonisation des couleurs primaires (projet) + variantes spécifiques.
   ===================================================================== */
.btn-primary {
    background-color: var(--vert-fonce);
    border-color: var(--vert-fonce);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #063b2f; /* teinte plus sombre au survol/focus */
    border-color: #063b2f;
}

.btn-prochains-menus {
    background-color: var(--vert-fluo);
    transition: background-color 0.2s ease-in-out;
    letter-spacing: 2px;
}

.btn-prochains-menus:hover {
    background-color: var(--vert-fluo-hover);
}

.btn-prochains-menus i {
    font-size: 3rem;
}

.breadcrumb .btn-outline-primary {
    color: #fff;
    background-color: var(--vert-fonce);
    border-color: var(--vert-fonce);
}

.breadcrumb .btn-outline-primary:hover,
.breadcrumb .btn-outline-primary:focus {
    background-color: #063b2f;
    border-color: #063b2f;
    color: #fff;
}

/* Bouton date – état par défaut et états actifs/hover */
.btn-date {
    border: 1px solid var(--vert-fonce);
    min-width: 80px;
    color: var(--vert-fonce);
    background-color: white;
    transition: all 0.2s ease; /* léger feedback visuel */
    flex-shrink: 0; /* évite que le bouton rétrécisse dans un conteneur flex */
    max-width: 100%;
}

.btn-date .fw-bold,
.btn-date .fw-semibold,
.btn-date .text-muted {
    color: var(--vert-fonce);
}

.btn-date.active {
    background-color: var(--vert-fonce) !important;
    color: white !important;
    border-color: var(--vert-fonce) !important;
    border-style: solid;
}

.btn-date:hover {
    background-color: var(--vert-fonce);
    color: white;
    border-color: var(--vert-fonce);
    border-style: solid;
}

.btn-date.active .fw-bold,
.btn-date.active .fw-semibold,
.btn-date:hover .fw-bold,
.btn-date:hover .fw-semibold { color: white; }

.btn-date:focus,
.btn-date:active,
.btn-date:focus:active {
    background-color: var(--vert-fonce);
    color: white;
    border-color: var(--vert-fonce);
    outline: none;
    box-shadow: none; /* cohérence avec le design sans halo */
}

/* Boutons spécifiques page d’accueil (cartes) */
.btn-reservations {
    height: 100px;
    background-color: var(--vert-fluo);
    color: #FFFFFF;
    transition: background-color 0.2s ease-in-out;
    letter-spacing: 2px;
}

.btn-reservations:hover {
    background-color: var(--vert-fluo-hover);
    color: #FFFFFF;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.btn-menus {
    height: 100px;
    background-color: var(--vert-fonce) !important;
    color: #FFFFFF;
    transition: background-color 0.2s ease-in-out;
    letter-spacing: 2px;
}

.btn-menus:hover {
    background-color: var(--vert-fonce-hover) !important;
    color: #FFFFFF;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

button.type-menu { color: var(--vert-fonce); }
button.type-menu:hover { color: var(--vert-fluo); }

/* =====================================================================
   5) FORMULAIRES & INPUTS
   ===================================================================== */
.input-group-text {
    width: 3rem;           /* largeur fixe pour aligner les icônes */
    justify-content: center;
    display: flex;
    align-items: center;   /* centre vertical des icônes */
}

/* Focus sans halo Bootstrap pour garder un style sobre */
input:focus,
select:focus,
textarea:focus,
button:focus,
.form-control:focus,
.form-select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

/* =====================================================================
   6) LAYOUT & COLONNES
   ===================================================================== */
/* Colonne visuelle gauche (images) */
/* Colonne visuelle gauche (images) – collée en haut, indépendante du scroll de droite */
.colonne-gauche {
    position: -webkit-sticky; /* Safari/iPadOS */
    position: sticky;
    top: 0;
    height: 100dvh; /* prend en compte les barres d’UI sur iOS/iPadOS */
    overflow: hidden; /* empêche les débordements lors des transitions */
}

.colonne-gauche .carousel-item > div { height: 100dvh; }

.bg-cover { background-size: cover; }
.bg-center { background-position: center; }

/* Colonne droite (contenu app) */
.colonne-droite{
    background-color:#f5f5f5;
    display:flex;
    flex-direction:column;
    min-height:100dvh;   /* laisse la colonne s'allonger et autorise le scroll de page */
    overflow-y: visible;  /* pas de coupe du contenu */
    overflow-x: hidden;   /* pas de scroll horizontal */
}

.colonne-droite .presentation {
    background-color: var(--vert-fonce);
    border-radius: 10px;
    padding: 20px;
    color: #FFFFFF;
}

/* Colonne gauche fixe sur desktop, colonne droite à droite */
@media (min-width: 768px) {
  .colonne-gauche {
    position: fixed;    /* reste immobile lors du scroll */
    top: 0;
    left: 0;
    width: 50vw;        /* correspond à la moitié de l’écran */
    height: 100dvh;     /* pleine hauteur viewport */
    overflow: hidden;   /* pas de débordements */
  }
  .colonne-droite {
    margin-left: 50vw;  /* décale la colonne droite pour laisser la place à la gauche */
  }
}

/* Icônes de contact (ronds) */
.contact-icon {
    color: var(--vert-fonce);
    border-color: var(--vert-fonce);
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* multi-propriétés */
    text-decoration: none;
}

.contact-icon:hover,
.contact-icon.active {
    background-color: var(--vert-fonce);
    color: #fff;
    text-decoration: none;
}

/* =====================================================================
   7) COMPOSANTS
   ===================================================================== */
/* Titres de sections spécifiques */
.page-comment-ca-fonctionne h2 { font-size: 1.3rem; }
.page-comment-ca-fonctionne h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-top: 20px;
    letter-spacing: 2px;
}

/* Tooltips thématisés */
.tooltip .tooltip-inner {
    background-color: var(--vert-fluo);
    color: #000;
    font-size: 0.875rem;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-top-color: var(--vert-fluo) !important;
    border-bottom-color: var(--vert-fluo) !important;
    border-left-color: var(--vert-fluo) !important;
    border-right-color: var(--vert-fluo) !important;
}

/* Miniatures & badges */
.miniature-enfant.active img,
.miniature-enfant.active .icone-vide {
    outline: 3px solid var(--vert-fluo);
    border-radius: 50%;
}

.badge-reserve { background-color: var(--vert-fluo); }

/* Soldes & animations */
#solde-previsionnel { display: inline-block; }

.solde-previsionnel.animate-rebond { animation: rebond 0.5s ease-in-out; }

/* Bouton ajouter + badge QR code */
.ajouter-enfant {
    background-color: var(--vert-fonce);
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.qrcode { background-color: var(--vert-fluo); }

/* Titres pages réservations/profil */
.page-parent-profil h6,
.page-reservations h6 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Evite le flash blanc pendant le crossfade */
.colonne-gauche, .carousel, .carousel-inner, .carousel-item { background-color: #000 !important; }

/* Renforce le crossfade Bootstrap pour éliminer les "trous" entre slides */
.carousel-fade .carousel-item { opacity: 0 !important; transition: opacity .6s ease-in-out !important; }
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end { opacity: 1 !important; }
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end { opacity: 0 !important; }

/* Assure un rendu plein cadre sans reflow pendant la transition */
#carouselGauche img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Menu fixe bas : priorité d’empilement et réserve d’espace */
.fixed-bottom { z-index: 2000 !important; }

/* Laisse un peu d’espace au contenu sur petits écrans quand le menu est présent */
@media (max-width: 768px) {
  body { padding-bottom: calc(var(--menu-bottom-h) + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   8) ANIMATIONS
   ===================================================================== */
@keyframes rebond {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.45); }
    50%  { transform: scale(0.9); }
    75%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* =====================================================================
   9) RESPONSIF
   - On réserve un padding-bottom pour la colonne droite sur mobile, afin
     d’éviter que le footer/menu fixe recouvre le contenu.
   ===================================================================== */
@media (max-width: 768px) {
    .colonne-droite { padding-bottom: calc(var(--menu-bottom-h) + env(safe-area-inset-bottom)); }
}

@media (min-width: 768px) {
  .colonne-droite {
    min-height: 100dvh; /* pleine hauteur, sans soustraction qui limitait la course de scroll */
    padding-bottom: calc(var(--menu-bottom-h) + 32px); /* espace au-dessus du menu fixe */
    overflow-y: auto; /* permet au contenu de scroller si nécessaire */
  }
}

/* Espace de sécurité injecté après le contenu réel du conteneur scrollable */
@media (min-width: 768px) {
  .colonne-droite .overflow-auto {
    overflow-y: auto !important;             /* scrolle bien dans ce conteneur */
    padding-bottom: 0 !important;            /* on neutralise le p-md-* de Bootstrap pour le bas */
    scroll-padding-bottom: calc(var(--menu-bottom-h)); /* pour que le bas puisse se dégager du menu */
  }
  .colonne-droite .overflow-auto::after {
    content: "";                             /* crée un espace de fin de liste */
    display: block;
    height: calc(var(--menu-bottom-h) ); /* hauteur > menu fixe pour qu'on voie le bas de la page */
    flex: 0 0 auto;                          /* évite la compression en flex */
  }
}

@media (max-height: 700px) and (min-width: 769px) {
    .colonne-droite {
        overflow-y: auto; /* scrolle si le contenu dépasse */
    }
}

/* =====================================================================
   10) CORRECTIFS OVERFLOW & SÉCURITÉ DE MISE EN PAGE
   - Empêche les barres de scroll horizontales intempestives liées aux marges
     négatives de .row combinées à des paddings.
   - Sécurise le contenu pour qu’aucun enfant ne dépasse son conteneur.
   ===================================================================== */
/* Défilement horizontal masqué pour les conteneurs à défilement */
.scroll-x-sans-barre {
    overflow-x: scroll;             /* force l'affichage */
    -ms-overflow-style: scrollbar;  /* IE & Edge legacy */
    scrollbar-width: thin;          /* Firefox : fine */
}

/* Chrome / Safari / Edge (WebKit) */
.scroll-x-sans-barre::-webkit-scrollbar {
    height: 8px;                    /* hauteur visible en permanence */
}
.scroll-x-sans-barre::-webkit-scrollbar-track {
    background: transparent;
}
.scroll-x-sans-barre::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

/*.scroll-x-sans-barre::-webkit-scrollbar { display: none; } !* Chrome/Safari/Opera *!*/

/*!* Colonne droite : neutraliser les marges négatives de Bootstrap .row*/
/*   lorsqu’elle est placée dans un conteneur paddé (p-2, p-4, …) *!*/
/*.colonne-droite .row {*/
/*    margin-left: 0 !important;*/
/*    margin-right: 0 !important;*/
/*}*/

/*!* Forcer un scroll seulement vertical dans la zone scrollable de la colonne droite *!*/
/*.colonne-droite .overflow-auto {*/
/*    flex: 1 1 auto;                 !* occupe tout l'espace restant de la colonne droite *!*/
/*    max-height: 100dvh;             !* contrainte de hauteur pour déclencher le scroll interne *!*/
/*    overflow-y: auto;               !* scrolling vertical uniquement *!*/
/*    overflow-x: hidden;             !* empêche la barre horizontale *!*/
/*    -webkit-overflow-scrolling: touch; !* inertie de défilement sur iOS/iPadOS *!*/
/*}*/

/*!* Évite les débordements causés par des enfants flex non compressibles *!*/
/*.colonne-droite,*/
/*.colonne-droite .overflow-auto,*/
/*.colonne-droite .input-group .form-floating {*/
/*    min-width: 0; !* permet aux contenus de rétrécir dans des layouts flex *!*/
/*}*/

/*!* Sécurité : empêcher les images et tableaux d’élargir le contenu au-delà de leur conteneur *!*/
/*.colonne-droite img,*/
/*.colonne-droite table {*/
/*    max-width: 100%;*/
/*}*/

@media (min-width: 768px) {
    .fixed-bottom {
        left: auto;
        width: 50%; /* largeur de la colonne droite col-md-6 */
        margin-left: auto;
    }
}