/* ============================================================
   se-design.css — Périmètre SE (Agent SE)
   Surcharge le CSS racine (lié APRÈS /slideshow.css).
   But : tableaux tarifs lisibles sur mobile (prix visible à droite,
   pas de débordement) + cartes d'offres spa (design type site FR).
   ============================================================ */

/* --- TABLEAUX TARIFS : pleine largeur, prix visible, pas de coupe --- */
.tarif-table{
  width:100%;
  margin:14px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tarif-table table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:15px;
}
.tarif-table th,
.tarif-table td{
  padding:10px 10px;
  border-bottom:1px solid #3a3a3a;
  vertical-align:top;
}
.tarif-table thead th{
  background:#d4af37;
  color:#1a1a1a;
  text-align:left;
  font-weight:700;
  border-bottom:none;
}
/* colonne prix : alignée à droite, jamais coupée (uniquement les cellules .tarif-prix) */
.tarif-table .tarif-prix{
  text-align:right;
  white-space:nowrap;
}
.tarif-table thead th:last-child{ text-align:right; }
/* couleur dorée du prix UNIQUEMENT dans le corps (pas l'en-tête, sinon or sur or) */
.tarif-table tbody .tarif-prix{
  color:#d4af37;
  font-weight:700;
}
.tarif-table td.tarif-formule{ color:#f0f0f0; }

/* mobile : on resserre pour gagner de la largeur utile */
@media (max-width:600px){
  .tarif-table table{ font-size:14px; }
  .tarif-table th,
  .tarif-table td{ padding:8px 7px; }
}

/* le "cadre" autour des tableaux ne doit pas rogner la largeur sur mobile */
@media (max-width:600px){
  .tarif-wrap{ padding:12px 8px !important; }
}

/* --- CARTES D'OFFRES SPA (titre + descriptif + prix), design type FR --- */
.spa-offers{ margin:22px 0; }
.spa-offer{
  background:#2a2a2a;
  border:1px solid #3a3a3a;
  border-radius:8px;
  padding:16px 18px;
  margin:14px 0;
}
.spa-offer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.spa-offer-title{
  margin:0;
  color:#d4af37;
  font-size:19px;
  line-height:1.3;
  flex:1 1 auto;
}
.spa-offer-price{
  background:#d4af37;
  color:#1a1a1a;
  font-weight:700;
  padding:8px 16px;
  border-radius:8px;
  white-space:nowrap;
  flex:0 0 auto;
}
.spa-offer-desc{
  margin:12px 0 0;
  color:#e8e8e8;
  line-height:1.55;
}

/* --- Photos intercalées : image isolée pleine largeur dans le flux --- */
.inline-photo{ margin:18px 0; }
.inline-photo img{
  width:100%;
  max-height:300px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

/* --- FORMULAIRE DE CONTACT responsive (accueil) --- */
.se-form{ margin:6px 0 0; }
.se-form-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.se-form-grid label{
  display:block;
  flex:1 1 calc(50% - 6px);
  color:#e8e8e8;
  font-size:14px;
}
.se-form-grid input,
.se-form-grid select{
  width:100%;
  box-sizing:border-box;
  margin-top:4px;
  padding:10px;
  background:#1f1f1f;
  border:1px solid #4a4a4a;
  border-radius:6px;
  color:#fff;
  font-size:15px;
}
.se-form-grid .full{ grid-column:1 / -1; }
.se-form-btn{
  margin-top:14px;
  background:#d4af37;
  color:#1a1a1a;
  border:none;
  border-radius:8px;
  padding:13px 26px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  width:100%;
}
.se-form-btn:hover{ background:#e6c14d; }
@media (max-width:600px){
  .se-form-grid label{ flex:1 1 100%; }  /* mobile : champs empilés, pleine largeur */
}

/* --- Rangée de photos responsive (plusieurs côte à côte desktop, empilées mobile) --- */
.photo-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:18px 0;
}
.photo-row figure{
  flex:1 1 220px;
  margin:0;
}
.photo-row img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}