@charset "UTF-8";
/* ==========================================================================
   AFAO — Homepage
   Colonne centrée de 1100px. Sections en 2 colonnes qui s'empilent sous 820px,
   navigation repliée sous 1080px.
   ========================================================================== */

:root {
  /* Couleurs (tokens Figma) */
  --principal: #21297f;
  --secondaire: #ed0e75;
  --secondaire-200: #efaac9;
  --nav-actif: #00b0c7;
  --texte: #0e3087;
  --cyan: #00a0d5;
  --bleu-clair: #dff2f8;
  --jaune: #ffe06b;
  --vert: #d9f4de;
  --light: #ffffff;
  --dark-500: #8c8ca1;
  --gris-meta: #bebebe;

  /* Typographie */
  --family-body: "Rethink Sans", Arial, Helvetica, sans-serif;
  --family-titre: "Shantell Sans", "Comic Sans MS", "Chalkboard SE", cursive, sans-serif;

  /* Espacements (tokens Figma margin/*) */
  --m-s: 15px;
  --m-m: 30px;
  --m-l: 50px;
  --m-xl: 70px;
  --m-xxl: 110px;

  /* Rayons */
  --radius-defaut: 16px;
  --radius-small: 4px;

  /* Mise en page */
  --wrap: 1100px;
  --gutter: clamp(16px, 3vw, 45px);
  --gap-xl: clamp(30px, 5vw, 70px);
  --gap-l: clamp(30px, 3.6vw, 50px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--light);
  color: var(--texte);
  font-family: var(--family-body);
  font-size: 16px;
  line-height: 24px;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: 10px 15px;
  background: var(--principal); color: var(--light);
}
.skip:focus { left: 0; }

/* ---------- Boutons ---------- */
.wp-block-button.cta .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 20px !important;
  border: 1px solid var(--principal);
  border-radius: 200px;
  color: var(--principal);
  font-size: 16px; line-height: 22px; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
    font-weight: 400!important;
    text-transform: none!important;
    letter-spacing: 0;
}
.wp-block-button.cta .wp-block-button__link > span { display: block; }
@supports (text-box: trim-both cap alphabetic) {
  .wp-block-button.cta .wp-block-button__link { padding: 20px; }
  .wp-block-button.cta .wp-block-button__link > span { text-box: trim-both cap alphabetic; }
}
.wp-block-button.cta:hover .wp-block-button__link, .wp-block-button.cta:hover .wp-block-button__link { text-decoration: none; background: var(--principal)!important; color: var(--light)!important; }

.wp-block-button.cta--plein .wp-block-button__link  { border-width: 0; background: var(--principal)!important; color: var(--light)!important; padding: 16px 20px; }
.wp-block-button.cta--rose .wp-block-button__link   { border-width: 0; background: var(--secondaire)!important; color: var(--light)!important; padding: 16px 20px; }
@supports (text-box: trim-both cap alphabetic) {
  .wp-block-button.cta--plein .wp-block-button__link, .wp-block-button.cta--rose .wp-block-button__link { padding: 20px; }
}
.wp-block-button.cta--plein:hover .wp-block-button__link { background: var(--texte)!important; }
.wp-block-button.cta--rose:hover .wp-block-button__link { background: #c70b62!important; }

.wp-block-group__inner-container {
  display: contents;
}

/* ---------- En-tête ---------- */
.site-header { background: var(--bleu-clair) !important; }
.header-top > .wp-block-group__inner-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--m-s) var(--m-xxl);
  padding-block: 40px;
}
.brand { display: block; flex: none; }
.brand img { width: 199px; height: 80px; }
.header-cta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px; }

.nav { position: relative; display: flex; background: var(--principal); min-height: 60px; }
.nav-list { display: flex; flex: 1 1 auto; align-items: stretch; }
.nav-list li { display: flex; }
.nav-list li:first-child { flex: none; }
.nav-group { display: flex; flex: 1 1 auto; justify-content: space-around; }
.nav-list a {
  display: flex; align-items: center;
  padding-inline: 12px;
  font-size: 13px; line-height: 20px;
  text-transform: uppercase; white-space: nowrap;
  color: var(--light);
}
.nav-list a:hover { text-decoration: none; background: var(--nav-actif); color: var(--principal); }
.nav-list a[aria-current="page"] { padding-inline: 15px; background: var(--nav-actif); color: var(--principal); }
.nav-search {
  display: flex; align-items: center; justify-content: center; flex: none;
  padding: 0 20px;
  background: none; border: 0; cursor: pointer;
  color: var(--light);
}
.nav-search svg { width: 12px; height: 12px; fill: currentColor; }
.nav-toggle { display: none; }
.nav a:focus-visible, .nav button:focus-visible { outline-color: var(--light); outline-offset: -4px; }

/* ---------- Contenu ---------- */
main { padding-bottom: var(--m-xl); }

.meta { min-height: 26px; font-size: 12px; line-height: 26px; color: var(--gris-meta); }
.meta a { color: var(--cyan); }

.row > .wp-block-group__inner-container { display: flex; gap: var(--gap-xl); padding-top: var(--m-l); }
.row > *, .row > .wp-block-group__inner-container > * { flex: 1 1 0; min-width: 0; }
.row--l > .wp-block-group__inner-container { gap: var(--gap-l); }
.row--xxl > .wp-block-group__inner-container { padding-top: var(--m-xxl); }

/* Intro */
.intro { align-items: center; }
.intro-media img { width: 100%; height: auto; aspect-ratio: 1714 / 1294; object-fit: cover; }
.intro-body { display: flex; flex-direction: column; gap: var(--m-s); justify-content: center;}
.intro-body h1 { font-size: 30px; line-height: 37.5px; font-weight: 700; color: var(--cyan); white-space: nowrap; }
.intro-body .lead { font-weight: 700; }
.intro-body .note { padding-top: 15px; }

.contenu p.wp-block-paragraph {
    font-size: 16px;
    line-height: 24px;
}

/* Blocs de couleur */
.bloc {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--m-m);
  padding: var(--m-m);
  border-radius: var(--radius-defaut);
}
.bloc--jaune { background: var(--jaune); }
.bloc--bleu  { background: var(--bleu-clair); }
.bloc--rose  { background: var(--secondaire-200); }
.bloc--vert  { background: var(--vert); }
.bloc-content { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.row--pair .bloc-content { min-height: 165px; }
.row--services .bloc-content { min-height: 150px; }
.titre {
  font-family: var(--family-titre) !important;
  font-weight: 400; font-size: 24px; line-height: 26px;
  font-variation-settings: "BNCE" 0, "INFM" 0, "SPAC" 0;
  color: var(--texte);
}
.eat { display: flex; align-items: center; gap: 30px; width: 100%; color: var(--principal); }
.eat img { flex: none; width: 167px; height: 62px; object-fit: contain; }
.eat p { flex: 1 1 0; min-width: 0; }

/* Actualités */
.actus { display: flex; flex-direction: column; align-items: flex-start; gap: var(--m-m); padding-top: var(--m-xxl); }
.actus > .titre { color: var(--principal); }
.actus-list > .wp-block-group__inner-container  {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap-xl); row-gap: var(--m-m);
  width: 100%;
}
.card-actu { display: flex; align-items: center; gap: var(--m-m); }
.card-actu > *, .card-actu > .wp-block-group__inner-container  > * { flex: 1 1 0; min-width: 0; }
.card-actu img {
  width: 100%; height: auto; aspect-ratio: 640 / 399; object-fit: cover;
  border-radius: var(--radius-small);
}
.card-actu-content { display: flex; flex-direction: column; gap: 15px; }
.card-actu h3 { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--principal); }
.card-actu time, .datetime { color: var(--dark-500); }

article h3.wp-block-heading, article .card-actu-content a {
  color: var(--principal); 
}

/* ---------- Pied de page ---------- */
.site-footer { background: var(--bleu-clair); padding-top: 40px; font-size: 11px; }
.f-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.f-col:nth-child(1) { padding-right: 15px; }
.f-col:nth-child(2) { padding-left: 20px; padding-right: 10px; }
.f-col:nth-child(3) { padding-left: 20px; padding-right: 5px; }
.f-col:nth-child(4) { padding-left: 20px; padding-bottom: 20px; }
.f-group { padding-bottom: 17px; }
.f-title { display: block; font-weight: 700; line-height: 22px; text-transform: uppercase; }
.f-title--serre { line-height: 18px; }
.f-solo { padding-bottom: 23px; }
.f-sub { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; line-height: 1; }

.f-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 20px;
  min-height: 54px;
  border-top: 1px solid var(--light);
  font-size: 12px;
}
.f-legal { line-height: 14px; }
.f-credit { line-height: 22px; text-align: right; white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .intro-body h1 { white-space: normal; text-wrap: balance; }

  .nav { flex-wrap: wrap; justify-content: space-between; }
  .nav-toggle {
    display: flex; align-items: center; gap: 10px;
    height: 60px; padding-inline: 17px;
    background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; text-transform: uppercase; color: var(--light);
  }
  .nav-toggle i, .nav-toggle i::before, .nav-toggle i::after { display: block; width: 18px; height: 2px; background: currentColor; }
  .nav-toggle i { position: relative; }
  .nav-toggle i::before, .nav-toggle i::after { content: ""; position: absolute; left: 0; }
  .nav-toggle i::before { top: -6px; }
  .nav-toggle i::after { top: 6px; }
  .nav-search { order: 2; height: 60px; }
  .nav-list { display: none; order: 3; flex: 1 0 100%; flex-direction: column; }
  .nav.is-open .nav-list { display: flex; }
  .nav-group { flex-direction: column; }
  .nav-list a, .nav-list a[aria-current="page"] {
    flex: 1; padding: 14px 17px;
    white-space: normal;
    border-top: 1px solid rgb(255 255 255 / .15);
  }
}

@media (max-width: 1000px) {
  .card-actu { flex-direction: column; align-items: stretch; gap: var(--m-s); }
  .card-actu > * { flex: none; }

  .f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 13px; padding-bottom: 20px; }
  .f-cols .f-col { padding: 0; }
}

@media (max-width: 820px) {
  :root { --m-xxl: 70px; }
  .header-top { padding-block: 25px; }
  .row > .wp-block-group__inner-container { flex-direction: column; gap: var(--m-m); }
  .row > .wp-block-group__inner-container > * { flex: none; }
  .row--pair .bloc-content, .row--services .bloc-content { min-height: 0; }
  .f-bottom { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 15px; }
  .f-legal { line-height: 20px; }
  .f-credit { text-align: left; }
}

@media (max-width: 600px) {
  :root { --m-l: 30px; --m-xxl: 50px; }
  .header-top > .wp-block-group__inner-container { flex-direction: column; align-items: flex-start; gap: 20px; }
  .brand img { width: 159px; height: 64px; }
  .header-cta { justify-content: flex-start; gap: 10px; }
  .header-cta .cta { padding: 14px 16px; font-size: 15px; }
  .intro-body h1 { font-size: 26px; line-height: 32px; }
  .bloc { padding: 20px; gap: 20px; }
  .cta { white-space: normal; text-align: center; }
  .actus-list > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .card-actu { flex-direction: row; align-items: center; }
  .card-actu > img { flex: 0 0 40%; width: 40%; }
  .card-actu-content { flex: 1 1 0; gap: 6px; }
  .card-actu time { font-size: 14px; line-height: 20px; }
  .eat { flex-wrap: wrap; gap: 15px; }
  .eat p { flex-basis: 180px; }
  .f-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }