/* ============================================================
   YIE JUKU — Feuille de style du site
   Ergonomie de boutique moderne, habillee aux couleurs de la maison.
   Le Moteur et les documents interactifs gardent leur design nuit
   et n'utilisent pas ce fichier.
   ============================================================ */

:root{
  /* Or : franc, pas pale. --or sert aux aplats et aux traits,
     --or-txt au petit texte qui doit rester lisible sur blanc. */
  --or:#C9A227;--or-vif:#E7C25A;--or-profond:#9A7A12;--or-txt:#8A6408;
  --or-pale:#EFE0B4;--or-fond:#FDF8EA;
  --metal:linear-gradient(95deg,#A87C0A 0%,#E9C567 30%,#F6E09B 45%,#D9AF37 58%,#A87C0A 100%);

  /* la maison : l'or et le rouge bordeaux, sans autre couleur d'accent (le Centre garde le pourpre du moteur) */
  --pourpre:#6E1528;--pourpre-clair:#8E1F36;--encre:#2A0B13;
  --sarcelle:#155263;

  --fond:#FFFFFF;--fond-alt:#F7F5F0;--fond-doux:#FCFAF5;
  --carte:#FFFFFF;--bord:#E5E0D6;--bord-fort:#D2CBBB;

  --txt:#2A0B13;--txt-2:#5A3D44;--txt-3:#8A6E74;

  --vert:#1F7A4D;--vert-fond:#EAF6EF;
  --rouge:#B3261E;--rouge-fond:#FDECEA;
  --bleu-fond:#F8EDEF;

  --r:14px;--r-sm:9px;
  --ombre:0 1px 2px rgba(42,11,19,.05),0 8px 24px rgba(42,11,19,.06);
  --ombre-forte:0 4px 12px rgba(42,11,19,.08),0 18px 44px rgba(42,11,19,.12);
  /* titres en Cinzel ; texte courant en Nunito Sans, plus souple et plus détendu que celui du moteur */
  --ui:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --titre:'Cinzel',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--fond);color:var(--txt);font-family:var(--ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--pourpre);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.bg{min-height:100vh;display:flex;flex-direction:column;background:var(--fond)}
main{flex:1}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--pourpre);color:#fff;padding:.7rem 1.2rem;font-weight:600;z-index:999}
.skip-link:focus{left:0}

/* Or metallique sur les mots mis en avant */
.sec-titre em,.hero-h1 .or,.footer-logo .or,.nav-logo .or{
  background:var(--metal);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-style:normal;
}

/* ---------- BANDEAU ---------- */
.annonce{background:var(--encre);color:var(--or-pale);text-align:center;font-size:.84rem;padding:.6rem 1rem}
.annonce em{color:#fff;font-style:italic}
.annonce a{color:var(--or-vif);text-decoration:underline;font-weight:600;margin-left:.3rem}

/* ---------- NAVIGATION ---------- */
.main-nav{position:sticky;top:0;z-index:500;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:1rem;padding:.8rem 2rem;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--bord)}
.nav-logo{font-family:var(--titre);font-size:1.1rem;font-weight:700;letter-spacing:.15em;color:var(--encre);text-decoration:none;justify-self:start;white-space:nowrap}
.nav-links{display:flex;gap:.15rem;align-items:center;justify-content:center;flex-wrap:nowrap}
.nav-actions{display:flex;align-items:center;gap:.5rem;justify-self:end}
.nav-btn{font-size:.88rem;font-weight:500;color:var(--txt-2);text-decoration:none;padding:.5rem .7rem;border-radius:var(--r-sm);transition:background .15s,color .15s;white-space:nowrap}
.nav-btn:hover{background:var(--fond-alt);color:var(--encre)}
.nav-btn.active{color:var(--pourpre);font-weight:600}
.nav-cta{display:inline-flex;align-items:center;gap:.45rem;background:var(--pourpre);color:#fff;text-decoration:none;font-weight:600;font-size:.88rem;padding:.58rem 1.1rem;border-radius:var(--r-sm);border:none;cursor:pointer;transition:background .18s;white-space:nowrap}
.nav-cta:hover{background:var(--pourpre-clair)}
.cart-count{display:inline-block;min-width:20px;height:20px;line-height:20px;text-align:center;background:var(--or);color:#fff;border-radius:10px;font-size:.72rem;font-weight:700;padding:0 6px}
.hamburger{display:none;flex-direction:column;gap:4.5px;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:var(--encre);border-radius:2px;transition:all .25s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-drawer{display:none;grid-column:1/-1;flex-direction:column;width:100%;padding:.5rem 0 .3rem;border-top:1px solid var(--bord);margin-top:.7rem}
.mobile-drawer.open{display:flex}
.mobile-drawer .nav-btn{padding:.85rem .3rem;border-bottom:1px solid var(--bord);border-radius:0;font-size:1rem}
.mobile-drawer .nav-cta{margin:.9rem 0 .3rem;justify-content:center;padding:.85rem}
.hide-desktop{display:none}

/* ---------- MISE EN PAGE ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:3.5rem 1.5rem}
.wrap-sm{max-width:760px;margin:0 auto;padding:3.5rem 1.5rem}
.section-alt{background:var(--fond-alt)}
.sec-head{text-align:center;max-width:700px;margin:0 auto 2.6rem}
.tag{display:inline-block;background:var(--or-fond);color:var(--or-txt);border:1px solid var(--or-pale);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .85rem;border-radius:100px;margin-bottom:1rem}
.sec-titre{font-family:var(--titre);font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:700;line-height:1.25;color:var(--encre)}
.sec-sub{font-size:1.05rem;color:var(--txt-2);margin-top:.8rem;line-height:1.65}
.divider{display:flex;align-items:center;gap:.9rem;margin:2.5rem 0;color:var(--or)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--bord)}
.bloc-cat{margin-top:3.5rem}

/* ---------- BOUTONS ---------- */
.btn-gold,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--ui);font-weight:600;font-size:1rem;padding:.95rem 1.7rem;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;border:1px solid transparent;text-align:center}
.btn-gold{background:var(--pourpre);color:#fff;box-shadow:0 2px 8px rgba(60,18,30,.2)}
.btn-gold:hover{background:var(--pourpre-clair);transform:translateY(-1px);box-shadow:0 6px 18px rgba(60,18,30,.26)}
.btn-gold:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-or{background:linear-gradient(135deg,var(--or-vif),var(--or-profond));color:#fff;box-shadow:0 2px 10px rgba(201,162,39,.35)}
.btn-or:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(201,162,39,.45)}
.btn-ghost{background:#fff;color:var(--pourpre);border-color:var(--bord-fort)}
.btn-ghost:hover{background:var(--fond-alt);border-color:var(--pourpre)}
.btn-sm{font-size:.9rem;padding:.65rem 1.1rem}
.btn-lg{font-size:1.06rem;padding:1.1rem 2.2rem;width:100%}
.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}

/* ---------- HERO ---------- */
.hero{background:linear-gradient(180deg,var(--or-fond) 0%,#fff 100%);padding:4rem 1.5rem 3.5rem;text-align:center;border-bottom:1px solid var(--bord)}
.hero-grec{font-family:var(--serif);font-size:1.15rem;letter-spacing:.4em;color:var(--or-txt);margin-bottom:1rem}
.hero-h1{font-family:var(--titre);font-size:clamp(2rem,5.2vw,3.4rem);font-weight:700;line-height:1.15;color:var(--encre);max-width:900px;margin:0 auto}
.hero-sub{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--txt-2);max-width:640px;margin:1.3rem auto 0;line-height:1.7}
.hero-cta{margin-top:2rem;justify-content:center}
.hero-note{margin-top:1.1rem;font-size:.88rem;color:var(--txt-3)}
.hero-roles{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}
.hero-roles span{background:#fff;border:1px solid var(--or-pale);color:var(--or-txt);font-size:.82rem;font-weight:600;padding:.4rem .9rem;border-radius:100px}

.hero-branche{background:linear-gradient(180deg,var(--fond-alt) 0%,#fff 100%)}
.hero-branche .hero-grec{font-size:2rem;letter-spacing:0}
.branche-musique{background:linear-gradient(180deg,#F3EEFA 0%,#fff 100%)}
.branche-centre-aletheia{background:linear-gradient(180deg,var(--or-fond) 0%,#fff 100%)}
.branche-synapse{background:linear-gradient(180deg,#EAF2F5 0%,#fff 100%)}

/* ---------- PHOTOS ---------- */
figure{margin:0}
.photo-attente{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:repeating-linear-gradient(45deg,var(--fond-alt),var(--fond-alt) 12px,#F1EEE6 12px,#F1EEE6 24px);
  border:1.5px dashed var(--bord-fort);border-radius:var(--r);color:var(--txt-3);text-align:center;padding:1.5rem;
}
.photo-icone{font-size:1.8rem;color:var(--or);opacity:.7;line-height:1}
.photo-texte{font-size:.86rem;font-weight:500;max-width:220px;line-height:1.45}
.photo-portrait{width:100%;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre)}
.photo-portrait img{width:100%;height:100%;object-fit:cover}
.photo-branche{width:100%;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre)}
.photo-branche img{width:100%;height:100%;object-fit:cover}
.photo-branche-carte{width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:0;border-left:none;border-right:none;border-top:none}
.photo-branche-carte img{width:100%;height:100%;object-fit:cover}

/* ---------- CARTES DE BRANCHE ---------- */
.branches-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.6rem;align-items:stretch}
.carte-branche{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.carte-branche:hover{box-shadow:var(--ombre-forte);transform:translateY(-3px);border-color:var(--bord-fort)}
.carte-branche-lien{display:block;text-decoration:none;color:inherit}
.carte-branche-corps{padding:1.6rem}
.carte-branche-sym{display:inline-block;font-size:1.6rem;color:var(--or);line-height:1;margin-bottom:.6rem}
.carte-branche h3{font-family:var(--titre);font-size:1.25rem;font-weight:700;color:var(--encre);margin-bottom:.25rem}
.carte-branche-st{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--or-txt);margin-bottom:.8rem}
.carte-branche p{font-size:.97rem;color:var(--txt-2);line-height:1.65}
.faux-lien{display:inline-block;margin-top:1.1rem;font-weight:600;color:var(--pourpre)}
.faux-lien::after{content:" →"}
.carte-branche.branche-musique .carte-branche-sym{color:#6B3FA0}
.carte-branche.branche-synapse .carte-branche-sym{color:var(--sarcelle)}

/* ---------- INTRO DE BRANCHE ---------- */
.intro-branche{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:2.5rem;align-items:start;margin-bottom:1rem}
.intro-texte p{font-size:1.04rem;line-height:1.8;color:var(--txt-2);margin-bottom:1rem}
.intro-texte p:last-child{margin-bottom:0}

/* ---------- CARTES ---------- */
.grid{display:grid;gap:1.4rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:1.8rem;transition:box-shadow .2s,border-color .2s}
.card:hover{box-shadow:var(--ombre);border-color:var(--bord-fort)}
.card h3{font-family:var(--titre);font-size:1.05rem;font-weight:700;color:var(--encre);margin-bottom:.7rem;line-height:1.35}
.card p{font-size:.98rem;color:var(--txt-2);line-height:1.7}

/* ---------- REASSURANCE ---------- */
.confiance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--bord);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;max-width:1120px;margin:0 auto}
.confiance div{background:var(--carte);padding:1.6rem 1.4rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.confiance h3{font-size:.98rem;font-weight:700;color:var(--encre);margin-bottom:.45rem;display:flex;align-items:center;justify-content:center;gap:.5rem}
.confiance h3::before{content:"✦";color:var(--or);font-size:.85rem}
.confiance p{font-size:.92rem;color:var(--txt-2);line-height:1.6}

/* ---------- PRODUITS ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.6rem}
.prod{display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.prod:hover{box-shadow:var(--ombre-forte);transform:translateY(-3px);border-color:var(--bord-fort)}
.prod-cover{position:relative;display:block;aspect-ratio:3/4;background:var(--fond-alt);border-bottom:1px solid var(--bord);overflow:hidden}
.prod-cover img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.prod:hover .prod-cover img{transform:scale(1.03)}
/* Les pochettes de disque sont carrees : on ne les recadre pas en portrait. */
.prod[data-prod-cat="album"] .prod-cover,.fiche-album .fiche-cover{aspect-ratio:1}
.prod-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.prod-cat{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.prod-t{font-family:var(--titre);font-size:1.02rem;font-weight:700;color:var(--encre);text-decoration:none;line-height:1.35}
.prod-t:hover{color:var(--pourpre)}
.prod-d{font-size:.93rem;color:var(--txt-2);line-height:1.6;flex:1}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;padding-top:.3rem}
.prix{font-size:1.2rem;font-weight:700;color:var(--encre);white-space:nowrap}
/* « payable en deux fois » est une condition de vente, pas une mention de bas de page : au gris le
   plus clair elle tenait 3,8:1 sous le montant qu'elle corrige. */
.prix small,.fiche-prix small{display:block;font-size:.78rem;font-weight:500;color:var(--txt-2);white-space:normal;line-height:1.4;margin-top:.15rem}
.prix-libre{font-size:.95rem;color:var(--txt-3);font-style:italic}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;padding:.3rem .65rem;border-radius:100px;border:1px solid var(--bord);color:var(--txt-2);background:var(--fond-alt)}
.badge.ok{color:var(--vert);background:var(--vert-fond);border-color:#C6E5D3}
.badge.ok::before{content:"●";font-size:.6rem}
.badge.soon{color:var(--or-txt);background:var(--or-fond);border-color:var(--or-pale)}
.badge.free{color:#fff;background:linear-gradient(135deg,var(--or-vif),var(--or-profond));border-color:var(--or-profond)}

/* ---------- FILTRES ---------- */
.filtres{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}
.filtres+.filtres{margin-bottom:2.4rem}
.filtre{font-family:var(--ui);font-size:.9rem;font-weight:500;padding:.55rem 1.05rem;border:1px solid var(--bord);background:#fff;color:var(--txt-2);cursor:pointer;border-radius:100px;transition:all .15s}
.filtre:hover{border-color:var(--pourpre);color:var(--pourpre)}
.filtre.active{background:var(--pourpre);border-color:var(--pourpre);color:#fff;font-weight:600}

/* ---------- FICHE PRODUIT ---------- */
.fiche{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:3rem;align-items:start}
.fiche-col-img{position:sticky;top:88px}
.fiche-cover{aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre-forte);background:var(--fond-alt)}
.fiche-cover img{width:100%;height:100%;object-fit:cover}
.fiche h1{font-family:var(--titre);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;line-height:1.25;color:var(--encre);margin:.5rem 0}
.fiche-st{font-size:1.08rem;color:var(--txt-2);margin-bottom:1.2rem}
.fiche-prix{font-size:2.1rem;font-weight:800;color:var(--encre);line-height:1.1;margin-bottom:.4rem}
.fiche-prix.prix-libre{font-size:1.3rem;font-weight:600;font-style:normal;color:var(--txt-2)}
.fiche-note{font-size:.94rem;color:var(--txt-2);margin:.6rem 0 1rem;line-height:1.6}
/* Cette ligne dit ce que le format comprend, juste sous le choix : elle se lit, elle ne décore pas. */
.aide-fmt{font-size:.92rem;color:var(--txt-2);margin:.8rem 0}
.fiche-achat{border:1px solid var(--bord);border-radius:var(--r);padding:1.6rem;background:var(--fond-doux);margin:1.6rem 0 2rem;box-shadow:var(--ombre)}
.opt-row{display:grid;gap:.6rem;margin:1.2rem 0}
.opt{display:block;width:100%;text-align:left;font-family:var(--ui);font-size:.95rem;font-weight:600;padding:.85rem 1rem;border:1.5px solid var(--bord);background:#fff;color:var(--txt);cursor:pointer;border-radius:var(--r-sm);transition:all .15s}
.opt:hover{border-color:var(--bord-fort)}
.opt.active{border-color:var(--pourpre);background:var(--bleu-fond);box-shadow:0 0 0 3px rgba(60,18,30,.07)}
/* Sous chaque format, la précision qui dit ce qu'on commande (« précisez le livre biblique à la
   commande ») : elle décide l'achat, elle ne peut pas être la ligne la plus pâle de la page. */
.opt small{display:block;font-weight:400;font-size:.86rem;color:var(--txt-2);margin-top:.15rem}
.fiche-txt{font-size:1.03rem;color:var(--txt-2);line-height:1.8}
.fiche-txt p{margin-bottom:1.1rem}
.fiche-txt strong{color:var(--encre);font-weight:600}
.fiche-txt ul{margin:0 0 1.2rem;padding-left:1.25rem}
.fiche-txt li{margin-bottom:.45rem;padding-left:.2rem}
.fiche-txt li::marker{color:var(--or)}
.fiche-txt h3{font-family:var(--titre);font-size:1.12rem;font-weight:700;color:var(--encre);margin:2.2rem 0 .7rem;padding-top:1.4rem;border-top:1px solid var(--bord)}
.fiche-txt h4{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pourpre);margin:1.4rem 0 .5rem}
.captures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin:0 0 1rem}
.capture{margin:0;display:flex;flex-direction:column;gap:.5rem}
.capture a{display:block;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre-forte);border:1px solid var(--bord);background:#0C1428;line-height:0}
.capture img{width:100%;height:auto;display:block;transition:transform .25s}
.capture a:hover img{transform:scale(1.02)}
.capture figcaption{font-size:.84rem;line-height:1.45;color:var(--txt-2);text-align:center}
.capture-tel{grid-column:1/-1;align-items:center}
.capture-tel a{width:min(260px,70%);border-radius:26px}
.fiche h2,.fiche-txt h2{font-family:var(--titre);font-size:1.2rem;font-weight:700;color:var(--encre);margin:2.4rem 0 1rem}
.det{width:100%;border-collapse:collapse;margin-top:.8rem;font-size:.96rem}
.det td{padding:.75rem .2rem;border-bottom:1px solid var(--bord);color:var(--txt);vertical-align:top}
/* La colonne des intitulés porte des mots qu'on lit (Format, Langue, Parution) : au gris le plus
   clair elle tombait entre 3,8 et 4,2:1 selon la branche. Elle passe au gris du texte secondaire,
   qui tient dans les trois branches, et reste plus pâle que la valeur en face. */
.det td:first-child{color:var(--txt-2);width:38%;padding-right:1rem;font-weight:500}
.garanties{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.garanties li{position:relative;padding-left:1.6rem;font-size:.93rem;color:var(--txt-2);line-height:1.55}
.garanties li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:700}

/* Pistes musicales */
.pistes{list-style:none;counter-reset:p;margin:0;padding:0;border:1px solid var(--bord);border-radius:var(--r);overflow:hidden}
.pistes>li{counter-increment:p;padding:1.1rem 1.3rem;border-bottom:1px solid var(--bord)}
.pistes>li:last-child{border-bottom:none}
.piste-t{font-weight:700;color:var(--encre);font-size:1.02rem}
.piste-t::before{content:counter(p,decimal-leading-zero) " · ";color:var(--or);font-weight:600}
.credits{list-style:none;margin:.5rem 0 0;padding:0}
.credits li{font-size:.88rem;color:var(--txt-3);line-height:1.55}
.pistes audio{width:100%;margin-top:.8rem;height:38px}

.barre-achat{display:none;position:fixed;left:0;right:0;bottom:0;z-index:600;background:rgba(255,255,255,.97);border-top:1px solid var(--bord);padding:.7rem 1rem;box-shadow:0 -4px 20px rgba(27,13,54,.1);align-items:center;gap:.9rem}
.barre-achat .prix{font-size:1.05rem}
.barre-achat .btn-gold{flex:1;padding:.85rem 1rem;font-size:.98rem}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--bord)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;padding:1.15rem 1.3rem;font-weight:600;color:var(--encre);font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--or);font-size:1.4rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{background:var(--fond-alt)}
.faq .rep{padding:0 1.3rem 1.25rem;color:var(--txt-2);font-size:.98rem;line-height:1.75}
.faq .rep p{margin-bottom:.7rem}
.faq .rep p:last-child{margin-bottom:0}

/* ---------- PANIER ---------- */
.ligne{display:grid;grid-template-columns:1fr auto auto;gap:1.2rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--bord)}
.ligne-t{font-family:var(--titre);font-size:1rem;font-weight:700;color:var(--encre);text-decoration:none;line-height:1.35}
.ligne-t:hover{color:var(--pourpre)}
.ligne-f{font-size:.9rem;color:var(--txt-3);margin-top:.25rem}
.qte{display:inline-flex;align-items:center;border:1px solid var(--bord);border-radius:var(--r-sm);background:#fff}
.qte button{background:none;border:none;color:var(--pourpre);cursor:pointer;font-size:1.1rem;padding:.4rem .75rem;line-height:1}
.qte button:hover{background:var(--fond-alt)}
.qte span{min-width:30px;text-align:center;font-weight:600;font-size:.95rem}
.suppr{background:none;border:none;color:var(--txt-3);cursor:pointer;font-size:1.3rem;padding:.2rem .45rem;line-height:1;border-radius:var(--r-sm)}
.suppr:hover{color:var(--rouge);background:var(--rouge-fond)}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:1.4rem 0;font-size:1.3rem;font-weight:700;color:var(--encre);border-bottom:1px solid var(--bord)}
.vide{text-align:center;padding:3.5rem 1rem;color:var(--txt-3);font-size:1.05rem}

/* ---------- FORMULAIRE ---------- */
.champ{margin-bottom:1.25rem}
.champ label{display:block;font-size:.9rem;font-weight:600;color:var(--encre);margin-bottom:.45rem}
.champ .req{color:var(--rouge)}
.champ input,.champ textarea,.champ select{width:100%;background:#fff;border:1px solid var(--bord-fort);border-radius:var(--r-sm);color:var(--txt);font-family:var(--ui);font-size:1rem;padding:.8rem .9rem;outline:none;transition:border-color .15s,box-shadow .15s}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--pourpre);box-shadow:0 0 0 3px rgba(60,18,30,.1)}
.champ input::placeholder,.champ textarea::placeholder{color:#A5A1B3}
.champ .aide{font-size:.86rem;color:var(--txt-3);margin-top:.4rem}
.champ.err input,.champ.err textarea,.champ.err select{border-color:var(--rouge);background:var(--rouge-fond)}
.champ .msg-err{display:none;font-size:.86rem;color:var(--rouge);margin-top:.4rem;font-weight:500}
.champ.err .msg-err{display:block}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(--txt-2);line-height:1.6;cursor:pointer}
.check input{width:18px;height:18px;margin-top:.15rem;accent-color:var(--pourpre);flex-shrink:0}
.form-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.recap{border:1px solid var(--bord);border-radius:var(--r-sm);padding:1.3rem;background:var(--fond-alt);white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem;line-height:1.65;color:var(--txt);max-height:340px;overflow:auto}
.encadre{background:var(--bleu-fond);border:1px solid #DED5F0;border-radius:var(--r);padding:1.3rem 1.5rem;margin:1.5rem 0}
.encadre p{font-size:.98rem;color:var(--txt-2);line-height:1.7}

/* ---------- PAGES LEGALES ---------- */
.doc h1{font-family:var(--titre);font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:700;color:var(--encre);margin-bottom:.5rem;line-height:1.25}
.doc .maj{display:block;color:var(--txt-3);font-size:.92rem;margin-bottom:2.5rem}
.doc h2{font-family:var(--titre);font-size:1.15rem;font-weight:700;color:var(--encre);margin:2.6rem 0 .9rem;padding-top:1.6rem;border-top:1px solid var(--bord)}
.doc h3{font-size:1rem;font-weight:700;color:var(--encre);margin:1.7rem 0 .5rem}
.doc p{font-size:1rem;line-height:1.8;color:var(--txt-2);margin-bottom:1rem}
.doc ul,.doc ol{margin:0 0 1.1rem 1.35rem}
.doc li{font-size:1rem;line-height:1.75;color:var(--txt-2);margin-bottom:.5rem}
.doc strong{color:var(--encre);font-weight:600}
.doc table{width:100%;border-collapse:collapse;margin:1.1rem 0 1.6rem;font-size:.95rem}
.doc th,.doc td{border:1px solid var(--bord);padding:.75rem .9rem;text-align:left;color:var(--txt-2)}
.doc th{background:var(--fond-alt);color:var(--encre);font-weight:600}
.doc .encart{border-left:3px solid var(--or);background:var(--or-fond);padding:1.1rem 1.3rem;margin:1.5rem 0;border-radius:0 var(--r-sm) var(--r-sm) 0}
.doc .encart p:last-child{margin-bottom:0}
.acompleter{background:#FFF3CD;border-bottom:1px dashed var(--or-profond);padding:.1rem .3rem;color:#7A5A0F;border-radius:3px}

/* ---------- FIL D'ARIANE ---------- */
/* Le gris clair du fil tenait entre 3,2 et 3,9:1 selon la branche, sous le seuil : c'est pourtant
   le seul chemin de retour de la page. Le texte inactif garde le gris, le lien passe au rang du
   texte courant, et se souligne au survol comme avant. */
.ariane{font-size:.85rem;color:var(--txt-2);margin-bottom:1.6rem}
.ariane a{color:var(--txt-2,#5A3D44);text-decoration:none}
.ariane a:hover{color:var(--pourpre);text-decoration:underline}
/* Le chevron entre deux étapes est un ornement, il peut rester pâle. La page courante, elle, porte
   son nom : elle garde la couleur du fil, sans marge ni voile. */
.ariane span{margin:0 .45rem;opacity:.6;color:var(--txt-3)}
.ariane span[aria-current]{margin:0;opacity:1;color:var(--txt-2)}

/* ---------- PIED DE PAGE ---------- */
footer{background:var(--encre);color:#CFC8E0;padding:3.5rem 1.5rem 2rem;margin-top:auto}
.foot-grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.foot-grid h4{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--or-vif);margin-bottom:1rem}
.foot-grid a{display:block;font-size:.94rem;color:#CFC8E0;text-decoration:none;margin-bottom:.6rem;transition:color .15s}
.foot-grid a:hover{color:#fff}
.footer-logo{font-family:var(--titre);font-weight:700;letter-spacing:.15em;color:#fff;font-size:1.1rem}
.footer-tagline{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:#A79FBE;margin-top:.6rem;line-height:1.6;max-width:320px}
.foot-bas{max-width:1140px;margin:2.8rem auto 0;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-copy{font-size:.82rem;color:#8B84A3}
.foot-soc{display:flex;gap:1.3rem;flex-wrap:wrap}
.foot-soc a{font-size:.85rem;color:#A79FBE;text-decoration:none}
.foot-soc a:hover{color:var(--or-vif)}

/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:900;background:var(--encre);color:#fff;font-size:.94rem;font-weight:500;padding:.85rem 1.4rem;border-radius:100px;box-shadow:var(--ombre-forte);max-width:90vw;text-align:center}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .main-nav{grid-template-columns:1fr auto}
  .nav-links,.nav-actions>.nav-cta{display:none}
  .hamburger{display:flex}
}
@media (max-width:940px){
  .confiance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fiche,.intro-branche{grid-template-columns:1fr;gap:2rem}
  .fiche-col-img{position:static;max-width:320px;margin:0 auto}
  .intro-branche .photo-branche{max-width:520px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:760px){
  .confiance{grid-template-columns:1fr}
  .captures{grid-template-columns:1fr}
  .main-nav{padding:.7rem 1.1rem}
  .nav-links{display:none}
  .hamburger{display:flex}
  .hide-desktop{display:block}
  .wrap,.wrap-sm{padding:2.6rem 1.1rem}
  .hero{padding:2.8rem 1.1rem 2.6rem}
  .form-cols{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:1.8rem}
  .foot-bas{flex-direction:column;text-align:center}
  .ligne{grid-template-columns:1fr auto;row-gap:.7rem}
  .btn-row{flex-direction:column}
  .btn-row .btn-gold,.btn-row .btn-ghost{width:100%}
  .barre-achat{display:flex}
  body.a-barre{padding-bottom:76px}
}
@media print{
  .main-nav,footer,.btn-gold,.btn-ghost,.toast,.barre-achat,.annonce{display:none!important}
  body{background:#fff;color:#000}
  .doc p,.doc li{color:#000}
}

/* ---------- Yié Juku : or et pourpre, sans dégradé de fond ---------- */
.hero-h1 em,.footer-logo em,.nav-logo em{font-style:normal;background:none;-webkit-text-fill-color:var(--pourpre);color:var(--pourpre)}
.footer-logo em{-webkit-text-fill-color:#E3A9B6;color:#E3A9B6}
.hero-nom{font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:.06em}
.rubrique-maison .hero{background:var(--fond-doux)}

/* ---------- une rubrique, une couleur ---------- */
/* le Centre prend le bleu nuit du moteur */
.rubrique-centre-aletheia{--pourpre:#132750;--pourpre-clair:#1E3A70;--encre:#0B1428;--txt:#0B1428;--txt-2:#44506A;--txt-3:#727C92;--fond-alt:#F3F5F9;--fond-doux:#F9FAFC;--bord:#DDE2EC;--bord-fort:#C6CEDD;--or-fond:#FDF8EA;--bleu-fond:#EDF1F8}
.rubrique-synapse{--pourpre:#155263;--pourpre-clair:#1E6E83;--encre:#0C2A33;--txt:#0C2A33;--txt-2:#3E5C63;--txt-3:#6C878D;--fond-alt:#F1F7F7;--fond-doux:#F7FBFB;--bord:#D6E4E6;--bord-fort:#BFD3D6;--or-fond:#F2F8F5;--bleu-fond:#EAF4F5}

/* ---------- 17 septembre, soir : le haut et le bas en bordeaux, Yié Juku en or pur ---------- */
/* 23 septembre 2026 : le bordeaux se rechauffe pour s'accorder aux photos de la seance.
   L'ancien, #5E1224, etait a 346 degres de teinte, du cote magenta ; le rouge des photos
   est a 0 ou 2 degres, franc et chaud. Les deux se contrariaient. Le nouveau bordeaux tient
   la meme teinte que les photos, en plus sombre et moins sature, pour rester un fond. */
:root{--bordeaux:#5B1815;--bordeaux-clair:#781F1C;--violet-centre:#0F1D3D}
.rubrique-maison .hero.hero-maison{background:var(--bordeaux);border-bottom:none;padding:4.2rem 1.5rem 3.8rem}
.hero-maison .hero-h1 .or,.hero-maison .hero-h1 em,footer .footer-logo .or,footer .footer-logo em{
  background:var(--metal);background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-style:normal;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.hero-maison .hero-sub{color:#FFF6EC}
/* badges et boutons de largeur égale, quelle que soit la longueur du texte */
.hero-maison .hero-roles{display:grid;grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;gap:.7rem}
.hero-maison .hero-roles span{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bordeaux-clair);border:1px solid #C9A227;color:#FFF6EC;padding:.55rem .8rem}
.hero-maison .hero-cta{display:grid;grid-template-columns:repeat(2,minmax(0,260px));justify-content:center;gap:.9rem}
.hero-maison .hero-cta a{display:flex;align-items:center;justify-content:center;text-align:center;width:100%}
.hero-maison .btn-gold{background:var(--metal);background-size:200% auto;color:#2A0B13;box-shadow:none}
.hero-maison .btn-gold:hover{background-position:100% 0;color:#2A0B13}
.hero-maison .btn-ghost{background:var(--bordeaux-clair);color:#FFF6EC;border-color:#C9A227}
.hero-maison .btn-ghost:hover{background:#8E2A3F;color:#fff;border-color:#E7C25A}
footer{background:var(--bordeaux);color:#F3DDE2}
.foot-grid a{color:#F3DDE2}
.footer-tagline{color:#E8C9D0}
.footer-copy{color:#D9AEB8}
.foot-soc a{color:#E8C9D0}
/* cartes des deux maisons : violet pur pour le Centre, bordeaux pour la musique ; symboles dorés */
.carte-branche.branche-centre-aletheia .carte-branche-corps{background:var(--violet-centre)}
.carte-branche.branche-musique .carte-branche-corps{background:var(--bordeaux)}
.carte-branche .carte-branche-corps h3{color:#FFFFFF}
.carte-branche .carte-branche-corps p{color:#F4ECF6}
.carte-branche .carte-branche-corps .carte-branche-st,.carte-branche .carte-branche-corps .faux-lien{color:#E7C25A}
.carte-branche .carte-branche-sym,.carte-branche.branche-musique .carte-branche-sym{background:var(--metal);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-size:2rem}
@media (max-width:760px){
  .hero-maison .hero-roles{grid-template-columns:minmax(0,260px)}
  .hero-maison .hero-cta{grid-template-columns:minmax(0,300px)}
}

/* pages de branche : le bandeau devient une grande image quand elle est fournie ; plus de carré photo dessous */
.intro-branche.sans-photo{grid-template-columns:1fr;max-width:820px;margin-left:auto;margin-right:auto}
.hero-branche.hero-image{background-size:cover;background-position:center;min-height:clamp(320px,48vw,560px);display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.hero-branche.hero-image::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,6,12,0) 30%,rgba(20,6,12,.72) 100%)}
.hero-branche.hero-image>*{position:relative;color:#fff}
.hero-branche.hero-image .hero-sub{color:#F6EDE6}

/* les deux maisons, de même taille */
.carte-branche{display:flex;flex-direction:column}
.carte-branche-lien{display:flex;flex-direction:column;flex:1}
.carte-branche-corps{flex:1;display:flex;flex-direction:column}
.carte-branche-corps .faux-lien{margin-top:auto;padding-top:1.1rem}

/* écouter : icônes des plateformes et téléchargement */
.ecouter-tete{text-align:center;margin:1rem 0 2rem}
.ecouter-pochette{width:min(260px,70%);margin:0 auto 1.2rem;border-radius:var(--r);box-shadow:var(--ombre-forte)}
.ecouter h1{font-family:var(--titre);font-size:clamp(1.6rem,4vw,2.3rem);color:var(--encre)}
.ecouter h2{font-family:var(--titre);font-size:1.1rem;text-align:center;margin:2rem 0 1rem;color:var(--encre)}
.streams{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.8rem}
.streams-dl{grid-template-columns:minmax(0,220px);justify-content:center}
.stream{--fond-icone:var(--bordeaux);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1.1rem .6rem;border-radius:var(--r);background:var(--bordeaux);color:#E7C25A;text-decoration:none;font-weight:700;font-size:.88rem;text-align:center;border:1px solid var(--bordeaux);transition:transform .15s,background .15s}
.stream svg{width:38px;height:38px;fill:#E7C25A;color:#E7C25A}
.stream span{color:#FFF6EC}
.stream small{font-size:.72rem;font-weight:600;color:#E3A9B6}
a.stream:hover{transform:translateY(-2px);background:var(--bordeaux-clair)}
.stream-attente{background:#EDE5E2;border-color:#E0D3CF;--fond-icone:#EDE5E2}
.stream-attente svg{fill:#9C8A86;color:#9C8A86}
.stream-attente span{color:#5A3D44}
.stream-attente small{color:#8A6E74}
.ecouter-note{text-align:center;font-size:.9rem;color:var(--txt-2);margin-top:1.8rem}
.btn-icone{display:inline-flex;align-items:center;gap:.5rem}
.btn-icone svg{width:18px;height:18px}
.piste-t .extrait{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--or-txt);margin-left:.4rem}

/* pages de branche : grande photo horizontale, puis la bande de couleur de la rubrique avec les titres */
.bandeau-photo{width:100%;aspect-ratio:8/3;max-height:560px;margin:0;overflow:hidden;background:var(--fond-alt)}
.bandeau-photo img{width:100%;height:100%;object-fit:cover}
.bandeau-photo.photo-attente{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem}
.hero.bande-rubrique{border-bottom:none;padding:2.6rem 1.5rem 2.8rem}
.bande-rubrique.branche-centre-aletheia{background:#0F1D3D}
.bande-rubrique.branche-musique{background:var(--bordeaux)}
.bande-rubrique.branche-synapse{background:#0E3A46}
.bande-rubrique .hero-h1{color:#FFFFFF}
.bande-rubrique .hero-sub{color:#F4ECE6}
.bande-rubrique .hero-grec{background:var(--metal);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media (max-width:760px){.bandeau-photo{aspect-ratio:3/2}}

/* ---------- bannière d'événement (musique) : photo verticale à gauche ---------- */
.evt{display:grid;grid-template-columns:1fr minmax(240px,380px);gap:0;margin:2.5rem 0 3rem;border-radius:var(--r);overflow:hidden;background:var(--bordeaux);color:#FFF6EC;box-shadow:var(--ombre-forte)}
/* la photo verticale occupe tout le côté droit, du haut en bas du bloc */
.evt-photo{margin:0;align-self:stretch;min-height:540px;height:100%;background:#4A0E1C}
.evt-photo img{width:100%;height:100%;object-fit:cover}
.evt-photo.photo-attente{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:#4A0E1C;color:#E3A9B6}
.evt-photo.photo-attente .photo-texte{color:#E3A9B6;text-align:center;padding:0 1rem}
.evt-corps{padding:2.4rem 2.4rem 2.2rem}
.evt-sur{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#2A0B13;background:var(--metal);background-size:200% auto;padding:.35rem .85rem;border-radius:100px}
.evt-titre{font-family:var(--titre);font-size:clamp(1.4rem,3vw,2rem);line-height:1.25;color:#FFFFFF;margin:1rem 0 1.1rem}
.evt-titre em{font-style:normal;background:var(--metal);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.evt-recit{font-size:1.02rem;line-height:1.75;color:#F6E9EC;margin-bottom:.9rem}
.evt-recit strong{color:#E7C25A}
.evt-programme{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid #7A1B31}
.evt-etape{display:grid;grid-template-columns:170px 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid #7A1B31}
.evt-quand{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#E7C25A;padding-top:.2rem}
.evt-quoi strong{display:block;font-family:var(--titre);font-size:1.08rem;color:#FFFFFF}
.evt-quoi>span{display:block;font-size:.93rem;color:#EBD3D9;margin-top:.15rem}
.evt-titres{margin:.9rem 0 0;padding-left:1.4rem;display:grid;gap:.45rem}
.evt-titres li{font-size:.95rem;color:#FFF6EC}
.evt-titres li::marker{color:#E7C25A;font-weight:700}
.evt-titres b{font-weight:700}
.evt-titres small{display:block;font-size:.82rem;color:#D9B7BF;font-style:italic}
.evt-cloture{margin-top:.8rem;font-size:.95rem;color:#E7C25A;font-weight:600}
.evt-signatures{margin-top:1.8rem;display:grid;gap:.8rem}
.evt-signatures blockquote{font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.5;color:#FFF6EC;padding-left:1rem;border-left:3px solid #C9A227}
@media (max-width:860px){
  .evt{grid-template-columns:1fr}
  .evt-photo{order:-1;min-height:0;aspect-ratio:4/5;max-height:520px}
  .evt-corps{padding:1.8rem 1.3rem}
  .evt-etape{grid-template-columns:1fr;gap:.35rem}
}

.evt-recit em{font-family:var(--serif);font-size:1.25rem;line-height:1.55;color:#FFF6EC}
.evt-final{margin-top:1.8rem;padding-left:1rem;border-left:3px solid #C9A227;font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.5;color:#FFFFFF}

/* annonces du programme : majuscules italiques, trait doré à gauche ; le mot clé en or */
.evt-annonce{padding:1.1rem 0;border-bottom:1px solid #7A1B31}
.evt-annonce p{padding-left:1rem;border-left:3px solid #C9A227;font-family:var(--titre);font-style:italic;text-transform:uppercase;letter-spacing:.06em;font-size:1.02rem;line-height:1.5;color:#FFFFFF}
.evt-annonce p em{font-style:italic;background:var(--metal);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- LES ESPACES PHOTO, TAILLÉS POUR DES IMAGES VERTICALES (18 septembre 2026) ---------- */
/* Toutes les photos de la maison sont en portrait : c'est le site qui s'y adapte, aucune n'est coupée de force. */

/* bandeau de branche : une bande large, la photo verticale entière au centre, posée sur son propre flou */
.bandeau-photo{position:relative;display:flex;align-items:center;justify-content:center;width:100%;
  height:clamp(340px,44vw,540px);max-height:none;aspect-ratio:auto;overflow:hidden;background:var(--fond-alt)}
.bandeau-photo .bandeau-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(30px) brightness(.6) saturate(.9);transform:scale(1.18)}
.bandeau-photo .bandeau-sujet{position:relative;width:auto;max-width:min(100%,540px);height:100%;
  object-fit:contain;box-shadow:0 18px 44px rgba(20,6,12,.45)}
@media (max-width:760px){.bandeau-photo{aspect-ratio:auto;height:clamp(300px,84vw,440px)}
  .bandeau-photo .bandeau-sujet{max-width:min(100%,320px)}}

/* cartes des deux maisons : la photo verticale sur le côté, le bloc de couleur à côté, tailles égales */
.carte-branche-lien{display:grid;grid-template-columns:minmax(120px,38%) 1fr;align-items:stretch}
.photo-branche-carte{width:100%;height:100%;min-height:300px;aspect-ratio:auto}
.photo-branche-carte img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
@media (max-width:520px){
  .carte-branche-lien{grid-template-columns:1fr}
  .photo-branche-carte{min-height:0;aspect-ratio:4/5;max-height:420px}
}

/* portrait de la page d'accueil : cadre vertical, plus haut que large */
.photo-portrait{aspect-ratio:3/4}

/* bannière d'événement : colonne un peu plus large, le sujet tenu dans le cadre */
@media (min-width:861px){.evt{grid-template-columns:1fr minmax(280px,430px)}}
.evt-photo img{object-position:40% center}
/* pas de filet sous la dernière ligne du programme : le bloc se ferme net */
.evt-programme > li:last-child{border-bottom:none}
@media (max-width:860px){.evt-photo{aspect-ratio:3/4;max-height:560px}}

/* tableaux des pages de documents : defilants sur petit ecran, jamais de debordement */
@media (max-width:640px){
  .doc table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .doc table th,.doc table td{white-space:normal}
}

/* le texte d'une famille : l'exergue tient la ligne sous le titre, le corps reste étroit
   pour rester lisible, et se referme par un filet avant les cartes */
.fam-exergue{
  margin:0 0 1rem;
  font-style:italic;
  font-size:clamp(1rem,1.6vw,1.12rem);
  color:var(--or,#c9a227);
}
.fam-texte{
  max-width:62ch;
  margin:0 0 2rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid rgba(201,162,39,.25);
}
.fam-texte p{margin:0 0 1rem;line-height:1.75}
.fam-texte p:last-child{margin-bottom:0}

/* 23 septembre 2026 : le gabarit suit l'image, et non l'inverse. Le generateur pose sur le cadre
   l'aspect-ratio exact de la photo, releve par scripts/mesurer_images.py. La photo se montre donc
   entiere, sans rognage, et il n'y a plus rien a masquer : le fond flou est retire. */
.bandeau-photo{height:auto;max-height:none;background:none}
.bandeau-photo .bandeau-sujet{position:static;width:100%;max-width:100%;height:100%;object-fit:cover}
.bandeau-photo .bandeau-fond{display:none}
@media (max-width:760px){
  .bandeau-photo{height:auto}
  .bandeau-photo .bandeau-sujet{max-width:100%}
}

/* ---------- LES FONDS DE LA SÉANCE (24 septembre 2026) ---------- */
/* L'autrice a fourni les deux fonds peints de son shooting : le rouge du studio où la série JUKU
   a été prise, et son pendant violet. Toute couleur d'accent de la maison vient désormais de là.
   Le bordeaux inventé disparaît : ce n'est plus une couleur choisie, c'est la matière du décor.

   Chaque fond reçoit un voile noir, dosé sur sa zone la plus claire relevée dans le fichier :
     - rouge, zone la plus claire #F0180E : voile 30 % → #A8110A, blanc 7,6:1, or clair 5,8:1 ;
     - violet, zone la plus claire #78248E : voile 18 % → #621E74, blanc 10,7:1, or clair 8,1:1.
   Le rouge en demande davantage parce qu'il est bien plus lumineux. L'or des petites capitales
   passe au #F6E09B, la borne claire du dégradé métal : le #E7C25A n'atteignait que 3,8:1 sur le
   rouge, sous le seuil de 4,5:1 exigé d'un petit texte. */

:root{
  --tissu-rouge:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.30)),url("/images/fond-rouge.jpg");
  --tissu-violet:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),url("/images/fond-violet.jpg");
  /* la teinte moyenne du tissu rouge, voile compris : ce que voit un écran qui ne charge pas
     l'image, et ce que prennent les tout petits aplats où une texture ne se verrait pas */
  --bordeaux:#6B0101;--bordeaux-clair:#8A0D07;
  --or-clair:#F6E09B;
}

/* le rouge : la page d'accueil, la bannière de l'événement, le pied du site, les boutons d'écoute */
.rubrique-maison .hero.hero-maison,
.evt,
footer,
.stream{
  background:var(--tissu-rouge);
  background-size:cover;
  background-position:center;
  border:none;
}

/* le violet : la carte du Centre sur l'accueil, et celle de Synapse qui lui est rattachée */
.carte-branche.branche-centre-aletheia .carte-branche-corps,
.carte-branche.branche-synapse .carte-branche-corps{
  background:var(--tissu-violet);
  background-size:cover;background-position:center;border:none;
}
.carte-branche.branche-musique .carte-branche-corps{
  background:var(--tissu-rouge);
  background-size:cover;background-position:center;border:none;
}

/* le fond est sombre : le texte reprend le clair */
.rubrique-maison .hero.hero-maison{border-bottom:none;box-shadow:var(--ombre-forte)}
.rubrique-maison .hero.hero-maison .hero-h1{color:#FFFFFF}
.rubrique-maison .hero.hero-maison .hero-sub,
.rubrique-maison .hero.hero-maison p{color:#F4ECF6}
.hero-maison .hero-roles span{background:rgba(0,0,0,.28);border-color:var(--or-clair);color:#FFF6EC}
.hero-maison .btn-ghost{background:rgba(0,0,0,.28);color:#FFF6EC;border-color:var(--or-clair)}

.carte-branche .carte-branche-corps h3{color:#FFFFFF}
.carte-branche .carte-branche-corps p{color:#F4ECF6}
.carte-branche .carte-branche-corps .carte-branche-st,
.carte-branche .carte-branche-corps .faux-lien{color:var(--or-clair)}

/* boutons d'écoute : le tissu est petit ici, l'or s'y détache quand même (5,8:1 au pire) */
.stream{border:1px solid rgba(246,224,155,.45);color:var(--or-clair)}
a.stream:hover{transform:translateY(-2px);background:var(--tissu-rouge);filter:brightness(1.25)}

/* pied du site */
footer{color:#F6E9EC}
footer a{color:#F4ECF6}
footer a:hover{color:var(--or-clair)}
footer h4{color:var(--or-clair)}
.footer-tagline{color:#EBD3D9}
.footer-copy{color:#EBD3D9}

/* la bannière de l'événement : plus de photo, donc une seule colonne */
.evt{grid-template-columns:1fr;color:#FFF6EC;box-shadow:var(--ombre-forte)}
@media (min-width:861px){.evt{grid-template-columns:1fr}}
.evt-titre,.evt-quoi strong{color:#FFFFFF}
.evt-recit{color:#F6E9EC}
.evt-recit strong{color:var(--or-clair)}
.evt-programme{border-top-color:rgba(246,224,155,.30)}
.evt-etape,.evt-annonce{border-bottom-color:rgba(246,224,155,.30)}
.evt-quand{color:var(--or-clair)}
.evt-quoi>span{color:#EBD3D9}
.evt-titres li{color:#FFF6EC}
.evt-titres li::marker{color:var(--or-clair)}
.evt-titres small{color:#D9B7BF}
.evt-cloture{color:var(--or-clair)}

/* ---------- LES PAGES DE BRANCHE : LA PHOTO, PUIS LE TITRE SUR LE BLANC ---------- */
/* La bande de couleur qui portait le titre est retirée : la photo suffit à ouvrir la page, et le
   titre se pose sur le blanc du site, juste dessous. */
.hero.hero-sur-blanc{
  background:var(--fond);
  border-bottom:1px solid var(--bord);
  padding:2.6rem 1.5rem 2.8rem;
}
.hero-sur-blanc .hero-h1{color:var(--encre)}
.hero-sur-blanc .hero-sub{color:var(--txt-2)}
.hero-sur-blanc .hero-grec{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--or);
}

/* ---------- LE BANDEAU DES DEUX ONGLETS ---------- */
/* Stream et Bibliothèque s'ouvrent chacun sur sa photo de bureau. Le cadre prend la forme du
   fichier : rien n'est coupé. La photo du Stream est debout, celle de la Bibliothèque est
   couchée ; une hauteur maximale empêche la première de devenir un mur, et le tissu rouge
   l'entoure alors — aucun flou n'est nécessaire pour occuper l'espace. */
.bandeau-onglet{
  margin:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  height:clamp(340px,44vw,560px);
  background:var(--tissu-rouge);background-size:cover;background-position:center;
}
.bandeau-onglet img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;box-shadow:0 18px 44px rgba(20,6,12,.45)}
@media (max-width:760px){.bandeau-onglet{height:clamp(300px,84vw,440px)}}

/* ---------- UN BANDEAU DE BRANCHE DONT LA PHOTO EST DEBOUT ---------- */
/* Elle garde sa forme, centrée, et c'est le fond de la branche qui l'entoure. Rien n'est coupé,
   rien n'est flou — la matière du décor sert de passe-partout. */
.bandeau-photo.bandeau-debout{
  height:clamp(340px,44vw,560px);
  align-items:center;justify-content:center;
}
.bandeau-photo.bandeau-debout .bandeau-sujet{
  width:auto;max-width:min(100%,420px);height:100%;object-fit:contain;
  box-shadow:0 18px 44px rgba(20,6,12,.45);
}
.bandeau-photo.bandeau-debout.branche-synapse,
.bandeau-photo.bandeau-debout.branche-centre-aletheia{
  background:var(--tissu-violet);background-size:cover;background-position:center;
}
.bandeau-photo.bandeau-debout.branche-musique{
  background:var(--tissu-rouge);background-size:cover;background-position:center;
}
@media (max-width:760px){
  .bandeau-photo.bandeau-debout{height:clamp(300px,84vw,440px)}
  .bandeau-photo.bandeau-debout .bandeau-sujet{max-width:min(100%,300px)}
}

/* Les accents qui restaient bordeaux prennent le rouge du tissu : le bouton Panier, les boutons
   pleins, le lien d'évitement. Sur un bouton de 38 pixels de haut une texture ne se verrait pas
   et deux boutons voisins n'en montreraient pas le même morceau ; c'est donc la teinte moyenne du
   tissu, voile compris, qui est reprise. Blanc dessus : 13,0:1.
   Les deux branches gardent leur couleur propre : le Centre son bleu de nuit, Synapse sa sarcelle.
   Elles redéfinissent --pourpre pour elles-mêmes, et rien ici ne les touche. */
:root{--pourpre:#6B0101;--pourpre-clair:#8A0D07}

/* ---------- LE PLAN DU CROQUIS (28 septembre 2026) ---------- */
/* Chaque branche suit le même mouvement : ce qu'elle est, comment elle travaille, ce qu'elle
   n'est pas, puis ce qu'elle propose. Trois rangs de titres le portent : le volet (A, B), la
   section, puis le groupe à l'intérieur d'une liste. Chacun se lit comme un cran en dessous
   du précédent, sans quoi la page redevient une suite plate de blocs. */

/* le volet : un titre de rang supérieur, précédé d'un filet, pour ouvrir une moitié de page */
.volet{margin:3.5rem 0 0;padding-top:2rem;border-top:1px solid var(--bord)}
.volet:first-child{margin-top:1rem;padding-top:0;border-top:none}
.volet-titre{
  font-family:var(--titre);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;
  color:var(--encre);letter-spacing:.01em;margin:0;
}

/* la section : le rang courant du plan */
.sec-plan{
  font-family:var(--titre);font-size:clamp(1.12rem,2.3vw,1.45rem);font-weight:700;
  color:var(--encre);margin:0 0 1rem;
}
.bloc-cat{margin:2.4rem 0 0}

/* le groupe : à l'intérieur d'une liste, le troisième rang. Petites capitales dorées, pour
   qu'il se distingue d'un titre de section sans lui faire concurrence. */
.groupe-rubrique{margin:1.8rem 0 0}
.groupe-titre{
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-txt);margin:0 0 .9rem;padding-bottom:.5rem;
  border-bottom:1px solid rgba(201,162,39,.28);
}

/* une section dont le texte n'est pas écrit. Elle se montre, elle ne se cache pas : un trou
   visible se comble, un trou escamoté s'oublie. Le générateur les compte à chaque construction. */
.section-attente{
  background:rgba(201,162,39,.07);
  border:1px dashed rgba(201,162,39,.45);
  border-radius:var(--r);
  padding:1.3rem 1.4rem;
}
.section-attente .sec-plan{margin-bottom:.4rem}
.texte-attente{margin:0;font-style:italic;color:var(--txt-3)}

/* ================================================================================
   L'ALLURE PORTFOLIO (28 septembre 2026)
   ================================================================================
   D'après le gabarit choisi par l'autrice. Sa langue tient en quatre gestes :

     - de grands panneaux sombres qui alternent avec un clair chaud ;
     - des titres énormes, serrés, en graisse pleine ;
     - des micro-étiquettes en capitales espacées, à gauche, face au texte ;
     - des filets fins qui séparent les lignes d'une liste, et beaucoup de vide.

   Les couleurs ne sont pas choisies : elles sont relevées dans les photos de la séance.
   Le mur du néon donne #CC0022 sur 18 % de l'image, son ombre #99001A. La teinte est à
   350° — le rouge du côté rose, ce que l'autrice appelle son fuchsia, et non un rouge
   orangé. Le gris chaud du portrait en noir et blanc donne le clair.

   Contrastes mesurés, sur les fonds réels :
     rouge profond #7A0118   blanc 11,4:1   sable 9,5:1   or clair 8,7:1
     rouge du mur  #A70224   blanc  7,8:1   sable 6,6:1
     fuchsia       #CC0022   blanc  5,9:1   (en aplat, jamais sous du petit texte doré)
     sable         #EFEAE6   encre 15,2:1   fuchsia 4,9:1
   D'où deux règles. Le fuchsia est une couleur de texte SUR le clair, et le bordeaux
   profond une couleur de panneau : l'inverse ne se lit pas. Et l'or, que la maison portait
   avant tout le reste, garde les micro-étiquettes — mais pas le même or des deux côtés :
     sur le bordeaux, l'or clair #F6E09B à 8,70:1 ;
     sur le sable, l'or profond #6E4F06 à 6,32:1.
   L'or clair sur le sable ne donne que 1,10:1, et l'or profond sur le bordeaux 1,51:1 :
   un seul or pour les deux fonds serait illisible sur l'un des deux.
   ================================================================================ */

:root{
  --rouge-profond:#7A0118;
  --rouge-mur:#A70224;
  --fuchsia:#CC0022;
  --sable:#EFEAE6;
  --sable-fonce:#DED5CF;
  --encre-p:#1A1416;
}

/* ---------- les panneaux ---------- */
.pf-sombre{background:var(--rouge-profond);color:#FFFFFF}
.pf-clair{background:var(--sable);color:var(--encre-p)}
.pf-section{padding:clamp(3.5rem,8vw,7rem) 0}
.pf-wrap{width:min(1140px,92vw);margin:0 auto}

/* ---------- les titres ---------- */
/* Serrés, pleins, et coupés court : dans ce gabarit un titre tient sur deux ou trois lignes
   et occupe la moitié de la largeur. Au-delà il cesse d'être un titre. */
.pf-titre{
  font-family:var(--titre);
  font-size:clamp(2.2rem,6.4vw,4.6rem);
  font-weight:700;line-height:1.02;letter-spacing:-.02em;
  margin:0 0 1.4rem;max-width:16ch;
}
.pf-sombre .pf-titre{color:#FFFFFF}
.pf-clair .pf-titre{color:var(--encre-p)}
.pf-titre em{font-style:normal;color:var(--fuchsia)}
.pf-sombre .pf-titre em{color:#FFB3C0}

/* ---------- la micro-étiquette ---------- */
.pf-etiquette{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 .9rem;
}
.pf-sombre .pf-etiquette{color:#F6E09B}
.pf-clair .pf-etiquette{color:#6E4F06}

/* ---------- l'ouverture : la photo porte le nom ---------- */
/* Le néon écrit « Yié Juku » au mur. Répéter le nom en typographie par-dessus serait le dire
   deux fois ; la photo est le titre, et le texte vient dessous. */
.pf-ouverture{margin:0;width:100%;line-height:0;background:var(--rouge-profond)}
.pf-ouverture img{display:block;width:100%;height:auto;max-height:82vh;object-fit:cover;object-position:center 30%}
.pf-sous-ouverture{padding:clamp(2.4rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.pf-sous-ouverture .pf-wrap{display:grid;gap:clamp(1.5rem,4vw,4rem);align-items:end;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.pf-accroche{font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.75;color:#FFE4E9;margin:0;max-width:46ch}
@media (max-width:860px){.pf-sous-ouverture .pf-wrap{grid-template-columns:1fr}}

/* ---------- la liste à filets : étiquette à gauche, texte à droite ---------- */
/* C'est le geste le plus reconnaissable du gabarit : une colonne étroite de noms, une large
   de texte, et un filet d'un bord à l'autre entre chaque ligne. */
.pf-liste{margin:0;padding:0;list-style:none}
.pf-ligne{
  display:grid;gap:clamp(.6rem,3vw,3rem);
  grid-template-columns:minmax(0,22%) minmax(0,1fr);
  padding:clamp(1.4rem,3vw,2.2rem) 0;
  border-top:1px solid currentColor;
}
.pf-ligne:last-child{border-bottom:1px solid currentColor}
.pf-sombre .pf-ligne{border-color:rgba(255,255,255,.28)}
.pf-clair .pf-ligne{border-color:rgba(26,20,22,.18)}
.pf-ligne-nom{font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:0}
.pf-sombre .pf-ligne-nom{color:#F6E09B}
.pf-clair .pf-ligne-nom{color:#6E4F06}
.pf-ligne-texte{margin:0;font-size:1rem;line-height:1.75}
.pf-ligne-texte p{margin:0 0 .8rem}
.pf-ligne-texte p:last-child{margin-bottom:0}
.pf-sombre .pf-ligne-texte{color:#F6E3E7}
.pf-clair .pf-ligne-texte{color:#3A2F32}
@media (max-width:700px){.pf-ligne{grid-template-columns:1fr;gap:.5rem}}

/* ---------- le duo portrait + texte ---------- */
.pf-duo{display:grid;gap:clamp(1.5rem,4vw,4rem);align-items:start;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.pf-portrait{margin:0;line-height:0}
.pf-portrait img{display:block;width:100%;height:auto}
@media (max-width:860px){.pf-duo{grid-template-columns:1fr}}

/* ---------- la grille des œuvres : trois colonnes, image 16:9, titre, une phrase ---------- */
.pf-grille{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-oeuvre{margin:0}
.pf-oeuvre-photo{margin:0 0 1rem;line-height:0;overflow:hidden;background:rgba(0,0,0,.2)}
.pf-oeuvre-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pf-oeuvre:hover .pf-oeuvre-photo img{transform:scale(1.04)}
.pf-oeuvre-sur{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:.35rem}
.pf-sombre .pf-oeuvre-sur{color:#F6E09B}
.pf-clair .pf-oeuvre-sur{color:#6E4F06}
.pf-oeuvre h3,.pf-oeuvre-t{font-family:var(--titre);font-size:clamp(1.1rem,2vw,1.4rem);font-weight:700;
  line-height:1.2;margin:0 0 .55rem}
/* La virgule liait `.pf-oeuvre-t` sans son panneau : le titre d'un ouvrage sortait donc en blanc
   quel que soit le fond, et les deux documents offerts avaient leur titre en blanc sur crème, soit
   1,1:1. Le titre suit désormais son panneau, comme le surtitre juste au-dessus : 15,9:1 sur le
   panneau clair, 16,6:1 sur le sombre. */
.pf-sombre .pf-oeuvre h3,.pf-sombre .pf-oeuvre-t{color:#FFFFFF}
.pf-clair .pf-oeuvre h3,.pf-clair .pf-oeuvre-t{color:#2A0B13}
.pf-oeuvre p{margin:0;font-size:.95rem;line-height:1.65}
.pf-sombre .pf-oeuvre p{color:#F0DADF}
.pf-clair .pf-oeuvre p{color:#3A2F32}
.pf-oeuvre a{text-decoration:none;color:inherit;display:block}
/* « Recevoir le livret » et « Recevoir la Revue » doivent tomber sur la même ligne, demande de
   l'autrice. On avait cherché à égaliser les deux descriptions ; elles se remettent à diverger au
   premier mot ajouté, et à chaque largeur d'écran. La carte devient une colonne et son dernier
   bloc est poussé en bas : les boutons s'alignent quelle que soit la longueur du texte. */
.pf-grille-2 .pf-oeuvre{display:flex;flex-direction:column;height:100%}
.pf-grille-2 .pf-oeuvre > p:last-child{margin-top:auto;padding-top:1.4rem}
@media (max-width:900px){.pf-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pf-grille{grid-template-columns:1fr}}

/* ---------- le bouton filaire du gabarit ---------- */
.pf-lien{
  display:inline-block;padding:.75rem 1.6rem;border:1px solid currentColor;
  font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;transition:background .18s,color .18s;
}
.pf-sombre .pf-lien{color:#FFFFFF}
.pf-sombre .pf-lien:hover{background:#FFFFFF;color:var(--rouge-profond)}
.pf-clair .pf-lien{color:var(--encre-p)}
.pf-clair .pf-lien:hover{background:var(--encre-p);color:var(--sable)}

/* ---------- la flèche qui invite à descendre ---------- */
.pf-fleche{display:block;width:1.6rem;height:auto;margin-top:1.6rem;opacity:.9}
.pf-fleche path{stroke:currentColor;stroke-width:1.5;fill:none}

/* ---------- L'ÉVÉNEMENT, EN ROSÉ (28 septembre 2026) ---------- */
/* Il portait le tissu rouge, le même que le pied du site : posé entre deux panneaux, il
   n'était plus qu'un troisième aplat sombre. En rosé il devient le seul de sa couleur sur la
   page, ce qui est bien ce qu'on attend d'un événement.
   Mesures sur #F9E9ED : encre 15,5:1 · bordeaux 9,7:1 · or profond 6,4:1 · fuchsia 5,0:1. */
.evt{
  background:#F9E9ED;
  background-image:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  color:#3A2F32;
  margin:0;
  padding:clamp(2.4rem,6vw,4.5rem) clamp(1.6rem,5vw,4rem);
}
.pf-evenement{background:#F9E9ED}
.pf-evenement .pf-wrap{padding:0}
.evt-sur{
  background:none;color:var(--fuchsia);padding:0;border-radius:0;
  font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
}
.evt-titre{color:var(--encre-p);margin:1.1rem 0 1.3rem}
.evt-titre em{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--fuchsia);font-style:normal;
}
.evt-recit{color:#3A2F32}
.evt-recit em{color:var(--encre-p)}
.evt-recit strong{color:#6E4F06}
.evt-programme{border-top:1px solid rgba(122,1,24,.20)}
.evt-etape,.evt-annonce{border-bottom:1px solid rgba(122,1,24,.20)}
.evt-quand{color:#6E4F06}
.evt-quoi strong{color:var(--encre-p)}
.evt-quoi>span{color:#5A4A4E}
.evt-titres li{color:#3A2F32}
.evt-titres li::marker{color:var(--fuchsia)}
.evt-titres small{color:#6B5A5E}
.evt-cloture{color:#6E4F06}
.evt-final{border-left:3px solid var(--fuchsia);color:var(--encre-p)}
.evt-annonce p{border-left:3px solid var(--fuchsia);color:var(--encre-p)}
.evt-annonce p em{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--fuchsia);
}
.evt-signatures blockquote{border-left:3px solid var(--fuchsia);color:var(--encre-p)}

/* ---------- LA PAGE « MERCI » (d'après la dernière page du gabarit) ---------- */
/* Une image large en haut, puis un cadre filaire : le mot énorme à gauche, les coordonnées
   à droite en petites capitales. Rien d'autre. */
.pf-merci{background:var(--rouge-profond);color:#FFFFFF;padding:clamp(2.5rem,6vw,5rem) 0}
.pf-merci-photo{margin:0 0 clamp(2rem,4vw,3rem);line-height:0}
.pf-merci-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.pf-merci-cadre{
  border:1px solid rgba(255,255,255,.45);
  padding:clamp(2rem,5vw,4rem);
  display:grid;gap:clamp(1.5rem,4vw,4rem);
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  align-items:start;
}
.pf-merci-mot{
  font-family:var(--titre);font-weight:700;line-height:.95;letter-spacing:-.02em;
  font-size:clamp(3rem,10vw,7rem);margin:0;color:#FFFFFF;
}
.pf-merci-bloc p{margin:0 0 .35rem;font-size:1rem;line-height:1.7;color:#F6E3E7}
.pf-merci-bloc a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.pf-merci-bloc a:hover{color:#F6E09B}
.pf-merci-bloc + .pf-merci-bloc{margin-top:2rem}
@media (max-width:760px){.pf-merci-cadre{grid-template-columns:1fr}}

/* ================================================================================
   LES CORRECTIONS DU 28 SEPTEMBRE, SECONDE SÉRIE
   ================================================================================ */

/* ---------- les rubriques de texte se centrent ---------- */
/* Demande de l'autrice. Le gabarit alignait tout à gauche ; elle veut l'axe. La mesure du
   texte est donc resserrée en même temps : une ligne centrée trop longue se retrouve sans
   bord fixe où l'œil revient, et la lecture décroche. */
.pf-section .pf-etiquette,
.pf-section .pf-titre,
.pf-sous-ouverture .pf-etiquette,
.pf-sous-ouverture .pf-titre{text-align:center}
.pf-section .pf-titre,
.pf-sous-ouverture .pf-titre{max-width:24ch;margin-left:auto;margin-right:auto}
.pf-sous-ouverture .pf-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
.pf-accroche{margin-left:auto;margin-right:auto;text-align:center}
.pf-sous-ouverture .pf-fleche{margin-left:auto;margin-right:auto}

/* la liste à filets : l'étiquette passe au-dessus, centrée, et le texte sous elle */
.pf-ligne{grid-template-columns:1fr;text-align:center;gap:.7rem}
.pf-ligne-nom{text-align:center}
.pf-ligne-texte{margin-left:auto;margin-right:auto;max-width:62ch}

/* les sections du plan d'une branche */
.bloc-cat > .sec-plan,
.volet-titre{text-align:center}
.bloc-cat > .fam-texte{margin-left:auto;margin-right:auto;max-width:62ch;text-align:center}
.section-attente{text-align:center}
.groupe-titre{text-align:center}
.pf-oeuvre{text-align:center}

/* ---------- le pied du site prend le fuchsia foncé validé ---------- */
/* Il portait le tissu rouge. C'est le même panneau que l'accueil : #7A0118, blanc à 11,4:1. */
footer{
  background:var(--rouge-profond);
  background-image:none;
  color:#F6E3E7;
}
footer a{color:#F4ECF6}
footer a:hover{color:#F6E09B}
footer h4{color:#F6E09B}

/* ---------- l'événement : fuchsia vif et doré ---------- */
/* Le rosé pâle était trop discret pour ce qu'il annonce. Le fuchsia du néon pur, #CC0022, ne
   laisse pas lire l'or clair : 4,47:1, sous le seuil. Un cran plus sourd, #B80020, garde la
   vivacité et rend l'or lisible — blanc 6,87:1, or clair 5,25:1. */
.evt{
  background:#B80020;
  background-image:none;
  color:#FFF0F3;
  border:none;
}
.pf-evenement{background:#B80020}
.evt-sur{color:#F6E09B;background:none}
.evt-titre{color:#FFFFFF}
.evt-titre em{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:#F6E09B;font-style:normal;
}
.evt-recit{color:#FFE9EE}
.evt-recit em{color:#FFFFFF}
.evt-recit strong{color:#F6E09B}
.evt-programme{border-top:1px solid rgba(246,224,155,.40)}
.evt-etape,.evt-annonce{border-bottom:1px solid rgba(246,224,155,.40)}
.evt-quand{color:#F6E09B}
.evt-quoi strong{color:#FFFFFF}
.evt-quoi>span{color:#FFE9EE}
.evt-titres li{color:#FFF0F3}
.evt-titres li::marker{color:#F6E09B}
.evt-titres small{color:#FFD5DE}
.evt-cloture{color:#F6E09B}
.evt-final{border-left:3px solid #F6E09B;color:#FFFFFF}
.evt-annonce p{border-left:3px solid #F6E09B;color:#FFFFFF}
.evt-annonce p em{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:#F6E09B;
}
.evt-signatures blockquote{border-left:3px solid #F6E09B;color:#FFFFFF}
/* l'événement se centre lui aussi */
.evt-corps{text-align:center}
.evt-recit,.evt-final{margin-left:auto;margin-right:auto;max-width:64ch}
.evt-programme{max-width:64ch;margin-left:auto;margin-right:auto}
.evt-etape{grid-template-columns:1fr;text-align:center;gap:.3rem}
.evt-titres{padding-left:0;list-style-position:inside}
.evt-final,.evt-annonce p{border-left:none;border-top:2px solid #F6E09B;padding:1rem 0 0}

/* ---------- la page Merci : l'or, sur le fond de la page ---------- */
/* L'autrice ne veut pas de fond fuchsia ici : la page garde sa teinte, et c'est l'or qui
   encadre et qui écrit. Or profond #6E4F06 sur le sable : 6,32:1. */
.pf-merci{background:var(--sable);color:var(--encre-p)}
.pf-merci-cadre{border:2px solid var(--or,#C9A227);text-align:center}
.pf-merci-cadre{grid-template-columns:1fr;justify-items:center}
.pf-merci-mot{
  color:#6E4F06;
  background:var(--metal);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
@supports not (-webkit-background-clip:text){.pf-merci-mot{-webkit-text-fill-color:#6E4F06;color:#6E4F06}}
.pf-merci .pf-etiquette{color:#6E4F06;text-align:center}
.pf-merci-bloc{text-align:center}
.pf-merci-bloc p{color:#3A2F32}
.pf-merci-bloc a{color:#6E4F06;text-decoration:underline;text-underline-offset:3px}
.pf-merci-bloc a:hover{color:var(--fuchsia)}

/* la grille à deux colonnes, pour la documentation offerte */
.pf-grille-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin:0 auto}
.pf-grille-2 .pf-oeuvre-photo img{aspect-ratio:3/4;object-fit:contain;background:rgba(0,0,0,.04)}
@media (max-width:640px){.pf-grille-2{grid-template-columns:1fr}}

/* ================================================================================
   TROISIÈME SÉRIE (28 septembre 2026)
   ================================================================================ */

/* ---------- les listes restent alignées à gauche ---------- */
/* Le centre convient à un titre et à un paragraphe ; il dessert une liste, où l'œil a besoin
   d'un bord fixe pour descendre d'une ligne à l'autre. La liste des chants, les coordonnées du
   contact et le programme de l'événement reviennent donc à gauche. */
.evt-corps,
.evt-recit,
.evt-final,
.evt-programme,
.evt-etape,
.pf-merci-bloc,
.pf-merci-cadre{text-align:left}
.evt-etape{grid-template-columns:170px 1fr;gap:1rem}
.evt-titres{padding-left:1.4rem;list-style-position:outside}
@media (max-width:620px){.evt-etape{grid-template-columns:1fr;gap:.35rem}}

/* ---------- l'événement : plus d'aplat, un encadré doré ---------- */
/* L'autrice le veut sobre : la page garde sa teinte, et c'est l'or qui l'entoure. Le texte
   redevient sombre puisque le fond est clair. */
.pf-evenement{background:transparent;padding:clamp(2rem,5vw,3.5rem) 0}
.evt{
  background:transparent;
  background-image:none;
  border:2px solid var(--or,#C9A227);
  border-radius:var(--r);
  color:#3A2F32;
  padding:clamp(2rem,5vw,3.5rem) clamp(1.5rem,4vw,3rem);
}
/* l'étiquette retrouve son cadre doré arrondi */
.evt-sur{
  display:inline-block;
  background:var(--metal);background-size:200% auto;
  color:#2A0B13;
  padding:.4rem .95rem;border-radius:100px;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.evt-titre{color:var(--encre-p)}
.evt-titre em{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:#6E4F06;font-style:normal;
}
.evt-recit{color:#3A2F32}
.evt-recit em{color:var(--encre-p)}
.evt-recit strong{color:#6E4F06}
.evt-programme{border-top:1px solid rgba(201,162,39,.45);max-width:none}
.evt-etape,.evt-annonce{border-bottom:1px solid rgba(201,162,39,.45)}
.evt-quand{color:#6E4F06}
.evt-quoi strong{color:var(--encre-p)}
.evt-quoi>span{color:#5A4A4E}
.evt-titres li{color:#3A2F32}
.evt-titres li::marker{color:#6E4F06}
.evt-titres small{color:#6B5A5E}
.evt-cloture{color:#6E4F06}
.evt-final{border-left:3px solid var(--or,#C9A227);border-top:none;padding:0 0 0 1rem;color:var(--encre-p)}
.evt-annonce p{border-left:3px solid var(--or,#C9A227);border-top:none;padding:0 0 0 1rem;color:var(--encre-p)}
.evt-annonce p em{
  background:var(--metal);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.evt-signatures blockquote{border-left:3px solid var(--or,#C9A227);color:var(--encre-p)}

/* ================================================================== */
/* 1er octobre 2026 : une couleur par maison, trois lignes au lieu de  */
/* trois images, un encadré centré, et la pensée rangée dans Mindset.  */
/* ================================================================== */

/* ---------- une couleur par maison ---------- */
/* Le rouge de la séance reste à l'accueil, à la musique et à Mindset : Mindset parle pour les
   trois maisons, il garde donc la couleur de la marque. Le Centre prend le violet de ses propres
   couvertures — #2C1654, celui de « Traduire c'est trahir » et de l'index inversé — pour que le
   bandeau et les livres soient de la même encre. Synapse prend une encre indigo, qui va au
   document administratif et ne se confond avec aucun des deux. Mesuré sur aplat : blanc 15,56:1
   et or clair 11,89:1 sur le violet ; 15,97:1 et 12,21:1 sur l'indigo. Les deux bandeaux d'une
   maison, le panneau de titre et le pied, parlent ensemble. */
/* #0F0722 : le point le plus foncé du dégradé de la couverture, et non sa teinte moyenne.
   Blanc 19,56:1, or clair 14,95:1. */
:root{--violet-centre-profond:#1E0E3B;--indigo-synapse:#14213D}

body.rubrique-centre-aletheia .pf-sous-ouverture,
body.rubrique-centre-aletheia footer{background:var(--violet-centre-profond);background-image:none}
body.rubrique-synapse .pf-sous-ouverture,
body.rubrique-synapse footer{background:var(--indigo-synapse);background-image:none}

/* ---------- les trois maisons : du texte, trois lignes centrées ---------- */
/* Les photos revenaient trois fois sur la même page. Restent le sous-titre, le nom et la
   phrase, séparés par un filet, centrés et d'une largeur de lecture tenue. */
.pf-maisons{list-style:none;margin:clamp(2rem,5vw,3.2rem) 0 0;padding:0}
.pf-maison{border-top:1px solid var(--bord,#E5E0D6)}
.pf-maison:last-child{border-bottom:1px solid var(--bord,#E5E0D6)}
.pf-maison a{
  display:block;text-align:center;text-decoration:none;color:inherit;
  padding:clamp(1.6rem,3.5vw,2.6rem) 1rem;transition:background .2s ease;
}
.pf-maison a:hover{background:var(--fond-doux,#FCFAF5)}
.pf-maison-sur{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--or-txt,#8A6408);
}
.pf-maison h3{
  font-family:var(--titre);font-size:clamp(1.4rem,3vw,2rem);
  margin:.5rem 0 .6rem;color:var(--encre-p,#1A1416);
}
.pf-maison p{max-width:62ch;margin:0 auto;color:var(--txt-2,#5A4F52);line-height:1.65}

/* ---------- l'encadré doré de l'événement, centré sur la page ---------- */
/* Le cadre devient un bloc centré, plus étroit que la colonne : c'est le cadre qui se centre.
   Les écritures gardent leur alignement à gauche, posé le 28 septembre. */
.pf-evenement .evt{width:min(860px,92vw);margin-inline:auto}
.evt-corps,.evt-recit,.evt-final,.evt-programme{margin-inline:auto}
.evt-programme{max-width:64ch}

/* ---------- les pastilles d'or plein ---------- */
/* L'étiquette de l'événement et le badge « Offert » ont donné leur habit à tous les liens qui
   invitent : l'or plein, et non un filet. « Me contacter », les titres de la pensée de la maison
   et le retour vers ce que propose une maison le portent aussi, et se centrent. Le texte sombre
   tient sur le point le plus foncé du dégradé : 4,80:1. */
.pf-lien,
.mindset-liens a,
.mindset-retour .pf-lien{
  display:inline-block;text-decoration:none;border:none;
  background:var(--metal);background-size:200% auto;border-radius:100px;
  padding:.7rem 1.6rem;font-size:.95rem;font-weight:800;letter-spacing:.02em;
  color:#2A0B13;
  box-shadow:0 2px 10px rgba(42,11,19,.18);
  transition:background-position .35s ease,transform .2s ease;
}
.pf-lien:hover,
.mindset-liens a:hover,
.mindset-retour .pf-lien:hover{
  background-position:right center;transform:translateY(-1px);color:#2A0B13;
}
/* Deux anciennes règles posaient un lien blanc sur fond sombre et un lien sombre sur fond clair,
   avec une spécificité plus forte que `.pf-lien` : « Me contacter » sortait donc en blanc sur
   l'or, soit 2,6:1. L'or plein se suffit sur les deux fonds, et le texte y reste sombre. */
.pf-sombre .pf-lien,
.pf-clair .pf-lien{color:#2A0B13}
.pf-sombre .pf-lien:hover,
.pf-clair .pf-lien:hover{
  background:var(--metal);background-size:200% auto;background-position:right center;color:#2A0B13;
}
/* sur un panneau sombre, l'or plein se détache seul : seule l'ombre s'appuie */
.pf-sombre .pf-lien{box-shadow:0 2px 14px rgba(0,0,0,.35)}

.renvois-mindset{margin-top:clamp(2.5rem,6vw,4rem);text-align:center}
.mindset-liens{list-style:none;margin:1.4rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.mindset-retour{margin:1.6rem 0 clamp(2.5rem,6vw,4rem);text-align:center}
/* un appel à l'action se centre, où qu'il soit posé */
.pf-appel{margin-top:2rem;text-align:center}

/* ---------- la vitrine de l'édition intégrale ---------- */
/* Elle n'est plus une carte parmi d'autres : c'est la seule porte vers la documentation du
   Centre. Trois temps — ce qu'on achète, ce qu'on voit, ce qu'on reçoit — et la liste des
   ouvrages vient avant qu'on arrive au papier. */
.vitrine{margin:1.5rem 0 0}
.vitrine-tete{
  display:grid;grid-template-columns:minmax(200px,290px) 1fr;
  gap:clamp(1.5rem,4vw,3rem);align-items:start;
}
@media (max-width:760px){.vitrine-tete{grid-template-columns:1fr}}
.vitrine-couv{margin:0;line-height:0}
.vitrine-couv img{
  display:block;width:100%;height:auto;border-radius:var(--r);
  box-shadow:var(--ombre-forte);
}
.vitrine-titre{
  font-family:var(--titre);font-size:clamp(1.5rem,3.2vw,2.2rem);
  margin:0 0 .5rem;color:var(--encre-p,#1A1416);
}
.vitrine-prix{
  font-family:var(--titre);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;
  color:var(--or-txt,#8A6408);margin:0 0 1.2rem;
}
.vitrine-dire p{line-height:1.7;margin:0 0 1rem}

/* les captures : ce que l'on voit avant d'acheter */
.vitrine-ecrans{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(1rem,2.5vw,1.8rem);margin:clamp(2.2rem,5vw,3.4rem) 0 0;
}
.vitrine-ecran{margin:0}
.vitrine-ecran img{
  display:block;width:100%;height:auto;border-radius:calc(var(--r) / 1.6);
  border:1px solid var(--bord,#E5E0D6);
}
.vitrine-ecran figcaption{
  margin-top:.6rem;font-size:.86rem;line-height:1.5;color:var(--txt-2,#5A4F52);
}

/* les ouvrages contenus : la liste des pochettes */
.vitrine-sous{
  font-family:var(--titre);font-size:clamp(1.25rem,2.6vw,1.7rem);
  text-align:center;margin:clamp(2.6rem,6vw,4rem) 0 .5rem;color:var(--encre-p,#1A1416);
}
.vitrine-note{
  text-align:center;max-width:62ch;margin:0 auto clamp(1.4rem,3vw,2.2rem);
  color:var(--txt-2,#5A4F52);
}
.vitrine-ouvrages{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(1rem,2.4vw,1.8rem);
}
.vitrine-ouvrage a{display:block;text-decoration:none;color:inherit;text-align:center}
.vitrine-ouvrage figure{margin:0 0 .7rem;line-height:0}
.vitrine-ouvrage img{
  display:block;width:100%;height:auto;border-radius:calc(var(--r) / 2);
  box-shadow:var(--ombre);transition:transform .2s ease;
}
.vitrine-ouvrage a:hover img{transform:translateY(-3px)}
.vitrine-ouvrage-t{display:block;font-weight:700;font-size:.95rem;line-height:1.35}
.vitrine-ouvrage-d{
  display:block;margin-top:.25rem;font-size:.82rem;line-height:1.45;
  color:var(--txt-2,#5A4F52);
}

/* ---------- les deux documents offerts, boutons alignés ---------- */
/* Les deux descriptions n'ont pas la même longueur, et les deux boutons ne tombaient pas sur la
   même ligne. Les égaliser à la main tiendrait jusqu'au premier mot ajouté : la carte devient donc
   une colonne, et l'appel à l'action est poussé en bas. Les textes sont par ailleurs rapprochés en
   longueur, pour que le bloc respire pareil des deux côtés. */
.pf-grille-2 .pf-oeuvre{display:flex;flex-direction:column;height:100%}
.pf-grille-2 .pf-oeuvre > p:last-child{margin-top:auto;padding-top:1.4rem}

/* la liste exhaustive de ce que contient l'édition */
.vitrine-liste{
  list-style:none;margin:1.4rem auto 0;padding:0;max-width:72ch;
}
.vitrine-liste li{
  position:relative;padding:.85rem 0 .85rem 1.6rem;line-height:1.7;
  border-bottom:1px solid var(--bord,#E5E0D6);
}
.vitrine-liste li:last-child{border-bottom:none}
.vitrine-liste li::before{
  content:"✦";position:absolute;left:0;top:.85rem;
  color:var(--or-txt,#8A6408);font-size:.8rem;line-height:1.7;
}

/* « En savoir plus », sous chaque pochette de la vitrine */
.vitrine-ouvrage-plus{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;
  font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--or-txt,#8A6408);
}
.vitrine-ouvrage-plus svg{width:14px;height:14px;flex:0 0 auto}
.vitrine-ouvrage a:hover .vitrine-ouvrage-plus{text-decoration:underline}

/* ---------- le duo de la bio : le texte passe sous la photo plus tôt ---------- */
/* À deux colonnes, le portrait et la bio se serrent dès que la page est agrandie : le texte
   descend donc sous la photo bien avant l'ancien seuil de 860 px. */
@media (max-width:1100px){
  .pf-duo{grid-template-columns:1fr}
  .pf-duo .pf-portrait{max-width:420px;margin-inline:auto}
}

/* ---------- les vingt-sept ouvrages, un par un ---------- */
/* Trois catégories, et sous chacune les ouvrages avec leur présentation et leur plan. Le plan se
   déplie : 767 chapitres ouverts d'un coup ne se liraient pas. */
.ouvrages-cat{margin:clamp(2.2rem,5vw,3.4rem) 0 0}
.ouvrages-cat-t{
  font-family:var(--titre);font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:700;
  text-align:center;margin:0 0 1.4rem;color:var(--or-txt,#8A6408);
  letter-spacing:.01em;
}
.ouvrages-lot{
  display:flex;flex-direction:column;gap:clamp(1rem,2.4vw,1.6rem);
}
/* La pochette accompagne sa description : une seule section, et non deux listes des memes
   ouvrages. Sous 620 px la pochette passe au-dessus et se centre. */
.ouvrage{
  margin:0;padding:clamp(1.2rem,2.6vw,1.7rem);
  border:1px solid var(--bord,#E5E0D6);border-radius:var(--r);
  background:var(--carte,#FFF);
  display:grid;grid-template-columns:132px 1fr;gap:clamp(1rem,2.6vw,1.8rem);align-items:start;
}
/* Sur téléphone, la pochette et le titre se centrent, mais la description et le plan restent
   alignés à gauche : un paragraphe centré se parcourt mal, l'œil n'a pas de bord où revenir. */
@media (max-width:620px){
  .ouvrage{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ouvrage-couv{max-width:160px}
  .ouvrage-p,.ouvrage-plan,.ouvrage-plan ol,.ouvrage-detail{text-align:left;width:100%}
  .ouvrage-plan summary{justify-content:flex-start;gap:.5rem}
}
.ouvrage-couv{margin:0;line-height:0}
.ouvrage-couv img{
  display:block;width:100%;height:auto;border-radius:calc(var(--r) / 2.4);
  box-shadow:var(--ombre);
}
.ouvrage-detail{margin:.9rem 0 0}
.ouvrage-detail a{
  display:inline-block;text-decoration:none;font-size:.86rem;font-weight:700;
  color:var(--or-txt,#8A6408);border-bottom:1px solid currentColor;padding-bottom:1px;
}
.ouvrage-detail a::after{content:" →"}
.ouvrage-t{
  font-family:var(--titre);font-size:1.15rem;font-weight:700;margin:0;
  color:var(--encre-p,#1A1416);
}
.ouvrage-st{
  margin:.2rem 0 .8rem;font-style:italic;font-size:.9rem;color:var(--txt-2,#5A4F52);
}
.ouvrage-p{margin:0;font-size:.95rem;line-height:1.68}
.ouvrage-plan{margin-top:1rem;border-top:1px solid var(--bord,#E5E0D6);padding-top:.8rem}
.ouvrage-plan summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;
  justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  font-size:.86rem;font-weight:700;color:var(--or-txt,#8A6408);
}
.ouvrage-plan summary::-webkit-details-marker{display:none}
.ouvrage-plan summary span::before{content:"▸ ";transition:none}
.ouvrage-plan[open] summary span::before{content:"▾ "}
.ouvrage-plan summary small{font-weight:600;color:var(--txt-2,#5A4F52)}
.ouvrage-plan summary:hover span{text-decoration:underline}
.ouvrage-plan ol{
  margin:.9rem 0 0;padding-left:1.3rem;font-size:.88rem;line-height:1.6;
  color:var(--txt-2,#5A4F52);max-height:22rem;overflow-y:auto;
}
.ouvrage-plan li{margin-bottom:.35rem}

/* ---------- les couvertures ne se coincent plus à gauche ---------- */
/* Une grille remplit depuis la gauche : une dernière ligne de deux cartes restait collée au bord.
   Les grilles de couvertures deviennent des rangées centrées, à largeur de carte constante. */
.vitrine-ouvrages,
.prod-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1rem,2.4vw,1.8rem);
}
.vitrine-ouvrages > *{flex:0 1 clamp(140px,16vw,190px)}
.prod-grid > *{flex:0 1 clamp(230px,24vw,290px)}

/* ce qui tient un coffret ensemble, sous sa liste de livrets */
.coffret-quoi{display:block;margin-top:.15rem;font-size:.9em;color:var(--txt-2,#5A4F52)}

/* Les en-têtes de colonne du pied passent au rang 2 pour que la page n'ait plus de saut de
   niveau ; leur apparence ne change pas, elle tient à la classe et non à la balise. */
footer .footer-col-t{font-size:.95rem;font-weight:700;margin:0 0 .8rem}

/* Les trois raccourcis vers les familles d'ouvrages : la page est longue, on doit pouvoir y
   entrer par la famille qu'on cherche. */
.ouvrages-raccourcis{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
  margin:1.4rem 0 clamp(1.5rem,3vw,2.4rem);
}
.ouvrages-raccourcis a{
  display:inline-block;text-decoration:none;font-size:.86rem;font-weight:700;
  color:var(--or-txt,#8A6408);border:1px solid var(--bord-fort,#D2CBBB);
  border-radius:100px;padding:.45rem 1.05rem;transition:border-color .2s ease;
}
.ouvrages-raccourcis a:hover{border-color:var(--or,#C9A227)}
.vitrine-fin{margin-top:clamp(2.4rem,5vw,3.5rem)}

/* ---------- les liens écrits dans une phrase, sur un panneau ---------- */
/* Un lien posé au milieu d'une phrase n'héritait d'aucune couleur de panneau : il gardait le rouge
   des liens du site, soit du rouge sombre sur le bordeaux, 1,13:1, relevé par l'autrice. Les
   boutons `.pf-lien` étaient habillés, les liens de prose ne l'étaient pas. Ils suivent désormais
   leur panneau : l'or vif sur le sombre, le brun d'or sur le clair, soulignés dans les deux cas
   pour rester repérables sans la couleur seule. */
.pf-sombre .pf-accroche a:not(.pf-lien),
.pf-sombre .pf-ligne-texte a:not(.pf-lien),
.pf-sombre .pf-oeuvre p a:not(.pf-lien),
.pf-sombre .pf-maison p a:not(.pf-lien){
  color:var(--or-vif,#E7C25A);text-decoration:underline;text-underline-offset:2px;
}
.pf-sombre .pf-accroche a:not(.pf-lien):hover,
.pf-sombre .pf-ligne-texte a:not(.pf-lien):hover{color:#F6E09B}
.pf-clair .pf-accroche a:not(.pf-lien),
.pf-clair .pf-ligne-texte a:not(.pf-lien),
.pf-clair .pf-oeuvre p a:not(.pf-lien){
  color:var(--or-txt,#8A6408);text-decoration:underline;text-underline-offset:2px;
}

/* ---------- l'extrait : un feuillet pris dans le document ---------- */
/* Posé le 1er octobre pour les deux documents offerts. Le feuillet doit se lire comme une page,
   pas comme un argument de vente : fond crème plein (aucune surface transparente), mesure de
   lecture courte, serif de la maison, et la provenance écrite sous le texte. Mesures prises dans
   le navigateur : le texte du feuillet tient 13,0:1, la leçon 13,8:1, la provenance 8,0:1. */
.extrait-t{margin-top:clamp(2rem,4vw,2.8rem)}
.extrait-lire{margin-top:1rem}
.extrait-avant{margin:0 0 1.2rem;color:var(--txt-2,#5A3D44);font-size:.98rem;line-height:1.7}
.extrait-feuillet{
  background:var(--or-fond,#FDF8EA);border:1px solid var(--or-pale,#EFE0B4);
  border-left:4px solid var(--or,#C9A227);border-radius:var(--r-sm,9px);
  padding:clamp(1.3rem,3vw,2.2rem) clamp(1.2rem,3vw,2.4rem);
  font-family:var(--serif,Georgia,serif);
  font-size:1.12rem;line-height:1.72;color:#3A2A13;
}
.extrait-feuillet > *:first-child{margin-top:0}
.extrait-feuillet > *:last-child{margin-bottom:0}
.extrait-feuillet p{margin:0 0 1rem;max-width:66ch}
.extrait-feuillet h3,.extrait-feuillet h4,.extrait-feuillet h5{
  font-family:var(--titre,Georgia,serif);font-size:1rem;letter-spacing:.04em;
  color:var(--or-txt,#8A6408);margin:1.7rem 0 .7rem;
}
.extrait-feuillet em{font-style:italic}
/* L'hébreu et le grec gardent leur écriture, droite et un peu plus grande. Le site n'embarque que
   Cinzel, Cormorant Garamond et Nunito Sans, dont aucune ne porte l'hébreu : on nomme donc les
   serifs que les appareils possèdent déjà, et jamais une police que nous ne servons pas. */
.extrait-feuillet [lang="he"]{
  font-style:normal;font-size:1.2em;line-height:1.5;
  font-family:'Times New Roman','Noto Serif Hebrew','David Libre',serif;
}
.extrait-feuillet [lang="grc"]{
  font-style:normal;font-family:'Times New Roman','Noto Serif',Georgia,serif;
}
/* la leçon : la seule chose du feuillet qui s'affiche comme un encadré, parce qu'elle l'est dans
   le livret aussi */
.extrait-lecon{
  margin:1.6rem 0 0;background:#FFFFFF;border:1px solid var(--or-pale,#EFE0B4);
  border-radius:var(--r-sm,9px);padding:1.1rem 1.3rem;
}
.extrait-lecon-t{
  display:block;font-family:var(--ui,sans-serif);font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or-txt,#8A6408);margin-bottom:.5rem;
}
.extrait-lecon p{margin:0;font-size:1.05rem;line-height:1.68}
/* La provenance est le seul endroit où le lecteur vérifie ce qu'il lit : elle ne se met pas en
   gris pâle. Le gris clair mesurait 3,85:1 sur le panneau, sous le seuil ; celui-ci tient 8,0:1. */
.extrait-source{
  margin:.9rem 0 0;font-family:var(--ui,sans-serif);font-size:.84rem;color:var(--txt-2,#5A3D44);
}
.extrait-apres{margin:1rem 0 0;color:var(--txt-2,#5A3D44);font-size:.98rem;line-height:1.7}
/* sur la page de la documentation offerte, les deux feuillets se suivent, chacun sous son titre */
.extrait-bloc{max-width:72ch;margin:0 auto clamp(3rem,7vw,5rem);text-align:left}
.extrait-bloc:last-child{margin-bottom:0}
.extrait-bloc .pf-oeuvre-sur,.extrait-bloc .pf-oeuvre-t{text-align:left}
.extrait-bloc > p:last-child{text-align:center}