/* =========================================================
   FONTS
   ========================================================= */
@font-face {
  font-family: "Priscilla";
  src: url(fonts/Priscilla-Regular.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Priscilla-Extended";
  src: url(fonts/Priscilla-Extended.woff2) format("woff2");
}
@font-face {
  font-family: "Elsie-Regular";
  src: url(fonts/ElsieSingleLine-Regular.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Elsie-Extended";
  src: url(fonts/ElsieSingleLine-Extended.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lamia-1";
  src: url(fonts/Lamia/Lamia-1-Archive.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lamia-2";
  src: url(fonts/Lamia/Lamia-2-Germer.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lamia-3";
  src: url(fonts/Lamia/Lamia-3-Bourgeonner.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lamia-4";
  src: url(fonts/Lamia/Lamia-4-Eclore.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lamia-5";
  src: url(fonts/Lamia/Lamia-5-Pousser.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lamia-6";
  src: url(fonts/Lamia/Lamia-6-Fleurir.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lamia-7";
  src: url(fonts/Lamia/Lamia-7-Prosperer.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lamia-8";
  src: url(fonts/Lamia/Lamia-8-Orner.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lamia-9";
  src: url(fonts/Lamia/Lamia-9-Verdoyer.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rozsika-Regular";
  src: url(fonts/Rozsika-Regular.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rozsika-Extended";
  src: url(fonts/Rozsika-Extended.woff2) format("woff2");
}
@font-face {
  font-family: "Rozsika-Extra-Extended";
  src: url(fonts/Rozsika-Extra-extended.woff2) format("woff2");
}
@font-face {
  font-family: "Lorina-Regular";
  src: url(fonts/Lorina/Lorina-Regular.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lorina-SemiExtended";
  src: url(fonts/Lorina/Lorina-Semi-extended.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lorina-Extended";
  src: url(fonts/Lorina/Lorina-Extended.woff2) format("woff2");
}
@font-face {
  font-family: "Lorina-Thin";
  src: url(fonts/Lorina/Lorina-Thin.woff2) format("woff2");
}
@font-face{
  font-family: "Hollie";
  src: url(fonts/Hollie-Extended.woff2) format("woff2");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hollie-Condensed";
  src: url(fonts/Hollie-Condensed.woff2) format(woff2);
}
/* =========================================================
   VARIABLES
   ========================================================= */
:root {
  --rouge: #ff0000;
  --blanc: #ffffff;
  --gris: #f5f5f5;
  --txt: #151515;

  --dur: 600ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --bandeau-h: 40px;
}

/* Ligatures */
html, body {
  font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "dlig" 1;
}
.font-band .sample,
.font-details .intro,
.specimen p,
#view-recherche p {
  font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "dlig" 1;
}
.font-band {
  font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "dlig" 1;
}
.ss01 { font-feature-settings: "ss01" 1; }
.hlig { font-feature-settings: "hlig" 1; }

/* =========================================================
   BASE
   ========================================================= */
* { box-sizing: border-box; }
html, body { height: 100%; }

html {
  font-size: 15px;
}

body {
  margin: 0;
  color: var(--txt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  overflow: hidden;
}
img { max-width: 100%; height: auto; display: block; }
p { font-family: "Elsie-Regular"; }

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: transparent;
}

/* =========================================================
   SCÈNE (accueil + bas)
   ========================================================= */
#app { height: 100vh; width: 100vw; position: relative; }
#stage {
  position: absolute; inset: 0;
  height: 200vh; 
  transform: translateY(0);
  transition: transform var(--dur) var(--ease);
}
#app[data-state="bottom"] #stage { transform: translateY(-100vh); }



/* =========================================================
   IMAGES ARCHIVES (accueil)
   ========================================================= */

.accueil {
  position: relative;
  overflow: hidden;
}

.asciiCanvasHome {
  z-index: -1;
}

#accueil .inner {
  position: relative;
  z-index: 2;
}

/* Conteneur des images d'archives */
.accueil-archives {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}

/* Images en "vrac" */
.accueil-archives img {
  position: absolute;
  width: clamp(120px, 15vw, 220px);
  transform-origin: center center;
  transition: transform 0.3s ease, opacity 0.25s ease;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  animation: archive-float var(--float-duration, 7s) ease-in-out infinite;
}

/* Effet de flottement léger */
@keyframes archive-float {
  0% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(-10px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) translateY(0px);
  }
}
.accueil-archives.archives-search-layout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 2rem;
  overflow-y: auto;
    padding-bottom: 5rem;
}

#accueil.show-archives .accueil-archives {
  opacity: 1;
  pointer-events: auto;
}
#accueil.show-archives .accueil-archives img {
  pointer-events: auto;
  cursor: pointer;
}

#accueil.show-archives .asciiCanvasHome {
  opacity: 0;
  pointer-events: none;
}

.accueil-archives.archives-search-layout img {
  width: auto !important;
  max-width: none !important;
}
/* =========================================================
   BOUTON "ARCHIVE" + RECHERCHE
   ========================================================= */

.accueil-archive-toggle {
  background: transparent;
  color: var(--blanc);
  font-family: "Lorina-Regular";
  font-size: clamp(2.6rem, 6vw, 2.8rem);
  line-height: 1;
  margin-top: 1.5rem;
  margin-left:4rem;
  border: none;
}
.accueil-archive-toggle:hover {
  color: #000;
  text-decoration: none;
}

/* Texte d'accueil par défaut */
.accueil-text {
  display: block;
}

/* Conteneur de la recherche (overlay) */
.accueil-search {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Passage en mode archives */
#accueil.show-archives .accueil-text {
  display: none;
}
#accueil.show-archives .inner {
  display: none;
}

/* Animation d'apparition de la recherche */
#accueil .accueil-search {
  position: relative;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
#accueil.show-archives .accueil-search {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Bouton fermer la recherche */
.accueil-search-close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
       font-family: "Elsie-Regular", system-ui, -apple-system, sans-serif;
}
.accueil-search-close:hover {
  color: #000;
}

/* Label + champ de recherche */
.accueil-search-label {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 32rem;
  margin: 0 auto;
  text-align: left;
  color: #fff;
}
.accueil-search-label span {
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

/* Input de recherche */
.accueil-search-input {
  width: 100%;
  font-family: "Elsie-Regular";
  padding: 0.6rem 0.9rem;
  font-size: 1rem;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
}
.accueil-search-input::placeholder {
  color: #fff;
}
.accueil-search-input:focus {
  outline: none;
}

/* Nettoyage des boutons "clear" natifs */
.accueil-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.accueil-search-input::-ms-clear {
  display: none;
}
.accueil-search-input::-moz-search-clear {
  display: none;
}

/* =========================================================
   LIGHTBOX ARCHIVES
   ========================================================= */

.archive-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000; /* au-dessus de tout (bandeau inclus) */
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* activé seulement en visible */
  font-family: "Elsie-Regular", system-ui, -apple-system, sans-serif;
}
.archive-lightbox.is-visible {
  display: flex;
  pointer-events: auto;
}

.archive-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

/* Contenu centré : image + légende + bouton */
.archive-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(80vw, 900px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

/* Image agrandie */
.archive-lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

/* Légende sous l’image */
.archive-lightbox-caption {
  margin-top: 0.75rem;
  max-width: 600px;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.4;
}

/* Bouton de fermeture (croix) */
.archive-lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.archive-lightbox-close:hover {
  color: black;
}

.accueil-archives .archive-lightbox-caption {
  display: none !important;
}

#accueil.show-archives .accueil-search .archives-next-page{
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.4rem; 
  transform: translateY(-1.5px); 
  line-height: 0.6;
   cursor: pointer;
     font-family: "Elsie-Regular", system-ui, -apple-system, sans-serif;
}

#accueil.show-archives .accueil-search .search-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
    font-family: "Elsie-Regular", system-ui, -apple-system, sans-serif;
      margin-top: 0.4rem;
}

#accueil.show-archives .accueil-search .archives-next-page:hover{
  color: #000;
}

/* =========================================================
   DIFFÉRENTS PANNEAUX
   ========================================================= */
.panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.inner {
  width: min(72ch, 92vw);
  padding: 2rem 0 4rem;
  text-align: center;
  margin: 0 auto;
}

/* =========================================================
   ACCUEIL (ROUGE)
   ========================================================= */
.accueil {
  background: var(--rouge);
  color: var(--blanc);
  justify-content: center;
}
#accueil { position: relative; isolation: isolate; }
#accueil .inner { position: relative; z-index: 5; }
.asciiCanvasHome { z-index: 0; }

.accueil .inner { 
  width: min(56ch, 92vw); 
  padding-top: 80px;
}

.accueil h1{
  font-weight: normal;
  font-size: clamp(5rem,10vw,8.5rem); 
  line-height: 1;
  margin: 0;
}


/* ——— UNE CLASSE PAR VARIANTE DE LA FONTE ——————————————————— */
/* ⚠️ Elles doivent correspondre EXACTEMENT aux noms de tes @font-face */

.lamia-1 { font-family: "Lamia-1"; }
.lamia-2 { font-family: "Lamia-2"; }
.lamia-3 { font-family: "Lamia-3"; }
.lamia-4 { font-family: "Lamia-4"; }
.lamia-5 { font-family: "Lamia-5"; }
.lamia-6 { font-family: "Lamia-6"; }
.lamia-7 { font-family: "Lamia-7"; }
.lamia-8 { font-family: "Lamia-8"; }
.lamia-9 { font-family: "Lamia-9"; }


.accueil p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 22px;
  text-align: left;
}
.accueil p[data-target="1"] { margin-top: 50px; }
.accueil p[data-target="2"] {
  margin-top: 30px;
  text-align: center;
  line-height: 1.6;
}
.accueil p[data-target="3"] {
  margin-top: 16px;
  text-align: center;
  line-height: 1.6;
  font-family: "Lorina-Thin";
  font-size: 1.5rem;
}

p[data-target="3"] .About {
  font-family: "Priscilla" !important;
  font-size: 2.75rem;
  display: inline-block;
  transform: translateY(0.1em);
}

.accueil p[data-target="4"] {
  margin-top: 16px;
  text-align: center;
  line-height: 1.6;
  font-family: "Elsie";
  font-size: 1.5rem;
  text-decoration: none;
}

.accueil p[data-target="4"] a{
  color : inherit;
  text-decoration: none;
}

.accueil p[data-target="4"] a:hover{
  color : black;
  text-decoration: none;
}

p[data-target="5"] .About {
  font-family: "Priscilla" !important;
  margin-top: -1rem;
  font-size: 2rem;
  display: inline-block;
}


.accueil .jump {
  appearance: none; border: none; background: transparent;
  color: var(--blanc); cursor: pointer; font: inherit; 
  text-decoration: none; transition: color .25s ease;
}
.accueil .jump:hover { color: #ffdcdc; }
.accueil .jump:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }

.accueil .jump[data-target="fonderie"] {
  color: var(--blanc);
  font-family: "Rozsika-Regular";
  font-size: clamp(2.6rem, 6vw, 3.7rem);
  line-height: 1;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
}
.accueil .jump[data-target="fonderie"]:hover { color: black; }

.accueil .jump[data-target="recherche"] {
  color: var(--blanc);
  font-family: "Priscilla";
    font-size: clamp(2.8rem, 6vw, 3.7rem);
  line-height: 1;
  margin-left: 13rem;
  margin-bottom: 0.4rem;
}
.accueil .jump[data-target="recherche"]:hover { color: black; }
/* =========================
   INTRO MODAL — BASE (sans wrapper)
   ========================= */

/* Empêche le scroll de la page quand la modale est ouverte */
body.modal-open {
  overflow: hidden;
}

/* Calage manuel : modifie cette valeur pour descendre/monter */
:root {
  --intro-top: 77%; /* ex: 65% (plus bas), ou 40% (plus haut) */
  --intro-left: 50%;
  --intro-width: min(860px, 92vw);
  --intro-maxh: 88vh;
}

.intro-modal {
  position: fixed;
  overflow: hidden;
  inset: 0;
  display: none;
  z-index: 99999;
}

.intro-modal.is-open {
  display: block;
}

/* voile */
.intro-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* carte */
.intro-card {
  position: absolute;
  left: var(--intro-left);
  top: var(--intro-top);
  transform: translate(-50%, -50%);
  z-index: 1;
  overflow: hidden;

  /* IMPORTANT : pour éviter le “carré noir” */
  background: transparent;
  border: 0;
  box-shadow: none;

  width: var(--intro-width);
  max-height: var(--intro-maxh);

  /* si ton SVG dépasse, on scroll dans la carte */
  overflow: auto;

  /* petit confort */
  padding: 0;
}

/* bouton fermer */
.intro-close {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 2;
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  padding: 6px 0px;
  cursor: pointer;
  font-family: "Elsie-Regular";
  font-size: 1.2rem;
}

/* SVG */
.intro-svg {
  display: block;
  overflow: visible;
  width: 100%;
  height: auto;
    transform: scale(1.2); /* facteur d’agrandissement */
  transform-origin: center;

  /* limite hauteur (sinon ça explose) */
  max-height: calc(var(--intro-maxh) - 10px);

  /* on garde le fond transparent */
  background: transparent;
}



/* Optionnel : si certains navigateurs rendent des <text> différemment */
.intro-svg text {
  /* ne force pas la font ici si tu l’as déjà fixée dans le SVG */
  fill: #fff;
}

/* Accessibilité : réduit motion si besoin */
@media (prefers-reduced-motion: reduce) {
  .intro-card {
    transform: translate(-50%, -50%);
  }
}

.intro-svg .svg-close { cursor: pointer; }
.intro-svg .svg-close:hover path { opacity: 0.7; }


/* =========================================================
   BAS / PANEL FONDERIE (contient 2 VUES)
   ========================================================= */
.fonderie {
  background: var(--gris);
  color: var(--txt);
  overflow-y: auto;
  overflow-x: hidden;
}

.view { display: none; }
#app[data-page="fonderie"]  #view-fonderie  { display: block; }
#app[data-page="recherche"] #view-recherche { display: block; }

/* VUE FONDERIE */
#view-fonderie h2 {
  font-size: clamp(1.4rem, 1vw + 1.1rem, 2rem);
  margin: 2rem 0 1rem;
}
#view-fonderie p {
  line-height: 1.7;
  max-width: 70ch;
  margin: 1rem auto;
}
.long-content p { margin: 1.2rem auto; line-height: 1.6; }

#view-fonderie .ornement-cute{
  font-family:"Elsie-Regular";
  font-size: 1.4rem;
  color: #ff0000;
}
#view-fonderie .cute{
  font-family:"Priscilla";
  font-size: 1rem;
  line-height: 0.7;
   text-decoration: none;
}
#view-fonderie .cute:hover{
  font-family:"Priscilla";
  font-size: 1rem;
  line-height: 0.7;
  color: red;
  cursor: pointer;
  text-decoration: none;
}
/* uniquement ce lien-là */
a.licence-link,
a.licence-link:link,
a.licence-link:visited,
a.licence-link:hover,
a.licence-link:active {
  color: inherit;
  text-decoration: none;
}

/* optionnel : style du mot */
a.licence-link .cute {
  cursor: pointer;
}


/* VUE RECHERCHE */
#view-recherche {
  color: var(--txt);
  min-height: 100%;
  padding-top: 80px;
}
#view-recherche .inner {
 width: 100%;
 max-width: none;
 margin:0;
 padding:0;
}
#view-recherche h2 {
  font-family: "Lorina-SemiExtended";
  font-weight: 400;
  text-align: left;
  margin-top: 0;
  font-size: 3.3rem;
}
#view-recherche h3 {
  font-family: "Elsie-Regular";
  text-align: left;
  margin-top: 2rem;
  font-size: 2.3rem;
    font-weight: 400;
}
#view-recherche h4 {
  font-family: "Elsie-Regular";
  text-align: left;
  margin-top: 2rem;
  font-size: 1.3rem;
    font-weight: 400;
}
#view-recherche p{
  width: min(100ch, 92vw);
  margin-inline: 0;
  text-align: left;
  line-height: 1.6;
  margin-top: 1rem;
}
#view-recherche p[data-target="intro"]{
  font-family:"Priscilla";
  font-size: 1.4rem;
  margin-left: 60px;
  line-height: 1;
}
#view-recherche p[data-target="Citation"]{
  width: 100%;
  max-width: 100ch;   
  font-family:"Priscilla";
  font-size: 1.4rem;
  line-height: 1; 
}
#view-recherche .Citation {
  font-family: "Priscilla";
  font-size: 1.3rem;
  line-height: 0.7;
}

/* =========================================================
   BANDEAU FIXE HAUT
   ========================================================= */
#bandeau {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--bandeau-h);
  background: var(--rouge);
  border: none; padding: 0;
  cursor: pointer; z-index: 99;
  display: none;
}
#bandeau { isolation: isolate; }
#bandeau .asciiCanvasBandeau {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Croix en haut à droite, au-dessus de la frise */
#bandeau .bandeau-close{
  position: absolute;
  top: 0.7rem;
  right: 0.5rem;
  z-index: 2; /* au-dessus du canvas */

  background: transparent;
  border: none;
  cursor: pointer;

  font-family: "Elsie-Regular", sans-serif;
  font-feature-settings: "liga" 1, "dlig" 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures;

  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
-webkit-text-stroke: 1px;
}

/* Même comportement que ton motif : noir au survol du bandeau */
#bandeau:hover .bandeau-close{
  color: #000;
}


/* =========================================================
   FONDERIE — ITEMS (wrapper)
   ========================================================= */
.font-item {
  --band-h: 90px;
  --band-mt: 14px;
  --edge-left: none;
  --edge-right: none;
  --edge-left-w: 28px;
  --edge-right-w: 28px;
  --inset-x: 70px;
  --gutter: 20px;
}
.view .font-item.is-first {
  margin-top: calc(var(--bandeau-h) + 25px);
}

/* =========================================================
   BANDEAUX DÉFILANTS
   ========================================================= */
.font-band {
  --ff: inherit;
  --fs: 32px;          
  --baseline-nudge: 0;

  display: flex;
  align-items: center;
  width: 100%;
  background: var(--rouge);
  color: var(--blanc);
  text-align: left;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow-x: hidden;
  overflow-y: visible;
  margin: 14px 0 0;
  padding-block: 0.45em;
  isolation: isolate;
  min-height: calc((var(--fs) * 1.1) + 0.6em);
  position: relative; 
}

.font-band:hover { background: #000; }
.font-band.hover { background: #000; }


/* Bords ondulés « textile » */

.font-band-wrap {
  position: relative;
}

.font-band-wrap::before,
.font-band-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 24px;                       /* hauteur du bloc vague */
  background-repeat: repeat-x;
  background-size: 24px 24px;         /* taille d’une bosse */
  background-image: radial-gradient(
    ellipse 60% 25% at center,
    #000000 12px,
    transparent 12px
  );
  opacity: 0;                         /* caché par défaut */
  pointer-events: none;
  z-index: 0;                         /* derrière le texte */
}

/* vague du haut : moitié dedans / moitié dehors */
.font-band-wrap::before {
  top: -13px;                         /* 12px au-dessus, 12px dans le bandeau */
}

/* vague du bas : moitié dedans / moitié dehors */
.font-band-wrap::after {
  bottom: -13px;
}

/* ton hover existant */
.font-band-wrap:hover,
.font-band-wrap.hover {
  background: #000;
}

/* on affiche les vagues au survol, sans transition */
.font-band-wrap:hover::before,
.font-band-wrap:hover::after,
.font-band-wrap.open::before,
.font-band-wrap.open::after {
  opacity: 1;
}

.font-band.loading {
  visibility: hidden;
}

.font-band .marquee {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  white-space: nowrap;
  gap: 1.6rem;
  padding: 10px 0;
  padding-left: 26px;
  will-change: transform;
  animation: none;
  background: transparent;
  overflow: visible;
}

.font-band .sample { 
  display: inline-block; 
  line-height: 1.2; 
  padding-right: 14px;
  position: relative;
  overflow: visible;
  font-family: var(--ff, inherit);
  font-size: var(--fs, inherit);
  transform: translateY(var(--baseline-nudge, 0));
}

.font-band.hover .marquee { 
  animation: marquee-left var(--marquee-speed, 12s) linear infinite; 
}
@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-distance, 600px))); }
}

/* Variantes par famille */
.font-band[data-font="Priscilla"] {
  --ff: "Priscilla", serif;
  --fs: 40px;
  --baseline-nudge: -0.1em;
}
.font-band[data-font="Elsie"] {
  --ff: "Elsie-Regular", serif;
  --fs: 42px;
}
.font-band[data-font="Lamia"] {
  --ff: "Lamia-9", serif;
  --fs: 54px;
}
.font-band[data-font="Hollie"] {
  --ff: "Hollie", serif;
  --fs: 70px;
  --baseline-nudge: -0.1em;
  font-weight: 550;
}
.font-band[data-font="Lorina"] {
  --ff: "Lorina-Regular", serif;
  --fs: 42px;
  --baseline-nudge: 0.08em;
}
.font-band[data-font="Rozsika"] {
  --ff: "Rozsika-Regular", serif;
  --fs: 68px;
}

/* Hollie Condensed : remonter un peu plus */
.font-band[data-font="Hollie"][data-variant="Condensed"] {
  --baseline-nudge: -1em; /* ajuste */
}

.font-band,
.font-band:focus,
.font-band:focus-visible,
.font-band:focus-within {
  outline: none !important;
  box-shadow: none !important;
}
.font-band .sample[contenteditable="true"] {
  outline: none !important;
  box-shadow: none !important;
  caret-color: currentColor;
}
.font-band { -webkit-tap-highlight-color: transparent; }

.font-band {
  font-family: var(--ff, inherit);
  font-size: var(--fs, inherit);
  line-height: 1;
  padding-block: 0.2em;
  overflow-y: visible;
}
.font-band .sample {
  font: inherit;
  line-height: 1;
  overflow: visible;
  padding-right: 14px;
    transform: translateY(var(--baseline-nudge, 0));
}

/* Ajustement spécifique Firefox */
@-moz-document url-prefix() {
  .font-band[data-font="Priscilla"] .sample {
    transform: translateY(0.08em); /* ajuste selon ce qui te semble parfait */
  }
}
@-moz-document url-prefix() {
  .font-band[data-font="Hollie"] {
    --baseline-nudge: 0.05em; /* base Hollie pour Firefox */
  }

  .font-band[data-font="Hollie"][data-variant="Condensed"] {
    --baseline-nudge: -0.18em; /* ou autre valeur spécifique */
  }
}
@-moz-document url-prefix() {
  .font-band[data-font="Rozsika"] .sample {
    transform: translateY(0.09em); /* ajuste selon ce qui te semble parfait */
  }
}
@-moz-document url-prefix() {
  .font-band[data-font="Lamia"] .sample {
    transform: translateY(0.08em); /* ajuste selon ce qui te semble parfait */
  }
}

.font-band[data-font="Hollie"][data-variant="Condensed"] .sample{
  -webkit-text-stroke: 0.001px currentColor;

  /* fallback (Firefox) */
  text-shadow:
    0.01px 0 0 currentColor,
    -0.01px 0 0 currentColor,
    0 0.01px 0 currentColor,
    0 -0.01px 0 currentColor;
}


/* =========================================================
   LABEL
   ========================================================= */
/* LABEL */
.font-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  padding-left: 36px;
  margin-top: 22px;
  margin-bottom: 22px;
  color: var(--rouge);
  font-family: "Elsie-Regular";
  font-size: 16px;
  text-decoration: none;
  transition: padding .25s ease, color .2s ease;
  cursor: default;
}

.font-label-main {
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}

.font-label-main:hover,
.font-label-main:focus-visible {
  color: #000;
  text-decoration: none;
  font-family: "Elsie-Extended";
  outline: none;
}



.font-label-row.open {
  margin-bottom: 0 !important;

}/* LABEL quand le panneau est ouvert */
.font-label-row.open .font-label-main {
  color: #000 !important;
  text-decoration: underline;
  font-family: "Elsie-Extended";
}

/* BANDEAU OUVERT (fond noir + stop défilement) */
.font-band.open {
  background: #000 !important;
  cursor: text;
}
.font-band.open .marquee {
  animation: none !important;
  transform: translateX(0) !important;
  background: transparent !important;
}

/* Quand on édite le texte dans un bandeau ouvert,
   on donne plus de hauteur aux lignes */
.font-band.open .sample[contenteditable="true"] {
  padding-block: 0.2em;  /* un chouïa de confort en plus */
}


/* DETAILS + ASCII */
.font-details {
  position: relative;
  background: transparent;
}
.font-details .details-inner { 
  position: relative; 
  width: min(110ch, 90vw);
  margin: 0 auto;
  padding: 2.2rem 1.4rem 3.2rem;
}
.asciiCanvas { 
  z-index: 0; 
}
.font-details .details-inner {
  position: relative;
  z-index: 1;
}
.font-details .asciiCanvas {
  opacity: 0;
  transition: opacity 300ms ease;
  will-change: opacity;
}

.font-item.open .font-details .asciiCanvas {
  opacity: 1;
}


.font-label-row{
  position: relative;
}

/* Bouton de variantes */
.font-label-row .style-toggle{
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-70%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 45px;
  line-height: 1;
  color: var(--rouge);
  padding: 0;
  flex: 0 0 auto;
}
.font-label .style-toggle:hover,
.font-label .style-toggle:focus-visible{
  color: #000;
  outline: none;
}

/* quand le panneau s’ouvre, on le décale seulement en X
.font-label-row.open .style-toggle {
  right: calc(36px + var(--inset-x) + var(--edge-right-w) + var(--gutter));
} */

/* CSS uniquement pour Firefox */
@-moz-document url-prefix() {
.font-label-row .style-toggle {
transform: translateY(-60%);
  }
}


/* Téléchargement */
.download-font-btn {
  position: static ;
  display: inline-block;
  font-family: "Elsie-Regular", serif;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;

  background: transparent;
  border: none;
  color: var(--rouge);
  cursor: pointer;

  transition: color 150ms ease, text-decoration-color 150ms ease;
  flex: 0 0 auto;
}

/* décalage en X quand le panneau est ouvert 
.font-label-row.open .download-font-btn {
  right: calc(260px + var(--inset-x) + var(--edge-right-w) + var(--gutter));
} */

.download-font-btn:hover,
.download-font-btn:focus-visible {
  font-family: "Elsie-Extended";
  background: transparent;
  color: black;
  text-decoration: underline;
  outline: none;
}

/* Curseurs */
.font-label-main,
.download-font-btn,
.font-label .style-toggle {
  cursor: pointer;
}

/* =========================================================
   SLIDER — petit nudge vertical indépendant
   ========================================================= */

.size-ctrl{
  position: absolute;
  top: 28px;
  right: 108px;

  display: flex;           
  align-items: center;
  gap: 8px;

  z-index: 10;
}


/* Slider */
.size-ctrl input[type="range"] {
  width: 90px;
  height: 1.5px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  vertical-align: middle;
  position: relative;
  top: 0;
}

.size-ctrl input[type="range"]::-webkit-slider-runnable-track {
  height: 1.5px;
  background: #000;
  border-radius: 0;
}
.size-ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  background: #000;
  border: none;
  border-radius: 0;
  margin-top: -4px;
  cursor: pointer;
}

.size-ctrl input[type="range"]::-moz-range-track {
  height: 1px;
  background: #000;
  border: none;
  border-radius: 0;
}
.size-ctrl input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  background: #000;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.size-ctrl .size-readout {
  font-family: "Elsie-Regular", serif;
  font-size: 14px;
  line-height: 1;
  min-width: 42px;
  text-align: right;
  color: #000;
}

/* ================================
   PANEL FONTE : 3 COLONNES
   ================================ */

.font-details-panel {
  display: grid;
  grid-template-areas: "info glyph preview";
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
  column-gap: 3rem;
  gap: 2.6rem;
  align-items: stretch;
  text-align: left;
  font-family: "Elsie-Regular", serif;
}

/* COLONNE 1 — TEXTE */
.font-info {
  grid-area: info;
  max-width: 34rem;
  margin-inline: 0;
}
.font-info-title {
  margin: 0 0 0.75rem;
  font-family: "Lorina-SemiExtended", serif;
  font-size: 1rem;
}
.font-info p {
  margin: 0.55rem 0;
  line-height: 0.8;
  font-size: 1.05rem;
}

/* ================================
   COLONNE 2 — TABLEAU GLYPHES
   ================================ */

.font-glyphs {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 22rem;
}

.font-glyphs-scroll-wrap {
  position: relative;
  display: inline-block;
}

.font-glyphs-scroll {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: visible;
  position: relative;
  padding-left: 2.2rem;
}

.font-glyphs-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.font-glyphs-scroll {
  scrollbar-width: none;
}
/* ================================
   Hollie
   ================================ */
.glyphs-hollie .font-glyphs-scroll-wrap {
  height: 500px;
}

.glyphs-hollie .font-glyphs-scroll {
  height: 100%;
  max-height: none;
}

.glyphs-hollie .font-glyphs-scroll-wrap,
.glyphs-hollie .font-glyphs-scroll,
.glyphs-hollie .font-glyphs-table {
  min-height: 680px;
}

.glyphs-hollie .font-glyphs-scroll-wrap {
  display: flex;
  flex-direction: column;
  height: 680px;
}

.glyphs-hollie .font-glyphs-scroll {
  flex: 1;
  max-height: none;
}

.glyphs-hollie .font-glyphs-scroll-wrap {
  height: 500px;
}
/* ================================
  Elsie
   ================================ */
.glyphs-elsie .font-glyphs-scroll {
  height: 100%;
  max-height: none;
}

.glyphs-elsie .font-glyphs-scroll-wrap,
.glyphs-elsie .font-glyphs-scroll,
.glyphs-elsie .font-glyphs-table {
  min-height: 600px;
}

.glyphs-elsie .font-glyphs-scroll-wrap {
  display: flex;
  flex-direction: column;
  height: 600px;
}

.glyphs-elsie .font-glyphs-scroll {
  flex: 1;
  max-height: none;
}
/* ================================
  Priscilla
   ================================ */
.glyphs-priscilla .font-glyphs-scroll {
  height: 100%;
  max-height: none;
}

.glyphs-priscilla .font-glyphs-scroll-wrap,
.glyphs-priscilla .font-glyphs-scroll,
.glyphs-priscilla .font-glyphs-table {
  min-height: 520px;
}

.glyphs-priscilla .font-glyphs-scroll-wrap {
  display: flex;
  flex-direction: column;
  height: 520px;
}

.glyphs-priscilla .font-glyphs-scroll {
  flex: 1;
  max-height: none;
}

/* ================================
  Lorina
   ================================ */
.glyphs-lorina .font-glyphs-scroll {
  height: 100%;
  max-height: none;
}

.glyphs-lorina .font-glyphs-scroll-wrap,
.glyphs-lorina .font-glyphs-scroll,
.glyphs-lorina.font-glyphs-table {
  min-height: 520px;
}

.glyphs-lorina .font-glyphs-scroll-wrap {
  display: flex;
  flex-direction: column;
  height: 520px;
}

.glyphs-lorina .font-glyphs-scroll {
  flex: 1;
  max-height: none;
}

/* ================================
  Lamia
   ================================ */
.glyphs-lamia .font-glyphs-scroll {
  height: 100%;
  max-height: none;
}

.glyphs-lamia .font-glyphs-scroll-wrap,
.glyphs-lamia .font-glyphs-scroll,
.glyphs-lamia.font-glyphs-table {
  min-height: 520px;
}

.glyphs-lamia .font-glyphs-scroll-wrap {
  display: flex;
  flex-direction: column;
  height: 520px;
}

.glyphs-lamia .font-glyphs-scroll {
  flex: 1;
  max-height: none;
}


/* ================================
  Rozsika
   ================================ */
.glyphs-rozsika .font-glyphs-scroll {
  height: 100%;
  max-height: none;
}

.glyphs-rozsika .font-glyphs-scroll-wrap,
.glyphs-rozsika .font-glyphs-scroll,
.glyphs-rozsika.font-glyphs-table {
  min-height: 520px;
}

.glyphs-rozsika .font-glyphs-scroll-wrap {
  display: flex;
  flex-direction: column;
  height: 520px;
}

.glyphs-rozsika .font-glyphs-scroll {
  flex: 1;
  max-height: none;
}

.font-glyphs-table {
  display: grid;
  grid-template-columns: repeat(var(--glyph-cols, 4), var(--glyph-cell-size, 4.5rem));
  justify-content: center;
  gap: 7px;
  font-size: 2.5rem;
  line-height: 1.4;
}


.glyph-cell {
  width: var(--glyph-cell-size, 4.5rem);
  height: var(--glyph-cell-size, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  line-height: 1.4;
  padding: 3px 2px;
  cursor: pointer;
  text-align: center;
}


.glyph-cell:hover,
.glyph-cell:focus-visible {
  color: var(--rouge);
  outline: none;
}

/* ================================
   BARRE “TEXTILE” À GAUCHE
   ================================ */

.glyph-scroll-track {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
}

/* Colonne scroll */
.glyph-scroll-hearts {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* ← important */
  height: 100%;
  font-family: "Lamia-9", serif;
  font-size: 0.25rem;
  line-height: 1;
}

.glyph-heart {
  display: inline-block;
  transform: scale(0.75);
  transform-origin: center;
}


/* Cœurs de la colonne */
.glyph-heart {
  opacity: 0;
  transition: opacity 150ms ease;
  margin-bottom: 0;
     display: inline-block;
}

.glyph-heart {
  opacity: 0.2;
  transition: opacity 150ms ease;
}

/* Calage tableau */
.font-band-wrap[data-font="Lamia"] ~ .font-details .font-glyphs {
  transform: translateX(1.4rem);
    --glyph-cell-size: 4.3rem;
    --glyph-cols: 4;
}
.font-band-wrap[data-font="Lamia"] ~ .font-details .glyph-preview {
  transform: translateX(-1.4rem);
}
.font-band-wrap[data-font="Elsie"] ~ .font-details .font-glyphs {
  transform: translateX(2.4rem);
    --glyph-cell-size: 4.5rem;
      --glyph-cols: 4;
}
.font-band-wrap[data-font="Elsie"] ~ .font-details .glyph-preview {
  transform: translateX(-1.4rem);
}
.font-band-wrap[data-font="Priscilla"] ~ .font-details .font-glyphs {
  transform: translateX(1.5rem);
  --glyph-cell-size: 4.1rem;
  --glyph-cols: 4;
}
.font-band-wrap[data-font="Priscilla"] ~ .font-details .glyph-preview {
  transform: translateX(-1.4rem);
}
.font-band-wrap[data-font="Rozsika"] ~ .font-details .font-glyphs {
  transform: translateX(3rem);
  --glyph-cell-size: 4.5rem;
  --glyph-cols: 4;
}
.font-band-wrap[data-font="Hollie"] ~ .font-details .glyph-preview {
  transform: translateX(0rem);
    --glyph-cell-size: 3.8rem;
      --glyph-cols: 4;
}
.font-band-wrap[data-font="Lorina"] ~ .font-details .font-glyphs{
    transform: translateX(2.4rem);
    --glyph-cell-size: 4.4rem;
      --glyph-cols: 4;
}

.font-band-wrap[data-font="Hollie"] ~ .font-details .font-glyphs{
    transform: translateX(2.4rem);
    --glyph-cell-size: 4.5rem;
      --glyph-cols: 4;
}
/* Grossir les lettres dans le glyph set */
.font-band-wrap[data-font="Hollie"][data-variant="Condensed"]
  ~ .font-details .glyph-cell {
  font-size: 5.2rem; /* un peu plus grand que 3.3rem */
}
.font-band-wrap[data-font="Hollie"][data-variant="Condensed"]
  ~ .font-details .font-glyphs-table {
  --glyph-cell-size: 5.1rem;
}



/* Tailles des fontes */
.font-band-wrap[data-font="Lamia"] ~ .font-details .glyph-cell {
  font-family: "Lamia-9", serif;
  font-size: 3.4rem;
}
.font-band-wrap[data-font="Rozsika"] ~ .font-details .glyph-cell {
  font-family: "Rozsika-Regular", serif;
  font-size: 3.4rem;
}
.font-band-wrap[data-font="Lorina"] ~ .font-details .glyph-cell {
  font-family: "Lorina-Regular", serif;
  font-size: 2.8rem;
}
.font-band-wrap[data-font="Priscilla"] ~ .font-details .glyph-cell {
  font-family: "Priscilla", serif;
  font-size: 3rem;
}
.font-band-wrap[data-font="Elsie"] ~ .font-details .glyph-cell {
  font-family: "Elsie-Regular", serif;
  font-size: 2.7rem;
}
.font-band-wrap[data-font="Hollie"] ~ .font-details .glyph-cell {
  font-family: "Hollie", serif;
  font-size: 3.3rem;
}

/* COLONNE 3 — LETTRE GÉANTE */

.glyph-preview {
  grid-area: preview;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 18rem;
  margin-left: auto;
    justify-content: center;
}

.glyph-preview-label {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.glyph-preview-box {
  border: 1px solid transparent;
  aspect-ratio: 1 / 2;
  max-width: 220px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.glyph-preview-letter {
  display: inline-block;
  font-size: min(240px, 20vw);
  line-height: 1;
    overflow: visible;
}

.font-band[data-font="Lamia"] ~ .font-label-row ~ .font-details .glyph-preview-letter {
  font-family: "Lamia-9", serif;
}
.font-band[data-font="Rozsika"] ~ .font-label-row ~ .font-details .glyph-preview-letter {
  font-family: "Rozsika-Regular", serif;
}
.font-band[data-font="Lorina"] ~ .font-label-row ~ .font-details .glyph-preview-letter {
  font-family: "Lorina-Regular", serif;
}
.font-band[data-font="Priscilla"] ~ .font-label-row ~ .font-details .glyph-preview-letter {
  font-family: "Priscilla", serif;
}
.font-band[data-font="Elsie"] ~ .font-label-row ~ .font-details .glyph-preview-letter {
  font-family: "Elsie-Regular", serif;
}
.font-band[data-font="Hollie"] ~ .font-label-row ~ .font-details .glyph-preview-letter {
  font-family: "Hollie", serif;
}
.font-band-wrap[data-font="Hollie"][data-variant="Condensed"]
  ~ .font-details .glyph-preview-letter {
  font-size: 300px; 
    transform: translateX(-1.2rem); /* décaler à gauche */
        transform: translateY(-3.2rem); /* décaler à gauche */
}




.font-details,
.glyph-preview,
.glyph-preview-box {
  overflow: visible;
}


/* =========================================================
   ACCESSIBILITÉ / PRÉFÉRENCES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  #stage { transition: none; }
  .font-band .marquee { animation: none; }
}

/* =========================================================
   ANIM OUVERTURE PANNEAU (effet "ça tombe du bandeau")
   ========================================================= */

/* Optionnel : donne une perspective au "drop" */
.font-item {
  perspective: 900px;
}

/* IMPORTANT : on override le display:none implicite de [hidden]
   sinon aucune transition/animation ne peut se faire */
.font-details[hidden] {
  display: block !important;
}

.font-details {
  overflow: hidden;
  transform-origin: top center;
  

  max-height: 0;
  opacity: 0;
  transform: translateY(-18px) rotateX(-10deg) scaleY(0.96);
  pointer-events: none;

  /* ⬇️ valeurs PAR DÉFAUT = FERMETURE */
  transition:
    max-height 420ms cubic-bezier(.4,0,.6,1),
    opacity 160ms ease,
    transform 300ms cubic-bezier(.4,0,.6,1);

  will-change: max-height, transform, opacity;
}


/* ⬇️ valeurs SPÉCIALES POUR L’OUVERTURE */
.font-item.open .font-details {
  max-height: 5000px;
  opacity: 1;
  transform: translateY(0) rotateX(0deg) scaleY(1);
  pointer-events: auto;

  transition:
    max-height 1100ms cubic-bezier(.16, 1, .3, 1),
    opacity 280ms ease,
    transform 950ms cubic-bezier(.16, 1, .3, 1);

  animation: details-drop 1100ms cubic-bezier(.16, 1, .3, 1);
}

/* État "ouvert" : panneau déployé
   => ton JS met déjà .font-item.open et enlève [hidden] */
.font-item.open .font-details {
  max-height: 2400px;               /* assez grand pour ton contenu */
  opacity: 1;
  transform: translateY(0) rotateX(0deg) scaleY(1);
  pointer-events: auto;
}

/* Petite finition : si tu veux un mini "rebond" */
.font-item.open .font-details {
  animation: details-drop 520ms cubic-bezier(.2,.9,.2,1);
}
@keyframes details-drop {
  0%   { transform: translateY(-18px) rotateX(-10deg) scaleY(0.96); }
  60%  { transform: translateY(4px) rotateX(0deg) scaleY(1); }
  100% { transform: translateY(0) rotateX(0deg) scaleY(1); }
}

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce) {
  .font-details {
    transition: none;
    animation: none;
    transform: none;
  }
}
.font-details {
  filter: blur(0.2px);
}
.font-item.open .font-details {
  filter: blur(0);
  transition-property: max-height, opacity, transform, filter;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
  .font-band { 
    padding-block: 0.4em;
  }
  .font-item { --band-h: 84px; }
}

/* Passer à 2 colonnes ? 
@media (max-width: 1350px) {
  .font-details-panel {
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(0, 0.9fr)
      minmax(0, 0.9fr);
    column-gap: 2.4rem;
  }

  .font-glyphs {
    max-width: 19rem;
  }

  .glyph-preview {
    max-width: 15rem;
  }

  .glyph-preview-box {
    max-width: 190px;
      overflow: visible;
  }

  .font-band[data-font="Lamia"] ~ .font-label ~ .font-details .glyph-cell {
    font-size: 2.7rem;
  }
  .font-band[data-font="Rozsika"] ~ .font-label ~ .font-details .glyph-cell {
    font-size: 3.0rem;
  }
  .font-band[data-font="Lorina"] ~ .font-label ~ .font-details .glyph-cell {
    font-size: 2.3rem;
  }
  .font-band[data-font="Priscilla"] ~ .font-label ~ .font-details .glyph-cell {
    font-size: 2.8rem;
  }
  .font-band[data-font="Elsie"] ~ .font-label ~ .font-details .glyph-cell {
    font-size: 2.6rem;
  }
  .font-band[data-font="Hollie"] ~ .font-label ~ .font-details .glyph-cell {
    font-size: 2.7rem;
  }
}*/

@media (max-width: 1260px) {
  /* Bloc global un peu plus étroit mais encore respirant */
  .font-details .details-inner {
    width: min(1100px, 88vw);
  }

  .font-details-panel {
    display: grid;
    grid-template-areas:
      "info info"
      "glyph preview"
      "imgs imgs";
    grid-template-columns: fit-content(22rem) fit-content(18rem);
    justify-content: center;
    justify-items: center;
    column-gap: clamp(1.2rem, 2vw, 2.2rem);
    row-gap: 2.4rem;
    align-items: start;
    text-align: left;
    font-family: "Elsie-Regular", serif;
  }

  /* Colonne 1 */
  .font-info {
    grid-area: info;
    width: 100%;
    max-width: 50rem;
    text-align: left;
    margin: 0 auto;
  }

  /* Colonnes 2 et 3 : centrées ensemble */
  .font-glyphs,
  .glyph-preview {
    justify-self: center;
    align-self: start;
    margin: 0;
    padding-left: 0;
    max-width: none;
  }

  .font-glyphs {
    width: 22rem;
  }

  .glyph-preview {
    width: 18rem;
  }

  .font-glyphs-scroll-wrap {
    width: 100%;
    margin-inline: auto;
  }

  .glyph-preview-box {
    width: 100%;
    max-width: 210px;
    margin-inline: auto;
    margin-left: 0;
  }

  html { font-size: 14px; }

  /* Bouton de téléchargement */
.download-font-btn {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  display: inline-flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
  align-self: flex-start;
}

.font-label-row.open .download-font-btn {
  right: auto;
}
.font-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

  .size-ctrl {
    --slider-nudge: 55px; 
  }

  .font-label-row.open .size-ctrl {
    right: 36px;
  }
}

@media (max-width: 900px) {
  .font-details .details-inner {
    width: min(60ch, 92vw);
    padding-inline: 1.2rem;
  }

  .font-details-panel {
    grid-template-areas:
      "info"
      "glyph"
      "preview"
      "imgs";
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
    justify-items: center;
  }

  .font-info {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .font-glyphs {
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    justify-content: center;
  }

  .font-glyphs-scroll-wrap {
    width: 100%;
    margin-inline: auto;
  }

  .glyph-preview {
    width: 100%;
    max-width: 27rem;
    margin-inline: auto;
    justify-content: center;
    align-items: center;
  }

  .glyph-preview-box {
    width: 100%;
    max-width: 22rem;
    min-height: 160px;
    margin-inline: auto;
  }

  .glyph-preview-letter {
    font-size: clamp(9.5rem, 24vw, 9.5rem) !important;
  }

  .download-font-btn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
  }
}

@media (max-width: 800px) {
  html { font-size: 13px; }
}
/*
@media (max-width: 700px) {
  .glyph-preview-box {
    width: 100%;
    max-width: 20rem;
    margin-inline: auto;
  }

  .glyph-preview-letter {
    font-size: clamp(6rem, 26vw, 8.5rem) !important;
  }

  .font-band[data-font="Lamia"] ~ .font-label ~ .font-details .glyph-cell,
  .font-band[data-font="Rozsika"] ~ .font-label ~ .font-details .glyph-cell,
  .font-band[data-font="Lorina"] ~ .font-label ~ .font-details .glyph-cell,
  .font-band[data-font="Priscilla"] ~ .font-label ~ .font-details .glyph-cell,
  .font-band[data-font="Elsie"] ~ .font-label ~ .font-details .glyph-cell,
  .font-band[data-font="Hollie"] ~ .font-label ~ .font-details .glyph-cell {
    font-size: 1.9rem;
  }
}
*/

@media (max-width: 1000px) {
  #accueil .asciiCanvasHome {
    display: none !important;
  }
}

/* ================================
   HAUTEUR UNIFORME DES BANDEAUX
   ================================ */

/* Hauteur cible (ajuste ce nombre pour matcher Priscilla/Rozsika) */
:root{
  --band-h: 110px; /* <-- à ajuster une fois (ex: 104 / 112 / 120) */
}

/* Tous les bandeaux : même hauteur, padding piloté par variable */
.font-band{
  min-height: var(--band-h) !important; /* écrase le calc basé sur --fs */
  padding-block: var(--band-pad-y, 0.22em) !important;
}

/* Optionnel : si tu veux différencier haut/bas */
.font-band{
  padding-top: var(--band-pad-top, var(--band-pad-y, 0.22em)) !important;
  padding-bottom: var(--band-pad-bottom, var(--band-pad-y, 0.22em)) !important;
}

/* Par défaut : ok pour Priscilla/Rozsika */
.font-band[data-font="Priscilla"],
.font-band[data-font="Rozsika"]{
  --band-pad-y: 0.22em;
}

/* Trop petits -> + de "rouge" */
.font-band[data-font="Elsie"]{
  --band-pad-y: 0.50em;
}
.font-band[data-font="Lorina"]{
  --band-pad-y: 0.50em;
}
.font-band[data-font="Lamia"]{
  --band-pad-y: 0.37em;
}

/* Trop grand -> moins de "rouge" */
.font-band[data-font="Hollie"]{
  --band-pad-y: 0.14em;
}

/* ================================
   RESET quand .font-band est un DIV (pas un button)
   ================================ */

.font-band{
  display: flex;              /* comme avant */
  align-items: center;
  width: 100%;
  background: var(--rouge);   /* fond seulement sur le bandeau */
  color: var(--blanc);

  border: 0;
  margin: 14px 0 0;

  /* IMPORTANT : empêche le fond de "déborder" via layout */
  box-sizing: border-box;

  /* garde ton comportement */
  cursor: pointer;
}

/* quand ouvert */
.font-band.open{
  background: #000 !important;
  cursor: text;
}
/* Empêche tout parent de récupérer le fond du bandeau */
.font-item,
.font-band-wrap,
.font-details{
  background: transparent !important;
}

/* ================================
   UI VARIANTES : texte + flèche + dropdown
   ================================ */

.font-label-row{ position: relative; 
  z-index: 50; }

.variant-ui{
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-70%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
}

/* On retire le positionnement de .style-toggle, car on le gère via .variant-ui */
.font-label-row .style-toggle{
  position: static;
  transform: none;
}

/* bouton texte (ex: Regular ▾) */
.variant-select{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-family: "Elsie-Regular", serif;
  font-size: 15px;
  line-height: 1;
  color: var(--rouge);
  white-space: nowrap;
}

.font-label-row.open .variant-select{
  color: #000;
}

.variant-select:hover,
.variant-select:focus-visible{
  color: #000;
  outline: none;
  text-decoration: none;
  font-family: "Elsie-Extended";
}

/* petite flèche */
.variant-caret{
  font-family: "Elsie-Regular";
  font-size: 14px;
  transform: translateY(-1px);
}

/* dropdown */
.variant-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;

  background: rgba(15, 15, 15, 0.95);
  color: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);

  display: none;
  z-index:100000;
}

.variant-ui[data-open="true"] .variant-menu{
  display: block;
}

.variant-option{
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;

  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-family: "Elsie-Regular", serif;
  font-size: 16px;
}

.variant-option:hover,
.variant-option:focus-visible{
  outline: none;
  background: rgba(255,255,255,.08);
}

.variant-check{
  opacity: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.variant-option[aria-current="true"] .variant-check{
  opacity: 1;
}

/* Décale uniquement le texte (pas la fleur) */
.variant-select{
  position: relative;
  top: 8px; /* ajuste : 2px / 3px / 5px */
}

/* Menu en 2 colonnes (quand il y a beaucoup de variantes) */
.variant-menu.two-col{
  min-width: 360px;
  display: none; /* reste contrôlé par data-open, on ne change pas */
  padding: 10px;
}

.variant-ui[data-open="true"] .variant-menu.three-col{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 10px;
}

.variant-menu.two-col .variant-option{
  width: 100%;
}


/* Sécurité : un bandeau ne doit jamais contenir de vrais boutons internes.
   (ça ne touche PAS au bouton bandeau lui-même, juste les boutons imbriqués) */
.font-band button,
.font-band [role="button"]{
  display: none !important;
}


/* =========================================
   IMAGES — sous les 3 colonnes
   (pas de crop : resize avec contain)
   ========================================= */

.font-details .font-details-panel > .font-images{
  grid-column: 1 / -1;
  margin-top: 1.6rem;
  cursor: pointer;
}

.font-details .font-details-panel > .font-images > .font-images-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* 3 par ligne */
.font-details .font-details-panel > .font-images .font-image{
  flex: 0 0 calc((100% - 2rem) / 3);
  margin: 0;
  height: clamp(140px, 18vw, 320px); /* hauteur uniforme */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* ok même avec contain */
  position: static;
  /* optionnel : un fond si tu veux éviter “vide” autour */
  /* background: rgba(0,0,0,0.03); */
}

/* ✅ pas de crop : l'image est entièrement visible */
.font-details .font-details-panel > .font-images .font-image img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* responsive : 2 colonnes puis 1 */
@media (max-width: 900px){
  .font-details .font-details-panel > .font-images .font-image{
    flex-basis: calc((100% - 1rem) / 2);
  }
}
@media (max-width: 520px){
  .font-details .font-details-panel > .font-images .font-image{
    flex-basis: 100%;
  }
}

/* =========================================
   LIGHTBOX FONTES
   ========================================= */

.font-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: "Elsie-Regular", system-ui, -apple-system, sans-serif;
  cursor:pointer;
}
.font-lightbox.is-visible {
  display: flex;
  pointer-events: auto;
}

.font-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.font-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(80vw, 900px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

.font-lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.font-lightbox-caption {
  margin-top: 0.75rem;
  max-width: 500px;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.4;
}

.font-lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.font-lightbox-close:hover {
  color: black;
}

/* ✅ anti-scrollbar, sans toucher au sizing */
.intro-card{
  overflow: hidden;          /* empêche une scrollbar interne */
}

/* IMPORTANT: ne pas mettre width:100% / max-height:100% sur le svg ici */
.intro-svg{
  overflow: hidden;          /* au cas où */
  display: block;            /* évite un micro-débordement baseline */
}

/* Cache la scrollbar si un overflow existe quand même (cas pénible) */
.intro-card{
  scrollbar-width: none;     /* Firefox */
}
.intro-card::-webkit-scrollbar{
  width: 0;
  height: 0;
}
/* =========================================================
   CORRECTIF RESPONSIVE — SECTION DETAILS FONTE
   À coller tout en bas du CSS
   ========================================================= */

/* Conteneur global plus large et plus souple */
.font-details .details-inner {
  width: min(1400px, 85vw) !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, 2vw, 2rem) !important;
}

/* Grille principale */
.font-details-panel {
  display: grid !important;
  grid-template-areas:
    "info glyph preview"
    "imgs imgs imgs";
  grid-template-columns:
    minmax(18rem, 1.15fr)
    minmax(16rem, 1fr)
    minmax(14rem, 0.95fr) !important;
  gap: clamp(1.5rem, 2vw, 3rem) !important;
  align-items: stretch !important;
  width: 100% !important;
  text-align: left;
  font-family: "Elsie-Regular", serif;
}

/* Important en grid : autorise les colonnes à rétrécir sans déborder */
.font-info,
.font-glyphs,
.glyph-preview,
.font-images {
  min-width: 0 !important;
  max-width: none !important;
}

/* =========================
   COLONNE 1 — TEXTE
   ========================= */
.font-info {
  grid-area: info !important;
  margin: 0 !important;
}

.font-info p {
  margin: 0.55rem 0;
  line-height: 1.3 !important;
  font-size: clamp(0.95rem, 0.35vw + 0.85rem, 1.08rem) !important;
}

/* =========================
   COLONNE 2 — GLYPH SET
   ========================= */
.font-glyphs {
  grid-area: glyph !important;
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  transform: none !important;
  margin: 0 !important;
}

.font-glyphs-scroll-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.font-glyphs-scroll {
  width: 100%;
  max-height: min(80vh, 420px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative;
  padding-left: 1.8rem !important;
  scrollbar-width: none;
}

.font-glyphs-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.font-glyphs-table {
  display: grid !important;
  grid-template-columns: repeat(var(--glyph-cols, 4), minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
  width: 100% !important;
  justify-content: stretch !important;
}

/* taille de base fluide des cellules */
.glyph-cell {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  line-height: 1 !important;
  padding: 0.2rem !important;
  cursor: pointer;
  text-align: center;
  font-size: clamp(1.8rem, 1.2vw + 1rem, 3.2rem) !important;
  overflow: hidden;
}

.glyph-cell:hover,
.glyph-cell:focus-visible {
  color: var(--rouge);
  outline: none;
}

/* Barre textile */
.glyph-scroll-track {
  position: absolute;
  left: -0.8rem;
  top: 0;
  bottom: 0;
  width: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.glyph-scroll-hearts {
    padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
  font-family: "Priscilla", serif;
  font-size: 2.3rem;
  line-height: 0.8;
  transform: translateY(-0.8rem);
  height: 100%;
  mask-image: linear-gradient(#000 0 0);
}

.glyph-heart {
  opacity: 0;
  transition: opacity 150ms ease;
  margin-bottom: 0;
}

/* =========================
   COLONNE 3 — PREVIEW
   ========================= */
.glyph-preview {
  grid-area: preview !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  transform: none !important;
}

.glyph-preview-box {
  width: min(100%, 26rem) !important;
  max-width: none !important;
  min-height: clamp(14rem, 30vw, 28rem) !important;
  aspect-ratio: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

.glyph-preview-letter {
  display: inline-block;
  line-height: 1;
  font-size: clamp(7rem, 14vw, 16rem) !important;
  max-width: 100%;
  overflow: visible;
}

/* =========================
   IMAGES SOUS LES COLONNES
   ========================= */
.font-images {
  grid-area: imgs !important;
  width: 100%;
}

.font-images-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 1rem !important;
  width: 100%;
}

/* =========================
   ANNULATION DES DÉCALAGES
   QUI CASSENT LE RESPONSIVE
   ========================= */
.font-band-wrap[data-font="Lamia"] ~ .font-details .font-glyphs,
.font-band-wrap[data-font="Elsie"] ~ .font-details .font-glyphs,
.font-band-wrap[data-font="Priscilla"] ~ .font-details .font-glyphs,
.font-band-wrap[data-font="Rozsika"] ~ .font-details .font-glyphs,
.font-band-wrap[data-font="Lorina"] ~ .font-details .font-glyphs,
.font-band-wrap[data-font="Hollie"] ~ .font-details .font-glyphs,
.font-band-wrap[data-font="Lamia"] ~ .font-details .glyph-preview,
.font-band-wrap[data-font="Elsie"] ~ .font-details .glyph-preview,
.font-band-wrap[data-font="Priscilla"] ~ .font-details .glyph-preview,
.font-band-wrap[data-font="Rozsika"] ~ .font-details .glyph-preview,
.font-band-wrap[data-font="Lorina"] ~ .font-details .glyph-preview,
.font-band-wrap[data-font="Hollie"] ~ .font-details .glyph-preview {
  transform: none !important;
}

/* =========================
   FAMILLES DE FONTES
   ========================= */
.font-band-wrap[data-font="Lamia"] ~ .font-details .glyph-cell,
.font-band-wrap[data-font="Lamia"] ~ .font-details .glyph-preview-letter {
  font-family: "Lamia-9", serif !important;
}

.font-band-wrap[data-font="Rozsika"] ~ .font-details .glyph-cell,
.font-band-wrap[data-font="Rozsika"] ~ .font-details .glyph-preview-letter {
  font-family: "Rozsika-Regular", serif !important;
}

.font-band-wrap[data-font="Lorina"] ~ .font-details .glyph-cell,
.font-band-wrap[data-font="Lorina"] ~ .font-details .glyph-preview-letter {
  font-family: "Lorina-Regular", serif !important;
}

.font-band-wrap[data-font="Priscilla"] ~ .font-details .glyph-cell,
.font-band-wrap[data-font="Priscilla"] ~ .font-details .glyph-preview-letter {
  font-family: "Priscilla", serif !important;
}

.font-band-wrap[data-font="Elsie"] ~ .font-details .glyph-cell,
.font-band-wrap[data-font="Elsie"] ~ .font-details .glyph-preview-letter {
  font-family: "Elsie-Regular", serif !important;
}

.font-band-wrap[data-font="Hollie"] ~ .font-details .glyph-cell,
.font-band-wrap[data-font="Hollie"] ~ .font-details .glyph-preview-letter {
  font-family: "Hollie", serif !important;
}

/* =========================
   AJUSTEMENTS SPÉCIFIQUES
   ========================= */

/* Si Lorina paraît un peu petite */
.font-band-wrap[data-font="Lorina"] ~ .font-details .glyph-cell {
  font-size: clamp(1.6rem, 1vw + 0.9rem, 2.7rem) !important;
}

/* Si Elsie paraît un peu petite */
.font-band-wrap[data-font="Elsie"] ~ .font-details .glyph-cell {
  font-size: clamp(1.7rem, 1vw + 0.95rem, 2.8rem) !important;
}

/* Hollie Condensed */
.font-band-wrap[data-font="Hollie"][data-variant="Condensed"] ~ .font-details .glyph-cell {
  font-size: clamp(2.2rem, 1.6vw + 1rem, 4rem) !important;
}

.font-band-wrap[data-font="Hollie"][data-variant="Condensed"] ~ .font-details .glyph-preview-letter {
  font-size: clamp(8rem, 16vw, 18rem) !important;
  transform: translateY(-0.08em) !important;
}

/* =========================
   BREAKPOINT 2 COLONNES
   ========================= */
@media (max-width: 1200px) {
  .font-details-panel {
    grid-template-areas:
      "info info"
      "glyph preview"
      "imgs imgs" !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .glyph-preview-box {
    min-height: clamp(12rem, 24vw, 20rem) !important;
  }

  .glyph-preview-letter {
    font-size: clamp(6rem, 12vw, 12rem) !important;
  }
}

/* =========================
   BREAKPOINT 1 COLONNE
   ========================= */
@media (max-width: 900px) {
  .font-details .details-inner {
    width: min(100%, 94vw) !important;
    padding-inline: 1rem !important;
  }

  .font-details-panel {
    grid-template-areas:
      "info"
      "glyph"
      "preview"
      "imgs" !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .font-glyphs,
  .glyph-preview {
    justify-content: center !important;
  }

  .font-glyphs-scroll {
    max-height: 320px !important;
  }

  .glyph-preview-box {
    width: 100% !important;
    min-height: 12rem !important;
  }

  .glyph-preview-letter {
    font-size: clamp(5rem, 22vw, 10rem) !important;
  }
}

/* =========================
   PETITS ÉCRANS
   ========================= */
@media (max-width: 700px) {
  .font-glyphs-table {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .glyph-cell {
    font-size: clamp(1.5rem, 4vw, 2.3rem) !important;
  }

  .font-info p {
    line-height: 1.2 !important;
  }
}

/* Équilibrer un peu mieux la masse visuelle gauche/droite */
.font-details .details-inner {
  padding-left: clamp(1.5rem, 3.5vw, 4rem) !important;
  padding-right: clamp(1rem, 2.6vw, 3rem) !important;
} /* =========================================================
   RÉGLAGES FINS — GLYPH SET PAR FONTE
   ========================================================= */

/* Taille de base un peu plus généreuse */
.glyph-cell {
  font-size: clamp(2.2rem, 1.55vw + 1rem, 3.8rem) !important;
}

/* Zone glyph set un peu mieux posée */
.font-glyphs-scroll-wrap {
  width: min(100%, 24rem);
  margin-inline: auto;
}

.font-glyphs-scroll {
  padding-left: 2rem !important;
  padding-right: 0.6rem !important;
}

/* Priscilla */
.font-band-wrap[data-font="Priscilla"] ~ .font-details .glyph-cell {
  font-size: clamp(2.7rem, 1.7vw + 1rem, 4.1rem) !important;
}

/* Lamia */
.font-band-wrap[data-font="Lamia"] ~ .font-details .glyph-cell {
  font-size: clamp(2.9rem, 1.7vw + 1rem, 4.2rem) !important;
}

/* Rozsika */
.font-band-wrap[data-font="Rozsika"] ~ .font-details .glyph-cell {
  font-size: clamp(3rem, 1.65vw + 1rem, 4rem) !important;
}

/* Elsie */
.font-band-wrap[data-font="Elsie"] ~ .font-details .glyph-cell {
  font-size: clamp(2.2rem, 1.45vw + 0.95rem, 3.5rem) !important;
}

/* Lorina */
.font-band-wrap[data-font="Lorina"] ~ .font-details .glyph-cell {
  font-size: clamp(2rem, 1.2vw + 0.9rem, 3.1rem) !important;
}

/* Hollie */
.font-band-wrap[data-font="Hollie"] ~ .font-details .glyph-cell {
  font-size: clamp(2.35rem, 1.6vw + 1rem, 3.9rem) !important;
}

/* Hollie condensed */
.font-band-wrap[data-font="Hollie"][data-variant="Condensed"] ~ .font-details .glyph-cell {
  font-size: clamp(2.7rem, 2vw + 1rem, 4.7rem) !important;
}


/* =========================================================
   AJUSTEMENTS FINS — ESPACES / BARRE GLYPHES
   ========================================================= */


/* 2) Plus d'air entre colonne 1 et colonne 2 */
.font-details-panel {
  column-gap: clamp(2.2rem, 3.2vw, 4.2rem) !important;
}

/* 3) Un peu plus d'espace interne avant le glyph set */
.font-glyphs {
  padding-left: clamp(0.4rem, 0.8vw, 1rem) !important;
}

/* 4) La zone scroll du glyph set : un peu moins collée en haut */
.font-glyphs-scroll {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* 5) La barre verticale "textile" : plus courte et centrée */
.glyph-scroll-track {
  top: 50% !important;
  bottom: auto !important;
  height: calc(100% - 4rem) !important;
  transform: translateY(-50%) !important;
}

/* 6) Son contenu reste bien centré dedans */
.glyph-scroll-hearts {
  justify-content: center !important;
}

/* =========================================================
   CALAGE VERTICAL PREVIEW — LETTRE GÉANTE
   ========================================================= */

/* La colonne preview s'aligne sur la même logique de hauteur que le glyph set */
.glyph-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.glyph-preview-box {
  height: min(60vh, 420px) !important;
  min-height: 0 !important;
  width: min(100%, 26rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Base commune */
.glyph-preview-letter {
  display: block !important;
  line-height: 0.82 !important;
  font-size: clamp(6rem, 12vw, 14rem) !important;
  transform: translateY(0) !important;
  transform-origin: center center !important;
}

/* Réglages fins par fonte */
.font-band-wrap[data-font="Elsie"] ~ .font-details .glyph-preview-letter {
  transform: translateY(0.5em) !important;
}

.font-band-wrap[data-font="Priscilla"] ~ .font-details .glyph-preview-letter {
  transform: translateY(0.06em) !important;
}

.font-band-wrap[data-font="Lamia"] ~ .font-details .glyph-preview-letter {
  transform: translateY(0.2em) !important;
}

.font-band-wrap[data-font="Rozsika"] ~ .font-details .glyph-preview-letter {
  transform: translateY(0.05em) !important;
}

.font-band-wrap[data-font="Lorina"] ~ .font-details .glyph-preview-letter {
  transform: translateY(0.08em) !important;
}

.font-band-wrap[data-font="Hollie"] ~ .font-details .glyph-preview-letter {
  transform: translateY(0.07em) !important;
}

.font-band-wrap[data-font="Hollie"][data-variant="Condensed"] ~ .font-details .glyph-preview-letter {
  transform: translateY(0.1em) !important;
}



/* Ligatures partout où ça compte */

/* 1. Bandeaux défilants (y compris en édition) */
.font-band .sample,
.font-band-wrap .sample,
.font-band .sample[contenteditable="true"] {
  font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "dlig" 1;
}

/* 2. Colonne des glyphes (petites cases) */
.glyph-cell {
  font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "dlig" 1;
}

/* 3. Texte qui défile dans la colonne 2 (si tu as du texte continu dedans) */
.font-glyphs-scroll {
  font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "dlig" 1;
}

/* 4. La grande lettre de la colonne 3 (si la fonte a des ligatures contextuelles) */
.glyph-preview-letter {
  font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "dlig" 1;
}

.font-glyphs-scroll {
  font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "dlig" 1;
}

/* =========================================================
   BREAKPOINT INTERMÉDIAIRE
   Colonne 1 au-dessus, colonnes 2 et 3 centrées ensemble
   ========================================================= */

@media (max-width: 1200px) and (min-width: 900px) {
  .font-details-panel {
    grid-template-areas:
      "info info"
      "glyph preview"
      "imgs imgs" !important;

    /* colonnes plus "serrées" autour du contenu */
    grid-template-columns: fit-content(24rem) fit-content(24rem) !important;

    /* centre le groupe des 2 colonnes */
    justify-content: center !important;
    justify-items: center !important;

    /* espace réel entre glyph et preview */
    column-gap: clamp(1.2rem, 2vw, 2.2rem) !important;
    row-gap: 2.2rem !important;
  }

  .font-info {
    width: 100% !important;
    max-width: 52rem !important;
    justify-self: center !important;
  }

  .font-glyphs,
  .glyph-preview {
    width: auto !important;
    max-width: none !important;
    justify-self: center !important;
    align-self: start !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  .font-glyphs-scroll-wrap {
    width: min(100%, 22rem) !important;
    margin-inline: auto !important;
  }

  .glyph-preview-box {
    width: min(100%, 20rem) !important;
    margin-inline: auto !important;
  }
}


@media (max-width: 1260px) {
  .font-details:not([hidden]) .font-info {
    padding-top: 1.6rem !important;
  }
}
/* =========================================================
   TRÈS PETIT ÉCRAN — corrections ciblées
   ========================================================= */

@media (max-width: 900px) {
  .font-details .font-info .download-font-btn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    margin: 1rem 0 !important;
    align-self: flex-start !important;
  }
}

@media (max-width: 900px) {
  .font-details .glyph-preview {
    margin-inline: auto !important;
    max-width: 18rem !important;
    width: 100% !important;
  }

  .font-details .glyph-preview-box {
    width: 100% !important;
    max-width: 18rem !important;
    min-height: 150px !important;
    margin-inline: auto !important;
  }

  .font-details .glyph-preview-letter {
    font-size: clamp(7rem, 28vw, 10rem) !important;
  }

  .font-details .font-details-panel {
    row-gap: 1.4rem !important;
  }
.font-label-main {
    font-size: clamp(1.1rem, 1.4vw, 1.2rem);
    line-height: 1.2;
  
}}

@media (max-width: 700px) {
  .font-details canvas.asciiCanvas {
    display: none !important;
  }
}

/* =========================================================
   MOBILE — ALIGNEMENT UNIFIÉ
   À coller tout en bas
   ========================================================= */

@media (max-width: 900px) {
  :root {
    --mobile-panel-w: min(28rem, 100%);
  }

  /* 1) Une seule largeur visuelle pour col 1 / 2 / 3 / images */
  .font-details .font-info,
  .font-details .font-glyphs,
  .font-details .glyph-preview,
  .font-details .font-images {
    width: var(--mobile-panel-w) !important;
    max-width: var(--mobile-panel-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }

  /* 2) Le bloc 2 (glyphs) */
  .font-details .font-glyphs-scroll-wrap,
  .font-details .font-glyphs-scroll {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3) Le bloc 3 (preview) prend exactement la même largeur */
  .font-details .glyph-preview-box {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 170px !important;
    margin: 0 !important;
  }

  .font-details .glyph-preview-letter {
    font-size: clamp(7.5rem, 30vw, 14.5rem) !important;
  }

  /* 4) Les images s'alignent sur la même largeur */
  .font-details .font-details-panel > .font-images > .font-images-grid {
    width: 100% !important;
  }

  /* 5) Le bouton download revient vraiment dans le flux */
  .font-details .font-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .font-details .font-info .download-font-btn,
  .font-details .download-font-btn {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-self: flex-start !important;
    margin: 1rem 0 !important;
  }

  /* 6) On évite les décalages parasites hérités */
  .font-details .font-glyphs,
  .font-details .glyph-preview,
  .font-details .font-images,
  .font-details .glyph-preview-box,
  .font-details .font-glyphs-scroll-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  /* 7) Un peu moins d'espace vertical entre les blocs empilés */
  .font-details .font-details-panel {
    row-gap: 1.2rem !important;
  }
}

@media (max-width: 700px) {
  :root {
    --mobile-panel-w: min(25rem, 100%);
  }
    .font-details .glyph-preview-letter {
    font-size: clamp(7rem, 28vw, 25rem) !important;
  }
}
/* =========================================================
   CORRECTIF COULEUR — GLYPH PREVIEW / MOBILE
   ========================================================= */

.glyph-preview,
.glyph-preview-box,
.glyph-preview-letter {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

.glyph-cell,
.glyph-cell:focus,
.glyph-cell:active,
.glyph-cell:visited {
  color: #000;
  -webkit-text-fill-color: #000;
}

.glyph-cell:hover,
.glyph-cell:focus-visible,
.glyph-cell.is-active {
  color: var(--rouge) !important;
  -webkit-text-fill-color: var(--rouge) !important;
}

@media (max-width: 1200px) {
  :root {
    --band-h: 76px;
  }

.font-band .marquee,
.font-band .sample {
  font-size: clamp(2.8rem, 6vw, 4.2rem) !important;
  line-height: 0.9 !important;
}

  .size-ctrl {
    transform: scale(0.78);
    transform-origin: top right;
  }

  .font-label-row.open .size-ctrl {
    right: 14px !important;
  }
}

/* =========================================================
   RESPONSIVE < 900px — MENU VARIANTES
   ========================================================= */

@media (max-width: 900px) {
  .variant-ui {
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.92) !important;
    transform-origin: top right;
    gap: 8px !important;
  }

  .style-toggle {
    font-size: clamp(1.6rem, 2.6vw, 2rem) !important;
    line-height: 1 !important;
  }

  .variant-select {
    font-size: clamp(1.1rem, 1.4vw, 1.2rem) !important;
    gap: 8px !important;
    top: 5px !important;
  }

  .variant-caret {
    font-size: 12px !important;
  }

  .variant-menu {
    min-width: 190px !important;
    top: calc(100% + 8px) !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  .variant-ui[data-open="true"] .variant-menu.three-col {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 8px !important;
  }

  .variant-option {
    font-size: 14px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 700px) {
  .variant-ui {
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.92) !important;
    transform-origin: top right;
    gap: 8px !important;
  }

  .style-toggle {
    font-size: clamp(1.6rem, 2.6vw, 2rem) !important;
    line-height: 1 !important;
  }

  .variant-select {
    font-size: clamp(1.1rem, 1.4vw, 1.2rem) !important;
    gap: 8px !important;
    top: 5px !important;
  }

  .variant-caret {
    font-size: 12px !important;
  }

  .variant-menu {
    min-width: 190px !important;
    top: calc(100% + 8px) !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  .variant-ui[data-open="true"] .variant-menu.three-col {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 8px !important;
  }

  .variant-option {
    font-size: 14px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 900px) {
  .variant-ui {
    right: 18px !important;
    transform: translateY(-60%) scale(0.84) !important;
    gap: 6px !important;
  }

  .style-toggle {
    font-size: clamp(3rem, 2.4vw, 1.7rem) !important;
  }

  .variant-select {
    font-size: 1.1rem !important;
    gap: 6px !important;
    top: 4px !important;
  }

  .variant-caret {
    font-size: 11px !important;
  }

  .variant-menu {
    min-width: 170px !important;
    padding: 7px !important;
  }

  .variant-ui[data-open="true"] .variant-menu.three-col {
    grid-template-columns: 1fr !important;
  }

  .variant-option {
    font-size: 13px !important;
    padding: 7px 9px !important;
  }
}

/* ================================
   MODAL DOWNLOAD
   ================================ */

.download-modal[hidden] {
  display: none !important;
}

.download-modal {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.download-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.download-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 34rem);
  background: white;
  color: black;
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  font-family: "Elsie-Regular";

}

.download-modal-dialog h2 {
  margin: 0 0 1rem;
  font-size: 2.35rem;
  line-height: 1.2;
    font-weight: 400;
}

.download-modal-text {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.35;
  box-shadow: none;
}

.download-modal-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  cursor: pointer;
  line-height: 1.35;
    box-shadow: none;
}

.download-modal-checkbox {
  margin-top: 0.18rem;
    box-shadow: none;
}

.download-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
    box-shadow: none;
}

.download-modal-cancel,
.download-modal-confirm,
.download-modal-close {
  background: white;
  color: black;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
}
.download-modal-cancel,
.download-modal-confirm,
.download-modal-close {
  appearance: none;
  -webkit-appearance: none;
  background: white;
    box-shadow: none;
}

.download-modal-cancel,
.download-modal-confirm {
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem; 
   box-shadow: none;
}

.download-modal-confirm[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
    box-shadow: none;
}

.download-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: 1.2rem;
  line-height: 1;
    box-shadow: none;
}

@media (max-width: 700px) {
  .download-modal-dialog {
    padding: 1.15rem 1rem 1rem;
  }

  .download-modal-dialog h2 {
    font-size: 1.05rem;
  }

  .download-modal-text,
  .download-modal-check {
    font-size: 0.92rem;
  }
}


/* ================================
   RESET TOTAL — BOUTONS MODAL
   ================================ */

.download-modal-cancel,
.download-modal-confirm,
.download-modal-close {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  background: #fff;
  color: #000;
  border: 1px solid #000;

  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  outline: none;
  background-image: none;

  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Boutons texte */
.download-modal-cancel,
.download-modal-confirm {
  padding: 0.6rem 1rem;
  font-family: "Elsie-Regular", serif;
  font-size: 0.95rem;
  line-height: 1;
}

/* Croix */
.download-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  font-family: "Elsie-Regular", serif;
  font-size: 1.2rem;
  line-height: 1;
}

/* Tous les états */
.download-modal-cancel,
.download-modal-confirm,
.download-modal-close,
.download-modal-cancel:hover,
.download-modal-confirm:hover,
.download-modal-close:hover,
.download-modal-cancel:focus,
.download-modal-confirm:focus,
.download-modal-close:focus,
.download-modal-cancel:focus-visible,
.download-modal-confirm:focus-visible,
.download-modal-close:focus-visible,
.download-modal-cancel:active,
.download-modal-confirm:active,
.download-modal-close:active {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  outline: none;
  transform: none;
}

/* Bouton disabled */
.download-modal-confirm[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.download-modal-dialog input[type="checkbox"] {
  accent-color: var(--rouge);
}

.glyph-preview-letter {
  font-size: clamp(6rem, 18vw, 20rem) !important;
}

/* ================================
   PREVIEW GLYPH — GROSSIR SANS COUPER
   ================================ */

/* Base plus grande mais un peu plus sûre */
.glyph-preview-box {
  overflow: visible !important;
}

.glyph-preview-letter {
  font-size: clamp(8rem, 18vw, 20rem) !important;
  line-height: 0.82 !important;
  display: inline-block;
  max-height: 100%;
}

/* Corrections fines par fonte */
.font-band-wrap[data-font="Elsie"] ~ .font-details .glyph-preview-letter {
  font-size: clamp(7.4rem, 16vw, 18rem) !important;
  transform: translateY(0.14em) !important;
}

.font-band-wrap[data-font="Lorina"] ~ .font-details .glyph-preview-letter {
  font-size: clamp(7.6rem, 16vw, 18.5rem) !important;
  transform: translateY(0.1em) !important;
}

.font-band-wrap[data-font="Priscilla"] ~ .font-details .glyph-preview-letter {
  font-size: clamp(7.8rem, 17vw, 19rem) !important;
  transform: translateY(0.08em) !important;
}

.font-band-wrap[data-font="Rozsika"] ~ .font-details .glyph-preview-letter {
  font-size: clamp(7.8rem, 17vw, 19rem) !important;
  transform: translateY(0.06em) !important;
}

.font-band-wrap[data-font="Lamia"] ~ .font-details .glyph-preview-letter {
  font-size: clamp(7.8rem, 17vw, 19rem) !important;
  transform: translateY(0.04em) !important;
}

.font-band-wrap[data-font="Hollie"] ~ .font-details .glyph-preview-letter {
  font-size: clamp(7.6rem, 16vw, 18.5rem) !important;
  transform: translateY(0.09em) !important;
}

.font-band-wrap[data-font="Hollie"][data-variant="Condensed"] ~ .font-details .glyph-preview-letter {
  font-size: clamp(7rem, 15vw, 17rem) !important;
  transform: translateY(0.12em) !important;
}

/* Lorina Semi-Extended — correction forte */
.font-band-wrap[data-font="Lorina"][data-variant="Semi-Extended"] 
~ .font-details .glyph-preview-letter {
  transform: translateY(0.28em) !important;
}


/* Taille Glyph Preview en plus petit */
@media (max-width: 700px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    font-size: clamp(18rem, 28vw, 20rem) !important;
  }
}
@media (max-width: 900px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    font-size: clamp(16rem, 28vw, 20rem) !important;
  }
}
@media (max-width: 1200px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    font-size: clamp(12rem, 28vw, 14rem) !important;
  }
}

  /* Marges en plus petit entre colonnes */
@media (max-width: 700px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview {
    margin-top: -0.30rem !important;
  }


  .font-band-wrap[data-font] ~ .font-details .glyph-preview-box {
    min-height: 0 !important;
    height: auto !important;
  }

  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    transform: translateY(0.08em) !important;
  }
  .glyph-preview-letter{
margin-bottom: 6rem;
  }
}


@media (max-width: 900px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview {
    margin-top: 2rem !important;
  }

  .font-band-wrap[data-font] ~ .font-details .glyph-preview-box {
    min-height: 0 !important;
    height: auto !important;
  }

  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    transform: translateY(0.08em) !important;
  }
  .glyph-preview-letter{
margin-bottom: 6rem;
  }
}


@media (max-width: 700px) {
  .font-details .font-details-panel > .font-images > .font-images-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 5rem !important;
  }

  .font-details .font-details-panel > .font-images .font-image {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}
@media (max-width: 900px) {
  .font-details .font-details-panel > .font-images > .font-images-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 5rem !important;
  }

  .font-details .font-details-panel > .font-images .font-image {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

  /* Ne pas couper les lettres */
@media (max-width: 900px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview,
  .font-band-wrap[data-font] ~ .font-details .glyph-preview-box {
    overflow: visible !important;
  }

  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: 0.8 !important;
  }
}

@media (max-width: 700px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview,
  .font-band-wrap[data-font] ~ .font-details .glyph-preview-box {
    overflow: visible !important;
  }

  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: 0.78 !important;
  }
}

  /* Tailles images en plus petit */
@media (max-width: 700px) {
  .font-details .font-details-panel > .font-images .font-image {
    height: clamp(220px, 50vw, 420px) !important;
  }
}
@media (max-width: 900px) {
  .font-details .font-details-panel > .font-images .font-image {
    height: clamp(220px, 50vw, 420px) !important;
  }
}

@media (max-width: 700px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview,
  .font-band-wrap[data-font] ~ .font-details .glyph-preview-box {
    overflow: visible !important;
  }
}
@media (max-width: 900px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview,
  .font-band-wrap[data-font] ~ .font-details .glyph-preview-box,
  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    overflow: visible !important;
  }

  .font-band-wrap[data-font] ~ .font-details .glyph-preview-box {
    min-height: 12rem !important;
  }

  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    line-height: 1.05 !important;
    padding-top: 0.12em !important;
    padding-bottom: 0.08em !important;
  }
}

@media (max-width: 700px) {
  .font-band-wrap[data-font] ~ .font-details .glyph-preview-box {
    min-height: 10rem !important;
  }

  .font-band-wrap[data-font] ~ .font-details .glyph-preview-letter {
    line-height: 1.08 !important;
    padding-top: 0.16em !important;
    padding-bottom: 0.1em !important;
  }
}

/* ================================
   BANDEAU CONTACT FONDERIE
   ================================ */

.fonderie-contact-band {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: 3rem !important;

  background: var(--gris) !important;
  color: #000000 !important;

  padding: 1.25rem 1.5rem !important;
  box-sizing: border-box !important;

  display: flex !important;
  justify-content: center!important;
  align-items: center !important;
}

.fonderie-contact-band p {
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;

  font-family: "Elsie-Regular", serif !important;
  font-size: clamp(1.05rem, 1vw, 1rem) !important;
  line-height: 1.4 !important;
  text-align: center!important;
  white-space: nowrap;
}

.fonderie-contact-band a,
.fonderie-contact-band span {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
}

.fonderie-contact-band a:hover {
  color: red !important;
}

/* ================================
   À PROPOS — accueil
   ================================ */

#accueil .inner {
  position: relative;
}

#accueil p[data-target="3"] {
  position: relative;
  z-index: 3;
  cursor: pointer;
  transition:
    transform 450ms ease,
    opacity 250ms ease;
}

/* les fleurs */
#accueil p[data-target="3"] .About {
  font-family: "Priscilla" !important;
  display: inline-block;
  transform: translateY(0.05em);
}

/* paragraphes qui disparaissent */
#accueil p[data-target="1"],
#accueil p[data-target="2"] {
  transition:
    opacity 300ms ease,
    transform 300ms ease;
}

#accueil.about-open p[data-target="1"],
#accueil.about-open p[data-target="2"] {
  opacity: 0;
  transform: translateY(0.8rem);
  pointer-events: none;
}

/* le trigger monte */
#accueil.about-open p[data-target="3"] {
  transform: translateY(-25rem);
}

/* panneau about : hors du flux */
#accueil .about-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  width: min(46rem, 92%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(1rem);
  transition:
    opacity 350ms ease,
    transform 350ms ease;
  text-align: center;
  z-index: 2;
}

#accueil.about-open .about-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-28rem);
}

#accueil .about-panel p {
  margin: 0;
  font-family: "Elsie-Regular", serif;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.35;
}

/* croix de fermeture */
#accueil .about-close {
  position: absolute;
  left: 50%;
  bottom: 6rem;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  background: transparent;
  border: none;
  color: inherit;
  font-family: "Elsie-Regular", serif;
  font-size: 1.3rem;
  cursor: pointer;
}

#accueil.about-open .about-close {
  opacity: 1;
  pointer-events: auto;
}

/* tablette */
@media (max-width: 900px) {
  #accueil.about-open p[data-target="3"] {
    transform: translateY(-25rem);
  }

  #accueil.about-open .about-panel {
    transform: translateX(-50%) translateY(-28rem);
  }
}

/* mobile */
@media (max-width: 700px) {
  #accueil .about-panel {
    width: 92%;
  }

  #accueil.about-open p[data-target="3"] {
    transform: translateY(-25rem);
  }

  #accueil.about-open .about-panel {
    transform: translateX(-50%) translateY(-28rem);
  }

  #accueil .about-close {
    bottom: 8rem;
  }
}

#accueil .about-panel {
  z-index: 2 !important;
}

#accueil .about-close {
  z-index: 5 !important;
}


.catalogue{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    min-height: 85vh;
}

#page{
    height:85vh;
    width:auto;
    background:white;
    display:block;
}

#prev,
#next{
    border:none;
    background:none;
    cursor:pointer;
    font-size:1.5rem;
  font-family: "Elsie-Regular";
    line-height:1;
    color: #a79f9f;
}

#prev:hover,
#next:hover{
    color: #000000;
}



#view-recherche{
    background:#eae6e6;
    width:100vw;
    margin-left:calc(50% - 50vw);
}


@-moz-document url-prefix() {
  .font-label-row .style-toggle{
    position: relative;
    top: 0.7rem;
    right: -0.4rem;
  }
}

@-moz-document url-prefix() {
.accueil .jump[data-target="recherche"] {
  margin-top: 0.8rem;
}
  }

@media (min-width: 1800px) {
  .accueil-archives.archives-search-layout {
    max-width: 1400px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.mobile-content {
  display: none;
}

@media screen and (max-width: 768px) {

  .desktop-content {
    display: none;
  }

  .mobile-content {
    display: flex;
    position:fixed;
    inset:0;
    flex-direction: column;
    justify-content: center;


    width: 100%;
    height: 100vh;
    padding: 2rem;
    text-align: center;
  }

  .mobile-content p {
 font-size: 1.2rem;
 align-items: center;
  text-align: center;
}

  .mobile-content h1{
margin-bottom: 1rem;
}
}


#loader {
  position: fixed;
  inset: 0;
  background: var(--gris);
  z-index: 99999;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "Lamia-9", serif;
  font-size: 12rem;
  color: red;

  opacity: 1;
  transition: opacity 0.5s ease;
}

#loader.hidden {
  opacity: 0;
  pointer-events: none;
}
.loader-title {
  opacity: 1;
  transition: opacity 0.5s ease;
}

#loader.hidden .loader-title {
  opacity: 0;
}

@media screen and (max-width: 768px) {
  #loader {
    display: none;
  }
}