/*
*   Custom CSS for the ETML doc site
*   Light theme - Standard (Lexend, Option A)
*   Layout moderne aligné avec la barre latérale
*/

/* ----------------------------------------------------------
   1. Polices
---------------------------------------------------------- */

@font-face {
    font-family: 'Lexend';
    src:
        url('fonts/Lexend-Regular.woff2') format('woff2'),
        url('fonts/Lexend-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src:
        url('fonts/Lexend-Medium.woff2') format('woff2'),
        url('fonts/Lexend-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src:
        url('fonts/Lexend-Bold.woff2') format('woff2'),
        url('fonts/Lexend-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: ETMLFont;
    src: url('fonts/ETML-new.ttf');
}


/* ----------------------------------------------------------
     2. Base typographique & structure
  ---------------------------------------------------------- */

body {
    color: #303030;
    font-family: 'Lexend', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Appliquer Lexend uniformément */
.rst-content,
.wy-nav-content,
.wy-menu-vertical a,
.wy-side-nav-search input,
table,
button,
input,
textarea {
    font-family: 'Lexend', system-ui, sans-serif;
}

/* Paragraphes lisibles */
p,
.rst-content p {
    text-align: left;
    margin-bottom: 1em;
}

.rst-content h1,
.rst-content h2,
.rst-content h3,
.rst-content h4 {
    font-family: 'Lexend', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
}

/* Hiérarchie visuelle plus sobre et moderne */
.rst-content h1 {
    font-size: 1.9rem;
}

.rst-content h2 {
    font-size: 1.6rem;
}

.rst-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
}

.rst-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Éviter le gros blanc au-dessus du premier titre de page */
.rst-content h1:first-of-type {
    margin-top: 0.5rem;
}



/* Contenu aligné à gauche, pas centré dans le viewport */
.wy-nav-content {
    width: 70%;                
    max-width: 110ch;           
    min-width: 60ch;            
    margin-left: 2.5rem;        
    margin-right: auto;
    padding: 2rem 2.5rem;       
    background: #FCFAFF;
}

/* Fond autour du contenu */
.wy-nav-content-wrap {
    background: #FCFAFF;
}

/* Rail discret de séparation */
.wy-side-scroll {
    border-right: 1px solid #e4e4e4;
}


/* ----------------------------------------------------------
     4. Navigation & header
  ---------------------------------------------------------- */

.wy-side-nav-search,
.wy-nav-top {
    background-color: #004595;
}

.wy-nav-side {
    background-color: #efedf1;
}

.highlight {
    background-color: #efedf1;
}

/* Champ de recherche */
.wy-side-nav-search input[type=text] {
    border-radius: 8px;
    border-color: #D8DEE9;
}

/* Logo ETML dans le breadcrumb */
.fa-home::before,
.icon-home::before {
    content: "ETML";
    font-family: ETMLFont;
    color: #303030;
    letter-spacing: 1px;
}

/* Logo ETML dans la zone recherche */
.wy-side-nav-search .icon-home::before {
    content: "ETML";
    font-family: ETMLFont;
    color: white;
    letter-spacing: 1px;
    margin-right: 100px;
}


/* ----------------------------------------------------------
     5. Liens, focus & états interactifs
  ---------------------------------------------------------- */

a {
    color: #1b76c4;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: #2980b9;
}

/* Focus visible (accessibilité) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #004595;
    outline-offset: 2px;
}

/* Menu vertical */
.wy-menu-vertical a,
.wy-menu-vertical a:visited {
    color: #303030;
}

/* Élément actif */
.wy-menu-vertical li.current {
    background-color: #dbdbdb;
}

.current {
    color: #D8DEE9;
}


/* ----------------------------------------------------------
     6. Tables, images, code
  ---------------------------------------------------------- */

/* ----------------------------------------------------------
   Tables – style ETML (bleu) + wrapper wy-table-responsive
---------------------------------------------------------- */

/* Wrapper responsive : on laisse l'overflow RTD, on nettoie juste un peu */
.wy-table-responsive {
    margin: 1.2rem 0;
    border: 0;
    background: transparent;
}

/* Table principale (docutils align-default) */
.wy-table-responsive table.docutils.align-default,
.rst-content table.docutils.align-default {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: #ffffff;
}

/* Cellules générales */
.wy-table-responsive table.docutils.align-default th,
.wy-table-responsive table.docutils.align-default td,
.rst-content table.docutils.align-default th,
.rst-content table.docutils.align-default td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d0d7e5;   /* gris bleuté doux */
    vertical-align: top;
    white-space: normal !important;
    word-break: break-word;
}

/* En-têtes : bleu ETML */
.wy-table-responsive table.docutils.align-default th,
.rst-content table.docutils.align-default th {
    background: #004595;
    color: #ffffff;
    font-weight: 700;
    text-align: left;
}

/* Lignes zébrées */
.wy-table-responsive table.docutils.align-default tr:nth-child(even),
.rst-content table.docutils.align-default tr:nth-child(even) {
    background: #f5f7fb;         /* bleu très clair */
}

/* Survol (desktop uniquement) */
@media (hover: hover) {
  .wy-table-responsive table.docutils.align-default tr:hover,
  .rst-content table.docutils.align-default tr:hover {
      background: #e4ecf9;
  }
}

/* Légende de table (si utilisée) */
.rst-content table.docutils.align-default caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: #004595;
}


.rst-content img {
    max-width: 100% !important;
    height: auto !important;
}

.fm {
    color: #05efc5;
}

.image-reference:hover {
    background-color: transparent;
}

.reference.internal:hover {
    background: #d8eaff !important;
}

.toctree-expand {
    color: black !important;
}

/* Masquage des titres profonds (conservé) */
.toctree-l3,
.toctree-l4,
.toctree-l5,
.toctree-l6 {
    display: none;
}


/* ----------------------------------------------------------
     7. Zones de réponse
  ---------------------------------------------------------- */

.answer-block {
    margin: 1rem 0 2rem;
}

.answer-area {
    width: 100%;
    min-height: 9rem;
    resize: vertical;
    padding: 0.75rem 1rem;
    border: 2px solid #fdba74;
    border-radius: 10px;
    font-family: 'Lexend';
    background: #fff7ed;
    color: #431407;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.answer-area:focus {
    outline: none;
    border-color: #f97316;
    background: #fff;
    font-size: 1.05rem;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.4);
}

.export-btn {
    display: inline-block;
    padding: 0.7rem 1.2rem;
    margin: 1.5rem 0;            
    border: 2px solid #00aa44;
    border-radius: 10px;         
    background: #eafff0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;          
    transition: background 0.2s ease, transform 0.1s ease;
}

.export-btn:hover {
    background: #d6ffe6;
    transform: translateY(-1px); 
}
/* Monaco : reste en monospace */
.answer-block .monaco-editor,
.answer-block .monaco-editor .view-lines {
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.answer-block .monaco-editor .margin .line-numbers {
    font-size: 16px !important;
}

/* ----------------------------------------------------------
   Navigation – Ghost buttons (palette moderne)
---------------------------------------------------------- */

/* Fond général de la sidebar */
.wy-nav-side {
    background-color: #F8FAFC; /* neutre moderne */
}

/* Wrapper scrollable */
.wy-side-scroll {
    border-right: 1px solid #E2E8F0; /* séparation douce */
}

/* Items du menu */
.wy-menu-vertical li {
    margin: 0.25rem 0;
    border-radius: 8px;          /* pastille ghost */
    overflow: hidden;
}

/* Liens ghost */
.wy-menu-vertical a {
    display: block;
    padding: 0.45rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #1E293B;                /* texte neutre moderne */
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.08s ease;
}

/* Hover : léger remplissage + contour subtil */
.wy-menu-vertical a:hover {
    background-color: #E2E8F0;     /* Slate-200 */
    border-color: #CBD5E1;         /* Slate-300 */
    transform: translateX(1px);
}

/* Élément actif (current) */
.wy-menu-vertical li.current > a {
    background-color: #DCEBFF;     /* bleu moderne très doux */
    border-color: #3B82F6;         /* Blue-500 */
    color: #1E40AF;                /* Blue-800 */
    font-weight: 600;
}

/* Sous-éléments */
.wy-menu-vertical li.toctree-l2 > a {
    font-size: 0.9rem;
    padding-left: 1.6rem;
}

/* Focus clavier */
.wy-menu-vertical a:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* ----------------------------------------------------------
     8. Responsive
  ---------------------------------------------------------- */

@media screen and (max-width: 1100px) {

    .wy-nav-top {
        display: block;
    }

    .wy-nav-side.shift {
        width: 50%;
        left: 0;
    }

    .wy-nav-content-wrap.shift {
        position: fixed;
        min-width: 100%;
        left: 50%;
        height: 100%;
        overflow: hidden;
    }

    .wy-nav-side {
        left: -300px;
    }

    .wy-nav-content-wrap {
        margin-left: 0;
    }

    .wy-menu.wy-menu-vertical,
    .wy-side-nav-search,
    .wy-side-scroll {
        width: auto;
    }

    .field-list {
        display: block !important;
    }

    .td {
        display: table-column-group;
    }

    html.writer-html5 .rst-content dl.field-list>dt {
        margin-bottom: 10px;
    }

    /* Option A : le contenu reste aligné à gauche */
    .wy-nav-content {
        width: 100%;
        max-width: 90ch;     
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 1rem;
        background: #FCFAFF;
    }

    @media screen and (max-width: 768px) {

        .wy-nav-side.shift {
            width: 85%;
        }

        .wy-nav-content-wrap.shift {
            left: 85%;
        }
    }
}


/* ----------------------------------------------------------
     9. Impression
  ---------------------------------------------------------- */

@media print {
    #export-answers {
        display: none;
    }

    .answer-area {
        border-color: #999;
        background: #fff;
        min-height: 6rem;
    }
}