/* Outils pratiques: page-local composition, shared 99outils colour tokens. */
.opx-hub{--opx-shadow:0 10px 28px rgb(3 24 43 / 10%);color:var(--b-night);background:var(--o-surface,#f4f6f8)}
.opx-hub *{box-sizing:border-box}
.opx-hub :is(h1,h2,h3,p,a){overflow-wrap:anywhere}
.opx-shell{width:min(calc(100% - 80px),1280px);margin-inline:auto}
.opx-hub .opx-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--b-gradient);color:#fff;margin:0}
.opx-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#03182b 4%,#06345df2 42%,#06345d66 76%,#03182b70),linear-gradient(0deg,#03182b99,transparent 65%);pointer-events:none}
.opx-hero .opx-hero-photo{position:absolute;inset:0 0 0 33%;z-index:-2;margin:0;max-width:none}
.opx-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.opx-hero .e-breadcrumb,.opx-hero .e-breadcrumb a,.opx-hero .e-breadcrumb span{color:#fff}
.opx-hero-copy{padding:32px 0 96px;max-width:670px}
.opx-hub .opx-eyebrow{color:var(--o-blue);font-size:.8125rem;line-height:1.5;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.opx-hero .opx-eyebrow{color:var(--b-soft)}
.opx-hub .opx-hero h1{color:#fff;font-size:clamp(2.7rem,5.2vw,4.5rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 24px;max-width:14ch}
.opx-hub .opx-lead{color:#fff;font-size:clamp(1.125rem,1.7vw,1.35rem);line-height:1.6;max-width:45ch;margin:0 0 28px}
.opx-hero .wp-block-button__link{background:#fff;color:var(--b-deep);border:1px solid #fff;border-radius:8px;padding:15px 22px;box-shadow:0 8px 24px #03182b40;font-weight:700}
.opx-hero .wp-block-button__link:hover{background:var(--b-surface)}
.opx-hub .opx-shortcuts{position:relative;z-index:1;margin-top:-32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.opx-shortcuts p{margin:0;min-width:0}
.opx-shortcuts a{display:flex;align-items:center;justify-content:center;text-align:center;gap:12px;height:100%;min-height:72px;padding:20px 24px;border:1px solid #3477a5;border-radius:var(--b-radius);background:linear-gradient(120deg,rgb(6 52 93 / 92%),rgb(0 96 161 / 90%));backdrop-filter:blur(16px);box-shadow:0 12px 26px rgb(3 24 43 / 25%),inset 0 1px 0 #ffffff30,inset 0 -3px 0 #03182b40;font-size:1.0625rem;font-weight:700;color:#fff;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.opx-shortcuts a:focus-visible{transform:translateY(-4px);box-shadow:0 18px 34px rgb(3 24 43 / 32%),inset 0 1px 0 #ffffff40;border-color:#8ac9ef}
.opx-content{padding-block:64px}
.opx-hub .opx-intro{max-width:740px;margin:0 0 40px}
.opx-hub h2{font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.18;letter-spacing:-.02em;color:var(--b-night);margin:0 0 16px}
.opx-intro>p:not(.opx-eyebrow){font-size:1.125rem;line-height:1.65;color:var(--o-muted);margin:0}
.opx-hub .opx-section{margin:0 0 64px;scroll-margin-top:32px}
.opx-section>h2{margin-bottom:28px}
.opx-grid{display:grid;gap:24px}
.opx-featured,.opx-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opx-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.opx-hub .opx-card{position:relative;min-width:0;margin:0;background:#fff;border:1px solid #d5e1eb;border-radius:var(--b-radius);box-shadow:0 12px 30px rgb(3 24 43 / 13%);display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.opx-card .opx-preview{margin:0;padding:24px;aspect-ratio:16/10;background:linear-gradient(135deg,var(--b-surface),#dbe8f3);border-radius:13px 13px 0 0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.opx-preview img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgb(3 24 43 / 16%));border-radius:6px}
.opx-featured .opx-preview{aspect-ratio:16/9;padding:22px 28px}
.opx-featured .opx-card:first-child .opx-preview{background:linear-gradient(125deg,#06345d,#03182b)}
.opx-hub .opx-card-copy{display:flex;flex-direction:column;flex:1;padding:24px 28px 20px;margin:0}
.opx-hub .opx-tag{color:var(--o-blue);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;margin:0 0 12px;line-height:1.5}
.opx-hub .opx-card h3{font-size:clamp(1.35rem,1.8vw,1.7rem);line-height:1.22;letter-spacing:-.015em;margin:0 0 14px;color:var(--b-night)}
.opx-card-copy>p:not(.opx-tag):not(.opx-action){color:#465865;font-size:1rem;line-height:1.65;margin:0 0 20px}
.opx-hub .opx-action{margin:auto 0 0;padding-top:8px}
.opx-action a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;color:var(--o-blue);font-weight:700;font-size:1rem;text-decoration:none}
.opx-action a::after{content:"";position:absolute;inset:0;border-radius:var(--b-radius)}
.opx-action span{display:grid;place-items:center;flex-shrink:0;width:1.8em;height:1.8em;border-radius:50%;background:var(--b-surface);font-size:1.25rem;line-height:1;letter-spacing:normal;word-spacing:normal}
.opx-card:has(a:focus-visible){outline:3px solid var(--o-blue);outline-offset:5px;transform:translateY(-8px);box-shadow:0 24px 44px rgb(3 24 43 / 25%);z-index:1}
.opx-action a:focus-visible{outline:none;box-shadow:none;text-decoration:underline}
.opx-hub a:focus-visible{outline:3px solid var(--o-blue);outline-offset:5px}
.opx-hero a:focus-visible{outline-color:#fff}
.opx-card .opx-action a:focus-visible{outline:none}
.opx-hub .opx-note{padding:32px 40px;border:1px solid #d5e1eb;border-left:4px solid var(--o-blue);border-radius:var(--b-radius);background:var(--b-surface);margin:0}
.opx-note h2{font-size:1.4rem}
.opx-note p{font-size:1rem;line-height:1.7;color:#34516b;max-width:90ch;margin:0}
#vos-outils{scroll-margin-top:32px}
@media(hover:hover) and (pointer:fine){
 .opx-shortcuts a:hover{transform:translateY(-4px);border-color:#8ac9ef;box-shadow:0 18px 34px rgb(3 24 43 / 32%),inset 0 1px 0 #ffffff40}
 .opx-card:hover{transform:translateY(-8px);border-color:var(--o-blue);box-shadow:0 24px 44px rgb(3 24 43 / 25%);z-index:1}
 .opx-card:hover .opx-action a{text-decoration:underline;text-underline-offset:4px}
 .opx-card:hover .opx-action span{background:var(--o-blue);color:#fff}
}
@media(max-width:1000px){.opx-shell{width:calc(100% - 48px)}.opx-three{grid-template-columns:repeat(2,minmax(0,1fr))}.opx-three>.opx-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.opx-three>.opx-card:last-child .opx-preview{height:100%;aspect-ratio:auto;border-radius:13px 0 0 13px}.opx-shortcuts a{padding:18px;font-size:1rem}.opx-hero-copy{max-width:600px}}
@media(max-width:600px){
 .opx-shell{width:calc(100% - 32px)}
 .opx-hero-copy{padding:20px 0 56px}
 .opx-hero .opx-hero-photo{inset:0;opacity:.4}
 .opx-hero::after{background:linear-gradient(100deg,#03182be8,#06345dc9)}
 .opx-hub .opx-hero h1{font-size:2.8rem}
 .opx-hub .opx-shortcuts{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:-20px}
 .opx-shortcuts a{min-height:56px;padding:14px 18px}
 .opx-content{padding-block:40px}
 .opx-intro{margin-bottom:32px}
 .opx-grid,.opx-three>.opx-card:last-child{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 .opx-grid{gap:20px}
 .opx-three>.opx-card:last-child{grid-column:auto}
 .opx-card .opx-preview,.opx-three>.opx-card:last-child .opx-preview{aspect-ratio:16/10;height:auto;border-radius:13px 13px 0 0;padding:18px}
 .opx-hub .opx-card-copy{padding:22px}
 .opx-hub .opx-section{margin-bottom:44px}
 .opx-hub .opx-note{padding:24px}
}
@media(prefers-reduced-motion:reduce){.opx-hub .opx-card,.opx-hub .opx-card:has(a:focus-visible),.opx-hub .opx-shortcuts a{transition:none;transform:none}}