/*
    Frise chronologique du expériences.
    Colonne unique : un axe vertical à gauche, toutes les cartes à droite.
    Affichée entre le panneau blanc (#main) et le footer, donc directement
    sur le fond bleu du site (comme le footer). Chargée uniquement par /experiences.
*/

/* Conteneur de la frise : pleine largeur du wrapper, sur le fond bleu. */
.cv-timeline {
    position: relative;
    width: 100%;
    margin: 2.5em 0 0 0;
    padding: 0;
    list-style: none;
}

/* Axe vertical, à gauche. */
.cv-timeline::before {
    content: '';
    position: absolute;
    top: 0.4em;
    bottom: 0.4em;
    left: 0.475em;
    width: 2px;
    background: rgba(255, 255, 255, 0.4);
}

/* Une étape de la frise. */
.cv-entry {
    position: relative;
    padding: 0 0 2.5em 2.75em;
}

.cv-entry:last-child {
    padding-bottom: 0;
}

/* Pastille posée sur l'axe. */
.cv-entry::after {
    content: '';
    position: absolute;
    top: 0.35em;
    left: 0;
    width: 0.95em;
    height: 0.95em;
    background: #ffffff;
    border: 2px solid #2b3a67;
    border-radius: 50%;
    z-index: 2;
}

/* La carte de contenu (fond blanc, comme le panneau du thème). */
.cv-content {
    position: relative;
    background: #ffffff;
    border-radius: 6px;
    padding: 1.5em 1.75em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* Flèche reliant la carte à l'axe. */
.cv-content::before {
    content: '';
    position: absolute;
    top: 0.5em;
    left: -1.35em;
    border: 0.7em solid transparent;
    border-right-color: #ffffff;
}

/* En-tête de carte : date à gauche, sélecteur de niveau à droite.
   (row-reverse : le <select>, premier dans le HTML, passe à droite.) */
.cv-card-head {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    flex-wrap: wrap;
    margin-bottom: 0.8em;
}

/* Badge de date. */
.cv-date {
    display: inline-block;
    flex-shrink: 0;
    margin: 0;
    padding: 0.2em 0.8em;
    background: #2b3a67;
    color: #ffffff;
    font-size: 0.72em;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.7;
    border-radius: 3px;
}

/* Menu déroulant des niveaux de détail :
   même esprit que le badge de date, mais un ton plus clair.
   flex-shrink: 0 + min-width: max-content évitent que les <select>
   (qui ne respectent pas min-width:auto comme du texte normal) soient
   comprimés par flexbox et tronquent leurs options les plus longues.
   box-sizing: content-box (au lieu du border-box hérité du reset) pour que
   le padding s'ajoute autour du texte au lieu de grignoter sa largeur. */
.cv-level-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: content-box;
    flex-shrink: 0;
    min-width: max-content;
    margin: 0;
    padding: 0.2em 1.9em 0.2em 0.8em;
    background-color: #41568f;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 0.62em;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.72em;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.7;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cv-level-select:hover {
    background-color: #4b62a3;
}

.cv-level-select:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
}

/* La liste déroulante elle-même reste lisible (texte sombre sur fond clair).
   text-transform et letter-spacing sont volontairement identiques à ceux du
   <select> fermé : le navigateur calcule la largeur du menu à partir du
   rendu des <option>, donc tout écart de style avec l'état fermé fausse ce
   calcul et tronque le texte affiché. */
.cv-level-select option {
    color: #1a1a1a;
    background: #ffffff;
}

.cv-content h3 {
    margin: 0 0 0.2em 0;
    line-height: 1.3;
}

.cv-org {
    margin: 0 0 0.6em 0;
    font-size: 0.95em;
}

.cv-content p {
    margin: 0 0 0.6em 0;
}

.cv-content ul {
    margin: 0.4em 0 0 0;
}

.cv-content > :last-child {
    margin-bottom: 0;
}

/* Sous-titre d'un niveau (ex. « Le poste et les missions »). */
.cv-subhead {
    margin: 1.1em 0 0.4em 0;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2b3a67;
}

/* --- Niveaux de détail ---
   Niveau 1 (vue simple)        : tout sauf .cv-level*
   Niveau 2 (détail du poste)   : + .cv-level2
   Niveau 3 (détail expérience) : + .cv-level3
   Niveau 4 (logiciels)         : + .cv-level4
   Les blocs sont masqués par défaut, donc une carte sans data-level
   (ou sans JS) affiche au minimum la vue simple.
   Les tags (.cv-tags) restent, eux, toujours visibles en bas de carte. */
.cv-content .cv-level {
    display: none;
}

.cv-content[data-level="2"] .cv-level2,
.cv-content[data-level="3"] .cv-level3,
.cv-content[data-level="4"] .cv-level4 {
    display: block;
    animation: cvFade 0.35s ease;
}

/* Liste des logiciels (niveau 4), présentée en petites étiquettes. */
.cv-tools {
    list-style: none;
    margin: 0.5em 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45em;
}

.cv-tools li {
    display: inline-block;
    padding: 0.15em 0.7em;
    border: 1px solid #2b3a67;
    color: #2b3a67;
    font-size: 0.8em;
    line-height: 1.7;
    border-radius: 3px;
}

/* Encarts de mots-clés (tags) rose-violet, en bas de chaque expérience. */
.cv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45em;
    margin-top: 1.1em;
    padding-top: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cv-tag {
    display: inline-block;
    padding: 0.18em 0.75em;
    background: linear-gradient(135deg, #9d4edd 0%, #e0559b 100%);
    color: #ffffff;
    font-size: 0.72em;
    letter-spacing: 0.03em;
    line-height: 1.7;
    border-radius: 999px;
}

@keyframes cvFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Révélation au défilement (activée par timeline.js).
   Sans JS / sans IntersectionObserver, tout reste visible par défaut. */
.cv-entry {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.cv-timeline.cv-reveal .cv-entry {
    opacity: 0;
    transform: translateY(28px);
}

.cv-timeline.cv-reveal .cv-entry.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .cv-entry {
        transition: none;
    }

    .cv-content[data-level="2"] .cv-level2,
    .cv-content[data-level="3"] .cv-level3,
    .cv-content[data-level="4"] .cv-level4 {
        animation: none;
    }
}

/* --- Responsive : un peu moins de marge intérieure sur petit écran. --- */
@media screen and (max-width: 736px) {
    .cv-entry {
        padding-left: 2.25em;
    }

    .cv-content {
        padding: 1.25em 1.25em;
    }
}