/* Page 447: extend the existing Mesure cards, without changing shared styles. */
.op-hub .td-story{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(115deg,#06345d 0%,#06345d 38%,#042540 66%,#03182b 100%)}
.op-hub .td-story-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;z-index:-2;mask-image:linear-gradient(90deg,#000 24%,rgba(0,0,0,.92) 29%,rgba(0,0,0,.68) 34%,rgba(0,0,0,.30) 40%,rgba(0,0,0,.06) 46%,transparent 51%)}
.op-hub .td-story::before,.op-hub .td-story::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.op-hub .td-story::before{background:linear-gradient(90deg,rgba(3,24,43,.32),rgba(3,24,43,.30) 26%,rgba(3,24,43,.16) 43%,transparent 60%)}
.op-hub .td-story::after{background:linear-gradient(180deg,rgba(3,24,43,.06),transparent 35%,rgba(3,24,43,.18))}
.op-hub .td-story-inner{min-height:490px;display:flex;align-items:center;padding-block:40px}
.op-hub .td-story-copy{width:49%;margin-left:auto}
.op-hub .td-story h2{color:#fff;font-size:clamp(2rem,3.2vw,3rem);line-height:1.15;margin:0 0 28px;letter-spacing:-.025em}
.op-hub .td-story h3{color:#fff;font-size:clamp(1.4rem,2vw,1.875rem);line-height:1.3;margin:0 0 14px}
.op-hub .td-story p{color:#fff;font-size:clamp(1.125rem,1.55vw,1.4rem);line-height:1.6;margin:0}
.op-hub .td-story a{color:#fff;text-decoration:underline;display:inline-block;margin-top:12px}
.op-hub .td-story-slide+.td-story-slide{margin-top:24px}
.op-hub .td-story.is-enhanced .td-story-slides{display:grid}
.op-hub .td-story.is-enhanced .td-story-slide{grid-area:1/1;margin:0;visibility:hidden;opacity:0;transition:opacity .6s ease}
.op-hub .td-story.is-enhanced .td-story-slide.is-active{visibility:visible;opacity:1}
.op-hub .td-story-controls:not([hidden]),.op-hub .td-story-dots{display:flex;align-items:center}
.op-hub .td-story-controls{margin-top:12px;gap:12px}
.op-hub .td-story-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.op-hub .td-story-controls button[hidden]{display:none}
.op-hub .td-story-dots span{width:8px;height:8px;border-radius:50%;background:#ffffff70}
.op-hub .td-story-dots [aria-pressed="true"] span{background:#fff;box-shadow:0 0 0 3px #ffffff30}
.op-hub .td-story-controls button:hover{background:#ffffff15}
.op-hub .td-story :focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:760px){
 .op-hub .td-story-inner{padding-top:245px;padding-bottom:28px;min-height:0}
 .op-hub .td-story-copy{width:100%;margin:0}
 .op-hub .td-story-photo{height:300px;object-position:12% center;mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.8) 52%,transparent 100%)}
 .op-hub .td-story h2{font-size:2rem;margin-bottom:22px}
 .op-hub .td-story h3{font-size:1.4rem}
 .op-hub .td-story p{font-size:1.125rem}
}
@media(prefers-reduced-motion:reduce){.op-hub .td-story.is-enhanced .td-story-slide{transition:none}}
.op-hub .td-selection .mc-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
.op-hub .td-selection .td-store{background:radial-gradient(ellipse at 12% 0,rgba(198,21,48,.35),transparent 65%),linear-gradient(110deg,#851629 0%,#47121e 46%,#111318 100%);color:var(--paper);padding-block:3rem;margin-top:2rem;border-block:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px #03182b33}
.op-hub .td-selection .td-store h2{margin-bottom:1rem;color:var(--paper)}
.op-hub .td-selection .td-store p{max-width:65ch;line-height:1.75}
.op-hub .td-selection .td-store .button{margin-top:1rem;max-width:100%;white-space:normal;text-align:center}
@media(min-width:761px) and (max-width:1100px){.op-hub .td-selection .mc-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
.op-hub .td-selection .td-quick{padding-block:1.5rem}
.op-hub .td-selection .td-quick h2{font-size:1.25rem;margin-bottom:.75rem}
.op-hub .td-selection .td-quick p{line-height:1.75}
.op-hub .td-selection .mc-card{box-shadow:var(--mc-shadow)}
.op-hub .td-selection .td-reference{font-size:.85rem;color:var(--muted);margin:.5rem 1rem}
.op-hub .td-selection .td-pitch{margin:.5rem 1rem 1rem;line-height:1.65;min-height:6.6em}
.op-hub .td-selection .mc-reviews{min-height:44px}
.op-hub .td-selection .td-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.op-hub .td-selection .td-two .td-pitch{min-height:3.3em}
.op-hub .td-selection .td-experience{padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);margin:1.5rem 0 0}
.op-hub .td-selection .td-experience h2{font-size:1.5rem;margin-bottom:1rem}
.op-hub .td-selection .td-experience p{line-height:1.75}
.op-hub .td-selection .td-method{padding-block:1rem 2rem}
@media(max-width:1000px) and (min-width:761px){.op-hub .td-selection .td-pitch{min-height:9.9em}.op-hub .td-selection .mc-card h3{min-height:4em}.op-hub .td-selection .td-two .td-pitch{min-height:4.95em}}
@media(max-width:760px){.op-hub .td-selection .mc-nav,.op-hub .td-selection .td-two{grid-template-columns:1fr}.op-hub .td-selection .td-pitch,.op-hub .td-selection .td-two .td-pitch{min-height:0}.op-hub .td-selection .mc-nav a{padding:1rem}.op-hub .td-selection .td-experience{padding:1.25rem}}


/* Bandeau de la famille tournevis : visuel commun, navigation en chevauchement. */
.op-hub .td-hero{position:relative;isolation:isolate;background:var(--navy);min-height:520px;overflow:hidden}
.op-hub .td-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;z-index:-2}
.op-hub .td-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,24,43,.95) 0%,rgba(6,52,93,.82) 42%,rgba(3,24,43,.28) 76%,rgba(3,24,43,.2))}
.op-hub .td-hero-inner{padding-block:65px 112px}
.op-hub .td-hero h1{color:#fff;max-width:650px;font-size:clamp(2.5rem,4.6vw,4rem);line-height:1.08;margin:18px 0 24px}
.op-hub .td-hero p{color:#fff;max-width:590px;line-height:1.65}
.op-hub .td-hero .eyebrow{color:#fff}
.op-hub .td-hero .mc-lead{font-size:1.4rem;font-weight:700;line-height:1.4}
.op-hub .td-hero-nav{position:relative;z-index:2;margin-top:-48px}
.op-hub .td-hero-nav .mc-nav{margin-top:0;padding-top:0}
@media(max-width:1100px){.op-hub .td-hero h1,.op-hub .td-hero p{max-width:60%}}
@media(max-width:760px){
.op-hub .td-hero{min-height:0}
.op-hub .td-hero-inner{padding-block:40px 120px}
.op-hub .td-hero h1,.op-hub .td-hero p{max-width:100%}
.op-hub .td-hero video{object-position:72% center}
.op-hub .td-hero::before{background:linear-gradient(90deg,rgba(3,24,43,.92),rgba(6,52,93,.74))}
.op-hub .td-hero-nav{margin-top:-24px}
.op-hub .td-hero-nav .mc-nav{gap:12px}
}

/* Les cinq accès de la famille : relief au survol et au clavier. */
.op-hub .td-hero-nav .mc-nav a{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.op-hub .td-hero-nav .mc-nav a span{transition:transform .2s ease}
.op-hub .td-hero-nav .mc-nav a:focus-visible{transform:translateY(-6px);background:var(--paper);box-shadow:0 16px 32px rgb(3 24 43 / 22%);outline:3px solid var(--blue);outline-offset:4px}
.op-hub .td-hero-nav .mc-nav a:focus-visible span{transform:translateX(4px)}
@media(hover:hover) and (pointer:fine){
.op-hub .td-hero-nav .mc-nav a:hover{transform:translateY(-6px);background:var(--paper);box-shadow:0 16px 32px rgb(3 24 43 / 22%);border-color:var(--blue)}
.op-hub .td-hero-nav .mc-nav a:hover span{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){
.op-hub .td-hero-nav .mc-nav a,.op-hub .td-hero-nav .mc-nav a span{transition:none}
.op-hub .td-hero-nav .mc-nav a:hover,.op-hub .td-hero-nav .mc-nav a:focus-visible,.op-hub .td-hero-nav .mc-nav a:hover span,.op-hub .td-hero-nav .mc-nav a:focus-visible span{transform:none}
}

/* Fil d'Ariane dans le bandeau, sans rupture sous le header. */
.op-hub .td-hero .breadcrumbs{position:relative;color:#fff;background:transparent;padding-block:24px;margin-block:0}
.op-hub .td-hero .breadcrumbs a,.op-hub .td-hero .breadcrumbs li,.op-hub .td-hero .breadcrumbs li::before{color:#fff}
.op-hub .td-hero .breadcrumbs a:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* EncadrÃ© Facom : conserver uniquement les trois points de navigation. */
.op-hub .td-story-controls .td-story-pause{display:none}


.op-hub .td-selection .td-store .eyebrow{color:rgba(255,255,255,.85)}
.op-hub .td-selection .td-store p{color:var(--paper)}
.op-hub .td-selection .td-store .o99-amazon-disclosure{color:rgba(255,255,255,.85)}
.op-hub .td-selection .td-store .button{box-shadow:0 6px 18px #00000040;border:1px solid rgba(255,255,255,.35)}
.op-hub .td-selection .td-store .button:focus-visible{outline:3px solid var(--paper);outline-offset:4px}
