/* ══════════════════════════════════════════════════════════════════════════
   7 DESCOMBES — système de design
   Source unique. Toute valeur de couleur, de fonte ou d'échelle vient d'ici.
   Le thème `_ds/…/styles.css` n'est plus chargé : c'est un thème générique
   Claude Design (accent doré, rayons, ombres, Lora) qui contredit ces règles.
   De `_ds/`, on ne garde que le runtime JavaScript.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Archivo:wght@400;500&display=swap');

:root {
  /* Palette — monochrome, sans exception. Cinq valeurs, pas une de plus. */
  --blanc:      #FFFFFF;
  --encre:      #1A1A1A;
  --gris:       #767676;   /* texte secondaire */
  --filet:      #E5E3E0;   /* séparateurs, 1px */
  --fond-doux:  #F6F4F0;   /* aplats, fonds de vignette */

  /* Fontes */
  --serif:      'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --grotesque:  'Archivo', system-ui, -apple-system, sans-serif;

  /* Échelle typographique — chaque cran a un emploi, pas une taille libre. */
  --t-maison:   11px;  /* nom de maison, capitales espacées */
  --t-produit:  22px;  /* nom de produit, serif */
  --t-prix:     13px;  /* jamais en gras */
  --t-corps:    14px;
  --t-micro:    10px;  /* micro-libellés, capitales espacées */

  --ls-maison:  0.10em;
  --ls-micro:   0.12em;

  /* Ratio d'image — portrait 0,89 (555 × 625, 1110 × 1250). */
  --ratio-image: 555 / 625;
}

/* — base — */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--grotesque);
  font-size: var(--t-corps);
  line-height: 1.5;
  font-weight: 400;
}

a { color: var(--encre); text-decoration: none; }
a:hover { color: var(--encre); }

button, input, select, textarea { font-family: var(--grotesque); font-size: inherit; }

::selection { background: var(--filet); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 1px solid var(--encre);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }

/* — échelle typographique — */

/* La maison est TOUJOURS au-dessus du produit, plus petite et espacée :
   c'est ce contraste qui fait lire « une maison » plutôt que « un article ». */
.maison {
  font-family: var(--grotesque);
  font-size: var(--t-maison);
  letter-spacing: var(--ls-maison);
  text-transform: uppercase;
  color: var(--encre);
}

.produit {
  font-family: var(--serif);
  font-size: var(--t-produit);
  font-weight: 400;
  line-height: 1.15;
}

/* Le prix n'est jamais en gras. */
.prix {
  font-family: var(--grotesque);
  font-size: var(--t-prix);
  font-weight: 400;
}

.micro {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--gris);
}

.corps { font-size: var(--t-corps); line-height: 1.7; color: var(--gris); }

/* — filets — */

.filet     { height: 1px; border: 0; margin: 0; background: var(--filet); }
.filet-haut { border-top: 1px solid var(--filet); }
.filet-bas  { border-bottom: 1px solid var(--filet); }

/* — visuels — */

.visuel {
  aspect-ratio: var(--ratio-image);
  background: var(--fond-doux);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* — boutons — rectangulaires. Aucun rayon, aucune ombre, aucun accent coloré. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  border: 1px solid var(--encre);
  border-radius: 0;
  background: transparent;
  color: var(--encre);
  font-family: var(--grotesque);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--encre); color: var(--blanc); }
.btn-primary:hover { background: #000000; border-color: #000000; }

.btn-secondary { background: transparent; color: var(--encre); }
.btn-secondary:hover { background: var(--fond-doux); }

/* Un lien souligné d'un filet d'encre — l'appel discret du site. */
.btn-lien {
  display: inline-block;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--encre);
  background: transparent;
  color: var(--encre);
  font-size: 12px;
  cursor: pointer;
}

.btn-block { width: 100%; }

/* — bandeau d'aperçu —

   Le runtime enveloppe chaque composant importé dans un `div.sc-host` dont il
   ignore l'attribut `style`. Cet hôte ne fait que la hauteur de l'en-tête, et
   il bornait le bandeau : `position:sticky` s'y arrêtait au bout de 110 px.
   On lui retire sa boîte, uniquement pour l'en-tête, afin que le bloc
   conteneur du bandeau devienne la page. Le `z-index` de l'en-tête est porté
   par sa barre, à l'intérieur du composant : rien n'est perdu. */
.sc-host[data-sc-name="Entete"] { display: contents; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE

   La majorité des consultations se fera sur téléphone — y compris celle d'une
   créatrice ouvrant son aperçu privé. Rien ici ne touche aux décisions de
   design : même palette, mêmes fontes, mêmes ratios, aucune ombre, aucun coin
   arrondi. Seule la MISE EN PAGE se réorganise.

   Les gabarits portent leur mise en page en style inline, que rien ne peut
   surcharger depuis une feuille. Chaque bloc réorganisé reçoit donc une
   classe, et la propriété concernée SORT du style inline pour venir ici : la
   règle de base et sa variante mobile vivent au même endroit, sans `!important`.

   Deux points de rupture, et deux seulement :
     — 1023 px : la mise en page se replie (tiroirs, colonnes empilées) ;
     —  767 px : les grilles passent à deux colonnes.
   ══════════════════════════════════════════════════════════════════════ */

/* Partout ici, `minmax(0, 1fr)` et non `1fr` : une piste `1fr` garde
   `min-width: auto`, donc un contenu large la fait déborder de son conteneur
   au lieu de le faire retourner à la ligne. Mesuré sur le tableau de bord
   maison : une piste de 636 px dans un conteneur de 375.

   — grilles de pièces —

   Quatre colonnes, trois en tablette, DEUX en téléphone. Jamais une seule :
   comparer deux pièces côte à côte est ce que le site sert à faire, et une
   colonne unique en fait un catalogue qu'on feuillette. */
.grille-pieces { display: grid; grid-template-columns: repeat(4, 1fr); }
.grille-trois  { display: grid; grid-template-columns: repeat(3, 1fr); }

/* — listes de liens horizontaux (vignette + texte sur une ligne) —
   Ce ne sont pas des pièces à comparer mais des liens à parcourir : elles ont
   le droit de tomber à une colonne, là où une grille de pièces ne l'a pas. */
.liste-liee { display: grid; grid-template-columns: repeat(4, 1fr); }

/* — blocs de contenu à deux colonnes —
   Eux peuvent tomber à une : ce sont des paragraphes, pas des pièces. */
.duo { display: grid; grid-template-columns: 1fr 1fr; }

/* — corps + colonne latérale de contenu —
   Leurs proportions de bureau ne sont pas 1fr 1fr : elles restent dans le style
   inline, et seul le repli les reprend. */
.corps-cote { }

/* — rayon : colonne de filtres + grille — */
.rayon-corps { display: grid; grid-template-columns: 180px 1fr; }
.rayon-corps--large { grid-template-columns: 212px 1fr; }
.rayon-corps--etroit { grid-template-columns: 170px 1fr; }

/* Le bouton qui ouvre les filtres n'existe qu'en repli. */
.filtres-bouton { display: none; }

/* — fiche produit : galerie + achat — */
.fiche-corps { display: grid; grid-template-columns: 1.05fr 0.95fr; }

/* — en-tête — */
.entete-burger, .entete-tiroir-pied { display: none; }

/* — tableaux denses de l'espace maison — */
.rang-dense { display: grid; }

/* — un visuel hors grille se cadre comme une vignette —
   Une tuile de grille tient parce que son ratio est HONORÉ. Un visuel posé
   dans un bloc éditorial est un item flex étiré : « align-items: stretch »
   écrase son « aspect-ratio », sa hauteur devient celle de la colonne de texte
   d’à côté, et le dessin grandit avec elle. Mesuré sur l’accueil, pour un cadre
   déclaré 1110/700 : 720×720 à 1440 px, 512×514 à 1024, 188×893 à 375.
   « align-self: center » rend le ratio effectif. « overflow: hidden » est la
   garantie : quoi que trace le composant, rien ne sort du cadre. */
.cadre-visuel {
  align-self: center;
  aspect-ratio: 1110 / 700;
  background: #F6F4F0;
  display: grid;
  overflow: hidden;
}

/* L’hôte du composant REMPLIT le cadre — surtout pas « place-items: center ».
   Centré, il n’est plus étiré : sa « height: 100% » cherche alors une hauteur
   définie, et la hauteur d’un cadre à ratio n’en est pas une. Il retombait
   carré — 720×720 dans un cadre de 720×454 —, le dessin était calibré sur 720
   et sortait de 206 px sous le cadre. C’est ce débordement-là qu’on voyait
   passer sur le titre suivant. « stretch » n’a besoin d’aucun pourcentage. */
.cadre-visuel > *,
.cadre-visuel-plein > * { width: 100%; height: 100%; min-width: 0; min-height: 0; }

/* Le bandeau d’ouverture : son visuel REMPLIT sa colonne — c’est le parti pris
   de la page d’accueil, et sa hauteur vient de min-height, donc elle est
   définie. Il ne lui manquait que la garantie. */
.cadre-visuel-plein {
  background: #F6F4F0;
  display: grid;
  overflow: hidden;
}

.bandeau-accueil {
  display: grid; grid-template-columns: 44fr 56fr;
  align-items: stretch; min-height: 78vh;
}

/* Le bloc éditorial : la direction reste en ligne (elle alterne d’un bloc à
   l’autre), tout le reste vit ici — sinon la requête de repli ne peut rien
   contre un « display:flex » écrit en attribut. */
.bloc-editorial { display: flex; align-items: stretch; }

/* — le bouton de fermeture du tiroir de filtres —
   Il n'existe QUE dans le repli. Son seul style vivait dans la requête
   ≤ 1023 px : au-dessus, il retombait dans le flux de la colonne de filtres et
   un « Filtrer ✕ » orphelin s'affichait en haut du rayon. Le défaut se règle
   ici, hors requête, pas dans le repli. */
.filtres-fermer { display: none; }

/* — cibles tactiles —
   44 px est le minimum au doigt. On agrandit la ZONE, pas le dessin : le
   pseudo-élément déborde sans déplacer quoi que ce soit. */
@media (pointer: coarse) {
  .cible { position: relative; }
  .cible::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* ─────────────────────────────── repli : ≤ 1023 px ─────────────────────── */

@media (max-width: 1023px) {

  /* Les colonnes s'empilent. Sur la fiche produit, la galerie vient d'abord :
     on regarde la pièce avant de lire son prix. */
  .fiche-corps { grid-template-columns: minmax(0, 1fr); gap: 28px !important; }
  .fiche-corps > :first-child { order: 1; }
  .fiche-corps > :last-child  { order: 2; }

  .liste-liee { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rayon-corps, .rayon-corps--large, .rayon-corps--etroit {
    grid-template-columns: minmax(0, 1fr);
    gap: 0 !important;
  }

  /* Les filtres passent en tiroir : un bouton les appelle, ils recouvrent la
     page le temps du choix. En colonne, ils mangeaient la moitié de l'écran. */
  .filtres-bouton {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    background: #FFFFFF; color: #1A1A1A; border: 1px solid #1A1A1A;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
    cursor: pointer;
  }
  .filtres-tiroir {
    position: fixed; inset: 0; z-index: 90;
    background: #FFFFFF; overflow-y: auto;
    padding: 20px 5.5vw 40px;
    transform: translateY(100%);
    transition: transform 0.2s ease-out;
  }
  .filtres-tiroir[data-ouvert="oui"] { transform: translateY(0); }
  .filtres-fermer {
    position: sticky; top: 0; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    min-height: 44px; margin-bottom: 18px;
    background: #FFFFFF; border: 0; padding: 0; width: 100%;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: #1A1A1A; cursor: pointer;
  }

  /* En-tête : le rang d'univers devient un tiroir latéral, le logo reste au
     centre, recherche et panier restent sur la barre. */
  .entete-burger {
    display: flex; align-items: center; justify-content: flex-start;
    min-width: 44px; min-height: 44px;
    background: none; border: 0; padding: 0; color: #1A1A1A; cursor: pointer;
  }
  .entete-recherche-texte { display: none; }
  /* Le logo reste centré, mais il cède de la taille : c'est lui ou les
     commandes, et il n'est pas question de le déplacer. */
  .entete-barre { gap: 10px !important; padding-left: 4.5vw !important; padding-right: 4.5vw !important; }
  .entete-logo { font-size: 20px !important; letter-spacing: 0.10em !important; }
  /* Langue, compte et favoris passent au tiroir : recherche et panier restent
     sur la barre, comme demandé. */
  .entete-secondaire, [data-secondaire=oui] { display: none !important; }
  .entete-tiroir-pied {
    display: flex; flex-direction: column; margin-top: auto; padding-top: 24px;
  }
  .entete-tiroir-pied > a {
    min-height: 44px; display: flex; align-items: center;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: #767676; text-decoration: none; border-top: 1px solid #E5E3E0;
  }
  .entete-nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 95;
    width: min(82vw, 320px);
    flex-direction: column; align-items: stretch;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 24px 24px 40px !important;
    background: #FFFFFF; border-right: 1px solid #E5E3E0; border-bottom: 0 !important;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
  }
  .entete-nav[data-ouvert="oui"] { transform: translateX(0); }
  .entete-nav > a {
    min-height: 44px; display: flex; align-items: center;
    padding-bottom: 0 !important;
    border-bottom: 1px solid #E5E3E0;
  }
  .entete-voile {
    position: fixed; inset: 0; z-index: 90; background: rgba(26, 26, 26, 0.28);
  }
  /* Le méga-menu au survol n'a pas de sens au doigt. */
  .entete-megamenu { display: none !important; }

  /* Le titre du rayon et son tri ne tiennent pas sur une ligne : le tri passe
     dessous et défile latéralement plutôt que d'être coupé. */
  .rayon-tete { flex-direction: column; align-items: flex-start !important; gap: 14px !important; }
  .rayon-tete > div:last-child {
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .rayon-tete > div:last-child::-webkit-scrollbar { display: none; }

  /* Espace maison : un tableau dense ne se lit pas à 375 px. Chaque rang
     devient une carte, ses cellules l'une sous l'autre. */
  .rang-dense {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #E5E3E0;
  }
  .rang-dense--entete { display: none !important; }

  /* Une ligne de panier n'est pas un tableau : la vignette reste petite à côté
     du nom, et seul le prix passe dessous. */
  .ligne-panier { grid-template-columns: 78px minmax(0, 1fr) !important; gap: 16px !important; }
  .ligne-panier > :last-child { grid-column: 2; }

  /* Espace maison : son en-tête et son menu latéral lui sont propres.
     Le menu occupait tout le premier écran — il devient un rang qui défile,
     et l'en-tête s'empile plutôt que de couper le nom de la maison. */
  .espace-entete { flex-direction: column; align-items: flex-start !important; gap: 10px !important; padding: 14px 5.5vw !important; }
  .espace-entete > div { flex-wrap: wrap; }
  .espace-nav {
    position: static !important; min-height: 0 !important;
    padding: 0 !important;
    border-right: 0 !important; border-bottom: 1px solid #E5E3E0;
    overflow-x: auto; scrollbar-width: none;
  }
  .espace-nav::-webkit-scrollbar { display: none; }
  .espace-nav .sc-host, .espace-nav nav { display: flex !important; }
  .espace-nav a {
    white-space: nowrap; min-height: 44px; display: flex !important; align-items: center;
    padding: 0 16px !important; border-left: 0 !important;
  }

  /* Le bloc de découverte croisée reste dominant : il ne se réduit pas à une
     bande, il garde toute la largeur et son visuel. */
  .decouverte { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ────────────────────────────── téléphone : ≤ 767 px ───────────────────── */

@media (max-width: 767px) {
  /* Deux colonnes de 188 px : le texte du journal sortait sur 893 px de haut
     et le visuel tenait dans un huitième de sa colonne. Le bloc se replie. */
  .bloc-editorial { display: block; }
  .cadre-visuel { width: 100%; }

  /* Le bandeau tenait ses deux colonnes jusqu’à 375 px : « Trente-deux maisons,
     une adresse » sortait sur cinq lignes et le visuel dans une bande. Replié,
     il prend le ratio d’une vignette — sans quoi il n’a plus de hauteur. */
  .bandeau-accueil { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cadre-visuel-plein { aspect-ratio: 1110 / 700; }


  .grille-pieces, .grille-trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo, .liste-liee { grid-template-columns: minmax(0, 1fr); }
  .corps-cote { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; }

  /* Les gouttières de 36 px prennent un cinquième d'un écran de 375. */
  .grille-pieces, .grille-trois { gap: 22px 14px !important; }

  /* Le bloc maison + nom + prix doit tenir au-dessus de la ligne de
     flottaison : c'est ce qui dit de quoi il s'agit et à quel prix. Sur 812 px
     de haut, une galerie pleine largeur l'en chassait de cent pixels. On
     plafonne donc la hauteur du visuel — le RATIO est préservé, l'image se
     centre, et les vues secondaires se resserrent. */
  .fiche-visuel { height: 34vh; width: auto; max-width: 100%; margin: 0 auto; }
  .fiche-vues {
    max-width: 100%; margin-top: 12px !important; gap: 10px !important;
    width: calc(34vh * 555 / 625); margin-left: auto; margin-right: auto;
  }

  /* Le corps de texte ne descend jamais sous 14 px. */
  body, .dc-root { font-size: 14px; }

  /* Le bandeau d'aperçu passe sur deux lignes plutôt que de rogner le nom de
     la maison — c'est lui qui dit à qui la page est destinée. */
  .bandeau-apercu {
    flex-direction: column; align-items: flex-start !important;
    gap: 4px !important;
    padding: 10px 5.5vw !important;
  }
  .bandeau-apercu > span { white-space: normal !important; }

  /* Les titres de page respirent moins. */
  .titre-page { font-size: 30px !important; }
  /* 58 px de serif sur 375 : le nom de la pièce prenait deux lignes et
     chassait le prix sous la ligne de flottaison. */
  .titre-piece { font-size: 32px !important; line-height: 1.15 !important; margin-top: 12px !important; }
}

/* Aucun débordement horizontal, jamais : une page qui se balance
   latéralement au doigt donne l'impression d'être cassée. */
html, body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   PANIER — panneau de confirmation

   Un panneau qui glisse depuis la droite, pas une fenêtre modale : on confirme
   sans interrompre. Le voile est là pour fermer au clic, pas pour assombrir la
   page — d'où sa discrétion.
   ══════════════════════════════════════════════════════════════════════ */

.panier-panneau { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.panier-voile {
  position: absolute; inset: 0; background: rgba(26, 26, 26, 0.14);
  opacity: 0; transition: opacity 0.22s ease-out; pointer-events: none;
}
.panier-panneau[data-ouvert] .panier-voile { opacity: 1; pointer-events: auto; }

.panier-carte {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(92vw, 380px);
  background: #FFFFFF; border-left: 1px solid #E5E3E0;
  padding: 30px 30px 34px;
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: 'Archivo', system-ui, sans-serif; color: #1A1A1A;
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
  pointer-events: auto;
}
.panier-panneau[data-ouvert] .panier-carte { transform: translateX(0); }

.panier-titre {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #767676;
  padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #E5E3E0; width: 100%;
}
.panier-maison { font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; }
.panier-piece {
  font-family: 'Cormorant Garamond', Garamond, serif; font-size: 24px;
  line-height: 1.2; margin-top: 8px;
}
.panier-prix { font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 8px; }

.panier-liens { display: flex; align-items: center; gap: 22px; margin-top: auto; padding-top: 34px; }
.panier-lien {
  min-height: 44px; display: inline-flex; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase; color: #767676; text-decoration: none;
}
.panier-lien--fort { color: #1A1A1A; border-bottom: 1px solid #1A1A1A; }

/* Le compteur de l'icône panier. Il ne s'affiche que s'il compte quelque
   chose : un « 0 » permanent est du bruit. */
.panier-compteur {
  position: absolute; top: -6px; right: -9px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: grid; place-items: center;
  background: #1A1A1A; color: #FFFFFF;
  font-size: 9px; line-height: 1; font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .panier-carte, .panier-voile, .entete-nav, .filtres-tiroir { transition: none !important; }
}