/* ==========================================================================
 NUMBOOK - CSS GLOBAL MODERNISÉ V3 (Design Fluide & Interactif)
 ========================================================================== */

/* 1. TYPOGRAPHIE ET FOND GLOBAL */
body {
 /* Fond de page très légèrement gris/bleuté pour reposer les yeux */
 background-color: #f8f9fa; /* Plus clair et plus neutre */
 /* Typographie moderne, sans-serif, lisible */
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 color: #333333;
 line-height: 1.6;
 margin: 0;
 padding: 0;
}

/* 2. RÉSOLUTION DU PROBLÈME DES ESPACES VIDES (Pleine Largeur) */
/* On supprime les contraintes du vieux container Bootstrap pour les éléments de fond */
.container {
 width: 100% !important;
 padding: 0 !important;
 max-width: none !important;
}

/* On crée un nouveau container pour limiter la largeur du contenu texte (lisibilité) */
.content-container {
 max-width: 1170px;
 margin: 0 auto;
 padding: 0 15px;
}

#container {
 border: none !important; 
border-radius: 0 !important;
 background-color: transparent !important; 
padding-top: 0;
 box-shadow: none !important;
 margin-bottom: 0 !important;
}

/* 3. L'ENTÊTE ET LA NAVIGATION (Adaptés pleine largeur) */
header {
 text-align: center;
 background-color: #fff; /* Fond blanc pleine largeur */
 padding: 0;
 border-bottom: none;
}
header img {
 box-shadow: none;
 max-width: 100%;
 display: block;
 margin: 0 auto;
}

/* Navigation collée en haut (Sticky) pour une meilleure UX */
.navbar-inverse {
 background-color: #1a1e23; 
border: none;
 border-radius: 0; /* Plus d'arrondis car pleine largeur */
 margin-bottom: 0;
 position: sticky; /* Reste en haut au scroll */
 top: 0;
 z-index: 1000;
 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
/* Centrage des liens dans la navbar pleine largeur */
.navbar-inverse .container-fluid, .navbar-inverse .content-container {
 max-width: 1140px;
 margin: 0 auto;
}
.navbar-inverse .navbar-nav > li > a {
 color: #e0e0e0;
 font-weight: 500;
 font-size: 15px;
 padding-top: 18px;
 padding-bottom: 18px;
 transition: all 0.2s ease;
 position: relative; /* Pour l'effet de soulignement */
}
.navbar-inverse .navbar-nav > li > a:hover {
 color: #ffffff;
 background-color: transparent; 
}

/* Évite le contour blanc ajouté par le navigateur/Bootstrap après un clic.
   Le focus reste visible uniquement pour la navigation au clavier. */
.navbar-inverse .navbar-nav > li > a:focus {
 color: #e0e0e0;
 background-color: transparent;
 outline: none;
 box-shadow: none;
}
.navbar-inverse .navbar-nav > .active > a:focus {
 background-color: #053DBD !important;
 color: #ffffff !important;
}
.navbar-inverse .navbar-nav > li > a:focus-visible {
 outline: 2px solid #ffffff;
 outline-offset: -2px;
}

/* Même comportement pour le bouton d'ouverture du menu sur mobile. */
.navbar-inverse .navbar-toggle:focus {
 outline: none;
 box-shadow: none;
}
.navbar-inverse .navbar-toggle:focus-visible {
 outline: 2px solid #ffffff;
 outline-offset: -2px;
}
/* Effet de soulignement dynamique au survol du menu */
.navbar-inverse .navbar-nav > li > a::after {
 content: '';
 position: absolute;
 width: 0;
 height: 2px;
 bottom: 10px;
 left: 50%;
 background-color: #ffffff;
 transition: all 0.3s ease;
 transform: translateX(-50%);
}
.navbar-inverse .navbar-nav > li > a:hover::after {
 width: 70%;
}
.navbar-inverse .navbar-nav > .active > a {
 background-color: #053DBD !important; 
color: white !important;
}
.navbar-inverse .navbar-nav > .active > a::after {
 display: none; /* Pas de soulignement sur l'élément actif */
}

/* 4. HERO SECTION PLEINE LARGEUR (Animation et Fond) */
@keyframes fadeInUp {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

.hero-wrapper {
 /* Fond très léger pleine largeur pour séparer le header du contenu */
 background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
 padding: 60px 0;
 border-bottom: 1px solid #e9ecef;
}

.hero-section {
 background-color: transparent;
 border-radius: 0;
 box-shadow: none;
 padding: 0;
 margin: 0;
 border-top: none;
 text-align: center;
 animation: fadeInUp 0.8s ease-out forwards;
}

/* CORRECTION 1 : Dégradé sur l'intégralité du titre (plus de mot en noir) */
.hero-section h1 {
 font-size: 42px; /* Plus grand */
 font-weight: 800;
 margin-top: 0;
 letter-spacing: -1px;
 background: linear-gradient(120deg, #053DBD, #AB0BCD);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 display: inline-block; /* Requis pour que le clip s'applique correctement à tout le bloc */
}

.hero-section p.lead {
 color: #555;
 font-size: 20px; /* Plus lisible */
 max-width: 800px;
 margin: 20px auto 0;
 line-height: 1.6;
}

/* 5. SECTIONS DE CONTENU (Alternance de fonds pleine largeur) */
.section-wrapper {
 padding: 60px 0;
}
.section-wrapper:nth-child(even) {
 background-color: #ffffff; /* Alternance blanc / gris clair */
}
.section-wrapper:nth-child(odd) {
 background-color: #f8f9fa;
}

/* CORRECTION 2 : Titres de sections avec animation affinée et espacée */
.section-title-wrapper {
 margin-bottom: 40px;
 position: relative;
 display: inline-block;
 padding-bottom: 10px; /* Ajout d'espace pour que la barre glisse SOUS les lettres comme p, g, q */
}
.section-title {
 font-size: 28px;
 font-weight: 800;
 margin: 0;
 position: relative;
 z-index: 1;
}
.title-underline {
 position: absolute;
 bottom: 0; /* Aligné avec le bas de l'espace de padding */
 left: 0;
 height: 4px; /* Plus fin et plus élégant */
 border-radius: 2px; /* Bords arrondis pour la douceur */
 width: 0;
 z-index: 0;
 transition: width 0.5s ease-out; /* S'animera au survol ou au scroll plus tard */
}
.section-wrapper:hover .title-underline {
 width: 100%;
}
.color-perso { color: #AB0BCD; }
.bg-perso { background-color: rgba(171, 11, 205, 0.3); } /* Légèrement adapté pour la barre plus fine */
.color-prod { color: #017617; }
.bg-prod { background-color: rgba(1, 118, 23, 0.3); }
.color-web { color: #053DBD; }
.bg-web { background-color: rgba(5, 61, 189, 0.3); }
.color-jeu { color: #FF0000; }
.bg-jeu { background-color: rgba(255, 0, 0, 0.3); }


/* 6. DYNAMISME SUR LES BLOCS LOGICIELS (Cartes Modernes) */
.software-card {
 background: #fff;
 border-radius: 12px;
 padding: 20px;
 transition: all 0.3s ease;
 border: 1px solid #eee;
 height: 100%; /* S'assure que les cartes d'une même ligne ont la même hauteur */
 display: flex; /* Flexbox pour aligner le contenu */
 align-items: flex-start;
}

.software-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 30px rgba(0,0,0,0.08);
 border-color: #ddd;
}

/* === CORRECTION DU CARRÉ NOIR ET DE L'ESPACE BLANC AU CLIC === */
.software-card > a {
 display: inline-block;
 outline: none; /* Supprime le contour de focus du navigateur */
}

/* Optionnel mais recommandé pour l'accessibilité si on retire l'outline */
.software-card > a:focus-visible img {
  box-shadow: 0 0 0 3px rgba(5, 61, 189, 0.5); /* Remet un anneau visible propre si on navigue au clavier */
}

.software-card > a img {
 vertical-align: bottom; /* Supprime l'espace fantôme sous l'image causé par l'alignement texte */
 border-radius: 8px;
 transition: transform 0.3s ease;
 margin-right: 20px;
 flex-shrink: 0; /* Empêche l'image de rétrécir */
}

.software-card:hover > a img {
 transform: scale(1.05) rotate(-2deg);
}

.software-content {
 flex-grow: 1;
}

.software-card h3 {
 margin: 0 0 10px 0;
 font-size: 18px;
 font-weight: bold;
}

.software-card h3 a {
 text-decoration: none;
 outline: none; /* Sécurité supplémentaire sur le titre */
 transition: color 0.2s ease;
}

.software-card:hover h3 a {
 color: #1a1e23 !important; 
}

.software-card p {
 font-size: 14px;
 color: #555;
 line-height: 1.5;
 margin: 0;
}

/* 7. DYNAMISME SUR LES BOUTONS DES GUIDES */
.guide-card {
 background-color: #ffffff;
 border: 1px solid #e0e0e0;
 border-radius: 12px;
 padding: 25px;
 height: 100%;
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animation plus "élastique" */
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 position: relative;
 overflow: hidden;
}

.guide-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 4px;
 height: 100%;
 transition: width 0.3s ease;
}

.guide-numerologie::before { background-color: #053DBD; }
.guide-enneagramme::before { background-color: #AB0BCD; }

.guide-card:hover {
 box-shadow: 0 10px 20px rgba(0,0,0,0.05);
 transform: translateY(-3px);
}
.guide-card:hover::before {
 width: 6px; /* La bordure s'épaissit au survol */
}

.guide-card .btn {
 transition: all 0.3s ease;
 border-width: 2px;
 border-radius: 20px; /* Boutons plus arrondis */
 padding: 8px 20px;
 text-transform: uppercase;
 font-size: 12px;
 letter-spacing: 0.5px;
}
.guide-card.guide-numerologie .btn:hover {
 background-color: #053DBD;
 color: white !important;
 box-shadow: 0 4px 10px rgba(5, 61, 189, 0.3);
}
.guide-card.guide-enneagramme .btn:hover {
 background-color: #6A1B9A;
 color: white !important;
 box-shadow: 0 4px 10px rgba(106, 27, 154, 0.3);
}

/* Utilitaires de marge */
.mb-40 { margin-bottom: 40px; }
.mb-20 { margin-bottom: 20px; }