/*
Theme Name: AOLMÈS Advent
Theme URI: https://calendrier.aolmes.fr/
Author: AOLMÈS
Description: Thème WordPress responsive pour un calendrier de l’avent AOLMÈS avec cases animées, fiches produit et boutons de téléchargement PDF.
Version: 1.3.0
Requires at least: 6.2
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aolmes-advent
*/

:root {
  --aolmes-blue: #4bb2d1;
  --aolmes-blue-2: #97d3dc;
  --aolmes-blue-soft: #d0ecf4;
  --aolmes-blue-deep: #357d93;
  --aolmes-pink: #e54875;
  --aolmes-peach: #f4cbc3;
  --aolmes-cream: #fff8f5;
  --aolmes-white: #ffffff;
  --aolmes-ink: #235d70;
  --aolmes-shadow: 0 24px 70px rgba(53, 125, 147, .16);
  --aolmes-font: "Ginora Sans", "Avenir Next", "Montserrat", "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--aolmes-font);
  color: var(--aolmes-ink);
  letter-spacing: .08em;
  background:
    radial-gradient(circle at 9% 10%, rgba(244, 203, 195, .24) 0 9rem, transparent 9.1rem),
    radial-gradient(circle at 88% 14%, rgba(151, 211, 220, .32) 0 12rem, transparent 12.1rem),
    linear-gradient(180deg, #fff 0%, var(--aolmes-cream) 100%);
}
body.aolmes-modal-open { overflow: hidden; }
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.aolmes-site {
  position: relative;
  min-height: 100vh;
  padding: 0 clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
  isolation: isolate;
}

.aolmes-site::before {
  content: "";
  position: fixed;
  inset: auto -10vw -16vw -10vw;
  height: 36vw;
  min-height: 13rem;
  z-index: -2;
  background: var(--aolmes-blue-2);
  opacity: .22;
  clip-path: polygon(0 22%, 12% 35%, 26% 29%, 43% 50%, 61% 20%, 77% 31%, 100% 12%, 100% 100%, 0 100%);
}

.aolmes-header {
  display: none;
}

.aolmes-logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--aolmes-blue);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.aolmes-logo__mark {
  display: inline-grid;
  place-items: center;
  width: clamp(3rem, 7vw, 5.4rem);
  aspect-ratio: 1;
  color: var(--aolmes-blue);
}

.aolmes-logo__text {
  font-size: clamp(1.3rem, 4.2vw, 3.2rem);
  line-height: 1;
}

.aolmes-nav { display: flex; align-items: center; gap: .75rem; }
.aolmes-nav__list { display: flex; align-items: center; gap: .75rem; margin: 0; padding: 0; list-style: none; }

.aolmes-nav a,
.aolmes-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: .72rem 1.15rem .66rem;
  border: 3px solid var(--aolmes-blue);
  border-radius: 999px;
  background: var(--aolmes-white);
  color: var(--aolmes-blue);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .1em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.aolmes-nav a:hover,
.aolmes-pill:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 12px 32px rgba(75, 178, 209, .22); }
.aolmes-main { position: relative; }

.aolmes-advent {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(1.3rem, 3vw, 3.2rem) 0 clamp(4rem, 8vw, 7rem);
}

.aolmes-calendar-intro {
  position: relative;
  max-width: 900px;
  margin: 0 auto clamp(1.25rem, 3vw, 2.1rem);
  padding-top: 0;
  text-align: center;
}

.aolmes-eyebrow {
  margin: 0 0 .75rem;
  color: var(--aolmes-pink);
  font-size: clamp(.72rem, 1.5vw, .92rem);
  font-weight: 900;
  text-transform: uppercase;
}

.aolmes-calendar-title {
  margin: 0;
  color: var(--aolmes-blue);
  font-size: clamp(2.45rem, 6.2vw, 5.6rem);
  line-height: .92;
  letter-spacing: .035em;
  text-transform: uppercase;
  font-weight: 900;
}

.aolmes-calendar-subtitles {
  margin: clamp(.85rem, 2vw, 1.25rem) auto 0;
  max-width: 660px;
  color: var(--aolmes-blue-deep);
  font-size: clamp(.86rem, 1.4vw, 1.03rem);
  line-height: 1.75;
  text-transform: uppercase;
  font-weight: 800;
}

.aolmes-calendar-subtitles p { margin: .15rem 0; }

.aolmes-calendar-frame {
  position: relative;
  margin: 0 auto;
}

.aolmes-calendar-ornament {
  position: relative;
  z-index: 1;
  display: block;
  width: min(82%, 790px);
  margin: 0 auto clamp(.75rem, 2vw, 1.35rem);
  color: var(--aolmes-blue);
  opacity: .76;
}

.aolmes-calendar-ornament svg { display: block; width: 100%; height: auto; overflow: visible; }
.aolmes-calendar-ornament path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .65;
}
.aolmes-calendar-ornament path:nth-child(2) { stroke: var(--aolmes-pink); stroke-width: 5; opacity: .42; }
.aolmes-calendar-ornament path:nth-child(3) { stroke-width: 4; opacity: .38; }

.advent-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(4.4rem, 8.2vw, 6.9rem);
  gap: clamp(.7rem, 1.7vw, 1.15rem);
  grid-auto-flow: dense;
  perspective: 1400px;
}

.advent-card {
  position: relative;
  display: grid;
  place-items: stretch;
  border: 0;
  padding: 0;
  min-width: 0;
  border-radius: 1.6rem;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: aolmes-card-enter .65s cubic-bezier(.2,.75,.18,1) both;
  animation-delay: calc(var(--i, 1) * 28ms);
}

.advent-card:focus-visible { outline: 4px solid var(--aolmes-pink); outline-offset: 4px; }

.advent-card__door,
.advent-card__inner {
  grid-area: 1 / 1;
  width: 100%;
  min-height: 100%;
  border-radius: inherit;
  backface-visibility: hidden;
}

.advent-card__inner {
  display: grid;
  place-items: center;
  transform: rotateY(180deg);
  background: var(--aolmes-white);
  border: 3px solid var(--aolmes-blue-soft);
  color: var(--aolmes-blue);
  box-shadow: inset 0 0 0 8px rgba(208, 236, 244, .42);
}
.advent-card__inner span { font-size: clamp(1.6rem, 4vw, 3rem); opacity: .85; }

.advent-card__door {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid var(--aolmes-blue);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.68) 0 1.7rem, transparent 1.8rem),
    radial-gradient(circle at 78% 76%, rgba(255,255,255,.45) 0 2.7rem, transparent 2.8rem),
    linear-gradient(135deg, var(--aolmes-white), #eaf8fb 58%, var(--aolmes-blue-soft));
  color: var(--aolmes-blue);
  box-shadow: 0 13px 34px rgba(75, 178, 209, .16);
  transition: transform .6s cubic-bezier(.2,.75,.22,1), box-shadow .3s ease, border-color .3s ease;
  transform-origin: left center;
}

.advent-card__door::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -100%;
  width: 50%;
  height: 200%;
  transform: rotate(30deg);
  background: linear-gradient(to right, rgba(255,255,255,.05), rgba(255,255,255,.58), rgba(255,255,255,0));
  opacity: 0;
}

.advent-card:nth-child(3n) .advent-card__door { border-color: var(--aolmes-pink); color: var(--aolmes-pink); }
.advent-card:nth-child(4n) .advent-card__door { background: linear-gradient(135deg, #fff, #fff2ef 56%, var(--aolmes-peach)); }
.advent-card:nth-child(5n) { border-radius: 1.95rem 1.35rem 2.2rem 1.4rem; }
.advent-card:nth-child(7n) { border-radius: 2.2rem 1.5rem 1.6rem 2.05rem; }

.advent-card:hover .advent-card__door::before { animation: aolmes-shine .8s ease-in-out; }
.advent-card:hover .advent-card__door { transform: translateY(-5px) rotateZ(-1deg); box-shadow: 0 20px 40px rgba(75, 178, 209, .24); }
.advent-card.is-opened .advent-card__door { transform: rotateY(-72deg) translateX(-1px); box-shadow: 24px 18px 34px rgba(53, 125, 147, .16); }

.advent-card__number {
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 4.9vw, 4.35rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
}

/* Placement irrégulier, inspiré du croquis fourni. */
.advent-card--day-1 { grid-column: 1 / span 2; grid-row: span 2; }
.advent-card--day-2 { grid-column: 3 / span 2; grid-row: span 3; }
.advent-card--day-3 { grid-column: 5 / span 2; grid-row: span 2; }
.advent-card--day-4 { grid-column: 1 / span 2; grid-row: span 3; }
.advent-card--day-5 { grid-column: 3 / span 2; grid-row: span 1; }
.advent-card--day-6 { grid-column: 5 / span 1; grid-row: span 2; }
.advent-card--day-7 { grid-column: 6 / span 1; grid-row: span 2; }
.advent-card--day-8 { grid-column: 1 / span 2; grid-row: span 2; }
.advent-card--day-9 { grid-column: 3 / span 3; grid-row: span 2; }
.advent-card--day-10 { grid-column: 6 / span 1; grid-row: span 2; }
.advent-card--day-11 { grid-column: 1 / span 1; grid-row: span 2; }
.advent-card--day-12 { grid-column: 2 / span 2; grid-row: span 2; }
.advent-card--day-13 { grid-column: 4 / span 3; grid-row: span 1; }
.advent-card--day-14 { grid-column: 1 / span 3; grid-row: span 1; }
.advent-card--day-15 { grid-column: 4 / span 1; grid-row: span 2; }
.advent-card--day-16 { grid-column: 5 / span 2; grid-row: span 2; }
.advent-card--day-17 { grid-column: 1 / span 2; grid-row: span 2; }
.advent-card--day-18 { grid-column: 3 / span 1; grid-row: span 2; }
.advent-card--day-19 { grid-column: 4 / span 3; grid-row: span 2; }
.advent-card--day-20 { grid-column: 1 / span 1; grid-row: span 2; }
.advent-card--day-21 { grid-column: 2 / span 2; grid-row: span 1; }
.advent-card--day-22 { grid-column: 4 / span 1; grid-row: span 1; }
.advent-card--day-23 { grid-column: 5 / span 1; grid-row: span 1; }
.advent-card--day-24 { grid-column: 6 / span 1; grid-row: span 1; }

.advent-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.advent-modal.is-open { opacity: 1; pointer-events: auto; }
.advent-modal__overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); }

.advent-modal__panel {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - clamp(2rem, 8vw, 6rem));
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.1rem, 3vw, 2.4rem);
  border: 4px solid var(--aolmes-blue-soft);
  border-radius: clamp(2rem, 5vw, 4.5rem);
  background: var(--aolmes-white);
  box-shadow: 0 30px 90px rgba(35, 93, 112, .25);
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.2,.75,.18,1);
}
.advent-modal.is-open .advent-modal__panel { transform: translateY(0) scale(1); }

.advent-modal__close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 3rem;
  aspect-ratio: 1;
  border: 3px solid var(--aolmes-blue);
  border-radius: 999px;
  background: var(--aolmes-white);
  color: var(--aolmes-blue);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 900;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.advent-modal__close:hover { transform: rotate(90deg); background: var(--aolmes-blue); color: var(--aolmes-white); }

.advent-product-visual {
  display: grid;
  place-items: center;
  min-height: clamp(16rem, 35vw, 27rem);
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: 48% 52% 55% 45% / 46% 48% 52% 54%;
  background:
    radial-gradient(circle at 18% 22%, rgba(244, 203, 195, .46), transparent 32%),
    radial-gradient(circle at 84% 72%, rgba(151, 211, 220, .46), transparent 38%),
    #fff8f5;
  border: 3px dashed rgba(75, 178, 209, .33);
}
.advent-product-visual img { width: 100%; max-height: 26rem; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(35, 93, 112, .15)); }
.advent-product-content { padding-right: clamp(0rem, 4vw, 1rem); }

.advent-product-kicker {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--aolmes-pink);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.advent-product-content h2 { margin: 0; color: var(--aolmes-blue); font-size: clamp(1.8rem, 5vw, 4.1rem); line-height: .95; letter-spacing: .04em; text-transform: uppercase; }
.advent-product-content p,
.advent-product-description { margin: 1.15rem 0 0; color: var(--aolmes-blue-deep); font-size: clamp(.92rem, 1.4vw, 1.05rem); line-height: 1.75; letter-spacing: .07em; }

.advent-download {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.25rem;
  margin-top: 1.55rem;
  padding: .95rem 1.35rem .85rem;
  border: 4px solid var(--aolmes-blue-soft);
  border-radius: 999px;
  background: var(--aolmes-white);
  color: var(--aolmes-blue);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .82rem;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.advent-download::after { content: "↓"; font-size: 1rem; }
.advent-download:hover { transform: translateY(-2px); border-color: var(--aolmes-blue); box-shadow: 0 15px 30px rgba(75, 178, 209, .22); }
.advent-download.is-disabled { opacity: .52; cursor: not-allowed; }

.aolmes-footer { max-width: 1180px; margin: 0 auto; padding: 2.5rem 0 1rem; color: var(--aolmes-blue-deep); font-size: .72rem; text-transform: uppercase; text-align: center; }
.aolmes-page-content { max-width: 920px; margin: 2rem auto 5rem; padding: clamp(1.3rem, 4vw, 3rem); border: 3px solid var(--aolmes-blue-soft); border-radius: 2rem; background: rgba(255,255,255,.86); line-height: 1.8; }
.aolmes-page-content h1,
.aolmes-page-content h2,
.aolmes-page-content h3 { color: var(--aolmes-blue); text-transform: uppercase; }

@keyframes aolmes-shine { 0% { opacity: 0; right: -100%; } 25% { opacity: .85; } 100% { opacity: 0; right: 110%; } }
@keyframes aolmes-card-enter { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 980px) {
  .advent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(4.5rem, 13vw, 7rem); }
  .advent-card { grid-column: auto / span 2 !important; grid-row: span 2 !important; }
  .advent-card--day-2,
  .advent-card--day-9,
  .advent-card--day-19 { grid-column: auto / span 2 !important; grid-row: span 3 !important; }
  .advent-card--day-5,
  .advent-card--day-13,
  .advent-card--day-14,
  .advent-card--day-21,
  .advent-card--day-22,
  .advent-card--day-23,
  .advent-card--day-24 { grid-column: auto / span 2 !important; grid-row: span 1 !important; }
  .advent-modal__panel { grid-template-columns: 1fr; }
  .advent-product-content { padding-right: 0; }
}

@media (max-width: 680px) {
  .aolmes-site { padding: 0 1rem .75rem; }
  .aolmes-header { display: none; }
  .aolmes-logo__text { font-size: clamp(1.35rem, 8vw, 2.25rem); }
  .aolmes-nav { display: none; }
  .aolmes-calendar-ornament { width: 100%; margin-bottom: .75rem; }
  .aolmes-calendar-ornament path { stroke-width: 5; }
  .advent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(4rem, 24vw, 6.6rem); gap: .65rem; }
  .advent-card { grid-column: auto / span 1 !important; grid-row: span 2 !important; border-radius: 1.15rem; }
  .advent-card:nth-child(3n),
  .advent-card:nth-child(7n) { grid-row: span 1 !important; }
  .advent-card__number { font-size: clamp(2rem, 12vw, 3.3rem); }
  .advent-modal { padding: .75rem; }
  .advent-modal__panel { border-radius: 2rem; padding: 1rem; }
  .advent-modal__close { width: 2.65rem; top: .55rem; right: .55rem; }
}

@media (max-width: 420px) {
  .aolmes-calendar-title { font-size: clamp(2.15rem, 14vw, 3.5rem); }
  .aolmes-calendar-subtitles { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}