/* Belle Ô Natur'Elle - Page d'attente */

/* Polices : Great Vibes + Jost via Google Fonts (cf. index.php) */

:root {
    --fond: #fff;
    --texte: #4a2c3b;
    --accent: #b08a55;
    --rose: #f6d3dc;
    --rose-clair: #fcf0f3;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: var(--texte);
    background: var(--fond) linear-gradient(180deg, var(--fond) 0, var(--fond) 380px, var(--rose-clair) 100%);
}

a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent); }

.attente {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 16px 50px;
    text-align: center;
}

.attente-logo { margin: 0; }

.attente-logo img {
    width: 260px;
    max-width: 65vw;
    height: auto;
}

.attente-titre {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    font-size: clamp(38px, 7vw, 56px);
    line-height: 1.2;
    margin: 10px 0 0;
}

.attente-intro {
    max-width: 620px;
    margin: 16px auto 0;
}

.attente-cta { margin: 28px 0 0; }

.bouton {
    position: relative;
    display: inline-block;
    padding: 15px 32px;
    border-radius: 40px;
    color: var(--texte);
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 14px;
    transition: box-shadow .2s, color .2s;
}
.bouton:hover { color: var(--texte); box-shadow: 0 4px 16px rgba(176, 138, 85, .35); }

/* Bordure dorée dégradée comme l'anneau du logo, sans fond (mask pour évider l'intérieur) */
.bouton::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(120deg, #c9a46a, #f3e0b0 45%, #b08a55 75%, #e6c98f);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

.attente-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 16px 16px;
}

.attente-photos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.attente-infos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 50px;
}

.attente-bloc {
    flex: 1 1 280px;
    max-width: 360px;
    padding: 24px 20px;
    background: #fff;
    border: 1px solid var(--rose);
}

.attente-bloc h3 {
    margin: 0 0 12px;
    font-weight: 500;
    font-size: 21px;
    text-transform: uppercase;
    color: var(--accent);
}

.attente-bloc p { margin: 0; }
.attente-bloc .tel { margin-top: 10px; font-weight: 400; }

.horaires { margin: 0; }
.horaires dt { font-weight: 400; }
.horaires dd { margin: 0 0 8px; }
.horaires dd:last-child { margin-bottom: 0; }

.reseaux {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reseaux a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--rose-clair);
    border: 1px solid var(--rose);
    transition: background .2s, color .2s;
}
.reseaux a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Icônes : SVG dans i/, colorées via mask pour suivre currentColor */
.reseaux a::before {
    content: '';
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}
.icone-facebook { --icone: url(i/facebook.svg); }
.icone-instagram { --icone: url(i/instagram.svg); }
.icone-tiktok { --icone: url(i/tiktok.svg); }

@media (max-width: 700px) {
    .attente-photos { grid-template-columns: repeat(2, 1fr); }
}