/* ==================================================================
   Ruban Pro Configurateur — feuille commune
   ==================================================================
   Chargée partout où le configurateur s'affiche, avec ou sans le thème
   Ruban Pro.

   Le thème dessine les choix comme des boutons (button[aria-pressed]).
   Le plugin les écrit comme de vrais boutons radio dans une étiquette
   (label.m-choix > input.m-choix__r), pour que le formulaire fonctionne
   sans script. Cette feuille donne à ces étiquettes le même aspect.
   Les couleurs viennent des variables --m-* : celles du thème, ou
   celles de configurateur.css avec un autre thème.
   ================================================================== */

/* ------------------------------------------------ bouton radio caché */
.m-choix { position: relative; cursor: pointer; }
.m-choix__r {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.m-choix:has(> .m-choix__r:focus-visible) {
  outline: 2px solid var(--m-focus);
  outline-offset: 2px;
}

.rpc-invisible {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.rpc-conf [hidden], .rpc-atelier [hidden], .rpc-devis [hidden] { display: none !important; }

/* Raccourcis de quantité : utiles seulement avec le script. */
html:not(.rpc-js) [data-rpc-raccourcis] { display: none; }
html:not(.rpc-js) .m-qte__pas { display: none; }

/* ------------------------------------------ étiquettes en boutons */
.m-pils .m-choix,
.m-larg .m-choix {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 68px;
  padding: .62rem .5rem;
  border: 1px solid var(--m-trait);
  border-radius: 7px;
  background: #fff;
  font: 400 12.5px/1 var(--m-sans);
  color: var(--m-encre-2);
  text-align: center;
}
.m-larg .m-choix {
  min-width: 0;
  padding: .82rem .4rem;
  border-width: 1.5px;
  border-color: var(--m-trait-2);
  border-radius: var(--m-r-s);
  font-size: 13px;
  transition: border-color .15s;
}
/* Atelier de l'accueil : le nombre de colonnes suit le nombre de
   valeurs (--rpc-col, calculé par le plugin), puis trois colonnes sur
   tablette et téléphone, comme dans le thème. */
.rpc-atelier .m-mat, .rpc-atelier .m-larg { grid-template-columns: repeat(var(--rpc-col, 6), minmax(0, 1fr)); }
@media (max-width: 1160px) {
  .rpc-atelier .m-mat, .rpc-atelier .m-larg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.m-sous .m-pils .m-choix { padding: .48rem .5rem; font-size: 11.5px; min-width: 56px; }
/* Largeurs : boutons compacts, sans s'étirer sur toute la carte. */
.m-pils--largeur .m-choix { flex: 0 1 112px; }
/* Étapes du formulaire sur toute la largeur de la carte (le formulaire
   d'achat de WooCommerce est en flex : sans cela, chaque étape prend la
   largeur de son contenu). */
.rpc-form > .m-et { flex: 1 1 100%; min-width: 0; }
/* Matière et largeur : deux colonnes égales sur toute la largeur
   (classe posée par rpc_html_groupe selon le rôle du groupe). */
.m-tuiles.m-2col,
.m-pils.m-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.m-2col > :only-child { grid-column: 1 / -1; }
.m-pils.m-2col .m-choix { min-width: 0; }
.m-past__un { display: block; }
/* Les vignettes de la médiathèque portent width et height : sans cette
   règle, un thème sans remise à zéro les affiche à leur hauteur native. */
.m-tuile img, .m-mat__un img, .m-sims img { height: auto; }

/* Survol */
.m-pils .m-choix:not(.est-indispo):hover,
.m-larg .m-choix:hover,
.m-tuile.m-choix:not(.est-indispo):hover,
.m-tech__un:not(.est-indispo):hover,
.m-encre:not(.est-indispo):hover,
.m-past__un:not(.est-indispo):hover,
.m-mat__un:hover { border-color: var(--m-gris-2); }

/* Choisi : même dessin que button[aria-pressed="true"] dans le thème. */
.m-pils .m-choix.est-choisi,
.m-tuile.est-choisi,
.m-tech__un.est-choisi,
.m-encre.est-choisi {
  border-color: var(--m-noir);
  box-shadow: inset 0 0 0 1px var(--m-noir);
  color: var(--m-encre);
  font-weight: 500;
}
.m-tuile.est-choisi .m-tuile__n { color: var(--m-encre); font-weight: 500; }
.m-larg .m-choix.est-choisi { border-color: var(--m-noir); color: var(--m-encre); font-weight: 500; }
.m-past__un.est-choisi { border-color: var(--m-noir); }
.m-past__plus.est-choisi { border-color: var(--m-noir); color: var(--m-encre); font-weight: 500; }
.m-mat__un.est-choisi { border-color: var(--m-noir); background: #fff; }
.m-mat__un.est-choisi span { color: var(--m-encre); font-weight: 500; }
/* Un nom de matière long (« Satin double face ») passe à la ligne plutôt
   que d'être coupé par des points de suspension. */
.rpc-atelier .m-mat__un span { white-space: normal; overflow: visible; line-height: 1.3; overflow-wrap: break-word; }

/* Indisponible : la raison reste lisible dans l'infobulle et, sur les
   cartes, sous le libellé. */
.m-choix.est-indispo { opacity: .45; cursor: not-allowed; }
.m-past__un.est-indispo i { background-image: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, .9) 47%, rgba(255, 255, 255, .9) 53%, transparent 54%) !important; }
.rpc-raison { display: block; }
.rpc-raison:empty { display: none; }

/* ------------------------------------------------- mises en page */
.m-fich--seul, .m-bilan--seul { grid-template-columns: minmax(0, 1fr); }
.m-qte--seule { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
.m-select option:disabled { color: var(--m-gris-2); }

/* Les boutons d'action se partagent la ligne quel que soit leur nombre ;
   le bouton principal passe en tête. */
.rpc-conf .m-act { display: flex; flex-wrap: wrap; }
.rpc-conf .m-act > .m-btn { flex: 1 1 13rem; width: auto; justify-content: center; }
.rpc-conf .m-act > .m-act__p { order: -1; }

/* ------------------------------------------------------- dépôt */
.m-depot input[type="file"]:focus-visible ~ label { outline: 2px solid var(--m-focus); outline-offset: 2px; }
.m-depot.est-envoi label { cursor: progress; opacity: .7; }
.rpc-retirer {
  position: relative;
  z-index: 2;
  margin-top: .45rem;
  padding: 0;
  border: 0;
  background: none;
  font: 400 11.5px/1.3 var(--m-sans);
  color: var(--m-encre-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rpc-retirer:hover { color: var(--m-encre); }

/* Un ruban blanc ou crème se perdrait sur le fond beige de l'aperçu. */
[data-rpc-apercu] .m-ruban { filter: drop-shadow(0 1px 2px rgba(30, 22, 8, .22)); }

.rpc-apercu-note {
  margin: 0;
  padding: .45rem .7rem .55rem;
  font: 300 10.5px/1.45 var(--m-sans);
  color: var(--m-gris);
  text-align: center;
}

/* ------------------------------------------------ messages */
.rpc-alerte {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border: 1px solid #e3b8b3;
  border-radius: 8px;
  background: #fdf4f3;
  font: 400 12.5px/1.5 var(--m-sans);
  color: #8a2420;
}
.rpc-alerte ul { margin: 0; padding-left: 1.1rem; }
.rpc-alerte li + li { margin-top: .2rem; }

.rpc-demo {
  margin: 0 1.6rem 1.1rem;
  padding: .7rem .9rem;
  border: 1px dashed var(--m-gris-2);
  border-radius: 8px;
  background: var(--m-creme-2);
  font: 400 12px/1.5 var(--m-sans);
  color: var(--m-encre-2);
}

/* ------------------------------------------------ listes de produits */
.rpc-des { font-size: .82em; font-weight: 300; color: var(--m-gris, #6f6a63); }
.rpc-sur-devis { font-weight: 500; }

/* ------------------------------------------- page de demande de devis */
.rpc-devis { max-width: 46rem; font-family: var(--m-sans); }
.rpc-devis__intro { margin: 0 0 1.4rem; font-size: 15px; line-height: 1.6; color: var(--m-encre-2); }
.rpc-devis__conf {
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--m-trait);
  border-radius: 10px;
  background: var(--m-creme-2);
}
.rpc-devis__conf > p { margin: .8rem 0 0; font-size: 13px; }
.rpc-devis__conf > p:first-child { margin-top: 0; }
.rpc-devis__conf a { color: var(--m-encre); }
.rpc-devis__conf .m-resume { margin-top: .9rem; }
.rpc-devis__produit { display: flex; align-items: center; gap: .9rem; }
.rpc-devis__produit img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.rpc-devis__produit b { display: block; font-weight: 500; font-size: 15px; color: var(--m-encre); }
.rpc-devis__produit small { display: block; margin-top: .15rem; color: var(--m-gris); }
.rpc-devis__motifs { color: var(--m-encre-2); }
.rpc-devis__form > p, .rpc-devis__form .m-duo > p { margin: 0 0 1rem; }
.rpc-devis__form .m-lab { display: block; }
.rpc-devis__form textarea.m-input { resize: vertical; min-height: 8rem; }
.rpc-devis__accord { font-size: 12.5px; line-height: 1.5; color: var(--m-encre-2); }
.rpc-devis__accord label { display: flex; align-items: flex-start; gap: .55rem; }
.rpc-devis__accord input { margin-top: .2rem; }
.rpc-devis__accord a { color: inherit; }
.rpc-devis .rpc-alerte { margin: 0 0 1.2rem; }
.rpc-devis--merci {
  padding: 1.3rem 1.4rem;
  border-radius: 10px;
  background: var(--m-beige);
  font-size: 15px;
  line-height: 1.6;
  color: var(--m-encre);
}
.rpc-devis--merci p { margin: 0; }

/* Piège à robots : hors de l'écran, pas seulement masqué. */
.rpc-piege {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .m-larg .m-choix { transition: none; }
}

/* ==================================================================
   APERÇU EN DIRECT
   ================================================================== */

/* Toiles : la taille vient du CSS, le script dessine à cette taille. */
.rpc-toile { display: block; width: 100%; height: 100%; }
.rpc-apercu--toile .rpc-toile { height: auto; aspect-ratio: 600 / 360; }

/* Résumé de configuration : photos du produit côte à côte (le schéma
   seulement quand aucune photo ne montre les choix). */
.rpc-bilan-photos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.rpc-bilan-photo { margin: 0; border-radius: 8px; overflow: hidden; background: #eef1f4; }
.rpc-bilan-photo[hidden] { display: none; }
/* Une seule photo : pas plus large que deux côte à côte ne le seraient. */
.rpc-bilan-photos--une { grid-auto-columns: minmax(0, 60%); justify-content: center; }
.rpc-bilan-photo .rpc-toile { height: auto; aspect-ratio: 4 / 3; }
.rpc-bilan-photo--schema { background: linear-gradient(140deg, #f2ece2 0%, #e9e1d4 100%); }
.rpc-bilan-photo--schema .rpc-toile { aspect-ratio: 600 / 360; }

/* Dans la galerie du thème : l'aperçu couvre la photo principale. */
.rpc-scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #f3ede3;
}
.rpc-scene[hidden] { display: none; }
.rpc-scene__note {
  margin: 0;
  padding: .45rem .9rem .6rem;
  font: 300 11px/1.45 var(--m-sans);
  color: var(--m-gris);
  text-align: center;
  background: rgba(255, 255, 255, .55);
}
/* Mises en situation : boutons de vue entre le dessin et la mention. */
.rpc-vues {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .5rem .75rem;
  background: rgba(255, 255, 255, .72);
  border-top: 1px solid rgba(55, 42, 28, .08);
}
.rpc-vues__b {
  flex: none;
  padding: .42rem .8rem;
  border: 1px solid rgba(55, 42, 28, .18);
  border-radius: 999px;
  background: #fff;
  font: 400 12px/1 var(--m-sans);
  color: var(--m-encre-2, #4a4036);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.rpc-vues__b:hover { border-color: var(--m-noir, #1d1d1b); }
.rpc-vues__b[aria-pressed="true"] { background: var(--m-noir, #1d1d1b); border-color: var(--m-noir, #1d1d1b); color: #fff; font-weight: 500; }
.rpc-vues__b:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
.rpc-vues__etat { flex: none; font: 300 11px/1.3 var(--m-sans); color: var(--m-gris); }
.rpc-vues__etat:empty { display: none; }
.rpc-scene--photo { background: #e9e4dc; }

/* Zoom dans le cadre : le dessin s'agrandit sur place, le cadre coupe ce
   qui dépasse ; boutons − / % / + en haut à droite. */
.rpc-scene__cadre {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.rpc-scene__cadre > .rpc-toile { transform-origin: 0 0; }
.rpc-toile--zoom { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rpc-toile--zoom.est-agrandi { touch-action: none; cursor: grab; }
.rpc-toile--zoom.est-tire { cursor: grabbing; }
.rpc-zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 10px rgba(20, 15, 5, .14);
}
.rpc-zoom__b,
.rpc-zoom__n {
  display: inline-grid;
  place-items: center;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--m-encre, #1d1d1b);
  cursor: pointer;
}
.rpc-zoom__b { width: 32px; }
.rpc-zoom__b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.rpc-zoom__n {
  min-width: 3.6em;
  font: 500 11.5px/1 var(--m-sans, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}
.rpc-zoom__b:hover:not(:disabled),
.rpc-zoom__n:hover:not(:disabled) { background: rgba(55, 42, 28, .08); }
.rpc-zoom__b:disabled { opacity: .3; cursor: default; }
.rpc-zoom__n:disabled { cursor: default; }
.rpc-zoom__b:focus-visible,
.rpc-zoom__n:focus-visible { outline: 2px solid var(--m-focus, #1d1d1b); outline-offset: 1px; }
@media (max-width: 620px) {
  .rpc-vues { gap: .3rem; padding: .45rem .6rem; }
  .rpc-vues__b { padding: .38rem .65rem; font-size: 11.5px; }
}
.rpc-toile--attente { opacity: .55; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  .rpc-vues__b, .rpc-toile--attente { transition: none; }
}
/* Autre thème : l'aperçu se place au-dessus de la galerie. */
.rpc-scene--seule {
  position: relative;
  inset: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
  border-radius: 10px;
  overflow: hidden;
}

/* Bascule photos / aperçu. */
.rpc-bascule {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  padding: .5rem .85rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 10px rgba(20, 15, 5, .14);
  font: 500 12px/1 var(--m-sans);
  color: var(--m-encre);
  cursor: pointer;
}
.rpc-bascule:hover { background: #fff; }
.rpc-bascule:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
.rpc-bascule[hidden] { display: none; }
.rpc-scene--seule + .rpc-bascule { position: static; margin: -.4rem 0 1rem; }

/* Vignette « Aperçu » dans la colonne des photos. */
.rpc-gal-v { display: block; }
.rpc-gal-v[hidden] { display: none; }
.rpc-gal-v .rpc-toile { position: absolute; inset: 0; }
.rpc-gal-v__n {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .2rem 0 .25rem;
  background: rgba(255, 255, 255, .85);
  font: 500 9.5px/1 var(--m-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--m-encre);
}

/* Bandeau compact : collé sous l'en-tête, sans pousser le contenu. */
.rpc-mini {
  position: sticky;
  top: calc(var(--rpc-haut, 0px) + 8px);
  z-index: 30;
  height: 0;
}
.rpc-mini[hidden] { display: none; }
.rpc-mini__b {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .4rem .7rem .4rem .4rem;
  border: 1px solid var(--m-trait);
  border-radius: 10px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 6px 22px rgba(20, 15, 5, .14);
  animation: rpc-glisse .18s ease-out;
}
.rpc-mini__toile { flex: none; width: 118px; height: 46px; border-radius: 6px; }
.rpc-mini__t { display: grid; gap: .2rem; min-width: 0; }
.rpc-mini__t span {
  overflow: hidden;
  font: 300 11.5px/1.3 var(--m-sans);
  color: var(--m-encre-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rpc-mini__t b { font: 500 13px/1.2 var(--m-sans); color: var(--m-encre); }
@keyframes rpc-glisse { from { opacity: 0; transform: translateY(-6px); } }

/* Une colonne (tablette, téléphone) : le bandeau devient une vraie bande
   d'aperçu sur toute la largeur, résumé et prix dessous. */
@media (max-width: 980px) {
  .rpc-mini__b { flex-wrap: wrap; gap: .35rem; padding: .4rem; }
  .rpc-mini__toile { flex: 1 1 100%; width: 100%; height: 76px; }
  .rpc-mini__t {
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .8rem;
    padding: 0 .3rem .1rem;
  }
}

/* Écran large : l'aperçu accompagne le défilement dans la colonne de la
   galerie (placé par le script). */
.rpc-dock {
  position: fixed;
  z-index: 35;
  overflow: hidden;
  border: 1px solid var(--m-trait);
  border-radius: 12px;
  background: #f3ede3;
  box-shadow: 0 10px 30px rgba(20, 15, 5, .14);
  animation: rpc-glisse .2s ease-out;
}
.rpc-dock[hidden] { display: none; }
.rpc-dock .rpc-toile { height: auto; aspect-ratio: 100 / 62; }
.rpc-dock__note {
  margin: 0;
  padding: .45rem .9rem .55rem;
  font: 300 11px/1.45 var(--m-sans);
  color: var(--m-gris);
  text-align: center;
  background: rgba(255, 255, 255, .55);
}
/* Barre basse (téléphone) : prix et bouton d'action quand les vrais boutons sont hors de l'écran. */
.rpc-barre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--m-ligne, #e3e6ea);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, .08);
}
.rpc-barre[hidden] { display: none; }
.rpc-barre__prix { font-size: 15px; line-height: 1.25; color: var(--m-encre); min-width: 0; }
.rpc-barre__btn { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
@media (max-width: 980px) { html.rpc-barre-ouverte body { padding-bottom: 72px; } }
@media (min-width: 981px) { .rpc-barre { display: none !important; } }
@media print { .rpc-dock, .rpc-mini, .rpc-barre { display: none !important; } }

/* ==================================================================
   ÉTAPE DE MARQUAGE
   ================================================================== */
.rpc-modes { margin-bottom: 1rem; }
.rpc-modes .m-choix { gap: .45rem; }
.rpc-modes .m-choix svg { width: 16px; height: 16px; flex: none; }

/* Texte OU logo : avec le script, seul le panneau choisi reste. */
.rpc-js [data-rpc-panneau]:not(.est-actif) { display: none; }
.rpc-panneau { display: grid; gap: .5rem; }
.rpc-panneau .m-sous__un { margin-top: .7rem; }
/* Hauteur propre : le bouton « Retirer » reste sous la zone de dépôt. */
.rpc-panneau .m-depot label { min-height: 128px; height: auto; }
.m-depot__vue {
  max-width: 70%;
  max-height: 72px;
  object-fit: contain;
  border-radius: 4px;
}
.m-depot__vue[hidden] { display: none; }

.rpc-marquage__commun {
  display: grid;
  gap: .9rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--m-trait);
}

/* Taille du marquage. */
.rpc-logo-teinte .m-choix { gap: .45rem; }
.rpc-teinte {
  display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .25);
}
.rpc-teinte--noir { background: #1d1d1b; }
.rpc-teinte--blanc { background: #fff; }
.rpc-teinte--origine { background: conic-gradient(#d9433a, #e8b62c, #3a9b5c, #2f6fb5, #8a4bb0, #d9433a); }
.rpc-taille .m-sous__lab { display: flex; justify-content: space-between; gap: 1rem; }
.rpc-taille output { font-weight: 500; color: var(--m-encre); }
.rpc-taille input[type="range"] { width: 100%; margin: .2rem 0 0; accent-color: var(--m-noir); }

/* Polices d'impression de l'atelier du ruban satin (10, 15, 20 mm), pour
   un aperçu exact (2.10.4). Licences web déclarées par le propriétaire le
   19 octobre 2026 (voir assets/fonts/LICENCES.md). Préfixe « RP » : une
   police du même nom installée sur le poste du client ne prend pas la place. */
@font-face {
  font-family: "Almibar";
  src: url("../fonts/almibar.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Foundation Sans";
  src: url("../fonts/foundation-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Foundation Roman";
  src: url("../fonts/foundation-roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Avalon";
  src: url("../fonts/avalon.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Episode";
  src: url("../fonts/episode.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Peynaud";
  src: url("../fonts/peynaud.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP OCR-A";
  src: url("../fonts/ocr-a.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Maiandra GD";
  src: url("../fonts/maiandra.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Mexico Serial";
  src: url("../fonts/mexico.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Pauline";
  src: url("../fonts/pauline.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Caligula";
  src: url("../fonts/caligula.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Dungeon";
  src: url("../fonts/dungeon.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Wizzard";
  src: url("../fonts/wizzard.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Kid Print";
  src: url("../fonts/kid-print.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Kristen";
  src: url("../fonts/kristen.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Vassallo";
  src: url("../fonts/vassallo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Jambo";
  src: url("../fonts/jambo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Birmingham";
  src: url("../fonts/birmingham.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Rosarian";
  src: url("../fonts/rosarian.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Crostini";
  src: url("../fonts/crostini.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Polices du configurateur d'Euroko (tour de cou, bracelets tissu, Tyvek et
   RFID), relevées le 20 octobre 2026 (2.11.3). Google Fonts sous licence
   libre (SIL OFL ou Apache 2.0), jeu latin, servies depuis l'extension. */
@font-face {
  font-family: "RP Roboto";
  src: url("../fonts/eu-roboto.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Bebas Neue";
  src: url("../fonts/eu-bebas-neue.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Righteous";
  src: url("../fonts/eu-righteous.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Maven Pro";
  src: url("../fonts/eu-maven-pro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Russo One";
  src: url("../fonts/eu-russo-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Raleway";
  src: url("../fonts/eu-raleway.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Black Ops One";
  src: url("../fonts/eu-black-ops-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Quicksand";
  src: url("../fonts/eu-quicksand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Audiowide";
  src: url("../fonts/eu-audiowide.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Grandstander";
  src: url("../fonts/eu-grandstander.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Calistoga";
  src: url("../fonts/eu-calistoga.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Bungee";
  src: url("../fonts/eu-bungee.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Bruno Ace";
  src: url("../fonts/eu-bruno-ace.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Rubik Mono One";
  src: url("../fonts/eu-rubik-mono-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Teko";
  src: url("../fonts/eu-teko.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Alegreya";
  src: url("../fonts/eu-alegreya.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Spectral";
  src: url("../fonts/eu-spectral.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Merriweather";
  src: url("../fonts/eu-merriweather.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Playfair Display";
  src: url("../fonts/eu-playfair-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Racing Sans One";
  src: url("../fonts/eu-racing-sans-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Great Vibes";
  src: url("../fonts/eu-great-vibes.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Pacifico";
  src: url("../fonts/eu-pacifico.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Lobster Two";
  src: url("../fonts/eu-lobster-two.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "RP Courgette";
  src: url("../fonts/eu-courgette.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Cartes de police : le texte du client dans chaque police. */
.m-polices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 8px;
}
.m-police {
  display: grid;
  gap: .35rem;
  align-content: start;
  padding: .75rem .7rem .6rem;
  border: 1px solid var(--m-trait);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}
/* Exemple sur deux lignes au plus : les polices larges (OCR-A, Episode…)
   se lisent en entier au lieu d'être coupées par des points de suspension. */
.m-police__ex {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(15px, 4vw, 19px);
  line-height: 1.25;
  color: var(--m-encre);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.m-police__n { font: 300 10.5px/1.2 var(--m-sans); color: var(--m-gris); }
.m-police:not(.est-indispo):hover { border-color: var(--m-gris-2); }
/* Une police exclue par une règle (autre largeur, autre atelier) est
   masquée plutôt que grisée : la liste ne montre que ce qui s'imprime. */
.m-police.est-indispo,
.rpc-cacher-indispo .est-indispo { display: none; }
.m-police.est-choisi { border-color: var(--m-noir); box-shadow: inset 0 0 0 1px var(--m-noir); }
.m-police.est-choisi .m-police__n { color: var(--m-encre); font-weight: 500; }

/* Teinte au choix : sélecteur de couleur et référence. */
.rpc-libre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem 1rem;
  align-items: end;
  margin-top: .8rem;
  padding: .8rem .9rem;
  border: 1px solid var(--m-trait);
  border-radius: 8px;
  background: var(--m-creme-2, #faf8f4);
}
.rpc-js .rpc-libre:not(.est-actif) { display: none; }
.rpc-libre label { display: grid; gap: .35rem; margin: 0; }
.rpc-libre .m-lab { margin: 0; }
.rpc-libre__champ { display: flex; align-items: center; gap: .55rem; }
.rpc-libre input[type="color"] {
  width: 46px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--m-trait);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.rpc-libre code { font: 500 12px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--m-encre-2); }

/* Récapitulatif du devis : l'image de l'aperçu. */
.rpc-devis__apercu { margin: 1rem 0 0; }
.rpc-devis__apercu img { display: block; width: 100%; height: auto; border-radius: 8px; }
.rpc-devis__apercu figcaption { margin-top: .35rem; font: 300 11px/1.4 var(--m-sans); color: var(--m-gris); }

@media (max-width: 620px) {
  .rpc-libre { grid-template-columns: minmax(0, 1fr); }
  .rpc-mini__toile { height: 64px; }
  .rpc-bascule { top: 10px; left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rpc-mini__b, .rpc-dock { animation: none; }
}

/* Prix TTC sous le prix HT, délai de livraison et valeurs « Sur devis »
   (audit de lancement du 19 octobre 2026). */
.m-prix .m-prix__ttc { margin-top: .2rem; font-size: 12px; color: var(--m-encre-2); }
.m-prix .m-prix__delai,
.m-prix__delai { flex: 1 0 100%; margin: 0; padding-top: .55rem; border-top: 1px solid rgba(0, 0, 0, .08); font: 400 12px/1.4 var(--m-sans); color: var(--m-encre); }
.m-apercu__prix .m-apercu__ttc { margin-top: .3rem; font-size: 12px; color: var(--m-encre-2); }
.rpc-badge-devis {
  display: inline-block;
  margin-left: .35rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--m-encre, #1d1d1b);
  color: #fff;
  font: 500 10px/1.5 var(--m-sans, sans-serif);
  letter-spacing: .02em;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
}
.m-tuile .rpc-badge-devis { align-self: flex-start; justify-self: center; margin: .35rem 0 0; }

/* Aperçu sans saisie : le logo d'exemple est signalé comme tel. */
[data-rpc-apercu].est-exemple,
.rpc-scene__cadre.est-exemple { position: relative; }
[data-rpc-apercu].est-exemple::after,
.rpc-scene__cadre.est-exemple::after {
  content: attr(data-rpc-exemple-lab);
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(12, 17, 28, .72); color: #fff;
  font: 600 11px/1.3 var(--m-sans, sans-serif); letter-spacing: .02em;
  pointer-events: none;
}
/* Grande photo : en bas à gauche, le haut porte déjà « Aperçu en temps réel » et le zoom. */
.rpc-scene__cadre.est-exemple::after { top: auto; bottom: 12px; left: 12px; }