/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/




/* ==========================================================================
   1. Settings – Variables, fonts, etc.
   ========================================================================== */

    /* Ajout de la Police Lato */
    
     @font-face {
    font-family: 'Lato';
    src: url('assets/fonts/Lato/Lato-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    }

     @font-face {
    font-family: 'Lato';
    src: url('assets/fonts/Lato/Lato-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    }

     @font-face {
    font-family: 'Lato';
    src: url('assets/fonts/Lato/Lato-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    }

     @font-face {
    font-family: 'Lato';
    src: url('assets/fonts/Lato/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    }

     @font-face {
    font-family: 'Lato';
    src: url('assets/fonts/Lato/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    }

    /* Ajout de la Police Bebas Neue */

     @font-face {
    font-family: 'Bebas Neue';
    src: url('assets/fonts/BebasNeue/BebasNeue-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
    }

    /* Ajout de la Police Shadow Into Light Two */

     @font-face {
    font-family: 'Shadow Into Light Two';
    src: url('assets/fonts/ShadowsIntoLightTwo/ShadowsIntoLightTwo-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
    }

    
    :root{
        --color-1: #FFAE00;
        --color-2: #211F1C;
        --color-3: #FFF5E6;
        
        /* Variables de polices */
        --scale: 1.35;
    --font-base: 1rem; /* 16px */
    --font-body: 'Lato', sans-serif;
    --font-heading: 'Bebas Neue', sans-serif;
    --font-decoration: 'Shadow Into Light Two', sans-serif; 
    }


/* ==========================================================================
   2. Normalize / Reset
   ========================================================================== */

/* ==========================================================================
   3. Base – Éléments HTML bruts
   ========================================================================== */

   body {
      font-family: var(--font-body);
      font-size: clamp(1rem, 1.2vw + 0.8rem, 1rem); /* 16px fluide */
      line-height: 1.6;
      color: var(--color-2) !important;
      margin: 0;
      padding: 0;
      background-color: var(--color-3);
   }

   
   h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      line-height: 1.2;
   }


   h1 { font-size: clamp(2.5rem, 8vw, 6.05rem); /* ~96.8px max */ }
   h2 { font-size: clamp(2rem, 7vw, 4.48rem);  /* ~71.7px max */}
   h3 { font-size: clamp(1.75rem, 6vw, 3.32rem); /* ~53.1px max */}
   h4 { font-size: clamp(1.5rem, 5vw, 2.46rem); /* ~39.4px max */}
   h5 { font-size: clamp(1.25rem, 4vw, 1.83rem); /* ~29.2px max */}
   h6 { font-size: clamp(1.125rem, 3vw, 1.35rem); /* ~21.6px max */}
   p { font-size: clamp(1rem, 1.2vw + 0.8rem, 1rem); /* = 16px fluide */}


/* ==========================================================================
   4. Layout – Grilles, containers, colonnes, structure globale
   ========================================================================== */

   /* Dimension des container */

    @media (min-width: 1550px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1500px;
    }

    .custom-content .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1350px;
    }
    }

    @media (min-width: 1650px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 1750px;
    }
    }


/* ==========================================================================
   5. Components – Boutons, cartes, modals, etc.
   ========================================================================== */

    .cta{
          padding: 0.75rem 1.25rem;
          border-radius: 0.5rem;
          border: none;
          text-decoration: none;
          cursor: pointer;
    }

    .btn{
      font-family: var(--font-heading);
      font-size: 1.3rem;
      padding: 0.75rem 1.25rem;
      border-radius: 0px;
    }

    .btn-color-1{
      background-color: var(--color-1);
      position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    }

    .btn-color-1::before{
      content: "";
      position: absolute;
      top: 0;
      left: -75%;
      width: 50%;
      height: 100%;
      background: rgba(255, 255, 255, 0.4);
      transform: skewX(-20deg);
      transition: left 0.5s ease-in-out;
      pointer-events: none; /* pour ne pas gêner les clics */
      z-index: 1;
    }

    .btn-color-1:hover{
      background-color: var(--color-1);
      color: white !important; 
    }

    .btn-color-1:hover::before{
      left:125%;
    }
 
    .btn-outline-light{
       background-image: linear-gradient(90deg ,white 100%, transparent 0%) !important;
       background-size: 0% 100%;
       background-position: left;
      background-repeat: no-repeat;
      transition: all ease .5s;
    }

    .btn-outline-light:hover{
      background-size: 100% 100%;
      --bs-btn-hover-bg: none;
    }

    .btn-close{
      --bs-btn-close-bg: url('') !important;
    }


   /* CARDS SERVICES ANIUMATIONS */
    .card-service{
      transition: all ease .5s;
      transform: scale(1) !important;
    }

    .card-service:hover {
    transform: scale(1.02) !important;
   }

   .card-service:hover .card-title {
      color: var(--color-1);
   }
      

    .card-service .btn-link::after{
      content: '→';
      text-decoration: none !important;
    }

    .card-service .btn-link{
      transition: all ease .3s;
      transform: scale(1);
    }

    .card-service .btn-link:hover{
      transform: scale(1.05);
    }

/* ==========================================================================
   6. Sections – Styles propres à des pages ou sections spécifiques
   ========================================================================== */

   /* HEADER */

   #masthead .nav-link{
      font-size: 1.3rem;
      font-family: var(--font-heading);
      color: white;
   }

   #masthead .nav-link.active{
      color: var(--color-1) !important;
   }

   /* FORMULAIRE DE CONTACT */

   .form-control{
      border-radius: 0;
   }

   .form-control::placeholder{
      font-weight: 300;
   }

   .cf7-grid label{
      font-family: var(--font-body);
   }

   .wpcf7-spinner{
      display: none;
   }

   


/* ==========================================================================
   7. Utilities – Helpers, classes utilitaires
   ========================================================================== */
   
    .bg-color-1{ background-color: var(--color-1) !important; color: var(--color-2) !important;}
    .bg-color-2{ background-color: var(--color-2) !important; color: white !important;}

    .text-color-1{ color: var(--color-1) !important;}
    .text-color-2{ color: var(--color-2) !important;}

    .border-color-1{ border: solid 2px var(--color-1) !important;}

    .font-deco{ font-family: var(--font-decoration); }
    .font-head{ font-family: var(--font-heading); }