/* Direction C — feuille dédiée au responsive. Chargée après direction-c.css/style.css :
   les règles ici peuvent surcharger la charte de base pour les petits écrans.
   Contient pour l'instant le menu mobile (toggle + panneau slide-in depuis la droite). */

/* TOGGLE (masqué en desktop, affiché en dessous du breakpoint) */
.dirC-navToggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.dirC-navToggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.dirC-navToggle[aria-expanded="true"] .dirC-navToggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dirC-navToggle[aria-expanded="true"] .dirC-navToggle__bar:nth-child(2) { opacity: 0; }
.dirC-navToggle[aria-expanded="true"] .dirC-navToggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* PANNEAU OFF-CANVAS (slide-in depuis la droite) */
.dirC-mobileMenu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 110;
  width: min(320px, 86vw);
  height: 100%;
  background: var(--paper);
  box-shadow: -12px 0 32px rgba(54, 73, 102, 0.18);
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
}
body.dirC-mobileMenu-open .dirC-mobileMenu { transform: translateX(0); }

.dirC-mobileMenu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(54, 73, 102, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
body.dirC-mobileMenu-open .dirC-mobileMenu__backdrop { opacity: 1; visibility: visible; }
body.dirC-mobileMenu-open { overflow: hidden; }

.dirC-mobileMenu__inner { display: flex; flex-direction: column; gap: 28px; height: 100%; padding: 24px; }
.dirC-mobileMenu__head { display: flex; align-items: center; justify-content: space-between; }
.dirC-mobileMenu__head .dirC-brand__logo { width: 100px; height: 100px; }
.dirC-mobileMenu__close { border: none; background: transparent; color: var(--ink); padding: 4px; cursor: pointer; }

.dirC-mobileMenu__nav { display: flex; flex-direction: column; }
.dirC-mobileMenu__nav a {
  color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 600;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
}
.dirC-mobileMenu__nav a.dirC-nav__active { color: var(--title-secondary); }

.dirC-mobileMenu__cta { align-self: flex-start; }
.dirC-mobileMenu__social { display: flex; gap: 10px; }

/* HEADER COMPACT (< 900px) : logo à gauche ; CTA + toggle groupés à droite,
   sur une seule ligne (CTA avant le toggle, qui reste le plus à droite) */
@media (max-width: 900px) {
  .dirC-topbar__inner { flex-wrap: nowrap; }
  .dirC-navToggle { display: inline-flex; order: 3; }
  .dirC-nav { display: none; }
  .dirC-actions { margin-left: auto; order: 2; }
  .dirC-actions .dirC-link-quiet--icon { display: none; }

  .dirC-topbar__tagline { justify-content: center; }
  .dirC-topbar__tagSep { display: none; }
  .dirC-topbar__follow { display: none; }

  .dirC-hero--page {
    padding-bottom: 30px;
    padding-top: 30px;
}

.dirC-brand__logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
    padding: 5px;
}

.dirC-section {
    padding: 60px 0;
}
.dirC-apiPart {   
    gap: 34px;
}


}

/* PATCHWORK ASSOCIATION (< 600px) : 2 × 2 photos qui se chevauchent
   (2 × 54 % − 8 % de chevauchement = 100 %) */
@media (max-width: 600px) {
  .dirC-assoPatch + .dirC-section { padding-top: 30px; }
  .dirC-patchRow { flex-wrap: wrap; }
  .dirC-patchRow__item { flex-basis: 54%; }
  .dirC-patchRow__item + .dirC-patchRow__item { margin-left: -8%; }
  .dirC-patchRow__item + .dirC-patchRow__item--3 { margin-left: 0; }
  .dirC-patchRow__item--3,
  .dirC-patchRow__item--4 { margin-top: -6%; }
}