/*
Theme Name: Théâtre àêtre
Theme URI: https://aetre.eu/
Author: Théâtre àêtre
Description: Thème sur mesure pour le Théâtre àêtre, duo de conteurs marionnettistes. Met les spectacles en avant, gère les fiches techniques, l'agenda, les ateliers, l'exposition et le journal. Optimisé pour le référencement et pour les moteurs de réponse (données structurées Schema.org).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theatre-aetre
Tags: theatre, marionnettes, spectacle, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. JETONS DE STYLE (couleurs, polices, échelles)
   ========================================================================== */
:root{
  --encre:#191527;
  --encre-2:#241E38;
  --papier:#EAE7E0;
  --ecran:#FBF8F2;
  --brique:#B03A2B;
  --lampe:#E9A63C;
  --buffle:#7A6553;

  --fond:var(--papier);
  --surface:var(--ecran);
  --surface-2:#F2EEE6;
  --texte:#221D2E;
  --texte-2:#5C5266;
  --filet:#D6D0C4;
  --accent:var(--brique);
  --ombre-carte:0 1px 0 rgba(34,29,46,.05), 14px 16px 26px -18px rgba(34,29,46,.55);
  --ombre-carte-h:0 1px 0 rgba(34,29,46,.05), 26px 30px 44px -22px rgba(34,29,46,.6);

  --display:"Superclarendon","Bookman Old Style",Rockwell,"Roboto Slab",Georgia,serif;
  --corps:"Avenir Next",Avenir,"Segoe UI",system-ui,-apple-system,sans-serif;
  --data:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",Consolas,monospace;

  --s-1:.8125rem; --s0:1rem; --s1:1.2rem; --s2:1.44rem;
  --s3:1.85rem; --s4:2.35rem; --s5:3.1rem;
  --col:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    --fond:#141120; --surface:#1E1930; --surface-2:#251F3A;
    --texte:#EDE8DF; --texte-2:#A79CB6; --filet:#372F4E;
    --accent:#E4705C; --buffle:#A08A74;
    --ombre-carte:0 1px 0 rgba(0,0,0,.3), 14px 16px 30px -18px rgba(0,0,0,.9);
    --ombre-carte-h:0 1px 0 rgba(0,0,0,.3), 26px 30px 48px -22px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --fond:#141120; --surface:#1E1930; --surface-2:#251F3A;
  --texte:#EDE8DF; --texte-2:#A79CB6; --filet:#372F4E;
  --accent:#E4705C; --buffle:#A08A74;
  --ombre-carte:0 1px 0 rgba(0,0,0,.3), 14px 16px 30px -18px rgba(0,0,0,.9);
  --ombre-carte-h:0 1px 0 rgba(0,0,0,.3), 26px 30px 48px -22px rgba(0,0,0,.95);
}
:root[data-theme="light"]{
  --fond:var(--papier); --surface:var(--ecran); --surface-2:#F2EEE6;
  --texte:#221D2E; --texte-2:#5C5266; --filet:#D6D0C4;
  --accent:var(--brique); --buffle:#7A6553;
  --ombre-carte:0 1px 0 rgba(34,29,46,.05), 14px 16px 26px -18px rgba(34,29,46,.55);
  --ombre-carte-h:0 1px 0 rgba(34,29,46,.05), 26px 30px 44px -22px rgba(34,29,46,.6);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:var(--corps);font-size:var(--s0);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:600;line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--lampe);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:22px}
.eyebrow{
  font-family:var(--data);font-size:var(--s-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px;
}
.lede{font-size:var(--s1);color:var(--texte-2);max-width:62ch}
.sr-only,.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--brique);color:#fff;padding:10px 16px}

/* ==========================================================================
   3. EN-TÊTE
   ========================================================================== */
.entete{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--fond) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--filet);
}
.admin-bar .entete{top:32px}
@media screen and (max-width:782px){.admin-bar .entete{top:46px}}
.entete-in{display:flex;align-items:center;gap:20px;min-height:66px}
.marque{
  font-family:var(--display);font-size:1.3rem;line-height:.94;color:var(--accent);
  text-decoration:none;letter-spacing:-.01em;flex:0 0 auto;
}
.marque span{display:block;padding-left:.9em}
.marque img{max-height:52px;width:auto}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.nav a{
  text-decoration:none;font-size:.94rem;padding:8px 11px;border-radius:3px;color:var(--texte-2);
  transition:color .18s,background .18s;display:block;
}
.nav a:hover,.nav .current-menu-item > a{color:var(--texte);background:var(--surface-2)}
/* Le bouton du menu : WordPress pose la classe sur le <li>, pas sur le lien. */
.nav a.btn,.nav a.btn:hover,
.nav li.btn > a,.nav li.btn > a:hover{
  color:#FBF8F2;background:var(--brique);font-weight:600;padding:11px 20px;border-radius:2px;
  box-shadow:5px 6px 0 -1px color-mix(in srgb,var(--brique) 40%,transparent);
}
.burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--filet);
  border-radius:3px;padding:9px 12px;cursor:pointer;color:var(--texte);
  font-family:var(--data);font-size:12px;
}

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.94rem;font-weight:600;padding:11px 20px;border:none;cursor:pointer;
  background:var(--brique);color:#FBF8F2;border-radius:2px;font-family:var(--corps);
  transition:transform .18s,box-shadow .18s,background .18s;
  box-shadow:5px 6px 0 -1px color-mix(in srgb,var(--brique) 40%,transparent);
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:8px 9px 0 -1px color-mix(in srgb,var(--brique) 40%,transparent)}
.btn-2{background:transparent;color:var(--texte);border:1px solid var(--filet);box-shadow:none}
.btn-2:hover{border-color:var(--accent);color:var(--accent);box-shadow:none;transform:none}

/* ==========================================================================
   5. HÉROS
   ========================================================================== */
.heros{
  position:relative;background:var(--encre);color:#F2ECE1;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  min-height:clamp(480px,42vw,640px);
}
.heros-texte{
  grid-column:1;grid-row:1;
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,4vw,64px) clamp(18px,2vw,30px) clamp(40px,4vw,64px)
          max(22px,calc((100vw - var(--col))/2 + 22px));
}
.heros-bloc{display:flex;flex-direction:column}
.lueur{
  position:absolute;inset:auto auto -28% -14%;width:min(720px,90%);aspect-ratio:1.3/1;z-index:-1;
  background:radial-gradient(ellipse at 40% 90%,rgba(233,166,60,.26) 0%,rgba(176,58,43,.16) 38%,transparent 70%);
  animation:flamme 7s ease-in-out infinite alternate;pointer-events:none;
}
@keyframes flamme{from{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
.heros-photo{
  grid-column:2;grid-row:1;align-self:stretch;height:100%;
  position:relative;z-index:0;overflow:hidden;background:#0D0B14;
}
.heros-photo img{width:100%;height:100%;object-fit:cover;object-position:58% 40%}
.heros-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--encre) 0%,rgba(25,21,39,.72) 9%,rgba(25,21,39,.24) 22%,transparent 40%);
}
.credit{
  position:absolute;right:12px;bottom:10px;z-index:2;font-family:var(--data);
  font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.62);
  background:rgba(16,13,24,.45);padding:4px 8px;border-radius:2px;
}
.heros h1{
  font-size:clamp(1.7rem,2.35vw,2.2rem);letter-spacing:-.02em;max-width:20ch;
  margin:0 0 14px;color:#FBF3E6;line-height:1.16;
}
.heros h1 em{font-style:normal;color:var(--lampe)}
.heros .lede{color:#D3C9BE;max-width:48ch;font-size:1.02rem;line-height:1.55}
.heros .eyebrow{color:var(--lampe)}
.heros-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.heros .btn-2{color:#F2ECE1;border-color:rgba(242,236,225,.34)}
.heros .btn-2:hover{border-color:var(--lampe);color:var(--lampe)}
.chiffres{
  display:flex;flex-wrap:wrap;gap:12px 0;margin-top:28px;
  border-top:1px solid rgba(242,236,225,.16);padding-top:18px;max-width:820px;
}
.chiffre{flex:1 1 118px;padding-right:14px}
.chiffre b{
  display:block;font-family:var(--display);font-size:1.15rem;color:#FBF3E6;
  line-height:1.15;white-space:nowrap;
}
.chiffre span{
  font-family:var(--data);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#A99CB4;
}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */
.section{padding:clamp(56px,8vw,96px) 0}
.section-claire{background:var(--surface-2);border-top:1px solid var(--filet)}
.section-bordee{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.tete{display:flex;flex-wrap:wrap;gap:24px;align-items:end;justify-content:space-between;margin-bottom:34px}
.tete h2{font-size:clamp(1.9rem,4.2vw,2.7rem);letter-spacing:-.018em}
.tete .lede{margin-top:14px}
.apreciser{color:var(--buffle);font-style:italic}
.note-legende{
  font-size:.86rem;line-height:1.55;color:var(--texte-2);max-width:66ch;
  border-left:2px solid var(--buffle);padding-left:14px;margin:0 0 18px;
}

/* ==========================================================================
   7. FILTRES ET GRILLE DE SPECTACLES
   ========================================================================== */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filtre{
  font-family:var(--data);font-size:12px;letter-spacing:.05em;padding:8px 14px;
  background:transparent;border:1px solid var(--filet);color:var(--texte-2);
  border-radius:100px;cursor:pointer;transition:.18s;
}
.filtre:hover{border-color:var(--accent);color:var(--accent)}
.filtre[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#FBF8F2}

.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:26px}
.flat{
  background:var(--surface);border:1px solid var(--filet);border-radius:2px;
  box-shadow:var(--ombre-carte);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
  text-decoration:none;color:inherit;
}
.flat:hover{transform:translate(-3px,-4px);box-shadow:var(--ombre-carte-h)}
.flat-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--encre-2)}
.flat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.flat:hover .flat-img img{transform:scale(1.045)}
.tag{
  position:absolute;left:0;bottom:0;font-family:var(--data);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;background:var(--encre);color:var(--lampe);
  padding:6px 11px;
}
.tag.creation{background:var(--brique);color:#FBF8F2}
.flat-corps{padding:19px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.flat h3{font-size:var(--s2);letter-spacing:-.01em}
.flat p{font-size:.93rem;color:var(--texte-2);line-height:1.55}
.meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;
  border-top:1px dashed var(--filet);
}
.meta-nue{border-top:none;padding-top:4px;margin-top:0}
.puce{
  font-family:var(--data);font-size:11px;letter-spacing:.04em;color:var(--texte-2);
  border:1px solid var(--filet);border-radius:100px;padding:3px 9px;white-space:nowrap;
}
.puce.age{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.lien-fiche{font-size:.86rem;font-weight:600;color:var(--accent);text-decoration:none}
.flat:hover .lien-fiche{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   8. FICHE DE SPECTACLE
   ========================================================================== */
.fiche{background:var(--surface-2);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.fiche-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,5vw,60px);align-items:start;
}
.fiche-photo{
  border-radius:2px;overflow:hidden;box-shadow:var(--ombre-carte);
  border:1px solid var(--filet);
}
.fiche h2{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:16px}
.fiche h3{font-size:var(--s1);margin:26px 0 10px}
.rider{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:8px}
.rider th,.rider td{text-align:left;padding:10px 0;border-bottom:1px solid var(--filet);vertical-align:top}
.rider th{
  font-family:var(--data);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texte-2);font-weight:400;width:44%;padding-right:16px;
}
.rider td{font-variant-numeric:tabular-nums}
.tableau-scroll{overflow-x:auto}

/* ==========================================================================
   9. AGENDA
   ========================================================================== */
.dates{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--filet)}
.date{
  display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:22px;align-items:center;
  padding:20px 4px;border-bottom:1px solid var(--filet);transition:background .2s;
}
.date:hover{background:var(--surface-2)}
.jour{
  font-family:var(--data);font-size:.88rem;color:var(--accent);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;line-height:1.4;
}
.jour b{display:block;font-size:1.5rem;font-family:var(--display);color:var(--texte);letter-spacing:0}
.date h3{font-size:var(--s1);margin-bottom:3px}
.date h3 a{text-decoration:none}
.date h3 a:hover{color:var(--accent)}
.date .lieu{font-size:.9rem;color:var(--texte-2)}
.date .heure{font-family:var(--data);font-size:.85rem;color:var(--texte-2);white-space:nowrap}
.agenda-vide{
  border:1px dashed var(--filet);padding:26px;border-radius:2px;
  color:var(--texte-2);font-size:.95rem;
}

/* ==========================================================================
   10. BLOCS (ateliers, exposition)
   ========================================================================== */
.duo-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,44px)}
.bloc{
  background:var(--surface);border:1px solid var(--filet);border-radius:2px;
  box-shadow:var(--ombre-carte);overflow:hidden;
}
.bloc-img{aspect-ratio:16/10;overflow:hidden;background:var(--encre-2)}
.bloc-img img{width:100%;height:100%;object-fit:cover}
.bloc-corps{padding:26px 26px 30px;display:flex;flex-direction:column;gap:14px;align-items:start}
.bloc h3{font-size:var(--s2)}
.bloc-corps p{color:var(--texte-2);font-size:.96rem}
.liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.94rem}
.liste li{padding-left:20px;position:relative;color:var(--texte-2)}
.liste li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  background:var(--accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.liste b{color:var(--texte);font-weight:600}

/* ==========================================================================
   11. LE DUO
   ========================================================================== */
.portraits{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,5vw,56px);align-items:start;
}
.portrait-photo{
  border-radius:2px;overflow:hidden;border:1px solid var(--filet);
  box-shadow:var(--ombre-carte);position:sticky;top:96px;
}
.portrait-photo img{width:100%;aspect-ratio:4/3.4;object-fit:cover;object-position:60% 50%}
.bio{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.bio-item h3{font-size:var(--s2);margin-bottom:6px}
.bio-item p{color:var(--texte-2);font-size:.96rem}
.bio-item .role{
  font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:4px;
}
.bio-item .lien-fiche{display:inline-block;margin-top:6px;text-decoration:none}
.bio-item .lien-fiche:hover{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   12. JOURNAL
   ========================================================================== */
.journal{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.article-carte{
  background:var(--surface);border:1px solid var(--filet);border-radius:2px;
  box-shadow:var(--ombre-carte);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
}
.article-carte:hover{transform:translate(-3px,-4px);box-shadow:var(--ombre-carte-h)}
.article-carte .flat-img{aspect-ratio:16/10}
.article-corps{padding:19px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.article-corps h3{font-size:var(--s1)}
.article-corps h3 a{text-decoration:none}
.article-corps h3 a:hover{color:var(--accent)}
.article-corps p{font-size:.92rem;color:var(--texte-2);line-height:1.55}
.date-article{
  font-family:var(--data);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);
}
.article-corps .lien-fiche{margin-top:auto;padding-top:10px}

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--filet);max-width:78ch}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{
  cursor:pointer;padding:20px 40px 20px 0;font-family:var(--display);font-size:var(--s1);
  position:relative;list-style:none;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:19px;font-family:var(--data);
  font-size:1.3rem;color:var(--accent);transition:transform .25s;
}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent)}
.faq .reponse{padding:0 40px 22px 0;color:var(--texte-2);font-size:.97rem}
.faq .reponse > * + *{margin-top:12px}

/* ==========================================================================
   14. CONTACT
   ========================================================================== */
.contact{background:var(--encre);color:#EDE6DB;position:relative;overflow:hidden}
.contact::before{
  content:"";position:absolute;inset:auto auto -60% 50%;transform:translateX(-50%);
  width:900px;aspect-ratio:2/1;
  background:radial-gradient(ellipse at 50% 100%,rgba(233,166,60,.28),transparent 68%);
}
.contact-in{
  position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(28px,5vw,56px);
}
.contact h2{font-size:clamp(1.9rem,4.4vw,2.8rem);color:#FBF3E6;margin-bottom:16px}
.contact .lede{color:#C6BCB2}
.contact .eyebrow{color:var(--lampe)}
.contact .apreciser{color:#A2947F}
.coord{display:flex;flex-direction:column;gap:16px;font-family:var(--data);font-size:.9rem}
.coord a{color:var(--lampe);text-decoration:none;border-bottom:1px solid rgba(233,166,60,.35)}
.coord a:hover{border-bottom-color:var(--lampe)}
.coord .etiq{
  display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#948AA1;margin-bottom:3px;
}
.coord .val{color:#C6BCB2}

/* ==========================================================================
   15. PIED DE PAGE
   ========================================================================== */
.pied{
  background:var(--encre);color:#8E85A0;
  border-top:1px solid rgba(242,236,225,.12);padding:34px 0;
}
.pied-in{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  font-family:var(--data);font-size:11.5px;letter-spacing:.05em;
}
.pied a{color:#C0B6CE;text-decoration:none}
.pied a:hover{color:var(--lampe)}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px}

/* ==========================================================================
   16. PAGES INTÉRIEURES ET CONTENU ÉDITEUR
   ========================================================================== */
.page-tete{
  background:var(--encre);color:#F2ECE1;padding:clamp(46px,7vw,86px) 0 clamp(40px,6vw,70px);
  position:relative;overflow:hidden;
}
.page-tete::before{
  content:"";position:absolute;inset:auto auto -70% -10%;width:640px;aspect-ratio:1.4/1;
  background:radial-gradient(ellipse at 40% 90%,rgba(233,166,60,.22),transparent 68%);
}
.page-tete .wrap{position:relative}
.page-tete h1{font-size:clamp(1.9rem,4.4vw,2.9rem);color:#FBF3E6;letter-spacing:-.02em;max-width:22ch}
.page-tete .eyebrow{color:var(--lampe)}
.page-tete .lede{color:#C6BCB2;margin-top:16px}
.fil{
  font-family:var(--data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#A99CB4;margin-bottom:14px;
}
.fil a{color:var(--lampe);text-decoration:none}

.prose{max-width:70ch;font-size:1.02rem;line-height:1.72;color:var(--texte)}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:var(--s3);margin-top:1.8em;letter-spacing:-.015em}
.prose h3{font-size:var(--s2);margin-top:1.6em}
.prose h4{font-size:var(--s1);margin-top:1.4em}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3em;color:var(--texte-2)}
.prose li + li{margin-top:.5em}
.prose img,.prose figure{border-radius:2px}
.prose figcaption{
  font-family:var(--data);font-size:11.5px;letter-spacing:.04em;
  color:var(--texte-2);margin-top:8px;
}
.prose blockquote{
  border-left:2px solid var(--accent);padding-left:18px;margin-left:0;
  font-family:var(--display);font-size:var(--s1);line-height:1.4;
}
.prose hr{border:none;border-top:1px solid var(--filet);margin:2em 0}
.prose code,.prose pre{font-family:var(--data);font-size:.9em}
.prose pre{background:var(--surface-2);padding:16px;overflow-x:auto;border-radius:2px}
.prose table{width:100%;font-size:.94rem}
.prose th,.prose td{border-bottom:1px solid var(--filet);padding:9px 10px 9px 0;text-align:left}
.prose .alignleft{float:left;margin:.4em 1.6em 1em 0;max-width:50%}
.prose .alignright{float:right;margin:.4em 0 1em 1.6em;max-width:50%}
.prose .aligncenter{margin-inline:auto}
.prose .alignwide{max-width:min(100%,900px);margin-inline:auto}
.prose .alignfull{max-width:none}
.prose .wp-caption{max-width:100%}
.prose::after{content:"";display:block;clear:both}

.contenu-page{padding:clamp(46px,6vw,76px) 0}
.entree-meta{
  font-family:var(--data);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--texte-2);display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px;
}
.entree-meta a{color:var(--accent);text-decoration:none}
.image-une{
  margin-bottom:32px;border:1px solid var(--filet);border-radius:2px;
  overflow:hidden;box-shadow:var(--ombre-carte);
}

.pagination{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:44px;
  font-family:var(--data);font-size:.9rem;
}
.pagination .page-numbers{
  padding:9px 14px;border:1px solid var(--filet);border-radius:2px;
  text-decoration:none;color:var(--texte-2);
}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.pagination .current{background:var(--accent);border-color:var(--accent);color:#FBF8F2}

.recherche{display:flex;gap:8px;max-width:420px;margin-top:22px}
.recherche input[type="search"]{
  flex:1;padding:11px 14px;border:1px solid var(--filet);border-radius:2px;
  background:var(--surface);color:var(--texte);font-family:var(--corps);font-size:.95rem;
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .fiche-grid,.portraits{grid-template-columns:1fr}
  .portraits{gap:28px}
  .portrait-photo{position:static}
  .heros{grid-template-columns:1fr;min-height:0}
  .heros-texte{grid-column:1;grid-row:2;padding:clamp(34px,6vw,54px) 22px clamp(44px,7vw,60px)}
  .heros-photo{grid-column:1;grid-row:1;aspect-ratio:4/3;height:auto}
  .heros-photo::after{
    background:linear-gradient(180deg,rgba(25,21,39,.22) 0%,transparent 22%,
      rgba(25,21,39,.45) 80%,var(--encre) 100%);
  }
  .lueur{display:none}
}
@media (max-width:780px){
  .burger{display:block;position:relative;z-index:60}
  .nav{
    position:fixed;inset:0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--fond);padding:80px 22px 30px;margin:0;
    transform:translateY(-101%);transition:transform .32s cubic-bezier(.2,.7,.3,1);
    height:100dvh;overflow-y:auto;z-index:50;
  }
  .nav[data-ouvert="true"]{transform:translateY(0)}
  .nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav a{font-family:var(--display);font-size:1.5rem;padding:12px 0;color:var(--texte)}
  .nav a.btn,.nav li.btn > a{
    margin-top:16px;text-align:center;font-family:var(--corps);font-size:1rem;padding:14px 20px;
  }
  .date{grid-template-columns:88px minmax(0,1fr);row-gap:8px}
  .date .heure{grid-column:2}
  .chiffre{flex:1 1 44%}
}
@media (max-width:480px){
  .grille,.journal{grid-template-columns:1fr}
  .heros-cta .btn{flex:1 1 100%;justify-content:center}
  .prose .alignleft,.prose .alignright{float:none;margin:1em 0;max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}
@media print{
  .entete,.pied,.heros-cta,.filtres,.burger{display:none}
  body{background:#fff;color:#000}
}