/* ============================================================
   MAPi · Pages SEO (relecture) · design emprunté à la refonte
   app expert : tokens.css + composants expert.css (pilules,
   cartes, tableaux) + DA nautique légère (vague, objets 3D).
   Charte : aucun hex hors tokens ; orange = micro-accent.
   ============================================================ */

html { background: var(--gray-100); scroll-behavior: smooth; }
body { min-height: 100dvh; display: flex; flex-direction: column; }

:root {
    --ease: cubic-bezier(.22, 1, .36, 1);
    --doc-max: 880px;
}

/* ---------- Header ---------- */
.hd {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-200);
}
.hd-in {
    max-width: var(--page-max); margin: 0 auto; padding: 9px 20px;
    display: flex; align-items: center; gap: 14px;
}
.hd-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.hd-logo img { height: 30px; display: block; }
.hd-group {
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif;
    font-size: 12px; font-weight: 500; color: var(--text-secondary); padding-top: 2px;
}
.hd-cta { margin-left: auto; }

/* Pilules (empruntées à expert.css) */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); border: none;
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
    transition: transform .16s var(--ease), box-shadow .16s, background .16s, border-color .16s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-dark); box-shadow: var(--shadow-md); }
.btn--white { background: #fff; color: var(--blue-dark); box-shadow: var(--shadow-md); }
.btn--white:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn .arr { color: var(--orange); transition: transform .16s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px;
}
.hero a:focus-visible, .cta-final a:focus-visible { outline-color: #fff; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(120deg, #0053BE, var(--blue) 55%, #2E8AF0);
    color: #fff; position: relative; overflow: hidden;
}
.hero-in {
    max-width: var(--page-max); margin: 0 auto; padding: 34px 20px 46px;
    position: relative; z-index: 1;
}
.crumb {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    font-size: 12.5px; font-weight: 600; color: var(--blue-muted); margin-bottom: 18px;
}
.crumb a { color: #fff; text-decoration: none; opacity: .85; }
.crumb a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
.crumb .sep { opacity: .5; }
.hero h1 {
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif;
    font-weight: 900; font-size: clamp(26px, 4vw, 38px); line-height: 1.16;
    letter-spacing: -.01em; text-wrap: balance; max-width: 21em; margin: 0 0 16px;
}
.hero-grid { display: flex; gap: 30px; align-items: flex-start; }
.hero-main { flex: 1 1 auto; min-width: 0; }
.hero-obj { flex: 0 0 150px; align-self: center; text-align: center; }
.hero-obj img {
    width: 132px; height: 132px; object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(0, 40, 90, .35));
    animation: bob 5.5s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero-chapo {
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius); padding: 16px 20px; font-size: 15px; line-height: 1.65;
    max-width: 62em;
}
.hero-chapo strong { font-weight: 600; color: #fff; }
.hero-note { font-size: 13px; color: var(--blue-muted); max-width: 56em; margin: 14px 2px 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px; }
.hero-byline { font-size: 12.5px; color: var(--blue-muted); font-style: italic; margin-top: 14px; }
.hero-byline em { font-style: italic; }

/* Vague de séparation (motif wave-tile en mask, façon « Sillage ») */
.wave-sep { height: 16px; background: var(--blue-muted); opacity: .55;
    -webkit-mask: url('assets/wave-tile.svg') repeat-x bottom / auto 16px;
    mask: url('assets/wave-tile.svg') repeat-x bottom / auto 16px; }

/* ---------- Corps de page ---------- */
.page { flex: 1; }
.doc {
    max-width: var(--doc-max); margin: 26px auto 40px; padding: 0 20px;
    font-size: 16px; line-height: 1.7; color: var(--text-primary);
}
.doc > * + * { margin-top: .85em; }
.doc h2 {
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif;
    font-weight: 800; font-size: 23px; line-height: 1.25; letter-spacing: -.01em;
    color: var(--text-primary); margin: 1.9em 0 .55em; text-wrap: balance;
    scroll-margin-top: 84px;
}
.doc h2::after {
    content: ''; display: block; width: 56px; height: 3px; border-radius: 2px;
    margin-top: 8px; background: linear-gradient(90deg, var(--blue), var(--blue-muted));
}
.doc h3 {
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif;
    font-weight: 800; font-size: 16.5px; color: var(--text-primary); margin: 1.5em 0 .3em;
}
.doc p { margin: .75em 0; }
.doc a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.doc a:hover { color: var(--blue); }
.doc ul, .doc ol { margin: .7em 0 1em; padding-left: 1.5em; }
.doc li { margin: .4em 0; }
.doc li::marker { color: var(--blue); font-weight: 700; }
.doc p > em:first-child:last-child { display: block; font-size: 14px; color: var(--text-secondary); }
.doc .note {
    background: var(--blue-pale); border-left: 3px solid var(--blue);
    border-radius: 0 12px 12px 0; padding: 13px 17px; font-size: 14.5px; color: var(--text-primary);
}
.doc .cta {
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px;
    background: var(--blue); color: #fff; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: var(--shadow-sm);
    transition: transform .16s var(--ease), box-shadow .16s, background .16s;
}
.doc .cta:hover { background: var(--blue-dark); color: #fff; box-shadow: var(--shadow-md); }
.doc .cta::after { content: '→'; color: var(--orange); transition: transform .16s var(--ease); }
.doc .cta:hover::after { transform: translateX(3px); }

/* Sommaire en pilules */
.doc nav[aria-label="Sommaire"] {
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 16px 18px; margin: 1.6em 0;
}
.doc nav[aria-label="Sommaire"]::before {
    content: 'Sommaire'; display: block;
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif;
    font-weight: 800; font-size: 13px; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
}
.doc nav[aria-label="Sommaire"] ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.doc nav[aria-label="Sommaire"] li { margin: 0; }
.doc nav[aria-label="Sommaire"] a {
    display: inline-flex; align-items: center; min-height: 34px; padding: 3px 13px;
    background: var(--blue-pale); color: var(--blue-dark); border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: background .14s, color .14s;
}
.doc nav[aria-label="Sommaire"] a:hover { background: var(--blue-muted); }

/* Tableaux (empruntés à .tbl d'expert.css) */
.tbl-scroll {
    overflow-x: auto; margin: 1.2em 0; background: #fff;
    border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.doc table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.doc thead th {
    background: var(--blue-pale); color: var(--blue-dark); text-align: left;
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 800; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .04em; padding: 11px 14px;
    border-bottom: 1px solid var(--gray-200); white-space: nowrap;
}
.doc tbody td { padding: 11px 14px; border-bottom: 1px solid var(--gray-200); vertical-align: top; color: var(--text-primary); }
.doc tbody tr:last-child td { border-bottom: none; }
.doc tbody tr { transition: background .12s; }
.doc tbody tr:hover { background: var(--blue-pale); }
.doc td strong { color: var(--text-primary); }

/* Citation expert */
.doc blockquote {
    position: relative; background: #fff; border: 1px solid var(--gray-200);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 24px 26px 20px 58px; margin: 1.6em 0; font-size: 16.5px; line-height: 1.65;
}
.doc blockquote::before {
    content: '«'; position: absolute; left: 18px; top: 6px;
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 900;
    font-size: 44px; color: var(--blue-muted); line-height: 1;
}
.doc blockquote footer { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.doc blockquote footer em { font-weight: 500; }

/* Bloc accompagnement MAPi (le seul bloc argumentaire) */
.mapi-band {
    background: #fff; border: 1px solid var(--blue-muted); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: 26px 30px; margin: 2em 0;
    position: relative; overflow: hidden;
}
.mapi-band::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, #0053BE, var(--blue), #2E8AF0);
}
.mapi-band h2 { margin-top: .2em; }
.mapi-band ol { counter-reset: step; list-style: none; padding-left: 0; }
.mapi-band ol li {
    counter-increment: step; position: relative; padding-left: 44px; margin: .8em 0;
}
.mapi-band ol li::before {
    content: counter(step); position: absolute; left: 0; top: 1px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--blue-pale); color: var(--blue-dark);
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 800; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}

/* FAQ */
.faq-sec h3 {
    background: #fff; border: 1px solid var(--gray-200); border-radius: 12px 12px 0 0;
    padding: 13px 17px 11px; margin: 1.2em 0 0; font-size: 15.5px;
}
.faq-sec h3 + p {
    background: #fff; border: 1px solid var(--gray-200); border-top: none;
    border-radius: 0 0 12px 12px; padding: 2px 17px 14px; margin: 0;
    font-size: 14.5px; color: var(--text-secondary);
}

/* ---------- Relecture et sourcing ---------- */

/* Donnee non sourcee : surlignee tant qu'elle n'a pas ete verifiee. */
mark.verif {
    background: var(--orange-soft); color: var(--orange-ink);
    border-radius: 4px; padding: 0 5px; font-size: .92em; font-weight: 600;
}

/* Donnee verifiee en source primaire : invisible en publication.
   data-ref porte le dispositif, data-d la date de verification : la revalidation
   periodique s'appuie dessus sans avoir a reanalyser le texte. */
.v { background: none; color: inherit; font: inherit; }

/* Mode audit : body.audit revele a nouveau l'etat de sourcing de la page.
   S'active via ?audit=1, jamais en publication. */
body.audit .v {
    background: var(--green-soft); color: var(--green-ink);
    border-radius: 4px; padding: 0 5px; font-weight: 600;
}
body.audit .v::after {
    content: ' ' attr(data-d); font-size: .78em; opacity: .65; font-weight: 400;
}

/* Dispositif clos : la ligne reste lisible mais ne peut plus etre lue comme une
   aide mobilisable. Presenter une aide fermee comme ouverte est un blocage P0. */
tr.disp-clos { background: var(--gray-100); }
tr.disp-clos td { color: var(--text-secondary); }
/* Seules les valeurs chiffrees sont barrees : barrer la cellule entiere rendrait la
   note de cloture illisible, le soulignement ne se retire pas sur un descendant. */
tr.disp-clos .v { text-decoration: line-through; opacity: .7; }
tr.disp-clos .clos-note {
    display: block; margin-top: 8px; font-size: .88em; font-weight: 600;
    color: var(--text-secondary);
}
tr.disp-clos .clos-note a { color: var(--blue); }

/* ---------- Bande CTA finale ---------- */
.cta-final {
    background: linear-gradient(120deg, #0053BE, var(--blue) 55%, #2E8AF0);
    border-radius: var(--radius); color: #fff; padding: 30px 32px;
    margin: 2.2em 0 0; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.cta-final::after {
    content: ''; position: absolute; right: -30px; bottom: -34px; width: 150px; height: 150px;
    background: url('assets/bouee.png') center / contain no-repeat; opacity: .2;
    transform: rotate(-12deg); pointer-events: none;
}
.cta-final h2 { color: #fff; margin-top: 0; }
.cta-final h2::after { background: rgba(255, 255, 255, .4); }
.cta-final a:not(.cta) { color: #fff; }
.cta-final .cta { background: #fff; color: var(--blue-dark); }
.cta-final .cta:hover { background: var(--blue-pale); color: var(--blue-dark); }
.cta-final p:last-child { font-size: 13.5px; color: var(--blue-muted); }
.cta-final p:last-child a { color: #fff; }

/* ---------- Footer ---------- */
.ft { border-top: 1px solid var(--gray-200); background: #fff; margin-top: 30px; }
.ft-in {
    max-width: var(--page-max); margin: 0 auto; padding: 18px 20px;
    display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
    font-size: 12.5px; color: var(--text-secondary);
}
.ft-in img { height: 22px; }
.ft-note { margin-left: auto; font-style: italic; }

/* Pilule flottante de relecture (position de la bascule A/B du proto) */
.review-pill {
    position: fixed; right: 16px; bottom: 16px; z-index: 80;
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px;
    background: var(--text-primary); color: #fff; border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-lg);
    transition: transform .16s var(--ease);
}
.review-pill:hover { transform: translateY(-2px); }
/* La pastille n'est jamais masquee : elle est RETIREE du HTML des qu'une page est
   sourcee (_verif/pastille.mjs). La masquer laisserait « a sourcer avant publication »
   dans le DOM, lisible par un crawler sur une page publiee. */

/* ---------- Hub de relecture (index) ---------- */
.hub { max-width: 760px; margin: 34px auto 60px; padding: 0 20px; }
.hub-card {
    display: flex; align-items: center; gap: 18px; background: #fff;
    border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 18px 22px; margin: 14px 0; text-decoration: none; color: var(--text-primary);
    transition: transform .16s var(--ease), box-shadow .16s, border-color .16s;
}
.hub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--blue-muted); }
.hub-card img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 109, 236, .18)); }
.hub-card .t { font-family: 'Museo Sans', 'Mukta Mahee', sans-serif; font-weight: 800; font-size: 16.5px; line-height: 1.3; }
.hub-card .s { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.hub-card .go { margin-left: auto; color: var(--orange); font-size: 20px; font-weight: 900; }
.badge {
    display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 10px;
    border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; white-space: nowrap;
}
.badge--blue { background: var(--blue-pale); color: var(--blue-dark); }
.badge--gray { background: var(--gray-200); color: var(--text-secondary); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .hero-obj { display: none; }
    .hero-in { padding: 24px 16px 34px; }
    .doc { padding: 0 16px; }
    .mapi-band { padding: 20px 18px; }
    .cta-final { padding: 24px 20px; }
    .hd-group { display: none; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-obj img { animation: none; }
    .btn, .doc .cta, .hub-card, .review-pill { transition: none; }
}

/* Question GEO du hero (reprise verbatim de la requete cible) */
.hero-question {
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif;
    font-weight: 500; font-size: 15px; letter-spacing: .015em;
    color: var(--blue-muted); margin: 0 0 10px;
}
/* Contenu accessible aux machines mais masque visuellement (captions de tableaux) */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Bloc de sources ----------
   Replie par defaut : Google lit son contenu, le lecteur ne le subit pas. Discret
   volontairement : c'est un appareil de preuve en fin de page, pas une section de
   l'article. Les liens sortants vivent ici et nulle part ailleurs, pour ne pas
   detourner la lecture au moment ou elle compte. */
.sources {
    margin: 2.6em 0 0; border-top: 1px solid var(--gray-200);
    font-size: 13.5px; color: var(--text-secondary);
}
.sources > summary {
    cursor: pointer; padding: 13px 0; list-style: none;
    display: flex; align-items: center; gap: 8px; color: var(--text-secondary);
}
.sources > summary::-webkit-details-marker { display: none; }
.sources > summary::before {
    content: '›'; font-size: 1.15em; line-height: 1;
    transition: transform .18s var(--ease); color: var(--text-muted);
}
.sources[open] > summary::before { transform: rotate(90deg); }
.sources > summary .n { color: var(--text-muted); }
.sources .intro { margin: 0 0 10px; color: var(--text-muted); font-size: 13px; }
.sources .intro--interne { margin-top: 16px; }
.sources .src-list { list-style: none; margin: 0 0 14px; padding: 0; }
.sources .src-list li {
    padding: 5px 0; display: flex; flex-wrap: wrap;
    align-items: baseline; gap: 2px 8px; line-height: 1.5;
}
.sources .src-list a { color: var(--text-secondary); text-decoration: none; }
.sources .src-list a:hover { color: var(--blue); text-decoration: underline; }
.sources .org { color: var(--text-muted); }
.sources .org::before { content: '· '; }
.sources .dt { margin-left: auto; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sources .src-list--interne li { color: var(--text-muted); }

/* Preuve de fraicheur, sous le chapo : elle porte la confiance la ou elle se decide. */
.hero-verif {
    margin: 10px 0 0; font-size: .9em; color: var(--text-secondary);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.hero-verif::before { content: '✓'; color: var(--green-ink); font-weight: 700; }
.hero-verif a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Lien vers une page soeur pas encore publiee : rendu en texte, sans href, pour ne
   pas mettre un 404 en ligne. liens.mjs le retablit des que la cible est publiee. */
.lien-attente { color: inherit; text-decoration: none; }

/* ---------- Aide reservee a l'accompagnement ----------
   Ces aides n'ont pas de fiche publique : leur URL redirigeait vers une liste
   generique. On garde le nom, qui a de la valeur pour le lecteur, mais le lien
   devient un marqueur qui ouvre une explication. */
.aide-premium {
    font: inherit; color: var(--orange-ink); background: var(--orange-soft);
    border: none; border-radius: 6px; padding: 1px 7px 1px 6px;
    cursor: pointer; text-align: left;
    display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
    transition: background .15s, color .15s;
}
.aide-premium::after {
    content: '★'; font-size: .78em; margin-left: 5px; opacity: .8;
    vertical-align: 1px;
}
.aide-premium:hover { background: var(--orange); color: #fff; }

/* Modale d'explication, montee a la volee par carnet.js */
.mp-fond {
    position: fixed; inset: 0; z-index: 1000; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(18, 38, 63, .55); backdrop-filter: blur(2px);
}
.mp-boite {
    background: #fff; border-radius: var(--radius); max-width: 470px; width: 100%;
    padding: 26px 26px 22px; box-shadow: var(--shadow-lg); position: relative;
}
.mp-boite h2 {
    font-family: 'Museo Sans', 'Mukta Mahee', sans-serif;
    font-weight: 800; font-size: 19px; margin: 0 0 10px; color: var(--text-primary);
}
.mp-boite p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.mp-boite .mp-aide { font-weight: 600; color: var(--text-primary); }
.mp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mp-fermer {
    position: absolute; top: 10px; right: 12px; border: none; background: none;
    font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-secondary);
    padding: 4px 8px; border-radius: 6px;
}
.mp-fermer:hover { background: var(--gray-100); color: var(--text-primary); }