/* ==========================================================================
   360CONTROL — Documentation publique
   Feuille propre aux pages /documentation : elle s'appuie sur les jetons et
   composants d'orna.css (palette, boutons, pastilles, tableaux, bandeaux) et
   n'ajoute que la mise en page de lecture. Préfixe « doc- » pour ne jamais
   entrer en conflit avec l'application.
   ========================================================================== */

body.doc {
    background: var(--n-50);
    font-size: var(--fs-md);
    line-height: 1.7;
}

/* --- Bandeau supérieur ---------------------------------------------------- */
.doc-entete {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: 60px;
    padding: 0 var(--sp-5);
    background: linear-gradient(90deg, var(--orna-blue-dark) 0%, var(--orna-blue) 100%);
    color: #fff;
    box-shadow: var(--shadow-md);
}
.doc-entete__marque {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: #fff;
    text-decoration: none;
}
.doc-entete__marque img { border-radius: 8px; background: #fff; }
.doc-entete__nom {
    display: block;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
}
.doc-entete__sous-titre {
    display: block;
    font-size: var(--fs-xs);
    color: var(--orna-rose-light);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.doc-entete__espace { flex: 1; }
.doc-entete__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-button);
    background: transparent;
    color: #fff;
    cursor: pointer;
}

/* --- Cadre à trois colonnes ----------------------------------------------- */
.doc-cadre {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 220px;
    max-width: 1440px;
    margin: 0 auto;
}

/* --- Sommaire --------------------------------------------------------------- */
.doc-sommaire {
    position: sticky;
    top: 60px;
    align-self: start;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    overflow-y: auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-10);
    border-right: 1px solid var(--n-200);
    background: var(--n-0);
}
.doc-recherche { position: relative; margin-bottom: var(--sp-4); }
.doc-recherche__icone {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--n-500);
    display: flex;
}
.doc-recherche .input { padding-left: 34px; }

.doc-chapitres, .doc-sections { list-style: none; margin: 0; padding: 0; }
.doc-chapitre {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-3);
    border-radius: var(--radius-button);
    color: var(--orna-blue);
    font-weight: 600;
    font-size: var(--fs-base);
    text-decoration: none;
}
.doc-chapitre:hover { background: var(--orna-blue-pale); }
.doc-chapitre.is-active {
    background: var(--orna-rose-pale);
    color: var(--orna-rose-text);
    box-shadow: inset 3px 0 0 var(--orna-rose);
}
.doc-sections { display: none; margin: 2px 0 var(--sp-2) 22px; border-left: 1px solid var(--n-200); }
.is-ouvert > .doc-sections,
.doc-sommaire.is-filtre .doc-sections { display: block; }
.doc-sections a {
    display: block;
    padding: 4px var(--sp-3);
    color: var(--n-600);
    font-size: var(--fs-sm);
    text-decoration: none;
    line-height: 1.45;
}
.doc-sections a:hover { color: var(--orna-blue); }
.doc-sections a.is-active { color: var(--orna-rose-text); font-weight: 600; }
.doc-sommaire__vide { color: var(--n-600); font-size: var(--fs-sm); padding: var(--sp-3); }
.doc-sommaire [hidden] { display: none !important; }
mark.doc-surligne { background: var(--orna-gold-pale); color: inherit; padding: 0 1px; border-radius: 2px; }

/* --- Contenu ------------------------------------------------------------- */
.doc-contenu {
    min-width: 0;
    padding: var(--sp-8) var(--sp-10) var(--sp-10);
    outline: none;
}
.doc-fil { font-size: var(--fs-sm); color: var(--n-600); margin-bottom: var(--sp-4); }
.doc-fil a { color: var(--orna-blue); text-decoration: none; }
.doc-fil span[aria-hidden] { margin: 0 6px; }

.doc-titre {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    padding-bottom: var(--sp-6);
    margin-bottom: var(--sp-6);
    border-bottom: 2px solid var(--orna-blue-pale);
}
.doc-titre__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--orna-rose) 0%, var(--orna-blue) 100%);
    color: #fff;
}
.doc-titre__icone svg.icon { width: 26px; height: 26px; }
.doc-titre h1 { margin: 0 0 4px; font-size: var(--fs-3xl); color: var(--orna-blue); line-height: 1.2; }
.doc-titre p { margin: 0; color: var(--n-600); }

.doc-article { max-width: 860px; }
.doc-article h2 {
    margin: var(--sp-10) 0 var(--sp-3);
    padding-top: var(--sp-2);
    font-size: var(--fs-2xl);
    color: var(--orna-blue);
    scroll-margin-top: 76px;
}
.doc-article h2:first-child { margin-top: 0; }
.doc-article h3 {
    margin: var(--sp-6) 0 var(--sp-2);
    font-size: var(--fs-lg);
    color: var(--orna-blue-dark);
    scroll-margin-top: 76px;
}
.doc-article p, .doc-article ul, .doc-article ol { margin: 0 0 var(--sp-4); }
.doc-article ul, .doc-article ol { padding-left: 1.4em; }
.doc-article li { margin-bottom: 4px; }
.doc-article a:not(.btn) { color: var(--orna-rose-text); }
.doc-article strong { color: var(--n-900); }
.doc-article .notice { margin: var(--sp-4) 0 var(--sp-5); font-size: var(--fs-base); }
.doc-article .notice p { margin: 0; }
.doc-article .table-wrap {
    margin: var(--sp-3) 0 var(--sp-5);
    border: 1px solid var(--n-200);
    border-radius: var(--radius-input);
    background: var(--n-0);
}
.doc-article .table { font-size: var(--fs-base); }
.doc-article .table td { vertical-align: top; }
.doc-article .table thead th { position: static; }

/* Chemin d'accès dans le menu : Gestion commerciale › Produits et prix */
.doc-chemin {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--orna-blue-pale);
    color: var(--orna-blue);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Étapes numérotées */
.doc-etapes { counter-reset: etape; list-style: none; padding-left: 0 !important; }
.doc-etapes > li {
    position: relative;
    padding: 0 0 var(--sp-3) 42px;
    margin: 0;
}
.doc-etapes > li::before {
    counter-increment: etape;
    content: counter(etape);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--orna-blue);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.doc-etapes > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 13.5px;
    top: 30px;
    bottom: 2px;
    width: 1px;
    background: var(--n-300);
}

kbd {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    border: 1px solid var(--n-300);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--n-0);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.5;
    text-align: center;
}
code, .doc-code {
    font-family: var(--font-mono);
    font-size: .92em;
}
code { padding: 1px 5px; border-radius: 4px; background: var(--orna-blue-pale); color: var(--orna-blue-dark); }
pre.doc-code {
    margin: var(--sp-3) 0 var(--sp-5);
    padding: var(--sp-4);
    overflow-x: auto;
    border-radius: var(--radius-input);
    background: var(--orna-blue-dark);
    color: #F0F0FA;
    line-height: 1.6;
}

/* Glossaire */
.doc-glossaire { margin: 0 0 var(--sp-5); }
.doc-glossaire dt { margin-top: var(--sp-3); font-weight: 700; color: var(--orna-blue); }
.doc-glossaire dd { margin: 2px 0 0; color: var(--n-900); }

/* Cartes de l'accueil */
.doc-accueil__hero {
    padding: var(--sp-8);
    margin-bottom: var(--sp-8);
    border-radius: var(--radius-panel);
    background:
        radial-gradient(circle at 90% 10%, rgba(233, 30, 140, .35), transparent 45%),
        radial-gradient(circle at 10% 100%, rgba(212, 168, 83, .3), transparent 40%),
        linear-gradient(135deg, var(--orna-blue-dark) 0%, var(--orna-blue) 100%);
    color: #fff;
}
.doc-accueil__hero h1 { margin: 0 0 var(--sp-2); font-size: 2.1rem; line-height: 1.2; color: #fff; }
.doc-accueil__hero p { margin: 0; max-width: 640px; color: rgba(255, 255, 255, .85); }
.doc-accueil__hero .btn { margin-top: var(--sp-5); }

.doc-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-4) 0 var(--sp-8);
    padding: 0 !important;
    list-style: none;
}
.doc-carte {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100%;
    padding: var(--sp-5);
    border: 1px solid var(--n-200);
    border-radius: var(--radius-panel);
    background: var(--n-0);
    color: inherit !important;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.doc-carte:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--orna-rose-light); }
.doc-carte__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--orna-rose-pale);
    color: var(--orna-rose-text);
}
.doc-carte__titre { font-weight: 700; color: var(--orna-blue); font-size: var(--fs-lg); }
.doc-carte__texte { color: var(--n-600); font-size: var(--fs-base); line-height: 1.55; }

/* Précédent / suivant */
.doc-suite {
    display: flex;
    gap: var(--sp-4);
    max-width: 860px;
    margin-top: var(--sp-10);
}
.doc-suite__lien {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--n-200);
    border-radius: var(--radius-panel);
    background: var(--n-0);
    text-decoration: none;
}
.doc-suite__lien:hover { border-color: var(--orna-rose-light); }
.doc-suite__lien--suivant { text-align: right; }
.doc-suite__sens { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--n-600); }
.doc-suite__titre { font-weight: 600; color: var(--orna-blue); }

.doc-pied {
    max-width: 860px;
    margin-top: var(--sp-10);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--n-200);
    color: var(--n-600);
    font-size: var(--fs-sm);
}

/* --- Sur cette page ------------------------------------------------------- */
.doc-page {
    position: sticky;
    top: 60px;
    align-self: start;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: var(--sp-8) var(--sp-4);
    font-size: var(--fs-sm);
}
.doc-page__titre {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--n-600);
}
.doc-page ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--n-200); }
.doc-page a {
    display: block;
    padding: 3px var(--sp-3);
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--n-600);
    text-decoration: none;
    line-height: 1.45;
}
.doc-page a:hover { color: var(--orna-blue); }
.doc-page a.is-active { color: var(--orna-rose-text); border-left-color: var(--orna-rose); font-weight: 600; }

.doc-voile { display: none; }

/* --- Adaptations ---------------------------------------------------------- */
@media (max-width: 1200px) {
    .doc-cadre { grid-template-columns: 260px minmax(0, 1fr); }
    .doc-page { display: none; }
}

@media (max-width: 900px) {
    .doc-cadre { display: block; }
    .doc-entete { padding: 0 var(--sp-4); }
    .doc-entete__menu { display: inline-flex; }
    .doc-sommaire {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        z-index: 35;
        width: min(320px, 86vw);
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        transform: translateX(-105%);
        transition: transform var(--ease);
        box-shadow: var(--shadow-lg);
    }
    .doc-sommaire.is-visible { transform: none; }
    .doc-voile:not([hidden]) {
        display: block;
        position: fixed;
        inset: 60px 0 0 0;
        z-index: 30;
        background: rgba(13, 13, 61, .35);
    }
    .doc-contenu { padding: var(--sp-6) var(--sp-4) var(--sp-10); }
}

@media (max-width: 640px) {
    .doc-entete .btn span { display: none; }
    .doc-titre h1 { font-size: var(--fs-2xl); }
    .doc-titre__icone { flex-basis: 42px; height: 42px; }
    .doc-accueil__hero { padding: var(--sp-6) var(--sp-5); }
    .doc-accueil__hero h1 { font-size: var(--fs-2xl); }
    .doc-suite { flex-direction: column; }
    .doc-article h2 { font-size: var(--fs-xl); }
}

@media print {
    .doc-entete, .doc-sommaire, .doc-page, .doc-suite, .doc-pied__imprimer, .skip-link, .doc-voile { display: none !important; }
    body.doc { background: #fff; font-size: 11pt; }
    .doc-cadre { display: block; }
    .doc-contenu { padding: 0; }
    .doc-article { max-width: none; }
    .doc-article h2 { break-after: avoid; }
    .doc-article .table-wrap, .doc-article .notice { break-inside: avoid; }
}