* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
}

/* ——— Patches anti-débordement ——— */

/* élargit un peu les cartes pour éviter les retours moches */
.grille-avis{
    grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); /* avant: 280px */
  }
  
  /* empêche tout dépassement horizontal */
  .carte-avis{ overflow: hidden; }
  
  /* permet aux mots longs / URLs / entités de se couper proprement */
  .texte-avis,
  .infos-auteur,
  .carte-avis {
    overflow-wrap: anywhere;      /* coupe où nécessaire */
    word-break: break-word;       /* fallback */
    hyphens: auto;                /* césure auto quand dispo */
  }
  
  /* garde la ligne des infos compacte mais sans chevauchement */
  .infos-auteur{
    flex-wrap: wrap;
    row-gap: .2rem;
  }
  
  /* évite que la citation colle aux bords sur petits écrans */
  .bloc-quote{ padding-right: .25rem; }
  
  /* au besoin, réduis un peu la taille de police des cartes sur petits écrans */
  @media (max-width: 640px){
    .texte-avis{ font-size: .96rem; line-height: 1.45; }
  }

/* --- Plan de scène : styles stables --- */
.bloc-plan{margin:1.6rem 0}
.titre-section{font-size:1.25rem;margin:0 0 .6rem}

/* grille verticale simple : légende / façade / middle / piste */
.plan-figure{
  display:grid;
  grid-template-rows:auto 48px auto 84px;
  gap:14px;
  border:1px dashed #ddd;
  border-radius:16px;
  background:
    linear-gradient(transparent 24px,#f5f5f5 25px) 0 0/100% 25px,
    linear-gradient(90deg,transparent 24px,#f5f5f5 25px) 0 0/25px 100%;
  padding:16px;
}

.plan-caption{
  margin:2px 0 6px;
  text-align:center;
  color:#555;
  line-height:1.35;
}

/* barres façade / piste */
.barre{
  width:92%;
  margin-inline:auto;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  height:48px;
  box-sizing:border-box;
  white-space:nowrap;
}
.barre span{display:block;white-space:nowrap}

.facade{background:#111;color:#fff}
.piste{background:#ffeeba;border:1px solid #e0c27c}

/* rang du milieu : 2 blocs côte à côte, centrés */
.plan-row{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:20px;
  width:92%;
  margin-inline:auto;
}

/* boîtes régie / retour : tailles mini pour éviter les retours à la ligne verticaux */
.box{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  height:64px;
  min-width:220px;            /* empêche “Régie DJ” de passer à la ligne */
  border-radius:12px;
  box-sizing:border-box;
  white-space:nowrap;         /* texte sur une seule ligne */
  font-weight:600;
}
.box span{display:block;white-space:nowrap}

.regie{background:#fff;border:2px solid #111}
.retour{background:#f5f5f5;border:1px solid #ccc}

/* Responsive : si très étroit, on empile proprement */
@media (max-width:640px){
  .plan-row{flex-direction:column;gap:12px}
  .box{min-width:unset;width:100%}
}