/* =============================================================
   RESPONSIVE.CSS - Fichier centralise pour toute la responsivite
   -------------------------------------------------------------
   A charger EN DERNIER apres tous les autres CSS.
   Contient :
   - Les media queries de tous les composants (ex nav, contact,
     index, projets, experiences, projet-detail, experience-detail)
   - Les preferences utilisateur (prefers-reduced-motion)
   - Les correctifs d'accessibilite / compatibilite tactile
   ============================================================= */


/* =============================================================
   0. SAFETY NET GLOBAL
   Empeche tout debordement horizontal accidentel sur toute la page.
   overflow-x: clip est prefere a hidden car il ne cree pas de
   scroll container (qui casserait position: sticky sur la navbar).
   ============================================================= */

html, body {
    overflow-x: clip;
    max-width: 100%;
}


/* =============================================================
   1. PREFERENCES UTILISATEUR (Accessibilite)
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    /* Global (index.css) */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .scroll-reveal,
    .scroll-reveal .skill-card,
    .scroll-reveal .project-card {
        opacity: 1;
        transform: none;
    }

    /* Experiences */
    .timeline-item { opacity: 1; transform: none; }
    .timeline-item::after { opacity: 1; transform: scale(1); }
    .timeline-item.reveal-visible { transition: none; }
    .timeline-item.current::after { animation: none; }
    .exp-badge.en-cours::before { animation: none; }
    .exp-hero-content { animation: none; opacity: 1; transform: none; }
    .timeline-item .task-list li { opacity: 1; transform: none; }

    /* Projets */
    .project-card { opacity: 1; }
    .project-card.stagger-visible { animation: none; opacity: 1; }
}


/* =============================================================
   2. COMPATIBILITE TACTILE (hover: none)
   Evite les etats "suspendus" sur mobile/tablette
   ============================================================= */

@media (hover: none) {
    /* Boutons : feedback visuel via :active au lieu de :hover */
    .styled-button-primary:hover,
    .styled-button-secondary:hover,
    .filter-btn:hover,
    .nav-links a:hover,
    .project-card:hover,
    a.timeline-content:hover,
    .carousel-btn:hover {
        transform: none;
        box-shadow: inherit;
    }

    /* Anti-debordement : neutralise l'agrandissement padding-right au hover
       (sinon ca reste "colle" sur tactile et fait deborder le bouton) */
    .styled-button-primary:hover,
    .styled-button-secondary:hover {
        padding-right: 2rem;
    }
    .styled-button-primary:hover .inner-button,
    .styled-button-secondary:hover .icon-container {
        transform: none;
    }

    /* Menu : retire le soulignement automatique au hover (vu persistant sur iOS) */
    .nav-links a:hover::after { transform: scaleX(0); }

    /* Image produit : pas de zoom au hover sur tactile */
    .project-card:hover .card-image img { transform: none; }
}


/* =============================================================
   3. DESKTOP LARGE - jusqu'a 1300px
   ============================================================= */

@media (max-width: 1300px) {
    /* Projet-detail : sommaire passe au dessus */
    .projet-layout {
        display: flex;
        flex-direction: column-reverse;
        gap: 40px;
    }
    .project-sidebar {
        position: relative;
        top: 0;
        width: 100%;
        max-height: none;
        z-index: 1;
        grid-column: auto;
    }
    .projet-content-wrapper {
        grid-column: auto;
        max-width: 100%;
    }
    .projet-detail-container {
        max-width: 900px;
    }

    /* Experience-detail : colonnes empilees */
    .project-container {
        grid-template-columns: 1fr;
        max-width: 900px;
        gap: 40px;
    }
    .project-sidebar,
    .project-sidebar-right,
    .project-content {
        grid-column: auto;
        position: relative;
        top: 0;
        max-height: none;
    }
    .project-sidebar-right { order: -2; }
    .project-content { order: -1; padding: 25px; }
    .project-sidebar { order: 0; }
    .project-header { height: 50vh; }
}


/* =============================================================
   4. DESKTOP - jusqu'a 1100px (projet-detail sidebar)
   ============================================================= */

@media (max-width: 1100px) {
    .project-sidebar {
        position: relative;
        top: 0;
        width: 100%;
        max-height: none;
    }
}


/* =============================================================
   5. TABLETTES - jusqu'a 1024px (iPad Pro)
   ============================================================= */

@media (max-width: 1024px) {
    /* Contact : grille formulaire + infos s'empilent plus tot */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* =============================================================
   6. TABLETTES / GROS MOBILES - jusqu'a 900px
   ============================================================= */

@media (max-width: 900px) {
    /* Index : layout me-container et section-content */
    .section-content {
        padding: 30px;
        grid-template-rows: auto auto;
    }
    .section-content .section-title {
        max-width: 100%;
        font-size: 48px;
    }
    .section-content .section-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 20px 0;
    }
    .section-content .section-footer p { max-width: 100%; }
    #me-container {
        grid-template-columns: 1fr;
        padding: 40px 30px;
    }

    /* Nav : reduction padding */
    .navbar { padding: 20px 30px; }
}


/* =============================================================
   7. MOBILES - jusqu'a 768px
   ============================================================= */

@media (max-width: 768px) {
    /* Nav : menu burger - LIQUID GLASS (iOS style)
       Fond tres transparent + flou intense + aberration chromatique SVG
       + reflet interne pour la sensation de surface en verre */
    .nav-links {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;

        /* Tres legere teinte pour l'effet "vitre" pure */
        background-color: rgba(232, 235, 224, 0.18);

        /* Flou + saturation + aberration chromatique (filtre SVG inline) */
        backdrop-filter: blur(30px) saturate(200%) url(#chromatic-aberration);
        -webkit-backdrop-filter: blur(30px) saturate(200%);

        /* Double reflet : bordure gauche claire + ombre interieure pour le volume */
        border-left: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow:
            inset 1px 0 0 rgba(255, 255, 255, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25),
            -30px 0 80px rgba(47, 62, 70, 0.12);

        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        transform: translateX(100%);
        transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1050;
        padding-top: calc(80px + env(safe-area-inset-top));
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    /* Couche de "brillance" diagonale pour renforcer l'effet verre */
    .nav-links::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0) 60%,
            rgba(132, 169, 140, 0.08) 100%
        );
        pointer-events: none;
        z-index: 0;
    }

    /* Fallback : si le navigateur ne gere pas backdrop-filter, on opacifie */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .nav-links { background-color: rgba(232, 235, 224, 0.96); }
        .nav-links::before { display: none; }
    }

    .nav-links li {
        margin: 0;
        position: relative;
        z-index: 1;
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .nav-links a {
        position: relative;
        display: inline-block;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: clamp(1.5rem, 6vw, 2rem);
        letter-spacing: 0.5px;
        color: #1a2629 !important;
        /* Supprime le flash bleu/gris du tap mobile (iOS/Android)
           pour laisser visible uniquement notre animation Liquid Glass */
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        text-shadow:
            0 0 8px rgba(255, 255, 255, 0.9),
            0 0 16px rgba(255, 255, 255, 0.6),
            0 1px 2px rgba(255, 255, 255, 0.8);
        padding: 14px 28px;
        text-align: center;
        /* Transition fluide pour les effets hover */
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                    letter-spacing 0.4s ease;
        z-index: 1;
    }

    /* Pilule "Liquid Glass" qui apparait au survol/focus derriere le lien */
    .nav-links a::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(14px) saturate(180%);
        -webkit-backdrop-filter: blur(14px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            inset 0 -1px 0 rgba(132, 169, 140, 0.15),
            0 4px 20px rgba(47, 62, 70, 0.08);
        opacity: 0;
        transform: scale(0.7);
        transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1),
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        pointer-events: none;
        z-index: -1;
    }

    /* Underline accent vert (conserve, decale en dessous de la pilule) */
    .nav-links a::after {
        height: 3px;
        background-color: #84A98C;
        border-radius: 2px;
        bottom: -2px;
    }

    /* Etat hover / focus / active : pilule visible + texte legerement agrandi */
    .nav-links a:hover,
    .nav-links a:focus-visible,
    .nav-links a:active {
        transform: translateY(-1px);
        letter-spacing: 1.2px;
    }
    .nav-links a:hover::before,
    .nav-links a:focus-visible::before,
    .nav-links a:active::before {
        opacity: 1;
        transform: scale(1);
    }

    .nav-active {
        transform: translateX(0%);
    }
    .nav-active li {
        opacity: 1;
        transform: translateY(0);
    }
    .nav-active li:nth-child(1) { transition-delay: 0.15s; }
    .nav-active li:nth-child(2) { transition-delay: 0.23s; }
    .nav-active li:nth-child(3) { transition-delay: 0.31s; }
    .nav-active li:nth-child(4) { transition-delay: 0.39s; }
    .nav-active li:nth-child(5) { transition-delay: 0.47s; }

    .burger { display: block; }

    /* ===== Experiences : timeline verticale mobile =====
       Geometrie calibree selon les principes de design :
       - Container aere : 24px de padding lateral (confort visuel)
       - Ligne a left: 20px (donc ~44px du bord ecran) : gauchage volontaire
       - Rond de 22px centre pile sur la ligne (left: 11px, centre a 22px)
       - Flechette pointant vers la ligne, tip exactement sur la ligne
       - Spacing vertical : 12px margin-bottom entre cartes
    */

    .exp-container {
        padding: 0 24px;
        margin-bottom: 60px;
    }

    .timeline::after {
        left: 20px;
        margin-left: 0;
    }

    .timeline-item {
        width: 100%;
        /* 60px : rectangle decale plus a droite, flechette a x=50-60 */
        padding-left: 60px;
        padding-right: 0;
        margin-bottom: 12px;
        box-sizing: border-box;
    }

    /* Toutes les cartes s'alignent a gauche */
    .timeline-item.right { left: 0; }

    /* Rond parfaitement centre sur la ligne (centre a x = 22px).
       top ajuste pour s'aligner verticalement avec la flechette :
       la flechette est dans .timeline-content qui est decalee vers le bas
       par la date (padding-top 10px + date ~29px = ~39px d'offset) + le
       top:22 de la fleche dans le card. On cible ~61px. */
    .timeline-item::after,
    .timeline-item.right::after {
        left: 11px;
        right: auto;
        top: 60px;
    }

    /* Date : badge compact au-dessus de la carte */
    .timeline-date,
    .timeline-item.right .timeline-date {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        text-align: left;
        margin: 0 0 10px 0;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.6px;
        color: var(--text-mid);
        text-transform: uppercase;
    }

    /* Flechette restauree : pointe vers la gauche, tip sur la ligne */
    a.timeline-content::before,
    .timeline-item.right a.timeline-content::before {
        display: block;
        left: -10px;
        right: auto;
        top: 22px;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Carte : padding homogene selon principes de design (hierarchie claire) */
    a.timeline-content {
        padding: 22px 20px;
        border-radius: 12px;
    }

    a.timeline-content h2 {
        font-size: 1.15rem;
        line-height: 1.3;
        margin: 0 0 4px 0;
    }

    a.timeline-content h3 {
        font-size: 0.95rem;
        margin: 0 0 10px 0;
    }

    a.timeline-content .location {
        font-size: 0.8rem;
        margin-bottom: 14px;
    }

    a.timeline-content .description {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    a.timeline-content .task-list {
        padding-left: 18px;
        margin: 0 0 16px 0;
    }

    a.timeline-content .task-list li {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 6px;
    }

    a.timeline-content .timeline-cta {
        margin-top: 4px;
        font-size: 0.9rem;
    }

    /* Animation d'entree : gauche uniquement sur mobile */
    .timeline-item.left,
    .timeline-item.right { transform: translateX(-24px); }

    /* IMPORTANT : override explicite de reveal-visible sur mobile
       (sinon la regle ci-dessus gagne par cascade et le rond reste
       translate a gauche en permanence, desaligne de la ligne) */
    .timeline-item.left.reveal-visible,
    .timeline-item.right.reveal-visible { transform: translateX(0); }

    /* Hero experiences plus compact */
    .exp-hero {
        height: 22vh;
        min-height: 160px;
        max-height: 220px;
        margin-bottom: 48px;
    }

    /* ===== Page Projets - Adaptations mobile (<=768px) ===== */
    .projets-container {
        padding: 0 20px;
        margin: 24px auto 60px;
    }
    .projets-header {
        margin-bottom: 28px;
    }

    /* Grille : 1fr simple, plus de minmax(300px) qui causait des debordements
       sur les viewports etroits (<360px de largeur utile) */
    .project-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    /* Cartes : leger resserrement du contenu, image gardee en aspect-ratio */
    .project-card {
        /* Reset du box-shadow hover desktop pour eviter les artefacts au tap */
        box-shadow: 0 3px 10px rgba(47, 62, 70, 0.06);
    }
    .card-content {
        padding: 18px;
    }
    .card-title {
        font-size: 1.15rem;
        margin-bottom: 8px;
    }
    .card-content p {
        font-size: 0.95rem;
        line-height: 1.55;
        margin-bottom: 16px;
    }
    .card-tags {
        gap: 6px;
        margin-bottom: 12px;
    }
    .card-tag {
        font-size: 11px;
        padding: 3px 9px;
    }

    /* Bouton "Voir plus" dans la card : plus compact, pleine largeur */
    .card-content .styled-button-primary {
        padding: 10px 16px !important;
        font-size: 0.95rem;
    }

    /* Thumbnail portfolio genere en CSS : icone plus petite sur mobile */
    .portfolio-blueprint .blueprint-icon {
        font-size: clamp(2rem, 10vw, 4rem);
    }

    /* Controles empiles (filtres au-dessus, recherche en dessous) */
    .project-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        width: 100%;
        min-width: 0;
    }

    /* Grille compacte de pilules, taille reduite pour tenir sur 2-3 lignes
       sans desordre. Chaque bouton a une largeur auto mais padding reduit. */
    .filter-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 8px;
        width: 100%;
        min-width: 0;
    }

    .filter-btn {
        padding: 7px 14px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        border-width: 1.5px;
        line-height: 1.2;
    }

    .filter-btn.active {
        box-shadow: 0 2px 6px rgba(82, 121, 111, 0.25);
    }

    /* Barre de recherche : pleine largeur, compacte
       Note : font-size reste 16px (force par l'anti-zoom iOS plus bas) */
    .search-wrapper {
        width: 100%;
        min-width: 0;
    }
    #search-bar {
        padding: 10px 18px;
    }

    /* ===== Projet detail : adaptations mobile (<=768px) ===== */
    .projet-detail-container {
        padding: 0 16px;
        margin: 40px auto 60px;
    }
    .projet-intro-text {
        font-size: 1.05rem;
        margin-bottom: 30px;
    }
    .projet-content {
        font-size: 1rem;
        line-height: 1.65;
        min-width: 0;
        overflow-wrap: break-word;
    }
    .projet-content-wrapper {
        min-width: 0;
        max-width: 100%;
    }
    /* Hero projet : plus compact sur mobile */
    .project-hero {
        height: 50vh;
        min-height: 320px;
    }
    .hero-content {
        padding: 0 20px;
    }
    .hero-title {
        font-size: clamp(2rem, 9vw, 3rem);
    }
    /* Bannieres avec zoom : reduire le min-height */
    .project-header {
        min-height: 300px;
        height: 45vh;
    }
    .header-content {
        padding: 16px;
    }
    /* Typo creative : eviter les tailles XL qui debordent */
    .text-huge {
        font-size: clamp(1.75rem, 7vw, 3rem);
    }
    .text-xl {
        font-size: 1.5rem;
    }
    .text-lg {
        font-size: 1.25rem;
    }
    /* Citation : reduire padding pour ne pas deborder */
    .citation-style {
        padding: 16px 18px 16px 26px;
        font-size: 1rem;
    }
    .citation-style::before {
        font-size: 40px;
        left: 6px;
    }
    /* Sommaire : padding reduit sur mobile */
    .toc-container {
        padding: 20px;
    }

    /* Colonnes de texte empilees */
    .text-columns-container {
        flex-direction: column;
        gap: 30px;
    }
    .text-column-item { width: 100%; }

    /* Experience detail : meme traitement */
    .project-container {
        padding: 0 16px;
    }
    .project-content {
        padding: 20px;
    }

    /* Projet-detail : PDF plus petit */
    .pdf-viewer {
        height: 50vh;
        min-height: 400px;
    }
    .pdf-actions {
        flex-direction: column;
        gap: 10px;
    }
    .pdf-actions::before {
        margin-right: 0;
        margin-bottom: 5px;
    }
}


/* =============================================================
   8. PETITS MOBILES - jusqu'a 600px
   ============================================================= */

@media (max-width: 600px) {
    /* Index - Hero */
    .hero-title { font-size: 3rem; }
    .hero-desc { font-size: 1.1rem; }
    .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .hero-actions a {
        width: 100%;
        justify-content: center;
    }

    /* Boutons : padding reduit sur mobile pour eviter les debordements */
    .styled-button-primary,
    .styled-button-secondary {
        padding: 0.85rem 1.25rem;
        font-size: 1rem;
    }
    .styled-button-primary .inner-button,
    .styled-button-secondary .icon-container {
        width: 32px;
        height: 32px;
        margin-left: 8px;
        flex-shrink: 0;
    }

    /* Index : hero background en scroll au lieu de fixed (perf iOS) */
    .hero-section {
        background-attachment: scroll;
    }

    /* Contact */
    .contact-header p { font-size: 16px; }
    .contact-content { padding: 25px; }

    /* Experience-detail : header plus petit */
    .experience-header {
        font-size: 36px;
    }

    /* Projet-detail : grids d'images en colonne */
    .media-grid {
        flex-direction: column;
        width: 100% !important;
    }

    /* Projet-detail : carousel portrait pleine largeur */
    .carousel-container.mode-portrait {
        max-width: 100% !important;
    }

    /* Projet-detail : boutons carousel plus petits */
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* Wiki-popup (projet-detail & experience-detail) */
    .wiki-popup {
        width: 200px;
        left: 0;
        transform: translateX(-20%);
    }
    .wiki-word:hover .wiki-popup {
        transform: translateX(-20%) translateY(0);
    }
    .wiki-popup::after { left: 20%; }
}


/* =============================================================
   9. TRES PETITS MOBILES - jusqu'a 500px
   ============================================================= */

@media (max-width: 500px) {
    .section-content .section-title { font-size: 36px; }
    #me-container .me-content p { font-size: 16px; }
    #skills-section,
    #featured-projects,
    #contact-cta {
        padding: 40px 30px;
    }

    /* Projets : padding lateral du container + cards encore compactes */
    .projets-container {
        padding: 0 16px;
    }
    .card-content {
        padding: 16px;
    }
    .card-title {
        font-size: 1.05rem;
    }
    .card-content p {
        font-size: 0.9rem;
        margin-bottom: 14px;
    }
    .card-tag {
        font-size: 10.5px;
        padding: 2px 8px;
    }

    /* Message "aucun resultat" : moins de padding */
    .no-results-message {
        padding: 28px 16px;
    }
}


/* =============================================================
   10. MINI MOBILES - jusqu'a 380px (iPhone SE et equivalents)
   ============================================================= */

@media (max-width: 380px) {
    /* Nav : reduction du padding */
    .navbar { padding: 12px 15px; }

    /* Bouton back-to-top : ne doit pas etre coupe */
    #back-to-top,
    .back-to-top {
        bottom: 15px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* Hero : titre plus petit */
    .hero-title { font-size: 2.5rem; }
    .hero-desc { font-size: 1rem; }

    /* Projets : dernier cran de compacite pour ecrans minuscules */
    .projets-container { padding: 0 12px; }
    .card-content { padding: 14px; }
    .filter-btn {
        padding: 6px 11px;
        font-size: 12px;
    }
    #search-bar {
        padding: 9px 14px;
        /* font-size: 16px force plus bas pour eviter le zoom Safari */
    }
}


/* =============================================================
   11. ACCESSIBILITE TACTILE (toutes tailles)
   Supprime le delai 300ms de double-tap iOS sur les elements
   interactifs et evite le zoom automatique Safari sur input <16px
   ============================================================= */

.styled-button-primary,
.styled-button-secondary,
.filter-btn,
.nav-links a,
.carousel-btn,
.burger,
.project-card,
.project-card a,
a.timeline-content {
    touch-action: manipulation;
    /* Supprime le flash bleu/gris natif du tap iOS/Android
       (laisse les animations CSS custom s'exprimer seules) */
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* Anti-zoom Safari sur inputs : force 16px minimum sur mobile */
@media (max-width: 600px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}