/* ==========================================================================
   Palma V4 — pages intérieures : briques communes (chargées après v4.css)
   Concept, pièces & tarifs, café, groupes, carte cadeau, contact, pages légales, 404.
   Même système que l'accueil : trois couleurs, titres en couleur, textes en noir,
   aplats rares, soleils / gouttes / éclats, rayures dessinées à la main.
   ========================================================================== */

/* ------------------------------------------------------------ Rayures (motif apprécié par la cliente) */
.p4-rayures { position: absolute; pointer-events: none; background: var(--p4-jaune); -webkit-mask: url("../svg/masque-rayures.svg") 0 0 / 150px 100% repeat; mask: url("../svg/masque-rayures.svg") 0 0 / 150px 100% repeat; }
.p4-rayures--orange { background: var(--p4-orange); opacity: .9; }
.p4-rayures--violet { background: var(--p4-violet); opacity: .14; }

/* ------------------------------------------------------------ En-tête de page */
.p4-tete-page { padding: clamp(22px, 3vw, 40px) 0 clamp(40px, 5vw, 72px); overflow: clip; }
.p4-tete-page__grille { display: grid; gap: clamp(30px, 5vw, 64px); align-items: center; }
.p4-tete-page--photo .p4-tete-page__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.p4-tete-page:not(.p4-tete-page--photo) .p4-tete-page__texte { text-align: center; max-width: 760px; margin-inline: auto; }
.p4-tete-page:not(.p4-tete-page--photo) .p4-sur { justify-content: center; }
.p4-tete-page:not(.p4-tete-page--photo) .p4-chapeau { margin-inline: auto; }
.p4-tete-page h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1; max-width: 16ch; }
.p4-tete-page:not(.p4-tete-page--photo) h1 { margin-inline: auto; }
.p4-tete-page .p4-chapeau { max-width: 52ch; }
.p4-tete-page__actions { margin-top: 26px; }
.p4-tete-page__visuel { position: relative; width: min(100%, 500px); justify-self: center; padding: 6% 4% 8%; }
.p4-tete-page__rayures { inset: 0 8% 12% 18%; rotate: -8deg; opacity: .95; }
.p4-tete-page__photo { position: relative; rotate: 2.5deg; }
.p4-tete-page__eclats { position: absolute; left: -2%; top: -2%; width: clamp(44px, 6vw, 64px); color: var(--p4-orange); }
.p4-fil ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .875rem; color: var(--p4-doux); }
.p4-tete-page:not(.p4-tete-page--photo) .p4-fil ol { justify-content: center; }
.p4-fil li + li::before { content: "›"; margin-right: 8px; color: var(--p4-orange); font-weight: 800; }
.p4-fil a { color: var(--p4-doux); text-decoration: underline; text-underline-offset: 3px; }
.p4-fil a:hover { color: var(--p4-violet); }
@media (max-width: 880px) {
  .p4-tete-page--photo .p4-tete-page__grille { grid-template-columns: 1fr; }
  .p4-tete-page--photo .p4-tete-page__texte { text-align: center; }
  .p4-tete-page--photo .p4-sur, .p4-tete-page--photo .p4-fil ol { justify-content: center; }
  .p4-tete-page--photo h1, .p4-tete-page--photo .p4-chapeau { margin-inline: auto; }
  .p4-tete-page__visuel { width: min(100%, 420px); }
}
@media (max-width: 600px) {
  .p4-tete-page h1 { font-size: clamp(2.1rem, 9vw, 2.7rem); }
  .p4-tete-page__actions .p4-btn { width: 100%; }
}

/* ------------------------------------------------------------ Photo polaroïd (une seule photo) */
.p4-polaroid { margin: 0; padding: 3.4% 3.4% 12%; background: #fff; box-shadow: 0 2px 4px rgb(28 28 28 / .08), 0 22px 34px -20px rgb(28 28 28 / .45); }
.p4 .p4-polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 0; }
.p4-polaroid--penche { rotate: -2deg; }
.p4-polaroid--droite { rotate: 2deg; }

/* ------------------------------------------------------------ Bloc texte + photo (alternance) */
.p4-bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.p4-bloc--inverse > :first-child { order: 2; }
.p4-bloc__visuel { position: relative; padding: 4%; }
.p4-bloc__visuel .p4-rayures { inset: 8% -2% 0 22%; rotate: 7deg; }
.p4-bloc--inverse .p4-bloc__visuel .p4-rayures { inset: 8% 22% 0 -2%; rotate: -7deg; }
.p4-bloc .p4-chapeau, .p4-bloc .p4-texte { margin-bottom: 18px; }
@media (max-width: 860px) {
  .p4-bloc { grid-template-columns: 1fr; }
  .p4-bloc > .p4-bloc__visuel, .p4-bloc--inverse > .p4-bloc__visuel { order: 0; width: min(100%, 460px); margin-inline: auto; }
  .p4-bloc > :not(.p4-bloc__visuel) { order: 1; }
}

/* Texte courant riche (paragraphes issus de l'éditeur) */
.p4-texte { max-width: 62ch; color: var(--p4-texte); }
.p4-texte a, .p4-chapeau a, .p4-carte p a { font-weight: 700; color: var(--p4-violet); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ Liste à puces soleil */
.p4-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.p4-liste li { position: relative; padding-left: 28px; }
.p4-liste li::before { content: ""; position: absolute; left: 0; top: .32em; 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-liste--goutte li::before { width: 12px; left: 2px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1.5C12 1.5 3 12.6 3 19.5a9 9 0 0 0 18 0C21 12.6 12 1.5 12 1.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1.5C12 1.5 3 12.6 3 19.5a9 9 0 0 0 18 0C21 12.6 12 1.5 12 1.5Z'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------ Cartes */
.p4-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2.4vw, 28px); margin: 0; padding: 0; list-style: none; }
.p4-carte { position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px); background: #fff; border: 1px solid var(--p4-trait); border-radius: var(--p4-r); }
.p4-carte h3 { margin: 0; }
.p4-carte p:not(.p4-carte__prix) { color: var(--p4-texte); }
.p4-carte--jaune { background: var(--p4-jaune); border-color: transparent; }
.p4-carte__prix { font-family: var(--p4-titre); font-size: 2rem; line-height: 1; color: var(--p4-orange); }
.p4-carte__photo { margin: calc(-1 * clamp(20px, 2.4vw, 28px)) calc(-1 * clamp(20px, 2.4vw, 28px)) 8px; overflow: hidden; border-radius: var(--p4-r) var(--p4-r) 0 0; }
.p4 .p4-carte__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p4-carte .p4-lien { margin-top: auto; }

/* Bandeau rayé : bloc mis en avant, rayures jaunes sur blanc */
.p4-bandeau-raye { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 52px); border-radius: var(--p4-r); background: #fff; border: 1px solid var(--p4-trait); }
.p4-bandeau-raye::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; background: var(--p4-jaune); opacity: .55; -webkit-mask: url("../svg/masque-rayures.svg") 0 0 / 180px 100% repeat; mask: url("../svg/masque-rayures.svg") 0 0 / 180px 100% repeat; rotate: 12deg; }
.p4-bandeau-raye > * { position: relative; }

/* Tableau (tarifs, comparatifs) */
.p4-tableau { width: 100%; border-collapse: collapse; font-size: .97rem; }
.p4-tableau th, .p4-tableau td { padding: 12px 14px; border-bottom: 1px solid var(--p4-trait); text-align: left; vertical-align: top; }
.p4-tableau thead th { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--p4-texte); border-bottom: 2px solid var(--p4-orange); }
.p4-tableau tbody th { font-weight: 800; color: var(--p4-violet); }
.p4-tableau-defile { overflow-x: auto; }

/* Bloc « succès » d'un formulaire */
.p4-succes { text-align: center; padding: 20px 0; }
.p4-succes h3 { font-family: var(--p4-titre); font-weight: 400; font-size: 2.2rem; color: var(--p4-orange); }

/* ------------------------------------------------------------ Formulaires (contact, devis, carte cadeau) */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p4 .icone { width: 1.25rem; height: 1.25rem; flex: none; }
.p4-form-carte { padding: clamp(20px, 3vw, 34px); background: #fff; border: 1px solid var(--p4-trait); border-radius: var(--p4-r); box-shadow: 0 24px 50px -36px rgb(28 28 28 / .35); }
.formulaire { display: grid; gap: 16px; }
.formulaire__ligne { display: grid; gap: 16px; }
@media (min-width: 600px) { .formulaire__ligne--2 { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: 6px; align-content: start; }
.champ__label { font-weight: 800; font-size: .95rem; color: var(--p4-texte); }
.champ__requis { color: var(--p4-orange); }
.champ__optionnel { font-weight: 400; color: var(--p4-doux); }
.champ__saisie { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--p4-trait); border-radius: 14px; background: #fff; font: 500 1rem/1.4 Nunito, system-ui, sans-serif; color: var(--p4-texte); transition: border-color .2s, box-shadow .2s; }
select.champ__saisie { padding-right: 44px; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ef4023' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat; cursor: pointer; }
textarea.champ__saisie { min-height: 120px; resize: vertical; }
.champ__saisie::placeholder { color: rgb(28 28 28 / .45); }
.champ__saisie:hover { border-color: rgb(28 28 28 / .3); }
.champ__saisie:focus-visible { outline: none; border-color: var(--p4-violet); box-shadow: 0 0 0 3px rgb(58 19 198 / .15); }
.champ__saisie[aria-invalid="true"] { border-color: var(--p4-orange); }
.champ__aide { font-size: .85rem; color: var(--p4-doux); }
.champ__erreur { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: .875rem; font-weight: 700; color: var(--p4-texte); }
.champ__erreur .icone { width: 18px; height: 18px; color: var(--p4-orange); }
.case { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.case__input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--p4-violet); cursor: pointer; }
.case__texte { font-size: .92rem; line-height: 1.5; color: var(--p4-texte); }
.case__texte a { font-weight: 700; color: var(--p4-violet); text-decoration: underline; text-underline-offset: 3px; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .p4-btn { justify-self: start; }
@media (max-width: 600px) { .formulaire .p4-btn { justify-self: stretch; } }
.resa__alerte { margin-bottom: 4px; }
.alerte { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--p4-fond-2); color: var(--p4-texte); font-size: .94rem; }
.alerte--soleil { background: rgb(250 223 112 / .45); }
.alerte__icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--p4-violet); color: #fff; }
.alerte--erreur .alerte__icone { background: var(--p4-orange); }
.alerte__icone .icone { width: 18px; height: 18px; }
.alerte__titre { font-weight: 800; }
.alerte__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.p4 .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--p4-violet); border-radius: 999px; background: transparent; font: 800 .92rem Nunito, system-ui, sans-serif; color: var(--p4-violet); text-decoration: none; cursor: pointer; }
.p4 .btn .icone { width: 18px; height: 18px; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); translate: -50% 20px; padding: 12px 20px; border-radius: 999px; background: var(--p4-texte); color: #fff; font-weight: 700; opacity: 0; transition: opacity .25s, translate .25s; pointer-events: none; }
.toast.is-visible { opacity: 1; translate: -50% 0; }

/* ------------------------------------------------------------ Pages légales (blocs de l'éditeur) */
.p4-prose { max-width: 72ch; margin-inline: auto; }
.p4-prose h2 { margin: 2em 0 .5em; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem); }
.p4-prose h3 { margin: 1.6em 0 .4em; }
.p4-prose p, .p4-prose ul, .p4-prose ol { margin: 0 0 1em; }
.p4-prose ul, .p4-prose ol { padding-left: 1.3em; }
.p4-prose li + li { margin-top: .35em; }
.p4-prose a { font-weight: 700; color: var(--p4-violet); text-decoration: underline; text-underline-offset: 3px; }
.p4-prose .prose__liste-titre { font-weight: 800; }
.p4-prose .liste-coches { list-style: none; padding: 0; }
.p4-prose .liste-coches li { position: relative; padding-left: 26px; }
.p4-prose .liste-coches li::before { content: ""; position: absolute; left: 0; top: .32em; 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; }

/* Liens « Une autre question ? » sous les FAQ */
.p4-faq__plus { margin-top: 22px; text-align: center; }

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
/* ==========================================================================
   Palma V4 — page « Le Palma Café » (templates/cafe.php), préfixe p4-cafe-
   Chargée après v4.css et 00-commun.css. Titres violet / orange en alternance,
   textes en noir, un seul aplat jaune (options), carte posée sur des rayures.
   ========================================================================== */

/* ------------------------------------------------------------ Titres en alternance */
.p4-cafe-page .p4-h2-orange h2,
.p4-cafe-page .p4-final h2,
.p4-cafe-menu__col--chaud h2 { color: var(--p4-orange); }

/* ------------------------------------------------------------ Blocs texte + photo */
.p4-cafe-texte { margin-top: 16px; }
.p4-cafe-page .p4-bloc .p4-lien { margin-top: 2px; }
.p4-cafe-visuel { width: min(100%, 520px); justify-self: center; }
.p4-cafe-visuel .p4-polaroid { position: relative; z-index: 1; }

/* Café où l'on peint : bol orange et éclats jaunes autour du polaroïd */
.p4-cafe-intro__bol { position: absolute; z-index: 2; right: 0; top: -3%; width: clamp(56px, 7vw, 84px); color: var(--p4-orange); rotate: 8deg; }
.p4-cafe-intro__eclats { position: absolute; z-index: 2; left: -2%; bottom: 4%; width: clamp(40px, 5vw, 58px); color: var(--p4-jaune-logo); rotate: 180deg; }

/* Pâtisseries : bande de rayures orange, plus discrète */
.p4-cafe-page .p4-cafe-patisseries__rayures { opacity: .7; }
.p4-cafe-patisseries__eclats { position: absolute; z-index: 2; left: -1%; top: -1%; width: clamp(40px, 5vw, 58px); color: var(--p4-orange); }
.p4-cafe-patisseries__liste { margin-top: 20px; max-width: 520px; }

/* Céramiques : soleil jaune qui tourne, éclats orange */
.p4-cafe-ceramiques__soleil { position: absolute; z-index: 2; left: -1%; top: -4%; width: clamp(56px, 7vw, 80px); color: var(--p4-jaune-logo); }
.p4-cafe-ceramiques__eclats { position: absolute; z-index: 2; right: -1%; bottom: 6%; width: clamp(40px, 5vw, 58px); color: var(--p4-orange); rotate: 180deg; }

/* ------------------------------------------------------------ La carte (posée sur des rayures jaunes) */
.p4-cafe-carte__sur { display: flex; justify-content: center; margin-bottom: var(--p4-esp-tete); }
.p4-cafe-menu { position: relative; isolation: isolate; max-width: 1040px; margin-inline: auto; padding: clamp(14px, 2.4vw, 30px) 0; }
.p4-cafe-menu__rayures { z-index: -1; inset: 0 -14px 0 10%; rotate: -2.5deg; }
.p4-cafe-menu__carte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); padding: clamp(24px, 4vw, 52px) clamp(20px, 4vw, 56px); background: #fff; border: 1px solid var(--p4-trait); border-radius: var(--p4-r); box-shadow: 0 24px 50px -36px rgb(28 28 28 / .35); }
.p4-cafe-menu__tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.p4-cafe-menu__tete h2 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); }
.p4-cafe-menu__motif { flex: none; width: 34px; color: var(--p4-orange); }
.p4-cafe-menu__motif--goutte { width: 22px; margin-inline: 6px; }
.p4-cafe-menu__bol { position: absolute; z-index: 1; right: -12px; bottom: -14px; width: clamp(60px, 8vw, 96px); color: var(--p4-orange); rotate: -8deg; }

/* Souligné jaune dessiné au pinceau, tracé à l'apparition */
.p4-cafe-souligne { position: relative; isolation: isolate; padding-bottom: 6px; }
.p4-cafe-souligne::after { content: ""; position: absolute; z-index: -1; left: 0; 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; }
.js .p4-cafe-souligne::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6, 0, .3, 1) .35s; }
.p4-cafe-souligne.est-vu::after { clip-path: inset(0 0 0 0); }

/* Lignes de la carte : nom (gras), prix facultatif (manuscrit orange), description */
.p4-cafe-plats { display: grid; }
.p4-cafe-plat { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--p4-trait); }
.p4-cafe-plat:last-child { border-bottom: 0; padding-bottom: 0; }
.p4-cafe-plat__nom { grid-column: 1; font-weight: 800; color: var(--p4-texte); }
.p4-cafe-plat__prix { grid-column: 2; grid-row: 1; align-self: baseline; font-family: var(--p4-titre); font-size: 1.45rem; line-height: 1.1; color: var(--p4-orange); white-space: nowrap; }
.p4-cafe-plat__desc { grid-column: 1 / -1; font-size: var(--p4-fs-petit); line-height: 1.5; color: var(--p4-texte); }

/* ------------------------------------------------------------ Options (seul aplat jaune de la page) */
.p4-cafe-options__tuile { position: relative; max-width: 820px; margin-inline: auto; padding: clamp(30px, 4vw, 48px) clamp(22px, 4.5vw, 56px); background: var(--p4-jaune); border-radius: var(--p4-r); rotate: -1deg; text-align: center; }
.p4-cafe-options__tuile > :not(.p4-cafe-options__soleil) { position: relative; }
.p4-cafe-options__tuile h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); padding-inline: 20px; }
.p4-cafe-options__tuile .p4-chapeau { margin: 12px auto 22px; max-width: 54ch; }
.p4-cafe-options__tuile .p4-chapeau a { color: var(--p4-violet); }
.p4-cafe-options__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 30px; }
.p4-cafe-options__soleil { position: absolute; right: -16px; top: -24px; width: 62px; color: var(--p4-orange); }

/* ------------------------------------------------------------ Tablette et téléphone */
@media (max-width: 720px) {
  .p4-cafe-menu__carte { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 600px) {
  .p4-cafe-menu { padding: 12px 0; }
  .p4-cafe-menu__rayures { inset: 0 0 0 18%; rotate: -2deg; }
  .p4-cafe-menu__carte { padding: 24px 18px 28px; }
  .p4-cafe-menu__tete { justify-content: center; }
  .p4-cafe-menu__bol { right: -4px; bottom: -16px; width: 58px; }
  .p4-cafe-options__tuile { rotate: 0deg; padding: 30px 20px 26px; }
  .p4-cafe-options__tuile .p4-chapeau { max-width: 32ch; }
  .p4-cafe-options__liste { flex-direction: column; align-items: center; gap: 4px; }
  .p4-cafe-options__soleil { right: -4px; top: -22px; width: 50px; }
  .p4-cafe-intro__bol { right: 2%; width: 52px; }
}
@media (max-width: 359px) {
  .p4-cafe-menu__carte { padding: 22px 14px 26px; }
  .p4-cafe-menu__tete h2 { font-size: 1.9rem; }
}

/* ------------------------------------------------------------ Secours et mouvement réduit */
.p4-secours .p4-cafe-souligne::after { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .p4-cafe-souligne::after { clip-path: none !important; transition: none !important; }
}
/* ==========================================================================
   Palma V4 — page « Carte cadeau » (préfixe p4-cc-)
   Chargée après v4.css et pages-v4/00-commun.css. Titres en alternance :
   intro orange, montants violet (souligné jaune), étapes orange (#etapes, v4.css),
   occasions violet, CSE orange, commande violet, FAQ orange.
   ========================================================================== */

/* ------------------------------------------------------------ Couleurs des titres */
.p4-cc-intro h2, .p4-cc-cse h2, .p4-cc-page #faq h2 { color: var(--p4-orange); }

/* Souligné jaune dessiné au pinceau, tracé à l'apparition */
.p4-cc-souligne { position: relative; display: table; isolation: isolate; padding-bottom: 8px; }
.p4-cc-souligne::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; }
.js .p4-cc-souligne::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6, 0, .3, 1) .35s; }
.p4-cc-souligne.est-vu::after { clip-path: inset(0 0 0 0); }
.p4-secours .p4-cc-souligne::after { clip-path: none !important; }

/* Rangée de liens texte */
.p4-cc-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 28px; }

/* ------------------------------------------------------------ L'idée cadeau */
.p4-cc-intro__photo { position: relative; }
.p4-cc-intro__texte { margin: 16px 0 18px; }
.p4-cc-intro .p4-bloc__visuel .p4-cc-intro__eclats { position: absolute; right: -1%; top: -3%; width: clamp(44px, 6vw, 64px); color: var(--p4-orange); }

/* ------------------------------------------------------------ Cartes cadeaux */
.p4-cc-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(30px, 3.4vw, 44px) clamp(18px, 2.4vw, 30px); }
.p4-cc-carte { display: flex; flex-direction: column; gap: 18px; }

/* Recto façon carte bancaire : logo, mention, montant manuscrit, rayures faites main */
.p4-cc-carte__recto { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; aspect-ratio: 85.6 / 54; padding: 7% 8%; background: #fff; border: 1px solid var(--p4-trait); border-radius: 16px; box-shadow: 0 2px 4px rgb(28 28 28 / .06), 0 22px 34px -22px rgb(28 28 28 / .45); rotate: -1.5deg; transition: rotate .3s ease, translate .3s ease, box-shadow .3s ease; }
.p4-cc-carte:nth-child(even) .p4-cc-carte__recto { rotate: 1.5deg; }
.p4-cc-carte__recto .p4-cc-carte__rayures { z-index: -1; inset: -20% -8% -20% 60%; rotate: 9deg; }
.p4-cc-carte__logo { width: 46%; max-width: 150px; height: auto; }
.p4-cc-carte__mention { margin-top: 6px; font-size: .6875rem; font-weight: 800; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--p4-texte); }
.p4-cc-carte__montant { margin-top: auto; max-width: 60%; font-family: var(--p4-titre); font-size: clamp(2.5rem, 2rem + 1.8vw, 3.3rem); line-height: .9; color: var(--p4-violet); }
.p4-cc-carte:nth-child(4n+2) .p4-cc-carte__montant { color: var(--p4-orange); }
.p4-cc-carte__montant--long { font-size: clamp(1.6rem, 1.35rem + .9vw, 2rem); line-height: 1; }

.p4-cc-carte__corps { display: flex; flex: 1; flex-direction: column; gap: 6px; padding-inline: 4px; }
.p4-cc-carte__corps p { color: var(--p4-texte); }
.p4-cc-carte__action { align-self: flex-start; margin-top: auto; }

/* Carte choisie (classe posée par carte-cadeau.js) et survol */
.p4-cc-carte.is-choisie .p4-cc-carte__recto { rotate: 0deg; translate: 0 -4px; box-shadow: 0 0 0 3px var(--p4-orange), 0 22px 34px -22px rgb(28 28 28 / .45); }
@media (hover: hover) { .p4-cc-carte:hover .p4-cc-carte__recto { rotate: 0deg; translate: 0 -3px; } }

/* Mention paiement */
.p4-cc-mention { display: flex; align-items: flex-start; justify-content: center; gap: 10px; max-width: 64ch; margin: clamp(28px, 3.4vw, 44px) auto 0; font-size: var(--p4-fs-petit); color: var(--p4-texte); text-align: left; }
.p4-cc-mention::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: .2em; background: var(--p4-orange); -webkit-mask: var(--p4-m-soleil) center / contain no-repeat; mask: var(--p4-m-soleil) center / contain no-repeat; }

/* ------------------------------------------------------------ Étapes (2 à 5) */
@media (min-width: 1001px) { .p4-cc-etapes { grid-template-columns: repeat(var(--p4-cc-n, 3), minmax(0, 1fr)); } }

/* ------------------------------------------------------------ Occasions : la tuile jaune */
.p4-cc-occasions__texte { margin-top: 16px; }
.p4-cc-tuile { position: relative; isolation: isolate; padding: clamp(30px, 3.6vw, 46px) clamp(24px, 3vw, 40px); background: var(--p4-jaune); border-radius: var(--p4-r); rotate: -1.5deg; }
.p4-cc-tuile .p4-cc-tuile__soleil { position: absolute; z-index: 1; right: -14px; top: -26px; width: clamp(52px, 6vw, 68px); color: var(--p4-orange); }
.p4-cc-occasions__liste.p4-pastilles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 26px; }
.p4-cc-occasions__liste .p4-pastille { align-items: flex-start; }
.p4-cc-occasions__liste .p4-pastille::before { margin-top: .32em; }

/* ------------------------------------------------------------ CSE : bandeau rayé */
.p4-cc-cse { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px clamp(24px, 4vw, 56px); }
.p4-cc-cse h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); padding-right: clamp(56px, 7vw, 90px); }
.p4-cc-cse .p4-texte { margin-top: 12px; }
.p4-bandeau-raye.p4-cc-cse > .p4-cc-cse__bol { position: absolute; right: clamp(16px, 3vw, 36px); top: clamp(14px, 2vw, 24px); width: clamp(46px, 5vw, 64px); color: var(--p4-orange); }

/* ------------------------------------------------------------ Commande */
.p4-cc-commande { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.p4-cc-commande__intro { position: relative; isolation: isolate; padding-bottom: 40px; }
.p4-cc-reassurance { margin-top: 24px; }
.p4-cc-deja { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--p4-trait); }
.p4-cc-deja__question { font-weight: 800; }
.p4-cc-commande__intro .p4-cc-commande__rayures { z-index: -1; left: -2%; bottom: 0; width: 170px; height: 34px; rotate: -4deg; }
.p4-cc-form .p4-btn.is-chargement { opacity: .7; cursor: progress; }

/* Succès */
.p4-cc-succes .p4-cc-succes__soleil { display: block; width: 72px; margin: 0 auto 12px; color: var(--p4-jaune-logo); }
.p4-cc-succes h3:focus { outline: none; }
.p4-cc-succes p { max-width: 40ch; margin: 8px auto 0; color: var(--p4-texte); }
.p4-cc-succes__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 26px; }
.p4-cc-nouveau { padding: 0; border: 0; background: none; font: 800 1rem/1.3 Nunito, system-ui, sans-serif; cursor: pointer; }

/* ------------------------------------------------------------ Tablette / mobile */
@media (min-width: 601px) and (max-width: 1060px) {
  .p4-cc-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; margin-inline: auto; }
}
@media (max-width: 860px) {
  .p4-cc-commande { grid-template-columns: 1fr; }
  .p4-cc-commande__intro { padding-bottom: 0; }
  .p4-cc-commande__intro .p4-cc-commande__rayures { display: none; }
  .p4-cc-tuile { max-width: 560px; width: 100%; margin-inline: auto; rotate: -1deg; }
}
@media (max-width: 680px) {
  .p4-cc-cse { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .p4-cc-souligne { margin-inline: auto; }
  .p4-cc-intro .p4-bloc > :last-child,
  .p4-cc-occasions .p4-bloc > :first-child,
  .p4-cc-commande__intro { text-align: center; }
  .p4-cc-intro .p4-texte, .p4-cc-occasions .p4-texte, .p4-cc-commande__intro .p4-chapeau { margin-inline: auto; }
  .p4-cc-liens, .p4-cc-deja { justify-content: center; }
  .p4-cc-reassurance { justify-content: center; text-align: left; }
  .p4-cc-cartes { max-width: 420px; margin-inline: auto; }
  .p4-cc-mention { text-align: center; }
  .p4-cc-cse { text-align: center; }
  .p4-cc-cse h2 { padding: 46px 0 0; }
  .p4-bandeau-raye.p4-cc-cse > .p4-cc-cse__bol { right: 50%; translate: 50% 0; top: 18px; width: 48px; }
  .p4-cc-cse__lien { justify-self: center; }
  .p4-cc-tuile { padding: 30px 22px 26px; }
}
@media (max-width: 420px) {
  .p4-cc-occasions__liste.p4-pastilles { grid-template-columns: 1fr; justify-items: start; width: fit-content; max-width: 100%; margin-inline: auto; }
}

/* ------------------------------------------------------------ Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .p4-cc-carte__recto { transition: none; }
  .js .p4-cc-souligne::after { clip-path: none !important; transition: none !important; }
}
/* ==========================================================================
   Palma V4 — page « Le concept » (templates/concept.php)
   Chargée après v4.css et pages-v4/00-commun.css. Préfixe : p4-concept-.
   Titres en alternance violet / orange, textes en noir, une seule tuile jaune
   (dernier profil), rayures jaunes sous les photos, le comparatif et le bol.
   ========================================================================== */

/* ------------------------------------------------------------ Titres */
.p4-concept-page .p4-h2-orange h2 { color: var(--p4-orange); }
.p4-concept-page .p4-bloc h2 + .p4-texte { margin-top: 18px; }
.p4-concept-page .p4-texte { font-size: var(--p4-fs-texte); line-height: 1.7; }

/* Tête de section centrée : titre, chapeau ou texte */
.p4-concept-tete { max-width: 760px; margin: 0 auto var(--p4-esp-tete); text-align: center; }
.p4-concept-tete .p4-chapeau, .p4-concept-tete .p4-texte { margin-inline: auto; }
.p4-concept-tete .p4-chapeau { max-width: 52ch; }
.p4-concept-tete .p4-texte { margin-top: 16px; }

/* Souligné jaune dessiné au pinceau, tracé à l'apparition */
.p4-concept-souligne { position: relative; display: table; isolation: isolate; padding-bottom: 8px; }
.p4-concept-souligne::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; }
.js .p4-concept-souligne::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6,0,.3,1) .35s; }
.p4-concept-souligne.est-vu::after { clip-path: inset(0 0 0 0); }

/* La photo passe au-dessus des rayures (elles sont en position absolue) */
.p4-concept-page .p4-bloc__visuel .p4-polaroid { position: relative; }

/* ------------------------------------------------------------ Définition */
.p4-concept-definition__bol { position: absolute; z-index: 2; right: 0; bottom: -2%; width: clamp(54px, 7vw, 82px); color: var(--p4-orange); rotate: 8deg; }

/* ------------------------------------------------------------ Déroulé : frise verticale */
.p4-concept-frise { position: relative; display: grid; gap: clamp(22px, 3vw, 36px); max-width: 980px; margin-inline: auto; }
/* Trait orange en pointillés dessinés, qui se trace de haut en bas */
.p4-concept-frise::before { content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 3px; translate: -50% 0; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--p4-orange) 0 8px, transparent 8px 16px); opacity: .75; }
.js .p4-concept-frise::before { clip-path: inset(0 0 100% 0); transition: clip-path 2s cubic-bezier(.5,0,.3,1) .15s; }
.p4-concept-frise:has(.est-vu)::before { clip-path: inset(0 0 0 0); }
.p4-concept-frise__etape { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: start; }
.p4-concept-frise__num { position: relative; grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 62px; height: 62px; background: var(--p4-fond); font-family: var(--p4-titre); font-size: 2.9rem; line-height: 1; color: var(--p4-orange); }
.p4-concept-frise__corps { grid-column: 1; grid-row: 1; max-width: 42ch; justify-self: end; padding-top: 12px; }
.p4-concept-frise__etape:nth-child(even) .p4-concept-frise__corps { grid-column: 3; justify-self: start; }
.p4-concept-frise__corps h3 { margin-bottom: 6px; }
.p4-concept-frise__corps p { color: var(--p4-texte); }
.p4-concept-frise__corps a { font-weight: 700; color: var(--p4-violet); text-decoration: underline; text-underline-offset: 3px; }
.p4-concept-deroule__suite { margin-top: var(--p4-esp-tete); text-align: center; }
@media (max-width: 760px) {
  .p4-concept-frise { gap: 22px; max-width: 520px; }
  .p4-concept-frise::before { left: 24px; }
  .p4-concept-frise__etape { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .p4-concept-frise__num { grid-column: 1; width: 48px; height: 52px; font-size: 2.4rem; }
  .p4-concept-frise__corps, .p4-concept-frise__etape:nth-child(even) .p4-concept-frise__corps { grid-column: 2; justify-self: start; max-width: none; padding-top: 8px; }
}

/* ------------------------------------------------------------ Astuces */
.p4-concept-astuces__liste { margin-top: 8px; gap: 6px; }
.p4-concept-astuces__liste li { padding-left: 30px; font-family: var(--p4-titre); font-size: clamp(1.3rem, 1.15rem + .45vw, 1.55rem); line-height: 1.2; color: var(--p4-texte); }
.p4-concept-astuces__liste li::before { top: .2em; }
/* Une puce sur deux en goutte (motif du logo) */
.p4-concept-astuces__liste li:nth-child(even)::before { width: 12px; left: 2px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1.5C12 1.5 3 12.6 3 19.5a9 9 0 0 0 18 0C21 12.6 12 1.5 12 1.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1.5C12 1.5 3 12.6 3 19.5a9 9 0 0 0 18 0C21 12.6 12 1.5 12 1.5Z'/%3E%3C/svg%3E"); }
.p4-concept-astuces__eclats { position: absolute; z-index: 2; left: -1%; top: -3%; width: clamp(44px, 6vw, 64px); color: var(--p4-orange); }

/* ------------------------------------------------------------ Pour qui : cartes, la dernière en tuile jaune */
@media (min-width: 1100px) {
  .p4-concept-profils { grid-template-columns: repeat(var(--p4-n, 5), minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 1099px) {
  .p4-concept-profils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p4-concept-profils > .p4-carte:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.p4-concept-profil { padding-top: clamp(26px, 3vw, 34px); }
.p4-concept-profil__motif { width: 26px; margin-bottom: 4px; color: var(--p4-orange); }
.p4-concept-profil:nth-child(3n+2) .p4-concept-profil__motif { width: 40px; }
.p4-concept-profil:nth-child(3n) .p4-concept-profil__motif { width: 17px; }
.p4-concept-profil p { font-size: 1rem; line-height: 1.55; }
.p4-concept-profils > .p4-carte:last-child { background: var(--p4-jaune); border-color: transparent; rotate: -1deg; }

/* ------------------------------------------------------------ Comparatif peinture / poterie */
.p4-concept-comparatif { position: relative; max-width: 940px; margin-inline: auto; padding: clamp(14px, 2.4vw, 26px) 0; }
.p4-concept-comparatif__rayures { inset: 0 6% 0 10%; rotate: -2deg; opacity: .9; }
.p4-concept-comparatif__carte { position: relative; padding: clamp(10px, 2vw, 22px) clamp(12px, 2.4vw, 28px); background: #fff; border: 1px solid var(--p4-trait); border-radius: var(--p4-r); box-shadow: 0 24px 50px -36px rgb(28 28 28 / .4); }
.p4-concept-tableau th, .p4-concept-tableau td { padding: 14px 16px; }
.p4-concept-tableau tr:last-child > * { border-bottom: 0; }
.p4-concept-tableau__col { vertical-align: bottom; }
.p4-concept-tableau__col > span:not(.p4-motif) { display: block; }
.p4-concept-tableau__motif { width: 22px; margin-bottom: 6px; color: var(--p4-orange); }
.p4-concept-tableau__col:not(.p4-concept-tableau__col--palma) .p4-concept-tableau__motif { width: 30px; color: var(--p4-doux); }
.p4-concept-tableau__critere { width: 22%; }
/* Colonne Palma légèrement teintée de jaune */
.p4-concept-tableau__col--palma, .p4-concept-tableau__cellule--palma { background: rgb(250 223 112 / .28); }
.p4-concept-tableau__cellule--palma { font-weight: 700; }
@media (max-width: 640px) {
  .p4-concept-comparatif__rayures { inset: 0 4% 0 4%; }
  .p4-concept-tableau, .p4-concept-tableau tbody, .p4-concept-tableau tr, .p4-concept-tableau th, .p4-concept-tableau td { display: block; width: 100%; }
  .p4-concept-tableau thead { display: none; }
  .p4-concept-tableau tbody tr { padding: 14px 0; border-bottom: 1px solid var(--p4-trait); }
  .p4-concept-tableau tbody tr:last-child { border-bottom: 0; }
  .p4-concept-tableau tbody th, .p4-concept-tableau td { padding: 0; border: 0; }
  .p4-concept-tableau tbody th { margin-bottom: 8px; font-family: var(--p4-titre); font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: var(--p4-orange); }
  .p4-concept-tableau td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 10px; padding: 6px 8px; border-radius: 8px; }
  .p4-concept-tableau td::before { content: attr(data-label); font-size: .8125rem; font-weight: 800; line-height: 1.35; color: var(--p4-texte); }
}

/* ------------------------------------------------------------ Qualité : bol du logo sur rayures */
.p4-concept-qualite__decor { width: min(100%, 400px); aspect-ratio: 1; justify-self: center; padding: 0; }
.p4-concept-page .p4-concept-qualite__decor .p4-rayures { inset: 10% 8% 6% 12%; rotate: -6deg; }
.p4-concept-qualite__bol { position: absolute; left: 14%; right: 14%; bottom: 10%; color: var(--p4-orange); }
.p4-concept-qualite__soleil { position: absolute; right: 2%; top: 2%; width: 30%; color: var(--p4-jaune-logo); }
.p4-concept-qualite__eclats { position: absolute; left: 4%; top: 6%; width: 18%; color: var(--p4-orange); }
.p4-concept-qualite__points { margin-top: 6px; font-weight: 700; }
@media (max-width: 860px) {
  .p4-concept-page .p4-bloc > .p4-concept-qualite__decor { width: min(100%, 260px); }
}

/* ------------------------------------------------------------ Téléphone */
@media (max-width: 600px) {
  .p4-concept-tete { margin-bottom: 26px; }
  .p4-concept-tete .p4-chapeau { max-width: 34ch; }
  .p4-concept-profils > .p4-carte:last-child { rotate: 0deg; }
  .p4-concept-definition__bol { right: 2%; }
}

/* ------------------------------------------------------------ Secours et mouvement réduit */
.p4-secours .p4-concept-souligne::after, .p4-secours .p4-concept-frise::before { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .p4-concept-souligne::after, .js .p4-concept-frise::before { clip-path: none !important; transition: none !important; }
}
/* ==========================================================================
   Palma V4 — page « Contact » (préfixe p4-contact-)
   Chargée après v4.css et pages-v4/00-commun.css. Titres en alternance :
   coordonnées + horaires violet, accès orange (#acces, v4.css), formulaire violet
   (souligné jaune), réseaux orange, FAQ violet.
   ========================================================================== */

.p4-contact-page address { font-style: normal; }
.p4-contact-reseaux h2 { color: var(--p4-orange); }

/* Souligné jaune dessiné au pinceau, tracé à l'apparition */
.p4-contact-souligne { position: relative; display: table; isolation: isolate; padding-bottom: 8px; }
.p4-contact-souligne::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; }
.js .p4-contact-souligne::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6, 0, .3, 1) .35s; }
.p4-contact-souligne.est-vu::after { clip-path: inset(0 0 0 0); }
.p4-secours .p4-contact-souligne::after { clip-path: none !important; }

/* ------------------------------------------------------------ Lignes de contact (liste fonctionnelle) */
.p4-contact-liens { margin-top: 22px; border-top: 1px solid var(--p4-trait); }
.p4-contact-lien { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 12px 2px; border-bottom: 1px solid var(--p4-trait); color: var(--p4-texte); text-decoration: none; }
.p4-contact-lien::after { content: "→"; font-weight: 800; color: var(--p4-orange); transition: transform .2s; }
.p4-contact-lien--externe::after { content: "↗"; }
.p4-contact-lien .p4-contact-lien__icone { width: 22px; height: 22px; color: var(--p4-orange); }
.p4-contact-lien__texte { display: flex; flex-direction: column; min-width: 0; }
.p4-contact-lien__libelle { font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.p4-contact-lien__detail { font-size: .9rem; line-height: 1.4; color: var(--p4-doux); }
.p4-contact-lien__note { margin-left: 6px; font-family: var(--p4-titre); font-size: 1.15rem; font-weight: 400; color: var(--p4-orange); white-space: nowrap; }
.p4-contact-lien:hover .p4-contact-lien__libelle { color: var(--p4-violet); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.p4-contact-lien:hover::after { transform: translateX(3px); }
.p4-contact-lien:focus-visible { outline: 3px solid var(--p4-violet); outline-offset: 3px; border-radius: 8px; }
.p4-contact-liens__titre { margin: 30px 0 10px; font-size: .8125rem; font-weight: 800; line-height: 1.25; letter-spacing: .13em; text-transform: uppercase; color: var(--p4-texte); }
.p4-contact-ecrire .p4-contact-liens { margin-top: 0; }

/* ------------------------------------------------------------ Coordonnées + horaires */
.p4-contact-infos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.p4-contact-bloc h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }
.p4-contact-adresse { margin-top: 16px; line-height: 1.6; color: var(--p4-texte); }
.p4-contact-adresse a, .p4-contact-horaires__texte a { font-weight: 700; color: var(--p4-violet); text-decoration: underline; text-underline-offset: 3px; }
.p4-contact-bloc--horaires { position: relative; isolation: isolate; }
.p4-contact-bloc--horaires h2 { padding-right: 76px; }
.p4-contact-bloc--horaires .p4-contact-horaires__rayures { z-index: -1; right: -2%; top: -34px; width: 120px; height: 104px; rotate: 8deg; opacity: .8; }
.p4-contact-bloc--horaires .p4-contact-horaires__soleil { position: absolute; right: 22px; top: -18px; width: 54px; color: var(--p4-orange); }
.p4-contact-horaires { margin-top: 20px; }
.p4-contact-horaires__texte { margin-top: 18px; }
.p4-contact-horaires__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 14px 16px; border-radius: var(--p4-r-petit); background: var(--p4-fond-2); font-size: var(--p4-fs-petit); color: var(--p4-texte); }
.p4-contact-horaires__note::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: .2em; background: var(--p4-orange); -webkit-mask: var(--p4-m-soleil) center / contain no-repeat; mask: var(--p4-m-soleil) center / contain no-repeat; }

/* ------------------------------------------------------------ Accès */
.p4-contact-acces { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 72px); align-items: center; }
.p4-contact-acces__chapeau { margin-top: 12px; }
.p4-contact-acces__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 28px; margin-top: 18px; }

/* ------------------------------------------------------------ Formulaire */
.p4-contact-ecrire { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.p4-contact-form .p4-btn.is-chargement { opacity: .7; cursor: progress; }
.p4-contact-succes .p4-contact-succes__soleil { display: block; width: 72px; margin: 0 auto 12px; color: var(--p4-jaune-logo); }
.p4-contact-succes h3:focus { outline: none; }
.p4-contact-succes p { max-width: 42ch; margin: 8px auto 0; color: var(--p4-texte); }
.p4-contact-succes p a { font-weight: 700; color: var(--p4-violet); text-decoration: underline; text-underline-offset: 3px; }
.p4-contact-succes__actions { display: flex; justify-content: center; }
.p4-contact-nouveau { padding: 0; border: 0; background: none; font: 800 1rem/1.3 Nunito, system-ui, sans-serif; cursor: pointer; }

/* ------------------------------------------------------------ Réseaux : bandeau rayé */
.p4-contact-reseaux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; gap: 24px clamp(24px, 4vw, 56px); }
.p4-contact-reseaux__titre { display: flex; align-items: flex-start; gap: 10px; }
.p4-contact-reseaux h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); }
.p4-contact-reseaux__titre .p4-contact-reseaux__eclats { flex: none; width: clamp(32px, 4vw, 44px); margin-top: -.2em; color: var(--p4-orange); }
.p4-contact-reseaux .p4-texte { margin-top: 12px; }
.p4-contact-reseaux .p4-contact-reseaux__liste { margin: 0; padding: 0 16px; border: 1px solid var(--p4-trait); border-radius: var(--p4-r-petit); background: #fff; }
.p4-contact-reseaux__liste li:last-child .p4-contact-lien { border-bottom: 0; }

/* ------------------------------------------------------------ Tablette / mobile */
@media (max-width: 860px) {
  .p4-contact-infos, .p4-contact-acces, .p4-contact-ecrire { grid-template-columns: 1fr; }
  .p4-contact-plan.p4-plan { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .p4-contact-reseaux { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .p4-contact-bloc h2, .p4-contact-adresse, .p4-contact-acces__texte, .p4-contact-ecrire__intro > :not(.p4-contact-liens), .p4-contact-reseaux__texte { text-align: center; }
  .p4-contact-bloc--horaires h2 { padding: 0 44px; }
  .p4-contact-bloc--horaires .p4-contact-horaires__soleil { right: -4px; width: 44px; }
  .p4-contact-bloc--horaires .p4-contact-horaires__rayures { width: 90px; height: 80px; right: -6%; }
  .p4-contact-acces__chapeau, .p4-contact-ecrire__intro .p4-chapeau { margin-inline: auto; }
  .p4-contact-acces__liens { justify-content: center; }
  .p4-contact-souligne { margin-inline: auto; }
  .p4-contact-plan.p4-plan { aspect-ratio: 16 / 11; }
  .p4-contact-reseaux__titre { justify-content: center; }
}

/* ------------------------------------------------------------ Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .p4-contact-lien::after { transition: none; }
  .js .p4-contact-souligne::after { clip-path: none !important; transition: none !important; }
}
/* ==========================================================================
   Palma V4 — page « Groupes & entreprises » (templates/entreprises.php), préfixe p4-ent-
   (attention : .p4-ent seul est l'en-tête du site, ne jamais l'utiliser ici).
   Chargée après v4.css et 00-commun.css. Titres violet / orange en alternance,
   textes en noir, une tuile jaune (personnalisation), un bandeau rayé (écoles),
   formulaire de devis posé sur des rayures orange.
   ========================================================================== */

/* ------------------------------------------------------------ Titres en alternance */
.p4-ent-page .p4-h2-orange h2 { color: var(--p4-orange); }

/* Liens dans les textes riches propres à la page */
.p4-ent-page :is(.p4-ent-atout p, .p4-ent-frise__texte, .p4-ent-perso__texte, .p4-ent-formule__texte, .p4-ent-formules__note) a { font-weight: 700; color: var(--p4-violet); text-decoration: underline; text-underline-offset: 3px; }

.p4-ent-texte { margin-top: 16px; }
.p4-ent-page .p4-bloc .p4-lien { margin-top: 2px; }

/* ------------------------------------------------------------ Sommaire (liens texte manuscrits, pas de pastilles) */
.p4-ent-sommaire { padding-bottom: clamp(8px, 2vw, 20px); }
.p4-ent-sommaire .p4-conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; padding-block: 14px; }
.p4-ent-sommaire .p4-conteneur::before, .p4-ent-sommaire .p4-conteneur::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--p4-orange); opacity: .35; -webkit-mask: var(--p4-m-trait) 0 50% / 60px 10px repeat-x; mask: var(--p4-m-trait) 0 50% / 60px 10px repeat-x; }
.p4-ent-sommaire .p4-conteneur::before { top: -5px; }
.p4-ent-sommaire .p4-conteneur::after { bottom: -5px; }
.p4-ent-sommaire__titre { font: 800 .8125rem/1.25 Nunito, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--p4-texte); }
.p4-ent-sommaire__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.p4-ent-sommaire__liste li { display: inline-flex; align-items: center; }
.p4-ent-sommaire__liste li::before { content: ""; flex: none; width: 11px; height: 11px; margin-right: 7px; background: var(--p4-orange); -webkit-mask: var(--p4-m-soleil) center / contain no-repeat; mask: var(--p4-m-soleil) center / contain no-repeat; }
.p4-ent-sommaire__liste a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--p4-titre); font-size: clamp(1.25rem, 1.1rem + .4vw, 1.45rem); line-height: 1.1; color: var(--p4-texte); text-decoration: underline; text-decoration-color: var(--p4-jaune); text-decoration-thickness: 3px; text-underline-offset: 6px; transition: text-decoration-color .2s; }
.p4-ent-sommaire__liste a:hover { text-decoration-color: var(--p4-orange); }
.p4-ent-sommaire__liste .p4-ent-sommaire__devis { color: var(--p4-orange); }
.p4-ent-sommaire__liste a:focus-visible { outline: 3px solid var(--p4-violet); outline-offset: 3px; border-radius: 8px; }

/* ------------------------------------------------------------ Intro + atouts */
.p4-ent-intro__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.p4-ent-liens { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 14px; }
.p4-ent-atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px clamp(20px, 3vw, 36px); }
.p4 .p4-ent-atouts .p4-ent-atout__icone { display: block; width: 28px; height: 28px; margin-bottom: 10px; color: var(--p4-orange); }
.p4-ent-atout h3 { margin-bottom: 4px; }
.p4-ent-atout p { font-size: 1rem; line-height: 1.55; color: var(--p4-texte); }

/* ------------------------------------------------------------ Blocs texte + photo */
.p4-ent-visuel { width: min(100%, 520px); justify-self: center; }
.p4-ent-visuel .p4-polaroid { position: relative; z-index: 1; }
.p4-ent-bloc--seul { grid-template-columns: 1fr; }
.p4-ent-bloc--seul > div { max-width: 70ch; }
.p4-ent-team__eclats { position: absolute; z-index: 2; left: -1%; top: -1%; width: clamp(40px, 5vw, 58px); color: var(--p4-orange); }
.p4-ent-evjf__eclats { position: absolute; z-index: 2; right: -1%; top: -2%; width: clamp(40px, 5vw, 58px); color: var(--p4-orange); }
.p4-ent-evjf__goutte { position: absolute; z-index: 2; left: 3%; bottom: 7%; width: clamp(22px, 3vw, 32px); color: var(--p4-jaune-logo); rotate: -14deg; }
.p4-ent-anniv__soleil { position: absolute; z-index: 2; right: -2%; top: -5%; width: clamp(56px, 7vw, 84px); color: var(--p4-jaune-logo); }
.p4-ent-anniv__bol { position: absolute; z-index: 2; left: -1%; bottom: 4%; width: clamp(50px, 6vw, 72px); color: var(--p4-orange); rotate: -10deg; }

/* ------------------------------------------------------------ Team building : déroulé + personnalisation */
.p4-ent-team__details { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: calc(var(--p4-esp-tete) * 1.5); }
.p4-ent-deroule__titre { margin-bottom: 20px; font-family: var(--p4-titre); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem); line-height: 1.1; color: var(--p4-violet); }
.p4-ent-frise__etape { position: relative; padding: 0 0 22px 56px; }
.p4-ent-frise__etape:last-child { padding-bottom: 0; }
.p4-ent-frise__etape::before { content: ""; position: absolute; left: 19px; top: 38px; bottom: 4px; width: 2px; background: repeating-linear-gradient(180deg, var(--p4-orange) 0 5px, transparent 5px 11px); opacity: .6; }
.p4-ent-frise__etape:last-child::before { display: none; }
.p4-ent-frise__num { position: absolute; left: 0; top: -8px; width: 40px; text-align: center; font-family: var(--p4-titre); font-size: 2.4rem; line-height: 1; color: var(--p4-orange); }
.p4-ent-frise__moment { font-weight: 800; color: var(--p4-texte); }
.p4-ent-frise__texte { font-size: 1rem; line-height: 1.55; color: var(--p4-texte); }

/* Personnalisation : la tuile jaune de la page */
.p4-ent-perso { position: relative; padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 34px); background: var(--p4-jaune); border-radius: var(--p4-r); rotate: -1.5deg; }
.p4-ent-perso > :not(.p4-ent-perso__soleil) { position: relative; }
.p4-ent-perso__titre { padding-right: 26px; font-family: var(--p4-titre); font-weight: 400; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); line-height: 1.05; color: var(--p4-violet); }
.p4-ent-perso__texte { margin-top: 8px; color: var(--p4-texte); }
.p4-ent-perso .p4-lien { margin-top: 8px; }
.p4-ent-perso__soleil { position: absolute; right: -16px; top: -24px; width: 60px; color: var(--p4-orange); }

/* ------------------------------------------------------------ Anniversaires : carte de la formule */
.p4-ent-formule { position: relative; max-width: 560px; margin-top: 26px; padding: 24px 24px 14px; background: #fff; border: 1px solid var(--p4-trait); border-radius: var(--p4-r); }
.p4-ent-formule::before { content: ""; position: absolute; top: -5px; left: 24px; width: 120px; height: 10px; background: var(--p4-orange); -webkit-mask: var(--p4-m-trait) 0 50% / 60px 10px repeat-x; mask: var(--p4-m-trait) 0 50% / 60px 10px repeat-x; }
.p4-ent-formule__titre { margin-bottom: 6px; }
.p4-ent-formule__texte { color: var(--p4-texte); }
.p4-ent-formule .p4-lien { margin-top: 4px; }

/* ------------------------------------------------------------ Écoles (bandeau rayé) + privatisation */
.p4-ent-duo__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.p4-ent-duo h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem); }
.p4-ent-duo .p4-lien { margin-top: 6px; }
.p4-ent-privat__visuel { position: relative; width: min(100%, 440px); margin: 0 auto 26px; padding: 3% 3% 0; }
.p4-ent-privat__visuel .p4-polaroid { position: relative; }
.p4-ent-privat__eclats { position: absolute; z-index: 2; left: -2%; top: -4%; width: clamp(40px, 5vw, 56px); color: var(--p4-orange); }

/* ------------------------------------------------------------ Formules et tarifs */
.p4-ent-formules__tete { max-width: 760px; margin: 0 auto var(--p4-esp-tete); text-align: center; }
.p4-ent-formules__tete .p4-chapeau { max-width: 56ch; margin-inline: auto; }
.p4-ent-souligne { position: relative; display: table; isolation: isolate; margin-inline: auto; padding-bottom: 8px; }
.p4-ent-souligne::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; }
.js .p4-ent-souligne::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6, 0, .3, 1) .35s; }
.p4-ent-souligne.est-vu::after { clip-path: inset(0 0 0 0); }
.p4-ent-formules__liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.p4-ent-formules__liste > li { display: flex; }
.p4-ent-formule-carte { flex: 1; }
.p4-ent-formule-carte .p4-carte__prix { margin-block: 2px 4px; font-size: clamp(1.7rem, 1.5rem + .6vw, 2rem); line-height: 1.05; color: var(--p4-orange); }
.p4-ent-formule-carte__inclus { margin: 6px 0 10px; font-size: .97rem; line-height: 1.45; }
.p4-ent-formules__note { max-width: 70ch; margin: 24px auto 0; text-align: center; font-size: var(--p4-fs-petit); color: var(--p4-texte); }

/* ------------------------------------------------------------ Demande de devis (formulaire sur rayures orange) */
.p4-ent-devis__grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.p4-ent-devis__texte { padding-top: 12px; }
.p4-ent-etapes { display: grid; gap: 12px; margin: 26px 0; }
.p4-ent-etapes__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; column-gap: 12px; font-weight: 700; color: var(--p4-texte); }
.p4-ent-etapes__num { font-family: var(--p4-titre); font-weight: 400; font-size: 2.2rem; line-height: 1; text-align: center; color: var(--p4-orange); }
.p4-ent-devis__petit { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding-top: 14px; border-top: 1px dashed var(--p4-trait); font-weight: 700; color: var(--p4-texte); }
.p4-ent-devis__zone { position: relative; isolation: isolate; padding: 18px 0; }
.p4-ent-page .p4-ent-devis__rayures { z-index: -1; inset: 0 -14px 0 32%; rotate: 3deg; opacity: .8; }
.p4-ent-devis .p4-btn.is-chargement { opacity: .7; cursor: progress; }
.p4-ent-devis .p4-btn:disabled { transform: none; }

/* Bloc « demande envoyée » */
.p4-ent-succes__soleil { display: block; width: 72px; margin: 0 auto 10px; color: var(--p4-jaune-logo); }
.p4-ent-succes h3:focus { outline: none; }
.p4-ent-succes p { max-width: 40ch; margin: 8px auto 0; color: var(--p4-texte); }
.p4-ent-succes__nouveau { padding: 0; border: 0; background: transparent; font-family: inherit; font-size: inherit; cursor: pointer; }

/* ------------------------------------------------------------ Tablette et téléphone */
@media (max-width: 860px) {
  .p4-ent-intro__grille, .p4-ent-team__details, .p4-ent-duo__grille, .p4-ent-devis__grille { grid-template-columns: 1fr; }
  .p4-ent-perso { max-width: 560px; width: 100%; margin-inline: auto; rotate: -1deg; }
  .p4-ent-devis__texte { padding-top: 0; }
}
@media (max-width: 600px) {
  .p4-ent-sommaire .p4-conteneur { gap: 0 12px; }
  .p4-ent-sommaire__titre { width: 100%; text-align: center; font-size: .78rem; letter-spacing: .1em; }
  .p4-ent-sommaire__liste { gap: 0 14px; }
  .p4-ent-sommaire__liste li::before { margin-right: 5px; width: 9px; height: 9px; }
  .p4-ent-devis .p4-btn { padding-inline: 20px; font-size: 1.0625rem; }
  .p4-ent-sommaire__liste a { font-size: 1.2rem; }
  .p4-ent-perso { rotate: 0deg; }
  .p4-ent-perso__soleil { right: -4px; top: -22px; width: 50px; }
  .p4-ent-page .p4-ent-devis__rayures { inset: 0 0 0 22%; rotate: 2deg; }
  .p4-ent-devis__zone { padding: 12px 0; }
  .p4-ent-formules__tete { margin-bottom: 26px; }
}
@media (max-width: 520px) {
  .p4-ent-atouts { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 359px) {
  .p4-ent-devis .p4-btn { padding-inline: 14px; font-size: 1rem; }
}

/* ------------------------------------------------------------ Secours et mouvement réduit */
.p4-secours .p4-ent-souligne::after { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .p4-ent-souligne::after { clip-path: none !important; transition: none !important; }
  .p4-ent-sommaire__liste a { transition: none; }
}
/* ==========================================================================
   Palma V4 — pages légales (préfixe p4-legal-) et page introuvable (préfixe p4-404-)
   Chargée après v4.css et pages-v4/00-commun.css.
   ========================================================================== */

/* ------------------------------------------------------------ Pages légales : en-tête */
.p4-legal-tete .p4-tete-page__texte { position: relative; padding-bottom: 34px; }
.p4-legal-tete .p4-legal-soleil { display: block; width: 52px; margin: 0 auto 14px; color: var(--p4-jaune-logo); }
.p4-legal-tete .p4-legal-rayures { left: 50%; bottom: 0; width: 190px; height: 24px; translate: -50% 0; rotate: -3deg; }

/* Corps : colonne de lecture (blocs rendus par pm_render_blocs) */
.p4-legal-corps { padding-top: 0; }
.p4-legal-prose { overflow-wrap: break-word; color: var(--p4-texte); }
.p4-legal-prose h2 { color: var(--p4-orange); }
.p4-legal-prose .prose > h2:first-child { margin-top: 0; }
.p4-legal-prose h3 { color: var(--p4-violet); }
/* Les puces soleil viennent de 00-commun.css : on masque la coche du sprite */
.p4-legal-prose .liste-coches .icone { display: none; }

/* ------------------------------------------------------------ Page introuvable */
.p4-404 { padding-block: clamp(40px, 6vw, 96px) var(--p4-esp); text-align: center; }
.p4-404__bloc { max-width: 760px; }
.p4-404__visuel { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.6vw, 18px); width: fit-content; max-width: 100%; margin: 0 auto clamp(14px, 2vw, 24px); }
.p4-404__visuel .p4-404__rayures { z-index: -1; inset: 16% 18% 4% 18%; rotate: -7deg; }
.p4-404__code { display: flex; align-items: center; gap: .05em; font-family: var(--p4-titre); font-size: clamp(5rem, 3.2rem + 9vw, 11rem); line-height: .9; color: var(--p4-orange); }
.p4-404__code .p4-404__bol { width: .78em; color: var(--p4-violet); }
.p4-404__visuel .p4-404__eclats { flex: none; align-self: flex-start; width: clamp(30px, 5vw, 56px); color: var(--p4-jaune-logo); }
.p4-404 h1 { max-width: 18ch; margin-inline: auto; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1.02; }
.p4-404 .p4-chapeau { margin-inline: auto; }
.p4-404 .p4-chapeau a { font-weight: 700; color: var(--p4-violet); text-decoration: underline; text-underline-offset: 3px; }
.p4-404__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; margin-top: 30px; }

@media (max-width: 520px) {
  .p4-404__actions { flex-direction: column; gap: 6px; }
  .p4-404__actions .p4-btn { width: 100%; }
}
/* ==========================================================================
   Palma V4 — page « Nos pièces & tarifs » (templates/pieces.php)
   Chargée après v4.css et pages-v4/00-commun.css. Préfixe : p4-pieces-.
   Seule page avec des prix. Titres en alternance violet / orange, textes en
   noir ; aplats : une tuile jaune (compris dans le prix) et un bandeau rayé
   (groupes). Familles en polaroïds, prix manuscrits soulignés de jaune.
   ========================================================================== */

/* ------------------------------------------------------------ Titres */
.p4-pieces-page .p4-h2-orange h2, .p4-pieces-page #faq h2 { color: var(--p4-orange); }
.p4-pieces-page h2 + .p4-texte { margin-top: 18px; }
.p4-pieces-page .p4-texte { font-size: var(--p4-fs-texte); line-height: 1.7; }

/* Tête de section centrée : surtitre, titre, chapeau */
.p4-pieces-tete { max-width: 760px; margin: 0 auto var(--p4-esp-tete); text-align: center; }
.p4-pieces-tete .p4-chapeau { margin-inline: auto; max-width: 52ch; }

/* Souligné jaune dessiné au pinceau, tracé à l'apparition */
.p4-pieces-souligne { position: relative; display: table; isolation: isolate; margin-inline: auto; padding-bottom: 8px; }
.p4-pieces-souligne::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; }
.js .p4-pieces-souligne::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6,0,.3,1) .35s; }
.p4-pieces-souligne.est-vu::after { clip-path: inset(0 0 0 0); }

/* La photo passe au-dessus des rayures (elles sont en position absolue) */
.p4-pieces-page .p4-bloc__visuel .p4-polaroid { position: relative; }

/* ------------------------------------------------------------ Calcul du prix */
.p4-pieces-prix__grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.p4-pieces-forfait { position: relative; margin-top: 30px; padding-left: 62px; }
.p4-pieces-forfait__eclats { position: absolute; left: 0; top: -6px; width: 46px; color: var(--p4-orange); }
.p4-pieces-forfait h3 { margin-bottom: 4px; }
.p4-pieces-forfait p { max-width: 56ch; color: var(--p4-texte); }

/* Tuile jaune « compris dans le prix » (le seul aplat jaune de la page) */
.p4-pieces-inclus { position: relative; isolation: isolate; padding: clamp(28px, 3vw, 40px) clamp(24px, 2.8vw, 36px); background: var(--p4-jaune); border-radius: var(--p4-r); rotate: -1.5deg; }
.p4-pieces-inclus h3 { position: relative; z-index: 1; margin-bottom: 18px; padding-right: 26px; font-family: var(--p4-titre); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); line-height: 1.05; color: var(--p4-violet); }
.p4-pieces-inclus__liste { position: relative; z-index: 1; }
.p4-pieces-inclus__liste li { color: var(--p4-texte); font-weight: 700; }
.p4-pieces-inclus .p4-lien { position: relative; z-index: 1; margin-top: 14px; }
.p4-pieces-inclus__soleil { position: absolute; z-index: 0; right: -16px; top: -24px; width: 62px; color: var(--p4-orange); }
@media (max-width: 860px) {
  .p4-pieces-prix__grille { grid-template-columns: 1fr; }
  .p4-pieces-inclus { width: min(100%, 560px); margin-inline: auto; rotate: -1deg; }
}

/* ------------------------------------------------------------ Familles : polaroïds + prix manuscrits */
.p4-pieces-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4.5vw, 60px) clamp(22px, 3vw, 42px); }
.p4-pieces-famille__photo { transition: rotate .4s cubic-bezier(.2,.7,.3,1), translate .4s cubic-bezier(.2,.7,.3,1); }
.p4-pieces-famille:nth-child(odd) .p4-pieces-famille__photo { rotate: -1.4deg; }
.p4-pieces-famille:nth-child(even) .p4-pieces-famille__photo { rotate: 1.4deg; }
.p4-pieces-famille:hover .p4-pieces-famille__photo { rotate: 0deg; translate: 0 -3px; }
.p4-pieces-famille__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 14px; margin-top: 20px; }
.p4-pieces-famille__tete h3 { flex: 1 1 12ch; }
/* Prix : « dès » en petit, le montant en grand, souligné de jaune */
.p4-pieces-famille__prix { flex: none; isolation: isolate; font-family: var(--p4-titre); font-size: 1.35rem; line-height: 1; color: var(--p4-orange); white-space: nowrap; }
.p4-pieces-famille__prix b { position: relative; font-weight: 400; font-size: 2.2rem; }
.p4-pieces-famille__prix b::after { content: ""; position: absolute; z-index: -1; left: -6%; right: -6%; bottom: .02em; height: .34em; 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-pieces-famille__texte { margin-top: 6px; color: var(--p4-texte); }
.p4-pieces-famille__texte a { font-weight: 700; color: var(--p4-violet); text-decoration: underline; text-underline-offset: 3px; }
.p4-pieces-famille__exemples { position: relative; margin-top: 8px; padding-left: 20px; font-size: var(--p4-fs-petit); line-height: 1.5; color: var(--p4-texte); }
.p4-pieces-famille__exemples::before { content: ""; position: absolute; left: 2px; top: .3em; width: 10px; height: 13px; background: var(--p4-orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1.5C12 1.5 3 12.6 3 19.5a9 9 0 0 0 18 0C21 12.6 12 1.5 12 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1.5C12 1.5 3 12.6 3 19.5a9 9 0 0 0 18 0C21 12.6 12 1.5 12 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Note sous les tarifs, annoncée par un petit trait ondulé orange */
.p4-pieces-note { position: relative; max-width: 62ch; margin: var(--p4-esp-tete) auto 0; padding-top: 22px; text-align: center; font-size: var(--p4-fs-petit); color: var(--p4-texte); }
.p4-pieces-note::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; }

@media (max-width: 1020px) {
  .p4-pieces-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* Téléphone : une famille par ligne, petit polaroïd à gauche, texte à droite */
  .p4-pieces-grille { grid-template-columns: 1fr; gap: 30px; }
  .p4-pieces-famille { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .p4-pieces-famille__tete { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
  .p4-pieces-famille__tete h3 { flex: none; }
  .p4-pieces-famille__prix b { font-size: 1.9rem; }
  .p4-pieces-famille__texte { font-size: 1rem; line-height: 1.5; }
  .p4 .p4-pieces-famille__photo img { aspect-ratio: 1 / 1; }
}

/* ------------------------------------------------------------ Nouveautés */
.p4-pieces-nouveautes .p4-lien { margin-top: 4px; }
.p4-pieces-nouveautes__eclats { position: absolute; z-index: 2; right: -1%; top: -3%; width: clamp(44px, 6vw, 64px); color: var(--p4-orange); }

/* ------------------------------------------------------------ Idées de cadeaux */
.p4-pieces-idee { padding-top: clamp(26px, 3vw, 34px); }
.p4-pieces-idee__motif { width: 26px; margin-bottom: 4px; color: var(--p4-orange); }
.p4-pieces-idee:nth-child(3n+2) .p4-pieces-idee__motif { width: 40px; }
.p4-pieces-idee:nth-child(3n) .p4-pieces-idee__motif { width: 17px; }

/* ------------------------------------------------------------ Tarifs groupes : bandeau rayé */
.p4-pieces-groupes__bandeau { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px clamp(28px, 4vw, 56px); }
.p4-pieces-groupes__bandeau h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); padding-right: 44px; }
.p4-pieces-groupes__bandeau .p4-texte { max-width: 60ch; }
.p4-bandeau-raye > .p4-pieces-groupes__bol { position: absolute; z-index: 1; right: clamp(16px, 2.4vw, 28px); top: clamp(14px, 2vw, 22px); width: 46px; color: var(--p4-orange); rotate: 10deg; }
@media (max-width: 760px) {
  .p4-pieces-groupes__bandeau { grid-template-columns: 1fr; }
  .p4-pieces-groupes__lien { justify-self: start; }
}

/* ------------------------------------------------------------ Téléphone */
@media (max-width: 600px) {
  .p4-pieces-tete { margin-bottom: 26px; }
  .p4-pieces-tete .p4-chapeau { max-width: 34ch; }
  .p4-pieces-forfait { padding-left: 52px; }
  .p4-pieces-forfait__eclats { width: 40px; }
  .p4-pieces-inclus { rotate: 0deg; }
  .p4-pieces-inclus__soleil { width: 50px; right: -6px; top: -20px; }
  .p4-bandeau-raye > .p4-pieces-groupes__bol { width: 38px; }
}

/* ------------------------------------------------------------ Secours et mouvement réduit */
.p4-secours .p4-pieces-souligne::after { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .p4-pieces-souligne::after { clip-path: none !important; transition: none !important; }
  .p4-pieces-famille__photo { transition: none; }
  .p4-pieces-famille:hover .p4-pieces-famille__photo { translate: none; }
}