*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1b1d22;background:#fff;line-height:1.55}
a{color:#0057d9}.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid #e6e8ec;position:sticky;top:0;background:#fff;z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{font-weight:800;font-size:20px;letter-spacing:.5px}.logo span{color:#0057d9}
nav a{margin-left:22px;color:#1b1d22;text-decoration:none;font-size:15px}
.ph{background:repeating-linear-gradient(45deg,#d9dce1,#d9dce1 12px,#e3e6ea 12px,#e3e6ea 24px);display:flex;align-items:center;justify-content:center;color:#555c66;font-size:13px;text-align:center;padding:12px;border-radius:10px}
.hero{background:#0d1117;color:#fff;padding:64px 0}.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:44px;line-height:1.1;margin:.2em 0}.kicker{color:#7fb0ff;text-transform:uppercase;font-size:13px;letter-spacing:2px}
.hero p{color:#c8ccd4;font-size:18px}.hero .ph{height:320px;background:repeating-linear-gradient(45deg,#2a2f38,#2a2f38 12px,#323843 12px,#323843 24px);color:#aeb4bf}
.btn{display:inline-block;padding:11px 20px;border-radius:8px;background:#0057d9;color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.btn.ghost{background:transparent;border:1px solid #0057d9;color:#0057d9}.hero .btn.ghost{color:#fff;border-color:#fff}
section{padding:60px 0}section h2{font-size:32px;margin:.1em 0 .2em}.sub{color:#5b616b;margin-bottom:28px}
.alt{background:#f5f6f8}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid #e6e8ec;border-radius:14px;padding:18px;display:flex;flex-direction:column}
.card .ph{height:160px;margin-bottom:14px}.badge{font-size:12px;font-weight:700;color:#0057d9;text-transform:uppercase}
.card h3{margin:.2em 0}.card ul{padding-left:18px;font-size:14px;color:#3a3f47;flex:1}.price{font-size:20px;font-weight:700;margin:6px 0 2px}.pnote{font-size:12px;color:#777}
.card .actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.ref{font-family:monospace;font-size:11px;color:#a33;word-break:break-all;margin-top:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.box{background:#fff;border:1px solid #e6e8ec;border-radius:14px;padding:22px}.box h3{margin-top:0}
table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}th,td{border:1px solid #e6e8ec;padding:10px;text-align:left;vertical-align:top}th{background:#eef1f5}
.tbl{overflow-x:auto}.src{font-size:12px;color:#777;margin-top:10px}
.tbc{color:#b35c00;font-style:italic}
details{background:#fff;border:1px solid #e6e8ec;border-radius:10px;padding:14px 18px;margin-bottom:10px}summary{font-weight:600;cursor:pointer}
.sim{background:#0d1117;color:#e7e9ee}.sim a{color:#7fb0ff}
footer{background:#111;color:#aab0ba;font-size:14px;padding:36px 0}footer a{color:#fff}
.disc{font-size:12px;color:#8a909a;margin-top:14px}
@media(max-width:900px){.hero .wrap,.grid2,.grid3{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}nav{display:none}.hero h1{font-size:32px}}
@media(max-width:560px){.cards{grid-template-columns:1fr}section{padding:40px 0}}
/* ===== Responsive (refonte) ===== */
html{-webkit-text-size-adjust:100%}body{overflow-wrap:break-word}
img,svg,video,.ph{max-width:100%}img,video{height:auto}
.hero h1{font-size:clamp(1.75rem,1.1rem + 2.8vw,2.75rem)}section h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2rem)}
.hero p{font-size:clamp(1rem,.93rem + .35vw,1.125rem)}.logo{font-size:clamp(1.05rem,.95rem + .5vw,1.25rem)}
.hero .wrap>*,.cards>*,.grid2>*,.grid3>*{min-width:0}
.burger{display:none;width:44px;height:44px;border:1px solid #e6e8ec;border-radius:8px;background:#fff;cursor:pointer;padding:0;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:22px;height:2px;background:#1b1d22;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger[aria-expanded="true"] span:nth-child(2){opacity:0}.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible,nav a:focus-visible,.btn:focus-visible,.tbl:focus-visible{outline:3px solid #7fb0ff;outline-offset:2px}
.tbl{max-width:100%;-webkit-overflow-scrolling:touch;border-radius:8px}
@media(max-width:1024px){
 nav a{margin-left:14px;font-size:14px}
 .cards{grid-template-columns:repeat(2,1fr)}
 .hero{padding:48px 0}.hero .ph{height:260px}
}
@media(max-width:900px){
 .burger{display:flex}
 nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #e6e8ec;box-shadow:0 8px 20px rgba(0,0,0,.08);flex-direction:column;padding:6px 20px 12px}
 nav.open{display:flex}
 nav a{margin:0;padding:12px 0;font-size:16px;border-bottom:1px solid #f0f1f4}nav a:last-child{border-bottom:0}
 header .wrap{position:relative}
 .hero .wrap{gap:28px}
}
@media(max-width:600px){
 .wrap{padding:0 16px}
 .cards{grid-template-columns:1fr}
 section{padding:40px 0}.hero{padding:36px 0}.hero .ph{height:200px}
 .hero .btn{margin-bottom:8px}
 .card .actions .btn{flex:1 1 100%;text-align:center}
 .tbl{overflow-x:auto;border:1px solid #e6e8ec}
 .tbl table{min-width:640px;font-size:13px}
 .tbl th:first-child{position:sticky;left:0;z-index:1;background:#eef1f5}
 th,td{padding:8px}
}
.burger{position:relative}.burger span{position:absolute;left:50%;top:50%;margin:-1px 0 0 -11px;transform-origin:50% 50%}
.burger span:nth-child(1){transform:translateY(-7px)}.burger span:nth-child(3){transform:translateY(7px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
/* ===== Images médiathèque (intégration WP) ===== */
.pimg{display:block;width:100%;max-width:100%;object-fit:cover;border-radius:10px;background:#e3e6ea}
.hero-img{height:320px;object-position:center}.card-img{height:160px;margin-bottom:14px;object-fit:contain;background:#f3f4f6}
.use-img{height:120px;margin-bottom:12px}
@media(max-width:1024px){.hero-img{height:260px}}@media(max-width:600px){.hero-img{height:200px}}
/* ===== v2 : Sim-One, fiches produits ===== */
.btn-so{background:#0a7d3b}.btn-so:hover{background:#086a32}
.actions-col{flex-direction:column}.actions-col .btn{text-align:center;width:100%}
.btn-link{font-size:14px;font-weight:600;text-decoration:none;margin-top:4px}
.btn-wide{display:block;text-align:center;margin-top:10px}
.logo-link{color:inherit;text-decoration:none}
.crumbs{font-size:13px;color:#5b616b;padding-top:10px;padding-bottom:10px}.crumbs a{color:#5b616b}
.fiche-hero .wrap{align-items:start}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.stat{background:#161b22;border:1px solid #2a2f38;border-radius:10px;padding:10px;text-align:center;min-width:0}.stat b{display:block;font-size:clamp(1rem,.9rem + .6vw,1.35rem);color:#fff}.stat span{font-size:12px;color:#aeb4bf}
.buybox{background:#fff;color:#1b1d22;border-radius:14px;padding:18px;margin-top:16px;border:1px solid #e6e8ec}
.buybox .variant{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:12px 0;border-top:1px solid #eef0f3}
.buybox .variant .btn{grid-column:1/-1;text-align:center}
.vstock{display:block;font-size:12px;color:#5b616b}.vprice{font-weight:700;white-space:nowrap}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:22px}
.fiche-img{height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:12px}
.grid2>.fiche-img{margin:0}
ul.cols{columns:2;margin-top:18px}
@media(max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}ul.cols{columns:1}}
.card .actions.actions-col .btn,.card .actions.actions-col .btn-link{flex:0 0 auto;max-width:100%;white-space:normal}
.hero .buybox .btn.ghost{color:#0057d9;border-color:#0057d9}.hero .buybox p,.hero .buybox .pnote{color:#5b616b;font-size:12px}
/* ===== v4 : Deux façons d'acheter ===== */
.opt-grid{align-items:stretch}
.opt{display:flex;flex-direction:column;position:relative}
.opt ul,.opt-incl ul{padding-left:18px;font-size:15px;color:#3a3f47;line-height:1.55;margin:.4em 0 1em}
.opt ul{flex:1}.opt li,.opt-incl li{margin-bottom:4px}
.opt .btn{align-self:flex-start;max-width:100%;white-space:normal;text-align:center}
.opt-reco{border:2px solid #0a7d3b;box-shadow:0 6px 20px rgba(10,125,59,.12)}
.opt-badge{position:absolute;top:-12px;right:18px;background:#0a7d3b;color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.opt-incl{margin-top:24px;background:#eef4ff;border-color:#cfe0ff}
.opt-incl h3{font-size:17px}
.opt-soon{font-size:14px;color:#0057d9;font-weight:600;margin:0}
.options h2,.options h3,.options li{overflow-wrap:anywhere}
@media(max-width:600px){.opt .btn{align-self:stretch}}

/* ===== Sim-One logo (sous contact .sim) : hauteur = 45% hauteur photo centre ===== */
.sim .grid2>div:first-child{container-type:inline-size;container-name:sim-col}
.sim .sim-logo{display:block;margin:18px auto 0;width:auto;max-width:100%;height:calc(0.45 * 100cqi * 720 / 1280);object-fit:contain}

/* ===== Page Vidéos : embeds YouTube (exception domaine externe) ===== */
.videos-page .yt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:8px 0 28px}
.videos-page .yt-card{min-width:0;background:#fff;border:1px solid #e6e8ec;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.videos-page .yt-card h2,.videos-page .yt-card .yt-title{font-size:15px;margin:12px 14px 14px;line-height:1.35;font-weight:600}
.videos-page .yt-playlist-wrap{margin:8px 0 16px;max-width:960px}
.videos-page .yt-embed{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;background:#0d1117;border-radius:14px;overflow:hidden;border:1px solid #e6e8ec}
.videos-page .yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;max-width:100%}
.videos-page .yt-note{font-size:13px;color:#5b616b;margin:0 0 18px;max-width:720px}
.videos-page .yt-channel-link{margin:0 0 8px}
.videos-page .yt-channel-link .btn{max-width:100%}
@media(max-width:900px){
  .videos-page .yt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(max-width:600px){
  .videos-page .yt-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .videos-page .yt-playlist-wrap{margin-bottom:12px}
}

/* ===== logo title: Le Guide PIMAX France ===== */
.logo{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.logo span{color:#0057d9}
@media(max-width:400px){.logo{font-size:clamp(.92rem,.85rem + .4vw,1.1rem);letter-spacing:.2px}}