/* Crowdless Ventures, charte reprise du devis CV-20260701.
   Conçu en mobile-first : toutes les requêtes média sont en min-width. */

@import '/fonts/fonts.css';

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--cv-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cv-texte);
  background: var(--cv-blanc);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.enveloppe {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cv-filet);
}
.entete-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0;
}
.logotype { line-height: .92; display: block; }
.logotype b { display: block; font-weight: 700; font-size: 20px; color: var(--cv-encre); letter-spacing: -.02em; }
.logotype span { display: block; font-weight: 300; font-size: 20px; color: var(--cv-encre); letter-spacing: -.02em; }
/* Sous 900 px le menu se replie, mais la demande de devis et le
   changement de langue restent joignables : sans eux, un visiteur sur
   téléphone ne pourrait plus atteindre son panier. */
.entete nav { display: flex; align-items: center; gap: 16px; }
.entete nav a { display: none; }
.entete nav a.lien-devis, .entete nav a.langue { display: block; }
@media (min-width: 900px) {
  .entete nav { gap: 22px; }
  .entete nav a { display: block; }
  .logotype b, .logotype span { font-size: 22px; }
}
.entete nav a {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cv-sourdine); padding: 6px 0;
}
.entete nav a:hover, .entete nav a[aria-current] { color: var(--cv-corail); }

/* ── Titrage ─────────────────────────────────────────────────────────── */
.micro {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cv-label); margin: 0 0 10px;
}
.micro.corail { color: var(--cv-corail); }
h1 { font-weight: 700; font-size: clamp(28px, 7vw, 46px); line-height: 1.06;
     letter-spacing: -.02em; color: var(--cv-encre); margin: 0 0 12px; }
h2 { font-weight: 700; font-size: clamp(19px, 4vw, 24px); letter-spacing: -.01em;
     color: var(--cv-encre); margin: 0 0 4px; }
.chapeau { font-size: 15px; color: var(--cv-sourdine); max-width: 62ch; margin: 0; }
.filet { border: 0; border-top: 1px solid var(--cv-filet); margin: 32px 0; }

/* ── Grille de produits ──────────────────────────────────────────────── */
.grille {
  display: grid; gap: 22px 16px;
  grid-template-columns: 1fr;
  margin: 24px 0 0; padding: 0; list-style: none;
}
@media (min-width: 600px)  { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grille { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .grille { grid-template-columns: repeat(4, 1fr); } }

.carte { display: block; }
.carte .vignette {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: #FAF9F8; border: 1px solid var(--cv-filet);
  border-radius: 3px; overflow: hidden;
}
.carte .vignette img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .35s ease;
}
@media (hover: hover) { .carte:hover .vignette img { transform: scale(1.035); } }
.carte .ref { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
              color: var(--cv-corail); margin: 11px 0 3px; }
.carte .nom { font-weight: 700; font-size: 14px; color: var(--cv-encre); line-height: 1.3; }
.carte .meta { font-size: 12px; color: var(--cv-label); margin-top: 3px;
               font-variant-numeric: tabular-nums; }

/* ── Univers en page d'accueil ───────────────────────────────────────── */
.univers { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 28px 0 0; }
@media (min-width: 820px) { .univers { grid-template-columns: repeat(3, 1fr); } }
.univers article {
  border: 1px solid var(--cv-filet); border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
}
.univers .visuel { aspect-ratio: 4 / 3; background: #FAF9F8; overflow: hidden; }
.univers .visuel img { width: 100%; height: 100%; object-fit: cover; }
.univers .corps { padding: 18px 18px 22px; display: flex; flex-direction: column; flex: 1; }
.univers p { font-size: 14px; color: var(--cv-sourdine); margin: 6px 0 16px; flex: 1; }
.univers .compte { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
                   color: var(--cv-corail); }

/* ── Rubans de catégories ────────────────────────────────────────────── */
.rubans { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px;
          -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.rubans a {
  flex: 0 0 auto; padding: 9px 15px; border: 1px solid var(--cv-filet);
  border-radius: 999px; font-size: 12.5px; color: var(--cv-texte); white-space: nowrap;
  min-height: 40px; display: inline-flex; align-items: center;
}
.rubans a[aria-current] { background: var(--cv-corail); border-color: var(--cv-corail); color: #fff; }

/* ── Fiche produit ───────────────────────────────────────────────────── */
.fiche { display: grid; gap: 26px; grid-template-columns: 1fr; margin-top: 22px; }
@media (min-width: 860px) { .fiche { grid-template-columns: 1.05fr .95fr; gap: 44px; } }
.galerie .principale {
  border: 1px solid var(--cv-filet); border-radius: 4px; overflow: hidden;
  background: #FAF9F8; aspect-ratio: 1 / 1;
}
.galerie .principale img { width: 100%; height: 100%; object-fit: contain; }
.galerie .pouces { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.galerie .pouces img { width: 62px; height: 62px; object-fit: cover;
                       border: 1px solid var(--cv-filet); border-radius: 3px; }

table.specs { width: 100%; border-collapse: collapse; font-size: 14px; }
table.specs td { padding: 10px 0; border-bottom: 1px solid var(--cv-filet); }
table.specs td:first-child { color: var(--cv-sourdine); }
table.specs td:last-child { text-align: right; color: var(--cv-encre); font-weight: 700;
                            font-variant-numeric: tabular-nums; }

/* Bloc d'action, reprend le pavé TOTAL DUE du devis */
.devis {
  margin-top: 26px; background: var(--cv-corail); color: #fff;
  border-radius: 6px; padding: 18px 20px;
}
.devis .titre { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
                opacity: .92; margin-bottom: 12px; }
.devis .boutons { display: flex; gap: 10px; flex-wrap: wrap; }
.devis .boutons a {
  flex: 1 1 auto; min-width: 140px; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--cv-corail); font-weight: 700; font-size: 14px;
  border-radius: 4px; padding: 12px 18px;
}
.devis .boutons a.secondaire { background: rgba(255,255,255,.16); color: #fff;
                      box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.devis .note { font-size: 12px; opacity: .92; margin-top: 12px; }
.devis .note a { color: #fff; text-decoration: underline; }

/* ── Pied de page ────────────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--cv-filet); margin-top: 56px; padding: 26px 0 42px; }
.pied .ligne { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
               font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
               color: var(--cv-label); }
.pied strong { color: var(--cv-encre); font-weight: 700; }

/* ── Fil d'Ariane ────────────────────────────────────────────────────── */
.ariane { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
          color: var(--cv-label); margin: 22px 0 14px; }
.ariane a:hover { color: var(--cv-corail); }

.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--cv-filet); border-radius: 4px;
  font-size: 13px; padding: 0 12px;
}
.pagination a[aria-current] { background: var(--cv-corail); border-color: var(--cv-corail); color: #fff; }

/* Barre de recherche */
.recherche { position: relative; margin: 18px 0 0; }
.recherche input {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--cv-filet); border-radius: 4px;
  font-family: inherit; font-size: 16px; color: var(--cv-encre); background: #fff;
}
.recherche input:focus { outline: 2px solid var(--cv-corail); outline-offset: 1px; }
.vide { color: var(--cv-label); font-size: 14px; padding: 30px 0; }

/* Sélecteur de langue */
.entete nav a.langue {
  border: 1px solid var(--cv-filet); border-radius: 999px;
  padding: 6px 13px; color: var(--cv-encre);
}
.entete nav a.langue:hover { border-color: var(--cv-corail); color: var(--cv-corail); }

/* ══ Panier et demande de devis ═══════════════════════════════════════ */

/* Bouton d'ajout sous chaque vignette */
.grille li { display: flex; flex-direction: column; }
.ajout {
  margin-top: 8px; align-self: flex-start;
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--cv-corail); background: none;
  border: 1px solid var(--cv-filet); border-radius: 999px;
  padding: 8px 14px; min-height: 38px; cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.ajout:hover { border-color: var(--cv-corail); }
.ajout.fait { background: var(--cv-corail); border-color: var(--cv-corail); color: #fff; }

/* Accès à la demande, dans l'en-tête.
   Sur téléphone la place manque : le libellé cède au picto, et la pastille
   se pose sur son coin. Le libellé complet revient dès 900 px. */
.entete nav a.lien-devis {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; padding: 0;
  color: var(--cv-encre); font-weight: 700;
}
.lien-devis .picto { display: block; }
.lien-devis .etiquette { display: none; }
.compteur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--cv-corail); color: #fff; border-radius: 999px;
  font-size: 11px; letter-spacing: 0; font-weight: 700; line-height: 1;
}
.lien-devis .compteur {
  position: absolute; top: 3px; right: -2px;
  box-shadow: 0 0 0 2px var(--cv-blanc);
}
@media (min-width: 900px) {
  .entete nav a.lien-devis { width: auto; height: auto; gap: 6px; padding: 6px 0; }
  .lien-devis .picto { display: none; }
  .lien-devis .etiquette { display: inline; }
  .lien-devis .compteur { position: static; box-shadow: none; margin-left: 2px; }
}

/* Champ quantité sur la fiche produit */
.ligne-ajout { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ligne-ajout .qte { display: flex; flex-direction: column; gap: 5px; }
.ligne-ajout .qte span {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .92;
}
.ligne-ajout .qte input {
  width: 92px; min-height: 46px; padding: 10px 12px;
  border: 0; border-radius: 4px; font-family: inherit; font-size: 16px;
  font-weight: 700; color: var(--cv-encre); text-align: center;
}
.bouton-clair {
  flex: 1 1 auto; min-width: 150px; min-height: 46px;
  background: #fff; color: var(--cv-corail); font-family: inherit;
  font-weight: 700; font-size: 14px; border: 0; border-radius: 4px;
  padding: 12px 18px; cursor: pointer;
}
.bouton-clair.fait { background: rgba(255,255,255,.22); color: #fff; }

/* Lignes du panier */
.lignes { margin-top: 6px; }
.ligne {
  display: grid; gap: 10px 12px; align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--cv-filet);
  grid-template-columns: 56px 1fr auto;
  grid-template-areas: "visu txt sup" "visu qte qte";
}
@media (min-width: 620px) {
  .ligne { grid-template-columns: 64px 1fr 128px 40px;
           grid-template-areas: "visu txt qte sup"; }
}
.ligne .visu { grid-area: visu; }
.ligne .visu img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: #FAF9F8; border: 1px solid var(--cv-filet); border-radius: 3px;
}
.ligne .txt { grid-area: txt; min-width: 0; }
.ligne .txt .r {
  display: block; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cv-corail);
}
.ligne .txt .n { display: block; font-weight: 700; font-size: 14px; color: var(--cv-encre); }
.ligne .qte { grid-area: qte; display: flex; align-items: center; gap: 7px; }
.ligne .qte input {
  width: 84px; min-height: 44px; padding: 9px 10px; text-align: center;
  border: 1px solid var(--cv-filet); border-radius: 4px;
  font-family: inherit; font-size: 16px; font-weight: 700; color: var(--cv-encre);
}
.ligne .qte .u { font-size: 12px; color: var(--cv-label); }
.ligne .sup {
  grid-area: sup; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--cv-filet); background: none; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--cv-label);
}
.ligne .sup:hover { border-color: var(--cv-corail); color: var(--cv-corail); }

/* Récapitulatif */
.recap {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 14px; border-top: 2px solid var(--cv-encre);
}
.recap div { display: flex; gap: 9px; align-items: baseline; }
.recap span {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cv-label);
}
.recap strong { font-size: 19px; color: var(--cv-encre); font-variant-numeric: tabular-nums; }

/* Formulaire */
.champs { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 660px) { .champs { grid-template-columns: 1fr 1fr; } }
.champs label { display: flex; flex-direction: column; gap: 5px; }
.champs label.pleine { grid-column: 1 / -1; }
.champs span {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cv-label);
}
.champs em { font-style: normal; color: var(--cv-corail); text-transform: none; letter-spacing: 0; }
.champs input, .champs textarea {
  min-height: 46px; padding: 11px 13px; border: 1px solid var(--cv-filet);
  border-radius: 4px; font-family: inherit; font-size: 16px; color: var(--cv-encre);
  background: #fff;
}
.champs textarea { min-height: 88px; resize: vertical; }
.champs input:focus, .champs textarea:focus {
  outline: 2px solid var(--cv-corail); outline-offset: 1px; border-color: transparent;
}
.devis .boutons button {
  flex: 1 1 auto; min-width: 160px; min-height: 48px;
  background: #fff; color: var(--cv-corail); font-family: inherit;
  font-weight: 700; font-size: 15px; border: 0; border-radius: 4px; cursor: pointer;
}
.devis .boutons button:disabled { opacity: .6; cursor: default; }

/* ── Vignettes de galerie ─────────────────────────────────────────────
   Elles pilotent le visuel principal : ce sont donc des boutons, avec
   les repères visuels qui vont avec. */
.pouces .pouce {
  padding: 0; border: 1px solid var(--cv-filet); border-radius: 3px;
  background: #FAF9F8; cursor: pointer; line-height: 0;
  transition: border-color .18s, box-shadow .18s;
}
.pouces .pouce img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 2px; display: block;
}
.pouces .pouce:hover { border-color: var(--cv-corail); }
.pouces .pouce:focus-visible { outline: 2px solid var(--cv-corail); outline-offset: 2px; }
.pouces .pouce.actif {
  border-color: var(--cv-corail);
  box-shadow: inset 0 0 0 1px var(--cv-corail);
}
@media (min-width: 620px) {
  .pouces .pouce img { width: 74px; height: 74px; }
}

/* ── Barre de demande, sur téléphone ──────────────────────────────────
   Une fois un article ajouté, le visiteur doit pouvoir demander son
   devis sans remonter chercher le menu. La barre n'apparaît que sur
   petit écran, et seulement quand la sélection contient quelque chose. */
.barre-devis {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cv-filet);
}
.barre-devis a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 20px;
  background: var(--cv-corail); color: #fff; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
}
.barre-devis .compteur {
  background: rgba(255,255,255,.24); margin-left: 0; height: 22px; min-width: 22px;
}
body.avec-barre { padding-bottom: 78px; }
body.avec-barre .barre-devis { display: block; }
@media (min-width: 900px) {
  body.avec-barre { padding-bottom: 0; }
  body.avec-barre .barre-devis { display: none; }
}

/* Le bandeau de l'aperçu privé. Assez visible pour qu'on n'oublie pas
   qu'on regarde des fiches hors catalogue, assez sobre pour qu'un
   client le lise sans s'en inquiéter. */
.bandeau-apercu {
  margin: 0;
  padding: 9px 16px;
  background: #1c1c1c;
  color: #f2efe9;
  font-size: 13px;
  text-align: center;
}
.bandeau-apercu a {
  color: #DF8587;
  margin-left: 10px;
  text-decoration: underline;
}