/* ==========================================================================
   APROPOS.CSS (spécifique page À propos)
   - Scope strict : .apropos-page (n'impacte pas les autres pages)
   - Objectif :
     1) Garder EXACTEMENT le look "référence" (reference.css)
     2) Ajouter quelques grilles internes propres (highlights / skills / galerie)
     3) Rester sobre + pro (pas trop d'effets)
   ========================================================================== */


/* ==========================================================================
   1) ESPACEMENTS ENTRE CARTES (rythme visuel)
   ========================================================================== */

/* Espace vertical entre les cartes */
.apropos-page.parallax-wrapper > .services {
    margin-top: 6rem;
}

/* Première carte collée à l'intro comme sur tes autres pages */
.apropos-page .intro-wrapper + .services {
    margin-top: 4rem;
}


/* ==========================================================================
   2) LISTES (styles lisibles, cohérents)
   ========================================================================== */

/*
  On réutilise des listes dans "méthode", "projet", etc.
  => on uniformise un peu (sans casser le design global).
*/
.apropos-page .apropos-list {
    margin-top: 1.2rem;
    padding-left: 1.2rem;
    line-height: 1.6;
    list-style: disc;
}

/* Petites listes internes (cartes highlights / skills) */
.apropos-page .apropos-mini {
    margin-top: 1rem;
    padding-left: 1.2rem;
    line-height: 1.55;
    list-style: disc;
    font-size: 0.98rem;
}


/* ==========================================================================
   3) “NOTE” (petite phrase secondaire)
   ========================================================================== */

.apropos-page .apropos-note {
    margin-top: 1.5rem;
    opacity: 0.9;
    text-align: center;
    font-style: italic;
    color: var(--primary-color);
    text-shadow: none; /* lisibilité */
}


/* ==========================================================================
   4) GRILLE “HIGHLIGHTS” (Expériences & projets)
   ========================================================================== */

/*
  2 cartes internes, sobres (pas une carte dans la carte trop flashy).
*/
.apropos-page .apropos-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
    margin-top: 2.2rem;
}

/* Mini carte interne */
.apropos-page .apropos-highlight {
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    padding: 1.4rem 1.4rem;
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);

    box-shadow:
        0 0 18px rgba(59,130,246,0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.apropos-page .apropos-highlight:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 22px rgba(59,130,246,0.16);
}

.apropos-page .apropos-highlight h3 {
    margin: 0 0 0.6rem 0;
    font-size: 1.2rem;
    color: var(--primary-color);
    text-shadow: 0 0 2px rgba(59,130,246,0.20);
}

.apropos-page .apropos-sub {
    margin-top: 0.5rem;
    text-shadow: none;
}


/* ==========================================================================
   5) GRILLE “SKILLS” (3 blocs)
   ========================================================================== */

.apropos-page .apropos-skills-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
    margin-top: 2.2rem;
}

/* Bloc skill */
.apropos-page .apropos-skill {
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    padding: 1.4rem 1.4rem;
    background: rgba(255,255,255,0.30);
    backdrop-filter: blur(6px);

    box-shadow:
        0 0 18px rgba(59,130,246,0.10);
}

.apropos-page .apropos-skill h3 {
    margin: 0 0 0.8rem 0;
    font-size: 1.2rem;
    color: var(--primary-color);
    text-shadow: 0 0 2px rgba(59,130,246,0.20);
}


/* ==========================================================================
   6) GALERIE (images) + OVERLAY (réutilise ton JS global)
   ========================================================================== */

/*
  On donne un rendu proche des "exemples".
  MODIFICATION : Passage à 2 colonnes pour agrandir les miniatures.
*/
.apropos-page .apropos-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    margin-top: 2.2rem;
}

/* AJOUT PRO : Réservation de l'espace pour éviter les sauts de page (CLS) */
.apropos-page .apropos-gallery-item {
    aspect-ratio: 4 / 3;
}

.apropos-page .apropos-gallery-item img {
    width: 100%;
    height: 100%; /* S'assure que l'image remplit parfaitement le conteneur */
    aspect-ratio: 4 / 3;       /* format confortable pour dessins/peintures */
    
    /* MODIFICATION : contain pour voir l'image entière sans rognage */
    object-fit: contain;
    
    object-position: center; /* AJOUT PRO : Centrage parfait de l'image */
    border-radius: 0.85rem;
    cursor: pointer;

    background: rgba(214, 222, 231, 0.55);
    box-shadow: 0 0 14px rgba(59,130,246,0.18);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.apropos-page .apropos-gallery-item img:hover {
    transform: scale(1.02);
    box-shadow: 0 0 18px rgba(59,130,246,0.28);
}

/* Overlay (même principe que SiteAppli) */
.apropos-page .example-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(15,23,42,0.9);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.apropos-page .example-overlay img {
    max-width: 92%;
    max-height: 92%;
    border-radius: 0.85rem;
    box-shadow: 0 0 25px rgba(59,130,246,0.6), 0 0 35px rgba(96,165,250,0.4);
}

.apropos-page .example-overlay .close-overlay {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.25s ease, transform 0.25s ease; /* AJOUT PRO : Préparation animation */
}

/* AJOUT PRO : Effet de survol sur la croix pour montrer qu'elle est cliquable */
.apropos-page .example-overlay .close-overlay:hover,
.apropos-page .example-overlay .close-overlay:focus-visible {
    color: var(--secondary-color);
    transform: scale(1.1);
}


/* ==========================================================================
   7) RESPONSIVE (EN BAS — comme demandé)
   ========================================================================== */

@media (max-width: 900px) {

    /* Highlights : 1 colonne */
    .apropos-page .apropos-highlights {
        grid-template-columns: 1fr;
    }

    /* Skills : 1 colonne (plus lisible tablette) */
    .apropos-page .apropos-skills-grid {
        grid-template-columns: 1fr;
    }

    /* Galerie : 2 colonnes (reste identique ici) */
    .apropos-page .apropos-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {

    /* Galerie : 1 colonne */
    .apropos-page .apropos-gallery {
        grid-template-columns: 1fr;
    }

    /* 
      FIX GLOBAL TITRES MOBILE (320px - 375px) : 
      Cible tous les titres de sections pour éviter les débordements 
      sur "informatique", "compétences" ou "travailler".
    */
    .apropos-page .service-header h2 {
        font-size: 1.2rem;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
        line-height: 1.3;
    }
}