/* ==========================================================================
   BOUTIQUE.CSS — styles propres à la page Boutique (boutique.php)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PRÉSENTATION : titre + les 3 étapes de commande
   -------------------------------------------------------------------------- */
.boutique-intro {
    padding-bottom: var(--espace-l);
}

.etapes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espace-m) var(--espace-l);
    margin: 0;
    padding: 0;
    list-style: none;
}

.etapes li {
    display: flex;
    align-items: center;
    gap: var(--espace-s);
    font-weight: bold;
    color: var(--bleu-nuit);
}

/* Numéro dans un rond orange */
.etapes span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--orange);
    color: var(--bleu-nuit);
    font-family: var(--police-titres);
}


/* --------------------------------------------------------------------------
   2. FICHES PRODUITS
   Mobile : photo puis infos. Ordinateur : photo à gauche, infos à droite.
   -------------------------------------------------------------------------- */
.fiches {
    display: grid;
    gap: var(--espace-xl);
}

.fiche {
    display: grid;
    gap: var(--espace-l);
    align-items: start;
}

@media (min-width: 800px) {
    .fiche {
        grid-template-columns: 1fr 1fr;
        gap: var(--espace-xl);
    }

    /* Une fiche sur deux : photo à droite, pour rythmer la page */
    .fiche:nth-child(even) .fiche__galerie {
        order: 2;
    }
}

/* Séparation entre deux fiches */
.fiche + .fiche {
    padding-top: var(--espace-xl);
    border-top: 1px solid rgba(19, 15, 61, 0.12);
}

/* --- Galerie --- */
.fiche__image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    background-color: var(--creme);
}

.fiche__miniatures {
    display: flex;
    gap: var(--espace-s);
    margin-top: var(--espace-s);
}

.fiche__miniature {
    padding: 0;
    border: 3px solid transparent;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition);
}

.fiche__miniature img {
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.fiche__miniature:hover {
    border-color: var(--bleu-clair);
}

.fiche__miniature[aria-current="true"] {
    border-color: var(--bleu-nuit);
}

/* --- Infos --- */
.fiche__nom {
    margin-bottom: var(--espace-xs);
}

.fiche__prix {
    font-family: var(--police-titres);
    font-size: 1.8rem;
    color: var(--orange-texte);
    margin-bottom: var(--espace-m);
}

.fiche__credit {
    font-size: 0.95rem;
}

.fiche__option {
    margin-bottom: var(--espace-l);
}

.fiche__label {
    margin-bottom: var(--espace-s);
    font-weight: bold;
    color: var(--bleu-nuit);
}

.fiche__label strong {
    font-weight: normal;
}

/* Boutons de couleur : rond de couleur + nom */
.fiche__couleurs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s);
}

.pastille {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-s);
    min-height: 44px;
    padding: var(--espace-xs) var(--espace-m) var(--espace-xs) var(--espace-xs);
    border: 2px solid rgba(19, 15, 61, 0.2);
    border-radius: 999px;
    background-color: var(--blanc);
    color: var(--bleu-nuit);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--transition);
}

.pastille:hover {
    border-color: var(--bleu-clair);
}

/* Couleur sélectionnée */
.pastille[aria-pressed="true"] {
    border-color: var(--bleu-nuit);
    box-shadow: inset 0 0 0 1px var(--bleu-nuit);
}

.pastille__rond {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(19, 15, 61, 0.35); /* visible même pour le blanc */
}

/* Tailles : petites étiquettes (information, pas des boutons) */
.fiche__tailles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-s);
    margin: 0 0 var(--espace-s);
    padding: 0;
    list-style: none;
}

.fiche__tailles li {
    min-width: 3rem;
    padding: var(--espace-xs) var(--espace-m);
    border: 2px solid var(--bleu-nuit);
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    color: var(--bleu-nuit);
}

.fiche__commander {
    min-width: 12rem;
}

@media (max-width: 599px) {
    .fiche__commander {
        width: 100%;
    }
}


/* --------------------------------------------------------------------------
   3. COMMANDE : iframe HelloAsso
   -------------------------------------------------------------------------- */
.commande__rappel {
    max-width: 680px;
    margin: 0 auto var(--espace-m);
    padding: var(--espace-m);
    border-left: 4px solid var(--orange);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    background-color: var(--blanc);
}

.commande__cadre {
    max-width: 900px;
    margin-inline: auto;
    border-radius: var(--rayon);
    overflow: hidden;
    background-color: var(--blanc);
    box-shadow: var(--ombre);
}

/* Hauteur de départ : assez grande pour éviter l'ascenseur interne.
   Dès que HelloAsso envoie la vraie hauteur, js/boutique.js l'applique. */
.commande__iframe {
    display: block;
    width: 100%;
    height: 1000px;
    border: none;
}

.commande__secours {
    margin-top: var(--espace-l);
    text-align: center;
    font-size: 1.05rem;
}

.commande__secours a {
    font-weight: bold;
}


/* --------------------------------------------------------------------------
   4. GUIDE DES TAILLES (fenêtre <dialog>)
   -------------------------------------------------------------------------- */
.guide {
    width: min(100% - 2 * var(--marge-cotes), 600px);
    max-height: 85vh;
    padding: 0;
    border: none;
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
    color: var(--texte);
}

/* Fond assombri derrière la fenêtre */
.guide::backdrop {
    background: rgba(19, 15, 61, 0.6);
}

.guide__contenu {
    padding: var(--espace-l);
}

.guide__tableau {
    overflow-x: auto; /* le tableau défile sur les petits écrans au lieu de déborder */
    margin-bottom: var(--espace-m);
}

.guide table {
    width: 100%;
    border-collapse: collapse;
}

.guide th,
.guide td {
    padding: var(--espace-s) var(--espace-m);
    border-bottom: 1px solid rgba(19, 15, 61, 0.12);
    text-align: center;
}

.guide thead th {
    background-color: var(--bleu-nuit);
    color: var(--creme);
}

.guide__aide {
    font-size: 0.95rem;
    color: var(--texte-doux);
}