/* Fichier: styles.css */

:root {
    --border: #e5e7eb;
    --primary: #19cbd2;
    --muted: #6b7280;
}

body {
    /* Priorise Segoe UI, puis les polices système de secours */
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    background-color: #f8fafc; /* Gris très clair pour le fond */
    scroll-behavior: smooth; /* Active le défilement fluide pour les ancres */
}

.text-sm {
    font-size: 0.95rem !important;
}

/*p a{
	font-weight:bold;
}*/

/* Custom Keyframes for Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-down {
    animation: fadeInDown 1s ease-out;
}
.animate-fade-in-up {
    animation: fadeInUp 1s ease-out;
}

/* Hero section — image via <img> pour un LCP rapide (au lieu de background-image CSS) */
.hero-section {
    position: relative;
    z-index: 0;
    background-color: #000000;
    overflow: hidden;
}
.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
}

.section-image-background {
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}
.section-image-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2); /* Opacité légère pour le contraste */
    z-index: -1;
}

/* Styles spécifiques pour les icônes des cartes */
.icon-circle-bg {
    background-color: #f195c6;
    border-radius: 9999px; /* Équivalent à Tailwind's rounded-full */
    width: 3.5rem; /* Équivalent à w-14 (14 * 0.25rem = 3.5rem) */
    height: 3.5rem; /* Équivalent à h-14 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Empêche le rétrécissement dans les conteneurs flex */
}

/* Pour la page de contact, les icônes SVG individuelles ont une taille spécifique */
.icon-circle-bg svg {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    color: white; /* S'assure que le SVG est blanc */
}

.icon-small {
    width: 24px; /* Taille pour les icônes de contact */
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.circle-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f195c6; /* Nouvelle couleur verte pour les étapes */
    color: white;
    font-weight: bold;
    flex-shrink: 0;
}

/* Styles pour le carrousel de témoignages */
.testimonials-carousel-container {
    position: relative;
    overflow: hidden; /* Cache les éléments qui dépassent */
}
.testimonials-carousel-wrapper {
    display: flex; /* Permet aux éléments d'être côte à côte */
    transition: transform 0.5s ease-in-out; /* Animation de glissement */
    scroll-snap-type: x mandatory; /* Facilite le défilement par sections */
    -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */
    overflow-x: scroll; /* Permet le défilement manuel */
    scrollbar-width: none; /* Cache la scrollbar pour Firefox */
    -ms-overflow-style: none;  /* Cache la scrollbar pour IE and Edge */
}
.testimonials-carousel-wrapper::-webkit-scrollbar { /* Cache la scrollbar pour Chrome, Safari et Opera */
    display: none;
}
.testimonial-card {
    flex: 0 0 calc(33.333% - 1.333rem); /* 3 cartes par vue sur desktop (2rem gap) */
    margin-right: 2rem; /* Espacement entre les cartes */
    scroll-snap-align: start; /* S'aligne au début de la carte */
    box-sizing: border-box; /* Inclut padding et border dans la largeur */
}
@media (max-width: 1023px) { /* md breakpoint for 2 cards */
    .testimonial-card {
        flex: 0 0 calc(50% - 1rem); /* 2 cartes par vue sur tablette (2rem gap) */
        margin-right: 2rem;
    }
}
@media (max-width: 767px) { /* sm breakpoint for 1 card */
    .testimonial-card {
        flex: 0 0 100%; /* 1 carte par vue sur mobile */
        margin-right: 0; /* Pas d'espacement car une seule carte par vue */
    }
}
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s;
}
.carousel-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.carousel-arrow.left {
    left: 1rem;
}
.carousel-arrow.right {
    right: 1rem;
}

/* Spécifique pour la page contact afin d'aligner les icônes avec le texte */
.contact-icon-item {
    align-items: center; /* Aligner verticalement les éléments */
}
.contact-icon-item .icon-circle-bg {
    margin-right: 1rem; /* Espacement entre l'icône et le texte */
}

/* Ajustement pour le pied de page sur les petits écrans */
/* Le conteneur .md:flex gère déjà la transition. Pour le texte "David Gana",
   le text-align: center sera appliqué par défaut sur les petits écrans
   grâce à 'text-center' sur le conteneur principal du footer.
   Le 'md:text-left' est déjà sur la colonne de David Gana. */
@media (max-width: 767px) { /* Appliquer sur les écrans plus petits que md */
    .footer-col-david-gana {
        text-align: center; /* Centre le texte dans cette colonne sur mobile */
    }
}

ul.step {
    list-style: disc;
    margin: 0.75rem 0 1.5rem;
    padding: 0 20px;
}

.master-title{
}
.hero-section .master-title{
	text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 0 2px rgba(0,0,0,0.4);
}
.slogan{
	font-size: 1.5rem !important;
}
.hero-section .slogan{
	text-shadow: 0 1px 6px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.3);
}

.calendly{
	cursor:pointer;
}

/* Popup modal de réservation Brevo */
.booking-overlay{
	position:fixed;top:0;left:0;width:100%;height:100%;
	background:rgba(0,0,0,0.6);z-index:9999;
	display:flex;align-items:center;justify-content:center;
}
.booking-iframe{
	width:92vw;height:88vh;max-width:600px;
	border:none;border-radius:12px;background:#fff;
}
@media (min-width:768px){
	.booking-iframe{ width:80vw; max-width:800px; }
}
@media (min-width:1280px){
	.booking-iframe{ width:70vw; max-width:960px; }
}
.booking-close{
	position:absolute;top:12px;right:16px;
	font-size:2rem;line-height:1;color:#fff;
	background:none;border:none;cursor:pointer;
	z-index:10000;
}

.card { border:1px solid var(--border); border-radius:16px; padding:18px; background:#fff; }
.notice { background:#f5f5f5; border-left:4px solid var(--primary); padding:14px 16px; border-radius:8px; color:#374151; }
.testi { display:grid; gap:12px; }
.faq dt { font-weight:700; margin: 10px 0 6px; }
.faq dd { margin: 0 0 12px 0; color: var(--muted); }

.image-center {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
}

section ul li a, p a{
    text-decoration: underline;
    font-weight: bold;
    color: var(--primary);
}
section ul li a:hover, p a:hover{
    color: #000000;
}

footer a{
    color: inherit;
    text-decoration: none;
    font-weight: normal;
}
footer p a:hover, footer ul a:hover{
    color:#ffffff;
}

/* Espacement au-dessus des sous-titres H3 dans le contenu */
section.container h3:not([itemprop]) {
    margin-top: 2rem;
}

/* Espacement vertical — hero des pages de contenu */
section.py-20 > .container > h1 {
    margin-bottom: 1.75rem;
}
section.py-20 > .container > p.text-lg.text-center {
    margin-bottom: 3rem;
}
section.py-20 > .container > .flex:has(> img) {
    margin-top: 4.5rem;
    margin-bottom: 4rem;
}

/* Classe Tailwind manquante dans le CSS compilé — nom du cabinet dans le header */
@media (min-width: 1024px) {
    .lg\:inline {
        display: inline;
    }
}

/* Accessibilité : focus visible pour la navigation clavier (WCAG 2.1 AA) */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #19cbd2;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Plan du site — sous-pages indentées avec puces turquoise */
.sitemap-sub {
    margin-left: 0.75rem;
    padding-left: 0;
    list-style: none;
}
.sitemap-sub li {
    padding-left: 1rem;
    position: relative;
}
.sitemap-sub li::before {
    content: "\2022";
    color: #19cbd2;
    position: absolute;
    left: 0;
    font-size: 0.85rem;
}