/* GHP, proposition 2 « Tifaifai » : graphique, coloré, pop.
   Palette tirée du patchwork polynésien et de la couverture 2027. */

:root {
  --creme: #FFF7EF;
  --rose: #F28DB2;
  --rosevif: #E0457B;
  --lagon: #3BA7E0;
  --nuit: #1E2A5A;
  --soleil: #FFC93C;
  --feuille: #45A834;
  --rose-pale: #FFE3EE;
  --lagon-pale: #DCF0FB;
  --soleil-pale: #FFF0C4;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --main: "Caveat Brush", "Kalam", cursive;
  --sc: var(--rosevif);
  --sct: #fff;
  /* frise géométrique façon tapa (triangles évidés + points), utilisée en masque */
  --frise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath fill-rule='evenodd' d='M0 24 12 6 24 24ZM12 14.5 15 18 12 21.5 9 18ZM24 24 36 6 48 24ZM36 14.5 39 18 36 21.5 33 18Z'/%3E%3Ccircle cx='12' cy='2.5' r='2.5'/%3E%3Ccircle cx='36' cy='2.5' r='2.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
html.noscroll { overflow: hidden; }
body {
  font: 500 1rem/1.55 var(--font);
  color: var(--nuit);
  background: var(--creme);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; box-shadow: 0 0 0 6px var(--soleil); border-radius: 12px; }
[hidden] { display: none !important; }

.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }
@media (min-width: 760px) { .wrap { width: min(1240px, 100% - 56px); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--soleil); padding: .6em 1em; border-radius: 99px; font-weight: 800; z-index: 200; }
.skip:focus { top: 12px; }
.center { text-align: center; }

/* apparition au défilement (animation, pour ne pas gêner les transitions de survol) */
.js .rv { opacity: 0; }
.js .rv.vu { animation: rv .75s cubic-bezier(.3, 1.35, .5, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rv { from { opacity: 0; translate: 0 30px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ---------- Typo et boutons ---------- */
.manus { font-family: var(--main); font-weight: 400; color: var(--rosevif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; }
.h2 { font-weight: 900; font-size: clamp(2.1rem, 5.2vw, 3.8rem); line-height: .98; letter-spacing: -.025em; }
.lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); max-width: 56ch; margin-top: 14px; }
.sec { position: relative; padding: 96px 0 84px; overflow: hidden; }
.sec-head { margin-bottom: 40px; display: grid; gap: 8px; }
.sec-head.centre { text-align: center; justify-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .85em 1.5em; border-radius: 999px; border: 3px solid var(--nuit);
  background: var(--b, var(--soleil)); color: var(--bt, var(--nuit));
  font-weight: 800; text-decoration: none; line-height: 1.1;
  box-shadow: 0 5px 0 var(--nuit);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
}
.btn:hover { transform: translateY(-3px) rotate(-1.2deg); box-shadow: 0 8px 0 var(--nuit); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--nuit); }
.btn svg { width: 1.2em; height: 1.2em; }
.btn.rose { --b: var(--rosevif); --bt: #fff; }
.btn.lagon { --b: var(--lagon); --bt: var(--nuit); }
.btn.blanc { --b: #fff; }
.btn.petit { padding: .6em 1.1em; font-size: .9rem; box-shadow: 0 4px 0 var(--nuit); }

.pill {
  display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em;
  border-radius: 999px; border: 3px solid var(--nuit);
  background: var(--sc); color: var(--sct); font-weight: 800; font-size: .95rem; line-height: 1.1;
  text-decoration: none; box-shadow: 0 3px 0 var(--nuit); text-align: left;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
}
.pill svg { width: 20px; height: 20px; flex: none; }
.pill:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 6px 0 var(--nuit); }
button.pill[aria-pressed="false"] { background: #fff; color: var(--nuit); }
button.pill[aria-pressed="false"]::before { content: ""; width: .8em; height: .8em; border-radius: 50%; background: var(--sc); border: 2px solid var(--nuit); flex: none; }
.pill.blanche { background: #fff; color: var(--nuit); }

/* ---------- Motifs ---------- */
.fleur { display: block; line-height: 0; pointer-events: none; }
.fleur svg { width: 100%; height: 100%; overflow: visible; }
.fleur .f1 { fill: var(--c1, var(--rose)); stroke: var(--fond, var(--creme)); stroke-width: 2.4; stroke-linejoin: round; paint-order: stroke; }
.fleur .f2 { fill: var(--c2, var(--soleil)); }
.fleur .f3 { fill: var(--c3, rgba(255, 255, 255, .5)); }
.fleur .f4 { fill: none; stroke: var(--c2, var(--soleil)); stroke-width: 3; stroke-linecap: round; }
.fleur.spin svg { animation: tourne 60s linear infinite; }
.fleur.spin-r svg { animation: tourne 80s linear infinite reverse; }
.fleur.respire svg { animation: respire 5.5s ease-in-out infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes respire { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.1) rotate(7deg); } }
.coin { position: absolute; z-index: 0; }

.frise { display: block; height: 24px; background: currentColor; -webkit-mask: var(--frise) repeat-x center / auto 100%; mask: var(--frise) repeat-x center / auto 100%; }

/* bord festonné : demi-cercles de la couleur de la section précédente */
.fest::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 24px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 24px 0, var(--prev, var(--creme)) 23px, transparent 24px) 0 0 / 48px 24px repeat-x;
}

/* ---------- En-tête ---------- */
.hd { position: sticky; top: 10px; z-index: 60; padding-inline: 10px; }
.hd-in {
  width: min(1240px, 100%); margin: 0 auto; background: var(--nuit); color: var(--creme);
  border-radius: 999px; padding: 7px 8px 7px 20px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 6px 0 rgba(30, 42, 90, .2);
}
.hd-logo { display: block; flex: none; }
.hd-logo img { height: 46px; width: auto; }
.hd-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hd-nav a, .hd-nav button {
  padding: .6em 1em; border-radius: 99px; font-weight: 800; font-size: .93rem; text-decoration: none; color: var(--creme);
  display: inline-flex; align-items: center; gap: .4em; transition: background .15s, color .15s;
}
.hd-nav a:hover, .hd-nav button:hover, .hd-nav button[aria-expanded="true"] { background: var(--rosevif); color: #fff; }
.hd-nav button svg { width: 14px; height: 14px; transition: transform .2s; }
.hd-nav button[aria-expanded="true"] svg { transform: rotate(180deg); }
.hd-act { display: flex; align-items: center; gap: 8px; }
.rond {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--soleil); color: var(--nuit);
  text-decoration: none; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.rond:hover { transform: scale(1.12) rotate(-6deg); }
.rond svg { width: 22px; height: 22px; }
.rond.fb { background: #1877F2; color: #fff; }
.rond.ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); color: #fff; }
.rond.tt { background: #fff; color: #000; }
.hd-soc { display: flex; gap: 6px; }
.hd-soc .rond { width: 36px; height: 36px; }
.hd-soc .rond svg { width: 18px; height: 18px; }
.hd-burger { display: none; }

.mega {
  position: absolute; top: calc(100% + 10px); left: 10px; right: 10px; margin-inline: auto; width: min(1100px, calc(100% - 20px));
  background: var(--creme); border: 4px solid var(--nuit); border-radius: 34px; padding: 22px 22px 26px;
  box-shadow: 9px 9px 0 var(--nuit); max-height: calc(100vh - 110px); overflow: auto;
  animation: pop-in .35s cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.mega h2 { font-family: var(--main); font-weight: 400; font-size: 1.7rem; color: var(--rosevif); margin-bottom: 12px; }
.mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.mega-grid .pill small { font-weight: 600; opacity: .9; display: block; font-size: .72rem; }
.mega-liens { display: none; margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
.mega-soc { display: none; gap: 10px; margin-top: 16px; }

/* ---------- Recherche (overlay) ---------- */
.ov { position: fixed; inset: 0; z-index: 120; background: rgba(30, 42, 90, .72); display: grid; place-items: center; padding: 14px; backdrop-filter: blur(4px); animation: fond .25s; }
@keyframes fond { from { opacity: 0; } }
.ov-card { position: relative; background: var(--creme); border: 4px solid var(--nuit); border-radius: 32px; box-shadow: 10px 10px 0 var(--rosevif); max-height: calc(100vh - 28px); overflow: auto; width: 100%; animation: pop-in .4s cubic-bezier(.3, 1.5, .5, 1); }
.ov-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: var(--soleil); border: 3px solid var(--nuit); display: grid; place-items: center; font-weight: 900; font-size: 1.1rem; transition: transform .2s; }
.ov-x:hover { transform: rotate(90deg) scale(1.1); }
.ov-x svg { width: 20px; height: 20px; }

.so { align-items: start; padding-top: 7vh; }
.so .ov-card { max-width: 760px; margin-inline: auto; padding: 26px 22px 22px; }
.so-titre { font-family: var(--main); font-size: 1.9rem; color: var(--rosevif); line-height: 1; margin-bottom: 12px; padding-right: 50px; }
.champ { display: flex; align-items: center; gap: 10px; background: #fff; border: 4px solid var(--nuit); border-radius: 999px; padding: 6px 8px 6px 18px; box-shadow: 6px 6px 0 var(--lagon); }
.champ:focus-within { box-shadow: 6px 6px 0 var(--lagon), 0 0 0 4px var(--soleil); }
.champ > svg { width: 24px; height: 24px; flex: none; color: var(--rosevif); }
.champ input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 700 1.05rem var(--font); color: var(--nuit); padding: .6em 0; }
.champ input::placeholder { color: rgba(30, 42, 90, .6); }
.champ input::-webkit-search-cancel-button { display: none; }
.champ .go { border-radius: 999px; background: var(--rosevif); color: #fff; padding: .75em 1.2em; font-weight: 800; flex: none; }

.res-box { margin-top: 18px; }
.res-g h3 { font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin: 14px 6px 6px; color: rgba(30, 42, 90, .75); }
.res { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 18px; text-decoration: none; transition: background .15s, transform .15s; }
.res:hover, .res:focus-visible { background: var(--soleil-pale); transform: translateX(4px); }
.res-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--sc); color: var(--sct); display: grid; place-items: center; flex: none; border: 3px solid var(--nuit); }
.res-ic svg { width: 20px; height: 20px; }
.res-t { flex: 1; min-width: 0; font-weight: 800; line-height: 1.25; }
.res-t small { display: block; font-weight: 500; font-size: .82rem; color: rgba(30, 42, 90, .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-tag { font-size: .7rem; font-weight: 900; text-transform: uppercase; padding: .25em .7em; border-radius: 99px; background: var(--nuit); color: #fff; flex: none; }
.res mark { background: var(--soleil); color: inherit; border-radius: 3px; padding: 0; }
.res-vide { padding: 18px 8px; font-weight: 600; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sugg b { font-family: var(--main); font-weight: 400; font-size: 1.2rem; }
.sugg button { padding: .4em .95em; border-radius: 99px; background: #fff; border: 3px solid var(--nuit); font-weight: 800; font-size: .88rem; transition: transform .15s, background .15s; }
.sugg button:hover { background: var(--soleil); transform: rotate(-3deg) scale(1.05); }

/* ---------- Lightbox pub / article ---------- */
.lb-card { max-width: 980px; display: grid; grid-template-columns: auto 1fr; gap: 26px; padding: 22px; }
.lb-img { max-height: calc(100vh - 80px); width: auto; max-width: min(46vw, 520px); object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 10px 24px rgba(30, 42, 90, .3); rotate: -1.5deg; }
.lb-txt { align-self: center; display: grid; gap: 12px; padding-right: 10px; }
.lb-txt h2 { font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; padding-right: 40px; }
.lb-txt .manus { font-size: 1.6rem; }
.lb-liens { display: flex; flex-wrap: wrap; gap: 8px; }

.ar-card { max-width: 720px; }
.ar-img { aspect-ratio: 16 / 8; width: 100%; object-fit: cover; border-bottom: 4px solid var(--nuit); }
.ar-corps { padding: 24px 28px 28px; display: grid; gap: 14px; }
.ar-corps h2 { font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.05; }
.ar-corps ul { display: grid; gap: 8px; }
.ar-corps li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.ar-corps li .fleur { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.ar-corps h3 { font-family: var(--main); font-weight: 400; font-size: 1.5rem; color: var(--rosevif); }

/* toast et badge maquette */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 150; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  background: var(--nuit); color: #fff; border: 3px solid var(--soleil); border-radius: 22px; padding: .8em 1.3em; font-weight: 700; max-width: calc(100vw - 28px);
  box-shadow: 6px 6px 0 var(--rosevif); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.maq {
  position: fixed; left: 10px; bottom: 10px; z-index: 90; font-size: .72rem; font-weight: 800; text-decoration: none;
  background: var(--nuit); color: #fff; padding: .45em .9em; border-radius: 99px; border: 2px solid var(--soleil); opacity: .92;
}
.maq:hover { background: var(--rosevif); opacity: 1; }

/* ---------- Héros ---------- */
.hero { position: relative; padding: 38px 0 80px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.hello { font-size: clamp(1.9rem, 4vw, 2.8rem); display: inline-block; transform: rotate(-4deg); margin-bottom: 8px; }
.titre-geant { font-weight: 900; font-size: clamp(2.9rem, 7.6vw, 6rem); line-height: .93; letter-spacing: -.04em; }
.titre-geant .lg { display: block; }
.titre-geant .w { display: inline-block; animation: pop .8s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(var(--i) * .11s + .1s); }
@keyframes pop { from { opacity: 0; transform: translateY(40px) scale(.5) rotate(-8deg); } }
.titre-geant .c1 { color: var(--rosevif); }
.titre-geant .c2 { color: var(--lagon); position: relative; }
.titre-geant .c2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .16em; background: var(--soleil); border-radius: 99px; z-index: -1; transform: rotate(-1.5deg); }
.titre-geant .c3 { color: var(--soleil); -webkit-text-stroke: .045em var(--nuit); paint-order: stroke fill; }
.sous { font-size: clamp(1.05rem, 1.7vw, 1.28rem); font-weight: 600; max-width: 34em; margin: 22px 0 26px; }
.hs { position: relative; max-width: 590px; }
.hs-res { position: absolute; left: 0; right: 0; top: calc(100% + 14px); z-index: 30; background: #fff; border: 4px solid var(--nuit); border-radius: 28px; box-shadow: 8px 8px 0 var(--nuit); max-height: min(62vh, 470px); overflow: auto; padding: 12px; }
.hero .sugg { margin-top: 20px; }
.mois-pill { display: inline-flex; align-items: center; gap: .6em; margin-top: 22px; padding: .55em 1.1em .55em .6em; border-radius: 99px; background: var(--mc, var(--rosevif)); color: var(--mct, #fff); border: 3px solid var(--nuit); text-decoration: none; font-weight: 700; font-size: .95rem; box-shadow: 0 4px 0 var(--nuit); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.mois-pill:hover { transform: translateY(-3px) rotate(-1deg); }
.mois-pill .pt { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--nuit); display: grid; place-items: center; flex: none; }
.mois-pill .pt svg { width: 20px; height: 20px; }

.stage { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1 / 1.04; justify-self: center; }
.st-sun { position: absolute; inset: 9% 6% 7%; border-radius: 50%; background: var(--soleil); border: 5px solid var(--nuit); box-shadow: 10px 12px 0 var(--lagon); }
.st-ring { position: absolute; inset: 3% 0 1%; border-radius: 50%; border: 4px dashed var(--rosevif); animation: tourne 70s linear infinite; }
.st-blob { position: absolute; left: -2%; bottom: 14%; width: 30%; aspect-ratio: 1; border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%; background: var(--rose); animation: morph 8s ease-in-out infinite; }
.st-blob.b2 { left: auto; right: -1%; bottom: auto; top: 16%; width: 24%; background: var(--lagon); animation-delay: -4s; }
@keyframes morph { 50% { border-radius: 40% 60% 42% 58% / 58% 40% 60% 42%; transform: rotate(14deg) scale(1.06); } }
.st-tiki { position: absolute; left: 50%; top: 51%; width: 56%; transform: translate(-50%, -50%) translate(var(--px, 0), var(--py, 0)); }
.st-tiki .fl { animation: flot 7s ease-in-out infinite; position: relative; }
.st-tiki img { width: 100%; height: auto; }
.st-tiki .ombre { position: absolute; inset: 0; transform: translate(4.5%, 3.5%); filter: url(#f-nuit); }
.st-tiki .tk { position: relative; filter: url(#f-rosevif); }
@keyframes flot { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(1.2deg); } }
.pola { position: absolute; width: 33%; z-index: 4; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--rot, 0deg)); }
.pola-in { position: relative; background: #fff; padding: 3.5% 3.5% 0; border-radius: 10px; box-shadow: 0 8px 0 rgba(30, 42, 90, .18), 0 18px 30px rgba(30, 42, 90, .25); animation: flot 6.5s ease-in-out infinite; animation-delay: var(--dl, 0s); transition: scale .3s cubic-bezier(.3, 1.6, .5, 1); }
.pola:hover .pola-in { scale: 1.08; }
.pola img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; }
.pola.swap img { animation: retourne .6s; }
@keyframes retourne { from { opacity: 0; transform: scale(.85) rotate(-6deg); } }
.pola figcaption { font-family: var(--main); font-size: clamp(.8rem, 1.7vw, 1.15rem); line-height: 1.1; text-align: center; padding: .45em .1em .55em; min-height: 2.5em; display: grid; place-items: center; }
.pola-in::before, .affiche::before { content: ""; position: absolute; top: -13px; left: 50%; width: 46%; height: 24px; translate: -50% 0; rotate: -3deg; background: rgba(255, 201, 60, .88); z-index: 2; clip-path: polygon(0 0, 4% 25%, 0 50%, 4% 75%, 0 100%, 100% 100%, 96% 75%, 100% 50%, 96% 25%, 100% 0); }
.p1 { left: -4%; top: 2%; --rot: -9deg; }
.p2 { right: -4%; top: -1%; --rot: 8deg; --dl: -2s; }
.p2 .pola-in::before { background: rgba(242, 141, 178, .9); }
.p3 { left: -1%; bottom: 1%; --rot: 6deg; --dl: -4s; }
.p3 .pola-in::before { background: rgba(59, 167, 224, .85); }
.p4 { right: -3%; bottom: 5%; --rot: -7deg; --dl: -1s; }
.st-f { position: absolute; z-index: 3; }

/* ---------- Bandeau défilant ---------- */
.mq { position: relative; padding: 36px 0 44px; overflow: hidden; }
.mq-band { display: flex; overflow: hidden; width: 106%; margin-left: -3%; padding: 12px 0; border-block: 4px solid var(--nuit); white-space: nowrap; }
.mq-a { background: var(--rosevif); transform: rotate(-1.7deg); }
.mq-b { background: var(--nuit); transform: rotate(1.5deg); margin-top: -16px; }
.mq-track { display: flex; flex: none; animation: mq 44s linear infinite; }
.mq-b .mq-track { animation-direction: reverse; animation-duration: 52s; }
.mq-it { display: flex; align-items: center; gap: .55em; padding-right: .55em; font-weight: 900; font-size: clamp(1.9rem, 5vw, 3.5rem); letter-spacing: -.02em; text-transform: uppercase; line-height: 1.15; }
.mq-it .fleur { width: .95em; height: .95em; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- Chiffres ---------- */
.chiffres { padding: 10px 0 70px; }
.ch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ch { padding: 26px 18px 24px; text-align: center; border: 4px solid var(--nuit); background: var(--bg); color: var(--tx, var(--nuit)); box-shadow: 6px 6px 0 var(--nuit); border-radius: var(--br); transform: rotate(var(--r, 0deg)); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ch:hover { transform: rotate(0) scale(1.05); }
.ch b { display: block; font-weight: 900; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.ch span { display: block; font-weight: 700; font-size: .95rem; margin-top: 6px; line-height: 1.25; }

/* ---------- Roue des 12 mois ---------- */
.mois { background: var(--rose-pale); --prev: var(--creme); }
.mois-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.roue-col { display: grid; gap: 8px; justify-items: center; }
.roue-box { position: relative; width: min(100%, 620px); }
.roue-box svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 0 rgba(30, 42, 90, .14)); }
.seg { cursor: pointer; outline: none; }
.seg path { stroke: var(--creme); stroke-width: 5; transition: filter .2s; }
.seg:hover path { filter: brightness(1.1) saturate(1.1); }
.seg:focus-visible path { stroke: var(--nuit); stroke-width: 7; }
.seg text { font-family: var(--font); font-weight: 800; pointer-events: none; }
.seg .nl { font-size: 19px; }
.seg .nc { font-size: 21px; display: none; }
.hl { fill: none; stroke: var(--nuit); stroke-width: 7; stroke-linejoin: round; pointer-events: none; }
.hub-bg { fill: var(--creme); stroke: var(--nuit); stroke-width: 5; }
.hub-dots { fill: none; stroke: var(--nuit); stroke-width: 3; stroke-dasharray: .1 9; stroke-linecap: round; transform-origin: center; animation: tourne 40s linear infinite; }
.hub-ring { fill: var(--sc); transition: fill .5s; }
.hub-img { transition: opacity .6s; }
.roue-pin { fill: var(--soleil); stroke: var(--nuit); stroke-width: 5; stroke-linejoin: round; }
.roue-ctl { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.roue-ctl .rond { width: 52px; height: 52px; border: 3px solid var(--nuit); box-shadow: 0 4px 0 var(--nuit); }
.roue-ctl .rond svg { width: 26px; height: 26px; }
.roue-ctl .rond[aria-pressed="true"] { background: var(--rosevif); color: #fff; }
.roue-lib { font-family: var(--main); font-size: 1.7rem; min-width: 7ch; text-align: center; }
.mois-chips { display: none; gap: 8px; overflow-x: auto; scrollbar-width: none; width: 100%; padding: 6px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.mois-chips::-webkit-scrollbar { display: none; }
.mois-chips button { flex: none; scroll-snap-align: center; padding: .5em 1em; border-radius: 99px; border: 3px solid var(--nuit); background: #fff; font-weight: 800; font-size: .9rem; }
.mois-chips button[aria-pressed="true"] { background: var(--sc); color: var(--sct); box-shadow: 0 3px 0 var(--nuit); }

.fiche { display: grid; gap: 22px; justify-items: center; text-align: center; }
.fiche-photo { position: relative; width: min(100%, 360px); aspect-ratio: 1; }
.blob { position: absolute; inset: 0; border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; overflow: hidden; border: 5px solid var(--nuit); background: var(--sc); animation: morph2 10s ease-in-out infinite; box-shadow: 10px 10px 0 var(--sc); }
@keyframes morph2 { 50% { border-radius: 40% 60% 38% 62% / 58% 38% 62% 42%; } }
.blob img { width: 100%; height: 100%; object-fit: cover; }
.fiche-ico { position: absolute; right: -5%; bottom: 4%; width: 100px; height: 100px; border-radius: 50%; background: var(--sc); color: var(--sct); display: grid; place-items: center; border: 4px solid var(--nuit); transform: rotate(9deg); box-shadow: 0 5px 0 var(--nuit); }
.fiche-ico svg { width: 54px; height: 54px; }
.tourne-badge { position: absolute; left: -8%; top: -4%; width: 118px; height: 118px; }
.tourne-badge svg { width: 100%; height: 100%; animation: tourne 16s linear infinite; }
.tourne-badge .bg { fill: var(--soleil); stroke: var(--nuit); stroke-width: 3; }
.tourne-badge text { font-family: var(--font); font-weight: 900; fill: var(--nuit); }
.fiche-txt { display: grid; gap: 10px; justify-items: center; }
.fiche-mois { font-family: var(--main); font-weight: 400; font-size: clamp(3.4rem, 8vw, 6rem); line-height: .85; background: linear-gradient(transparent 60%, var(--sc) 60%, var(--sc) 92%, transparent 92%); padding: 0 .15em; }
.fiche-titre { font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; }
.fiche-txt p { max-width: 44ch; }
.saison { display: inline-flex; gap: .5em; align-items: center; background: #fff; border: 3px solid var(--nuit); border-radius: 99px; padding: .4em 1em; font-weight: 700; font-size: .92rem; }
.saison .fleur { width: 20px; height: 20px; flex: none; }
.fiche-acts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 4px; }
.fiche.in .fiche-photo { animation: pop-photo .8s cubic-bezier(.3, 1.5, .5, 1); }
.fiche.in .fiche-txt > * { animation: monte .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--k, 0) * 70ms + 120ms); }
@keyframes pop-photo { from { opacity: 0; transform: scale(.6) rotate(-14deg); } }
@keyframes monte { from { opacity: 0; transform: translateY(26px); } }

/* ---------- Grille bento ---------- */
.sujets { --prev: var(--rose-pale); }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(118px, 14vw, 172px); gap: 16px; }
.bento > :nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.bento > :nth-child(2) { grid-area: 1 / 3 / 2 / 5; }
.bento > :nth-child(3) { grid-area: 1 / 5 / 3 / 7; }
.bento > :nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
.bento > :nth-child(5) { grid-area: 2 / 4 / 3 / 5; }
.bento > :nth-child(6) { grid-area: 3 / 1 / 4 / 3; }
.bento > :nth-child(7) { grid-area: 3 / 3 / 5 / 5; }
.bento > :nth-child(8) { grid-area: 3 / 5 / 4 / 6; }
.bento > :nth-child(9) { grid-area: 3 / 6 / 4 / 7; }
.bento > :nth-child(10) { grid-area: 4 / 1 / 5 / 3; }
.bento > :nth-child(11) { grid-area: 4 / 5 / 5 / 7; }
.bento > :nth-child(12) { grid-area: 5 / 1 / 6 / 4; }
.bento > :nth-child(13) { grid-area: 5 / 4 / 6 / 7; }
.tile { position: relative; display: block; border-radius: 28px; overflow: hidden; border: 4px solid #fff; background: var(--sc); text-decoration: none; box-shadow: 0 6px 0 rgba(30, 42, 90, .14); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.tile:hover, .tile:focus-visible { transform: rotate(-1.8deg) translate(-3px, -5px) scale(1.025); box-shadow: 9px 9px 0 color-mix(in srgb, var(--sc) 60%, var(--nuit)); z-index: 3; }
.tile:nth-child(even):hover { transform: rotate(1.8deg) translate(-3px, -5px) scale(1.025); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.tile:hover img { transform: scale(1.1) rotate(1deg); }
.tile-mois { position: absolute; top: 10px; left: 10px; background: #fff; color: var(--nuit); font-size: .68rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; padding: .28em .75em; border-radius: 99px; border: 2px solid var(--nuit); }
.tile.now .tile-mois { background: var(--soleil); }
.tile.now .tile-mois::after { content: " · à la une"; }
.tile-ico { position: absolute; top: 8px; right: 8px; width: 46px; height: 46px; border-radius: 50%; background: var(--sc); color: var(--sct); display: grid; place-items: center; border: 3px solid #fff; transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.tile:hover .tile-ico { transform: rotate(18deg) scale(1.15); }
.tile-ico svg { width: 25px; height: 25px; }
.tile-titre { position: absolute; left: 0; right: 0; bottom: 0; background: var(--sc); color: var(--sct); padding: 10px 16px 13px; font-weight: 900; line-height: 1.08; border-radius: 22px 22px 0 0; }
.tile-titre small { display: block; font-weight: 600; font-size: .84rem; line-height: 1.3; margin-top: 4px; }
.tile .t-court { display: none; }
.t-L .tile-titre { font-size: clamp(1.25rem, 2.2vw, 1.8rem); padding: 14px 20px 18px; }
.t-W .tile-titre { font-size: 1.1rem; }
.t-W .tile-titre small, .t-S .tile-titre small { display: none; }
.t-S .t-long { display: none; }
.t-S .t-court { display: inline; }
.t-S .tile-titre { font-size: .98rem; padding: 8px 12px 10px; }
.t-S .tile-ico { width: 38px; height: 38px; }
.t-S .tile-ico svg { width: 20px; height: 20px; }
.t-S .tile-mois { font-size: .6rem; }
.t-S.now .tile-mois::after { content: none; }
.tile-cta { background: var(--nuit); color: #fff; display: grid; place-content: center; gap: 8px; padding: 18px 34px; text-align: center; border-radius: 28px; border: 4px solid #fff; box-shadow: 0 6px 0 rgba(30, 42, 90, .14); position: relative; overflow: hidden; font-weight: 900; font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.1; text-decoration: none; justify-items: center; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tile-cta:hover { transform: rotate(1.5deg) scale(1.03); }
.tile-cta .manus { color: var(--soleil); }
.tile-cta .fleur { position: absolute; width: 100px; height: 100px; right: -40px; bottom: -42px; opacity: .55; }
.tile-cta span, .tile-cta b { position: relative; z-index: 1; }

/* ---------- Éditorial ---------- */
.edito { background: var(--lagon-pale); --prev: var(--creme); }
.feat { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 44px; align-items: center; margin-bottom: 70px; }
.feat-photo { position: relative; padding: 6% 4% 8%; }
.feat-photo::before { content: ""; position: absolute; inset: 0 14% 12% 0; background: var(--rose); border-radius: 40px; transform: rotate(-3deg); }
.feat-photo::after { content: ""; position: absolute; inset: 14% 0 0 14%; background: var(--lagon); opacity: .6; border-radius: 40px; transform: rotate(3deg); }
.feat-photo .cadre { position: relative; z-index: 1; border: 5px solid #fff; border-radius: 32px; overflow: hidden; box-shadow: 0 14px 0 rgba(30, 42, 90, .18); rotate: 1.2deg; transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1); }
.feat:hover .cadre { rotate: -.5deg; }
.feat-photo img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; }
.feat-photo .tourne-badge { left: auto; right: 0; top: -2%; z-index: 3; width: 128px; height: 128px; }
.feat-txt { display: grid; gap: 14px; justify-items: start; }
.feat-txt h3 { font-weight: 900; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: .98; letter-spacing: -.025em; }
.feat-txt h3 em { font-style: normal; color: var(--rosevif); }
.feat-meta { font-weight: 700; display: flex; gap: 8px; flex-wrap: wrap; }
.etiq { display: inline-block; background: var(--sc); color: var(--sct); padding: .28em .85em; border-radius: 99px; font-size: .76rem; font-weight: 900; border: 2px solid var(--nuit); letter-spacing: .02em; }
.etiq.blanche { background: #fff; color: var(--nuit); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card { display: flex; flex-direction: column; text-align: left; background: #fff; border: 3px solid var(--nuit); border-radius: 28px; overflow: hidden; box-shadow: 6px 6px 0 var(--nuit); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; width: 100%; }
.card:hover { transform: translate(-3px, -6px) rotate(-.8deg); box-shadow: 11px 11px 0 var(--sc); }
.card:nth-child(even):hover { transform: translate(-3px, -6px) rotate(.8deg); }
.card-img { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 3px solid var(--nuit); position: relative; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card:hover .card-img img { transform: scale(1.08); }
.card-img .etiq { position: absolute; left: 12px; top: 12px; }
.card-b { padding: 16px 20px 20px; display: grid; gap: 8px; flex: 1; align-content: start; }
.card h3 { font-weight: 800; font-size: 1.22rem; line-height: 1.18; }
.card p { font-size: .95rem; color: rgba(30, 42, 90, .88); }
.card-m { font-size: .82rem; font-weight: 800; color: var(--rosevif); margin-top: auto; padding-top: 4px; }

/* ---------- Mur d'affiches ---------- */
.mur { background: var(--lagon); --prev: var(--lagon-pale); }
.mur .sec-head { color: var(--nuit); }
.mur .sec-head .manus { color: #fff; text-shadow: 2px 2px 0 var(--nuit); }
.mur-pan { position: relative; border-radius: 38px; border: 4px solid var(--nuit); padding: 56px clamp(14px, 3vw, 40px) 40px; background-color: #2F92C9; background-image: radial-gradient(rgba(255, 255, 255, .2) 2.5px, transparent 3px), radial-gradient(rgba(255, 255, 255, .12) 2px, transparent 2.5px); background-size: 30px 30px; background-position: 0 0, 15px 15px; box-shadow: inset 0 -14px 0 rgba(30, 42, 90, .14), 8px 8px 0 var(--nuit); }
.mur-pan > .frise { position: absolute; top: 14px; left: 20px; right: 20px; color: rgba(255, 255, 255, .55); height: 20px; }
.affiches { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 230px)); justify-content: center; gap: 38px 28px; }
.affiche { position: relative; display: block; text-align: center; background: #fff; padding: 8px 8px 8px; border-radius: 4px; box-shadow: 0 10px 18px rgba(30, 42, 90, .38); transform: rotate(var(--r, 0deg)); transition: transform .4s cubic-bezier(.3, 1.7, .5, 1), box-shadow .3s; width: 100%; }
.affiche:hover, .affiche:focus-visible { transform: rotate(0deg) scale(1.13); z-index: 6; box-shadow: 0 26px 38px rgba(30, 42, 90, .5); }
.affiche img { width: 100%; aspect-ratio: .71; object-fit: contain; background: #f4efe8; }
.affiche-nom { display: block; font-family: var(--main); font-size: 1.15rem; line-height: 1.1; padding: .4em .2em .1em; }
.affiche.t2::before { background: rgba(242, 141, 178, .9); rotate: 3deg; }
.affiche.t3::before { background: rgba(69, 168, 52, .8); rotate: -5deg; }
.affiche.pin::before { width: 20px; height: 20px; border-radius: 50%; clip-path: none; background: radial-gradient(circle at 35% 30%, #ff9bb8, var(--rosevif) 55%, #9c1f4c); box-shadow: 0 5px 5px rgba(0, 0, 0, .35); top: -9px; rotate: 0deg; }
.mur-plus { margin-top: 44px; text-align: center; }

/* ---------- Annuaire ---------- */
.annuaire { --prev: var(--lagon); }
.dir-bar { display: flex; gap: 14px; margin-bottom: 18px; max-width: 640px; }
.dir-bar .champ { flex: 1; box-shadow: 6px 6px 0 var(--rosevif); }
.dir-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.dir-pills .pill { font-size: .86rem; padding: .42em .9em; }
.az { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.az button { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--nuit); background: #fff; font-weight: 900; font-size: .88rem; transition: transform .15s, background .15s; }
.az button:hover:not(:disabled) { transform: scale(1.15) rotate(-6deg); background: var(--soleil); }
.az button[aria-pressed="true"] { background: var(--rosevif); color: #fff; }
.az button:disabled { opacity: .3; cursor: default; border-style: dashed; }
.dir-count { font-weight: 800; margin-bottom: 22px; }
.pros-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.pro { position: relative; background: #fff; border: 3px solid var(--nuit); border-radius: 28px; padding: 20px 20px 18px; box-shadow: 6px 6px 0 var(--sc, var(--nuit)); display: flex; flex-direction: column; gap: 10px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); scroll-margin-top: 110px; }
.pro:hover { transform: translateY(-4px) rotate(-.6deg); }
.pro:target { animation: surligne 2.2s ease-out; box-shadow: 6px 6px 0 var(--sc), 0 0 0 8px var(--soleil); }
@keyframes surligne { 0%, 40% { transform: scale(1.04) rotate(-1.5deg); } }
.pro-t { display: flex; gap: 14px; align-items: center; }
.pro-av { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--sc); color: var(--sct); display: grid; place-items: center; font-weight: 900; font-size: 1.15rem; border: 3px solid var(--nuit); }
.pro h3 { font-size: 1.12rem; font-weight: 800; line-height: 1.15; }
.pro-m { font-weight: 600; font-size: .92rem; color: rgba(30, 42, 90, .85); }
.pro-l { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; }
.pro-l svg { width: 16px; height: 16px; color: var(--rosevif); }
.pro-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-tags a { text-decoration: none; }
.pro-tags .etiq { font-size: .68rem; padding: .22em .7em; }
.pro-act { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- Réseaux sociaux ---------- */
.reseaux { background: var(--soleil-pale); --prev: var(--creme); }
.res-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 50px; align-items: center; }
.phone-zone { position: relative; display: grid; place-items: center; padding: 20px 0; }
.phone-zone .fleur { position: absolute; }
.phone { position: relative; z-index: 2; width: min(300px, 76vw); aspect-ratio: 9 / 18.6; border: 11px solid var(--nuit); border-radius: 46px; background: #000; box-shadow: 14px 16px 0 var(--rosevif); overflow: hidden; rotate: -3deg; }
.phone-notch { position: absolute; top: 9px; left: 50%; width: 30%; height: 20px; background: #000; border-radius: 99px; z-index: 6; transform: translateX(-50%); }
.reel-track { height: 100%; transition: transform .85s cubic-bezier(.75, 0, .2, 1); }
.reel { position: relative; overflow: hidden; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel.zoom img { animation: kenburns 4s ease-out both; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 52%, rgba(0, 0, 0, .78)); }
.reel-top { position: absolute; top: 34px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 16px; color: #fff; font-weight: 800; font-size: .74rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.reel-top span:first-child { border-bottom: 2px solid #fff; padding-bottom: 2px; }
.reel-top span:last-child { opacity: .75; }
.reel-cap { position: absolute; left: 12px; right: 62px; bottom: 18px; z-index: 3; color: #fff; font-size: .76rem; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.reel-cap b { display: block; font-size: .82rem; margin-bottom: 2px; }
.reel-cap .son { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-weight: 700; }
.reel-cap .son svg { width: 13px; height: 13px; }
.reel-rail { position: absolute; right: 8px; bottom: 22px; z-index: 3; display: grid; gap: 12px; justify-items: center; color: #fff; font-size: .62rem; font-weight: 800; }
.reel-rail svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.reel-rail .av { width: 32px; height: 32px; border-radius: 50%; background: var(--creme); border: 2px solid #fff; display: grid; place-items: center; overflow: hidden; }
.reel-rail .av img { position: static; width: 80%; height: 80%; object-fit: contain; filter: url(#f-rosevif); }
.coeurs { position: absolute; right: 8px; bottom: 100px; width: 40px; height: 260px; z-index: 5; pointer-events: none; }
.coeur { position: absolute; bottom: 0; left: 6px; width: 24px; height: 24px; fill: #ff3b6b; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); animation: coeur 2.4s ease-out forwards; }
@keyframes coeur { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -230px) scale(1.25) rotate(var(--rt, 0deg)); } }
.reel-bar { position: absolute; left: 10px; right: 10px; top: 24px; z-index: 6; display: flex; gap: 4px; }
.reel-bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.reel-bar i.fait { background: #fff; }
.reel-bar i.cours::after { content: ""; display: block; height: 100%; background: #fff; animation: barre var(--dur, 3.4s) linear both; }
@keyframes barre { from { width: 0; } to { width: 100%; } }
.res-txt { display: grid; gap: 16px; }
.res-btns { display: grid; gap: 18px; margin-top: 12px; }
.soc { display: flex; align-items: center; gap: 18px; padding: 16px 24px 16px 18px; border-radius: 28px; border: 4px solid var(--nuit); text-decoration: none; color: #fff; background: var(--bg); box-shadow: 7px 7px 0 var(--nuit); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s; }
.soc:hover { transform: translate(-3px, -4px) rotate(-1.2deg); box-shadow: 11px 11px 0 var(--nuit); }
.soc:nth-child(2):hover { transform: translate(-3px, -4px) rotate(1.2deg); }
.soc .logo { width: 62px; height: 62px; flex: none; border-radius: 50%; background: #fff; color: var(--bg); display: grid; place-items: center; }
.soc .logo svg { width: 34px; height: 34px; }
.soc.fb { --bg: #1877F2; }
.soc.ig { --bg: #DD2A7B; background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF 85%); }
.soc.ig .logo { color: #DD2A7B; }
.soc.tt { --bg: #000; background: #111; }
.soc.tt .logo { color: #000; box-shadow: -3px -3px 0 #25F4EE, 3px 3px 0 #FE2C55; }
.soc-n { display: grid; line-height: 1.1; }
.soc-n b { font-weight: 900; font-size: 1.5rem; }
.soc-n span { font-weight: 700; font-size: .92rem; opacity: .95; }
.soc-cpt { margin-left: auto; text-align: right; font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1; }
.soc-cpt small { display: block; font-weight: 700; font-size: .72rem; margin-top: 4px; opacity: .9; }
.demo-note { font-size: .82rem; font-weight: 600; color: rgba(30, 42, 90, .85); }

/* ---------- Annoncez ---------- */
.annoncez { --prev: var(--soleil-pale); }
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; align-items: stretch; padding-top: 30px; }
.ticket { position: relative; display: flex; flex-direction: column; background: var(--tc); color: var(--tt, var(--nuit)); border: 4px solid var(--nuit); border-radius: 32px; box-shadow: 9px 9px 0 var(--nuit); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ticket:hover { transform: translateY(-6px) rotate(-1deg); }
.ticket.vedette { transform: scale(1.05); z-index: 2; }
.ticket.vedette:hover { transform: scale(1.07) rotate(-1deg); }
.ticket-top { padding: 30px 28px 24px; display: grid; gap: 12px; flex: 1; align-content: start; }
.ticket h3 { font-weight: 900; font-size: 1.6rem; line-height: 1; letter-spacing: -.02em; }
.ticket .prix { font-weight: 900; font-size: clamp(2.8rem, 5vw, 3.8rem); line-height: .95; letter-spacing: -.04em; }
.ticket .prix small { display: block; font-size: .95rem; font-weight: 800; letter-spacing: 0; margin-top: 4px; }
.ticket li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; line-height: 1.3; }
.ticket li .fleur { width: 20px; height: 20px; flex: none; margin-top: 1px; --fond: transparent; }
.ticket ul { display: grid; gap: 9px; margin-top: 6px; }
.ticket-foot { position: relative; border-top: 3px dashed var(--nuit); padding: 20px 28px 26px; }
.ticket-foot::before, .ticket-foot::after { content: ""; position: absolute; top: -23px; width: 42px; height: 42px; border-radius: 50%; background: var(--creme); border: 4px solid var(--nuit); }
.ticket-foot::before { left: -25px; clip-path: inset(0 0 0 50%); }
.ticket-foot::after { right: -25px; clip-path: inset(0 50% 0 0); }
.ticket .btn { width: 100%; }
.badge-rond { position: absolute; top: -52px; right: -20px; width: 118px; height: 118px; z-index: 3; }
.badge-rond svg { width: 100%; height: 100%; animation: tourne 14s linear infinite; }
.badge-rond .bg { fill: var(--soleil); stroke: var(--nuit); stroke-width: 3; }
.badge-rond text { font-family: var(--font); font-weight: 900; fill: var(--nuit); }
.badge-rond .fleur { position: absolute; inset: 34%; }
.annonce-note { text-align: center; margin-top: 46px; font-weight: 700; display: grid; gap: 14px; justify-items: center; }

/* ---------- Pied de page ---------- */
.pied { position: relative; background: var(--nuit); color: var(--creme); padding: 0 0 70px; overflow: hidden; margin-top: 40px; }
.pied > .frise { color: var(--rose); height: 34px; margin-bottom: 56px; }
.pied-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.pied-logo { width: min(240px, 70%); height: auto; }
.pied-slogan { width: min(230px, 70%); margin-top: 8px; }
.pied h2 { font-family: var(--main); font-weight: 400; font-size: 1.7rem; color: var(--soleil); margin-bottom: 10px; }
.pied li { margin-bottom: 6px; }
.pied a:not(.rond) { text-decoration: none; font-weight: 600; }
.pied a:not(.rond):hover { color: var(--soleil); text-decoration: underline; text-underline-offset: 4px; }
.pied .hd-soc { gap: 10px; }
.pied .hd-soc .rond { width: 44px; height: 44px; }
.pied-bas { margin-top: 44px; padding-top: 22px; border-top: 2px dashed rgba(255, 247, 239, .4); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-weight: 600; font-size: .92rem; }
.pied-lien { background: none; font-weight: 600; text-decoration: none; text-align: left; }
.pied-lien:hover { color: var(--soleil); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Page sujet ---------- */
.cat-hero { position: relative; background: var(--sc); color: var(--sct); padding: 54px 0 100px; overflow: hidden; }
.cat-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 24px; z-index: 2; background: radial-gradient(circle at 24px 24px, var(--creme) 23px, transparent 24px) 0 0 / 48px 24px repeat-x; }
.cat-hero > .frise { position: absolute; left: 0; right: 0; top: 14px; color: rgba(255, 255, 255, .28); }
.cat-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-weight: 800; font-size: .9rem; }
.fil a { text-decoration: none; background: #fff; color: var(--nuit); padding: .35em .9em; border-radius: 99px; border: 3px solid var(--nuit); }
.fil a:hover { background: var(--soleil); }
.cat-mois { display: inline-block; font-family: var(--main); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; transform: rotate(-3deg); margin-bottom: 6px; }
.cat-hero h1 { font-weight: 900; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: .93; letter-spacing: -.04em; }
.cat-acc { font-family: var(--main); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.25; margin-top: 16px; max-width: 30em; }
.cat-saison { display: inline-flex; gap: .5em; align-items: center; margin-top: 18px; background: #fff; color: var(--nuit); border: 3px solid var(--nuit); border-radius: 99px; padding: .45em 1.1em; font-weight: 700; box-shadow: 0 4px 0 var(--nuit); }
.cat-saison .fleur { width: 22px; height: 22px; flex: none; }
.rub { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.rub .pill { background: #fff; color: var(--nuit); font-size: .86rem; padding: .42em .95em; }
.rub .pill:hover { background: var(--soleil); }
.cat-visu { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; justify-self: center; }
.cat-disque { position: absolute; inset: 14%; border-radius: 50%; background: #fff; border: 5px solid var(--nuit); display: grid; place-items: center; color: var(--nuit); box-shadow: 10px 12px 0 var(--nuit); }
.cat-disque::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: var(--sc); opacity: .22; }
.cat-disque svg { width: 52%; height: 52%; position: relative; animation: respire 6s ease-in-out infinite; }
.cat-visu .pola { width: 30%; }
.cat-visu .p1 { left: -2%; top: 3%; }
.cat-visu .p2 { right: -3%; top: 8%; }
.cat-visu .p3 { left: auto; right: 6%; bottom: 0; --rot: 5deg; }

.cat-sec { padding: 80px 0 30px; position: relative; overflow: hidden; }
.cat-sec .wrap > .h2 { margin-bottom: 30px; }
.cat-sec .wrap > .h2 span { color: var(--sc); }
.card.grand { grid-column: span 2; flex-direction: row; }
.card.grand .card-img { aspect-ratio: auto; width: 48%; border-bottom: 0; border-right: 3px solid var(--nuit); flex: none; }
.card.grand h3 { font-size: 1.6rem; }
.conseils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; padding-top: 14px; }
.postit { position: relative; padding: 34px 24px 26px; border-radius: 6px 6px 6px 28px; background: var(--pc); color: var(--pt, var(--nuit)); font-weight: 700; font-size: 1.08rem; line-height: 1.4; box-shadow: 8px 10px 0 rgba(30, 42, 90, .2); rotate: var(--r, -2deg); transition: rotate .3s cubic-bezier(.3, 1.6, .5, 1), scale .3s; border: 3px solid var(--nuit); }
.postit:hover { rotate: 0deg; scale: 1.05; }
.postit .num { position: absolute; top: -20px; left: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--nuit); color: #fff; font-weight: 900; font-size: 1.2rem; display: grid; place-items: center; border: 3px solid #fff; }
.postit::after { content: ""; position: absolute; right: 26px; bottom: -22px; width: 26px; height: 26px; background: var(--pc); border-right: 3px solid var(--nuit); border-bottom: 3px solid var(--nuit); transform: skewX(-30deg) rotate(10deg); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.postit .fleur { position: absolute; right: 8px; top: 6px; width: 34px; height: 34px; opacity: .85; --fond: transparent; }
.cat-pubs { background: var(--lagon); margin-top: 70px; --prev: var(--creme); }
.cat-pubs .h2 { margin-bottom: 30px; }
.cat-pubs .manus { color: #fff; text-shadow: 2px 2px 0 var(--nuit); }
.vide-pub { text-align: center; padding: 30px; font-weight: 700; display: grid; gap: 14px; justify-items: center; background: #fff; border-radius: 28px; border: 3px dashed var(--nuit); }
.autres { padding-bottom: 20px; }
.autres .dir-pills .pill.ici { outline: 4px solid var(--soleil); outline-offset: 2px; }
.voisins { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.voisin { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 28px; border: 4px solid var(--nuit); background: var(--sc); color: var(--sct); text-decoration: none; box-shadow: 7px 7px 0 var(--nuit); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.voisin:hover { transform: translate(-3px, -4px) rotate(-1deg); }
.voisin.suiv { flex-direction: row-reverse; text-align: right; }
.voisin small { display: block; font-family: var(--main); font-size: 1.4rem; line-height: 1; }
.voisin b { font-weight: 900; font-size: 1.25rem; line-height: 1.1; }
.voisin svg { width: 40px; height: 40px; flex: none; }
.band-soc { margin-top: 70px; background: var(--soleil-pale); padding: 60px 0; position: relative; --prev: var(--creme); }
.band-soc .res-btns { grid-template-columns: repeat(3, 1fr); }
.band-soc .soc { padding: 14px 18px 14px 14px; }
.band-soc .soc-cpt { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hd-soc { display: none; }
  .hd-nav a, .hd-nav button { padding: .6em .8em; }
}
@media (max-width: 960px) {
  .hd-nav { display: none; }
  .hd-act { margin-left: auto; }
  .hd-burger { display: grid; }
  .mega { position: fixed; top: 76px; left: 10px; right: 10px; width: auto; max-height: calc(100dvh - 88px); box-shadow: 6px 6px 0 var(--nuit); }
  .mega-liens { display: flex; }
  .mega-soc { display: flex; }
  .mega-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
  .hero-grid, .mois-grid, .feat, .res-grid, .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-txt, .cat-txt { order: 1; }
  .stage, .cat-visu { order: 2; max-width: 460px; margin-top: 10px; }
  .roue-col { order: 1; }
  .fiche { order: 2; }
  .feat-txt { order: 2; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.grand { grid-column: span 2; }
  .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tickets { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; gap: 44px; }
  .ticket.vedette { transform: none; }
  .ticket.vedette:hover { transform: translateY(-6px) rotate(-1deg); }
  .conseils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-grid { grid-template-columns: 1fr 1fr; }
  .phone-zone { order: 2; }
  .band-soc .res-btns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .sec { padding: 78px 0 64px; }
  .hd-logo img { height: 40px; }
  .hero { padding: 24px 0 56px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 12px; }
  .bento > :nth-child(n) { grid-area: auto; }
  .bento > .t-L, .bento > .t-W, .bento > .tile-cta { grid-column: span 2; }
  .bento > .t-L { grid-row: span 2; }
  .cards, .conseils { grid-template-columns: minmax(0, 1fr); }
  .card.grand { grid-column: auto; flex-direction: column; }
  .card.grand .card-img { width: 100%; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 3px solid var(--nuit); }
  .lb-card { grid-template-columns: minmax(0, 1fr); padding: 16px; justify-items: center; }
  .lb-img { max-width: 100%; max-height: 56vh; }
  .lb-txt { padding-right: 0; }
  .lb-txt h2 { padding-right: 0; }
  .seg .nl { display: none; }
  .seg .nc { display: block; }
  .mois-chips { display: flex; }
  .roue-ctl .rond { width: 46px; height: 46px; }
  .fiche-ico { width: 80px; height: 80px; right: -2%; }
  .fiche-ico svg { width: 42px; height: 42px; }
  .tourne-badge { width: 92px; height: 92px; left: -2%; }
  .mur-pan { padding: 50px 12px 30px; border-radius: 28px; }
  .affiches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .affiche-nom { font-size: 1rem; }
  .pros-grid { grid-template-columns: minmax(0, 1fr); }
  .soc { padding: 12px 16px 12px 12px; gap: 12px; }
  .soc .logo { width: 50px; height: 50px; }
  .soc .logo svg { width: 28px; height: 28px; }
  .soc-n b { font-size: 1.2rem; }
  .soc-cpt { font-size: 1.25rem; }
  .pied-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pied h2.vide { display: none; }
  .pied-suite { margin-top: -22px; }
  .voisins { grid-template-columns: minmax(0, 1fr); }
  .cat-hero { padding: 38px 0 84px; }
  .ar-corps { padding: 20px 18px 24px; }
  .champ .go { padding: .7em 1em; }
  .badge-rond { width: 100px; height: 100px; right: -6px; top: -48px; }
  .so { padding-top: 4vh; }
  .so .ov-card { padding: 22px 14px 16px; }
  .so-titre { font-size: 1.55rem; }
  .feat-photo .tourne-badge { width: 96px; height: 96px; }
}
@media (max-width: 420px) {
  .champ { padding-left: 14px; gap: 6px; }
  .champ .go { padding: .7em .9em; font-size: .85rem; }
  .ch-grid { gap: 12px; }
  .ch { padding: 20px 10px 18px; }
}

/* mouvement réduit : tout reste lisible, plus rien ne bouge en continu */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .mq-track { animation: none !important; }
  .js .rv { opacity: 1; }
}