/* ============================================================
   FOOTER — agencement sobre (inspire de tiger.exposed)
   memes colonnes, 14px, pointilles fins, fond ivoire
   ============================================================ */

.footer{
    width: 90%;
    margin: 10% auto 0;
    padding: 0 0 32px;
    color: #000;
    font-family: "alte_haas_grotesk", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
}
.footer a{ color: #000; text-decoration: none; }
.footer a:hover{ text-decoration: underline; }

.footer ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer li{
    border-top: 1px solid #000;
    padding: 4px 0;
}
.footer li:last-child{ border-bottom: 1px solid #000; }

/* --- colonnes --- */
.footer-cols{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "identite contact formulaire"
        "site     contact formulaire";
    gap: 32px;
    align-items: start;
}
.footer-col{ min-width: 0; }
.footer-col:nth-child(1){ grid-area: identite; }
.footer-col:nth-child(2){ grid-area: contact; }
.footer-col:nth-child(3){ grid-area: site; }
.footer-col:nth-child(4){ grid-area: formulaire; }
.footer-title{
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    padding: 0 0 4px;
}

/* --- formulaire : chaque champ est une ligne de la liste --- */
.footer-form input,
.footer-form textarea,
.footer-form button{
    display: block;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    color: #000;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    outline: none;
}
.footer-form textarea{ resize: vertical; }
.footer-form input::placeholder,
.footer-form textarea::placeholder{ color: #000; }
.footer-form input:focus::placeholder,
.footer-form textarea:focus::placeholder{ color: transparent; }
.footer-form li:focus-within{ border-top-width: 2px; padding-top: 3px; }

.footer-form button{
    text-align: left;
    cursor: pointer;
}
.footer-form button::after{ content: " →"; }
.footer-form button:hover{ text-decoration: underline; }

/* --- ligne du bas --- */
.footer-bottom{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* alignees sur les 3 colonnes */
    gap: 4px 32px;
    margin-top: 64px;
    font-size: 12px;
    line-height: 16px;
}
.footer-bottom p{
    margin: 0;
}


/* tablette : 2 colonnes */
@media (max-width: 900px){
    .footer-cols{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "identite contact"
            "site     formulaire";
    }
    .footer-bottom{ grid-template-columns: minmax(0, 1fr); }
}
/* smartphone : 1 colonne */
@media (max-width: 600px){
    .footer-cols{
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "identite" "contact" "site" "formulaire";
    }
}