/* ═══════════════════════════════════════════════════════════════════
   LCDMH — MOTEUR DE GUIDAGE · feuille de style
   Prototype : /pneus.html uniquement · 15/09/2026

   Charte lcdmh.com : orange #e67e22 · beige #fbfaf8 · noir #141210

   Ce fichier ne s'applique qu'aux blocs rendus par lcdmh-guidage.js.
   Tout est préfixé .gd- (guidage) — aucun risque de collision avec
   les classes existantes du site (bp-*, maillage-*, lcdmh-*).
   La section reste invisible si le JS ne s'exécute pas : la règle
   [hidden] est respectée nativement, on ne la surcharge pas.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Conteneur général ---------- */
.gd-section {
  max-width: 900px;
  margin: 2.5rem auto 1.5rem;
  padding: 0 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #141210;
}
.gd-section * { box-sizing: border-box; }

.gd-block { margin-bottom: 2.2rem; }

.gd-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 1rem;
  color: #141210;
  border-left: 4px solid #e67e22;
  padding-left: 0.8rem;
}

/* ---------- Preuve terrain : facade vidéo ---------- */
.gd-proof {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #e8e2d8;
  border-radius: 10px;
  background: #fbfaf8;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.gd-proof:hover { border-color: #e67e22; box-shadow: 0 4px 16px rgba(230,126,34,.14); }
.gd-proof:focus-visible { outline: 3px solid #e67e22; outline-offset: 2px; }

.gd-proof-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #141210;
  overflow: hidden;
}
.gd-proof-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Repli si la vignette est absente : dégradé aux couleurs de la charte */
.gd-proof-media.is-fallback {
  background: linear-gradient(135deg, #141210 0%, #3a3129 55%, #e67e22 100%);
}
.gd-proof-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(230,126,34,.94);
  color: #fff;
  font-size: 1.5rem;
  line-height: 64px;
  text-align: center;
  padding-left: 5px;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.gd-proof-body { display: block; padding: .85rem 1rem 1rem; }
.gd-proof-titre {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: .3rem;
}
.gd-proof-cta { display: block; font-size: .87rem; color: #b8631a; font-weight: 600; }

/* Lecteur inséré après le clic : même gabarit que la facade */
.gd-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  background: #141210;
}
.gd-proof-yt {
  display: inline-block;
  margin-top: .55rem;
  font-size: .82rem;
  color: #7a6f63;
  text-decoration: underline;
}
.gd-proof-yt:hover { color: #e67e22; }

/* ---------- Les 3 choix d'usage ---------- */
.gd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }

/* ---------- Variante 4 choix (accueil : 4 intentions, consigne Yves) ---------- */
.gd-steps.gd-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .gd-steps.gd-4 { grid-template-columns: repeat(2, 1fr); }
}

.gd-step {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 140px;
  padding: 1.05rem 1rem;
  border: 1px solid #e8e2d8;
  border-top: 3px solid #e67e22;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: #141210;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.gd-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230,126,34,.16);
  border-color: #e67e22;
}
.gd-step:focus-visible { outline: 3px solid #e67e22; outline-offset: 2px; }

.gd-step-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.gd-step-emoji { font-size: 1.5rem; line-height: 1; }
.gd-step-label { font-weight: 700; font-size: 1.05rem; }
.gd-step-why { font-size: .86rem; line-height: 1.45; color: #55504a; flex: 1; }
.gd-step-go { margin-top: .7rem; font-size: .84rem; font-weight: 600; color: #e67e22; }

/* ---------- Pont voyage + étape suivante ---------- */
.gd-bridge, .gd-next {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.1rem;
  border-radius: 10px;
  text-decoration: none;
  color: #141210;
  transition: background .16s ease, border-color .16s ease;
}
.gd-bridge { background: #fbfaf8; border: 1px solid #e8e2d8; }
.gd-bridge:hover { background: #fdf3e7; border-color: #e67e22; }
.gd-bridge:focus-visible, .gd-next:focus-visible { outline: 3px solid #e67e22; outline-offset: 2px; }
.gd-next { background: #141210; color: #fbfaf8; }
.gd-next:hover { background: #2b251f; }
.gd-bridge-txt, .gd-next-txt { flex: 1; font-size: .95rem; line-height: 1.4; }
.gd-bridge-go, .gd-next-go { font-weight: 700; color: #e67e22; white-space: nowrap; }

/* ---------- Mobile-first : sous 600 px ---------- */
@media (max-width: 600px) {
  .gd-section { margin: 2rem auto 1rem; padding: 0 .85rem; }
  .gd-title { font-size: 1.15rem; }
  .gd-steps { grid-template-columns: 1fr; gap: .7rem; }
  .gd-steps.gd-4 { grid-template-columns: 1fr; }
  .gd-step {
    min-height: 0;
    padding: 1rem .95rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-height: 56px;               /* cible tactile confortable */
  }
  .gd-step-head { margin-bottom: 0; flex: 0 0 auto; }
  .gd-step-emoji { font-size: 1.35rem; }
  .gd-step-label { font-size: 1rem; }
  .gd-step-why {
    flex: 1 0 100%;
    margin-top: .45rem;
    font-size: .84rem;
  }
  .gd-step-go { flex: 1 0 100%; margin-top: .3rem; }
  .gd-proof-play { width: 54px; height: 54px; line-height: 54px; font-size: 1.25rem; }
  .gd-bridge, .gd-next { padding: .85rem .9rem; }
  .gd-bridge-txt, .gd-next-txt { font-size: .9rem; }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .gd-step, .gd-proof, .gd-bridge, .gd-next { transition: none; }
  .gd-step:hover { transform: none; }
}