/* =========================================================
   ESPAGNE — Styles spécifiques (Refonte Layout)
========================================================= */

:root{
  --to-olive: #5b6b55;
  --to-terracotta: #b86b4b;
  --to-cream: #fbf7f1;
  --to-sand:  #f6efe6;
  --to-line: rgba(91, 107, 85, .18);
  --to-line-soft: rgba(0,0,0,.10);
}

/* --- Hero & Typos spécifiques --- */
.owners-hero--andalousie .owners-title,
.owners-hero--andalousie .owners-sub,
.owners-hero--andalousie .owners-kicker,
.owners-hero--andalousie .owners-reassurance{
  color: var(--to-olive);
}

.owners-hero--andalousie{
  position: relative;
  overflow: hidden;
  padding: 100px 0 80px; /* Plus aéré */
}
.owners-hero--andalousie::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(184,107,75,.16), transparent 56%),
    radial-gradient(820px 480px at 86% 18%, rgba(91,107,85,.12), transparent 56%);
  pointer-events:none;
}
.owners-hero--andalousie .owners-sub{ max-width: 860px; }

/* =========================================================
   Sections Générales (Cadres, Titres)
========================================================= */
.section-frame, .section-care, .section-offers, .section-quote, .section-final {
  padding: 90px 0; /* Espacement vertical augmenté pour l'aération */
}

.section-care { background: var(--to-cream); }
.section-offers { background: var(--to-sand); border-top: 1px solid rgba(0,0,0,.05); }

/* Titres de sections */
.care-head, .final-title, .frame-title {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px; /* Marge sous le titre augmentée */
}
.care-head h2, .final-title, .frame-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(36px, 4vw, 48px);
  color: var(--to-olive);
  margin-bottom: 18px;
}
.care-head p, .frame-text {
  font-family: Inter, sans-serif;
  color: rgba(91,107,85,.9);
  line-height: 1.8;
  font-size: 17px;
}

/* =========================================================
   GRID 1 : "Lo que cuidamos" (Style Voyageurs)
   2 colonnes, 2 lignes
========================================================= */
.care-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes strictes */
  gap: 40px; /* Espace large entre les cartes */
  max-width: 1000px;
  margin: 0 auto;
}

.care-item {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(184,107,75,.3); /* Bordure fine terracotta */
  border-radius: 12px;
  padding: 35px; /* Padding interne confortable */
  transition: transform 0.3s ease;
}

.care-item:hover {
  transform: translateY(-5px);
  background: #fff;
  box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.care-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  color: var(--to-terracotta);
  margin-bottom: 12px;
  font-weight: 600;
}

.care-desc {
  font-style: italic;
  color: rgba(91,107,85,.9);
  margin-bottom: 16px;
  font-size: 16px;
}

.care-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 16px;
}
.care-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: rgba(91,107,85,.85);
  font-size: 15px;
}
.care-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--to-terracotta);
}

/* =========================================================
   GRID 2 : "Notre accompagnement" (Style Propriétaires Luxe)
   1 & 2 côte à côte, 3 en dessous centré
========================================================= */
.offers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes */
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.offer-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 50px 40px;
  border-radius: 4px; /* Coins plus carrés pour le côté "Luxe/Statutaire" */
  box-shadow: 0 20px 60px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Le 3ème élément prend toute la largeur */
.offer-card:nth-child(3) {
  grid-column: 1 / -1; /* S'étend du début à la fin de la grille */
  display: grid;
  grid-template-columns: 200px 1fr; /* Numéro à gauche, texte à droite pour le format large */
  align-items: start;
  gap: 40px;
}

/* Style des "Gros Chiffres" */
.offer-number {
  font-family: "Cormorant Garamond", serif;
  font-size: 80px; /* Très grand */
  line-height: 1;
  color: rgba(220, 194, 126, .5); /* Doré doux transparent */
  font-weight: 600;
  margin-bottom: 10px;
}

.offer-script {
  font-family: "Mrs Saint Delafield", cursive;
  font-size: 48px;
  color: var(--to-terracotta);
  margin: -30px 0 20px 0; /* Remonte légèrement sur le chiffre */
  line-height: 1;
}

.offer-body {
  font-family: Inter, sans-serif;
  color: rgba(91,107,85,.9);
  line-height: 1.8;
  font-size: 16px;
  margin-bottom: 20px;
}

.offer-sep {
  width: 50px;
  height: 1px;
  background: var(--to-terracotta);
  margin: 0 0 20px 0;
  opacity: 0.5;
}

.offer-note {
  font-size: 14px;
  color: rgba(91,107,85,.7);
  font-style: italic;
}

/* Spécifique pour la carte 3 en format large : réajustement interne */
.offer-card:nth-child(3) .offer-number { margin-bottom: 0; }
.offer-card:nth-child(3) .offer-script { margin-top: 0; margin-bottom: 10px; }

/* =========================================================
   Citation & Footer
========================================================= */
.quote-text {
  font-family: "Cormorant Garamond", serif;
  font-size: 42px;
  text-align: center;
  color: var(--to-olive);
  margin-bottom: 20px;
}
.quote-sub {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  color: rgba(91,107,85,.8);
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 900px) {
  .care-grid { grid-template-columns: 1fr; gap: 20px; } /* 1 colonne mobile */
  
  .offers-grid { grid-template-columns: 1fr; gap: 30px; }
  .offer-card:nth-child(3) {
    grid-template-columns: 1fr; /* Repasse en vertical sur mobile */
    gap: 10px;
  }
  .offer-card { padding: 30px 20px; }
  
  .to-h2 { font-size: 32px; }
}