/*
Theme Name: APE Merville-Franceville
Theme URI: https://ape-merville-franceville.fr
Description: Theme de l'APE des ecoles primaires de Merville-Franceville-Plage. Enfant de Twenty Twenty-Five. Palette echantillonnee dans le logo de l'association : le A framboise, le P bleu, le E vert, plus le teal et l'orange des empreintes de mains. Polices hebergees en local.
Author: APE de Merville-Franceville-Plage
Template: twentytwentyfive
Version: 1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: ape-merville
*/

/* ---------------------------------------------------------------------------
   Les couleurs et les polices sont declarees dans theme.json : elles existent
   donc aussi dans l'editeur, ou un parent non technique peut les choisir.
   Cette feuille ne porte que ce que theme.json ne sait pas exprimer : la mise
   en forme des blocs produits par nos shortcodes.

   Aucune couleur en dur ici : tout passe par les variables de theme.json.
   ------------------------------------------------------------------------- */

:root {
  --ape-radius: 18px;
  --ape-radius-lg: 24px;
  --ape-border: 2px solid var(--wp--preset--color--line);
  --ape-shadow: 0 2px 0 var(--wp--preset--color--line), 0 12px 28px -20px rgba(44, 42, 53, .5);
  --ape-shadow-lift: 0 2px 0 var(--wp--preset--color--line), 0 18px 34px -20px rgba(44, 42, 53, .55);
}

/* --- reprises generales ---------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
}

.wp-site-blocks :is(h1, h2, h3) {
  text-wrap: balance;
}

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 3px solid var(--wp--preset--color--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* En-tete et pied : le carton blanc derriere le logo permet au JPEG opaque de
   tenir sur n'importe quel fond. */
.wp-block-site-logo img {
  background: var(--wp--preset--color--surface);
  border-radius: 12px;
  padding: 4px 6px;
}

.wp-block-navigation a:hover {
  color: var(--wp--preset--color--teal-ink);
}

/* --- boutons de nos modules ------------------------------------------------ */

.ape-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--wp--preset--font-family--titres);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: .68rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  background: var(--wp--preset--color--rose);
  color: #fff;
  border: 2px solid var(--wp--preset--color--rose);
  transition: transform .14s ease;
}

.ape-btn:hover,
.ape-btn:focus {
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .ape-btn { transition: none; }
  .ape-btn:hover { transform: none; }
}

.ape-empty {
  color: var(--wp--preset--color--muted);
  font-style: italic;
}

.ape-meta {
  color: var(--wp--preset--color--muted);
  font-size: .95rem;
  margin: .2rem 0 0;
}

/* --- grille de cartes : evenements et partenaires -------------------------- */

.ape-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
}

.ape-card {
  background: var(--wp--preset--color--surface);
  border: var(--ape-border);
  border-radius: var(--ape-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: transform .14s ease, box-shadow .14s ease;
}

.ape-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ape-shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
  .ape-card { transition: none; }
  .ape-card:hover { transform: none; }
}

.ape-card h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
}

.ape-card h3 a {
  text-decoration: none;
  color: inherit;
}

.ape-card h3 a:hover {
  color: var(--wp--preset--color--teal-ink);
}

.ape-date {
  font-weight: 700;
  color: var(--wp--preset--color--ink);
}

/* Pastille de categorie. Chaque couleur code une rubrique, elle ne decore pas. */
.ape-badge {
  align-self: flex-start;
  font-family: var(--wp--preset--font-family--titres);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: var(--wp--preset--color--teal-soft);
  color: var(--wp--preset--color--teal-ink);
}

.ape-badge--passe {
  background: var(--wp--preset--color--line);
  color: var(--wp--preset--color--muted);
}

/* --- encart informations pratiques (fiche evenement, fiche partenaire) ----- */

.ape-infos {
  background: var(--wp--preset--color--surface);
  border: var(--ape-border);
  border-radius: var(--ape-radius-lg);
  padding: 1.6rem 1.8rem;
  margin: 2rem 0;
  box-shadow: var(--ape-shadow);
}

.ape-infos h2 {
  margin-top: 0;
  font-size: 1.3rem;
}

.ape-infos dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem 1.3rem;
  margin: 0;
}

.ape-infos dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  padding-top: .3rem;
}

.ape-infos dd {
  margin: 0;
}

/* --- appel aux partenaires, injecte en fin d'article ----------------------- */

.ape-cta {
  background: var(--wp--preset--color--rose-soft);
  border-radius: var(--ape-radius-lg);
  padding: 2rem 2.2rem;
  margin: 3rem 0 0;
}

.ape-cta strong {
  display: block;
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.ape-cta p {
  margin: 0 0 1.3rem;
  color: var(--wp--preset--color--ink);
}

/* --- agenda local ---------------------------------------------------------- */

.ape-agenda-mois {
  margin: 2.4rem 0 1rem;
  font-size: 1.35rem;
  text-transform: capitalize;
  color: var(--wp--preset--color--teal-ink);
}

.ape-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.ape-agenda-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  padding: 1.1rem 1.3rem;
  background: var(--wp--preset--color--surface);
  border: var(--ape-border);
  border-radius: var(--ape-radius);
}

/* Nos propres rendez-vous se distinguent sans crier : un filet framboise. */
.ape-agenda-item--ape {
  border-color: var(--wp--preset--color--rose);
  background: var(--wp--preset--color--rose-soft);
}

.ape-agenda-date {
  font-family: var(--wp--preset--font-family--titres);
  text-align: center;
  min-width: 3.6rem;
  padding: .5rem .3rem;
  border-radius: 12px;
  background: var(--wp--preset--color--orange-soft);
  align-self: start;
}

.ape-agenda-date .j {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--wp--preset--color--orange-ink);
  font-variant-numeric: tabular-nums;
}

.ape-agenda-date .jour {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wp--preset--color--orange-ink);
  margin-top: .15rem;
}

.ape-agenda-corps h4 {
  margin: .35rem 0 .2rem;
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.ape-agenda-corps h4 a {
  text-decoration: none;
  color: inherit;
}

.ape-agenda-corps h4 a:hover {
  color: var(--wp--preset--color--teal-ink);
}

.ape-agenda-tag {
  display: inline-block;
  font-family: var(--wp--preset--font-family--titres);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--wp--preset--color--rose);
  color: #fff;
}

.ape-agenda-tag--local {
  background: var(--wp--preset--color--indigo-soft);
  color: var(--wp--preset--color--indigo-ink);
}

.ape-agenda-meta {
  margin: .2rem 0 0;
  font-size: .93rem;
  color: var(--wp--preset--color--muted);
}

/* --- revue de presse ------------------------------------------------------- */

.ape-presse {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.ape-presse-item {
  padding-left: 1.1rem;
  border-left: 4px solid var(--wp--preset--color--orange);
}

.ape-presse-source {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.ape-presse-media {
  color: var(--wp--preset--color--orange-ink);
}

.ape-presse-item h3 {
  margin: 0 0 .45rem;
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
}

.ape-presse-item h3 a {
  text-decoration: none;
  color: inherit;
}

.ape-presse-item h3 a:hover {
  color: var(--wp--preset--color--indigo-ink);
}

.ape-presse-extrait {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: italic;
  font-size: .95rem;
  color: var(--wp--preset--color--muted);
}

/* --- petits ecrans --------------------------------------------------------- */

@media (max-width: 600px) {
  .ape-infos { padding: 1.3rem 1.4rem; }
  .ape-cta { padding: 1.6rem 1.5rem; }
  .ape-agenda-item { gap: .9rem; padding: 1rem; }
}

/* ===========================================================================
   Structure de la page : en-tete, hero, vague, bilan, pied.
   Ce qui suit habille les gabarits de templates/ et parts/.
   =========================================================================== */

/* --- en-tete ---------------------------------------------------------------- */

.ape-header {
  border-bottom: var(--ape-border);
}

.ape-brand {
  gap: .85rem !important;
}

.ape-brand .wp-block-site-logo img {
  height: auto;
}

.ape-brand__ligne {
  margin: 0;
  font-family: var(--wp--preset--font-family--titres);
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.25;
  color: var(--wp--preset--color--rose-ink);
}

@media (max-width: 480px) {
  .ape-brand__ligne { display: none; }
}

/* Navigation en pilules : la meme forme que les boutons, pour que le site
   n'ait qu'un seul vocabulaire de formes. */
.ape-nav .wp-block-navigation-item__content {
  padding: .4rem .75rem;
  border-radius: 999px;
  text-decoration: none;
}

.ape-nav .wp-block-navigation-item__content:hover,
.ape-nav .wp-block-navigation-item__content:focus {
  background: var(--wp--preset--color--teal-soft);
  color: var(--wp--preset--color--teal-ink);
}

.ape-nav .current-menu-item .wp-block-navigation-item__content {
  background: var(--wp--preset--color--rose-soft);
  color: var(--wp--preset--color--rose-ink);
}

/* --- hero -------------------------------------------------------------------- */

.ape-hero {
  padding-block: 3.25rem 0;
}

.ape-hero__grille {
  gap: 3rem;
  align-items: center;
}

.ape-hero__titre {
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0;
}

.ape-hero__swash {
  color: var(--wp--preset--color--rose);
}

.ape-hero__lede {
  font-size: 1.15rem;
  color: var(--wp--preset--color--muted);
  margin: 1.1rem 0 1.8rem;
  max-width: 44ch;
}

.ape-hero__actions {
  gap: .75rem;
}

.ape-btn-fantome .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border: 2px solid var(--wp--preset--color--line);
}

.ape-btn-fantome .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--teal);
  color: var(--wp--preset--color--teal-ink);
}

/* La carte du prochain rendez-vous : une affichette punaisee sur le frigo.
   La rotation est reservee a ce bloc et au prix — nulle part ailleurs, sinon
   l'effet devient un tic. */
.ape-next {
  position: relative;
  background: var(--wp--preset--color--surface);
  border: var(--ape-border);
  border-radius: 22px;
  padding: 2rem 1.9rem 1.9rem;
  box-shadow: var(--ape-shadow);
  transform: rotate(-1.1deg);
}

.ape-next__pin {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wp--preset--color--orange);
  color: #fff;
  font-family: var(--wp--preset--font-family--titres);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .3rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}

.ape-next__titre {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  margin: .5rem 0 1.1rem;
}

.ape-next__titre a {
  text-decoration: none;
  color: inherit;
}

.ape-next__titre a:hover {
  color: var(--wp--preset--color--rose-ink);
}

.ape-next__faits {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem 1.2rem;
  margin: 0 0 1.5rem;
  font-size: .98rem;
}

.ape-next__faits dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  padding-top: .3rem;
}

.ape-next__faits dd {
  margin: 0;
}

@media (max-width: 781px) {
  .ape-next { transform: none; margin-top: 1.5rem; }
  .ape-hero { padding-block: 2.25rem 0; }
}

/* --- vague ------------------------------------------------------------------- */

.ape-vague {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2.75rem;
}

.ape-vague__fond {
  fill: var(--wp--preset--color--bleu-soft);
}

.ape-vague__crete {
  fill: var(--wp--preset--color--bleu);
  opacity: .45;
}

/* --- titres de section ------------------------------------------------------- */

/* Un trait de feutre sous les titres de section. Peint en fond du texte plutot
   qu'en pseudo-element : un ::after en z-index negatif disparaitrait derriere
   les panneaux colores.

   display:table et non display:inline — un element inline ignore sa marge
   haute, et le titre venait alors coller au lien de la section precedente.
   table donne une boite de niveau bloc qui se retrecit au texte : on garde le
   surlignage ajuste ET les marges. */
main .wp-block-post-content > h2 {
  display: table;
  margin: 3.5rem 0 1rem;
  padding: 0 .14em;
  background-image: linear-gradient(
    transparent 62%,
    var(--wp--preset--color--orange-soft) 62%,
    var(--wp--preset--color--orange-soft) 94%,
    transparent 94%
  );
}

main .wp-block-post-content > h2:first-child {
  margin-top: 1rem;
}

/* --- liens ------------------------------------------------------------------ */

/* Souligne, mais pas au ras du texte : un trait fin et decale se lit mieux et
   fait moins "lien brut de navigateur". */
main a:where(:not(.ape-btn):not(.wp-block-button__link):not(.wp-block-navigation-item__content)) {
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .12s ease, color .12s ease;
}

main a:where(:not(.ape-btn):not(.wp-block-button__link)):hover {
  text-decoration-color: currentColor;
}

/* Lien de fin de section : ce n'est pas un lien de lecture, c'est une suite.
   Il prend la forme d'un lien flechee, sans soulignement. */
.ape-lien-suite {
  margin-top: 1.4rem;
}

.ape-lien-suite a {
  font-family: var(--wp--preset--font-family--titres);
  font-weight: 700;
  font-size: 1rem;
  color: var(--wp--preset--color--rose-ink);
  text-decoration: none;
}

.ape-lien-suite a::after {
  content: " 92";
  display: inline-block;
  transition: transform .14s ease;
}

.ape-lien-suite a:hover::after {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .ape-lien-suite a::after { transition: none; }
  .ape-lien-suite a:hover::after { transform: none; }
}

/* Les titres et les cartes ne sont jamais soulignes : leur lien est porte par
   le bloc entier, le soulignement ferait doublon. */
main :is(h1, h2, h3, h4) a,
.ape-card a,
.ape-agenda-corps a {
  text-decoration: none;
}

/* --- bilan ------------------------------------------------------------------- */

.ape-bilan {
  background: var(--wp--preset--color--teal-soft);
  border-radius: var(--ape-radius-lg);
  padding: 2.4rem 2.2rem;
  margin: 2rem 0;
}

.ape-bilan__grille {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.ape-bilan__n {
  display: block;
  font-family: var(--wp--preset--font-family--titres);
  font-size: clamp(2.3rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--wp--preset--color--teal-ink);
  font-variant-numeric: tabular-nums;
}

.ape-bilan__item p {
  margin: .55rem 0 0;
  font-size: .97rem;
  max-width: 26ch;
}

.ape-bilan__lien {
  margin: 1.6rem 0 0;
  font-family: var(--wp--preset--font-family--titres);
  font-weight: 700;
}

/* --- pied de page ------------------------------------------------------------ */

.ape-footer {
  border-top: var(--ape-border);
  margin-top: 3rem;
}

.ape-footer__titre {
  font-family: var(--wp--preset--font-family--texte);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin: 0 0 .85rem;
}

.ape-footer__liens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
  font-size: .96rem;
}

.ape-footer__liens a,
.ape-footer__adresse a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.ape-footer__liens a:hover,
.ape-footer__adresse a:hover {
  color: var(--wp--preset--color--teal-ink);
  text-decoration: underline;
}

.ape-footer__adresse {
  font-size: .96rem;
  margin: 0;
}

.ape-footer__legal {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: var(--ape-border);
  font-size: .88rem;
  color: var(--wp--preset--color--muted);
}

.ape-footer__legal p {
  margin: 0;
}

/* --- bloc tarif, chapo, note ------------------------------------------------- */

.ape-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.8rem;
  background: var(--wp--preset--color--surface);
  border: var(--ape-border);
  border-radius: var(--ape-radius-lg);
  padding: 1.8rem 2rem;
  margin: 2.2rem 0;
  box-shadow: var(--ape-shadow);
}

/* La seule autre rotation du site, avec la carte du prochain rendez-vous. */
.ape-prix__pastille {
  text-align: center;
  background: var(--wp--preset--color--rose-soft);
  border-radius: 20px;
  padding: 1.3rem 1.8rem;
  transform: rotate(1.5deg);
  flex: none;
}

.ape-prix__montant {
  display: block;
  font-family: var(--wp--preset--font-family--titres);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--wp--preset--color--rose-ink);
  font-variant-numeric: tabular-nums;
}

.ape-prix__periode {
  display: block;
  margin-top: .35rem;
  font-family: var(--wp--preset--font-family--titres);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--rose-ink);
}

.ape-prix__corps {
  flex: 1 1 16rem;
}

.ape-prix__note {
  margin: 0 0 1.1rem;
  color: var(--wp--preset--color--muted);
}

.ape-chapo {
  font-size: 1.15rem;
  color: var(--wp--preset--color--muted);
}

/* Reserve aux reserves honnetes : ce qu'on ne peut pas promettre. */
.ape-note {
  font-size: .96rem;
  font-style: italic;
  color: var(--wp--preset--color--muted);
  border-left: 4px solid var(--wp--preset--color--line);
  padding-left: 1.1rem;
  margin-block: 1.6rem;
}

@media (max-width: 600px) {
  .ape-prix { padding: 1.4rem; gap: 1.2rem; }
  .ape-prix__pastille { transform: none; }
}

.ape-prix--sans-montant {
  padding: 1.4rem 1.8rem;
}