@font-face {
	font-family: 'Jacoby';
	src: url('/fonts/jacoby-icg-black.ttf')format('truetype');
}

/* Style global de tous les liens du site (texte) */
a {
  color: inherit;
  text-decoration: none;

  display: inline-block;            /* pour que le zoom ne casse pas la ligne */
  --scale: 1;                       /* échelle par défaut */
  transform-origin: center;
  transform: scale(var(--scale));
  transition:
    transform 1.5s cubic-bezier(.25,.8,.25,1),
    text-shadow 1.5s cubic-bezier(.25,.8,.25,1);
}

a:visited {
  color: inherit;
}

/* Hover global : léger zoom + ombre douce */
a:hover,
a:focus-visible {
  --scale: 1.07;                    /* zoom discret */
  text-shadow: 0 3px 6px rgba(0,0,0,0.45);
  outline: none;
}

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
}

body {
  font-family: 'Jacoby', sans-serif;
  text-align: center;
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#titre, #conteneur-titre {
  margin-left: 0.5%;
  margin-right: 0.5%;
  background: #a4bdc2;
  border-radius: 12px;
  padding: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;      /* ou space-around / space-between */
}

.entete {
  display: flex;
  justify-content: center;      /* ou space-around / space-between */
  flex-wrap: wrap;               /* passe à la ligne si besoin */
  text-align: center;
  color: white;
}

.entete-link {
  font-size: clamp(20px, 4vw, 60px); /* Ajoute un minimum de taille (20px) et une taille maximale de 60px */
  display: inline; /* Assure que le texte est fluide sur une seule ligne, tout en gardant l'espace d'un <h1> */
  margin: 10px 0 10px 0;
}

.images {
  --count: 6;       /* à adapter si besoin */
  --gap: 0px;
  display: flex;
  align-items: flex-start; /* ← au lieu du stretch par défaut */
  gap: var(--gap);
  flex-wrap: nowrap;         /* une seule ligne */
  justify-content: center;
  overflow: visible;
  margin: 40px .5% 0 .5%;
}

/* offsets */
.images a:nth-child(1) { margin-top: 240px; }
.images a:nth-child(2) { margin-top: 160px; }
.images a:nth-child(3) { margin-top:  80px; }
.images a:nth-child(4) { margin-top:   0px; }
.images a:nth-child(5) { margin-top:  80px; }
.images a:nth-child(6) { margin-top: 160px; }


.images a {
  /* largeur fluide sans rognage */
  width: clamp(
    150px,
    calc((100% - (var(--count) - 1) * var(--gap)) / var(--count)),
    315px
  );
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.8),
  	      0 -20px 0 0 #96afb3;

  /* variables d’animation */
  --dy: 0px;
  --scale: 1;
  transform-origin: center;
  transform: scale(var(--scale));
  transition: transform 2s cubic-bezier(.25,.8,.25,1),
              box-shadow 2s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}

.images a:hover {
  --scale: 1.15;
  transform: scale(var(--scale));    /* écrase le zoom global si besoin */
  box-shadow: 0 18px 32px rgba(0,0,0, 1),
              0 -20px 0 0 #96afb3;
  z-index: 100;
  text-shadow: none;
}

/* l'image remplit juste le lien, sans transform propre */
.images img {
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
}

.titres, .titres2 {
  display: flex;
  justify-content: space-evenly;   /* répartit également sur toute la largeur */
  flex-wrap: wrap;                /* passe à la ligne si besoin */
  gap: 0;                         /* tu peux garder var(--gap, 12px) */
  text-align: center;
  width: 100%;
  background: #a4bdc2;
  border-radius: 12px;
  padding: .5rem 0;
}

.text-link, .text-link2 {
  flex: 1 1 0;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;
  min-height: 44px;
  white-space: nowrap;
  font-size: clamp(20px, 2vw, 42px);
  color: black;
}

/* ====== Barre en flux, alignée en bas====== */
.bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 20px .5% 0 .5%;
}

.bottom-text {
  flex: 1;
  align-self: center;              /* Texte centré dans chaque div */
  font-size: clamp(14px, 2vw, 18px); /* Taille du texte ajustée */
  color: #333;                     /* Couleur du texte, ajustable */
}

/* Par défaut : responsive (réduit si l'écran est petit) */
.bottom-bar img {
  flex: 0 0 auto;              /* ne pas se laisser rétrécir par flex */
  width: auto !important;        /* annule un éventuel width global */
  height: clamp(48px, 10vmin, 160px); /* limite haute = 160 px */
  max-width: 40vw;               /* évite qu'une image prenne tout l'espace */
  object-fit: contain;
  display: block;
}

.center-box {
  background: #a4bdc2;
  padding: clamp(10px, 2vw, 20px);
  border-radius: 12px;
  font-size: clamp(14px, 2.2vw, 20px);
  text-align: center;
  line-height: 1.25;
  width: 180px;
}

/* ======Autre barre en bas====== */

/* Desktop */
:root {
  --bottom1-overlap: 80px;   /* bon */
}

.bottom1-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* texte – carte – texte */
  align-items: flex-end;
  column-gap: 20px;
  padding: 20px 10px;
  margin-top: calc(-1 * var(--bottom1-overlap));
}

/* Texte à gauche et à droite */
.bottom1-text {
  text-align: center;              /* Texte centré dans chaque div */
  font-size: clamp(14px, 2vw, 20px); /* Taille du texte ajustée */
  color: #333;                     /* Couleur du texte, ajustable */
}

/* Carte “Nouveautés” centrée */
.card-nouveautes {
  max-width: 300px;                /* Limite la largeur de la carte */
  justify-self: center;
  display: flex;
  flex-direction: column;          /* Pour empiler l'image et la légende */
  box-shadow: 0 -20px 0 0 #96afb3,
              0 0 15px rgba(255, 255, 255, 0.3);  /* halo léger */              
  border-radius: 20px;
}

.card-n-img {
  display: flex;
  overflow: visible;
  max-width: 300px;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,.8),
  	      0 -20px 0 0 #96afb3;
}

.card-n-img a{
  width: clamp(
    150px,
    calc((100% - (var(--count) - 1) * var(--gap)) / var(--count)),
    300px
  );
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,.8),
  	      0 -20px 0 0 #96afb3;
  transform-origin: center;
  transform: scale(1);
  transition: transform 2s cubic-bezier(.25,.8,.25,1),
              box-shadow 2s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}

.card-n-img a:hover {
  --scale: 1.15;
  transform: scale(var(--scale));    /* écrase le zoom global si besoin */
  box-shadow: 0 18px 32px rgba(0,0,0, 1),
              0 -20px 0 0 #96afb3;
  z-index: 100;
  text-shadow: none;
}

.card-n-caption {
  padding: 1rem;
  background: #96afb3;
  text-align: center;
  font-family: 'Jacoby', sans-serif;
  color: black;
  border-radius: 20px;
}

.card-n-caption a {
  color: red;
  font-size: 1.8em;
}

.page-b1 {
  --images-align-offset: 80px;  /* diff entre image la + basse et celle de référence */
}

/* ====== 3e barre en bas ====== */
#promo-bar.bottom-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 20 .5% 0 .5%;
}

/* Images de la barre (responsives) */
#promo-bar.bottom-bar > img {
  flex: 0 0 auto;
  width: auto !important;
  height: clamp(48px, 10vmin, 160px);
  max-width: 40vw;
  object-fit: contain;
  display: block;
}

/* ====== Conteneur des 3 boîtes au centre ====== */
/* Par défaut (mobile < 799px) : on empile pour ne jamais déborder */
#promo-bar .bb-center {
  display: grid;
  grid-template-columns: repeat(3, clamp(120px, 35vw, 180px));
  justify-content: center;    /* centre l’ensemble */
  gap: 25px;                  /* espacement demandé */
  align-items: stretch;       /* mêmes hauteurs */
  min-width: 0;
}

/* ====== Boîtes texte ====== */
#promo-bar .center-box {
  display: block;
  padding: 12px;
  border-radius: 10px;
  background: #ffffffcc;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-height: 100%;
  text-align: center;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.25;
  background-color: #96afb3;
  border-radius: 12px;
}

/* Sécurité : si tu veux vraiment forcer l’égalité des hauteurs même avec des contenus extrêmes */
#promo-bar .center-box > * { max-width: 100%; }

#promo-bar .mention {
  width: clamp(
    150px,
    calc((100% - (var(--count) - 1) * var(--gap)) / var(--count)),
    300px
  );
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,.8),
  transform-origin: center;
  transform: scale(1);
  transition: transform 2s cubic-bezier(.25,.8,.25,1),
              box-shadow 2s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}

#promo-bar .mention:hover {
  --scale: 1.15;
  transform: scale(var(--scale));    /* écrase le zoom global si besoin */
  box-shadow: 0 18px 32px rgba(0,0,0, 1);
}


:root {
  --shadow-x: 20px;    /* valeur desktop */
}

@media (max-width: 900px) {
  :root {
    --shadow-x: 14px;  /* tablette */
  }
}

@media (max-width: 600px) {
  :root {
    --shadow-x: 10px;  /* mobile */
  }
}

/* Ombres gauche/droite parfaitement symétriques */
.bordimage-top {
  border-radius: 12px;
  box-shadow: 0 calc(-1 * var(--shadow-x)) #96afb3;
}
.bordimage-g {
  border-radius: 12px;
  box-shadow: calc(-1 * var(--shadow-x)) 0 #96afb3;
  margin-left: 20px;
}

.bordimage-d {
  border-radius: 12px;
  box-shadow: var(--shadow-x) 0 #96afb3;
  margin-right: 20px;
}

.retour-d {
  font-size: clamp(16px, 20px, 20px);
}

.retour-g {
  font-size: clamp(16px, 20px, 20px);
}


/* ====== PAGE DU MINI-CHAT ====== */

        .mini-chat {
            max-width: 90%;
            margin: 0 auto;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            display: flex;
            flex-direction: column;
            height: 500px;
            overflow: hidden;
        }

        .mini-chat-header {
            padding: 10px 15px;
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
            font-weight: 600;
        }

        .mini-chat-messages {
            flex: 1;
            padding: 10px 15px;
            overflow-y: auto;
            background: #fff;
        }

        .mini-chat-message {
            margin-bottom: 8px;
            font-size: 14px;
            line-height: 1.3;
        }

        .mini-chat-message strong {
            font-size: 13px;
        }

        .mini-chat-time {
            font-size: 11px;
            color: #999;
            margin-left: 5px;
        }

        .mini-chat-form {
            border-top: 1px solid #ddd;
            padding: 10px 15px;
            background: #fafafa;
        }

        .mini-chat-form input[type="text"],
        .mini-chat-form textarea {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 6px;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #ccc;
            font-family: inherit;
            font-size: 14px;
        }

        .mini-chat-form button {
            padding: 8px 12px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        .mini-chat-form button[type="submit"] {
            background: #007bff;
            color: #fff;
        }

        .mini-chat-form button[disabled] {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .mini-chat-error {
            color: #c00;
            font-size: 12px;
            margin-bottom: 6px;
        }
 

/* ====== Grand écran ====== */
/*  taille réelle images (320×206) */
@media (min-width: 1280px) {
  .bottom-bar img {
    height: auto;                /* reprend la hauteur intrinsèque */
    width: auto;                 /* reprend la largeur intrinsèque */
    max-width: none;             /* lève le plafond 40vw et les max-width globaux */
  }

/* Taille réelle sur grands écrans */
  #promo-bar.bottom-bar > img {
    height: auto;
    width: auto;
    max-width: none;
  }

/* taille réelle (320×206) */
  .mention img {
    height: auto;                /* reprend la hauteur intrinsèque */
    width: auto;                 /* reprend la largeur intrinsèque */
    max-width: none;             /* lève le plafond 40vw et les max-width globaux */
  }
}

/* === Tablettes + petits laptops (y compris 1280 px paysage) === */
@media (max-height: 600px) and (max-width: 1280px) {

  :root {
    /* largeur commune ≈ (largeur écran - (2×20px) pas de marge) / 6 */
    --thumb-width: calc((100vw) / 6);
  }

/* Tablette + paysage mobile */
  :root {
    --bottom1-overlap: 58px;
  }

  /* Le conteneur occupe quasiment toute la largeur */
  .images {
    gap: 0;                 /* aucune séparation entre les vignettes */
    justify-content: space-between;
  }

  /* Chaque vignette prend 1/6 de la largeur utile */
  .images a {
    width: var(--thumb-width);
    max-width: none;
  }

  /* Offsets plus faibles pour un look harmonieux */
  .images a:nth-child(1) { margin-top: 150px; }
  .images a:nth-child(2) { margin-top: 100px; }
  .images a:nth-child(3) { margin-top: 50px; }
  .images a:nth-child(4) { margin-top: 0px;  }
  .images a:nth-child(5) { margin-top: 50px; }
  .images a:nth-child(6) { margin-top: 100px; }

  .card-nouveautes {
    width: var(--thumb-width);
    max-width: none;     /* pour ne pas être bloquée par un ancien max-width */
    justify-self: center;
  }
  .card-n-img {
    border-radius: 14px;
    width: var(--thumb-width);
  }
  .card-n-caption {
    box-sizing: border-box;   /* le padding est inclus dans la largeur */
    max-width: 100%;          /* ne dépasse jamais la carte */
    white-space: normal;      /* autorise le retour à la ligne */
    overflow-wrap: anywhere;  /* casse si besoin */
    font-size: 0.45em;        /* un poil plus petit en paysage étroit */
    padding: 0.4rem 0.5rem;   /* un peu moins de gras */
  }

  /* Le bandeau titres un peu plus compact */
  #conteneur-titre {
    border-radius: 16px;
    padding: 0.4rem 0.2rem;
  }

  /* On passe les 6 titres en grille 3 x 2 */
  #conteneur-titre .titres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0.3rem;
    column-gap: 0.3rem;
    justify-items: center;
    margin: 0 0.5% 0 0.5%;
  }

  /* Liens-titres un peu plus petits et plus “serrés” */
  #conteneur-titre .text-link {
    padding: 0.3rem 0.4rem;
    min-height: 0;
    font-size: clamp(16px, 2.4vw, 22px);
    white-space: normal;
    line-height: 1.1;
  }

  /* Grille 4 colonnes → 7 éléments se répartissent en 4 + 3 */
  #conteneur-titre .titres2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    justify-items: center;
    row-gap: 0.4rem;
    column-gap: 0.4rem;
    margin: 0 .5%;
    width: 100%;
  }

  /* Ajuster un peu la taille si nécessaire */
  #conteneur-titre .text-link2 {
    font-size: clamp(16px, 2.4vw, 20px);
    padding: .4rem .5rem;
    white-space: normal;
    line-height: 1.1;
  }
}

/* ====== SPÉCIAL MOBILE (écrans étroits) ====== */
@media (max-width: 600px) {

  /* Menu sur 2 lignes en mobile */
  #conteneur-titre {
  padding: 0.15rem 0.2rem;      /* ← réduit fortement la hauteur */
  border-radius: 10px;          /* plus compact visuellement */
  }

  #conteneur-titre .titres {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes → 5 éléments = 3 + 2 */
    row-gap: 0.2rem;
    column-gap: 0.3rem;
    justify-items: center;
    padding: 0.2rem 0;
  }

  /* Liens du menu : plus compacts, autorisés à passer à la ligne */
  #conteneur-titre .text-link2 {
    padding: 0.15rem 0.2rem;
    min-height: 0;
    font-size: clamp(14px, 3.4vw, 18px);
    white-space: normal;   /* autorise le retour à la ligne */
    line-height: 1.05;
  }

  #conteneur-titre .text-link {
    padding: 0.15rem 0.2rem;
    min-height: 0;
    font-size: clamp(14px, 3.4vw, 18px);
    white-space: normal;   /* autorise le retour à la ligne */
    line-height: 1.05;
  }

/* Petits écrans : on réduit encore un peu */
  .bottom-bar img {
    height: clamp(36px, 7vh, 72px);
    max-width: 32vw;
  }

 /* ====== */

/* Mobile portrait */
  :root {
    --bottom1-overlap: 28px;
  }

  /* La barre du bas */
  .bottom1-bar {
    display: flex;
    flex-direction: row;
    row-gap: 10px;
    justify-items: center;
    align-items: flex-end;
    margin-top: calc(-1 * var(--bottom1-overlap));

  }

  /* textes gauche/droite */
  .bottom1-text {
    display: flex;
    max-width: 60%;
    margin: 0;
    padding: 0;            
    font-size: clamp(12px, 2.6vw, 14px); /* ajuste la taille si nécessaire */
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* texte droit : aligné au centre + petite marge interne à droite */
  .bottom1-bar > .bottom1-text:last-child {
    text-align: center;
    padding-right: 8px;       /* assure une marge droite visible */
  }

  #promo-bar .bb-center {
    grid-template-columns: repeat(2, clamp(100px, 35vw, 180px));
    justify-items: center;
  }

  /* Le 3e bloc (le dernier) prend toute la largeur de la ligne */
  #promo-bar .center-box:last-child {
    grid-column: 1 / -1;     /* s’étend de la colonne 1 à la dernière */
    justify-self: center;    /* bien centré dans cette zone */
  }

  .bb-center {
    flex-direction: column;   /* les deux colonnes l’une sous l’autre */
    padding: 1rem 0.8rem;
    margin: 10px 8px;         /* un peu de marge sur les côtés */
  }

  .bb-center .center-box {
    text-align: center;
    width: 100%;
  }

  /* carte centrée : fixe et ne s'étend pas (reste bien entre les textes) */
  .card-nouveautes {
    flex: 0 0 auto;
    width: clamp(110px, 24vw, 150px);
    margin: 0;
    justify-self: center;
    box-shadow: 0 -12px 0 0 #96afb3;
  }

  .card-n-img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 12px 20px rgba(0,0,0,.8),
  	        0 -12px 0 0 #96afb3;
    display: block;
  }

  .card-n-caption {
    padding: .35rem .6rem;
    font-size: .85em;
    border-radius: 14px;
    text-align: center;
    box-sizing: border-box;
  }

  .card-n-caption a {
    font-size: 1.05em !important;
  }

  .card-n-caption p {
    text-align: center;
    font-size: clamp(0.9em, 2.4vw, 1.05em); /* ajuste selon le rendu */
  } 

  .images {
    --count: 6;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;        /* ← empêche le débordement horizontal */
    margin: 20px auto 0 auto;
    padding: 0 6px;
    overflow: visible;
    box-sizing: border-box;
  }

  .images a {
    /* 6 images qui tiennent exactement dans 100% */
    width: calc(
      (100% - (var(--count) - 1) * var(--gap))
      / var(--count)
    );
    max-width: 110px;           /* sécurité si écran très large */
    min-width: 60px;            /* sécurité si écran minuscule */
    flex: 0 0 auto;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0,0,0,.4),
                0 -10px 0 0 #96afb3;
  }

  /* Offsets fortement réduits pour mobile */
  .images a:nth-child(1) { margin-top: 50px; }
  .images a:nth-child(2) { margin-top: 30px; }
  .images a:nth-child(3) { margin-top: 15px; }
  .images a:nth-child(4) { margin-top: 0px; }
  .images a:nth-child(5) { margin-top: 15px; }
  .images a:nth-child(6) { margin-top: 30px; }
}