/* =========================================================================
Les Amis du Château d'Albières — A3
Feuille de styles partagée par les 4 pages du site.
Sommaire :
1. Tokens & base 6. Cartes, grilles, médias
2. En-tête & navigation 7. Missions & activités
3. Hero & bannières 8. Programme (événements)
4. Séparateur papier 9. Adhésion & contact
5. Titres de section 10. Pied de page, animations, responsive
========================================================================= */
/* ---------- 1. Tokens & base -------------------------------------------- */
:root{
--green:#08261d;
--green2:#10392c;
--green3:#0b2c22;
--gold:#c7a321;
--cream:#f6efd8;
--paper:#eadbb8;
--paper2:#f7edd3;
--red:#a92b20;
--red2:#7e2018;
--ink:#21180f;
--muted:#6d5435;
--line:rgba(87,59,27,.28);
--title-font:'Almendra',serif;
--label-font:'Cinzel',serif;
--header-h:92px;
--alert-h:0px; /* hauteur du bandeau d'annonce, mesurée en JS si présent */
--tear-reach:72px; /* hauteur réellement couverte par le papier déchiré */
--wrap:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--green);
color:var(--ink);
font-family:Inter,system-ui,sans-serif;
font-size:17px;
line-height:1.6;
}
/* Pas de `overflow-x:hidden` sur body : cela en ferait un conteneur de
défilement et casserait `scroll-margin-top` sur les ancres, qui portent
4 des 7 entrées de navigation. Les débordements sont traités à la source
(bord déchiré et panneau de menu ci-dessous). */
/* `height:auto` est indispensable : les ![]()
portent des attributs width/height
pour réserver la place (anti-CLS), et sans cette règle la hauteur de
l'attribut s'applique telle quelle — l'image est étirée dès que sa largeur
est contrainte. Les images à hauteur imposée (.photo-stack, .wide-img)
redéfinissent la hauteur via leur classe, plus spécifique. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
/* Les ancres ne doivent pas atterrir sous l'en-tête fixe — ni sous le bandeau
d'annonce quand il est présent. */
[id]{scroll-margin-top:calc(var(--header-h) + var(--alert-h) + 18px)}
/* ---------- Bandeau d'annonce (accueil) --------------------------------- */
.alert-bar{
position:fixed;inset:0 0 auto 0;z-index:200;
background:linear-gradient(180deg,var(--red),var(--red2));
border-bottom:1px solid rgba(199,163,42,.55);
color:#fff6e6;
}
.alert-bar[hidden]{display:none}
.alert-inner{
max-width:var(--wrap);margin:0 auto;padding:10px 5vw;
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.alert-tag{
font-family:var(--label-font);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:#f7dfa0;border:1px solid rgba(247,223,160,.5);padding:4px 9px;flex:none;
}
.alert-text{margin:0;font-size:15px;line-height:1.4;flex:1 1 260px;min-width:0}
.alert-text b{font-weight:700}
.alert-text .when{color:#ffe9b0}
.alert-cta{
font-family:var(--label-font);font-weight:700;font-size:12px;letter-spacing:.04em;
padding:8px 15px;border:1px solid rgba(255,246,230,.7);border-radius:3px;flex:none;
transition:background-color .2s ease;
}
.alert-cta:hover{background:rgba(255,246,230,.16)}
.alert-close{
flex:none;width:30px;height:30px;padding:0;line-height:1;
background:none;border:0;color:#f7dfa0;font-size:22px;cursor:pointer;border-radius:3px;
}
.alert-close:hover{background:rgba(255,246,230,.16);color:#fff}
/* L'en-tête fixe se place sous le bandeau, et tout ce qui calait sur
--header-h doit tenir compte des deux hauteurs. */
.site-header{top:var(--alert-h)}
@media(max-width:640px){
.alert-inner{gap:10px;padding:9px 5vw}
.alert-tag{display:none}
.alert-text{font-size:14px;flex-basis:100%;order:1}
.alert-cta{order:2;font-size:11px;padding:7px 12px}
.alert-close{order:3;margin-left:auto}
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 5vw}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Texture parchemin */
.paper-bg{
background-color:var(--paper2);
background-image:
radial-gradient(circle at 18% 12%, rgba(140,95,38,.18), transparent 18%),
radial-gradient(circle at 82% 28%, rgba(120,80,35,.12), transparent 20%),
radial-gradient(circle at 42% 72%, rgba(120,82,32,.10), transparent 18%),
linear-gradient(90deg, rgba(255,255,255,.30), rgba(120,80,30,.06)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}
/* Boutons */
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:14px 22px;border-radius:3px;
font-family:var(--label-font);font-weight:700;font-size:14px;letter-spacing:.03em;
transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.btn.primary{background:linear-gradient(180deg,var(--red),var(--red2));color:#fff;border:1px solid var(--gold);box-shadow:0 0 0 2px rgba(199,163,42,.15) inset}
.btn.secondary{background:rgba(246,239,216,.10);color:var(--cream);border:1px solid rgba(246,239,216,.5)}
.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(8,38,29,.06)}
.btn:hover{transform:translateY(-2px)}
.btn.sm{padding:10px 16px;font-size:13px}
/* ---------- 2. En-tête & navigation ------------------------------------- */
.site-header{
position:fixed;left:0;right:0;z-index:100;
background:linear-gradient(180deg,rgba(5,22,17,.96),rgba(5,22,17,.72) 62%,transparent);
transition:background-color .3s ease,box-shadow .3s ease;
}
.site-header.is-solid,
body:not(.home) .site-header{
background:linear-gradient(180deg,#06201a,#08261d);
box-shadow:0 1px 0 rgba(199,163,42,.42),0 10px 26px rgba(0,0,0,.28);
}
.header-inner{
max-width:var(--wrap);margin:0 auto;padding:0 5vw;
min-height:var(--header-h);
display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:center;gap:14px;margin-right:auto;color:#fff}
.brand-logo{width:58px;height:58px;object-fit:contain;flex:none}
.brand-title{display:block;font-family:var(--title-font);font-size:20px;line-height:1;text-transform:uppercase}
.brand-sub{display:block;font-family:var(--label-font);color:var(--gold);letter-spacing:.16em;font-size:11px;margin-top:5px}
.nav-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-item{position:relative;display:flex;align-items:center}
.nav-link{
display:block;padding:10px 12px;color:#f3ead2;
font-family:var(--label-font);font-size:13px;letter-spacing:.04em;
border-bottom:2px solid transparent;
}
.nav-link:hover{color:var(--gold)}
.nav-item[aria-current] > .nav-link,
.nav-link[aria-current="page"]{color:var(--gold);border-bottom-color:var(--red)}
.nav-caret{
display:grid;place-items:center;width:26px;height:30px;margin-left:-8px;
background:none;border:0;color:#f3ead2;cursor:pointer;
}
.nav-caret svg{width:11px;height:11px;transition:transform .22s ease}
.nav-caret[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-caret:hover{color:var(--gold)}
.dropdown{
position:absolute;top:100%;left:0;min-width:236px;
list-style:none;margin:0;padding:8px;
background:#08261d;border:1px solid rgba(199,163,42,.5);
box-shadow:0 18px 34px rgba(0,0,0,.42);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown,
.nav-caret[aria-expanded="true"] + .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
display:block;padding:10px 14px;color:#e9dcbd;
font-family:var(--label-font);font-size:13px;
border-left:2px solid transparent;
}
.dropdown a:hover{background:rgba(199,163,42,.12);color:#fff;border-left-color:var(--red)}
.burger{
display:none;width:44px;height:44px;padding:0;
background:none;border:1px solid rgba(246,239,216,.4);border-radius:3px;
cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;margin:4px auto;background:var(--cream);transition:transform .25s ease,opacity .25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* ---------- 3. Hero & bannières ----------------------------------------- */
.hero{
position:relative;isolation:isolate; /* B11 : le décor ne peut plus recouvrir le contenu */
color:var(--cream);
padding:calc(var(--header-h) + var(--alert-h) + 8vh) 0 150px; /* 150px > --tear-reach */
background:var(--green);
min-height:88vh;display:flex;align-items:center;
}
/* La photo est un ![]()
et non un background : le chemin se résout depuis la
page (et non depuis cette feuille), et on peut servir une version 900px aux
petits écrans via srcset. */
.hero-photo,.banner-photo{
position:absolute;inset:0;z-index:-2;
width:100%;height:100%;object-fit:cover;
}
.hero-photo{object-position:center 58%}
.banner-photo{object-position:center 55%}
.hero:before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(92deg,rgba(3,15,12,.97) 0%,rgba(6,28,21,.80) 46%,rgba(5,24,18,.34) 100%);
}
.hero:after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(circle at 78% 22%,transparent 0 24%,rgba(0,0,0,.46) 80%);
}
.hero-inner{
max-width:var(--wrap);margin:0 auto;padding:0 5vw;width:100%;
display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
gap:52px;align-items:center;
}
.kicker{font-family:var(--label-font);color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-weight:700;font-size:13px;margin:0}
.hero h1{
font-family:var(--title-font);
font-size:clamp(46px,6.6vw,92px);line-height:.94;
margin:16px 0 20px;text-transform:uppercase;
text-shadow:0 4px 0 rgba(0,0,0,.30);
}
.hero h1 span{color:var(--gold)}
.hero-lead{max-width:56ch;font-size:18px;line-height:1.7;color:#fff8e8}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.mini-sep{display:flex;align-items:center;gap:18px;color:var(--red);margin:20px 0}
.mini-sep:before,.mini-sep:after{content:"";width:76px;height:1px;background:var(--gold);flex:none}
.orn-ico{width:18px;height:18px;fill:currentColor;flex:none}
/* Encart latéral du hero — en flux, donc visible aussi sur mobile (B4) */
.notice{
background:rgba(8,38,29,.90);border:1px solid var(--gold);
padding:26px;text-align:center;
box-shadow:0 0 0 2px rgba(199,163,42,.14) inset;
}
.notice h3{font-family:var(--label-font);color:#fff;margin:0 0 12px;font-size:20px}
.notice p{font-family:var(--label-font);color:var(--paper2);line-height:1.65;margin:0;font-size:14px}
.notice:before{content:"✦";color:var(--red);display:block;margin-bottom:8px}
/* Bannière courte des pages internes */
.banner{
position:relative;isolation:isolate;color:var(--cream);
padding:calc(var(--header-h) + var(--alert-h) + 7vh) 0 140px;
background:var(--green);
}
.banner:before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(92deg,rgba(3,15,12,.95),rgba(6,28,21,.72));
}
.banner-inner{max-width:var(--wrap);margin:0 auto;padding:0 5vw}
.banner h1{font-family:var(--title-font);font-size:clamp(40px,5.6vw,76px);line-height:.98;margin:14px 0 0;text-transform:uppercase;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.banner p{max-width:60ch;color:#f2e7cb;margin:16px 0 0}
/* ---------- 4. Séparateur papier déchiré -------------------------------- */
.tear{height:110px;margin-top:-108px;position:relative;z-index:1;pointer-events:none}
.tear:before{
/* left/right à 0 : tout débord latéral créerait un défilement horizontal
sur toute la page. Les extrémités du clip-path sont à mi-hauteur du
déchirement, le bord reste donc propre sans marge de sécurité. */
content:"";position:absolute;left:0;right:0;bottom:-1px;height:130px;
background-color:var(--paper2);
background-image:
radial-gradient(circle at 18% 12%, rgba(140,95,38,.18), transparent 18%),
radial-gradient(circle at 82% 28%, rgba(120,80,35,.12), transparent 20%),
radial-gradient(circle at 42% 72%, rgba(120,82,32,.10), transparent 18%),
linear-gradient(90deg, rgba(255,255,255,.30), rgba(120,80,30,.06)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
clip-path:polygon(0 44%,3% 51%,7% 46%,11% 56%,16% 48%,21% 55%,27% 43%,33% 53%,39% 47%,45% 59%,52% 45%,59% 54%,65% 49%,71% 58%,78% 44%,84% 52%,90% 47%,96% 56%,100% 49%,100% 100%,0 100%);
filter:drop-shadow(0 -12px 10px rgba(0,0,0,.34));
}
main{margin-top:-1px;position:relative}
/* ---------- 5. Titres de section ---------------------------------------- */
section{padding:76px 0;position:relative}
.section-inner{max-width:var(--wrap);margin:0 auto;padding:0 5vw}
.decor-title{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.decor-title:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--gold),transparent)}
.section-title{
font-family:var(--title-font);
font-size:clamp(34px,4.3vw,62px);line-height:1;
color:var(--green);text-transform:uppercase;margin:0;
text-shadow:0 2px 0 rgba(255,255,255,.35);
}
.sec-num{color:var(--red);font-size:.44em;vertical-align:middle;margin-right:10px;font-family:var(--label-font)}
.intro{max-width:78ch;font-size:18px;line-height:1.75}
.lead-strong{font-size:20px;line-height:1.7;color:var(--green);font-weight:500}
/* Sections sombres */
.dark{
background:var(--green);color:var(--cream);
background-image:radial-gradient(circle at 20% 10%,rgba(199,163,42,.08),transparent 30%),linear-gradient(135deg,#061b15,var(--green2));
}
.dark .section-title{color:var(--cream);text-shadow:0 2px 6px rgba(0,0,0,.4)}
.dark .intro,.dark p{color:#eadfc5}
.dark .lead-strong{color:var(--paper2)}
/* ---------- 6. Cartes, grilles, médias ---------------------------------- */
.grid{display:grid;gap:26px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.card{
background:rgba(255,247,225,.66);border:1px solid var(--line);
padding:28px;position:relative;color:var(--ink);
box-shadow:0 12px 26px rgba(31,23,10,.06);
transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.14)}
.card h3{font-family:var(--label-font);font-size:23px;margin:0 0 12px;color:var(--green)}
.card p{margin:0 0 16px;line-height:1.62}
.dark .card{background:rgba(246,239,216,.95);color:var(--ink)}
.dark .card h3{color:var(--green)}
.dark .card p{color:var(--ink)}
.photo-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.photo-stack img,.wide-img{
width:100%;height:320px;object-fit:cover;
border:8px solid #efe2c2;box-shadow:0 18px 34px rgba(0,0,0,.18);
filter:saturate(.88) contrast(1.06) sepia(.12);
}
.photo-stack img:nth-child(1){grid-column:1/3;height:400px}
figure{margin:0}
figcaption{font-family:var(--label-font);font-size:12px;letter-spacing:.05em;color:var(--muted);margin-top:10px}
.dark figcaption{color:var(--paper)}
.placeholder-note{
display:inline-block;margin-top:16px;padding:10px 16px;
border:1px dashed rgba(246,239,216,.5);color:var(--paper2);
font-family:var(--label-font);font-size:12px;letter-spacing:.05em;
}
.placeholder-note.on-paper{border-color:var(--line);color:var(--muted)}
/* ---------- 7. Missions & activités ------------------------------------- */
.feature{
display:grid;grid-template-columns:96px 1fr;gap:30px;align-items:start;
padding:38px 0;border-top:1px solid var(--line);
}
/* Emplacement d'illustration optionnel. Sans `has-media`, le bloc reste sur
deux colonnes comme avant : une section sans photo ne laisse aucun vide. */
.feature.has-media{grid-template-columns:96px minmax(0,1fr) minmax(0,320px)}
.feature-media{margin:0}
.feature-media img{
width:100%;height:250px;object-fit:cover;
border:7px solid #efe2c2;box-shadow:0 14px 28px rgba(0,0,0,.2);
filter:saturate(.88) contrast(1.06) sepia(.12);
}
.feature-media figcaption{
font-family:var(--label-font);font-size:11.5px;letter-spacing:.04em;
color:var(--muted);margin-top:9px;line-height:1.4;
}
.dark .feature-media figcaption{color:var(--paper)}
/* Galerie : de 1 à N images dans une section. Se replie toute seule quand
elle est vide, ce qui permet de laisser l'emplacement ouvert partout sans
afficher de trou en attendant les photos. */
.gallery{
display:grid;gap:14px;margin-top:20px;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.gallery:empty{display:none}
.gallery figure{margin:0}
/* Le RATIO D'ORIGINE est respecté : `height:auto`, pas de hauteur fixe, pas
d'`object-fit:cover`. La version précédente imposait 185px de haut et
recadrait — une photo en portrait n'en montrait qu'une bande horizontale, ce
qui est exactement ce que le président a refusé le 11/08/2026.
Le prix assumé : dans la grille, les images d'un même rang n'ont plus la même
hauteur. C'est le corollaire du ratio respecté, pas un défaut.
Pas de décalage de mise en page au chargement pour autant : le rendu émet
`width` et `height` sur chaque `![]()
` depuis la médiathèque (le schéma les
exige, `media_image_dimensions`), donc le navigateur réserve la bonne place
avant même d'avoir téléchargé le fichier. */
.gallery img{
width:100%;height:auto;
border:6px solid #efe2c2;box-shadow:0 10px 22px rgba(0,0,0,.18);
filter:saturate(.88) contrast(1.06) sepia(.12);
}
.gallery figcaption{
font-family:var(--label-font);font-size:11px;letter-spacing:.04em;
color:var(--muted);margin-top:7px;line-height:1.4;
}
.dark .gallery figcaption{color:var(--paper)}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}
/* Carrousel (« La Couette de Juelo ») : un ruban qui défile horizontalement,
une photo par vue. Le défilement est NATIF (overflow-x) et le ruban est
atteignable au clavier (tabindex="0" posé par le rendu) : sans JavaScript,
les photos restent toutes consultables — les flèches, elles, restent cachées
parce qu'elles ne sauraient pas où l'on en est. Les pastilles numérotées sont
de vrais liens d'ancre, donc opérantes elles aussi sans script.
Les règles ne sont PAS mutualisées avec .gallery : celle-ci est une grille
servie sur les quatre autres emplacements, et la retoucher pour un cinquième
ferait porter le risque là où rien n'a été demandé. */
.carrousel{margin-top:20px}
.carrousel-vues{
display:flex;gap:14px;margin:0;padding:0 0 6px;list-style:none;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
}
.carrousel-vues:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.carrousel-vue{flex:0 0 100%;scroll-snap-align:center;margin:0}
.carrousel-vue figure{margin:0}
/* Ratio d'origine respecté ici aussi, et c'est le cas qui comptait : les photos
des chambres sont en PORTRAIT, et l'ancienne règle (360px de haut,
`object-fit:cover`) n'en montrait qu'une bande.
`width:auto` plutôt que `100%` : une photo en portrait ne doit pas être
étirée à la largeur de la vue, sinon sa hauteur exploserait. Elle est donc
bornée par `max-height` et centrée par `margin:0 auto` — jamais recadrée,
jamais déformée, jamais de bandes vides (pas d'`object-fit:contain`, qui en
ajouterait). Une photo en paysage, elle, occupe toute la largeur.
`max-height:70vh` : sans borne, un portrait 3:4 affiché pleine largeur
dépasserait la hauteur de l'écran et le carrousel deviendrait impraticable. */
.carrousel-vue img{
display:block;max-width:100%;width:auto;height:auto;max-height:70vh;margin:0 auto;
border:6px solid #efe2c2;box-shadow:0 10px 22px rgba(0,0,0,.18);
filter:saturate(.88) contrast(1.06) sepia(.12);
}
.carrousel-vue figcaption{
font-family:var(--label-font);font-size:11px;letter-spacing:.04em;
color:var(--muted);margin-top:7px;line-height:1.4;
}
.dark .carrousel-vue figcaption{color:var(--paper)}
.carrousel-commandes{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
}
.carrousel-pastilles{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.carrousel-pastille,.carrousel-fleche{
display:inline-flex;align-items:center;justify-content:center;
min-width:34px;min-height:34px;padding:0 6px;
font-family:var(--label-font);font-size:13px;line-height:1;
color:var(--ink);text-decoration:none;
background:transparent;border:1px solid rgba(0,0,0,.25);border-radius:999px;
cursor:pointer;
}
.dark .carrousel-pastille,.dark .carrousel-fleche{
color:var(--paper);border-color:rgba(239,226,194,.45);
}
.carrousel-pastille[aria-current="true"]{
background:var(--gold);border-color:var(--gold);color:var(--ink);
font-weight:700;
}
.carrousel-pastille:focus-visible,.carrousel-fleche:focus-visible{
outline:3px solid var(--gold);outline-offset:3px;
}
.carrousel-rang{
font-family:var(--label-font);font-size:11px;letter-spacing:.04em;
color:var(--muted);
}
.dark .carrousel-rang{color:var(--paper)}
/* Sur téléphone, aucune hauteur imposée non plus : le ratio prime, et
`max-height:70vh` borne déjà les portraits. */
@media(max-width:520px){.carrousel-vue img{max-height:60vh}}
/* Défilement instantané pour qui a demandé moins d'animations. */
@media(prefers-reduced-motion:reduce){.carrousel-vues{scroll-behavior:auto}}
.feature:first-of-type{border-top:0}
.feature-ico{width:76px;height:76px;opacity:.9}
.feature h3{font-family:var(--title-font);font-size:32px;margin:0 0 6px;color:var(--green);line-height:1.1}
.feature .tagline{font-family:var(--label-font);color:var(--red);font-size:13px;letter-spacing:.06em;margin:0 0 14px;text-transform:uppercase}
.feature p{margin:0 0 14px;max-width:76ch}
.dark .feature{border-top-color:rgba(199,163,42,.28)}
.dark .feature h3{color:var(--paper2)}
.dark .feature .tagline{color:var(--gold)}
.feature-panel{
background:var(--green3);color:var(--cream);
border:1px solid rgba(199,163,42,.58);padding:34px;
box-shadow:0 0 0 2px rgba(199,163,42,.08) inset;
}
.feature-panel h3{font-family:var(--title-font);font-size:32px;margin:0 0 16px;color:var(--paper2)}
.feature-panel p{color:#fff;line-height:1.68;margin:0}
/* Chronologie */
/* La colonne des dates doit contenir le plus long libellé (« Aujourd'hui »),
sinon le texte déborde sous le losange et le trait de la frise. */
.chrono{list-style:none;margin:32px 0 0;padding:0;position:relative;--chrono-col:150px}
.chrono:before{content:"";position:absolute;left:calc(var(--chrono-col) + 20px);top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,transparent,var(--gold),transparent)}
.chrono li{display:grid;grid-template-columns:var(--chrono-col) 1fr;gap:56px;padding:16px 0;position:relative}
.chrono .year{
font-family:var(--title-font);font-size:23px;color:var(--red);
text-align:right;line-height:1.15;padding-top:3px;
white-space:nowrap;overflow-wrap:normal;
}
.chrono li:after{content:"";position:absolute;left:calc(var(--chrono-col) + 16px);top:26px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
.chrono p{margin:0;max-width:74ch}
/* Horaires */
.hours{
display:grid;grid-template-columns:auto 1fr;gap:8px 22px;
margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);
}
.hours dt{
font-family:var(--label-font);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
color:var(--red);padding-top:2px;
}
.hours dd{margin:0}
.dark .hours{border-top-color:rgba(199,163,42,.28)}
.dark .hours dt{color:var(--gold)}
/* Fiches ouvrages */
.book{display:grid;grid-template-columns:180px 1fr;gap:26px;align-items:start}
.book img{border:6px solid #efe2c2;box-shadow:0 14px 28px rgba(0,0,0,.22)}
/* Visuel cliquable ouvrant le document en pleine taille dans un nouvel onglet.
Le cadre passe sur le lien pour que la pastille « Agrandir » se pose à
l'intérieur de l'image, et non par-dessus la bordure. */
.doc-link{
display:block;position:relative;overflow:hidden;
border:6px solid #efe2c2;box-shadow:0 14px 28px rgba(0,0,0,.22);
transition:transform .25s ease,box-shadow .25s ease;
}
.doc-link img{border:0;box-shadow:none;width:100%;transition:transform .45s ease}
.doc-link:hover{transform:translateY(-3px);box-shadow:0 20px 36px rgba(0,0,0,.3)}
.doc-link:hover img{transform:scale(1.04)}
.doc-link .zoom{
position:absolute;inset:auto 0 0 0;padding:22px 10px 9px;
display:flex;align-items:center;justify-content:center;gap:7px;
background:linear-gradient(transparent,rgba(4,20,15,.9));
color:var(--cream);font-family:var(--label-font);font-size:11px;
letter-spacing:.09em;text-transform:uppercase;
opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;
}
.doc-link:hover .zoom,.doc-link:focus-visible .zoom{opacity:1;transform:none}
.doc-link .zoom svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
/* Sans survol (tactile), la pastille reste visible. */
@media (hover:none){.doc-link .zoom{opacity:1;transform:none}}
.book h3{font-family:var(--label-font);font-size:22px;color:var(--green);margin:0 0 8px}
.dark .book h3{color:var(--paper2)}
/* ---------- 8. Programme (événements) ----------------------------------- */
.prog-head{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.month-block{margin-top:40px}
.month-block > h3{
font-family:var(--title-font);font-size:34px;color:var(--green);
margin:0 0 6px;text-transform:capitalize;
}
.dark .month-block > h3{color:var(--paper2)}
.month-rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin-bottom:10px}
.event{
display:grid;grid-template-columns:88px 1fr auto;gap:22px;align-items:start;
padding:20px 0;border-top:1px solid var(--line);
}
.dark .event{border-top-color:rgba(199,163,42,.24)}
.event-date{
background:var(--green);color:#fff;text-align:center;padding:10px 6px;
font-family:var(--label-font);line-height:1.15;
}
.event-date strong{display:block;font-size:30px}
.event-date span{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.event-cat{
font-family:var(--label-font);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--red);margin:0 0 4px;
}
.dark .event-cat{color:var(--gold)}
.event h4{font-family:var(--label-font);font-size:19px;margin:0 0 6px;color:var(--ink)}
.dark .event h4{color:#fff}
.event-meta{font-size:14px;color:var(--muted);margin:0 0 6px}
.dark .event-meta{color:var(--paper)}
.event-desc{margin:0;font-size:15px;max-width:70ch}
.event-links{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.event.is-past{opacity:.42}
.event.is-past .event-date{background:var(--muted)}
/* Séances passées masquées par défaut ; le bouton bascule la classe. */
.prog.hide-past .event.is-past,
.prog.hide-past .month-block.all-past{display:none}
/* Indépendant du fond de la section : variante claire par défaut, variante
sombre sous .dark. Le composant ne doit pas dicter l'alternance des fonds. */
.prog-toggle{
display:inline-flex;align-items:center;gap:10px;margin-top:26px;
padding:11px 18px;border:1px solid var(--line);border-radius:3px;
background:transparent;color:var(--green);cursor:pointer;
font-family:var(--label-font);font-weight:700;font-size:13px;letter-spacing:.03em;
}
.prog-toggle:hover{background:rgba(8,38,29,.06)}
.dark .prog-toggle{border-color:rgba(246,239,216,.45);background:rgba(246,239,216,.06);color:var(--cream)}
.dark .prog-toggle:hover{background:rgba(246,239,216,.13)}
.prog-toggle .chev{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .22s ease}
.prog-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.prog-empty{color:var(--muted);font-style:italic;margin-top:22px}
.dark .prog-empty{color:var(--paper)}
.detail{
display:inline-flex;font-family:var(--label-font);font-weight:700;font-size:12px;
border:1px solid var(--line);padding:7px 13px;border-radius:3px;white-space:nowrap;
}
.dark .detail{border-color:rgba(246,239,216,.4);color:var(--cream)}
.detail:hover{background:rgba(8,38,29,.07)}
.dark .detail:hover{background:rgba(246,239,216,.1)}
.next-dates{display:grid;gap:14px;margin-top:26px}
.next-dates .event{border-top:0;padding:0;grid-template-columns:78px 1fr}
/* ---------- 9. Adhésion & contact --------------------------------------- */
.join-box{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
.qr-card{
background:var(--paper2);border:1px solid var(--gold);padding:24px;text-align:center;
}
.qr-card img{width:170px;margin:0 auto 12px;image-rendering:pixelated}
.qr-card p{font-family:var(--label-font);font-size:12px;letter-spacing:.05em;color:var(--muted);margin:0}
.tarifs{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.tarifs li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dotted var(--line);padding-bottom:7px;font-size:15px}
.dark .tarifs li{border-bottom-color:rgba(246,239,216,.28)}
.tarifs b{font-family:var(--label-font);color:var(--gold)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.contact-card{background:rgba(255,247,225,.72);border:1px solid var(--line);padding:32px;color:var(--ink)}
.contact-card h3{font-family:var(--label-font);color:var(--green);margin:0 0 14px;font-size:21px}
.contact-card p{margin:0 0 12px}
.dark .contact-card{background:rgba(246,239,216,.94)}
.quote{
background:var(--green);color:var(--cream);padding:82px 0;
background-image:radial-gradient(circle at 50% 0,rgba(199,163,42,.12),transparent 46%),linear-gradient(160deg,#061b15,var(--green2));
text-align:center;
}
.quote blockquote{
max-width:56ch;margin:0 auto;padding:0;
font-family:var(--title-font);font-size:clamp(21px,2.5vw,30px);line-height:1.5;color:var(--paper2);
}
.quote cite{display:block;margin-top:26px;font-family:var(--label-font);font-style:normal;color:var(--gold);letter-spacing:.14em;font-size:13px;text-transform:uppercase}
/* Teasers de l'accueil */
.teaser{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.teaser.reverse .teaser-media{order:2}
.teaser-media img{width:100%;height:340px;object-fit:cover;border:8px solid #efe2c2;box-shadow:0 18px 34px rgba(0,0,0,.18);filter:saturate(.88) contrast(1.06) sepia(.12)}
.teaser p{max-width:60ch}
.pictos{display:flex;gap:30px;flex-wrap:wrap;margin:24px 0}
.picto{text-align:center;width:110px}
.picto img{width:52px;height:52px;margin:0 auto 8px}
.picto span{font-family:var(--label-font);font-size:12px;letter-spacing:.04em;line-height:1.3;display:block}
/* Sur fond sombre, on sert la variante or du pictogramme (fichier -or.svg),
plutôt qu'un filtre CSS approximatif. */
/* Page légale */
.banner-short{padding-bottom:120px;min-height:0}
.legal .section-inner{max-width:76ch}
.legal-h2{
font-family:var(--title-font);font-weight:400;
font-size:26px;color:var(--green);margin:44px 0 12px;line-height:1.2;
}
.legal-h2:first-of-type{margin-top:32px}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{margin-bottom:6px}
.todo{
background:rgba(169,43,32,.10);border-bottom:1px dashed var(--red);
color:var(--red2);padding:0 3px;font-style:italic;
}
.legal-date{
margin-top:40px;padding-top:18px;border-top:1px solid var(--line);
font-family:var(--label-font);font-size:12px;letter-spacing:.05em;color:var(--muted);
}
/* ---------- 10. Pied de page, animations, responsive -------------------- */
.site-footer{background:#061b15;color:var(--gold);padding:52px 5vw 40px;text-align:center;font-family:var(--label-font)}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin:0 0 22px;padding:0;list-style:none;font-size:13px;letter-spacing:.06em}
.footer-nav a:hover{color:#fff}
.footer-devise{letter-spacing:.18em;font-size:13px;margin:0 0 10px}
.footer-legal{color:rgba(246,239,216,.55);font-family:Inter,sans-serif;letter-spacing:0;font-size:13px;margin:0}
.site-footer:before{content:"✚";color:var(--red);display:block;margin-bottom:14px;font-size:20px}
/* Le contenu n'est masqué que si JS est disponible pour le révéler (B9). */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease-out,transform .7s ease-out}
.js .reveal.is-visible{opacity:1;transform:none}
/* Cible d'une ancre : on court-circuite la transition, sinon le défilement se
calerait sur une position encore décalée (cf. allerAncre() dans main.js). */
.js .reveal.sans-anim{transition:none}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .home .hero-content>*{opacity:0;animation:heroIn .8s ease-out forwards}
.js .home .hero-content .kicker{animation-delay:.1s}
.js .home .hero-content h1{animation-delay:.22s}
.js .home .hero-content .mini-sep{animation-delay:.36s}
.js .home .hero-content .hero-lead{animation-delay:.46s}
.js .home .hero-content .hero-actions{animation-delay:.6s}
.js .home .notice{opacity:0;animation:heroIn .8s ease-out .75s forwards}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.js .reveal,.js .home .hero-content>*,.js .home .notice{opacity:1!important;transform:none!important}
}
@media(max-width:1080px){
:root{--header-h:74px}
.brand-logo{width:46px;height:46px}
.brand-title{font-size:16px}
.brand-sub{font-size:10px}
.burger{display:block}
/* Panneau fermé : jamais déplacé hors du viewport. Un élément `fixed`
translaté vers la droite n'est PAS rogné par l'overflow d'un ancêtre et
génère un défilement horizontal sur tout le site. On masque donc par
visibilité + opacité, avec un léger glissement vertical. */
.nav-panel{
position:fixed;inset:calc(var(--header-h) + var(--alert-h)) 0 0 auto;width:min(360px,86vw);
background:#06201a;border-left:1px solid rgba(199,163,42,.4);
padding:18px 18px 40px;overflow-y:auto;
visibility:hidden;opacity:0;pointer-events:none;
transform:translateY(-12px);
transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.nav-panel.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
.nav-list{flex-direction:column;align-items:stretch;gap:0}
.nav-item{flex-wrap:wrap;border-bottom:1px solid rgba(199,163,42,.2)}
.nav-link{flex:1;padding:16px 6px;font-size:15px}
.nav-caret{width:44px;height:52px;margin:0}
.dropdown{
position:static;width:100%;min-width:0;opacity:1;visibility:visible;transform:none;
background:transparent;border:0;box-shadow:none;padding:0 0 10px;
display:none;
}
.nav-item:hover > .dropdown,.nav-item:focus-within > .dropdown{display:none}
.nav-caret[aria-expanded="true"] + .dropdown{display:block}
.dropdown a{padding:11px 18px;font-size:14px;border-left:1px solid rgba(199,163,42,.35)}
.hero{min-height:auto;padding-bottom:150px;display:block}
.hero-inner{grid-template-columns:1fr;gap:34px}
.banner{padding-bottom:130px}
.cols-2,.cols-3,.split,.teaser,.join-box,.contact-grid,.photo-stack{grid-template-columns:1fr}
.teaser.reverse .teaser-media{order:0}
.photo-stack img:nth-child(1),.photo-stack img{height:260px;grid-column:auto}
.feature,.feature.has-media{grid-template-columns:64px 1fr;gap:20px}
.feature.has-media .feature-media{grid-column:1/-1;margin-top:4px}
.feature-media img{height:220px}
.feature-ico{width:56px;height:56px}
.book{grid-template-columns:130px 1fr;gap:18px}
.chrono:before,.chrono li:after{display:none}
.chrono li{grid-template-columns:1fr;gap:4px}
.chrono .year{text-align:left;font-size:22px}
.event{grid-template-columns:70px 1fr;gap:16px}
.event-links{flex-direction:row;align-items:flex-start;grid-column:1/-1;margin-top:4px}
}
@media(max-width:520px){
body{font-size:16px}
section{padding:56px 0}
.hero h1{font-size:clamp(38px,11vw,54px)}
.btn{width:100%;justify-content:center}
.event-links .detail{flex:1;justify-content:center}
.pictos{gap:18px}
.picto{width:88px}
}