/* =========================================================
   INDEX
   01. Hero simple des pages internes
   02. Grilles utilitaires
   03. Cartes de contenu simples
   04. Blocs locaux / FAQ / listes
   05. Responsive
   ========================================================= */

/* =========================================================
   01. HERO SIMPLE DES PAGES INTERNES
   ========================================================= */
.page-hero{
  padding:38px 0 24px;
}

.page-hero .container{
  max-width:980px;
}

.breadcrumbs{
  font-size:.95rem;
  margin-bottom:12px;
  color:var(--muted);
}

.breadcrumbs a{
  color:inherit;
}

.page-hero h1{
  font-size:clamp(2rem, 3vw, 3.1rem);
  margin-bottom:14px;
}

.page-hero .muted{
  max-width:760px;
  line-height:1.7;
}

/* =========================================================
   02. GRILLES UTILITAIRES
   ========================================================= */
.grid-2,
.grid-3,
.local-layout,
.card-grid,
.info-grid,
.menu-grid,
.sectors-grid{
  display:grid;
  gap:24px;
}

.grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid-3,
.info-grid,
.menu-grid,
.sectors-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.local-layout{
  grid-template-columns:minmax(0, 1.15fr) minmax(300px, .85fr);
  align-items:start;
}

.stack{
  display:grid;
  gap:16px;
}

.list-reset{
  list-style:none;
  margin:0;
  padding:0;
}

/* =========================================================
   03. CARTES DE CONTENU SIMPLES
   ========================================================= */
.contact-card,
.service-card,
/*.location-card,*/
.info-card,
.menu-card,
.sector-card{
  padding:24px;
}

.callout{
  padding:28px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#173b2d 0%,#204a39 100%);
  color:#fff;
  box-shadow:var(--shadow-md);
}

.callout h2,
.callout h3,
.callout p{
  color:#fff;
}

.callout p{
  opacity:.88;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:var(--primary-dark);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.fake-input{
  min-height:50px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}

.notice{
  padding:16px 18px;
  border-radius:18px;
  background:#fff7ef;
  border:1px solid rgba(197,106,42,.14);
}

.sticky-card{
  position:sticky;
  top:110px;
}

/* =========================================================
   04. BLOCS LOCAUX / FAQ / LISTES
   ========================================================= */
.location-card > img,
.menu-card > img,
.sector-card > img{
  width:100%;
  border-radius:18px;
  margin-bottom:18px;
  background:#e6ddd3;
}

.local-links,
.info-list{
  display:grid;
  gap:10px;
}

.faq{
  display:grid;
  gap:14px;
}

.faq .faq-item,
.faq details.card{
  padding:18px 20px;
}

.faq summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}

.faq summary::-webkit-details-marker{
  display:none;
}

.mini-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--primary);
  display:inline-block;
}

/* =========================================================
   05. RESPONSIVE
   ========================================================= */
@media (max-width:1120px){
  .local-layout,
  .grid-2,
  .grid-3,
  .info-grid,
  .menu-grid,
  .sectors-grid,
  .card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .local-layout{
    grid-template-columns:1fr;
  }

  .sticky-card{
    position:static;
    top:auto;
  }
}

@media (max-width:767px){
  .grid-2,
  .grid-3,
  .info-grid,
  .menu-grid,
  .sectors-grid,
  .card-grid{
    grid-template-columns:1fr;
  }

  .contact-card,
  .service-card,
  .location-card,
  .info-card,
  .menu-card,
  .sector-card,
  .callout{
    padding:22px;
  }
}