/* ==========================================================================
   SEMECO — feuille de styles
   Charte : .claude/charte.md  ·  Couleurs officielles du logo 2025
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices — auto-hébergées, jamais servies depuis le CDN Google.
   Un appel à fonts.googleapis.com transmet l'IP du visiteur à Google sans
   consentement : la CNIL y voit un transfert de données non consenti.

   Oswald est une police variable (axe wght 200→700) : un seul fichier par
   jeu de caractères couvre toutes les graisses. D'où `font-weight: 200 700`.
   Seuls latin et latin-ext sont embarqués — le site est en français.
   Licence SIL OFL 1.1, voir assets/fonts/OFL.txt
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("assets/fonts/oswald-latin.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: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("assets/fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs officielles (charte-graphiques.pdf, logo 2025).
     Elles priment sur les teintes relevées dans les captures de l'ancien site. */
  --semeco-blue: #283583;
  --semeco-orange: #f07f1b;

  /* Dérivées */
  --semeco-blue-dark: #1e2865;
  --semeco-orange-dark: #d86d0f;
  --semeco-black: #000;
  /* Retour client (round 2) : le texte courant est bleu, comme sur l'ancien site. */
  --semeco-text: var(--semeco-blue);
  --semeco-grey-bg: #f5f5f5;
  --semeco-rule: #e2e2e2;
  --semeco-white: #fff;

  /* Typographie */
  --font-title: "Oswald", "Segoe UI", system-ui, sans-serif;
  --font-body:
    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Boutons pilule : uniquement là où les captures les montrent (encart
     Qui sommes-nous de l'accueil, envoi du formulaire) — les « Lire la
     suite » restent carrés. Retour client round 2. */
  --radius-pill: 999px;

  /* Rythme */
  --wrap: 1170px;
  --gutter: 20px;
  --section-y: 80px;

  --transition: 0.25s ease;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--semeco-text);
  background: var(--semeco-white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--semeco-orange);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover,
a:focus-visible {
  color: var(--semeco-orange-dark);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-title);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.6em;
  color: var(--semeco-blue);
}

p {
  margin: 0 0 1.2em;
}
p:last-child {
  margin-bottom: 0;
}

/* Accessibilité : un focus visible au clavier est indispensable.
   `:focus-visible` ne l'affiche qu'au clavier, pas au clic souris. */
:focus-visible {
  outline: 3px solid var(--semeco-orange);
  outline-offset: 2px;
}

/* Respecte le réglage système « réduire les animations » (slider, transitions). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Masque visuellement sans masquer aux lecteurs d'écran. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : premier élément focusable, invisible jusqu'au focus. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 1000;
  padding: 12px 20px;
  background: var(--semeco-blue);
  color: var(--semeco-white);
  transition: top var(--transition);
}
.skip-link:focus {
  top: 10px;
  color: var(--semeco-white);
}

/* --------------------------------------------------------------------------
   Titres de section — Oswald, majuscules, orange, filet court en dessous.
   Motif récurrent : ACTUALITÉS, QUI SOMMES-NOUS, HORAIRES, CONTACT.
   -------------------------------------------------------------------------- */
.section-title {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--semeco-orange);
  margin: 0 0 18px;
}
.section-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  margin-top: 18px;
  background: var(--semeco-orange);
}
.section-title--light,
.section-title--light::after {
  color: var(--semeco-white);
}
.section-title--light::after {
  background: var(--semeco-white);
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border: 0;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background var(--transition),
    transform var(--transition);
}
.btn:hover {
  transform: translateY(-1px);
}

.btn--pill {
  border-radius: var(--radius-pill);
}

.btn--orange {
  background: var(--semeco-orange);
  color: var(--semeco-white);
}
.btn--orange:hover,
.btn--orange:focus-visible {
  background: var(--semeco-orange-dark);
  color: var(--semeco-white);
}

/* Sur aplat orange (bloc Qui sommes-nous de l'accueil). */
.btn--blue {
  background: var(--semeco-blue);
  color: var(--semeco-white);
}
.btn--blue:hover,
.btn--blue:focus-visible {
  background: var(--semeco-blue-dark);
  color: var(--semeco-white);
}

/* --------------------------------------------------------------------------
   Contenu éditorial (éditeur de blocs)
   -------------------------------------------------------------------------- */
.entry-content > * {
  margin-block: 0 1.2em;
}
.entry-content ul,
.entry-content ol {
  padding-left: 1.2em;
}
.entry-content li {
  margin-bottom: 0.4em;
}
.entry-content strong {
  color: var(--semeco-orange);
}

/* `alignfull` : permet à un bloc Galerie de sortir du conteneur et d'occuper
   toute la largeur — c'est ce qui rend la galerie des pages activités
   administrable sans champ custom.

   Contrainte : les 50 % ci-dessous sont ceux du parent. Le débord ne tombe juste
   que si `.entry-content` est centré ET occupe toute la largeur du `.wrap`. Lui
   poser un `max-width` décale la galerie — c'est le bug corrigé sur les pages
   activités. Pour restreindre la longueur de ligne quelque part, viser les
   enfants (`> :not([class*="align"])`), jamais le conteneur. */
.entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* `100vw` compte la barre de défilement verticale, pas la largeur réellement
   disponible : dès qu'une page est assez haute pour l'afficher, la galerie
   déborde de sa largeur et crée un scroll horizontal. Aucune unité CSS ne
   donne « la largeur sans la barre », d'où ce rognage — `clip` plutôt que
   `hidden`, qui ferait de `.site-main` un conteneur de défilement. */
.site-main {
  overflow-x: clip;
}

.entry-content .alignwide {
  width: min(100vw, 1400px);
  max-width: none;
  margin-left: calc(50% - min(50vw, 700px));
  margin-right: calc(50% - min(50vw, 700px));
}

/* --------------------------------------------------------------------------
   Marqueur de contenu manquant.
   Rendu visible dans l'admin comme en front : le client doit voir ce qui reste
   à remplir. Voir .claude/contenu.md
   -------------------------------------------------------------------------- */
.semeco-todo {
  border-left: 4px solid var(--semeco-orange);
  background: #fff6ec;
  padding: 16px 20px;
  color: #8a5520;
  font-size: 0.95rem;
}

/* ==========================================================================
   HEADER  (SEMM-18 — réf. header-personalisable.png)
   ========================================================================== */
/* `sticky` plutôt que `fixed` : le header garde sa place dans le flux, donc
   rien à compenser sur le contenu — et rien à recompenser quand sa hauteur
   change. Aucun ancêtre ne porte d'`overflow`, qui casserait le collage. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--semeco-white);
  box-shadow: 0 2px 12px rgb(0 0 0 / 15%);
}

/* La barre d'admin de WordPress est fixe au-dessus de 600 px : sans décalage,
   elle recouvrirait le header collé. Sous 600 px elle redevient `absolute` et
   défile avec la page — le décalage doit alors disparaître. */
body.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}
@media (max-width: 600px) {
  body.admin-bar .site-header {
    top: 0;
  }
}

/* Le header collé masquerait la cible d'une ancre. */
#content,
#contact {
  scroll-margin-top: 120px;
}

/* Le logo est sur l'axe de la page, pas au milieu du groupe : les deux colonnes
   latérales se partagent à parts égales la place restante, celle du logo tombe
   donc au centre quelle que soit la largeur du menu ou des coordonnées. Centrer
   un groupe en flex ne le donnait que par coïncidence — l'ajout de la loupe
   suffisait à décaler le logo vers la gauche.

   `1fr` et non `minmax(0, 1fr)` : les blocs latéraux gardent le droit d'imposer
   leur largeur minimale. S'il n'y a plus la place, le logo dérive de quelques
   pixels — ce que le point de rupture évite — au lieu que le menu soit rogné. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1600px;
  margin-inline: auto;
  padding: 10px var(--gutter);
}

/* Les colonnes latérales occupent toute la place, mais leur contenu se serre
   contre le logo : la barre garde son allure de groupe centré au lieu de
   s'étaler jusqu'aux bords. */
.site-nav {
  justify-self: end;
}
.site-header__aside {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* `flex: none` : sans lui, les blocs se compriment quand la place manque.
   Les liens du menu étant en `nowrap`, il déborde alors sans rien dire et son
   dernier item (SIGNALER) disparaît sous le logo. Mieux vaut passer en tiroir
   que rogner en silence — d'où le point de rupture à 1360 px, au-dessus de la
   largeur intrinsèque du groupe (~1230 px, plus ~86 px pour la loupe). */
.site-nav,
.site-header__logo,
.site-header__contact,
.header-search {
  flex: none;
}

.site-header__logo img,
.site-header__logo .custom-logo {
  width: 92px;
  height: auto;
}

.site-title {
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: var(--semeco-orange);
  text-transform: uppercase;
}

/* --- Coordonnées du header --- */
.site-header__contact {
  display: flex;
  align-items: center;
  gap: 26px;
}

.header-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--semeco-black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.header-contact:hover {
  color: var(--semeco-orange);
}
.header-contact .icon {
  font-size: 1.1em;
  flex: none;
}
.header-contact__label {
  font-weight: 600;
}

/* --- Menu principal --- */
.primary-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-menu li {
  position: relative;
}

.primary-menu > li > a {
  display: block;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: var(--semeco-black);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-page-ancestor > a {
  color: var(--semeco-orange);
}

/* La page courante est signalée par la graisse autant que par la couleur :
   la couleur seule ne suffit pas pour qui ne la distingue pas. */
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-page-ancestor > a {
  font-weight: 700;
}

/* --- Sous-menus --- */
.primary-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 240px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ececec;
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);

  /* `visibility` plutôt que `display:none` : c'est ce qui rend la transition
     possible et garde les liens hors du parcours clavier quand c'est fermé. */
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--transition),
    visibility var(--transition);
}

.primary-menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

.primary-menu .sub-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 0.9rem;
  color: #333;
}
.primary-menu .sub-menu a:hover {
  background: #e0e0e0;
  color: var(--semeco-orange);
}

/* Ouverture au survol (desktop) ou via le bouton injecté en JS (clavier/tactile). */
@media (hover: hover) and (min-width: 1360px) {
  .primary-menu li:hover > .sub-menu,
  .primary-menu li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
  }
}

.primary-menu li.is-open > .sub-menu {
  visibility: visible;
  opacity: 1;
}

/* --- Bouton d'ouverture des sous-menus --- */
.submenu-toggle {
  position: absolute;
  top: 6px;
  right: 0;
  display: none;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--semeco-black);
}

.submenu-toggle__icon {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.menu-item-has-children.is-open > .submenu-toggle .submenu-toggle__icon {
  transform: rotate(-135deg);
}

/* Desktop : la flèche marque le parent, le survol suffit à ouvrir. */
@media (min-width: 1360px) {
  /* Le parent devient flex pour poser la flèche à côté du libellé.
     En `position:static` seul, le bouton passait à la ligne sous le texte. */
  .primary-menu > .menu-item-has-children {
    display: flex;
    align-items: center;
  }
  .primary-menu > .menu-item-has-children > .submenu-toggle {
    position: static;
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    pointer-events: none;
  }
  .primary-menu > .menu-item-has-children > a {
    padding-right: 4px;
  }
  .primary-menu
    > .menu-item-has-children
    > .submenu-toggle
    .submenu-toggle__icon {
    width: 7px;
    height: 7px;
    margin-top: -3px;
  }

  .primary-menu .sub-menu .submenu-toggle {
    display: block;
    top: 10px;
    right: 8px;
  }
  .primary-menu .sub-menu .submenu-toggle__icon {
    transform: rotate(-45deg);
  }
}

/* --- Bouton du menu mobile --- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--semeco-blue);
  transition:
    transform var(--transition),
    opacity var(--transition);
}
.nav-toggle__bars {
  position: relative;
  margin-inline: auto;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before {
  top: -7px;
}
.nav-toggle__bars::after {
  top: 7px;
}

.nav-toggle.is-active .nav-toggle__bars {
  background: transparent;
}
.nav-toggle.is-active .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav__contact {
  display: none;
}

/* --- Recherche --- */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Filet vertical qui sépare la loupe du reste du header, cf. captures. */
  padding-left: 26px;
  border-left: 1px solid var(--semeco-rule);
}

.header-search__toggle {
  display: flex;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.15rem;
  color: var(--semeco-black);
}
.header-search__toggle:hover,
.header-search__toggle:focus-visible {
  color: var(--semeco-orange);
}

/* Le champ se déplie à gauche de la loupe, hors flux : déplié dans le flux, il
   ajouterait sa largeur au groupe centré, qui déborderait alors du header. */
.header-search__form {
  display: none;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 10px;
  background: var(--semeco-white);
}
.header-search.is-open .header-search__form {
  display: block;
}

.header-search__field {
  width: 180px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--semeco-rule);
  background: transparent;
  font-size: 0.9rem;
  color: var(--semeco-text);
}
.header-search__field:focus {
  outline: none;
  border-bottom-color: var(--semeco-orange);
}

/* ==========================================================================
   HEADER — mobile
   ========================================================================== */
@media (max-width: 1359px) {
  /* En tiroir, les trois colonnes n'ont plus de sens : bouton à gauche, logo à
     droite, et le menu passe sur sa propre ligne en pleine largeur. */
  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
  }

  .nav-toggle {
    display: block;
    order: 1;
  }
  .site-header__logo {
    order: 2;
  }
  /* Les coordonnées de la barre du haut sont illisibles sur mobile : elles
     réapparaissent dans le tiroir. La loupe les suit, d'où le bloc entier. */
  .site-header__aside {
    display: none;
  }

  .site-nav {
    order: 3;
    width: 100%;
    display: none;
  }
  /* Le tiroir vit dans le header collé : un menu long dépasserait l'écran sans
     jamais pouvoir défiler. Il défile donc sur lui-même, sans entraîner la page
     une fois arrivé en bout de course. */
  .site-nav.is-open {
    display: block;
    padding-block: 12px;
    border-top: 1px solid var(--semeco-rule);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .primary-menu {
    display: block;
  }
  .primary-menu > li > a,
  .primary-menu .sub-menu a {
    padding: 12px 4px;
  }

  /* En tiroir, les sous-menus se déplient dans le flux : en absolu ils
     sortiraient de l'écran. */
  .primary-menu .sub-menu,
  .primary-menu .sub-menu .sub-menu {
    position: static;
    display: none;
    visibility: visible;
    opacity: 1;
    min-width: 0;
    padding: 0 0 0 18px;
    background: none;
    box-shadow: none;
  }
  .primary-menu li.is-open > .sub-menu {
    display: block;
  }

  .submenu-toggle {
    display: block;
  }

  .site-nav__contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--semeco-rule);
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   SLIDER  (réf. accueil-1.png)
   ========================================================================== */
.slider {
  position: relative;
  overflow: hidden;
  background: #ddd;
}

.slider__track {
  position: relative;
  /* Plus haut que la maquette (~4:1) : à ce ratio le CSS rognait la slide de
     haut en bas et les sujets étaient coupés (retour client, round 3).
     `aspect-ratio` réserve la place avant le chargement de l'image : pas de
     saut de mise en page. */
  aspect-ratio: 2547 / 750;
  min-height: 260px;
}

.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.slider__slide.is-active {
  opacity: 1;
}

.slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 60px;
  border: 0;
  background: rgb(0 0 0 / 25%);
  color: var(--semeco-white);
  font-size: 1.6rem;
  cursor: pointer;
  transition: background var(--transition);
}
.slider__arrow:hover {
  background: rgb(0 0 0 / 45%);
}
.slider__arrow--prev {
  left: 0;
}
.slider__arrow--prev .icon {
  transform: rotate(180deg);
}
.slider__arrow--next {
  right: 0;
}

.slider__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.slider__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 2px solid var(--semeco-white);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition);
}
.slider__dot.is-active {
  background: var(--semeco-orange);
  border-color: var(--semeco-orange);
}

/* ==========================================================================
   ACCUEIL — ACTUALITÉS  (réf. accueil-1.png)
   ========================================================================== */
.home-news {
  padding-block: var(--section-y);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--semeco-blue);
}

.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.news-card__media:hover .news-card__image {
  transform: scale(1.04);
}

.news-card__title {
  margin: 16px 0 6px;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3;
}
.news-card__title a {
  color: var(--semeco-orange);
}
.news-card__title a:hover {
  color: var(--semeco-orange-dark);
}

.news-card__date {
  display: block;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--semeco-orange);
}

.news-card__cta {
  margin: 0;
}
.news-card__cta .btn {
  padding: 11px 22px;
  font-size: 0.78rem;
}

.home-news__more {
  margin-top: 40px;
  text-align: center;
}

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

/* ==========================================================================
   ACCUEIL — QUI SOMMES-NOUS  (réf. accueil-2.png)
   ========================================================================== */
.home-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--semeco-orange);
}

.home-about__text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 60px var(--gutter);
  color: var(--semeco-white);
}

/* Aligne le texte sur la grille du reste de la page malgré l'aplat pleine
   largeur : sans cela, le bloc orange décalerait la colonne de texte. */
.home-about__inner {
  width: 100%;
  max-width: calc(var(--wrap) / 2 - var(--gutter));
}

.home-about__body p {
  margin-bottom: 1.1em;
}

.home-about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 0;
}

/* L'image s'arrête au bord droit du `.wrap`, l'aplat orange continue jusqu'au
   bord du viewport (cf. accueil-2 — retour client round 2). */
.home-about__media {
  display: grid;
  grid-template-rows: calc(50% - 8px) calc(50% - 8px);
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: calc(var(--wrap) / 2);
  gap: 16px;
  justify-self: start;
}

.home-about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image principale : occupe toute la largeur sur la 1re ligne. */
.home-about__image:not(.home-about__image--vertical-1):not(.home-about__image--vertical-2) {
  grid-column: 1 / -1;
  grid-row: 1;
}

/* Images verticales : côte à côte sur la 2e ligne. */
.home-about__image--vertical-1 {
  grid-column: 1;
  grid-row: 2;
}

.home-about__image--vertical-2 {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 860px) {
  .home-about {
    grid-template-columns: 1fr;
  }
  .home-about__text {
    justify-content: center;
  }
  .home-about__inner {
    max-width: var(--wrap);
  }
  .home-about__media {
    max-width: none;
    min-height: 280px;
  }
}

/* --- Séparateur à pastille --- */
.section-divider {
  position: relative;
  max-width: var(--wrap);
  margin: 60px auto;
  padding-inline: var(--gutter);
}
.section-divider::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--semeco-rule);
}
.section-divider__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border: 5px solid var(--semeco-white);
  border-radius: 50%;
  background: var(--semeco-orange);
  /* Icône carnet blanche au centre de la pastille (cf. accueil-2.png). */
  color: var(--semeco-white);
  font-size: 14px;
}

/* ==========================================================================
   ACCUEIL — HORAIRES / CONTACT  (réf. accueil-2.png, accueil-3.png)
   ========================================================================== */
.home-contact {
  padding-bottom: var(--section-y);
}

.home-contact__top,
.home-contact__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.home-contact__bottom {
  margin-top: 40px;
  align-items: start;
}

.hours-list,
.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hours-list li {
  margin-bottom: 6px;
}
.hours-list__day {
  color: var(--semeco-orange);
}
.hours-list__time {
  color: var(--semeco-blue);
}

/* Coordonnées en Oswald majuscules bleues, cf. accueil-2 (retour client
   round 2 : la typo système ne collait pas). */
.contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  color: var(--semeco-blue);
  text-transform: uppercase;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.contact-list__item .icon {
  flex: none;
  margin-top: 2px;
  font-size: 1.5em;
  color: var(--semeco-orange);
}
.contact-list__item a {
  color: var(--semeco-blue);
}
.contact-list__item a:hover {
  color: var(--semeco-orange);
}

@media (max-width: 860px) {
  .home-contact__top,
  .home-contact__bottom {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ==========================================================================
   CARTE
   ========================================================================== */
.map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #eee;
  overflow: hidden;
}

.map__frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.map__placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: #eef0f4;
}

.map__placeholder-text {
  max-width: 34ch;
  margin: 0;
  font-size: 0.9rem;
  color: var(--semeco-text);
}

/* Lien de repli du placeholder Google : atteignable sans consentement. */
.map__fallback {
  font-size: 0.85rem;
}

/* ==========================================================================
   FORMULAIRE DE CONTACT  (réf. accueil-3.png)
   ========================================================================== */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
}

.field {
  margin: 0 0 8px;
}
.field--full {
  grid-column: 1 / -1;
}

/* Champs soulignés, sans bordure — c'est le trait du formulaire d'origine. */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid var(--semeco-rule);
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--semeco-blue);
  transition: border-color var(--transition);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--semeco-blue);
  /* Certains navigateurs appliquent une opacité par défaut aux placeholders,
     ce qui les rend illisibles. */
  opacity: 1;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--semeco-orange);
}
/* Le focus clavier reste visible : `outline:none` seul serait un piège
   d'accessibilité. */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--semeco-orange);
  outline-offset: 3px;
}

.contact-form textarea {
  /* Pas de poignée de redimensionnement (retour client, round 2). */
  resize: none;
  min-height: 150px;
}

.form-actions {
  margin-top: 24px;
}

.form-required {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--semeco-orange);
}

.form-notice {
  grid-column: 1 / -1;
  margin: 0 0 18px;
  padding: 14px 18px;
  border-left: 4px solid;
  font-size: 0.95rem;
}
.form-notice--success {
  border-color: #2e7d32;
  background: #edf7ed;
  color: #1b5e20;
}
.form-notice--error {
  border-color: #c62828;
  background: #fdecea;
  color: #b71c1c;
}

/* Honeypot : hors écran plutôt que `display:none`, que certains bots
   détectent et contournent. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 520px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FORMULAIRE DE SIGNALEMENT  (Contact Form 7)

   Seul endroit du site où l'on habille le balisage de CF7. C'est le prix de
   l'exception à la règle « zéro plugin » (.claude/architecture.md), et il est
   circonscrit à cette section.

   Deux différences assumées avec le formulaire de contact de l'accueil : des
   labels visibles au lieu de simples placeholders (douze champs répartis en
   deux sections ne se devinent pas), et des sections titrées. Le trait des
   champs — souligné, sans bordure, focus orange — reste le même : les deux
   formulaires doivent se lire comme venant du même site.
   ========================================================================== */
.page-signalement__body {
  padding-block: var(--section-y);
}

.sig-fieldset {
  margin: 0 0 40px;
  padding: 0;
  border: 0;
}

.sig-legend {
  display: block;
  width: 100%;
  margin-bottom: 18px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--semeco-orange);
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--semeco-blue);
}

/* Même grille que .contact-form : deux colonnes, repli à une sous 520 px.
   La grille est portée par un div interne et non par le <fieldset> : un
   <legend> n'est pas un enfant de flux ordinaire, et le rendre grid-item donne
   des résultats qui divergent d'un moteur à l'autre. */
.sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
}

.sig-field--full,
.sig-required {
  grid-column: 1 / -1;
}

.sig-field {
  margin: 0 0 14px;
}

.sig-field > label,
.sig-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--semeco-blue);
}

/* Aide en petit, juste sous son label : ni ligne blanche au-dessus, ni écart
   avec le champ qu'elle décrit. Le `line-height: 1.7` du corps de page ferait
   ici trois lignes d'air pour deux lignes de texte. */
.sig-help {
  display: block;
  margin: 2px 0 6px;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--semeco-blue);
  opacity: 0.75;
}

.sig-req {
  color: var(--semeco-orange);
}

/* Champs soulignés, sans bordure — repris de .contact-form. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--semeco-rule);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--semeco-blue);
  transition: border-color var(--transition);
}

.wpcf7-form select {
  /* Sans cela, Safari impose son propre fond gris et ses coins arrondis. */
  appearance: none;
  padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, var(--semeco-blue) 50%),
    linear-gradient(135deg, var(--semeco-blue) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Pas d'anneau de focus : sur douze champs soulignés, il encadrait le champ
   d'un rectangle qui n'appartient pas au dessin du formulaire. Le soulignement
   orange, épaissi par une ombre plutôt que par la bordure — qui décalerait la
   ligne d'un pixel — reste un indicateur de focus visible, clavier compris. */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-bottom-color: var(--semeco-orange);
  box-shadow: 0 1px 0 var(--semeco-orange);
}

.wpcf7-form textarea {
  /* Pas de poignée de redimensionnement, comme le formulaire de contact. */
  resize: none;
  min-height: 180px;
}

/* Radios : en ligne tant que la place le permet. CF7 les enveloppe dans des
   .wpcf7-list-item que l'on remet à zéro (marge gauche par défaut). */
.sig-field--radio .wpcf7-list-item {
  margin: 0 24px 0 0;
}

.sig-field--radio .wpcf7-form-control {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  padding-top: 4px;
}

.wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}

.wpcf7-list-item input[type="radio"],
.wpcf7-list-item input[type="checkbox"] {
  width: auto;
  accent-color: var(--semeco-orange);
}

/* Les trois emplacements de fichier tiennent sur une ligne : ce sont trois
   champs d'un même besoin, pas trois questions. */
.sig-field--files input[type="file"] {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 6px 16px 6px 0;
  padding: 0;
  border: 0;
  font-size: 0.9rem;
}

/* Le [quiz] rend lui-même sa question dans un <label>. Elle est présentée comme
   la question qu'elle est, sous l'intitulé « Question de sécurité » — un champ
   qui n'annoncerait pas ce qu'il vérifie passerait pour une lubie. */
.sig-quiz .wpcf7-quiz-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--semeco-blue);
}
.sig-quiz input {
  max-width: 220px;
}

/* Consentement : la case et son texte forment un bloc, pas une ligne de plus. */
.sig-consent .wpcf7-list-item {
  margin: 0;
}
.sig-consent .wpcf7-list-item label {
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
}
.sig-consent .wpcf7-list-item-label {
  flex: 1;
}

.sig-actions {
  margin-top: 20px;
}

.sig-required {
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--semeco-orange);
}

/* --- Retours de CF7 -------------------------------------------------------
   CF7 sort ses propres messages avec un style par défaut (bordures colorées,
   marges) qui n'a rien à voir avec le site. On les rhabille comme les
   .form-notice du formulaire de contact. */
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 0;
  border-left: 4px solid;
  font-size: 0.95rem;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #2e7d32;
  background: #edf7ed;
  color: #1b5e20;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #c62828;
  background: #fdecea;
  color: #b71c1c;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #b71c1c;
}

.wpcf7-form .wpcf7-not-valid {
  border-bottom-color: #c62828;
}

.wpcf7-spinner {
  margin: 0 0 0 12px;
  vertical-align: middle;
}

@media (max-width: 520px) {
  .sig-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FOOTER  (réf. accueil-3.png)
   ========================================================================== */
/* Le bleu est posé sur le footer entier et hérité : les descendants n'ont plus
   à porter la couleur un par un. Seuls les liens doivent être rappelés, `a`
   ayant sa propre couleur globale. */
.site-footer {
  padding-block: 60px;
  background: var(--semeco-grey-bg);
  font-size: 0.9rem;
  color: var(--semeco-blue);
}

/* Liens et titres orange sur texte courant bleu, cf. accueil-3 (retour client
   round 2). */
.site-footer a {
  color: var(--semeco-orange);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--semeco-blue);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.site-footer__title {
  margin: 26px 0 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--semeco-orange);
}

.footer-legal-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-legal-menu li {
  margin-bottom: 6px;
}

.footer-hours {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-hours li {
  margin-bottom: 4px;
}

.site-footer__col--center {
  text-align: center;
}

.site-footer__logo img {
  width: 92px;
  margin-inline: auto;
}

.site-footer__brand {
  margin: 12px 0 10px;
  font-family: var(--font-title);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--semeco-orange);
}

.site-footer__col--center p {
  margin: 0 0 4px;
}

.site-footer__col--legal {
  text-align: center;
}

.social-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.social-links a {
  display: block;
  font-size: 1.35rem;
  color: var(--semeco-orange);
}
.social-links a:hover {
  color: var(--semeco-blue);
}

@media (max-width: 860px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .social-links {
    justify-content: center;
  }
}

/* ==========================================================================
   ACTUALITÉS — liste et article  (SEMM-22)
   ========================================================================== */
.news-archive {
  padding-block: var(--section-y);
}

/* La liste reprend la grille de l'accueil, en un peu plus aéré. */
.news-grid--archive {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
}

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

/* --- Pagination --- */
.pagination {
  margin-top: 50px;
}

.pagination .nav-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  font-family: var(--font-title);
  color: var(--semeco-blue);
  transition:
    background var(--transition),
    color var(--transition);
}
.pagination .page-numbers:hover {
  background: var(--semeco-grey-bg);
}
.pagination .page-numbers.current {
  background: var(--semeco-orange);
  color: var(--semeco-white);
}

/* --- Article --- */
/* Bannière centrée dans le conteneur, plus pleine largeur (retour client,
   round 2). Le ratio suit la taille `semeco_news_hero` (1170×500). */
.single-news__hero {
  max-width: var(--wrap);
  margin-inline: auto;
  aspect-ratio: 1170 / 500;
  max-height: 500px;
  overflow: hidden;
  background: var(--semeco-blue);
}

.single-news__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-news__body {
  padding-block: var(--section-y);
}

.single-news__date {
  display: block;
  margin: -6px 0 34px;
  font-size: 0.9rem;
  color: var(--semeco-orange);
}

.single-news .entry-content {
  max-width: 78ch;
}

.single-news__nav {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--semeco-rule);
}

.single-news__nav-link {
  max-width: 46%;
  color: var(--semeco-blue);
}
.single-news__nav-link:hover {
  color: var(--semeco-orange);
}

/* Le suivant s'aligne à droite ; `margin-left:auto` le garde en place même
   quand il n'y a pas de précédent. */
.single-news__nav-link--next {
  margin-left: auto;
  text-align: right;
}

.single-news__nav-label {
  display: block;
  font-size: 0.8rem;
  color: var(--semeco-orange);
  text-transform: uppercase;
}

.single-news__nav-title {
  display: block;
  font-family: var(--font-title);
  font-size: 1rem;
}

.single-news__back {
  margin-top: 40px;
}

@media (max-width: 600px) {
  .single-news__nav {
    flex-direction: column;
  }
  .single-news__nav-link {
    max-width: none;
  }
  .single-news__nav-link--next {
    margin-left: 0;
    text-align: left;
  }
}

/* ==========================================================================
   ACTIVITÉS  (SEMM-20 — réf. activites.png)
   ========================================================================== */
.page-activite__body,
.page-activites__body {
  padding-block: var(--section-y);
}

/* Pas de `max-width` ici, et ce n'est pas un oubli : `alignfull` se déporte avec
   `calc(50% - 50vw)`, où les 50 % sont ceux du PARENT. Un parent plus étroit que
   le `.wrap` fausse le calcul et décale la galerie vers la gauche. En laissant
   `.entry-content` occuper le `.wrap` (centré), le débord retombe pile sur les
   bords du viewport. La maquette montre d'ailleurs une colonne large et centrée,
   pas une colonne étroite alignée à gauche. */
.page-activite .entry-content,
.page-activites .entry-content {
  max-width: none;
}

/* La galerie du haut est un bloc natif posé en pleine largeur. Elle doit
   sortir du conteneur ET remonter contre le header, comme sur la maquette. */
.page-activite .entry-content > .wp-block-gallery.alignfull:first-child {
  margin-top: calc(var(--section-y) * -1);
  margin-bottom: 50px;
  gap: 3px;
}

.page-activite .wp-block-gallery.alignfull .wp-block-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 637 / 277;
  object-fit: cover;
}

/* Le titre passe sous la galerie pleine largeur. */
.page-activite .entry-content > .wp-block-gallery.alignfull:first-child + * {
  margin-top: 0;
}

/* --- Bandeau orange de contact --- */
.contact-banner {
  padding-block: 46px;
  background: var(--semeco-orange);
  color: var(--semeco-white);
  text-align: center;
}

.contact-banner__title {
  margin: 0 0 14px;
  font-size: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--semeco-white);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.contact-banner p {
  margin: 0 0 4px;
}

.contact-banner a {
  color: var(--semeco-white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-banner a:hover {
  color: var(--semeco-blue);
}

.contact-banner__address {
  color: var(--semeco-white);
}

/* --- Index des activités --- */
.activite-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

.activite-card__link {
  display: block;
  color: var(--semeco-orange);
}

/* Pas d'`aspect-ratio` ici : la photo est affichée entière, à son ratio
   d'origine (retour client, round 3). Les cartes d'une même ligne peuvent donc
   avoir des hauteurs différentes. `overflow: hidden` reste indispensable, c'est
   lui qui contient le zoom au survol. */
.activite-card__media {
  display: block;
  overflow: hidden;
  background: var(--semeco-blue);
}

.activite-card__image {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

/* Sans image, le `<span>` de repli n'a rien pour se donner une hauteur. */
.activite-card__image--empty {
  aspect-ratio: 16 / 9;
}
.activite-card__link:hover .activite-card__image {
  transform: scale(1.04);
}

.activite-card__title {
  display: block;
  margin-top: 14px;
  font-family: var(--font-title);
  font-size: 1.1rem;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .activite-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   QUI SOMMES-NOUS  (SEMM-21 — réf. qui-sommes-nous.png)
   ========================================================================== */
.page-about {
  padding-block: var(--section-y);
}

.page-about__intro {
  margin-bottom: 60px;
}

/* Intertitres orange non gras, cf. capture (« La direction générale »…) et
   retour client round 2. */
.page-about__intro .entry-content h2,
.page-about__intro .entry-content h3 {
  margin-top: 1.6em;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--semeco-orange);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-card {
  text-align: center;
}

.team-card__media {
  width: min(100%, 260px);
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

.team-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  margin: 18px 0 0;
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--semeco-orange);
}

@media (max-width: 780px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
}
@media (max-width: 460px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BANDEAU COOKIES  (réf. accueil-3.png)
   ========================================================================== */
.cookie-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 900;
  background: #3f4c6b;
  color: var(--semeco-white);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 20%);
}

/* `hidden` doit gagner contre l'affichage du bandeau, sinon il apparaît
   brièvement avant que le JS ne tranche. */
.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1600px;
  margin-inline: auto;
  padding: 16px var(--gutter);
}

.cookie-banner__text {
  margin: 0;
  font-size: 0.88rem;
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}

.cookie-banner__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--semeco-white);
  font-family: var(--font-body);
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
}
.cookie-banner__link:hover {
  color: var(--semeco-orange);
}

.cookie-banner__accept {
  padding: 10px 24px;
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-banner__actions {
    justify-content: center;
  }
}