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

    :root{
        --header-height: 00px;
        --scroll-offset: var(--header-height);
        scroll-behavior: smooth;
    }

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

    @font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-VariableFont_opsz\,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    }

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

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

 

   html{
    scroll-padding-top: var(--scroll-offset);
   }


   body {
  position: relative;
  z-index: -2;
  background-image: url('./assets/img/papier-froisse-texture.jpg') !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* Filtre blanc semi-transparent */
body::before {
  content: "";
  position: fixed; /* reste fixe même au scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: -1; /* reste derrière tout le contenu */
}

/* Optionnel : garantir 1rem = 16px */
body:not(.wp-admin) html { font-size: clamp(14px, 1vw + 12px, 16px); }

/* Titres fluides (320px → 1440px) — min -20% */
body:not(.wp-admin) h1, body:not(.wp-admin) .fs-1 { font-size: clamp(2.442rem, calc(45.353px + 1.086vw), 3.812rem) !important; }
body:not(.wp-admin) h2, body:not(.wp-admin) .fs-2 { font-size: clamp(1.953rem, calc(36.226px + 0.887vw), 3.062rem) !important; }
body:not(.wp-admin) h3, body:not(.wp-admin) .fs-3 { font-size: clamp(1.563rem, calc(29.033px + 0.693vw), 2.438rem) !important; }
body:not(.wp-admin) h4, body:not(.wp-admin) .fs-4 { font-size: clamp(1.250rem, calc(23.283px + 0.536vw), 1.938rem) !important; }
body:not(.wp-admin) h5, body:not(.wp-admin) .fs-5 { font-size: clamp(1.000rem, calc(18.574px + 0.446vw), 1.562rem) !important; }
body:not(.wp-admin) h6, body:not(.wp-admin) .fs-6 { font-size: clamp(0.800rem, calc(14.857px + 0.357vw), 1.250rem) !important; }


/* Serrage supplémentaire sur très petits téléphones (≤360px) */
@media (max-width: 425px) {
  body:not(.wp-admin) h1, body:not(.wp-admin) .fs-1 { font-size: 1.65rem !important; }
  body:not(.wp-admin) h2, body:not(.wp-admin) .fs-2 { font-size: 1.45rem !important; }
  body:not(.wp-admin) h3, body:not(.wp-admin) .fs-3 { font-size: 1.30rem !important; }
}

/* (Optionnel) Corps de texte un peu fluide aussi, mais très doux */
body:not(.wp-admin) body { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); }


   body:not(.wp-admin) h1, body:not(.wp-admin) h2, body:not(.wp-admin)  h3, body:not(.wp-admin) h4, body:not(.wp-admin) h5, body:not(.wp-admin) h6{ font-family: 'Joan'; }

   P{ font-family: 'Inter'; }



/* ==========================================================================
   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;
    }
    }

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


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

    /* .btn-outline-dark, .btn-dark, .btn-outline-light{
      padding: 8px 25px;
      border-radius: 5px;
    } */

     .btn-main{
      padding: 8px 25px !important;
     }

   /* Carrousel de catégories accueil */
   .swiper-button{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        inline-size: 44px; block-size: 44px;
        display: grid; place-items: center;
        border: none; border-radius: 999px;
        opacity: 1;
        color: white;
        cursor: pointer;
        z-index: 5;
    }

    @media (min-width: 1024px) {
    .cat-swiper .swiper-slide{
      min-height: 750px;
    }
  }

  @media (max-width: 1024px) {
    .cat-swiper .swiper-slide{
      min-height:600px;
    }
  }

    .swiper-button-prev-custom { left: 8px; }
    .swiper-button-next-custom  { right: 8px; }


    .swiper-button:hover, .classic-swiper-button:hover { opacity: 0.8; }

    .cat-swiper .swiper-pagination-bullet, .contact-swiper .swiper-pagination-bullet{ background: white; opacity: 0.6; }
    .cat-swiper .swiper-pagination-bullet-active, .contact-swiper .swiper-pagination-bullet-active{ opacity: 1; }

    .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{
      top: auto;
      left: auto;
    }

    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
      background: black;
    }


    /* Swiper single post bouton */

.swiper .swiper-button-prev.is-custom,
.swiper .swiper-button-next.is-custom {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0,0,0,0.78);           /* lisible sur fond clair */
  border: 2px solid rgba(255,255,255,0.95);/* lisible sur fond sombre */
  color: #fff;                              /* couleur du SVG via currentColor */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
  z-index: 10; /* au-dessus des slides */
}

/* Masquer l’icône par défaut de Swiper */
.swiper .swiper-button-prev.is-custom::after,
.swiper .swiper-button-next.is-custom::after { content: none; }

.swiper .swiper-button-prev.is-custom svg,
.swiper .swiper-button-next.is-custom svg {
  width: 20px; height: 20px; display: block;
}

.swiper .swiper-button-prev.is-custom:hover,
.swiper .swiper-button-next.is-custom:hover {
  background: rgba(0,0,0,0.9);
  transform: translateY(-1px);
}

.swiper .swiper-button-disabled.is-custom {
  opacity: .45;
  cursor: default;
  transform: none;
}

/* Compacité mobile */
@media (max-width: 576px) {
  .swiper .swiper-button-prev.is-custom,
  .swiper .swiper-button-next.is-custom { width: 40px; height: 40px; }
  .swiper .swiper-button-prev.is-custom svg,
  .swiper .swiper-button-next.is-custom svg { width: 18px; height: 18px; }
}

.swiper-pagination.is-custom .swiper-pagination-bullet{ background: white; opacity: 0.6; }
.swiper-pagination.is-custom .swiper-pagination-bullet-active{ opacity: 1; }

    /* Cards thématiques photothèque */

    .card-theme-photo .card-title a{ text-decoration: none !important;}

    .card-theme-photo:hover .card-title > a{ text-decoration: underline !important; }
    
    .card-theme-photo:hover .btn-outline-dark{
      background: #212529 !important;
      color: white;
    }

    .card-theme-photo:hover{
      border: solid #212529 2px !important;
    }

    /* Card affichage des thématiques */

      .cat-card-link .fa-chevron-right{
        transition: all ease .3s;
    }

    .cat-card-link:hover .fa-chevron-right{
        transform: translateX(10px);
        opacity: 0.6;
    }

    .cat-card-link .titre-cat{
        transition: all ease .3s;
    }

    .cat-card-link:hover .titre-cat{
        opacity: 0.6;
    }
/* ==========================================================================
   6. Sections – Styles propres à des pages ou sections spécifiques
   ========================================================================== */

   #masthead .nav-link{ font-family: 'Inter';}

   #masthead, #page{ transition: all ease .3s ;}

   #bootscore-navbar{ margin: auto !important; }

   .inpage-hit--current{
    background-color: rgba(0, 128, 0, 0.40);
    color: black;
   
   }

  .wpcf7-spinner{ display: none !important;}


  .dropdown-menu{ inset: 0px auto auto 0px !important;}
  /* Optionnel : évite que la flèche "split" ait un look de bouton dans la navbar */
.navbar .dropdown-toggle.dropdown-toggle-split {
  border: 0;
  background: transparent;
  line-height: 1;
}

@media (min-width: 1400px) {
  .navbar .dropdown-menu {
    /* marge de sécurité de 16px et hauteur navbar supposée ~56px */
    max-height: calc(100vh - 72px) !important; /* ajuste si ta navbar est plus grande */
    overflow-y: hidden !important; 
    overscroll-behavior: contain !important; /* évite de propager le scroll à la page */
  }
}

/* (Menu Bootscore par défaut désactivé au profit de menu-custom) */


  /* Menu de filtres */

  .pwf-woo-filter-inner{ border: none !important; box-shadow: none !important; gap: 1rem; display: flex; flex-direction: column;}

  .pwf-field-item-container{ margin:0 !important;}

  .pwf-field-item-search .pwf-field-item-title{ display: none;}

  .pwf-field-item:not(.pwf-field-item-search) { padding: 0.75rem; border: solid #212529 1px; border-radius:0.25rem ;}

  .pwf-search-field input{ border-radius:0.25rem ; border: solid #212529 1px;}

  .pwf-field-item .pwf-field-item-title .text-title{ font-family: 'Joan'; font-size: 1.5rem;}

  /* Pagination wordpress */

  .pagination .nav-links .page-numbers{ border:none !important; text-decoration: none !important; background-color: #D9D9D9 !important ; color: black !important; border-radius: 0.25rem; padding: 0.25rem 0.5rem;}
  .pagination .nav-links .page-numbers:hover{
    background-color: #212529 !important ; color: white !important;
  }
  .pagination .nav-links .page-numbers.current{ background-color: #212529 !important ; color: white !important; }


      .cut-text {
  max-height: 230px; /* ✅ ajuste la hauteur selon ton besoin */
  overflow: hidden;
  position: relative;
}

/* ✅ Effet de fondu blanc en bas */
.cut-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px; /* hauteur du dégradé */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

/* ==========================================================================
   7. Utilities – Helpers, classes utilitaires
   ========================================================================== */

    .font-joan{ font-family: 'Joan' !important;}
    .font-inter{ font-family: 'Inter' !important;}

    .smooth-shadow{ -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.25); box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.25);}

      /* Titre + trait à droite */
      .hr-title{
      display: flex;
      align-items: center;
      gap: 2rem;                 /* espace entre le texte et le trait */
      font-weight: 400;            /* ajuste si besoin */
      line-height: 1.2;
      color: inherit;              /* hérite de la couleur du texte */
      }

      /* Le trait à droite */
      .hr-title::after{
      content: "";
      flex: 1 1 auto;              /* prend tout l’espace à droite */
      border-top: 1px solid currentColor;
      opacity: .6;                 /* léger comme sur l’exemple */
      }

      /* Variantes (optionnel) */
      /* plus fin ou plus épais */
      .hr-title.--thin::after  { border-top-width: 1px; }
      .hr-title.--bold::after  { border-top-width: 2px; }

      /* si tu veux que le trait soit plus clair */
      .hr-title.--muted::after { opacity: .35; }

      .sticky-offset { top: var(--header-height) !important;}

      .sticky-offset-margin { top: calc(var(--header-height) + 20px) !important;}
      
      .text-logo{ font-size: 2rem; }
      .text-slog{ font-size: 1.1rem;}

        @media (max-width: 1550px) {
          .text-logo{ font-size: 1.7rem; }
          .text-slog{ font-size: 0.9rem;}
        }

       










        .dropdown-menu {
          --bs-dropdown-link-active-bg: black !important;
        }








/* 
        .container table {
          background-color: #e2e2e2;
          width: 100%;
          border-left: solid black 5px;
          margin-bottom: 50px;
          padding-left : 50px;
        }


        .container table thead tr:first-child th {
          
        color: black;
             padding-left: 15px;

        }


      */



/* 
  .container table {
  width: 100%;

  margin:25px auto;
  font-family:'Inter';
  color: #555555;
 
  border-left:8px solid black ;
  line-height:1.6;
  position: relative;
  background:#EDEDED;
}

.container table::before{
  content: "\201C";
  font-family: Open Sans;
      font-style: italic;
  color:#D31800;
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

.container table::after{
  content: '';
}

.container table thead {

display: block; 
padding:1.2em 30px 1.2em 75px;
}  
      




.container table thead tr:nth-child(2) th {
  font-weight:300 !important;
  font-size: 1.3em !important;
 
          
         
        }  */





















        
/* TABLE principale */
.container table{
  width: 100%;
  margin: 15px auto;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #555;
  line-height: 1.6;
  position: relative;
  background: transparent;           /* la table n'est pas grise, les blocs le sont */
  
  border-collapse: separate;
  border-spacing: 0;                 /* pas d’interstice entre lignes d’un même bloc */
  table-layout: fixed;
}
.container.citation table {
margin: 25px auto;
}


/* on libère l’espace à gauche pour le guillemet rouge */
.container table th,
.container table td{
  
  vertical-align: top;
  border: 0;
  background: transparent;
  overflow-wrap: anywhere;
}

/* ===== Motif 3 lignes : 1 = Auteur / 2 = Citation / 3 = espace ===== */

/* 1) LIGNE citation : fond gris + texte fort */
.container table tbody tr:nth-child(3n+1) td{
padding: 0em 30px 0em 75px;
  background: #fff;
  font-weight: 500;
  color: #444444c9;
  font-style: italic;
  
  border-left: 4px solid #110202;       /* barre noire continue à gauche */
}

/* 2) LIGNE auteur */
.container table tbody tr:nth-child(3n+2) td{
  padding: 0em 30px 1.2em 75px;
  background: #fff;
  color: #444;
  border-left: 4px solid #110202;       /* barre noire continue à gauche */
}

/* Guilles rouges sur le BLOC (affichés sur la 1ère ligne du bloc) */
.container table tbody td:first-child{ position: relative; }



.container table tbody tr:nth-child(3n+1) td:first-child::before{
  content: "\201C";        /* « */
  font-family: Open Sans;
  font-style: italic;
  font-size: 44px;
  color: #D31800;
  position: absolute;
  left: 18px;              /* aligne dans la gouttière */
  top: 2px;
  line-height: 1;
  pointer-events: none;
}

/* 3) LIGNE ESPACE (séparateur blanc) */
.container table tbody tr:nth-child(3n) td{
  padding: 0;
  line-height: 0;
  height: 22px;            /* espace entre blocs — ajuste au besoin */
  font-size: 5px;
  background: transparent;
  border: 0;
}

/* Si Mammoth a créé un THEAD, on le neutralise proprement */
.container table thead{ display: contents; }


.container.citation  table tbody tr:nth-child(3n+1) td{
font-size: 1.15rem;   /* ajuste si tu veux plus grand */
color: #222;
padding: 1.2em 30px 0em 75px;
}


.container.citation table tbody tr:nth-child(3n+1) td:first-child::before{
    top: 10px;
}


/* Responsive */
@media (max-width: 680px){
  .container table th,
  .container table td{ padding: 1em 16px 1em 60px; }
  .container table tbody tr:nth-child(3n+1) td:first-child::before{
    left: 12px; top: 8px; font-size: 1.9rem;
  }
  .container table tbody tr:nth-child(3n+2) td{ font-size: 1.05rem; }
}