/* Continental Avignon — reprise statique du thème Joomla « joomlage0100-one » */
:root {
  --fond: #0e0f0e;
  --barre: #cbcfcb;
  --barre-ombre: rgba(0, 0, 0, .12);
  --page: #f9f9f9;
  --titre: #59575c;
  --brun: #993300;
  --texte: #000;
  --gris: #828282;
  --lien: #101959;
  --or: #f5a905;
  --orange: #fa9c20;
  --survol-menu: #d68c03;
  --serif: Georgia, "Times New Roman", serif;
  --largeur: 1300px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--gris);
  font: 15px/1.6 var(--serif);
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; }
a { color: var(--lien); }
a:hover { color: var(--gris); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ en-tête */
.entete { position: relative; z-index: 50; }
.logo { text-align: center; padding: 12px 16px 0; height: 118px; }
.logo-texte {
  color: #dedede; text-decoration: none;
  font-size: 44px; line-height: 1.1; font-weight: 300; letter-spacing: .5px;
}
.logo-texte:hover { color: #fff; }
.slogan {
  color: #dedede; margin: 6px 0 0;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
}

.barre {
  position: relative;
  max-width: var(--largeur); margin: -20px auto 0; min-height: 60px;
  background: var(--barre); border-radius: 6px 6px 0 0;
  display: flex; align-items: stretch; justify-content: center;
}
.entete.colle .barre { border-radius: 0; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.menu a {
  display: block; padding: 19px 14px;
  color: #000; text-decoration: none; text-transform: uppercase;
  font-size: 14px; letter-spacing: .5px; line-height: 1.6;
}
.menu a:hover, .menu a:focus-visible { color: var(--survol-menu); box-shadow: inset 0 0 20px rgba(0, 0, 0, .1); }
.menu a[aria-current="page"] { color: var(--titre); }
.facebook {
  position: absolute; right: 0; top: 0; bottom: 0; width: 100px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .2); border-top-right-radius: 6px;
}
.facebook svg { width: 22px; height: 22px; fill: #6d6d6d; transition: fill .2s; }
.facebook:hover svg { fill: #3b5998; }
.burger { display: none; }

/* bandeau sticky : on colle la barre en haut au défilement (géré dans site.js) */
.entete.colle .barre { position: fixed; left: 0; right: 0; top: 0; margin: 0 auto; box-shadow: 0 2px 10px var(--barre-ombre); }
.entete.colle { padding-bottom: 40px; }

/* ------------------------------------------------------------------ bannière */
.banniere { background: #2d2e26; line-height: 0; }
.banniere img { display: block; width: 100%; max-height: 500px; object-fit: cover; }

/* ------------------------------------------------------------------ contenu */
.fond-contenu { background: #fcfcfc; }
.contenu {
  max-width: var(--largeur); margin: 0 auto;
  background: var(--page);
  padding: 40px 60px 50px;
}
.contenu::after { content: ""; display: block; clear: both; }
.titre-page { color: var(--titre); font-size: 26px; font-weight: bold; margin: 0 0 12px; }
.titre-page.grand { font-weight: normal; font-size: 34px; margin-bottom: 30px; }
.titre-page.brun { color: var(--brun); font-weight: normal; font-size: 28px; }
.titre-page.brun.centre { font-weight: bold; font-size: 24px; }
.accroche { color: var(--brun); text-align: center; font-size: 18.6px; margin: 0 0 10px; }
.intertitre { color: var(--brun); text-align: center; font-size: 18.6px; margin: 40px 0 10px; }
.texte { color: var(--texte); font-size: 18.6px; }
.texte p { margin: 0 0 .65em; }
.texte-gris { font-size: 18.6px; margin: 0 0 .5em; }
.centre { text-align: center; }
.brun, .brun a { color: var(--brun); }
.gros { font-size: 18.6px; }
.note { color: #800000; font-size: 16px; }
.liste-marques { color: var(--brun); text-align: center; font-weight: bold; font-size: 18.6px; margin: 30px 0 10px; }
.puces { padding-left: 1.2em; }
.puces li { margin-bottom: .2em; }
.logo-boutique { display: block; margin: 10px auto; }
.ornement { display: block; margin: 20px auto; }

/* ------------------------------------------------------------------ galeries */
.galerie { display: flex; flex-wrap: wrap; justify-content: center; margin: 20px 0; }
.vignette { display: block; line-height: 0; }
.vignette img { display: block; transition: transform .25s, box-shadow .25s; }
.vignette:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

.galerie-logos .vignette, .galerie-produits .vignette { margin: 10px; }
.galerie-logos img, .galerie-produits img { width: 152px; height: 152px; object-fit: cover; }
.galerie-logos img {
  border: 1px solid var(--or); border-radius: 3px;
  box-shadow: 1px 2px 2px 1px #eee;
}
.galerie-logos .vignette:hover img, .galerie-produits .vignette:hover img { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }

.galerie-mosaique { display: block; columns: 250px; column-gap: 10px; max-width: 1060px; margin: 20px auto; }
.galerie-mosaique .vignette {
  break-inside: avoid; margin: 0 0 10px; padding: 2px; background: var(--orange);
}
.galerie-mosaique img { width: 100%; }
.galerie-mosaique .vignette:hover img { opacity: .88; }

/* ------------------------------------------------------------------ marques */
.sommaire { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: -10px 0 30px; }
.sommaire a {
  font-size: 13px; text-transform: uppercase; letter-spacing: .5px; text-decoration: none;
  color: var(--titre); border: 1px solid #d8d8d8; border-radius: 3px; padding: 3px 9px; background: #fff;
}
.sommaire a:hover { border-color: var(--or); color: var(--brun); }
.marque { scroll-margin-top: 80px; }
.logo-marque { margin: 0; line-height: 0; }
.logo-marque img { display: block; max-width: 270px; }
.marque .texte { font-size: 16px; }
.marque .ornement { margin: 25px auto 20px; }

/* ------------------------------------------------------------------ contact */
.coordonnees { list-style: none; padding: 0; margin: 20px 0; }
.coordonnees li { margin: 0 0 30px; }
.coordonnees a { display: inline-flex; align-items: center; gap: 12px; font-size: 18.6px; text-decoration: none; }
.coordonnees a:hover span { text-decoration: underline; }
.coordonnees img { width: 94px; height: auto; }

.etat-ouverture { font-size: 16px; font-weight: bold; color: #2e7d32; }
.etat-ouverture.ferme { color: var(--brun); }
.horaires {
  margin: 20px auto 0; width: 450px; max-width: 100%; border-collapse: collapse;
  color: var(--brun); font-size: 18.6px; background: #fff;
}
.horaires td { border: 1px solid #828282; text-align: center; padding: 12px 8px; width: 50%; }
.horaires thead td { background: #f9e79f; }
.horaires tr.aujourdhui td { background: #fdf3cf; font-weight: bold; }

/* ------------------------------------------------------------------ nous trouver */
.carte { max-width: 1000px; margin: 20px auto; border: 2px solid var(--orange); line-height: 0; }
.carte iframe { width: 100%; height: 450px; border: 0; }
.bouton {
  display: inline-block; padding: 10px 22px; border-radius: 4px;
  background: #59575c; color: #fff; text-decoration: none; font-size: 16px;
}
.bouton:hover { background: var(--brun); color: #fff; }

/* ------------------------------------------------------------------ pied */
.pied { text-align: center; color: #fff; padding: 30px 16px 60px; text-transform: uppercase; font-size: 14px; }
.pied p { margin: 0 0 12px; line-height: 1.55; }
.menu-pied { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.menu-pied a { display: block; color: #fff; text-decoration: none; font-size: 11px; font-weight: bold; padding: 2px 8px; }
.menu-pied li + li { border-left: 1px solid #666; }
.menu-pied a:hover { color: var(--or); }

.haut {
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(89, 87, 92, .85); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.haut::before {
  content: ""; position: absolute; left: 15px; top: 18px; width: 12px; height: 12px;
  border: solid #fff; border-width: 2px 0 0 2px; transform: rotate(45deg);
}
.haut.visible { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------------ visionneuse */
.visionneuse {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .9);
  display: flex; align-items: center; justify-content: center;
}
.visionneuse img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; box-shadow: 0 0 30px #000; background: #fff; }
.visionneuse button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font: 42px/1 var(--serif); padding: 14px 18px; opacity: .8;
}
.visionneuse button:hover, .visionneuse button:focus-visible { opacity: 1; color: var(--or); }
.visionneuse .fermer { top: 6px; right: 8px; }
.visionneuse .prec { left: 4px; top: 50%; transform: translateY(-50%); }
.visionneuse .suiv { right: 4px; top: 50%; transform: translateY(-50%); }
.visionneuse .compteur { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #ccc; font-size: 14px; }

/* ------------------------------------------------------------------ largeur moyenne / mobile */
@media (max-width: 1340px) {
  .barre, .contenu { max-width: calc(100% - 40px); }
}
@media (max-width: 900px) {
  .contenu { padding: 30px 24px 40px; }
  .menu a { padding: 19px 9px; font-size: 13px; }
  .facebook { width: 60px; }
}
@media (max-width: 760px) {
  .logo { height: auto; padding: 18px 16px 14px; }
  .logo-texte { font-size: 34px; }
  .barre, .contenu { max-width: 100%; }
  .barre { margin: 0; border-radius: 0; min-height: 52px; justify-content: flex-start; }
  .entete.colle .barre { position: fixed; }
  .burger {
    display: block; width: 56px; background: none; border: 0; cursor: pointer; position: relative;
  }
  .burger span, .burger span::before, .burger span::after {
    position: absolute; left: 16px; width: 24px; height: 2px; background: #222; content: ""; transition: transform .2s, opacity .2s;
  }
  .burger span { top: 25px; }
  .burger span::before { left: 0; top: -7px; }
  .burger span::after { left: 0; top: 7px; }
  .burger[aria-expanded="true"] span { background: transparent; }
  .burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; background: #323133; box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
  }
  .menu.ouvert { display: flex; }
  .menu a { color: #fff; padding: 14px 20px; border-top: 1px solid #444; font-size: 14px; }
  .menu a[aria-current="page"] { color: var(--or); }
  .facebook { width: 56px; border-radius: 0; }
  .banniere img { max-height: 260px; }
  .contenu { padding: 24px 16px 32px; }
  .titre-page.grand { font-size: 26px; }
  .texte, .accroche, .intertitre, .liste-marques, .gros, .texte-gris, .horaires, .coordonnees a { font-size: 16.5px; }
  .galerie-logos .vignette, .galerie-produits .vignette { margin: 6px; }
  .galerie-logos img, .galerie-produits img { width: calc((100vw - 32px) / 2 - 12px); height: auto; aspect-ratio: 1; max-width: 172px; }
  .coordonnees img { width: 64px; }
  .carte iframe { height: 340px; }
  .entete.colle { padding-bottom: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}