/* ============================================================
   CARPENSUD – Feuille de style principale
   Charte : teal #009cac | orange #ff910f | gris-bleu #5d6c89
   Polices : Josefin Sans (titres) / Open Sans (texte)
   ============================================================ */

/* ---------- Variables & Reset ---------- */
:root {
  --teal:       #009cac;
  --teal-dark:  #007e8c;
  --teal-light: #e6f7f9;
  --orange:     #ff910f;
  --orange-dark:#e07800;
  --slate:      #5d6c89;
  --slate-dark: #3f4f6a;
  --white:      #ffffff;
  --gray-light: #f5f7fa;
  --gray-mid:   #e2e8f0;
  --gray-text:  #4a5568;
  --dark-bg:    #1e2a3a;
  --dark-footer:#18202e;

  --font-title: 'Josefin Sans', sans-serif;
  --font-body:  'Open Sans', sans-serif;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 6px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.16);
  --radius:    12px;
  --radius-lg: 20px;
  --transition: .28s cubic-bezier(.4,0,.2,1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--gray-text);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
address { font-style: normal; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark-bg);
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  text-align: center;
  margin-bottom: .6rem;
  letter-spacing: -.5px;
}

.section-subtitle {
  font-size: 1.05rem;
  text-align: center;
  color: var(--slate);
  margin-bottom: 3rem;
  max-width: 600px;
  margin-inline: auto;
}

.section-header {
  margin-bottom: 1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .4px;
  padding: .6rem 1.3rem;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }

.btn-teal {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}
.btn-teal:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  box-shadow: 0 4px 16px rgba(0,156,172,.35);
}

.btn-orange {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
.btn-orange:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  box-shadow: 0 4px 16px rgba(255,145,15,.4);
}

.btn-ghost {
  background: transparent;
  color: var(--slate);
  border-color: var(--slate);
}
.btn-ghost:hover {
  background: var(--slate);
  color: var(--white);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--teal);
}

.btn-outline-teal {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn-outline-teal:hover {
  background: var(--teal);
  color: var(--white);
}

.btn-lg { padding: .85rem 2rem; font-size: 1.05rem; border-radius: 10px; }
.btn-sm { padding: .45rem 1rem; font-size: .87rem; border-radius: 7px; }

/* ---------- Cards Grid ---------- */
.cards-grid {
  display: grid;
  gap: 1.5rem;
}
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Card base ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem 1.5rem;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: relative;
  overflow: hidden;
  color: var(--gray-text);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.card:hover::before { transform: scaleX(1); }

.card h3 {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--dark-bg);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--teal);
  font-weight: 600;
  font-size: .9rem;
  margin-top: auto;
  transition: gap var(--transition), color var(--transition);
}
.card:hover .card-link { gap: .7rem; color: var(--orange); }

/* ---------- Card icon ---------- */
.card-icon-wrap {
  width: 64px; height: 64px;
  background: var(--teal-light);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--teal);
  transition: background var(--transition), color var(--transition);
}
.card-icon:hover .card-icon-wrap {
  background: var(--teal);
  color: var(--white);
}

.card-icon.card-featured {
  border: 2px solid var(--teal-light);
  background: linear-gradient(135deg, var(--white) 0%, var(--teal-light) 100%);
}
.card-icon.card-featured::before { background: var(--orange); }

/* ---------- Card avantages ---------- */
.card-avantage {
  background: var(--white);
  border-bottom: 3px solid transparent;
}
.card-avantage::before { display: none; }
.card-avantage:hover { border-bottom-color: var(--orange); }

.card-avantage-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(0,156,172,.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card-avantage:hover .card-avantage-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 6px 20px rgba(0,156,172,.45);
}

/* ---------- Card events ---------- */
.card-event {
  flex-direction: row;
  gap: 1.25rem;
  padding: 1.5rem;
  align-items: flex-start;
}
.card-event::before { height: 0; width: 4px; top: 0; bottom: 0; right: auto; border-radius: 0; }
.card-event:hover::before { transform: scaleY(1); transform-origin: top; }

.event-date-badge {
  flex-shrink: 0;
  width: 58px;
  background: linear-gradient(160deg, var(--teal) 0%, var(--teal-dark) 100%);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .6rem .3rem;
  color: var(--white);
  box-shadow: 0 3px 10px rgba(0,156,172,.3);
}
.event-day {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.event-month {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  opacity: .9;
}

.event-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.event-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.event-tag {
  background: var(--teal-light);
  color: var(--teal);
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.event-time {
  font-size: .82rem;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.event-body h3 {
  font-size: 1.05rem;
}
.event-location {
  font-size: .85rem;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.event-location .fa-location-dot { color: var(--orange); }
.event-body p:not(.event-location) { font-size: .9rem; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 5rem 6rem;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 40%, #00b8cc 80%, #0099a8 100%);
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,145,15,.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(0,0,0,.2) 0%, transparent 60%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 80px solid rgba(255,255,255,.06);
  top: -200px; right: -150px;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 720px;
}

.hero-badge {
  background: rgba(255,255,255,.2);
  color: var(--white);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: .45rem 1.1rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
}

.hero h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.5px;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.hero-subtitle {
  color: rgba(255,255,255,.88);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  z-index: 3;
  line-height: 0;
}
.hero-wave svg { width: 100%; }

/* ---------- STATS BAND ---------- */
.stats-band {
  background: var(--white);
  padding-block: 3.5rem;
  position: relative;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  padding: 2rem 1rem;
  background: var(--gray-light);
  border-radius: var(--radius);
  border-top: 4px solid var(--teal);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-item:nth-child(even) { border-top-color: var(--orange); }
.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.stat-number {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
}
.stat-item:nth-child(even) .stat-number { color: var(--orange); }
.stat-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--slate);
  text-align: center;
  max-width: 120px;
}

/* ---------- SECTION SEARCH ---------- */
.section-search {
  padding-block: 5rem;
  background: var(--gray-light);
}

/* ---------- SECTION AVANTAGES ---------- */
.section-avantages {
  padding-block: 5rem;
  background: var(--white);
}

/* ---------- SECTION EVENTS ---------- */
.section-events {
  padding-block: 5rem;
  background: linear-gradient(180deg, var(--gray-light) 0%, var(--white) 100%);
}
.section-footer-link {
  text-align: center;
  margin-top: 2.5rem;
}

/* ---------- SECTION TESTIMONIAL ---------- */
.section-testimonial {
  padding-block: 5rem;
  background: var(--teal-light);
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 3rem;
  max-width: 820px;
  margin-inline: auto;
  position: relative;
}
.testimonial-quote-icon {
  font-size: 3rem;
  color: var(--teal);
  opacity: .25;
  margin-bottom: 1rem;
  line-height: 1;
}
.testimonial-card blockquote p {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--slate-dark);
  line-height: 1.8;
  margin-bottom: 2rem;
}
.testimonial-card footer {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.testimonial-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.testimonial-card cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.testimonial-card cite strong {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--dark-bg);
}
.testimonial-card cite span {
  font-size: .87rem;
  color: var(--slate);
}

/* ---------- CTA FINAL ---------- */
.section-cta {
  position: relative;
  padding-block: 6rem;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 50%, #009cac 100%);
}
.cta-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 100% 0%, rgba(255,145,15,.2) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(0,0,0,.2) 0%, transparent 60%);
}
.cta-bg::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 70px solid rgba(255,255,255,.05);
  bottom: -200px; left: -100px;
}
.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.cta-icon {
  font-size: 3rem;
  color: rgba(255,255,255,.4);
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.section-cta h2 {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3rem);
}
.section-cta p {
  color: rgba(255,255,255,.85);
  font-size: 1.1rem;
  max-width: 560px;
}

/* ---------- SCROLL REVEAL ANIMATION ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1.visible { transition-delay: .1s; }
.reveal-delay-2.visible { transition-delay: .2s; }
.reveal-delay-3.visible { transition-delay: .3s; }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-list a { font-size: .72rem; padding: .85rem .3rem; }
}

/* Liens texte dans le contenu : orange pour montrer qu'ils sont cliquables */
.entry-content p a:not([class]),
.entry-content li a:not([class]) {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content p a:not([class]):hover,
.entry-content li a:not([class]):hover {
  color: var(--teal);
}

@media (max-width: 768px) {
  /* Le body est en flex column (fix footer) : sans ceci le wrapper du site
     ne peut pas rétrécir sous sa largeur min-content et déborde (ex. /commissions/) */
  .site.grid-container { max-width: 100%; min-width: 0; }

  /* Mobile : l'empilement des marges (24+30+24+30 de chaque côté) écrasait le contenu
     au centre (iframe HelloAsso 198px sur 375). On resserre chaque couche. */
  .site.grid-container { padding-left: 10px; padding-right: 10px; }
  .inside-article { padding: 24px 12px !important; }
  .entry-content .wp-block-group__inner-container { padding-left: 10px !important; padding-right: 10px !important; }
  .cs-etape { padding: 16px 10px !important; }
  /* Encadrés contenant une iframe (HelloAsso) : on gagne chaque pixel */
  .cs-etape:has(iframe) { padding: 12px 4px !important; }
  .cs-etape:has(iframe) .wp-block-group__inner-container { padding-left: 2px !important; padding-right: 2px !important; }
  .cards-3 { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Header */
  .header-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .header-cta { width: 100%; justify-content: flex-start; }
  .header-logo img { height: 52px; }

  /* Nav mobile */
  .nav-toggle { display: flex; margin-left: auto; }
  .main-nav .container { flex-wrap: wrap; justify-content: flex-end; }
  .nav-list {
    flex-direction: column;
    width: 100%;
    display: none;
    border-top: 1px solid rgba(255,255,255,.2);
  }
  .nav-list.open { display: flex; }
  .nav-list li { flex: none; }
  .nav-list a { text-align: left; padding: .75rem 1rem; font-size: .85rem; }

  /* Hero */
  .hero { padding-block: 4rem 5rem; min-height: auto; }
  .hero h1 { font-size: 1.75rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* CTA Buttons header wrap */
  .btn-lg { padding: .7rem 1.4rem; font-size: .95rem; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }

  /* Card events */
  .card-event { flex-direction: column; }

  /* Testimonial */
  .testimonial-card { padding: 2rem 1.5rem; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .header-cta { flex-direction: column; }
  .header-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- CVTHEQUE ---------- */
.cs-cv-onglets { display:flex; gap:8px; margin:18px 0; flex-wrap:wrap; }
.cs-cv-onglet { padding:10px 22px; border-radius:8px 8px 0 0; background:#eef4f5; color:#0e5a63; font-weight:600; text-decoration:none; border-bottom:3px solid transparent; }
.cs-cv-onglet.actif { background:#009cac; color:#fff; border-bottom-color:#ff910f; }
.cs-cv-depot { background:#f4fafb; border:1px solid #d5e8ea; border-radius:8px; padding:12px 16px; margin-bottom:18px; }
.cs-cv-btn { display:inline-block; background:#ff910f; color:#fff !important; padding:8px 16px; border-radius:6px; font-weight:600; text-decoration:none !important; font-size:.92rem; }
.cs-cv-btn--teal { background:#009cac; }
.cs-cv-btn:hover { opacity:.9; }
.cs-cv-filtres { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.cs-cv-filtres input[type=text] { flex:2; min-width:160px; padding:8px 10px; border:1px solid #cfdadd; border-radius:6px; }
.cs-cv-filtres select { flex:1; min-width:130px; padding:8px 10px; border:1px solid #cfdadd; border-radius:6px; }
.cs-cv-filtres button { background:#009cac; color:#fff; border:none; border-radius:6px; padding:8px 18px; font-weight:600; cursor:pointer; }
.cs-cv-grille { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.cs-cv-carte { border:1px solid #d5e8ea; border-radius:10px; padding:18px; background:#fff; transition:transform .2s, box-shadow .2s; }
.cs-cv-carte:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.cs-cv-carte-tete { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.cs-cv-carte h3 { margin:0 0 6px; color:#0e5a63; font-size:1.15rem; }
.cs-cv-statut { font-size:.8rem; font-weight:600; padding:3px 10px; border-radius:20px; background:#eef4f5; white-space:nowrap; }
.cs-cv-statut--disponible, .cs-cv-statut--ouverte { background:#e7f6ec; color:#15803d; }
.cs-cv-statut--discussion { background:#fef3e2; color:#b45309; }
.cs-cv-statut--recrute, .cs-cv-statut--pourvue { background:#e8eaed; color:#374151; }
.cs-cv-poste { font-weight:700; color:#ff910f; margin:2px 0 6px; }
.cs-cv-infos { color:#5c6b73; font-size:.9rem; margin:4px 0; }
.cs-cv-desc { font-size:.93rem; margin:8px 0; }
.cs-cv-reco { border-left:3px solid #ff910f; margin:10px 0; padding:8px 12px; background:#fffaf3; font-size:.92rem; font-style:italic; }
.cs-cv-docs { margin:12px 0 4px; display:flex; gap:8px; flex-wrap:wrap; }
.cs-cv-contact { font-size:.92rem; background:#f4fafb; padding:6px 10px; border-radius:6px; }
.cs-cv-vide { color:#5c6b73; padding:24px 0; text-align:center; }
.cs-cv-rgpd { background:#fef3e2; border:1px solid #f5d9ab; border-radius:6px; padding:10px 12px; font-size:.92rem; }
@media (max-width: 768px) {
  .cs-cv-grille { grid-template-columns:1fr; }
  .cs-cv-onglet { flex:1; text-align:center; padding:10px 8px; }
}
.cs-cv-fiche { border:1px solid #d5e8ea; border-radius:10px; padding:24px; background:#fff; }
.cs-cv-table { border-collapse:collapse; margin:14px 0; width:100%; max-width:520px; }
.cs-cv-table th { text-align:left; color:#0e5a63; padding:7px 14px 7px 0; white-space:nowrap; vertical-align:top; }
.cs-cv-table td { padding:7px 0; }
.cs-cv-texte { font-size:.97rem; }

/* ---------- PAGES INTERIEURES V2 ---------- */
.cs-timeline { list-style:none; margin:24px 0; padding:0; position:relative; }
.cs-timeline::before { content:""; position:absolute; left:11px; top:6px; bottom:6px; width:3px; background:linear-gradient(#009cac,#ff910f); border-radius:2px; }
.cs-timeline li { position:relative; padding:0 0 22px 44px; }
.cs-timeline li::before { content:""; position:absolute; left:3px; top:4px; width:19px; height:19px; border-radius:50%; background:#fff; border:4px solid #009cac; box-shadow:0 0 0 3px rgba(0,156,172,.15); }
.cs-timeline li:last-child { padding-bottom:0; }
.cs-timeline .cs-tl-annee { display:inline-block; font-family:"Josefin Sans",sans-serif; font-weight:700; color:#009cac; font-size:1.15rem; margin-right:6px; }
.cs-tarifs-v2 table { border-collapse:collapse; width:100%; box-shadow:var(--shadow-md,0 4px 14px rgba(0,0,0,.08)); border-radius:12px; overflow:hidden; }
.cs-tarifs-v2 th { background:#009cac; color:#fff; font-family:"Josefin Sans",sans-serif; padding:14px 16px; text-align:left; }
.cs-tarifs-v2 td { padding:12px 16px; border-bottom:1px solid #e6eef0; }
.cs-tarifs-v2 tbody tr:nth-child(even) { background:#f4fafb; }
.cs-tarifs-v2 tbody tr:hover { background:#eef7f8; }
.cs-tarifs-v2 tbody tr:last-child td { border-bottom:none; }
.cs-contact-card { background:#fff; border:1px solid #d5e8ea; border-radius:12px; padding:26px; box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.05)); }
.cs-contact-card h3 { color:#0e5a63; margin-top:0; }
.cs-contact-infos p { display:flex; align-items:baseline; gap:10px; margin:12px 0; }
@media (max-width:768px){ .cs-timeline li { padding-left:38px; } }
@media (max-width:768px){
  .cs-tarifs-v2 { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
  .cs-tarifs-v2 table { min-width:560px; font-size:.9rem; }
  .cs-tarifs-v2 th, .cs-tarifs-v2 td { padding:10px 10px; white-space:nowrap; }
}

/* ---------- H1 SEO visibles (pages) ---------- */
.cs-h1 { font-family:"Josefin Sans",sans-serif; color:#0e5a63; font-size:1.65rem; line-height:1.3; max-width:1000px; margin:26px auto 4px; padding:0 20px; text-align:center; }
@media (max-width:768px){ .cs-h1 { font-size:1.25rem; margin-top:18px; } }

/* ---------- CVTHEQUE : vitrine publique anonymisée ---------- */
.cs-cv-vitrine-intro { max-width:760px; margin:10px auto 24px; text-align:center; font-size:1.05rem; }
.cs-cv-vitrine-stats { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:0 0 26px; }
.cs-cv-vitrine-stats div { background:#f0fafb; border:1px solid #c8e9ec; border-radius:10px; padding:14px 22px; text-align:center; color:#0e5a63; }
.cs-cv-vitrine-stats strong { display:block; font-size:1.6rem; color:#009cac; }
.cs-cv-carte--anonyme h3 { color:#0e5a63; }
.cs-cv-anonyme-note { font-size:.85rem; color:#6b7280; border-top:1px dashed #d7dde3; padding-top:10px; margin-top:12px; }
.cs-cv-vitrine-cta { background:linear-gradient(135deg,#009cac,#0e5a63); border-radius:14px; padding:30px 24px; text-align:center; color:#fff; margin-top:30px; }
.cs-cv-vitrine-cta h3 { color:#fff; margin-top:0; }
.cs-cv-vitrine-cta p { color:#e8f6f7; }
.cs-btn-orange { display:inline-block; background:#ff910f; color:#fff !important; font-weight:700; padding:12px 26px; border-radius:6px; text-decoration:none !important; margin:6px; }
.cs-btn-orange:hover { background:#e07f06; }
.cs-btn-ghost-teal { display:inline-block; background:transparent; color:#fff !important; font-weight:600; padding:11px 24px; border-radius:6px; border:2px solid rgba(255,255,255,.7); text-decoration:none !important; margin:6px; }
.cs-btn-ghost-teal:hover { background:rgba(255,255,255,.12); }
@media (max-width:768px){ .cs-cv-vitrine-stats { gap:10px; } .cs-cv-vitrine-cta { padding:22px 14px; } }

/* ---------- Widget HelloAsso adhésion : masquer le bandeau "X € collectés" ---------- */
.cs-ha-crop { overflow:hidden; border-radius:8px; height:1488px; }
.cs-ha-crop iframe { width:100%; border:none; height:1600px; margin-top:-112px; }
@media (max-width:768px){
  .cs-ha-crop { height:1980px; }
  .cs-ha-crop iframe { height:2100px; margin-top:-120px; }
}

/* ==========================================================================
   AGENDA - VUE MOIS : largeur du conteneur
   --------------------------------------------------------------------------
   Signale par Gaetan le 04/09 : la vue mois s'affichait sur 339 px de large
   au milieu d'un ecran vide.

   Cause : GeneratePress declare `.container.grid-container { width: auto }`.
   Sur cette page, `auto` se comporte comme `max-content` : le conteneur se
   replie sur la largeur naturelle du calendrier au lieu d'occuper la place
   disponible. Les autres pages n'en souffrent pas parce que leur contenu est
   deja large (tableaux, grilles de fiches).

   `.container` seul ne suffit pas : la regle du theme porte deux classes,
   donc une specificite superieure. On cible les deux.
   ========================================================================== */
.site.grid-container.container {
  width: 100%;
}

/* ==========================================================================
   AGENDA - VUE MOIS : mise a la charte
   --------------------------------------------------------------------------
   Le calendrier arrivait avec la typographie et les gris d'Event Tickets
   (Helvetica, #141827), sans rapport avec le reste du site.
   On reprend les variables de la charte : Josefin Sans pour les titres,
   Open Sans pour le texte, teal pour les reperes, orange pour l'action.
   ========================================================================== */

/* Titre du mois et navigation */
.tribe-events .tribe-events-c-top-bar__datepicker-button,
.tribe-events .tribe-events-c-top-bar__datepicker-desktop {
  font-family: var(--font-title);
  color: var(--teal);
  font-weight: 700;
}
.tribe-events .tribe-events-c-top-bar__nav-link svg path { fill: var(--teal); }
.tribe-events .tribe-events-c-top-bar__today-button {
  font-family: var(--font-body);
  color: var(--slate);
  border-radius: 8px;
}
.tribe-events .tribe-events-c-top-bar__today-button:hover {
  color: var(--teal-dark);
  background: var(--teal-light);
}

/* En-tete des jours de la semaine */
.tribe-events .tribe-events-calendar-month__header-column-title {
  font-family: var(--font-title);
  color: var(--slate);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Cellules du calendrier */
.tribe-events .tribe-events-calendar-month__day {
  border-color: var(--gray-mid);
}
.tribe-events .tribe-events-calendar-month__day-date-daynum,
.tribe-events .tribe-events-calendar-month__day-date-daynum a {
  font-family: var(--font-title);
  color: var(--slate-dark);
  font-weight: 700;
}
/* Jours hors du mois affiche : en retrait, pour ne pas tromper l'oeil */
.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-daynum,
.tribe-events .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date-daynum {
  color: #b6bfcc;
}

/* Aujourd'hui : un repere teal discret plutot qu'un aplat */
.tribe-events .tribe-events-calendar-month__day--current {
  background: var(--teal-light);
}
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum a {
  color: var(--teal-dark);
}

/* Evenements dans une case */
.tribe-events .tribe-events-calendar-month__calendar-event {
  border-left: 3px solid var(--teal);
  padding-left: 8px;
  margin-bottom: 8px;
}
.tribe-events .tribe-events-calendar-month__calendar-event-title-link,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:visited {
  font-family: var(--font-body);
  color: var(--slate-dark);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:focus {
  color: var(--teal);
  text-decoration: underline;
}
.tribe-events .tribe-events-calendar-month__calendar-event-datetime {
  font-family: var(--font-body);
  color: var(--teal);
  font-weight: 600;
  font-size: 11px;
}

/* Selecteur de vue Liste / Mois / Jour */
.tribe-events .tribe-events-c-view-selector__list-item-link,
.tribe-events .tribe-events-c-view-selector__list-item-text {
  font-family: var(--font-body);
  color: var(--slate);
}
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text {
  color: var(--teal);
  font-weight: 700;
}
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after {
  background-color: var(--teal);
}

/* Recherche */
.tribe-events .tribe-events-c-search__input-control-icon-svg path { fill: var(--teal); }
.tribe-events .tribe-common-c-btn,
.tribe-events button.tribe-common-c-btn {
  background-color: var(--orange);
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: 8px;
}
.tribe-events .tribe-common-c-btn:hover,
.tribe-events button.tribe-common-c-btn:hover {
  background-color: var(--orange-dark);
}

/* Bouton d'abonnement au calendrier */
.tribe-events .tribe-events-c-subscribe-dropdown__button {
  border-color: var(--teal);
  color: var(--teal);
  border-radius: 8px;
  font-family: var(--font-body);
}
.tribe-events .tribe-events-c-subscribe-dropdown__button:hover {
  background: var(--teal-light);
}

/* Message « pas d'evenement » */
.tribe-events .tribe-events-c-messages__message {
  font-family: var(--font-body);
  color: var(--gray-text);
  border-radius: 8px;
}

/* Sur petit ecran, une case de calendrier ne doit pas ecraser le texte */
@media (max-width: 768px) {
  .tribe-events .tribe-events-calendar-month__calendar-event-title-link { font-size: 12px; }
}

/* ==========================================================================
   AVANTAGES ADHERENTS
   Catalogue des remises negociees, reserve aux adherents connectes.
   Vignettes cliquables vers une fiche detaillee (choix de Gaetan, 04/09).
   ========================================================================== */

.cs-avantages { margin: 32px 0; }

/* Filtres par categorie */
.cs-avantages-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.cs-filtre {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--slate);
  background: var(--white);
  border: 1.5px solid var(--gray-mid);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: var(--transition);
}
.cs-filtre span {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  color: var(--gray-text);
}
.cs-filtre:hover { border-color: var(--teal); color: var(--teal); }
.cs-filtre.is-actif {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}
.cs-filtre.is-actif span { color: rgba(255,255,255,.85); }

/* Grille de vignettes */
.cs-avantages-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px;
}

.cs-avantage-carte {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
.cs-avantage-carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
}

/* Le visuel garde un rapport constant : les affiches partenaires ont des
   formats tres varies, sans cela la grille part dans tous les sens. */
.cs-avantage-visuel {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--gray-light);
  overflow: hidden;
}
.cs-avantage-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: var(--transition);
}
.cs-avantage-carte:hover .cs-avantage-visuel img { transform: scale(1.04); }

/* Sans image : une initiale sur fond teal, plutot qu'un rectangle vide */
.cs-avantage-initiale {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 64px;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
}

.cs-avantage-corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}
.cs-avantage-etiquette {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: var(--teal-light);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 10px;
}
.cs-avantage-titre {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark-footer);
  margin-bottom: 8px;
}
.cs-avantage-resume {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-text);
  flex: 1;
}
.cs-avantage-lien {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  margin-top: 14px;
}
.cs-avantage-lien::after { content: ' →'; }
.cs-avantage-carte:hover .cs-avantage-lien { color: var(--orange); }

.cs-avantages-vide {
  text-align: center;
  color: var(--gray-text);
  padding: 40px 0;
}

/* Fiche d'un avantage */
.cs-avantage-retour a {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--teal);
}
.cs-avantage-retour a:hover { color: var(--orange); }
.cs-avantage-partenaire {
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--gray-light);
  border-left: 3px solid var(--teal);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 24px;
}
/* Les affiches partenaires sont de tres grands visuels : sans limite de
   hauteur, l'offre elle-meme passe sous la ligne de flottaison et le
   visiteur croit la page vide. On plafonne, l'image reste cliquable. */
.single-cs_avantage .entry-content img,
.cs-avantage-affiche img {
  max-width: 100%;
  height: auto;
  max-height: 420px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin: 0 auto 20px;
}
@media (max-width: 600px) {
  .single-cs_avantage .entry-content img { max-height: 260px; }
}

/* Ecran de connexion */
.cs-avantage-verrou {
  background: var(--gray-light);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}
.cs-avantage-verrou .cs-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 22px;
  margin: 6px 4px 0;
  text-decoration: none;
  transition: var(--transition);
}
.cs-btn--orange { background: var(--orange); color: var(--white); }
.cs-btn--orange:hover { background: var(--orange-dark); color: var(--white); }
.cs-btn--ghost { border: 1.5px solid var(--teal); color: var(--teal); }
.cs-btn--ghost:hover { background: var(--teal-light); }

@media (max-width: 600px) {
  .cs-avantages-grille { grid-template-columns: 1fr; }
  .cs-avantage-titre { font-size: 17px; }
}