/* ======================================================================
   BLEDX — PAGES EDITORIALES

   Dix-sept pages (FAQ, livraison, garantie, guide des tailles, Ton Bled
   et les douze pages de ville ou de licence) ont ete ecrites avec un
   balisage « bx-* » dont la feuille de style vivait dans un snippet,
   desactive lors du passage au theme enfant. Ces pages tournaient donc
   sans aucune mise en forme : le texte etait lisible, la structure avait
   disparu — plus de tableau de tailles, plus d'accordeon, plus de rangee
   de liens.

   On ne recopie pas l'ancienne feuille : on redessine ces composants dans
   la langue du site actuel. Ce sont des pages de lecture longue, donc
   elles prennent la meme surface blanche que le reste du site, avec une
   colonne de lecture bornee.

   Aucun caractere esperluette litteral dans ce fichier.
   ====================================================================== */

.bx-page {
  /* la surface claire, avec les memes roles inverses qu'ailleurs */
  --bx-papier: #131313;
  --bx-gris: #5a5a5a;
  --bx-sourd: #6e6e6e;
  --bx-trait: #e6e6e3;
  --bx-trait-fort: #c9c9c4;
  --bx-panneau: #f7f7f5;
  --theme-palette-color-1: #131313;
  --theme-palette-color-3: #5a5a5a;
  --theme-palette-color-4: #131313;
  --theme-palette-color-5: #e6e6e3;

  background: #ffffff;
  color: #5a5a5a;
  padding: clamp(28px, 5vw, 68px) var(--bx-marge) clamp(48px, 7vw, 96px);
  margin: 0;
}

/* La colonne de lecture. 68 caracteres environ : au-dela l'oeil perd la
   ligne suivante en revenant a la marge. */
.bx-page > * {
  max-width: 68ch;
  margin-inline: auto;
}
.bx-page > h2 {
  margin: clamp(36px, 5vw, 62px) auto clamp(12px, 1.6vw, 20px);
  font-size: clamp(24px, 2.6vw, 36px);
  color: #131313;
}
.bx-page > h2:first-child { margin-top: 0; }
.bx-page p { margin: 0 0 1.05em; }
.bx-page a { color: #131313; text-underline-offset: .22em; }
.bx-page a:hover { color: #d81f26; }

/* Le chapeau : un cran plus grand, separe par un filet. C'est la reponse
   courte avant les reponses longues. */
.bx-lead {
  font-size: clamp(17px, 1.1vw + 14px, 20px);
  line-height: 1.55;
  color: #3a3a3a;
  border-bottom: 1px solid var(--bx-trait);
  padding-bottom: clamp(18px, 2.4vw, 30px);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.bx-lead p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- la grille
   Trois cartes : un chiffre en gros, une legende en dessous. */
.bx-grille,
.bx-preuves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bx-trait);
  border: 1px solid var(--bx-trait);
  margin: clamp(24px, 3vw, 38px) auto;
}
.bx-grille > div,
.bx-preuves > div {
  background: #ffffff;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bx-grille b,
.bx-preuves b {
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: #131313;
  line-height: 1.05;
}
.bx-grille i,
.bx-preuves span {
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: #6e6e6e;
}
@media (max-width: 620px) {
  .bx-grille, .bx-preuves { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .bx-grille, .bx-preuves { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ le tableau des
   tailles. Il doit pouvoir defiler seul : a 320 px, cinq colonnes de
   chiffres ne tiennent pas, et c'est la page qui partait de travers. */
.bx-tailles {
  width: 100%;
  border-collapse: collapse;
  margin: clamp(20px, 2.6vw, 32px) auto;
  font-variant-numeric: tabular-nums;
}
.bx-tailles th,
.bx-tailles td {
  border: 1px solid var(--bx-trait);
  padding: 11px 12px;
  text-align: left;
  font-size: 15px;
}
.bx-tailles th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6e6e6e;
  background: #f7f7f5;
}
.bx-tailles td:first-child { font-weight: 600; color: #131313; }
.bx-tailles tbody tr:nth-child(even) td { background: #fafafa; }

/* ------------------------------------------------------------- la FAQ
   Un accordeon natif : pas une ligne de JavaScript. */
.bx-faq {
  border-top: 1px solid var(--bx-trait);
  margin: clamp(20px, 2.6vw, 32px) auto;
}
.bx-faq details { border-bottom: 1px solid var(--bx-trait); }
.bx-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  position: relative;
  font-weight: 500;
  font-size: 16px;
  color: #131313;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.bx-faq summary::-webkit-details-marker { display: none; }
/* Le signe qui dit ouvert ou ferme. Une croix qui devient un trait. */
.bx-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(currentColor, currentColor) center / 13px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 13px no-repeat;
  transition: transform .22s var(--bx-ease);
}
.bx-faq details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 13px 1px no-repeat;
  transform: rotate(180deg);
}
.bx-faq details p {
  margin: 0 0 16px;
  color: #5a5a5a;
  padding-right: 34px;
}

/* ------------------------------------------------------- l'appel final */
a.bx-cta {
  /* l'action est noire : le rouge reste rare, donc visible */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: clamp(22px, 3vw, 34px) auto;
  padding: 15px 30px;
  background: #131313;
  color: #fff;            /* 4,86:1 */
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: none;
  text-decoration: none;
}
a.bx-cta:hover { background: #3a3a3a; color: #fff; }

/* --------------------------------------------------- la rangee de liens
   Le maillage interne entre les pages. C'etait une suite de liens colles
   les uns aux autres, sans separation ni zone de clic. */
.bx-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(34px, 4.5vw, 56px);
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--bx-trait);
}
.bx-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--bx-trait-fort);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #131313;
  text-decoration: none;
}
.bx-liens a:hover { background: #131313; color: #ffffff; border-color: #131313; }

/* ------------------------------------------------------ divers heritage */
.bx-page .bx-kicker {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6e6e6e;
  margin-bottom: 10px;
}
.bx-page .bx-sec-h { font-size: clamp(24px, 2.6vw, 36px); color: #131313; }
.bx-page .bx-split { display: grid; gap: clamp(18px, 3vw, 34px); }
.bx-page .bx-card {
  border: 1px solid var(--bx-trait);
  padding: 18px;
  background: #f7f7f5;
}
.bx-page .bx-more,
.bx-page .bx-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  font-size: 14px;
}

/* ------------------------------------------------------------ Ton Bled */
.bx-bled-page .bx-bled-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 16px auto;
}
.bx-bled-page input[type="tel"],
.bx-bled-page input[type="text"] {
  flex: 1 1 220px;
  min-height: 50px;
  font-size: 16px;   /* sous 16 px, Safari iOS zoome et fait sauter la page */
  padding: 12px 14px;
  border: 1px solid var(--bx-trait-fort);
  border-radius: 4px;
  background: #fff;
  color: #131313;
}
.bx-bled-note { font-size: 13px; color: #6e6e6e; }
.bx-niveaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--bx-trait);
  border: 1px solid var(--bx-trait);
}
.bx-niveaux > * { background: #ffffff; padding: 16px; }

/* ============================================================== le rail
   Les blocs « data-bx-products » etaient remplis par un script qui n'est
   plus charge : ils restaient vides sur seize pages. Ils sont desormais
   rendus par PHP, donc visibles sans JavaScript et lisibles par Google. */
.bx-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 1fr);
  gap: 1px;
  background: var(--bx-trait);
  border: 1px solid var(--bx-trait);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: clamp(22px, 3vw, 34px) auto;
  max-width: 68ch;
}
.bx-rail a {
  background: #ffffff;
  padding: 12px;
  text-decoration: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #131313;
}
.bx-rail a:hover { background: #f7f7f5; }
.bx-rail img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #131313;
}
.bx-rail strong { font-size: 14px; font-weight: 500; line-height: 1.25; }
.bx-rail span { font-size: 13px; color: #6e6e6e; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .bx-rail { grid-auto-columns: minmax(150px, 62%); }
}