/* ==========================================================================
   RITAA — styles.css (CLEAN 2025-10-19)
   Single stylesheet for all pages. Typography-only + split hero.
   Fonts: BBH Sans Hegarty (display titles), Roboto (everything else).
   ========================================================================== */

/* ---------- THEME & RESET ---------- */
:root{
  --bg:#f6f1e9;
  --fg:#0f172a;
  --muted:#5b6b82;
  --rule:#d8d1c7;
  --max:1500px;
  --gutter:clamp(1rem, 2vw, 1.5rem);

  /* Typography */
  --font-sans:"Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display:"BBH Sans Hegarty", "Roboto", ui-sans-serif, system-ui, sans-serif;
  --leading-body:1.5;
  --leading-tight:1.15;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ font-size:18px }
body{
  font: 400 1rem/var(--leading-body) var(--font-sans);
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
a:focus-visible{ outline:3px solid #000; outline-offset:3px }

.sr-only{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.muted{ color:var(--muted) }
.container{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }


/* ==========================================================================
   HEADER & NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 92%, white 8%);
  backdrop-filter:blur(8px);
}
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.6rem 0;
}

/* Brand */
.brand{ display:inline-flex; align-items:center; gap:.75rem; color:var(--fg) }
.badge{
  display:inline-block; padding:.25rem .5rem; border:1px solid var(--rule); border-radius:999px;
  font: 800 1.5rem/1 var(--font-sans); background:var(--bg); color:#111;
}
.brand-sub{ display:flex; flex-direction:column; gap:.1rem; line-height:1.15; font:600 1rem/1.15 var(--font-sans) }
.brand-sub > span{ display:block }

/* Nav links */
.nav-links{ display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0 }
.nav-links a{ position:relative; padding:.2rem 0 }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-.35rem; height:1px; background:#111;
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ transform:scaleX(1) }
.nav-links a.active::after{ transform:scaleX(1) }

/* Burger */
.burger{
  display:none; position:relative; width:32px; height:22px;
  padding:0; border:none; background:transparent; cursor:pointer;
  font-size:0; line-height:0; margin-left:.6rem; margin-right:2rem; margin-top:.2rem;
  transform:translateY(-2px);
}
.burger::before{
  content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:2px; background:#000; box-shadow:0 -8px 0 #000, 0 8px 0 #000;
}
.burger:focus-visible{ outline:2px solid #000; outline-offset:3px }

/* Mobile menu (≤1200px) */
@media (max-width:1200px){
  .burger{ display:inline-block }
  .nav-links{
    display:none; position:absolute; right:var(--gutter); top:calc(100% + .5rem);
    flex-direction:column; align-items:flex-start; min-width:14rem;
    background:var(--bg); border:1px solid var(--rule); border-radius:.8rem; padding:.8rem;
    box-shadow:0 1rem 2rem rgba(0,0,0,.08);
  }
  .site-nav.nav-open .nav-links{ display:flex }
  .brand{
    flex-direction:row; align-items:center; gap:.5rem; flex:1 1 auto; min-width:0;
  }
  .brand-sub{
    display:block; font-size:clamp(.72rem, 1.6vw, .9rem); line-height:1.1;
    max-width:min(72vw, 36rem); white-space:normal;
  }
}

/* Ultra-compact */
@media (max-width:600px){
  .site-nav{ padding:.35rem 0 }
  .badge{ font-size:1.15rem; padding:.15rem .4rem }
  .brand-sub{ font-size:.85rem }
}
@media (max-width:400px){
  .badge{ font-size:1.05rem }
}


/* ==========================================================================
   TYPOGRAPHY (TITLES, KICKERS)
   ========================================================================== */
.wordmark,
.masthead h1,
.missions-title,
.values-title,
.index-item .item-title,
.hero-split .rotator-item strong{
  font-family:var(--font-display);
  font-weight:900;
  line-height:var(--leading-tight);
  letter-spacing:.005em;
}

.m-title,
.val-title,
.member-name{
  font-family:var(--font-sans);
  font-weight:800;
  line-height:1.2;
}

.item-kicker,
.article-meta-date,
.date{
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}


/* ==========================================================================
   HERO SPLIT (logo + text rotator)
   ========================================================================== */
.hero-split .split{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:clamp(.6rem,2vw,1.2rem);
  align-items:center;
  min-height:clamp(320px, 44svh, 560px);
}
.split-logo{
  height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.4rem,2vw,1rem);
  min-width:0;
}
.masthead-logo{ width:100%; max-height:48svh; object-fit:contain }

.split-rotator{ height:100%; display:flex; flex-direction:column; min-height:0 }
.split-rotator .rotator-frame{
  border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 .6rem 1.4rem rgba(0,0,0,.06);
  background:transparent; overflow:hidden; flex:1 1 auto; min-height:0; height:auto;
}
.split-rotator .rotator{
  display:grid; place-items:center; height:100%; min-height:0;
  padding:clamp(.6rem,1.6vw,1.2rem);
}
.split-rotator .rotator-item{
  grid-area:1 / 1; display:none; margin:0; text-align:center; color:#111; line-height:1.25;
  font-size:clamp(1.3rem, 4.6vw, 2.3rem);
  max-width:42ch; padding-inline:clamp(.8rem,4vw,2rem);
  word-spacing:normal; letter-spacing:normal; white-space:normal; overflow-wrap:break-word; text-wrap:balance;
}
.split-rotator .rotator-item.is-active{ display:block; animation:rotatorFade .35s ease both }
@keyframes rotatorFade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

/* Dots (buttons) */
.rotator-dots{
  display:flex; gap:.6rem; justify-content:center; align-items:center;
  margin-top:clamp(.7rem,2vw,1rem);
}
.rotator-dots .dot{
  appearance:none; -webkit-appearance:none;
  display:block;
  width:12px; height:12px; aspect-ratio:1/1;
  padding:0; margin:0;
  border:2px solid #111; border-radius:999px;
  background:transparent; line-height:0; box-sizing:content-box;
}
.rotator-dots .dot.active{ background:#111 }
.rotator-dots .dot:focus-visible{ outline:2px solid #000; outline-offset:3px }

/* Stack on mobile */
@media (max-width:900px){
  .hero-split .split{ grid-template-columns:1fr; min-height:auto; gap:clamp(.25rem,1.2vw,.5rem) }
  .masthead-logo{ max-height:36svh }
  .split-rotator .rotator{ min-height:40svh }
}


/* ==========================================================================
   SECTIONS: Missions / Home grid / Values / Prose / Media
   ========================================================================== */
.missions{ padding-block:clamp(1rem,5vw,2.4rem) }
.missions-title{
  text-align:center; font-size:clamp(1.2rem,2.6vw,1.6rem);
  font-weight:900; letter-spacing:.02em; margin:0 0 .9rem; color:#111;
}
.missions-grid{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  gap:clamp(.6rem,2vw,1rem); justify-content:center;
}
.mission{
  grid-column:span 6; border:1px solid var(--rule); background:transparent;
  padding:clamp(.8rem,1.6vw,1rem); display:flex; flex-direction:column; gap:.25rem;
}
.m-title{ color:#111; font-size:clamp(1.05rem,2.5vw,1.25rem) }
.m-text{ line-height:1.35 }
.missions-grid .mission:nth-child(5){ grid-column:4 / span 6 }
@media (max-width:780px){
  .missions-grid{ grid-template-columns:repeat(6,1fr) }
  .mission{ grid-column:1 / -1 }
  .missions-grid .mission:nth-child(5){ grid-column:1 / -1 }
}

/* Home (editorial grid) */
.home-grid{
  padding-block:clamp(1rem,5vw,2.6rem);
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:clamp(.6rem,2vw,1rem); justify-content:center; align-content:start;
}
.index-item{
  display:flex; flex-direction:column; gap:.25rem;
  padding:clamp(.7rem,1.6vw,1rem) clamp(.4rem,1.2vw,.8rem);
  border:1px solid var(--rule); background:transparent; text-decoration:none;
  transform:translateZ(0); transition:transform .15s ease, filter .2s ease; box-shadow:none;
  justify-self:center; text-align:center;
}
.index-item:hover{ transform:translateY(-2px); filter:saturate(1.05) }
.item-kicker{ color:#111 }
.item-title{ color:#111; font-size:clamp(1.2rem,3.2vw,2rem); line-height:1.15 }
.item-meta{ color:var(--muted); font-size:.98rem; line-height:1.3 }
.index-item.big{ grid-column:span 8 }
.index-item.mid{ grid-column:span 5 }
.home-grid .index-item:nth-child(1){ grid-column:span 5 }
.home-grid .index-item:nth-child(2){ grid-column:span 8 }
@media (max-width:780px){
  .home-grid{ grid-template-columns:repeat(6, 1fr) }
  .index-item, .home-grid .index-item:nth-child(n){ grid-column:1 / -1; text-align:center; justify-self:center }
  .item-title{ font-size:clamp(1.25rem,6vw,1.6rem) }
}

/* Values */
.values{ padding-block:clamp(1.2rem,5vw,3rem) }
.values-title{
  font-size:clamp(1.2rem,2.6vw,1.6rem); margin:0 0 .8rem; color:#111; text-align:center;
}
.values-mosaic{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  gap:clamp(.6rem,2vw,1rem); justify-content:center;
}
.val{
  background:transparent; border:1px solid var(--rule);
  padding:clamp(.8rem,1.6vw,1rem);
  display:flex; flex-direction:column; gap:.25rem; justify-self:center;
}
.val-title{ color:#111; font-size:clamp(1.05rem,2.5vw,1.25rem) }
.val-text{ line-height:1.35 }
.block-a{ grid-column:span 6 }
.block-b{ grid-column:span 3 }
.block-c{ grid-column:span 5 }
.block-d{ grid-column:span 4; text-align:center }
@media (max-width:780px){
  .values-mosaic{ grid-template-columns:repeat(6,1fr) }
  .values-mosaic > *{ grid-column:1 / -1; text-align:center; justify-self:center }
}

/* Prose / media (charte, actualités…) */
.prose{ max-width:110ch; margin-inline:auto; padding-block:clamp(1rem,4vw,1.6rem) }
.prose p{ margin:.7rem 0 }
.prose h2{
  font-size:clamp(1.1rem,2.8vw,1.5rem);
  margin:1.2rem 0 .6rem; color:#111; position:relative; padding-left:.8rem; font-weight:900;
}
.prose h2::before{
  content:""; position:absolute; left:0; top:.35em; width:.3rem; height:.8em; border-radius:3px;
  background:color-mix(in srgb, #111 85%, transparent);
}
.article-media{ max-width:56rem; margin:.8rem auto 0 }
.article-media img{ display:block; width:100%; height:auto; border:1px solid var(--rule); background:#fff }
.article-media figcaption{ font-size:.9rem; text-align:right; margin-top:.35rem }


/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ border-top:1px solid var(--rule); margin-top:clamp(1rem,6vw,3rem) }
.footer-inner{
  display:flex; flex-direction:column; gap:.6rem; align-items:center; text-align:center;
  font-size:.95rem; padding:1.2rem 0;
}
.footer a{ color:var(--muted) }
.footer a:hover{ color:#111 }
.footer-links{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center }
.footer-social{ display:flex; gap:1rem; align-items:center; justify-content:center }
.footer-social a{ font-weight:700; text-decoration:underline }


/* ==========================================================================
   PAGE HEADERS & CTAs
   ========================================================================== */
.masthead{ padding:clamp(1.4rem,5vw,2.4rem) 0 .6rem }
.wordmark{
  color:#111; font-size:clamp(1.8rem,4.5vw,2.6rem); margin:0 0 .35rem;
}
.strap{ display:flex; flex-direction:column; gap:.1rem; color:#111 }
.strap > span{ display:block }
.lede{ font-size:clamp(1rem,2.2vw,1.2rem); color:var(--muted); margin:.4rem 0 1rem }
.cta-row{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap }
.link-cta{ font-weight:700; text-decoration:underline }
.link-cta.secondary{ font-weight:600; opacity:.95 }

body.is-agenda .agenda-cta-row{
  gap:.8rem;
  margin-top:1rem;
}
body.is-agenda .agenda-submit-cta{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:.1rem;
  min-height:3.4rem;
  padding:.7rem 1rem;
  border:2px solid #111;
  border-radius:8px;
  background:#111;
  color:#fff;
  text-decoration:none;
  box-shadow:0 .45rem 0 rgba(17,17,17,.16);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
body.is-agenda .agenda-submit-cta:hover,
body.is-agenda .agenda-submit-cta:focus-visible{
  background:#2f7d6d;
  border-color:#2f7d6d;
  transform:translateY(-2px);
  box-shadow:0 .55rem 0 rgba(47,125,109,.18);
}
body.is-agenda .agenda-submit-cta__main{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:900;
  line-height:1.1;
}
body.is-agenda .agenda-submit-cta__main::before{
  content:"+";
  display:inline-grid;
  place-items:center;
  width:1.25rem;
  height:1.25rem;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-weight:900;
  line-height:1;
}
body.is-agenda .agenda-submit-cta__note{
  padding-left:1.7rem;
  font-size:.82rem;
  font-weight:700;
  line-height:1.25;
  opacity:.82;
}
body.is-agenda .agenda-secondary-cta{
  display:inline-flex;
  align-items:center;
  min-height:3.4rem;
  text-underline-offset:.18em;
}

@media (max-width:600px){
  body.is-agenda .agenda-cta-row{
    flex-direction:column;
    align-items:stretch;
    gap:.65rem;
  }
  body.is-agenda .agenda-submit-cta{
    width:100%;
    padding:.8rem .9rem;
  }
  body.is-agenda .agenda-secondary-cta{
    align-self:flex-start;
    min-height:auto;
  }
}

/* Missions 1-col */
.missions-1col{ padding-block:clamp(1rem,5vw,2.4rem) }
.missions-1col .missions-head{
  max-width:90ch; margin-inline:auto;
  display:flex; flex-direction:column; gap:.5rem; align-items:center; text-align:center;
  margin-bottom:clamp(.8rem,2vw,1.2rem);
}
.missions-1col .missions-intro{ margin:0; color:var(--muted); line-height:1.45 }
.missions-stack{ display:grid; gap:clamp(.8rem,2vw,1.1rem) }
.mission-row{
  border:1px solid var(--rule); background:transparent;
  padding:clamp(.9rem,1.8vw,1.1rem);
  display:flex; flex-direction:column; gap:.25rem;
  transition:transform .15s ease, filter .2s ease;
}
.mission-row:hover{ transform:translateY(-2px); filter:saturate(1.05) }
.mission-row .m-title{ color:#111; font-size:clamp(1.05rem,2.5vw,1.25rem); margin:0 }
.mission-row .m-text{ margin:.15rem 0 0; line-height:1.4 }

.mission-row{ max-width:80ch; margin-inline:auto }
.mission-row.w-60{ max-width:60ch }
.mission-row.w-66{ max-width:66ch }
.mission-row.w-70{ max-width:70ch }
.mission-row.w-72{ max-width:72ch }
.mission-row.w-78{ max-width:78ch }
.mission-row.align-left{ margin-left:0; margin-right:auto; text-align:left }
.mission-row.align-right{ margin-left:auto; margin-right:0; text-align:right }
.mission-row.align-center{ margin-inline:auto; text-align:center }

.mission-qa.plain{
  max-width:80ch; margin:clamp(.8rem,2vw,1.2rem) auto 0;
  padding:0; border:none; background:transparent; text-align:left;
}
.mission-qa.plain .m-title{ margin:0 0 .3rem; color:#111; font-weight:900 }
.mission-qa.plain .m-text{ margin:.2rem 0 0 }

@media (max-width:780px){
  .mission-row,
  .mission-row.w-60,.mission-row.w-66,.mission-row.w-70,.mission-row.w-72,.mission-row.w-78{
    max-width:min(92vw, 70ch); margin-inline:auto; text-align:left;
  }
  .mission-qa.plain{ max-width:min(92vw, 70ch) }
}

/* Charte — bouton “Télécharger” aligné sur la prose */
.charte-download .download-box{
  justify-content:flex-start; text-align:left;
  max-width:110ch; margin-inline:auto;
}
.charte-download .download-box .link-cta{ display:inline-block }


/* ==========================================================================
   MEMBERS (annuaire + toolbar)
   ========================================================================== */
.members{ padding-block: clamp(1rem, 4vw, 2rem) }

.members-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  gap:clamp(.6rem, 2vw, 1rem);
}
.member-card{
  grid-column:span 4;
  border:1px solid var(--rule);
  background:transparent;
  padding:clamp(.8rem,1.6vw,1rem);
  display:flex; flex-direction:column; gap:.35rem;
}
.member-name{ margin:0; color:#111; font-weight:800; font-size:clamp(1rem, 2.2vw, 1.15rem) }
.member-college{ margin:0; color:var(--muted); font-weight:700 }
.member-bio{ margin:0; line-height:1.4; text-align:justify }
.member-link{ font-weight:700; text-decoration:underline }

@media (max-width:1000px){ .member-card{ grid-column:span 6 } }
@media (max-width:640px){ .member-card{ grid-column:1 / -1 } }

/* Toolbar */
.members-toolbar{
  display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  padding:clamp(.75rem,2.2vw,1rem) 0;
}
#member-search, #college-filter, #clear-filters{
  font: 400 1rem/1 var(--font-sans);
  min-height:46px; padding:.7rem .9rem;
  border:1px solid var(--rule); border-radius:.7rem; background:#fff; color:inherit;
  -webkit-appearance:none; appearance:none; outline:none; box-shadow:none;
}
#member-search{ flex:1 1 420px; min-width:18ch }
#college-filter{ flex:0 1 260px; min-width:14ch; padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2l5 6 5-6' stroke='%23111' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:14px 10px;
}
#college-filter::-ms-expand{ display:none }
#clear-filters{ cursor:pointer; background:transparent }
#member-search:focus-visible,
#college-filter:focus-visible,
#clear-filters:focus-visible{ border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.08) }
.members-count{ color:var(--muted); margin-left:auto }
.members-toolbar *{ -webkit-tap-highlight-color:transparent }

@media (max-width:700px){
  .members-toolbar{ gap:.6rem }
  #member-search, #college-filter, #clear-filters{ width:100%; min-height:48px }
  .members-count{ width:100%; order:99; margin-left:0 }
}

/* Bio clamp + toggle */
.member-card .member-bio{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
  overflow:hidden; position:relative;
}
.member-card .member-bio::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.4em;
  background:linear-gradient(to bottom, rgba(246,241,233,0), var(--bg));
  pointer-events:none;
}
.member-card.is-open .member-bio{ -webkit-line-clamp:unset; overflow:visible }
.member-card.is-open .member-bio::after{ display:none }


.bio-toggle {
  margin-top: .4rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 .2rem;
  color: #444;             /* plus contrasté que #9aa3b2 */
  font-size: 1.4rem;       /* augmente la taille des points */
  line-height: 1;
  font-weight: 700;        /* rend les points plus gras */
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}

.bio-toggle:hover,
.bio-toggle:focus {
  color: #000;             /* plus sombre au survol */
  transform: scale(1.15);  /* léger zoom pour plus de visibilité */
}

.bio-toggle:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}


/* Optional: sentence-per-line spans inside bios */
.member-bio span{ display:block; margin-bottom:.7em; line-height:1.6 }
.member-bio span:last-child{ margin-bottom:0 }


/* ==========================================================================
   "POLICY" DETAILS (fonctionnement page)
   ========================================================================== */
.policy-details{
  border:1px solid #ddd; border-radius:8px; padding:1rem 1.25rem; background:#fafafa;
}
.policy-details summary{
  cursor:pointer; list-style:none; position:relative; font-weight:600;
}
.policy-details summary::after{
  content:"▼"; position:absolute; right:0; top:0; font-size:.9em; color:#666; transition:transform .2s;
}
.policy-details[open] summary::after{ transform:rotate(180deg) }
.policy-body{ margin-top:1rem; animation:fadeIn .4s ease-in-out }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }


/* Actualités : images pleine largeur dans le container */
.is-actualites .article-media{
  width:100%;
  max-width:var(--max); /* suit la largeur max du container */
}

/* Option : si tu utilises déjà class="fullwidth" dans le HTML */
.article-media.fullwidth{
  width:100%;
  max-width:var(--max);
}

/* S'assure que l'image s'étire bien */
.is-actualites .article-media img,
.article-media.fullwidth img{
  width:100%;
  height:auto;
}
.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}

.link-underline:hover {
  text-decoration-thickness: 2px;
}
/* Fenêtre modale */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
}
.modal.show { display: flex; }

.modal-content {
  background: var(--bg,#fff);
  color: var(--fg,#111);
  padding: 2rem;
  border-radius: 12px;
  max-width: 520px;
  width: 90%;
  text-align: center;
  line-height: 1.6;
  box-shadow: 0 4px 25px rgba(0,0,0,.2);
  animation: fadeIn .25s ease-out;
}
.close-modal {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  border: none;
  background: none;
  font-size: 2rem;
  cursor: pointer;
  color: inherit;
}
@keyframes fadeIn { from{opacity:0;transform:scale(.9);} to{opacity:1;transform:scale(1);} }
.modal-content a.btn {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.modal-content a.btn:hover {
  text-decoration-thickness: 2px;
}


/* === Google Form full width === */
.form-section {
  padding-block: 2rem;
  width: 100%;
  max-width: var(--max); /* garde la cohérence du site */
  margin-inline: auto;
}

.form-fullwidth {
  width: 100%;
  min-height: 1600px; /* adapte selon la longueur du Form */
  border: none;
  display: block;
}

/* === Agenda : mêmes règles que "Membres" (clamp + dégradé + toggle) === */
body.is-agenda ul#events .member-card .member-bio{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;          /* ⇠ masque après 5 lignes */
  overflow:hidden;
  position:relative;
  text-align:justify;
}

body.is-agenda ul#events .member-card .member-bio::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2.4em;
  background:linear-gradient(to bottom, rgba(246,241,233,0), var(--bg));
  pointer-events:none;
}

body.is-agenda ul#events .member-card.is-open .member-bio{
  -webkit-line-clamp:unset;       /* ⇠ ouvre la bio */
  overflow:visible;
}

body.is-agenda ul#events .member-card.is-open .member-bio::after{
  display:none;
}

/* Petit confort pour le bouton "…" */
body.is-agenda ul#events .member-card .bio-toggle{
  align-self:flex-start;
}
/* ===== Agenda — carte événement plus lisible ===== */
.event-card{
  border:1px solid var(--rule);
  background: color-mix(in srgb, #fff 70%, var(--bg) 30%);
  border-radius: 14px;
  padding: clamp(.9rem, 1.6vw, 1.2rem);
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.05);
  gap: .5rem;
}

.event-head{
  display:flex; align-items:center; gap:.9rem; margin-bottom:.1rem;
}

.date-pill{
  display:grid; place-items:center; align-self:flex-start;
  width:3.1rem; aspect-ratio:1/1.2; border-radius:.8rem;
  background:#111; color:#fff; text-align:center;
  box-shadow: 0 .35rem .8rem rgba(0,0,0,.12);
}
.date-pill .d{ display:block; font:800 1.2rem/1 var(--font-sans) }
.date-pill .m{ display:block; font:700 .75rem/1 var(--font-sans); opacity:.9 }

.event-head-main{ display:flex; flex-direction:column; gap:.15rem; min-width:0 }
.event-title{
  margin:0; color:#111; font-weight:900; letter-spacing:.005em;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem); line-height:1.2;
}
.event-meta{ margin:0; color:var(--muted); font-weight:600; line-height:1.25 }

.event-dates{ color:#111; font-weight:800 }

.event-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin-top:.2rem; flex-wrap:wrap;
  border-top:1px dashed var(--rule); padding-top:.6rem;
}

/* Tags en pastilles */
.tag-chip{
  display:inline-block; padding:.15rem .5rem; border-radius:999px;
  background: color-mix(in srgb, #111 6%, #fff 94%);
  border:1px solid var(--rule);
  font:700 .76rem/1 var(--font-sans); letter-spacing:.02em; text-transform:uppercase;
  margin:.15rem .25rem .15rem 0; color:#111;
}

/* Lien d’action */
.btn-link{
  display:inline-block; font-weight:800; text-decoration:underline;
  padding:.35rem .55rem; border-radius:.5rem;
  background: transparent;
}
.btn-link:hover{ background: color-mix(in srgb, #111 6%, transparent) }

/* Meilleure lisibilité de l’extrait */
.member-card .member-bio{ text-align:left; line-height:1.55 }

/* Grille plus aérée sur grands écrans */
@media (min-width:1200px){
  .members-grid{ gap:clamp(.8rem, 2vw, 1.2rem) }
}

/* Option : accent au survol */
.event-card:hover{ transform: translateY(-2px); transition: transform .15s ease }


/* Menu un peu plus petit */
.nav-links a{
  font-size: .85rem;   /* ~5% plus petit que le 1rem de base */
  line-height: 1.1;
}

/* Pastille date plus translucide (Agenda) */
body.is-agenda .date-pill {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: #111;
  font-weight: 800;
}
/* Fond de carte légèrement teinté par le mois */
body.is-agenda .event-card {
  background: color-mix(in srgb, var(--accent) 1%, #fff);
  border: 0px solid color-mix(in srgb, var(--accent)1%, #ddd);
}
/* Agenda — images non tronquées */
body.is-agenda .event-media{
  margin:.3rem 0 .5rem;
  border:1px solid var(--rule);
  background:#fff;
  overflow:hidden;
  padding:.4rem;                 /* petit liseré blanc autour */
  border-radius:.4rem;
}

body.is-agenda .event-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;            /* ne coupe plus l’image */
  max-height:clamp(220px, 28vh, 520px); /* limite la hauteur pour garder des cartes équilibrées */
  margin-inline:auto;
  cursor: zoom-in;
  transition: transform .25s ease;
}
/* Petit effet visuel au survol */
body.is-agenda .event-media img:hover {
  transform: scale(1.015);
}
/* === Lightbox simple pour les images d'événements === */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: zoom-out;
}
.lightbox.show { display: flex; }

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: .5rem;
  box-shadow: 0 0 2rem rgba(0,0,0,.5);
  background: #fff;
}
/* === Corrige la couleur bleue des filtres/recherches sur mobile (Agenda) === */
body.is-agenda input[type="search"],
body.is-agenda select,
body.is-agenda button {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important; /* iOS Safari */
  border-color: #111 !important;
}

body.is-agenda select,
body.is-agenda input[type="search"] {
  background-color: #fff !important;
  appearance: none;
  -webkit-appearance: none;
}

body.is-agenda button#clear {
  color: #111 !important;
}
.members-count-info {
  text-align: left;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--muted);
  margin-top: .3rem;
  margin-bottom: 1.2rem;
  line-height: 1.4;
}
.members-count-info strong {
  color: #111;
  font-weight: 800;
}
/* Ajuste la taille du bouton "Réduire" dans la page Membres */
.is-members .bio-toggle {
  font-size: 1rem; /* taille normale des "..." */
}

.is-members .member-card.is-open .bio-toggle {
  font-size: 0.95rem; /* plus petit quand "Réduire" est affiché */
  font-weight: 600;
  transform: none; /* supprime l'effet de zoom */
}

/* === RITAAgenda contribution form === */
.event-form-shell {
  padding-block: clamp(1rem, 4vw, 2.4rem);
}

.ritaa-event-form {
  max-width: 920px;
  margin-inline: auto;
  display: grid;
  gap: 1rem;
}

.ritaa-event-form label {
  display: grid;
  gap: .35rem;
  font-weight: 700;
}

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

.ritaa-event-form input,
.ritaa-event-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  padding: .75rem .85rem;
  font: 400 1rem/1.4 var(--font-sans);
}

.ritaa-event-form textarea {
  min-height: 180px;
  resize: vertical;
}

.input-hint {
  color: var(--muted);
  font-size: .92rem;
  font-weight: 400;
}

.checkbox-line {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: .7rem !important;
  font-weight: 400 !important;
}

.checkbox-line input {
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-top: .15rem;
}

.form-submit {
  border: 1px solid #111;
  background: #111;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  min-height: 46px;
  padding: .7rem 1rem;
  font: 700 1rem/1 var(--font-sans);
  cursor: pointer;
}

body.is-agenda .ritaa-event-form .form-submit {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.form-submit:disabled {
  opacity: .62;
  cursor: wait;
}

.form-feedback {
  min-height: 1.5em;
  margin: .2rem 0 0;
  font-weight: 700;
}

.form-feedback[data-state="error"] {
  color: #b3261e;
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
/* === Marge latérale du menu (gauche / droite) === */
.site-nav {
  padding-inline: clamp(1rem, 4vw, 1rem); /* espace proportionnel */
}
.dac-credit img {
  filter: grayscale(15%);
  transition: filter .2s ease, opacity .2s ease;
}
.dac-credit img:hover {
  filter: none;
  opacity: 1;
}
/* --- Vignette vidéo intégrée à une actualité --- */
.video-thumb {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: 120px;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  z-index: 10;
}

.video-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* L’adresse e-mail sous la vignette */
.video-contact {
  position: absolute;
  bottom: .4rem;
  left: 1.1rem;
  font-size: .75rem;
  background: rgba(255,255,255,.75);
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 11;
}

.video-contact a {
  color: #111;
  text-decoration: none;
  font-weight: 600;
}

.video-contact a:hover {
  text-decoration: underline;
}

/* Le parent figure doit être positionné relativement */
.article-media {
  position: relative;
}