/* ==========================================================================
   LienSerein — layout.css
   Conteneurs, grilles, sections, en-tête (navigation) et pied de page.
   ========================================================================== */

/* ----- Conteneurs -------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }
.container--read   { max-width: calc(var(--read) + var(--gutter) * 2); }

/* ----- Sections ---------------------------------------------------------- */
.section { padding-block: var(--section-y); }
#ca-vous-parle, #accompagnements, #temoignages, .cta-band, .quote-band, .section--tree { position: relative; overflow: hidden; }
#ca-vous-parle .container, #accompagnements .container, #temoignages .container, .cta-band .container, .quote-band .container, .section--tree .container { position: relative; z-index: 1; }
.section--tight { padding-block: clamp(var(--s7), 6vw, var(--s8)); }
.section--cream   { background: var(--creme); }
.section--white   { background: var(--blanc); }
.section--wash    { background: var(--canard-wash); }
.section--sauge   { background: var(--sauge-wash); }
.section--rose    { background: var(--rose-wash); }

/* En-tête de section centré */
.section-head { max-width: var(--read); margin: 0 auto var(--s7); text-align: center; }
.section-head .lead { margin-inline: auto; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head--left .lead { margin-inline: 0; }

/* ----- Grilles utilitaires ---------------------------------------------- */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (max-width: 920px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Disposition 2 colonnes média + texte */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s5), 5vw, var(--s8));
  align-items: center;
}
.split--media-narrow { grid-template-columns: 0.85fr 1fr; }
@media (max-width: 820px) {
  .split, .split--media-narrow { grid-template-columns: 1fr; }
}

/* ==========================================================================
   EN-TÊTE / NAVIGATION
   ========================================================================== */
/* Header pleine largeur avec gouttière */
.site-header .container {
  max-width: none;
  padding-inline: clamp(16px, 3vw, 32px);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--bd-soft);
}
/* Connecté : le header sticky se cale sous la barre d'admin WP. */
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
  /* ≤ 600px la barre d'admin défile avec la page (position: absolute côté WP). */
  .admin-bar .site-header { top: 0; }
}
/* Fond translucide + flou portés par un pseudo-élément : backdrop-filter (comme
   transform ou will-change: transform) sur .site-header en ferait le containing
   block du .main-nav en position: fixed — le tiroir mobile se calerait alors sur
   le header au lieu du viewport et créerait un scroll horizontal sur toutes les
   pages ≤ 1040px. Ne pas remettre ces propriétés sur .site-header lui-même. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--blanc) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 95px;
  padding-block: 0.3rem;
}

/* Marque / logo */
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; flex-shrink: 0; }
.brand__logo {
    width: 110px;
    height: 110px;
}.brand__text {
    transform: translateY(17px);
}.brand__name {
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: 2rem;
  color: var(--canard-deep);
}

/* Navigation principale */
.main-nav {
    margin-left: auto;
    margin-top: 35px;
}
.main-nav__list { display: flex; align-items: center; gap: var(--s2); }
.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--taupe-fonce);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.main-nav__link:hover,
.main-nav__link[aria-current="page"] { color: var(--canard-deep); background: var(--canard-wash); }

/* Lien « Espace pro » distinct */
.main-nav__link--pro {
  color: var(--canard-deep);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-pill);
  padding-inline: var(--s4);
}
.main-nav__link--pro:hover { background: var(--canard); color: #fff; border-color: var(--canard); }

/* Bouton contact (accent) dans la nav */
.main-nav__cta { margin-left: var(--s3); }

/* ----- Sous-menu déroulant ---------------------------------------------- */
.has-dropdown { position: relative; }
.dropdown-toggle::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
  margin-left: 2px;
}
.has-dropdown[data-open="true"] .dropdown-toggle::after { transform: rotate(-135deg) translateY(-1px); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 268px;
  background: var(--blanc);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--s2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.has-dropdown[data-open="true"] .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__link {
  display: block;
  padding: var(--s3) var(--s3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--encre);
  transition: background var(--transition);
}
.dropdown__link:hover { background: var(--sauge-wash); }
.dropdown__link span { display: block; font-weight: 600; font-size: .95rem; }
.dropdown__link small { display: block; color: var(--taupe-fonce); font-size: .8rem; }
.dropdown__sep { height: 1px; background: var(--bd-soft); margin: var(--s2) var(--s2); }
.dropdown__all { color: var(--canard-deep); font-weight: 600; font-size: .9rem; }

/* ----- Hamburger (mobile) ----------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--s2);
  margin-left: auto;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--canard-deep); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----- Responsive nav ---------------------------------------------------- */
@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 0 auto;
    width: min(360px, 86vw);
    background: var(--blanc);
    border-left: 1px solid var(--bd-soft);
    box-shadow: var(--sh-lg);
    padding: var(--s5);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    margin-left: 0;
  }
  .main-nav[data-open="true"] { transform: translateX(0); }
  /* Connecté : la barre d'admin WP (46px ≤ 782px, 32px au-delà) décale le header,
     le tiroir doit suivre pour ne pas recouvrir le bouton de fermeture. */
  .admin-bar .main-nav { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: var(--s1); }
  .main-nav__link { padding: var(--s3) var(--s4); font-size: 1rem; border-radius: var(--r-sm); }
  .main-nav__link--pro { border: none; justify-content: flex-start; }
  .main-nav__cta { margin: var(--s3) 0 0; }
  .main-nav__cta .btn { width: 100%; }

  /* Sous-menu : déplié en accordéon sur mobile */
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-left: 2px solid var(--sauge-wash);
    border-radius: 0; margin: var(--s1) 0 var(--s3) var(--s4); padding: 0;
    max-height: 0; overflow: hidden; transition: max-height var(--transition-slow);
  }
  .has-dropdown[data-open="true"] .dropdown { max-height: 600px; }

  /* Voile derrière le menu mobile */
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(42,39,35,.35);
    opacity: 0; visibility: hidden; transition: opacity var(--transition);
  }
  .nav-backdrop[data-open="true"] { opacity: 1; visibility: visible; }
}

/* ==========================================================================
   FIL D'ARIANE
   ========================================================================== */
.breadcrumb {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--taupe-fonce);
  padding-block: var(--s4) 0;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.breadcrumb a { color: var(--taupe-fonce); text-decoration: none; }
.breadcrumb a:hover { color: var(--canard-deep); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--s2); color: var(--taupe); }
.breadcrumb [aria-current="page"] { color: var(--canard-deep); }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.site-footer {
  background: var(--canard-deep);
  color: #CBD8D7;
  padding-block: var(--s8) var(--s6);
}
.site-footer a { color: #CBD8D7; text-decoration: none; transition: color var(--transition); }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s7);
  padding-bottom: var(--s6);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand__name { font-family: var(--f-disp); font-weight: 500; font-size: 1.5rem; color: #fff; }
.footer-brand__tagline { font-style: italic; color: #9FBFBC; margin-top: var(--s2); max-width: 30ch; }
.footer-brand__coop { font-size: .8rem; color: #7FA3A4; margin-top: var(--s3); }

.footer-col__title {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7FA3A4;
  margin-bottom: var(--s4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--s2); }
.footer-col address { font-style: normal; line-height: 1.8; font-size: .92rem; }

.footer-social { display: flex; gap: var(--s3); margin-top: var(--s4); }
.footer-social a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill);
}
.footer-social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.footer-social svg { width: 18px; height: 18px; stroke: currentColor; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between; align-items: center;
  padding-top: var(--s5);
  font-size: .8rem; color: #7FA3A4;
}
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: var(--s4); }