/**
 * MARQUES MYSO -- carrousel d'accueil et page marques
 * ==================================================
 *
 * ECRIT POUR LE TELEPHONE D'ABORD, comme le reste de la boutique : les
 * regles de base valent pour un petit ecran, les media queries ajoutent ce
 * qui n'a de sens qu'au-dela.
 *
 * CHARTE
 *   terracotta       #C4674A
 *   terracotta fonce #A85440
 *   creme            #FAF8F5
 *   brun texte       #3D2817
 *   gris texte       #5A5A52
 *   bordure          #EADFD6
 */

/* ====================================================================
   LE CARROUSEL D'ACCUEIL
   ==================================================================== */

.mq-carrousel {
    max-width: 1080px;
    margin: 30px auto;
    padding: 0 12px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

.mq-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.mq-titre {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #3D2817;
}

.mq-toutes {
    flex-shrink: 0;
    font-size: .82rem;
    font-weight: 600;
    color: #A85440;
    text-decoration: underline;
    white-space: nowrap;
}

.mq-toutes:hover { color: #C4674A; }

/* -- La piste --
   Defilement horizontal natif : scroll-snap suffit et fonctionne partout,
   y compris au doigt sur telephone. Charger une bibliotheque de carrousel
   pour quelques vignettes serait disproportionne. */
.mq-piste {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    list-style: none;
    margin: 0;
    padding: 4px 0 12px;

    /* La barre de defilement disparait : sur telephone elle n'apparait
       qu'au moment du geste, sur ordinateur elle alourdit. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mq-piste::-webkit-scrollbar { display: none; }

.mq-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.mq-vignette {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 132px;
    /* Hauteur fixe : sans elle, une marque au nom long deforme la rangee. */
    height: 148px;
    padding: 16px 12px;
    background: #FAF8F5;
    border: 1px solid #EADFD6;
    border-radius: 14px;
    text-align: center;
    text-decoration: none !important;
    transition: border-color .15s, transform .12s;
}

.mq-vignette:hover {
    border-color: #C4674A;
    transform: translateY(-3px);
}

.mq-vignette:active { transform: none; }

.mq-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
}

.mq-logo img {
    max-width: 92px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Sans logo : les initiales dans un cercle. Plus elegant qu'une image
   generique repetee, et reconnaissable d'un coup d'oeil.
   La boutique recoit des marques d'Europe entiere : la plupart n'auront
   jamais de logo, ce cas est donc la norme et non l'exception. */
.mq-initiales {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #D89B84;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #A85440;
}

.mq-nom {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
    color: #3D2817;

    /* Deux lignes au maximum : "Compagnie des aventures" ne doit pas
       faire deborder la vignette. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mq-compte {
    font-size: .72rem;
    color: #7A7268;
}

@media (min-width: 768px) {
    .mq-titre { font-size: 1.8rem; }
    .mq-vignette { width: 146px; height: 158px; }
}

/* ====================================================================
   LA PAGE MARQUES
   ==================================================================== */

.mqp-page {
    max-width: 1080px;
    margin: 0 auto;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

.mqp-intro {
    margin: 0 0 20px;
    font-size: .95rem;
    line-height: 1.65;
    color: #5A5A52;
}

/* -- La recherche -- */
.mqp-recherche {
    position: relative;
    margin-bottom: 24px;
}

.mqp-champ {
    width: 100%;
    /* 48px de haut, 16px de texte : en dessous, les navigateurs mobiles
       zooment a la mise au point et decalent toute la page. */
    height: 48px;
    padding: 0 44px 0 18px;
    background: #fff;
    border: 1.5px solid #EADFD6;
    border-radius: 24px;
    font-family: inherit;
    font-size: 16px;
    color: #3D2817;
    -webkit-appearance: none;
    appearance: none;
}

.mqp-champ:focus {
    outline: none;
    border-color: #C4674A;
}

.mqp-champ::placeholder { color: #9A9089; }

.mqp-effacer {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #7A7268;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.mqp-effacer:hover { color: #C4674A; }

/* -- La grille -- */
.mqp-grille {
    display: grid;
    /* Deux colonnes sur telephone : une seule gaspille la largeur, trois
       rendent les noms illisibles. */
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mqp-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 130px;
    padding: 18px 14px;
    background: #FAF8F5;
    border: 1px solid #EADFD6;
    border-radius: 14px;
    text-align: center;
    text-decoration: none !important;
    transition: border-color .15s, transform .12s;
}

.mqp-carte:hover {
    border-color: #C4674A;
    transform: translateY(-2px);
}

.mqp-carte-initiales {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #D89B84;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #A85440;
}

.mqp-carte-nom {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    color: #3D2817;
}

.mqp-carte-compte {
    font-size: .76rem;
    color: #7A7268;
}

/* -- Aucun resultat -- */
.mqp-vide {
    padding: 34px 20px;
    text-align: center;
    background: #FAF8F5;
    border: 1px solid #EADFD6;
    border-radius: 14px;
}

.mqp-vide p {
    margin: 0 0 10px;
    font-size: .95rem;
    line-height: 1.6;
    color: #5A5A52;
}

.mqp-vide-forte {
    font-size: 1.1rem !important;
    color: #3D2817 !important;
    font-weight: 600;
}

@media (min-width: 600px) {
    .mqp-grille { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    .mqp-grille { grid-template-columns: repeat(4, 1fr); }
}