/* ==========================================================================
   MODERN — couche de modernisation du site public (chargée en dernier).
   Garde l'identité or / ardoise / crème, ajoute : jetons complets, relief,
   verre, lumière, arrondis et micro-interactions (même famille que me.alexis-sgl.fr).
   Pour revenir à l'ancien rendu : retirer ce fichier de layouts/base.twig.html.
   ========================================================================== */

/* ---------- Jetons ---------- */
:root {
    --gold-1: #ecdcb8;
    --gold-2: #c9b896;
    --gold-3: #a8915f;
    --gold-grad: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
    --gold-glow: 0 10px 30px -10px rgba(201, 184, 150, .55);
    --gold-soft: rgba(201, 184, 150, .10);
    --gold-line: rgba(201, 184, 150, .28);

    --surface-1: rgba(18, 23, 33, .72);
    --surface-2: rgba(24, 30, 42, .78);
    --glass: rgba(13, 17, 26, .66);
    --hairline: rgba(244, 241, 234, .07);
    --hairline-strong: rgba(244, 241, 234, .13);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, .045);

    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 999px;

    --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -24px rgba(0, 0, 0, .85);
    --shadow-lift: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 26px 60px -26px rgba(0, 0, 0, .95), 0 0 0 1px var(--gold-line);
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    /* Les feuilles existantes lisent ces variables : on les arrondit partout */
    --radius: var(--r-md);
    --home-radius: var(--r-md);
    --ease: var(--ease-out);
}

/* ---------- Fond : halos lumineux discrets, fixes ---------- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 30rem at 6% -10%, rgba(201, 184, 150, .085), transparent 60%),
        radial-gradient(48rem 28rem at 100% 0%, rgba(110, 140, 175, .06), transparent 60%),
        radial-gradient(70rem 40rem at 50% 115%, rgba(201, 184, 150, .045), transparent 60%);
}
.home-main, main { background: transparent !important; }

::selection { background: rgba(201, 184, 150, .32); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 6px; }

/* Barre de défilement assortie */
html { scrollbar-color: #2a3242 transparent; }
body { overflow-x: clip; }
::-webkit-scrollbar-thumb { background: #232b3a; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a4458; }

/* ---------- En-tête : verre dépoli ---------- */
#header.site-header {
    background: rgba(11, 15, 23, .94) !important;
    border-bottom: 1px solid var(--hairline);
}
/* Flou uniquement sur ordinateur : sur mobile, un backdrop-filter sur l'en-tête
   devient le repère du menu en position fixe et le fait sortir de l'écran. */
@media (min-width: 993px) {
    #header.site-header {
        background: var(--glass) !important;
        -webkit-backdrop-filter: saturate(140%) blur(16px);
        backdrop-filter: saturate(140%) blur(16px);
    }
}
.neon-separator { opacity: .55; }

.main-nav .nav-item {
    position: relative;
    border-radius: var(--r-pill);
    transition: color .25s var(--ease-out), background .25s var(--ease-out);
}
@media (min-width: 1024px) {
    .main-nav .nav-list { gap: 4px !important; }
    .main-nav .nav-item { padding: 7px 14px; text-decoration: none !important; }
    .main-nav .nav-item:hover { background: rgba(244, 241, 234, .05); }
    .main-nav .nav-item.active {
        color: var(--gold-1) !important;
        background: var(--gold-soft);
        box-shadow: inset 0 0 0 1px var(--gold-line);
    }
    .main-nav .nav-item.active::after { display: none !important; }
}

.btn-header-cta {
    border-radius: var(--r-pill) !important;
    background: var(--gold-grad) !important;
    color: #14110b !important;
    border: 0 !important;
    box-shadow: var(--gold-glow);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .25s;
}
.btn-header-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

.action-buttons a:not(.btn-header-cta),
.lang-menu__btn {
    border-radius: var(--r-sm) !important;
    border-color: var(--hairline-strong) !important;
    background: rgba(244, 241, 234, .03) !important;
    transition: background .25s, border-color .25s, transform .25s var(--ease-out);
}
.action-buttons a:not(.btn-header-cta):hover,
.lang-menu__btn:hover {
    background: var(--gold-soft) !important;
    border-color: var(--gold-line) !important;
}
.lang-menu__panel {
    border-radius: var(--r-sm) !important;
    background: rgba(17, 21, 30, .96) !important;
    border: 1px solid var(--hairline-strong) !important;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9);
    overflow: hidden;
}

/* ---------- Boutons ---------- */
.btn, .btn-primary, .btn-secondary, .btn-primary-gradient, .btn-404, .footer-cta-btn, .p-btn {
    border-radius: var(--r-sm);
    min-height: 46px;
    padding: 12px 22px;
    letter-spacing: .005em;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
                background .25s var(--ease-out), border-color .25s, color .25s, filter .25s;
}
.btn-primary, .btn-primary-gradient, .btn-404--primary, .footer-cta-btn, .p-btn--primary,
.contact-page-wrapper .btn-primary-gradient {
    background: var(--gold-grad) !important;
    color: #14110b !important;
    border-color: transparent !important;
    box-shadow: var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primary:hover, .btn-primary-gradient:hover, .btn-404--primary:hover, .footer-cta-btn:hover, .p-btn--primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 16px 36px -12px rgba(201, 184, 150, .65), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn-secondary, .btn-404--ghost, .p-btn--secondary {
    background: rgba(244, 241, 234, .035) !important;
    border: 1px solid var(--hairline-strong) !important;
    color: var(--text) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.btn-secondary:hover, .btn-404--ghost:hover, .p-btn--secondary:hover {
    transform: translateY(-2px);
    background: var(--gold-soft) !important;
    border-color: var(--gold-line) !important;
}
.btn:active, .btn-primary:active, .btn-secondary:active, .p-btn:active { transform: translateY(0); }

/* ---------- Badges / sur-titres ---------- */
.page-badge {
    border-radius: var(--r-pill);
    background: var(--surface-1);
    border-color: var(--hairline-strong);
    box-shadow: var(--highlight);
}
.badge-tag { border-radius: var(--r-pill); }

/* ---------- Titres ---------- */
.titre-nom,
.page-title .accent,
.p-hero__title em {
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* ---------- Cartes : surfaces, relief, reflet doré au survol ---------- */
.axe-carte, .carte-soft-skill, .glass-card, .projet-carte, .formation-carte, .cert-item,
.home-close__card, .p-card, .cv-card, .contact-card, .info-card, .article-card {
    border-radius: var(--r-lg) !important;
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important;
    border: 1px solid var(--hairline) !important;
    box-shadow: var(--shadow-card);
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.axe-carte:hover, .carte-soft-skill:hover, .projet-carte:hover, .formation-carte:hover, .cert-item:hover,
.p-card:hover, .article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: var(--gold-line) !important;
}
/* Fine ligne dorée en haut des cartes */
.axe-carte::before, .carte-soft-skill::before, .formation-carte::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 184, 150, .55), transparent);
    opacity: .6;
    pointer-events: none;
}
.formation-carte { position: relative; overflow: hidden; }
.formation-carte--actuelle {
    box-shadow: var(--shadow-card), inset 3px 0 0 var(--gold-2) !important;
}

/* Les trois axes : cartes séparées plutôt qu'un bloc collé */
.axes-grille { gap: 16px !important; border: 0 !important; background: none !important; }
.axes-grille > * { border: 1px solid var(--hairline) !important; }
.axe-carte__index {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    background: var(--gold-soft);
    color: var(--gold-1) !important;
    box-shadow: inset 0 0 0 1px var(--gold-line);
}

/* ---------- Technologies : pastilles ---------- */
.tech-badge {
    border-radius: var(--r-pill) !important;
    padding: 8px 14px !important;
    transition: transform .25s var(--ease-out), background .25s, border-color .25s, box-shadow .25s;
}
.tech-badge:hover, .tech-badge:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--tech-couleur, #c9b896) 80%, transparent);
}
.etiquette, .badge-en-cours, .p-tech, .exp-badges span {
    border-radius: var(--r-pill) !important;
    padding: 4px 11px !important;
}

/* ---------- Parcours : poste actuel mis en avant ---------- */
.exp-item--actuel {
    position: relative;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(201, 184, 150, .06), rgba(201, 184, 150, .015));
    border: 1px solid var(--gold-line) !important;
    box-shadow: var(--shadow-card);
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ---------- Photo de profil ---------- */
.avatar-image-enveloppe, .avatar-conteneur {
    border-radius: var(--r-lg);
}
.avatar-img {
    border-radius: calc(var(--r-lg) - 4px);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95), 0 0 0 1px var(--gold-line);
}
.avatar-cadre-wrap::after {
    content: '';
    position: absolute;
    inset: 12% 8% -6%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(201, 184, 150, .22), transparent);
    filter: blur(24px);
    pointer-events: none;
}
.avatar-cadre-wrap { position: relative; isolation: isolate; }

/* Les crochets d'angle carrés jurent avec la photo arrondie : remplacés par un anneau doré */
.hero-cadre { display: none !important; }
.avatar-image-enveloppe {
    padding: 3px;
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, rgba(236, 220, 184, .75), rgba(201, 184, 150, .12) 40%, rgba(201, 184, 150, .05) 60%, rgba(168, 145, 95, .55));
}

/* ---------- Portfolio : filtres en pastilles ---------- */
.p-filtre {
    border-radius: var(--r-pill) !important;
    background: rgba(244, 241, 234, .03) !important;
    border: 1px solid var(--hairline-strong) !important;
    transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease-out);
}
.p-filtre::after { display: none !important; }
.p-filtre:hover { background: var(--gold-soft) !important; border-color: var(--gold-line) !important; }
.p-filtre.actif {
    background: var(--gold-grad) !important;
    color: #14110b !important;
    border-color: transparent !important;
    box-shadow: var(--gold-glow);
}
.p-filtre.actif * { color: inherit !important; }
.p-filtre.actif span:not(:first-child) { background: rgba(20, 17, 11, .14) !important; }

/* ---------- CV : boutons ---------- */
.cv-btn { border-radius: var(--r-sm) !important; transition: transform .25s var(--ease-out), box-shadow .25s, background .25s, border-color .25s, filter .25s; }
.cv-btn--primary {
    background: var(--gold-grad) !important;
    color: #14110b !important;
    border-color: transparent !important;
    box-shadow: var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.cv-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cv-btn--ghost {
    background: rgba(244, 241, 234, .035) !important;
    border: 1px solid var(--hairline-strong) !important;
}
.cv-btn--ghost:hover { transform: translateY(-2px); background: var(--gold-soft) !important; border-color: var(--gold-line) !important; }

/* ---------- Projets ---------- */
.projet-carte { overflow: hidden; }
.projet-carte__media img, .projet-carte img {
    transition: transform .6s var(--ease-out), filter .6s;
}
.projet-carte:hover .projet-carte__media img, .projet-carte:hover img { transform: scale(1.04); }
.projet-carte__lien, .home-projets-lien {
    text-underline-offset: 4px;
}

/* ---------- Appel à l'action de fin ---------- */
.home-close__card {
    background:
        radial-gradient(40rem 18rem at 0% 0%, rgba(201, 184, 150, .14), transparent 60%),
        linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important;
    border-color: var(--gold-line) !important;
}

/* ---------- Formulaires (contact) ---------- */
.contact-page-wrapper input, .contact-page-wrapper textarea, .contact-page-wrapper select,
.form-group input, .form-group textarea, .form-group select {
    border-radius: var(--r-sm) !important;
    background: rgba(244, 241, 234, .03) !important;
    border: 1px solid var(--hairline-strong) !important;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.contact-page-wrapper input:focus, .contact-page-wrapper textarea:focus, .contact-page-wrapper select:focus,
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none;
    border-color: var(--gold-2) !important;
    background: rgba(244, 241, 234, .05) !important;
    box-shadow: 0 0 0 4px rgba(201, 184, 150, .14);
}
.map-container, .map-container iframe { border-radius: var(--r-lg); overflow: hidden; }

/* ---------- Pied de page ---------- */
footer, .site-footer {
    background: linear-gradient(180deg, transparent, rgba(8, 11, 17, .9)) !important;
    border-top: 1px solid var(--hairline) !important;
}

/* ---------- Apparition au défilement (respecte prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .axe-carte, .carte-soft-skill, .formation-carte, .projet-carte, .cert-item, .exp-item, .home-close__card {
            animation: modern-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
    }
}
@keyframes modern-reveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    :root { --r-lg: 18px; }
    .axe-carte:hover, .carte-soft-skill:hover, .projet-carte:hover, .formation-carte:hover { transform: none; }
}

/* Pied de page : bouton aligné sur les autres */
.footer-cta-btn { border-radius: var(--r-sm) !important; }

/* Menu mobile : header.css limite la nav à « 100% - 420px » (prévu pour l'ordinateur) ;
   sur un téléphone ça donne une largeur nulle et le menu sort de l'écran. */
@media (max-width: 992px) {
    #header .main-nav { max-width: none !important; }
}