/* Ateliers Weyne — feuille de style unique.
   Les couleurs sont declarees une fois ici : changer la palette du site revient
   a changer ces quelques lignes. */

:root {
  --fond: #f4f5f6;
  --fond-carte: #ffffff;
  --fond-appui: #e8eaec;
  --texte: #1b2027;
  --texte-doux: #5d6773;
  --accent: #c8541c;          /* orange chaud : le metal au feu */
  --accent-fonce: #a03f11;
  --accent-clair: #fbeade;
  --encre: #232a33;           /* acier sombre : banniere et pied */
  --bord: #d7dbdf;
  --rayon: 8px;
  --largeur: 68rem;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14171b;
    --fond-carte: #1c2126;
    --fond-appui: #222831;
    --texte: #e7eaed;
    --texte-doux: #9aa5b1;
    --accent: #e8874f;
    --accent-fonce: #d0703a;
    --accent-clair: #2a1d15;
    --encre: #0f1216;
    --bord: #2e353d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
}

a { color: var(--accent); }
a:hover { text-decoration: none; }

h1, h2, h3 { line-height: 1.2; font-weight: 650; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 0 0 .6rem; }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 3rem 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--accent-clair);
  padding: .1em .35em;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
}
.evitement:focus { left: .5rem; top: .5rem; z-index: 10; }

/* En-tete ------------------------------------------------------------- */
.entete { background: var(--fond-carte); border-bottom: 1px solid var(--bord); }

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

.marque {
  font-weight: 750;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--texte);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.marque__texte { display: flex; flex-direction: column; }

/* Le logo est un carre rouge sur fond blanc opaque : on lui donne un petit
   cadre blanc arrondi, sans quoi il tranche brutalement sur l'en-tete sombre
   du mode nuit. */
.marque__logo {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  background: #fff;
  border-radius: 6px;
  padding: 2px;
  box-sizing: border-box;
}

.marque__sous {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.menu__liste { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.menu__liste a { text-decoration: none; color: var(--texte-doux); padding: .2rem 0; }
.menu__liste a:hover,
.menu__liste a[aria-current="page"] {
  color: var(--texte);
  border-bottom: 2px solid var(--accent);
}

.menu__bouton { display: none; }

@media (max-width: 40rem) {
  .menu__bouton[hidden] { display: none; }
  .menu__bouton {
    display: block;
    font: inherit;
    color: var(--texte);
    background: var(--fond-appui);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .35rem .9rem;
    cursor: pointer;
  }
  .menu[hidden] { display: none; }
  .menu { width: 100%; }
  .menu__liste { flex-direction: column; gap: .5rem; }
}

/* Banniere ------------------------------------------------------------ */
.banniere {
  /* La photo du site d'origine, sous un voile sombre : sans lui, le titre
     blanc devient illisible sur les zones claires du ciel. La couleur de fond
     reste declaree pour le cas ou l'image ne se charge pas. */
  background-color: var(--encre);
  background-image:
    linear-gradient(to right, rgba(20, 25, 31, .92) 0%, rgba(20, 25, 31, .72) 55%, rgba(20, 25, 31, .55) 100%),
    url("/media/banniere.jpg");
  background-size: cover;
  background-position: center 40%;
  color: #f1f4f7;
  padding: clamp(3rem, 9vw, 6rem) 0;
}

.banniere__texte { max-width: 42rem; }
.banniere h1 { color: #fff; }

.surtitre {
  margin: 0 0 .5rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
}

.banniere .accroche { color: #c3ccd5; font-size: 1.15rem; }
.banniere__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Bande de chiffres --------------------------------------------------- */
.bande {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}

.bande__chiffre { flex: 0 0 auto; }
.bande__chiffre p { margin: 0; color: var(--texte-doux); max-width: 14rem; }
.chiffre { font-size: 2.4rem; font-weight: 750; color: var(--accent); line-height: 1; }
.bande__texte { flex: 1 1 22rem; margin: 0; font-size: 1.1rem; }

/* Cartes -------------------------------------------------------------- */
.cartes {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.4rem;
}

.carte p { margin: 0; color: var(--texte-doux); }
.carte--accent { border-color: var(--accent); background: var(--accent-clair); }
.carte--accent p { color: var(--texte); }
.lien-fort { font-weight: 650; }

/* Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-block;
  padding: .65rem 1.3rem;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  font-size: 1rem;
  border: 2px solid var(--accent);
  cursor: pointer;
  font-family: inherit;
}
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }

.bouton--creux { background: transparent; color: #fff; border-color: #56646f; }
.bouton--creux:hover { background: #ffffff1a; border-color: #ffffff80; }

/* Pied ---------------------------------------------------------------- */
.pied {
  background: var(--encre);
  color: #b9c4ce;
  margin-top: 3rem;
  padding: 2.25rem 0 1.25rem;
  font-size: .95rem;
}

.pied a { color: #e5ebf0; }
.pied p { margin: 0 0 .3rem; }
.pied__nom { font-weight: 700; color: #fff; font-size: 1.05rem; }

.pied__grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: 1.5rem;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #2a343e;
  padding-top: 1rem;
}

/* Version et date de compilation : presentes mais discretes. Pour les retirer,
   supprimer ce bloc et le paragraphe correspondant dans partials/pied.html. */
.pied__version { font-size: .8rem; opacity: .7; }

/* Galeries -------------------------------------------------------------- */
.galerie {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  margin: 1.5rem 0 2.5rem;
}

.galerie__item {
  display: block;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--fond-appui);
  line-height: 0;
}

.galerie__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .25s ease;
}

.galerie__item:hover img, .galerie__item:focus-visible img { transform: scale(1.04); }
.galerie__item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Visionneuse : ouverte par site.js, inerte sans JavaScript — le lien mene
   alors simplement a la photo en grand, ce qui reste utilisable. */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  background: #000000ee;
}

.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--rayon); }
.visionneuse figcaption { color: #e8eaec; font-size: .95rem; text-align: center; }

.visionneuse__fermer, .visionneuse__precedent, .visionneuse__suivant {
  position: absolute;
  background: #ffffff1f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.75rem; height: 2.75rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.visionneuse__fermer { top: 1rem; right: 1rem; }
.visionneuse__precedent { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse__suivant { right: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse button:hover { background: #ffffff38; }
.visionneuse button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Chronologie ----------------------------------------------------------- */
.chronologie { list-style: none; margin: 1.5rem 0 3rem; padding: 0 0 0 1.25rem; border-left: 2px solid var(--bord); }
.chronologie li { position: relative; padding: 0 0 1.5rem 1rem; }
.chronologie li::before {
  content: "";
  position: absolute;
  left: -1.6rem; top: .45rem;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: var(--accent);
}
.chronologie .annee {
  display: block;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.chronologie p { margin: .2rem 0 0; color: var(--texte-doux); }

/* Marques et divers ------------------------------------------------------ */
.enseigne { padding-top: 1rem; }
.enseigne h2 { margin-bottom: .2rem; }
.enseigne__quoi { font-weight: 400; font-size: 1rem; color: var(--texte-doux); }
.enseigne > p { color: var(--texte-doux); margin-top: 0; }

.liste-services { margin: 1rem 0 2rem; padding-left: 1.2rem; color: var(--texte-doux); }
.liste-services li { margin-bottom: .4rem; }

.coordonnees { margin: 0; }
.coordonnees dt {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 650; margin-top: 1.5rem;
}
.coordonnees dt:first-child { margin-top: 0; }
.coordonnees dd { margin: .2rem 0 0; }
.gros-lien { font-size: 1.3rem; font-weight: 650; text-decoration: none; }
.gros-lien:hover { text-decoration: underline; }

/* Bande de logos : « contain » et fond clair, pour ne pas recadrer un logo,
   qui perd tout son sens des qu'on le rogne. */
.logos {
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  align-items: center;
  margin: 1.5rem 0;
  padding: 0;
}
.logos li {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
}
.logos img { max-width: 100%; max-height: 3.5rem; object-fit: contain; }

/* Marques citees sans photo : une simple liste, plutot qu'une section vide. */
.marques-simples {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1rem 0 2rem;
  padding: 0;
}
.marques-simples li {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: .6rem 1rem;
}

/* Portrait du fondateur : a cote du texte sur grand ecran, dessous sur petit.
   L'original le faisait flotter a droite, ce qui se comporte mal en dessous de
   500 px de large. */
.intro-portrait {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 46rem) {
  .intro-portrait { grid-template-columns: 1fr; }
}

.portrait { margin: 0; }
.portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--rayon);
  border: 3px solid var(--encre);
}

/* « Le saviez-vous ? » : un encart d'accent, sur fond de la couleur chaude du
   site, pour qu'il se detache du reste de la page d'accueil. */
.saviez-vous {
  background: var(--accent-clair);
  border-left: 4px solid var(--accent);
  border-radius: var(--rayon);
  padding: 1.4rem 1.6rem;
  margin-top: 3rem;
  max-width: var(--largeur);
}
.saviez-vous h2 { margin-top: 0; }
.saviez-vous p { margin: 0 0 .4rem; }
.saviez-vous p:last-child { margin-bottom: 0; }

/* Horaires : deux colonnes serrees, alignees sur des chiffres tabulaires pour
   que les heures se lisent en colonne. */
.horaires {
  display: grid;
  grid-template-columns: auto auto;
  gap: .15rem .9rem;
  justify-content: start;
  margin: 0;
}
.horaires dt { color: inherit; }
.horaires dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Plan d'acces. Attention : la classe « carte » est deja prise par les encarts
   de l'accueil — d'ou « plan », qui evite un second cadre autour de l'image. */
.plan { margin: 0; }
.plan img {
  width: 100%;
  height: auto;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  display: block;
  background: var(--fond-appui);
}
.plan figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  color: var(--texte-doux);
}

.coordonnees .horaires { margin-top: .1rem; }
.coordonnees .horaires dt {
  margin-top: 0;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  color: inherit;
}

/* Page contact : coordonnees a gauche, adresse et carte a droite. */
.contact {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
  padding-bottom: 3rem;
}

@media (max-width: 46rem) {
  .contact { grid-template-columns: 1fr; }
}

.contact__coordonnees {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.4rem;
}
.contact__coordonnees h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.contact__coordonnees p { margin: 0 0 .7rem; }

/* En-tete collant : sur les pages longues — galeries, catalogue — on garde la
   navigation sous la main sans devoir remonter.
   z-index 20 : au-dessus du contenu, mais sous la visionneuse de galerie (50),
   qui doit pouvoir le recouvrir.
   max-height : sur telephone, le menu deplie pourrait depasser l'ecran ; il
   devient defilant plutot que de tout recouvrir. */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  max-height: 100vh;
  overflow-y: auto;
}

/* Une cible d'ancre ne doit pas se retrouver cachee derriere l'en-tete. */
:target { scroll-margin-top: 6rem; }