/* Le composant conserve la palette et les polices du site rouge. */
.projects-explorer, .projects-preview { font-size: 1em; line-height: 1.65; }
.projects-explorer *, .projects-preview * { box-sizing: border-box; }
.projects-explorer [hidden], .projects-preview [hidden] { display: none !important; }
.projects-explorer p, .projects-preview p { text-align: left; }
.projects-lead { max-width: 850px; font-size: 1.2em; margin: 0 0 28px; }
.project-meta { display: block; color: #e9aaaa; font-size: .8em; letter-spacing: .07em; text-transform: uppercase; }
.projects-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.project-preview-card { display: flex; flex-direction: column; background: #242225; border: 1px solid #514147; border-top: 3px solid #b62d3a; border-radius: 5px; padding: 24px; transition: border-color .2s; }
.project-preview-card:first-child { background: linear-gradient(135deg, #421c25, #211b21); }
.project-preview-card:hover { border-color: #ff8995; }
.project-preview-card img { width: calc(100% + 48px); max-width: none; height: 170px; object-fit: cover; margin: -24px -24px 20px; }
.project-preview-card h3 { font-size: 1.15em; text-transform: none; text-shadow: none; margin: 10px 0; }
.project-preview-card p { font-size: .95em; }
.project-preview-link { display: block; color: #ffafb7; margin-top: auto; padding-top: 24px; font-size: .9em; }
.projects-preview .know_more { margin-top: 30px; }
.projects-preview .know_more a, .projects-followup .know_more a { width: auto; padding: 0 24px; height: auto; min-height: 50px; line-height: 50px; }
.projects-interests { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.projects-interests a { display: block; padding: 10px 16px; border: 1px solid #80616a; background: #241e22; border-radius: 4px; }
.projects-interests a:first-child { border-color: #f16c80; }
.projects-interests a:hover, .projects-interests a[aria-current] { background: #6c202e; border-color: #ffafb7; }
.projects-cyber { border-left: 4px solid #d54860; padding: 24px; margin-bottom: 28px; background: #2f2027; }
.projects-cyber h2 { font-size: 1.25em; text-transform: none; }
.projects-cyber p { margin-bottom: 0; }
.projects-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 24px; background: #29272c; border: 1px solid #514147; border-radius: 5px; }
.projects-filters label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 170px; font-family: Raleway; font-size: .9em; height: auto; width: auto; margin: 0; background: transparent; text-indent: 0; position: static; }
.projects-filters select, .projects-filters button { font: inherit; font-size: 1em; border: 1px solid #80616a; background: #171519; border-radius: 3px; padding: 10px; min-height: 46px; max-width: 100%; height: auto; margin: 0; text-indent: 0; top: auto; }
.projects-filters select { width: 100%; }
.projects-filters button { background: #8c2333; padding-inline: 20px; cursor: pointer; }
.projects-filters > a { color: #ffafb7; padding-block: 10px; text-decoration: underline; }
.projects-result { margin: 22px 0 28px; color: #dbced2; }
.projects-empty { padding: 24px; border: 1px dashed #a77983; }
.project-period { border: 1px solid #514147; border-left: 3px solid #b62d3a; border-radius: 4px; margin-bottom: 28px; padding: 24px; background: #211f23; }
.project-period header h2 { font-size: 1.3em; text-transform: none; margin-top: 5px; }
.project-learning { color: #ddd0d4; font-size: .95em; }
.project-timeline-help { color: #baaeb4; font-size: .85em; }
.project-timeline-scroll { overflow-x: auto; padding-bottom: 8px; }
.project-timeline { min-width: 690px; }
.project-timeline-axis, .project-timeline-row, .project-learning-bar { display: grid; grid-template-columns: 150px repeat(12, minmax(0, 1fr)); gap: 0; margin: 7px 0; }
.project-timeline-axis { font-size: .75em; color: #c0b5ba; }
.project-timeline-axis > span:not(:first-child) { text-align: center; border-left: 1px solid #54464d; color: #c0b5ba; }
.project-timeline-row > span, .project-learning-bar > span { font-size: .8em; line-height: 1.3; padding: 10px 8px 10px 0; overflow-wrap: anywhere; }
.project-timeline-domain { display: block; color: #c0b5ba; font-size: .9em; }
.project-learning-bar > i { grid-column: 2 / span 2; background: repeating-linear-gradient(135deg, #43373d, #43373d 5px, #584750 5px, #584750 6px); border: 1px solid #80616a; border-radius: 3px; }
.project-timeline-row { background: repeating-linear-gradient(to right, transparent, transparent calc(100% / 13 - 1px), #332c32 calc(100% / 13)); }
.project-timeline-row a { grid-column: var(--project-start) / span var(--project-span); padding: 7px 8px; background: #832b3b; border: 1px solid #bf6473; border-radius: 3px; font-family: Raleway; font-size: .8em; line-height: 1.3; min-height: 38px; display: flex; align-items: center; overflow-wrap: anywhere; }
.project-timeline-row a:hover { background: #aa3b50; }
.project-period-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.project-period-links a { background: #302a30; border: 1px solid #6a5059; border-radius: 3px; padding: 9px 12px; font-size: .9em; }
.project-period-links a > span { color: #bfb1b7; display: block; font-size: .75em; }
.projects-note { font-size: .85em; color: #c5b8bf; margin: 28px 0; }
.projects-detail-heading { font-size: 1.5em; margin: 40px 0 20px; }
.projects-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.project-card { background: #29272c; border: 1px solid #514147; border-radius: 4px; scroll-margin-top: 90px; min-width: 0; }
.project-card > summary { position: relative; display: block; padding: 24px; cursor: pointer; list-style: none; }
.project-card > summary::-webkit-details-marker { display: none; }
.project-card-title { display: block; font-family: Raleway; font-size: 1.3em; margin: 10px 0; }
.project-card-pitch { display: block; font-family: Raleway; line-height: 1.55; }
.project-open-label { display: block; color: #ffafb7; font-size: .85em; margin-top: 20px; }
.project-open-label > span { float: right; font-size: 1.3em; line-height: 1; }
.project-card[open] { grid-column: 1 / -1; border-color: #c65b70; }
.project-card[open] > summary .project-open-label > span { transform: rotate(45deg); }
.project-card:target { outline: 2px solid #e47d91; outline-offset: 4px; }
.project-card-body { display: flex; gap: 28px; padding: 0 24px 24px; }
.project-card-body figure { flex: 0 0 42%; margin: 0; min-width: 0; }
.project-card-body figure img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #151317; border: 1px solid #514147; }
.project-card-body figcaption { font-size: .75em; color: #c0b5ba; margin-top: 8px; }
.project-explanation { flex: 1 1 0; min-width: 0; }
.project-explanation h3 { font-size: 1em; text-transform: none; text-shadow: none; }
.project-explanation p { margin-top: 8px; }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project-tag { border: 1px solid #80616a; border-radius: 3px; padding: 2px 7px; font-size: .75em; color: #f1d8e0; }
.project-duration { color: #d4c4cc; font-size: .85em; }
.project-layers { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 20px 0; gap: 8px; }
.project-layers li { background: #3e2933; border-left: 2px solid #d6647e; padding: 8px 10px; font-size: .85em; }
.project-technical { border-block: 1px solid #5c4852; padding: 12px 0; }
.project-technical > summary { cursor: pointer; font-family: Raleway; color: #ffafb7; }
.project-technical ul { padding-left: 20px; list-style: disc outside; }
.project-technical li { margin-bottom: 8px; }
.project-permalink { display: inline-block; margin-top: 18px; color: #ffafb7; font-size: .85em; text-decoration: underline; }
.projects-followup { border-top: 1px solid #80616a; text-align: center; margin-top: 50px; padding-top: 30px; }
.projects-followup h2 { font-size: 1.3em; text-transform: none; }
.projects-followup p { text-align: center; }
.projects-followup > a { color: #ffafb7; text-decoration: underline; }
.projects-explorer a:focus-visible, .projects-explorer summary:focus-visible, .projects-explorer select:focus-visible, .projects-explorer button:focus-visible, .projects-preview a:focus-visible, .project-timeline-scroll:focus-visible { outline: 3px solid #ffb6c6; outline-offset: 4px; }
#panel_projets, #panel_projets_apercu { scroll-margin-top: 90px; }
#frise-projets { scroll-margin-top: 90px; }
@media (min-width: 1281px) {
    #panel_projets { margin-left: max(60px, calc((100vw - 1320px) / 2)); margin-right: max(60px, calc((100vw - 1320px) / 2)); }
    #top_menu li { width: 8.33%; }
}
@media (max-width: 1280px) {
    .projects-explorer, .projects-preview { padding: 20px; font-size: 16px; }
    .projects-preview-grid { grid-template-columns: 1fr; }
    .project-preview-card img { height: 220px; }
    .projects-cards { grid-template-columns: 1fr; }
    .project-card-body { flex-direction: column; }
    .project-period { padding: 20px; }
    .project-timeline-scroll, .project-timeline-help { display: none; }
    .projects-interests a { flex: 1 1 200px; }
}
@media (max-width: 480px) {
    .projects-filters { padding: 16px; }
    .projects-filters label { flex-basis: 100%; }
    .projects-explorer, .projects-preview { padding: 14px; }
    .project-card > summary, .project-period, .projects-cyber { padding: 18px; }
    .project-card-body { padding: 0 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .projects-explorer *, .projects-preview * { transition: none !important; scroll-behavior: auto !important; }
}

@media (orientation: landscape) and (min-width: 1281px) {
    .project-period {
        position: relative;
        border-radius: 0;
        background: linear-gradient(to right, #39282e, #2d282b 34%);
    }

    .project-period::before {
        content: "";
        position: absolute;
        inset-block: -1px;
        left: 100%;
        width: 20px;
        background: #2d282b;
        clip-path: polygon(0 0, 100% 100%, 0 100%);
        transform-origin: left center;
        pointer-events: none;
    }

    .project-period-links [data-project-scheduled] {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .project-period.project-revealed::before {
        animation: project-widen 1s ease-in-out both;
    }

    .project-timeline-row a, .project-timeline-row a:hover, .project-learning-bar > i {
        position: relative;
        isolation: isolate;
        background: transparent;
        border-color: transparent;
    }

    .project-timeline-row a::before, .project-learning-bar > i::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        background: #832b3b;
        border: 1px solid #bf6473;
        border-radius: 3px;
        transform-origin: left center;
        pointer-events: none;
    }

    .project-timeline-row a:hover::before {
        background: #aa3b50;
    }

    .project-learning-bar > i::before {
        background: repeating-linear-gradient(135deg, #43373d, #43373d 5px, #584750 5px, #584750 6px);
        border-color: #80616a;
    }

    .project-timeline-row.project-revealed a::before,
    .project-learning-bar.project-revealed > i::before {
        animation: project-widen 1s ease-in-out both;
    }

    .project-timeline-row a:focus-visible::before {
        animation: none;
    }
}

@keyframes project-widen {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}