/* ============================================
   Styles Responsive Communs
   Appliqués à toutes les pages
   ============================================ */

/* ============================================
   Mobile-first : zones sûres (encoches, barre home)
   ============================================ */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Cibles tactiles minimum 44px pour boutons et liens de navigation */
button, .navbar-toggle,
input[type="submit"], input[type="button"],
.accueil-cta-primary, .accueil-cta-secondary,
.accueil-benefit-pill,
.navbar a {
    min-height: 44px;
}
button, .navbar-toggle,
.accueil-cta-primary, .accueil-cta-secondary,
.accueil-benefit-pill {
    min-width: 44px;
}
/* Retour tactile visible au tap (mobile) */
a, button {
    -webkit-tap-highlight-color: rgba(0, 153, 32, 0.2);
    tap-highlight-color: rgba(0, 153, 32, 0.2);
}
/* Éviter le zoom sur focus des inputs (iOS) si font-size >= 16px */
input, select, textarea {
    font-size: 16px !important;
}
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Amélioration du contraste pour la lisibilité */
p {
    color: rgb(60, 60, 60) !important;
}

h1, h2, h3 {
    color: rgb(50, 50, 50) !important;
}

/* ============================================
   Modernisation du bandeau texte
   Layout "photo de fond + bandeau texte"
   ============================================ */

/* Overlay sombre global pour améliorer le contraste photo/texte */
body[style*="background-image"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Bandeau texte moderne - centré et réduit */
.texte {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px 40px 48px 40px !important;
    margin-top: 80px !important;
    margin-bottom: 40px !important;
    
    /* Effet glass moderne avec transparence pour voir la photo */
    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    /* Coins arrondis doux (tous les angles) */
    border-radius: 20px;
    
    /* Ombre subtile */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    
    /* Typographie améliorée */
    line-height: 1.75;
}

/* Masquer les <br> en haut du bandeau pour que le texte commence en haut */
.texte > br:first-child,
.texte > br:nth-child(2),
.texte > br:nth-child(3),
.texte > br:nth-child(4),
.texte > br:nth-child(5) {
    display: none;
}

/* Amélioration typographie dans .texte */
.texte p {
    margin-bottom: 1.5rem !important;
    line-height: 1.8 !important;
    color: rgb(50, 50, 50) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.texte p:last-child {
    margin-bottom: 0 !important;
}

/* Amélioration des listes */
.texte ul,
.texte ol {
    margin: 1.5rem 0 !important;
    padding-left: 2rem !important;
    line-height: 1.85 !important;
}

.texte li {
    margin-bottom: 0.75rem !important;
    color: rgb(50, 50, 50) !important;
}

.texte ul li {
    list-style-type: none;
    position: relative;
    padding-left: 1.5rem;
}

.texte ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: rgba(117, 122, 118, 0.6);
    font-size: 1.2em;
    line-height: 1.5;
}

/* Titres dans .texte */
.texte h1,
.texte h2,
.texte h3 {
    margin-top: 2rem !important;
    margin-bottom: 1.25rem !important;
    margin-left: 0 !important;
    line-height: 1.3 !important;
    color: rgb(40, 40, 40) !important;
}

.texte h1:first-child,
.texte h2:first-child,
.texte h3:first-child {
    margin-top: 0 !important;
}

/* Responsive - Tablette */
@media (max-width: 1024px) {
    .texte {
        max-width: 90%;
        padding: 32px 32px 40px 32px !important;
        margin-top: 80px !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .texte {
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 28px 24px 32px 24px !important;
        margin-top: 100px !important;
        border-radius: 16px;
    }
    
    .texte p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }
    
    .texte h1 {
        font-size: 1.75rem !important;
        margin-left: 0 !important;
    }
    
    .texte h2 {
        font-size: 1.5rem !important;
        margin-left: 0 !important;
    }
    
    .texte h3 {
        font-size: 1.25rem !important;
        margin-left: 0 !important;
    }
    
    .texte ul,
    .texte ol {
        padding-left: 1.5rem !important;
    }
}

/* Responsive - Petit mobile */
@media (max-width: 480px) {
    .texte {
        max-width: 98% !important;
        padding: 24px 20px 28px 20px !important;
        margin-top: 90px !important;
        border-radius: 12px;
    }
    
    .texte p {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }
    
    .texte h1 {
        font-size: 1.5rem !important;
    }
    
    .texte h2 {
        font-size: 1.25rem !important;
    }
    
    .texte h3 {
        font-size: 1.1rem !important;
    }
    
    .texte ul,
    .texte ol {
        padding-left: 1.25rem !important;
    }
}

/* Performance : background-attachment scroll sur mobile (fixed cause repaints) */
@media (max-width: 768px) {
    body.page-bg,
    body[style*="background-image"],
    .accueil-body {
        background-attachment: scroll !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.page-bg,
    body[style*="background-image"],
    .accueil-body {
        background-attachment: scroll !important;
    }
}

/* Amélioration de la navbar responsive sur toutes les pages */
@media (max-width: 768px) {
    body {
        padding-top: calc(70px + env(safe-area-inset-top, 0px));
    }
}

@media (max-width: 480px) {
    body {
        padding-top: calc(60px + env(safe-area-inset-top, 0px));
    }
}