/* =====================================================================
   Page « Séjour romantique, en famille ou anniversaire » (/sejour-romantique-anniversaire)
   Même monde que les pages Activités et Contact : en-tête orange, polaroïd,
   fond crème, titres en Rancho.
   ===================================================================== */

.occ-espace-entete { height: var(--hauteur-entete, 112px); background: #e7a45c; }

.page-occasions {
    --occ-fond: #fffaf3;
    --occ-papier: #fcefdc;
    --occ-orange: #e7a45c;
    --occ-encre: #3d2614;
    --occ-titre: #4a260b;
    --occ-texte: #5a4232;
    --occ-doux: #6e5340;
    --occ-brun: #7a4612;
    --occ-action: #a2631d;
    --occ-violet: #6f2a86;
    --occ-rose: #b4234a;
    --occ-vert: #0e7a3e;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    display: block;
    background: var(--occ-fond);
    color: var(--occ-encre);
}
.page-occasions ::selection { background: var(--occ-violet); color: #fff; }
.page-occasions h1, .page-occasions h2 { font-family: 'Rancho', cursive; font-weight: 400; letter-spacing: 0; color: var(--occ-titre); }
.page-occasions h1 span { font-family: inherit; }
.page-occasions a:focus-visible, .page-occasions summary:focus-visible { outline: 3px solid var(--occ-action); outline-offset: 3px; }
.page-occasions svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-occasions .icone-whatsapp { stroke: none; }

/* ---------- En-tête : le texte et la balançoire en polaroïd ---------- */
.occ-tete { display: grid; gap: 30px; align-items: center; padding: 18px 16px 40px; background: var(--occ-orange); }
.occ-tete > * { min-width: 0; }
.occ-surtitre { font-size: .9rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b3a0f; }
.occ-tete h1 { display: flex; align-items: center; gap: .2em; margin-top: 6px; font-size: clamp(3rem, 12vw, 5.2rem); line-height: .95; text-wrap: balance; }
.occ-fleur-titre { flex: none; width: .8em; height: .8em; }
/* Le titre <h1> en deux parties : la grande accroche, puis le sujet de la page (référencement) */
.occ-tete h1 { flex-direction: column; align-items: flex-start; gap: 12px; }
.occ-titre-haut { display: flex; align-items: center; gap: .2em; }
.page-occasions h1 .occ-titre-sous {
    display: block; max-width: 34ch; font-family: 'Poppins', sans-serif; font-weight: 600;
    font-size: clamp(1.05rem, 3.6vw, 1.3rem); line-height: 1.35; color: #4f2c10; text-wrap: balance;
}
.occ-accroche { max-width: 46ch; margin-top: 14px; font-size: 1.08rem; line-height: 1.6; color: #4f2c10; }
.occ-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }

.occ-polaroid {
    justify-self: center; width: min(100%, 420px); margin: 0; padding: 10px 10px 16px; border-radius: 6px;
    background: #fff; box-shadow: 0 22px 40px -22px rgba(74, 38, 11, .9);
    transform: rotate(1.6deg); animation: occ-poser .6s var(--ease-out) both;
}
.occ-polaroid img { display: block; width: 100%; height: auto; border-radius: 3px; }
.occ-polaroid figcaption { margin-top: 12px; padding: 0 4px; font-size: .95rem; line-height: 1.55; color: var(--occ-texte); }
.occ-polaroid figcaption strong {
    display: block; margin-bottom: 2px; font-family: 'Rancho', cursive; font-weight: 400; font-size: 1.7rem; line-height: 1.05; color: var(--occ-titre);
}
@keyframes occ-poser { from { opacity: 0; transform: translateY(14px) rotate(0deg) scale(.97); } }
@media (min-width: 900px) {
    .occ-tete { grid-template-columns: 1.1fr .9fr; gap: 56px; padding: 40px max(32px, calc((100% - 1180px) / 2)) 64px; }
}

/* ---------- Boutons ---------- */
.page-occasions a.occ-bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 0 24px; border-radius: 999px;
    background: var(--occ-titre); color: #fff; font-weight: 600; text-decoration: none;
    box-shadow: 0 10px 22px -14px rgba(74, 38, 11, .9);
    transition: background-color .2s ease, transform .16s var(--ease-out);
}
.page-occasions a.occ-bouton-whatsapp { background: var(--occ-vert); }
.page-occasions a.occ-bouton .icone-whatsapp { width: 20px; height: 20px; }
.page-occasions a.occ-bouton:active { transform: scale(.97); }

/* ---------- Blocs ---------- */
.occ-bloc { max-width: 1180px; margin: 0 auto; padding: 48px 16px 8px; }
.occ-bloc h2 { font-size: clamp(2.3rem, 7vw, 3.1rem); line-height: 1; text-wrap: balance; }
.occ-intro { max-width: 62ch; margin-top: 12px; font-size: 1.02rem; line-height: 1.7; color: var(--occ-texte); }

/* Les quatre occasions */
.occ-cartes { display: grid; gap: 16px; margin-top: 26px; }
.occ-carte {
    display: flex; flex-direction: column; padding: 22px 20px 18px; border-radius: 18px;
    background: #fff; border: 1px solid #f0e2cf; box-shadow: 0 14px 30px -26px rgba(74, 38, 11, .9);
    scroll-margin-top: calc(var(--entete-compacte, 0px) + 16px);
}
.occ-carte-icone { width: 34px; height: 34px; color: var(--occ-rose); }
.occ-carte.avec-photo { overflow: hidden; padding-top: 0; }
/* Photo collée aux bords de la carte : sa largeur rattrape les marges négatives (sinon une bande blanche à droite ;
   max-width: none, car style.css limite tout à 100 % ; min-height: 0 pour garder le format 4:3) */
.occ-carte-photo { display: block; width: calc(100% + 40px); max-width: none; min-height: 0; margin: 0 -20px 16px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--occ-papier); }
.occ-carte-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.occ-carte.avec-photo .occ-carte-icone { width: 28px; height: 28px; }
.occ-carte h3 { margin-top: 10px; font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: var(--occ-encre); }
.occ-carte-sous { margin-top: 2px; font-size: .92rem; font-weight: 600; color: var(--occ-action); }
.occ-carte p:not(.occ-carte-sous) { margin-top: 10px; font-size: .98rem; line-height: 1.65; color: var(--occ-texte); }
.occ-carte-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: auto; padding-top: 16px; }
.page-occasions a.occ-lien {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    font-weight: 600; color: var(--occ-brun);
    text-decoration: underline; text-decoration-color: rgba(122, 70, 18, .35); text-underline-offset: 4px;
    transition: text-decoration-color .2s ease;
}
.page-occasions a.occ-lien-whatsapp { color: var(--occ-vert); text-decoration-color: rgba(14, 122, 62, .35); }
.page-occasions a.occ-lien .icone-whatsapp { width: 18px; height: 18px; }
@media (min-width: 640px) { .occ-cartes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .occ-cartes { grid-template-columns: repeat(4, 1fr); } }

/* Comment ça se passe */
.occ-etapes { display: grid; gap: 14px; max-width: 760px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: etape; }
.occ-etapes li {
    position: relative; padding: 4px 0 4px 50px; list-style: none; counter-increment: etape;
    font-size: 1.02rem; line-height: 1.6; color: var(--occ-texte);
}
.occ-etapes li strong { color: var(--occ-encre); }
.occ-etapes li::before {
    content: counter(etape); position: absolute; left: 0; top: 0;
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--occ-papier); color: var(--occ-brun); font-weight: 700;
}
@media (min-width: 900px) {
    .occ-etapes { grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: none; }
    .occ-etapes li { padding: 50px 0 0; }
}

/* Questions */
.occ-questions { display: grid; gap: 10px; max-width: 820px; margin-top: 22px; }
.occ-questions details { border-radius: 14px; background: #fff; border: 1px solid #f0e2cf; }
.occ-questions summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 12px 18px; cursor: pointer; list-style: none;
    font-weight: 600; line-height: 1.4; color: var(--occ-encre);
}
.occ-questions summary::-webkit-details-marker { display: none; }
.occ-questions summary::after {
    content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
    border-right: 2px solid var(--occ-action); border-bottom: 2px solid var(--occ-action);
    transform: rotate(45deg); transition: transform .2s var(--ease-out);
}
.occ-questions details[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.occ-questions details p { padding: 0 18px 16px; line-height: 1.65; color: var(--occ-texte); }

/* Fin de page */
.occ-fin { margin-top: 56px; padding: 52px 16px 60px; text-align: center; background: var(--occ-papier); }
.occ-fin h2 { font-size: clamp(2.3rem, 7vw, 3.1rem); line-height: 1; text-wrap: balance; }
.occ-fin p { max-width: 52ch; margin: 12px auto 0; line-height: 1.65; color: var(--occ-texte); }
.occ-fin .occ-actions { justify-content: center; }
.page-occasions a.occ-lien-clair {
    padding: 12px 0; font-weight: 600; color: var(--occ-brun);
    text-decoration: underline; text-decoration-color: rgba(122, 70, 18, .35); text-underline-offset: 4px;
}
.occ-fin-tel { font-size: .95rem; }
.page-occasions .occ-fin-tel a { color: var(--occ-brun); font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
    .page-occasions a.occ-bouton:hover { background: var(--occ-brun); }
    .page-occasions a.occ-bouton-whatsapp:hover { background: #0c8a44; }
    .page-occasions a.occ-lien:hover, .page-occasions a.occ-lien-clair:hover { text-decoration-color: currentColor; }
    .occ-questions summary:hover { color: var(--occ-brun); }
}
@media (prefers-reduced-motion: reduce) {
    .occ-polaroid { animation: none; }
    .page-occasions a.occ-bouton:active { transform: none; }
    .occ-questions summary::after { transition: none; }
}