/* ==========================================================================
   STYLES RESPONSIVE - MARIE MARTINEAU
   ========================================================================== */

/* Variables pour les breakpoints responsive */
:root {
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-large: 1200px;
    
    /* Valeurs responsive communes */
    --mobile-padding: 12px;
    --mobile-small-padding: 8px;
    --mobile-gap: 12px;
    --mobile-font-size: 14px;
}



/* ==========================================================================
   NAVIGATION RESPONSIVE
   ========================================================================== */

/* Navigation tablette */
@media (max-width: var(--breakpoint-tablet)) {
    .navbar {
        height: 70px;
    }
    
    .nav-container {
        padding: 0 var(--spacing-sm);
        height: 70px;
        align-items: center;
    }
    
    .nav-name {
        font-size: var(--font-size-base);
    }
    
    /* Cacher le menu normal sur tablette */
    .nav-menu {
        display: none !important;
    }
    
    /* Afficher le bouton hamburger sur tablette aussi */
    .nav-toggle {
        display: flex;
        flex-shrink: 0;
        margin-left: var(--spacing-sm);
    }
    
    /* Menu tablette - style mobile */
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: var(--spacing-lg) var(--spacing-md);
        gap: var(--spacing-md);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        border-bottom: var(--border-primary);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: flex !important;
    }
    
    /* Menu tablette - visible quand ouvert */
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-link {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm) 0;
        text-align: center;
        border-bottom: 1px solid var(--gray-200);
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }
    
    /* Cacher le numéro de téléphone sur tablette et mobile */
    .nav-phone {
        display: none;
    }
}

/* Navigation mobile */
@media (max-width: var(--breakpoint-mobile)) {
    .navbar {
        height: 70px;
    }
    
    .nav-container {
        height: 70px;
        align-items: center;
    }
    
    .nav-logo {
        gap: var(--mobile-small-padding);
        flex-shrink: 0;
    }
    
    .nav-logo-img {
        height: 50px;
        width: auto;
    }
    
    .nav-icons {
        font-size: var(--font-size-base);
        letter-spacing: 3px;
    }
    
    .nav-name {
        font-size: var(--font-size-sm);
        white-space: nowrap;
    }
    
    /* Cacher le menu normal sur mobile */
    .nav-menu {
        display: none !important;
    }
    
    /* Afficher le bouton hamburger sur mobile */
    .nav-toggle {
        display: flex !important;
        flex-shrink: 0;
        margin-left: var(--spacing-sm);
    }
    
    /* Menu mobile - style mobile */
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: var(--spacing-lg) var(--spacing-md);
        gap: var(--spacing-md);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        border-bottom: var(--border-primary);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: flex !important;
        z-index: 999;
    }
    
    /* Menu mobile - visible quand ouvert */
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-link {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm) 0;
        text-align: center;
        border-bottom: 1px solid var(--gray-200);
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   TABLETTES - max-width: 1024px
   ========================================================================== */
@media (max-width: var(--breakpoint-desktop)) {
    .container {
        padding: var(--spacing-sm);
    }
    
    .tagline {
        font-size: var(--font-size-4xl);
        padding: 12px 25px;
    }
    
    .name {
        font-size: var(--font-size-5xl);
    }
    
    .situations-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .services-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-lg);
    }
    
    /* Photo responsive tablette */
    .about-photo {
        width: 180px;
        height: 180px;
    }
}

/* ==========================================================================
   MOBILES - max-width: 768px
   ========================================================================== */
@media (max-width: var(--breakpoint-tablet)) {
    .container {
        padding: var(--mobile-padding);
    }
    
    /* Header mobile */
    header {
        padding: var(--spacing-xxl) var(--spacing-sm);
        margin-bottom: var(--spacing-xxl);
    }
    
    .header-icons {
        font-size: var(--font-size-2xl);
        letter-spacing: 12px;
    }
    
    .tagline {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-md);
    }
    
    .name {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--mobile-small-padding);
    }
    
    .title {
        font-size: var(--font-size-xs);
        letter-spacing: 2px;
    }
    
    .subtitle {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-lg);
    }
    
    /* Typographie mobile */
    h2 {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-lg);
    }
    
    h3 {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-sm);
    }
    
    /* Sections mobile */
    section {
        margin-bottom: var(--spacing-xl);
    }
    
    /* Intro hook mobile */
    .intro-hook {
        padding: var(--spacing-xl) var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }
    
    .intro-hook p {
        font-size: var(--font-size-3xl);
    }
    
    /* Grilles mobile - une colonne */
    .situations-grid,
    .services-container,
    .approach-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .about-grid,
    .about-three-blocks,
    .contact-grid,
    .follow-up-grid,
    .qualifications-grid,
    .qualifications-values-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .about-left-blocks {
        gap: var(--spacing-md);
    }
    
    /* Cartes de service mobile */
    .service-card {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
    }
    
    .price-badge {
        top: -8px;
        right: -8px;
        font-size: var(--font-size-base);
        padding: 6px 12px;
    }
    
    .service-title {
        font-size: var(--font-size-base);
        min-height: 2em;
    }
    
    /* Images dans les cartes de service mobile */
    .service-image {
        height: 100px;
    }
    
    .service-card-image {
        width: 100px;
        height: 100px;
    }
    
    /* Boutons mobile */
    .cta-button {
        padding: 12px 25px;
        font-size: var(--font-size-sm);
        margin: var(--spacing-sm) 5px;
        display: block;
        text-align: center;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Sections spécifiques mobile */
    .about-section,
    .contact-section,
    .follow-up-services {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    /* Photo responsive mobile */
    .about-photo {
        width: 150px;
        height: 150px;
        border-width: 3px;
    }
    
    .about-photo-container {
        margin: var(--spacing-lg) 0;
    }
    
    .critical-point {
        padding: var(--spacing-lg) var(--spacing-md);
        margin: var(--spacing-lg) 0;
    }
    
    .quote {
        padding: var(--spacing-md);
        font-size: var(--font-size-base);
        margin: var(--spacing-md) 0;
    }
}

/* ==========================================================================
   PETITS MOBILES - max-width: 480px
   ========================================================================== */
@media (max-width: var(--breakpoint-mobile)) {
    .container {
        padding: var(--spacing-xs);
    }
    
    /* Header très mobile */
    header {
        padding: var(--spacing-xl) var(--spacing-xs);
        margin-bottom: var(--spacing-xl);
    }
    
    .tagline {
        font-size: var(--font-size-2xl);
    }
    
    .name {
        font-size: var(--font-size-3xl);
    }
    
    .subtitle {
        font-size: var(--font-size-sm);
    }
    
    /* Typographie très mobile */
    h2 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-md);
    }
    
    .intro-hook {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .intro-hook p {
        font-size: var(--font-size-2xl);
    }
    
    /* Cartes très mobiles - padding et typographie */
    .situation-item,
    .approach-item,
    .service-card,
    .about-section-item,
    .contact-item,
    .qualifications-card {
        padding: var(--spacing-sm);
    }
    
    .situation-title,
    .service-title {
        font-size: var(--font-size-sm);
    }
    
    .situation-desc,
    .approach-item p,
    .service-features li {
        font-size: var(--font-size-sm);
    }
    
    /* Prix très mobile */
    .price-badge {
        font-size: var(--font-size-sm);
        padding: 5px 10px;
    }
    
    /* Boutons très mobile */
    .cta-button {
        padding: 10px 20px;
        font-size: var(--font-size-sm);
        margin: var(--spacing-xs) 0;
    }
    
    /* Contact très mobile */
    .contact-item h4 {
        font-size: var(--font-size-sm);
    }
    
    .contact-item p {
        font-size: var(--font-size-sm);
    }
    
    /* Qualifications très mobile */
    .qualifications-card .card-header {
        padding: var(--spacing-sm);
    }
    
    .qualifications-card .icon {
        font-size: var(--font-size-2xl);
    }
    
    .qualifications-card h3 {
        font-size: var(--font-size-lg);
    }
    
    .experience-number {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-xl);
    }
    
    .collaboration-notice {
        padding: var(--spacing-sm);
        flex-direction: column;
        text-align: center;
    }
    
    .collaboration-notice .notice-icon {
        font-size: var(--font-size-xl);
    }
}

/* ==========================================================================
   LANDSCAPE MOBILE - orientation paysage
   ========================================================================== */
@media (max-width: 768px) and (orientation: landscape) {
    header {
        padding: var(--spacing-md) 0;
    }
    
    .tagline {
        font-size: var(--font-size-lg);
        padding: 8px 20px;
    }
    
    .name {
        font-size: 22px;
    }
    
    section {
        margin-bottom: var(--spacing-xl);
    }
    
    .situations-grid,
    .approach-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mobile-gap);
    }
    
    .services-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

/* ==========================================================================
   TRÈS GRANDS ÉCRANS - min-width: 1200px
   ========================================================================== */
@media (min-width: var(--breakpoint-large)) {
    .container {
        max-width: 1200px;
        padding: var(--spacing-xl);
    }
    
    .tagline {
        font-size: var(--font-size-4xl);
        padding: 18px 35px;
    }
    
    .name {
        font-size: 36px;
    }
    
    .situations-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
    
    .services-container {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xxl);
    }
    
    .approach-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   ACCESSIBILITÉ ET UX
   ========================================================================== */

/* Focus visible pour l'accessibilité */
.cta-button:focus,
a:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Réduction des animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
    .situation-item,
    .cta-button {
        transition: none;
    }
    
    .situation-item:hover,
    .cta-button:hover {
        transform: none;
    }
}

/* Mode sombre (préparé pour future implémentation) */
@media (prefers-color-scheme: dark) {
    /* Styles pour le mode sombre à implémenter si nécessaire */
}

/* ==========================================================================
   IMPRESSION
   ========================================================================== */
@media print {
    /* Styles pour l'impression - mode noir et blanc */
    header {
        background: none !important;
        color: #000 !important;
    }
    
    .cta-button {
        border: 2px solid #000;
        background: none !important;
        color: #000 !important;
    }
    
    .price-badge {
        background: none !important;
        color: #000 !important;
        border: 1px solid #000;
    }
}