/* ============================================
   STYLE - Portfolio Anaïs CHABANEL
   Inspiration : scrapbooking créatif, doux, organique
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@400;500;700;800&family=Caveat:wght@600;700&display=swap');

:root {
    --beige:     #F5E6D0;
    --olive:     #7A7A35;
    --olive-clair: #A5A85A;
    --saumon:    #E8956D;
    --rose:      #F2B5A0;
    --jaune:     #F0C84B;
    --vert-doux: #B5C99A;
    --texte:     #2A2118;
    --blanc:     #FFFDF8;
    --transition: 0.3s ease;

    /* Alias utilisés dans certaines pages */
    --couleur-hero:   var(--saumon);
    --couleur-carte:  var(--blanc);
    --couleur-texte:  var(--texte);
    --rayon-bord:     16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--saumon);
    color: var(--texte);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
}

/* ---- WRAPPER TABLETTE ---- */
.page-wrapper {
    width: 100%;
    max-width: 1080px;
    background: var(--beige);
    border-radius: 32px;
    overflow: hidden;
    min-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.8; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ============================================
   TYPOGRAPHIE
   ============================================ */
.titre-display {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 900;
}

.titre-script {
    font-family: 'Caveat', cursive;
    font-weight: 700;
}

h1, h2, h3 { font-family: 'DM Sans', sans-serif; font-weight: 800; }

/* ============================================
   HEADER — pill blanc sans bordure
   ============================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 16px 24px;
    background: var(--beige);
}

.header-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--blanc);
    border-radius: 999px;
    padding: 12px 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.header-logo-txt {
    font-family: 'Caveat', cursive;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--olive);
}

.header-nav { display: flex; align-items: center; gap: 28px; }
.header-nav a {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--texte);
    transition: color var(--transition);
    position: relative;
}
.header-nav a::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 0; height: 2px;
    background: var(--saumon);
    border-radius: 2px;
    transition: width var(--transition);
}
.header-nav a:hover::after, .header-nav a.actif::after { width: 100%; }
.header-nav a:hover, .header-nav a.actif { color: var(--olive); opacity: 1; }

.header-icone-user {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--olive); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer; border: none;
    transition: background var(--transition);
}
.header-icone-user:hover { background: var(--saumon); opacity: 1; }

.header-deconnexion {
    width: 36px; height: 36px; border-radius: 50%;
    background: transparent; color: var(--texte);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 1px solid var(--bordure, #ddd);
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
}
.header-deconnexion:hover { background: #E8404A; color: white; border-color: #E8404A; opacity: 1; }

.header-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.header-hamburger span { display: block; width: 22px; height: 2px; background: var(--texte); border-radius: 2px; }

.header-nav-mobile {
    display: none; flex-direction: column; gap: 8px;
    background: var(--blanc); border-radius: 20px;
    padding: 16px 20px; margin: 8px 24px 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.header-nav-mobile.ouvert { display: flex; }
.header-nav-mobile a { font-weight: 700; font-size: 0.95rem; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }

/* ============================================
   HERO
   ============================================ */
.hero {
    background: var(--olive);
    text-align: center;
    padding: 100px 32px 90px;
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Forme organique en fond hero */
.hero::before {
    content: '';
    position: absolute;
    bottom: -40px; right: -60px;
    width: 300px; height: 300px;
    background: rgba(255,255,255,0.05);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
}
.hero::after {
    content: '';
    position: absolute;
    top: -30px; left: -40px;
    width: 200px; height: 200px;
    background: rgba(240,200,75,0.12);
    border-radius: 40% 60% 30% 70% / 60% 40% 50% 50%;
}

.hero-titre {
    font-family: 'DM Sans', sans-serif;
    color: var(--jaune);
    font-size: clamp(3.2rem, 10vw, 6.5rem);
    font-weight: 800;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1.05;
    
    position: relative;
    z-index: 1;
}

.hero-sous-titre {
    color: rgba(255,255,255,0.8);
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    font-weight: 600;
    
    text-transform: uppercase;
    margin-top: 12px;
    position: relative;
    z-index: 1;
    font-family: 'Caveat', cursive;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
}

/* ============================================
   BANDEAU DEVISE
   ============================================ */
.bandeau-devise {
    background: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 32px;
}

.etoile { color: var(--jaune); font-size: 1.1rem; }
.etoile-turquoise { color: #4ECDC4; }
.etoile-rose { color: var(--saumon); }

.bandeau-devise p {
    font-family: 'Caveat', cursive;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--texte);
}

/* ============================================
   SECTIONS
   ============================================ */
.section { padding: 40px 36px; width: 100%; }

.section-titre {
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texte);
}

/* ============================================
   BOUTONS — arrondis, sans bordure
   ============================================ */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    border: none;
    transition: all var(--transition);
    text-align: center;
}
.btn:hover { transform: translateY(-3px); filter: brightness(0.95); opacity: 1; }
.btn:active { transform: translateY(0); }

.btn-principal {
    background: var(--jaune);
    color: var(--texte);
    width: 100%;
    display: block;
}
.btn-principal:hover { background: #D4A830; }

/* ============================================
   CAROUSEL
   ============================================ */
.carousel-wrapper { overflow: hidden; margin-bottom: 20px; }
.carousel-piste { display: flex; gap: 16px; transition: transform 0.4s ease; }

.carousel-carte {
    min-width: calc(33.333% - 11px);
    background: var(--blanc);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--transition);
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.carousel-carte:hover { transform: translateY(-6px) rotate(-1deg); opacity: 1; }

.carousel-carte-img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    background: var(--rose);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; color: rgba(255,255,255,0.7); font-weight: 600;
}
.carousel-carte-img img { width: 100%; height: 100%; object-fit: cover; }
.carousel-carte-info { padding: 12px 14px; }
.carousel-carte-type { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; color: var(--olive); letter-spacing: 0.08em; }
.carousel-carte-nom { font-size: 0.88rem; font-weight: 700; margin-top: 2px; }

/* Grille statique (page d'accueil) */
.projets-accueil-grille { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.projets-accueil-grille .carousel-carte { flex: 1 1 calc(33.333% - 11px); min-width: 0; }

/* ============================================
   PRÉSENTATION
   ============================================ */
.presentation-bloc {
    background: var(--blanc);
    border-radius: 24px;
    padding: 36px;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* Tache colorée décorative */
.presentation-bloc::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 140px; height: 140px;
    background: var(--rose);
    border-radius: 50% 30% 60% 40%;
    opacity: 0.35;
}
.presentation-bloc::after {
    content: '';
    position: absolute;
    bottom: -20px; left: -20px;
    width: 100px; height: 100px;
    background: var(--vert-doux);
    border-radius: 40% 60% 30% 50%;
    opacity: 0.3;
}

.presentation-photo {
    width: 150px; height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rose);
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.presentation-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.presentation-etoile-deco { position: absolute; font-size: 2rem; z-index: 1; }
.presentation-etoile-deco.gauche { bottom: 20px; left: 20px; }
.presentation-etoile-deco.droite { top: 20px; right: 20px; }

.presentation-texte {
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    color: #444;
}

/* ============================================
   CARTES TRACES
   ============================================ */
.carte-trace {
    background: var(--blanc);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    transition: box-shadow var(--transition);
}
.carte-trace:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.1); }

.carte-trace-details summary { list-style: none; cursor: pointer; }
.carte-trace-details summary::-webkit-details-marker { display: none; }
.carte-trace-details summary::marker { content: ''; }

.carte-trace-summary {
    padding: 20px 24px;
    transition: background var(--transition);
}
.carte-trace-summary:hover { background: #FBF7F0; }

.carte-trace-summary-inner { display: flex; gap: 16px; align-items: center; }

.carte-trace-thumb {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--rose);
}
.carte-trace-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.carte-trace-summary-texte {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.carte-trace-meta { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 6px; }

.carte-trace-titre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carte-trace-titre { font-size: 1rem; font-weight: 800; text-transform: uppercase; color: var(--texte); }
.carte-trace-chevron {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--olive);
    transition: transform var(--transition);
}
.carte-trace-details[open] .carte-trace-chevron { transform: rotate(180deg); }
.carte-trace-details[open] .carte-trace-summary { border-bottom: 1px solid #F0EBE0; background: #FBF7F0; }

.carte-trace-ac { font-size: 0.78rem; color: var(--olive); font-weight: 700; }
.carte-trace-competences { font-size: 0.78rem; color: #777; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.carte-trace-competences .badge { font-size: 0.66rem; padding: 4px 10px; }

.carte-trace-contenu { padding: 20px 24px 26px; }

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.badge-but { background: var(--saumon); color: white; }
.badge-type { background: var(--jaune); color: var(--texte); }
.badge-date { background: transparent; color: #aaa; font-size: 0.68rem; }

/* Commentaires */
.commentaires-section { padding: 18px 0 0; margin-top: 10px; border-top: 1px solid #F0EBE0; }
.commentaires-titre { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; color: var(--olive); }
.commentaire-item { background: var(--blanc); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; font-size: 0.83rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.commentaire-auteur { font-weight: 700; font-size: 0.76rem; color: var(--olive); }
.commentaire-date { font-size: 0.7rem; color: #bbb; }
.commentaire-form textarea { width: 100%; border: none; border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 0.85rem; resize: vertical; min-height: 70px; background: var(--blanc); margin-bottom: 10px; outline: none; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.message-connexion-requis { font-size: 0.82rem; font-style: italic; color: #bbb; }

/* ============================================
   FILTRES
   ============================================ */
.filtres-barre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filtre-btn {
    padding: 8px 18px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    cursor: pointer; border: none;
    background: var(--blanc); color: var(--texte);
    transition: all var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.filtre-btn:hover, .filtre-btn.actif { background: var(--olive); color: white; transform: translateY(-2px); opacity: 1; }

.onglets-but { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.onglet-btn {
    padding: 8px 18px; border-radius: 999px;
    font-weight: 700; font-size: 0.82rem; cursor: pointer; border: none;
    background: var(--blanc); color: var(--texte);
    transition: all var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.onglet-btn:hover, .onglet-btn.actif { background: var(--saumon); color: white; opacity: 1; }

/* ============================================
   MÉDIAS COMPLÉMENTAIRES (vidéo, PDF, liens externes)
   ============================================ */
.modal-video {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 16px;
    display: block;
}

.liens-externes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.btn-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: none;
    transition: all var(--transition);
    text-decoration: none;
}
.btn-mini:hover { transform: translateY(-2px); opacity: 1; filter: brightness(0.95); }

.btn-pdf  { background: var(--blanc); color: var(--texte); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.btn-insta {
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    color: white;
}
.btn-site { background: var(--olive); color: white; }
.btn-linkedin { background: #0077b5; color: white; }
.btn-mini.btn-large { width: 100%; justify-content: center; padding: 14px 18px; font-size: 0.8rem; }

/* Argumentaire structuré : QUOI / POURQUOI / CONTEXTE / QUI / AC / AUTO-ÉVALUATION */
.carte-trace-argumentaire { font-size: 0.88rem; line-height: 1.75; color: #555; }
.carte-trace-argumentaire p { margin-bottom: 4px; }
.argu-titre {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--olive);
    margin-top: 14px;
    margin-bottom: 4px;
}
.carte-trace-argumentaire .argu-titre:first-child { margin-top: 0; }
.argu-citation {
    font-style: italic;
    background: #FBF6EE;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 6px;
    color: #555;
}

/* Passions avec photo */
.passion-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Logos compétences (vraies icônes) */
.competence-logo-placeholder img {
    width: 28px; height: 28px;
    object-fit: contain;
    border-radius: 4px;
}

/* ============================================
   GALERIE
   ============================================ */
.galerie-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.galerie-item {
    aspect-ratio: 1; background: var(--rose);
    border-radius: 16px; overflow: hidden; cursor: pointer;
    transition: transform var(--transition);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.galerie-item:hover { transform: scale(1.04) rotate(1deg); opacity: 1; }
.galerie-item img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================
   FORMULAIRES
   ============================================ */
.champ-groupe { margin-bottom: 16px; }
.champ-label { display: block; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; color: var(--texte); }
.champ-input, .champ-select, .champ-textarea {
    width: 100%; padding: 13px 18px;
    border: none; border-radius: 14px;
    font-family: inherit; font-size: 0.9rem;
    background: var(--blanc); color: var(--texte);
    outline: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    transition: box-shadow var(--transition);
}
.champ-input:focus, .champ-select:focus, .champ-textarea:focus { box-shadow: 0 4px 20px rgba(122,122,53,0.2); }
.champ-textarea { resize: vertical; min-height: 120px; }

.champ-mdp-wrapper { position: relative; }
.champ-mdp-wrapper .champ-input { padding-right: 46px; }
.btn-oeil {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    padding: 8px;
    line-height: 1;
    color: #999;
    transition: color var(--transition);
}
.btn-oeil:hover { color: var(--olive); }

/* ============================================
   ALERTES
   ============================================ */
.alerte { padding: 12px 16px; border-radius: 14px; font-weight: 600; font-size: 0.86rem; margin-bottom: 16px; }
.alerte-erreur { background: #fde8e8; color: #c53030; }
.alerte-succes { background: #e8f5e9; color: #2e7d32; }

/* ============================================
   COMPÉTENCES
   ============================================ */
.competences-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.competence-item { display: flex; align-items: center; gap: 12px; background: var(--blanc); border-radius: 16px; padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.competence-logo-placeholder { width: 42px; height: 42px; border-radius: 12px; background: var(--olive); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 0.68rem; flex-shrink: 0; }
.competence-info { flex: 1; }
.competence-nom { font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; }
.barre-fond { background: #EEE8DC; border-radius: 20px; height: 8px; width: 100%; overflow: hidden; }
.barre-remplie { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--olive), var(--olive-clair)); transition: width 1.2s ease; }

/* ============================================
   PASSIONS
   ============================================ */
.passions-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.passion-carte {
    aspect-ratio: 1;
    min-height: 200px;
    border-radius: 20px;
    overflow: hidden; cursor: pointer; position: relative;
    transition: transform var(--transition);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.passion-carte:hover { transform: translateY(-6px) rotate(-1.5deg); opacity: 1; }
.passion-label { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: white; font-weight: 800; font-size: 0.82rem; text-transform: uppercase; text-align: center; padding: 20px 10px 12px; letter-spacing: 0.08em; }

/* ============================================
   MODAL
   ============================================ */
.modal-fond { display: none; position: fixed; inset: 0; background: rgba(42,33,24,0.6); z-index: 9999; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
.modal-fond.ouvert { display: flex; }
.modal-contenu { background: var(--beige); border-radius: 24px; padding: 32px; max-width: 660px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 24px 80px rgba(0,0,0,0.2); }
.modal-fermer { position: absolute; top: 16px; right: 18px; background: var(--blanc); border: none; font-size: 1.1rem; cursor: pointer; font-weight: 900; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.modal-img { width: 100%; border-radius: 16px; margin-bottom: 16px; }

/* ============================================
   DOSSIER ACADÉMIQUE
   ============================================ */
.dossier-layout { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.competences-sidebar { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 90px; }
.sidebar-btn { padding: 10px 16px; border-radius: 14px; font-weight: 800; font-size: 0.78rem; text-align: center; cursor: pointer; border: none; transition: all var(--transition); color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.sidebar-btn.comprendre   { background: #E8404A; }
.sidebar-btn.concevoir    { background: var(--saumon); }
.sidebar-btn.exprimer     { background: var(--jaune); color: var(--texte); }
.sidebar-btn.developper   { background: #4CAF7D; }
.sidebar-btn.entreprendre { background: #5B8FD4; }
.sidebar-btn:hover, .sidebar-btn.actif { transform: translateX(4px) scale(1.03); filter: brightness(0.9); opacity: 1; }

/* Tableau AC */
.tableau-ac { width: 100%; border-collapse: collapse; font-size: 0.83rem; background: var(--blanc); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.07); }
.tableau-ac th { background: var(--olive); color: white; padding: 12px 14px; text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tableau-ac td { padding: 11px 14px; border-bottom: 1px solid #F0EBE0; }
.tableau-ac tr:hover td { background: #FBF7F0; }

/* ============================================
   AUTH
   ============================================ */
.auth-container { max-width: 860px; margin: 0 auto; padding: 36px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.auth-carte { background: var(--blanc); border-radius: 24px; padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,0.07); }
.auth-titre { font-family: 'Caveat', cursive; font-size: 1.6rem; font-weight: 700; color: var(--olive); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }

/* ============================================
   FOOTER
   ============================================ */
.footer { padding: 14px 24px 20px; background: var(--beige); }
.footer-barre {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--blanc);
    border-radius: 999px;
    padding: 14px 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.footer-logo img { height: 30px; width: auto; }
.footer-logo-txt { font-family: 'Caveat', cursive; font-size: 1.2rem; font-weight: 700; color: var(--olive); }
.footer-nom { font-weight: 800; font-size: 0.88rem; color: var(--texte); text-transform: uppercase; letter-spacing: 0.04em; }
.footer-sous { font-size: 0.7rem; color: #aaa; }
.footer-liens { display: flex; gap: 8px; }
.footer-lien-icone { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--jaune); border-radius: 10px; font-weight: 900; font-size: 0.78rem; color: var(--texte); transition: all var(--transition); }
.footer-lien-icone:hover { background: var(--olive); color: white; transform: translateY(-2px); opacity: 1; }

/* ============================================
   ADMIN
   ============================================ */
.admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--olive); padding: 24px 16px; display: flex; flex-direction: column; gap: 6px; }
.admin-sidebar-titre { color: var(--jaune); font-family: 'Caveat', cursive; font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.admin-sidebar a { color: rgba(255,255,255,0.85); font-weight: 600; font-size: 0.86rem; padding: 10px 14px; border-radius: 12px; display: block; transition: background var(--transition); }
.admin-sidebar a:hover, .admin-sidebar a.actif { background: rgba(255,255,255,0.15); color: white; opacity: 1; }
.admin-contenu { padding: 32px; background: var(--beige); }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.admin-stat-carte { background: var(--blanc); border-radius: 20px; padding: 20px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.admin-stat-nombre { font-size: 2.5rem; font-weight: 900; color: var(--olive); line-height: 1; }
.admin-stat-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; color: #aaa; }
.admin-tableau { width: 100%; border-collapse: collapse; font-size: 0.83rem; background: var(--blanc); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.admin-tableau th { background: var(--olive); color: white; padding: 12px 14px; text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
.admin-tableau td { padding: 12px 14px; border-bottom: 1px solid #F0EBE0; }
.admin-tableau tr:hover td { background: #FBF7F0; }
.admin-btn-action { padding: 5px 10px; border-radius: 8px; font-size: 0.73rem; font-weight: 700; border: none; cursor: pointer; }
.admin-btn-valider   { background: #4CAF7D; color: white; }
.admin-btn-refuser   { background: #E8404A; color: white; }
.admin-btn-modifier  { background: var(--jaune); color: var(--texte); }
.admin-btn-supprimer { background: #E8404A; color: white; }

/* ============================================
   UTILITAIRES
   ============================================ */
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.text-centre { text-align: center; }
.trace-cachee { display: none; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    body { padding: 12px 8px; }
    .page-wrapper { border-radius: 24px; }
    .header-nav { display: none; }
    .header-hamburger { display: flex; }
    .hero { padding: 60px 24px 50px; min-height: 240px; }
    .section { padding: 28px 20px; }
    .section-titre { font-size: 1.1rem; }
    .galerie-grille { grid-template-columns: 1fr 1fr; }
    .passions-grille { grid-template-columns: 1fr 1fr; }
    .competences-grille { grid-template-columns: 1fr; }
    .carousel-carte { min-width: calc(75% - 8px); }
    .dossier-layout { grid-template-columns: 1fr; }
    .competences-sidebar { flex-direction: row; flex-wrap: wrap; position: static; }
    .sidebar-btn { flex: 1; min-width: 100px; }
    .auth-container { grid-template-columns: 1fr; padding: 20px; }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-stats { grid-template-columns: 1fr 1fr; }

    /* Bandeau devise : éviter le débordement du texte */
    .bandeau-devise { padding: 14px 18px; gap: 10px; flex-wrap: wrap; text-align: center; }
    .bandeau-devise p { font-size: 1.05rem; }

    /* Blocs de présentation (Qui suis-je, parcours, projet pro...) */
    .presentation-bloc { padding: 24px 20px; }

    /* Modales : moins de marge perdue */
    .modal-fond { padding: 12px; }
    .modal-contenu { padding: 22px; border-radius: 18px; }

    /* Cartes-traces (Projets / Dossier académique) */
    .carte-trace-summary { padding: 16px 18px; }
    .carte-trace-contenu { padding: 16px 18px 22px; }
    .carte-trace-titre { font-size: 0.92rem; }

    /* Footer : laisser respirer sur petit écran */
    .footer-barre { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 16px 20px; border-radius: 24px; text-align: center; }
}

/* Téléphones : cartes-traces en colonne (miniature au-dessus du texte) */
@media (max-width: 600px) {
    .carte-trace-summary-inner { flex-direction: column; align-items: stretch; gap: 12px; }
    .carte-trace-thumb { width: 100%; height: 160px; }

    /* Cartes carrées de la page d'accueil : textes compacts */
    .carousel-carte-info { padding: 8px 10px; }
    .carousel-carte-type { font-size: 0.6rem; }
    .carousel-carte-nom { font-size: 0.74rem; line-height: 1.3; }
}

@media (max-width: 480px) {
    .admin-stats { grid-template-columns: 1fr; }
    .sidebar-btn { min-width: 90px; font-size: 0.72rem; padding: 9px 10px; }
    .btn-mini { font-size: 0.68rem; padding: 9px 14px; }
    .bandeau-devise { padding: 12px 14px; }
    .bandeau-devise p { font-size: 0.95rem; }
    .carte-trace-thumb { height: 140px; }
    .passion-carte { min-height: 150px; }
}

/* ============================================
   TRI DES TRACES (Dossier académique)
   ============================================ */
.tri-traces-barre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.tri-traces-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--texte);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tri-traces-label select {
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    padding: 7px 12px;
    border: none;
    border-radius: 10px;
    background: var(--blanc);
    color: var(--texte);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    outline: none;
    cursor: pointer;
}

@media (max-width: 600px) {
    .tri-traces-barre { flex-direction: column; align-items: flex-start; }
}