/* assets/css/style.css */

/* ==========================================================================
   VARIABLES CSS GLOBALES ET RÉINITIALISATION (Reset)
   ========================================================================== */

:root {
    /* Palette de couleurs principale */
    --quicksand: #b99f8b;         
    --quicksand-light: #d1c3b6;  
    --white-rock: #f0ebdf;        
    --white-rock-medium: #e8e1d3; 
    --white-rock-light: #f8f6f2;  
    --black-pearl: #04101f;       
    --black-pearl-light: #1a2435; 
    --walnut: #703a18;            
    --walnut-light: #9b623a;      

    /* Variables de conception */
    --border-radius-sm: 8px;    
    --border-radius-md: 12px;   
    --container-width: 1140px;  
    --section-padding: clamp(3rem, 6vw, 5rem); 
}

/* Réinitialisation CSS moderne */
*, *::before, *::after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html { 
    scroll-behavior: smooth; 
    font-size: 62.5%;        
}

body {
    font-family: 'Outfit', sans-serif; 
    font-size: 1.6rem;                 
    line-height: 1.7;                  
    background-image: url('/blog/outilsgratuit/assets/images/textures/mur-crepis-texture.webp'); 
    background-color: var(--white-rock-medium); 
    background-repeat: repeat;                   
    color: var(--black-pearl);           
    padding: 0;                          
}

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

a { 
    color: var(--walnut);         
    text-decoration: none;      
}

a:hover { 
    color: var(--walnut-light); 
}

/* ==========================================================================
   FIN VARIABLES ET RESET
   ========================================================================== */

/* ==========================================================================
   == STYLES POUR LE BOUTON DE RETOUR AU SITE PRINCIPAL (AJOUTÉ) ============
   ========================================================================== */

.back-to-main-site-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.6rem;
    margin-bottom: 2.5rem; /* Espace entre le bouton et le titre H1 */
    border: 1px solid var(--quicksand-light);
    border-radius: 50px; /* Pour un effet "pilule" */
    color: var(--quicksand-light);
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
}

.back-to-main-site-link:hover {
    background-color: var(--quicksand-light);
    color: var(--black-pearl-light);
    border-color: var(--quicksand-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

.back-to-main-site-link i {
    width: 16px;
    height: 16px;
    stroke-width: 2.5px;
}

/* ==========================================================================
   STYLES DU CONTENEUR PRINCIPAL (PAGE WRAPPER)
   ========================================================================== */

.page-wrapper {
    width: 100%;                          
    max-width: var(--container-width);    
    margin: 2rem auto;                    
    background-color: var(--white-rock-light); 
    box-shadow: 0 5px 25px rgba(0,0,0,0.05); 
}

/* ==========================================================================
   FIN PAGE WRAPPER
   ========================================================================== */


/* ==========================================================================
   STYLES DES BOUTONS
   ========================================================================== */

/* --- BOUTON STANDARD (Utilisé pour la plupart des actions) --- */
.btn-standard { 
    display: inline-flex;
    align-items: center;
    justify-content: center; 
    gap: 1rem;
    background-color: var(--walnut); 
    color: var(--white-rock-light);
    padding: 1.3rem 2.6rem; 
    border-radius: var(--border-radius-sm);
    font-family: 'Outfit', sans-serif; 
    font-size: 1.6rem; 
    font-weight: 500;   
    text-decoration: none;
    text-align: center;
    transition: all 0.25s ease; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
    border: none; 
    cursor: pointer;
    line-height: 1.2; 
}

.btn-standard:hover {
    background-color: var(--walnut-light); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	color : var(--white-rock-light);
}

.btn-standard i { 
    width: 1.7rem; 
    height: 1.7rem;
    stroke-width: 2.5px; 
}

/* --- BOUTON CTA AVEC DÉGRADÉ (Pour les appels à l'action principaux) --- */
.btn-cta-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center; 
    gap: 1.3rem;
    background: linear-gradient(to right, 
        var(--walnut) 0%, 
        var(--walnut) 50%, 
        var(--black-pearl-light) 100%
    );
    color: var(--white-rock-light);
    padding: 1.5rem 3rem; 
    border-radius: var(--border-radius-sm);
    font-family: 'Outfit', sans-serif; 
    font-size: 1.8rem; 
    font-weight: 600;   
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    border: none; 
    cursor: pointer;
    line-height: 1; 
}

.btn-cta-gradient:hover {
    transform: translateY(-3px) scale(1.02); 
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
	color : var(--white-rock-light);
}

.btn-cta-gradient i { 
    width: 1.9rem; 
    height: 1.9rem;
    stroke-width: 2.5px; 
}

.btn-cta-gradient > i,
.btn-cta-gradient > svg {
    position: relative; /* Permet d'utiliser top, bottom, etc. */
    top: 1px; /* Déplace l'icône légèrement vers le bas. Testez 1px, 2px. */
                /* Si vous voulez que le texte monte, mettez une valeur négative ici, ex: -1px */
    /* margin-right: 0.8rem;  Conservez ou ajustez la marge droite si elle est définie ici */
}

.btn-cta-gradient .btn-text {
    position: relative;
    top: -1px; /* Déplace le texte légèrement vers le haut. Testez -1px, -2px. */
    /* Ou essayez d'ajuster display et vertical-align : */
    /* display: inline-block; */
    /* vertical-align: middle; */ /* ou baseline, ou une valeur en px */
}

/* ==========================================================================
   FIN STYLES DES BOUTONS
   ========================================================================== */


/* ==========================================================================
   STYLES SPÉCIFIQUES À LA PAGE "OUTILS-GRATUITS.HTML" 
   ET STYLES COMMUNS AUX FORMULAIRES ET SECTIONS DE CAPTURE
   ========================================================================== */

/* Header de la page outils-gratuits.html */
.tools-header {
    padding: 6rem var(--section-padding); 
    text-align: center;
    background-color: var(--black-pearl-light);        
    color: var(--white-rock-light);       
    border-bottom: 5px solid var(--quicksand); 
}

.tools-header .logo img { 
    height: 80px; 
    margin: 0 auto 1.5rem auto; 
    filter: brightness(0) invert(1); 
}

.tools-header h1 {
    font-family: 'Bebas Neue', sans-serif; 
    font-size: clamp(3.4rem, 6vw, 4.8rem); 
    line-height: 1.15; 
    letter-spacing: 0.02em;
    color: var(--white-rock-light); 
    margin-bottom: 0.5rem;
}

.tools-header .subtitle {
    font-size: clamp(1.6rem, 2.5vw, 1.8rem); 
    font-weight: 300;
    color: var(--quicksand-light); 
    max-width: 60ch; 
    margin: 0 auto; 
}

/* Section d'introduction sur outils-gratuits.html (et potentiellement réutilisable) */
.intro-section { 
    padding: var(--section-padding); 
    text-align: center; 
    background-color: #fff; 
}

.intro-section .overline { 
    font-family: 'Playfair Display', serif; 
    font-style: italic; 
    font-size: clamp(1.8rem, 2.5vw, 2.2rem); 
    color: var(--walnut);
    margin-bottom: 0.8rem; 
    display: block; 
}

.intro-section h2 {
    font-family: 'Bebas Neue', sans-serif; 
    font-size: clamp(3rem, 5vw, 4.2rem);
    color: var(--black-pearl); 
    margin-bottom: 1.5rem; 
    line-height: 1.2;
}

.intro-section .philosophy-text {
    font-size: 1.7rem; 
    color: var(--black-pearl-light); 
    max-width: 70ch;
    margin: 0 auto 2rem auto; 
    line-height: 1.8;
}

.founders-photo { 
    width: 150px; 
    height: 150px; 
    border-radius: 50%; 
    object-fit: cover; 
    margin: 0 auto 1.5rem auto; 
    border: 4px solid var(--white-rock-medium);
}

/* Conteneur des titres de section (utilisé sur outils-gratuits.html) */
.section-title-container { 
    text-align:center; 
    margin-bottom:3rem; 
    padding: 0 1.5rem;
}

.section-title-container .overline { 
    margin-bottom: 0.5rem; 
}

.section-title-container h3 {
    font-family: 'Bebas Neue', sans-serif; 
    font-size: clamp(2.8rem, 4.5vw, 3.8rem);
    color: var(--black-pearl); 
    margin-bottom: 0.8rem;
}

.section-title-container p {
    font-size: 1.6rem; 
    color: var(--black-pearl-light); 
    max-width: 60ch; 
    margin: 0 auto;
}

/* Grilles d'outils (utilisé sur outils-gratuits.html) */
.tools-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 2.5rem; 
    padding: 0 var(--section-padding) var(--section-padding);
}

.gated-tools-section .tools-grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 2.5rem; 
}

.gated-tools-section .tool-card { 
    flex-basis: calc(33.333% - 2rem); 
    min-width: 300px; 
    max-width: 350px; 
}

/* Cartes d'outils (utilisé sur outils-gratuits.html) */
.tool-card {
    background-color: #fff; 
    border-radius: var(--border-radius-md);
    box-shadow: 0 6px 20px rgba(4,16,31,0.07); 
    padding: 2.5rem;
    display: flex; 
    flex-direction: column; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.tool-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 30px rgba(4,16,31,0.1); 
}

.tool-card .tool-icon { 
    color: var(--walnut); 
    width: 4rem; 
    height: 4rem; 
    margin-bottom: 1.5rem; 
}

.tool-card .tool-tag { 
    font-size: 1.2rem; 
    font-weight: 500; 
    color: var(--quicksand);
    background-color: var(--white-rock); 
    padding: 0.3rem 0.8rem;
    border-radius: 20px; 
    display: inline-block; 
    margin-bottom: 1rem;
}

.tool-card h4 { 
    font-family: 'Outfit', sans-serif; 
    font-size: 2rem; 
    font-weight: 600;
    color: var(--black-pearl); 
    margin-bottom: 1rem;
}

.tool-card p.tool-description {
    font-size: 1.5rem; 
    color: var(--black-pearl-light);
    line-height: 1.6; 
    margin-bottom: 2rem; 
    flex-grow: 1; 
}

.tool-card .tool-value { 
    font-size: 1.4rem; 
    font-style: italic; 
    color: var(--walnut); 
    margin-bottom: 2rem; 
}

/* assets/css/style.css */

.tool-card .tool-action { 
    /* Ces styles s'appliquent à la fois à l'état bloqué et débloqué */
    display: inline-flex; /* Ou flex si vous voulez qu'il prenne toute la largeur */
    align-items: center;
    justify-content: center; 
    gap: 0.8rem; /* Réduit pour l'icône et le texte */
    padding: 1.1rem 1.5rem; /* Ajustez pour un look de bouton */
    border-radius: var(--border-radius-sm);
    font-family: 'Outfit', sans-serif; 
    font-size: 1.5rem; 
    font-weight: 500;   
    text-decoration: none;
    text-align: center;
    transition: all 0.25s ease; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
    border: none; 
    cursor: pointer;
    line-height: 1.2; 
    width: 100%; /* Pour que le bouton prenne toute la largeur de la carte */
    box-sizing: border-box;
}

/* Style lorsque l'outil est DÉBLOQUÉ (après que 'locked' soit retiré) */
.tool-card .tool-action:not(.locked) {
    background-color: var(--walnut); 
    color: var(--white-rock-light);
}
.tool-card .tool-action:not(.locked):hover {
    background-color: var(--walnut-light); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color : var(--white-rock-light); /* Pour s'assurer que la couleur du texte reste sur hover */
}
.tool-card .tool-action:not(.locked) i { 
    width: 1.6rem; 
    height: 1.6rem;
    stroke-width: 2.5px; 
}


/* Style lorsque l'outil est BLOQUÉ */
.tool-card .tool-action.locked { 
    background-color: var(--quicksand-light); 
    color: var(--black-pearl-light);
    cursor: not-allowed; /* Indique que ce n'est pas cliquable (bien que ce soit un lien) */
    opacity: 0.8; /* Un peu estompé */
    /* display: flex; /* déjà dans .tool-action */
    /* align-items: center; /* déjà dans .tool-action */
    /* justify-content: center; /* déjà dans .tool-action */
}
.tool-card .tool-action.locked:hover { /* Pas d'effet de survol spécial pour le lien bloqué */
    background-color: var(--quicksand-light);
    transform: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Conserver l'ombre de base */
}

.tool-card .tool-action.locked i { 
    width:1.6rem; 
    height:1.6rem; 
    margin-right:0.8rem; 
    vertical-align: middle; /* Utile si le texte et l'icône ne s'alignent pas bien */
}

.tool-card.highlight-visioncouple { 
    background-color: var(--quicksand-light); 
    border: 2px solid var(--quicksand); 
}

.tool-card.highlight-visioncouple .tool-icon { 
    color: var(--walnut); 
}

.tool-card.highlight-visioncouple .tool-tag { 
    background-color: var(--white-rock-light); 
    color: var(--walnut);
}

.tool-card.highlight-visioncouple .tool-action { 
    background-color: var(--walnut); 
}

/* Section de capture d'email (COMMUNE à toutes les pages avec formulaire) */
.email-capture-section {
    background-color: var(--black-pearl); 
    color: var(--white-rock-light);
    padding: var(--section-padding); 
    text-align: center;
}

/* Styles pour le titre et sous-titre DANS la section de capture */
.email-capture-section h3 { /* S'applique à #emailCaptureTitle, #mainCaptureTitle etc. */
    font-family: 'Bebas Neue', sans-serif; 
    font-size: clamp(3rem, 5vw, 4.2rem);
    color: var(--white-rock-light); 
    margin-bottom: 1rem;
}

.email-capture-section h3 .highlight { 
    color: var(--quicksand-light); 
} 

.email-capture-section .form-subtitle { /* S'applique à #emailCaptureSubtitle, #mainCaptureSubtitle etc. */
    font-size: 1.8rem; 
    margin-bottom: 2.5rem; 
    color: var(--quicksand-light); 
}

/* Formulaire d'email (COMMUN) */
.email-form { 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
    max-width: 450px; 
    margin: 0 auto 2.5rem auto; 
}

.email-form input[type="email"], 
.email-form input[type="text"] {
    padding: 1.5rem; 
    border: 1px solid var(--quicksand);
    border-radius: var(--border-radius-sm); 
    background-color: var(--white-rock-light);
    font-family: 'Outfit', sans-serif; 
    font-size: 1.6rem; 
    color: var(--black-pearl);
}

.email-form input[type="email"]::placeholder, 
.email-form input[type="text"]::placeholder { 
    color: var(--black-pearl-light); 
    opacity: 0.7; 
}

.email-form button { 
    width: 100%; 
}

.privacy-note { 
    font-size: 1.3rem; 
    color: var(--quicksand-light); 
    margin-top: 2rem; 
    opacity: 0.8; 
}

.email-capture-section [id^="formConfirmation"] .form-subtitle strong { /* Pour l'email en gras */
    color: var(--white-rock); /* Un peu plus de contraste pour l'email confirmé */
    font-weight: 600;
}

/* Footer de la page outils-gratuits.html */
.tools-footer { /* Reste spécifique à outils-gratuits pour l'instant, à fusionner avec .tool-page-footer si identique */
    padding: var(--section-padding); 
	text-align: center; 
	background-color: var(--white-rock-light);
}

.tools-footer .overline { 
	color: var(--walnut); 
	margin-bottom: 0.5rem; 
}

.tools-footer h3 {
    font-family: 'Bebas Neue', sans-serif; 
	font-size: clamp(2.8rem, 4.5vw, 4rem);
    color: var(--black-pearl); 
	margin-bottom: 1.5rem;
}

.tools-footer .footer-cta-text {
    font-size: 1.7rem; 
	color: var(--black-pearl-light); 
    margin-left: auto; 
    margin-right: auto;
    margin-bottom: 2.5rem; 
	line-height: 1.8;
}


/* ==========================================================================
   STYLES COMMUNS AUX PAGES D'OUTILS INDIVIDUELS (ex: revelation-couple.html)
   ========================================================================== */

.tool-page-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 1.5rem var(--section-padding); 
    background-color: #fff;
    border-bottom: 1px solid var(--white-rock-medium);
}

.tool-page-header .logo img { 
    height: 45px; 
    filter: none; 
}

.back-to-tools-link { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.8rem;
    font-size: 1.5rem; 
    font-weight: 500; 
    color: var(--black-pearl-light);
}

.back-to-tools-link i { 
    width: 1.8rem; 
    height: 1.8rem; 
}

.back-to-tools-link:hover { 
    color: var(--walnut); 
}

.tool-intro-section { 
    padding: var(--section-padding); 
    text-align: center;
    background-color: var(--white-rock-light); 
}

.tool-intro-section h1 { 
    font-family: 'Bebas Neue', sans-serif; 
    font-size: clamp(3.8rem, 7vw, 5.8rem);
    color: var(--walnut); 
    margin-bottom: 0.5rem;
}

.tool-intro-section .tool-subtitle { 
    font-family: 'Outfit', sans-serif; 
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 300; 
    color: var(--black-pearl-light); 
    margin-bottom: 2rem;
}

.tool-intro-section .lead-paragraph { 
    font-size: clamp(1.7rem, 2.8vw, 2rem); 
    font-weight: 300;
    color: var(--black-pearl); 
    max-width: 70ch; 
    margin: 0 auto 2rem auto;
}

.tool-intro-section .highlight { 
    color: var(--walnut); 
    font-weight: 600; 
} 

.short-divider { 
    width: 6rem; 
    height: 0.3rem;
    background: linear-gradient(to right, var(--walnut), var(--quicksand));
    margin: 2rem auto 2.5rem auto; 
    border-radius: 999px;
}


/* Section CTA initial sur les pages outils */
.initial-cta-section {
    padding: var(--section-padding);
    text-align: center; /* MODIFIÉ de 'l' à 'center' pour cohérence */
    background-color: var(--white-rock-light); 
}

.initial-cta-section .overline { 
    color: var(--walnut);
    margin-bottom: 0.5rem;
}

.initial-cta-section h3 { 
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 4.5vw, 4rem);
    color: var(--black-pearl);
    margin-bottom: 1.5rem;
}
.initial-cta-section .footer-cta-text { /* Ajout pour centrer le texte */
    font-size: 1.7rem; 
	color: var(--black-pearl-light); 
    max-width: 70ch; /* Limiter la largeur pour une meilleure lisibilité */
    margin-left: auto; 
    margin-right: auto;
    margin-bottom: 2.5rem; 
	line-height: 1.8;
}


.initial-cta-section .footer-cta-button { 
    margin-top: 1.5rem; 
    margin-bottom: 0; 
}

/* Footer COMMUN à toutes les pages (fusion de .tool-page-footer et .tools-footer) */
.tool-page-footer, 
.tools-footer {
    padding: 2.5rem var(--section-padding); 
    text-align: left; 
    background-color: var(--white-rock-light); 
    border-top: 1px solid var(--white-rock-medium);
}

.footer-content-grid {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 1rem; 
}

.copyright { /* Style unique pour .copyright */
    margin-top: 0; 
    font-size: 1.4rem; 
    color: var(--black-pearl-light);
}

.footer-legal-links {
    display: flex; 
    flex-wrap: wrap; 
    gap: 1rem; 
}

.footer-legal-links a {
    font-size: 1.4rem; 
    color: var(--black-pearl-light);
    text-decoration: none; 
    margin-left: 1.5rem; 
}

.footer-legal-links a:first-child {
    margin-left: 0; 
}

.footer-legal-links a:hover {
    color: var(--walnut);
    text-decoration: underline;
}

/* ==========================================================================
   STYLES POUR LE BLOC DE CONFIRMATION D'INSCRIPTION (VERSION SANS BOÎTE)
   ========================================================================== */

/* Cible toutes les div de confirmation ... */
div[id^="formConfirmation"] {
    display: none;
    padding: 3rem 2rem 1rem 2rem;
    /* SUPPRESSION des styles de la boîte */
    /* border: 1px solid var(--quicksand-light); */
    /* border-radius: var(--border-radius-md); */
    /* background-color: var(--black-pearl-light); */
    max-width: 600px;
    margin: 0 auto;
    animation: fadeIn 0.5s ease-in-out;
    text-align: center; /* On s'assure que tout est centré */
}

/* Le titre H3 (Merci...) */
div[id^="formConfirmation"] h3 {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--white-rock-light);
    font-size: clamp(3rem, 5vw, 4.2rem);
    line-height: 1.2; /* Augmenté légèrement pour espacer les lignes */
    margin-bottom: 2rem; /* Plus d'espace après le titre */
    letter-spacing: 1px;
}

/* NOUVELLE RÈGLE pour styliser la deuxième ligne du titre H3 */
div[id^="formConfirmation"] h3 .confirmation-subtitle {
    display: block; /* S'assure qu'il est sur sa propre ligne */
    font-family: 'Courgette', cursive;
    color: var(--walnut);
    font-size: 0.7em; /* Taille relative au H3, plus harmonieux */
    font-weight: normal; /* La police Courgette n'a pas besoin d'être grasse */
    margin-top: 0.5rem; /* Espace par rapport à "Merci..." */
    letter-spacing: normal; /* Annule l'espacement du Bebas Neue */
}

/* Le sous-titre principal */
div[id^="formConfirmation"] .form-subtitle {
    color: var(--white-rock);
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Le texte en gras (email et message) */
div[id^="formConfirmation"] .form-subtitle strong {
    color: var(--quicksand-light); /* Met en évidence l'email et l'action */
    font-weight: 600;
}

/* Le petit paragraphe d'aide (vérifiez vos spams) */
div[id^="formConfirmation"] > p:not(.form-subtitle) {
    font-size: 1.5rem; /* Légèrement plus grand pour la lisibilité */
    color: var(--quicksand-light);
    opacity: 0.9;
    margin-top: 2rem;
    line-height: 1.7;
}

/* L'icône de l'enveloppe */
div[id^="formConfirmation"] i[data-feather="mail"] {
    color: var(--quicksand); /* Une couleur un peu plus vive pour l'icône */
    stroke-width: 1.5px; /* Une icône un peu plus fine et élégante */
    width: 60px;
    height: 60px;
    margin-top: 2.5rem;
}

/* === STYLES POUR LE BOUTON DE CONFIRMATION (AJOUTÉ) === */
.confirmation-action-wrapper {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.confirmation-send-btn {
    background-color: var(--walnut);
    border: 1px solid var(--walnut);
    transition: all 0.3s ease;
}

.confirmation-send-btn:hover {
    background-color: var(--walnut-light);
    border-color: var(--walnut-light);
}

/* Style du bouton pendant le chargement */
.confirmation-send-btn.is-loading {
    background-color: var(--black-pearl-light);
    cursor: wait;
}

/* Style du bouton après succès */
.confirmation-send-btn.is-success {
    background-color: #27ae60; /* Vert succès */
    border-color: #27ae60;
    cursor: default;
}

/* Style du bouton en cas d'erreur */
.confirmation-send-btn.is-error {
    background-color: #c0392b; /* Rouge erreur */
    border-color: #c0392b;
}

/* Animation d'apparition */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   STYLES POUR LE BANDEAU DE TÉLÉCHARGEMENT (VERSION SANS BOX - COULEURS CORRIGÉES)
   ========================================================================== */

.download-banner {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-top: 3rem;
    text-align: center;
    /* La couleur est héritée de la section parente (.email-capture-section) qui est déjà claire */
    box-shadow: none;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.download-banner-header {
    display: block;
    border-bottom: 1px solid var(--black-pearl-light); /* Ligne de séparation plus visible sur fond sombre */
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.download-banner-header i {
    color: var(--quicksand); /* Couleur sable, plus douce que le noyer sur fond sombre */
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem auto;
}

.download-banner-header h4 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: var(--white-rock-light); /* MODIFIÉ : Texte clair */
    margin: 0;
    line-height: 1.2;
}

.download-banner p.intro-text {
    font-size: 1.7rem;
    color: var(--quicksand-light); /* MODIFIÉ : Texte clair mais contrasté */
    margin-bottom: 2.5rem;
    max-width: 55ch;
    margin-left: auto;
    margin-right: auto;
}

.key-points-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 3rem;
    display: inline-block;
    text-align: left;
    color: var(--white-rock-medium); /* MODIFIÉ : Couleur de base pour le texte de la liste */
}

.key-points-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
}

.key-points-list li i {
    color: var(--quicksand); /* MODIFIÉ : Couleur sable pour les icônes check */
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.download-banner .confirmation-action-wrapper {
    text-align: center;
    margin-top: 1.5rem;
}

.download-banner .btn-standard {
    padding: 1.4rem 3rem;
    font-size: 1.7rem;
    font-weight: 600;
    /* Les couleurs du bouton sont déjà correctes */
}

/* ==========================================================================
   STYLES DU NOUVEAU FOOTER DES PAGES OUTILS (AJOUTÉ)
   ========================================================================== */

/* --- Conteneur principal du footer --- */
.tools-footer,
.tool-page-footer {
    background-color: var(--black-pearl-light);
    color: var(--quicksand-light);
    padding: 4rem var(--section-padding) 3rem;
    text-align: left; /* Réinitialise le centrage */
    border-top: 4px solid var(--quicksand);
}

/* --- Partie supérieure (Logo & Social) --- */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap; /* Permet de passer à la ligne sur mobile */
    gap: 1.5rem;
}

.footer-brand .footer-logo img {
    height: 40px; /* Logo plus petit et élégant */
    filter: brightness(0) invert(1); /* Passe le logo noir en blanc */
}

.footer-brand .footer-tagline {
    font-size: 1.4rem;
    color: var(--quicksand-light);
    opacity: 0.8;
    margin-top: 0.8rem;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-social .social-link {
    color: var(--quicksand-light);
    transition: color 0.2s ease, transform 0.2s ease;
}
.footer-social .social-link:hover {
    color: #fff;
    transform: translateY(-2px);
}

.footer-social .social-link i {
    width: 22px;
    height: 22px;
}

/* Style spécifique pour l'icône TikTok SVG */
.footer-social .tiktok-link svg {
    width: 20px;
    height: 20px;
    fill: var(--quicksand-light);
    transition: fill 0.2s ease;
}
.footer-social .tiktok-link:hover svg {
    fill: #fff;
}


/* --- Partie inférieure (Copyright & Légal) --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.3rem;
    opacity: 0.8;
}

.footer-bottom .footer-legal-links a {
    color: var(--quicksand-light);
    transition: color 0.2s ease;
}

.footer-bottom .footer-legal-links a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ==========================================================================
   AJUSTEMENTS RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) { 
    .gated-tools-section .tool-card { 
        flex-basis: calc(50% - 1.5rem); 
        max-width: none; 
    }
}

@media (max-width: 768px) { 
    .page-wrapper { 
        margin: 1rem auto; 
    } 
    
    .tools-header, 
    .intro-section, 
    .tools-grid, 
    .email-capture-section, 
    .tools-footer,
    .tool-page-header, 
    .tool-intro-section, 
    .tool-page-footer, 
    .initial-cta-section { 
        padding-left: 2rem; 
        padding-right: 2rem;
    }

    .tools-grid { 
        grid-template-columns: 1fr; 
    } 

    .gated-tools-section .tool-card { 
        flex-basis: 100%; 
    } 

    .tools-header h1 { 
        font-size: 3rem; 
    }

    .intro-section h2 { 
        font-size: 2.8rem; 
    }

    .section-title-container h3 { 
        font-size: 2.6rem; 
    }

    .email-capture-section h3 { 
        font-size: 2.8rem; 
    }

    .tools-footer h3 { 
        font-size: 2.6rem; 
    } 

    .tools-footer .footer-cta-button { 
        font-size: 1.6rem; 
        padding: 1.2rem 2.5rem;
    }

    .tool-page-header { 
        flex-direction: column; 
        gap: 1rem; 
    }

    .tool-page-header .logo img { 
        margin-bottom: 0.5rem; 
    }

    .tool-intro-section h1 { 
        font-size: 3.2rem; 
    }

    .tool-intro-section .tool-subtitle { 
        font-size: 1.7rem; 
    }

    .initial-cta-section h3 { 
        font-size: 2.6rem; 
    }
     .initial-cta-section .footer-cta-text {
        text-align: center; /* Assurer le centrage du texte sur mobile */
    }


    .initial-cta-section .footer-cta-button { 
        font-size: 1.6rem; 
        padding: 1.2rem 2.5rem; 
    }

    .tool-page-footer {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }
    .footer-content-grid {
        flex-direction: column-reverse; /* On conserve l'inversion copyright / liens */
        align-items: center;    
        text-align: center;     
        gap: 1.5rem; 
    }
    .footer-legal-links {
        display: flex; /* Assure que c'est un conteneur flex */
        flex-wrap: wrap; /* AJOUTÉ : Permet aux éléments de passer à la ligne */
        justify-content: center; 
        gap: 0.5rem 1rem; /* AJOUTÉ ET MODIFIÉ : Gère l'espace vertical et horizontal réduit */
    }
    .footer-legal-links a:first-child {
        flex-basis: 100%; /* AJOUTÉ : Force ce lien à prendre toute la largeur et à être sur sa propre ligne */
        margin-bottom: 0.5rem; /* AJOUTÉ : Crée un petit espace avec la ligne du dessous */
        color: var(--walnut); /* AJOUTÉ : Change la couleur comme demandé */
        text-decoration: underline; /* AJOUTÉ : Souligne le lien */
        font-weight: 500; /* AJOUTÉ : On peut le rendre un peu plus visible */
    }
    .footer-legal-links a {
        /* SUPPRIMÉ : Les marges sont maintenant gérées par la propriété 'gap' du conteneur */
        margin-left: 0; 
        margin-right: 0;
    }
        /* Pour les titres principaux des outils (ex: "FONDATIONS SOLIDES") */
    .tool-page .tool-intro-section h1 {
        font-size: 3.6rem; /* Ajustez cette valeur si besoin */
    }

    /* Pour les titres de section (ex: "Pourquoi Ces Conversations Sont Cruciales") */
    .tool-page .section-title-fancy {
        font-size: 3rem; /* Ajustez cette valeur si besoin */
    }
    
    /* Pour les titres de sous-section (ex: "Comment structurer ces échanges") */
    .tool-page .content-section h3 {
        font-size: 2.2rem; /* Ajustez cette valeur si besoin */
    }

    /* Pour tous les paragraphes et items de liste dans le contenu */
    .tool-page .content-section p,
    .tool-page .content-section li {
        font-size: 1.55rem; /* Valeur légèrement réduite pour plus de confort */
        line-height: 1.75;  /* On peut légèrement augmenter l'interligne pour compenser */
    }
        .download-banner {
        margin-top: 2rem;
    }
    .download-banner-header h4 {
        font-size: 2.6rem; /* Titre légèrement plus petit sur mobile */
    }
    .download-banner p.intro-text {
        font-size: 1.6rem;
    }
    .key-points-list {
        display: block; /* La liste prend toute la largeur disponible */
        padding: 0 1rem; /* Un peu d'espace sur les côtés */
    }
    .key-points-list li {
        font-size: 1.5rem;
    }
    .download-banner .btn-standard {
        width: 100%; /* Le bouton prend toute la largeur */
        padding: 1.5rem;
        font-size: 1.6rem;
    }
    .tools-footer,
    .tool-page-footer {
        padding: 3rem 2rem;
    }

    .footer-top,
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-top {
        gap: 2rem;
    }

    .footer-bottom {
        gap: 1.5rem;
        flex-direction: column-reverse; /* Met le copyright en bas */
    }

    .footer-legal-links {
       flex-direction: column;
       gap: 1rem;
    }
    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}