/* =============================================================
   LE BOURG D'IGNY — feuille de style
   Custom CSS, mobile-first, aucune dépendance runtime.
   ============================================================= */

:root{
  --paper:#f4f1ea;
  --ink:#0a0a0a;
  --yellow:#FFE92E;
  --red:#FF4438;
  --warm:#fff8d9;
  --rose:#ffe5e2;

  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --display:'Playfair Display', Georgia, serif;
  --tag:'Bungee', 'Arial Black', sans-serif;
  --shade:'Bungee Shade', 'Arial Black', sans-serif;
  --mono:'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand:'Caveat', 'Brush Script MT', cursive;

  --maxw:1200px;
  --gutter:clamp(1.75rem, 6vw, 2.25rem);
  --radius:0;
  --shadow-hard:5px 5px 0 var(--ink);
  --shadow-soft:3px 4px 0 rgba(0,0,0,0.08), 6px 8px 16px rgba(0,0,0,0.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  position:relative;
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}

/* ----------------------- décor ------------------------------- */
.svg-defs{position:absolute;width:0;height:0}
.paper-grain{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  filter:url(#paper);opacity:.3;mix-blend-mode:multiply;
}
.bg-tag{
  position:fixed;top:30%;left:-2vw;
  font-family:var(--shade);
  font-size:clamp(8rem, 22vw, 20rem);
  color:var(--ink);opacity:.04;
  transform:rotate(-12deg);
  pointer-events:none;user-select:none;z-index:0;
  white-space:nowrap;
}

/* ----------------------- layout helpers ---------------------- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.hide-sm{display:none}
@media(min-width:720px){.hide-sm{display:inline}}

.kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(10,10,10,.6);
}
.kicker--yellow{color:var(--yellow);font-family:var(--tag)}

/* ----------------------- masthead ---------------------------- */
.masthead{background:var(--paper);border-bottom:3px solid var(--ink);position:relative;z-index:10}
.masthead__strip{
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;padding:2.5rem 0 .75rem;
  border-bottom:1px solid rgba(10,10,10,.4);
  flex-wrap:wrap;
}
.masthead__title{text-align:center;padding:1.5rem 0 2.5rem;position:relative}
.logo{
  font-family:var(--display);font-weight:900;
  font-size:clamp(3rem,11vw,8.5rem);
  line-height:.85;letter-spacing:-.02em;
  margin:.5rem 0 0;display:inline-block;position:relative;
}
.logo__sub{
  position:absolute;top:-.4em;right:-.5em;
  font-family:var(--shade);
  font-size:clamp(2rem,5vw,4rem);
  color:var(--red);transform:rotate(-12deg);
}
.logo__underline{position:absolute;left:0;bottom:-.5rem;width:100%;height:.5rem}
.tagline{
  font-family:var(--serif);font-style:italic;
  color:rgba(10,10,10,.7);max-width:32rem;margin:1.5rem auto 0;
  font-size:.95rem;
}

/* nav */
.nav{background:var(--ink);border-top:2px solid var(--ink);position:relative}
.nav__inner{display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--gutter)}
.nav__tab{
  padding:.95rem 1.25rem;
  font-family:var(--tag);font-size:11px;letter-spacing:.25em;
  color:#f4f1ea;background:transparent;
  position:relative;transition:background .15s, color .15s;
}
.nav__tab + .nav__tab::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:1rem;background:rgba(255,255,255,.2);
}
.nav__tab:hover{color:var(--yellow)}
.nav__tab.is-active{background:var(--yellow);color:var(--ink)}
.nav__tab.is-active::before{display:none}

/* ----------------------- main / pages ------------------------ */
.main{padding-top:2.5rem;padding-bottom:2.5rem;position:relative;z-index:5}
.page[hidden]{display:none}

/* ----------------------- À LA UNE ---------------------------- */
.hero{
  display:grid;grid-template-columns:1fr;gap:2rem;
  padding-bottom:2.5rem;border-bottom:2px solid var(--ink);
}
@media(min-width:900px){
  .hero{grid-template-columns:2fr 1fr;gap:3rem}
}
.ed-tag{
  display:inline-block;padding:.4rem .75rem;margin-bottom:1rem;
  font-family:var(--tag);font-size:10px;letter-spacing:.3em;
  background:var(--ink);color:var(--yellow);position:relative;
}
.ed-tag__pin{position:absolute;top:-.25rem;right:-.5rem;width:.5rem;height:.5rem;background:var(--red)}
.hero__title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.5rem,6vw,5rem);
  line-height:.95;margin:0 0 1.5rem;
}
.hero__title em{font-weight:400;font-style:italic}
.hero__shout{font-family:var(--shade);color:var(--red);display:inline-block;transform:rotate(-2deg);font-size:.85em}
.hero__dot{font-family:var(--tag)}
.hero__body{display:grid;grid-template-columns:1fr;gap:1.25rem;font-size:.97rem;line-height:1.65}
@media(min-width:720px){.hero__body{grid-template-columns:1fr 1fr}}
.hero__body p{margin:0}
.dropcap{font-family:var(--display)}
.dropcap::first-letter{
  font-size:3.75rem;font-weight:700;float:left;
  line-height:.8;margin:.25rem .5rem 0 0;
}
.hero__actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}

/* church illustration */
.hero__aside{position:relative}
.church{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink);margin:0;border:2px solid var(--ink)}
.church__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:contrast(1.05) saturate(.9);
}
.church::after{
  content:"";position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to bottom, transparent 0%, rgba(10,10,10,.75) 80%, rgba(10,10,10,.95) 100%);
  pointer-events:none;
}
.church__caption{
  position:absolute;bottom:.85rem;left:.85rem;z-index:2;
  font-family:var(--tag);color:var(--yellow);
  font-size:1.5rem;transform:rotate(-4deg);
  text-shadow:3px 3px 0 var(--ink);line-height:1.05;margin:0;
}
.church__caption span{font-size:.9rem;color:var(--red);display:block}
.church__badge{
  position:absolute;top:1.5rem;right:-.5rem;
  background:var(--yellow);color:var(--ink);
  padding:.25rem .75rem;font-family:var(--tag);
  font-size:.6rem;letter-spacing:.2em;
  transform:rotate(-90deg);transform-origin:top right;
}
.church__legend{
  margin:.5rem 0 0;font-family:var(--mono);
  font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(10,10,10,.6);
}

/* rubric cards */
.rubric-cards{
  display:grid;grid-template-columns:1fr;
  margin-top:2.5rem;border:2px solid var(--ink);
}
@media(min-width:720px){.rubric-cards{grid-template-columns:1fr 1fr 1fr}}
.rcard{
  text-align:left;padding:1.75rem;position:relative;
  display:flex;flex-direction:column;gap:.4rem;min-height:230px;
  transition:filter .15s;
}
.rcard:hover{filter:brightness(.98)}
.rcard + .rcard{border-top:2px solid var(--ink)}
@media(min-width:720px){
  .rcard + .rcard{border-top:0;border-left:2px solid var(--ink)}
}
.rcard--yellow{background:#FFE92E55}
.rcard--red{background:#FF443830}
.rcard--dark{background:var(--ink);color:var(--paper)}
.rcard--dark .rcard__num{color:var(--yellow)}
.rcard--dark .rcard__foot{border-color:rgba(255,255,255,.2);color:rgba(244,241,234,.7)}
.rcard__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}
.rcard__num{font-family:var(--tag);font-size:11px;letter-spacing:.3em;color:var(--ink)}
.rcard h3{
  font-family:var(--display);font-weight:900;
  font-size:2.5rem;line-height:.95;margin:0;
}
.rcard p{margin:.4rem 0 0;font-style:italic;opacity:.75}
.rcard__foot{
  margin-top:auto;padding-top:1rem;border-top:1px solid rgba(10,10,10,.3);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;
}
.rcard__foot svg{transition:transform .15s}
.rcard:hover .rcard__foot svg{transform:translateX(3px)}

/* ----------------------- rubric heads ------------------------ */
.rubric-head{border-bottom:2px solid var(--ink);padding-bottom:1rem;margin-bottom:2rem}
.rubric-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.rubric-title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.25rem,5vw,4rem);line-height:1;
  margin:.25rem 0 .5rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
}
.rubric-title__shout{font-family:var(--shade);font-size:.55em;display:inline-block}
.rubric-title__shout--red{color:var(--red);transform:rotate(-3deg)}
.rubric-title__shout--yellow{color:var(--yellow);transform:rotate(4deg);text-shadow:2px 2px 0 var(--ink)}
.rubric-sub{font-style:italic;color:rgba(10,10,10,.7);margin:.25rem 0 0}

/* ----------------------- TRIBUNE ----------------------------- */
.forum{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:900px){.forum{grid-template-columns:2fr 1fr}}
.composer{
  position:relative;border:2px solid var(--ink);background:var(--yellow);
  padding:1.25rem;margin-bottom:2rem;
}
.composer__pin{
  position:absolute;top:-.75rem;left:1rem;
  background:var(--ink);color:var(--yellow);
  padding:.15rem .5rem;font-family:var(--tag);font-size:10px;letter-spacing:.18em;
}
.composer textarea{
  display:block;width:100%;border:0;background:transparent;resize:vertical;
  font-family:var(--serif);font-size:1.1rem;line-height:1.5;color:var(--ink);
  outline:none;
}
.composer textarea::placeholder{color:rgba(10,10,10,.5)}
.composer__foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(10,10,10,.3);flex-wrap:wrap;
}
.composer__meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);
}

.messages{display:flex;flex-direction:column;gap:2rem}
.msg{padding-bottom:2rem;border-bottom:1px solid rgba(10,10,10,.2);position:relative}
.msg__meta{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:.6rem;
}
.msg__num{font-family:var(--tag);background:var(--ink);color:var(--yellow);padding:.1rem .4rem}
.msg__time,.msg__street{color:rgba(10,10,10,.6);display:inline-flex;align-items:center;gap:.25rem}
.msg__author{
  font-family:var(--display);font-weight:700;font-size:1.5rem;
  margin:0 0 .35rem;line-height:1.15;
}
.msg__body{font-family:var(--serif);font-size:1rem;line-height:1.6;color:rgba(10,10,10,.85);margin:0;white-space:pre-wrap}
.msg__actions{
  margin-top:.75rem;display:flex;gap:1.25rem;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(10,10,10,.6);
}
.msg__action{display:inline-flex;align-items:center;gap:.3rem}
.msg__action:hover{color:var(--ink)}
.msg__action.is-on{color:var(--red)}
.msg__action.is-on svg{fill:var(--red)}
.msg__del{color:rgba(10,10,10,.4)}
.msg__del:hover{color:var(--red)}

/* aside */
.code-card{
  position:relative;padding:1.5rem;background:var(--ink);color:var(--paper);
}
.code-card__kicker{
  font-family:var(--tag);color:var(--yellow);
  font-size:10px;letter-spacing:.3em;margin-bottom:.5rem;
}
.code-card h3{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.15;margin:0 0 .75rem;color:var(--paper)}
.code-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-family:var(--serif);font-size:.95rem}
.code-card li{display:flex;gap:.5rem}
.code-card li span{color:var(--yellow)}

/* ----------------------- AGENDA ------------------------------ */
.events{border:2px solid var(--ink)}
.event{
  display:grid;grid-template-columns:auto 1fr auto;gap:0;
  background:var(--paper);align-items:stretch;
}
.event + .event{border-top:2px solid var(--ink)}
.event__date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.25rem;min-width:110px;
  background:var(--ink);color:var(--paper);text-align:center;
}
.event__day{font-family:var(--mono);font-size:10px;letter-spacing:.3em}
.event__num{font-family:var(--tag);font-size:3rem;line-height:.9}
.event__month{font-family:var(--mono);font-size:10px;letter-spacing:.3em}
.event__body{padding:1.25rem 1rem 1.25rem 1.25rem}
.event__title{font-family:var(--display);font-weight:700;font-size:1.65rem;line-height:1.1;margin:0 0 .25rem}
.event__desc{font-style:italic;color:rgba(10,10,10,.7);margin:0 0 .4rem}
.event__time{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(10,10,10,.6);display:inline-flex;align-items:center;gap:.3rem}
.event__cta{display:flex;align-items:center;gap:1rem;padding:0 1rem;flex-wrap:wrap}
.event__count{
  text-align:right;background:transparent;border:0;padding:.25rem .35rem;
  font:inherit;color:inherit;border-radius:2px;
  transition:background .15s;
}
.event__count.is-clickable{cursor:pointer}
.event__count.is-clickable:hover{background:rgba(10,10,10,.06)}
.event__count strong{font-family:var(--tag);font-size:1.65rem;line-height:1;display:block}
.event__count span{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(10,10,10,.6);
}
.event__count.is-clickable span{text-decoration:underline dotted;text-underline-offset:3px}
.event__count[disabled]{cursor:default}
.event__rsvp{
  font-family:var(--tag);font-size:.75rem;letter-spacing:.05em;
  background:var(--yellow);color:var(--ink);
  padding:.5rem .75rem;transform:rotate(-3deg);
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .15s;
}
.event__rsvp:hover{transform:rotate(2deg)}
.event__rsvp.is-on{background:var(--red);color:var(--paper)}
.event__del{color:rgba(10,10,10,.3);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}
.event__del:hover{color:var(--red)}
@media(max-width:600px){
  .events{border:0;display:flex;flex-direction:column;gap:1.25rem}
  .event{grid-template-columns:auto 1fr;border:2px solid var(--ink)}
  .event + .event{border-top:2px solid var(--ink)}
  .event__cta{grid-column:1/-1;border-top:1px solid rgba(10,10,10,.15);padding:.75rem 1rem;justify-content:space-between}
}

/* ----------------------- ANNONCES ---------------------------- */
.annonces{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:600px){.annonces{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.annonces{grid-template-columns:1fr 1fr 1fr}}
.annonce{
  position:relative;padding:1.25rem;border:1px solid rgba(0,0,0,.1);
  background:var(--warm);box-shadow:var(--shadow-soft);
  transform:rotate(var(--rot, -1deg));transition:transform .2s;
}
.annonce:hover{transform:rotate(0deg) scale(1.01)}
.annonce::before{
  content:"";position:absolute;top:-.7rem;left:50%;
  width:4rem;height:1.25rem;background:rgba(0,0,0,.15);
  transform:translateX(-50%) rotate(var(--rot-tape, 3deg));
}
.annonce__tag{
  display:inline-block;padding:.25rem .5rem;margin-bottom:.75rem;
  font-family:var(--tag);font-size:10px;letter-spacing:.25em;
  border:2px solid var(--ink);
}
.annonce__tag--PRETE{background:var(--yellow);color:var(--ink)}
.annonce__tag--CHERCHE{background:var(--red);color:var(--paper)}
.annonce__tag--DONNE{background:var(--ink);color:var(--yellow)}
.annonce__tag--ENTRAIDE{background:var(--paper);color:var(--ink)}
.annonce__title{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.1;margin:0 0 .75rem}
.annonce__note{font-style:italic;color:rgba(10,10,10,.75);font-size:.95rem;line-height:1.4;margin:0 0 1rem}
.annonce__foot{
  padding-top:.75rem;border-top:1px solid rgba(0,0,0,.2);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(10,10,10,.6);
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
}
.annonce__where{display:inline-flex;align-items:center;gap:.25rem}
.annonce__del{position:absolute;top:.5rem;right:.5rem;color:rgba(10,10,10,.3);font-size:.75rem;letter-spacing:.18em}
.annonce__del:hover{color:var(--red)}
.annonce__contact{
  margin-top:.85rem;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem .75rem;
  font-family:var(--tag);font-size:10px;letter-spacing:.18em;
  background:var(--ink);color:var(--yellow);
  border:0;cursor:pointer;
  transition:background .15s, color .15s;
}
.annonce__contact:hover{background:var(--red);color:var(--paper)}

/* ----------------------- GALERIE ----------------------------- */
.gallery{display:grid;grid-template-columns:1fr;gap:1.75rem}
@media(min-width:600px){.gallery{grid-template-columns:1fr 1fr;gap:2rem 1.75rem}}
@media(min-width:900px){.gallery{grid-template-columns:1fr 1fr 1fr}}
.photo{
  position:relative;margin:0;
  background:#fff;padding:.6rem .6rem 0;
  box-shadow:var(--shadow-soft);
  transform:rotate(var(--rot, -1deg));
  transition:transform .2s, box-shadow .2s;
  border:1px solid rgba(0,0,0,.08);
}
.photo:hover{transform:rotate(0) scale(1.015);box-shadow:5px 8px 0 rgba(0,0,0,.08), 8px 12px 24px rgba(0,0,0,.12)}
.photo::before{
  content:"";position:absolute;top:-.7rem;left:50%;
  width:4rem;height:1.25rem;background:rgba(0,0,0,.15);
  transform:translateX(-50%) rotate(2deg);
}
.photo__btn{
  display:block;width:100%;padding:0;background:transparent;border:0;cursor:zoom-in;
}
.photo__btn img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:#f4f1ea;
}
.photo__cap{
  padding:.85rem .25rem 1rem;display:flex;flex-direction:column;gap:.25rem;
}
.photo__caption{
  font-family:var(--hand);font-size:1.25rem;line-height:1.2;
  color:var(--ink);
}
.photo__sig{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(10,10,10,.55);
}
.photo__del{
  position:absolute;top:.4rem;right:.4rem;
  width:1.5rem;height:1.5rem;line-height:1;font-size:1rem;
  background:rgba(255,255,255,.85);color:rgba(10,10,10,.5);
  border-radius:50%;
}
.photo__del:hover{background:var(--red);color:var(--paper)}

/* lightbox */
.dlg--lightbox{width:min(96vw, 1200px);max-width:none}
.dlg--lightbox::backdrop{background:rgba(10,10,10,.92)}
.lightbox{
  position:relative;background:transparent;border:0;padding:0;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
}
.lightbox img{
  display:block;max-width:100%;max-height:80vh;object-fit:contain;
  background:#0a0a0a;
}
.lightbox__caption{
  font-family:var(--serif);font-style:italic;color:var(--paper);
  font-size:.95rem;text-align:center;padding:.25rem .5rem;
}
.lightbox__close{
  position:absolute;top:-.5rem;right:-.5rem;
  width:2.4rem;height:2.4rem;
  background:var(--paper);color:var(--ink);
  font-family:var(--tag);font-size:1.2rem;line-height:1;
  box-shadow:var(--shadow-hard);
  cursor:pointer;
}
.lightbox__close:hover{background:var(--red);color:var(--paper)}

/* ----------------------- ÉDITO (magazine) -------------------- */

/* ---------- Vue liste ---------- */

/* Hero : image plein-largeur en haut, titre énorme dessous */
.edito-hero{
  display:block;
  margin-bottom:5rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(10,10,10,.15);
}
.edito-hero__media{
  display:block;width:100%;padding:0;background:transparent;border:0;
  cursor:pointer;margin-bottom:2rem;overflow:hidden;
}
.edito-hero__media img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--ink);
  transition:transform .5s ease;
}
.edito-hero__media:hover img{transform:scale(1.02)}
@media(min-width:900px){
  .edito-hero__media img{aspect-ratio:5/3;max-height:580px}
}
.edito-hero__body{
  max-width:48rem;margin:0 auto;
}
.edito-hero__body .kicker{
  display:inline-block;
  background:var(--red);color:var(--paper);
  padding:.4rem .7rem;letter-spacing:.22em;font-size:10px;
  margin-bottom:1.25rem;
}
.edito-hero__title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.4rem, 6.5vw, 5rem);
  line-height:.96;letter-spacing:-.02em;
  margin:0 0 1.25rem;
}
.edito-hero__title button{
  font:inherit;color:inherit;background:transparent;border:0;padding:0;
  cursor:pointer;text-align:left;
}
.edito-hero__title button:hover{color:var(--red)}
.edito-hero__lead{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.1rem, 1.7vw, 1.3rem);line-height:1.55;
  color:rgba(10,10,10,.85);
  margin:0 0 1.75rem;
}
.edito-hero__foot{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding-top:1rem;border-top:1px solid rgba(10,10,10,.18);
}
.edito-author{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(10,10,10,.6);
}
.edito-hero__own,
.edito-card__own{display:flex;gap:1rem;margin-top:.75rem}
.edito-hero__own .link,
.edito-card__own .link{color:rgba(10,10,10,.55);border-bottom-color:rgba(10,10,10,.25)}
.edito-hero__own .link:hover,
.edito-card__own .link:hover{color:var(--red)}

/* Grille : 2 colonnes max en desktop, espacement très généreux */
.edito-grid{
  display:grid;grid-template-columns:1fr;
  gap:4.5rem 3rem;
}
@media(min-width:760px){.edito-grid{grid-template-columns:1fr 1fr}}

.edito-card{
  display:flex;flex-direction:column;gap:1.1rem;
  border-bottom:0;padding-bottom:0;cursor:pointer;
}
.edito-card__media{
  display:block;padding:0;background:transparent;border:0;cursor:pointer;
  overflow:hidden;position:relative;
}
.edito-card__media img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--ink);
  transition:transform .55s ease, filter .25s ease;
}
.edito-card:hover .edito-card__media img{transform:scale(1.04)}
.edito-card__media--empty{
  width:100%;aspect-ratio:4/3;
  background:
    repeating-linear-gradient(45deg, rgba(10,10,10,.04) 0 12px, rgba(10,10,10,.07) 12px 24px);
}
.edito-card__body{display:flex;flex-direction:column;gap:.65rem}
.edito-card__body .kicker{
  display:inline-block;align-self:flex-start;
  background:var(--red);color:var(--paper);
  font-family:var(--tag);font-size:9px;letter-spacing:.22em;
  padding:.3rem .55rem;
  text-transform:uppercase;
}
.edito-card__title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(1.7rem, 3vw, 2.4rem);line-height:1;
  margin:0;letter-spacing:-.02em;
}
.edito-card__title button{
  font:inherit;color:inherit;background:transparent;border:0;padding:0;
  cursor:pointer;text-align:left;
  transition:color .15s ease;
}
.edito-card:hover .edito-card__title button{color:var(--red)}
.edito-card__lead{
  font-family:var(--serif);font-size:1.05rem;line-height:1.55;
  color:rgba(10,10,10,.78);
  margin:0;
}
.edito-card__cta{
  display:inline-flex;align-items:center;gap:.4rem;
  align-self:flex-start;margin-top:.15rem;
  font-family:var(--tag);font-size:11px;letter-spacing:.22em;
  color:var(--ink);
  text-transform:uppercase;
  padding:.15rem 0;
  border:0;background:transparent;cursor:pointer;
  border-bottom:2px solid var(--ink);
  transition:color .15s ease, border-color .15s ease, padding-left .2s ease;
}
.edito-card:hover .edito-card__cta{
  color:var(--red);border-bottom-color:var(--red);
}
.edito-card__cta svg{transition:transform .2s ease}
.edito-card:hover .edito-card__cta svg{transform:translateX(4px)}
.edito-card__foot{
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  margin-top:.5rem;padding-top:.85rem;
  border-top:2px solid var(--ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(10,10,10,.55);
}

/* ---------- Vue lecture ---------- */
[data-edito-view="detail"]{padding-top:.5rem}
[data-edito-view="detail"] > .btn{margin-bottom:2rem}

.edito-detail__cover{
  margin:0 calc(-1 * var(--gutter)) 3rem;  /* déborde du conteneur, full-bleed */
}
.edito-detail__cover img{
  display:block;width:100%;
  aspect-ratio:16/9;object-fit:cover;
  background:var(--ink);max-height:70vh;
}
@media(min-width:900px){
  .edito-detail__cover{margin-left:calc(-2 * var(--gutter));margin-right:calc(-2 * var(--gutter))}
}

.edito-detail__inner{max-width:42rem;margin:0 auto}

.edito-detail__kicker{
  display:inline-block;
  background:var(--red);color:var(--paper);
  padding:.4rem .7rem;letter-spacing:.22em;font-size:10px;
  font-family:var(--tag);text-transform:uppercase;
  margin-bottom:1.5rem;
}
.edito-detail__title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.5rem, 7vw, 5.25rem);
  line-height:.95;letter-spacing:-.025em;
  margin:0 0 1.5rem;
}
.edito-detail__lead{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.2rem, 2vw, 1.45rem);
  line-height:1.5;color:rgba(10,10,10,.85);
  margin:0 0 2rem;
  padding-left:1.25rem;border-left:3px solid var(--red);
}
.edito-detail__author{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(10,10,10,.6);
  padding:1rem 0 1.5rem;margin:0 0 2.5rem;
  border-top:1px solid rgba(10,10,10,.2);
  border-bottom:1px solid rgba(10,10,10,.2);
}
.edito-detail__author strong{
  font-family:var(--display);font-weight:700;
  text-transform:none;letter-spacing:0;color:var(--ink);font-size:1rem;
}
.edito-detail__updated{
  font-style:italic;text-transform:none;letter-spacing:0;
  color:rgba(10,10,10,.5);margin-left:.6rem;font-size:.85rem;
}
.edito-detail__body{
  font-family:var(--serif);
  font-size:1.15rem;line-height:1.85;
  color:var(--ink);
}
.edito-detail__body p{margin:0 0 1.4rem}
.edito-detail__body p:first-child::first-letter{
  font-family:var(--display);font-weight:900;
  font-size:5rem;line-height:.85;
  float:left;margin:.35rem .55rem 0 0;color:var(--red);
}
.edito-detail__own{
  margin-top:3rem;padding-top:1.5rem;
  border-top:1px solid rgba(10,10,10,.2);
  display:flex;gap:1.75rem;
}
.edito-detail__own .link{color:rgba(10,10,10,.55);border-bottom-color:rgba(10,10,10,.25)}
.edito-detail__own .link:hover{color:var(--red)}

/* Dialog plus large pour la rédaction */
.dlg--wide{width:min(96vw, 720px)}

/* ----------------------- buttons ----------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.75rem 1.1rem;font-family:var(--tag);font-size:11px;letter-spacing:.22em;
  cursor:pointer;border:0;
  transition:background .15s, color .15s, transform .15s;
}
.btn--dark{background:var(--ink);color:var(--yellow)}
.btn--dark:hover{background:var(--red);color:var(--paper)}
.btn--dark svg{transition:transform .15s}
.btn--dark:hover svg{transform:translateX(3px)}
.btn--ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--danger{background:var(--red);color:var(--paper)}
.btn--danger:hover{background:var(--ink);color:var(--red)}

.link{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(244,241,234,.7);
  border:0;padding:.25rem 0;cursor:pointer;
  border-bottom:1px dotted rgba(244,241,234,.3);
  transition:color .15s;
}
.link:hover{color:var(--yellow)}
.link--danger:hover{color:var(--red)}
.dlg .link{color:rgba(10,10,10,.65);border-bottom-color:rgba(10,10,10,.3)}
.dlg .link:hover{color:var(--red)}

/* ----------------------- footer ------------------------------ */
.footer{
  margin-top:5rem;border-top:3px solid var(--ink);
  background:var(--ink);color:var(--paper);position:relative;z-index:5;
}
.footer__inner{padding-top:2.5rem;padding-bottom:2.5rem;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.footer__logo{
  font-family:var(--display);font-weight:900;font-size:2.25rem;line-height:1;
  margin:.5rem 0 .75rem;
}
.footer__logo span{font-family:var(--shade);color:var(--yellow);font-size:.85em}
.footer p{font-family:var(--serif);font-size:.92rem;color:rgba(244,241,234,.7);max-width:30rem;margin:0 0 1rem}
.footer__tools{display:flex;gap:1rem 1.5rem;flex-wrap:wrap;margin-top:.75rem}

/* ----------------------- dialogs ----------------------------- */
.dlg{
  border:0;padding:0;background:transparent;color:var(--ink);
  width:min(94vw, 500px);
}
.dlg::backdrop{background:rgba(10,10,10,.6);backdrop-filter:blur(2px)}
.dlg__inner{
  background:var(--paper);border:2px solid var(--ink);
  box-shadow:var(--shadow-hard);padding:2rem;display:flex;flex-direction:column;gap:1rem;
}
.dlg__kicker{font-family:var(--tag);font-size:10px;letter-spacing:.3em;color:var(--red)}
.dlg__kicker--danger{display:inline-block;background:var(--ink);color:var(--red);padding:.25rem .5rem;align-self:flex-start}
.dlg--confirm .dlg__inner{border-color:var(--red);box-shadow:5px 5px 0 var(--red)}
.dlg--confirm p{font-style:normal;color:var(--ink)}
.dlg h2{font-family:var(--display);font-weight:900;font-size:1.85rem;line-height:1.05;margin:0}
.dlg p{font-family:var(--serif);font-style:italic;color:rgba(10,10,10,.7);margin:0;font-size:.95rem}
.dlg label{display:flex;flex-direction:column;gap:.25rem;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(10,10,10,.7)}
.dlg label em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;color:rgba(10,10,10,.5);font-size:.85rem}
.dlg label small{font-family:var(--serif);font-size:.78rem;letter-spacing:0;text-transform:none;color:rgba(10,10,10,.55);font-style:italic;margin-top:.15rem}

/* Rich editor (article) */
.rich-field{display:flex;flex-direction:column;gap:.25rem}
.rich-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(10,10,10,.7)}
.rich-editor{
  border:2px solid var(--ink);background:#fff;
  display:flex;flex-direction:column;
}
.rich-toolbar{
  display:flex;flex-wrap:wrap;gap:.2rem;align-items:center;
  padding:.45rem .5rem;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  position:sticky;top:0;z-index:1;
}
.rich-btn{
  font-family:var(--display);font-size:.95rem;
  min-width:2rem;height:2rem;padding:0 .4rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;
  cursor:pointer;color:var(--ink);
  border-radius:2px;line-height:1;
}
.rich-btn:hover{background:var(--ink);color:var(--yellow)}
.rich-btn.is-active{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.rich-sep{width:1px;height:1.4rem;background:rgba(10,10,10,.2);margin:0 .3rem}
.rich-content{
  min-height:14rem;max-height:50vh;overflow-y:auto;
  padding:1rem;outline:none;
  font-family:var(--serif);font-size:1rem;line-height:1.6;color:var(--ink);
}
.rich-content[data-placeholder]:empty::before{
  content:attr(data-placeholder);
  color:rgba(10,10,10,.4);font-style:italic;pointer-events:none;
}
.rich-content p{margin:0 0 .8rem}
.rich-content h2{font-family:var(--display);font-weight:700;font-size:1.5rem;margin:1.1rem 0 .5rem;line-height:1.1}
.rich-content blockquote{border-left:3px solid var(--red);padding-left:.85rem;margin:.5rem 0 .9rem;color:rgba(10,10,10,.75);font-style:italic}
.rich-content ul,.rich-content ol{padding-left:1.5rem;margin:0 0 .85rem}
.rich-content li{margin:.15rem 0}
.rich-content a{color:var(--red);text-decoration:underline}

/* Restitue les styles du body de l'article publié pour le rendu détail */
.edito-detail__body h2{font-family:var(--display);font-weight:700;font-size:1.85rem;line-height:1.15;margin:2rem 0 .85rem}
.edito-detail__body blockquote{
  border-left:3px solid var(--red);padding:.4rem 0 .4rem 1.25rem;
  margin:1.5rem 0;font-style:italic;color:rgba(10,10,10,.85);font-size:1.2rem;line-height:1.55;
}
.edito-detail__body ul,.edito-detail__body ol{padding-left:1.75rem;margin:0 0 1.4rem}
.edito-detail__body li{margin:.35rem 0}
.edito-detail__body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.dlg input,.dlg textarea,.dlg select{
  font-family:var(--serif);font-size:1rem;color:var(--ink);
  background:#fff;border:2px solid var(--ink);padding:.6rem .75rem;
  letter-spacing:0;text-transform:none;outline:none;
}
.dlg textarea{resize:vertical;min-height:4.5rem}
.dlg input:focus,.dlg textarea:focus,.dlg select:focus{background:var(--yellow)}
.dlg__row{display:flex;gap:.75rem}
.dlg__row .grow{flex:1}
.dlg__actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:.5rem;flex-wrap:wrap}

.attendees-list{
  list-style:none;margin:.25rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.5rem;
  max-height:50vh;overflow-y:auto;
}
.attendees-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.6rem .25rem;border-bottom:1px dashed rgba(10,10,10,.2);
}
.attendees-list li:last-child{border-bottom:0}
.attendees-list strong{
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);
}
.attendees-list span{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(10,10,10,.55);
}

/* ----------------------- auth -------------------------------- */
.auth-error{
  margin:.25rem 0 0;padding:.5rem .75rem;
  background:rgba(255,68,56,.12);color:var(--red);
  font-family:var(--serif);font-size:.9rem;font-style:normal;
  border-left:3px solid var(--red);
}
.auth-info{
  margin:.25rem 0 0;padding:.5rem .75rem;
  background:rgba(255,233,46,.25);color:var(--ink);
  font-family:var(--serif);font-size:.9rem;font-style:normal;
  border-left:3px solid var(--yellow);
}
[data-auth-fields][hidden]{display:none}

/* ----------------------- toast ------------------------------- */
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);
  background:var(--ink);color:var(--yellow);
  font-family:var(--tag);font-size:10px;letter-spacing:.25em;
  padding:.85rem 1.25rem;box-shadow:var(--shadow-hard);
  z-index:100;animation:toastIn .25s ease;
}
.toast[hidden]{display:none}
@keyframes toastIn{from{opacity:0;transform:translate(-50%, 1rem)}to{opacity:1;transform:translate(-50%, 0)}}

/* ----------------------- empty states ------------------------ */
.empty{
  padding:3rem 1.5rem;text-align:center;font-family:var(--serif);
  font-style:italic;color:rgba(10,10,10,.55);font-size:1.05rem;
}
.empty strong{font-family:var(--display);font-weight:700;font-style:normal;color:var(--ink);display:block;font-size:1.4rem;margin-bottom:.4rem}

/* ----------------------- focus ------------------------------- */
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ----------------------- reduced motion ---------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
}