/* ============================================================
   Page « Entreprises et événements »
   /fr/videaste-et-photographe/entreprises-et-evenements/
   ------------------------------------------------------------
   Couleurs B2B sans quitter la DA : les blocs forts prennent le
   bleu nuit #10003f (le fond du mode sombre du site), le reste
   garde les panneaux clairs, les violets et les arrondis de
   l'accueil. Pas de rose poudré : il reste au parcours mariage.
   Le mur de logos réutilise .home-clients (1assets/home-univers.css).
   ============================================================ */

.pro-page {
    --pro-night: #10003f;
    --pro-violet: #7057e6;
    --pro-violet-strong: #5038ca;
    --pro-violet-soft: #c7b8ff;
    --pro-ink: #171326;
    --pro-muted: rgba(23, 19, 38, 0.72);
    --pro-line: rgba(105, 82, 227, 0.14);
    --pro-card: rgba(255, 255, 255, 0.72);
    --pro-panel:
        radial-gradient(circle at 8% 0%, rgba(128, 101, 255, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(250, 248, 255, 0.98), rgba(240, 236, 255, 0.9));
    --pro-night-panel:
        radial-gradient(circle at 0% 0%, rgba(128, 101, 255, 0.32), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(162, 89, 255, 0.2), transparent 40%),
        linear-gradient(135deg, #1b0b5c 0%, #10003f 55%, #0b002e 100%);
    --pro-shadow: 0 22px 58px rgba(48, 32, 112, 0.12);
    --pro-width: min(1180px, calc(100% - 32px));
    display: block;
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

/* box-sizing limité aux blocs de la page (styleA01.css ne le pose pas globalement,
   et le mini-contact ou la FAQ ont leurs propres règles). */
.pro-hero,
.pro-hero *,
.pro-section,
.pro-section *,
.pro-contact,
.pro-contact__copy * {
    box-sizing: border-box;
}

.pro-page .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Éléments communs ---------- */
.pro-eyebrow {
    display: inline-block;
    width: fit-content;
    padding: 0.28rem 0.78rem;
    border: 1px solid rgba(105, 82, 227, 0.18);
    border-radius: 999px;
    color: #6952df;
    background: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.pro-eyebrow--night {
    color: var(--pro-violet-soft);
    border-color: rgba(199, 184, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
}

.pro-tag {
    display: inline-block;
    width: fit-content;
    padding: 0.26rem 0.66rem;
    border-radius: 999px;
    color: var(--pro-violet-strong);
    background: rgba(112, 87, 230, 0.1);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.pro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.75rem 1.3rem;
    /* Valable aussi pour un <button> : pas de bordure ni de police système, la main au survol. */
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.pro-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #7d5cff 0%, #a259ff 100%);
    box-shadow: 0 12px 30px rgba(122, 82, 255, 0.36);
}

.pro-btn--primary:hover,
.pro-btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(122, 82, 255, 0.5);
}

.pro-btn--ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.06);
}

.pro-btn--ghost:hover,
.pro-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.16);
}

.pro-btn:focus-visible,
.pro-reviews__head .pricing-google-rating:focus-visible {
    outline: 3px solid #a259ff;
    outline-offset: 3px;
}

/* ---------- Hero : vidéo bord à bord et collée en haut (sous l'en-tête flottant),
   texte aligné sur la largeur du site ---------- */
html:has(.pro-hero),
body:has(.pro-hero) {
    padding-top: 0 !important;
}

.pro-hero {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: clamp(620px, 90svh, 860px);
    margin: 0;
    overflow: hidden;
    color: #fff;
    background: var(--pro-night) url("/2src/xrefvideo/entreprises-et-evenements/boucle-pro-poster.webp") center / cover no-repeat;
    isolation: isolate;
}

.pro-hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pro-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(12, 0, 46, 0.9) 0%, rgba(16, 0, 63, 0.7) 38%, rgba(16, 0, 63, 0.18) 72%, rgba(16, 0, 63, 0.1) 100%),
        linear-gradient(0deg, rgba(12, 0, 46, 0.6) 0%, transparent 50%);
}

.pro-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--pro-width);
    margin: 0 auto;
    padding: clamp(6.5rem, 9vw, 7.5rem) 0 clamp(3rem, 5vw, 4rem);
}

/* Titre en deux temps : la promesse sur une ou deux lignes équilibrées,
   puis « et les événements » en violet sur sa propre ligne (jamais coupé). */
.pro-hero h1 {
    max-width: 15.5em;
    margin: 1rem 0 0;
    color: #fff;
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-align: left;
    text-wrap: balance;
}

.pro-hero h1 span {
    display: block;
    color: var(--pro-violet-soft);
}

.pro-hero__lead {
    max-width: 36em;
    margin: 1.25rem 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1rem, 1.4vw, 1.14rem);
    line-height: 1.6;
    text-wrap: pretty;
}

.pro-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.9rem;
}

/* Réassurance : une ligne de preuves séparée par un filet, plus de pastilles
   (elles concurrençaient les deux boutons). */
.pro-hero__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1.6rem;
    width: 100%;
    max-width: 760px;
    margin: 2rem 0 0;
    padding: 1.15rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    list-style: none;
}

.pro-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
}

.pro-hero__trust li:not(:first-child)::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pro-violet-soft);
    box-shadow: 0 0 0 3px rgba(199, 184, 255, 0.18);
}

.pro-stars {
    color: #ffc94d;
    letter-spacing: 0.05em;
}

/* Bouton rond à icône, dans le coin bas droit de la vidéo. Le texte reste dans le
   bouton (nom accessible, mis à jour par le JS) mais n'est pas affiché ;
   l'icône suit aria-pressed : deux barres = pause, triangle = relancer. */
.pro-hero__toggle {
    position: absolute;
    right: clamp(12px, 1.6vw, 22px);
    bottom: clamp(12px, 1.6vw, 22px);
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: transparent;
    background: rgba(16, 0, 63, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 0;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.pro-hero__toggle:hover,
.pro-hero__toggle:focus-visible {
    opacity: 1;
    background: rgba(16, 0, 63, 0.8);
}

/* Icône centrée en absolu : le texte caché resterait sinon un élément de la grille. */
.pro-hero__toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 14px;
    background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px);
    transform: translate(-50%, -50%);
}

.pro-hero__toggle[aria-pressed="true"]::before {
    margin-left: 2px;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pro-hero__toggle:focus-visible {
    outline: 3px solid #c7b8ff;
    outline-offset: 2px;
}

/* ---------- Mur de logos (réglages propres à la page) ---------- */
/* Le bandeau défile juste sous la vidéo : un seul bloc nuit, bord à bord. */
.home-clients.pro-clients {
    margin: 0;
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ---------- Sections ---------- */
.pro-section {
    width: var(--pro-width);
    margin: clamp(2.2rem, 5vw, 3.6rem) auto 0;
    padding: clamp(1.4rem, 3.4vw, 2.6rem);
    border: 1px solid var(--pro-line);
    border-radius: 28px;
    color: var(--pro-ink);
    background: var(--pro-panel);
    box-shadow: var(--pro-shadow);
    scroll-margin-top: 96px;
}

.pro-section--night {
    border-color: rgba(162, 137, 255, 0.18);
    color: #fff;
    background: var(--pro-night-panel);
    box-shadow: 0 22px 58px rgba(48, 32, 112, 0.2);
}

.pro-section__head {
    display: grid;
    justify-items: start;
    gap: 0.6rem;
    max-width: 780px;
    margin-bottom: clamp(1.2rem, 2.8vw, 2rem);
}

.pro-section h2,
.pro-contact h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-align: left;
}

.pro-section h2 span,
.pro-contact h2 span {
    color: var(--pro-violet);
}

.pro-section--night h2 span {
    color: var(--pro-violet-soft);
}

.pro-section__head p {
    margin: 0;
    color: var(--pro-muted);
    font-size: clamp(1rem, 1.3vw, 1.08rem);
    line-height: 1.55;
}

.pro-section--night .pro-section__head p {
    color: rgba(255, 255, 255, 0.78);
}

.pro-section h3 {
    margin: 0;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: left;
}

/* ---------- Réalisations : rangées justifiées ----------
   Chaque tuile reçoit son format (--r = largeur / hauteur) : dans une rangée,
   flex-grow = format, donc toutes les tuiles prennent la même hauteur sans recadrage
   notable, qu'elles soient horizontales (16:9) ou verticales (9:16). */
.pro-refs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
}

.pro-refs__head .pro-section__head {
    margin-bottom: 0;
}

.pro-refs__tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--pro-line);
    border-radius: 999px;
    background: rgba(112, 87, 230, 0.07);
}

.pro-refs__tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.45rem 1.05rem;
    border: 0;
    border-radius: 999px;
    color: var(--pro-muted);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pro-refs__tabs button span {
    font-size: 0.72rem;
    opacity: 0.7;
}

.pro-refs__tabs button[aria-selected="true"] {
    color: var(--pro-ink);
    background: #fff;
    box-shadow: 0 6px 18px rgba(48, 32, 112, 0.12);
}

.pro-reel {
    display: grid;
    gap: 8px;
}

.pro-reel[hidden] {
    display: none;
}

.pro-reel__row {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pro-tile {
    flex: var(--r) 1 0;
    min-width: 0;
    aspect-ratio: var(--r);
    container-type: inline-size;
}

/* Photos : mêmes hauteurs de rangées que les vidéos, pour que le bloc ne saute
   pas quand on change d'onglet. Une rangée vidéo justifiée mesure
   (largeur − espaces) / somme des --r : 3 tuiles (16:9, 9:16, 16:9) = 4.1185,
   puis 4 tuiles (16:9, 9:16, 9:16, 16:9) = 4.681. À recalculer si les vidéos changent. */
@media (min-width: 900px) {
    .pro-reel {
        container-type: inline-size;
    }

    .pro-reel--photos .pro-tile {
        aspect-ratio: auto;
    }

    .pro-reel--photos .pro-reel__row:nth-child(1) {
        height: calc((100cqw - var(--row-gaps, 16px)) / var(--row-r, 4.1185));
    }

    .pro-reel--photos .pro-reel__row:nth-child(2) {
        height: calc((100cqw - var(--row-gaps, 24px)) / var(--row-r, 4.681));
    }
}

.pro-tile__btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: var(--pro-night);
    font: inherit;
    text-align: left;
    cursor: pointer;
    isolation: isolate;
}

.pro-tile__btn img,
.pro-tile__btn video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, opacity 0.4s ease;
}

.pro-tile__btn video {
    opacity: 0;
}

.pro-tile__btn.is-live video {
    opacity: 1;
}

.pro-tile__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(10, 0, 40, 0.86) 0%, rgba(10, 0, 40, 0.25) 42%, transparent 62%);
    transition: opacity 0.3s ease;
}

.pro-tile__btn:hover img,
.pro-tile__btn:hover video,
.pro-tile__btn:focus-visible img,
.pro-tile__btn:focus-visible video {
    transform: scale(1.035);
}

.pro-tile__btn:focus-visible {
    outline: 3px solid #a259ff;
    outline-offset: 3px;
}

.pro-tile__meta {
    position: absolute;
    right: 12px;
    bottom: 11px;
    left: 12px;
    display: grid;
    gap: 2px;
    line-height: 1.25;
}

.pro-tile__tag {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pro-tile__meta strong {
    font-size: 0.98rem;
    font-weight: 800;
}

.pro-tile__value {
    color: #ddd3ff;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Tuile étroite (vidéo verticale) : on garde le nom, la promesse passe dans la fenêtre. */
@container (max-width: 190px) {
    .pro-tile__value,
    .pro-tile__tag {
        display: none;
    }

    .pro-tile__meta strong {
        font-size: 0.88rem;
    }
}

.pro-tile__time {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem 0.22rem 0.45rem;
    border-radius: 999px;
    background: rgba(16, 0, 63, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.pro-tile__time::before {
    content: "";
    width: 7px;
    height: 8px;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Photos : même hiérarchie et même lisibilité que les vidéos. */
.pro-tile--photo .pro-tile__btn::after,
.pro-tile--photo .pro-tile__meta {
    opacity: 1;
}


/* ---------- Fenêtre de lecture ---------- */
.pro-lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
}

.pro-lightbox::backdrop {
    background: rgba(8, 0, 30, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.pro-lightbox[open] {
    display: grid;
    place-items: center;
}

.pro-lightbox__frame {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    max-width: min(1120px, calc(100vw - 32px));
}

.pro-lightbox__media video,
.pro-lightbox__media img {
    display: block;
    max-width: min(1120px, calc(100vw - 32px));
    max-height: calc(100dvh - 150px);
    border-radius: 14px;
    background: #000;
}

.pro-lightbox__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1.2rem;
    text-align: center;
}

.pro-lightbox__bar p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.92rem;
    line-height: 1.4;
}

.pro-lightbox__bar strong {
    color: #fff;
}

.pro-lightbox__cta {
    color: #c7b8ff;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.pro-lightbox__cta::after {
    content: " →";
}

.pro-lightbox__close,
.pro-lightbox__nav {
    position: fixed;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.pro-lightbox__close {
    top: 16px;
    right: 16px;
}

.pro-lightbox__close::before,
.pro-lightbox__close::after {
    content: "";
    grid-area: 1 / 1;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transform: rotate(45deg);
}

.pro-lightbox__close::after {
    transform: rotate(-45deg);
}

.pro-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
}

.pro-lightbox__nav--prev {
    left: 16px;
}

.pro-lightbox__nav--next {
    right: 16px;
}

.pro-lightbox__nav::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: translateX(2px) rotate(-45deg);
}

.pro-lightbox__nav--next::before {
    transform: translateX(-2px) rotate(135deg);
}

.pro-lightbox__close:hover,
.pro-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.18);
}

.pro-lightbox__close:focus-visible,
.pro-lightbox__nav:focus-visible,
.pro-lightbox__cta:focus-visible {
    outline: 3px solid #c7b8ff;
    outline-offset: 2px;
}

/* ---------- Livraison : aperçu léger, la vraie galerie s'ouvre au clic ---------- */
.pro-delivery {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: center;
}

.pro-delivery__copy {
    display: grid;
    justify-items: start;
    gap: 0.8rem;
}

.pro-delivery__copy > p {
    margin: 0;
    color: var(--pro-muted);
    font-size: clamp(1rem, 1.3vw, 1.08rem);
    line-height: 1.55;
}

.pro-delivery__points {
    display: grid;
    gap: 0.7rem;
    margin: 0.3rem 0 0.5rem;
    padding: 0;
    list-style: none;
}

.pro-delivery__points li {
    position: relative;
    display: grid;
    gap: 0.1rem;
    padding-left: 1.8rem;
    line-height: 1.45;
}

.pro-delivery__points li::before {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat,
        linear-gradient(135deg, #7d5cff, #a259ff);
}

.pro-delivery__points span {
    color: var(--pro-muted);
    font-size: 0.94rem;
}

.pro-delivery__cta img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1); /* icône sombre d'origine, passée en blanc sur le violet */
}

.pro-delivery__cta img {
    transition: transform 0.25s ease;
}

.pro-delivery__cta:hover img,
.pro-delivery__cta:focus-visible img {
    transform: scale(1.12) rotate(-6deg);
}

.pro-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(122, 82, 255, 0.32);
}

.pro-delivery__note {
    color: var(--pro-muted);
    font-size: 0.82rem;
}

/* Fenêtre de galerie factice, cliquable : bleu nuit pour trancher sur le panneau clair. */
.pro-delivery__preview {
    position: relative;
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(162, 137, 255, 0.24);
    border-radius: 22px;
    color: #fff;
    background: var(--pro-night-panel);
    box-shadow: 0 26px 60px rgba(32, 16, 96, 0.28);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transform: rotate(-1.2deg);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.pro-delivery__preview:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 32px 70px rgba(32, 16, 96, 0.36);
}

.pro-delivery__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 0;
    font-size: 0.82rem;
}

.pro-delivery__bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}

.pro-delivery__bar b {
    margin-left: 8px;
    font-weight: 800;
}

.pro-delivery__bar small {
    margin-left: auto;
    color: var(--pro-violet-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.pro-delivery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.pro-delivery__grid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
}

.pro-delivery__live {
    position: absolute;
    left: 50%;
    bottom: 22px;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #7d5cff 0%, #a259ff 100%);
    box-shadow: 0 12px 30px rgba(16, 0, 63, 0.45);
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
}

.pro-delivery__live::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #7dffb0;
    box-shadow: 0 0 0 0 rgba(125, 255, 176, 0.6);
    animation: pro-live-pulse 1.8s ease-out infinite;
    vertical-align: 1px;
}

@keyframes pro-live-pulse {
    to {
        box-shadow: 0 0 0 9px rgba(125, 255, 176, 0);
    }
}

/* Fenêtre plein écran qui accueille la galerie (créée par le JS au premier clic). */
body.pro-gallery-open {
    overflow: hidden;
}

.pro-gallery-modal[hidden] {
    display: none !important;
}

.pro-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 62px 18px 18px;
    background: rgba(11, 0, 46, 0.78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.pro-gallery-modal.is-open {
    opacity: 1;
}

.pro-gallery-modal__panel {
    position: relative;
    width: min(1180px, 100%);
    height: min(860px, calc(100svh - 80px));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #fff;
    box-shadow: 0 30px 90px rgba(8, 0, 30, 0.5);
    outline: none;
    transform: translateY(14px) scale(0.985);
    transition: transform 0.22s ease;
}

.pro-gallery-modal.is-open .pro-gallery-modal__panel {
    transform: none;
}

.pro-gallery-modal__panel iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.pro-gallery-modal__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    color: #5038ca;
    font-weight: 800;
    transform: translate(-50%, -50%);
}

.pro-gallery-modal__close {
    position: absolute;
    top: 12px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.pro-gallery-modal__close:hover {
    background: rgba(255, 255, 255, 0.18);
}

.pro-gallery-modal__close::before,
.pro-gallery-modal__close::after {
    content: "";
    grid-area: 1 / 1;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transform: rotate(45deg);
}

.pro-gallery-modal__close::after {
    transform: rotate(-45deg);
}

.pro-gallery-modal__close:focus-visible {
    outline: 3px solid #a259ff;
    outline-offset: 3px;
}

/* ---------- Tarifs : trois formules événement + prestations à la carte ----------
   Même anatomie que les cartes mariage (nom, promesse, prix, liste, bouton), aux
   couleurs B2B : la formule recommandée passe en bleu nuit, jamais de rose poudré.
   Le bouton reste en bas de chaque carte quelle que soit la longueur de la liste. */
/* Le bloc Tarifs se pose sur le fond de la page, sans panneau : les cartes portent
   seules le relief. Il prend toute la largeur utile (pas de marge intérieure latérale). */
.pro-section.pro-offers {
    padding-inline: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* En-tête centré : sur-titre, titre, accroche, puis l'interrupteur HT / TTC. */
.pro-offers__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
    text-align: center;
}

.pro-offers__top .pro-section__head {
    justify-items: center;
    margin: 0 auto;
}

.pro-section.pro-offers .pro-offers__top h2 {
    text-align: center;
}

/* Quand s'appliquent les tarifs : la semaine (prix affichés) en violet plein, le week-end
   (sur devis) en pointillés et plus discret. Deux pastilles, une pour chaque règle. */
.pro-offers__days {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0.3rem 0 0;
    padding: 0;
    list-style: none;
}

/* Côte à côte sur ordinateur (on compare semaine et week-end d'un coup d'œil). */
.pro-offers__top .pro-section__head {
    max-width: 1000px;
}

.pro-offers__day {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem 0.45rem;
    padding: 0.55rem 0.95rem 0.55rem 0.8rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.35;
}

.pro-offers__day::before {
    content: "";
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
}

.pro-offers__day span {
    color: var(--pro-muted);
}

.pro-offers__day--week {
    border: 1px solid rgba(112, 87, 230, 0.32);
    background: rgba(112, 87, 230, 0.09);
}

.pro-offers__day--week::before {
    background: linear-gradient(135deg, #7d5cff, #a259ff);
    box-shadow: 0 0 0 3px rgba(112, 87, 230, 0.16);
}

.pro-offers__day--week strong {
    color: var(--pro-violet-strong);
}

.pro-offers__day--weekend {
    border: 1px dashed rgba(23, 19, 38, 0.3);
    background: transparent;
}

.pro-offers__day--weekend::before {
    border: 2px solid rgba(23, 19, 38, 0.4);
}

.pro-offers__day--weekend strong {
    color: var(--pro-ink);
}

/* Case à cocher native (masquée, lue par les lecteurs d'écran) dessinée en interrupteur :
   violet = prix HT (état par défaut), gris = prix TTC. */
.pro-tax-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.85rem 0.45rem 0.5rem;
    border: 1px solid var(--pro-line);
    border-radius: 999px;
    color: var(--pro-ink);
    background: var(--pro-card);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

.pro-tax-toggle__track {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(23, 19, 38, 0.2);
    transition: background-color 0.2s ease;
}

.pro-tax-toggle__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.pro-tax-toggle input:checked + .pro-tax-toggle__track {
    background: linear-gradient(135deg, #7d5cff, #a259ff);
}

.pro-tax-toggle input:checked + .pro-tax-toggle__track::after {
    transform: translateX(16px);
}

.pro-tax-toggle input:focus-visible + .pro-tax-toggle__track {
    outline: 3px solid #a259ff;
    outline-offset: 3px;
}

.pro-offers__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.pro-offer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.2rem, 2.4vw, 1.6rem);
    border: 1px solid var(--pro-line);
    border-radius: 22px;
    background: var(--pro-card);
    box-shadow: var(--pro-shadow);
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 280ms ease, box-shadow 280ms ease;
    scroll-margin-top: 110px;
}

.pro-section .pro-offer h3 {
    font-size: 1.3rem;
}

.pro-offer__pitch {
    margin: -0.35rem 0 0;
    color: var(--pro-muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

.pro-offer__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.5rem;
    margin: 0.15rem 0 0;
}

.pro-offer__price strong {
    color: var(--pro-violet-strong);
    font-size: clamp(2.1rem, 3.4vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pro-offer__price > span {
    color: var(--pro-muted);
    font-size: 0.9rem;
    font-weight: 800;
}

.pro-offer__price s {
    color: var(--pro-muted);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration-color: #f74b4b;
    text-decoration-thickness: 2px;
}

/* Carte Duo : l'ancien prix et la remise ont leur propre ligne, au-dessus du prix, pour que
   « −50 € » ne se lise pas comme une remise « en semaine ». Le nouveau prix reste premier
   dans le code (lu en premier), la ligne remonte par order. */
.pro-offer__was {
    display: flex;
    flex-basis: 100%;
    order: -1;
    align-items: center;
    gap: 0.5rem;
}

.pro-offer__price em {
    align-self: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    color: var(--pro-violet-strong);
    background: rgba(112, 87, 230, 0.12);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
}

.pro-offer__gain {
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(112, 87, 230, 0.14);
    border-radius: 14px;
    color: var(--pro-ink);
    background: rgba(112, 87, 230, 0.07);
    font-size: 0.9rem;
    line-height: 1.45;
}

.pro-offer__gain b {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--pro-violet-strong);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pro-offer__list {
    display: grid;
    flex: 1 0 auto;
    align-content: start;
    gap: 0.55rem;
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
}

.pro-offer__list li {
    position: relative;
    display: grid;
    gap: 0.05rem;
    padding-left: 1.6rem;
    font-size: 0.93rem;
    line-height: 1.4;
}

.pro-offer__list li::before {
    content: "";
    position: absolute;
    top: 0.18rem;
    left: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat,
        linear-gradient(135deg, #7d5cff, #a259ff);
}

.pro-offer__list span {
    color: var(--pro-muted);
    font-size: 0.86rem;
}

.pro-offer__alt {
    margin: 0;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--pro-line);
    color: var(--pro-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.pro-offer__alt strong {
    color: var(--pro-ink);
}

/* Lien d'appel dans la note (second opérateur) : un toucher sur téléphone suffit. */
.pro-offer__alt a {
    color: var(--pro-violet-strong);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.pro-offer--choice .pro-offer__alt {
    border-top-color: rgba(199, 184, 255, 0.24);
    color: rgba(255, 255, 255, 0.72);
}

.pro-offer--choice .pro-offer__alt a {
    color: #fff;
}

/* Bouton des cartes secondaires : contour violet, le plein reste à la formule recommandée. */
.pro-offer__cta {
    width: 100%;
    margin-top: 0.2rem;
}

.pro-offer__cta:not(.pro-btn--primary) {
    border: 1px solid rgba(112, 87, 230, 0.36);
    color: var(--pro-violet-strong);
    background: rgba(255, 255, 255, 0.6);
}

.pro-offer__cta:not(.pro-btn--primary):hover,
.pro-offer__cta:not(.pro-btn--primary):focus-visible {
    background: rgba(112, 87, 230, 0.1);
    transform: translateY(-2px);
}

/* Formule recommandée : bleu nuit, étiquette QR-cadre Choice posée à gauche comme sur les pages mariage. */
.pro-offer--choice {
    padding-top: 3.4rem;
    border-color: rgba(162, 137, 255, 0.3);
    color: #fff;
    background: var(--pro-night-panel);
    box-shadow: 0 26px 60px rgba(32, 16, 96, 0.28);
}

.pro-offer__choice {
    position: absolute;
    top: 16px;
    left: 0;
    padding: 0.55rem 1.7rem 0.55rem 1rem;
    color: var(--pro-night);
    background: #fff;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.075em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.pro-offer__choice strong {
    color: #5038ca;
    font-weight: 900;
}

.pro-offer--choice .pro-offer__pitch,
.pro-offer--choice .pro-offer__price > span,
.pro-offer--choice .pro-offer__price s,
.pro-offer--choice .pro-offer__list span {
    color: rgba(255, 255, 255, 0.72);
}

.pro-offer--choice .pro-offer__price strong {
    color: #fff;
}

.pro-offer--choice .pro-offer__price em {
    color: #fff;
    background: rgba(199, 184, 255, 0.22);
}

.pro-offer--choice .pro-offer__gain {
    border-color: rgba(199, 184, 255, 0.24);
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

.pro-offer--choice .pro-offer__gain b {
    color: var(--pro-violet-soft);
}

/* Les inclusions du duo éclairent leur formule : même violet, sans boucle ni déplacement du contenu.
   Les liens restent utilisables au clavier et permettent de consulter la carte au toucher. */
.pro-offers__grid {
    --pro-preview-lift: -6px;
}

.pro-offer__include {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    width: fit-content;
    border-radius: 4px;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(199, 184, 255, 0.28);
    text-underline-offset: 0.22em;
    transition: color 180ms ease, text-decoration-color 180ms ease;
}

.pro-offer__include::after {
    content: "↗";
    color: var(--pro-violet-soft);
    font-size: 0.85em;
}

.pro-offer__include:is(:hover, :focus-visible) {
    color: #e2d9ff;
    text-decoration-color: #c7b8ff;
}

.pro-offer__include:focus-visible {
    outline: 2px solid #c7b8ff;
    outline-offset: 4px;
}

.pro-offers__grid:has(.pro-offer__include[href="#formule-photo"]:is(:hover, :focus-visible)) #formule-photo,
.pro-offers__grid:has(.pro-offer__include[href="#formule-video"]:is(:hover, :focus-visible)) #formule-video {
    transform: translateY(var(--pro-preview-lift));
    border-color: #9b7cff;
    box-shadow: 0 0 0 3px rgba(125, 92, 255, 0.12), 0 26px 58px rgba(80, 56, 202, 0.22);
}

/* « Pour aller encore plus loin » : le rail des pages mariage (signature-carousel.js/.css),
   repeint aux couleurs B2B. La carte du centre est mise au point ; toucher une voisine
   l'y amène. Les cartes entrent et sortent par les bords du rail, fondues par un masque
   (pas de voile coloré, qui jurait avec le fond) ; sur téléphone, le rail touche les
   bords de l'écran. */
.pro-options {
    --pro-option-bg: #fff;
    margin-top: clamp(1.8rem, 3.6vw, 2.6rem);
    scroll-margin-top: 96px;
}

.pro-options__head {
    max-width: 640px;
    margin: 0 auto 1rem;
    text-align: center;
}

.pro-section .pro-options__head h3 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    text-align: center;
}

.pro-options__head p {
    margin: 0.4rem 0 0;
    color: var(--pro-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}


.pro-options .signature-carousel.is-swipe .signature-carousel__stage::after {
    display: none;
}

.pro-options .signature-carousel.is-swipe .signature-carousel__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* Cartes de même hauteur, bouton en bas. */
.pro-options .signature-carousel.is-swipe .signature-carousel__track {
    align-items: stretch;
}

.pro-options .signature-carousel__slide {
    display: flex;
    align-items: stretch;
}

.pro-option {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    padding: 1.3rem 1.3rem 1.4rem;
    border: 1px solid var(--pro-line);
    border-radius: 22px;
    color: var(--pro-ink);
    background: var(--pro-option-bg);
    box-shadow: 0 10px 26px rgba(48, 32, 112, 0.08);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Mise au point : liseré dégradé violet et ombre portée sur la carte du centre. */
.pro-options .signature-carousel__slide.is-active .pro-option {
    border-color: transparent;
    background:
        linear-gradient(var(--pro-option-bg), var(--pro-option-bg)) padding-box,
        linear-gradient(145deg, #7d5cff 0%, #c7b8ff 48%, #5038ca 100%) border-box;
    box-shadow: 0 22px 50px rgba(80, 56, 202, 0.2);
}

.pro-option__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pro-option__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(112, 87, 230, 0.1);
}

.pro-option__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--pro-violet-strong);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pro-options .signature-carousel__slide.is-active .pro-option__icon {
    background: linear-gradient(135deg, #7d5cff, #a259ff);
}

.pro-options .signature-carousel__slide.is-active .pro-option__icon svg {
    stroke: #fff;
}

.pro-option h4 {
    margin: 0;
    color: inherit;
    font-size: 1.12rem;
    line-height: 1.2;
    text-align: left;
}

.pro-option__price {
    margin: 0.1rem 0 0;
    color: var(--pro-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.pro-option__price strong {
    color: var(--pro-violet-strong);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.pro-option__price--words {
    color: var(--pro-violet-strong);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.pro-option__pitch {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
}

.pro-option__list {
    display: grid;
    flex: 1 0 auto;
    align-content: start;
    gap: 0.4rem;
    margin: 0;
    padding-left: 1.05rem;
    color: var(--pro-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.pro-option__list li::marker {
    color: var(--pro-violet);
}

.pro-option__cta {
    width: 100%;
    margin-top: 0.3rem;
    border: 1px solid rgba(112, 87, 230, 0.36);
    color: var(--pro-violet-strong);
    background: transparent;
}

.pro-options .signature-carousel__slide.is-active .pro-option__cta {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #7d5cff 0%, #a259ff 100%);
    box-shadow: 0 12px 30px rgba(122, 82, 255, 0.32);
}

.pro-options .signature-carousel__slide.is-active .pro-option__cta:hover,
.pro-options .signature-carousel__slide.is-active .pro-option__cta:focus-visible {
    transform: translateY(-2px);
}

/* Flèches et pastilles : l'or du mariage laisse place aux violets. */
.pro-options .signature-carousel__arrow {
    border-color: rgba(112, 87, 230, 0.3);
    color: var(--pro-violet-strong);
    background: var(--pro-option-bg);
}

.pro-options .signature-carousel__arrow:hover {
    background: rgba(112, 87, 230, 0.08);
}

.pro-options .signature-carousel__stage[data-at-start="true"] ~ .signature-carousel__controls [data-signature-prev]:hover,
.pro-options .signature-carousel__stage[data-at-end="true"] ~ .signature-carousel__controls [data-signature-next]:hover {
    background: var(--pro-option-bg);
}

.pro-options .signature-carousel__dots button {
    border-color: var(--pro-line);
    background: var(--pro-option-bg);
}

.pro-options .signature-carousel__dots button span {
    color: var(--pro-violet);
}

.pro-options .signature-carousel__dots button strong {
    color: var(--pro-ink);
    /* « Sur mesure » passe sur deux lignes plutôt que d'être tronqué. */
    white-space: normal;
    line-height: 1.05;
}

.pro-options .signature-carousel__dots button:hover {
    border-color: rgba(112, 87, 230, 0.45);
    background: rgba(112, 87, 230, 0.06);
}

.pro-options .signature-carousel__dots button.is-active {
    border-color: #5038ca;
    background: linear-gradient(135deg, #7d5cff, #a259ff);
    box-shadow: 0 6px 16px rgba(80, 56, 202, 0.3);
}

.pro-options .signature-carousel__dots button.is-active span {
    color: rgba(255, 255, 255, 0.82);
}

.pro-options .signature-carousel__dots button.is-active strong {
    color: #fff;
}

.pro-options .signature-carousel :focus-visible {
    outline: 3px solid #a259ff;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .pro-options .signature-carousel.is-swipe .signature-carousel__viewport {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0, #000 7%, #000 93%, rgba(0, 0, 0, 0.35) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0, #000 7%, #000 93%, rgba(0, 0, 0, 0.35) 100%);
    }
}

/* ---------- Quiz ---------- */
.pro-quiz {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr);
    gap: clamp(1.2rem, 4vw, 3rem);
    align-items: start;
}

.pro-anchor {
    position: absolute;
    top: 0;
    left: 0;
    scroll-margin-top: 96px;
}

.pro-quiz__intro {
    display: grid;
    justify-items: start;
    gap: 0.6rem;
}

.pro-quiz__intro p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
}

.pro-quiz__box {
    min-width: 0;
}

.pro-quiz__step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    animation: pro-quiz-in 0.35s ease both;
}

.pro-quiz__step legend {
    float: left;
    width: 100%;
    margin: 0 0 0.9rem;
    padding: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
}

.pro-quiz__count {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--pro-violet-soft);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pro-quiz__options {
    clear: both;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pro-quiz__option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: 0.45rem 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.pro-quiz__option:hover,
.pro-quiz__option:focus-visible {
    border-color: rgba(199, 184, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.pro-quiz__option:focus-visible,
.pro-quiz__back:focus-visible,
.pro-quiz__restart:focus-visible,
.pro-quiz__ref:focus-visible {
    outline: 3px solid #c7b8ff;
    outline-offset: 2px;
}

.pro-quiz__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7d5cff, #a259ff);
}

.pro-quiz__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pro-quiz__option strong {
    font-size: 0.98rem;
    line-height: 1.25;
}

.pro-quiz__option > span:last-child {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
    line-height: 1.4;
}

.pro-quiz__back,
.pro-quiz__restart {
    margin-top: 0.9rem;
    padding: 0.3rem 0;
    border: 0;
    color: var(--pro-violet-soft);
    background: none;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}

.pro-quiz__back::before {
    content: "← ";
}

.pro-quiz__result {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    padding: clamp(1.1rem, 2.6vw, 1.6rem);
    border: 1px solid rgba(199, 184, 255, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    animation: pro-quiz-in 0.35s ease both;
}

.pro-quiz__result[hidden],
.pro-quiz__step[hidden] {
    display: none;
}

.pro-quiz__profile {
    padding: 0.26rem 0.7rem;
    border-radius: 999px;
    color: #10003f;
    background: #ffc94d;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pro-quiz .pro-quiz__result h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    line-height: 1.15;
}

.pro-quiz__result h3 span {
    color: var(--pro-violet-soft);
}

.pro-quiz__result > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
}

.pro-quiz__plan {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pro-quiz__plan li {
    position: relative;
    padding-left: 1.6rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.93rem;
    line-height: 1.45;
}

.pro-quiz__plan li::before {
    content: "";
    position: absolute;
    top: 0.32em;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(199, 184, 255, 0.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.pro-quiz__priority {
    font-weight: 800;
}

.pro-quiz__priority:empty {
    display: none;
}

.pro-quiz__refs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.84rem;
}

.pro-quiz__ref {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.75rem 0.32rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.pro-quiz__ref::before {
    content: "";
    width: 7px;
    height: 8px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pro-quiz__ref:hover {
    background: rgba(255, 255, 255, 0.16);
}

.pro-quiz__result > .pro-quiz__price {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 700;
}

.pro-quiz__price a {
    color: var(--pro-violet-soft);
    font-weight: 800;
}

.pro-quiz__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.2rem;
    margin-top: 0.3rem;
}

.pro-quiz__actions .pro-quiz__restart {
    margin-top: 0;
}

@keyframes pro-quiz-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ---------- Départements couverts (preuve compacte, sous les avis) ---------- */
.pro-reach {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.4vw, 1.4rem);
    margin-top: 12px;
    padding: 0.9rem 1.2rem;
    border: 1px solid rgba(105, 82, 227, 0.12);
    border-radius: 20px;
    background: var(--pro-card);
}

.pro-reach img {
    flex: 0 0 auto;
    width: 92px;
    height: auto;
}

.pro-reach__copy {
    flex: 1 1 0;
    min-width: 0;
}

/* « Ajoutons le vôtre à la liste ? » : la visio découverte au bout de la phrase. */
.pro-reach__cta {
    flex: 0 0 auto;
}

.pro-reach__copy p {
    margin: 0 0 0.55rem;
    color: var(--pro-ink);
    font-size: 0.98rem;
    line-height: 1.35;
}

.pro-reach__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pro-reach__list li {
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    color: var(--pro-ink);
    background: rgba(112, 87, 230, 0.08);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
}

.pro-reach__list b {
    margin-right: 0.15rem;
    color: var(--pro-violet-strong);
    font-weight: 900;
}

.pro-reach__list .is-hq {
    color: #fff;
    background: var(--pro-night);
}

.pro-reach__list .is-hq b {
    color: var(--pro-violet-soft);
}

/* ---------- Avis ---------- */
/* En-tête centré avec la pastille de note Google, comme le hub de l'accueil
   (styles de la pastille partagés dans 1assets/home-univers.css). */
.pro-reviews__head {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
}

.pro-reviews__head .pricing-google-rating {
    margin-top: 0.2rem;
}

.pro-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pro-quote {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem;
    border: 1px solid rgba(105, 82, 227, 0.12);
    border-radius: 20px;
    background: var(--pro-card);
}

.pro-quote blockquote {
    margin: 0;
    color: var(--pro-ink);
    font-size: 0.98rem;
    line-height: 1.55;
}

.pro-quote__author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    color: var(--pro-muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.pro-quote__author img {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.pro-quote__author strong {
    display: block;
    color: var(--pro-ink);
    font-size: 0.92rem;
}

/* ---------- FAQ (styles de .qrcadre-faq, réglages de place) ---------- */
.qrcadre-faq.pro-faq {
    margin-top: clamp(2.2rem, 5vw, 3.6rem);
    scroll-margin-top: 96px;
}

/* ---------- Contact ---------- */
.pro-contact {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.2rem, 4vw, 3rem);
    align-items: center;
    width: var(--pro-width);
    margin: clamp(2.2rem, 5vw, 3.6rem) auto 0;
    padding: clamp(1.4rem, 3.4vw, 2.6rem);
    border: 1px solid var(--pro-line);
    border-radius: 28px;
    color: var(--pro-ink);
    background: var(--pro-panel);
    box-shadow: var(--pro-shadow);
    scroll-margin-top: 96px;
    position: relative;
}

/* Arrivée par « Parler de votre projet » ou « Voir les réalisations » : un reflet
   traverse le bloc, puis un liseré violet pulse deux fois vers l'extérieur et s'efface. */
.pro-section.is-spotlight,
.pro-contact.is-spotlight {
    position: relative;
}

.is-spotlight::before,
.is-spotlight::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
}

.is-spotlight::before {
    background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat;
    animation: pro-contact-sheen 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both;
}

.is-spotlight::after {
    border: 2px solid #7057e6;
    opacity: 0;
    animation: pro-contact-ring 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s 2;
}

@keyframes pro-contact-sheen {
    to { background-position: -60% 0; }
}

@keyframes pro-contact-ring {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(112, 87, 230, 0.45);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 0 18px rgba(112, 87, 230, 0);
    }
}

/* Le titre reçoit le focus à l'arrivée (lecteurs d'écran) : pas de cadre visible. */
.pro-contact h2:focus,
.pro-section h2:focus {
    outline: none;
}

.pro-contact__copy {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
}

.pro-contact__copy p {
    margin: 0;
    color: var(--pro-muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

/* La méthode en quatre lignes, glissée entre l'accroche et le bouton. */
.pro-contact__steps {
    display: grid;
    gap: 0.55rem;
    margin: 0.5rem 0 0.9rem;
    padding: 0;
    list-style: none;
    counter-reset: pro-step;
}

.pro-contact__steps li {
    position: relative;
    padding-left: calc(22px + 0.7rem);
    color: var(--pro-muted);
    font-size: 0.93rem;
    line-height: 1.45;
    counter-increment: pro-step;
}

.pro-contact__steps li::before {
    content: counter(pro-step);
    position: absolute;
    top: 0.1em;
    left: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--pro-violet-strong);
    background: rgba(112, 87, 230, 0.12);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.pro-contact__steps strong {
    color: var(--pro-ink);
    font-weight: 800;
}

.pro-contact__steps span::before {
    content: "· ";
}

.pro-contact [data-mini-contact] {
    min-width: 0;
}

/* ---------- Mode sombre ---------- */
[data-theme="dark"] .pro-page {
    --pro-violet: #b9a6ff;
    --pro-violet-strong: #c7b8ff;
    --pro-ink: #f5f1ff;
    --pro-muted: rgba(245, 241, 255, 0.74);
    --pro-line: rgba(199, 184, 255, 0.22);
    --pro-card: rgba(199, 184, 255, 0.07);
    /* Nuit violette de la DA (menu #201a56, nuit #10003f) au lieu du quasi-noir :
       halo violet en haut à gauche, pointe de rose en bas à droite. Le bloc quiz
       (--pro-night-panel) reste plus saturé pour garder son rôle de temps fort. */
    --pro-panel:
        radial-gradient(circle at 8% 0%, rgba(125, 92, 255, 0.32), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(255, 79, 216, 0.1), transparent 38%),
        linear-gradient(135deg, #1f1858 0%, #19124a 55%, #150e3f 100%);
    --pro-night-panel:
        radial-gradient(circle at 0% 0%, rgba(128, 101, 255, 0.4), transparent 45%),
        linear-gradient(135deg, #24106e 0%, #1a0a55 60%, #14064a 100%);
    --pro-shadow: 0 22px 58px rgba(8, 2, 34, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Reflet d'arrivée : le blanc à 50 % éblouissait sur fond nuit. */
[data-theme="dark"] .pro-page .is-spotlight::before {
    background-image: linear-gradient(110deg, transparent 38%, rgba(199, 184, 255, 0.22) 50%, transparent 62%);
}

[data-theme="dark"] .pro-page .is-spotlight::after {
    border-color: #a68cff;
}

[data-theme="dark"] .pro-eyebrow:not(.pro-eyebrow--night) {
    color: #c5b4ff;
    border-color: rgba(190, 165, 255, 0.2);
    background: rgba(255, 255, 255, 0.045);
}

[data-theme="dark"] .pro-tag {
    color: #d6caff;
    background: rgba(199, 184, 255, 0.12);
}

[data-theme="dark"] .pro-quote,
[data-theme="dark"] .pro-reach {
    border-color: rgba(190, 165, 255, 0.16);
}

[data-theme="dark"] .pro-refs__tabs button[aria-selected="true"] {
    color: #fff;
    background: rgba(199, 184, 255, 0.18);
    box-shadow: none;
}

[data-theme="dark"] .pro-offer__cta:not(.pro-btn--primary) {
    border-color: rgba(199, 184, 255, 0.32);
    color: #e2d9ff;
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .pro-offer__cta:not(.pro-btn--primary):hover,
[data-theme="dark"] .pro-offer__cta:not(.pro-btn--primary):focus-visible {
    background: rgba(199, 184, 255, 0.12);
}

[data-theme="dark"] .pro-offer__gain {
    border-color: rgba(199, 184, 255, 0.18);
    background: rgba(199, 184, 255, 0.08);
}

[data-theme="dark"] .pro-offer__price em,
[data-theme="dark"] .pro-option__icon {
    background: rgba(199, 184, 255, 0.14);
}

[data-theme="dark"] .pro-offers__day--weekend {
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .pro-offers__day--weekend::before {
    border-color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .pro-tax-toggle__track {
    background: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .pro-options {
    --pro-option-bg: #221a5e;
}

[data-theme="dark"] .pro-offer,
[data-theme="dark"] .pro-option {
    border-color: rgba(199, 184, 255, 0.2);
}

[data-theme="dark"] .pro-option {
    box-shadow: 0 12px 30px rgba(8, 2, 34, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .pro-options .signature-carousel__slide.is-active .pro-option {
    box-shadow: 0 22px 50px rgba(125, 92, 255, 0.28);
}

[data-theme="dark"] .pro-quote {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .pro-reach__list li {
    background: rgba(199, 184, 255, 0.1);
}

[data-theme="dark"] .pro-reach__list .is-hq {
    background: #2a1580;
}

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
    .pro-quiz {
        grid-template-columns: 1fr;
    }
}

/* ---------- Téléphone ---------- */
@media (max-width: 899px) {
    .pro-hero::after {
        background: linear-gradient(0deg, rgba(12, 0, 46, 0.95) 0%, rgba(16, 0, 63, 0.78) 55%, rgba(16, 0, 63, 0.35) 100%);
    }

    .pro-quotes,
    .pro-contact {
        grid-template-columns: 1fr;
    }

    .pro-delivery {
        grid-template-columns: 1fr;
    }

    /* Tarifs : une colonne, la formule recommandée en premier. */
    .pro-offers__grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .pro-offer--choice {
        order: -1;
    }

    .pro-reach {
        flex-wrap: wrap;
    }

    .pro-reach__cta {
        width: 100%;
    }

    /* Téléphone : les deux pastilles l'une sous l'autre, de même largeur. */
    .pro-offers__days {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .pro-options .signature-carousel__stage {
        margin-inline: -16px;
    }

    .pro-delivery__preview {
        transform: none;
    }

    .pro-gallery-modal {
        padding: 54px 0 0;
    }

    .pro-gallery-modal__close {
        top: 7px;
        right: 10px;
    }

    .pro-gallery-modal__panel {
        width: 100%;
        height: calc(100svh - 54px);
        border: 0;
    }

    /* Réalisations : une seule bande qui défile au doigt, hauteur fixe. */
    .pro-reel {
        display: flex;
        gap: 8px;
        margin-inline: calc(-1 * clamp(1.4rem, 3.4vw, 2.6rem));
        padding: 0 clamp(1.4rem, 3.4vw, 2.6rem) 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: clamp(1.4rem, 3.4vw, 2.6rem);
        scrollbar-width: none;
    }

    .pro-reel::-webkit-scrollbar {
        display: none;
    }

    .pro-reel__row {
        display: contents;
    }

    /* Hauteur commune, largeur selon le format, plafonnée pour laisser
       dépasser la tuile suivante (on comprend qu'il faut faire défiler). */
    .pro-tile {
        flex: none;
        height: 280px;
        max-width: 80vw;
        scroll-snap-align: start;
    }

    .pro-tile--photo .pro-tile__btn::after,
    .pro-tile--photo .pro-tile__meta {
        opacity: 1;
    }

    .pro-quiz__options {
        grid-template-columns: 1fr;
    }

    .pro-quiz__option {
        column-gap: 0.8rem;
    }

    .pro-quiz__icon {
        grid-row: span 2;
    }

    .pro-quiz__option > span:last-child {
        grid-column: 2;
    }

    .pro-lightbox__nav {
        top: auto;
        bottom: 16px;
        transform: none;
    }
}

@media (max-width: 560px) {
    .pro-hero {
        min-height: 620px;
    }

    .pro-hero__actions .pro-btn {
        width: 100%;
    }

    .pro-hero__content {
        padding: 5.5rem 0 4.4rem;
    }

    .pro-hero__trust {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        margin-top: 1.6rem;
    }

    .pro-hero__trust li {
        font-size: 0.82rem;
    }

    .pro-tile {
        height: 250px;
    }

    .pro-reach {
        align-items: flex-start;
    }

    .pro-reach img {
        width: 64px;
    }

    .pro-section,
    .pro-contact {
        border-radius: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pro-offers__grid {
        --pro-preview-lift: 0px;
    }

    .pro-offer,
    .pro-offer__include {
        transition: none;
    }

    .is-spotlight::before {
        animation: none;
        opacity: 0;
    }

    .is-spotlight::after {
        animation: none;
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(112, 87, 230, 0.2);
    }

    .pro-delivery__preview,
    .pro-gallery-modal,
    .pro-gallery-modal__panel {
        transition: none;
    }

    .pro-delivery__live::before {
        animation: none;
    }

    .pro-btn,
    .pro-option,
    .pro-tax-toggle__track,
    .pro-tax-toggle__track::after,
    .pro-tile__btn img,
    .pro-tile__btn video,
    .pro-quiz__option {
        transition: none;
    }

    .pro-btn--primary:hover,
    .pro-btn--primary:focus-visible,
    .pro-offer__cta:hover,
    .pro-offer__cta:focus-visible,
    .pro-tile__btn:hover img,
    .pro-tile__btn:focus-visible img,
    .pro-quiz__option:hover {
        transform: none;
    }

    .pro-quiz__step,
    .pro-quiz__result {
        animation: none;
    }
}