/*
Theme Name:   Astra Enfant — Entretien Tombes Calvados
Theme URI:    https://entretien-tombes-calvados.fr
Description:  Thème enfant pour entretien-tombes-calvados.fr
Author:       Mémoire Calvados
Template:     astra
Version:      1.0.0
Text Domain:  astra-enfant-etc
*/

/* ── Variables globales ──────────────────────────── */
:root {
  --etc-vert:    #2C5F2E;
  --etc-vert-cl: #E8F5E9;
  --etc-beige:   #F5F0EB;
  --etc-or:      #C17F24;
  --etc-or-cl:   #FDF3E3;
  --etc-texte:   #1A1A1A;
  --etc-gris:    #6B6B6B;
  --etc-gris-cl: #F5F5F3;
  --etc-blanc:   #FFFFFF;
  --etc-border:  #E0DDD8;
  --etc-radius:  8px;
  --etc-shadow:  0 2px 12px rgba(0,0,0,0.08);
}

/* ── Typographie ─────────────────────────────────── */
body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--etc-texte);
}

h1, h2, h3, h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: var(--etc-texte);
  line-height: 1.3;
}

h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--etc-vert); }
h3 { font-size: 1.2rem; }

/* ── Boutons CTA ─────────────────────────────────── */
.etc-btn,
.etc-btn-primary {
  display: inline-block;
  background: var(--etc-or);
  color: var(--etc-blanc) !important;
  padding: 14px 28px;
  border-radius: var(--etc-radius);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.etc-btn:hover,
.etc-btn-primary:hover {
  background: #a86d1e;
  transform: translateY(-1px);
}

.etc-btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--etc-vert) !important;
  padding: 12px 24px;
  border-radius: var(--etc-radius);
  font-weight: 600;
  border: 2px solid var(--etc-vert);
  text-decoration: none;
  transition: all 0.2s;
}
.etc-btn-secondary:hover {
  background: var(--etc-vert);
  color: var(--etc-blanc) !important;
}

/* ── Header ──────────────────────────────────────── */
.site-header {
  border-bottom: 3px solid var(--etc-vert);
  box-shadow: var(--etc-shadow);
}

.site-title a {
  color: var(--etc-vert) !important;
  font-weight: 700;
}

/* ── Navigation ──────────────────────────────────── */
.main-header-menu .menu-item a {
  color: var(--etc-texte) !important;
  font-weight: 500;
}
.main-header-menu .menu-item a:hover {
  color: var(--etc-vert) !important;
}

/* ── Hero section ────────────────────────────────── */
.etc-hero {
  background: var(--etc-vert);
  color: var(--etc-blanc);
  padding: 80px 20px;
  text-align: center;
}
.etc-hero h1 {
  color: var(--etc-blanc);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin-bottom: 16px;
}
.etc-hero p {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 32px;
}

/* ── Cartes formules ─────────────────────────────── */
.etc-formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 40px 0;
}
.etc-carte {
  background: var(--etc-blanc);
  border: 1px solid var(--etc-border);
  border-radius: var(--etc-radius);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--etc-shadow);
}
.etc-carte.vedette {
  border: 2px solid var(--etc-vert);
  position: relative;
}
.etc-carte.vedette::before {
  content: "La plus choisie";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--etc-vert);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.etc-carte .prix {
  font-size: 2rem;
  font-weight: 700;
  color: var(--etc-vert);
  margin: 16px 0 4px;
}
.etc-carte .prix-mois {
  font-size: 0.85rem;
  color: var(--etc-gris);
  margin-bottom: 20px;
}
.etc-carte ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
}
.etc-carte ul li {
  padding: 6px 0;
  border-bottom: 1px solid var(--etc-gris-cl);
  font-size: 0.9rem;
}
.etc-carte ul li::before {
  content: "✓ ";
  color: var(--etc-vert);
  font-weight: 700;
}

/* ── Réassurance ─────────────────────────────────── */
.etc-reassurance {
  background: var(--etc-gris-cl);
  padding: 40px 20px;
}
.etc-reassurance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.etc-reassurance-item .icone {
  font-size: 2rem;
  margin-bottom: 12px;
}
.etc-reassurance-item strong {
  display: block;
  color: var(--etc-vert);
  margin-bottom: 6px;
}

/* ── Maillage cimetières ─────────────────────────── */
.etc-cimetieres-proches {
  background: var(--etc-vert-cl);
  border-left: 4px solid var(--etc-vert);
  padding: 20px 24px;
  border-radius: 0 var(--etc-radius) var(--etc-radius) 0;
  margin: 32px 0;
}
.etc-cimetieres-proches h3 {
  color: var(--etc-vert);
  margin-bottom: 12px;
  font-size: 1rem;
}
.etc-cimetieres-proches a {
  display: inline-block;
  margin: 4px 8px 4px 0;
  color: var(--etc-vert);
  text-decoration: underline;
  font-size: 0.9rem;
}

/* ── CTA bloc ────────────────────────────────────── */
.etc-cta-bloc {
  background: var(--etc-beige);
  border: 1px solid var(--etc-border);
  border-radius: var(--etc-radius);
  padding: 40px 32px;
  text-align: center;
  margin: 40px 0;
}
.etc-cta-bloc h2 {
  color: var(--etc-texte);
  margin-bottom: 12px;
}
.etc-cta-bloc p {
  color: var(--etc-gris);
  margin-bottom: 24px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ── FAQ ─────────────────────────────────────────── */
.etc-faq details {
  border: 1px solid var(--etc-border);
  border-radius: var(--etc-radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.etc-faq summary {
  padding: 16px 20px;
  font-weight: 600;
  cursor: pointer;
  background: var(--etc-gris-cl);
  list-style: none;
}
.etc-faq summary::-webkit-details-marker { display: none; }
.etc-faq summary::after {
  content: "+";
  float: right;
  font-size: 1.2rem;
  color: var(--etc-vert);
}
.etc-faq details[open] summary::after { content: "−"; }
.etc-faq details[open] summary { background: var(--etc-vert-cl); color: var(--etc-vert); }
.etc-faq .faq-reponse { padding: 16px 20px; font-size: 0.95rem; line-height: 1.6; }

/* ── Breadcrumb ──────────────────────────────────── */
.rank-math-breadcrumb {
  font-size: 0.85rem;
  color: var(--etc-gris);
  margin-bottom: 24px;
  padding: 8px 0;
  border-bottom: 1px solid var(--etc-border);
}
.rank-math-breadcrumb a { color: var(--etc-vert); text-decoration: none; }
.rank-math-breadcrumb a:hover { text-decoration: underline; }

/* ── Tableau tarifs ──────────────────────────────── */
.etc-table-tarifs {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.9rem;
}
.etc-table-tarifs th {
  background: var(--etc-vert);
  color: white;
  padding: 12px 16px;
  text-align: left;
}
.etc-table-tarifs td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--etc-border);
}
.etc-table-tarifs tr:nth-child(even) td { background: var(--etc-gris-cl); }
.etc-table-tarifs .prix-cell { font-weight: 700; color: var(--etc-vert); }

/* ── Footer ──────────────────────────────────────── */
.site-footer {
  background: #1A1A1A;
  color: #CCCCCC;
}
.site-footer a { color: #AAAAAA; }
.site-footer a:hover { color: var(--etc-or); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  .etc-hero { padding: 50px 16px; }
  .etc-formules { grid-template-columns: 1fr; }
  .etc-cta-bloc { padding: 24px 20px; }
}

/* ── Footer légal ───────────────────────────────── */
.etc-footer-legal {
  text-align: center;
  padding: 24px 20px 16px;
  border-top: 1px solid #333;
  font-size: 0.85rem;
  color: #AAAAAA;
}
.etc-footer-legal p {
  margin: 4px 0;
}
.etc-footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.etc-footer-nav a {
  color: #AAAAAA !important;
  text-decoration: none;
  font-size: 0.85rem;
}
.etc-footer-nav a:hover {
  color: #C17F24 !important;
  text-decoration: underline;
}
.etc-footer-contact a {
  color: #AAAAAA !important;
}
.etc-footer-contact a:hover {
  color: #C17F24 !important;
}