@font-face{font-family:'Andika';font-weight:400;font-display:swap;src:url(fonts/andika-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Andika';font-weight:700;font-display:swap;src:url(fonts/andika-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Grenze Gotisch';font-weight:600;font-display:swap;src:url(fonts/grenze-gotisch-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Grenze Gotisch';font-weight:800;font-display:swap;src:url(fonts/grenze-gotisch-latin-800-normal.woff2) format('woff2')}
:root{--nuit:#172b54;--bleu:#23407a;--or:#e2b23c;--or-clair:#ffe9a8;--rouge:#9d2f25;--parchemin:#f2e6c4;--creme:#fbf6ea;--encre:#2a241e;--trait:#d8c79a;
  --titre:'Grenze Gotisch','Palatino Linotype',Georgia,serif;--texte:'Andika',system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--creme);color:var(--encre);font:400 1.06rem/1.6 var(--texte);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}a{color:var(--bleu)}
h1,h2,h3{font-family:var(--titre);line-height:1.08;margin:0}
.bandeau{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px clamp(16px,4vw,40px);
  background:rgba(23,43,84,.96);backdrop-filter:blur(6px);border-bottom:2px solid var(--or)}
.marque{display:flex;align-items:center;gap:10px;color:var(--or-clair);text-decoration:none;font:800 1.45rem/1 var(--titre)}
.marque img{width:40px;height:40px}
nav{display:flex;align-items:center;gap:clamp(10px,2.4vw,26px)}
nav a{color:#f1e9d6;text-decoration:none;font-weight:700;font-size:.98rem}nav a:hover{color:var(--or)}
.nav-cta{background:var(--or);color:var(--nuit)!important;padding:7px 14px;border-radius:999px}

.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--nuit)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hero-voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,40,.86) 0%,rgba(10,18,40,.6) 42%,rgba(10,18,40,.08) 78%),linear-gradient(0deg,rgba(10,18,40,.75),rgba(10,18,40,0) 45%)}
.hero-texte{position:relative;max-width:640px;padding:clamp(28px,6vw,72px) clamp(16px,6vw,72px);color:#fff7e4}
.hero h1{font-size:clamp(3.2rem,9vw,6.2rem);font-weight:800;color:var(--or);text-shadow:0 3px 0 #5a1d14,0 8px 24px rgba(0,0,0,.5)}
.accroche{font:700 clamp(1.3rem,3vw,1.75rem)/1.3 var(--texte);margin:14px 0 8px;color:#fff3d6}
.chapo{font-size:1.08rem;max-width:560px;margin:0 0 22px;color:#f1e9d6}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.bouton{display:inline-block;padding:13px 22px;border-radius:12px;font-weight:700;text-decoration:none;border:2px solid transparent}
.bouton.or{background:var(--or);color:var(--nuit);box-shadow:0 3px 0 #a97c17}.bouton.or:hover{background:#f0c35a}
.bouton.clair{border-color:rgba(255,243,214,.7);color:#fff3d6}.bouton.clair:hover{background:rgba(255,255,255,.1)}
.pastilles{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:22px 0 0}
.pastilles li{font-size:.88rem;font-weight:700;padding:4px 11px;border-radius:999px;background:rgba(255,233,168,.14);border:1px solid rgba(255,233,168,.4);color:var(--or-clair)}

.section{padding:clamp(56px,8vw,96px) clamp(16px,5vw,56px);max-width:1180px;margin:0 auto}
.parchemin{max-width:none;background:var(--parchemin);border-top:3px solid var(--trait);border-bottom:3px solid var(--trait)}
.parchemin>*{max-width:1068px;margin-left:auto;margin-right:auto}
.titre-section{max-width:760px;margin:0 auto 36px;text-align:center}
.surtitre{margin:0 0 8px;color:var(--rouge);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem}
.titre-section h2{font-size:clamp(2.2rem,5vw,3.2rem);color:var(--nuit);font-weight:800}
.titre-section p{margin:14px 0 0}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.carte{background:#fff;border:1px solid var(--trait);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(23,43,84,.08)}
.carte img{aspect-ratio:3/2;object-fit:cover;width:100%}
.carte h3{font-size:1.75rem;color:var(--rouge);margin:16px 18px 6px;font-weight:800}
.carte p{margin:0 18px 20px}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px;margin-top:44px}
.galerie figure{margin:0}
.galerie img{border-radius:12px;border:3px solid var(--nuit);box-shadow:0 6px 20px rgba(0,0,0,.15)}
.galerie figcaption{font-size:.92rem;margin-top:6px;color:#5b4a33;text-align:center}
.deux-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:8px 36px}
.liste{list-style:none;margin:0;padding:0}
.liste li{position:relative;padding:12px 0 12px 34px;border-bottom:1px dashed var(--trait)}
.liste li::before{content:'';position:absolute;left:4px;top:19px;width:14px;height:14px;background:var(--or);transform:rotate(45deg);border:2px solid var(--nuit)}
.liste b{color:var(--nuit)}
.trois-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.encart{background:#fff;border:2px solid var(--nuit);outline:2px solid var(--or);outline-offset:-7px;border-radius:14px;padding:22px 22px 16px}
.encart h3{font-size:1.65rem;color:var(--bleu);margin-bottom:6px;font-weight:800}
.encart p{margin:0}
.liens-donnees{text-align:center;margin:26px 0 0;font-weight:700}
.appel{text-align:center;max-width:720px}
.appel img{margin:0 auto 10px;width:96px}
.appel h2{font-size:clamp(2.2rem,5vw,3rem);color:var(--nuit);font-weight:800;margin-bottom:10px}
.pied{background:var(--nuit);color:#d9d2bf;text-align:center;padding:30px 16px;font-size:.95rem}
.pied a{color:var(--or-clair)}.pied p{margin:6px 0}.discret{opacity:.75;font-size:.86rem}
a:focus-visible,.bouton:focus-visible{outline:3px solid var(--or);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:720px){nav a:not(.nav-cta){display:none}.marque span{font-size:1.2rem}
  .hero-voile{background:linear-gradient(0deg,rgba(10,18,40,.95) 0%,rgba(10,18,40,.85) 55%,rgba(10,18,40,.35) 100%)}
  .hero-img{object-position:62% 30%}}