/* PASEN — feuille de style du site statique. Identique à celle du thème WordPress. */

/* ============================================================
   1. Jetons
   ============================================================ */
:root{
  --ink:#16211C;
  --ink-soft:#2A332D;
  --green:#17513C;
  --green-dark:#123F2E;
  --green-pale:#8FA79A;
  --green-line:#2C3831;
  --terra:#B85C2B;
  --sand-hot:#E4A76F;
  --cream:#F7F4EE;
  --sand:#EFEAE0;
  --sand-2:#F1ECE1;
  --line:#E4DDCE;
  --line-strong:#DFD8C9;
  --muted:#8A857A;
  --muted-2:#5C6660;
  --body:#4C544D;
  --on-dark:#F1EDE4;
  --on-dark-soft:#9AA69F;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --wrap:1280px;
  --gut:60px;
  --radius:2px;
}

/* ============================================================
   2. Réinitialisation
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover,a:focus{color:var(--terra)}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.018em;line-height:1.18}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}
button{font:inherit}
:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:8px;left:8px;z-index:999;width:auto;height:auto;clip:auto;clip-path:none;
  background:var(--ink);color:var(--cream);padding:12px 18px;
}

/* ============================================================
   3. Gabarit
   ============================================================ */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:60px}
.section--tight{padding-block:44px}
.section--sand{background:var(--sand)}
.section--ink{background:var(--ink);color:var(--on-dark)}
.section--green{background:var(--green);color:var(--cream)}
.grid{display:grid;gap:56px}
.grid--2{grid-template-columns:1fr 1fr}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--5{grid-template-columns:repeat(5,1fr)}
.grid--aside{grid-template-columns:1.25fr 1fr}
.grid--sidenote{grid-template-columns:290px 1fr;gap:44px}
/* Deux dispositions qui étaient écrites en style en ligne dans les gabarits.
   Un style en ligne l'emporte sur toute requête média : ces blocs ne se
   repliaient donc jamais sur mobile. Passées en classes, elles suivent le
   point de rupture comme les autres grilles. */
.grid--campagne{grid-template-columns:1fr 420px;align-items:center}
.grid--colloque{grid-template-columns:340px 1fr;gap:56px;align-items:start}
/* Article seul : photographie à gauche, texte à droite. La colonne est un peu
   plus large que celle de .axis (300 px), trop étroite pour une photo qui
   accompagne un texte long. */
.grid--article{grid-template-columns:360px 1fr;gap:48px;align-items:start}
.stack{display:flex;flex-direction:column;gap:16px}
.stack--lg{gap:24px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ============================================================
   4. Typographie
   ============================================================ */
.eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);
}
.eyebrow--pale{color:var(--green-pale)}
.eyebrow--muted{color:var(--muted)}
.title-xl{font-size:74px;line-height:.98;letter-spacing:-.03em}
.title-lg{font-size:52px;line-height:1.06;letter-spacing:-.024em}
.title-md{font-size:36px;letter-spacing:-.015em}
.title-sm{font-size:28px;line-height:1.2}
.title-xs{font-size:22px;font-weight:500;line-height:1.22}
.lead{font-family:var(--serif);font-size:27px;line-height:1.45;font-weight:300;text-wrap:pretty}
.prose{font-size:14.5px;line-height:1.78;color:var(--body);text-wrap:pretty}
.prose + .prose{margin-top:16px}
.prose a{text-decoration:underline;text-underline-offset:2px}
.note{font-size:11.5px;line-height:1.55;color:var(--muted)}
.slogan{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--sand-hot)}
em.accent{font-style:italic;color:var(--sand-hot)}

/* ============================================================
   5. Boutons
   ============================================================ */
.btn{
  display:inline-block;font-size:13.5px;font-weight:600;
  padding:14px 22px;border-radius:var(--radius);border:1px solid transparent;
  transition:background .15s ease,color .15s ease;
}
.btn--primary{background:var(--terra);color:#FFF6EE;padding:11px 18px;font-size:12.5px}
.btn--primary:hover{background:var(--ink);color:var(--cream)}
.btn--green{background:var(--green);color:var(--cream);padding:11px 18px;font-size:12.5px}
.btn--green:hover{background:var(--green-dark);color:var(--cream)}
.btn--light{background:var(--cream);color:var(--ink)}
.btn--light:hover{background:var(--terra);color:#FFF6EE}
.btn--ghost{color:var(--cream);border-color:#4E8570}
.btn--ghost:hover{background:var(--green);color:var(--cream)}

/* ============================================================
   6. En-tête
   ============================================================ */
.topbar{background:var(--green);color:#CADCD1}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:8px}
.topbar span,.topbar a{font-size:10.5px;font-weight:600;letter-spacing:.1em;color:#CADCD1}
.topbar a:hover{color:#fff}

.site-header{background:var(--cream);border-bottom:1px solid var(--line-strong);position:relative;z-index:20}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:16px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:13px}
.brand__logo{height:52px;width:auto}
.brand__name{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--green);line-height:1;display:block}
.brand__tag{
  display:block;font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#6B7169;line-height:1.35;margin-top:2px;max-width:190px;
}
.main-nav ul{display:flex;align-items:center;gap:21px}
.main-nav a{font-size:13px;font-weight:500;color:var(--ink-soft);padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap}
.main-nav a:hover{color:var(--terra)}
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a{color:var(--green);border-bottom-color:var(--terra)}
.header-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.main-nav__cta{display:none}
.header-actions .btn{white-space:nowrap}
.brand{flex:0 1 auto;min-width:0}
.lang-switch{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted)}
.lang-switch .is-active{color:var(--ink)}

.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);padding:9px 12px;cursor:pointer}

/* ============================================================
   7. Bandeau d'ouverture
   ============================================================ */
.hero{display:grid;grid-template-columns:1fr 620px;background:var(--ink);color:var(--cream)}
.hero__body{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:60px 48px 60px var(--gut)}
.hero__title{font-size:74px;line-height:.98;letter-spacing:-.03em;color:var(--cream)}
.hero__intro{font-size:16px;line-height:1.7;color:#CFD8D2;max-width:480px;text-wrap:pretty}
.hero__media{position:relative;overflow:hidden;min-height:500px}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:pasen-kenburns 30s ease-in-out infinite alternate}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(22,33,28,.85) 0%,rgba(22,33,28,.1) 30%,rgba(22,33,28,0) 60%);
}
.hero__credit{
  position:absolute;right:20px;bottom:16px;z-index:2;max-width:340px;text-align:right;
  font-size:10.5px;color:rgba(247,244,238,.72);
}
.live-dot{position:relative;width:8px;height:8px;background:var(--terra);border-radius:50%;display:inline-block;flex:0 0 auto}
.live-dot::after{content:"";position:absolute;inset:0;background:var(--terra);border-radius:50%;animation:pasen-pulse 2.4s ease-out infinite}
@keyframes pasen-kenburns{0%{transform:scale(1.03)}100%{transform:scale(1.11) translate3d(-1.5%,-.9%,0)}}
@keyframes pasen-pulse{0%{opacity:.32;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none}
  .live-dot::after{animation:none;opacity:.32}
}

.pattern-band{height:14px;background-image:url(assets/img/motif-pagne.png);background-size:auto 100%;background-repeat:repeat-x;opacity:.9}

/* ============================================================
   8. En-têtes de section & fils d'Ariane
   ============================================================ */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:26px;
}
.section-head__link{font-size:12.5px;font-weight:600;color:var(--green)}
.page-head{
  display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end;
  padding-block:56px 34px;border-bottom:1px solid var(--line);
}
.breadcrumb{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.breadcrumb span{color:#CFC7B6;padding-inline:4px}

/* Bandeau d'ouverture des pages intérieures */
.page-hero{position:relative;background:var(--ink);overflow:hidden}
.page-hero__media{position:absolute;inset:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(22,33,28,.94) 0%,rgba(22,33,28,.78) 52%,rgba(22,33,28,.35) 100%);
}
.page-hero__body{position:relative;padding-block:76px 68px}
.page-hero__intro{
  font-size:15.5px;line-height:1.75;color:#CFD8D2;max-width:640px;
  padding-top:20px;text-wrap:pretty;
}
.breadcrumb--light{color:var(--green-pale);padding-bottom:18px}
.breadcrumb--light a{color:var(--green-pale)}
.breadcrumb--light a:hover{color:var(--sand-hot)}
.breadcrumb--light span{color:#4E6156}

/* Barre de filtres sous un bandeau */
.filter-bar{padding-block:26px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}

/* Vignette d'axe */
.axis__photo{
  width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:14px;
}

/* ============================================================
   9. Chiffres
   ============================================================ */
.stats{border-top:2px solid var(--ink)}
.stats li{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:baseline;padding-block:16px;border-bottom:1px solid var(--line)}
.stats__n{font-family:var(--serif);font-size:34px;line-height:1;color:var(--green)}
.stats__label{font-size:13px;line-height:1.6;color:var(--body)}
.section--ink .stats{border-top:none}
.section--ink .stats li{border-bottom:none;border-top:1px solid var(--green-line);grid-template-columns:92px 1fr}
.section--ink .stats__n{font-size:27px;color:var(--sand-hot)}
.section--ink .stats__label{color:var(--on-dark-soft)}

/* ============================================================
   10. Actualités
   ============================================================ */
.actu-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.actu-card{display:flex;flex-direction:column;gap:11px}
.actu-card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.actu-card__date{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--terra)}
.actu-card__title{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.22;color:var(--ink)}
.actu-card:hover .actu-card__title{color:var(--terra)}
.actu-card__excerpt{font-size:13px;line-height:1.65;color:var(--muted-2)}

.actu-row{
  display:grid;grid-template-columns:170px 1fr 400px;gap:40px;align-items:start;
  padding-block:36px;border-bottom:1px solid var(--line);
}
.actu-row:hover{background:#FBF9F4}
.actu-row__meta{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--terra);padding-top:12px}
.actu-row__day{font-family:var(--serif);font-size:26px;line-height:1.1;color:var(--ink)}
.actu-row__year{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.actu-row__cat{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--green);padding-top:4px}
.actu-row__title{font-size:28px;line-height:1.2;text-wrap:pretty}
.actu-row__place{
  font-size:12px;line-height:1.6;color:var(--muted);
  border-top:1px solid var(--line);padding-top:10px;margin-top:4px;
}
.actu-row img{width:100%;aspect-ratio:3/2;object-fit:cover}

.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-block;font-size:12.5px;font-weight:500;color:#3A423C;
  background:var(--sand);border:1px solid #DED6C6;padding:8px 14px;border-radius:var(--radius);
}
.chip:hover,.chip.is-active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip__count{color:var(--muted)}
.chip:hover .chip__count,.chip.is-active .chip__count{color:var(--green-pale)}

/* ============================================================
   11. Listes d'activités
   ============================================================ */
.axis{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;padding-block:32px;border-bottom:1px solid var(--line)}
.axis__num{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--terra)}
.axis__title{font-size:26px}
.bullets li{display:grid;grid-template-columns:14px 1fr;gap:16px;align-items:baseline;padding-block:12px;border-top:1px solid #EDE7DA}
.bullets li::before{content:"";width:6px;height:6px;background:var(--green);border-radius:50%;display:block;transform:translateY(-2px)}
.bullets span{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.section--ink .bullets li{border-top-color:var(--green-line)}
.section--ink .bullets span{color:var(--on-dark)}

/* ============================================================
   12. Citations & encarts
   ============================================================ */
.pullquote{display:flex;flex-direction:column;gap:16px;border-left:2px solid var(--ink);padding-left:36px}
.pullquote__mark{font-family:var(--serif);font-size:54px;line-height:.4;color:var(--terra)}
.pullquote__text{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.5;font-weight:300;text-wrap:pretty}
.pullquote__source{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.callout{background:var(--sand);padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.callout p{font-size:14px;line-height:1.75;color:#3A423C}
.callout--ink{background:var(--ink);color:#CFD8D2}
.callout--ink .callout__title{font-family:var(--serif);font-size:30px;line-height:1.2;color:var(--sand-hot)}
.study{background:#1E2C25;border-left:3px solid var(--terra);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.study__title{font-family:var(--serif);font-size:19px;line-height:1.4;color:var(--on-dark)}
.study__authors{font-size:12.5px;color:#7E8C84}

/* ============================================================
   13. Galeries
   ============================================================ */
.gallery{padding-block:40px;border-bottom:1px solid var(--line)}
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery__grid img,.gallery__grid video{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--ink)}
.gallery__grid a{display:block;position:relative}
.gallery__grid a:hover img{opacity:.88}
.gallery__caption{font-size:11.5px;line-height:1.6;color:var(--muted);padding-top:12px}
.gallery__intro{font-size:13px;line-height:1.7;color:var(--muted-2)}
.gallery--empty{background:var(--sand)}
.gallery--empty .gallery__grid > div{display:flex;flex-direction:column;gap:7px}
.placeholder-tile{width:100%;aspect-ratio:1/1;border:1px dashed #C0B8A6;background:#F4F0E7}
.tile-flag{
  position:absolute;left:8px;top:8px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(184,92,43,.94);color:#FFF1E4;padding:4px 7px;border-radius:var(--radius);
}
.gallery-covers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gallery-cover{display:flex;flex-direction:column;gap:9px}
.gallery-cover img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery-cover__title{font-size:12px;font-weight:600;color:var(--ink)}
.gallery-cover__count{font-size:11px;color:var(--muted)}

/* ============================================================
   14. Partenaires & contacts
   ============================================================ */
.partners{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.partner{display:flex;flex-direction:column;gap:9px;align-items:center}
.partner__frame{
  width:100%;aspect-ratio:3/2;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:14px;
}
.partner__frame img{max-width:100%;max-height:100%;object-fit:contain}
.partner__name{font-size:11.5px;line-height:1.4;color:var(--muted-2);text-align:center}

.contact-list li{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;padding-block:18px;border-top:1px solid var(--line)}
.contact__name{font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.2;color:var(--ink)}
.contact__role{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra)}
.contact__detail{font-size:12.5px;line-height:1.6;color:var(--muted-2);max-width:340px}
.contact__tel{font-size:13px;color:var(--ink);text-align:right;white-space:nowrap}
.section--green .contact-list li{border-top:none;border-top:2px solid #8FC0A8;display:block}
.section--green .contact__name{color:var(--cream)}
.section--green .contact__detail{color:#CADCD1}
.section--green .contact__tel{color:var(--cream);text-align:left}

/* ============================================================
   15. Pied de page
   ============================================================ */
.site-footer{background:var(--ink);color:var(--on-dark-soft)}
.site-footer__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;
  padding-block:52px 36px;border-bottom:1px solid var(--green-line);
}
.site-footer__logo{height:58px;width:auto;background:var(--cream);border-radius:3px;padding:5px}
.site-footer p{font-size:12.5px;line-height:1.7;color:var(--on-dark-soft);max-width:280px}
.site-footer h2{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#6E7C74;font-family:var(--sans)}
.site-footer a{font-size:13px;color:#D8D3C7}
.site-footer a:hover{color:var(--terra)}
.site-footer__col ul{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.site-footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:18px 24px;font-size:11.5px;color:#6E7C74;
}
.footer-strip{
  background:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding-block:40px;
}
.footer-strip span{font-size:12px;color:#6E7C74}

/* ============================================================
   16. Contenu éditorial WordPress
   ============================================================ */
.entry-content{font-size:16px;line-height:1.8;color:var(--body);max-width:70ch}
.entry-content > * + *{margin-top:20px}
.entry-content h2{font-size:30px;margin-top:44px;color:var(--ink)}
.entry-content h3{font-size:23px;margin-top:32px;color:var(--ink)}
.entry-content ul,.entry-content ol{padding-left:1.2em}
.entry-content li{list-style:disc;margin-bottom:8px}
.entry-content ol li{list-style:decimal}
.entry-content blockquote{
  border-left:2px solid var(--terra);padding-left:24px;margin-inline:0;
  font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.5;color:var(--ink);
}
.entry-content figure{margin-block:28px}
.entry-content figcaption{font-size:11.5px;color:var(--muted);padding-top:8px}
.entry-content a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.entry-content img{width:100%}
.wp-caption-text{font-size:11.5px;color:var(--muted)}
.alignwide{max-width:none}
.aligncenter{margin-inline:auto}
.alignleft{float:left;margin:0 28px 20px 0}
.alignright{float:right;margin:0 0 20px 28px}
.sticky .actu-row__meta{border-top-color:var(--green)}

.pagination{display:flex;gap:8px;flex-wrap:wrap;padding-block:40px}
.pagination .page-numbers{
  display:inline-block;padding:10px 15px;border:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--ink-soft);
}
.pagination .current,.pagination a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

.comment-list{margin-top:28px}
.comment-list li{padding-block:18px;border-top:1px solid var(--line)}

/* ============================================================
   17. Adaptatif
   ============================================================ */
@media (max-width:1340px){
  :root{--gut:36px}
  .hero{grid-template-columns:1fr 44%}
  .hero__title,.title-xl{font-size:56px}
  .grid--5,.partners{grid-template-columns:repeat(3,1fr)}
  .site-footer__top{grid-template-columns:1fr 1fr}
  .actu-row{grid-template-columns:130px 1fr 280px;gap:28px}
  .site-header__inner{gap:20px}
  .brand__tag{display:none}
  .brand__logo{height:44px}
  .main-nav ul{gap:15px}
  .main-nav a{font-size:12.5px}
}
@media (max-width:1040px){
  .nav-toggle{display:block}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);
    border-bottom:1px solid var(--line-strong);padding:18px var(--gut) 24px;
  }
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:14px}
  .main-nav a{font-size:16px;white-space:normal}
  .hero{grid-template-columns:1fr}
  .hero__media{min-height:320px}
  .hero__body{padding:44px var(--gut)}
  .grid--2,.grid--3,.grid--aside,.grid--sidenote,.grid--campagne,.grid--colloque,.grid--article,.actu-cards{grid-template-columns:1fr;gap:32px}
  .grid--4,.gallery__grid,.gallery-covers{grid-template-columns:repeat(2,1fr)}
  .actu-row{grid-template-columns:1fr;gap:18px}
  .actu-row__meta{flex-direction:row;align-items:baseline;gap:12px}
  .page-head{grid-template-columns:1fr;gap:24px}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px}
  .title-lg{font-size:38px}
  .title-md{font-size:28px}
  .lead{font-size:22px}
  .site-footer__top,.site-footer__bottom,.footer-strip,.topbar__inner{
    grid-template-columns:1fr;flex-direction:column;align-items:flex-start;gap:20px;
  }
  .axis{grid-template-columns:1fr;gap:20px}
  .axis__photo{aspect-ratio:16/9}
  .page-hero__body{padding-block:52px 46px}
  .page-hero__media::after{background:linear-gradient(90deg,rgba(22,33,28,.94) 0%,rgba(22,33,28,.86) 100%)}
}
@media (max-width:560px){
  /* À cette largeur, la barre d'en-tête ne peut plus porter à la fois la
     marque, le bouton d'ouverture et le bouton d'appel : ce dernier passe
     dans le menu déroulant. */
  .header-actions{display:none}
  .main-nav__cta{display:block;padding-top:6px;border-top:1px solid var(--line-strong);margin-top:4px}
  .main-nav__cta .btn{display:inline-block}
  .site-header__inner{gap:12px}
  .brand__logo{height:38px}

  :root{--gut:20px}
  .hero__title,.title-xl{font-size:40px}
  .title-lg{font-size:30px}
  .partners,.grid--5{grid-template-columns:repeat(2,1fr)}
  .contact-list li{grid-template-columns:1fr}
  .contact__tel{text-align:left}
}

/* ============================================================
   18. Impression
   ============================================================ */
@media print{
  .topbar,.main-nav,.header-actions,.nav-toggle,.hero__media,.pattern-band{display:none}
  body{background:#fff;color:#000}
  .section{padding-block:18px}
}

/* ==========================================================================
   Visionneuse d'images, césure et confort de navigation
   ========================================================================== */

/* Césure. La feuille n'en avait aucune : l'adresse de contact, quarante
   caractères sans espace, débordait de sa colonne sur les petits écrans. */
.site-footer a, .topbar a, .contact-list a, .entry-content a, .prose a {
  overflow-wrap: anywhere;
}

/* Repère de focus visible au clavier. Il n'y en avait pas : on ne pouvait
   pas suivre son propre parcours en naviguant à la tabulation. */
:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Les vignettes s'ouvrent dans la visionneuse : le curseur l'annonce. */
.gallery__grid a { cursor: zoom-in; display: block; }

.pasen-lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(12, 18, 15, .95);
  padding: clamp(14px, 4vw, 48px);
}
.pasen-lightbox.is-open { display: flex; }
body.pasen-lightbox-ouverte { overflow: hidden; }

.pasen-lightbox__figure {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: min(1100px, 100%); max-height: 100%;
}
.pasen-lightbox__image {
  max-width: 100%; max-height: 76vh; width: auto; height: auto;
  object-fit: contain; background: rgba(255, 255, 255, .04);
}
.pasen-lightbox__legende {
  color: #CFD8D2; font-size: 13.5px; line-height: 1.6;
  text-align: center; max-width: 62ch;
}
.pasen-lightbox__compteur {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  margin: 0; color: #8FA096; font-size: 11.5px; letter-spacing: .1em;
}
.pasen-lightbox__fermer, .pasen-lightbox__nav {
  position: absolute; border: 0; cursor: pointer; color: #F5F1E8;
  background: rgba(255, 255, 255, .10); border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  transition: background .15s ease;
}
.pasen-lightbox__fermer:hover, .pasen-lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.pasen-lightbox__fermer { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 26px; }
.pasen-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 32px; }
.pasen-lightbox__nav--prec { left: 10px; }
.pasen-lightbox__nav--suiv { right: 10px; }
.pasen-lightbox [hidden] { display: none; }

@media (max-width: 560px) {
  .pasen-lightbox__nav { width: 42px; height: 42px; font-size: 26px; }
  .pasen-lightbox__nav--prec { left: 4px; }
  .pasen-lightbox__nav--suiv { right: 4px; }
  .pasen-lightbox__image { max-height: 68vh; }
}

/* Défilement adouci, sauf pour qui demande moins d'animation. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* La photographie suit la lecture sur grand écran ; sur mobile la colonne se
   replie et elle reprend sa place au-dessus du texte. */
@media (min-width: 1041px) {
  .article-media { position: sticky; top: 24px; }
}
/* Les affiches sont en portrait : sans plafond, elles font trois fois la
   hauteur du texte qu'elles accompagnent. La largeur suit alors la hauteur,
   l'image reste entière, elle cesse simplement de dominer la page. */
.article-media img {
  width: auto; max-width: 100%; height: auto; max-height: 560px;
  display: block; margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Article seul
   Un contenu court étalé sur 1280 px ne fait que du vide. Le bloc est donc
   resserré, et les repères viennent sous le titre plutôt que dans une colonne
   à côté, qui laissait le tiers droit inoccupé.
   -------------------------------------------------------------------------- */
.article-well { max-width: 1000px; margin-inline: auto; }
.article-body { padding-block: 34px 56px; }
.article-head {
  max-width: 1000px; margin-inline: auto;
  padding-block: 38px 20px; border-bottom: 1px solid var(--line);
}

/* Un titre de page tient en un ou deux mots — « L'association ». Un titre
   d'article en fait ici 61 à 83 caractères. Au 52 px de .title-lg et bridé à
   20 caractères de large, il occupait quatre lignes et 400 px de hauteur pour
   300 px de texte. On descend d'un cran et on l'élargit : deux lignes, et la
   largeur du bloc est réellement occupée. */
.article-head .title-lg {
  font-size: clamp(27px, 3.1vw, 38px);
  line-height: 1.13;
  max-width: 30ch;
  padding-top: 8px;
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding-top: 16px; margin: 0;
  font-size: 12.5px; color: var(--muted);
}
.article-meta .chip { margin: 0; }
.article-meta__sep { color: var(--line-strong); }

@media (max-width: 1040px) {
  .article-head { padding-block: 26px 16px; }
  .article-head .title-lg { max-width: none; }
}