/* ==========================================================================
   CÉF — Refonte UI/UX
   Couleurs tirées du thème actuel (templates/yoo_eat/styles/cefsk/css/custom.css)
   ========================================================================== */
:root {
  --ink: #303334;
  --night: #1f2122;
  --vert: #067e44;
  --vert-fonce: #045c32;
  --lime: #8cc63f;
  --jaune: #f7de0b;
  --rouge: #c32316;
  --papier: #f6f5f0;
}

html {
  scroll-padding-top: 90px;
  scrollbar-gutter: stable;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Navigation principale ---------- */
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .9rem;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  position: relative;
  transition: color .15s;
}
.nav-btn i { font-size: 9px; opacity: .6; transition: transform .2s; }
.nav-btn::after {
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; bottom: 0;
  height: 3px;
  background: var(--jaune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-btn:hover, .nav-btn[aria-expanded="true"] { color: var(--jaune); }
.nav-btn:hover::after, .nav-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-btn[aria-expanded="true"] i { transform: rotate(180deg); }

#entete.a-defile { box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }

/* ---------- Méga-menu ---------- */
.mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid rgba(48,51,52,.08);
  box-shadow: 0 30px 50px -20px rgba(31,33,34,.35);
  animation: mega-in .18s ease-out;
}
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
.mega-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 2.5rem;
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 2.5rem;
}
.mega-titre {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--rouge);
}
.mega-grid { display: grid; gap: 2.5rem; }
.mega-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert);
  padding-bottom: .6rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid rgba(48,51,52,.1);
}
.mega-h a:hover { text-decoration: underline; }
.mega-liste li { break-inside: avoid; }
.mega-liste a {
  display: inline-block;
  padding: .32rem 0;
  font-size: 15px;
  color: rgba(48,51,52,.85);
  transition: color .15s, transform .15s;
}
.mega-liste a:hover { color: var(--vert); transform: translateX(3px); }
.ext { font-size: 9px; opacity: .55; margin-left: 2px; }
.tag {
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 5px; margin-left: 4px; border-radius: 4px;
  background: rgba(195,35,22,.1); color: var(--rouge); vertical-align: 2px;
}

/* ---------- Héros ---------- */
.heros-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  opacity: 0;
  transition: opacity .8s ease;
}
.heros-img.is-on { opacity: 1; }

.onglet {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: .9rem .9rem 1.1rem;
  border-radius: 14px;
  background: var(--papier);
  font-size: 13px; font-weight: 600; text-align: left; line-height: 1.2;
  color: rgba(48,51,52,.75);
  transition: background .2s, color .2s;
  overflow: hidden;
}
.onglet i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  border: 2px solid currentColor; font-size: 13px;
}
.onglet:hover { color: var(--ink); }
.onglet[aria-selected="true"] { background: var(--ink); color: #fff; }
.onglet[aria-selected="true"] i { border-color: var(--jaune); color: var(--jaune); }
.onglet-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.onglet-barre span { display: block; height: 100%; width: 0; background: var(--jaune); }
.onglet[aria-selected="true"] .onglet-barre span.anim { animation: progression var(--duree, 7s) linear forwards; }
.est-en-pause .onglet-barre span.anim { animation-play-state: paused; }
@keyframes progression { to { width: 100%; } }

.panneau {
  animation: fondu .35s ease;
  min-height: 185px;
}
@keyframes fondu { from { opacity: 0; transform: translateY(4px); } }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 15px; color: var(--vert);
  border-bottom: 2px solid var(--jaune); padding-bottom: 2px;
}
.lien-fleche::after { content: "→"; transition: transform .2s; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- Modules (accès rapides) ---------- */
.module { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.module-cercle {
  display: flex; align-items: center; justify-content: center;
  width: 9rem; height: 9rem; border-radius: 999px;
  background: #fff; overflow: hidden;
  box-shadow: 0 0 0 6px var(--papier), 0 0 0 8px currentColor, 0 18px 30px -18px rgba(31,33,34,.5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.module-cercle.ring-cef-rouge { color: var(--rouge); }
.module-cercle.ring-cef-jaune { color: var(--jaune); }
.module-cercle.ring-cef-vert  { color: var(--vert); }
.module-cercle.ring-cef-ink   { color: var(--ink); }
.module-cercle img { width: 100%; height: 100%; object-fit: contain; }
.module:hover .module-cercle { transform: translateY(-6px) rotate(-3deg); }
.module-titre {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}
.module:hover .module-titre { color: var(--vert); }

/* ---------- Raccourcis ---------- */
.raccourci {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.35rem 1.25rem;
  border-right: 1px solid rgba(48,51,52,.1);
  border-bottom: 1px solid rgba(48,51,52,.1);
  font-weight: 600; font-size: 16px;
  transition: background .2s, color .2s;
}
.raccourci i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 12px;
  background: rgba(6,126,68,.1); color: var(--vert);
  transition: background .2s, color .2s;
}
.raccourci::after { content: "→"; margin-left: auto; opacity: .3; transition: transform .2s, opacity .2s; }
.raccourci:hover { background: #fff; color: var(--vert); }
.raccourci:hover i { background: var(--vert); color: var(--jaune); }
.raccourci:hover::after { opacity: 1; transform: translateX(4px); }

/* ---------- Témoignages ---------- */
.vague { background: linear-gradient(100deg, var(--vert-fonce) 0%, var(--vert) 45%, #3f9e3c 75%, var(--lime) 100%); }
.temoin:not([hidden]) { animation: fondu .45s ease; }
.temoin-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.5); font-size: 13px;
  transition: background .2s, color .2s, border-color .2s;
}
.temoin-nav:hover { background: #fff; color: var(--vert); border-color: #fff; }
.temoin-point {
  width: .65rem; height: .65rem; border-radius: 999px;
  background: rgba(255,255,255,.45);
  transition: width .25s, background .25s;
}
.temoin-point[aria-current="true"] { width: 1.75rem; background: var(--jaune); }
.social img { width: 48px; height: 48px; border-radius: 999px; transition: transform .2s; }
.social:hover img { transform: translateY(-3px) scale(1.05); }

/* ---------- Pied de page ---------- */
.pied-h { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); margin-bottom: .9rem; }
.pied-liste li + li { margin-top: .55rem; }
.pied-liste a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tiroir mobile ---------- */
.tiroir {
  margin: 0 0 0 auto;
  height: 100dvh; max-height: none;
  width: min(24rem, 100%); max-width: 100%;
  padding: 0; border: 0;
  background: #fff; color: var(--ink);
}
.tiroir::backdrop { background: rgba(31,33,34,.6); backdrop-filter: blur(2px); }
.tiroir[open] { animation: glisse .25s ease-out; }
@keyframes glisse { from { transform: translateX(100%); } }
html:has(.tiroir[open]) { overflow: hidden; }

#tiroir-nav details { border-bottom: 1px solid rgba(48,51,52,.1); }
#tiroir-nav summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; font-weight: 700; font-size: 16px;
}
#tiroir-nav summary::-webkit-details-marker { display: none; }
#tiroir-nav summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--vert); transition: transform .2s; }
#tiroir-nav details[open] summary::after { transform: rotate(45deg); }
#tiroir-nav .mega-grid { display: block; padding-bottom: 1rem; }
#tiroir-nav .mega-grid > * + * { margin-top: 1.25rem; }
#tiroir-nav .mega-liste { columns: 1 !important; }
#tiroir-nav .mega-grid > a { display: none; } /* carte décorative Emploi */
#tiroir-nav .mega-grid address { font-size: 14px; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}