/* ==========================================================================
   Palma V4.1 — refonte épurée (octobre 2026)
   Trois couleurs seulement : jaune du logo, orange et violet.
   Fond blanc chaud, titres en couleur, tout le texte en noir, aplats rares
   (ruban jaune, carte cadeau, bouton violet, pied de page).
   Classes préfixées « p4- ». Les réinitialisations utilisent :where() pour
   ne jamais l'emporter sur une classe (pas de conflit de priorité).
   Cette feuille est chargée sur tout le site (en-tête, menu et pied V4) :
   les règles de base restent limitées à body.p4 (accueil, page d'attente).
   ========================================================================== */

@font-face { font-family: "Caveat Brush"; src: url("../fonts/caveat-brush-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-var.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  /* Trois couleurs, pas une de plus */
  --p4-violet: #3a13c6;
  --p4-violet-fonce: #2c0e96;
  --p4-orange: #ef4023;
  --p4-jaune: #fadf70;
  /* Neutres */
  --p4-fond: #fffefa;
  --p4-fond-2: #f6f3ec;
  --p4-texte: #1c1c1c;
  --p4-doux: #5a5a5a;
  --p4-trait: rgb(28 28 28 / .12);
  /* Typographie */
  --p4-titre: "Caveat Brush", "Comic Sans MS", cursive;
  --p4-fs-h1: clamp(2.9rem, 1.9rem + 4.2vw, 5.2rem);
  --p4-fs-h2: clamp(2.1rem, 1.55rem + 2.3vw, 3.25rem);
  --p4-fs-h3: clamp(1.08rem, 1rem + .3vw, 1.22rem);
  --p4-fs-lead: clamp(1.06rem, 1rem + .3vw, 1.2rem);
  --p4-fs-texte: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --p4-fs-petit: .9375rem;
  --p4-fs-note: clamp(1.3rem, 1rem + .8vw, 1.6rem);
  /* Rythme */
  --p4-max: 1160px;
  --p4-gout: 20px;
  --p4-esp: clamp(72px, 4rem + 4.5vw, 132px);
  --p4-esp-tete: clamp(28px, 1.2rem + 1.8vw, 48px);
  --p4-r: 22px;
  --p4-r-petit: 14px;
  /* Formes dessinées (masques colorés par background) */
  --p4-m-soleil: url("../img/motif-soleil.svg");
  --p4-m-vague: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6C15 0 45 0 60 6S105 12 120 6V12H0Z'/%3E%3C/svg%3E");
  --p4-m-trait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M0 5Q15 0 30 5T60 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --p4-m-souligne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C40 3 90 3 130 6s50 3 67-1' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ Bases */
:where(body.p4), :where(body.p4) *, :where(body.p4) ::before, :where(body.p4) ::after,
:where(.p4-ent, .p4-menu, .p4-pied), :where(.p4-ent, .p4-menu, .p4-pied) *, :where(.p4-ent, .p4-menu, .p4-pied) ::before, :where(.p4-ent, .p4-menu, .p4-pied) ::after { box-sizing: border-box; }
:where(body.p4) { margin: 0; background: var(--p4-fond); color: var(--p4-texte); font: 400 var(--p4-fs-texte)/1.65 Nunito, system-ui, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
:where(html:has(body.p4)) { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 84px; }
:where(body.p4) :where(img) { display: block; max-width: 100%; height: auto; }
:where(body.p4) :where(a) { color: inherit; }
:where(body.p4) :where(figure) { margin: 0; }
:where(body.p4) :where(h1, h2, h3) { margin: 0; }
:where(body.p4) :where(h1, h2) { font-family: var(--p4-titre); font-weight: 400; color: var(--p4-violet); letter-spacing: .005em; text-wrap: balance; }
:where(body.p4) :where(h2) { font-size: var(--p4-fs-h2); line-height: 1.02; }
:where(body.p4) :where(h3) { font-size: var(--p4-fs-h3); line-height: 1.3; font-weight: 800; color: var(--p4-violet); }
:where(body.p4) :where(p) { margin: 0; text-wrap: pretty; }
:where(body.p4) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(body.p4) :where(h1, h2, h3) em { font-style: normal; color: var(--p4-orange); }
/* Mot en gras dans un titre = jaune, avec une ombre violette décalée pour rester lisible sur le blanc */
:where(body.p4) :where(h1, h2, h3) strong { font-weight: inherit; color: var(--p4-jaune); text-shadow: .05em .05em 0 var(--p4-violet); }
:where(body.p4) :where(strong, b) { font-weight: 800; }

.p4-conteneur { width: min(100% - 2 * var(--p4-gout) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px), var(--p4-max)); margin-inline: auto; position: relative; }
.p4-section { padding-block: calc(var(--p4-esp) / 2); }
.p4-sur { display: inline-flex; align-items: center; gap: 8px; font: 800 .8125rem/1.25 Nunito, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--p4-texte); margin-bottom: 14px; }
.p4-sur::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--p4-orange); -webkit-mask: var(--p4-m-soleil) center / contain no-repeat; mask: var(--p4-m-soleil) center / contain no-repeat; }
.p4-chapeau { font-size: var(--p4-fs-lead); line-height: 1.6; max-width: 46ch; margin-top: 16px; color: var(--p4-texte); }
.p4-centre { text-align: center; }
.p4-centre .p4-chapeau { margin-inline: auto; }
.p4-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 40px; margin-bottom: var(--p4-esp-tete); }
.p4-tete .p4-chapeau { margin-top: 0; }
.p4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* Lien d'évitement, visible au clavier */
.p4-evitement:focus-visible { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 12px; z-index: 200; width: auto; height: auto; overflow: visible; clip-path: none; padding: 12px 20px; border-radius: 999px; background: var(--p4-violet); color: #fff; font: 800 1rem Nunito, sans-serif; text-decoration: none; outline: 3px solid var(--p4-orange); outline-offset: 2px; }

/* Un seul bouton plein et un seul style de lien */
.p4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; max-width: 100%; padding: 0 30px; border: 0; border-radius: 999px; background: var(--p4-violet); color: #fff; font: 800 1rem/1.15 Nunito, sans-serif; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s, transform .2s, opacity .25s, visibility .25s; }
.p4-btn:hover { background: var(--p4-violet-fonce); transform: translateY(-1px); }
.p4-btn:active { transform: none; }
.p4-btn--petit { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.p4-lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; color: var(--p4-violet); text-decoration: none; }
.p4-lien > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: rgb(58 19 198 / .3); transition: text-decoration-color .2s; }
.p4-lien::after { content: "→"; display: inline-block; transition: transform .2s; }
.p4-lien:hover > span { text-decoration-color: currentColor; }
.p4-lien:hover::after { transform: translateX(3px); }
:where(.p4-btn, .p4-lien, .p4-nav a, .p4-burger, .p4-ent__logo, .p4-menu a, .p4-menu__fermer, .p4-faq summary, .p4-groupe a, .p4-pause):focus-visible { outline: 3px solid var(--p4-violet); outline-offset: 3px; border-radius: 8px; }
/* Pastilles : petite liste manuscrite ponctuée de soleils, sans cadre ni allure de bouton */
.p4-pastilles { display: grid; grid-template-columns: repeat(2, max-content); align-items: center; gap: 6px 34px; }
.p4-pastille { display: inline-flex; align-items: center; gap: 9px; font-family: var(--p4-titre); font-size: clamp(1.3rem, 1.15rem + .4vw, 1.5rem); line-height: 1.2; color: var(--p4-texte); }
.p4-pastille::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--p4-orange); -webkit-mask: var(--p4-m-soleil) center / contain no-repeat; mask: var(--p4-m-soleil) center / contain no-repeat; }

/* Motifs du logo */
.p4-motif { display: inline-block; pointer-events: none; line-height: 0; }
.p4-motif svg { display: block; width: 100%; height: auto; }
@keyframes p4-tourne { to { transform: rotate(360deg); } }
@keyframes p4-defile { to { transform: translateX(-50%); } }
.p4-tourne svg { animation: p4-tourne 80s linear infinite; }

/* Apparitions au défilement (classe .est-vu posée par v4.js) */
.js .p4-app { opacity: 0; transform: translateY(14px); }
.p4-app.est-vu { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); transition-delay: var(--d, 0ms); }
/* Héros : rien n'attend le JavaScript (LCP plus rapide) ; seul un léger mouvement d'entrée */
.js .p4-heros .p4-app { opacity: 1; transform: none; }
@keyframes p4-monte { from { transform: translateY(12px); } }
.p4-heros__texte-bloc > * { animation: p4-monte .6s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d, 0ms); }
/* Si v4.js ne se charge pas, tout redevient visible au bout de 4,5 s (classe posée dans header.php) */
.p4-secours .p4-app, .p4-secours .p4-collage * { opacity: 1 !important; transform: none !important; scale: 1 !important; clip-path: none !important; stroke-dashoffset: 0 !important; }

/* ------------------------------------------------------------ En-tête */
.p4-ent { position: sticky; top: 0; z-index: 60; background: rgb(255 254 250 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--p4-trait); font-family: Nunito, system-ui, sans-serif; }
.p4-ent__barre { display: flex; align-items: center; gap: 22px; min-height: 76px; padding-top: env(safe-area-inset-top); }
.p4-ent__logo { display: block; flex: none; padding-block: 4px; }
.p4-ent__logo img { display: block; width: 150px; height: auto; }
.p4-nav { display: flex; gap: 2px; margin-left: auto; }
.p4-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 700; font-size: .96rem; padding: 0 12px; border-radius: 10px; color: var(--p4-texte); position: relative; }
.p4-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--p4-orange); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.p4-nav a:hover::after, .p4-nav a[aria-current="page"]::after { transform: scaleX(1); }
.p4-ent__cta { flex: none; }
@media (hover: none) { .p4-ent { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 254 250 / .97); } }
/* Accueil : le bouton de l'en-tête n'apparaît qu'une fois celui du héros dépassé */
.js .p4-avec-heros:not(.p4-heros-passe) .p4-ent__cta { opacity: 0; visibility: hidden; pointer-events: none; }
.p4-burger { display: none; flex: none; align-items: center; justify-content: center; gap: 10px; min-width: 44px; height: 44px; padding: 0 8px 0 12px; border: 0; background: transparent; font: 800 .95rem Nunito, sans-serif; color: var(--p4-texte); cursor: pointer; border-radius: 10px; }
.p4-burger__traits { position: relative; width: 22px; height: 14px; }
.p4-burger__traits::before, .p4-burger__traits::after { content: ""; position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: currentColor; }
.p4-burger__traits::before { top: 0; } .p4-burger__traits::after { bottom: 0; }

@media (max-width: 1020px) {
  .p4-nav { display: none; }
  .p4-burger { display: inline-flex; }
  .p4-ent__cta { margin-left: auto; }
  .p4-ent__barre { gap: 10px; min-height: 66px; }
  .p4-ent__logo img { width: 124px; }
}
@media (max-width: 380px) {
  .p4-ent__logo { padding-block: 6px; }
  .p4-ent__logo img { width: 112px; }
  .p4-burger__mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .p4-burger { padding: 0 11px; }
  .p4-ent__cta { padding: 0 16px; }
}

/* Menu mobile plein écran */
.p4-menu { position: fixed; inset: 0; z-index: 100; background: var(--p4-fond); color: var(--p4-texte); font-family: Nunito, system-ui, sans-serif; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
.p4-menu.est-ouvert { visibility: visible; opacity: 1; transition: opacity .25s ease; }
.p4-menu ul { margin: 0; padding: 0; list-style: none; }
.p4-menu__haut { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.p4-menu__haut img { display: block; width: 124px; height: auto; }
.p4-menu__fermer { width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--p4-fond-2); color: var(--p4-texte); cursor: pointer; position: relative; }
.p4-menu__fermer::before, .p4-menu__fermer::after { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: currentColor; }
.p4-menu__fermer::before { transform: rotate(45deg); } .p4-menu__fermer::after { transform: rotate(-45deg); }
.p4-menu > nav { flex: 1 0 auto; }
.p4-menu__liens { margin: 18px 0 0; }
.p4-menu__liens a { display: flex; align-items: center; justify-content: space-between; min-height: 60px; text-decoration: none; color: inherit; font-weight: 800; font-size: clamp(1.3rem, 5.4vw, 1.6rem); border-bottom: 1px solid var(--p4-trait); opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease, color .2s; }
.p4-menu__liens a::after { content: "→"; color: var(--p4-orange); font-size: 1.1rem; }
.p4-menu__liens a[aria-current="page"] { color: var(--p4-violet); }
.p4-menu.est-ouvert .p4-menu__liens a { opacity: 1; transform: none; }
.p4-menu.est-ouvert .p4-menu__liens li:nth-child(2) a { transition-delay: .04s; }
.p4-menu.est-ouvert .p4-menu__liens li:nth-child(3) a { transition-delay: .08s; }
.p4-menu.est-ouvert .p4-menu__liens li:nth-child(4) a { transition-delay: .12s; }
.p4-menu.est-ouvert .p4-menu__liens li:nth-child(5) a { transition-delay: .16s; }
.p4-menu.est-ouvert .p4-menu__liens li:nth-child(6) a { transition-delay: .2s; }
.p4-menu.est-ouvert .p4-menu__liens li:nth-child(7) a { transition-delay: .24s; }
.p4-menu__bas { padding-top: 26px; }
.p4-menu__bas .p4-btn { width: 100%; }
.p4-menu__infos { margin: 18px 0 0; font-size: .95rem; line-height: 1.55; color: var(--p4-texte); }
.p4-menu__adresse { color: inherit; text-decoration: underline; text-decoration-color: rgb(28 28 28 / .3); text-underline-offset: 3px; }
.p4-insecable { white-space: nowrap; }
body.p4-menu-ouvert, html:has(body.p4-menu-ouvert) { overflow: hidden; }
@media (min-width: 1021px) { .p4-menu { display: none; } }

/* ------------------------------------------------------------ Héros */
.p4-heros { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); overflow: clip; }
.p4-heros__grille { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.p4-heros h1 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.p4-heros h1 .p4-sur { margin: 0; }
.p4-heros__slogan { font-size: var(--p4-fs-h1); line-height: .95; }
.p4-heros__slogan em { display: block; }
.p4-heros__texte { font-size: var(--p4-fs-lead); line-height: 1.6; max-width: 36ch; margin: 22px 0 30px; color: var(--p4-texte); }
.p4-heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.p4-infos { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 30px; font-size: 1rem; font-weight: 700; }
.p4-infos li { display: inline-flex; align-items: center; gap: 9px; }
.p4-infos li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--p4-orange); }
@media (max-width: 880px) {
  .p4-heros__grille { grid-template-columns: 1fr; }
  .p4-heros__visuel { width: min(100%, 560px); margin-inline: auto; }
}
@media (max-width: 520px) {
  .p4-heros__actions .p4-btn { width: 100%; }
  .p4-heros__actions { justify-content: center; }
}

/* ------------------------------------------------------------ Collage (référence cliente) */
.p4-collage { position: relative; padding-bottom: 19%; isolation: isolate; }
.p4-collage figure { margin: 0; overflow: hidden; background: var(--p4-fond-2); }
.p4 .p4-collage img { width: 100%; height: 100%; object-fit: cover; }
.p4-collage__grande { width: 74%; aspect-ratio: 4 / 3.1; border-radius: 0; box-shadow: 0 20px 34px -26px rgb(28 28 28 / .45); }
/* Petite photo façon polaroïd : coins droits, cadre blanc plus large en bas */
.p4-collage__petite { position: absolute; z-index: 2; right: 0; bottom: 0; width: 43%; padding: 3.4% 3.4% 13%; border: 0; border-radius: 0; background: #fff; rotate: 3deg; box-shadow: 0 2px 4px rgb(28 28 28 / .08), 0 22px 34px -20px rgb(28 28 28 / .45); }
.p4 .p4-collage__petite img { aspect-ratio: 1 / 1; height: auto; border-radius: 0; }
.p4-collage figure.p4-collage__petite { background: #fff; }
.p4-collage__note { position: absolute; z-index: 3; top: 2%; right: 0; width: 24%; font-family: var(--p4-titre); font-size: var(--p4-fs-note); line-height: 1.08; color: var(--p4-texte); rotate: -4deg; }
.p4-collage__coeur { display: block; width: 22px; margin: 8px 6px 0 auto; color: var(--p4-orange); }
.p4-collage__coeur svg { display: block; width: 100%; height: auto; }
.p4-collage__gribouillis { position: absolute; z-index: 3; left: -3%; bottom: 6%; width: 22%; height: auto; color: var(--p4-orange); pointer-events: none; }
.p4-collage__soleil { position: absolute; z-index: 3; left: 36%; bottom: 0; width: 13%; color: var(--p4-jaune); }
.p4-collage__bol { position: absolute; z-index: 3; left: 3%; top: -4%; width: 15%; color: var(--p4-orange); }
/* Variante miroir (café) : grande à droite, petite à gauche, sans phrase */
.p4-collage--miroir .p4-collage__grande { margin-left: auto; }
.p4-collage--miroir .p4-collage__petite { right: auto; left: 0; rotate: -3deg; }
.p4-collage--miroir .p4-collage__soleil { left: auto; right: 34%; }
.p4-collage--miroir .p4-collage__bol { left: auto; right: 2%; top: -6%; }
@media (max-width: 600px) {
  .p4-collage { padding-bottom: 34%; }
  .p4-collage__grande { width: 88%; }
  .p4-collage__petite { width: 54%; border-width: 5px; }
  .p4-collage__note { top: auto; right: auto; left: 1%; bottom: 1%; width: 40%; rotate: -3deg; font-size: 1.3rem; }
  .p4-collage__coeur { margin: 6px 0 0 60%; width: 20px; }
  .p4-collage__soleil { left: auto; right: 0; top: -5%; bottom: auto; width: 17%; }
  .p4-collage__gribouillis { left: -2%; top: -5%; bottom: auto; width: 18%; }
  .p4-collage--miroir .p4-collage__grande { width: 88%; }
  .p4-collage--miroir .p4-collage__soleil { right: auto; left: 60%; top: auto; bottom: 4%; width: 15%; }
  .p4-collage--miroir .p4-collage__bol { top: -4%; left: 1%; right: auto; width: 17%; }
}
/* Chorégraphie d'entrée, une seule fois (.est-vu) ; sans JavaScript tout est visible */
.js .p4-collage.p4-app { opacity: 1; transform: none; }
.js .p4-collage .p4-collage__grande { opacity: 0; transform: translateY(16px); }
.js .p4-heros .p4-collage .p4-collage__grande { opacity: 1; transform: none; }
.js .p4-collage .p4-collage__petite { opacity: 0; transform: translate(14px, 22px) rotate(-3deg); }
.js .p4-collage--miroir .p4-collage__petite { transform: translate(-14px, 22px) rotate(3deg); }
.js .p4-collage .p4-collage__note { clip-path: inset(0 100% 0 0); }
.js .p4-collage .p4-collage__soleil, .js .p4-collage .p4-collage__bol { opacity: 0; scale: .6; }
.p4-collage__gribouillis path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .p4-collage .p4-collage__gribouillis path { stroke-dashoffset: 1; }
.p4-collage.est-vu .p4-collage__grande { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.p4-collage.est-vu .p4-collage__petite { opacity: 1; transform: none; transition: opacity .7s ease .25s, transform .9s cubic-bezier(.2,.8,.25,1.15) .25s; }
.p4-collage.est-vu .p4-collage__note { clip-path: inset(-10% -10% -10% -10%); transition: clip-path 1.1s steps(28, end) .7s; }
.p4-collage.est-vu .p4-collage__gribouillis path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease-in-out .9s; }
.p4-collage.est-vu .p4-collage__soleil, .p4-collage.est-vu .p4-collage__bol { opacity: 1; scale: 1; transition: opacity .4s ease 1.1s, scale .6s cubic-bezier(.3,1.6,.5,1) 1.1s; }
@keyframes p4-bat { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } 60% { transform: scale(.95); } }
.p4-collage.est-vu .p4-collage__coeur svg { animation: p4-bat .9s ease 1.9s 2; transform-origin: 50% 60%; }

/* ------------------------------------------------------------ Ruban droit, bords ondulés */
.p4-ruban-zone { position: relative; margin-block: 12px; }
.p4-ruban { position: relative; background: var(--p4-jaune); padding: 8px 0; overflow: visible; }
.p4-ruban::before, .p4-ruban::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--p4-jaune); -webkit-mask: var(--p4-m-vague) 0 0 / 120px 100% repeat-x; mask: var(--p4-m-vague) 0 0 / 120px 100% repeat-x; }
.p4-ruban::before { bottom: calc(100% - 1px); }
.p4-ruban::after { top: calc(100% - 1px); transform: scaleY(-1); }
.p4-ruban__fenetre { overflow: hidden; }
.p4-ruban__piste { display: flex; width: max-content; animation: p4-defile 48s linear infinite; }
.p4-ruban__piste > span { display: inline-flex; align-items: center; gap: 20px; padding-right: 20px; min-height: 52px; font-family: var(--p4-titre); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); color: var(--p4-texte); white-space: nowrap; }
.p4-ruban .p4-motif { width: 18px; color: var(--p4-orange); }
.p4-ruban__piece { display: inline-flex; flex: none; font-style: normal; }
.p4 .p4-ruban__piece img { height: 46px; width: auto; max-width: none; filter: drop-shadow(0 4px 5px rgb(28 28 28 / .14)); }
@media (hover: hover) { .p4-ruban-zone:hover .p4-ruban__piste { animation-play-state: paused; } }
.p4-pause { position: absolute; z-index: 2; right: calc(10px + env(safe-area-inset-right, 0px)); top: 50%; translate: 0 -50%; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--p4-fond); color: var(--p4-texte); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px -6px rgb(28 28 28 / .35); }
.p4-pause::before { content: ""; box-sizing: border-box; width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.p4-pause[aria-pressed="true"]::before { width: 0; height: 0; border-inline: 0; border-left: 12px solid currentColor; border-block: 7px solid transparent; margin-left: 3px; }
html.p4-sans-anim .p4-ruban__piste, html.p4-sans-anim .p4-tourne svg,
.p4-hors-champ .p4-ruban__piste, .p4-tourne.p4-hors-champ svg { animation-play-state: paused; }

/* ------------------------------------------------------------ C'est quoi */
.p4-intro { max-width: 60ch; margin-inline: auto; text-align: center; }
.p4-intro .p4-chapeau { margin-inline: auto; max-width: 52ch; }
.p4-accroche { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 30px 0 0; font-family: var(--p4-titre); line-height: 1.05; }
.p4-accroche strong { position: relative; isolation: isolate; font-weight: 400; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); color: var(--p4-orange); padding-bottom: 12px; }
.p4-accroche strong::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -2px; height: 13px; background: var(--p4-jaune); -webkit-mask: var(--p4-m-souligne) center / 100% 100% no-repeat; mask: var(--p4-m-souligne) center / 100% 100% no-repeat; }
.p4-accroche span { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); color: var(--p4-texte); margin-top: 6px; }

/* ------------------------------------------------------------ Étapes */
.p4-etapes { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); padding-top: 30px; }
.p4-etapes::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--p4-orange); opacity: .9; -webkit-mask: var(--p4-m-trait) 0 50% / 60px 10px repeat-x; mask: var(--p4-m-trait) 0 50% / 60px 10px repeat-x; }
.p4-etape__num { display: block; font-family: var(--p4-titre); font-size: 2.8rem; line-height: 1; color: var(--p4-orange); margin-bottom: 10px; }
.p4-etape h3 { margin-bottom: 6px; }
.p4-etape p { font-size: 1rem; line-height: 1.55; color: var(--p4-texte); }
.p4-etapes__suite { margin-top: var(--p4-esp-tete); }
@media (max-width: 1000px) {
  .p4-etapes { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 34px; }
  .p4-etape { grid-column: span 2; }
  .p4-etape:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 680px) {
  .p4-etapes { grid-template-columns: 1fr 1fr; }
  .p4-etape, .p4-etape:nth-child(4) { grid-column: auto; }
}
@media (max-width: 560px) {
  .p4-etapes { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .p4-etapes::before { display: none; }
  .p4-etape { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--p4-trait); }
  .p4-etape:last-child { border-bottom: 1px solid var(--p4-trait); }
  .p4-etape__num { grid-row: span 2; margin: 0; font-size: 2.2rem; }
}

/* ------------------------------------------------------------ Nos pièces (bande défilante des céramiques) */
.p4-bande { position: relative; overflow: hidden; border-radius: var(--p4-r); background: var(--p4-fond-2); }
.p4-bande__piste { display: flex; width: max-content; animation: p4-defile 50s linear infinite; }
.p4-bande__piste ul { display: flex; align-items: flex-end; gap: clamp(36px, 5vw, 72px); margin: 0; padding: 26px clamp(18px, 2.5vw, 36px) 22px; list-style: none; }
.p4-bande__piste li { flex: none; }
.p4 .p4-bande__piste img { height: clamp(80px, 9vw, 120px); width: auto; max-width: none; filter: drop-shadow(0 10px 12px rgb(28 28 28 / .13)); }
@media (hover: hover) { .p4-bande:hover .p4-bande__piste { animation-play-state: paused; } }
html.p4-sans-anim .p4-bande__piste, .p4-bande.p4-hors-champ .p4-bande__piste { animation-play-state: paused; }
.p4-pieces__note { margin-top: 14px; font-size: var(--p4-fs-petit); color: var(--p4-texte); }

/* ------------------------------------------------------------ Café (collage miroir + texte) */
.p4-duo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.p4-duo .p4-chapeau { margin-bottom: 22px; }
.p4-duo .p4-pastilles { margin-bottom: 22px; }
@media (max-width: 860px) {
  .p4-duo { grid-template-columns: 1fr; }
  .p4-duo > :first-child { order: 2; width: min(100%, 560px); margin-inline: auto; }
}

/* ------------------------------------------------------------ Groupes + carte cadeau */
.p4-occasions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); align-items: center; }
.p4-groupes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 40px); align-items: start; }
.p4-groupe:nth-child(2) { margin-top: clamp(0px, 4.5vw, 60px); }
.p4-groupe a { display: block; text-decoration: none; color: inherit; border-radius: var(--p4-r); }
.p4-groupe__photo { display: block; overflow: hidden; border-radius: var(--p4-r); background: var(--p4-fond-2); }
.p4 .p4-groupe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.p4-groupe a:hover img { transform: scale(1.03); }
.p4-groupe h3 { margin: 16px 0 4px; }
.p4-groupe a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.p4-groupe p { color: var(--p4-texte); }
.p4-cadeau { position: relative; isolation: isolate; padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 34px); background: var(--p4-jaune); border-radius: var(--p4-r); rotate: -1.5deg; }
.p4-cadeau h3 { position: relative; z-index: 1; font-family: var(--p4-titre); font-weight: 400; font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem); line-height: 1.05; color: var(--p4-violet); padding-right: 24px; }
.p4-cadeau p { position: relative; z-index: 1; margin-top: 8px; color: var(--p4-texte); }
.p4-cadeau .p4-lien { position: relative; z-index: 1; margin-top: 10px; color: var(--p4-violet); }
.p4-cadeau__soleil { position: absolute; z-index: 0; width: 60px; right: -16px; top: -24px; color: var(--p4-orange); }
@media (max-width: 1020px) {
  .p4-occasions { grid-template-columns: 1fr; }
  .p4-cadeau { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 28px; max-width: 760px; width: 100%; margin-inline: auto; rotate: -1deg; }
  .p4-cadeau h3, .p4-cadeau p { grid-column: 1; }
  .p4-cadeau .p4-lien { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .p4-cadeau__soleil { right: -4px; }
}
@media (max-width: 680px) {
  .p4-groupes { grid-template-columns: 1fr; }
  .p4-groupe:nth-child(2) { margin-top: 0; }
  .p4-cadeau { display: block; rotate: 0deg; }
  .p4-cadeau .p4-lien { margin-top: 10px; }
  .p4-cadeau__soleil { width: 52px; right: -6px; top: -20px; }
}

/* ------------------------------------------------------------ Nous trouver */
.p4-pratique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 72px); align-items: center; }
.p4-adresse { margin-top: 18px; font-size: 1.12rem; font-weight: 800; line-height: 1.45; color: var(--p4-texte); }
.p4-repere { margin-top: 8px; max-width: 46ch; color: var(--p4-texte); }
.p4-horaires { margin-top: 24px; }
.p4-horaires li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--p4-trait); }
.p4-horaires li:first-child { border-top: 1px solid var(--p4-trait); }
.p4-horaires li.est-ferme { color: var(--p4-doux); }
.p4-horaires li.est-aujourdhui span::after { content: "aujourd’hui"; margin-left: 10px; font-family: var(--p4-titre); font-size: 1.2rem; line-height: 1; color: var(--p4-violet); }
.p4-pratique .p4-lien { margin-top: 18px; }
.p4-plan { position: relative; aspect-ratio: 4 / 3.2; border-radius: var(--p4-r); overflow: hidden; background: var(--p4-fond-2); }
.p4-plan__lien, .p4-plan__lien img { position: absolute; inset: 0; width: 100%; height: 100%; }
.p4 .p4-plan__lien img { object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(1.04); transition: filter .3s; }
.p4-plan__lien:hover img { filter: grayscale(.6) contrast(1.05) brightness(1.04); }
.p4-plan__lien:focus-visible { outline: 3px solid var(--p4-violet); outline-offset: 3px; }
.p4-plan__credit { position: absolute; right: 8px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / .88); font-size: .75rem; line-height: 1.5; color: var(--p4-texte); pointer-events: none; }
/* Pin de localisation : sa pointe est posée exactement au centre du plan (l'adresse) */
.p4-plan__pin { position: absolute; left: 50%; top: 50%; width: 38px; translate: -50% -100%; color: var(--p4-orange); filter: drop-shadow(0 5px 5px rgb(28 28 28 / .35)); pointer-events: none; }
.p4-plan__pin svg { display: block; width: 100%; height: auto; }
.p4-plan__pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 16px; height: 6px; translate: -50% -50%; border-radius: 50%; background: rgb(28 28 28 / .25); z-index: -1; }
@media (max-width: 820px) { .p4-pratique { grid-template-columns: 1fr; } .p4-plan { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------ FAQ */
.p4-faq { max-width: 760px; margin-inline: auto; }
.p4-faq h2 { text-align: center; margin-bottom: var(--p4-esp-tete); }
.p4-faq details { border-bottom: 1px solid var(--p4-trait); }
.p4-faq details:first-of-type { border-top: 1px solid var(--p4-trait); }
.p4-faq summary { list-style: none; cursor: pointer; min-height: 56px; padding: 18px 48px 18px 0; font-weight: 800; position: relative; }
.p4-faq summary::-webkit-details-marker { display: none; }
.p4-faq summary::before, .p4-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 2.5px; margin-top: -1px; border-radius: 2px; background: var(--p4-violet); transition: transform .25s; }
.p4-faq summary::after { transform: rotate(90deg); }
.p4-faq details[open] summary::after { transform: rotate(0deg); }
.p4-faq details > div { padding: 0 48px 22px 0; color: var(--p4-texte); max-width: 62ch; }

/* ------------------------------------------------------------ Appel final */
.p4-final { text-align: center; padding-bottom: var(--p4-esp); }
.p4-final__soleil { display: block; width: 84px; margin: 0 auto 16px; color: var(--p4-jaune); }
.p4-final h2 { font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.2rem); }
.p4-final .p4-chapeau { margin: 14px auto 30px; }

/* ------------------------------------------------------------ Pied de page */
.p4-pied { position: relative; background: var(--p4-violet); color: rgb(255 255 255 / .86); padding: clamp(48px, 6vw, 72px) 0 calc(28px + env(safe-area-inset-bottom)); font: 400 1rem/1.6 Nunito, system-ui, sans-serif; margin-top: 12px; }
.p4-pied::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 12px; background: var(--p4-violet); -webkit-mask: var(--p4-m-vague) 0 0 / 160px 100% repeat-x; mask: var(--p4-m-vague) 0 0 / 160px 100% repeat-x; }
.p4-pied ul { margin: 0; padding: 0; list-style: none; }
.p4-pied p { margin: 0; }
.p4-pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.p4-pied__logo { display: block; width: 170px; height: auto; margin-bottom: 16px; }
.p4-pied h2 { font-family: Nunito, sans-serif; font-size: .8125rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--p4-jaune); margin: 0 0 14px; }
.p4-pied li + li { margin-top: 8px; }
.p4-pied a { color: inherit; text-decoration: none; }
.p4-pied a:hover { color: #fff; text-decoration: underline; }
.p4-pied p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.p4-pied :focus-visible { outline: 3px solid var(--p4-jaune); outline-offset: 3px; border-radius: 4px; }
.p4-reseaux { display: flex; gap: 0; margin: 14px 0 0 -11px; }
.p4-reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; }
.p4-reseaux svg, .p4-reseaux .icone { width: 22px; height: 22px; }
.p4-pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 42px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .18); font-size: .9375rem; color: rgb(255 255 255 / .74); }
.p4-pied__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.p4-pied .p4-pied__legal li + li { margin-top: 0; }
@media (max-width: 1020px) {
  .p4-pied ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .p4-pied li + li { margin-top: 0; }
}
@media (max-width: 860px) { .p4-pied__grille { grid-template-columns: 1fr 1fr; } .p4-pied__grille > :first-child { grid-column: 1 / -1; } }
@media (max-width: 340px) { .p4-pied__grille { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Bandeau cookies */
body.p4 .cookieadmin_law_container.cookieadmin_law_container { z-index: 80; width: min(400px, calc(100% - 32px)); left: 16px; right: auto; bottom: 16px; top: auto; font-family: Nunito, system-ui, sans-serif; }
body.p4 .cookieadmin_law_container .cookieadmin_consent_inside { padding: 18px; border: 1px solid var(--p4-trait) !important; border-radius: 20px; background-color: #fff !important; color: var(--p4-texte); box-shadow: 0 18px 40px -18px rgb(28 28 28 / .35); }
body.p4 .cookieadmin_law_container #cookieadmin_notice_title { margin: 0 0 6px; padding: 0; font-family: var(--p4-titre); font-size: 1.35rem; line-height: 1.1; font-weight: 400; color: var(--p4-violet) !important; }
body.p4 .cookieadmin_law_container .cookieadmin_notice_con { padding: 0; }
body.p4 .cookieadmin_law_container #cookieadmin_notice { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--p4-texte) !important; }
body.p4 .cookieadmin_law_container .cookieadmin_consent_btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
body.p4 .cookieadmin_law_container button.cookieadmin_btn,
body.p4 .cookieadmin_cookie_modal button.cookieadmin_btn { width: 100%; min-height: 44px; margin: 0; padding: .5em 1em; border: 1.5px solid transparent; border-radius: 999px; font: 800 .92rem/1.15 Nunito, sans-serif; cursor: pointer; opacity: 1; }
body.p4 .cookieadmin_law_container button.cookieadmin_accept_btn,
body.p4 .cookieadmin_cookie_modal button.cookieadmin_accept_btn { order: 2; background-color: var(--p4-violet) !important; color: #fff !important; }
body.p4 .cookieadmin_law_container button.cookieadmin_reject_btn,
body.p4 .cookieadmin_cookie_modal button.cookieadmin_reject_btn { order: 1; border-color: var(--p4-trait); background-color: transparent !important; color: var(--p4-texte) !important; }
body.p4 .cookieadmin_law_container button.cookieadmin_customize_btn { order: 3; grid-column: 1 / -1; min-height: 44px; background-color: transparent !important; color: var(--p4-violet) !important; text-decoration: underline; text-underline-offset: .3em; }
body.p4 .cookieadmin_cookie_modal button.cookieadmin_save_btn { background-color: var(--p4-violet) !important; color: #fff !important; }
@media (min-width: 481px) {
  body.p4 .cookieadmin_law_container.cookieadmin_law_container { left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  body.p4 .cookieadmin_law_container.cookieadmin_law_container { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; }
  body.p4 .cookieadmin_law_container .cookieadmin_consent_inside { padding: 14px 16px; }
  body.p4 .cookieadmin_law_container #cookieadmin_notice_title { font-size: 1.2rem; margin-bottom: 4px; }
  body.p4 .cookieadmin_law_container .cookieadmin_consent_btns { margin-top: 10px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body.p4 .cookieadmin_law_container.cookieadmin_law_container { left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; }
  body.p4 .cookieadmin_law_container .cookieadmin_consent_inside { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; padding: 10px 14px 10px 18px; }
  body.p4 .cookieadmin_law_container #cookieadmin_notice_title { display: none; }
  body.p4 .cookieadmin_law_container #cookieadmin_notice { font-size: .875rem; line-height: 1.4; }
  body.p4 .cookieadmin_law_container .cookieadmin_consent_btns { grid-template-columns: repeat(3, auto); margin-top: 0; }
  body.p4 .cookieadmin_law_container button.cookieadmin_customize_btn { grid-column: auto; order: 0; }
}

/* ==========================================================================
   Page d'attente (« ouverture prochaine ») : logo, une phrase, un e-mail
   ========================================================================== */
.p4-attente { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(32px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom)); text-align: center; }
.p4-attente__bloc { width: min(100%, 620px); display: flex; flex-direction: column; align-items: center; }
.p4-attente__logo { width: min(360px, 68vw); }
.p4-attente__phrase { margin-top: clamp(24px, 4vw, 34px); font-family: var(--p4-titre); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.7rem); font-weight: 400; line-height: 1.08; color: var(--p4-violet); max-width: 20ch; text-wrap: balance; }
.p4-attente__crea { display: block; width: 74px; height: auto; margin: 14px auto 0; color: var(--p4-orange); }
.p4-attente__crea path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .p4-attente__crea path { animation: p4-trace 1.4s ease-in-out .5s both; }
@keyframes p4-trace { from { stroke-dashoffset: 1; } }
.p4-attente__suivre { margin-top: 30px; font-weight: 700; color: var(--p4-texte); }
.p4-attente__form { display: flex; gap: 10px; width: min(100%, 480px); margin-top: 28px; }
.p4-attente__form input[type="email"] { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 22px; border: 1.5px solid var(--p4-trait); border-radius: 999px; background: #fff; font: 600 1rem Nunito, system-ui, sans-serif; color: var(--p4-texte); }
.p4-attente__form input[type="email"]:focus-visible { outline: none; border-color: var(--p4-violet); box-shadow: 0 0 0 3px rgb(58 19 198 / .15); }
.p4-attente__form .p4-btn { flex: none; min-height: 52px; }
.p4-attente__etat { margin-top: 22px; font-weight: 800; color: var(--p4-violet); }
.p4-attente__etat.est-erreur { color: var(--p4-texte); }
.p4-attente__mention { margin-top: 14px; font-size: .8125rem; color: var(--p4-doux); max-width: 42ch; }
.p4-attente__reseaux { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.p4-attente__reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--p4-orange); transition: color .2s, transform .2s; }
.p4-attente__reseaux a:hover { color: var(--p4-violet); transform: translateY(-2px); }
.p4-attente__reseaux svg, .p4-attente__reseaux .icone { width: 26px; height: 26px; }
.p4-attente__legal { margin-top: 30px; font-size: .8125rem; color: var(--p4-doux); }
.p4-attente__legal a { color: inherit; }
@media (max-width: 480px) {
  .p4-attente__form { flex-direction: column; }
  .p4-attente__form .p4-btn { width: 100%; }
}

/* ------------------------------------------------------------ Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html:has(body.p4) { scroll-behavior: auto; }
  .js .p4-app, .p4-app, .js .p4-collage *, .p4-collage * { opacity: 1 !important; transform: none !important; scale: 1 !important; clip-path: none !important; transition: none !important; animation: none !important; stroke-dashoffset: 0 !important; }
  .p4-tourne svg, .p4-ruban__piste, .p4-bande__piste, .p4-attente__crea path { animation: none !important; }
  .p4-pause { display: none; }
  .p4-menu, .p4-menu__liens a { transition: none !important; }
}

/* ==========================================================================
   Palma V4.2 — composition mobile centrée (320 → 600 px, héros jusqu'à 699 px)
   Aucune règle hors media query : l'ordinateur n'est pas touché. Trois couleurs, titres en couleur, textes en noir.
   ========================================================================== */

/* ---------------------------------------------------------------- Héros centré
   Une colonne sous 700 px : tout le bloc texte est centré (surtitre, slogan,
   texte, bouton, lien, infos), le collage vient dessous. */
@media (max-width: 699px) {
  .p4-heros__texte-bloc { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .p4-heros h1 { align-items: center; }
  .p4-heros__texte { margin-inline: auto; }
  .p4-heros__actions { justify-content: center; }
  /* Infos sans puces : des puces sur des lignes centrées de longueurs inégales
     paraissent décalées ; un petit trait ondulé orange les annonce. */
  .p4-infos { position: relative; flex-direction: column; align-items: center; gap: 2px; padding-top: 22px; line-height: 1.55; }
  .p4-infos::before { content: ""; position: absolute; top: 0; left: 50%; width: 44px; height: 10px; translate: -50% 0; background: var(--p4-orange); -webkit-mask: var(--p4-m-trait) 0 50% / 44px 10px no-repeat; mask: var(--p4-m-trait) 0 50% / 44px 10px no-repeat; }
  .p4-infos li::before { display: none; }
}

@media (max-width: 600px) {
  .p4-heros { padding: 26px 0 40px; }
  .p4-heros__grille { gap: 34px; }

  /* Surtitre : une seule ligne dès 360 px, puce soleil conservée */
  .p4-heros h1 { gap: 12px; }
  .p4-heros h1 .p4-sur { font-size: .78rem; letter-spacing: .1em; gap: 7px; text-wrap: balance; justify-content: center; }
  .p4-heros h1 .p4-sur::before { width: 14px; height: 14px; }

  /* Slogan sur 3 lignes, plus grand : c'est l'image de marque du héros */
  .p4-heros__slogan { font-size: clamp(3.1rem, 15.5vw, 4.25rem); line-height: .9; }

  .p4-heros__texte { max-width: 31ch; margin: 20px auto 24px; font-size: 1.0625rem; line-height: 1.55; }

  /* Bouton pleine largeur, lien juste dessous, sans espace perdu */
  .p4-heros__actions { flex-direction: column; gap: 6px; width: 100%; }
  .p4-heros__actions .p4-btn { width: 100%; min-height: 56px; font-size: 1.0625rem; }
  .p4-heros__actions .p4-lien { min-height: 44px; }

  /* Infos : deux lignes discrètes, centrées, sous le petit trait ondulé */
  .p4-infos { margin-top: 16px; font-size: .9375rem; }

  /* Collage du héros, recomposé dans le flux (plus de chevauchement de la phrase) :
     grande photo à gauche, petite photo flottante à droite qui mord sur la grande,
     phrase manuscrite centrée dans l'espace libre à gauche de la petite. */
  .p4-heros__visuel { width: 100%; max-width: 420px; }
  .p4-heros .p4-collage { display: flow-root; padding-bottom: 0; }
  .p4-heros .p4-collage__grande { width: 84%; aspect-ratio: 4 / 3.15; }
  .p4-heros .p4-collage__petite { position: relative; right: auto; bottom: auto; float: right; width: 56%; margin: -22% 0 0 8px; border-width: 5px; }
  .p4-heros .p4-collage__note { position: relative; inset: auto; display: flow-root; width: auto; padding: 16px 2px 0; text-align: center; font-size: clamp(1.2rem, 5.6vw, 1.45rem); line-height: 1.08; rotate: -3deg; }
  .p4-heros .p4-collage__coeur { margin: 6px auto 0; width: 20px; }
  .p4-heros .p4-collage__gribouillis { left: -3%; top: -6%; bottom: auto; width: 17%; }
  .p4-heros .p4-collage__soleil { left: auto; right: 1%; top: 3%; bottom: auto; width: 13%; }
}

/* --------------------------------------------------------------- Mobile : le reste */
@media (max-width: 600px) {
  /* Têtes de section centrées partout : surtitre, titre, chapeau */
  .p4-tete { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
  .p4-tete .p4-chapeau { margin-inline: auto; max-width: 34ch; }
  .p4-chapeau { font-size: 1.0625rem; line-height: 1.55; }
  .p4-sur { gap: 7px; font-size: .78rem; letter-spacing: .1em; margin-bottom: 10px; }
  .p4-sur::before { width: 14px; height: 14px; }
  .p4-section { padding-block: 44px; }

  /* Ruban : plus compact, bords fondus pour ne pas buter contre le bouton pause */
  .p4-ruban { padding: 4px 0; }
  .p4-ruban__piste > span { min-height: 46px; gap: 16px; padding-right: 16px; font-size: 1.2rem; }
  .p4 .p4-ruban__piece img { height: 38px; }
  .p4-ruban__fenetre { -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 76%, transparent 88%); mask: linear-gradient(90deg, transparent 0, #000 6%, #000 76%, transparent 88%); }
  .p4-pause { width: 40px; height: 40px; right: calc(12px + env(safe-area-inset-right, 0px)); box-shadow: 0 2px 8px -4px rgb(28 28 28 / .35); }

  /* C'est quoi : déjà centré, on resserre */
  .p4-intro .p4-chapeau { max-width: 32ch; }
  .p4-accroche { margin-top: 24px; }

  /* Étapes : frise verticale (numéros manuscrits reliés par un pointillé orange) */
  .p4-etapes { gap: 0; max-width: 420px; margin-inline: auto; }
  .p4-etape { display: block; position: relative; padding: 0 0 26px 54px; border: 0; }
  .p4-etape:last-child { border: 0; padding-bottom: 0; }
  .p4-etape__num { position: absolute; left: 0; top: -6px; width: 38px; margin: 0; text-align: center; font-size: 2.3rem; }
  .p4-etape::before { content: ""; position: absolute; left: 18px; top: 40px; bottom: 6px; width: 2px; background: repeating-linear-gradient(180deg, var(--p4-orange) 0 5px, transparent 5px 11px); opacity: .6; }
  .p4-etape:last-child::before { display: none; }
  .p4-etape h3 { margin-bottom: 2px; }
  .p4-etapes__suite { margin-top: 26px; text-align: center; }

  /* Café : le collage passe AVANT le texte (alternance image / texte), texte centré */
  .p4-duo { gap: 26px; }
  .p4-duo > :first-child { order: 0; width: 100%; max-width: 420px; }
  .p4-duo > :last-child { text-align: center; }
  .p4-duo .p4-chapeau { margin: 12px auto 18px; max-width: 32ch; }
  .p4-duo .p4-pastilles { justify-content: center; gap: 4px 26px; margin-bottom: 14px; text-align: left; }
  .p4-pastille { font-size: 1.3rem; }
  .p4-collage--miroir { display: flow-root; padding-bottom: 0; }
  .p4-collage--miroir .p4-collage__grande { width: 84%; }
  .p4-collage--miroir .p4-collage__petite { position: relative; left: auto; bottom: auto; float: left; width: 52%; margin: -20% 8px 0 0; border-width: 5px; }
  .p4-collage--miroir .p4-collage__soleil { left: auto; right: 16%; top: auto; bottom: 9%; width: 12%; }
  .p4-collage--miroir .p4-collage__bol { left: 0; right: auto; top: -5%; width: 15%; }

  /* Groupes : carrousel horizontal à glisser (cartes à 80 %, la suivante dépasse) */
  .p4-groupes { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--p4-gout); margin-inline: calc(-1 * var(--p4-gout)); padding: 2px var(--p4-gout) 6px; scrollbar-width: none; }
  .p4-groupes::-webkit-scrollbar { display: none; }
  .p4-groupe, .p4-groupe:nth-child(2) { flex: 0 0 80%; margin-top: 0; scroll-snap-align: start; }
  .p4-groupe h3 { margin: 12px 0 2px; }
  .p4-groupe p { font-size: 1rem; line-height: 1.5; }

  /* Carte cadeau : seul petit aplat jaune, centré */
  .p4-occasions { gap: 34px; }
  .p4-cadeau { display: block; text-align: center; padding: 26px 22px 18px; rotate: -1deg; }
  .p4-cadeau h3 { padding: 0 14px; font-size: clamp(1.6rem, 7.4vw, 2rem); }
  .p4-cadeau p { max-width: 28ch; margin-inline: auto; }
  .p4-cadeau .p4-lien { margin-top: 6px; }
  .p4-cadeau__soleil { width: 48px; right: -8px; top: -20px; }

  /* Nous trouver : adresse → plan → horaires → itinéraire, centré */
  .p4-pratique { gap: 0; text-align: center; }
  .p4-pratique > div:first-child { display: contents; }
  .p4-pratique .p4-sur { justify-self: center; order: 1; }
  .p4-pratique h2 { order: 2; }
  .p4-pratique .p4-adresse { order: 3; margin-top: 14px; }
  .p4-pratique .p4-repere { order: 4; margin: 6px auto 0; max-width: 34ch; }
  .p4-plan { order: 5; margin-top: 22px; aspect-ratio: 16 / 11; }
  .p4-horaires { order: 6; margin-top: 18px; text-align: left; }
  .p4-pratique .p4-lien { order: 7; justify-self: center; margin-top: 12px; }

  /* FAQ */
  .p4-faq summary { padding: 16px 40px 16px 0; font-size: 1rem; line-height: 1.4; }
  .p4-faq details > div { padding: 0 8px 18px 0; }

  /* Appel final : même bouton pleine largeur que le héros */
  .p4-final__soleil { width: 64px; margin-bottom: 10px; }
  .p4-final .p4-chapeau { margin: 12px auto 24px; max-width: 30ch; }
  .p4-final .p4-btn { width: 100%; min-height: 56px; font-size: 1.0625rem; }

  /* Pied : bloc marque centré, colonnes conservées, bas de page centré */
  .p4-pied { padding-top: 44px; }
  .p4-pied__grille { row-gap: 28px; column-gap: 20px; }
  .p4-pied__grille > :first-child { text-align: center; }
  .p4-pied__logo { width: 150px; margin-inline: auto; }
  .p4-pied__grille > :first-child p { max-width: 34ch; margin-inline: auto; }
  .p4-reseaux { justify-content: center; margin: 10px 0 0; }
  .p4-pied__grille li > span:last-child { color: #fff; font-weight: 700; }
  .p4-pied__bas { flex-direction: column; align-items: center; text-align: center; margin-top: 30px; gap: 4px; }
  .p4-pied__legal { justify-content: center; gap: 0 18px; }
  .p4-pied__grille > :nth-child(3) li + li { margin-top: 10px; }

  /* En-tête un peu plus bas de plafond, menu : bloc « Réserver » calé en bas */
  .p4-ent__barre { min-height: 62px; }
  .p4-menu > nav { flex: 1 0 auto; }
  .p4-menu__liens { margin-top: 10px; }
  .p4-menu__liens a { min-height: 56px; }
  .p4-menu__bas { text-align: center; padding-top: 20px; }
  .p4-menu__infos { text-wrap: balance; }
}

/* Très petits écrans (iPhone SE 1re gén., 320 px) */
@media (max-width: 359px) {
  .p4-heros h1 .p4-sur, .p4-sur { font-size: .72rem; letter-spacing: .07em; }
  .p4-heros__slogan { font-size: 3rem; }
  .p4-heros__texte { max-width: none; font-size: 1rem; text-wrap: balance; }
  .p4-heros .p4-collage__note { font-size: 1.15rem; }
  .p4-groupe, .p4-groupe:nth-child(2) { flex-basis: 86%; }
  .p4-duo .p4-pastilles { gap: 4px 18px; }
  .p4-pastille { font-size: 1.2rem; }
}

/* ---------------------------------------------------------------- Tablette portrait : héros sur deux colonnes */
@media (min-width: 700px) and (max-width: 880px) {
  .p4-heros__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .p4-heros__visuel { width: 100%; }
}

/* ---------------------------------------------------------------- Téléphone en paysage */
@media (orientation: landscape) and (max-height: 500px) {
  .p4-ent__barre { min-height: 54px; }
  .p4-menu__liens { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: 8px; }
  .p4-menu__liens a { min-height: 48px; font-size: 1.15rem; }
  .p4-menu__bas { display: flex; align-items: center; gap: 24px; padding-top: 14px; }
  .p4-menu__bas .p4-btn { width: auto; flex: none; }
  .p4-menu__infos { margin: 0; }
}

/* ---------------------------------------------------------------- Retour tactile discret (iOS) */
:where(body.p4, .p4-ent, .p4-menu, .p4-pied) :where(a, button, summary) { -webkit-tap-highlight-color: rgb(58 19 198 / .12); }
@media (prefers-reduced-motion: reduce) { .p4-heros__texte-bloc > * { animation: none; } }

/* ==========================================================================
   V4.4 — plus de jaune et d'orange (retours de Solène du 14/10)
   ========================================================================== */
:root { --p4-jaune-logo: #ffd52d; --p4-orange-fonce: #d4341a; --p4-m-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 10 0 20 10Z'/%3E%3C/svg%3E"); }

/* Mot en gras dans un titre : le jaune du logo, sans contour */
:where(body.p4) :where(h1, h2, h3) strong { color: var(--p4-jaune-logo); text-shadow: none; }

/* Boutons principaux en orange (texte de 19 px en gras : « grand texte », contraste suffisant) ;
   le petit bouton de l'en-tête reste violet */
.p4-btn { background: var(--p4-orange); font-size: 1.1875rem; }
.p4-btn:hover { background: var(--p4-orange-fonce); }
.p4-btn--petit { background: var(--p4-violet); font-size: .95rem; }
.p4-btn--petit:hover { background: var(--p4-violet-fonce); }
.p4-heros__actions .p4-btn, .p4-final .p4-btn { font-size: 1.1875rem; }

/* Titres en alternance violet / orange */
#etapes h2, #cafe h2, #acces h2 { color: var(--p4-orange); }

/* Soulignés jaunes dessinés au pinceau sous certains titres */
#pieces .p4-tete h2, #groupes .p4-tete h2 { position: relative; display: table; isolation: isolate; padding-bottom: 8px; }
@media (max-width: 600px) { #pieces .p4-tete h2, #groupes .p4-tete h2 { margin-inline: auto; } }
#pieces .p4-tete h2::after, #groupes .p4-tete h2::after { content: ""; position: absolute; z-index: -1; left: 1%; right: 1%; bottom: -2px; height: 15px; background: var(--p4-jaune); -webkit-mask: var(--p4-m-souligne) center / 100% 100% no-repeat; mask: var(--p4-m-souligne) center / 100% 100% no-repeat; }

/* Traits qui se dessinent à l'apparition */
.js #pieces .p4-tete h2::after, .js #groupes .p4-tete h2::after, .js .p4-accroche strong::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6,0,.3,1) .35s; }
#pieces .p4-tete h2.est-vu::after, #groupes .p4-tete h2.est-vu::after, .p4-accroche.est-vu strong::after { clip-path: inset(0 0 0 0); }
.js .p4-etapes::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(.5,0,.3,1) .15s; }
.p4-etapes:has(.est-vu)::before { clip-path: inset(0 0 0 0); }
.p4-eclats path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .p4-eclats path { stroke-dashoffset: 1; }
.est-vu .p4-eclats path, .p4-collage.est-vu .p4-eclats path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease .5s; }
.est-vu .p4-eclats path:nth-child(2), .p4-collage.est-vu .p4-eclats path:nth-child(2) { transition-delay: .65s; }
.est-vu .p4-eclats path:nth-child(3), .p4-collage.est-vu .p4-eclats path:nth-child(3) { transition-delay: .8s; }
.p4-collage.est-vu .p4-eclats path { transition-delay: 1.2s; }
.p4-collage.est-vu .p4-eclats path:nth-child(2) { transition-delay: 1.35s; }
.p4-collage.est-vu .p4-eclats path:nth-child(3) { transition-delay: 1.5s; }

/* Appel final : éclats jaunes de part et d'autre du titre */
.p4-final__titre { display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 1.6vw, 18px); }
.p4-final__eclats { flex: none; width: clamp(34px, 4.6vw, 58px); margin-top: -.15em; color: var(--p4-jaune-logo); }

/* Collage du café : éclats à la place du soleil */
.p4-collage__eclats { color: var(--p4-jaune-logo); }

/* Ruban : gouttes en alternance avec les soleils */
.p4-ruban .p4-ruban__goutte { width: 13px; }

/* Bande des pièces en orange : les céramiques blanches ressortent */
.p4-bande { background: var(--p4-orange); overflow: visible; overflow-x: clip; }
.p4 .p4-bande__piste img { filter: drop-shadow(0 10px 12px rgb(90 15 0 / .35)); }
@media (max-width: 600px) {
  /* Téléphone : la bande va jusqu'aux bords, avec des dents (triangles) en haut et en bas */
  .p4-bande { margin-inline: calc(-1 * var(--p4-gout) - env(safe-area-inset-left, 0px)) calc(-1 * var(--p4-gout) - env(safe-area-inset-right, 0px)); border-radius: 0; margin-block: 12px; }
  .p4-bande::before, .p4-bande::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--p4-orange); -webkit-mask: var(--p4-m-zigzag) 0 0 / 20px 100% repeat-x; mask: var(--p4-m-zigzag) 0 0 / 20px 100% repeat-x; }
  .p4-bande::before { bottom: calc(100% - 1px); }
  .p4-bande::after { top: calc(100% - 1px); transform: scaleY(-1); }
  .p4-pieces__note { margin-top: 22px; text-align: center; }
}

/* Secours et mouvement réduit : tout est dessiné d'emblée */
.p4-secours .p4-eclats path { stroke-dashoffset: 0 !important; }
.p4-secours .p4-etapes::before, .p4-secours .p4-accroche strong::after, .p4-secours #pieces .p4-tete h2::after, .p4-secours #groupes .p4-tete h2::after { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .p4-eclats path { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .p4-etapes::before, .js .p4-accroche strong::after, .js #pieces .p4-tete h2::after, .js #groupes .p4-tete h2::after { clip-path: none !important; transition: none !important; }
}