/* =========================================================
   Aile Théâtre — base.css : le socle commun des pages au style de l'accueil.
   Polices (Cabin, Open Sans), variables (couleurs, marges), base, boutons et liens, nav, champs et messages de formulaire,
   FAQ repliée, pied de page, bouton pause, mouvement réduit. Chaque page charge base.css puis sa feuille (accueil.css, atelier.css…).
   ========================================================= */

/* ── Polices auto-hébergées (fontsource, licence OFL : /fonts/OFL-*.txt) ── */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/cabin-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/open-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/open-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette */
  --blanc:   #ffffff;      /* couleur principale : fonds, cartes, nav */
  --encre:   #111111;      /* texte : 18,9:1 sur blanc */
  --gris:    #555555;      /* texte secondaire (ailetheatre.com) : 7,5:1 */
  --filet:   #e3e3e3;      /* séparateurs */
  --bleu:    #002a3d;      /* ailetheatre.com : 15:1 sur blanc, porte texte et boutons */
  --bleu-lt: #0d4560;      /* survol des boutons bleus */
  --orange:  #e8540c;      /* ailetheatre.com : 3,68:1 sur blanc → jamais de texte, seulement traits et repères */

  /* Typo */
  --titre:   'Cabin', system-ui, sans-serif;
  --texte:   'Open Sans', system-ui, sans-serif;

  /* Espace */
  --marge:   clamp(1rem, 5vw, 3rem);
  --vide:    clamp(6rem, 14vw, 12rem);       /* respiration verticale entre les écrans */
  --ease:    cubic-bezier(.4, 0, .2, 1);
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--texte);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; color: inherit; border: none; background: none; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.1; text-wrap: balance; }

/* Sections hors premier écran : rendues à l'approche */
main > section, .footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ── Bouton et lien ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  padding: .95rem 1.75rem;
  border-radius: 3px;
  background: var(--bleu);
  color: var(--blanc);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  transition: background .2s var(--ease);
}
.btn:hover { background: var(--bleu-lt); }
.btn--contour { background: var(--blanc); color: var(--bleu); box-shadow: inset 0 0 0 1.5px var(--bleu); }
.btn--contour:hover { background: var(--blanc); box-shadow: inset 0 0 0 2.5px var(--bleu); }
.lien {
  display: inline-block;
  font-weight: 500;
  color: var(--bleu);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
}
.lien:hover { text-decoration-color: var(--bleu); }

/* ── NAV : blanche, toujours ────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--blanc);
  transition: box-shadow .3s var(--ease);
}
.nav.scrolled { box-shadow: 0 1px 0 var(--filet); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 68px;
  max-width: calc(1300px + 2 * var(--marge));
  margin: 0 auto;
  padding: 0 var(--marge);
}
.nav__logo { display: flex; flex: none; }
.nav__logo img { width: 40px; height: 40px; }
.nav__links { display: flex; align-items: center; gap: 2rem; margin-left: auto; list-style: none; }
.nav__links a,
.nav__more { font-size: .875rem; font-weight: 500; color: var(--gris); transition: color .2s; }
.nav__links a:hover,
.nav__more:hover,
.nav__more[aria-expanded="true"] { color: var(--bleu); }
.nav__actions { display: flex; align-items: center; gap: .75rem; }
.nav__cta,
.nav__cta-b2b {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1.1rem;
  border-radius: 3px;
  font-size: .875rem;
  font-weight: 500;
}
.nav__cta { background: var(--bleu); color: var(--blanc); }
.nav__cta:hover { background: var(--bleu-lt); }
.nav__cta-b2b { border: 1px solid var(--bleu); color: var(--bleu); }
.nav__cta-b2b:hover { background: var(--bleu); color: var(--blanc); }
.nav__flat { display: none; }
@media (min-width: 1350px) {
  .nav__group { display: none; }
  .nav__flat { display: block; }
}
@media (min-width: 1070px) {
  .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav__links { margin-left: 0; }
  .nav__actions { justify-self: end; }
}

/* Menu « Ateliers » : motif disclosure (js/main.js) */
.nav__group { position: relative; }
.nav__more { display: inline-flex; align-items: center; gap: .45em; }
.nav__more::after {
  content: '';
  width: .4em;
  height: .4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -.15em;
}
.nav__more[aria-expanded="true"]::after { rotate: 225deg; translate: 0 .1em; }
.nav__sub {
  position: absolute;
  top: calc(100% + 1rem);
  left: -1rem;
  min-width: 14rem;
  padding: .5rem;
  list-style: none;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 3px;
  visibility: hidden;
}
.nav__sub::before { content: ''; position: absolute; inset: -1rem 0 auto; height: 1rem; }   /* pont pour la souris */
.nav__sub a { display: block; padding: .6rem .85rem; }
.nav__more[aria-expanded="true"] + .nav__sub,
html:not(.js) .nav__group:is(:hover, :focus-within) .nav__sub { visibility: visible; }

/* Burger */
.nav__toggle { display: none; flex-direction: column; gap: 5px; margin-left: auto; padding: 4px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--bleu); }
.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem var(--marge) 2rem;
  background: var(--blanc);
  border-top: 1px solid var(--filet);
}
.nav__mobile a,
.nav__mgroup summary { color: var(--encre); }
.nav__mgroup summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; }
.nav__mgroup summary::-webkit-details-marker { display: none; }
.nav__mgroup summary::after {
  content: '';
  width: .45em;
  height: .45em;
  margin-right: .3em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
}
.nav__mgroup[open] summary::after { rotate: 225deg; }
.nav__mgroup a { display: block; padding: .6rem 0 0 1rem; }
.nav__mobile :is(.nav__cta, .nav__cta-b2b) { align-self: flex-start; }
.nav__mobile .nav__cta { color: var(--blanc); }
@media (max-width: 849px) {
  .nav__links,
  .nav__actions { display: none; }
  .nav__toggle { display: flex; }
  .nav__mobile.open { display: flex; }
}

/* ── Champs et messages de formulaire (accueil : réservation ; plus tard : contact) ──
   Le préfixe resa__ vient du premier formulaire ; la classe désigne ici le composant « champ », partagé. */
.resa__champ { display: flex; flex-direction: column; gap: .4rem; }
.resa__champ label { font-size: .875rem; font-weight: 500; }
.resa__facultatif { font-weight: 400; color: var(--gris); }
.resa__champ input,
.resa__champ textarea {
  width: 100%;
  padding: .75rem .95rem;
  border: 1px solid #8a8a8a;   /* 3,4:1 sur blanc : limite visible du champ (WCAG 1.4.11) */
  border-radius: 3px;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
}
.resa__champ input:focus-visible,
.resa__champ textarea:focus-visible { outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.resa__champ textarea { resize: vertical; }
.resa__champ ::placeholder { color: #6e6e6e; }

.form-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-erreurs { padding: 1rem 1.25rem; border: 1px solid #b3261e; border-radius: 3px; background: #fbeaea; color: #7a1711; font-size: .9rem; }
.form-erreurs ul { margin: .4rem 0 0 1.1rem; }
.form-erreurs a { color: inherit; text-decoration: underline; }
.form-rgpd { margin-top: -1.75rem; max-width: 46rem; font-size: .8rem; color: var(--gris); }
.form-rgpd a { color: var(--bleu); text-decoration: underline; }
.form-ok { padding: 1.25rem 1.5rem; border-left: 3px solid var(--orange); font-family: var(--titre); font-size: 1.3rem; }
.form-ok:focus { outline: none; }
[aria-invalid="true"] { border-color: #b3261e !important; }

/* ── FAQ : repliée, discrète ────────────────────────────── */
.faq { max-width: calc(46rem + 2 * var(--marge)); margin: 0 auto; padding: calc(var(--vide) * .75) var(--marge); }
.faq__titre { font-size: 1.35rem; font-weight: 500; }
.faq__liste { margin-top: 1.5rem; border-top: 1px solid var(--filet); }
.faq__item { border-bottom: 1px solid var(--filet); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  list-style: none;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex: none;
  width: .45em;
  height: .45em;
  margin-right: .3em;
  border-right: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange);
  rotate: 45deg;
  translate: 0 -.15em;
}
.faq__item[open] summary::after { rotate: 225deg; translate: 0 .1em; }
.faq__item p { padding: 0 0 1.25rem; max-width: 40rem; font-size: .9375rem; color: var(--gris); }

/* ── FOOTER : le bleu en aplat ──────────────────────────── */
.footer { padding: 4rem var(--marge) 2rem; background: var(--bleu); color: #c4d0d6; font-size: .875rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1300px;
  margin: 0 auto;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.footer__brand { margin-bottom: .75rem; font-family: var(--titre); font-size: 1.3rem; font-weight: 500; color: var(--blanc); }
.footer__adresse { margin-top: 1.25rem; }
.footer__head { margin-bottom: .9rem; font-family: var(--titre); font-weight: 500; color: var(--blanc); }
.footer ul { display: flex; flex-direction: column; gap: .55rem; list-style: none; }
.footer a { color: #c4d0d6; }
.footer a:hover { color: var(--blanc); text-decoration: underline; }
.footer__note { font-size: .8rem; }
.footer__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; max-width: 1300px; margin: 0 auto; padding-top: 1.75rem; font-size: .8rem; }
.footer__legal { display: flex; gap: 1.5rem; }
.footer :focus-visible { outline-color: var(--blanc); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr; } }

/* ── Pause des animations : mosaïque, arche, mur d'avis (WCAG 2.2.2) ──────────────────── */
.pause {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 2.5rem;
  padding: 0 .9rem;
  border: 1px solid var(--bleu);
  border-radius: 100px;
  background: var(--blanc);
  color: var(--bleu);
  font-size: .8rem;
  font-weight: 500;
}
.pause[hidden] { display: none; }
.pause__icone { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.pause[aria-pressed="true"] .pause__icone { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.pause__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (min-width: 850px) {
  .pause:is(:hover, :focus-visible) .pause__libelle { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (max-width: 849px) {   /* dans la barre de nav, à gauche du burger */
  .pause { top: 18px; right: calc(var(--marge) + 32px + .75rem); bottom: auto; left: auto; z-index: 101; width: 2rem; height: 2rem; padding: 0; justify-content: center; }
}

/* ── Mouvement réduit : rien ne bouge ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pause { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}