/* ================================================================
   L'ATELIER — FICHE PROJET V2
   ================================================================ */


/* ================================================================
   HERO PROJET V3
   ================================================================ */

.project-head.project-head-v3 {
    position: relative;
    overflow: hidden;

    padding: 0;

    background: #f2efe7;
    border-bottom: 1px solid rgba(35, 60, 50, .09);
}

.project-head.project-head-v3::before,
.project-head.project-head-v3::after {
    content: none;
}


/* Conteneur ------------------------------------------------------ */

.project-head-v3 .project-hero-v3 {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    align-items: stretch;

    max-width: 1180px;
    min-height: 360px;

    padding-top: 3.4rem;
    padding-bottom: 3.4rem;

    gap: clamp(3rem, 5vw, 5rem);
}


/* Texte ---------------------------------------------------------- */

.project-head-v3 .project-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.project-head-v3 .eyebrow {
    display: block;

    margin: 0 0 .8rem;
    padding: 0;

    color: var(--gold);

    font-size: .78rem;
    font-weight: 800;
    line-height: 1.1;

    letter-spacing: .16em;
    text-transform: uppercase;
}

.project-head-v3 .eyebrow::after {
    content: none;
}

.project-head-v3 h1 {
    max-width: none;

    margin: 0;

    font-size: clamp(4rem, 5.7vw, 5.9rem);
    line-height: .94;
    letter-spacing: -.035em;
}

.project-head-v3 .lead {
    max-width: 660px;

    margin: 1.3rem 0 0;

    color: rgba(35, 44, 39, .68);

    font-size: clamp(1.08rem, 1.35vw, 1.28rem);
    line-height: 1.5;
}


/* Image ---------------------------------------------------------- */

.project-head-v3 .project-hero-media {
    position: relative;

    margin: 0;

    min-height: 300px;

    overflow: hidden;

    border-radius: 1rem;

    background: rgba(35, 60, 50, .06);

    box-shadow:
        0 1px 2px rgba(30, 35, 30, .05),
        0 12px 32px rgba(30, 35, 30, .08);
}

.project-head-v3 .project-hero-media img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 300px;

    object-fit: cover;
}


/* Projet sans image --------------------------------------------- */

.project-head-v3.no-image .project-hero-v3 {
    display: block;

    max-width: 960px;
    min-height: 0;

    padding-top: 3.7rem;
    padding-bottom: 3.7rem;
}

.project-head-v3.no-image .project-hero-copy {
    max-width: 780px;
}


/* ================================================================
   CORPS DE LA FICHE
   ================================================================ */

.project-layout-v2 {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 280px;

    grid-template-areas:
        "intro side"
        "journal side"
        "comments side";

    column-gap: clamp(3rem, 5vw, 4.5rem);
    row-gap: 0;

    max-width: 1180px;

    padding-top: 3.5rem;
    padding-bottom: 4rem;
}


/* Introduction --------------------------------------------------- */

.project-intro {
    grid-area: intro;
}

.project-layout-v2 > .project-intro.prose {
    width: 100%;
    max-width: 800px;

    padding: 0;
}

.project-layout-v2 > .project-intro.prose > :first-child {
    margin-top: 0;
}

.project-layout-v2 > .project-intro.prose > :last-child {
    margin-bottom: 0;
}


/* ================================================================
   FICHE LATÉRALE
   ================================================================ */

.project-side {
    grid-area: side;

    align-self: start;

    position: sticky;
    top: 1.5rem;

    padding: 1.5rem;

    border: 1px solid var(--line);
    border-radius: 1rem;

    background: var(--paper);

    box-shadow:
        0 1px 2px rgba(30, 35, 30, .03),
        0 .5rem 1.4rem rgba(30, 35, 30, .035);
}

.project-side section + section,
.project-side section + .notice,
.project-side .notice + section {
    margin-top: 1.6rem;
}

.project-side h2 {
    margin: 0 0 .9rem;

    color: var(--green-dark);

    font: 700 1.15rem/1.2 Georgia, serif;
}

.project-side ul {
    margin: 0;
    padding-left: 1.15rem;
}

.project-side li + li {
    margin-top: .4rem;
}


/* Métadonnées ---------------------------------------------------- */

.project-meta dl {
    margin: 0;
}

.project-meta dl > div {
    display: grid;

    grid-template-columns: 82px minmax(0, 1fr);
    gap: .8rem;

    padding: .75rem 0;

    border-top: 1px solid var(--line);
}

.project-meta dl > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.project-meta dl > div:last-child {
    padding-bottom: 0;
}

.project-meta dt {
    color: var(--muted);

    font-size: .7rem;
    font-weight: 800;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.project-meta dd {
    margin: 0;

    line-height: 1.35;
}


/* ================================================================
   JOURNAL
   ================================================================ */

.project-journal {
    grid-area: journal;

    max-width: 800px;

    margin-top: 3rem;
    padding-top: 2.3rem;

    border-top: 1px solid var(--line);
}

.project-journal > h2 {
    margin: 0 0 2rem;

    font: 700 clamp(2.25rem, 3.6vw, 3.1rem)/1 Georgia, serif;
}


/* Dates ---------------------------------------------------------- */

.project-journal .timeline time {
    display: inline-block;

    padding: .28rem .55rem;

    border: 1px solid rgba(168, 108, 61, .18);
    border-radius: .45rem;

    background: rgba(168, 108, 61, .10);

    color: #9a6239;

    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.1;
}


/* ================================================================
   COMMENTAIRES
   ================================================================ */

.project-comments {
    grid-area: comments;

    max-width: 800px;

    margin-top: 3rem;
}


/* ================================================================
   TABLETTE
   ================================================================ */

@media (max-width: 900px) {

    .project-head-v3 .project-hero-v3 {
        grid-template-columns: minmax(0, 1fr) minmax(260px, .78fr);

        min-height: 285px;

        padding-top: 2.4rem;
        padding-bottom: 2.4rem;

        gap: 2rem;
    }

    .project-head-v3 .project-hero-media,
    .project-head-v3 .project-hero-media img {
        min-height: 220px;
    }


    /* Corps ------------------------------------------------------ */

    .project-layout-v2 {
        grid-template-columns: 1fr;

        grid-template-areas:
            "intro"
            "side"
            "journal"
            "comments";

        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }

    .project-layout-v2 > .project-intro.prose,
    .project-journal,
    .project-comments {
        max-width: none;
    }


    /* Fiche projet sous forme de bandeau ------------------------- */

    .project-side {
        position: static;

        margin-top: 2rem;
        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;
    }

    .project-meta > h2 {
        display: none;
    }

    .project-meta dl {
        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        margin: 0;
        padding: .9rem 0;

        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }

    .project-meta dl > div {
        display: block;

        min-width: 0;

        padding: 0 1rem;

        border: 0;
        border-left: 1px solid var(--line);
    }

    .project-meta dl > div:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .project-meta dl > div:last-child {
        padding-right: 0;
    }

    .project-meta dt {
        margin-bottom: .3rem;

        font-size: .66rem;
        line-height: 1.2;
    }

    .project-meta dd {
        margin: 0;

        font-size: .95rem;
        line-height: 1.3;
    }

    .project-meta + section,
    .project-meta + .notice {
        margin-top: 2rem;
    }


    /* Journal ---------------------------------------------------- */

    .project-journal {
        margin-top: 2.2rem;
        padding-top: 0;

        border-top: 0;
    }
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 560px) {

    /* Hero ------------------------------------------------------- */

    .project-head.project-head-v3 {
        padding: 0;

        background: #f2efe7;
    }

    .project-head-v3 .project-hero-v3 {
        display: flex;
        flex-direction: column;

        min-height: 0;

        padding-top: 2.3rem;
        padding-bottom: 1.35rem;

        gap: 1.6rem;
    }

    .project-head-v3 h1 {
        font-size: clamp(3.35rem, 13.5vw, 4.35rem);
        line-height: .94;
    }

    .project-head-v3 .lead {
        margin-top: 1.25rem;

        font-size: 1.6rem;
        line-height: 1.47;
    }

    .project-head-v3 .project-hero-media {
        width: 100%;
        min-height: 0;

        margin-top: 1.25rem;

        aspect-ratio: 16 / 9;

        border-radius: .85rem;
    }

    .project-head-v3 .project-hero-media img {
        height: 100%;
        min-height: 0;
    }

    .project-head-v3.no-image .project-hero-v3 {
        padding-top: 2.8rem;
        padding-bottom: 2.7rem;
    }


    /* Corps ------------------------------------------------------ */

    .project-layout-v2 {
        padding-top: 1.75rem;
        padding-bottom: 1rem;
    }


    /* Métadonnées ------------------------------------------------ */

    .project-side {
        margin-top: 1.75rem;
    }

    .project-meta dl {
        padding: .8rem 0;
    }

    .project-meta dl > div {
        padding: 0 .65rem;
    }

    .project-meta dl > div:first-child {
        padding-left: 0;
    }

    .project-meta dl > div:last-child {
        padding-right: 0;
    }

    .project-meta dt {
        font-size: .62rem;
    }

    .project-meta dd {
        font-size: .9rem;
    }


    /* Journal ---------------------------------------------------- */

    .project-journal {
        margin-top: 1.75rem;
    }

    .project-v2 .project-journal > h2 {
        margin: 0 0 1.35rem;

        font-size: 1.6rem;
        line-height: 1.1;
    }

    .project-journal .timeline time {
        padding: .3rem .55rem;

        font-size: .86rem;
    }


    /* Commentaires ---------------------------------------------- */

    .project-comments {
        margin-top: 2rem;
    }


    /* Footer ----------------------------------------------------- */

    body:has(.project-v2) .site-footer {
        margin-top: 1rem;
    }
}

/* ================================================================
   FICHE PROJET V2 — DESKTOP
   ================================================================ */

@media (min-width: 901px) {

    /* Largeur générale de la fiche projet ----------------------- */

    .project-head-v3 .project-hero-v3,
    .project-layout-v2 {
        width: min(calc(100% - 4rem), 1280px);
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }


    /* Hero ------------------------------------------------------- */

    .project-head-v3 .project-hero-v3 {
        grid-template-columns: minmax(0, 1.15fr) minmax(340px, .78fr);
        min-height: 240px;

        padding-top: 1.7rem;
        padding-bottom: 1.7rem;

        gap: clamp(2.2rem, 3.5vw, 3.5rem);
    }

    .project-head-v3 .project-hero-media {
        min-height: 190px;
        max-height: 220px;
    }

    .project-head-v3 .project-hero-media img {
        min-height: 190px;
        max-height: 220px;
    }

    .project-head-v3 h1 {
        font-size: clamp(3.7rem, 4.8vw, 5.2rem);
    }

    .project-head-v3 .lead {
        margin-top: 1rem;
        font-size: 1.12rem;
    }


    /* Corps ------------------------------------------------------ */

    .project-layout-v2 {
        grid-template-columns: minmax(0, 1fr) 300px;

        column-gap: 3.2rem;

        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }

    .project-layout-v2 > .project-intro.prose,
    .project-journal,
    .project-comments {
        max-width: 940px;
    }

    .project-layout-v2 > .project-intro.prose {
        font-size: 1.12rem;
        line-height: 1.72;
    }


    /* Fiche latérale -------------------------------------------- */

    .project-side {
        padding: 1.5rem;
        transform: translateY(-.25rem);
    }

    .project-side h2 {
        font-size: 1.45rem;
    }

    .project-meta dd {
        font-size: 1rem;
    }


    /* Journal ---------------------------------------------------- */

    .project-journal {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }

    .project-journal > h2 {
        margin-bottom: 1.6rem;

        font-size: 2.7rem;
        line-height: 1.05;
    }

    .project-journal .timeline {
        padding-left: 1.65rem;
    }

    .project-journal .timeline article::before {
        width: .72rem;
        height: .72rem;
    }

    .project-journal .timeline time {
        padding: .32rem .6rem;

        font-size: .88rem;
    }

    .project-journal .timeline h3 {
        margin-top: .75rem;

        font-size: 1.45rem;
        line-height: 1.25;
    }

    .project-journal .timeline p {
        margin-top: .55rem;

        font-size: 1.08rem;
        line-height: 1.55;
    }

    .project-journal .timeline article {
        padding-bottom: 2.35rem;
    }

    .project-journal .timeline article:last-child {
        padding-bottom: 0;
    }
}

/* Journal — mise en page mobile */
@media (max-width: 580px) {

    .journal-head {
        padding-bottom: 1.2rem;
    }

    .journal-head h1 {
        font-size: clamp(36px, 9vw, 40px);
        line-height: 1.02;
        margin-bottom: .9rem;
    }

    .journal-head .lead {
        font-size: 1.1rem;
        line-height: 1.4;
        margin-top: .9rem;
    }

    /* Texte courant : légèrement plus dense pour les articles longs */
    .journal-content.prose p {
        font-size: 1.15rem;
        line-height: 1.48;
        margin-top: 0;
        margin-bottom: 1.15em;
    }

    /* Titres de section */
    .journal-content h2,
    .journal-content.prose h2 {
        font-size: clamp(27px, 7vw, 30px);
        line-height: 1.1;
        margin-top: 2rem;
        margin-bottom: .85rem;
    }

    /* Transition chapô -> contenu */
    .journal-content.prose {
        padding-top: 0;
    }

    .journal-content > h2:first-child,
    .journal-content.prose > h2:first-child {
        margin-top: 1rem;
    }
}

/* ================================================================
   JOURNAL — ESPACEMENTS BAS DE PAGE MOBILE
   ================================================================ */

@media (max-width: 580px) {

    /* La galerie possède déjà son propre rythme interne :
       on réduit son espace inférieur lorsqu'elle termine l'article. */
    .journal-content > .latelier-gallery:last-child,
    .journal-content.prose > .latelier-gallery:last-child {
        margin-bottom: .75rem;
    }

}

/* === Commentaires : mise en forme compacte === */

.comments-wrap > h2 {
    margin: 0 0 1rem;
    font-size: 2.1rem;
    line-height: 1.08;
}

.comments-wrap .comments-note {
    margin: 0 0 1.65rem;
    font-size: 1rem;
    line-height: 1.42;
}

.comments-wrap .comments-form > h3 {
    margin: 0 0 1.35rem;
    font-size: 1.55rem;
    line-height: 1.15;
}

.comments-wrap .comments-form .form-field,
.comments-wrap .comments-form .form-group {
    margin-bottom: 1.05rem;
}

.comments-wrap .comments-form label {
    display: block;
    margin-bottom: .4rem;
    font-size: .98rem;
    line-height: 1.2;
    font-weight: 700;
}

.comments-wrap .comments-form input[type="text"],
.comments-wrap .comments-form input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 3.25rem;
    padding: .65rem .9rem;
    font-size: 1rem;
    line-height: 1.25;
    border-radius: .45rem;
}

.comments-wrap .comments-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 8rem;
    padding: .75rem .9rem;
    font-size: 1rem;
    line-height: 1.4;
    border-radius: .45rem;
    resize: vertical;
}

@media (max-width: 580px) {
    .comments-wrap > h2 {
        margin-bottom: .85rem;
        font-size: 1.8rem;
        line-height: 1.08;
    }

    .comments-wrap .comments-note {
        margin-bottom: 1.45rem;
        font-size: .95rem;
        line-height: 1.4;
    }

    .comments-wrap .comments-form > h3 {
        margin-bottom: 1.15rem;
        font-size: 1.35rem;
        line-height: 1.15;
    }

    .comments-wrap .comments-form .form-field,
    .comments-wrap .comments-form .form-group {
        margin-bottom: .9rem;
    }

    .comments-wrap .comments-form label {
        margin-bottom: .35rem;
        font-size: .95rem;
    }

    .comments-wrap .comments-form input[type="text"],
    .comments-wrap .comments-form input[type="email"] {
        min-height: 3rem;
        padding: .6rem .8rem;
        font-size: .95rem;
    }

    .comments-wrap .comments-form textarea {
        min-height: 7rem;
        padding: .7rem .8rem;
        font-size: .95rem;
    }
}

/* === Fin commentaires compacts === */

/* Commentaires — hiérarchie mobile */
@media (max-width: 580px) {

    .project-comments > h2 {
        font-size: 2.15rem;
        line-height: 1.08;
        margin-bottom: 1.15rem;
    }

    .project-comments > p {
        font-size: 1.05rem;
        line-height: 1.45;
        margin-bottom: 2rem;
    }
}


/* Commentaires — hiérarchie mobile finale */
@media (max-width: 580px) {
    .comments-wrap > h2 {
        font-size: 1.8rem;
        line-height: 1.08;
        margin-bottom: 1rem;
    }

    .comments-wrap .comments-note {
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 2rem;
    }
}

/* Journal — navigation mobile finale */
@media (max-width: 580px) {
    .journal-navigation {
        margin-top: .75rem;
        padding: 1rem 0;
        gap: 1rem;
    }

    .journal-navigation > div:empty {
        display: none;
    }

    .journal-navigation span {
        margin-bottom: .3rem;
        font-size: .7rem;
    }

    .journal-navigation a {
        font-size: 1.05rem;
        line-height: 1.3;
    }
}


/* Journal — liens navigation mobile : retour à la ligne */
@media (max-width: 580px) {
    .journal-navigation a {
        display: block;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}