/* Site Commerce · le bandeau « Modèle de démonstration » d'une vitrine (ou de
   la boutique) servie SEULE, hors de la coquille /commerce.

   Une pastille d'une ligne en bas de l'écran, sœur du dock de la coquille
   (encre, crème, rayon 18) : « Modèle de démonstration », « Devis », et un
   chevron qui déplie les trois liens (retour aux modèles sur ce modèle,
   devis, site). Elle se replie en une puce quand on descend la page
   (vitrine-demo.js), et la page lui réserve sa hauteur (`--cv-demo-h`, posée
   par le script, plus la zone sûre) : le pied de page n'est plus caché.

   Sans script, le bandeau reste une petite carte avec ses trois liens.
   Dans l'iframe de la coquille (`is-framed`, posé avant le premier rendu),
   il n'existe pas. Polices : celles de la charte, servies par le site. */
@import url("/static/fonts.css");

.cv-demo {
  position: fixed; z-index: 45;
  left: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: min(380px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 12px 14px;
  background: #16130f; color: #fbf6ee;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 16px 36px -16px rgba(0, 0, 0, .6);
  font: 500 14px/1.35 "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cv-demo *, .cv-demo *::before, .cv-demo *::after { box-sizing: border-box; }
.is-framed .cv-demo { display: none; }

.cv-demo__head strong { display: block; font-size: 15px; font-weight: 600; }
.cv-demo__head span { display: block; font-size: 13px; color: rgba(251, 246, 238, .72); margin-top: 2px; }
.cv-demo__links { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 8px; }
.cv-demo__links a {
  color: inherit; text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center; font-size: 14px;
}
.cv-demo__back, .cv-demo__site { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(251, 246, 238, .45); }
.cv-demo__cta {
  padding: 0 16px; border-radius: 12px;
  background: #fbf6ee; color: #16130f !important; font-weight: 600;
}
.cv-demo a:focus-visible, .cv-demo button:focus-visible { outline: 2px solid #f0a27e; outline-offset: 2px; }

/* La page réserve la hauteur de la pastille (et la zone sûre) sous son pied :
   sur le dernier bloc dans le flux (vitrine-demo.js le marque `data-cv-pied`
   et recopie son padding d'origine dans `--cv-pied-pb`), sinon sur le body. */
html.cv-demo-js:not(.is-framed) body:not(.cv-a-pied) {
  padding-bottom: calc(var(--cv-demo-h, 62px) + env(safe-area-inset-bottom) + 8px);
}
html.cv-demo-js:not(.is-framed) [data-cv-pied] {
  padding-bottom: calc(var(--cv-pied-pb, 0px) + var(--cv-demo-h, 62px) + env(safe-area-inset-bottom) + 8px) !important;
}
/* Le temps que le script monte la pastille, rien ne clignote. */
.cv-demo-js .cv-demo:not(.cv-demo--pastille) { visibility: hidden; }

/* ── La pastille ──────────────────────────────────────────────────────── */
.cv-demo.cv-demo--pastille {
  display: flex; flex-direction: column;
  padding: 0; width: max-content; min-width: 0;
  max-width: min(420px, calc(100vw - 24px));
  overflow: hidden;
  clip-path: inset(0 0 0 0 round 18px);
  transition: clip-path .36s cubic-bezier(.2, .8, .2, 1), background-color .2s;
}
.cv-demo__rang { display: flex; align-items: center; gap: 4px; padding: 4px; min-height: 52px; }
.cv-demo__titre, .cv-demo__chevron {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; background: transparent;
  color: inherit; font: inherit; cursor: pointer; min-height: 44px; border-radius: 13px;
}
.cv-demo__titre {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 12px 0 0;
  min-width: 0; flex: 1 1 auto; text-align: left; font-weight: 600; font-size: 14.5px;
}
.cv-demo__marque {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; color: #f0a27e;
}
.cv-demo__marque svg { width: 22px; height: 22px; }
.cv-demo__mots { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity .22s; }
.cv-demo__court { display: none; }
@media (max-width: 359px) {
  .cv-demo__long { display: none; }
  .cv-demo__court { display: inline; }
}
.cv-demo__devis {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 12px;
  background: #fbf6ee; color: #16130f; font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: opacity .22s;
}
.cv-demo__chevron { flex: none; width: 44px; display: grid; place-items: center; transition: opacity .22s; }
.cv-demo__chevron svg { width: 20px; height: 20px; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.cv-demo.is-ouvert .cv-demo__chevron svg { transform: rotate(180deg); }

/* Le panneau déplié : la mention et les trois liens, au-dessus de la ligne. */
.cv-demo__panel { padding: 12px 12px 4px 16px; border-bottom: 1px solid rgba(251, 246, 238, .12); }
.cv-demo__panel[hidden] { display: none; }
.cv-demo__panel .cv-demo__head strong { display: none; }
.cv-demo__panel .cv-demo__head span { margin: 0; }
.cv-demo__panel .cv-demo__links { flex-direction: column; align-items: stretch; gap: 0; margin-top: 6px; }
.cv-demo__panel .cv-demo__links a {
  justify-content: space-between; padding: 0 4px; font-size: 15px;
  border-top: 1px solid rgba(251, 246, 238, .08); text-decoration: none;
}
.cv-demo__panel .cv-demo__links a:first-child { border-top: 0; }
.cv-demo__panel .cv-demo__cta { background: transparent; color: #fbf6ee !important; padding: 0 4px; border-radius: 0; font-weight: 500; }
.cv-demo.is-ouvert .cv-demo__panel { animation: cvd-deplie .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes cvd-deplie { from { opacity: 0; transform: translateY(8px); } }

/* Sur grand écran, la pastille se tient dans le coin bas DROIT : à gauche,
   les héros des six styles posent leurs chiffres et leurs boutons (mesuré),
   à droite leur photo, qui supporte mieux un recouvrement. */
@media (min-width: 641px) {
  .cv-demo { left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .cv-demo { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: none; }
  .cv-demo.cv-demo--pastille { width: auto; max-width: none; }
  /* Repliée (au téléphone seulement) : la pastille se rétracte sur sa
     marque (la découpe glisse vers la gauche), et la puce qui reste la
     redéploie au toucher. */
  .cv-demo.cv-demo--pastille.is-replie { clip-path: inset(4px calc(100% - 52px) 4px 4px round 14px); }
  .cv-demo.is-replie .cv-demo__marque { box-shadow: inset 0 0 0 1px rgba(251, 246, 238, .22); }
  .cv-demo.is-replie .cv-demo__mots, .cv-demo.is-replie .cv-demo__devis,
  .cv-demo.is-replie .cv-demo__chevron { opacity: 0; }
  .cv-demo.is-replie .cv-demo__devis, .cv-demo.is-replie .cv-demo__chevron { pointer-events: none; visibility: hidden;
    transition: opacity .22s, visibility 0s linear .22s; }
}

@media (hover: hover) and (pointer: fine) {
  .cv-demo__titre:hover .cv-demo__marque, .cv-demo__chevron:hover { background: rgba(251, 246, 238, .1); }
  .cv-demo__devis:hover, .cv-demo__cta:hover { background: #fff; }
  .cv-demo__panel .cv-demo__links a:hover { color: #f0a27e; }
}

/* « Moins de mouvement » : le réglage de la coquille (`data-mouvement`, posé
   par le script de la vitrine), sinon l'appareil. */
:root[data-mouvement="reduit"] .cv-demo, :root[data-mouvement="reduit"] .cv-demo * {
  transition: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-mouvement="toujours"]) .cv-demo, :root:not([data-mouvement="toujours"]) .cv-demo * {
    transition: none !important; animation: none !important;
  }
}

/* Sécurité d'impression : aucun bandeau sur le papier. */
@media print { .cv-demo { display: none; } html.cv-demo-js body, html.cv-demo-js [data-cv-pied] { padding-bottom: 0 !important; } }