/* ============================================================
   guide-outils.css — mise en page PROVISOIRE du guide « Outils multireflex »
   Toutes les règles sont scopées à .gd (aucun reset global).
   ============================================================ */

.gd {
    --gd-ink: #114663;
    --gd-accent: #990033;
    --gd-link: #6b4c8a;
    --gd-paper: #fff;
    --gd-soft: #eef4fb;
    --gd-line: #c9d6e6;
    --gd-header: 72px;
    color: var(--gd-ink);
}

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

/* ── Hero ────────────────────────────────────────────────── */
.gd-hero { padding: 3rem 0 2rem; text-align: center; }
.gd-kicker {
    text-transform: uppercase; letter-spacing: .18em; font-size: .8rem;
    color: var(--gd-accent); margin-bottom: .75rem;
}
.gd-hero h1 {
    font-family: "Cormorant", serif; font-weight: 300;
    font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15;
    max-width: 24ch; margin: 0 auto;
}
.gd-subtitle { font-family: "Story Script", cursive; font-size: 1.35rem; margin-top: .75rem; opacity: .85; }

/* ── Mise en page: sommaire + contenu ───────────────────── */
.gd-layout { padding-bottom: 3rem; }

.gd-toc {
    background: var(--gd-paper); border: 1px solid var(--gd-line); border-radius: 12px;
    padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: .95rem;
}
.gd-toc-title {
    font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    font-size: .75rem; color: var(--gd-accent); margin-bottom: .6rem;
}
.gd-toc ol { list-style: none; counter-reset: gdtoc; }
.gd-toc ol > li { counter-increment: gdtoc; margin: .35rem 0; }
.gd-toc ol > li > a::before { content: counter(gdtoc) ". "; opacity: .6; }
.gd-toc ul { list-style: none; margin: .2rem 0 .3rem 1.1rem; font-size: .9rem; }
.gd-toc a { color: var(--gd-ink); }
.gd-toc a:hover, .gd-toc a[aria-current="true"] { color: var(--gd-accent); }
.gd-toc a[aria-current="true"] { font-weight: 700; }

@media (min-width: 1024px) {
    .gd-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
    .gd-toc { position: sticky; top: calc(var(--gd-header) + 1rem); max-height: calc(100vh - var(--gd-header) - 2rem); overflow: auto; margin-bottom: 0; }
}

/* ── Contenu ─────────────────────────────────────────────── */
.gd-content { min-width: 0; }
.gd-page {
    background: var(--gd-paper); border-radius: 14px; margin-bottom: 1.75rem;
    padding: 2rem clamp(1rem, 4vw, 2.5rem); scroll-margin-top: calc(var(--gd-header) + 1rem);
    line-height: 1.7;
}
.gd-page > h2 {
    font-family: "Cormorant", serif; font-weight: 300; font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    line-height: 1.2; margin-bottom: 1rem; color: var(--gd-accent);
}
.gd-bloc { margin-top: 2.25rem; scroll-margin-top: calc(var(--gd-header) + 1rem); }
.gd-bloc > h3 {
    font-family: "Cormorant", serif; font-weight: 300; font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    line-height: 1.25; margin-bottom: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--gd-line);
}
.gd-page p, .gd-text p { margin: 0 0 1rem; }
.gd-page a { color: var(--gd-link); text-decoration: underline; text-underline-offset: 2px; }
.gd-page a:hover { color: var(--gd-accent); }

/* ── Listes ──────────────────────────────────────────────── */
.gd-list { margin: 0 0 1.25rem 1.25rem; list-style: disc; }
.gd-list.list-numerada { list-style: decimal; }
.gd-list > li { margin: 0 0 .75rem; padding-left: .35rem; }
.gd-list > li > p { margin: 0 0 .5rem; }
.gd-li-more { font-size: .95rem; }

/* ── FAQ ─────────────────────────────────────────────────── */
.gd-faq { margin: 0 0 1.25rem; }
.gd-faq-item { background: var(--gd-soft); border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: .75rem; }
.gd-faq-item h4 { font-size: 1.05rem; margin-bottom: .35rem; }
.gd-faq-a p:last-child { margin-bottom: 0; }

/* ── Tableau ─────────────────────────────────────────────── */
.gd-table-wrap { overflow-x: auto; margin: 0 0 1.25rem; }
.gd-table { border-collapse: collapse; width: 100%; min-width: 520px; }
.gd-table th, .gd-table td { border: 1px solid var(--gd-line); padding: .6rem .8rem; text-align: left; vertical-align: top; }
.gd-table thead th { background: var(--gd-soft); }
.gd-table tbody th { background: var(--gd-soft); font-weight: 700; white-space: nowrap; }

/* ── Liens d'action ──────────────────────────────────────── */
.gd-cta { margin: 1.25rem 0 0; }
.gd-page a.gd-btn {
    display: inline-block; background: var(--gd-accent); color: #fff; text-decoration: none;
    padding: .65rem 1.2rem; border-radius: 999px; font-weight: 700;
}
.gd-page a.gd-btn:hover { background: var(--gd-ink); color: #fff; }

/* ── Vidéo (façade) ──────────────────────────────────────── */
.gd-video-intro { font-style: italic; margin-bottom: .5rem; }
.gd-video { margin: 0 0 1.25rem; }
.gd-video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.gd-video-frame iframe, .gd-video-link { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.gd-video-link img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.gd-video-play {
    position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
    background: var(--gd-accent); border-radius: 12px;
}
.gd-video-play::before {
    content: ""; position: absolute; left: 27px; top: 14px;
    border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}

.gd-top { text-align: center; margin: 1rem 0 0; }
.gd-top a { color: var(--gd-ink); }

/* ============================================================
   Images dans les blocs (img1_pos left|right = habillage du texte, full = pleine largeur)
   ============================================================ */
.gd-page, .gd-bloc { display: flow-root; }
.gd-fig { margin: 0 0 1rem; }
.gd-fig img { display: block; width: 100%; height: auto; border-radius: 10px; }
.gd-fig figcaption { font-size: .85rem; opacity: .75; margin-top: .4rem; }
.gd-fig--full { clear: both; margin: 1.25rem 0; }
.gd-table-wrap, .gd-video, .gd-faq, .gd-cta { clear: both; }
@media (min-width: 700px) {
    .gd-fig--left  { float: left;  width: min(42%, 320px); margin: .25rem 1.5rem 1rem 0; }
    .gd-fig--right { float: right; width: min(42%, 320px); margin: .25rem 0 1rem 1.5rem; }
}

/* ============================================================
   Fiches colorées (yin bleu / yang rouge via bloc_class "yin" ou "yang")
   ============================================================ */
.gd { --gd-yin: #2a6f97; --gd-yang: #990033; }
.gd .gd-page { border-top: 6px solid var(--gd-accent); box-shadow: 0 2px 10px rgba(17, 70, 99, .08); }
.gd .gd-bloc {
    background: var(--gd-soft); border-radius: 12px; border-left: 5px solid var(--gd-line);
    padding: 1.25rem 1.4rem; margin-top: 1.25rem;
}
.gd .gd-bloc > h3 { border-top: 0; padding-top: 0; }
.gd .gd-bloc.yin  { background: #eaf3f9; border-left-color: var(--gd-yin); }
.gd .gd-bloc.yang { background: #fbeef2; border-left-color: var(--gd-yang); }
.gd .gd-bloc.yin  > h3 { color: var(--gd-yin); }
.gd .gd-bloc.yang > h3 { color: var(--gd-yang); }
.gd .tableau-yinyang thead th:nth-child(2) { background: var(--gd-yin);  color: #fff; }
.gd .tableau-yinyang thead th:nth-child(3) { background: var(--gd-yang); color: #fff; }
.gd .gd-faq-item { background: #fff; }