/* ============================================================
   Cantine — page Infos › Cantine ([wv_cantine], inc/cantine.php)
   Plateau du jour façon self, contre-interrogatoire, semaine en cartes.
   Couleurs et polices : presets du thème. Animations coupées si
   « réduire les animations » est demandé.
   ============================================================ */

.wv-cantine {
  --encre: var(--wp--preset--color--encre, #16302f);
  --jaune: var(--wp--preset--color--jaune, #fef12b);
  --vert: var(--wp--preset--color--vert, #7dbf30);
  --bleu: var(--wp--preset--color--bleu, #5891ea);
  --corail: var(--wp--preset--color--corail, #ce5b53);
  --orange: var(--wp--preset--color--orange, #f2a627);
  --violet: var(--wp--preset--color--violet, #79276b);
  --rose: var(--wp--preset--color--rose, #e592df);
  --rouge: var(--wp--preset--color--rouge, #d1183c);
  --marine: var(--wp--preset--color--marine, #2b3a67);
  --g100: var(--wp--preset--color--gris-100, #f3f3f1);
  --g200: var(--wp--preset--color--gris-200, #e4e4e4);
  --g500: var(--wp--preset--color--gris-500, #767676);
  --titre: var(--wp--preset--font-family--titre, "Neulis Cursive", sans-serif);
  --semi: var(--wp--preset--font-family--semicondensed, "Open Sans SemiCondensed", sans-serif);
  --punch: 8px 8px 0 rgba(22, 48, 47, 0.18);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Le contenu des pages est plafonné à 760 px : la cantine prend la largeur du site (1180 px), centrée,
     sans jamais dépasser l'écran (marge de 1,25 rem, barre de défilement comprise). */
  width: min(1180px, 100vw - 2.5rem);
  max-width: none !important;
  margin-left: calc(50% - min(590px, 50vw - 1.25rem)) !important;
  margin-right: 0 !important;
  font-family: var(--wp--preset--font-family--corps, "Open Sans", sans-serif);
  color: var(--encre);
}
/* Les règles de mise en page de WordPress (.is-layout-constrained > …, !important) sont imprimées
   après cette feuille : même poids, elles gagnaient. Sélecteur renforcé pour passer devant. */
.is-layout-constrained > .wv-cantine {
  max-width: none !important;
  margin-left: calc(50% - min(590px, 50vw - 1.25rem)) !important;
  margin-right: 0 !important;
}
.wv-cantine p, .wv-cantine li { font-family: inherit; }
.wv-cantine .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wvc-h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1; }
.wv-cantine section + section { margin-top: clamp(3rem, 7vw, 5rem); }

/* ---------- 1. Le plateau du jour ---------- */
.wvc-jour { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-areas: "tete tete" "plateau interro"; gap: 1.4rem 2.2rem; align-items: start; }
.wvc-jour-tete { grid-area: tete; }
.wvc-plateau-cadre { grid-area: plateau; }
.wvc-interro { grid-area: interro; }

.wvc-quand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0 0 0.7rem; }
.wvc-quand-p {
  display: inline-block; padding: 0.3em 0.8em; background: var(--jaune); color: var(--encre);
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
  transform: skewX(var(--wv-skew, -6deg)); box-shadow: 4px 4px 0 rgba(22, 48, 47, 0.2);
}
.wvc-quand time { font-family: var(--semi); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--g500); }
.wvc-accroche { margin: 0; max-width: 26ch; font-size: clamp(1.45rem, 3.3vw, 2.25rem); line-height: 1.05; }
.wvc-jour-theme { margin: 0.8rem 0 0; font-weight: 700; color: var(--violet); }

/* Le plateau : un grand compartiment (plat) et trois petits, comme au self. */
.wvc-plateau-cadre { position: relative; }
.wvc-plateau {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "plat entree" "plat laitage" "plat dessert";
  gap: 12px; padding: 14px; border-radius: 30px 12px 12px 12px;
  background: color-mix(in srgb, var(--vert) 30%, #fff);
  box-shadow: var(--punch), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  rotate: -1deg;
  animation: wvc-pose .7s var(--ease) both;
}
.wvc-case {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 0.8rem; align-content: start;
  min-height: 5.4rem; padding: 0.85rem 1rem; border-radius: 20px;
  background: #fff; box-shadow: inset 0 3px 0 rgba(22, 48, 47, 0.07), inset 0 -2px 0 rgba(22, 48, 47, 0.04);
  animation: wvc-case .55s var(--ease) both;
}
.wvc-case--entree { grid-area: entree; animation-delay: .12s; }
.wvc-case--laitage { grid-area: laitage; animation-delay: .2s; }
.wvc-case--dessert { grid-area: dessert; animation-delay: .28s; }
.wvc-case--plat { grid-area: plat; grid-template-columns: 1fr; grid-template-rows: auto; align-content: center; padding: 1.4rem 1.5rem; animation-delay: .04s; }
.wvc-case-emo { grid-row: 1 / span 2; font-size: 2.1rem; line-height: 1; align-self: center; animation: wvc-plouf .6s var(--ease) both; animation-delay: inherit; transition: transform .25s var(--ease); }
.wvc-case:hover .wvc-case-emo { transform: rotate(-12deg) scale(1.12); }
.wvc-case--plat .wvc-case-emo { grid-row: auto; font-size: clamp(3.2rem, 7vw, 4.6rem); margin-bottom: 0.6rem; }
.wvc-case-k { font-family: var(--semi); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--g500); }
.wvc-case-v { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.wvc-case--plat .wvc-case-v { font-family: var(--titre); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: clamp(1.45rem, 3.2vw, 2.1rem); line-height: 1.02; margin-top: 0.2rem; }
.wvc-case-avec { display: block; margin-top: 0.6rem; font-size: 1rem; line-height: 1.4; }
.wvc-case--vide { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75); }
.wvc-case--vide .wvc-case-v { font-weight: 400; font-style: italic; color: var(--g500); }
.wvc-case--vide .wvc-case-emo { width: 2.1rem; }

/* Avec / sans viande */
.wvc-v-sans { display: none; }
.wv-cantine.is-sans .wvc-v-sans { display: inline; }
.wv-cantine.is-sans .wvc-v-viande { display: none; }
.wv-cantine.is-sans .wvc-case-emo .wvc-v-sans { display: inline-block; animation: wvc-plouf .45s var(--ease) both; }
.wvc-bascule { display: inline-flex; gap: 4px; margin-top: 1.1rem; padding: 4px; border-radius: 999px; background: var(--g100); justify-self: start; }
.wvc-bascule-b { border: 0; border-radius: 999px; padding: 0.45em 0.95em; background: transparent; color: var(--encre); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background .15s, box-shadow .15s; }
.wvc-bascule-b.is-on { background: #fff; box-shadow: 0 2px 6px rgba(22, 48, 47, 0.16); }
.wvc-bascule-b:not(.is-on):hover { background: rgba(255, 255, 255, 0.6); }

/* Le goûter : un pense-bête collé sur le plateau. */
.wvc-gouter {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.2rem; width: fit-content; max-width: min(100%, 26rem);
  margin: -1.2rem 1.2rem 0 auto; padding: 0.8rem 1.1rem; border-radius: 22px 6px 6px 6px;
  background: var(--jaune); box-shadow: 6px 6px 0 rgba(22, 48, 47, 0.2); rotate: 2deg;
  animation: wvc-colle .7s .45s cubic-bezier(.2, .8, .3, 1.2) both;
}
.wvc-gouter-k { font-family: var(--semi); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; }
.wvc-gouter-v { font-weight: 700; line-height: 1.35; }
.wvc-gouter-b { white-space: nowrap; font-weight: 400; }

/* Le contre-interrogatoire : cartes à retourner. */
.wvc-interro { padding-top: 0.2rem; }
.wvc-interro-h { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.3rem; font-size: 1.25rem; line-height: 1.1; }
.wvc-interro-t { margin: 0 0 1rem; font-size: 0.92rem; color: var(--g500); }
.wvc-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.wvc-questions li:nth-child(2) .wvc-q { rotate: 1.2deg; }
.wvc-questions li:nth-child(3) .wvc-q { rotate: -0.8deg; }
.wvc-q {
  display: grid; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; perspective: 900px;
  rotate: -1.5deg; animation: wvc-colle .6s calc(.5s + var(--i, 0) * .12s) cubic-bezier(.2, .8, .3, 1.2) both;
}
.wvc-q-face {
  grid-area: 1 / 1; display: flex; align-items: center; min-height: 3.6rem; padding: 0.8rem 1.1rem; border-radius: 18px 6px 6px 6px;
  backface-visibility: hidden; transition: transform .5s var(--ease); box-shadow: 5px 5px 0 rgba(22, 48, 47, 0.18); line-height: 1.3;
}
.wvc-q-question { background: var(--marine); color: #fff; font-weight: 700; }
.wvc-q-question::after { content: "?"; margin-left: auto; padding-left: 0.8rem; font-family: var(--titre); font-size: 1.4rem; color: var(--jaune); }
.wvc-q-reponse { background: #fff; color: var(--encre); transform: rotateX(180deg); outline: 2px solid var(--marine); outline-offset: -2px; }
.wvc-q[aria-expanded="true"] .wvc-q-question { transform: rotateX(-180deg); }
.wvc-q[aria-expanded="true"] .wvc-q-reponse { transform: rotateX(0); }
.wvc-q:hover .wvc-q-face { box-shadow: 7px 7px 0 rgba(22, 48, 47, 0.22); }

.wvc-vacances { font-size: 1.1rem; }

/* ---------- 2. La semaine ---------- */
.wvc-semaine-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.wvc-nav { display: flex; align-items: center; gap: 0.6rem; }
.wvc-nav-l { margin: 0; min-width: 12.5rem; text-align: center; font-family: var(--semi); font-weight: 700; letter-spacing: 0.03em; }
.wvc-nav-b {
  width: 2.6rem; height: 2.6rem; border: 2px solid var(--encre); border-radius: 999px; background: #fff; color: var(--encre);
  font-size: 1.5rem; line-height: 1; cursor: pointer; transition: transform .12s, background .15s;
}
.wvc-nav-b:hover:not(:disabled) { background: var(--jaune); }
.wvc-nav-b:active:not(:disabled) { transform: scale(0.94); }
.wvc-nav-b:disabled { opacity: 0.3; cursor: default; }
.wvc-sem-theme { display: inline-block; margin: 0 0 1.2rem; padding: 0.35em 0.9em; background: var(--violet); color: #fff; font-weight: 700; transform: skewX(var(--wv-skew, -6deg)); box-shadow: 4px 4px 0 rgba(22, 48, 47, 0.2); }

.wvc-grille { list-style: none; margin: 0; padding: 0.4rem 0.2rem 0.8rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
/* position: relative = la carte devient le bloc conteneur des .screen-reader-text (position: absolute).
   Sans elle, ils s'échappaient du carrousel (overflow: auto) et élargissaient la page sur mobile (1095 px, 01/10/2026). */
.wvc-j { --c: var(--bleu); --t: #fff; position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 22px 8px 8px 8px; background: #fff; border: 1px solid var(--g200); box-shadow: 0 4px 14px rgba(22, 48, 47, 0.1); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.wvc-j--2 { --c: var(--vert); --t: var(--encre); }
.wvc-j--3 { --c: var(--orange); --t: var(--encre); }
.wvc-j--4 { --c: var(--corail); }
.wvc-j--5 { --c: var(--violet); }
.wvc-j:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(22, 48, 47, 0.16); }
.wvc-j.is-today { border: 0; outline: 4px solid var(--jaune); outline-offset: -1px; box-shadow: var(--punch); rotate: -1deg; }
.wvc-j.is-choisi:not(.is-today) { outline: 3px solid var(--encre); outline-offset: -1px; }
.wvc-j.is-passe { opacity: 0.62; }
.wvc-j.is-passe:hover { opacity: 1; }
.wvc-j-tete {
  position: relative; display: flex; align-items: baseline; gap: 0.55rem; width: 100%; padding: 0.75rem 0.95rem 0.7rem; border: 0;
  background: var(--c); color: var(--t); font: inherit; text-align: left; cursor: pointer;
}
div.wvc-j-tete { cursor: default; }
.wvc-j-nom { font-family: var(--semi); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.wvc-j-num { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 2rem; line-height: 0.9; margin-left: auto; }
.wvc-j-auj { position: absolute; left: 0.8rem; bottom: -0.7rem; z-index: 1; padding: 0.15em 0.6em; background: var(--jaune); color: var(--encre); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transform: skewX(var(--wv-skew, -6deg)); box-shadow: 2px 2px 0 rgba(22, 48, 47, 0.25); }
.wvc-j-theme { margin: 0.9rem 0.95rem 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--violet); }
.wvc-j-menu { list-style: none; margin: 0; padding: 0.7rem 0.95rem 0.2rem; flex: 1; }
.wvc-l { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.35rem; padding: 0.45rem 0; border-bottom: 1px dotted var(--g200); font-size: 0.88rem; line-height: 1.35; }
.wvc-l:last-child { border-bottom: 0; }
.wvc-l-e { font-size: 1.05rem; line-height: 1.2; }
.wvc-l--plat .wvc-l-v { font-weight: 800; font-size: 0.95rem; }
.wvc-j-sans { display: block; margin-top: 0.2rem; font-weight: 600; font-size: 0.84rem; color: #2f5fb3; }
.wvc-j-gouter { margin: 0; padding: 0.65rem 0.95rem 0.8rem; background: var(--g100); font-size: 0.84rem; line-height: 1.35; }
.wvc-j-gouter-k { display: block; margin-bottom: 0.1rem; font-family: var(--semi); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--g500); }
.wvc-j-boisson { color: var(--g500); }
.wvc-j-rien { margin: 0.9rem 0.95rem 1rem; font-size: 0.88rem; color: var(--g500); }
.wvc-j-ferme { margin: 1.1rem 0.95rem 0; font-family: var(--titre); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 1.15rem; }
.wvc-j.is-ferme, .wvc-j.is-vide { background: var(--g100); }
.wvc-j.is-ferme .wvc-j-tete, .wvc-j.is-vide .wvc-j-tete { background: var(--g200); color: var(--encre); }

/* Entrée des cartes au défilement (ajoutée par le JS). */
.wvc-anim .wvc-j { opacity: 0; transform: translateY(18px); }
.wvc-anim .wvc-j.is-in { opacity: 1; transform: none; transition: opacity .5s var(--ease) calc(var(--k, 0) * 70ms), transform .5s var(--ease) calc(var(--k, 0) * 70ms), box-shadow .25s; }
.wvc-anim .wvc-j.is-in:hover { transform: translateY(-4px); transition-delay: 0s; }
.wvc-anim .wvc-j.is-today.is-in { transform: none; }

/* Marques */
.wvc-badge {
  display: inline-block; margin-left: 0.15em; padding: 0.12em 0.5em 0.1em; border-radius: 999px; vertical-align: 0.12em;
  font-family: var(--wp--preset--font-family--corps, sans-serif); font-style: normal; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; text-decoration: none;
  background: var(--g200); color: var(--encre); cursor: help; white-space: nowrap;
}
.wvc-badge--bio { background: var(--vert); }
.wvc-badge--label_rouge { background: var(--rouge); color: #fff; }
.wvc-badge--labellise { background: var(--orange); }
.wvc-badge--saveur_or { background: #f5cf4b; }
.wvc-badge--nouveau { background: var(--rose); }
.wvc-badge--sans_viande { background: #2f5fb3; color: #fff; cursor: default; }
.wvc-m { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--g500); }
.wvc-m--bio { text-decoration-color: var(--vert); }
.wvc-m--label_rouge { text-decoration-color: var(--rouge); }
.wvc-m--labellise { text-decoration-color: var(--orange); }
.wvc-m--sans_viande { text-decoration: none; }
.wvc-case--plat .wvc-badge { font-size: 0.72rem; vertical-align: 0.35em; }

/* ---------- 3. Comment lire ce menu ---------- */
.wvc-legende-l { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0.9rem 2rem; max-width: 980px; }
.wvc-legende-l li { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.95rem; line-height: 1.45; }
.wvc-legende-l .wvc-badge { flex: 0 0 auto; margin: 0; font-size: 0.72rem; }
.wvc-faits { margin-top: 1.6rem !important; }
.wvc-faits li { font-size: 1rem; }

/* ---------- 4. Les écoles ---------- */
.wvc-ecoles > p { max-width: 70ch; }
.wvc-quartiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 1.2rem; }
.wvc-quartier { padding: 1rem 1.1rem; border-radius: 22px 8px 8px 8px; background: var(--g100); }
.wvc-quartier-n { display: inline-block; margin: 0 0 0.6rem; padding: 0.2em 0.7em; background: var(--encre); color: #fff; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; transform: skewX(var(--wv-skew, -6deg)); }
.wvc-quartier ul { list-style: none; margin: 0; padding: 0; }
.wvc-quartier li { padding: 0.15rem 0; font-size: 0.95rem; }
.wvc-quartier:nth-child(1) .wvc-quartier-n { background: var(--bleu); }
.wvc-quartier:nth-child(2) .wvc-quartier-n { background: var(--vert); color: var(--encre); }
.wvc-quartier:nth-child(3) .wvc-quartier-n { background: var(--orange); color: var(--encre); }
.wvc-quartier:nth-child(4) .wvc-quartier-n { background: var(--corail); }
.wvc-quartier:nth-child(5) .wvc-quartier-n { background: var(--violet); }
.wvc-ecoles-plus { margin-top: 1.2rem; }

/* ---------- 5. FAQ ---------- */
.wvc-faq .wvc-h2 { margin-bottom: 1rem; }
.wvc-faq-q { border-bottom: 1px solid var(--g200); }
.wvc-faq-q summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 700; font-size: 1.05rem; cursor: pointer; list-style: none; }
.wvc-faq-q summary::-webkit-details-marker { display: none; }
.wvc-faq-q summary::after { content: "+"; flex: 0 0 auto; font-family: var(--titre); font-size: 1.5rem; line-height: 1; color: var(--corail); transition: transform .2s var(--ease); }
.wvc-faq-q[open] summary::after { transform: rotate(45deg); }
.wvc-faq-q p { margin: 0 0 1.1rem; max-width: 70ch; line-height: 1.55; }
.wvc-maj { margin-top: 2.5rem !important; }

/* ---------- Petits écrans ---------- */
@media (max-width: 1000px) {
  .wvc-grille { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0.2rem; padding-inline: 0.2rem; overscroll-behavior-x: contain; }
  .wvc-j { scroll-snap-align: start; }
}
@media (max-width: 781px) {
  .wvc-jour { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "plateau" "interro"; }
  .wvc-plateau { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plat" "entree" "laitage" "dessert"; rotate: 0deg; padding: 10px; gap: 9px; }
  .wvc-case { min-height: 0; }
  .wvc-case--plat { padding: 1.1rem 1.2rem; }
  .wvc-gouter { margin: -0.9rem 0.6rem 0 auto; }
  .wvc-nav { width: 100%; justify-content: space-between; }
  .wvc-nav-l { min-width: 0; }
}

/* ---------- Animations ---------- */
@keyframes wvc-pose { from { opacity: 0; transform: translateY(26px) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes wvc-case { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes wvc-plouf { 0% { opacity: 0; transform: translateY(-28px) rotate(-20deg); } 70% { opacity: 1; transform: translateY(3px) rotate(4deg); } 100% { transform: none; } }
@keyframes wvc-colle { from { opacity: 0; transform: translateY(14px) rotate(6deg) scale(.92); } to { opacity: 1; transform: none; } }
.wvc-redessine .wvc-case, .wvc-redessine .wvc-case-emo, .wvc-redessine .wvc-q, .wvc-redessine .wvc-gouter { animation-name: none; }
.wvc-redessine .wvc-plateau { animation: wvc-pose .45s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .wv-cantine *, .wv-cantine *::before, .wv-cantine *::after { animation: none !important; transition: none !important; }
  .wvc-anim .wvc-j { opacity: 1; transform: none; }
}