/* Global */
* {
  box-sizing: border-box;
}

body {
  margin: 15px;
  font-family: sans-serif;
  background-color: #fdfdfd;
  color: #222;
}
@font-face {
  font-family: "Vine-Bud";
  src: url("fonts/Vine-Bud.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Vine-Tendril";
  src: url("fonts/Vine-Tendril.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Vine-Bloom";
  src: url("fonts/Vine-Bloom.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Peille-Italic";
  src: url("fonts/Peille-Italic.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Peille-Regular";
  src: url("fonts/Peille-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Zozor";
  src: url("fonts/Zozor-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Safron";
  src: url("fonts/Safron-Regular.woff2") format("woff2");
  font-display: swap;
}


@font-face {
  font-family: "Chantal";
  src: url("fonts/Chantal-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Frog";
  src: url("fonts/Frog-Foot.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Frog-Tree";
  src: url("fonts/Frog-Tree.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Frog-Love";
  src: url("fonts/Frog-Love.woff2") format("woff2");
  font-display: swap;
}

/* Navigation */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  margin-top: 0.3rem;
}

.left-links a,
.right-link a {
  text-decoration: none;
  color: #222;
  margin-right: 0.5rem;
  font-size: 1rem;
}

.left-links {
  display: flex;
}

.right-link {
  display: flex;
  justify-content: flex-end;
}

/* Layout principal */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Grille 2 colonnes */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Galerie slide */
.gallery {
  width: 100%;
  overflow: hidden;
  position: relative;
  /*background: #eee;*/
  height: auto;
}

.gallery-track {
  display: flex;
  transition: transform 0.5s ease;
}

.gallery-track img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
  cursor: pointer;
  user-select: none;
}

/* Projets image classique */
.project {
  width: 100%;
  background: #fff;
  /*border: 1px solid #ccc;*/
}

.project img {
  width: 100%;
  height: auto;
  display: block;
}

.caption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  position: relative;
}

.caption-font{
  margin-top: -2px;
  font-size: 0.95rem;
  position: relative;
}

.caption .toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  margin-right: 0.5rem;
}

.caption .details {
  margin-top: 0.5rem;
  display: none;
  color: #666;
  font-size: 0.9rem;
}

.caption-font .toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  margin-right: 0.5rem;
}

.caption-font .details {
  margin-top: 0.5rem;
  display: none;
  color: #666;
  font-size: 0.9rem;
}

/* Bloc typo pleine largeur */
.typo-full {
  width: 100%;
  /*background: #fafafa;
  border: 1px solid #ccc;*/
  padding: 1rem;
}



.typo-variants {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

.typo-variants .variant {
  opacity: 0.4;
  transition: opacity 0.2s;
}

.typo-variants .variant.active {
  opacity: 1;
}

/*VINE*/
.Vine{
  background-color: #184323;
  color: #C6F86C; 
}
.vine-preview{
  font-family: 'Vine-Bud';
}

/*PEILLE*/
.Peille{
  background-color: #95AA9B;
  color: #A4FF00;
}
.peille-preview{
  font-family: 'Peille-Italic';
}

/*ZOZOR*/
.Zozor{
  background-color: #f1f1f1;
  color:#447650;
}
.zozor-preview{
  font-family: 'Zozor';
}

/*SAFRON*/
.Safron{
  background-color: #393B2F;
  color:#2EFF5F;
}
.safron-preview{
  font-family: 'Safron';
}

/*FROG*/
.Frog{
  background-color: #d4ff00;
  color:#016518;
}
.frog-preview{
  font-family: 'Frog';
}

.typo-half {
  background: #f6f6f6;
  border: 1px solid #ccc;
  padding: 1rem;
}

.typo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.typo-header h2 {
  margin: 0;
  font-size: 1rem;
}

/* Style général du slider */
.typo-slider {
  -webkit-appearance: none;
  width: 150px;
  height: 2px;
  background: black;
  outline: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

/* Style de la poignée (thumb) pour Chrome, Safari, etc. */
.typo-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: black;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Style de la poignée (thumb) pour Firefox */
.typo-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: black;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Supprimer les styles par défaut sur Firefox */
.typo-slider::-moz-range-track {
  background: black;
  height: 2px;
}


.glyphs-count {
  font-size: 0.95rem;
  margin: 0;
  white-space: nowrap;
}

/* Zone editable typo */
.typo-preview {
  margin-top: 1rem;
  padding: 0.5;
  font-size:7em;
  outline: none;         /* enlève le contour bleu */
  border: none;          /* enlève les bordures éventuelles */
  background: transparent; /* évite tout fond gênant */

::contentReference[oaicite:0]{index=0}
}
.typo-preview:focus {
  outline: none;
  background: transparent;
}


.slider-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider-wrapper label {
  font-size: 0.9rem;
  white-space: nowrap;
}