@font-face{font-family:"FestivoLC";src:url("/fonts/FestivoLettersNo1.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/fonts/barlow-condensed-v13-latin-300.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/fonts/barlow-condensed-v13-latin-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/fonts/barlow-condensed-v13-latin-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --vert:#80a88f; --vert-fonce:#4d7a5f; --encre:#000; --nuit:#1c1c1c; --fond:#fff; --accent:#80a88f;
  --marge:clamp(1rem,4vw,4rem);
  --titre:"FestivoLC",Impact,"Arial Narrow",sans-serif;
  --texte:"Barlow Condensed","Arial Narrow",sans-serif;
  --largeur-creation:704px;
  --largeur-page:90rem;
  --cote:max(var(--marge), calc((100% - var(--largeur-page)) / 2 + var(--marge)));
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--texte);font-weight:400;font-size:1.2rem;line-height:1.5;color:var(--encre);background:var(--fond)}
main{flex:1}
img{display:block;max-width:100%;height:auto}
a{color:inherit;}

/* Liens dans les textes */
.texte a,.fiche a,.evenements a,details a,.meta a{
  color:var(--vert-fonce);
  font-weight: 500;
  text-decoration:none;
}
.texte a:hover,.fiche a:hover,.evenements a:hover,details a:hover,.meta a:hover{
  color:var(--encre);
}

:focus-visible{outline:3px solid var(--vert-fonce);outline-offset:3px}
.saut{position:absolute;left:-999px}
.saut:focus{left:1rem;top:1rem;z-index:20;background:#fff;padding:.5rem 1rem}

h1,h2, h3{font-family:var(--titre);color:var(--vert);text-transform:uppercase;font-weight:400;line-height:1.05}
h4{font-family:var(--titre);color:var(--vert-fonce);text-transform:uppercase;font-weight:400;line-height:1.05}
h1{font-size:clamp(2.6rem,6vw,5rem);margin:0 0 1.5rem}
h1::after{content:"";display:block;width:5.5rem;border-top:1px solid var(--encre);margin-top:1.5rem}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem);margin:3rem 0 1rem}

/* Texte en bold */
strong,b{font-weight:500}

/* En-tête */
.entete{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1rem var(--cote);color:#fff;background:var(--nuit)}
.entete{position:relative}
.menu-toggle,.burger{display:none}
.accueil .entete:has(.menu-toggle:checked){background:var(--nuit)}
.accueil .entete{position:absolute;inset:0 0 auto 0;z-index:10;background:linear-gradient(rgb(0 0 0/.5),transparent)}
.menu,.menu ul{list-style:none;margin:0;padding:0}
.menu{display:flex;gap:2rem}
.menu a{text-decoration:none;font-weight:500;font-size:1.3rem}
.menu a:hover,.menu a:focus-visible{
  text-decoration:underline;
  text-underline-offset:.3em;
  text-decoration-thickness:2px;
}

.a-sous-menu{position:relative;padding-bottom:.6rem;margin-bottom:-.6rem}
.a-sous-menu>a::after{content:"▾";margin-left:.35em;font-size:.8em;display:inline-block}
.a-sous-menu ul{display:none;position:absolute;top:100%;left:0;min-width:11rem;padding:.5rem 1rem;background:var(--nuit);z-index:11}
.a-sous-menu:hover ul,.a-sous-menu:focus-within ul{display:block}

/* Accueil */
.hero{display:grid;grid-template-columns:repeat(3,1fr);height:min(40vh,42rem)}
.tuile{position:relative;display:block;overflow:hidden;text-decoration:none;color:#fff}
.tuile img{width:100%;height:100%;object-fit:cover}
.tuile:hover img,.tuile:focus-visible img{opacity:.85}
.tuile:focus-visible{outline-offset:-6px}
/* Contenu */
.contenu{max-width:var(--largeur-page);margin-inline:auto;padding:3rem var(--marge) 4rem}
.texte{max-width:55rem}
.meta{color:#444}
.fil{margin:0 0 1rem}

/* Galeries */
.filtres{display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;margin:2rem 0}
.filtres ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;margin:0;padding:0}
.filtres-communs{padding-left:2.5rem!important;border-left:1px solid var(--encre)}
.filtres a{text-decoration:none;border-bottom:2px solid transparent}
.filtres a:hover,.filtres a[aria-current]{border-color:var(--vert)}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.9rem;list-style:none;margin:0;padding:0}
.carte{display:block;text-decoration:none}
.carte img{width:100%;aspect-ratio:1/1;object-fit:cover}
.carte-titre{display:block;margin-top:.5rem;font-weight:500}
.carte:hover .carte-titre{text-decoration:underline}
.sur-mesure{margin-top:3rem}

.illustration{margin:1.5rem 0}
.illustration figcaption{color:#444;font-size:1rem}

/* Création */
.fiche{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1.5rem;margin:1.5rem 0 2rem}
.fiche dt{font-weight:500}
.fiche dd{margin:0;white-space:pre-line}
.vignettes{max-width:var(--largeur-creation);display:flex;flex-wrap:wrap;gap:1rem;list-style:none;margin:1rem 0 2rem;padding:0}
.vignettes img{width:8rem;height:8rem;object-fit:cover}
.vignettes a{display:block}
.vignettes a:hover img{outline:2px solid var(--vert)}

/* Hero + galerie : l'image cliquée remplace le hero */
.hero-creation{max-width:var(--largeur-creation);margin:0 0 1rem}
.hero-creation figure{margin:0;position:relative}
.hero-creation img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
/* Image, flèches et légende dans une grille : la légende est sous l'image */
.vue:target{display:grid}
.vue img{grid-area:1/1}
.vue .prec,.vue .suiv{grid-area:1/1;align-self:center;z-index:1;padding:1rem;font-size:3rem;line-height:1;color:#fff;text-decoration:none;text-shadow:0 0 6px rgb(0 0 0/.7)}
.vue .prec{justify-self:start}
.vue .suiv{justify-self:end}
.vue figcaption{grid-area:2/1;padding:.5rem 0;color:#444;font-size:1.1rem;text-align:center}
.vue{display:none}
.vue:target ~ .vue-defaut{display:none}
.vue img{object-fit:contain;background:var(--nuit)}
.vue-defaut img{object-fit:cover}

.vignettes{margin:1rem 0 2rem}

/* old vignette
.agrandi{display:none;position:fixed;inset:0;z-index:30;align-items:center;justify-content:center;padding:3rem 1rem 4.5rem;background:rgb(0 0 0/.92)}
.agrandi .legende{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.9rem 1rem;text-align:center;color:#fff;background:rgb(0 0 0/.6)}
.agrandi:target{display:flex}
.agrandi .fond{position:absolute;inset:0}
.agrandi img{position:relative;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.agrandi .fermer,.agrandi .prec,.agrandi .suiv{position:absolute;color:#fff;text-decoration:none;font-weight:500}
.agrandi .fermer{top:1rem;right:1.5rem;font-size:1.4rem}
.agrandi .prec,.agrandi .suiv{top:50%;transform:translateY(-50%);font-size:3rem;padding:1rem}
.agrandi .prec{left:.5rem}
.agrandi .suiv{right:.5rem} */
.devis{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--encre);max-width:40rem}
.devis h2{margin-top:0}
.bouton{display:inline-block;padding:.7rem 1.5rem;background:var(--nuit);color:#fff;text-decoration:none;font-weight:500}
.bouton:hover{background:var(--vert-fonce)}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem}
.pager a{text-decoration:none}
.pager a:hover{text-decoration:underline}

/* Actualités, FAQ */
.evenements{list-style:none;margin:0;padding:0}
.evenements li{margin-bottom:1rem}
.evenements a{font-weight:500}
.evenements .meta{display:block}
details{margin-bottom:1rem;max-width:40rem}
summary{cursor:pointer;font-weight:500}

/* Pied de page */
.pied{padding:2rem var(--cote);background:var(--nuit);color:#fff}
.pied ul{display:flex;flex-wrap:wrap;gap:.5rem 2rem;list-style:none;margin:0 0 1rem;padding:0}
.pied p{margin:0}
@media (max-width:48em){
  .entete{flex-wrap:wrap;gap:0}

  /* Bouton hamburger */
  .burger{display:block;position:relative;width:2.75rem;height:2.75rem}
  .burger::before,.burger::after,.burger span{content:"";position:absolute;left:.5rem;right:.5rem;height:2px;background:#fff}
  .burger::before{top:.9rem}
  .burger span{top:1.3rem}
  .burger::after{top:1.7rem}

  /* La case, invisible, couvre le bouton pour recevoir le clic et le clavier */
  .menu-toggle{display:block;position:absolute;top:1rem;right:var(--marge);width:2.75rem;height:2.75rem;margin:0;opacity:0;cursor:pointer;z-index:12}
  .menu-toggle:focus-visible + .burger{outline:3px solid #fff}

  /* Bouton transformé en croix quand le menu est ouvert */
  .menu-toggle:checked + .burger span{opacity:0}
  .menu-toggle:checked + .burger::before{top:1.3rem;transform:rotate(45deg)}
  .menu-toggle:checked + .burger::after{top:1.3rem;transform:rotate(-45deg)}

  /* Menu replié par défaut, déplié quand la case est cochée */
  .entete nav{display:none;flex-basis:100%;padding:1rem 0 .5rem}
  .menu-toggle:checked ~ nav{display:block}
  .menu{flex-direction:column;gap:.75rem}

  /* Sous-menus toujours visibles, en retrait */
  .a-sous-menu>a::after{content:""}
  .a-sous-menu ul{display:block;position:static;min-width:0;padding:.25rem 0 0 1rem;background:none}
  .a-sous-menu{padding-bottom:0;margin-bottom:0}
  /* Reste de la mise en page mobile */
  .hero{grid-template-columns:repeat(3,1fr);height:auto;gap:0;padding:0}
  .tuile{aspect-ratio:1/1}
  .accueil .entete{position:relative;background:var(--nuit)}
  .filtres-communs{padding-left:0!important;border-left:0}
}

/* Images gauche, droite, centre */
img.gauche{float:left;margin:.25rem 1.5rem 1rem 0}
img.droite{float:right;margin:.25rem 0 1rem 1.5rem}
img.centre{margin-inline:auto}

.texte::after{content:"";display:block;clear:both}

/* Rangée de petites images côte à côte
.rangee{display:flex;gap:0rem;margin:1rem 0}
.rangee img{flex:0 1 180px;min-width:0;height:auto;aspect-ratio:1/1;object-fit:cover} */
.rangee{display:flex;gap:0rem;margin:1rem 0;align-items:flex-start}
.rangee img{min-width:0}


@media (max-width:36em){
  img.gauche,img.agauche,img.droite{float:none;margin-inline:0}
}


/* Bloc de contenu : contient les images flottantes */
.bloc {
  display: flow-root;
  margin: 1rem 0;
  padding-bottom: 0rem;
}
.bloc:last-child { border-bottom: none; }

.evenements li.evenement{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.evenement-image img{width:8rem;height:8rem;object-fit:cover}

/* ===== Citations ===== */
blockquote {
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  border-left: 4px solid var(--accent);
  background: rgba(0, 0, 0, 0.04);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}
blockquote p { margin: 0; }