/* ============================================ */
/* STYLES SECTION HÉROS            */
/* ============================================ */

#index .hero-section {
  /* Définit l'image de fond */
  background-image: url('/img/atelier-covering-vehicules.webp');

  /* Assure que l'image couvre toute la section, sans être déformée */
  background-size: cover;

  /* Centre l'image pour un meilleur rendu sur toutes les tailles d'écran */
  background-position: center center;

  /* Empêche la répétition de l'image si elle est plus petite que la section */
  background-repeat: no-repeat;
  
  /* (Optionnel) Ajoute une couleur de fond qui s'affichera pendant le chargement de l'image */
  background-color: #333;
}

#index .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Dégradé de transparent (en haut) à noir semi-transparent (en bas) */
  background: linear-gradient(
    to bottom, 
    rgba(0, 0, 0, 0.1), 
    rgba(0, 0, 0, 0.7)
  );
  
  z-index: 1;
}

/* Assure que le contenu textuel passe bien au-dessus de l'overlay */
#index .hero-section .container {
  z-index: 2;
}

#index .hero-section h1,
#index .hero-section p {
  /* Ombre : décalage horizontal, décalage vertical, flou, couleur */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* Assure que le contenu est au-dessus de l'overlay */
#index .hero-section .container {
  z-index: 2;
}


/* Style de la section Hero */
.hero-section {
  position: relative; /* Contexte de positionnement pour les enfants */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh; /* Hauteur de la section, à ajuster */
  overflow: hidden; /* Empêche l'image de déborder */
}

/* Conteneur de l'image */
.hero-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place le conteneur de l'image DERRIÈRE le contenu */
}

/* L'image elle-même */
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* L'équivalent de "background-size: cover", MAGIQUE ! */
  object-position: center; /* L'équivalent de "background-position: center" */
}

/* Ajout d'une surcouche sombre pour améliorer la lisibilité du texte */
.hero-image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Superposition noire avec 50% d'opacité */
}

/* Le contenu textuel (MODIFIÉ) */
.hero-content {
  position: relative;
  z-index: 1;

  /* NOUVELLES RÈGLES FLEXBOX */
  display: flex;
  flex-direction: column; /* Aligne les enfants verticalement */
  justify-content: space-between; /* POUSSE le 1er enfant en haut et le dernier en bas */
  
  /* AJUSTEMENTS DE LA TAILLE ET DE L'ESPACEMENT */
  min-height: 90vh; /* S'assure que le conteneur prend toute la hauteur */
  padding-top: 2rem; /* Espace pour que le titre ne soit pas collé en haut */
  padding-bottom: 8rem; /* Espace pour que le bouton ne soit pas collé en bas */
}

.hero-section h1 {
  /* Ombre : décalage horizontal, décalage vertical, flou, couleur */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* ============================================ */
/* STYLES BARRE DE CONFIANCE             */
/* ============================================ */

.brand-logo {
  height: 45px; /* Ajustez la hauteur selon la forme de vos logos */
  width: auto;  /* Garde les bonnes proportions */
  filter: grayscale(100%); /* Rend les logos gris */
  opacity: 0.6; /* Les rend légèrement transparents */
  transition: all 0.3s ease-in-out; /* Ajoute une transition douce */
}

.brand-logo-wrapper:hover .brand-logo {
  filter: grayscale(0%); /* Restaure la couleur au survol */
  opacity: 1; /* Les rend totalement opaques */
  transform: scale(1.1); /* Agrandit légèrement le logo au survol */
}


:root, [data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #fe1846;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
}

.btn-primary {
  /* --- Couleurs principales --- */
  --bs-btn-bg: #fe1846;
  --bs-btn-border-color: #fe1846;
  
  /* --- Couleurs au survol (hover) - légèrement plus foncées --- */
  --bs-btn-hover-bg: #e0123f;
  --bs-btn-hover-border-color: #c91038;

  /* --- Couleurs au clic (active) - encore plus foncées --- */
  --bs-btn-active-bg: #c91038;
  --bs-btn-active-border-color: #b80f33;

  /* --- Couleur pour le bouton désactivé --- */
  --bs-btn-disabled-bg: #fe1846;
  --bs-btn-disabled-border-color: #fe1846;

  /* --- Couleur pour l'ombre du focus (en format RVB) --- */
  --bs-btn-focus-shadow-rgb: 254, 24, 70;

  /* --- On s'assure que le texte reste blanc --- */
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: #fe1846;
    --bs-btn-border-color: #fe1846;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #fe1846;
    --bs-btn-hover-border-color: #fe1846;
    --bs-btn-focus-shadow-rgb: 254, 24, 70; /* RGB de #fe1846 */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #fe1846;
    --bs-btn-active-border-color: #fe1846;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fe1846;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #fe1846;
    --bs-gradient: none;
}

.bg-primary {
   background-color: #fe1846; 
    background-image: linear-gradient(135deg, #fe1846 0%, #c8002a 100%);
}

main a {
    color: #fe1846;
    text-decoration: underline !important;
}

.btn {
    text-decoration: none !important;
}

main a h3 {
    text-decoration: none !important;
}


/* Initialise un compteur nommé 'step-counter' sur le conteneur des étapes */
.row {
  counter-reset: step-counter;
}

.step-item {
  /* Chaque item devient un contexte de positionnement pour son numéro */
  position: relative;
  /* Ajoute un peu d'espace en haut pour le numéro */
  padding-top: 1rem;
}

/* C'est ici que le numéro est créé et stylisé */
.step-item::before {
  /* Incrémente le compteur pour chaque item */
  counter-increment: step-counter;
  /* Affiche le compteur avec un zéro devant (01, 02, etc.) */
  content: counter(step-counter, decimal-leading-zero);

  /* Positionnement du numéro */
  position: absolute;
  z-index: 0;   /* Place le numéro en arrière-plan */
  
  /* Style du numéro */
  font-size: 4rem; /* La taille du numéro */
  font-weight: 700; /* L'épaisseur de la police */
  line-height: 1;

  color: #e9ecef; /* C'est une couleur gris clair standard (style Bootstrap) */
  top: -2.8rem;
  left: -0.5rem;
}

/* S'assure que le contenu (icône, titre, texte) passe DEVANT le numéro */
.step-item > div {
  position: relative;
  z-index: 1;
}

/* --- Style du header sticky --- */

/* 1. Transition douce pour tous les changements */
.header {
  transition: padding 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.header .header-top {
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
  max-height: 100px; /* Hauteur approximative, pour la transition */
  overflow: hidden;
}
.header .logo img {
  transition: max-height 0.3s ease-in-out;
}

/* 2. Styles appliqués LORSQUE le header a la classe .is-sticky */
.header.is-sticky {
  /* On peut ajouter une ombre pour le détacher du contenu */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* On peut légèrement réduire le padding général */
  padding-top: 0;
  padding-bottom: 0;
}

/* 3. Masquer la barre du haut (.header-top) */
.header.is-sticky .header-top {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none; /* Empêche les clics sur les éléments cachés */
}

/* 4. Gérer l'affichage des logos */
/* Par défaut, on cache le pictogramme */
.logo-pictogram {
  display: none;
}

/* Quand le header est sticky, on cache le logo complet... */
.header.is-sticky .logo-full {
  display: none;
}
/* ...et on affiche le pictogramme */
.header.is-sticky .logo-pictogram {
  display: block;
}

/* 5. Réduire la taille du logo pictogramme */
.header.is-sticky .logo-pictogram img {
  max-height: 45px; /* Ajustez cette valeur à votre convenance */
}

/* Optionnel : S'assurer que le menu principal reste bien aligné */
.header.is-sticky .header-bottom__row {
    align-items: center;
}

.mb-auto-adjust {
  /*
    Ajustez cette valeur pour monter ou descendre les boutons.
    L'unité "vh" (viewport height) est idéale car elle est
    proportionnelle à la hauteur de l'écran.
  */
  margin-bottom: 20vh; /* 15% de la hauteur de l'écran */
}

/* ---- Card Zoom Effect ---- */

/* Define the specific background images */
#card-voiture {
  background-image: url('/img/covering-auto-audi.webp');
}
#card-bateau {
  background-image: url('/img/covering-bateau.webp');
}
#card-moto {
  background-image: url('/img/covering-moto-kawasaki.webp');
}

/* Base style for all cards with the effect */
.card-zoom-effect {
  background-position: center;
  background-size: 100%; /* Start at 100% size */
  
  /* Animate the 'background-size' property for a smooth zoom */
  transition: background-size 0.4s ease-out;
}

/* On hover, increase the background-size to create the zoom */
.card-zoom-effect:hover {
  background-size: 110%; /* Zoom to 110% */
  cursor: pointer;
}

/* * Le conteneur de la carte doit cacher ce qui dépasse 
 * C'est l'étape la plus importante !
 */
.card-img-zoom-container  {
  overflow: hidden; /* Empêche l'image zoomée de déborder de la carte */
}

/* * On prépare l'image à l'intérieur de la carte pour l'animation.
 * On anime la propriété 'transform' pour une performance optimale.
 */
.card-img-zoom-container .card-img-top {
  transition: transform 0.4s ease-out;
}

/* * Au survol de la carte, on cible l'image à l'intérieur et on l'agrandit.
 */
.card:hover .card-img-top {
    transform: scale(1.1); /* Zoom de 10% */
}

.card.h-100 .card-body {
  flex-grow: 1;
}

/*--------------------------------------------------------------
# Section FAQ Personnalisée
--------------------------------------------------------------*/

/* Style de base pour chaque élément de la FAQ */
.accordion-item.faq-item-custom {
  border: 1px solid #e9ecef; /* Bordure discrète */
  overflow: hidden; /* Nécessaire pour que les coins arrondis s'appliquent bien au contenu */
  transition: box-shadow 0.3s ease-in-out;
}

/* Style au survol pour donner un feedback à l'utilisateur */
.accordion-item.faq-item-custom:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.10) !important;
}

/* Style du bouton (la question cliquable) */
.accordion-button.fw-semibold {
  color: #212529; /* Couleur de texte plus foncée */
  background-color: #fff;
  padding: 1.25rem 1.5rem; /* Un peu plus d'espace */
}

/* Style du bouton quand il est actif (déplié) */
.accordion-button:not(.collapsed) {
  color: #fe1846; /* Mettez la couleur principale de votre site ici */
  background-color: #f8f9fa;
  box-shadow: none; /* On retire l'ombre interne par défaut */
}

/* On retire la couleur de fond bleue au focus pour un look plus propre */
.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0,0,0,.125);
}

/* On cache l'icône chevron par défaut de Bootstrap */
.accordion-button::after {
  background-image: none !important;
  content: '+'; /* Notre nouvelle icône par défaut : un '+' */
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  color: #fe1846; /* Couleur de l'icône */
  transform: translateY(-4px); /* Petit ajustement vertical */
  transition: transform 0.3s ease-in-out;
}

/* On transforme le '+' en '-' quand le contenu est déplié */
.accordion-button:not(.collapsed)::after {
  content: '−'; /* Le caractère 'moins' */
  transform: translateY(-4px) rotate(360deg); /* Effet de rotation à l'ouverture */
}

/* Style du corps de la réponse */
.accordion-body {
  padding: 1.5rem; /* Plus d'aération */
  background-color: #fff;
  font-size: 1rem;
  line-height: 1.7;
}

.breadcrumb__wrapper {
    margin-bottom: 0rem;
}

/*
 * Classe pour forcer les images des cartes à avoir la même hauteur
 * sans les déformer.
 */
.card-img-fixed-height {
  height: 200px; /* Vous pouvez ajuster cette hauteur selon vos préférences */
  object-fit: cover; /* C'est la propriété magique ! */
}

.lead {
    font-weight: initial;
}

ul {
    list-style: initial;
    padding-left: inherit;
}

.card-cta-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* C'est la propriété magique ! */
  object-position: center; /* Centre l'image verticalement et horizontalement */
}