@import url('footer.css');

html, body, #main {
  background: #f6f7fb !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* === Boutons page Login (et formulaires similaires) === */
.login-container button,
.register-container button {
    background: linear-gradient(90deg, #c9a227 60%, #e3c56a 100%) !important;
    color: #0e0e48 !important;
    border-radius: 8px !important;
    font-size: 1.1em !important;
    font-family: 'Oswald', sans-serif !important;
    width: 100% !important;
    margin-top: 1.5em !important;
    padding: 0.8em !important;
    font-weight: bold;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.login-container button:hover,
.register-container button:hover {
    background: linear-gradient(90deg, #e3c56a 60%, #c9a227 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}
/* Fix bouton login */
.login-container button {
    background: linear-gradient(90deg, #c9a227 60%, #e3c56a 100%) !important;
    color: #0e0e48 !important;
    border-radius: 6px !important;
    font-size: 1.1em !important;
    font-family: 'Oswald', sans-serif !important;
    width: 100% !important;
    margin-top: 1.5em !important;
    padding: 0.8em !important;
}
.login-container button:hover {
    background: linear-gradient(90deg, #e3c56a 60%, #c9a227 100%) !important;
    color: #fff !important;
}

/* --- Signup moderne --- */
.signup-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}
.signup-section h1 {
    font-size: 2.1rem;
    color: #0e0e48;
    margin-bottom: 1.5rem;
    font-family: 'Bebas Neue', 'Oswald', Arial, sans-serif;
}
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  /* min-width: 260px; */
  max-width: 340px;
  width: 100%;
    border-radius: 0.7em;
    outline: none;
    transition: border 0.2s;
}
.signup-form input:focus {
    border: 1.5px solid #33578b;
}
.signup-form button {
    background: linear-gradient(90deg, #c9a227 60%, #e3c56a 100%);
    color: #0e0e48;
    font-weight: bold;
    padding: 0.8em 1.5em;
    border-radius: 2em;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.signup-form button:hover {
    background: linear-gradient(90deg, #e3c56a 60%, #c9a227 100%);
    color: #fff;
}
.signup-msg {
    min-height: 1.2em;
    font-size: 1rem;
    margin-top: 0.5em;
    text-align: center;
}
/* --- Accueil moderne --- */
.home-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem 1rem 3rem 1rem;
    background: linear-gradient(120deg, #f8fafc 60%, #e0e7ef 100%);
}
.home-content {
    flex: 1 1 350px;
    max-width: 480px;
    padding: 2rem 1rem;
}
.home-content h1 {
    font-size: 2.5rem;
    font-family: 'Bebas Neue', 'Oswald', Arial, sans-serif;
    color: #0e0e48;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}
.home-content .subtitle {
    font-size: 1.2rem;
    color: #33578b;
    margin-bottom: 2rem;
}
.home-content .btn.cta {
    display: inline-block;
    background: linear-gradient(90deg, #c9a227 60%, #e3c56a 100%);
    color: #0e0e48;
    font-weight: bold;
    padding: 0.9em 2.2em;
    border-radius: 2em;
    font-size: 1.1rem;
    box-shadow: 0 2px 12px #c9a22733;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.home-content .btn.cta:hover {
    background: linear-gradient(90deg, #e3c56a 60%, #c9a227 100%);
    color: #fff;
    box-shadow: 0 4px 24px #c9a22466;
}
.home-illu {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-width: 260px; */
  padding: 1rem;
}
.home-illu img {
    max-width: 350px;
    width: 100%;
    border-radius: 1.5rem;
    box-shadow: 0 4px 32px #33578b22;
    background: #fff;
}
@media (max-width: 900px) {
    .home-section { flex-direction: column; padding: 1.5rem 0.5rem; }
    .home-content, .home-illu { max-width: 100%; }
    .home-illu img { max-width: 90vw; }
}
/* Polices */
        @font-face {
          font-family: 'Bebas Neue';
          src: url('/static/fonts/BebasNeue.woff2') format('woff2');
          font-style: normal;
          font-weight: 400;
          font-display: swap;
        }
        @font-face {
          font-family: 'Oswald';
          src: url('/static/fonts/Oswald.woff2') format('woff2');
          font-style: normal;
          font-weight: 400;
          font-display: swap;
        }
        @font-face {
          font-family: 'Designer';
          src: url('/static/fonts/Designer.woff2') format('woff2');
          font-style: normal;
          font-weight: 400;
          font-display: swap;
        }

        /* Corps de la page */
  body, html { margin:0; padding:0; height:100%; font-family:'Oswald',sans-serif; color:#0e0e48; }

        /* Titre de la page principale */
        h1 { font-family:'Designer',sans-serif; text-align:center; color:#0e0e48; font-size:clamp(24px,5vw,50px); margin:20px 0; }
        
        /* Container principal de la page entière */


        /* Colonne du formulaire de droite */
  .form-column { flex:none; width:100%; max-width:600px; padding:10px; background-color:#fff; overflow-y:auto; min-height:100%; }

        /* Colonne de la carte initiale */
  .map-column { flex:none; width:100%; max-width:1100px; display:flex; flex-direction:column; padding:20px; overflow:auto; min-height:60vh; transition:all .3s ease; }
        .map-column.hidden { display:none; }

  .center-column { flex:none; width:100%; max-width:530px; display:none; flex-direction:column; margin:0 auto; min-height:60vh; align-items:center; }
        .center-column.visible { display:flex; }

        /* Carte initiale  */
        #map { width:100%; min-height:50vh; height:auto; border:0; margin-bottom:20px; border-radius:30px; }

        /* Keep full-viewport map on larger screens where space allows */
        @media (min-width:1025px) {
          #map { height:100vh; }
        }

        /* Touch-action helpers: prevents the browser passive-event warning when
           third-party bundles attempt to call event.preventDefault() on touch events.
           We apply to map-related elements only so page scrolling is preserved elsewhere. */
        #map, .map-container, .map-column, .mapboxgl-canvas {
          touch-action: none; /* disables default scrolling/zooming on the map */
        }

        /* Gallery/thumbs: allow native horizontal panning on small touch devices */
        .ygb-thumbs-wrapper, .ygb-thumbs {
          touch-action: pan-x;
          -ms-touch-action: pan-x;
        }
        .ygb-gallery, .ygb-gallery-main, .ygb-thumbs img {
          touch-action: manipulation;
        }
        

        /* Petite carte pour les résultats */
        #result-map { width:100%; height:80%; border:0; border-radius:0; display:none; position:relative; }
        #result-map.visible { display:block; }
        /* Overlay text preview adjustments: make underline sit further from text to match PDF spacing */
        .ygm-overlay .overlay-content {
          /* push underline slightly further from glyphs to match PDF */
          text-underline-offset: 0.20em;
          /* thicker underline for improved visibility */
          text-decoration-thickness: 0.07em;
          /* ensure decorations use current color */
          -webkit-text-decoration-color: currentColor;
          text-decoration-color: currentColor;
        }
        #result-map::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:20%; max-height:80px; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%); pointer-events:none; }

        /* Boutons de zoom pour la carte initiale */
        #map .mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin-left: 10px; margin-top: 20px; }

        /* Cacher les boutons de zoom pour la carte de résultats */
        #result-map .mapboxgl-ctrl-top-right .mapboxgl-ctrl {display: none; margin-right: 20px; margin-top: 20px; }

        /* Conteneur du bas, sous la carte dynamique et sous le titre*/
        .bottom-container { display:flex; flex-direction:column; height:10vh; width:100%; margin:0; align-items:center; justify-content:center; }

        /* Pour centrer les résultats quand le graphe est caché */
        .bottom-container.no-elevation { justify-content:center; }

        /* Chart column : colonne du bottom container, contient le graphe, sous le titre */
        .chart-column { width:92%; height:9vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:4px; }
        .chart-column.hidden { display:none; }

         /* le graphe en lui même */
         #elevation_gain { width:100%; height:100%; }

        /* result column : colonne du bottom container sous le graphe, contient les resultats */
        .results-column { width:100%; height:5vh; display:flex; align-items:center; justify-content:center; text-align:center; }
        .results-column p { margin:3px; font-size:12px; line-height:1.4; display:inline-block; margin-right:20px; }

        /* Dplus info */
        .dplus-info { writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; display:flex; align-items:center; justify-content:center; height:100%; width:auto; min-width:18px; text-align:center; margin-left:2px; }

        #dplus_display_container { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; }

        .deniv-options { display: flex; gap: 10px; }

        /* Pour la mise en page horizontale des résultats */
        #dynamic-info { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }

        /* Ajustement du titre dynamique */
        .dynamic-title { text-align:center; font-size:24px; font-weight:bold; margin:0; font-family:'Bebas Neue',sans-serif; display:flex; align-items:center; justify-content:center; width:100%; min-height:30px; max-width:80%; white-space:normal; word-break:break-word; }
        .dynamic-title span { padding:0 20px; position:relative; color:inherit; }
        .dynamic-title span::before, .dynamic-title span::after { content:''; position:absolute; top:50%; width:15px; height:2px; background-color:currentColor; }
        .dynamic-title span::before { right:100%; margin-right:5px; }
        .dynamic-title span::after  { left:100%;  margin-left:5px; }

        /* Responsive adjustments pour les téléphones par exemple */
        @media (max-width:1024px){
            .page-container { flex-direction:column; height:auto; }
            .map-column, .form-column { width:100%; }
          #map { min-height:50vh; height:auto; }
        }

    /* Mobile-specific overrides (non-navbar) */
    @media (max-width: 900px) {
      /* buttons touch-friendly */
      .btn, button { padding: 12px 14px; min-height: 44px; }

      /* reduce big paddings for forms and options */
      .switch-group, .deniv-group, .fill-group { padding-right: 16px; }

      /* ensure poster grid is comfortable */
      .poster-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    }

          /* Cadre entier qui contient le formulaire de droite (onglets + champs réponses + boutons valider) */
        .tabs-container { background:#1e380806; border-radius:25px; overflow:hidden; display:flex; flex-direction:column; }

         /* Styles pour les onglets */
         /* Cadre autour des onglets selectionné */
        .tab-header { display:flex; background:#0e0e48; border-radius:25px; padding:10px; }
        
        /* Onglet selectionné */
        .tab-header button { background:inherit; border:none; cursor:pointer; padding:10px; transition:.3s; font-size:15px; width:33.33%; }

        /* Onglet survolé */
        .tab-header button:hover { background:#b2d4ec; color:#0e0e48; }

        /* Onglet selectionné */
         .tab-header button.active { background:#e3eaef; color:#0e0e48; }

         /* Cadre du tour */
        .tab-content { display:none; padding:10px; border:0; flex-grow:1; overflow-y:auto; }
        .tab-content.active { display:block; }

         /* Styles du formulaire */
        .form-group { margin-bottom:0; }
        label { display:block; margin:5px 0; font-weight:bold; font-family: 'Oswald', sans-serif; white-space:normal; overflow-wrap:break-word; width:auto; max-width:100%; }
        select, input[type="file"], input[type="text"], button { min-width: 0; max-width: 100%; width: auto; padding:6px; margin-top:5px; box-sizing:border-box; font-size:16px; border-radius:10px; border-width:.5px; font-family: 'Oswald', sans-serif; }

      /* Reserve space for the YGB promo block to avoid CLS when it's injected dynamically */
      .ygb-promo {
        min-height: 320px; /* adapte à la vraie hauteur si besoin */
        position: relative;
      }

      /* Simple skeleton variant you can toggle by adding .skeleton to the section */
      .ygb-promo.skeleton::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02));
        z-index: 0;
      }

      /* Poster thumbnail helper: reserve aspect ratio and ensure good cover behaviour */
      .poster-thumb {
        aspect-ratio: 3 / 4;
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        background: #f6f7fb; /* neutral placeholder while loading */
      }

      /* Ensure above-the-fold images that should be eager can be marked explicitly */
      .no-lazy { loading: eager; }

        /* Styles du formulaire pour l'onglet "Tes infos" uniquement" */
        #Tes\ infos .form-group { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 15px; }
        #Tes\ infos label { flex: 0 0 auto; margin-right: 10px; text-align: left; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
        #Tes\ infos input[type="text"], 
        #Tes\ infos select { flex: 1; padding: 8px; font-size: 14px; min-width: 0; max-width: 100%; width: auto; }
        
        .color-options { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
        .color-circle { width:40px; height:40px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
        .color-circle:hover { border:2px solid #10346d; }
        .color-circle.selected { border:2px solid #ffba7d; }
        .color-option input { display:none; }

         /* Bouton pour valider */
        button { background:#0e0e48; color:#fff; border:none; cursor:pointer; font-size:22px; margin-top:20px; font-family:'Bebas Neue',sans-serif; padding:10px; }

        /* Survol bouton pour valider */
        button:hover { background:#b2d4ec; color:#0e0e48; }

        #result { margin-top: 30px; }
        #result img { width: 20%; max-width: 100%; margin-top: 20px; }

        /* Cacher le logo de Mapbox sur la carte */
        .mapboxgl-ctrl-logo { display:none !important; }

        /* Bouton style de cartes*/
        .map-style-options { display:flex; flex-wrap:wrap; gap:15px; }
        .map-style-options div { display:flex; flex-direction:column; align-items:center; text-align:center; margin:0; }
        .map-style-circle { width:70px; height:70px; border-radius:50%; background-size:cover; background-position:center; cursor:pointer; border:2px solid transparent; }
        .map-style-circle:hover { border:2px solid #10346d; }
        .map-style-circle.selected { border:2px solid #ffba7d; }

         /* Style pour "Tes options" dans le formulaire de droite */
        .switch-group { margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; padding-right:100px; }
        .switch-options { display:flex; gap:10px; width:140px; justify-content:center; margin-left:auto; }
        .switch-option { flex: 0 0 auto; width:50px; }
        .switch-option input[type="radio"] { display:none; }
        .switch-option label { display:block; padding:6px 12px; text-align:center; background:#fff; border:2px solid #0e0e48; border-radius:10px; cursor:pointer; transition:.3s; font-size:14px; white-space:nowrap; }
        .switch-option  input[type="radio"]:checked + label { background:#0e0e48; color:#fff; }

        .switch-group > label {
            margin-bottom: 0;
            flex: 0 0 auto;
        }
        
        /* D+ */
        

        /* Style pour les options du D+ */
        .deniv-group { margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; padding-right:100px; }
        .deniv-options { display:flex; gap:10px; width:140px; justify-content:center; margin-left:auto; }
        .deniv-option { flex: 0 0 auto; width:50px; }
        .deniv-option input[type="radio"] { display:none; }
        .deniv-option label { display:block; padding:6px 12px; text-align:center; background:#fff; border:2px solid #0e0e48; border-radius:10px; cursor:pointer; transition:.3s; font-size:14px; white-space:nowrap; }
        .deniv-option  input[type="radio"]:checked + label { background:#0e0e48; color:#fff; }

        .deniv-group > label {
            margin-bottom: 0;
            flex: 0 0 auto;
        }        
        
         /* Style pour les couleurs du graphe du denivelé */
        #elevation_color_container { transition:.3s; max-height:0; margin:0; padding:0; overflow:hidden; opacity:0; pointer-events:none; }
        #elevation_color_container.visible { max-height:300px; opacity:1; pointer-events:auto; margin-bottom:10px; }

         /* Style pour les options de remplissage du graphe du dénivelé */
        .fill-group { margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; padding-right:100px; }
        .fill-options { display:flex; gap:10px; width:140px; justify-content:center; margin-left:auto; }
        .fill-option { flex: 0 0 auto; width:50px; }
        .fill-option input[type="radio"] { display:none; }
        .fill-option label { display:block; padding:6px 12px; text-align:center; background:#fff; border:2px solid #0e0e48; border-radius:10px; cursor:pointer; transition:.3s; font-size:14px; white-space:nowrap; }
        .fill-option  input[type="radio"]:checked + label { background:#0e0e48; color:#fff; }
        
        .fill-group > label {
            margin-bottom: 0;
            flex: 0 0 auto;
        }

        /* Pour masquer la colonne du graphe */
        .chart-column.hidden {
            display: none;
        }

        /* FICHIER SELECTIONNE*/ 
        
        /* Style pour le conteneur du input file */
        .custom-file-upload { border:1px #0e0e48; border-radius:10px; padding:2px; text-align:center; cursor:pointer; margin:10px; transition:.3s; background:#f8f9fa; }

        /* Style pour le survol conteneur du input file */
        .custom-file-upload:hover { background:#e3eaef; border-color:#10346d; }

        /* Cache l'input file original : bouton pour ajout du fichier gpx  */
        .custom-file-upload input[type="file"] { display:none; }

        /* Style pour le texte */
        .file-upload-text { font-family:'Oswald',sans-serif; font-size:14px; color:#0e0e48; margin:0; }

        /* Style pour le nom du fichier sélectionné */
        .file-name { font-size:18px; color:#0e0e48; word-break:break-all; text-align:center; display:block; }

        /* LISTE DEROULANTE */ 
        
        /* Style pour le conteneur des listes déroulantes */
        .chrono-container { display: flex; align-items: center; gap: 10px; margin-top: 0px; }

  /* Style pour liste déroulante du chrono */
  .chrono-container select { flex: 1; padding: 5px; border: 1px solid #ddd; border-radius: 10px; font-size: 16px; font-family: 'Oswald', sans-serif; cursor: pointer; color: #0e0e48; background-color: white; text-align: center; }
  .chrono-container option { font-family: 'Oswald', sans-serif; }

        /* Style pour les séparateurs (c'est les "":"" entre les heures et minutes) */
        .chrono-separator { font-size: 15px; color: #0e0e48; }

        /* Style au survol */
        .chrono-container select:hover { border-color: #0e0e48; }

        /* Style au focus */
        .chrono-container select:focus { outline: none; border-color: #0e0e48; box-shadow: 0 0 0 2px rgba(72, 36, 14, 0.1); }

        
        /* DATE */
        
  /* Style pour liste déroulante de la date */
  .date-container { display: flex; align-items: center; gap: 10px; margin-top: 0px; }
  .date-container select { flex: 1; padding: 5px; border: 1px solid #ddd; border-radius: 10px; font-size: 16px; font-family: 'Oswald', sans-serif; cursor: pointer; color: #0e0e48; background-color: white; text-align: center; }
  .date-container option { font-family: 'Oswald', sans-serif; }

        /* Champ année, mois, jour qui s'adpate a la taille */
        #year, #month, #day { width: auto !important; text-align: center; }

        /* Style pour les séparateurs (c'est les / entre l'année et le mois p) */
        .date-separator { font-size: 15px; color: #0e0e48; }

        /* Style pour la date dans les résultats */
        .date-display { font-size:12px; text-align:center; font-family:'Oswald',sans-serif; color:inherit; margin:0;  margin-bottom: 10px }

        .results-column.large-text p { font-size: 18px; font-weight: bold; margin-top: 10px; }

        .date-display + .results-column.large-text { margin-top: 2px; /* Espace entre la date et les résultats */ text-align: center; /* Centrer les résultats */  color: inherit; /* Hérite de la couleur parente */ }

    
        /* Cercle de la couleur personnalisée avec un contour fixe */
            .color-circle.custom-color { position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; /* Pas de fond directement */ cursor: pointer; }

            /* Fond multicolore à l'intérieur */
            .color-circle.custom-color::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(red, orange, yellow, green, blue, purple, red); /* Arc-en-ciel */ z-index: 0; transition: background-color 0.3s ease; /* Transition douce */ }

            /* Aperçu de la couleur sélectionnée (couvre le fond multicolore) */
            .color-circle.custom-color .custom-color-preview { position: absolute; width: 40%; /* Taille légèrement plus petite pour donner un effet de bordure */ height: 40%; border-radius: 50%; background-color: transparent; /* Initialement transparent */ z-index: 1; }

            /* Input de type couleur (invisible mais fonctionnel) */
            .color-circle.custom-color input[type="color"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; /* Invisible mais interactif */ cursor: pointer; z-index: 2; }

            /* Gestion des cercles de couleurs du texte */
            .text-color-group { flex-direction: column; /* Place le label au-dessus des couleurs */ align-items: flex-start; padding-right: 0; /* Supprime l'espace à droite */ }

            .color-options-wrapper { display: flex; flex-wrap: wrap; max-width: 500px; /* Ajuste pour limiter à deux lignes */ gap: 8px; }

            /* Bouton acheter qui apparait uniquement quand on clique générer la carte, positionner sous bottom container (les resultats) */
            .purchase-button-container { width:100%; text-align:center; margin-top:30px; }

    /* Ajout styles boutons, cartes, grille */
    .card{border:1px solid #eee;border-radius:16px;padding:1rem;box-shadow:0 6px 24px rgba(0,0,0,.05)}
    .grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
    .btn{padding:.6rem 1rem;border-radius:12px;border:1px solid #ddd;cursor:pointer}
    .btn.primary{background:#111;color:#fff;border-color:#111}

    /* === LOGIN PAGE === */
.login-container {
  max-width: 400px;
  margin: 60px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.1);
  padding: 2em;
}

.login-container h2 {
  text-align: center;
  margin-bottom: 1em;
  font-family: 'Oswald', sans-serif;
  color: #0e0e48;
}

.login-container label {
  display: block;
  margin-top: 1em;
  font-weight: bold;
}

.login-container input {
  width: 100%;
  padding: 0.7em;
  margin-top: 0.3em;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: 'Oswald', sans-serif;
}

.login-container button {
  width: 100%;
  margin-top: 1.5em;
  padding: 0.8em;
  background: linear-gradient(90deg, #c9a227 60%, #e3c56a 100%);
  color: #0e0e48;
  border: none;
  border-radius: 6px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.2s;
}

.login-container button:hover {
  background: linear-gradient(90deg, #e3c56a 60%, #c9a227 100%);
  color: #fff;
}

.login-container .error {
  color: #b00;
  margin-top: 1em;
  text-align: center;
}

/* === FORCER largeur des champs sur Register/Login === */

/* Variante compacte */
.signup-form { max-width: 460px; margin: 40px auto; }
.signup-form input[type="email"],
.signup-form input[type="password"],
.signup-form input[type="text"]{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  font-size: 16px;       /* lisible sans zoom mobile */
}

/* Variante carte (auth-card) */
.auth-card .input-wrap{ width: 100% !important; }
.auth-card .input-wrap input{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  font-size: 16px;
}

/* Si un style global limite les inputs, on l'écrase */
form input[type="email"],
form input[type="password"],
form input[type="text"]{
  max-width: 100% !important;
}

/* === Register : champs à 100% de la carte === */
.register-container .auth-body form,
.register-container .field,
.register-container .input-wrap,
.register-container .input-wrap input,
.register-container input[type="text"],
.register-container input[type="email"],
.register-container input[type="password"]{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* (au cas où un style global bride encore) */
.auth-card .input-wrap { width: 100% !important; }
.auth-card .input-wrap input { width: 100% !important; max-width: 100% !important; }

/* ===== HERO ===== */
/*
.hero { }
.hero-bg { }
.hero .hero-bg img { }
.hero-overlay { }
.hero-gradient { }
*/
/* All hero/overlay/gradient styles are now in home.css only. */
/* ===== HIGHLIGHTS ===== */
.home-highlights{ max-width:1100px; margin:24px auto 10px; }
.home-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.home-card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.06); display:flex; flex-direction:column;
}
.home-card img{ width:100%; height:220px; object-fit:cover; display:block; }
.home-card-body{ padding:16px; display:flex; flex-direction:column; gap:8px; }
.home-card-solid{
  padding:22px 18px; display:flex; flex-direction:column; gap:10px; min-height:220px;
  background:linear-gradient(135deg, #f8fafc 0%, #e8eef6 100%);
  border:1px solid #eef2f7; border-radius:16px;
}
.home-card h3{ font-family:'Oswald',sans-serif; color:#0e0e48; margin:0; font-size:1.25rem; }
.home-card p{ margin:0; color:#37507a; }

/* ===== STRIP ===== */
.home-strip{
  max-width:1100px; margin:12px auto 24px; text-align:center;
  color:#37507a; background:#f5f7fb; border-radius:14px; padding:12px 14px;
  border:1px solid #eef2f7;
}
.home-strip p{ margin:0; font-size:.98rem; letter-spacing:.01em; }

/* ===== Buttons (déjà présents, on rajoute tailles) ===== */
.btn.lg{ padding:.9rem 1.4rem; font-size:1.05rem; }
.btn.ghost{
  background:transparent; border:1.5px solid #0e0e48; color:#0e0e48; padding:.55rem .9rem;
}
.btn.ghost:hover{ background:#0e0e48; color:#fff; }



/* --- Footer --- */
.footer-col h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #0e0e48;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col ul li {
  margin-bottom: 6px;
}
.footer-col ul li a {
  color: #37507a;
  text-decoration: none;
}
.footer-col ul li a:hover {
  text-decoration: underline;
}

/* --- Bandeau défilant --- */

/* ---- Résultats de recherche : grille & cartes ---- */
.search-grid-wrap{
  width: 100%;
  margin: 0 auto;
}

.poster-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

.poster-card{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.poster-card .thumb{
  width: 100%;
  aspect-ratio: 3 / 4;          /* cadre vertical fixe */
  overflow: hidden;
  background: #f6f7fb;
}

.poster-card .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* ou "contain" si tu préfères */
  display: block;
}

.poster-card .meta{
  padding: 10px 12px 6px;
}

.poster-card .title{
  font-size: 1rem;
  line-height: 1.25;
  color: #0e0e48;
  margin: 0 0 4px 0;
}

.poster-card .sub{
  font-size: .85rem;
  color: #6b7280;
}

.poster-card .price{
  margin-top: 6px;
  font-weight: 700;
  color: #0e0e48;
}

.poster-card .actions{
  padding: 10px 12px 12px;
  margin-top: auto;
}

/* Empêche toute image « orpheline » d’exploser la mise en page */
.search-results-container img{
  max-width: 100%;
  height: auto;
}

/* Un peu plus compact en mobile */
@media (max-width: 480px){
  .poster-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .poster-card .title{ font-size: .95rem; }
}


  /* --- Renouvellement mot. depasse Bloc auth compact --- */
  .auth-shell.reset-confirm{
    max-width: 460px;
    margin: 48px auto;
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 28px rgba(14,14,72,.08);
    padding:28px 22px 24px;
  }
  .auth-title{
    font-family:'Designer','Oswald','Bebas Neue',sans-serif;
    font-size: clamp(22px,3.6vw,32px);
    color:#0e0e48;
    text-align:center;
    margin:0 0 6px;
    letter-spacing:.02em;
  }
  .auth-sub{
    text-align:center;
    color:#5b6f95;
    margin:0 0 18px;
    font-size:.98rem;
  }
  .auth-field{
    margin:12px 0;
  }
  .auth-label{
    display:block;
    font-weight:600;
    color:#0e0e48;
    margin:0 0 6px;
    font-size:.95rem;
  }
  .input-wrap{
    position:relative;
  }
  .input{
    width:100%;
    height:44px;
    border:1px solid #e6e9f2;
    border-radius:12px;
    padding:0 42px 0 12px;
    font-size:1rem;
    background:#fafbff;
  }
  .toggle-eye{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    border:0; background:transparent; cursor:pointer;
    font-size:18px; color:#5b6f95;
  }
  .hint{
    margin-top:6px; font-size:.85rem; color:#5b6f95;
  }
  .meter{
    height:6px; border-radius:999px; background:#eef2f9; margin-top:10px; overflow:hidden;
  }
  .meter > span{
    display:block; height:100%; width:0%;
    background:linear-gradient(90deg,#c9a227,#e3c56a);
    transition:width .2s ease;
  }
  .auth-actions{
    display:flex; gap:10px; margin-top:16px; align-items:center; justify-content:center;
  }
  .btn.primary{ border:none; border-radius:999px; padding:10px 18px; font-weight:700; }
  .link-muted{ color:#5b6f95; text-decoration:underline; font-size:.95rem; }
  .msg{
    padding:10px 12px; border-radius:10px; font-size:.95rem; margin:10px 0 0;
  }
  .msg.error{ background:#fff3f2; color:#b42318; border:1px solid #ffd1cc; }
  .msg.success{ background:#ecfdf3; color:#067647; border:1px solid #abefc6; }

  @media (max-width:560px){
    .auth-shell.reset-confirm{ margin:24px 12px; padding:22px 14px; }
  }

/* ===== Blog / Markdown tables - responsive on small screens ===== */
.page-container article table,
.page-container .post-content table,
.page-container .markdown table {
  width: 100%;
  border-collapse: collapse;
}
.page-container article table th,
.page-container article table td,
.page-container .post-content table th,
.page-container .post-content table td,
.page-container .markdown table th,
.page-container .markdown table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

/* Make tables horizontally scrollable on small viewports to avoid cutting cells */
@media (max-width: 820px) {
  .page-container article table,
  .page-container .post-content table,
  .page-container .markdown table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; /* keep header labels together */
  }
  .page-container article table th,
  .page-container article table td {
    white-space: nowrap;
  }
}

/* ===== Legacy navbar styles removed =====
   The modern navbar now uses .site-header, .nav-inner, .nav-actions etc.
   Styles are in navbar.css
   ===== */

/* Uniformiser la taille du titre et du sous-texte dans newsletter */
.newsletter-copy h3,
.newsletter-copy p {
  font-size: 15px !important;   /* même taille */
  line-height: 1.3 !important;  /* même hauteur de ligne */
  font-weight: 600 !important;  /* même intensité */
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}


/* Alignement parfait du texte + champ + bouton sur une seule ligne */
@media (min-width: 821px) {

  .newsletter-inner.container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    text-align: center !important;
    width: 100%;
  }

  /* Bloc texte sur 1 ligne */
  .newsletter-mainline {
    white-space: nowrap !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  .newsletter-mainline .sep {
    display: inline-block;
    padding: 0 12px;
    font-weight: 700;
  }


  /* Formulaire aligné au centre */
   .newsletter-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: auto !important;
  }

  /* ⬇⬇ ALIGNEMENT PARFAIT INPUT + BOUTON ⬇⬇ */
  .newsletter-form input[type="email"],
  .newsletter-form button {
    height: 38px !important;             /* même hauteur */
    box-sizing: border-box !important;
  }

  newsletter-form input[type="email"] {
    max-width: 260px !important;
    padding: 8px 12px !important;
  }

  .newsletter-form button {
    display: inline-flex !important;      /* centre le texte dans le bouton */
    align-items: center !important;
    justify-content: center !important;
    padding: 0 22px !important;          /* plus de padding horizontal, pas vertical */
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
}

/* Alignement parfait du bouton S’INSCRIRE sur desktop */
@media (min-width: 821px) {
  .newsletter-form {
    align-items: center;           /* centre input + bouton */
  }

  /* même hauteur pour l’input et le bouton */
  .newsletter-form input[type="email"],
  .newsletter-form button {
    height: 44px;
  }

  .newsletter-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 22px !important;   /* plus de padding vertical */
    margin-top: 0 !important;
    line-height: 1 !important;
  }
}