/* ============================================================
   Page « Travaux publics »
   /fr/videaste-et-photographe/entreprises-et-evenements/travaux-publics/
   ------------------------------------------------------------
   S'appuie sur entreprises-et-evenements.css (variables --pro-*,
   boutons, sections, contact, FAQ) et n'ajoute que ses blocs :
   hero « calque de bureau d'études », parcours, usages, bordereau
   de prix + détail estimatif, exemples de chiffrage, conditions.
   Source des prix : 01-OUTILS-INTERNES/069-bordereaupro/.
   ============================================================ */

.tp-page {
    --tp-grid: rgba(199, 184, 255, 0.07);
    --tp-grid-major: rgba(199, 184, 255, 0.13);
    --tp-row: rgba(105, 82, 227, 0.1);
    --tp-group: rgba(112, 87, 230, 0.07);
    --tp-on: rgba(112, 87, 230, 0.08);
    --tp-field: #fff;
    /* Fond de page derrière les blocs : lavande en clair, nuit en sombre.
       Le bas du hero se fond dans cette couleur. */
    --tp-page-bg: #f3f0ff;
    /* Longueur du fondu nuit → lavande du hero (thème clair). */
    --tp-fade: 240px;
    /* Remontée du bloc parcours sur le hero : 0 depuis que le bloc n'est
       plus une carte (son texte se poserait sur le dégradé du hero). */
    --tp-overlap: 0px;
    /* Hauteur de l'en-tête mobile (dans le flux, sticky) que le hero passe dessous. */
    --tp-mhead: 0px;
}

/* En-tête mobile (jusqu'à 1200 px) : il occupe sa place en haut de page.
   Le hero remonte dessous pour que le fond nuit parte du haut de l'écran,
   comme sur ordinateur où l'en-tête flotte par-dessus. */
@media (max-width: 1200px) {
    .tp-page {
        --tp-mhead: 64px;
    }

    .pro-hero.tp-hero {
        margin-top: calc(-1 * var(--tp-mhead));
    }
}

[data-theme="dark"] .tp-page {
    --tp-page-bg: #10003f;
}

/* Tablette et téléphone : le bas du hero est plus court, le fondu aussi. */
@media (max-width: 899px) {
    .tp-page {
        --tp-fade: 110px;
    }
}

/* ---------- Thème clair : une seule ambiance de la nuit au lavande ----------
   Le blanc pur coupait net sous le hero ; la page prend un fond lavande
   (le pied de page garde le sien). */
html:not([data-theme="dark"]):has(.tp-page),
html:not([data-theme="dark"]):has(.tp-page) body {
    background-color: #f3f0ff;
}

.tp-page .tp-cases,
.tp-page .tp-cases *,
.tp-page .tp-bpu__wrap * {
    box-sizing: border-box;
}

/* ---------- Hero : nuit quadrillée, coupe type à droite ---------- */
.pro-hero.tp-hero {
    min-height: clamp(560px, 82svh, 760px);
    background:
        linear-gradient(var(--tp-grid-major) 1px, transparent 1px) 0 0 / 160px 160px,
        linear-gradient(90deg, var(--tp-grid-major) 1px, transparent 1px) 0 0 / 160px 160px,
        linear-gradient(var(--tp-grid) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--tp-grid) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--pro-night-panel);
}

.pro-hero.tp-hero::after {
    background:
        linear-gradient(180deg, transparent calc(100% - 130px), var(--tp-page-bg) 100%),
        radial-gradient(circle at 78% 50%, transparent 0%, rgba(12, 0, 46, 0.35) 70%),
        linear-gradient(0deg, rgba(12, 0, 46, 0.55) 0%, transparent 40%);
}

/* Thème clair : un fondu direct nuit → lavande passait par un gris terne et
   s'arrêtait net (l'œil y voyait une ligne). Ici, plus d'ombre en bas du hero,
   et un fondu de 240 px en « smoothstep » (départ et arrivée en douceur) qui
   traverse des violets avant le lavande de la page. Points calculés. */
html:not([data-theme="dark"]) .pro-hero.tp-hero::after {
    background:
        linear-gradient(180deg,
            transparent calc(100% - var(--tp-fade)),
            rgba(130, 108, 233, 0.020) calc(100% - var(--tp-fade) * 0.9167),
            rgba(143, 123, 236, 0.074) calc(100% - var(--tp-fade) * 0.8333),
            rgba(155, 137, 238, 0.156) calc(100% - var(--tp-fade) * 0.7500),
            rgba(166, 151, 240, 0.259) calc(100% - var(--tp-fade) * 0.6667),
            rgba(177, 163, 242, 0.376) calc(100% - var(--tp-fade) * 0.5833),
            rgba(187, 175, 244, 0.500) calc(100% - var(--tp-fade) * 0.5000),
            rgba(197, 186, 246, 0.624) calc(100% - var(--tp-fade) * 0.4167),
            rgba(207, 198, 248, 0.741) calc(100% - var(--tp-fade) * 0.3333),
            rgba(216, 209, 250, 0.844) calc(100% - var(--tp-fade) * 0.2500),
            rgba(225, 219, 252, 0.926) calc(100% - var(--tp-fade) * 0.1667),
            rgba(234, 230, 253, 0.980) calc(100% - var(--tp-fade) * 0.0833),
            #f3f0ff 100%),
        radial-gradient(circle at 78% 50%, transparent 0%, rgba(12, 0, 46, 0.35) 70%);
}

/* La carte « Le terrain d'abord » remonte sur le bas du hero : le hero garde
   en bas la place qu'elle recouvre. */
.tp-hero__content {
    /* Le nuit descend plus bas sous les preuves avant de passer au lavande. */
    padding-bottom: calc(clamp(9rem, 18vw, 16.5rem) + var(--tp-overlap));
}

.tp-page .tp-profile {
    position: relative;
    z-index: 1;
    /* Assez bas pour que le premier écran ne montre que le hero : le titre
       du parcours, juste sous les preuves, gênait la lecture. */
    margin-top: calc(clamp(1rem, 1.5vw, 1.5rem) - var(--tp-overlap));
}

.tp-hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.tp-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tp-hero h1 {
    max-width: 14em;
}

.tp-hero__plan {
    margin: 0;
    padding: clamp(0.8rem, 1.6vw, 1.2rem);
    border: 1px solid rgba(199, 184, 255, 0.22);
    border-radius: 22px;
    background: rgba(16, 0, 63, 0.42);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.tp-hero__plan svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Les trois preuves : trois colonnes égales, une icône chacune (pas de puce
   « première sans point » héritée de la page pro). */
.tp-hero .tp-hero__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    max-width: 640px;
}

.tp-hero .tp-hero__trust li {
    align-items: center;
    gap: 0.6rem;
    font-size: 0.84rem;
    line-height: 1.3;
}

.tp-hero .tp-hero__trust li::before {
    content: none;
}

.tp-trust__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(199, 184, 255, 0.28);
    border-radius: 50%;
    background: rgba(199, 184, 255, 0.1);
}

.tp-trust__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #c7b8ff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Menu lisible au-dessus du hero (thème clair) ----------
   Tant que l'en-tête flottant passe sur le hero nuit, il prend l'allure du
   thème sombre : fond nuit translucide, liens et burger blancs, logo blanc
   (travaux-publics.js pose « tp-header-night » sur <html> et échange le logo).
   Il redevient clair dès qu'il passe sur la page, et quand le menu mobile
   est ouvert (son panneau reste clair). */
body > header,
#textes-links > .dropdown > a,
.logo-link p,
.burger-line {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.tp-header-night body > header {
    background-color: #10003f84;
}

html.tp-header-night #textes-links > .dropdown > a,
html.tp-header-night .logo-link p {
    color: #fff;
}

html.tp-header-night body:not(.menu-open) .mobile-header-container {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.tp-header-night body:not(.menu-open) .mobile-header-container::before {
    background: rgba(16, 0, 63, 0.48);
}

html.tp-header-night body:not(.menu-open) .burger-line {
    background: #fff;
}

/* ---------- Parcours ---------- */
/* Le bloc se pose sur la page, sans carte (ni cadre, ni fond, ni ombre),
   comme le bandeau « Sur les chantiers aussi ». La photo prend la hauteur
   du texte (voir plus bas, à partir de 900 px). */
.tp-profile {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: center;
}

.pro-section.tp-profile {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

@media (min-width: 900px) {
    .tp-profile {
        align-items: stretch;
    }

    .tp-profile__copy {
        align-content: center;
    }

    /* Hauteur nulle + flex : la photo ne pèse rien dans le calcul de la
       rangée, qui prend la hauteur du texte ; elle remplit ensuite la place. */
    .tp-profile__card {
        display: flex;
        flex-direction: column;
    }

    .tp-profile__card img {
        flex: 1 1 0;
        height: 0;
        min-height: 220px;
        aspect-ratio: auto;
        object-position: 50% 25%;
    }
}

.tp-profile__copy {
    display: grid;
    justify-items: start;
    gap: 0.85rem;
}

.tp-profile__copy > p {
    max-width: 40em;
    margin: 0;
    color: var(--pro-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Les trois arguments sur toute la largeur du bloc, sous le texte et la photo. */
.tp-profile__facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-profile__facts li {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--pro-line);
    border-radius: 18px;
    background: var(--pro-card);
}

.tp-profile__facts strong {
    color: var(--pro-violet-strong);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.tp-profile__facts span {
    color: var(--pro-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.tp-profile__card {
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    background: var(--pro-night);
    box-shadow: var(--pro-shadow);
}

.tp-profile__card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.tp-profile__card figcaption {
    display: grid;
    gap: 0.2rem;
    padding: 0.95rem 1.1rem 1.1rem;
    color: #fff;
}

.tp-profile__card strong {
    font-size: 1.02rem;
}

.tp-profile__card span {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.84rem;
    line-height: 1.4;
}

.tp-profile__card a {
    width: fit-content;
    margin-top: 0.35rem;
    color: #c7b8ff;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.tp-profile__card a::after {
    content: " ↗";
}

.tp-profile__card a:hover,
.tp-profile__card a:focus-visible {
    text-decoration: underline;
}

.tp-profile__trades {
    grid-column: 1 / -1;
    padding-top: clamp(1rem, 2vw, 1.4rem);
    border-top: 1px solid var(--pro-line);
}

.tp-profile__trades p {
    margin: 0 0 0.7rem;
    color: var(--pro-muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tp-profile__trades ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-profile__trades li {
    padding: 0.38rem 0.8rem;
    border: 1px solid var(--pro-line);
    border-radius: 999px;
    color: var(--pro-ink);
    background: var(--pro-card);
    font-size: 0.86rem;
    font-weight: 700;
}

/* ---------- Usages ---------- */
.tp-uses__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-use {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: 1.15rem;
    border: 1px solid rgba(199, 184, 255, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
}

.tp-use__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(199, 184, 255, 0.14);
}

.tp-use__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #c7b8ff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-uses .tp-use h3 {
    color: #fff;
    font-size: 1.02rem;
}

.tp-use p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ---------- Étude préliminaire de vol ----------
   Texte à gauche, les pages de l'exemple en éventail à droite : au survol,
   l'éventail s'ouvre un peu plus (ouvrir le PDF reste un simple clic). */
.tp-study {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: center;
}

/* Sans carte, comme le bloc parcours : posé sur la page, avec un peu plus
   d'air au-dessus et en dessous que les cartes voisines. */
.pro-section.tp-study {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.tp-study__copy {
    display: grid;
    justify-items: start;
    gap: 0.85rem;
}

.tp-study__copy > p {
    max-width: 38em;
    margin: 0;
    color: var(--pro-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

.tp-study__pages {
    display: grid;
    gap: 0.55rem;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: tp-page;
}

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

.tp-study__pages li::before {
    content: counter(tp-page);
    position: absolute;
    top: 0.05em;
    left: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: #fff;
    background: #666fec;
    font-size: 0.74rem;
    font-weight: 900;
}

.tp-study__pages strong {
    display: block;
    color: var(--pro-ink);
    font-weight: 800;
}

.tp-study__included {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.2rem 0 0;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    color: #15803d;
    background: rgba(22, 163, 74, 0.1);
    font-size: 0.86rem;
    font-weight: 800;
}

.tp-study__included svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-study__cta {
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.3rem;
}

.tp-study__meta {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
}

.tp-study__fan {
    position: relative;
    display: block;
    width: min(100%, 420px);
    aspect-ratio: 1 / 1.08;
    margin: 0 auto;
    outline: none;
}

.tp-study__fan img {
    position: absolute;
    top: 6%;
    left: 50%;
    width: 58%;
    height: auto;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 40px -14px rgba(48, 32, 112, 0.45), 0 0 0 1px rgba(105, 82, 227, 0.12);
    transform-origin: 50% 100%;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tp-study__fan img:nth-child(1) { transform: translateX(-50%) rotate(12deg) translateX(34%); }
.tp-study__fan img:nth-child(2) { transform: translateX(-50%) rotate(-12deg) translateX(-34%); }
.tp-study__fan img:nth-child(3) { transform: translateX(-50%) rotate(5deg) translateX(14%); }
.tp-study__fan img:nth-child(4) { transform: translateX(-50%) rotate(-2deg); }

.tp-study__fan:hover img:nth-child(1),
.tp-study__fan:focus-visible img:nth-child(1) { transform: translateX(-50%) rotate(16deg) translateX(46%); }
.tp-study__fan:hover img:nth-child(2),
.tp-study__fan:focus-visible img:nth-child(2) { transform: translateX(-50%) rotate(-16deg) translateX(-46%); }
.tp-study__fan:hover img:nth-child(3),
.tp-study__fan:focus-visible img:nth-child(3) { transform: translateX(-50%) rotate(7deg) translateX(20%); }
.tp-study__fan:hover img:nth-child(4),
.tp-study__fan:focus-visible img:nth-child(4) { transform: translateX(-50%) rotate(0deg) translateY(-3%); }

.tp-study__fan:focus-visible {
    outline: 3px solid #a259ff;
    outline-offset: 6px;
    border-radius: 12px;
}

/* L'éventail et, dessous, le bouton « Voir un exemple ». */
.tp-study__visual {
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.tp-study__badge {
    position: absolute;
    left: 50%;
    bottom: 2%;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(16, 0, 63, 0.86);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transform: translateX(-50%);
}

[data-theme="dark"] .tp-study__included {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
}

@media (max-width: 899px) {
    .tp-study {
        grid-template-columns: 1fr;
    }

    /* Sur téléphone : le texte d'abord, puis les pages et le bouton. */
    .tp-study__fan {
        width: min(100%, 300px);
    }

    /* Éventail resserré : il reste dans la carte sur un écran de 375 px. */
    .tp-study__fan img:nth-child(1),
    .tp-study__fan:hover img:nth-child(1) { transform: translateX(-50%) rotate(9deg) translateX(20%); }
    .tp-study__fan img:nth-child(2),
    .tp-study__fan:hover img:nth-child(2) { transform: translateX(-50%) rotate(-9deg) translateX(-20%); }
    .tp-study__fan img:nth-child(3),
    .tp-study__fan:hover img:nth-child(3) { transform: translateX(-50%) rotate(4deg) translateX(8%); }
}

@media (prefers-reduced-motion: reduce) {
    .tp-study__fan img {
        transition: none;
    }
}

/* ---------- Bordereau + détail estimatif ---------- */
.tp-bpu {
    scroll-margin-top: 96px;
}

.tp-bpu__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 2rem;
}

.tp-bpu__badge {
    display: grid;
    gap: 0.1rem;
    margin: 0 0 clamp(1.2rem, 2.8vw, 2rem);
    padding: 0.6rem 1rem;
    border: 1px dashed rgba(105, 82, 227, 0.4);
    border-radius: 14px;
    color: var(--pro-muted);
    font-size: 0.82rem;
    line-height: 1.3;
}

.tp-bpu__badge strong {
    color: var(--pro-violet-strong);
    font-size: 0.95rem;
}

.tp-bpu__wrap {
    border: 1px solid var(--pro-line);
    border-radius: 20px;
    background: var(--pro-card);
}

.tp-bpu__table {
    width: 100%;
    border-collapse: collapse;
    color: var(--pro-ink);
    font-size: 0.92rem;
    line-height: 1.4;
}

.tp-bpu__table thead th {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--pro-line);
    color: var(--pro-muted);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.tp-bpu__table td {
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--tp-row);
    vertical-align: top;
}

.tp-bpu__table .tp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tp-bpu__group th {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--tp-row);
    color: var(--pro-violet-strong);
    background: var(--tp-group);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.tp-bpu__group th span {
    margin-left: 0.4rem;
    color: var(--pro-muted);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.tp-code {
    width: 5.5rem;
    color: var(--pro-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.tp-desc strong {
    display: block;
    font-size: 0.98rem;
}

.tp-desc strong em {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    color: #fff;
    background: #7057e6;
    font-size: 0.72rem;
    font-style: normal;
    vertical-align: 0.1em;
}

.tp-desc > span {
    display: block;
    margin-top: 0.15rem;
    color: var(--pro-muted);
    font-size: 0.86rem;
}

.tp-desc details {
    margin-top: 0.35rem;
}

.tp-desc summary {
    width: fit-content;
    color: var(--pro-violet-strong);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.tp-desc summary::-webkit-details-marker {
    display: none;
}

.tp-desc summary::after {
    content: " +";
}

.tp-desc details[open] summary::after {
    content: " −";
}

.tp-desc details ul {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    color: var(--pro-muted);
    font-size: 0.84rem;
}

.tp-unit {
    color: var(--pro-muted);
    white-space: nowrap;
}

.tp-qty input[type="number"] {
    width: 5.2rem;
    min-height: 38px;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(105, 82, 227, 0.3);
    border-radius: 10px;
    color: var(--pro-ink);
    background: var(--tp-field);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Quantité : − valeur + dans une seule pilule (travaux-publics.js). Les flèches
   natives du champ nombre sont masquées : les boutons les remplacent. */
.tp-stepper {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid rgba(105, 82, 227, 0.26);
    border-radius: 999px;
    background: var(--tp-field);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tp-stepper:focus-within {
    border-color: #7057e6;
    box-shadow: 0 0 0 3px rgba(112, 87, 230, 0.18);
}

.tp-qty .tp-stepper input[type="number"] {
    width: 2.6rem;
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-weight: 800;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.tp-stepper input::-webkit-outer-spin-button,
.tp-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.tp-stepper input:focus {
    outline: none;
}

.tp-stepper input::placeholder {
    color: var(--pro-muted);
    font-weight: 600;
    opacity: 0.7;
}

.tp-stepper__btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--pro-violet-strong);
    background: rgba(112, 87, 230, 0.1);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.tp-stepper__btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.tp-stepper__btn:hover {
    color: #fff;
    background: #7057e6;
}

.tp-stepper__btn:active {
    transform: scale(0.92);
}

.tp-stepper__btn:disabled {
    opacity: 0.32;
    color: var(--pro-muted);
    background: transparent;
    cursor: default;
    transform: none;
}

.tp-bpu__table tr.is-on .tp-stepper {
    border-color: rgba(112, 87, 230, 0.5);
}

.tp-qty input[type="number"]:focus-visible,
.tp-stepper__btn:focus-visible,
.tp-select__button:focus-visible,
.tp-check input:focus-visible + .tp-check__pill {
    outline: 3px solid #a259ff;
    outline-offset: 2px;
}

/* Option sur devis : même pilule que les quantités. Éteinte, un « + Ajouter »
   en contour ; choisie, elle se remplit en violet avec une coche et « Ajoutée ». */
.tp-check {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tp-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tp-check__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 3px 0.85rem 3px 3px;
    border: 1px solid rgba(105, 82, 227, 0.26);
    border-radius: 999px;
    color: var(--pro-violet-strong);
    background: var(--tp-field);
    font-size: 0.86rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tp-check__pill b {
    font-weight: 800;
}

.tp-check__icon {
    position: relative;
    display: block;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(112, 87, 230, 0.1);
    transition: background-color 0.15s ease;
}

/* « + » dessiné en deux traits, devient une coche une fois cochée. */
.tp-check__icon::before,
.tp-check__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 2.4px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, width 0.15s ease;
}

.tp-check__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.tp-check__on {
    display: none;
}

.tp-check:hover .tp-check__pill {
    border-color: #7057e6;
}

.tp-check:hover .tp-check__icon {
    color: #fff;
    background: #7057e6;
}

.tp-check input:checked + .tp-check__pill {
    border-color: #7057e6;
    color: #fff;
    background: #7057e6;
}

.tp-check input:checked + .tp-check__pill .tp-check__icon {
    background: rgba(255, 255, 255, 0.22);
}

.tp-check input:checked + .tp-check__pill .tp-check__icon::before {
    width: 6px;
    transform: translate(-95%, 15%) rotate(45deg);
}

.tp-check input:checked + .tp-check__pill .tp-check__icon::after {
    width: 12px;
    transform: translate(-25%, -30%) rotate(-50deg);
}

.tp-check input:checked + .tp-check__pill .tp-check__off {
    display: none;
}

.tp-check input:checked + .tp-check__pill .tp-check__on {
    display: inline;
}

.tp-city {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.4rem;
    color: var(--pro-muted);
    font-size: 0.84rem;
}

.tp-city select {
    min-height: 34px;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(105, 82, 227, 0.3);
    border-radius: 10px;
    color: var(--pro-ink);
    background: var(--tp-field);
    font: inherit;
}

/* Liste des villes : menu maison (travaux-publics.js) à la place du menu natif.
   Le <select> reste dans la page, caché, et garde la valeur. */
.tp-select {
    position: relative;
}

.tp-select__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 34px;
    padding: 0.3rem 0.55rem 0.3rem 0.8rem;
    border: 1px solid rgba(105, 82, 227, 0.26);
    border-radius: 999px;
    color: var(--pro-ink);
    background: var(--tp-field);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tp-select__button:hover,
.tp-select.is-open .tp-select__button {
    border-color: #7057e6;
}

.tp-select__button small {
    color: var(--pro-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.tp-select__button.is-empty {
    color: var(--pro-muted);
    font-weight: 600;
}

.tp-select__chevron {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--pro-violet-strong);
    background: rgba(112, 87, 230, 0.1);
    transition: transform 0.15s ease;
}

.tp-select__chevron svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-select.is-open .tp-select__chevron {
    transform: rotate(180deg);
}

.tp-select__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 5;
    width: max-content;
    min-width: 100%;
    max-width: min(320px, calc(100vw - 32px));
    max-height: 300px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--pro-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(48, 32, 112, 0.2);
    list-style: none;
    opacity: 0;
    transform: translateY(-4px);
    visibility: hidden;
    /* Fermeture quasi immédiate, ouverture à peine plus douce. */
    transition: opacity 0.1s ease, transform 0.1s ease, visibility 0s linear 0.1s;
}

.tp-select.is-up .tp-select__list {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(4px);
}

.tp-select.is-open .tp-select__list {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s;
}

.tp-select__option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 0.5rem 0.75rem 0.5rem 1.7rem;
    border-radius: 12px;
    color: var(--pro-ink);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

.tp-select__option small {
    color: var(--pro-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tp-select__option:hover,
.tp-select__option:focus {
    outline: none;
    background: rgba(112, 87, 230, 0.1);
}

.tp-select__option[aria-selected="true"] {
    color: var(--pro-violet-strong);
}

.tp-select__option[aria-selected="true"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.6rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7057e6;
    box-shadow: 0 0 0 3px rgba(112, 87, 230, 0.2);
    transform: translateY(-50%);
}

.tp-select__option--reset {
    color: var(--pro-muted);
    font-weight: 600;
}

.tp-amount {
    font-weight: 800;
}

.tp-bpu__table tr.is-on td {
    background: var(--tp-on);
}

.tp-bpu__table tr.is-on .tp-code {
    color: var(--pro-violet-strong);
}

.tp-bpu__pick .tp-code::before {
    content: "★ ";
    color: #7057e6;
}

.tp-total th,
.tp-total td {
    padding: 0.55rem 0.9rem;
    font-size: 1rem;
    font-weight: 900;
    text-align: right;
}

.tp-total:first-child th,
.tp-total:first-child td {
    padding-top: 0.95rem;
}

.tp-total:last-child th,
.tp-total:last-child td {
    padding-bottom: 0.95rem;
}

.tp-total--muted th,
.tp-total--muted td {
    color: var(--pro-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

/* Barre d'action collée en bas de l'écran tant que le bordereau est visible. */
.tp-bpu__actions {
    position: sticky;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.2rem;
    margin-top: 1rem;
    padding: 0.75rem 0.85rem 0.75rem 1.2rem;
    border: 1px solid var(--pro-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 36px rgba(48, 32, 112, 0.16);
}

.tp-bpu__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.8rem;
    min-width: 0;
}

/* Une prestation est choisie mais pas le lieu du chantier : la pastille apparaît
   dans la barre du total, rebondit et pulse deux fois, puis reste calme. */
.tp-travel-cue {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.3rem 0.85rem 0.3rem 0.6rem;
    border: 1px solid #7057e6;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #7d5cff 0%, #a259ff 100%);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tp-travel-cue[hidden] {
    display: none;
}

.tp-travel-cue svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-travel-cue:hover,
.tp-travel-cue:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(122, 82, 255, 0.4);
}

.tp-travel-cue:focus-visible {
    outline: 3px solid #a259ff;
    outline-offset: 2px;
}

.tp-travel-cue.is-calling {
    animation:
        tp-cue-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        tp-cue-ring 1.1s ease-out 0.45s 2;
}

.tp-travel-cue.is-calling svg {
    animation: tp-cue-pin 0.55s ease-in-out 0.45s 2;
}

@keyframes tp-cue-in {
    from { opacity: 0; transform: translateY(6px) scale(0.85); }
    to { opacity: 1; transform: none; }
}

@keyframes tp-cue-ring {
    0% { box-shadow: 0 0 0 0 rgba(125, 92, 255, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(125, 92, 255, 0); }
}

@keyframes tp-cue-pin {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
}

/* Arrivée sur la ligne déplacement : le menu des villes pulse deux fois. */
.tp-bpu__table tr.is-asking .tp-select__button {
    border-color: #7057e6;
    animation: tp-cue-ring 1.1s ease-out 2;
}

.tp-bpu__note {
    margin: 0;
    color: var(--pro-muted);
    font-size: 0.92rem;
    line-height: 1.35;
}

.tp-bpu__note strong {
    color: var(--pro-ink);
    font-size: 1.08rem;
    font-variant-numeric: tabular-nums;
}

.tp-bpu__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tp-btn--line {
    min-height: 42px;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(105, 82, 227, 0.3);
    color: var(--pro-violet-strong);
    background: transparent;
    font-size: 0.88rem;
}

.tp-btn--line:hover,
.tp-btn--line:focus-visible {
    background: rgba(112, 87, 230, 0.08);
}

.tp-btn--line[hidden] {
    display: none;
}

.pro-btn[aria-disabled="true"] {
    opacity: 0.55;
    box-shadow: none;
    pointer-events: none;
}

/* ---------- Exemples de chiffrage ---------- */
.tp-cases__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-case {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.1rem;
    border: 1px solid var(--pro-line);
    border-radius: 20px;
    background: var(--pro-card);
}

.tp-case__budget {
    margin: 0 0 0.2rem;
    color: var(--pro-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.tp-case__budget strong {
    color: var(--pro-violet-strong);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.tp-cases .tp-case h3 {
    font-size: 1rem;
}

.tp-case p {
    margin: 0;
    color: var(--pro-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.tp-case .tp-case__place {
    color: var(--pro-violet-strong);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tp-case .tp-case__deliv {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--pro-line);
    font-size: 0.82rem;
}

.tp-case__deliv b {
    display: block;
    color: var(--pro-ink);
}

/* Les lignes du bordereau qui composent le scénario, comme un mini-DQE. */
.tp-case__lines {
    display: grid;
    gap: 0.3rem;
    margin: 0.3rem 0 0;
    padding: 0.7rem 0 0;
    border-top: 1px solid var(--pro-line);
    list-style: none;
    color: var(--pro-ink);
    font-size: 0.84rem;
    line-height: 1.35;
}

.tp-case__lines li {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.tp-case__lines b {
    flex: none;
    color: var(--pro-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 700;
}

.tp-case__lines span {
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--pro-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tp-case__load {
    width: 100%;
    margin-top: auto;
}

.tp-case__lines + .tp-case__load {
    margin-top: 0.9rem;
}

/* Les lignes poussent le bouton en bas de chaque carte, à la même hauteur. */
.tp-case__lines {
    margin-bottom: auto;
}

.tp-case--feature .tp-case__lines {
    padding-left: 1.1rem;
    border-top-color: rgba(199, 184, 255, 0.2);
    color: rgba(255, 255, 255, 0.86);
    list-style: disc;
}

.tp-case--feature .tp-case__lines li {
    display: list-item;
}

.tp-case--feature .tp-case__lines li::marker {
    color: #c7b8ff;
}

.tp-case--feature {
    border-color: rgba(162, 137, 255, 0.3);
    color: #fff;
    background: var(--pro-night-panel);
}

.tp-cases .tp-case--feature h3,
.tp-case--feature .tp-case__deliv b {
    color: #fff;
}

.tp-case--feature p,
.tp-case--feature .tp-case__budget {
    color: rgba(255, 255, 255, 0.76);
}

.tp-case--feature .tp-case__budget strong,
.tp-case--feature .tp-case__place {
    color: #c7b8ff;
}

.tp-case--feature .tp-case__deliv {
    border-top-color: rgba(199, 184, 255, 0.2);
}

/* ---------- Conditions ---------- */
.tp-terms__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.tp-terms__col {
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--pro-line);
    border-radius: 20px;
    background: var(--pro-card);
}

.tp-terms__col ul {
    display: grid;
    gap: 0.45rem;
    margin: 0.7rem 0 0;
    padding-left: 1.1rem;
    color: var(--pro-muted);
    font-size: 0.94rem;
    line-height: 1.45;
}

.tp-terms__col li::marker {
    color: #7057e6;
}

.tp-terms__legal {
    margin: 1rem 0 0;
    color: var(--pro-muted);
    font-size: 0.82rem;
}

/* ---------- Mode sombre ---------- */
[data-theme="dark"] .tp-page {
    --tp-row: rgba(199, 184, 255, 0.12);
    --tp-group: rgba(199, 184, 255, 0.08);
    --tp-on: rgba(185, 166, 255, 0.12);
    --tp-field: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .tp-bpu__actions {
    background: rgba(31, 24, 88, 0.92);
    box-shadow: 0 14px 36px rgba(8, 2, 34, 0.5);
}

[data-theme="dark"] .tp-desc strong em,
[data-theme="dark"] .tp-check input:checked + .tp-check__pill {
    background-color: #7d5cff;
}

[data-theme="dark"] .tp-select__list {
    background: #221a5e;
    box-shadow: 0 18px 44px rgba(8, 2, 34, 0.6);
}

[data-theme="dark"] .tp-stepper__btn,
[data-theme="dark"] .tp-select__chevron {
    background: rgba(199, 184, 255, 0.12);
}

[data-theme="dark"] .tp-stepper__btn:hover {
    color: #fff;
    background: #7d5cff;
}

[data-theme="dark"] .tp-select__option:hover,
[data-theme="dark"] .tp-select__option:focus {
    background: rgba(199, 184, 255, 0.12);
}

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
    .tp-uses__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Téléphone ---------- */
@media (max-width: 899px) {
    .tp-hero__content,
    .tp-profile {
        grid-template-columns: 1fr;
    }

    /* Une colonne, tout centré : étiquette, titre, la coupe animée, puis le
       texte, les boutons et les preuves. Le bloc texte s'efface
       (display: contents) pour que la coupe puisse s'intercaler. Le hero prend
       la hauteur de son contenu (plus de vide au-dessus ni en dessous). */
    .pro-hero.tp-hero {
        min-height: 0;
    }

    .tp-hero__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: calc(5.6rem + var(--tp-mhead)) 0 calc(4rem + var(--tp-overlap));
        text-align: center;
    }

    .tp-hero__copy {
        display: contents;
    }

    .tp-hero .pro-eyebrow { order: 1; }
    .tp-hero h1 { order: 2; }
    .tp-hero__plan { order: 3; }
    .tp-hero .pro-hero__lead { order: 4; }
    .tp-hero .pro-hero__actions { order: 5; }
    .tp-hero .tp-hero__trust { order: 6; }

    .tp-hero h1,
    .tp-hero .pro-hero__lead {
        margin-inline: auto;
        text-align: center;
    }

    .tp-hero__plan {
        width: min(100%, 380px);
        margin-top: 1.6rem;
        padding: 0.6rem;
        border-radius: 18px;
    }

    .tp-hero .pro-hero__actions {
        justify-content: center;
        width: 100%;
    }

    .tp-hero .tp-hero__trust {
        justify-content: center;
        margin-inline: auto;
    }

    .tp-profile__card {
        max-width: 420px;
    }

    .tp-profile__facts {
        grid-template-columns: 1fr;
    }

    .tp-terms__grid {
        grid-template-columns: 1fr;
    }

    /* Le bordereau devient une pile de lignes : code et désignation en haut,
       unité, PU, quantité et montant en dessous, chacun avec son intitulé. */
    .tp-bpu__wrap {
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .tp-bpu__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .tp-bpu__table,
    .tp-bpu__table tbody,
    .tp-bpu__table tfoot {
        display: block;
    }

    .tp-bpu__table tbody tr:not(.tp-bpu__group) {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 0.6rem;
        border: 1px solid var(--pro-line);
        border-radius: 16px;
        background: var(--pro-card);
    }

    /* Pas d'overflow: hidden sur la carte (il rognerait le menu des villes) :
       la teinte « ligne choisie » passe donc sur la carte, pas sur ses cellules. */
    .tp-bpu__table tbody tr.is-on {
        border-color: rgba(112, 87, 230, 0.45);
        background: linear-gradient(var(--tp-on), var(--tp-on)), var(--pro-card);
    }

    .tp-bpu__table tr.is-on td {
        background: transparent;
    }

    .tp-bpu__group {
        display: block;
        margin: 1rem 0 0.5rem;
    }

    .tp-bpu__group th {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .tp-bpu__group th span {
        display: block;
        margin: 0.1rem 0 0;
    }

    .tp-bpu__table td {
        border-bottom: 0;
    }

    .tp-bpu__table .tp-code {
        grid-column: 1 / -1;
        width: auto;
        padding-bottom: 0;
    }

    .tp-bpu__table .tp-desc {
        grid-column: 1 / -1;
        padding-top: 0.2rem;
    }

    .tp-bpu__table .tp-unit,
    .tp-bpu__table td.tp-num {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 0.25rem;
        padding: 0.6rem 0.7rem 0.75rem;
        border-top: 1px solid var(--tp-row);
        text-align: left;
        white-space: normal;
    }

    .tp-bpu__table .tp-unit::before,
    .tp-bpu__table td.tp-num::before {
        content: attr(data-th);
        color: var(--pro-muted);
        font-size: 0.66rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .tp-bpu__table td.tp-qty {
        grid-column: 1 / -1;
        order: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .tp-stepper__btn {
        width: 34px;
        height: 34px;
    }

    .tp-qty .tp-stepper input[type="number"] {
        width: 3.2rem;
    }

    .tp-bpu__table tfoot tr {
        display: flex;
        justify-content: space-between;
    }

    .tp-bpu__table tfoot th,
    .tp-bpu__table tfoot td,
    .tp-bpu__table tfoot td.tp-num {
        border: 0;
        padding-inline: 0.2rem;
    }

    .tp-bpu__actions {
        border-radius: 22px;
        padding: 0.75rem;
    }

    .tp-bpu__buttons {
        width: 100%;
    }

    .tp-bpu__buttons {
        flex-wrap: nowrap;
    }

    .tp-bpu__buttons .pro-btn {
        white-space: nowrap;
    }

    .tp-bpu__buttons .pro-btn--primary {
        flex: 1 1 auto;
    }

    .tp-bpu__buttons [data-tp-print] {
        display: none;
    }

    /* Exemples : une bande qui défile au doigt. */
    .tp-cases__list {
        display: flex;
        gap: 0.7rem;
        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;
    }

    .tp-cases__list::-webkit-scrollbar {
        display: none;
    }

    .tp-case {
        flex: none;
        width: min(78vw, 300px);
        scroll-snap-align: start;
    }
}

@media (max-width: 560px) {
    .tp-uses__grid {
        grid-template-columns: 1fr;
    }

    /* Les trois preuves côte à côte, icône au-dessus, centrées. */
    .tp-hero .tp-hero__trust {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        width: 100%;
    }

    .tp-hero .tp-hero__trust li {
        flex-direction: column;
        gap: 0.45rem;
        font-size: 0.76rem;
        text-align: center;
    }

    .tp-page {
        --tp-overlap: 0px;
    }

    .tp-hero__content {
        padding: calc(4.9rem + var(--tp-mhead)) 0 calc(3.5rem + var(--tp-overlap));
    }

    /* Assez petite pour que « Chiffrer une intervention » reste dans le premier écran. */
    .tp-hero__plan {
        width: min(100%, 270px);
        margin-top: 1.2rem;
    }

    .tp-hero .pro-eyebrow {
        letter-spacing: 0.06em;
    }

    .tp-hero h1 {
        margin-top: 0.8rem;
    }

    /* La promesse en violet, un cran plus petite que « Photo et vidéo de chantier » :
       la hiérarchie se lit mieux et le bouton reste dans le premier écran. */
    .tp-hero h1 span {
        margin-top: 0.25em;
        font-size: 0.74em;
        line-height: 1.15;
    }

    .tp-hero .pro-hero__actions {
        flex-direction: column;
        margin-top: 1.5rem;
    }

    .tp-hero .pro-hero__trust {
        margin-top: 1.5rem;
    }

    .tp-bpu__buttons .pro-btn {
        min-width: 0;
        padding-inline: 0.85rem;
        font-size: 0.84rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-travel-cue.is-calling,
    .tp-travel-cue.is-calling svg,
    .tp-bpu__table tr.is-asking .tp-select__button {
        animation: none;
    }

}

/* ---------- Impression : le détail estimatif seul ---------- */
@media print {
    body > *:not(main),
    .tp-page > *:not(.tp-bpu),
    .tp-bpu__buttons,
    .tp-desc details,
    .tp-city,
    .tp-stepper__btn,
    #back-to-top {
        display: none !important;
    }

    .tp-bpu {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: none;
    }

    .tp-bpu__actions {
        position: static;
        border: 0;
        box-shadow: none;
        background: none;
    }

    .tp-bpu__table tbody tr:not(.is-on):not(.tp-bpu__group),
    .tp-bpu__table tbody:not(:has(tr.is-on)) {
        display: none;
    }

    .tp-qty input {
        border: 0;
    }
}