/* ══════════════════════════════════════════════════════════
   Café des Arts et Métiers · feuille commune
   Reprise à l'identique du thème Blocksy + Elementor d'origine : valeurs
   relevées sur le site WordPress (couleurs de la palette Blocksy, tailles,
   espacements, points de rupture 690 / 768 / 1000 / 1025 px).
   Chargée partout. Les sections propres à une page vivent dans
   accueil.css, contact.css et legal.css.
   ══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/gelasio-700-latin.woff2") format("woff2");
}

:root {
  --beige: #CBBBA0;        /* palette Blocksy 1, 6 et 8 */
  --creme: #F5F4F1;        /* palette 2 et 5 : fond du site */
  --brun: #7E6C4E;         /* bandeaux des pages intérieures */
  --brun-clair: #968568;
  --beige-fonce: #ac9f89;  /* survol du bouton d'en-tête */
  --texte: #000;
  --police: "Karla", sans-serif;
  --police-titre: "Gelasio", Georgia, serif;
  --ease: cubic-bezier(.455, .03, .515, .955);
  --bord: 88vw;            /* marge latérale du thème : 88vw sous 690 px, 90vw au-delà */
}
@media (min-width: 690px) {
  :root { --bord: 90vw; }
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.5;
  color: var(--texte);
}
h2 { font-size: 30px; }
@media (min-width: 1000px) {
  h2 { font-size: 35px; }
}
p, ul { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
strong { font-weight: 700; }
main:focus { outline: none; }

.am-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.am-skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: #fff;
  color: #000;
  font-weight: 700;
  text-decoration: none;
}
.am-skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--brun); outline-offset: 2px; }

/* ── Conteneurs ─────────────────────────────────────────── */
/* .am-wrap : conteneur du thème (en-tête, pied de page).
   .am-box  : conteneur « boxed » des sections. Mesuré sur l'original : le
   gabarit pleine largeur de Blocksy impose sa propre largeur (90vw, 1290 px
   max) aux conteneurs Elementor, dont la limite de 1140 px ne joue pas.   */
.am-wrap,
.am-box { width: min(var(--bord), 1290px); margin-inline: auto; }

/* ── Bouton (bouton d'appel de l'en-tête) ───────────────── */
.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 5px 20px;
  border-radius: 3px;
  background: var(--beige);
  color: #000;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
.am-btn:hover { background: var(--beige-fonce); color: #fff; }

/* ══ En-tête transparent, posé sur la première section ══════ */
.am-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
}
.am-header__top { display: none; }
.am-header__main { height: 70px; }
.am-header__row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.am-logo { display: block; flex: none; }
.am-logo img { width: auto; height: 55px; }
.am-nav, .am-header__cta { display: none; }

.am-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-right: -11px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  transition: color .12s var(--ease);
}
.am-burger:hover { color: #fff; }
.am-burger svg { width: 18px; height: 14px; fill: currentColor; }

@media (min-width: 690px) {
  .am-logo img { height: 35px; }
}

@media (min-width: 1000px) {
  .am-header__top { display: block; height: 50px; }
  .am-header__top .am-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .am-header__top p { font-size: 15px; line-height: 1.3; color: rgba(255, 255, 255, .7); }

  .am-header__main { height: 120px; }
  .am-header__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .am-logo img { height: 90px; }
  .am-burger { display: none; }

  .am-nav { display: block; }
  .am-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
  .am-nav a {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 30px;
    color: var(--creme);
    font-size: 17px;
    line-height: 1.3;
    text-decoration: none;
  }
  /* Indicateur du thème (menu « type 2 ») : trait blanc sous le lien */
  .am-nav a::after {
    content: "";
    position: absolute;
    left: 30px; bottom: 0;
    width: 0; height: 2px;
    background: #fff;
    transition: width .12s var(--ease);
  }
  .am-nav a:hover::after,
  .am-nav a.is-active::after { width: calc(100% - 60px); }

  .am-header__cta { display: inline-flex; justify-self: end; }
}

/* ── Bandeau brun des pages intérieures (sous l'en-tête) ─── */
.am-pagehead span { display: block; }
.am-pagehead span:first-child { height: 90px; background: var(--brun); }
.am-pagehead span:last-child  { display: none; height: 120px; background: var(--brun-clair); }
@media (min-width: 768px) {
  .am-pagehead span:first-child { height: 50px; }
  .am-pagehead span:last-child  { display: block; }
}

/* ══ Tiroir de navigation (sous 1000 px) ═══════════════════ */
.am-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  overflow-y: auto;
  background: var(--creme);
  opacity: 1;
  transition: opacity .2s var(--ease);
}
.am-drawer[hidden] { display: none; }
.am-drawer.is-opening { opacity: 0; }
.am-drawer__close {
  position: absolute;
  top: 10px; right: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
}
.am-drawer__close svg { width: 12px; height: 12px; fill: currentColor; }
/* Contenu aligné en haut, comme le panneau Blocksy d'origine */
.am-drawer__inner {
  width: 100%;
  padding: 67px 35px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.am-drawer__inner nav { width: 100%; }
.am-drawer__logo img { width: auto; height: 70px; }
.am-drawer__menu {
  list-style: none;
  margin: 0; padding: 0;
}
.am-drawer__menu a {
  display: block;
  padding: 25.5px 0;
  color: rgba(0, 0, 0, .7);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.am-drawer__menu a:hover,
.am-drawer__menu a[aria-current] { color: #000; }
@media (min-width: 690px) {
  .am-drawer__menu a { padding: 8.5px 0; }
}
@media (min-width: 1000px) {
  .am-drawer { display: none !important; }
}
body.is-drawer-open { overflow: hidden; }

/* ══ Pied de page ══════════════════════════════════════════ */
.am-footer { background: var(--beige); color: #000; }
.am-footer a { color: #000; text-decoration: none; transition: color .12s var(--ease); }
.am-footer a:hover { color: var(--creme); }
.am-footer ul { list-style: none; padding: 0; }

.am-footer__top .am-wrap { padding: 60px 0; }
.am-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.am-footer__brand img { width: 75px; height: 75px; }

.am-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  padding: 40px 0;
  text-align: center;
}

.am-footer__bottom .am-wrap { padding: 15px 0; text-align: center; }
.am-footer__copy { font-size: 15px; line-height: 1.3; }
.am-footer__copy a { color: #fff; }
.am-footer__copy a:hover { color: #e1e1e1; }

@media (min-width: 690px) {
  .am-footer__top .am-wrap { padding: 80px 0; }
  .am-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;
    padding: 50px 0;
    text-align: left;
  }
  .am-footer__col--links,
  .am-footer__col--address { text-align: center; }
  .am-footer__bottom .am-wrap { padding: 25px 0; }
}

@media (min-width: 1000px) {
  .am-footer__top .am-wrap {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    column-gap: 50px;
    padding: 100px 0;
  }
  .am-footer__brand { grid-column: 2; }
  .am-footer__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 25px 0;
  }
  .am-footer__col--links,
  .am-footer__col--address { text-align: left; }
  .am-footer__bottom .am-wrap { text-align: left; }
}