/*
 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
*/




:root{
    --couleur-1: #5180C6;
    --couleur-2: orange;/*EEFFD9*/
    --couleur-3: #40669f; 
    --couleur-4: #F5F5F5;




    --bs-border-color: var(--couleur-4);
    --bs-primary-bg-subtle: white;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(41, 253, 13, 0.25) !important;
}

body{font-family: "Montserrat", sans-serif;background-color: var(--couleur-4);}

.couleur-1{color: var(--couleur-1);}
.couleur-2{color: var(--couleur-2);}
.couleur-3{color: var(--couleur-3);}
.couleur-4{color: var(--couleur-4);}
.bg-couleur-1{background-color: var(--couleur-1);}
.bg-couleur-2{background-color: var(--couleur-2);}
.bg-couleur-3{background-color: var(--couleur-3) !important;}
.bg-couleur-4{background-color: var(--couleur-4);}





@font-face {
    font-family: 'Blippo';
    src: url('/wp-content/themes/bootscore-child/assets/font/blippo/blippo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Exemple d'utilisation */
.blippo {
    font-family: 'Blippo', sans-serif;
}
















/* 
h1 {
  font-size: 4rem;
  font-weight: 900;
  
} */
h1 {
  font-size: clamp(4rem, 5vw, 3.5rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 900;
}

@media (max-width: 1440px) {h1 {font-size: clamp(2.8rem, 4vw, 2.5rem); }}
/* @media (max-width: 768px) {h1 {font-size: clamp(2rem, 3.5vw, 2rem);}} */

h2 {

  font-size: 3rem;
  font-weight: 900;
}
@media (max-width: 1440px) {h2 {font-size: clamp(2rem, 4vw, 2.5rem); }}

.widget-title.h5, .rp-title{
  color: var(--couleur-1);
  

}



h3{
 
  font-size: 2rem;
  font-weight: 900;
}


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

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


.nav-pills {

  --bs-nav-pills-link-active-bg: var(--couleur-1);
  --bs-nav-pills-link-active-color: #fff;
}
.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link {
border: solid 1px var(--couleur-1);
color: var(--couleur-1);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: white;
  
}

/* ------------------------------------ HEADER ------------------------------------ */

.onglet-shadow{
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.415);
}

.box-shadow{
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.415);
}
/* ------------------------------------ /HEADER ------------------------------------ */

/* 1. Variables (facile à ajuster) ------------------------------ */
:root{
    --bl-height:        72px;
    --bl-padding-x:     2.2rem;
    --bl-radius:        9999px;          /* pilule */
    --bl-bg:            #ffffff;
    --bl-shadow:        0 6px 20px rgba(75, 71, 137, .25); /* lavande + blur */
    --bl-font:          700 1.6rem/1 "Inter", sans-serif;
    --bl-text:          #47407c;
    --bl-gap:           1.4rem;
  }





.scroll-custom {
  scrollbar-width: auto; /* Firefox */
  scrollbar-color: var(--couleur-4) transparent;
  overflow-y: auto;
}

/* Chrome, Edge, Safari */
.scroll-custom::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.scroll-custom::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-custom::-webkit-scrollbar-thumb {
  background-color: var(--couleur-4);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.scroll-custom::-webkit-scrollbar-thumb:hover {
  background-color: var(--couleur-4);
  opacity: 0.8;
}




.awesomplete{
    width: 100%;
}



.border-radius-lg-custom{
  border-radius :  10px;
}
@media(min-width: 992px){
.border-radius-lg-custom{
  border-radius : 100px 10px 10px 100px;
}
}













/* Palette (modifiable) */
:root{
  --btn-bg        : var(--couleur-1); /* vert foncé */
  --btn-highlight : var(--couleur-3); /* vert clair */
  --btn-radius    : 15px;
  --btn-ease      : cubic-bezier(.77,0,.175,1);
}

/* ===== Bouton de base ===== */
a.btn.btn-primary.btn-fancy{
  font-weight:600;
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  padding:24px 24px 24px 32px;
  border-radius:var(--btn-radius);
  background:var(--btn-bg);
  color:#fff;                 /* fallback si JS désactivé */
  position:relative;
  overflow:hidden;
  transition:all .4s var(--btn-ease);
  border :none !important;
}




/* Texte */
a.btn-fancy .text{
  position:relative;
  z-index:2;
  margin-right:32px;
}

/* Flèche */
a.btn-fancy .arrow{
  position:relative;
  z-index:2;
  transform-origin:left;
  transition:transform .4s var(--btn-ease);
}

/* Pastille / surbrillance */
a.btn-fancy::before{
  content:'';
  position:absolute;
  top:50%; right:16px;
  width:32px; height:32px;
  background:var(--btn-highlight);
  border-radius:var(--btn-radius);
  transform:translateY(-50%);
  z-index:1;
  transition:all .4s var(--btn-ease);
}

/* ===== Hover / focus ===== */
a.btn-fancy:hover,
a.btn-fancy:focus{
  text-decoration:none;
}

a.btn-fancy:hover .arrow,
a.btn-fancy:focus .arrow{
  transform:rotate(45deg) translateX(-8px);
}

a.btn-fancy:hover::before,
a.btn-fancy:focus::before{
  right:0;
  width:100%; height:100%;
}

/* ===== Accessibilité clavier ===== */
a.btn-fancy:focus-visible{
  outline:3px solid var(--btn-highlight);
  outline-offset:4px;
}



a.btn.btn-terciary.btn-fancy{
  font-weight:600;
  font-size:16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  padding:24px 24px 24px 32px;
  border-radius:var(--btn-radius);

  
  color:#fff;                 /* fallback si JS désactivé */
  position:relative;
  overflow:hidden;
  transition:all .4s var(--btn-ease);
  border: solid 2px white;
}






.btn.btn-secondary{
  padding: 10px 20px;
  border-radius: 5px;

       background-color: var(--couleur-1);
    border : 1px solid var(--couleur-1);
}
.btn.btn-secondary:hover{
    background-color: var(--couleur-3);
    border : 1px solid var(--couleur-3);
}













/* ===== Couleurs (adaptées à ta charte) ===== */

/* ===== Bouton ===== */
/* .btn-primary{
  background:#178d8f;border:none;
}
.btn-primary:hover{background:#0e6b6d;} */


#footer-menu{
  text-align: center;
  width: fit-content;
  margin: auto;
}





#preloader{
    background-color: var(--couleur-1) !important;
}
#preloader #status{
    color: white !important;
}








#acf-content ol li {
  list-style: none;
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.75em;
}

#acf-content ol li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--couleur-1); /* vert type "check" */
  font-weight: bold;
}
#acf-content ul li {
  list-style: none;
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.75em;
}

#acf-content ul li::before {
  content: "➤";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--couleur-1); /* vert type "arrow" */
  font-weight: bold;
}



.accordion-button{transition: all 0.2s ease-in-out;}
.accordion-button[aria-expanded="true"]{
  font-weight: 700;
  color: var(--couleur-1);
}




.dropdown-item{
  text-wrap: auto;
}
.dropdown-menu{
  width: 250px;
  --bs-dropdown-link-active-bg: var(--couleur-1);
}




/* 
#bootscore-navbar .nav-link {
  font-weight: bold;
} */
#bootscore-navbar .nav-link.active, .nav-link:hover {
  color: var(--couleur-1) !important;

}





footer{
  background-color: white;
}





#footer-menu .nav-link{
  color: black !important;
    font-weight: bold;
}




.hover-scale{  transition: transform 0.3s ease-in-out;}
.hover-scale:hover{transform: scale(1.05);}


/* ------------------------------------ MENU BOOTSCORE ------------------------------------ */

.card{border: none !important;box-shadow: none !important;}




footer a {
  color: black  !important;
 text-decoration: none;
}


.navbar-nav{

  align-items: center;
} 



















/* 1) – conteneur-sécurité : rend la table scrollable si l’écran est trop étroit */
/* -------------------------------------------------------------------
   TABLES ACF – largeur 100 % + colonnes qui se partagent l’espace
------------------------------------------------------------------- */

#acf-content table {
  width: 100%;              /* occupe toute la zone de contenu */
  max-width: 100%;
  table-layout: fixed;      /* ⬅️ clé : divise la largeur totale
                                 par le nombre de colonnes */
  border-collapse: collapse;
  border-spacing: 0;

  /* scroll d’urgence sur mobile très étroit */
  overflow-x: auto;         /* reste inactif sur desktop, se déclenche
                               si la table déborde malgré tout */
}

/* cellules : “indice” pour empêcher une colonne d’étirer l’ensemble */
#acf-content table th,
#acf-content table td {
  width: 1%;                /* toutes les colonnes partent à parts égales ;
                               le contenu ajuste ensuite en wrap */
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: .95rem;
  word-break: break-word;   /* casse les mots trop longs */
}

/* Habillage (inchangé) */
#acf-content table thead { background: var(--couleur-1); color:#fff; }
#acf-content table tbody tr:nth-child(odd){ background:rgba(0,0,0,.025); }
#acf-content table tbody tr:hover{ background:rgba(0,0,0,.06); }
#acf-content table{ border-radius:.5rem; box-shadow:0 2px 6px rgba(0,0,0,.04); }

/* Compact sur ≤ 480 px */
@media (max-width:480px){
  #acf-content table th,
  #acf-content table td{ padding:.5rem .75rem; font-size:.85rem; }
}








/* ================================================================
   STYLE GLOBAL (desktop & tablette ≥ 601 px) – votre feuille actuelle
   reste inchangée ; on complète juste la personnalisation du scroll
================================================================ */
#acf-content table{
  scrollbar-width: thin;                           /* Firefox */
  scrollbar-color: var(--couleur-1) transparent;
}
#acf-content table::-webkit-scrollbar{
  height: 8px;                                     /* Chrome/Safari */
}
#acf-content table::-webkit-scrollbar-thumb{
  background: var(--couleur-1);
  border-radius: 4px;
}

/* ================================================================
   MODE “CARTE” (≤ 600 px) – s’active seulement quand JS aura ajouté
   data-title="" dans toutes les <td>
================================================================ */
@media (max-width: 600px){
  /* On neutralise le scroll horizontal : la table redevient bloc fluide */
  #acf-content table{
    display:block;
    overflow:visible;
  }
  /* On masque visuellement l’en-tête pour ne pas le retrouver 2 fois */
  #acf-content table thead{
    /* conserve l’accessibilité mais sort de l’affichage */
    position:absolute;
    top:-9999px;
    left:-9999px;
  }
  /* Chaque ligne devient une carte */
  #acf-content table tbody tr{
    display:block;
    margin:.75rem 0;
    padding:1rem;
    background:#fff;
    border-radius:.75rem;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
  }
  /* Les cellules se rangent les unes sous les autres */
  #acf-content table tbody td{
    display:block;
    width:auto;            /* annule le width:1% de la version desktop */
    padding:.35rem 0;
    border:none;           /* plus de traits verticaux */
    text-align:left;
    position:relative;
    font-size:.9rem;
  }
  /* Affiche le titre de colonne avant la valeur grâce au data-title */
  #acf-content table tbody td::before{
    content:attr(data-title);
    font-weight:600;
    color:var(--couleur-1,#1e293b);
    display:block;
    margin-bottom:.15rem;
  }
}