/* CSS optimisé pour seniors 60+ avec charte Repair Café officielle */

/* Import Google Fonts - Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* Couleurs officielles Repair Café */
:root {
    --rc-blue-primary: #2d2e82;
    --rc-orange-accent: #ed6a42;
    --rc-blue-light: #e8e8ff;
    --rc-white: #ffffff;
    --rc-gray-text: #374151;
    --rc-shadow-light: 0 1px 3px rgba(45, 46, 130, 0.1);
    --rc-shadow-medium: 0 4px 6px rgba(45, 46, 130, 0.15);
    --rc-shadow-strong: 0 10px 15px rgba(45, 46, 130, 0.2);
}

/* Tailles de police augmentées */
body {
    font-size: 20px;
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
    color: var(--rc-gray-text);
}

h1 { font-size: 2.5rem !important; }
h2 { font-size: 2rem !important; }
h3 { font-size: 1.5rem !important; }
h4 { font-size: 1.25rem !important; }

/* Boutons plus gros et visibles - Charte Repair Café */
.btn-senior {
    min-height: 56px;
    font-size: 20px;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: var(--rc-shadow-light);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Boutons primaires - Orange Repair Café */
.btn-senior.btn-primary {
    background-color: var(--rc-orange-accent);
    color: var(--rc-white);
}

.btn-senior.btn-primary:hover {
    background-color: #d85a37;
    transform: translateY(-2px);
    box-shadow: var(--rc-shadow-strong);
}

/* Boutons secondaires - Bleu Repair Café */
.btn-senior.btn-secondary {
    background-color: var(--rc-blue-primary);
    color: var(--rc-white);
}

.btn-senior.btn-secondary:hover {
    background-color: #252674;
    transform: translateY(-2px);
    box-shadow: var(--rc-shadow-strong);
}

/* Boutons outline */
.btn-senior.btn-outline {
    background-color: transparent;
    color: var(--rc-blue-primary);
    border: 2px solid var(--rc-blue-primary);
}

.btn-senior.btn-outline:hover {
    background-color: var(--rc-blue-primary);
    color: var(--rc-white);
    transform: translateY(-2px);
    box-shadow: var(--rc-shadow-strong);
}

/* Boutons outline blancs pour fond coloré */
.btn-senior.btn-outline-white {
    background-color: transparent;
    color: var(--rc-white);
    border: 2px solid var(--rc-white);
}

.btn-senior.btn-outline-white:hover {
    background-color: var(--rc-white);
    color: var(--rc-blue-primary);
    transform: translateY(-2px);
    box-shadow: var(--rc-shadow-strong);
}

.btn-senior:hover {
    transform: translateY(-2px);
    box-shadow: var(--rc-shadow-strong);
}

/* Navigation plus visible - Charte Repair Café */
nav {
    background-color: var(--rc-blue-primary) !important;
    box-shadow: var(--rc-shadow-medium);
}

nav a {
    font-size: 18px !important;
    font-weight: 500;
    padding: 12px 16px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9) !important;
}

nav a:hover {
    color: var(--rc-white) !important;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

/* États actifs du menu */
.nav-active {
    color: var(--rc-white) !important;
    font-weight: 700 !important;
    background-color: var(--rc-orange-accent) !important;
    border-radius: 6px;
}

.nav-mobile-active {
    background-color: var(--rc-orange-accent) !important;
    color: var(--rc-white) !important;
    font-weight: 700 !important;
    border-radius: 6px;
}

/* Bouton mobile menu */
nav button {
    color: var(--rc-white) !important;
}

nav button:hover {
    color: var(--rc-orange-accent) !important;
}

/* Couleurs et contrastes - Charte Repair Café */
.text-high-contrast {
    font-weight: 400;
}

.text-primary {
    color: var(--rc-blue-primary) !important;
}

.text-accent {
    color: var(--rc-orange-accent) !important;
}

/* Fonds selon charte */
.bg-soft-blue {
    background-color: var(--rc-blue-light);
}

.bg-primary {
    background-color: var(--rc-blue-primary);
}

.bg-accent {
    background-color: var(--rc-orange-accent);
}

/* Gradients modernes */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--rc-blue-primary) 0%, #3d3f98 100%);
}

.bg-gradient-light {
    background: linear-gradient(135deg, var(--rc-white) 0%, var(--rc-blue-light) 100%);
}

/* Gradient orange moderne pour banners */
.bg-gradient-orange {
    background: linear-gradient(135deg, var(--rc-orange-accent) 0%, #f97316 50%, #ea580c 100%);
    box-shadow: 
        inset 0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 -4px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Typographie moderne pour banners */
.banner-title {
    font-size: clamp(3.5rem, 10vw, 6rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 
        0 1px 0 rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
}

.banner-subtitle {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: 400;
    opacity: 0.95;
    line-height: 1.4;
    margin-top: 0.25rem;
    letter-spacing: -0.01em;
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

/* Espacement généreux */
.section-senior {
    padding: 4rem 0;
}

/* Cards modernes avec charte Repair Café */
.card-senior {
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: var(--rc-shadow-medium);
    transition: all 0.3s ease;
    background-color: var(--rc-white);
}

.card-senior:hover {
    transform: translateY(-4px);
    box-shadow: var(--rc-shadow-strong);
}

/* Cards avec bordure accent */
.card-senior.card-primary {
    border-left: 4px solid var(--rc-blue-primary);
}

.card-senior.card-accent {
    border-left: 4px solid var(--rc-orange-accent);
}

/* Cards transparentes pour fond coloré */
.card-senior.card-transparent {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Headers de sections */
.section-header {
    background: var(--rc-gradient-primary);
    color: var(--rc-white);
    box-shadow: var(--rc-shadow-medium);
}

/* Images et icônes */
.icon-senior {
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
}

/* Focus visible pour navigation clavier - Charte Repair Café */
a:focus, button:focus {
    outline: 3px solid var(--rc-orange-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Liens plus visibles - Charte Repair Café */
a {
    color: var(--rc-blue-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--rc-orange-accent);
}

nav a, .btn-senior {
    text-decoration: none;
}

/* Liens accent */
a.link-accent {
    color: var(--rc-orange-accent);
    font-weight: 600;
}

a.link-accent:hover {
    color: #d85a37;
}

/* Logo sur fond bleu - plus besoin de background */

/* Responsive amélioré pour seniors */
@media (max-width: 768px) {
    body {
        font-size: 20px;
    }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    
    .btn-senior {
        font-size: 22px;
        min-height: 60px;
        padding: 18px 24px;
    }
    
    nav a {
        font-size: 20px !important;
        padding: 16px;
    }
}

/* Section Hero avec image de fond */
.hero-section {
    min-height: 600px;
    position: relative;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Ombres modernes pour améliorer la lisibilité sur image de fond */
.hero-text-shadow {
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 16px 32px rgba(0, 0, 0, 0.05);
}

/* Header portfolio avec image de fond */
.portfolio-header {
    min-height: 300px;
    position: relative;
}

.portfolio-header img {
    filter: brightness(0.9);
}

/* Header infos avec image de fond et effet parallaxe */
.infos-header {
    min-height: 300px;
    position: relative;
}

.infos-header .parallax-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.infos-header img {
    filter: brightness(0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 110%; /* Réduit de 120% à 110% */
    width: auto;
    height: auto;
}

/* CTA infos avec image de fond */
.infos-cta {
    position: relative;
}

.infos-cta img {
    filter: brightness(0.8);
}

/* Header agenda avec image de fond */
.agenda-header {
    min-height: 300px;
    position: relative;
}

.agenda-header img {
    filter: brightness(0.9);
}

/* Responsive pour le header agenda */
@media (max-width: 768px) {
    .agenda-header {
        min-height: 200px;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .agenda-header .banner-title {
        font-size: 2.5rem;
    }
    
    .agenda-header .banner-subtitle {
        font-size: 1.125rem;
    }
}

/* Header contact avec image de fond */
.contact-header {
    min-height: 300px;
    position: relative;
}

.contact-header img {
    filter: brightness(0.9);
}

/* Responsive pour le header contact */
@media (max-width: 768px) {
    .contact-header {
        min-height: 200px;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .contact-header .banner-title {
        font-size: 2.5rem;
    }
    
    .contact-header .banner-subtitle {
        font-size: 1.125rem;
    }
}

/* Responsive pour la hero section */
@media (max-width: 768px) {
    .hero-section {
        min-height: 500px;
    }
}

/* Animations réduites pour éviter le vertige */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}