/* --------------------------------------------------------------------------
 * PAGE MEDIA MAGAZINE — PREMIUM (SANS HEADER INTEGRE)
 * Le header / breadcrumb / theme toggle sont gérés par le layout internal-newheader.
 * -------------------------------------------------------------------------- */

:root{
    --mg-accent:#ff6233;

    --mg-bg:#fbfaf9;
    --mg-bg-2:#f5f3f1;
    --mg-surface:#ffffff;
    --mg-surface-2:rgba(255,255,255,.72);
    --mg-text:#111827;
    --mg-muted:#4b5563;
    --mg-border:rgba(0,0,0,.09);

    --mg-shadow:0 14px 40px rgba(17,24,39,.08);
    --mg-shadow-soft:0 8px 22px rgba(17,24,39,.06);

    --mg-radius-lg:14px;
    --mg-radius-md:10px;
    --mg-radius-pill:999px;

    --mg-wrap:1080px;
    --mg-read-width:780px;

    --font-sans:"Montserrat",system-ui,-apple-system,sans-serif;
    --font-serif:"Lora",serif;
}

html[data-theme="dark"]{
    --mg-bg:#0b0f14;
    --mg-bg-2:#0f141b;
    --mg-surface:#151c24;
    --mg-surface-2:rgba(255,255,255,.06);
    --mg-text:#f3f4f6;
    --mg-muted:#a4afc0;
    --mg-border:rgba(255,255,255,.14);

    --mg-shadow:0 20px 50px rgba(0,0,0,.35);
    --mg-shadow-soft:0 14px 34px rgba(0,0,0,.26);
}

/* Base */
*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; }

/* Shell */
.mg-shell{
    min-height:70vh;
    background:
    radial-gradient(900px 420px at 50% -220px, rgba(255,98,51,.10), transparent 70%),
    linear-gradient(180deg, var(--mg-bg), var(--mg-bg-2));
    color:var(--mg-text);
    font-family:var(--font-sans);
    line-height:1.65;
}

.mg-article{ padding:2.2rem 0 3rem; }

.mg-wrap{
    max-width:var(--mg-wrap);
    margin:0 auto;
    padding:0 20px;
}

/* --------------------------------------------------------------------------
 * HERO
 * -------------------------------------------------------------------------- */
.mg-hero{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:34px;
    align-items:center;
    margin-bottom:1.8rem;
}
@media (max-width:860px){
    .mg-hero{ grid-template-columns:1fr; gap:18px; }
}

.mg-pill{
    display:inline-block;
    font-weight:900;
    font-size:.72rem;
    text-transform:uppercase;
    color:var(--mg-accent);
    line-height:1.2;
    padding-bottom:4px;
    border-bottom:2px solid rgba(255,98,51,.55);
}

.mg-hero-title{
    font-family:var(--font-serif);
    font-weight:700;
    color:var(--mg-text);
    font-size:clamp(2.05rem,3.6vw,3.05rem);
    line-height:1.08;
    margin:.65rem 0 .85rem;
    letter-spacing:-.02em;
}

.mg-hero-sub{
    font-size:1.06rem;
    color:var(--mg-muted);
    line-height:1.5;
    margin:0;
    max-width:62ch;
}

/* Meta (infos + partage) */
.mg-hero-meta{
    margin-top:1.15rem;
    padding-top:1.15rem;
    border-top:1px solid var(--mg-border);

    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:12px 16px;

    font-size:.88rem;
    color:var(--mg-muted);
    font-weight:650;
}
@media (max-width:680px){
    .mg-hero-meta{ grid-template-columns:1fr; align-items:start; }
}

.mg-meta-left{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    min-width:0;
}

.mg-meta-item i{
    color:var(--mg-accent);
    margin-right:6px;
}

.mg-sep{
    width:4px;
    height:4px;
    background:var(--mg-border);
    border-radius:50%;
}

.mg-meta-actions{
    justify-self:end;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
@media (max-width:680px){
    .mg-meta-actions{ justify-self:start; }
}

/* Copy / Share */
.mg-copy-inline,
.mg-share-btn{
    height:38px;
    border-radius:12px;
    border:1px solid var(--mg-border);
    background:var(--mg-surface-2);
    transition:transform .15s ease,border-color .2s ease,background-color .2s ease,color .2s ease;
}

.mg-copy-inline{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    font-size:.82rem;
    font-weight:800;
    color:var(--mg-text);
}
.mg-copy-inline:hover{
    transform:translateY(-1px);
    border-color:rgba(255,98,51,.35);
}
.mg-copy-inline i{ color:var(--mg-accent); }

.mg-copy-badge{
    display:none;
    margin-left:6px;
    font-weight:900;
    color:var(--mg-accent);
}
.mg-copy-badge.is-on{ display:inline; }

.mg-sr-live{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.mg-share-btn{
    width:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--mg-text);
}
.mg-share-btn:hover{
    transform:translateY(-1px);
    background:var(--mg-accent);
    border-color:rgba(255,98,51,.45);
    color:#fff;
}

/* Hero media */
.mg-hero-media{
    position:relative;
    border-radius:var(--mg-radius-lg);
    overflow:hidden;
    box-shadow:var(--mg-shadow);
    background:var(--mg-surface);
    border:1px solid var(--mg-border);
    aspect-ratio:4/3;
}
.mg-hero-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.mg-hero-ph{
    display:grid;
    place-items:center;
    height:100%;
    color:var(--mg-muted);
    font-weight:800;
    letter-spacing:.02em;
}

/* --------------------------------------------------------------------------
 * LEAD
 * -------------------------------------------------------------------------- */
.mg-lead{
    max-width:var(--mg-read-width);
    margin:0 auto 2.1rem;
    padding:1.35rem;
    background:var(--mg-surface);
    border:1px solid var(--mg-border);
    border-left:4px solid var(--mg-accent);
    border-radius:0 var(--mg-radius-lg) var(--mg-radius-lg) 0;
    box-shadow:var(--mg-shadow-soft);
}
.mg-lead-text{
    font-family:var(--font-serif);
    font-size:1.1rem;
    line-height:1.7;
    font-style:italic;
    color:var(--mg-text);
}

/* --------------------------------------------------------------------------
 * CONTENT
 * -------------------------------------------------------------------------- */
.mg-content{
    max-width:var(--mg-read-width);
    margin:0 auto;
    font-size:1.06rem;
    line-height:1.78;
}

.mg-p{
    margin:0 0 1.05rem;
    color:var(--mg-text);
    opacity:.96;
}

.mg-h2{
    font-weight:900;
    font-size:1.55rem;
    margin:2.2rem 0 1rem;
    color:var(--mg-text);
    letter-spacing:-.02em;
}

.mg-h3{
    font-weight:800;
    font-size:1.22rem;
    margin:1.6rem 0 .8rem;
    color:var(--mg-text);
}

/* Quote */
.mg-quote{
    margin:1.7rem 0;
    padding:1.2rem 1.3rem;
    border:1px solid var(--mg-border);
    border-radius:var(--mg-radius-lg);
    background:linear-gradient(180deg,var(--mg-surface),var(--mg-surface-2));
    box-shadow:var(--mg-shadow-soft);
    text-align:center;
}
.mg-quote-icon{
    font-size:1.6rem;
    color:var(--mg-accent);
    opacity:.25;
    display:block;
    margin:0 auto 10px;
}
.mg-quote-text{
    font-family:var(--font-serif);
    font-size:1.28rem;
    font-weight:650;
    font-style:italic;
    color:var(--mg-text);
}
.mg-quote-note{
    margin-top:8px;
    font-size:.78rem;
    color:var(--mg-muted);
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:.04em;
}

/* Callout */
.mg-callout{
    margin:1.5rem 0;
    padding:1.1rem 1.15rem;
    border:1px solid var(--mg-border);
    border-radius:var(--mg-radius-lg);
    background:var(--mg-surface);
    box-shadow:var(--mg-shadow-soft);
}
.mg-callout-label{
    font-weight:950;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:.55rem;
    color:var(--mg-muted);
}
.mg-callout.is-accent{ border-left:4px solid var(--mg-accent); }
.mg-callout.is-soft{ background:linear-gradient(180deg,var(--mg-surface),var(--mg-surface-2)); }
.mg-callout.is-note{ border-style:dashed; }

.mg-callout-text{
    font-weight:650;
    font-size:1rem;
    color:var(--mg-text);
}

/* Lists */
.mg-list{
    padding-left:0;
    list-style:none;
    margin:1rem 0 1.2rem;
}
.mg-list li{
    position:relative;
    padding-left:26px;
    margin-bottom:10px;
}
.mg-list-ul li::before{
    content:"\f054";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:0;
    top:2px;
    font-size:.72em;
    color:var(--mg-accent);
    opacity:.95;
}
.mg-list-ol{ counter-reset:mgc; }
.mg-list-ol li{
    counter-increment:mgc;
    padding-left:30px;
}
.mg-list-ol li::before{
    content:counter(mgc) ".";
    position:absolute;
    left:0;
    top:0;
    color:var(--mg-accent);
    font-weight:950;
}

/* Media blocks */
.mg-figure{ margin:1.6rem 0; }
.mg-media{
    border-radius:var(--mg-radius-lg);
    overflow:hidden;
    box-shadow:var(--mg-shadow-soft);
    border:1px solid var(--mg-border);
    background:var(--mg-surface);
}
.mg-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.mg-cap{
    margin-top:8px;
    font-size:.82rem;
    color:var(--mg-muted);
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:0 4px;
}
.mg-cap-cred{ opacity:.85; }

.mg-figure.is-small{ max-width:520px; margin-left:auto; margin-right:auto; }
.mg-figure.is-medium{ max-width:680px; margin-left:auto; margin-right:auto; }

.mg-figure.is-wide{
    width:var(--mg-wrap);
    max-width:100%;
    margin-left:calc((var(--mg-read-width) - var(--mg-wrap)) / 2);
}
@media (max-width:1100px){
    .mg-figure.is-wide{ margin-left:0; width:100%; }
}

.mg-figure.is-bleed{
    width:100vw;
    margin-left:calc(50% - 50vw);
}

.mg-figure.is-float{ max-width:360px; }
.mg-figure.is-float.is-left{ float:left; margin:.35rem 1.2rem .9rem 0; }
.mg-figure.is-float.is-right{ float:right; margin:.35rem 0 .9rem 1.2rem; }
@media (max-width:900px){
    .mg-figure.is-float{ float:none; margin:1.2rem 0; max-width:100%; }
}

/* Duo */
.mg-duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:1.6rem 0;
}
@media (max-width:720px){
    .mg-duo{ grid-template-columns:1fr; }
}

.mg-duo.is-wide{
    width:var(--mg-wrap);
    max-width:100%;
    margin-left:calc((var(--mg-read-width) - var(--mg-wrap)) / 2);
}
@media (max-width:1100px){
    .mg-duo.is-wide{ margin-left:0; width:100%; }
}
.mg-duo.is-bleed{
    width:100vw;
    margin-left:calc(50% - 50vw);
}

/* Partner */
.mg-partner{
    margin:2.1rem 0;
    padding:1.25rem;
    background:var(--mg-surface);
    border:1px solid var(--mg-border);
    border-radius:var(--mg-radius-lg);
    box-shadow:var(--mg-shadow-soft);
}
.mg-partner-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.74rem;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.04em;
    background:rgba(255,98,51,.12);
    border:1px solid rgba(255,98,51,.22);
    color:var(--mg-text);
}

.mg-partner-body{
    display:flex;
    gap:18px;
    margin-top:14px;
    align-items:center;
}
@media (max-width:720px){
    .mg-partner-body{ flex-direction:column; align-items:flex-start; }
}

.mg-partner-logo img{
    width:86px;
    height:auto;
    border-radius:10px;
    border:1px solid var(--mg-border);
    background:var(--mg-surface-2);
    padding:6px;
}

.mg-partner-title{ font-weight:950; font-size:1.1rem; margin-bottom:6px; }
.mg-partner-desc{ color:var(--mg-muted); font-weight:600; }

.mg-partner-cta .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
    font-weight:900;
    color:var(--mg-text);
    border:1px solid rgba(255,98,51,.30);
    background:rgba(255,98,51,.10);
    padding:10px 12px;
    border-radius:12px;
}
.mg-partner-cta .btn:hover{
    background:rgba(255,98,51,.16);
    border-color:rgba(255,98,51,.42);
}

/* Ads */
.mg-ad{
    margin:2.1rem 0;
    padding:1.2rem;
    background:var(--mg-surface);
    border:1px solid var(--mg-border);
    border-radius:var(--mg-radius-lg);
    box-shadow:var(--mg-shadow-soft);
}
.mg-ad-pill{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.05em;
    background:rgba(17,24,39,.08);
    border:1px solid var(--mg-border);
}
html[data-theme="dark"] .mg-ad-pill{
    background:rgba(255,255,255,.06);
}
.mg-ad-iframe{
    width:100%;
    border:0;
    height:220px;
    margin-top:12px;
    border-radius:12px;
    background:var(--mg-surface-2);
}

/* Signature */
.mg-signature{
    margin:2.2rem 0 0;
    padding-top:1.2rem;
    border-top:1px dashed var(--mg-border);
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px 16px;
    align-items:baseline;
    color:var(--mg-muted);
}
@media (max-width:680px){
    .mg-signature{ grid-template-columns:1fr; }
}

.mg-signature-role{
    font-weight:950;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:.35rem;
    color:var(--mg-muted);
}
.mg-signature-line{ font-weight:650; }
.mg-signature-name{
    font-weight:950;
    color:var(--mg-text);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:2px;
    text-decoration-color:color-mix(in oklab, var(--mg-accent) 65%, transparent);
}
.mg-signature-name:hover{ color:var(--mg-accent); }

.mg-signature-for{ margin-left:8px; }
.mg-signature-right{
    font-weight:650;
    white-space:nowrap;
    opacity:.92;
}
@media (max-width:680px){
    .mg-signature-right{ white-space:normal; }
}

/* --------------------------------------------------------------------------
 * GALLERY
 * -------------------------------------------------------------------------- */
.mg-rule{
    border:0;
    height:1px;
    background:var(--mg-border);
    margin:3.2rem 0 2.2rem;
}

.mg-gallery{
    padding:1.25rem;
    background:linear-gradient(180deg,var(--mg-surface),var(--mg-surface-2));
    border:1px solid var(--mg-border);
    border-radius:var(--mg-radius-lg);
    box-shadow:var(--mg-shadow-soft);
}

.mg-gallery-head{ text-align:center; margin-bottom:1.2rem; }

.mg-gallery-title{
    font-size:1.65rem;
    font-weight:950;
    margin:0;
    letter-spacing:-.02em;
}

.mg-gallery-hint{
    color:var(--mg-muted);
    font-size:.92rem;
    margin-top:7px;
    font-weight:650;
}

.mg-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:10px;
}

.mg-thumb{
    position:relative;
    padding:0;
    border:none;
    background:none;
    border-radius:12px;
    overflow:hidden;
    aspect-ratio:1;
    cursor:pointer;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 22px rgba(17,24,39,.06);
}
html[data-theme="dark"] .mg-thumb{
    border-color:rgba(255,255,255,.10);
}

.mg-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}
.mg-thumb:hover img{ transform:scale(1.08); }

.mg-thumb-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.40));
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    padding:10px;
    color:#fff;
    opacity:0;
    transition:opacity .2s ease;
}
.mg-thumb:hover .mg-thumb-overlay{ opacity:1; }

/* --------------------------------------------------------------------------
 * Lightbox (caption NON tronquée)
 * -------------------------------------------------------------------------- */
.mg-lb{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,.92);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.mg-lb.is-open{ display:flex; }

.mg-lb-panel{
    width:min(1120px,96vw);
    max-height:92vh;
    display:grid;
    gap:12px;
    align-items:center;
    justify-items:center;
}

.mg-lb-img{
    max-height:80vh;
    max-width:96vw;
    border-radius:10px;
    box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.mg-lb-bar{
    width:100%;
    display:flex;
    align-items:flex-start; /* ✅ pour caption multi-lignes */
    justify-content:space-between;
    gap:12px;
    color:rgba(255,255,255,.92);
}

.mg-lb-cap{
    font-weight:650;
    font-size:.95rem;
    opacity:.95;
    max-width:75ch;
    white-space:normal;     /* ✅ pas de nowrap */
    overflow:visible;       /* ✅ pas de cut */
    text-overflow:clip;
    line-height:1.35;
}

.mg-lb-btns{ display:inline-flex; gap:8px; }

.mg-lb-btn{
    background:rgba(255,255,255,.12);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    padding:10px 12px;
    border-radius:10px;
    cursor:pointer;
}
.mg-lb-btn:hover{
    background:rgba(255,98,51,.85);
    border-color:rgba(255,98,51,.55);
}
.mg-lb-btn:disabled{
    opacity:.45;
    cursor:default;
}