/* ============================================================
   PAGES PROJETS — meme grille que la home
   un seul ecart (--gap) pour les marges, les colonnes et les images
   ============================================================ */

.projet{
    --gap: 3vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);       /* bord a bord, comme la home */
    padding: 135px var(--gap) 0;         /* le contenu commence a mi-hauteur du cafard */
    box-sizing: border-box;
    color: #000;
}

/* --- intro : titre a gauche, texte a droite (ratio de la home, inverse) --- */
.projet .texte{
    width: auto;
    margin: 0 0 calc(var(--gap) * 2);
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    column-gap: var(--gap);
}

/* --- galerie : deux colonnes, meme ecart partout --- */
.galerie{
    width: auto;
    margin: 0 0 calc(var(--gap) * 2);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
}
.galerie-item{ margin: 0; }
.galerie-item img,
.galerie-item video{
    display: block;
    width: 100%;
    height: auto;
}

/* page About : un seul portrait, pas en pleine largeur */
.galerie--portrait{
    grid-template-columns: minmax(0, 480px);
}

@media (max-width: 700px){
    .projet{
        --gap: 6vw;
        padding-top: 105px;
    }
    /* Sans ca, le texte restait coince dans la colonne de 58% : la regle
       `.projet .texte` (deux classes) l'emporte sur l'empilement mobile de
       texte.css (une seule classe), media query ou pas. Sur un telephone ca
       donnait une colonne de ~200px, trois mots par ligne.
       Dog All Mighty n'a pas de conteneur .projet : cette page garde donc
       exactement sa mise en page. */
    .projet .texte{ grid-template-columns: minmax(0, 1fr); }
    .galerie{ grid-template-columns: minmax(0, 1fr); }
}

/* --- bandeau "UNDER CONSTRUCTION" : pages pas encore finies --- */
.chantier{
    width: 100vw;
    margin-left: calc(50% - 50vw);          /* bord a bord */
    display: flex;
    justify-content: space-between;
    gap: 2em;
    box-sizing: border-box;
    padding: 4px 12px;
    background: #ff0000;
    color: #000;
    font-family: "alte_haas_grotesk", Helvetica, Arial, sans-serif;
    font-size: clamp(14px, 1.6vw, 24px);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
}

/* ============================================================
   PAGE ABOUT : portrait a gauche, texte + CV a droite
   (meme grille et meme ecart que la home)
   ============================================================ */
.about-duo{
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    gap: var(--gap);
    align-items: start;
    margin-bottom: calc(var(--gap) * 2);
}
.about-portrait{
    margin: 0;
}
.about-portrait img{
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, .4);
}
.about-texte{
    font-family: "alte_haas_grotesk", Helvetica, Arial, sans-serif;
    max-width: 40em;
}
.about-texte .texte-titre{
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 56px);
    line-height: 1;
    letter-spacing: -.02em;
    margin: 0 0 .6em;
}
.about-texte p{
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.45;
    margin: 0 0 1em;
}
.about-contact{
    font-family: "suisse_intl_monoregular", ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .06em;
}
.about-contact a{ color: #000; text-decoration: none; }
.about-contact a:hover{ text-decoration: underline; }

/* le CV : un bouton simple, dans le langage du site */
.about-cv{
    display: inline-block;
    margin-top: .5em;
    padding: 8px 16px;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}
.about-cv:hover{
    background: #000;
    color: #ffffff;
}

@media (max-width: 700px){
    .about-duo{ grid-template-columns: minmax(0, 1fr); }
}