:root{
  --cream:#f1eadf;
  --paper:#e4dacb;
  --ink:#1a1815;
  --or:#f7b033;
  --dark:#000;
  --muted:#71695f;
  --header:82px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
}
section{scroll-margin-top:var(--header)}
a{color:inherit}
img{display:block;width:100%}

/* HEADER */
header{
  position:fixed;top:0;left:0;right:0;height:var(--header);
  padding:0 5vw;display:flex;align-items:center;justify-content:space-between;
  color:#fff;z-index:1000;transition:.35s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(18,16,13,.94);
  backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.1);
}
.logo{
  display:flex;align-items:center;gap:13px;text-decoration:none
}
.logo-mark{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.5);
  display:grid;place-items:center;font-family:Georgia,serif;font-size:20px
}

.logo-name{
  text-transform:uppercase;letter-spacing:.13em;
  font-size:12px;font-weight:700;line-height:1.15
}
nav{display:flex;gap:24px;align-items:center}
nav a{
  text-decoration:none;text-transform:uppercase;font-size:10px;
  letter-spacing:.17em;position:relative;padding:10px 0
}
nav a:after{
  content:"";position:absolute;bottom:3px;left:0;height:1px;width:0;
  background:#d6b680;transition:.25s
}
nav a:hover:after,nav a.active:after{width:100%}
.menu-btn{
  display:none;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.3);
  width:42px;height:42px;font-size:18px
}

/* HERO */
.hero{
  min-height:100vh;position:relative;display:flex;align-items:flex-end;
  color:#fff;padding:calc(var(--header) + 50px) 6vw 8vh;
  background:
    linear-gradient(90deg,rgba(15,13,10,.9) 0%,rgba(15,13,10,.63) 45%,rgba(15,13,10,.08) 82%),
    linear-gradient(0deg,rgba(15,13,10,.82),transparent 48%),
    url('photos/accueil.jpg')
    center 30%/cover no-repeat;
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 75% 40%,transparent 0 25%,rgba(0,0,0,.25) 85%);
}
.hero-content{position:relative;z-index:2;max-width:1000px}
.eyebrow{
  color:#f7b033;text-transform:uppercase;letter-spacing:.28em;
  font-size:10px;font-weight:700;margin-bottom:22px
}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;text-transform:uppercase;
  font-size:clamp(54px,8.7vw,128px);line-height:.86;letter-spacing:-.045em;margin-bottom:26px
}
.hero h1 span{
  display:block;color:#888;
}
.hero p{
  max-width:690px;color:#e4ded3;font-size:clamp(17px,1.6vw,21px);line-height:1.65;margin-bottom:32px
}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  min-height:52px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;text-transform:uppercase;letter-spacing:.15em;font-size:10px;font-weight:800;
  transition:.25s;border:1px solid transparent
}
.btn-or{background:var(--or);color:white}
.btn-or:hover{background:#000;transform:translateY(-2px)}
.btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.btn-outline:hover{background:#fff;color:#111}

/* COMMON */
.section{padding:115px 6vw}
.head{
  display:grid;grid-template-columns:150px 1fr;gap:35px;margin-bottom:65px
}
.number{
  padding-top:12px;color:var(--or);text-transform:uppercase;
  letter-spacing:.2em;font-size:10px;font-weight:700
}
.title{
  font-family:Georgia,"Times New Roman",serif;text-transform:uppercase;
  font-size:clamp(42px,6vw,83px);line-height:.95;letter-spacing:-.04em
}
.title .outline{
  color:#888;
}
.lead{
  font-family:Georgia,serif;font-size:clamp(27px,3vw,44px);line-height:1.2
}
.text{font-size:17px;line-height:1.8;color:var(--muted)}

/* COMPAGNIE */
.compagnie{background:var(--cream)}
.comp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.comp-photo{
  width:80%;
  margin:auto;
  position:relative;
  overflow:hidden;
}
.comp-photo > .cover-img{
  position:static;
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}
.comp-photo:after{
  content:"";position:absolute;inset:20px;
}
.comp-copy .lead{margin-bottom:25px}
.comp-copy .text{margin-bottom:17px}
.quote{
  margin-top:30px;border-left:2px solid var(--or);padding-left:20px;
  font-family:Georgia,serif;font-style:italic;font-size:19px;line-height:1.55;color:#4f473e
}

/* ERA STORY */
.history{background:var(--dark);color:#f2ece2}
.history .number{color:#f7b033}
.history .title .outline{-webkit-text-stroke-color:rgba(255,255,255,.4)}
.era-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px
}
.era-card{
  min-height:590px;position:relative;overflow:hidden;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;color:#fff
}
.era-card:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.05) 72%);
  z-index:1
}
.era-card:after{
  content:"";position:absolute;inset:0;background:rgba(116,31,44,0);transition:.35s;z-index:1
}
.era-card:hover:after{background:rgba(0,0,0,.10)}
.era-content{position:relative;z-index:2;padding:34px}
.era-no{
  text-transform:uppercase;letter-spacing:.19em;font-size:9px;color:#d8bc8b;margin-bottom:10px
}
.era-card h3{
  font-family:Georgia,serif;text-transform:uppercase;font-weight:400;
  font-size:clamp(31px,4vw,52px);line-height:1;margin-bottom:12px
}
.era-card p{color:#d8d0c4;line-height:1.55;font-size:14px;max-width:560px}

.gladiateurs{
 background-image:url('photos/gladiateurs.jpg');
}
.templiers{
 background-image:url('photos/templiers.jpg');
}
.henriIV{
 background-image:url('photos/henriIV.jpg');
}
.memoire{
 background-image:url('photos/lafayette.jpg');
}

/* SPECTACLES */
.spectacles{background:#e6ddcf}
.feature{
  display:grid;grid-template-columns:1.18fr .82fr;min-height:670px
}
.feature-photo{
  background:
   linear-gradient(0deg,rgba(0,0,0,.23),transparent),
   url('photos/pirates.jpg')
   center/cover no-repeat;
}
.feature-text{
  background:#000;color:#f5eee4;padding:70px 55px;
  display:flex;flex-direction:column;justify-content:center
}
.feature-text .eyebrow{margin-bottom:16px}
.feature-text h3{
  font-family:Georgia,serif;text-transform:uppercase;
  font-size:clamp(42px,5vw,70px);line-height:.96;margin-bottom:24px
}
.feature-text p{color:#bfb6a9;line-height:1.75;font-size:16px;margin-bottom:27px}
.archive-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px
}
.archive{
  min-height:420px;position:relative;display:flex;align-items:flex-end;color:#fff;
  background-position:center;background-size:cover;overflow:hidden
}
.archive:after{
  content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88),transparent 68%)
}
.archive-info{position:relative;z-index:2;padding:26px}
.archive-info small{
  color:#;text-transform:uppercase;letter-spacing:.16em;font-size:9px
}
.archive-info h4{
  font-family:Georgia,serif;text-transform:uppercase;font-size:26px;margin-top:8px;font-weight:400
}
.a1{background-image:url('photos/derniers-templiers.jpg')}
.a2{background-image:url('photos/lafayette.jpg')}
.a3{background-image:url('photos/dieux-arene.jpg')}

/* GALERIE */
.gallery{background:#f7f2e9}
.gallery-wall{
 display:grid;grid-template-columns:1.15fr .85fr .85fr;
 grid-auto-rows:270px;gap:12px
}
.pic{
 background-size:cover;background-position:center;position:relative;overflow:hidden
}
.pic:after{
 content:"";position:absolute;inset:0;background:rgba(0,0,0,.03);transition:.3s
}
.pic:hover:after{background:rgba(0,0,0,.10)}
.p1{grid-row:span 2;background-image:url('photos/accueil.jpg')}
.p2{background-image:url('photos/pirates-galerie.jpg')}
.p3{background-image:url('photos/commemoration-galerie.jpg')}
.p4{background-image:url('photos/templiers.jpg')}
.p5{background-image:url('photos/gladiateurs.jpg')}

/* JOIN */
.join{
 min-height:780px;display:flex;align-items:center;color:#fff;
 background:
  url('photos/rejoindre.jpg')
  center/cover no-repeat;
}
.join-box{max-width:850px}

.join p{max-width:690px;color:#ddd5ca;font-size:18px;line-height:1.7;margin-bottom:30px}

/* CONTACT */
.contact{background:#000;color:#f2ece2}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}

.contact .text{color:#aaa195}
.info{margin-top:30px;color:#d2c8ba;line-height:1.8;font-size:14px}
form{display:grid;gap:12px}
input,textarea{
 background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.23);
 padding:17px 2px;color:#fff;font:inherit;outline:none
}
input:focus,textarea:focus{border-color:#d1ad71}
textarea{min-height:130px;resize:vertical}
form button{justify-self:start;border:0;cursor:pointer}

footer{
 padding:28px 6vw;background:#0f0d0a;color:#777069;
 display:flex;justify-content:space-between;gap:15px;
 text-transform:uppercase;letter-spacing:.14em;font-size:9px
}


/* Images HTML indexables : même rendu visuel que les anciens backgrounds */
.cover-img,
.pic img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.comp-photo > .cover-img,
.feature-photo > .cover-img{z-index:0}
.comp-photo:after{z-index:2}
.era-card > .cover-img,
.archive > .cover-img{z-index:0}
.era-card:before,.era-card:after,.archive:after{z-index:1}
.era-content,.archive-info{z-index:2}
.feature-photo{position:relative;overflow:hidden}
.pic{overflow:hidden}
.pic img{transition:transform .5s ease}
.pic:hover img{transform:scale(1.025)}

/* FAQ : contenu explicite utile au SEO et aux moteurs génératifs */
.faq{background:#f2ece2}
.faq-list{
  max-width:1050px;
  margin:0 auto;
}
.faq-item{padding:28px 0;border-bottom:1px solid rgba(26,24,21,.15)}
.faq-item:first-child{border-top:1px solid rgba(26,24,21,.15)}
.faq-item h3{font-family:Georgia,serif;font-size:clamp(24px,2.5vw,34px);font-weight:400;margin-bottom:10px}
.faq-item p{font-size:16px;line-height:1.75;color:var(--muted);max-width:900px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:.8s ease}
.reveal.visible{opacity:1;transform:none}



@media(max-width:980px){

  .hero{
  background-position:20% center;
}

.section{
  padding:90px 6vw;
}

.head{
  grid-template-columns:1fr;
  gap:10px;
}

.comp-grid,
.feature,
.contact-grid{
  grid-template-columns:1fr;
}



.era-grid{
  grid-template-columns:1fr;
}

.era-card{
  min-height:530px;
}

.archive-grid{
  grid-template-columns:1fr;
}

.archive{
  min-height:470px;
}

.gallery-wall{
  grid-template-columns:1fr 1fr;
}

.p1{
  grid-row:auto;
}

/* Photo La Légende des Pirates : affichage complet sur tablette et mobile */

.feature{
  min-height:0;
}

.feature-photo{
  min-height:0;
}


.feature-photo img{
  position:static;
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}

}

@media(max-width:760px){

:root{--header:70px}

header{padding:0 5vw}

.logo-name{font-size:9px}

.menu-btn{display:block}

nav{

 position:absolute;top:70px;left:0;right:0;display:none;

 flex-direction:column;align-items:flex-start;padding:22px 6vw;

 background:rgba(18,16,13,.97);gap:3px

}

nav.open{display:flex}

nav a{width:100%;padding:12px 0}

.hero{padding:120px 6vw 8vh;background-position:10% center}

.hero h1{
  font-size:clamp(40px,13vw,64px);
  line-height:.92;
}

.title{
  font-size:clamp(34px,10.5vw,54px);
  line-height:1;
}


.era-card{min-height:480px}

.feature-text{padding:48px 28px}

.gallery-wall{grid-template-columns:1fr;grid-auto-rows:270px}

.join{min-height:690px}

footer{flex-direction:column}

.era-card h3{
  font-size:clamp(26px,8vw,38px);
  overflow-wrap:break-word;
}

.feature-text h3{
  font-size:clamp(32px,9vw,46px);
}





.archive-info h4{
  font-size:clamp(22px,7vw,28px);
}

}
.facebook-contact{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  transition:.25s;
}

.facebook-contact svg{
  width:22px;
  height:22px;
  fill:#1877F2;
}

.facebook-contact:hover{
  color:#1877F2;
}

.grecaptcha-badge{
  visibility:hidden !important;
}

.recaptcha-notice{
  font-size:10px;
  color:#777;
  line-height:1.4;
  margin-top:5px;
}

.recaptcha-notice a{
  color:#999;
}

@media(max-width:980px) and (orientation:landscape){

.feature{
  min-height:0 !important;
}

.feature-photo{
  min-height:0 !important;
  height:auto !important;
}

.feature-photo .cover-img{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

}



@media(max-width:980px) and (orientation:landscape){

#rejoindre{
  min-height:0 !important;
  align-items:flex-start !important;
}

#rejoindre .join-box{
  margin:0 !important;
}

}