/**
 * Complements Mille Fleurs
 *
 * Regles ecrites a la main : les classes Tailwind correspondantes n'existent pas
 * dans style.css, qui n'a pas ete recompile depuis juin. A fusionner dans le
 * build Tailwind lors du correctif d'allegement.
 */

/* --- Vignette d'une piece vendue : voile gris + mention, visible au premier coup d'oeil --- */
.mf-carte-vendue { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(45, 45, 45, .42); pointer-events: none; }
.mf-carte-vendue span { display: inline-block; border-radius: 9999px; background: #1A3C34; color: #F9F8F4; padding: .5rem 1.25rem; font-family: var(--font-sans, "DM Sans", sans-serif); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
@media (min-width: 768px) { .mf-carte-vendue span { font-size: 11px; padding: .55rem 1.5rem; } }

/* La photo d'une piece vendue est desaturee : la difference se voit avant meme de lire */
.mf-vignette-vendue img { filter: grayscale(.55) contrast(.95); }
.mf-vignette-vendue:hover img { filter: grayscale(.25) contrast(1); }

/* --- Descriptions produit : separation entre la piece et les mentions communes --- */
.mf-sep { border: 0; border-top: 1px solid rgba(200,127,104,.45); width: 2.5rem; margin: 1.7rem 0 1.2rem; }

/* ==========================================================================
   GRILLE PRODUITS
   Deux colonnes des le telephone : on compare deux pieces d'un coup d'oeil
   au lieu de les memoriser. Quatre sur grand ecran, ou la mise en page
   laissait un tiers de la largeur vide.
   ========================================================================== */
.mf-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
    align-items: start;
}
@media (min-width: 768px) {
    .mf-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; }
}
@media (min-width: 1280px) {
    .mf-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mf-carte { position: relative; }

/* Le titre occupe toujours deux lignes : les prix s'alignent d'une carte
   a l'autre au lieu de flotter a des hauteurs differentes. */
.mf-carte .mf-titre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* --- Pied de carte : categorie, titre sur deux lignes, prix aligne en bas --- */
.mf-carte-pied { display: flex; flex-direction: column; gap: .35rem; }
.mf-carte-cat {
    margin: 0;
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(45,45,45,.75);
}
@media (min-width: 768px) { .mf-carte-cat { font-size: 10px; } }
.mf-carte-pied .mf-titre { margin: 0; }
.mf-carte-pied .mf-titre a { text-decoration: none; }
.group:hover .mf-titre a {
    text-decoration: underline;
    text-decoration-color: var(--color-terracotta, #C87F68);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.mf-carte-prix {
    align-self: flex-start;
    margin-top: .15rem;
    display: inline-flex; align-items: center;
    border: 1px solid rgba(200,127,104,.45);
    border-radius: 9999px;
    padding: .15rem .7rem;
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    color: #A6573F;
    white-space: nowrap;
}
.mf-carte-prix.est-au-panier { border-color: rgba(45,45,45,.22); color: rgba(45,45,45,.6); }

/* ==========================================================================
   ACCESSIBILITE
   ========================================================================== */

/* --- Un terracotta lisible pour le texte -----------------------------------
   Le terracotta de marque (#C87F68) donne 2,95:1 sur le creme : sous la
   norme de 4,5:1. On garde cette teinte pour les bordures, les aplats et
   les pastilles, et on utilise une version plus dense des qu'il s'agit de
   texte. A l'oeil c'est la meme couleur ; a la mesure, 4,87:1.
   --------------------------------------------------------------------------- */
:root { --color-terracotta-texte: #A6573F; }
.text-terracotta { color: var(--color-terracotta-texte); }
.hover\:text-terracotta:hover { color: var(--color-terracotta-texte); }
.group:hover .group-hover\:text-terracotta { color: var(--color-terracotta-texte); }

/* Les gris trop dilues : 40 % donnait 2,27:1, 50 % donnait 2,90:1. */
.text-charcoal\/30, .text-charcoal\/40 { color: rgba(45,45,45,.66); }
.text-charcoal\/50 { color: rgba(45,45,45,.70); }
.mf-tri-label { color: rgba(26,60,52,.72); }

/* --- Focus clavier ---------------------------------------------------------
   Le theme n'en definissait aucun : personne naviguant au clavier ne voyait
   ou il se trouvait.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #1A3C34;
    outline-offset: 3px;
    border-radius: 2px;
}
.bg-forest a:focus-visible,
footer a:focus-visible,
.bg-forest button:focus-visible {
    outline-color: #F9F8F4;
}

/* --- Zones cliquables ------------------------------------------------------
   Les liens du menu faisaient 18 px de haut, ceux du fil d'Ariane 16 px.
   On agrandit la zone sensible sans deplacer le texte d'un pixel.
   --------------------------------------------------------------------------- */
#site-header nav a,
nav[aria-label] a,
.woocommerce-breadcrumb a,
.mf-carte-pied a { position: relative; }

#site-header nav a::before,
nav[aria-label] a::before,
.woocommerce-breadcrumb a::before {
    content: "";
    position: absolute;
    inset: -13px -10px;
}

/* ==========================================================================
   BARRE D'ACHAT COLLANTE (telephone et tablette)
   ========================================================================== */
.mf-barre-achat {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    background: rgba(249, 248, 244, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(26, 60, 52, .1);
    box-shadow: 0 -8px 24px rgba(26, 60, 52, .07);
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.mf-barre-achat.est-visible { transform: translateY(0); }
@media (min-width: 1024px) { .mf-barre-achat { display: none; } }

.mf-barre-achat-contenu {
    display: flex; align-items: center; gap: 1rem;
    max-width: 40rem; margin: 0 auto;
}
.mf-barre-achat-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mf-barre-achat-nom {
    font-family: var(--font-serif, "Playfair Display", serif);
    font-size: .92rem; color: #1A3C34;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mf-barre-achat-prix {
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: #A6573F;
}
.mf-barre-achat-bouton {
    flex-shrink: 0;
    min-height: 48px; padding: 0 1.6rem;
    border: 0; border-radius: 9999px;
    background: #1A3C34; color: #F9F8F4;
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease;
}
.mf-barre-achat-bouton:hover { background: #A6573F; }
.mf-barre-achat-bouton.est-au-panier { background: rgba(45,45,45,.14); color: #2D2D2D; }
.mf-barre-achat-bouton:disabled { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   MOUVEMENT
   Parti pris : discret. Le mouvement sert a guider l'oeil et a confirmer une
   action, jamais a decorer. Une seule duree par famille de geste, et rien
   du tout pour qui a demande moins d'animations.
   ========================================================================== */

/* --- Cartes produit : la piece se souleve legerement au survol ------------- */
.mf-carte { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) {
    .mf-carte:hover { transform: translateY(-4px); }
    .mf-carte .aspect-\[3\/4\] { transition: box-shadow .28s ease; }
    .mf-carte:hover .aspect-\[3\/4\] { box-shadow: 0 14px 30px rgba(26,60,52,.13); }
}

/* --- Fiche produit : la colonne de droite arrive juste apres l'image ------- */
/* On anime le deplacement, jamais l'opacite : si l'animation ne se joue pas
   -- onglet en arriere-plan, moteur de rendu econome, script bloque --, le
   contenu reste visible. C'est le defaut qu'on vient de retirer de la
   boutique, il n'y a aucune raison de le reintroduire ici. */
@keyframes mf-monte {
    from { transform: translateY(9px); }
    to   { transform: none; }
}
.mf-apparait > * { animation: mf-monte .42s cubic-bezier(.22,.61,.36,1) both; }
.mf-apparait > *:nth-child(1) { animation-delay: .04s; }
.mf-apparait > *:nth-child(2) { animation-delay: .10s; }
.mf-apparait > *:nth-child(3) { animation-delay: .16s; }
.mf-apparait > *:nth-child(4) { animation-delay: .22s; }
.mf-apparait > *:nth-child(n+5) { animation-delay: .26s; }

/* --- Confirmation d'ajout au panier : une pulsation courte ---------------- */
@keyframes mf-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(26,60,52,.35); }
    100% { box-shadow: 0 0 0 14px rgba(26,60,52,0); }
}
.mf-confirme { animation: mf-pulse .55s ease-out; }

/* --- Le pictogramme du panier accuse reception ----------------------------- */
@keyframes mf-panier {
    0%   { transform: none; }
    35%  { transform: translateY(-4px) scale(1.12); }
    100% { transform: none; }
}
.mille-fleurs-cart-wrapper.mf-recu svg { animation: mf-panier .45s cubic-bezier(.22,.61,.36,1); }

/* --- Respect du reglage systeme -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mf-carte,
    .mf-carte .aspect-\[3\/4\] { transition: none; }
    .mf-carte:hover { transform: none; }
    .mf-apparait > *,
    .mf-confirme,
    .mille-fleurs-cart-wrapper.mf-recu svg { animation: none; }
    .mf-barre-achat { transition: none; }
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   BARRE DE FILTRES
   Sur telephone le defilement horizontal est le bon geste. Sur grand ecran
   il cachait le dernier filtre derriere le bord : la liste passe a la ligne
   plutot que de sortir du cadre.
   ========================================================================== */
@media (min-width: 1024px) {
    .mf-filtres { overflow: visible; }
    .mf-filtres-liste {
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
        white-space: normal;
        row-gap: .6rem;
    }
}

/* La barre d'achat collante masquait la fin de page sur telephone. */
@media (max-width: 1023.98px) {
    body.single-product { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   HEROS DE LA PAGE D'ACCUEIL
   L'image commence desormais tout en haut et passe sous l'en-tete transparent :
   une bande creme d'une soixantaine de pixels les separait, ce qui cassait
   l'effet plein ecran. Le decalage est reporte sur le texte, qui ne doit pas
   se retrouver sous la navigation.
   ========================================================================== */
.mf-heros-contenu { padding-top: 7rem; padding-bottom: 2rem; }
@media (min-width: 768px) { .mf-heros-contenu { padding-top: 8rem; padding-bottom: 2rem; } }
@media (min-width: 1024px) { .mf-heros-contenu { padding-top: 8.5rem; padding-bottom: 1.5rem; } }

/* L'en-tete fixe mesure 123 px : la marge haute ne descend jamais sous 7 rem,
   sinon le premier texte passe dessous. */

/* Sur grand ecran, on resserre les respirations internes du heros pour que le
   haut des cartes produit reste visible sans defiler. */
@media (min-width: 1024px) {
    .mf-heros-contenu h1 { margin-bottom: 1.25rem; }
    .mf-heros-contenu p  { margin-bottom: 1.5rem; }
    .mf-heros-contenu span.inline-block { margin-bottom: 1.25rem; }
}

/* Et la section qui suit demarre plus tot. */
@media (min-width: 768px) {
    .mf-section-carrousel { padding-top: 2.25rem; }
}

/* ==========================================================================
   BANDEAU DE CONSENTEMENT

   WPConsent rend son bandeau dans un Shadow DOM : les regles ecrites ici en
   ciblant .wpconsent-banner ne l'atteignaient jamais (c'est pourquoi la
   correction de hauteur mobile posee le 28 aout etait sans effet). Le plugin
   expose en revanche des ::part(), qui traversent la frontiere.

   Habillage repris du site : fond creme, texte encre, bouton principal vert
   foret comme "Voir la boutique", refus en contour, reglages en lien discret.
   ========================================================================== */

#wpconsent-container::part(wpconsent-banner) {
    background: #F9F8F4;
    color: #2D2D2D;
    border-top: 1px solid rgba(26, 60, 52, .14);
    box-shadow: 0 -10px 40px rgba(26, 60, 52, .10);
    padding: 1.15rem 1.5rem;
}

#wpconsent-container::part(wpconsent-banner-body) {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(45, 45, 45, .82);
    max-width: 72ch;
}

#wpconsent-container::part(wpconsent-banner-footer) {
    gap: .6rem;
}

/* --- Les trois boutons, dans le vocabulaire du site --- */

#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences) {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    border-radius: 2px;
    padding: .85rem 1.5rem;
    min-height: 44px;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Principal : vert foret, vire terracotta au survol, comme les boutons du site */
#wpconsent-container::part(wpconsent-button-accept) {
    background: #1A3C34;
    color: #F9F8F4;
    border: 1px solid #1A3C34;
}
#wpconsent-container::part(wpconsent-button-accept):hover {
    background: #C87F68;
    border-color: #C87F68;
}

/* Refus : meme poids visuel, en contour -- un refus ne doit pas etre cache */
#wpconsent-container::part(wpconsent-button-cancel) {
    background: transparent;
    color: #1A3C34;
    border: 1px solid rgba(26, 60, 52, .45);
}
#wpconsent-container::part(wpconsent-button-cancel):hover {
    background: rgba(26, 60, 52, .06);
    border-color: #1A3C34;
}

/* Reglages : lien souligne, discret */
#wpconsent-container::part(wpconsent-button-preferences) {
    background: transparent;
    color: rgba(45, 45, 45, .62);
    border: 1px solid transparent;
    text-decoration: underline;
    text-underline-offset: 5px;
    padding-left: .75rem;
    padding-right: .75rem;
}
#wpconsent-container::part(wpconsent-button-preferences):hover {
    color: #C87F68;
}

/* --- Fenetre de reglages detaillee, meme habillage --- */

#wpconsent-container::part(wpconsent-preferences-content) {
    background: #F9F8F4;
    color: #2D2D2D;
    border-radius: 4px;
}
#wpconsent-container::part(wpconsent-preferences-title) {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    color: #1A3C34;
}
#wpconsent-container::part(wpconsent-preferences-accept-button) {
    background: #1A3C34;
    color: #F9F8F4;
    border: 1px solid #1A3C34;
    border-radius: 2px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    min-height: 44px;
}
#wpconsent-container::part(wpconsent-preferences-cancel-button) {
    background: transparent;
    color: #1A3C34;
    border: 1px solid rgba(26, 60, 52, .45);
    border-radius: 2px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    min-height: 44px;
}

/* --- Telephone : le bandeau ne doit pas manger l'ecran --- */
@media (max-width: 640px) {
    #wpconsent-container::part(wpconsent-banner) {
        padding: .9rem 1rem;
    }
    #wpconsent-container::part(wpconsent-banner-body) {
        font-size: 12px;
        line-height: 1.45;
        max-height: 7.2em;
        overflow-y: auto;
    }
    #wpconsent-container::part(wpconsent-banner-footer) {
        gap: .4rem;
    }
    #wpconsent-container::part(wpconsent-button-accept),
    #wpconsent-container::part(wpconsent-button-cancel),
    #wpconsent-container::part(wpconsent-button-preferences) {
        flex: 1 1 0;
        min-width: 0;
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: 10px;
        letter-spacing: .08em;
        white-space: nowrap;
    }
}

/* ==========================================================================
   VOILE DU HEROS
   Le degrade d'origine allait de gauche a droite : concu pour un grand ecran,
   il laissait le texte sur la photo nue des que la fenetre se resserrait, et
   le sous-titre gris devenait illisible sur les tulipes.
   En dessous de 1024 px on passe donc a un voile vertical, plus couvrant.
   ========================================================================== */
.mf-heros-voile {
    background: linear-gradient(
        to bottom,
        rgba(245, 242, 232, .92) 0%,
        rgba(245, 242, 232, .86) 55%,
        rgba(245, 242, 232, .55) 100%
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@media (min-width: 1024px) {
    .mf-heros-voile {
        background: linear-gradient(
            to right,
            rgba(245, 242, 232, .93) 5%,
            rgba(245, 242, 232, 0) 85%
        );
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        -webkit-mask-image: linear-gradient(to right, black 20%, transparent 95%);
                mask-image: linear-gradient(to right, black 20%, transparent 95%);
    }
}

/* ==========================================================================
   FILET DE SECURITE SUR LES ANIMATIONS AU DEFILEMENT
   AOS masque les elements en attendant de les animer. Tant que sa librairie
   n'a pas confirme sa presence, on annule ce masquage : une page dont le
   script d'animation ne se charge pas doit rester lisible, pas rester blanche.
   ========================================================================== */
html:not(.aos-pret) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ------------------------------------------------------------------
   Avis Vinted : etoiles + section par categorie boutique
   Classes ecrites a la main : gap-0.5 / md:mt-24 / md:pt-16 n'existent
   pas dans style.css compile (npm run build pas encore relance).
   ------------------------------------------------------------------ */
.mf-etoiles {
    display: flex;
    align-items: center;
    gap: 2px;
}

.mf-avis-categorie {
    margin-top: 4rem;
    padding-top: 3rem;
}

@media (min-width: 768px) {
    .mf-avis-categorie {
        margin-top: 6rem;
        padding-top: 4rem;
    }
}


/* ==========================================================================
   ALPINE : ELEMENTS MASQUES AVANT INITIALISATION
   x-cloak est pose 7 fois dans les gabarits (tri, couleurs, panneau de
   personnalisation) mais aucune regle ne le rendait effectif : ces blocs
   s'affichaient une fraction de seconde au chargement avant qu'Alpine ne les
   masque. C'est le "flash" visible en ouvrant une fiche produit.
   ========================================================================== */
[x-cloak] { display: none !important; }

/* ==========================================================================
   AVIS DE L'ATELIER SUR LA FICHE PRODUIT
   Une piece unique n'a jamais d'avis propre : la section restait vide. On y
   remonte les avis Vinted correspondant a la categorie de la piece, en le
   disant clairement pour ne pas les faire passer pour des avis sur la piece.
   ========================================================================== */
.mf-avis-atelier {
    margin-bottom: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(26, 60, 52, .1);
}

.mf-avis-atelier-titre {
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--color-forest, #1A3C34);
    text-align: center;
    margin: 0 0 1.75rem;
}
.mf-avis-atelier-titre span {
    display: block;
    margin-top: .45rem;
    font-weight: 400;
    letter-spacing: .12em;
    color: rgba(45, 45, 45, .42);
}

.mf-avis-atelier-liste {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .mf-avis-atelier-liste { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.mf-avis-atelier-carte {
    margin: 0;
    background: var(--color-cream, #F9F8F4);
    border: 1px solid rgba(26, 60, 52, .07);
    border-radius: 1rem;
    padding: 1.4rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.mf-avis-atelier-carte blockquote {
    margin: 0;
    font-family: var(--font-serif, "Playfair Display", Georgia, serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(45, 45, 45, .8);
    flex-grow: 1;
}

.mf-avis-atelier-carte figcaption {
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--color-forest, #1A3C34);
    margin-top: auto;
}
.mf-avis-atelier-carte figcaption span {
    display: block;
    margin-top: .25rem;
    font-weight: 400;
    letter-spacing: .13em;
    color: rgba(45, 45, 45, .38);
}

/* ==========================================================================
   GALERIE DE LA FICHE PRODUIT
   Les 3 a 5 photos de chaque piece existaient deja mais rien ne le disait :
   sur ordinateur les fleches restaient invisibles jusqu'au survol, et les
   vignettes tombaient sous la ligne de flottaison, recadrees en carre alors
   que les photos sont au format portrait.
   ========================================================================== */

/* Le compteur annonce le nombre de vues des l'ouverture. */
.mf-compteur-vues {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    z-index: 20;
    background: rgba(249, 248, 244, .88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #1A3C34;
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    padding: .35rem .7rem;
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Image principale plafonnee : les vignettes remontent dans l'ecran sans
   changer la mise en page en deux colonnes. */
/* FORMAT ET DEFINITION DES PHOTOS
   Mesure sur les 905 originaux : 94 % sont en 3/4, d'ou le format de la boite.
   Mais surtout, 814 d'entre eux ne font que 600 px de large (95 % font 800 px
   ou moins) : ce sont des exports de l'epoque Vinted. Affichee plus large que
   600 px, la photo est donc AGRANDIE par le navigateur, et devient molle.
   On plafonne la largeur a sa taille native : plus petit, mais net. */
.mf-galerie-principale {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
}

/* ==========================================================================
   NOTE SUR LE TISSU, EN BAS DE DESCRIPTION
   Les trois paragraphes en gras ("Le tissu." / "L'atelier." / "L'entretien.")
   se suivaient sans respiration et repetaient mot pour mot les volets
   "Entretien & Qualite" et "L'Atelier Mille Fleurs" places juste dessous.
   Il ne reste que ce qui n'est dit nulle part ailleurs : l'unicite du metrage.
   ========================================================================== */
.mf-note-tissu {
    font-family: var(--font-serif, "Playfair Display", Georgia, serif);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(45, 45, 45, .62);
    max-width: 58ch;
    margin: 0;
}

/* ==========================================================================
   GALERIE : CENTRAGE, LOUPE, VISIONNEUSE PLEIN ECRAN
   ========================================================================== */

/* La photo est entiere et centree, quel que soit son cadrage : en plafonnant
   la hauteur, un object-cover rognait le haut et le bas de la piece. */
.mf-galerie-image {
    object-fit: contain;
    object-position: center;
    background: #F4F2EC;
}

.mf-loupe {
    position: absolute;
    right: .75rem;
    top: .75rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(249, 248, 244, .85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #1A3C34;
    cursor: zoom-in;
    transition: background-color .25s ease, color .25s ease;
}
.mf-loupe:hover { background: #F9F8F4; color: #C87F68; }

/* --- Visionneuse --- */
.mf-visionneuse {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(38, 42, 38, .93);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.25rem;
    animation: mf-vis-ouvre .22s ease-out;
}
@keyframes mf-vis-ouvre { from { opacity: 0; } to { opacity: 1; } }

.mf-vis-image {
    max-width: min(100%, 1100px);
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    animation: mf-vis-monte .25s ease-out;
}
@keyframes mf-vis-monte { from { transform: scale(.97); } to { transform: none; } }

.mf-vis-fermer,
.mf-vis-fleche {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(249, 248, 244, .25);
    background: rgba(249, 248, 244, .1);
    color: #F9F8F4;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease;
}
.mf-vis-fermer:hover,
.mf-vis-fleche:hover { background: rgba(249, 248, 244, .22); border-color: rgba(249, 248, 244, .5); }

.mf-vis-fermer { top: 1.1rem; right: 1.1rem; width: 44px; height: 44px; }
.mf-vis-fleche { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.mf-vis-fleche.est-gauche { left: 1.1rem; }
.mf-vis-fleche.est-droite { right: 1.1rem; }

.mf-vis-compteur {
    position: absolute;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(249, 248, 244, .75);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .mf-visionneuse { padding: 3.25rem .75rem; }
    .mf-vis-fleche { width: 42px; height: 42px; }
    .mf-vis-fleche.est-gauche { left: .5rem; }
    .mf-vis-fleche.est-droite { right: .5rem; }
}

/* ==========================================================================
   INFORMATIONS SOUS LA GALERIE
   Attributs et volets depliants remontes sous les vignettes : la colonne de
   droite formait une tour et la gauche restait vide sous les images.
   ========================================================================== */
.mf-infos-sous-galerie { margin-top: 2rem; }
.mf-infos-sous-galerie > div:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ==========================================================================
   AVIS : PLUS DE CONTRADICTION
   "Personne n'a encore laisse d'avis" tombait juste sous trois avis Vinted.
   Quand ceux-ci sont affiches, on masque le constat et on ne garde que
   l'invitation portee par le formulaire.
   ========================================================================== */
.mf-reviews.a-des-avis-atelier .woocommerce-noreviews { display: none; }

/* Placement en grille : sur ordinateur le bloc va sous la galerie, colonne de
   gauche ; sur telephone il repasse APRES le titre et le bouton d'achat, qui
   doivent rester en haut. */
@media (min-width: 768px) {
    .mf-fiche-grille > .mf-colonne-galerie      { grid-column: 1; grid-row: 1; }
    .mf-fiche-grille > .mf-colonne-infos        { grid-column: 2; grid-row: 1 / span 2; }
    .mf-fiche-grille > .mf-infos-sous-galerie   { grid-column: 1; grid-row: 2; }
}

/* Pellicule de vignettes dans la visionneuse : on circule sans la fermer. */
.mf-vis-pellicule {
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    max-width: min(92vw, 560px);
    overflow-x: auto;
    padding: .25rem;
    scrollbar-width: none;
}
.mf-vis-pellicule::-webkit-scrollbar { display: none; }

.mf-vis-pellicule button {
    flex: 0 0 auto;
    width: 46px;
    height: 58px;
    padding: 0;
    border: 1px solid rgba(249, 248, 244, .3);
    border-radius: 2px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: .55;
    transition: opacity .25s ease, border-color .25s ease;
}
.mf-vis-pellicule button:hover { opacity: .85; }
.mf-vis-pellicule button.est-active { opacity: 1; border-color: #C87F68; }
.mf-vis-pellicule img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Le compteur laisse la place a la pellicule. */
.mf-vis-compteur { display: none; }

/* =========================================================
   EN-TETE : ne jamais laisser le logo passer sur le contenu
   ========================================================= */

/* Partout sauf l'accueil, du contenu commence juste sous l'en-tete :
   il lui faut un fond des le premier pixel. */
#site-header {
    background-color: rgba(249, 248, 244, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* L'accueil seul ouvre sur une image plein cadre : l'en-tete y reste
   transparent tant qu'on n'a pas commence a descendre. */
body.home #site-header {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Des que ca defile, fond solide sur toutes les pages, accueil compris. */
html.mf-defile #site-header,
html.mf-defile body.home #site-header {
    background-color: rgba(249, 248, 244, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(45, 45, 45, .07);
}

@media (prefers-reduced-transparency: reduce) {
    #site-header,
    html.mf-defile #site-header { background-color: #F9F8F4; }
}

/* =========================================================
   PAGINATION : reperable au doigt comme a l'oeil
   ========================================================= */

.custom-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 48 px : la taille minimale pour viser sans se tromper sur un ecran tactile. */
.custom-pagination .page-numbers li > .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 .35rem;
    border-radius: 9999px;
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #1A3C34;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.custom-pagination .page-numbers li > a.page-numbers:hover {
    background-color: rgba(26, 60, 52, .07);
}
.custom-pagination .page-numbers li > .page-numbers.current {
    background-color: #1A3C34;
    color: #F9F8F4;
}
.custom-pagination .page-numbers li > .page-numbers.dots {
    min-width: 28px;
    color: rgba(45, 45, 45, .34);
}

/* Precedent / Suivant : nommes, pas de simples chevrons. */
.custom-pagination .page-numbers li > .page-numbers.prev,
.custom-pagination .page-numbers li > .page-numbers.next {
    padding: 0 1.35rem;
    border: 1px solid rgba(26, 60, 52, .18);
    background-color: #fff;
    margin: 0 .5rem;
}
.mf-pagination-pas {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.custom-pagination .page-numbers li > .page-numbers:focus-visible {
    outline: 2px solid #C87F68;
    outline-offset: 2px;
}

/* Repere de position */
.mf-pagination-repere {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-top: 1.4rem;
}
.mf-pagination-repere p {
    margin: 0;
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 13px;
    color: rgba(45, 45, 45, .62);
}
.mf-pagination-repere strong { color: #1A3C34; font-weight: 700; }
.mf-pagination-jauge {
    position: relative;
    width: 280px;
    max-width: 60vw;
    height: 3px;
    border-radius: 2px;
    background: rgba(45, 45, 45, .1);
}
.mf-pagination-jauge span {
    position: absolute;
    top: 0;
    height: 3px;
    min-width: 14px;
    border-radius: 2px;
    background: #C87F68;
}

/* Titre de carte : trois lignes disponibles, le tissu n'est plus coupe. */
.mf-carte .mf-titre { -webkit-line-clamp: 3; }

/* =========================================================
   BOUTIQUE : recherche et compteurs de pastilles
   ========================================================= */

.mf-recherche {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
    height: 52px;
    padding: 0 1.15rem;
    border: 1px solid rgba(26, 60, 52, .16);
    border-radius: 9999px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.mf-recherche:focus-within {
    border-color: #C87F68;
    box-shadow: 0 0 0 3px rgba(200, 127, 104, .14);
}
.mf-recherche-loupe { color: #1A3C34; flex-shrink: 0; }
.mf-recherche input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 15px;
    color: #1A3C34;
    -webkit-appearance: none;
    appearance: none;
}
.mf-recherche input[type="search"]::-webkit-search-cancel-button { display: none; }
.mf-recherche input[type="search"]::placeholder { color: rgba(45, 45, 45, .42); }
/* Le bouton reste atteignable au clavier sans encombrer la barre. */
.mf-recherche button[type="submit"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.mf-recherche button[type="submit"]:focus-visible {
    position: static;
    width: auto; height: 40px;
    clip: auto; margin: 0;
    padding: 0 1.1rem;
    border-radius: 9999px;
    background: #1A3C34;
    color: #F9F8F4;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.mf-recherche-effacer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    color: rgba(45, 45, 45, .5);
    text-decoration: none;
}
.mf-recherche-effacer:hover { background: rgba(26, 60, 52, .07); color: #1A3C34; }

/* Compteur dans les pastilles de categorie */
.mf-pastille b {
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .04em;
    opacity: .5;
    margin-left: .15rem;
}
.mf-pastille-vide { opacity: .45; }

@media (max-width: 1023px) {
    .mf-recherche { height: 48px; }
    .mf-recherche input[type="search"] { font-size: 16px; } /* 16px : evite le zoom automatique sur iOS */
}

/* Les pastilles tiennent sur une seule ligne et defilent lateralement :
   une deuxieme ligne pousse toute la grille vers le bas et laisse une
   categorie orpheline en dessous. */
.mf-filtres { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mf-filtres-liste { flex-wrap: nowrap !important; min-width: max-content; }

/* =========================================================
   EN-TETE : retrecissement au defilement, et barre d'outils
   calee sur sa hauteur reelle
   ========================================================= */

/* Le retrecissement etait prevu par le theme mais ne se declenchait jamais :
   il dependait d'une portee Alpine inactive. On le rejoue en CSS. */
html.mf-defile #site-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
html.mf-defile #site-header .font-serif {
    font-size: 1.5rem;
    line-height: 1;
}
@media (min-width: 768px) {
    html.mf-defile #site-header .font-serif { font-size: 1.75rem; }
}
/* Le sous-titre « Couture » s'efface pour gagner la hauteur. */
html.mf-defile #site-header .text-terracotta {
    opacity: 0;
    height: 0;
    margin-top: 0;
    overflow: hidden;
}

/* La barre d'outils vient se coller sous l'en-tete, quelle que soit sa
   hauteur du moment : le script publie la mesure a chaque changement. */
.mf-barre-outils {
    top: var(--mf-entete-hauteur, 78px) !important;
}

/* La recherche occupe la place restante, les contrôles gardent la leur ;
   les pastilles disposent ainsi de toute la largeur sur leur propre ligne. */
.mf-rangee-recherche .mf-recherche { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1024px) {
    .mf-rangee-recherche > div:last-child { flex: 0 0 auto; }
}

/* Titre de carte : le modele reste lisible, le tissu porte l'identite.
   Supprimer le modele rendait la carte muette — le surtitre donne la
   categorie, qui ne dit pas de quelle piece il s'agit. */
.mf-titre-modele,
.mf-titre-tissu { display: block; }
.mf-titre-modele {
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(45, 45, 45, .52);
    margin-bottom: .15rem;
}
.mf-titre-tissu { line-height: 1.25; }
@media (min-width: 768px) { .mf-titre-modele { font-size: 12px; } }

/* =========================================================
   FICHE PRODUIT : repartir les informations sur deux colonnes
   La galerie et la colonne d'achat s'arretent a des hauteurs
   differentes ; tout ce qui suivait s'empilait a gauche et
   laissait un grand vide a droite. On rend la rangee du bas
   pleine largeur, puis on la partage : la matiere et la couleur
   restent sous la galerie, les depliants passent a droite.
   ========================================================= */

.mf-infos-sous-galerie {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(26, 60, 52, .10);
}
/* Les enfants ne portent plus leur propre filet : il court desormais
   d'un bord a l'autre au-dessus des deux colonnes. */
.mf-infos-sous-galerie > div {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (min-width: 768px) {
    /* La colonne d'achat cesse de descendre sur la seconde rangee, qui devient
       pleine largeur. */
    .mf-fiche-grille > .mf-colonne-infos      { grid-row: 1; }
    .mf-fiche-grille > .mf-infos-sous-galerie {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 3rem;
        align-items: start;
    }
    /* Si la piece n'a ni couleur ni matiere renseignee, le bloc restant
       occupe toute la largeur plutot que de laisser une moitie vide. */
    .mf-infos-sous-galerie > div:only-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .mf-fiche-grille > .mf-infos-sous-galerie { gap: 0 6rem; }
}

/* La carte n'a plus que deux niveaux : le modele, puis le tissu qui identifie
   l'exemplaire. Le modele monte donc d'un cran en presence. */
.mf-carte .mf-titre-modele {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(45, 45, 45, .48);
    margin-bottom: .3rem;
}
@media (min-width: 768px) { .mf-carte .mf-titre-modele { font-size: 11px; } }

/* =========================================================
   ACCUEIL : une vraie barre, pas un voile
   =========================================================
   L'en-tete de l'accueil flottait, transparent, sur la photo du hero :
   selon la piece photographiee le menu passait sur du jaune vif ou du
   blanc et devenait illisible. On lui donne le meme fond creme que sur
   toutes les autres pages — le menu est enfin pose sur quelque chose.

   Pour que cette barre ne se fonde pas dans les blancs qui suivent
   (le bandeau de pieces juste sous le hero est lui aussi tres clair),
   un filet terracotta tres fin la souligne : il marque la limite sans
   ajouter de gris. */

body.home #site-header {
    background-color: rgba(249, 248, 244, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 -1px 0 rgba(200, 127, 104, .28);
}

/* Le menu et les icones gagnent un cran de presence : vert foret plutot
   que gris, et un trait un peu plus assure. */
body.home #site-header nav a,
body.home #site-header .mille-fleurs-cart-wrapper a {
    color: #1A3C34;
    font-weight: 600;
}

/* Le mot « Couture » sous le logo etait pose en terracotta clair sur la
   photo : illisible. Sur le fond creme, il redevient un vrai sous-titre. */
body.home #site-header .text-terracotta { color: #B36A52; }

@media (prefers-reduced-transparency: reduce) {
    body.home #site-header { background-color: #F9F8F4; }
}

/* =========================================================
   TERRACOTTA SUR FOND SOMBRE
   =========================================================
   Le terracotta de marque (#C87F68) est parfait sur creme, mais pose sur
   le vert foret du pied de page il ne donne que 2,33:1 — la norme demande
   4,5:1. On ne change pas la couleur de marque : on lui adjoint une
   version eclaircie, reservee aux fonds sombres. Le pied de page et
   toute future section foret la prennent automatiquement. */

:root { --color-terracotta-clair: #E9A98F; }

/* On vise la classe exacte, pas une sous-chaine : « [class*=text-terracotta] »
   attrapait aussi « hover:text-terracotta » et coloriait au repos toute la
   liste de liens, qui doit rester creme. */
footer .text-terracotta,
.bg-forest .text-terracotta {
    color: var(--color-terracotta-clair);
}
footer a:hover, .bg-forest a:hover { color: var(--color-terracotta-clair); }

/* Les bordures et fonds terracotta du pied de page suivent le meme
   eclaircissement, sinon le survol des ronds sociaux devient illisible. */
footer .hover\:bg-terracotta:hover,
.bg-forest .hover\:bg-terracotta:hover {
    background-color: var(--color-terracotta-clair);
    border-color: var(--color-terracotta-clair);
    color: #1A3C34;
}

/* =========================================================
   FICHE PRODUIT : l'etat « deja au panier »
   =========================================================
   Le bouton principal devenait gris clair — donc illisible comme etat, et
   confondu avec un bouton desactive. Il cede maintenant la place a une
   confirmation et a l'action suivante ; « retirer » devient un lien. */

.mf-piece-reservee {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    padding: .7rem .9rem;
    background: rgba(26, 60, 52, .06);
    border-left: 2px solid #1A3C34;
    font-family: "DM Sans", sans-serif;
    font-size: .875rem;
    line-height: 1.4;
    color: #1A3C34;
}
.mf-piece-reservee svg { flex: none; color: #1A3C34; }

.mf-lien-retirer {
    display: block;
    width: 100%;
    margin-top: .9rem;
    padding: .6rem 0;              /* la zone tactile atteint 44 px */
    background: none;
    border: 0;
    font-family: "DM Sans", sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #5B6A63;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(91, 106, 99, .35);
    cursor: pointer;
    transition: color .2s ease;
}
.mf-lien-retirer:hover { color: #C87F68; text-decoration-color: #C87F68; }
.mf-lien-retirer:disabled { opacity: .5; cursor: not-allowed; }

/* =========================================================
   FICHE PRODUIT : les vignettes dans un cadre unique
   =========================================================
   Le bouton portait bien un rapport 3/4, mais la feuille de WooCommerce
   impose « img { height: auto } » : l'image gardait donc sa proportion
   d'origine et une photo paysage laissait un trou dans la rangee.
   On force ici le remplissage du cadre, cadrage centre. */

.mf-vignettes-galerie button { position: relative; }
.mf-vignettes-galerie img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

/* La mesure, posee a cote du prix : c'est la reponse a « est-ce que ce sac
   est assez grand ? », la question qui precede toutes les autres. */
.mf-mesure-prix {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: "DM Sans", sans-serif;
    font-size: .8125rem;
    letter-spacing: .01em;
    color: #5B6A63;
    white-space: nowrap;
}
.mf-mesure-prix svg { flex: none; color: #C87F68; }
.mf-mesure-fond { color: #8A928C; }

/* =========================================================
   PANIER : la ligne d'article
   =========================================================
   « Retirer l'article » faisait 9 px en terracotta clair sous le titre :
   difficile a lire, impossible a viser au doigt. */

.mf-panier-retirer {
    display: inline-block;
    margin-top: .6rem;
    padding: .95rem 0;              /* la zone tactile atteint 44 px */
    font-family: "DM Sans", sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5B6A63;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(91, 106, 99, .35);
    transition: color .2s ease;
}
.mf-panier-retirer:hover { color: #C87F68; text-decoration-color: #C87F68; }

/* Le prix de la ligne se cale a droite de la colonne. On passe par une
   classe maison : « md:justify-end » n'existe pas dans le CSS compile du
   theme, et une utilitaire absente echoue en silence. */
.mf-panier-total {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 1rem;
}
@media (min-width: 768px) {
    .mf-panier-total { width: 50%; justify-content: flex-end; }
}

/* =========================================================
   CARTES : la deuxieme photo au survol
   =========================================================
   Chaque piece a trois a cinq photos, dont une de la doublure ou du dos.
   La montrer au survol offre un second argument sans rien ajouter en base.
   Reserve aux appareils qui ont un vrai survol : sur ecran tactile, un
   « hover » se declenche au premier appui et masque la photo principale. */

.mf-carte-seconde {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .mf-carte-seconde { transition: opacity .45s ease, transform .7s ease; }
    .group:hover > div > a > .mf-carte-seconde,
    .group:hover .mf-carte-seconde { opacity: 1; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .mf-carte-seconde { transition: opacity .2s ease; transform: none !important; }
}

/* La mesure sous le prix : la reponse a « est-ce que c'est assez grand ? »
   avant meme d'ouvrir la fiche. */
.mf-carte-mesure {
    display: block;
    margin-top: .15rem;
    font-family: "DM Sans", sans-serif;
    font-size: .75rem;
    letter-spacing: .01em;
    color: #8A928C;
}

/* =========================================================
   FORMULAIRE DE CONTACT : rendre les champs visibles
   =========================================================
   Les champs n'etaient qu'un filet d'un pixel sur fond vert fonce : on ne
   voyait pas ou cliquer, et le texte d'aide etait trop pale pour se lire.
   On leur donne une surface, une bordure franche et un etat de focus net.

   Les libelles portent la classe « sr-only » (heritee d'un patron ou seul
   le texte fantome devait rester visible). Cette classe n'existe pas dans
   le CSS compile du theme, donc les libelles s'affichent — et c'est tant
   mieux : un libelle visible vaut toujours mieux qu'un texte fantome, qui
   disparait des qu'on commence a taper. On assume donc l'affichage et on
   l'habille correctement. */

.wpcf7 label {
    display: block;
    margin-bottom: .35rem;
    font-family: "DM Sans", sans-serif;
    font-size: .8125rem;
    font-weight: 500;
    color: #F9F8F4;
}

.wpcf7 .cf-input,
.wpcf7 .cf-textarea {
    width: 100%;
    min-height: 48px;                       /* zone tactile confortable */
    padding: .7rem .85rem;
    background: rgba(249, 248, 244, .10);
    border: 1px solid rgba(249, 248, 244, .38);
    border-radius: 2px;
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;                        /* 16 px : pas de zoom sur iOS */
    color: #F9F8F4;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.wpcf7 .cf-textarea { min-height: 9rem; resize: vertical; }

.wpcf7 .cf-input::placeholder,
.wpcf7 .cf-textarea::placeholder {
    color: rgba(249, 248, 244, .68);
    opacity: 1;
}

.wpcf7 .cf-input:hover,
.wpcf7 .cf-textarea:hover { border-color: rgba(249, 248, 244, .55); }

.wpcf7 .cf-input:focus,
.wpcf7 .cf-textarea:focus {
    outline: none;
    background: rgba(249, 248, 244, .16);
    border-color: #E9A98F;
    box-shadow: 0 0 0 2px rgba(233, 169, 143, .40);
}

/* La mention des champs obligatoires etait a 60 % d'opacite : illisible. */
.wpcf7 .text-cream\/60 { color: rgba(249, 248, 244, .82); }

/* Les messages d'erreur de Contact Form 7 sur fond sombre. */
.wpcf7 .wpcf7-not-valid-tip {
    margin-top: .35rem;
    font-family: "DM Sans", sans-serif;
    font-size: .8125rem;
    color: #F5B7A0;
}
.wpcf7 .cf-input.wpcf7-not-valid,
.wpcf7 .cf-textarea.wpcf7-not-valid { border-color: #F5B7A0; }

.wpcf7 .cf-submit { min-height: 52px; cursor: pointer; }

/* L'obligation ecrite en toutes lettres plutot qu'en asterisque : elle
   reste lisible quand le champ est rempli, et se dit a voix haute par un
   lecteur d'ecran. */
.mf-obligatoire,
.mf-facultatif {
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: lowercase;
}
.mf-obligatoire { color: #F2C7B4; }
.mf-facultatif  { color: rgba(249, 248, 244, .60); }

.mf-contact-promesse {
    margin-bottom: 1.25rem;
    font-family: "DM Sans", sans-serif;
    font-size: .875rem;
    color: rgba(249, 248, 244, .82);
}

/* =========================================================
   ACCUEIL : donner un rythme aux sections
   =========================================================
   Les six sections avaient toutes le meme espacement vertical et le meme
   fond clair : 3 550 pixels de couloir. Trois respirations differentes et
   un fond sombre au milieu suffisent a donner la sensation d'avancer.
   Ces classes remplacent des utilitaires Tailwind car toutes ne sont pas
   presentes dans le CSS compile du theme. */

.mf-rythme-serre  { padding-block: 2.25rem; }
.mf-rythme-normal { padding-block: 4rem; }
.mf-rythme-ample  { padding-block: 6rem; }

@media (min-width: 768px) {
    .mf-rythme-serre  { padding-block: 3rem; }
    .mf-rythme-normal { padding-block: 5.5rem; }
    .mf-rythme-ample  { padding-block: 9rem; }
}

/* La section des avis passe en vert foret : c'est la pause visuelle qui
   manquait entre le bandeau de pieces et le flux Instagram. Les cartes
   blanches y gagnent, elles se detachent au lieu de flotter sur du creme. */
.mf-section-sombre {
    background-color: #1A3C34;
    border-top-color: rgba(249, 248, 244, .10) !important;
}
.mf-section-sombre h2 { color: #F9F8F4; }
.mf-section-sombre h2 .italic,
.mf-section-sombre .text-terracotta { color: var(--color-terracotta-clair); }
.mf-section-sombre .text-terracotta.h-px,
.mf-section-sombre .bg-terracotta { background-color: var(--color-terracotta-clair); }
.mf-section-sombre .text-charcoal\/50 { color: rgba(249, 248, 244, .72); }

/* Le second bouton du hero etait un lien de 17 px de haut : cliquable a la
   souris, difficile au pouce. Le soulignement ne bouge pas, seule la zone
   sensible grandit. */
.mf-lien-secondaire {
    display: inline-block;
    padding-block: .85rem;              /* la zone atteint 44 px */
}

/* Le decor de l'accueil parle desormais couture : point de piqure, fil de
   bati, bord crante a la roulette. Meme place et meme flottement qu'avant. */
.animate-float-slow svg,
.animate-float-reverse svg,
.animate-float-slower svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
    .animate-float-slow,
    .animate-float-reverse,
    .animate-float-slower { animation: none !important; }
}

/* =========================================================
   CARTES : le tissu ne doit jamais se faire couper
   =========================================================
   Le titre entier etait limite a trois lignes. Sur les cartes etroites du
   bandeau d'accueil (138 px), un nom de modele long — « Trousse
   rectangulaire / de maquillage » — occupait ces trois lignes a lui seul
   et poussait le nom du tissu hors du cadre : la piece perdait ce qui la
   distingue de ses voisines.

   On limite donc chaque niveau separement. Le modele tient sur deux lignes
   au plus, le tissu sur deux lignes toujours visibles. Le nom complet reste
   dans l'infobulle du lien. */

.mf-carte .mf-titre {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    min-height: 0;
}

.mf-carte .mf-titre-modele,
.mf-carte .mf-titre-tissu {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mf-carte .mf-titre-modele { -webkit-line-clamp: 2; }
.mf-carte .mf-titre-tissu  { -webkit-line-clamp: 2; }