/* =========================================================================
   The Best Occasion — correctifs v1.4.0
   1. Logo : le nom complet s'affiche aussi sur mobile.
   2. Débordement horizontal : suppression du défilement latéral parasite.
   3. Grille d'état : styles de la page /grille-etat/.
   Chargé après main.css, donc prioritaire à spécificité égale.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LOGO MOBILE
   ------------------------------------------------------------------------- */
/* La règle d'origine (critical.css) masquait le nom sous 480 px pour ne
   garder que l'emblème circulaire, illisible comme identifiant de marque.
   On rétablit le logo complet en réduisant sa hauteur et les marges autour,
   ce qui libère la place nécessaire au menu et au panier. */

@media (max-width: 479px) {
  .tbo-logo__complet { display: block !important; height: 34px; width: auto; }
  .tbo-logo__embleme { display: none !important; }
  .tbo-logo        { padding: .4rem .25rem; }
  .tbo-header__inner { gap: .5rem; padding: .5rem .75rem; }
  .tbo-burger      { padding: .5rem .4rem; }
}

/* Très petits écrans (≤ 360 px) : on descend encore un peu plutôt que de
   repasser à l'emblème. */
@media (max-width: 360px) {
  .tbo-logo__complet { height: 30px; }
  .tbo-header__inner { gap: .35rem; }
}

/* Header collant : hauteur réduite cohérente sur mobile. */
@media (max-width: 479px) {
  .tbo-header.est-collant .tbo-logo__complet { height: 28px; }
}


/* -------------------------------------------------------------------------
   2. DÉBORDEMENT HORIZONTAL
   ------------------------------------------------------------------------- */

/* 2a. Garde-fou racine.
   `overflow-x: clip` coupe le débordement sans créer de conteneur de
   défilement, ce qui préserve `position: sticky` du header — contrairement à
   `overflow: hidden`, qui le casserait. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* 2b. Éléments hors écran : remplacement du décalage par un découpage.
   `left: -9999px` étend la boîte de défilement du document. La technique
   `clip-path` masque sans déplacer, et reste accessible aux lecteurs d'écran. */
.tbo-skip-link:not(:focus):not(:active),
.tbo-hp {
  position: absolute !important;
  left: auto !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Le lien d'évitement doit redevenir pleinement visible au focus clavier. */
.tbo-skip-link:focus,
.tbo-skip-link:active {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: .6rem 1rem !important;
  clip-path: none !important;
  overflow: visible !important;
  z-index: 100;
}

/* 2c. Bandeau supérieur : l'adresse e-mail est un mot insécable long qui
   poussait le conteneur au-delà de la fenêtre sur mobile. */
.tbo-topbar__inner { flex-wrap: wrap; }
.tbo-topbar__mail  { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 479px) {
  .tbo-topbar__inner { justify-content: center; gap: .25rem .75rem; padding: .4rem .75rem; }
  .tbo-topbar        { font-size: .74rem; }
}

/* 2d. Décors circulaires en position absolue : on garantit le découpage par
   le conteneur, et on les neutralise au pointeur. */
.tbo-slider,
.tbo-slide,
.tbo-hero,
.tbo-cta-demande,
.tbo-tuile { overflow: hidden; }

.tbo-slide__anneau,
.tbo-cta-demande::before,
.tbo-cta-demande::after { pointer-events: none; }

/* 2e. Contenus intrinsèquement larges : tableaux, images, code, iframes.
   Les descriptions produits contiennent des tableaux de caractéristiques
   qui dépassent la largeur d'un mobile. */
.tbo-page img,
.woocommerce-product-details__short-description img,
.tbo-produit__description img { max-width: 100%; height: auto; }

.tbo-page table,
.tbo-produit__description table,
.woocommerce-Tabs-panel table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tbo-page pre,
.tbo-page iframe,
.tbo-produit__description iframe { max-width: 100%; }

/* 2f. Titres et mots longs : évite qu'une référence produit sans espace
   (« MacBook-Pro-13-2020-i5-16Go ») ne force la largeur. */
.tbo-page h1, .tbo-page h2, .tbo-page h3,
.tbo-carte-produit__titre,
.tbo-produit__titre { overflow-wrap: break-word; }

/* 2g. Grilles : sur mobile, `minmax(240px, …)` peut dépasser un écran de
   360 px. On borne la valeur basse à la largeur disponible. */
@media (max-width: 400px) {
  .tbo-carrousel { grid-auto-columns: minmax(min(240px, 78vw), 280px); }
}


/* -------------------------------------------------------------------------
   3. PAGE GRILLE D'ÉTAT
   ------------------------------------------------------------------------- */

.tbo-grades__intro {
  background: var(--tbo-ivoire, #F2EFE8);
  border-left: 4px solid var(--tbo-vert, #1F6F52);
  border-radius: 0 var(--tbo-radius, 14px) var(--tbo-radius, 14px) 0;
  padding: 1.25rem 1.35rem;
  margin: 0 0 2.25rem;
}
.tbo-grades__intro p:last-child { margin-bottom: 0; }

.tbo-grades__engagement {
  background: color-mix(in srgb, var(--tbo-vert, #1F6F52) 8%, white);
  border: 2px solid var(--tbo-vert, #1F6F52);
  border-radius: var(--tbo-radius, 14px);
  padding: 1.25rem 1.35rem;
  margin: 2rem 0;
}
.tbo-grades__engagement p { margin: 0; }
.tbo-grades__engagement strong { color: var(--tbo-vert, #1F6F52); }

/* Les quatre grades : cartes empilées, en colonnes dès qu'il y a la place. */
.tbo-grades__liste {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .tbo-grades__liste { grid-template-columns: repeat(2, 1fr); }
}

.tbo-grade {
  background: var(--tbo-blanc, #fff);
  border: 1px solid #E4E0D6;
  border-top: 4px solid var(--grade-couleur, var(--tbo-vert, #1F6F52));
  border-radius: var(--tbo-radius, 14px);
  padding: 1.2rem 1.25rem;
}
.tbo-grade--excellent { --grade-couleur: #1F6F52; }
.tbo-grade--tres-bon  { --grade-couleur: #2B8A66; }
.tbo-grade--bon       { --grade-couleur: #C8912F; }
.tbo-grade--correct   { --grade-couleur: #A2704A; }

.tbo-grade__nom {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: var(--tbo-semibold, 600);
  color: var(--grade-couleur);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.tbo-grade__puce {
  width: 12px; height: 12px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--grade-couleur);
}
.tbo-grade p { margin: 0 0 .6rem; }
.tbo-grade p:last-child { margin-bottom: 0; }
.tbo-grade__batterie {
  font-size: .88rem;
  color: var(--tbo-gris, #5A6560);
  padding-top: .6rem;
  border-top: 1px dashed #E4E0D6;
}

/* Critères par univers : liste de définitions lisible sur mobile. */
.tbo-grades__univers {
  margin: 0 0 2.5rem;
  display: grid;
  gap: 1rem;
}
.tbo-univers-critere {
  background: var(--tbo-blanc, #fff);
  border: 1px solid #E4E0D6;
  border-radius: var(--tbo-radius, 14px);
  padding: 1.1rem 1.2rem;
}
.tbo-univers-critere > summary {
  cursor: pointer;
  font-weight: var(--tbo-semibold, 600);
  color: var(--tbo-encre, #16241E);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.tbo-univers-critere > summary::-webkit-details-marker { display: none; }
.tbo-univers-critere > summary::after {
  content: '+';
  font-size: 1.4rem;
  line-height: 1;
  color: var(--tbo-vert, #1F6F52);
  flex-shrink: 0;
}
.tbo-univers-critere[open] > summary::after { content: '−'; }
.tbo-univers-critere[open] > summary { margin-bottom: .75rem; }
.tbo-univers-critere p { margin: 0 0 .6rem; }
.tbo-univers-critere p:last-child { margin-bottom: 0; }

.tbo-univers-critere__unite {
  display: inline-block;
  font-size: .74rem;
  font-weight: var(--tbo-semibold, 600);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--tbo-ambre, #F2B457) 30%, white);
  color: #6B4A0F;
  border-radius: 999px;
  padding: .2rem .6rem;
  margin-bottom: .6rem;
}

/* Hors garantie : ton plus sobre, volontairement. */
.tbo-grades__exclusions {
  background: #FBFAF6;
  border: 1px dashed #CFC9BB;
  border-radius: var(--tbo-radius, 14px);
  padding: 1.2rem 1.35rem;
  margin: 0 0 2.5rem;
}
.tbo-grades__exclusions ul { margin: .75rem 0 0; padding-left: 1.2rem; }
.tbo-grades__exclusions li { margin-bottom: .5rem; }

/* Recours : les trois protections, numérotées. */
.tbo-grades__recours { counter-reset: recours; list-style: none; margin: 0; padding: 0; }
.tbo-grades__recours li {
  counter-increment: recours;
  position: relative;
  padding: 0 0 1rem 3rem;
  margin: 0;
}
.tbo-grades__recours li::before {
  content: counter(recours);
  position: absolute;
  left: 0; top: 0;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tbo-vert, #1F6F52);
  color: var(--tbo-blanc, #fff);
  font-weight: var(--tbo-semibold, 600);
  font-size: .95rem;
}


/* -------------------------------------------------------------------------
   4. TRANSPORTEURS (pied de page)
   ------------------------------------------------------------------------- */

.tbo-footer__transporteurs {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}

.tbo-footer__transporteurs-titre {
  margin: 0;
  font-size: .8rem;
  color: #B9C2BC;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.tbo-footer__transporteurs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Le logo est fourni en couleurs sur fond transparent. Sur le vert sombre du
   pied de page, une pastille claire garantit le contraste exigé par la charte
   de marque du transporteur, qui interdit d'altérer les couleurs du logo. */
.tbo-footer__transporteurs li {
  background: #fff;
  border-radius: 8px;
  padding: .3rem .55rem;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.tbo-footer__transporteurs img {
  height: 54px;
  width: auto;
  display: block;
}

@media (max-width: 860px) {
  .tbo-footer__transporteurs { justify-content: center; width: 100%; }
}

@media (max-width: 479px) {
  .tbo-footer__transporteurs img { height: 44px; }
  .tbo-footer__transporteurs-titre { font-size: .74rem; }
}