@charset "utf-8";
/* ==========================================================================
   AADW — Atelier d'Architecture Danielle Weidert
   Feuille de style écrite à la main, sans framework.
   Valeurs typographiques et de mise en page relevées sur le site d'origine
   (thème Oshin) : voir SPEC.md §2 et §4.
   ========================================================================== */

:root {
  /* --- Police ---------------------------------------------------------- */
  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* --- Couleurs -------------------------------------------------------- */
  --bg: #ffffff;
  --menu-bg: #ffffff;
  --text: #37383a;
  --heading: #303132;
  --heading-h4: #222222;
  --muted: rgba(72, 72, 72, 1);
  --accent: rgba(121, 121, 121, 1);
  --accent-hover: rgba(126, 211, 33, 1);
  --rule: rgba(0, 0, 0, 0.08);
  --placeholder: #e5e5e5;

  /* --- Mise en page ---------------------------------------------------- */
  --sidebar-width: 280px;
  --wrap-max: 1160px;
  --wrap-pad: 30px;
  --section-pad: 40px;

  /* --- Galerie justifiée ----------------------------------------------- */
  --jg-row-height: 200px;
  --jg-gutter: 10px;

  /* --- Transitions ----------------------------------------------------- */
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ==========================================================================
   1. Réinitialisation minimale
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

img { border: 0; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; }

.clearfix::after { content: ""; display: table; clear: both; }

/* ==========================================================================
   2. Échelle typographique (relevée dans _source/css/typehub-output.css)
   ========================================================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--font);
  font-style: normal;
  text-transform: none;
  margin: 0 0 20px;
}

h1, .h1 { font-weight: 700; font-size: 80px; line-height: 90px; letter-spacing: 0;   color: var(--heading); }
h2, .h2 { font-weight: 700; font-size: 42px; line-height: 63px; letter-spacing: 0;   color: var(--heading); }
h3, .h3 { font-weight: 400; font-size: 32px; line-height: 46px; letter-spacing: 1px; color: var(--heading); }
h4, .h4 { font-weight: 500; font-size: 26px; line-height: 40px; letter-spacing: 0;   color: var(--heading-h4); }
h5, .h5 { font-weight: 300; font-size: 20px; line-height: 30px; letter-spacing: 0;   color: var(--heading); }
h6, .h6 { font-weight: 300; font-size: 13px; line-height: 20px; letter-spacing: 0;   color: var(--heading); }

p { margin: 0 0 20px; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* Réduction typographique mobile (relevée dans typehub-output.css) */
@media only screen and (max-width: 767px) {
  h1, .h1 { font-size: 36px; line-height: 50px; }
  h2, .h2 { font-size: 30px; line-height: 44px; }
  h3, .h3 { font-size: 25px; line-height: 38px; }
  h4, .h4 { font-size: 20px; line-height: 34px; }
  h5, .h5 { font-size: 18px; line-height: 32px; }
  h6, .h6 { font-size: 16px; line-height: 29px; }
}

/* ==========================================================================
   3. Menu latéral fixe (280px)
   ========================================================================== */

.be-sidemenu {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  z-index: 15;
  background: var(--menu-bg);
  overflow-y: auto;
  overflow-x: hidden;
}

#be-sidemenu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 35px;
  box-sizing: border-box;
}

.be-sidemenu .special-header-logo,
.be-sidemenu .special-header-menu {
  width: 100%;
  padding: 20px 0;
  margin: 0;
  text-align: center;
}

.be-sidemenu .special-header-logo { padding-top: 0; }
.be-sidemenu .special-header-logo img { display: inline-block; max-width: 100%; }

.be-sidemenu .special-header-menu {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- niveau 1 --- */
.special-header-menu .menu-container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-weight: 300;
  font-size: 20px;
  line-height: 25px;
  color: var(--muted);
}

.special-header-menu .menu-item {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 0 12px;
  text-align: center;
}

.special-header-menu .menu-item > a,
.special-header-menu .menu-item > .menu-no-link {
  display: inline-block;
  color: inherit;
  transition: color 0.3s ease;
}

.special-header-menu .menu-item > .menu-no-link { cursor: default; }
.special-header-menu a:hover { color: var(--heading); }
.special-header-menu .current-menu-item > a { color: var(--heading); }

/* --- sous-menus (niveaux 2 et 3) --- */
.special-header-menu .sub-menu {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
  font-weight: 300;
  font-size: 13px;
  line-height: 15px;
  color: var(--muted);
}

.special-header-menu .sub-menu .menu-item { margin: 0 0 8px; }
.special-header-menu .sub-menu .sub-menu { margin: 6px 0 0; }
.special-header-menu .sub-menu .sub-menu .menu-item { margin: 0 0 6px; }

/* ==========================================================================
   4. En-tête mobile (sous 1024px)
   ========================================================================== */

#left-header-mobile,
.header-mobile-navigation { display: none; }

#left-header-mobile {
  background: var(--menu-bg);
  border-bottom: 1px solid var(--rule);
}

#left-header-mobile .logo {
  float: left;
  margin-left: 30px;
  padding: 20px 0;
}

#left-header-mobile .logo img { display: block; max-height: 70px; width: auto; }

.mobile-nav-controller-wrap {
  float: right;
  margin: 0 30px 0 15px;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 70px;
}

.mobile-nav-controller {
  display: inline-block;
  padding: 20px 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
}

/* Hamburger 3 traits (18px x 2px, écarts de 5px — relevé du thème) */
.be-mobile-menu-icon {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 2px;
  background-color: #323232;
  vertical-align: middle;
}

.be-mobile-menu-icon span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transition: transform 0.5s var(--ease), top 0.5s var(--ease), opacity 0.2s;
}

.be-mobile-menu-icon .hamburger-line-1 { top: -5px; }
.be-mobile-menu-icon .hamburger-line-2 { top: 0; }
.be-mobile-menu-icon .hamburger-line-3 { top: 5px; }

.mobile-nav-controller[aria-expanded="true"] .be-mobile-menu-icon { background-color: transparent; }
.mobile-nav-controller[aria-expanded="true"] .hamburger-line-1 { top: 0; transform: rotate(-45deg); }
.mobile-nav-controller[aria-expanded="true"] .hamburger-line-2 { opacity: 0; }
.mobile-nav-controller[aria-expanded="true"] .hamburger-line-3 { top: 0; transform: rotate(45deg); }

/* --- menu déroulant plein largeur --- */
.header-mobile-navigation {
  background: var(--menu-bg);
  border-bottom: 1px solid var(--rule);
}

ul#mobile-menu,
ul#mobile-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul#mobile-menu { padding: 10px 30px 20px; }

ul#mobile-menu .menu-item { position: relative; }

ul#mobile-menu a,
ul#mobile-menu .menu-no-link {
  display: block;
  font-weight: 500;
  font-size: 15px;
  line-height: 40px;
  color: var(--text);
}

ul#mobile-menu .sub-menu a,
ul#mobile-menu .sub-menu .menu-no-link {
  font-weight: 400;
  font-size: 13px;
  line-height: 27px;
  color: var(--text);
}

ul#mobile-menu .sub-menu { display: none; padding-left: 15px; }
ul#mobile-menu .sub-menu.is-open { display: block; }

/* bouton d'ouverture des sous-menus : chevron dessiné en CSS */
.mobile-sub-menu-controller {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.mobile-sub-menu-controller::before,
.mobile-sub-menu-controller::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--text);
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}

.mobile-sub-menu-controller::before { width: 11px; height: 1px; }
.mobile-sub-menu-controller::after  { width: 1px; height: 11px; }
.mobile-sub-menu-controller[aria-expanded="true"]::after { opacity: 0; }

ul#mobile-menu .sub-menu .mobile-sub-menu-controller { height: 27px; }

/* ==========================================================================
   5. Conteneur principal
   ========================================================================== */

#main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content { flex: 1 0 auto; }

.be-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
  position: relative;
}

.page-section { padding: var(--section-pad) 0; }

.inline-text { margin-bottom: 20px; }
.align-center { text-align: center; }
.inline-text h5,
.inline-text h6 { margin-bottom: 0; }
.inline-text h6 + h6 { margin-top: 15px; }

/* Largeurs de contenu relevées dans themes_oshin_css_layout.css */
@media only screen and (max-width: 1440px) { :root { --wrap-max: 980px; } }
@media only screen and (max-width: 1279px) { :root { --wrap-max: 940px; } }
@media only screen and (max-width: 959px)  { :root { --wrap-max: 740px; } }
@media only screen and (max-width: 767px)  { :root { --wrap-max: 440px; --wrap-pad: 20px; } }
@media only screen and (max-width: 479px)  { :root { --wrap-max: 340px; } }

/* ==========================================================================
   6. Galerie justifiée
   --------------------------------------------------------------------------
   Sans JavaScript : flexbox. Chaque vignette reçoit en ligne
   flex-basis = rapport x 200px et flex-grow = rapport ; l'espace libre d'une
   rangée est donc réparti proportionnellement au rapport, ce qui produit
   exactement une rangée justifiée. Le pseudo-élément ::after absorbe l'espace
   de la dernière rangée pour qu'elle ne soit pas étirée.
   Avec JavaScript (classe .jg-ready) : largeurs et hauteurs calculées au pixel.
   ========================================================================== */

.justified-gallery-outer-wrap { margin-bottom: 20px; }

.justified-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jg-gutter);
  width: 100%;
  position: relative;
}

.justified-gallery::after {
  content: "";
  flex-grow: 1000000;
  flex-basis: 0;
  min-width: 0;
}

.justified-gallery .element {
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.justified-gallery .element-inner {
  position: relative;
  overflow: hidden;
  display: block;
}

.justified-gallery .thumb-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
  aspect-ratio: var(--ar, 1.5);
}

.justified-gallery .flip-img-wrap {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.justified-gallery .thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Effet c_to_bw : couleur par défaut, désaturation au survol */
.element.c_to_bw .element-inner .thumb-img {
  filter: grayscale(0%);
  transition: filter 0.4s ease;
}

.element.c_to_bw .element-inner:hover .thumb-img,
.element.c_to_bw .element-inner:focus-within .thumb-img {
  filter: grayscale(100%);
}

/* Légendes de vignette — pilotées par `gallery_captions` dans site.config.json.
   Le site d'origine place la légende dans le DOM sans jamais la rendre visible
   (`.justified-gallery > div > .caption { display: none }`, et aucun script n'ajoute
   la classe `caption-visible` que le CSS du thème attend). Voir SPEC.md §2. */

/* "hidden" (défaut) — fidèle : masquée visuellement, conservée pour les lecteurs
   d'écran et les moteurs. Surtout pas `display: none`, qui la retirerait de
   l'arbre d'accessibilité. */
.captions-hidden .justified-gallery .caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "below" — légende affichée sous la vignette */
.captions-below .justified-gallery .caption {
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--heading);
  padding: 6px 0 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "overlay" — bandeau noir en bas de l'image, révélé au survol : ce que le CSS
   d'origine décrit sans jamais l'activer. */
.captions-overlay .justified-gallery .element { position: relative; }

.captions-overlay .justified-gallery .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding-left: 10px;
  background-color: #000000;
  color: #ffffff;
  font-weight: 300;
  font-size: 13px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease-in;
}

.captions-overlay .justified-gallery .element:hover .caption,
.captions-overlay .justified-gallery .element:focus-within .caption { opacity: 0.7; }

/* Rangées calculées par site.js */
.justified-gallery.jg-ready .thumb-wrap {
  aspect-ratio: auto;
  height: var(--jg-h);
}

/* Repli en grille si le JavaScript est indisponible ET flexbox trop étroit */
@media only screen and (max-width: 479px) {
  .justified-gallery { display: grid; grid-template-columns: 1fr; }
  .justified-gallery::after { display: none; }
  .justified-gallery .element { flex: none !important; }
  .justified-gallery.jg-ready .thumb-wrap { height: auto; aspect-ratio: var(--ar, 1.5); }
}

/* ==========================================================================
   7. Bouton « Retour »
   ========================================================================== */

.back-button-wrap {
  margin: 0;
  text-align: right;
}

/* Relevé exact (bloc <style> inline dans le contenu de chaque page projet et
   catégorie, cf. _source/pages_html/3442.html). Dans la source, `border`,
   `background-color`, `color`, `border-radius`, `box-shadow` ainsi que `:hover` et
   `:active` sont TOUS commentés : le bouton garde l'apparence par défaut du
   navigateur et n'a aucun effet de survol. Voir SPEC.md §4. */
.back-button {
  margin: 20px 0 0;
  padding: 14px;
  font-family: var(--font);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0;
  cursor: pointer;
  outline: none;
  transition: 0.2s;
}

/* Ajout hors relevé : sans indicateur de focus le bouton devient inutilisable au
   clavier, `outline: none` de la source supprimant le contour par défaut. */
.back-button:focus-visible {
  outline: 2px solid var(--heading);
  outline-offset: 2px;
}

/* ==========================================================================
   8. Diaporama des pages projet
   --------------------------------------------------------------------------
   Sans JavaScript : simple liste verticale d'images (dégradation gracieuse).
   Avec JavaScript (classe .is-ready) : une seule image visible à la fois.
   ========================================================================== */

.slideshow {
  position: relative;
  margin: 0 0 30px;
}

.slideshow .slides {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slideshow .slide { margin: 0; }
.slideshow .slide + .slide { margin-top: var(--jg-gutter); }

.slideshow .slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- sans JavaScript : on masque les commandes --- */
.slideshow:not(.is-ready) .slide-nav,
.slideshow:not(.is-ready) .slide-dots { display: none; }

/* --- avec JavaScript --- */
.slideshow.is-ready .slides { position: relative; }

.slideshow.is-ready .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.slideshow.is-ready .slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.slideshow.is-ready .slideshow-viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

/* --- flèches --- */
.slide-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.2s linear;
  z-index: 3;
}

.slideshow:hover .slide-nav,
.slide-nav:focus-visible { opacity: 1; }

.slide-nav:hover { background: rgba(255, 255, 255, 0.95); }
.slide-prev { left: 0; }
.slide-next { right: 0; }

.slide-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--heading);
  border-right: 1px solid var(--heading);
}

.slide-prev::before { transform: translate(-40%, -50%) rotate(-135deg); }
.slide-next::before { transform: translate(-60%, -50%) rotate(45deg); }

/* --- points de pagination --- */
.slide-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.slide-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s linear, border-color 0.2s linear;
}

.slide-dot.is-active { background: var(--accent); }
.slide-dot:hover { border-color: var(--accent-hover); background: var(--accent-hover); }

/* Description de projet : h6 justifié (relevé du site d'origine) */
.project-description {
  text-align: justify;
  margin: 15px 0 0;
}

/* ==========================================================================
   9. Pages statiques
   ========================================================================== */

.page-body { text-align: center; }
.page-body > *:last-child { margin-bottom: 0; }

.page-body h3,
.page-body h4,
.page-body h5 { margin: 30px 0 15px; }
.page-body > h3:first-child,
.page-body > h4:first-child { margin-top: 0; }

.page-body p,
.page-body ul,
.page-body ol { font-weight: 300; font-size: 13px; line-height: 20px; color: var(--heading); }

.page-body ul,
.page-body ol { display: inline-block; text-align: left; margin: 0 0 20px; padding-left: 18px; }
.page-body li { margin-bottom: 8px; }

.page-body a { text-decoration: underline; }

.page-body blockquote {
  margin: 0 0 20px;
  padding: 0 20px;
  border-left: 2px solid var(--rule);
  text-align: left;
  display: inline-block;
  max-width: 100%;
}

.page-body img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.page-body .md-figure { display: block; margin: 0 0 20px; }
.page-body .md-figure img { cursor: zoom-in; }

.page-body table {
  border-collapse: collapse;
  margin: 0 auto 20px;
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--heading);
}

.page-body th,
.page-body td {
  padding: 4px 20px 4px 0;
  text-align: left;
  vertical-align: top;
}

.page-body td:last-child,
.page-body th:last-child { padding-right: 0; }

/* La photo de l'Atelier est limitée à 40 % de la largeur (relevé) */
.page-atelier .page-body .md-figure img { max-width: 40%; }

/* Bouton d'appel à l'action (module bouton Tatsu de la page l'Atelier).
   Relevé : background rgba(121,121,121,1), color #ffffff, border-width 2px,
   :hover background rgba(126,211,33,1), bloc centré, icône téléphone à gauche.
   L'icône d'origine vient de la police icomoon du thème ; elle est ici redessinée
   en SVG inline pour éviter d'embarquer une police d'icônes. */
.cta-wrap { text-align: center; margin: 0; }

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid var(--accent);
  background-color: var(--accent);
  color: #ffffff;
  font-family: var(--font);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
  transition: background-color 0.2s linear, border-color 0.2s linear;
}

.cta-button:hover,
.cta-button:focus-visible {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #ffffff;
}

.cta-icon { flex: none; }

@media only screen and (max-width: 767px) {
  .page-atelier .page-body .md-figure img { max-width: 100%; }
  .page-body p,
  .page-body ul,
  .page-body ol,
  .page-body table { font-size: 16px; line-height: 29px; }
}

/* ==========================================================================
   10. Boîte à lumière (pages statiques)
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(255, 255, 255, 0.96);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox.is-open { opacity: 1; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  cursor: zoom-out;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.lightbox-close::before,
.lightbox-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--heading);
}

.lightbox-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

body.lightbox-open { overflow: hidden; }

/* ==========================================================================
   11. Pied de page (3 colonnes)
   ========================================================================== */

#footer {
  flex: 0 0 auto;
  position: relative;
  padding: 40px 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--muted);
}

#footer .footer-border {
  display: block;
  height: 1px;
  background: var(--rule);
  margin-bottom: 40px;
}

#footer-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
}

#footer .footer-area { flex: 1 1 220px; min-width: 0; }
#footer .footer-area-1 { text-align: left; }
#footer .footer-area-2 { text-align: center; }
#footer .footer-area-3 { text-align: right; }

#footer h6,
#footer p {
  margin: 0;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

#footer .footer-title { margin-bottom: 2px; }
#footer a { color: #000000; }
#footer a:hover { color: var(--accent-hover); }

#footer .footer-social { margin-top: 4px; }

#footer .footer-social a {
  display: inline-block;
  margin: 6px 0 6px 10px;
  vertical-align: middle;
}

#footer .footer-social img {
  display: inline-block;
  vertical-align: middle;
  height: auto;
  transition: opacity 0.2s linear;
}

#footer .footer-social a:hover img { opacity: 0.7; }

/* ==========================================================================
   12. Bascule mobile : sous 1024px, en-tête mobile + menu déroulant
   ========================================================================== */

@media only screen and (max-width: 1023px) {
  .be-sidemenu { display: none; }

  #left-header-mobile { display: block; }
  #left-header-mobile::after { content: ""; display: table; clear: both; }

  .header-mobile-navigation { display: none; }
  .header-mobile-navigation.is-open { display: block; }

  #main-wrapper { margin-left: 0; }

  #footer .footer-area-1,
  #footer .footer-area-2,
  #footer .footer-area-3 { text-align: center; }

  #footer .footer-social a { margin: 6px 5px; }
}

@media only screen and (max-width: 767px) {
  #footer-wrap { flex-direction: column; gap: 25px; }
  #footer .footer-area { flex: 1 1 auto; width: 100%; }
  #left-header-mobile .logo { margin-left: 20px; }
  .mobile-nav-controller-wrap { margin-right: 20px; }
  ul#mobile-menu { padding: 10px 20px 20px; }
}

/* ==========================================================================
   13. Impression / accessibilité
   ========================================================================== */

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}