/* =========================================================
   En avant Monaco — Feuille de style (fond uniforme)
   ---------------------------------------------------------
   Objectif :
   - fond beige UNI partout (hors hero avec photo)
   - garder les ombres derrière les objets
   - supprimer les variations de background (alt/hover/zones)
   ========================================================= */

:root{
  /* === COULEURS (texte / lignes) === */
  --bg:#f4f1ef;        /* beige unique */
  --fg:#4b3634;
  --muted:#6a625d;
  --line:#e6dfd9;
  --alt: var(--bg);    /* neutralisé (plus de fond alterné) */

  --accent:#c8101a;
  --accent-dark:#8f141c;

  --radius:18px;
  --shadow:0 18px 50px rgba(120,20,30,0.08);

  /* Accessibilité */
  --bg-skip-link:#000;
  --bg-skip-link-fg:#fff;

  /* Header */
  --bg-header: var(--bg);

  /* Nav */
  --bg-nav-hover: transparent; /* neutralisé */
  --bg-nav-popover: #fff;      /* popover reste blanc (lisible) */
  --bg-nav-toggle: #fff;       /* bouton menu blanc */

  /* Surfaces */
  --bg-surface: #fff;

  /* Form / inputs */
  --bg-form: #fff;
  --bg-input: #fff;

  /* Boutons */
  --bg-btn: #fff;

  /* Publications */
  --bg-pubs-btn: #fff;
  --bg-pub-media: transparent; /* neutralisé */

  /* Scrollbar thumb */
  --bg-scrollbar-thumb: rgba(44,42,41,0.18);

  /* Hero halo (radials) */
  --bg-hero-halo-1: rgba(200,16,26,0.10);
  --bg-hero-halo-2: rgba(248,245,242,0.92);

  /* Bande titres de section (image) */
  --bg-section-band: url("../img/bande.png");
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:300;
  font-synthesis:none;
  background:var(--bg);
  color:var(--fg);
  line-height:1.55;
  font-size:16px;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
a:hover{ text-decoration:underline; }

.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 18px;
}

/* Accessibilité */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:var(--bg-skip-link);
  color:var(--bg-skip-link-fg);
  padding:10px 12px;
  border-radius:12px;
}
.skip-link:focus{ left:18px; z-index:999; }

/* Titres */
h1,h2,h3{
  font-weight:700;
  letter-spacing:.2px;
  margin:0;
}

h1{
  font-size:clamp(30px,4.2vw,48px);
  line-height:1.08;
  margin:0 0 12px;
}
h2{ font-size:clamp(22px,3vw,30px); }
h3{ margin:0 0 8px; }

p{ margin:0; }

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background: var(--bg-header);
  backdrop-filter:blur(20px);
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.06);
  border-bottom: 1px solid rgba(210, 60, 45, 0.12);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height:60px; width:auto; }

/* =========================================================
   Navigation
   ========================================================= */

.nav{
  display:none;            /* Mobile : fermé par défaut */
  gap:10px;
  align-items:center;
}

/* Liens du menu */
.nav a{
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  background:transparent;
  color:var(--accent);
}

/* ✅ Hover sans variation de fond */
.nav a:hover{
  background:transparent;
  text-decoration:underline;
}

/* État "ouvert" sur mobile (popover) */
.nav.nav--open{
  display:flex;
  flex-direction:column;
  position:absolute;
  right:18px;
  top:64px;
  background:var(--bg-nav-popover);
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px;
  gap:6px;
  box-shadow:var(--shadow);
  min-width:200px;
  z-index:1000; /* au-dessus du contenu */
}

.nav-toggle{
  border:1px solid var(--line);
  background:var(--bg-nav-toggle);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  color: var(--accent);
  font-weight:700;
}

/* Desktop : menu toujours visible, bouton masqué */
@media (min-width:760px){
  .nav{
    display:flex;
    position:static;
    flex-direction:row;
    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    box-shadow:none;
    min-width:auto;
  }
  .nav-toggle{ display:none; }
}

/* Hero */
.hero{
  padding:70px 0 45px;
  position:relative;
  overflow:hidden;

  /* Image de fond */
  background: url("../img/back.jpg") center/cover no-repeat;
}

/* Overlay sombre + dégradé (lisibilité) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(79, 24, 15, 0.55), rgba(79, 24, 15, 0.40) 45%, rgba(79, 24, 15, 0.25));
  pointer-events:none;
}

/* Halo (très léger) */
.hero::after{
  content:"";
  position:absolute;
  inset:-200px -200px auto -200px;
  height:420px;
  background:
    radial-gradient(closest-side, var(--bg-hero-halo-1), transparent 65%),
    radial-gradient(closest-side, var(--bg-hero-halo-2), transparent 70%);
  transform:translateY(-40px);
  pointer-events:none;
  opacity:.9;
}

.hero-inner{
  position:relative;
  display:grid;
  gap:18px;
}
.hero-inner--single{ grid-template-columns:1fr !important; }

/* Texte en blanc dans le hero */
.hero .kicker{ color: rgba(255,255,255,.85); }
.hero h1{ color:#fff; }
.hero .lead{ color: rgba(255,255,255,.88); }

.kicker{
  display:inline-block;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
  font-weight:700;
}

.lead{
  font-size:clamp(16px,2vw,18px);
  color:var(--muted);
  margin:0;
}

/* Sections */
.section{ padding:44px 0; }

/* ✅ neutralisé : plus de section “alt” */
.section-alt{ background:transparent; border:0; }

.section-head{ margin-bottom:14px; }

.section-intro{
  margin:10px 0 0;
  color:var(--muted);
  max-width:none;
}

/* Cartes */
.cards{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.card, .post{
  border:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--bg-surface);
  padding:16px;
  box-shadow:var(--shadow);
}

.meta{
  margin:0 0 8px;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.hint{
  margin:14px 0 0;
  color:var(--muted);
  font-size:14px;
}

/* Liens accent */
.link{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.link:hover{ color:var(--accent-dark); text-decoration:underline; }

/* Form */
.form{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-form);
  box-shadow:var(--shadow);
  padding:16px;
  margin-top:18px;
}
.form--full{ max-width:none; }

.form-grid{
  display:grid;
  gap:12px;
}

.field{
  display:grid;
  gap:6px;
  margin-bottom:12px;
}

label{ font-weight:700; }

input, select, textarea{
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px 12px;
  font:inherit;
  font-weight:300;
  background:var(--bg-input);
  color:var(--fg);
}
textarea{ resize:vertical; }

.help{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

/* "Message" : label + aide sur la même ligne */
.field-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.help--inline{
  font-size:13px;
  color:var(--muted);
  font-weight:300;
  white-space:nowrap;
}

/* Email : label + input sur la même ligne */
.field--inline{
  display:grid;
  grid-template-columns: 320px 1fr;
  align-items:center;
  gap:12px;
}

.field-check{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:10px;
  align-items:start;
  margin:12px 0 14px;
}
.field-check label{
  font-weight:300;
  color:var(--muted);
}

.hp{ display:none; }

/* Boutons */
.btn{
  display:inline-block;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid var(--line);
  background:var(--bg-btn);
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
}
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn-primary:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
  text-decoration:none;
}

/* ✅ ghost hover sans fond */
.btn-ghost:hover{
  background:transparent;
  text-decoration:underline;
}

/* Publications - carrousel */
.pubs{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap:12px;
  margin-top:18px;
}

.pubs-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg-pubs-btn);
  font-weight:700;
  cursor:pointer;
}

/* ✅ hover sans fond */
.pubs-btn:hover{ background:transparent; text-decoration:underline; }

.pubs-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: calc((100% - 24px) / 3); /* 3 visibles */
  gap:12px;

  overflow-x:auto;
  padding:6px 2px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.pubs-track::-webkit-scrollbar{ height:10px; }
.pubs-track::-webkit-scrollbar-thumb{ background:var(--bg-scrollbar-thumb); border-radius:999px; }
.pubs-track::-webkit-scrollbar-track{ background:transparent; }

.pub-card{
  scroll-snap-align:start;
  border:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--bg-surface);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:230px;
}

/* ✅ fond media neutralisé (uniforme) */
.pub-media{
  aspect-ratio: 16 / 9;
  background: var(--bg-pub-media);
  border-bottom:1px solid rgba(44,42,41,0.08);
}
.pub-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pub-body{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pub-meta{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}
.pub-excerpt{ color:var(--muted); }

.pub-link{
  margin-top:auto;
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.pub-link:hover{ text-decoration:underline; }

/* Footer */
.site-footer{
  border-top:0;
  padding:22px 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
}
.footer-links{
  display:flex;
  gap:14px;
}
.footer-links a{
  text-decoration:none;
  font-weight:700;
}
.footer-links a:hover{ text-decoration:underline; }

/* Responsive */
@media (min-width: 760px){
  .nav{ display:flex; }
  .nav-toggle{ display:none; }

  .cards{ grid-template-columns:repeat(3, 1fr); }
  .form-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 759px){
  .help--inline{ white-space:normal; }
  .field--inline{
    grid-template-columns: 1fr;
    align-items:stretch;
  }

  .pubs{ grid-template-columns: 1fr; }
  .pubs-btn{ display:none; }
  .pubs-track{ grid-auto-columns: 90%; }
}

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

/* Ajustement mobile : décale un peu le bouton menu */
@media (max-width: 768px) {
  .header-inner {
    padding-right: 30px;
  }
}

/* ============================================================
   TITRES DE SECTION : texte blanc + "bande" (image) derrière
   ============================================================ */

.section-head h2{
  position:relative;
  display:inline-block;
  color:#fff;
  padding:12px 18px;
  z-index:0;
}

.section-head h2::before{
  content:"";
  position:absolute;
  left:-30px;
  right:-160px;
  height:70px;
  top:48%;
  transform:translateY(calc(-50% + 4px));
  background:var(--bg-section-band) no-repeat center;
  background-size: 100% 60%;
  opacity:1;
  z-index:-1;
  pointer-events:none;
}

@media (max-width: 759px){
  .section-head h2{
    padding:8px 14px;
  }

  .section-head h2::before{
    left:-10px;
    right:-80px;
    height:50px;
    transform:translateY(calc(-50% + 3px));
  }
}

/* ============================================================
   SECTION "Contribuer"
   ============================================================ */
#contribuer .form{
  border-color: var(--accent);
}