/* =========================================================
   ACI de Sète — feuille de style commune
   Palette : Sable / Marine / Grenade / Cuivre / Olive
   ========================================================= */

:root{
  --sable:      #F7F1E6;
  --sable-2:    #EFE6D4;
  --marine:     #1F3A4C;
  --marine-2:   #16293670;
  --grenade:    #A23E48;
  --grenade-d:  #832F38;
  --cuivre:     #C98A4B;
  --olive:      #6E7F63;
  --encre:      #26313B;
  --encre-doux: #5C6B72;
  --blanc:      #FFFCF7;

  --font-display: "Frank Ruhl Libre", Georgia, serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 6px;
  --shadow: 0 8px 24px -12px rgba(31,58,76,0.35);
  --container: 1080px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--marine);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
}

h1{ font-size: clamp(2rem, 5vw + 1rem, 3.2rem); }
h2{ font-size: clamp(1.5rem, 3vw + 1rem, 2.2rem); }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1em; }

a{ color: var(--grenade); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--cuivre);
  outline-offset: 3px;
}

img{ max-width:100%; display:block; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.eyebrow{
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--grenade);
}

/* ---------- motif décoratif : ligne de vaguelettes ---------- */
.wave-divider{
  height: 18px;
  background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--cuivre) 9.5px, var(--cuivre) 10px, transparent 10.5px);
  background-size: 20px 18px;
  background-repeat: repeat-x;
  opacity: .55;
  margin: 0 auto;
  max-width: var(--container);
}

/* ================= HEADER / NAV ================= */
.site-header{
  background: var(--marine);
  color: var(--blanc);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 68px;
}
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  color: var(--blanc);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.brand:hover{ text-decoration:none; opacity:.9; }
.brand svg{ flex-shrink:0; }
.brand-sub{
  display:block;
  font-family: var(--font-body);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--cuivre);
  font-weight:700;
}

.nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border: 1px solid #ffffff40;
  border-radius: var(--radius);
  color: var(--blanc);
  width:42px; height:42px;
  cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }

.main-nav{
  display:none;
  flex-direction:column;
  gap: 0;
  background: var(--marine);
  border-top: 1px solid #ffffff22;
}
.main-nav.open{ display:flex; }
.main-nav a{
  color: var(--blanc);
  padding: 14px 20px;
  border-bottom: 1px solid #ffffff14;
  font-weight:600;
  font-size:.95rem;
}
.main-nav a:hover{ background:#ffffff10; text-decoration:none; }
.main-nav a[aria-current="page"]{ color: var(--cuivre); }

@media(min-width: 860px){
  .nav-toggle{ display:none; }
  .main-nav{
    display:flex;
    flex-direction:row;
    background:none;
    border-top:none;
    gap: 4px;
  }
  .main-nav a{
    border-bottom:none;
    padding: 10px 14px;
    border-radius: var(--radius);
  }
  .main-nav a:hover{ background:#ffffff14; }
}

/* ================= HERO ================= */
.hero{
  background: linear-gradient(160deg, var(--marine) 0%, #163040 100%);
  color: var(--blanc);
  padding: 56px 0 64px;
  position: relative;
  overflow:hidden;
}
.hero .container{
  display:grid;
  gap: 32px;
  align-items:center;
}
.hero-eyebrow{
  color: var(--cuivre);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.8rem;
  font-weight:700;
}
.hero h1{ color: var(--blanc); }
.hero p.lead{
  font-size: 1.1rem;
  color: #E7E1D4;
  max-width: 46ch;
}
.hero-art{
  justify-self:center;
}
@media(min-width: 780px){
  .hero .container{ grid-template-columns: 1.1fr .9fr; }
}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight:700;
  font-size:.95rem;
  cursor:pointer;
  border: 2px solid transparent;
  transition: transform .15s ease;
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn-primary{
  background: var(--cuivre);
  color: var(--marine);
}
.btn-primary:hover{ background:#d99a5c; }
.btn-outline{
  background: transparent;
  border-color: #ffffff70;
  color: var(--blanc);
}
.btn-outline:hover{ background:#ffffff18; }
.btn-secondary{
  background: var(--grenade);
  color: var(--blanc);
}
.btn-secondary:hover{ background: var(--grenade-d); }

/* ================= SECTIONS ================= */
.section{ padding: 56px 0; }
.section-alt{ background: var(--sable-2); }
.section-marine{ background: var(--marine); color: var(--blanc); }
.section-marine h2{ color: var(--blanc); }
.section-header{ max-width: 60ch; margin-bottom: 2rem; }

.grid-cards{
  display:grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media(min-width: 700px){
  .grid-cards{ grid-template-columns: repeat(3, 1fr); }
}
.card{
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--cuivre);
}
.card h3{ margin-bottom:.4rem; }
.card svg{ margin-bottom: .8rem; }
.card p{ color: var(--encre-doux); margin-bottom: .6rem; }

/* ---------- Ticket Chabbat (élément signature) ---------- */
.ticket{
  background: var(--blanc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position:relative;
  padding: 26px 26px 22px;
  border: 1px dashed var(--cuivre);
}
.ticket::before, .ticket::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:22px; height:22px;
  background: var(--sable);
  border-radius:50%;
}
.ticket::before{ left:-11px; }
.ticket::after{ right:-11px; }
.ticket-row{
  display:flex;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--sable-2);
}
.ticket-row:last-child{ border-bottom:none; }
.ticket-label{ color: var(--encre-doux); font-weight:600; }
.ticket-value{ color: var(--marine); font-weight:700; }

/* ================= TABLES (horaires) ================= */
.table-wrap{ overflow-x:auto; }
table.horaires{
  width:100%;
  border-collapse: collapse;
  background: var(--blanc);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  min-width: 480px;
}
table.horaires th, table.horaires td{
  padding: 14px 18px;
  text-align:left;
  border-bottom: 1px solid var(--sable-2);
}
table.horaires th{
  background: var(--marine);
  color: var(--blanc);
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:.02em;
}
table.horaires tr:last-child td{ border-bottom:none; }
table.horaires tr:nth-child(even) td{ background: var(--sable); }

/* ================= INFO LIST ================= */
.info-list{ list-style:none; margin:0; padding:0; }
.info-list li{
  display:flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sable-2);
}
.info-list li:last-child{ border-bottom:none; }
.info-list svg{ flex-shrink:0; margin-top:2px; color: var(--grenade); }

/* ================= QUOTE / MOT DU PRESIDENT ================= */
.quote-block{
  border-left: 4px solid var(--grenade);
  padding: 4px 0 4px 22px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--marine);
  font-style: italic;
}
.quote-block cite{
  display:block;
  margin-top:.6rem;
  font-family: var(--font-body);
  font-style:normal;
  font-size:.85rem;
  color: var(--encre-doux);
  font-weight:700;
  letter-spacing:.03em;
}

/* ================= FORM (contact) ================= */
.form-field{ margin-bottom: 18px; }
.form-field label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
  color: var(--marine);
  font-size:.9rem;
}
.form-field input, .form-field textarea{
  width:100%;
  padding: 12px 14px;
  border: 1px solid #C9BFA9;
  border-radius: var(--radius);
  background: var(--blanc);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--encre);
}
.form-field input:focus, .form-field textarea:focus{
  outline: 3px solid var(--cuivre);
  outline-offset: 1px;
  border-color: var(--cuivre);
}

.note-box{
  background: #EADBC8;
  border-left: 4px solid var(--cuivre);
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size:.92rem;
  color: var(--marine);
}

/* ================= MAP ================= */
.map-frame{
  border:0;
  width:100%;
  height: 360px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ================= GALERIE PHOTOS ================= */
.gallery-grid{
  display:grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media(min-width: 560px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media(min-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
.photo-slot{
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow:hidden;
  position:relative;
  background: linear-gradient(150deg, var(--sable-2), #e3d5b8);
  border: 2px dashed var(--cuivre);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--encre-doux);
  padding: 16px;
}
.photo-slot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: calc(var(--radius) - 2px);
}
.photo-slot .slot-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  font-weight:600;
}
.photo-slot .slot-label span{ font-size:.75rem; font-weight:400; color: var(--encre-doux); }

/* ================= FOOTER ================= */
.site-footer{
  background: var(--marine);
  color: #C9D2D8;
  padding: 40px 0 24px;
  margin-top: 40px;
}
.footer-grid{
  display:grid;
  gap: 28px;
  grid-template-columns: 1fr;
  margin-bottom: 28px;
}
@media(min-width: 700px){
  .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; }
}
.site-footer h4{ color: var(--blanc); font-size:1rem; }
.site-footer a{ color:#C9D2D8; }
.site-footer a:hover{ color: var(--cuivre); }
.footer-bottom{
  border-top: 1px solid #ffffff1c;
  padding-top:18px;
  font-size:.82rem;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  color: #93A2AA;
}

/* ================= UTIL ================= */
.mt-0{ margin-top:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}