/* ==========================================================================
   FINITIONS — améliorations choisies une à une (chargé après modern.css).
   Chaque bloc numéroté est indépendant : le supprimer retire uniquement cette
   amélioration. Identité inchangée : or, ardoise, crème.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Entrée animée du hero (cascade discrète au chargement)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .hero-cote-titre > *,
    .hero-cote-avatar {
        animation: fin-monte .7s cubic-bezier(.22, 1, .36, 1) both;
    }
    .hero-cote-avatar                 { animation-delay: .05s; animation-name: fin-zoom; }
    .hero-cote-titre > :nth-child(1)  { animation-delay: .10s; }
    .hero-cote-titre > :nth-child(2)  { animation-delay: .18s; }
    .hero-cote-titre > :nth-child(3)  { animation-delay: .26s; }
    .hero-cote-titre > :nth-child(4)  { animation-delay: .32s; }
    .hero-cote-titre > :nth-child(5)  { animation-delay: .38s; }
    .hero-cote-titre > :nth-child(n+6){ animation-delay: .44s; }
}
@keyframes fin-monte { from { opacity: 0; transform: translateY(14px); } }
@keyframes fin-zoom  { from { opacity: 0; transform: scale(.96); } }

/* --------------------------------------------------------------------------
   B. Photo plus travaillée : halo doré
   -------------------------------------------------------------------------- */
.avatar-cadre-wrap { position: relative; isolation: isolate; }
.avatar-cadre-wrap::before {
    content: '';
    position: absolute;
    inset: 6% -10% -8%;
    z-index: -1;
    border-radius: 40%;
    background: radial-gradient(closest-side, rgba(201, 184, 150, .26), rgba(201, 184, 150, .06) 60%, transparent);
    filter: blur(28px);
    pointer-events: none;
}
/* --------------------------------------------------------------------------
   C. « SIEGEL » : un reflet doré traverse le nom une fois au chargement
   -------------------------------------------------------------------------- */
.titre-nom {
    background-image:
        linear-gradient(110deg, transparent 35%, rgba(255, 250, 235, .85) 50%, transparent 65%),
        var(--gold-grad);
    background-size: 250% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
@media (prefers-reduced-motion: no-preference) {
    .titre-nom { animation: fin-reflet 2.2s ease-in-out .9s 1 both; }
}
@keyframes fin-reflet {
    from { background-position: 150% 0, 0 0; }
    to   { background-position: -60% 0, 0 0; }
}

/* --------------------------------------------------------------------------
   D. Timeline du parcours : ligne dorée + un point par poste, colonnes alignées
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .exp-liste { position: relative; padding-left: 30px; }
    .exp-liste::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 40px;
        bottom: 40px;
        width: 1px;
        background: linear-gradient(180deg, rgba(201, 184, 150, .55), rgba(201, 184, 150, .12) 90%, transparent);
    }
    /* Même retrait pour tous les postes : dates et contenus alignés sur une seule colonne */
    .exp-item {
        position: relative;
        border-top: 0 !important;
        padding: 26px 32px 26px 36px !important;
        margin: 0 !important;
        column-gap: 40px !important;
    }
    .exp-item + .exp-item { margin-top: 4px !important; }
    .exp-item.exp-item--actuel {
        gap: 12px 39px !important;   /* 39 + 1 px de bordure = même colonne que les autres postes */
        overflow: visible !important;
        margin-bottom: 12px !important;
        box-shadow: inset 3px 0 0 var(--gold-2) !important;
    }
    .exp-item.exp-item--actuel::before { display: none !important; }
    .exp-item::after {
        content: '';
        position: absolute;
        left: -29px;
        top: 31px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--bg);
        border: 2px solid rgba(201, 184, 150, .55);
    }
    .exp-item--actuel::after {
        left: -30px;
        top: 30px;
        width: 13px;
        height: 13px;
        background: var(--gold-2);
        border-color: var(--gold-1);
    }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .exp-item--actuel::after { animation: fin-pulse 2.4s ease-out infinite; }
}
@keyframes fin-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201, 184, 150, .45); }
    70%  { box-shadow: 0 0 0 9px rgba(201, 184, 150, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 184, 150, 0); }
}

/* --------------------------------------------------------------------------
   E. Cartes projets : zoom doux au survol, catégorie en pastille
   -------------------------------------------------------------------------- */
.projet-carte__media { position: relative; overflow: hidden; }
.projet-carte .projet-img { transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .8s; }
.projet-carte:hover .projet-img { transform: scale(1.06); filter: saturate(1.08); }
.projet-carte .projet-label {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201, 184, 150, .1);
    border: 1px solid rgba(201, 184, 150, .28);
    color: var(--gold-1);
}
.projet-carte .projet-lien { transition: color .25s, gap .25s; }

/* --------------------------------------------------------------------------
   F. Bas de page : grand bloc final plus aéré, pied de page structuré
   -------------------------------------------------------------------------- */
.home-close { padding-top: 40px; padding-bottom: 72px; }
@media (min-width: 900px) {
    .home-close__card { padding: 64px 60px !important; }
    .home-close__title { font-size: clamp(2rem, 3.4vw, 2.8rem) !important; letter-spacing: -.035em; }
}
#main-footer .footer-cta {
    padding: 28px 30px;
    border-radius: 22px;
    border: 1px solid rgba(201, 184, 150, .2);
    background: radial-gradient(30rem 12rem at 0% 0%, rgba(201, 184, 150, .1), transparent 70%), rgba(18, 23, 33, .6);
}
#main-footer .footer-columns-section { padding-top: 40px; }
#main-footer .column-title { color: var(--gold-2); }
#main-footer .footer-bottom-section { border-top: 1px solid rgba(244, 241, 234, .07); }

/* --------------------------------------------------------------------------
   G. Typographie affinée
   -------------------------------------------------------------------------- */
body { text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; }
h1, h2, h3, .section-titre, .page-title { text-wrap: balance; }
p, li { text-wrap: pretty; }
.section-titre { font-size: clamp(2rem, 3.2vw + .6rem, 2.9rem); }
.article-prose {
    max-width: 68ch;
    font-size: clamp(1rem, .25vw + .95rem, 1.08rem);
    line-height: 1.75;
}
.article-prose h2 { margin-top: 2.2em; }

/* --------------------------------------------------------------------------
   H. Liens et boutons : soulignement doré animé, flèche qui glisse
   -------------------------------------------------------------------------- */
.footer-link, .projet-lien, .article-prose a {
    text-decoration: none !important;
    background-image: linear-gradient(var(--gold-2), var(--gold-2));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .35s cubic-bezier(.22, 1, .36, 1), color .25s;
}
.footer-link:hover, .projet-carte:hover .projet-lien,
.article-prose a:hover {
    background-size: 100% 1px;
    color: var(--gold-1);
}
.btn-primary::after, .projet-lien::after {
    content: '→';
    display: inline-block;
    margin-left: 2px;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.btn-primary:hover::after, .projet-carte:hover .projet-lien::after {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   I. Transitions entre pages (navigateurs récents, sans JavaScript)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: fin-sortie .18s ease-in both; }
    ::view-transition-new(root) { animation: fin-entree .28s ease-out both; }
}
@keyframes fin-sortie { to   { opacity: 0; } }
@keyframes fin-entree { from { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------------------
   J. Corrections de disposition (relevées à l'audit)
   -------------------------------------------------------------------------- */
/* Page article : les halos décoratifs dépassaient à droite (défilement horizontal sur mobile) */
.article-page { overflow-x: clip; }

/* CV : le halo au-dessus de la carte formait un rectangle visible */
.cv-hero__glow {
    border-radius: 50%;
    filter: blur(40px);
    opacity: .55;
    inset: -30px auto auto 6% !important;
}

/* Mobile : espace excessif entre le numéro et le titre des axes */
@media (max-width: 767px) {
    .axe-carte { padding: 24px 22px 24px !important; }
    .axe-carte__index { margin-bottom: 14px !important; }
    .axe-carte h2 { margin-top: 0; }
}

/* Certifications : la carte unique reste à une largeur raisonnable */
.cert-grille { justify-content: start; }

/* Projets : pas de voile sombre sur les images (bande grise sur les visuels clairs) */
.projet-carte__media::after { display: none !important; }

/* --------------------------------------------------------------------------
   K. CV : rond doré pour les postes en cours, gris pour les postes passés
   -------------------------------------------------------------------------- */
.cv-tl__dot {
    background: #5b6472 !important;
    box-shadow: 0 0 0 4px rgba(150, 160, 175, .14) !important;
}
.cv-tl__dot--now {
    background: var(--gold-2) !important;
    box-shadow: 0 0 0 4px rgba(201, 184, 150, .2), 0 0 16px rgba(201, 184, 150, .55) !important;
}