/* ============================================================================
   FICHIER CSS PERSONNALISÉ - assets/css/style.css
   ============================================================================ */

/* Défilement doux */
html { scroll-behavior: smooth; }
/*:root {
    --primary-color: #436CBB;
    --secondary-color: #264653;
    --accent-color: #e9c46a;
    --dark-color: #2C3E50;
    --light-color: #ECF0F1;
	--nav-h: 90px; 
}*/


:root {
  --primary-color:   #436CBB;  /* Bleu principal */
  --secondary-color: #354F8F;  /* Variante plus sombre, pour titres ou fonds */
  --accent-color:    #BB9143;  /* Couleur complémentaire orangée (contraste) */
  --dark-color:      #24344F;  /* Très foncé, presque bleu-noir */
  --light-color:     #E4E9F6;  /* Très clair, dérivé du bleu pour fonds */
  
  --info-color:      #5E88D4;  /* Bleu plus clair (analogue) */
  --success-color:   #3BBBA0;  /* Vert-bleuté harmonisé */
  --warning-color:   #D4A25E;  /* Orange doux (analogue du complémentaire) */
  --danger-color:    #BB435E;  /* Rouge rosé, saturé depuis la complémentaire */
  
  	--nav-h: 90px; /* variable local pour déterminer la hauteur à laisser pour la navbar */
}

body {
  padding-top: var(--nav-h);
}

/* Navigation */
.navbar-brand img {
    height: 40px;
    width: auto;
}


.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar .nav-link {
  /*font-size: 16px; /* Taille en px, rem ou em */
  font-weight: bold;
}

.navbar .nav-link.active {
  font-weight: 700;
  color: #2e86ab; /* bleu Bootstrap */
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #236B87;
    border-color: #236B87;
}

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

.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(43, 125, 234, 0.44), rgba(12, 13, 13, 0.32)), url('../../public/hero.png') center/cover no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
}

.hero-overlay {
    width: 100%;
}

.hero-buttons .btn {
    margin: 0.5rem;
}

/* sections */

section[id] {
  scroll-margin-top: var(--nav-h);
}

/* 4) Pleine hauteur d'écran pour les sections "full" */
.section-full {
  /* svh = Small Viewport Height (meilleure gestion mobile) */
  min-height: calc(100dvh - var(--nav-h)); /* d/v/svh = mieux sur mobile modernes */
  display: flex;
  align-items: center;        /* centre verticalement le contenu */
}

@supports not (height: 100dvh) {
  .section-full { min-height: calc(100vh - var(--nav-h)); }
}

/* Section le-concept */

.le-concept {
	padding-top: 0; padding-bottom: 0; 
}

.le-concept .container { 
padding-top: 2rem; padding-bottom: 2rem; 
}

.le-concept .section {

	   min-height: calc(100vh - 90px); /* si la navbar fait 90px */
    display: flex;
    align-items: center;
/*	scroll-margin-top: 90px; /* hauteur de ta navbar */
}

/* Cards */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Sections */
.py-5 {
    padding: 4rem 0;
}

.hero-bg {
  position: relative;
  padding-top: 8rem;   /* garde la même hauteur que ton ancien pt-5 */
  padding-bottom: 8rem; /* garde la même hauteur que ton ancien pb-5 */
  background: url("../images/Vol_oiseaux.png") no-repeat center center;
  background-size: cover;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;/*rgba(0, 0, 0, 0.35); /* léger voile pour contraste du texte */
}

.hero-bg .container {
  position: relative;
  z-index: 1;
}


.hero-banner {
  background: url("../images/Vol_oiseaux.png") no-repeat center center;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.hero-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 background: transparent;/*rgba(0, 0, 0, 0.35); /* léger voile pour contraste du texte */
  z-index: -1;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
        text-align: center;
    }
    
    .display-4 {
        font-size: 2.5rem;
		font-weight: bold;
    }
    
    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Icons */
.fa-anchor {
    color: var(--primary-color);
}

/* Footer */
footer {
    background-color: var(--dark-color) !important;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Centrage global déjà géré par col-xl-10 mx-auto */

/* Cartes de spécifications */
.spec-card {
  background: #ffffff;
  border-radius: 14px;
  /* léger liseré + ombre douce */
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

/* Titre dans la carte */
.spec-card .h5 {
  color: #0d6efd; /* même teinte que text-primary bootstrap */
  font-weight: 600;
}

/* Liste dans les cartes : respiration + icônes colorées */
.spec-list li {
  margin-bottom: .5rem;
  line-height: 1.5;
}
.spec-list i {
  color: #0d6efd; /* bleu Bootstrap */
}

/* Optionnel : resserrer un peu la largeur des paragraphes pour le confort de lecture */
@media (min-width: 992px) {
  .lead { max-width: 700px;
    margin: 0 auto; }
}


.lead-custom {
  font-size: 1.15rem;   /* légèrement plus grand que le texte normal */
  font-weight: 400;     /* poids standard */
  margin-left: 0;       /* supprime tout éventuel décalage */
}


/* Harmonisation section bio */
.bio-section h2 { color: var(--dark-color); }

/* Variante lead plus sobre (si pas déjà définie) */
.lead-custom { font-size: 1.05rem; font-weight: 400; margin: 0; }

/* Prose : lisibilité */
.prose p { margin-bottom: 1rem; line-height: 1.7; }

/* Photo profil */
.bio-photo {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Subtle background compatible Bootstrap 5 */
.bg-light-subtle { background: rgba(0,0,0,0.035); }


/* Couleur du titre d’item au survol/ouvert 
.accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background-color: rgba(67,108,187,0.06);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; } */

/* Bordures plus discrètes */
.accordion-item {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: .5rem;
}


/* Couleurs différentes par thème */
.bg-anxiete   { background-color: #436CBB; } /* Bleu primary */
.bg-alim      { background-color: #3BBBA0; } /* Vert turquoise */
.bg-confiance { background-color: #D4A25E; } /* Orange doux */
.bg-addictions{ background-color: #BB435E; } /* Rouge rosé */
.bg-burnout   { background-color: #354F8F; } /* Bleu sombre */

.card-header {
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.card-header:hover {
  filter: brightness(1.1);
}


/* Texte et flèche toujours blancs */
.accordion .accordion-button.text-white {
  color: #fff !important;
}
.accordion .accordion-button::after {
  filter: invert(1); /* flèche blanche */
}
.accordion .accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Même fond en ouvert/fermé — 1 règle par couleur */
.accordion .accordion-item .accordion-header .accordion-button.bg-anxiete,
.accordion .accordion-item .accordion-header .accordion-button.bg-anxiete:not(.collapsed) {
  background-color: #436CBB !important;
}

.accordion .accordion-item .accordion-header .accordion-button.bg-alim,
.accordion .accordion-item .accordion-header .accordion-button.bg-alim:not(.collapsed) {
  background-color: #3BBBA0 !important;
}

.accordion .accordion-item .accordion-header .accordion-button.bg-confiance,
.accordion .accordion-item .accordion-header .accordion-button.bg-confiance:not(.collapsed) {
  background-color: #D4A25E !important;
}

.accordion .accordion-item .accordion-header .accordion-button.bg-addictions,
.accordion .accordion-item .accordion-header .accordion-button.bg-addictions:not(.collapsed) {
  background-color: #BB435E !important;
}

.accordion .accordion-item .accordion-header .accordion-button.bg-burnout,
.accordion .accordion-item .accordion-header .accordion-button.bg-burnout:not(.collapsed) {
  background-color: #354F8F !important;
}

/* Optionnel: léger hover sans changer la couleur */
.accordion .accordion-button.bg-anxiete:hover,
.accordion .accordion-button.bg-alim:hover,
.accordion .accordion-button.bg-confiance:hover,
.accordion .accordion-button.bg-addictions:hover,
.accordion .accordion-button.bg-burnout:hover {
  filter: brightness(1.05);
}


.btn-retour {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-retour:hover {
  background-color: #e6e6e6;
  border-color: #999;
}


 .pricing-card {
            transition: transform 0.2s;
        }
        .pricing-card:hover {
            transform: translateY(-5px);
        }
        .price {
            font-size: 2.5rem;
            font-weight: bold;
            color: #0d6efd;
        }
        .info-box {
            background-color: #f8f9fa;
            border-left: 4px solid #0d6efd;
            padding: 1rem 1.5rem;
            margin: 1.5rem 0;
        }
		
		
.situation-card {
            margin-bottom: 2rem;
            border-left: 4px solid #0d6efd;
        }
        .quote {
            font-size: 1.1rem;
            font-style: italic;
            color: #495057;
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
        }
        .block-section {
            background-color: #fff3cd;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }
        .solution-section {
            background-color: #d1e7dd;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
        }
        .section-icon {
            font-size: 1.2rem;
            margin-right: 0.5rem;
        }
		
		 .highlight-box {
            background-color: #f8f9fa;
            border-left: 4px solid #0d6efd;
            padding: 1.5rem;
            margin: 1.5rem 0;
        }
        .symptom-badge {
            display: inline-block;
            background-color: #fff3cd;
            padding: 0.5rem 1rem;
            margin: 0.25rem;
            border-radius: 20px;
            font-size: 0.9rem;
        }
        .case-study {
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .case-study-title {
            color: #0d6efd;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .therapy-step {
            padding-left: 1.5rem;
            margin-bottom: 0.75rem;
            position: relative;
        }
        .therapy-step::before {
            content: "👉";
            position: absolute;
            left: 0;
        }
        .result-box {
            background-color: #d1e7dd;
            border-left: 4px solid #198754;
            padding: 1rem 1.5rem;
            margin-top: 1rem;
        }
		
		  .cycle-diagram {
            text-align: center;
            padding: 2rem;
            background-color: #f8f9fa;
            border-radius: 0.5rem;
            margin: 2rem 0;
        }
		
		  .cycle-arrow {
            font-size: 1.5rem;
            color: #dc3545;
            margin: 0.5rem 0;
        }
		
		  .warning-sign {
            background-color: #e3f2fd;
            border-left: 4px solid #ffc107;
            padding: 1rem 1.5rem;
            margin: 0.5rem 0;
        }
		
		
		.card .card-title i { color: #0d6efd; } /* icônes accentuées */

.card-body.address-card {
    padding: 1.25rem;
}

.card.address-contact {
    border-left: 4px solid #0d6efd; /* accent */
}

.card .h5 a {
    color: inherit;
    text-decoration: none;
}

.card .h5 a:hover {
    text-decoration: underline;
}

/* Mettre en avant le numéro */
.card.contact-card .h5 {
    font-size: 1.25rem;
    font-weight: 600;
}

/* bouton maps plus petit et propre */
.btn-outline-secondary.btn-sm i {
    font-size: 0.85rem;
}

/* permettre un peu d'espacement autour des cartes sur mobile */
@media (max-width: 767px) {
    .col-md-4.mb-5 { margin-top: 1rem; }
}

.addiction-type {
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1rem;
            margin: 0.5rem 0;
            text-align: center;
        }
		
		.definition-box {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 1.5rem;
            margin: 1.5rem 0;
        }