/* ---------- POLICES ---------- */
@font-face {
    font-family: 'Playfair Display';
    src: url('../../fonts/PlayfairDisplay-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../../fonts/PlayfairDisplay-Bold.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../../fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------- TYPO ---------- */

/* Texte courant */
body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    padding-top: 50px;
    font-size: clamp(15px, 1.6vw, 17px);
}

p {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.6;
    margin-bottom: 18px;
}

li {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.6;
}

/* Titres principaux */
h1, h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
}

h1 {
    margin: 15px 15px;
}

h1 { font-size: clamp(26px, 3.8vw, 38px); }
h2 { font-size: clamp(22px, 3.2vw, 32px); color: #F19321; }

/* Sous-titres */
h3, h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

h3 { font-size: clamp(19px, 2.8vw, 26px); }
h4 { font-size: clamp(17px, 2.3vw, 22px); }

/* Citations / phrases sensibles */
em,
blockquote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* Accordéons – titres */
.accordion-button {
    font-size: clamp(16px, 1.8vw, 18px);
    font-family: 'Inter', sans-serif;
    font-weight: 500; 
}

/* Accordéons – contenu */
.accordion-body {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* ========================= */
/* Responsive Mobile (= 767px) */
/* ========================= */

@media (max-width: 767px) {
    .bg-light { background-color: #1a3689 !important; }
    .navbar-light .navbar-toggler { background-color: #ffffff !important; }
    .navbar-toggler { font-size: 1rem; }
    
    .navbar-collapse { background-color: #f8f8f8; }
    .page-header h2 { font-size: 24px !important; }
    .titrepage { padding: 10px; }
}

/* ========================= */
/* Liens */
/* ========================= */

p a,
ul a { 
    color: white;
}

p a:hover,
ul a:hover {
    color: #f19321;
}

.lienpresta,
.lienpresta:hover {
    color: #F19321;
}

.nohooverlogo:hover {
    background-color: rgba(248, 248, 248, 0) !important;
}

/* ========================= */
/* En-tête / Header */
/* ========================= */

.titrepage {
    color: #fff;
    background: #596794 url(../../images/header_bg.png) no-repeat center/cover;
    padding: 20px;
    width: 100%;
    position: fixed;
    z-index: 2;
}

/* ========================= */
/* Mise en page générale */
/* ========================= */

html {
    scroll-padding-top: 180px;
}

.item { transform-style: preserve-3d; }

.logo-moizard {
    max-height: 45px;
    border: none;
}

/* ========================= */
/* Navigation / Menu */
/* ========================= */

/* Positionnement des dropdowns */
.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 0;
}

.dropdown-menu {
    border-top-left-radius: 0 !important; 
    border-top-right-radius: 0 !important;  
}

.dropdown-menu.show {
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #337ab7;   
    color: #fff;                 
    text-decoration: none;
    font-weight: normal;         
}

/* Liens de navigation */
.navbar-nav .nav-link {
    font-size: clamp(15px, 1.6vw, 18px); 
    padding: 8px 12px;                   
    line-height: 1.5;                    
    height: auto;
    display: flex;                       
    align-items: center;                 
}

.navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
    color: #F19321;
    background-color: #e7e7e7;
}

.navbar-nav>.active>a,
.navbar-nav>.active>a:hover,
.navbar-nav>.active>a:focus {
    color: #F19321;
}

.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus {
    background-color: #F19321;   
    color: inherit;              
    font-weight: normal;        
    outline: none;               
    box-shadow: none;
}

/* Onglets */
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: #ffffff;
    background-color: #1e4798;
    border: none !important;
}

/* Bouton burger */
.navbar-toggler {
    padding: 2px 6px;
    font-size: 0.9rem;
    border: none;
    background-color: transparent;
}

.navbar-toggler:focus {
    box-shadow: none;
    background-color: #ddd;
}

/* Centrage dropdown */
.dropdown-menu-center {
    left: 50% !important;
    transform: translate(-50%, 30%) !important;
}

/* ========================= */
/* Responsive Tablette (768px – 992px) */
/* ========================= */
@media (min-width: 768px) {
    .navbar-collapse {
        text-align: center;
    }
}

/* Corriger le positionnement du dropdown Équicoaching */
.titrepage .dropdown-menu {
    margin-top: 0;                 
    top: calc(100% + 3px) !important; 
    background-color: #fff;        
    z-index: 1;                    /
}

/* Centrage horizontal uniquement */
.dropdown-menu-center {
    left: 50% !important;
    transform: translateX(-50%) !important; 
}

.titrepage .dropdown-menu {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ========================= */
/* Vidéo plein écran + overlay */
/* ========================= */

#myVideo {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    background: rgba(30, 71, 152, 0.45);
    inset: 0;
    width: 100%;
}

video {
    max-width: 100%;
    height: auto;
    display: block;
}

#myBtn {
    width: 200px;
    font-size: clamp(14px, 2vw, 18px);
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}

/* ========================= */
/* Parallax */
/* ========================= */

.parallax,
.parallax2 {
    background-attachment: fixed;
    background-size: auto;       
    background-repeat: repeat;   
    background-position: center;
}

.fond-sombre {
    background-image: url('../../images/parallax-fond-bleu.png');
}

.fond-clair {
    background-image: url('../../images/parallax-fond-blanc.png');
}

.fond2 {
    background-image: url('../../images/parallax-animateurs.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.fond3 {
    background-image: url('../../images/parallax-chevaux.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* ========================= */
/* BOUTONS */
/* ========================= */

.boutton-orange {
    font-size: clamp(14px, 1.6vw, 16px);
    color: #fff;
    background-color: #F19321;
    padding: 5px 10px;
    display: inline-block;
    border-radius: 22px;
    transition: all .3s;
}

.boutton-orange a {
    color: #fff;
    text-decoration: none;
}

.boutton-orange:hover {
    color: blue !important;
    background-color: #fac584;
}

/* ========================= */
/* Blocs visuels */
/* ========================= */

.bloc-shadow {
    background-color: rgba(255, 255, 255, 0.90);
    border-radius: 50px 5px 50px 5px;
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
}

.bloc-shadow h3 {
    font-size: clamp(20px, 3vw, 28px) !important;
    color: #1a3689 !important;
}

.bloc-shadow h3 span {
    color: #000000;
    font-size: clamp(16px, 1.8vw, 18px);
}

.bloc-shadow p a {
    color: #000000 !important;
}

.bloc-shadow p a:hover {
    color: grey !important;
}

.titre-equi {
    background-color: #ffffff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#cacher {
    display: none !important;
}

#contactbutton:hover+#cacher {
    display: inline !important;
    text-decoration: none;
}

.bloc-info {
    background: rgba(30, 71, 152, 0.65);
    margin: 20px;
    padding: 40px;
}

.bloc-info-blue {
    background-color: #1e4798;   
    border-radius: 20px;         
    margin: 40px 0;              
    color: white;               
}

.img-rounded-top {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.btn-galerie {
    position: relative;
    top: -60px;
    left: 10px;
    font-size: clamp(13px, 1.6vw, 16px);
    padding: 5px 10px;
}

/* ========================= */
/* Titres d’atelier */
/* ========================= */

.titre-atelier {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 12px;       
    text-align: center;
    font-size: clamp(24px, 3.5vw, 34px);
    line-height: 1.2;
    padding-top: 1.5rem;
}

.titre-atelier img {
    width: 80px;
    flex-shrink: 0;
}

/* Sur mobile : image au-dessus du texte */
@media (max-width: 768px) {
    .titre-atelier {
        flex-direction: column;
    }
}

/* ========================= */
/* Texte superposé sur la vidéo */
/* ========================= */

.overlay-text {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

@media (max-width: 991px) and (min-width: 768px) {
    .overlay-text {
        top: 30%;              
        width: 95%;
    }
}

@media (max-width: 767px) {
    .overlay-text {
        top: 15%;              
        width: 95%;
    }
}

.accent-overlay {
    color: #f29e39;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

/* Cacher le texte sur GSM + tablettes en paysage, mais jamais sur desktop */
@media (orientation: landscape) and (pointer: coarse) {
    .hide-landscape {
        display: none !important;
    }
}

/* Cacher le texte GSM paysage en + */
@media screen and (max-height: 480px) and (max-width: 900px) {
    .hide-gsm-landscape {
        display: none !important;
    }
}

/* ========================= */
/* Accordéons */
/* ========================= */

#accordionEtapes .accordion-body,
#accordionAtelier .accordion-body,
#accordionPro .accordion-body {
    color: #000 !important;
}

/* ========================= */
/* Icônes */
/* ========================= */

.icone-titre-equi {
    font-size: inherit;  
    margin-right: 10px;
    color: #ffffff;
}

.icone-titre-equi-noir {
    font-size: inherit;  
    margin-right: 10px;
    color: #000000;
}