/* Compact operator scenes: the guide stands beside the panel, at the summary edge. */
.tp-mobile-hero,.tp-brand-hero{position:relative;overflow:hidden;isolation:isolate}
.tp-mobile-hero>.wrap,.tp-brand-hero>.wrap{position:relative;z-index:1}
.tp-page :is(.tp-mobile-hero-grid,.tp-brand-hero-grid){position:relative;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px;padding:28px 0 24px;--tp-portrait-height:300px;--tp-portrait-width:200px}
.tp-page :is(.tp-mobile-scene,.tp-brand-hero-scene){width:calc(100% - 150px);min-height:0;align-self:center;padding-top:0}
.tp-page :is(.tp-mobile-hero,.tp-brand-hero) h1{font-size:var(--text-title);line-height:var(--leading-title);margin:0 0 18px}
.tp-page :is(.tp-mobile-hero,.tp-brand-hero) .tp-brand-hero-identity{margin-bottom:23px;gap:17px}
.tp-page :is(.tp-mobile-signature,.tp-brand-hero-signature){font-size:var(--text-scale-16-32);margin:0 0 13px}
.tp-page :is(.tp-mobile-hero-copy,.tp-brand-hero-copy)>p:not(.tp-date):not(.tp-mobile-signature):not(.tp-brand-hero-signature){font-size:var(--text-body);line-height:var(--leading-body)}
.tp-page :is(.tp-mobile-hero,.tp-brand-hero) .tp-brand-hero-actions{margin:21px 0 14px;gap:12px}
.tp-page :is(.tp-mobile-hero,.tp-brand-hero) .tp-date{margin:0;font-size:var(--text-scale-10-4)}
.tp-page :is(.tp-mobile-motto,.tp-brand-hero-motto){font-size:var(--text-scale-10-08);letter-spacing:.08em;line-height:1.5;margin:0 0 13px}
.tp-hero-signoff{display:inline-flex;align-items:center;gap:14px;background:#ffe29e;color:#403322;padding:12px 16px;border-radius:4px 12px 12px 12px;font-weight:800;font-size:var(--text-scale-11-68);line-height:1.4;text-decoration:none;margin:20px 0 0;box-shadow:3px 4px 0 #0000000b}
.tp-hero-signoff .site-svg-icon{width:18px;height:18px;flex:none}
.tp-hero-portrait-frame{position:absolute;bottom:0;right:-8px;width:var(--tp-portrait-width);height:calc(var(--tp-portrait-height) - 12px);overflow:hidden;z-index:2;pointer-events:none}
.tp-page .tp-hero-portrait-frame :is(.tp-mobile-yaka,.tp-brand-hero-yaka){height:var(--tp-portrait-height);margin:0;position:static}
.tp-page .tp-hero-portrait-frame img{position:static;height:var(--tp-portrait-height);width:var(--tp-portrait-width);object-fit:contain;object-position:bottom;flex:none;align-self:auto}
.tp-page :is(.tp-mobile-summary,.tp-brand-hero-summary){padding:18px 0;background:#ffffff4d;position:relative;z-index:3}
.tp-mobile-summary dd{font-size:var(--text-scale-13-6)}.tp-brand-hero-summary dd{font-size:var(--text-scale-13-12)}

/* Panels retain the operator's own composition, with less vertical scaffolding. */
.tp-page :is(.tp-network-board,.tp-travel-board,.tp-auchan-board,.tp-flex-board,.tp-poste-envelope,.tp-nrj-board,.tp-reglo-ledger,.tp-syma-switchboard,.tp-coriolis-desk){padding:22px}
.tp-network-board>a{padding:13px 0;gap:3px 9px;grid-template-columns:30px 1fr auto}
.tp-network-board>a>strong{font-size:var(--text-scale-14-72)}.tp-network-board>a>b{font-size:var(--text-scale-15-36)}
.tp-flex-board li{padding:9px 0}.tp-flex-board li strong{font-size:var(--text-body);line-height:var(--leading-body)}
.tp-page .tp-mobile-scene h2{font-size:var(--text-scale-27-2);line-height:1.13;margin-block:12px 18px}
.tp-travel-board>div{padding-block:11px}.tp-travel-board h2{margin-top:25px!important}
.tp-poste-stamp{width:65px;height:65px;right:16px;top:17px}
.tp-poste-destinations>a{padding:11px 0;gap:11px}.tp-poste-destinations strong{font-size:var(--text-scale-13-76)}
.tp-nrj-board header>strong{font-size:var(--text-scale-26-4);margin-bottom:18px}.tp-nrj-levels>a{padding:16px 9px;gap:10px;min-height:135px}.tp-nrj-levels>a:nth-child(2){min-height:155px}.tp-nrj-levels>a:nth-child(3){min-height:175px}.tp-nrj-levels b,.tp-nrj-levels>a>span{font-size:var(--text-scale-15-2)}.tp-nrj-board>p{margin-top:18px}
.tp-cdiscount-scene{grid-template-columns:1fr;gap:10px}.tp-cdiscount-note{margin:0;transform:none;display:flex;gap:12px;padding:12px 16px;align-items:center}.tp-cdiscount-note svg{margin:0;width:23px;height:23px;flex:none}.tp-cdiscount-receipt{padding:20px}.tp-cdiscount-receipt h2 br{display:none}.tp-cdiscount-receipt h2{font-size:var(--text-scale-25-6)}.tp-cdiscount-receipt dl>div{padding:9px 0;gap:10px}.tp-cdiscount-receipt>p{margin-bottom:13px}.tp-cdiscount-receipt>a{margin-block:14px 8px}
.tp-reglo-credit,.tp-reglo-cycle{padding:13px 12px 13px 48px}.tp-reglo-ledger svg{left:13px;top:18px;width:22px;height:22px}.tp-reglo-ledger h2{font-size:var(--text-scale-20-8) !important;margin-block:7px 10px!important}
.tp-syma-line{padding:17px 0;gap:13px}.tp-syma-line>span{width:42px;height:42px}.tp-syma-line svg{width:24px;height:24px}.tp-syma-line h2{font-size:var(--text-scale-22-4) !important;margin-block:9px!important}.tp-syma-line p{font-size:var(--text-scale-11-36)}
.tp-coriolis-desk a{padding:13px;font-size:var(--text-scale-11-68);gap:8px}.tp-coriolis-desk a small{font-size:var(--text-caption)}.tp-coriolis-desk>p{margin-top:16px;font-size:var(--text-scale-11-2)}
.tp-source-scene{min-height:275px;gap:12px}.tp-source-drop{min-height:275px}.tp-source-drop>strong{font-size:var(--text-scale-67-2)}.tp-source-drop>span{font-size:var(--text-caption)}.tp-source-ticket{padding:16px}.tp-source-ticket>span{font-size:var(--text-caption)}
.tp-lyca-calendar>header{padding:16px 20px}.tp-lyca-calendar-main>strong{font-size:var(--text-scale-88)}.tp-lyca-calendar-main>span{font-size:var(--text-scale-19-2)}.tp-lyca-days{padding:4px 20px 16px}.tp-lyca-days i{height:23px}.tp-lyca-calendar footer{padding:14px 20px;font-size:var(--text-scale-10-56);gap:12px}
.tp-page .tp-brand-hero-tile{min-height:225px;padding:18px;border-radius:18px}
.tp-page .tp-brand-hero-tile-art,.tp-page .tp-brand-hero-tile-art img{height:90px}
.tp-page .tp-brand-hero-tile strong{font-size:var(--text-scale-17-6)}.tp-page .tp-brand-hero-tile small{font-size:var(--text-caption);margin:8px 0 13px}
.tp-page .tp-brand-hero--orange .tp-brand-hero-tile{min-height:120px;grid-template-columns:70px 1fr;gap:0 13px;border-radius:0}
.tp-page .tp-brand-hero--orange .tp-brand-hero-tile-art,.tp-page .tp-brand-hero--orange .tp-brand-hero-tile-art img{height:85px}
.tp-page .tp-brand-hero--free .tp-brand-hero-tiles{grid-template-columns:1fr}
.tp-page .tp-brand-hero--free .tp-brand-hero-tile{min-height:135px;display:grid;grid-template-columns:85px 1fr;gap:0 13px;border-radius:0}
.tp-brand-hero--free .tp-brand-hero-tile>span,.tp-brand-hero--free .tp-brand-hero-tile strong,.tp-brand-hero--free .tp-brand-hero-tile small,.tp-brand-hero--free .tp-brand-hero-tile i{grid-column:2}
.tp-brand-hero--free .tp-brand-hero-tile-art{grid-column:1;grid-row:1/5;margin:0}
.tp-page .tp-brand-hero--free .tp-brand-hero-tile:first-child .tp-brand-hero-tile-art,.tp-page .tp-brand-hero--free .tp-brand-hero-tile:first-child .tp-brand-hero-tile-art img{height:100px}
.tp-page .tp-brand-hero--sosh .tp-brand-hero-scene{padding:20px 16px 0;border-radius:0}

/* Each operator has a single editorial backdrop, without repeated motifs or rings. */
.tp-page :is(.tp-mobile-hero,.tp-brand-hero,.tp-equipment-hero,.tp-hero){position:relative;isolation:isolate;overflow:hidden;background-repeat:no-repeat}
.tp-page :is(.tp-mobile-hero,.tp-brand-hero,.tp-equipment-hero,.tp-hero)>.wrap{position:relative;z-index:1}
.tp-page :is(.tp-mobile-hero,.tp-brand-hero,.tp-equipment-hero,.tp-hero)::before,
.tp-page :is(.tp-mobile-hero,.tp-brand-hero,.tp-equipment-hero,.tp-hero)::after{content:none;border:0;box-shadow:none;transform:none}

/* YouPrice: a blue sheet with one cut corner, behind the network choices. */
.tp-mobile-hero--youprice{background:#f1f7fa}
.tp-mobile-hero--youprice::before{content:''!important;position:absolute;inset:48px 0 0 48%;background:#b8dce5;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 14%);z-index:0}
/* Lebara: a travel-blue horizon, with a clear paper space for the introduction. */
.tp-mobile-hero--lebara{background:linear-gradient(90deg,#f3f9ff 0 47%,transparent 66%),linear-gradient(180deg,#9cd6f7 0 37%,#dbedfa 37% 100%)}
/* Auchan: a warm lower corner, like a folded label. */
.tp-mobile-hero--auchan-telecom{background:#fffcf1}
.tp-mobile-hero--auchan-telecom::before{content:''!important;position:absolute;inset:0;background:#ffdf80;clip-path:polygon(100% 18%,100% 100%,42% 100%);z-index:0}
/* Prixtel: violet light, deliberately no geometric cut through the page. */
.tp-mobile-hero--prixtel{background:radial-gradient(ellipse at 92% 70%,#c6b5f0 0,#e3d8fa 33%,transparent 65%),#faf7ff}
/* La Poste: a yellow envelope rising behind the white destination panel. */
.tp-page[data-tp-operator="yaka-telecom-5"] .tp-mobile-hero{background:#fffdf1;background-repeat:no-repeat}
.tp-page[data-tp-operator="yaka-telecom-5"] .tp-mobile-hero::before{content:''!important;position:absolute;inset:95px -2% 0 49%;background:#ffcd3d;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 44%,22% 29%);z-index:0}
/* NRJ: a charcoal stage at the base, confined to the offer scene. */
.tp-mobile-hero--nrj-mobile{background:linear-gradient(90deg,#f7f7f8 0 44%,transparent 68%),linear-gradient(180deg,#f1f1f3 0 54%,#42434b 54% 86%,#e1e1e5 86%)}
/* Cdiscount: one broad mint shelf, no diagonal or outline. */
.tp-mobile-hero--cdiscount-mobile{background:linear-gradient(180deg,#f6fcf9 0 64%,#b4ebd9 64%)}
/* Réglo: a vertical blue inset, rather than a full coloured half. */
.tp-mobile-hero--reglo-mobile{background:#f8f9ff}
.tp-mobile-hero--reglo-mobile::before{content:''!important;position:absolute;inset:0 6% 0 62%;background:#d4dcf9;z-index:0}
/* Syma: the gold backdrop sits low, echoing its dark switchboard. */
.tp-mobile-hero--syma{background:linear-gradient(90deg,#fff9f2 0 49%,transparent 72%),linear-gradient(180deg,#fff9f2 0 48%,#f4cc65 48%)}
/* Source: one flowing blue shape, reflecting its unused-data droplet. */
.tp-mobile-hero--source-mobile{background:#f2faf8}
.tp-mobile-hero--source-mobile::before{content:''!important;position:absolute;width:64%;height:65%;right:-12%;bottom:0;top:auto;background:#b8e7e5;border-radius:85% 0 0 0/100% 0 0 0;z-index:0}
/* Coriolis: a cool top light fading into an almost white page. */
.tp-mobile-hero--coriolis{background:radial-gradient(ellipse at 78% 0,#94c5e5 0,#d9eaf5 32%,transparent 63%),#f9fbfd}
/* Lyca: a green corner, framing the calendar instead of colouring the text. */
.tp-mobile-hero--lyca-mobile{background:#f6faf4}
.tp-mobile-hero--lyca-mobile::before{content:''!important;position:absolute;width:58%;height:80%;right:-10%;top:24%;background:#a9e3b7;border-radius:100% 0 0 0;z-index:0}
/* Sosh: one clean oblique cut in the logo's turquoise. */
.tp-brand-hero--sosh{background:#f1fbf9}
.tp-brand-hero--sosh::before{content:''!important;position:absolute;inset:0;width:auto;height:auto;background:#13aab5;border-radius:0;clip-path:polygon(64% 0,100% 0,100% 100%,46% 100%);z-index:0}
/* RED: a diagonal capsule, deliberately distinct from Sosh's disc. */
.tp-brand-hero--red{background:#f3fcf7}
.tp-brand-hero--red::before{content:''!important;position:absolute;width:46%;height:86%;right:-4%;top:8%;background:#82e4b6;border-radius:150px 18px 150px 18px;transform:rotate(-9deg);z-index:0}
/* Orange: the dark studio with one warm light, no decorative outlines. */
.tp-brand-hero--orange{background:radial-gradient(ellipse at 100% 100%,#824010 0,#35261d 35%,transparent 65%),#181818}
.tp-brand-hero--orange .tp-brand-hero-summary{background:#ffffff06}
/* Free: a low studio plinth; a single red edge identifies the equipment side. */
.tp-brand-hero--free{background:linear-gradient(180deg,#fafaf8 0 70%,#e6e6e4 70%)}
.tp-brand-hero--free::before{content:''!important;position:absolute;width:12px;height:47%;right:0;top:22%;background:#e21b24;z-index:0}
/* SFR: a neutral architectural alcove, with a small red footing. */
.tp-equipment-hero{background:#f7f6f2}
.tp-equipment-hero::before{content:''!important;position:absolute;inset:34px -5% 0 52%;background:linear-gradient(140deg,#d8dcdf,#eceeec);border-radius:150px 0 0 0;z-index:0}
.tp-equipment-hero::after{content:''!important;position:absolute;width:19%;height:8px;right:0;bottom:0;background:#e2001a;z-index:0}
.tp-equipment-summary{position:relative;background:#ffffff85}

/* Bouygues keeps its approved navy scene and portrait behind the dossier. */
.tp-page[data-tp-operator="yaka-telecom-3"] .tp-hero{background:radial-gradient(ellipse at 85% 20%,#154b71 0,transparent 60%),#15374f;background-repeat:no-repeat;padding-bottom:28px}
.tp-page[data-tp-operator="yaka-telecom-3"] .tp-hero-copy{padding-top:26px}
.tp-page[data-tp-operator="yaka-telecom-3"] .tp-identity{margin-bottom:23px}
.tp-page[data-tp-operator="yaka-telecom-3"] .tp-hero h1{font-size:var(--text-title);line-height:var(--leading-title)}
.tp-page[data-tp-operator="yaka-telecom-3"] .tp-hero-copy>p:not(.tp-hero-tagline):not(.tp-date){font-size:var(--text-lead);line-height:var(--leading-lead)}
.tp-page[data-tp-operator="yaka-telecom-3"] .tp-dossier{grid-template-rows:235px auto}
.tp-page[data-tp-operator="yaka-telecom-3"] .tp-dossier-art img{height:320px}
.tp-page[data-tp-operator="yaka-telecom-3"] .tp-dossier-card{padding:22px 25px}
.tp-page[data-tp-operator="yaka-telecom-3"] .tp-dossier-card dl>div{padding-block:11px}

@media(min-width:768px) and (max-width:1199px){
 .tp-page :is(.tp-mobile-hero-grid,.tp-brand-hero-grid){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;--tp-portrait-height:235px;--tp-portrait-width:157px}
 .tp-page :is(.tp-mobile-scene,.tp-brand-hero-scene){width:100%;padding-bottom:112px}
 .tp-page :is(.tp-mobile-hero,.tp-brand-hero) h1{font-size:var(--text-title);line-height:var(--leading-title)}
 .tp-page .tp-brand-hero-tile{padding:15px;min-height:205px}
 .tp-hero-signoff{max-width:calc(100% - var(--tp-portrait-width) + 10px);font-size:var(--text-scale-10-56);padding:11px 12px}
 .tp-hero-portrait-frame{right:-4px}
 .tp-page .tp-mobile-scene h2{font-size:var(--text-scale-24)}
}
@media(max-width:767px){
 .tp-mobile-hero,.tp-brand-hero{padding-top:18px}
 .tp-page :is(.tp-mobile-hero-grid,.tp-brand-hero-grid){grid-template-columns:1fr;gap:26px;padding:24px 0 0;--tp-portrait-height:225px;--tp-portrait-width:150px}
 .tp-page :is(.tp-mobile-scene,.tp-brand-hero-scene){width:100%;padding-bottom:128px;margin:0;max-width:none}
 .tp-page :is(.tp-mobile-hero,.tp-brand-hero) h1{font-size:var(--text-title);line-height:var(--leading-title)}
 .tp-page :is(.tp-mobile-hero,.tp-brand-hero) .tp-brand-hero-actions{flex-direction:row;gap:8px}
 .tp-page :is(.tp-mobile-hero,.tp-brand-hero) .tp-brand-hero-actions a{width:auto;flex:1;min-height:46px;font-size:var(--text-scale-11-2) !important;padding:12px 9px;justify-content:center}
 .tp-page :is(.tp-mobile-hero,.tp-brand-hero) .tp-brand-hero-identity{margin-bottom:20px}
 .tp-page :is(.tp-mobile-hero-copy,.tp-brand-hero-copy)>p:not(.tp-date):not(.tp-mobile-signature):not(.tp-brand-hero-signature){font-size:var(--text-body);line-height:var(--leading-body)}
 .tp-page :is(.tp-mobile-signature,.tp-brand-hero-signature){font-size:var(--text-scale-15-52)}
 .tp-page .tp-brand-hero--sosh .tp-brand-hero-scene{padding:20px 14px 128px}
 .tp-page .tp-brand-hero-tile{min-height:200px;padding:14px}
 .tp-page .tp-brand-hero-tile strong{font-size:var(--text-scale-16)}.tp-page .tp-brand-hero-tile small{font-size:var(--text-caption)}
 .tp-hero-signoff{max-width:calc(100% - var(--tp-portrait-width) + 10px);font-size:var(--text-scale-10-56);padding:11px 12px;margin-top:20px}
 .tp-hero-portrait-frame{right:-2px}
 .tp-page[data-tp-operator="yaka-telecom-5"] .tp-page :is(.tp-mobile-summary,.tp-brand-hero-summary){padding-block:14px}
 .tp-page[data-tp-operator="yaka-telecom-3"] .tp-hero{padding-bottom:24px}
 .tp-page[data-tp-operator="yaka-telecom-3"] .tp-hero h1{font-size:var(--text-title);line-height:var(--leading-title)}
 .tp-page[data-tp-operator="yaka-telecom-3"] .tp-actions{gap:8px}
 .tp-page[data-tp-operator="yaka-telecom-3"] .tp-actions>*{width:auto;flex:1;font-size:var(--text-scale-11-2);padding:12px 9px}
}
@media(max-width:370px){.tp-hero-signoff{font-size:var(--text-scale-9-76);padding:10px}.tp-page :is(.tp-mobile-hero-grid,.tp-brand-hero-grid){--tp-portrait-height:215px;--tp-portrait-width:144px}.tp-page .tp-brand-hero-tile{padding:12px}.tp-page .tp-mobile-scene h2{font-size:var(--text-scale-24)}}

/* Keep each composition on phones, moving the coloured field below the copy. */
@media(max-width:767px){
 .tp-mobile-hero--youprice::before{inset:47% 0 0 8%;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%,0 10%)}
 .tp-mobile-hero--lebara{background:linear-gradient(180deg,#f3f9ff 0 48%,#9cd6f7 48% 67%,#dbedfa 67%)}
 .tp-mobile-hero--auchan-telecom::before{clip-path:polygon(100% 48%,100% 100%,0 100%)}
 .tp-page[data-tp-operator="yaka-telecom-5"] .tp-mobile-hero::before{inset:48% -2% 0 9%}
 .tp-mobile-hero--nrj-mobile{background:linear-gradient(180deg,#f7f7f8 0 58%,#42434b 58% 86%,#e1e1e5 86%)}
 .tp-mobile-hero--cdiscount-mobile{background:linear-gradient(180deg,#f6fcf9 0 75%,#b4ebd9 75%)}
 .tp-mobile-hero--reglo-mobile::before{inset:48% 7% 0 30%}
 .tp-mobile-hero--syma{background:linear-gradient(180deg,#fff9f2 0 69%,#f4cc65 69%)}
 .tp-mobile-hero--source-mobile::before{width:105%;height:32%;right:-20%}
 .tp-mobile-hero--coriolis{background:radial-gradient(ellipse at 90% 65%,#94c5e5 0,#d9eaf5 25%,transparent 55%),#f9fbfd}
 .tp-mobile-hero--lyca-mobile::before{width:100%;height:43%;right:-20%;top:60%}
 .tp-brand-hero--sosh::before{clip-path:polygon(100% 45%,100% 100%,0 100%,0 61%)}
 .tp-brand-hero--red::before{width:100%;height:43%;top:54%;right:-32%;border-radius:90px 16px 90px 16px}
 .tp-brand-hero--free::before{top:52%;height:24%;width:8px}
 .tp-equipment-hero::before{inset:52% -15% 0 14%;border-radius:90px 0 0 0}
}

/* The credit review's white logo plaque, scaled for compact telecom heroes. */
.tp-page .tp-hero-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:176px;height:88px;padding:14px 20px;box-sizing:border-box;background:#fff;border:1px solid color-mix(in srgb,var(--tp-brand) 18%,#e1e7e3);border-radius:13px;box-shadow:7px 8px 0 color-mix(in srgb,var(--tp-brand) 16%,#f0f4ef);transform:rotate(-2deg)}
.tp-page .tp-hero-logo .tc-logo-art{width:min(136px,calc(60px * var(--logo-ratio)));height:auto;aspect-ratio:var(--logo-ratio);flex:none;transform:rotate(2deg)}
.tp-hero-logo>strong{font-size:var(--text-scale-16);line-height:1.3;text-align:center;transform:rotate(2deg)}
@media(max-width:767px){
 .tp-page .tp-hero-logo{width:132px;height:74px;padding:10px 14px;box-shadow:6px 7px 0 color-mix(in srgb,var(--tp-brand) 16%,#f0f4ef)}
 .tp-page .tp-hero-logo .tc-logo-art{width:min(104px,calc(54px * var(--logo-ratio)))}
}
@media(max-width:370px){.tp-page .tp-hero-logo{width:124px;height:70px;padding:9px 12px}.tp-page .tp-hero-logo .tc-logo-art{width:min(100px,calc(52px * var(--logo-ratio)))}}