/* ==========================================================================
   58m — Accueil V1c (index2026)
   --------------------------------------------------------------------------
   Feuille dediee a la nouvelle home. Chargee APRES main.css et entierement
   portee par le scope body.v2026 : la prod n'est jamais impactee, et le
   surcroit de specificite permet de reprendre la main sur les regles
   !important heritees de main.css.

   Reference : docs/58M - Maquette accueil V1c - PDF horizontal.pdf
   Viewport de reference : 1440 px. Toutes les tailles du cahier des
   charges sont exprimees a cette largeur.
   ========================================================================== */

.v2026 {
    /* couleurs relevees sur la maquette */
    --v-blanc:  #ffffff;
    --v-encre:  #000000;
    --v-noir:   #161616;  /* bandeau de reassurance */
    --v-panneau:#eeede9;  /* panneau « La collection » */
    --v-tuile:  #efeeec;  /* fond des packshots et des fiches produit */
    --v-trait:  #d8d8d6;

    /* largeur du contenu et gouttiere */
    --v-contenu: 1180px;
    --v-marge:   32px;
    --v-gout:    8px;
}

/* --------------------------------------------------------------------------
   Socle
   -------------------------------------------------------------------------- */

/* La police de secours demandee (Helvetica/Arial) manquait dans main.css,
   qui s'arretait a `sans-serif`. Le !important bat `body, html` de main.css. */
body.v2026,
body.v2026 input,
body.v2026 button {
    font-family: "Archivo", Helvetica, Arial, sans-serif !important;
}
/* Elements qui imposent leur propre police : champs, infobulles Bootstrap,
   notifications jquery.notify (Helvetica) et toaster (police systeme). */
body.v2026 select,
body.v2026 textarea,
body.v2026 .tooltip,
body.v2026 .popover,
body.v2026 .notify,
body.v2026 .toaster {
    font-family: "Archivo", Helvetica, Arial, sans-serif !important;
}
body.v2026 {
    background-color: var(--v-blanc);
    color: var(--v-encre);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Remises a zero propres a la HOME. Les pages interieures (body.v2026-interieur)
   chargent aussi cette feuille pour le menu, le pied de page et la typo : ces
   regles y casseraient les boutons Bootstrap (.btn-dark...) et les images en ligne. */
body.v2026:where(:not(.v2026-interieur)) input,
body.v2026:where(:not(.v2026-interieur)) button {
    background-color: var(--v-blanc);
    color: var(--v-encre);
    margin: 0;
}
.v2026:where(:not(.v2026-interieur)) img { display: block; max-width: 100%; }
.v2026:where(:not(.v2026-interieur)) a   { color: inherit; text-decoration: none; }

/* menu et pied de page : memes remises a zero, sur toutes les pages */
.v2026 .v-nav img, .v2026 .v-footer img { display: block; max-width: 100%; }
.v2026 .v-nav a, .v2026 .v-footer a { color: inherit; text-decoration: none; }
.v2026 .v-nav button { margin: 0; }

/* reserve la hauteur du menu fixe sur les pages ou il etait dans le flux */
.v2026 .v-nav-espace { height: 78px; }
@media (max-width: 575px) { .v2026 .v-nav-espace { height: 76px; } }

/* Elements typographiques partages -------------------------------------- */

/* surtitres : 11px lettres espacees, casse du texte conservee */
.v2026 .v-surtitre {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.16em;     /* aligne sur nav, boutons, legendes (etait 0.18em) */
    /* pas de capitales forcees : le texte s affiche tel que saisi (« 58m, Paris ») */
    margin: 0 0 18px;
}

/* Les grands titres sont en graisse 300 (cahier des charges §3) */
.v2026 .v-titre-ouverture,
.v2026 .v-nature__titre,
.v2026 .v-titre-selection,
.v2026 .v-titre-collection {
    font-weight: 300;
    line-height: 1.12;
    margin: 0;
}

/* bouton pilule noir, libelle 11px */
.v2026 .v-btn {
    display: inline-block;
    background: var(--v-encre);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 15px 38px;
    border-radius: 999px;
    transition: opacity .25s;
}
.v2026 .v-btn:hover { opacity: .82; color: #fff; }

/* --------------------------------------------------------------------------
   Navigation (maquette p.1)
   -------------------------------------------------------------------------- */

.v2026 .v-nav {
    position: fixed;   /* suit le defilement de la page */
    top: 0; left: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px var(--v-marge);
    box-sizing: border-box;
    transition: background-color .3s, padding .3s, box-shadow .3s;
}

/* Des que la page defile (classe posee par v2026.js) : fond clair pour
   rester lisible au-dessus de n'importe quel bloc, et nav plus compacte. */
.v2026 .v-nav--defile {
    background: var(--v-blanc);
    padding-top: 14px;
    padding-bottom: 14px;
    box-shadow: 0 1px 0 var(--v-trait);
}

/* Le logo est une image PNG, pas une police (cahier des charges §3). */
.v2026 .v-nav__logo img { width: 92px; height: auto; }

.v2026 .v-nav__menu,
.v2026 .v-nav__icons {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.v2026 .v-nav__menu { gap: 42px; }
.v2026 .v-nav__menu a {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}
.v2026 .v-nav__menu a:hover { border-bottom-color: currentColor; }

.v2026 .v-nav__icons { gap: 18px; }
.v2026 .v-nav__icons a { position: relative; display: block; }
.v2026 .v-nav__icons .feather { width: 17px; height: 17px; }

/* bouton du menu mobile : affiche sous 900px seulement */
.v2026 .v-nav__burger { display: none; }
.v2026 .v-nav__burger button {
    display: grid;
    place-items: center;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

/* Le visuel d'ouverture de la V1c est clair : la navigation reste noire.
   main.css force `a.navbar-brand, .icons a { color:#fff !important }` — ces
   selecteurs ne s'appliquent pas ici, la nav V1c ayant ses propres classes. */
.v2026 .v-nav,
.v2026 .v-nav a { color: var(--v-encre); }

/* A poser sur .v-nav si l'on repasse un jour sur un visuel sombre. */
.v2026 .v-nav--claire,
.v2026 .v-nav--claire a { color: #fff; }
.v2026 .v-nav--claire .v-nav__logo img { filter: invert(1); }

/* --------------------------------------------------------------------------
   Visuel d'ouverture (maquette p.1)
   -------------------------------------------------------------------------- */

.v2026 .v-hero { position: relative; }

/* bouton du hero -> ancre #selection : defilement doux (sauf mouvement reduit) */
html:has(body.v2026) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(body.v2026) { scroll-behavior: auto; } }
.v2026 .v-hero picture,
.v2026 .v-galerie picture { display: block; }

.v2026 .v-hero__img {
    width: 100%;
    /* Image affichee sur toute sa hauteur, sans aucun recadrage (hauteur = largeur x 9/16). */
    display: block;
    height: auto;
}

/* Cartouche aligne en bas a DROITE (et non centre comme en prod). */
.v2026 .v-hero__cartouche {
    position: absolute;
    right: 6%;     /* decolle du bord droit (etait 32px) */
    bottom: calc(20% - 20px);    /* remonte (etait 7%) */
    text-align: right;
    max-width: 46%;
}

.v2026 .v-titre-ouverture {
    font-size: 54px;
    margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   Introduction editoriale (maquette p.2)
   -------------------------------------------------------------------------- */

.v2026 .v-intro {
    max-width: 760px;
    margin: 0 auto;
    padding: 120px var(--v-marge) 96px;
    text-align: center;
}

.v2026 .v-intro__texte {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Bloc « Nature morte » (maquette p.2/3)
   -------------------------------------------------------------------------- */

.v2026 .v-nature {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--v-gout);
    max-width: var(--v-contenu);
    margin: 0 auto;
    padding: 0 var(--v-marge);
    box-sizing: border-box;
}

.v2026 .v-nature__grande { position: relative; display: block; }
.v2026 .v-nature__grande img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* titre incruste, blanc, en bas a gauche */
.v2026 .v-nature__titre {
    position: absolute;
    left: 40px;
    bottom: 34px;
    font-size: 38px;
    color: #fff;
}

.v2026 .v-nature__cote {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--v-gout);
}

/* le packshot remplit tout le cadre ; la legende est posee en bas, par-dessus */
.v2026 .v-packshot {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--v-tuile);
}
.v2026 .v-packshot__img { position: absolute; inset: 0; }
.v2026 .v-packshot__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

/* legende 11px capitales, centree en bas du packshot */
.v2026 .v-packshot__legende {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    padding: 0 12px 26px;
}

/* --------------------------------------------------------------------------
   Carrousel « La selection » (maquette p.3)
   -------------------------------------------------------------------------- */

.v2026 .v-selection {
    max-width: var(--v-contenu);
    margin: 0 auto;
    padding: 110px var(--v-marge) 0;
    box-sizing: border-box;
}

.v2026 .v-selection__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
}

.v2026 .v-titre-selection { font-size: 30px; }

.v2026 .v-selection__fleches { display: flex; gap: 12px; }

/* fleches rondes en haut a droite (en prod elles sont hors du bloc) */
.v2026 .v-fleche {
    width: 42px;
    height: 42px;
    border: 1px solid var(--v-trait);
    border-radius: 50%;
    background: transparent;
    color: var(--v-encre);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s, opacity .2s;
}
.v2026 .v-fleche:hover  { border-color: var(--v-encre); }
.v2026 .v-fleche[disabled] { opacity: .3; cursor: default; }

/* piste a defilement horizontal : pas de dependance a slick, donc aucun
   risque de collision avec l'initialisation globale `.slider` de la prod. */
.v2026 .v-selection__piste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--v-gout)) / 4.3);
    gap: var(--v-gout);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.v2026 .v-selection__piste::-webkit-scrollbar { display: none; }

.v2026 .v-fiche { scroll-snap-align: start; }

.v2026 .v-fiche__img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v-tuile);
    aspect-ratio: 1 / 1;
    overflow: hidden;           /* le produit remplit tout le cadre (zoom au survol contenu) */
    margin-bottom: 14px;
}
.v2026 .v-fiche__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform .4s;
}
.v2026 .v-fiche:hover .v-fiche__img img { transform: scale(1.04); }

/* nom a gauche, marque a droite, 11px capitales */
.v2026 .v-fiche__ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.16em;     /* aligne sur les autres capitales 11px (etait 0.12em) */
    text-transform: uppercase;
}
.v2026 .v-fiche__nom    { font-weight: 600; }

/* la marque s'ecrit « 58m » en minuscules, meme dans les libelles en capitales */
.v2026 .v-marque { text-transform: none; }
.v2026 .v-fiche__marque { font-weight: 400; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Bloc « La collection » (maquette p.4)
   -------------------------------------------------------------------------- */

.v2026 .v-collection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 130px;
}

.v2026 .v-collection__visuel img {
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
}

.v2026 .v-collection__panneau {
    background: var(--v-panneau);
    display: flex;
    align-items: center;
    padding: 60px 8%;
}

.v2026 .v-titre-collection {
    font-size: 44px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.v2026 .v-collection__texte {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 34px;
}

/* --------------------------------------------------------------------------
   Bandeau de 4 images (maquette p.5)
   -------------------------------------------------------------------------- */

.v2026 .v-galerie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}
.v2026 .v-galerie__vue img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: opacity .3s;
}
.v2026 .v-galerie__vue:hover img { opacity: .9; }

/* --------------------------------------------------------------------------
   Bandeau noir de reassurance (maquette p.5)
   -------------------------------------------------------------------------- */

.v2026 .v-reassurances {
    background: var(--v-noir);
    color: #fff;
    padding: 86px var(--v-marge);
}

.v2026 .v-reassurances__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: var(--v-contenu);
    margin: 0 auto;
    text-align: center;
}

.v2026 .v-reassurances__titre {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 0 0 24px;
}

.v2026 .v-reassurances__texte {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Pied de page (maquette p.6) — 12px
   -------------------------------------------------------------------------- */

.v2026 .v-footer {
    max-width: var(--v-contenu);
    margin: 0 auto;
    padding: 64px var(--v-marge) 90px;
    font-size: 12px;
    line-height: 1.7;
    box-sizing: border-box;
}

.v2026 .v-footer__logo { text-align: center; margin-bottom: 40px; }
.v2026 .v-footer__logo img { width: 128px; height: auto; margin: 0 auto; }

.v2026 .v-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
}
.v2026 .v-footer__col {
    border-top: 1px solid var(--v-encre);
    padding-top: 16px;
    margin-bottom: 34px;
}
.v2026 .v-footer__col p { margin: 0 0 14px; }
.v2026 .v-footer__col a:hover { text-decoration: underline; }
.v2026 .v-footer__cols--bas .v-footer__col--vide { border-top: 0; }

/* newsletter — champ et bouton pleine largeur, bouton noir lisible */
.v2026 .v-footer .newsletter input {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--v-encre);
    border-radius: 999px;
    padding: 12px 16px;
    text-align: center;
    font-size: 12px;
    margin-bottom: 8px;
}
.v2026 .v-footer .newsletter input::placeholder { color: rgba(0,0,0,.45); }
.v2026 .v-footer .newsletter .button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--v-encre);
    color: #fff;
    border-radius: 999px;
    padding: 12px 16px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Adaptations
   --------------------------------------------------------------------------
   Tablette (576-1200px) : degradation raisonnable de la V1c desktop.
   Mobile (575px et moins) : maquette V1c Mobile M1 (docs/index-mobile.html,
   01.10.2026).
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .v2026 .v-titre-ouverture  { font-size: 44px; }
    .v2026 .v-titre-collection { font-size: 36px; }
    .v2026 .v-nature__titre    { font-size: 32px; }
    .v2026 .v-intro__texte     { font-size: 20px; }
    .v2026 .v-titre-selection  { font-size: 26px; }
    .v2026 .v-selection__piste { grid-auto-columns: calc((100% - 2 * var(--v-gout)) / 3.3); }
}

@media (max-width: 900px) {
    .v2026 .v-nav__menu { display: none; }
    .v2026 .v-nav__burger { display: block; }
    .v2026 .v-nature,
    .v2026 .v-collection { grid-template-columns: 1fr; }
    .v2026 .v-nature__cote { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .v2026 .v-packshot { aspect-ratio: 1 / 1; }
    .v2026 .v-collection__visuel img { min-height: 0; aspect-ratio: 4 / 3; }
    .v2026 .v-galerie { grid-template-columns: repeat(2, 1fr); }
    .v2026 .v-reassurances__grille { grid-template-columns: 1fr; gap: 48px; }
    .v2026 .v-footer__cols { grid-template-columns: 1fr; gap: 0; }
    .v2026 .v-footer__cols--bas .v-footer__col--vide { display: none; }
}

/* ---- Mobile : maquette V1c Mobile M1 ------------------------------------ */
@media (max-width: 575px) {
    .v2026 { --v-marge: 18px; }

    /* boutons : cible tactile de 44px, libelle 10px */
    .v2026 .v-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        box-sizing: border-box;
        padding: 15px 22px;
        font-size: 10px;
        letter-spacing: 0.14em;
    }
    .v2026 .v-surtitre { font-size: 10px; }

    /* navigation : bandeau beige au-dessus de la photo (plus en surimpression).
       Compte et favoris disparaissent ; restent panier, recherche et menu. */
    .v2026 .v-nav,
    .v2026 .v-nav--defile {
        position: fixed;
        height: 76px;
        padding: 18px 16px;
        background: var(--v-panneau);
    }
    .v2026 .v-nav__logo img { width: 76px; }
    .v2026 .v-nav__compte,
    .v2026 .v-nav__favoris { display: none; }
    .v2026 .v-nav__icons { gap: 6px; }
    .v2026 .v-nav__icons a { margin: 0 5px; }
    .v2026 .v-nav__icons .feather { width: 20px; height: 20px; }
    .v2026 .v-nav__burger button { width: 44px; height: 44px; }
    .v2026 .v-nav__burger .feather { width: 22px; height: 22px; }

    /* ouverture : nav, photo entiere, puis le texte dessous sur fond beige.
       La nav suit la photo dans le HTML : on la remonte avec order. */
    .v2026 .v-hero { display: flex; flex-direction: column; background: var(--v-panneau); padding-top: 76px; /* place de la nav fixe */ }
    .v2026 .v-hero .v-nav { order: -1; }
    .v2026 .v-hero__cartouche {
        position: static;
        max-width: none;
        text-align: left;
        padding: 30px 22px 36px;
    }
    .v2026 .v-hero__cartouche .v-surtitre { margin-bottom: 12px; }
    .v2026 .v-titre-ouverture { font-size: 38px; line-height: 1.1; margin-bottom: 24px; }

    /* introduction */
    .v2026 .v-intro { padding: 62px 24px 46px; }
    .v2026 .v-intro__texte { font-size: 18px; font-weight: 300; line-height: 1.55; }
    .v2026 .v-intro__texte br { display: none; }

    /* 3 bottes + 2 packshots : packshots carres, legende SOUS l'image */
    .v2026 .v-nature { padding: 0 12px; gap: 12px; }
    .v2026 .v-nature__cote { gap: 10px; }
    .v2026 .v-packshot { aspect-ratio: auto; overflow: visible; background: #fff; }
    .v2026 .v-packshot__img {
        position: relative;
        inset: auto;
        display: block;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--v-tuile);
    }
    .v2026 .v-packshot__legende {
        position: static;
        text-align: left;
        padding: 12px 3px 0;
        font-size: 9px;
        letter-spacing: 0.08em;
        line-height: 1.5;
    }

    /* la selection : fiches a 78% de large, fleches conservees */
    .v2026 .v-selection { max-width: none; padding: 68px 0 62px; }
    /* la nav fixe (76px) masquerait le titre a l'arrivee sur l'ancre */
    .v2026 .v-selection { scroll-margin-top: 40px; }
    .v2026 .v-selection__entete { padding: 0 20px; margin-bottom: 22px; }
    .v2026 .v-titre-selection { font-size: 26px; }
    .v2026 .v-selection__fleches { gap: 6px; }
    .v2026 .v-fleche { width: 44px; height: 44px; font-size: 18px; }
    .v2026 .v-selection__piste {
        grid-auto-columns: 78%;
        gap: 12px;
        padding: 0 20px;
        scroll-padding: 0 20px;
    }
    .v2026 .v-fiche__ligne { gap: 10px; line-height: 1.5; font-size: 10px; letter-spacing: 0.09em; }
    .v2026 .v-fiche__nom    { font-weight: 500; }
    .v2026 .v-fiche__marque { color: #777; }

    /* la collection : image 4:5 puis panneau texte */
    .v2026 .v-collection { margin-top: 0; }
    .v2026 .v-collection__visuel img { aspect-ratio: 4 / 5; min-height: 0; }
    .v2026 .v-collection__panneau { padding: 36px 24px 42px; }
    .v2026 .v-collection .v-surtitre { margin-bottom: 16px; }
    .v2026 .v-titre-collection { font-size: 30px; letter-spacing: 0.07em; margin-bottom: 20px; }
    .v2026 .v-collection__texte { margin-bottom: 26px; }

    /* bandeau 4 images : 2 colonnes, photos portrait non recadrees */
    .v2026 .v-galerie { padding: 10px; gap: 10px; align-items: start; }
    .v2026 .v-galerie__vue img { aspect-ratio: auto; height: auto; object-fit: contain; }

    /* reassurances : une seule carte encadree, textes compacts */
    .v2026 .v-reassurances { padding: 28px 18px; }
    .v2026 .v-reassurances__grille {
        grid-template-columns: 1fr;
        gap: 10px;
        border: 1px solid #444;
        padding: 20px 18px;
    }
    .v2026 .v-reassurances__titre { font-size: 12px; letter-spacing: 0.12em; line-height: 1.35; margin-bottom: 5px; }
    .v2026 .v-reassurances__titre br { display: none; }
    .v2026 .v-reassurances__texte { font-size: 11px; line-height: 1.5; color: #d8d8d8; }

    /* pied de page */
    .v2026 .v-footer { padding: 46px 24px 28px; font-size: 13px; line-height: 1.8; }
    .v2026 .v-footer__logo { margin-bottom: 36px; }
    .v2026 .v-footer__logo img { width: 88px; }
    .v2026 .v-footer__cols { gap: 26px; }
    .v2026 .v-footer__cols--bas { margin-top: 26px; }
    .v2026 .v-footer__col { margin-bottom: 0; padding-top: 16px; }
    /* 16px : evite le zoom automatique d'iOS a la saisie */
    .v2026 .v-footer .newsletter input { font-size: 16px; padding: 12px 16px; min-height: 44px; }
    .v2026 .v-footer .newsletter .button { padding: 14px; }
}

@media (max-width: 350px) {
    .v2026 .v-nav { padding: 14px 12px; }
    .v2026 .v-titre-ouverture { font-size: 34px; }
    .v2026 .v-selection__entete { padding: 0 14px; }
    .v2026 .v-selection__piste { padding: 0 14px; scroll-padding: 0 14px; grid-auto-columns: 84%; }
    .v2026 .v-packshot__legende { letter-spacing: 0.02em; }
}

/* ---- Menu mobile (offcanvas partage avec la prod), facon maquette M1 ---- */
@media (max-width: 900px) {
    /* .offcanvas.offcanvas-start : doit battre le fond blanc pose plus bas (briques prod) */
    .v2026 .offcanvas.offcanvas-start { background-color: var(--v-panneau); }
    .v2026 .offcanvas-header { padding: 22px 24px; margin-bottom: 28px; }
    .v2026 .offcanvas-title img { width: 76px; height: auto; }
    .v2026 .offcanvas .btn-close {
        width: 44px;
        height: 44px;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid var(--v-encre);
        border-radius: 50%;
        background-size: 12px;
        opacity: 1;
    }
    .v2026 .offcanvas-body { padding: 0 24px 24px; }
    .v2026 .offcanvas .navPrincipal { font-size: 16px; }
    .v2026 .offcanvas .navPrincipal li { margin: 0; }
    .v2026 .offcanvas .navPrincipal > li > a.nav-link {
        display: block;
        padding: 19px 0;
        border-bottom: 1px solid #ccc5bd;
        font-size: 16px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
    /* sous-menu de Shop (soldes, chaussures, sacs...) */
    .v2026 .offcanvas .navPrincipal ul { list-style: none; margin: 0; padding: 6px 0 10px; border-bottom: 1px solid #ccc5bd; }
    .v2026 .offcanvas .navPrincipal ul a.nav-link {
        padding: 9px 0 9px 14px;
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
}
@media (max-width: 575px) {
    .v2026 .offcanvas.offcanvas-start { width: 100%; border-right: 0; }
}

/* focus clavier visible (maquette M1) */
.v2026 :focus-visible { outline: 2px solid var(--v-encre); outline-offset: 4px; }

/* ==========================================================================
   Briques fonctionnelles reutilisees de la prod
   --------------------------------------------------------------------------
   La recherche, le panier, l'offcanvas, la modale et les toasts sont des
   includes partages avec la prod. Leurs regles ne vivent PAS dans main.css
   mais dans le bloc <style> inline de front22/layouts/main.blade.php, que
   ce layout ne reprend pas. Sans elles :
     - .search s'affichait en bas de page, faute de position/display ;
     - .displaynone ne masquait plus rien dans le panier ;
     - les liens du menu mobile heritaient de [data-color] (jaune sur blanc) ;
     - le panier et l'offcanvas perdaient leur fond blanc.
   On les porte ici, dans la palette V1c.
   ========================================================================== */

/* utilitaire attendu par le panier (qteMinus/qtePlus, lignes masquees) */
.v2026 .displaynone { display: none; }

/* fonds des panneaux lateraux */
.v2026 .offcanvas-start,
.v2026 #cart { background-color: #fff; }

/* Menu mobile : main.css colore les liens via [data-color] (jaune, vert...)
   en !important, illisible sur fond blanc. En prod c'est la boucle
   menuColors du layout qui reprend la main ; ici on fixe le noir V1c. */
.v2026 .offcanvas .navPrincipal a.nav-link,
.v2026 .offcanvas .navPrincipal a.nav-link[data-color] { color: var(--v-encre) !important; }

/* pastilles d'etat panier / compte dans la navigation */
.v2026 i.cart1,
.v2026 i.user1 {
    position: absolute;
    right: 2px;
    top: 0;
    height: 7px;
    width: 7px;
    border-radius: 50%;
    display: inline-block;
    z-index: 9;
}
.v2026 i.cart1 { background: #e35205; }
.v2026 i.user1 { background: #90d31a; }

/* prix barre (panier, promotions) */
.v2026 .strikethrough { position: relative; }
.v2026 .strikethrough:before {
    position: absolute;
    content: "";
    left: 0; right: 0; top: 50%;
    border-top: 1px solid currentColor;
    transform: rotate(-10deg);
}

.v2026 .toaster { border-radius: 999px; padding: .5em 1.3em; font-size: 12px; }

/* --------------------------------------------------------------------------
   Surcouche de recherche
   --------------------------------------------------------------------------
   Masquee par defaut : .open est posee par le layout au clic sur la loupe.
   Passee en position:fixed (la prod utilise absolute, donc l'overlay ne
   couvrait que la premiere hauteur de page) et dans la palette V1c.
   -------------------------------------------------------------------------- */

.v2026 .search {
    position: fixed;
    inset: 0;
    display: none;
    opacity: 0;
    z-index: -1;
    background: var(--v-noir);
    text-align: center;
    transition: opacity .35s;
}
.v2026 .search.open {
    display: grid;
    opacity: 1;
    z-index: 2000;
}

.v2026 .search button.close {
    position: absolute;
    top: 24px;
    right: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    outline: none;
    appearance: none;
    width: 26px;
    opacity: .8;
    cursor: pointer;
}
.v2026 .search button.close:hover { opacity: 1; }
.v2026 .search button.close img { width: 26px; height: auto; }

.v2026 .search .input { margin: auto; width: min(760px, 84vw); }
.v2026 .search .input input {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.5);
    outline: none;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    text-align: center;
    padding-bottom: 14px;
}
.v2026 .search .input button.submit {
    margin-top: 28px;
    background: none;
    border: 0;
    outline: none;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 575px) {
    .v2026 .search .input input { font-size: 26px; }
    .v2026 div.modal-box > .inner { width: 100%; }
}

/* bloc de reassurance des pages interieures : celui de la home, detache du contenu au-dessus */
.v2026 .v-reassurances-page { margin-top: 90px; clear: both; }
@media (max-width: 575px) { .v2026 .v-reassurances-page { margin-top: 56px; } }

/* ==========================================================================
   Pages interieures : echelle typographique de la home - 2026-10-07
   --------------------------------------------------------------------------
   Toutes les pages front22 (body.v2026-interieur) reprennent exactement les
   tailles de la home. Correspondances :
     grand titre     44px / 300   (= « La collection »)      <=1200 : 36  mobile : 30
     titre           30px / 300   (= « La selection »)       <=1200 : 26  mobile : 26
     sous-titre      20px / 300, capitales 0.16em (= titres des reassurances)   mobile : 17
     chapeau         22px / 1.5   (= introduction)           <=1200 : 20  mobile : 18
     texte           17px / 1.6   (= texte « La collection »)
     texte dense     14px / 1.7   (= texte des reassurances)
     libelles        11px, capitales 0.16em (= menu, boutons, fiches produit)
   Prefixe body.v2026-interieur : bat les <style> propres a chaque vue.
   ========================================================================== */

/* grand titre */
body.v2026-interieur .hero .row .col h2 {
    font-size: 44px;
    font-weight: 300;
    line-height: 1.12;
}

/* titre */
body.v2026-interieur .productname,
body.v2026-interieur .femme58m .title,
body.v2026-interieur .collection .title,
body.v2026-interieur .container.content h3,
body.v2026-interieur .main .title {
    font-size: 30px;
    font-weight: 300;
    line-height: 1.12;
}
body.v2026-interieur .productname .product-price { font-size: 20px; font-weight: 300; }

/* sous-titre en capitales */
body.v2026-interieur .pagetext h2,
body.v2026-interieur .pagetext h3 {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.4;
}
/* les h2 des pages de texte etaient des bandeaux noirs : on garde la hierarchie, sans le bandeau */
body.v2026-interieur .pagetext h2 { background: none; color: var(--v-encre); padding: 0; margin: 48px 0 18px; text-align: left; }
body.v2026-interieur .pagetext h3 { font-size: 14px; margin: 32px 0 12px; }

/* chapeau */
body.v2026-interieur .femme58m .chapeau {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

/* texte */
body.v2026-interieur .femme58m .description {
    font-size: 17px;
    line-height: 1.6;
}

/* texte dense : pages legales, description produit */
body.v2026-interieur .pagetext,
body.v2026-interieur .accordion-body,
body.v2026-interieur .paiement3x {
    font-size: 14px;
    line-height: 1.7;
}

/* libelles 11px capitales : comme les fiches de « La selection » de la home */
body.v2026-interieur .productDesc > div,
body.v2026-interieur a.designer,
body.v2026-interieur .accordion-button,
body.v2026-interieur .designers a,
body.v2026-interieur .femme span,
body.v2026-interieur .collection span,
body.v2026-interieur .aime58 span,
body.v2026-interieur .loadmore-loader .loadmore-label,
body.v2026-interieur .navbar-light.nav2 .navbar-nav .nav-link {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
body.v2026-interieur .productDesc > div b { font-weight: 600; }

/* boutons : pilule noire 11px, comme .v-btn */
body.v2026-interieur a.pnext,
body.v2026-interieur a.ptoo,
body.v2026-interieur .forms a.btn,
body.v2026-interieur .main a.btn {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
body.v2026-interieur a.pnext b { font-weight: 400; }

@media (max-width: 1200px) {
    body.v2026-interieur .hero .row .col h2 { font-size: 36px; }
    body.v2026-interieur .productname,
    body.v2026-interieur .femme58m .title,
    body.v2026-interieur .collection .title,
    body.v2026-interieur .container.content h3,
    body.v2026-interieur .main .title { font-size: 26px; }
    body.v2026-interieur .femme58m .chapeau { font-size: 20px; }
}
@media (max-width: 575px) {
    body.v2026-interieur .hero .row .col h2 { font-size: 30px; }
    body.v2026-interieur .pagetext h2 { font-size: 17px; }
    body.v2026-interieur .femme58m .chapeau { font-size: 18px; font-weight: 300; }
}

/* --------------------------------------------------------------------------
   Page « A propos » : le texte reprend EXACTEMENT le style du texte
   d'introduction de la home (.v-intro__texte) : 22px / 400 / 1.5,
   20px sous 1200px, 18px / 300 / 1.55 sur mobile.
   Les citations (.block4) restent en italique, a la taille du grand titre
   de la home (« La collection ») : 44px, 36px sous 1200px, 30px sur mobile.
   -------------------------------------------------------------------------- */
body.v2026-interieur .about.block21,
body.v2026-interieur .about.block21 p,
body.v2026-interieur .about.block22,
body.v2026-interieur .about.block22 p,
body.v2026-interieur .about.block22 .intro {
    font-family: "Archivo", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: var(--v-encre);
}
body.v2026-interieur .about.block4 .col {
    font-family: "Archivo", Helvetica, Arial, sans-serif;
    font-size: 44px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--v-encre);
}
@media (max-width: 1200px) {
    body.v2026-interieur .about.block21, body.v2026-interieur .about.block21 p,
    body.v2026-interieur .about.block22, body.v2026-interieur .about.block22 p,
    body.v2026-interieur .about.block22 .intro { font-size: 20px; }
    body.v2026-interieur .about.block4 .col { font-size: 36px; }
}
@media (max-width: 575px) {
    body.v2026-interieur .about.block21, body.v2026-interieur .about.block21 p,
    body.v2026-interieur .about.block22, body.v2026-interieur .about.block22 p,
    body.v2026-interieur .about.block22 .intro {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.55;
    }
    body.v2026-interieur .about.block4 .col { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   Shop : barre de filtres (« Couleurs », « Catégories », « Filtrer ») au
   style du menu : 11px, capitales, 0.16em.
   -------------------------------------------------------------------------- */
body.v2026-interieur .submenu .select .att-select,
body.v2026-interieur .submenu .submit a {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 18px;
}
body.v2026-interieur .submenu .select .att-select { padding: 6px 34px 6px 18px; }
body.v2026-interieur .submenu .submit a { padding: 6px 18px; }
/* fleche du selecteur recentree sur la nouvelle hauteur (30px) */
body.v2026-interieur .submenu .select .att-select:after { top: 12px; }
body.v2026-interieur .submenu .select .att-select.selected:after { top: 6px; }