/* =========================================================
   ISNAR-IMG — main.css (layout & composants)
   ========================================================= */

/* ---------- HEADER : barre marque ---------- */
.brandbar { border-bottom: 1px solid var(--line); }
.brandbar__inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px; padding: 0 10vw 16px 10vw;
  width: 100%;
}
.brandbar__logo { flex-shrink: 0; }
.brandbar__logo .custom-logo { max-height: clamp(80px, 11vw, 150px); width: auto; }
.logo-chip {
  display: inline-flex;
  border-radius: 10px; padding: 8px 14px;
}
.logo-chip img { height: auto; width: auto; display: block; }

/* Tagline : 1fr = prend l'espace restant, l'image scale dans ce cadre */
.tagline { min-width: 0; display: flex; justify-content: center; align-items: center; }
.tagline img {
  max-height: clamp(200px, 24vw, 320px);
  max-width: 100%;
  width: auto; height: auto;
  display: block; margin: 16px 0;
}

/* Pillars : auto = taille naturelle, max-width: none pour ne pas être écrasé */
.pillars { display: block; line-height: 0; align-self: start; }
.pillars img { height: clamp(200px, 24vw, 320px); width: auto; max-width: none; border-radius: 0px 0px 6px 6px; display: block; }

/* ---------- HEADER : barre collante (nav + subbar) ---------- */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
}

/* ---------- HEADER : navigation ---------- */
.mainnav { position: relative; border-top: 3px solid var(--orange); border-bottom: 3px solid var(--orange); }
.mainnav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px;
}
/* flex-wrap : filet de sécurité si la liste s'allonge ou sur une largeur
   desktop/laptop étroite (901-1150px, juste au-dessus du menu mobile) —
   sans effet aujourd'hui, dégrade proprement sur 2 lignes centrées si besoin. */
.mainnav__list { display: flex; flex-wrap: wrap; gap: 40px; list-style: none; margin: 0; padding: 0; }
.mainnav__list > li > a {
  display: block; padding: 16px 0; font-weight: 700; font-size: 0.875rem;
  letter-spacing: .3px; text-transform: uppercase; color: var(--ink); border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.mainnav__list > li > a:hover,
.mainnav__list > .current-menu-item > a { color: var(--orange); border-color: var(--orange); border-bottom-width: 3px; }

/* Chevron indicateur de sous-menu */
.nav__chevron { font-size: 0.65em; margin-left: 3px; display: inline-block; transition: transform .2s; vertical-align: middle; }
.has-mega:hover .nav__chevron,
.has-mega.is-open .nav__chevron { transform: rotate(180deg); }

/* ---------- MEGAMENU ---------- */
.mega {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg);
  border-top: 3px solid var(--orange);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  z-index: 10;
}
.has-mega:hover .mega,
.has-mega.is-open .mega { display: block; }

.mega__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 24px 20px; display: flex; gap: 32px;
}
/* Plusieurs colonnes dans le menu ? Elles se partagent l'espace ; une seule,
   elle garde sa largeur naturelle. Détecté en CSS (:has) plutôt que via une
   classe à ajouter à la main, pour que la structure du menu dans wp-admin
   (Apparence > Menus) suffise à elle seule. */
.mega__inner:has(.mega__col + .mega__col) .mega__col { flex: 1; }
.mega__inner:not(:has(.mega__col + .mega__col)) .mega__col { min-width: 200px; }

.mega__group {
  margin: 0 0 10px; padding-bottom: 6px;
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--orange); border-bottom: 2px solid var(--orange);
}
/* Colonne sans sous-liste (juste un lien vers une page, ex. "Après
   l'internat") : ce n'est pas un titre de groupe, donc pas le style
   majuscules/orange/soulignage — juste un lien comme les autres. */
.mega__col--link .mega__group {
  text-transform: none; font-weight: 700; letter-spacing: normal;
  font-size: 0.875rem; color: var(--ink); border-bottom: none;
  margin-bottom: 0; padding-bottom: 0;
}
.mega__col--link .mega__group a:hover { color: var(--orange); }
/* Caché par défaut (desktop) : le survol révèle déjà toute la colonne, ce
   chevron ne sert qu'à signaler le repli/dépliement en mobile (voir
   @media max-width:900px plus bas). */
.mega__chevron { display: none; font-size: 0.65em; margin-left: 4px; transition: transform .2s; vertical-align: middle; }
.mega__col > ul { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.mega__col > ul li { margin: 0; }
.mega__col > ul a {
  display: block; padding: 6px 0;
  font-size: 0.875rem; color: var(--ink);
  border-bottom: 1px solid transparent; transition: color .15s;
}
.mega__col > ul a:hover { color: var(--orange); }

.nav-toggle { display: none; }

/* ---------- HEADER : sous-barre (réseaux / SOS / recherche) ---------- */
.subbar__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
}
.socials { display: flex; gap: 12px; }
.socials a { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.socials a img { width: 30px; height: 30px; display: block; }
.sos {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--orange); border: 1px solid var(--orange); border-radius: var(--radius-pill);
  padding: 5px 14px; font-size: 0.75rem; font-weight: 700;
}
/* Zone de clic minimale ~40px : le fond/bordure de ce bouton est son identité
   visuelle, donc on agrandit le padding réel (mobile) plutôt qu'une zone de
   clic invisible qui dépasserait du contour visible. */
.sos__icon { flex-shrink: 0; width: 14px; height: 14px; }
.subbar__search { margin-left: auto; }
.search-form { display: flex; }
.search-form input[type=search] {
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: 0.825rem; min-width: 200px; background: var(--bg-soft);
}
.search-form input[type=submit] { display: none; }

/* ---------- HERO ---------- */
.hero { padding: 36px 0 0; }
.hero__title {
  text-align: center; font-size: 4rem; font-weight: 800; color: var(--ink);
  max-width: 50vw; margin: 0 auto 28px;
}
.hero__title u { text-decoration: none; border-bottom: 5px solid var(--orange); padding-bottom: 3px; }

/* ---------- METRIQUES (page d'accueil) ---------- */
.hero__metrics {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 96px; margin: 32px auto 56px; text-align: center;
}
.metric { display: flex; flex-direction: column; align-items: center; max-width: 220px; }
.metric__value { font-size: 3.75rem; font-weight: 800; color: var(--orange); line-height: 1; }
.metric:first-child .metric__value { color: var(--navy); }
.metric__label { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-top: 12px; line-height: 1.3; }
a.metric:hover .metric__value { text-decoration: underline; }

/* ---------- SLIDER ---------- */
.slider { position: relative; overflow: hidden; aspect-ratio: 16 / 5; }
.slider__track { display: flex; transition: transform .4s ease; height: 100%; }
.slide { min-width: 100%; height: 100%; }
.slide a { display: block; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide__placeholder {
  height: 280px; background: linear-gradient(120deg,#F6E7D6,#EAD7C2);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8%; color: var(--navy);
}
.slide__placeholder h3 { font-size: 2.125rem; }
.slider__dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; }
.slider__dots button { position: relative; width: 10px; height: 10px; border-radius: 50%; border: none; background: #fff; opacity: .6; }
/* Zone de clic étendue à ~40px sans agrandir le point visuel (gap ci-dessus
   augmenté à 20px pour que ces zones invisibles ne se chevauchent pas). */
.slider__dots button::after { content: ''; position: absolute; inset: -15px; }
.slider__dots button.is-active { background: var(--orange); opacity: 1; }
.slider__prev,
.slider__next {
    position: absolute; top: 0; bottom: 0; width: 10vw;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; z-index: 2; padding: 0;
}
.slider__prev { left: 0; background: linear-gradient(to right, rgba(0,0,0,.45), transparent); }
.slider__next { right: 0; background: linear-gradient(to left, rgba(0,0,0,.45), transparent); }
.slider__prev::before,
.slider__next::before {
    content: ''; display: block; width: 14px; height: 14px;
    border-top: 3px solid #fff; border-right: 3px solid #fff;
    filter: drop-shadow(1px -1px 2px rgba(0,0,0,.4));
}
.slider__prev::before { transform: rotate(-135deg); }
.slider__next::before { transform: rotate(45deg); }

/* ---------- SECTIONS génériques ---------- */
.section { padding: 56px 0; }
.section__head { text-align: center; margin-bottom: 28px; }
.section__title {
  font-size: 1.625rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  display: inline-block; padding-bottom: 7px; border-bottom: 4px solid var(--orange);
}
.section__sub { font-size: 1.25rem; font-weight: 700; margin-top: 16px; }
.section__center { text-align: center; margin-top: 12px; }
.divider { width: 280px; height: 4px; background: var(--orange); border: 0; margin: 8px auto 0; }

/* ---------- CARTES actualités ---------- */
.tag {
  display: inline-block; color: #fff; background: var(--orange);
  font-size: 0.75rem; font-weight: 800; padding: 4px 12px; border-radius: 4px; margin-bottom: 8px;
  letter-spacing: .3px;
}
.tag--politique { background: var(--blue-tag); }

.featured { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-bottom: 28px; }
.card__media img { width: 100%; height: auto; display: block; border-radius: 6px; }
/* Contrairement aux cartes (image recadrée en amont, taille "isnar-card"),
   l'image "à la une" utilise la taille WP proportionnelle "large" (voir
   front-page.php) : ratio forcé ici pour rester cohérent avec le
   placeholder ci-dessous, quelle que soit la proportion de l'image source. */
.featured__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; border-radius: 6px; }
.featured__media .ph, .card__media .ph { aspect-ratio: 16/10; background: var(--bg-soft); border-radius: 6px; }

.cards-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.cards-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
.card__text { color: var(--muted); font-size: 0.875rem; margin-top: 8px; }
.card__title { font-weight: 700; font-size: 0.95rem; margin-top: 8px; color: var(--ink); }
.card__meta { color: var(--muted); font-size: 0.825rem; margin-top: 4px; }

/* ---------- SCROLL INFINI (page Articles, archive Mur des thèses) ---------- */
.isnar-infinite__sentinel { height: 1px; }
.isnar-infinite__loading {
  display: none; text-align: center; color: var(--muted);
  font-size: 0.875rem; margin-top: 24px;
}
.isnar-infinite.is-loading .isnar-infinite__loading { display: block; }

/* ---------- BANDEAU CTA ---------- */
.cta-band { background: var(--navy); color: #fff; }
.cta-band__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 36px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.cta-band h2 { font-size: 1.625rem; font-weight: 800; color: #fff; }

/* ---------- ARTICLE (single) ---------- */
/* min() plafonne la largeur de lecture sur grand écran (même logique que
   --maxw, style.css) — sans effet sous ~1833px de viewport. */
.article { max-width: min(60vw, 1100px); margin: 0 auto; padding: 40px 20px; }
.article__hero img { width: 100%; height: auto; border-radius: 8px; display: block; }
.article__title { text-align: center; font-size: 2rem; font-weight: 800; margin: 28px 0 14px; }
.article__meta { text-align: center; color: var(--muted); font-size: 0.825rem; display: flex; gap: 24px; justify-content: center; margin-bottom: 32px; }

/* ---------- SOURCE DÉCRYPTAGE (single-decryptage.php) ---------- */
/* Centré comme le reste de l'en-tête d'article (titre, meta) : boîte
   compacte plutôt qu'un bandeau pleine largeur. */
.decryptage__source {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg-soft); border-radius: 8px; padding: 14px 20px;
  margin: 0 auto 28px; max-width: fit-content;
}
.decryptage__source p { margin: 0; font-size: 0.95rem; color: var(--ink); }
.article__body { font-size: 1rem; line-height: 1.7; }
.article__body p { margin: 0 0 1.3rem; }
/* Le reset global (style.css: h1,h2,h3 { margin:0 }) vise les titres
   d'interface (cartes, sections...) qui ne doivent pas hériter d'une marge —
   mais un titre dans du texte rédigé a besoin d'air au-dessus (le sépare du
   paragraphe précédent) et de rester proche du texte qui le suit. */
.article__body h1.wp-block-heading,
.article__body h2.wp-block-heading,
.article__body h3.wp-block-heading,
.article__body h4.wp-block-heading {
  line-height: 1.3;
  margin: 2.75rem 0 1rem;
}
.article__body > h1.wp-block-heading:first-child,
.article__body > h2.wp-block-heading:first-child,
.article__body > h3.wp-block-heading:first-child,
.article__body > h4.wp-block-heading:first-child { margin-top: 0; }
.article__body blockquote {
  margin: 1.6rem 0; padding-left: 1.2rem;
  border-left: 3px solid var(--orange); color: var(--muted);
}
/* Le reset global (style.css: a { text-decoration:none }) vise les liens
   d'interface (boutons, cartes, menu...) — les liens dans le texte rédigé
   doivent rester repérables : soulignés par défaut, surbrillance orange au survol. */
.article__body a { text-decoration: underline; }
.article__body a:hover { color: var(--orange); }

/* Paragraphes vides : résidus de mise en page Gutenberg (espacement fait à
   coups de paragraphes vides plutôt qu'avec la marge des blocs voisins —
   inutile maintenant que les titres ont leur propre marge ci-dessus). */
.article__body p:empty { display: none; }

/* ---------- PAGE : sommaire auto (voir page.php) ---------- */
.article--with-toc {
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}
.article--with-toc .article__title { grid-column: 1 / -1; }

/* + 20px : un peu d'air sous le header collant, au-delà du strict minimum
   pour ne pas passer dessous (--sticky-offset, aussi utilisé pour les ancres). */
.page-toc { position: sticky; top: calc(var(--sticky-offset) + 20px); }
.page-toc__title {
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin: 0 0 12px;
}
.page-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 140px); overflow-y: auto; }
.page-toc a {
  display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--line);
  font-size: 0.875rem; color: var(--ink); text-decoration: none;
  transition: border-color .15s, color .15s;
}
.page-toc a:hover { border-color: var(--orange); color: var(--orange); }

/* Frise chronologique : activée automatiquement quand les titres de section
   du sommaire sont tous des années (voir page.php) — ex. page "Fonctionnement".
   Le conteneur .article__timeline ne démarre qu'au premier titre-année (page.php
   coupe le contenu à cet endroit) : la ligne ne remonte pas dans l'intro. */
.article__timeline {
  border-left: 3px solid var(--line);
  padding-left: 28px;
  margin-left: 4px;
}
.article__timeline h2.wp-block-heading {
  position: relative;
  text-align: left;
  margin: 48px 0 12px;
}
.article__timeline h2.wp-block-heading:first-of-type { margin-top: 0; }
.article__timeline h2.wp-block-heading::before {
  content: '';
  position: absolute; top: 8px; left: -39px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--orange); border: 3px solid var(--bg);
}

@media (max-width: 900px) {
  .article--with-toc { grid-template-columns: 1fr; }
  .page-toc {
    position: static;
    border: 1px solid var(--line); border-radius: 8px;
    padding: 16px 20px; margin-bottom: 8px;
  }
  .page-toc ul { max-height: none; }
}

/* ---------- FORMULAIRE DE CONTACT (page-contact.php) ---------- */
.contact-form { max-width: 560px; margin: 32px auto 0; }
.contact-form__field { margin-bottom: 18px; }
.contact-form__field label { display: block; font-weight: 700; font-size: 0.875rem; margin-bottom: 6px; color: var(--ink); }
.contact-form__field input, .contact-form__field textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; box-sizing: border-box; color: var(--ink);
  /* 16px fixe (pas en rem) : sous 16px, Safari iOS zoome automatiquement au
     focus sur un champ — indépendant du clamp du root (style.css) exprès. */
  font-size: 16px;
}
.contact-form__field input:focus, .contact-form__field textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.contact-form__field textarea { resize: vertical; }
/* Piège à robots : hors écran plutôt que display:none (certains robots
   ignorent les champs display:none et les remplissent quand même). */
.contact-form__hp { position: absolute; left: -9999px; top: -9999px; }
.contact-form__notice { max-width: 560px; margin: 24px auto 0; padding: 12px 16px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; }
.contact-form__notice--ok { background: #e6f6ec; color: #1a7a3f; }
.contact-form__notice--error { background: #fde8e8; color: #b3261e; }
.contact-form__notice--info { background: var(--orange-soft); color: var(--navy-deep); margin: 0 0 18px; }
.contact-form__privacy { font-size: 0.8rem; color: var(--muted); margin: -6px 0 18px; }
.contact-form__privacy a { color: inherit; text-decoration: underline; }

/* ---------- FAQ accordion ---------- */
.faq { background: var(--bg-soft); }
.faq__list { max-width: 760px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__question {
    width: 100%; text-align: left; background: none; border: none;
    padding: 18px 0; font-size: 1rem; font-weight: 700; color: var(--ink);
    cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq__question:hover { color: var(--orange); }
.faq__chevron { font-size: 1.1em; flex-shrink: 0; transition: transform .25s; }
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }
.faq__answer { padding: 0 0 18px; color: var(--muted); line-height: 1.7; }
.faq__answer p { margin: 0; }

/* ---------- FOOTER ---------- */
/* Version précédente (fond navy) :
.site-footer { background: var(--navy-deep); color: #fff; border-top: 4px solid var(--orange); }
.site-footer a { color: #d9deec; }
.site-footer a:hover { color: #fff; }
.footer__brand p { font-size: 0.825rem; color: #c8cee0; margin-bottom: 4px; }
.footer__bottom-inner { color: #b9c0d6; }
*/
.site-footer { background: var(--orange); color: #fff; margin-top: auto; }
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: #fff; }
.footer__top {
  max-width: var(--maxw); margin: 0 auto; padding: 36px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
/* Ancienne mise en page (4 colonnes : marque+contact / Naviguer / S'impliquer /
   réseaux) — inutilisée tant que la version commentée dans footer.php n'est
   pas restaurée, gardée pour ne pas perdre le style si besoin.
.footer__col h4 { font-size: 0.875rem; margin: 0 0 14px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 9px; font-size: 0.825rem; }
*/
.footer__brand .footer__logo { height: 56px; width: auto; margin-bottom: 14px; }
.footer__brand-name { font-weight: 800; font-size: 1rem; letter-spacing: .5px; margin: 0 0 12px; }
.footer__brand p { font-size: 0.825rem; color: rgba(255,255,255,.8); margin-bottom: 4px; }

.footer__social-block { text-align: center; }
.footer__social-title { font-size: 0.9rem; font-weight: 700; margin: 0 0 14px; }
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.footer__social a { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }
.footer__social img { width: 54px; height: 54px; display: block; }

.footer__cta { text-align: center; }
.footer__cta p { font-size: 0.95rem; font-weight: 700; margin: 0 0 14px; }
.btn--outline-light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; box-shadow: none; }
/* .site-footer en préfixe : sans ça, ".site-footer a:hover { color:#fff }"
   (plus spécifique, un élément de plus) l'emportait et rendait le texte
   illisible sur le fond blanc au survol. */
.site-footer .btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--orange); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15);
}
.footer__bottom-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 16px 20px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.75rem; color: rgba(255,255,255,.75);
}
/* Liens "footer_legal" : <li> à plat (pas de <ul>, voir footer.php) dans ce
   conteneur flex déjà en place — juste besoin d'annuler le style de liste. */
.footer__bottom-inner li { list-style: none; margin: 0; }

/* ---------- PARTENAIRES ---------- */
.partenaires__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.partenaire__card {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}
.partenaire__card:hover { box-shadow: 0 4px 20px rgba(242,125,82,.18); border-color: var(--orange); }
.partenaire__card:hover .partenaire__name { color: var(--orange); }
.partenaire__logo-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 20px 24px; background: var(--bg-soft);
    border-bottom: 2px solid var(--line);
    height: 120px;
}
.partenaire__logo { width: 100%; height: 100%; display: block; object-fit: contain; }
.partenaire__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.partenaire__name { font-weight: 700; color: var(--navy); font-size: 1.25rem; margin: 0; transition: color .15s; }
.partenaire__role {
    display: inline-block; font-size: 0.75rem; font-weight: 700;
    color: var(--navy); background: var(--bg-soft);
    border-radius: 3px; padding: 2px 8px; align-self: flex-start;
}
/* ---------- FICHE PARTENAIRE (single-partenaire.php) ---------- */
.partenaire-page__logo { width: 160px; height: 160px; margin: 0 auto 20px; }
.partenaire-page__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.partenaire-page__role {
    display: block; text-align: center; font-size: 0.85rem; font-weight: 700;
    color: var(--orange); margin: 8px 0 28px;
}
.partenaires__empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .brandbar__inner { grid-template-columns: auto auto; justify-content: space-between; }
  .tagline { display: none; }
  .pillars img { height: clamp(80px, 18vw, 140px); }
  .brandbar__logo .custom-logo { max-height: 64px; }
  .logo-chip img { height: 64px; }
  .subbar__inner { max-width: 100%; }
  .hero__title { font-size: 1.75rem; }
  .hero__metrics { gap: 48px; margin: 24px auto 36px; }
  .metric__value { font-size: 2.75rem; }
  .metric__label { font-size: 1.05rem; }
  /* Palier tablette : 2 colonnes avant de passer à 1 en dessous de 560px
     (voir la règle @media max-width:560px plus bas, qui l'emporte ensuite). */
  .featured, .cards-3, .cards-2, .partenaires__list { grid-template-columns: repeat(2,1fr); }
  .footer__top { justify-content: center; text-align: center; }
  .footer__cta { width: 100%; }
  .cta-band__inner { flex-direction: column; text-align: center; }

  .nav-toggle {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    margin: 0; padding: 14px 24px; border: none; border-radius: 0;
    border-bottom: 2px solid var(--orange); background: var(--bg);
    color: var(--navy); font-weight: 700; font-size: 0.875rem;
    letter-spacing: .3px; text-transform: uppercase; cursor: pointer;
  }
  .mainnav__list {
    display: flex; flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .mainnav.is-open .mainnav__list { max-height: 80vh; overflow-y: auto; }
  .mainnav__list > li { border-bottom: 1px solid var(--line); }
  .mainnav__list > li > a {
    padding: 14px 24px; text-align: left; white-space: normal;
    display: flex; align-items: center; justify-content: space-between;
  }

  /* Megamenu en accordéon sur mobile */
  .mega {
    position: static;
    border-top: 1px solid var(--line);
    box-shadow: none;
    background: var(--bg-soft);
  }
  .mega__inner { flex-direction: column; gap: 16px; padding: 12px 16px 16px; }
  .mega__inner--cols .mega__col { flex: none; }

  /* Chaque colonne devient elle-même un accordéon : repliée par défaut,
     dépliée via .mega__col.is-open (voir assets/js/main.js) — mais
     seulement quand le menu a plusieurs colonnes : avec une seule, la
     replier n'aurait aucun intérêt (ouvrir l'item de premier niveau montre
     déjà tout) et on garde le comportement d'origine (liste toujours
     visible). "mega__col--multi" est posée en JS (pas de :has() ici : le
     support navigateur est plus inégal que pour le reste du site). */
  .mega__col--multi .mega__group { cursor: pointer; margin-bottom: 0; }
  .mega__col--multi .mega__chevron { display: inline-block; }
  .mega__col--multi.is-open .mega__chevron { transform: rotate(180deg); }
  .mega__col--multi > ul {
    max-height: 0; overflow: hidden;
    margin-top: 10px; transition: max-height .3s ease;
  }
  .mega__col--multi.is-open > ul { max-height: 60vh; overflow-y: auto; }
  .nav__chevron { float: none; margin-top: 0; }
}
@media (max-width: 560px) {
  :root { --maxw: 100vw; }
  .footer__top { flex-direction: column; align-items: center; }
  .footer__brand { text-align: center; }
  .subbar__search { display: none; }
  /* En dessous de 900px, un palier tablette existe déjà (2 colonnes) — ici on
     passe à 1 seule colonne pour les petits téléphones. */
  .featured, .cards-3, .cards-2, .partenaires__list { grid-template-columns: 1fr; }

  /* Brandbar */
  .logo-chip img { height: 48px; }
  .brandbar__logo .custom-logo { max-height: 48px; }

  /* Subbar */
  .subbar__inner { flex-wrap: wrap; gap: 10px; padding: 10px 20px; }
  /* Padding réel augmenté (pas de zone de clic invisible : le fond/bordure
     de ce bouton pilule est son identité visuelle) pour une cible tactile
     plus confortable. */
  .sos { font-size: 0.7rem; padding: 8px 14px; }
  .socials a { width: 34px; height: 34px; }
  .socials a img { width: 24px; height: 24px; }
  /* Zone de clic étendue à ~46px sans agrandir l'icône visuelle. */
  .socials a::after { content: ''; position: absolute; inset: -6px; }

  /* Réseaux sociaux du footer : compacts comme le header plutôt que de
     déborder ou de passer sur 2 lignes disgracieuses (voir flex-wrap ajouté
     à .footer__social). */
  .footer__social a { width: 56px; height: 56px; }
  .footer__social img { width: 40px; height: 40px; }

  /* Hero */
  .hero__title { font-size: 1.375rem; }
  .hero__metrics { gap: 28px; margin: 20px auto 28px; }
  .metric__value { font-size: 2.125rem; }
  .metric__label { font-size: 0.9rem; }

  /* Sections */
  .section { padding: 36px 0; }
  .section__title { font-size: 1.25rem; letter-spacing: .5px; }
  .section__sub { font-size: 1rem; }

  /* CTA */
  .cta-band h2 { font-size: 1.25rem; }

  /* Article single */
  .article { max-width: 100%; padding: 24px 16px; }
  .article__title { font-size: 1.5rem; }
  .article__meta { flex-direction: column; align-items: center; gap: 6px; }
}

@media (max-width: 400px) {
  .logo-chip img { height: 40px; }
  .brandbar__logo .custom-logo { max-height: 40px; }

  /* Hero */
  .hero__title { font-size: 1.125rem; }

  /* Nav toggle centré et plus compact */
  .nav-toggle { width: 100%; justify-content: center; margin: 6px 0; }
}

/* min-width:561px : rend cette plage mutuellement exclusive avec la règle
   "display:none" du bloc @media max-width:560px ci-dessus — sans ce garde,
   les deux s'appliquaient à la fois sur un téléphone portrait <560px et
   celle-ci (plus bas dans le fichier) l'emportait à spécificité égale,
   annulant le masquage voulu sur petit écran. */
@media (min-width: 561px) and (max-width: 900px) and (orientation: portrait) {
  .subbar__inner { flex-wrap: wrap; }
  .subbar__search { display: block; width: 100%; margin-left: 0; }
  .search-form { width: 100%; }
  .search-form input[type=search] { width: 100%; min-width: 0; box-sizing: border-box; }
}

/* ---------- PAGE BUREAU : membres ---------- */
.section--bordered { border-top: 1px solid var(--line); }
.section--soft { background: var(--bg-soft); }

.membres__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 28px;
}

.membre__card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 24px 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg);
}
.membre__photo {
  width: 100%; aspect-ratio: 20 / 23; overflow: hidden;
  border-radius: 6px; margin-bottom: 16px;
}
.membre__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.membre__name  { font-size: 1rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.membre__role  { font-size: 0.85rem; color: var(--orange); font-weight: 700; margin: 0 0 10px; }
.membre__email { font-size: 0.8rem; color: var(--muted); word-break: break-all; }
.membre__email:hover { color: var(--orange); }
.membre__tel { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.membre__tel:hover { color: var(--orange); }

/* ---------- PAGE BUREAU : historique présidents ---------- */
.presidents__timeline {
  list-style: none; margin: 24px auto 0; padding: 0;
  max-width: 720px;
}
.president__entry {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.president__period { font-size: 0.85rem; color: var(--muted); }
.president__lieu   { font-size: 0.85rem; color: var(--orange); font-weight: 700; text-align: center; }
.president__name   { font-size: 1rem; font-weight: 700; color: var(--ink); text-align: right; }

@media (max-width: 900px) {
  .membres__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .membres__grid { grid-template-columns: 1fr; }
  .president__entry { grid-template-columns: 1fr; gap: 4px; }
  .president__name  { text-align: left; }
}

/* ---------- PAGE VILLES : liste des syndicats locaux ---------- */
.villes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.ville__card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); transition: border-color .15s, box-shadow .15s;
}
.ville__card:hover { border-color: var(--orange); box-shadow: 0 4px 16px rgba(242,125,82,.18); }
.ville__logo { width: 64px; height: 64px; margin-bottom: 12px; }
.ville__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ville__name { font-size: 0.95rem; font-weight: 800; color: var(--ink); margin: 0; }
.ville__acronyme { font-size: 0.8rem; color: var(--orange); font-weight: 700; margin: 4px 0 0; }

/* ---------- FICHE VILLE (single-ville.php) ---------- */
.ville-page__logo { width: 120px; height: 120px; margin: 0 auto 20px; }
.ville-page__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ville-page__subtitle { text-align: center; color: var(--muted); margin: 8px 0 28px; }
.ville-page__non-adherente { font-size: 0.825rem; font-style: italic; }
.ville-page__infos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.ville-page__infos h3 {
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--orange); margin: 0 0 8px;
}
.ville-page__infos p { margin: 0 0 4px; font-size: 0.9rem; }
.ville-page__hospitals { margin-bottom: 28px; }
.ville-page__hospitals h3 { font-size: 1rem; margin: 0 0 8px; }

@media (max-width: 900px) {
  .villes__grid { grid-template-columns: repeat(3, 1fr); }
  /* Palier tablette manquant : restait à 3 colonnes jusqu'à 560px, trop
     serré pour des blocs adresse/contact. */
  .ville-page__infos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .villes__grid { grid-template-columns: repeat(2, 1fr); }
  .ville-page__infos { grid-template-columns: 1fr; }
}

/* ---------- PAGES RESSOURCES : galeries de PDF (ressources.php) ---------- */
.ressources__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.ressource__card {
  display: flex; gap: 16px;
  padding: 20px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); transition: border-color .15s, box-shadow .15s;
}
.ressource__card:hover { border-color: var(--orange); box-shadow: 0 4px 20px rgba(242,125,82,.18); }
.ressource__icon {
  /* Pas d'image de couverture : taille fixe (ratio 20:23, comme les photos
     de membres du bureau) identique sur toutes les cards de la grille, peu
     importe la hauteur — variable — de chacune. */
  flex-shrink: 0; width: 80px; height: 92px; border-radius: 4px;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; letter-spacing: .3px;
  text-align: center; line-height: 1.1; padding: 0 2px;
}
.ressource__icon--lien { font-size: 1.3rem; font-weight: 400; }
.ressource__icon--cover {
  /* Image de couverture réelle : prend toute la hauteur de la card (stretch
     du flex parent), largeur recalculée en conséquence via le ratio 20:23. */
  width: auto; height: auto; aspect-ratio: 20 / 23;
  background: none; padding: 0;
}
.ressource__icon--cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.ressource__body { min-width: 0; }
.ressource__badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--navy);
  border: 1px solid var(--navy); border-radius: var(--radius-pill);
  padding: 2px 10px; margin-bottom: 6px; letter-spacing: .2px;
}
.ressource__title { font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.ressource__card:hover .ressource__title { color: var(--orange); }
.ressource__date { font-size: 0.8rem; color: var(--muted); font-style: italic; margin: 0 0 10px; }
.ressource__download {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 700; color: var(--orange);
}

@media (max-width: 900px) {
  .ressources__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ressources__grid { grid-template-columns: 1fr; }
}

/* ---------- PAGE SYNDICAT NATIONAL : postes à pourvoir (page-syndicat-national.php) ---------- */
.postes__list { display: flex; flex-direction: column; gap: 24px; margin-top: 28px; }
.poste__card {
  display: flex; gap: 24px;
  padding: 24px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); transition: border-color .15s, box-shadow .15s;
}
.poste__card:hover { border-color: var(--orange); box-shadow: 0 4px 20px rgba(242,125,82,.18); }
.poste__media { flex-shrink: 0; width: 200px; }
.poste__media img { width: 100%; height: auto; border-radius: 6px; display: block; }
.poste__media-ph { width: 100%; aspect-ratio: 16 / 10; background: var(--bg-soft); border-radius: 6px; }
.poste__body { flex: 1; min-width: 0; }
.poste__badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700; color: #fff;
  background: var(--navy); border-radius: var(--radius-pill);
  padding: 3px 12px; margin-bottom: 10px; letter-spacing: .2px;
}
.poste__title { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.poste__title a:hover { color: var(--orange); }
.poste__desc { font-size: 0.95rem; line-height: 1.6; color: var(--ink); }
.poste__desc p { margin: 0 0 1em; }
.poste__desc > *:last-child { margin-bottom: 0; }
.poste__actions { flex-shrink: 0; display: flex; align-items: center; }
.poste__contact-btn { white-space: nowrap; }

@media (max-width: 900px) {
  .poste__card { flex-direction: column; }
  .poste__media { width: 100%; }
  .poste__actions { justify-content: flex-start; }
}

/* ---------- PAGE ANTIDOTE ---------- */
.antidote__flipbook {
  margin: 32px 0;
}
.antidote__flipbook-actions {
  display: flex; justify-content: flex-end; margin-top: 16px;
}

.numeros__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.numero__card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--bg);
  transition: box-shadow .2s;
}
.numero__card:hover { box-shadow: 0 4px 20px rgba(242,125,82,.18); border-color: var(--orange); }
.numero__cover {
  width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
}
.numero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.numero__cover-ph  { width: 100%; height: 100%; background: var(--bg-soft); }
.numero__body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.numero__label {
  font-size: 0.8rem; font-weight: 800; color: var(--orange);
  text-transform: uppercase; letter-spacing: .4px; margin: 0;
}
.numero__title {
  font-size: 0.95rem; font-weight: 700; color: var(--ink); margin: 0;
}

.numeros__list {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-direction: column; gap: 0;
}
.numeros__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.numeros__item:first-child { border-top: 1px solid var(--line); }
.numeros__label { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.numeros__unavailable { font-size: 0.8rem; color: var(--muted); font-style: italic; }
.numeros__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Même langage visuel que .btn (voir style.css) : pilule, bordure 2px, accent orange. */
.numeros__pagination {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-top: 32px;
}
.numeros__pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 6px;
  border-radius: var(--radius-pill); border: 2px solid var(--line);
  font-size: 0.875rem; font-weight: 700; color: var(--navy);
  background: #fff; transition: .2s;
}
.numeros__pagination a.page-numbers:hover {
  border-color: var(--orange); color: var(--orange);
  box-shadow: 0 2px 8px rgba(242,125,82,.18);
}
.numeros__pagination .page-numbers.current {
  background: var(--orange); border-color: var(--orange); color: #fff;
  box-shadow: 0 2px 10px rgba(242,125,82,.32);
}
.numeros__pagination .page-numbers.dots {
  min-width: auto; width: 24px; height: 40px; border: none; background: none; color: var(--muted);
}
.numeros__pagination .prev, .numeros__pagination .next { font-size: 1rem; }

@media (max-width: 900px) {
  .numeros__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .numeros__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- PLAN DU SITE (page-plan-du-site.php) ---------- */
/* Simple liste imbriquée (Isnar_Sitemap_Walker, functions.php — pas le même
   walker que le mega-menu du header) : niveau 1 en gras, sous-niveaux
   indentés. Un item sans destination propre (rendu en <span> par ce walker,
   ex. un titre de premier niveau qui ne fait qu'ouvrir un mega-menu) reste
   au même gabarit que les liens, mais en gris et sans effet de survol —
   visuellement non cliquable, sans dupliquer les règles de mise en page. */
.sitemap__list, .sitemap__list ul {
  list-style: none; margin: 0; padding: 0;
}
.sitemap__list > li { margin-bottom: 4px; }
.sitemap__list ul { padding-left: 24px; margin-top: 4px; margin-bottom: 12px; }
.sitemap__list a, .sitemap__list span {
  display: inline-block; padding: 6px 0; font-size: 0.95rem; color: var(--ink);
  border-bottom: 1px solid transparent; transition: color .15s;
}
.sitemap__list a:hover { color: var(--orange); }
.sitemap__list span { color: var(--muted); }
.sitemap__list > li > a, .sitemap__list > li > span { font-weight: 700; font-size: 1.05rem; }