/* PH/PZ article only; reuse the Outils Pro typography, tokens and components. */
.op-hub .ph-guide .article-hero img{aspect-ratio:auto;object-fit:contain;width:100%;height:auto;background:var(--pale)}
.op-hub .ph-guide .ph-enlarge{display:block;border-radius:var(--radius)}
.op-hub .ph-guide .article-content p{line-height:1.75;margin-block:18px;color:var(--ink)}
.op-hub .ph-guide .ph-profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-block:28px}
.op-hub .ph-guide .ph-profiles>div{padding:24px;background:var(--pale);border:1px solid var(--line);border-radius:var(--radius)}
.op-hub .ph-guide .ph-profiles h3{font-size:1.35rem;line-height:1.4;margin-top:12px}
.op-hub .ph-guide .ph-tag{font-size:1.5rem;font-weight:700;color:var(--blue)}
.op-hub .ph-guide .ph-takeaway{border-top:1px solid var(--line);padding-top:16px}
.op-hub .ph-guide .ph-detail{border:1px solid var(--line);border-radius:var(--radius);padding:0 20px;margin-block:24px;background:var(--paper)}
.op-hub .ph-guide .ph-detail summary{padding-block:18px;cursor:pointer;font-weight:600;color:var(--deep);line-height:1.5}
.op-hub .ph-guide .ph-table-wrap{overflow-x:auto;margin-block:24px}
.op-hub .ph-guide table{width:100%;border-collapse:collapse;font-size:1rem}
.op-hub .ph-guide caption{text-align:left;font-weight:600;padding-bottom:12px}
.op-hub .ph-guide th,.op-hub .ph-guide td{text-align:left;vertical-align:top;padding:16px;border:1px solid var(--line);line-height:1.55}
.op-hub .ph-guide thead{background:var(--deep);color:#fff}
.op-hub .ph-guide tbody th{background:var(--pale)}
.op-hub .ph-guide .ph-actions{display:flex;flex-wrap:wrap;gap:16px;margin-block:24px}
.op-hub .ph-guide .ph-actions a{white-space:normal;text-align:center;max-width:100%;line-height:1.5}
.op-hub .ph-guide .ph-related{font-size:1rem}
.op-hub .ph-guide .ph-sources{padding-top:24px;border-top:1px solid var(--line)}
.op-hub .ph-guide .ph-sources h2{font-size:1.25rem}
.op-hub .ph-guide .ph-sources p{font-size:.95rem;color:var(--muted)}
.op-hub .ph-guide section[id]{scroll-margin-top:24px}
@media(max-width:650px){.op-hub .ph-guide .ph-profiles{grid-template-columns:1fr}.op-hub .ph-guide .ph-profiles>div{padding:20px}.op-hub .ph-guide th,.op-hub .ph-guide td{padding:10px}.op-hub .ph-guide .recap>div{grid-template-columns:1fr;gap:8px}}

.op-hub .ph-guide .ph-byline{font-size:.95rem;color:var(--muted);margin-block:20px}
.op-hub .ph-guide .ph-wear{margin:28px 0}
.op-hub .ph-guide .ph-wear img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;background:var(--pale);border-radius:var(--radius)}
.op-hub .ph-guide .ph-wear figcaption{margin-top:12px;color:var(--muted);font-size:.95rem;line-height:1.6}
/* Guide refinement: use the full article column and existing site colors. */
.op-hub .ph-guide .article-layout{gap:40px}
.op-hub .ph-guide .article-content{max-width:none;min-width:0}
.op-hub .ph-guide .article-content h2{text-wrap:wrap;max-width:none}
.op-hub .ph-guide .article-layout aside nav{display:block;padding:16px;background:var(--pale);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px #03182b12}
.op-hub .ph-guide .article-layout aside .eyebrow{padding:12px;margin:0 0 12px;background:var(--deep);color:var(--paper);border-radius:var(--radius)}
.op-hub .ph-guide .article-layout aside a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:12px 8px;border-bottom:1px solid var(--line);line-height:1.4}
.op-hub .ph-guide .article-layout aside a:last-child{border-bottom:0}
.op-hub .ph-guide .article-layout aside a::after{content:'→';color:var(--blue)}
.op-hub .ph-guide .article-layout aside a:hover,.op-hub .ph-guide .article-layout aside a:focus-visible{background:var(--paper);color:var(--blue)}
.op-hub .ph-guide .article-hero .button{background:var(--blue);color:var(--paper);border-color:var(--blue);box-shadow:0 8px 18px #03182b2b}
.op-hub .ph-guide .article-hero .button:hover{background:var(--deep);box-shadow:0 14px 28px #03182b40}
.op-hub .ph-guide .ph-profile-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.op-hub .ph-guide .ph-tag{font-size:2rem}
.op-hub .ph-guide .ph-profile-picture{display:block;position:relative;width:120px;height:120px;overflow:hidden;flex-shrink:0;border-radius:50%;background:var(--pale)}
.op-hub .ph-guide .ph-profile-picture img{position:absolute;width:220%;max-width:none;height:auto;left:-5%;top:-15%;border-radius:0}
.op-hub .ph-guide .ph-profile-picture--pz img{left:-115%}
.op-hub .ph-guide .ph-size-table{border-radius:var(--radius);box-shadow:0 8px 24px #03182b12}
.op-hub .ph-guide .ph-size-table table{min-width:660px}
.op-hub .ph-guide .ph-size-table caption{padding:16px;background:var(--pale);color:var(--deep)}
.op-hub .ph-guide .ph-size-table th,.op-hub .ph-guide .ph-size-table td{vertical-align:middle;padding:14px}
.op-hub .ph-guide .ph-size-table tbody tr:nth-child(even){background:var(--pale)}
.op-hub .ph-guide .ph-size-table tbody th{text-align:center;width:64px}
.op-hub .ph-guide .ph-size-number{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--blue);color:var(--paper);font-size:1.3rem}
.op-hub .ph-guide .ph-size-profile{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--deep)}
.op-hub .ph-guide .ph-size-profile .ph-profile-picture{width:var(--profile-size);height:var(--profile-size)}
.op-hub .ph-guide .ph-size-table tbody tr:nth-child(1){--profile-size:40px}
.op-hub .ph-guide .ph-size-table tbody tr:nth-child(2){--profile-size:56px}
.op-hub .ph-guide .ph-size-table tbody tr:nth-child(3){--profile-size:72px}
.op-hub .ph-guide .ph-size-table tbody tr:nth-child(4){--profile-size:88px}
.op-hub .ph-guide .ph-size-table td:nth-child(4){min-width:125px;white-space:nowrap}
.op-hub .ph-guide .ph-size-note{font-size:.95rem}
.op-hub .ph-guide .ph-size-key{border-left:4px solid var(--blue);padding:24px;background:var(--pale);border-radius:var(--radius);margin-block:28px}
.op-hub .ph-guide .ph-size-key p:last-child{margin-bottom:0}
@media(max-width:1050px) and (min-width:801px){.op-hub .ph-guide .article-layout{grid-template-columns:210px minmax(0,1fr);gap:24px}}
@media(max-width:800px){.op-hub .ph-guide .article-layout aside nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.op-hub .ph-guide .article-layout aside .eyebrow{grid-column:1/-1}.op-hub .ph-guide .article-layout{gap:36px}}
@media(max-width:560px){.op-hub .ph-guide .article-layout aside nav{grid-template-columns:1fr}.op-hub .ph-guide .ph-size-key{padding:20px}}
.op-hub .ph-guide .article-content p{max-width:none}
.op-hub .ph-guide .ph-size-table thead th{overflow-wrap:normal;word-break:normal}
.op-hub .ph-guide .ph-size-table thead th:first-child{min-width:74px;white-space:nowrap}
.op-hub .ph-guide .ph-size-table caption::after{content:'Sur petit écran, faites glisser le tableau pour voir toutes les colonnes.';display:none;font-size:.9rem;font-weight:400;margin-top:8px}
@media(max-width:700px){.op-hub .ph-guide .ph-size-table caption::after{display:block}}
/* Three checks: informational cards, no click affordance or extra tab stops. */
.op-hub .ph-guide .ph-check-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.op-hub .ph-guide .ph-check-cards>div{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:24px;background:var(--pale);border:1px solid var(--line);border-bottom:3px solid var(--blue);border-radius:var(--radius);box-shadow:0 8px 24px #03182b12;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.op-hub .ph-guide .ph-check-cards .step{display:inline-grid;place-items:center;flex-shrink:0;width:44px;height:44px;white-space:nowrap;border-radius:50%;background:var(--deep);color:var(--paper);font-size:1.1rem}
.op-hub .ph-guide .ph-check-cards h3{line-height:1.35;text-wrap:wrap;color:var(--deep)}
.op-hub .ph-guide .ph-check-cards p{margin:14px 0 0;line-height:1.65}
@media(hover:hover){.op-hub .ph-guide .ph-check-cards>div:hover{transform:translateY(-4px);box-shadow:0 16px 32px #03182b26;border-color:var(--blue)}}
@media(max-width:1100px){.op-hub .ph-guide .ph-check-cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.op-hub .ph-guide .ph-check-cards>div{transition:none}.op-hub .ph-guide .ph-check-cards>div:hover{transform:none}}

/* Consistent section boundaries and tablet reading width. */
.op-hub .ph-guide .article-content>section+section{border-top:1px solid var(--line);padding-top:40px;margin-top:40px}
.op-hub .ph-guide .article-content>section>.eyebrow{display:inline-block;padding:8px 12px;margin:0 0 18px;border-left:3px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;background:var(--pale);color:var(--deep)}
.op-hub .ph-guide .ph-detail[open]{border-color:var(--blue)}
.op-hub .ph-guide .ph-detail summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:var(--radius)}
@media(min-width:1051px){.op-hub .ph-guide .article-layout aside nav{max-height:calc(100dvh - 60px);overflow-y:auto}}
@media(max-width:1050px){.op-hub .ph-guide .article-layout{grid-template-columns:1fr;gap:36px}.op-hub .ph-guide .article-layout aside nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.op-hub .ph-guide .article-layout aside .eyebrow{grid-column:1/-1}}
@media(max-width:560px){.op-hub .ph-guide .article-layout aside nav{grid-template-columns:1fr}.op-hub .ph-guide .article-content>section+section{padding-top:28px;margin-top:32px}}
/* Compact product selection; use the shared favorites component. */
.op-hub .ph-guide .ph-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:28px}
.op-hub .ph-guide .ph-product-card{display:flex;flex-direction:column;min-width:0;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px #03182b12}
.op-hub .ph-guide .ph-product-card .ph-product-badge{align-self:flex-start;margin:0 0 12px;padding:6px 10px;background:var(--pale);color:var(--deep);border-radius:var(--radius);font-size:.9rem;font-weight:700}
.op-hub .ph-guide .ph-product-card .mc-photo{position:relative;height:180px;margin-bottom:20px}
.op-hub .ph-guide .ph-product-card img{width:100%;height:100%;object-fit:contain}
.op-hub .ph-guide .ph-product-card h3{font-size:1.3rem;line-height:1.35;text-wrap:wrap}
.op-hub .ph-guide .ph-product-card p{font-size:1rem;line-height:1.55;margin:12px 0}
.op-hub .ph-guide .ph-product-card .ph-product-ref{font-size:.9rem;color:var(--muted);margin:6px 0}
.op-hub .ph-guide .ph-product-sizes{font-weight:700;color:var(--deep);border-block:1px solid var(--line);padding-block:12px}
.op-hub .ph-guide .ph-product-card .button{margin-top:auto;padding:12px;font-size:1rem;justify-content:center;white-space:normal;text-align:center;box-shadow:0 4px 10px #03182b24}
@media(max-width:700px){.op-hub .ph-guide .ph-product-grid{grid-template-columns:1fr}}
