/* ============================================================
   PAGE D'ACCUEIL — agencement editorial
   titre deforme / affiche + intro + tatouage / projets / collage
   ============================================================ */

.accueil{
    /* bord a bord : on sort de la marge par defaut du navigateur */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 4vw;                          /* marges sur les cotes */
    box-sizing: border-box;
    color: #000;
    font-family: "alte_haas_grotesk", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
}
.accueil a{ color: #000; text-decoration: none; }
.accueil img{
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;                /* les fonds blancs se fondent dans l'ivoire */
}

/* survol : les images cliquables grossissent legerement.
   (on agrandit l'image, pas le lien : sinon le mode "produit" ferait reapparaitre le blanc) */
.accueil a img{
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.accueil a:hover img{
    transform: scale(1.04);
}
.accueil .acc-titre:hover img{
    transform: scale(1.015);                 /* le titre est immense : effet plus discret */
}

/* --- 1. titre : DOG ALL MIGHTY ecrase sur toute la largeur --- */
.acc-titre{
    display: block;
    width: 100%;
    padding: 1vw 0 0;
}
.acc-titre .acc-titre-mot{
    height: min(60vw, 78vh);                 /* ne depasse jamais la hauteur de l'ecran */
    object-fit: fill;
}
.acc-titre .acc-titre-symboles{
    height: min(12vw, 16vh);
    margin-top: min(5vw, 6vh);
    object-fit: fill;
}

/* --- 2. affiche a gauche, intro + tatouage a droite --- */
.acc-duo{
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    column-gap: 3vw;
    margin-top: 8vw;
    align-items: stretch;
}
.acc-droite{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3vw;
}
.accueil-intro{
    padding: 1vw 3vw 0 0;
    max-width: 34em;
}
.accueil-intro-titre{
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 40px);
    line-height: 1;
    letter-spacing: -.02em;
    margin: 0 0 .6em;
}
.accueil-intro p{
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.4;
    margin: 0 0 1em;
}
.accueil-intro p:last-child{ margin-bottom: 0; }

/* --- 3. index des projets --- */
.accueil-index{
    margin: 8vw 0;
}
.accueil-titre{
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    padding: 0 0 4px;
}
.projets{ list-style: none; margin: 0; padding: 0; }
.projets li{ border-top: 1px solid #000; }
.projets li:last-child{ border-bottom: 1px solid #000; }
.projets a{
    display: grid;
    grid-template-columns: 48px minmax(0, 3fr) minmax(0, 2fr) 11em;   /* meme largeur d'annee partout : colonnes alignees */
    gap: 16px;
    padding: 4px 0;
}
.projets a:hover{ text-decoration: underline; }
.projet-num{ font-family: "suisse_intl_monoregular", ui-monospace, monospace; font-size: 12px; }
.projet-an{ text-align: right; white-space: nowrap; }

/* --- 4. collage : deux colonnes, la droite decalee vers le bas --- */
.acc-collage{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 4vw;
    align-items: start;
    margin-bottom: 8vw;
}
.acc-colonne{
    display: flex;
    flex-direction: column;
    gap: 6vw;
}
.acc-colonne--decalee{ padding-top: 2vw; }

.acc-carnet{ width: 100%; }
.acc-bikini{ width: 88%; }
.acc-sextoy{ width: 92%; }
.acc-cigarettes{ width: 72%; align-self: center; }
.acc-rp7{ width: 88%; align-self: flex-end; margin-top: -2vw; }

/* --- tablette : texte d'intro un peu plus grand, colonnes plus equilibrees --- */
@media (max-width: 1000px) and (min-width: 701px){
    .acc-duo{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .accueil-intro p{ font-size: 15px; }
    .projets a{ grid-template-columns: 40px minmax(0, 3fr) minmax(0, 2fr) 11em; }
}

/* --- smartphone : tout s'empile --- */
@media (max-width: 700px){
    .acc-duo{
        grid-template-columns: minmax(0, 1fr);
        row-gap: 10vw;
    }
    .accueil-intro{ padding: 0; }
    .acc-droite{ gap: 10vw; }
    .accueil-index{ margin: 14vw 0; }
    .accueil{ padding: 0 6vw; }              /* marges un peu plus larges sur telephone */
    .projets a{ grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; }   /* l'annee prend juste sa place */
    .projet-an{ white-space: normal; max-width: 9em; }
    .projet-type{ display: none; }
    .acc-collage{ grid-template-columns: minmax(0, 1fr); row-gap: 10vw; }
    .acc-colonne{ gap: 10vw; }
    .acc-colonne--decalee{ padding-top: 0; }
    .acc-rp7{ margin-top: 0; }
    /* toutes les images du collage centrees */
    .acc-colonne{ align-items: center; }
    .acc-colonne > a{ align-self: center; margin-left: auto; margin-right: auto; }
}