/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Nick
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* ─────────────────────────────────────────────
   TYPOGRAPHIE
───────────────────────────────────────────── */
p, h1, h2, h3, h4, a {
    font-family: 'Montserrat', sans-serif !important;
}

/* Supprime les effets de tap natifs sur mobile */
a, button, .menu-item a, img {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-focus-ring-color: rgba(0,0,0,0) !important;
    user-select: none !important;
    outline: none !important;
}
a:active, a:focus { outline-style: none !important; }
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* ─────────────────────────────────────────────
   NAVIGATION PRINCIPALE
───────────────────────────────────────────── */
#main {
    margin-top: 5em !important;
    margin-bottom: 5em !important;
}
#site-header-inner { height: 6em; }
#site-header { border-bottom: none; height: 6em; }
#site-navigation { margin-top: 2.5em !important; }
a .menu-link { font-family: 'myriadPro_Bold', sans-serif !important; }

/* Animation du logo au survol */
#site-logo:hover {
    transition-duration: 200ms;
    transform: scale(1.05);
    opacity: 1 !important;
}

/* Header sticky scroll */
.fixedTop {
    top: 0; width: 100%; background: white;
    box-shadow: 0px 3px 4px 2px rgb(0 0 0 / 20%);
    animation: fadeIn ease 0.2s;
}
.fixedTopBase {
    top: 0; width: 100%; background: white;
    animation: fadeIn ease 0.2s;
}

/* ─────────────────────────────────────────────
   DROPDOWN MENU
   Ne pas modifier — styles validés
───────────────────────────────────────────── */
.sf-menu li.menu-item.menu-item-has-children {
    padding-bottom: 1em !important;
}
.sub-menu a { transition: 200ms; }
.sub-menu li {
    transition: 200ms;
    border-radius: 4px;
}
.sub-menu li:hover {
    transition: 200ms;
    background: #0c8948 !important;
    box-shadow: 1px 1px 4px 1px #00000015;
}
.sub-menu a:hover {
    transition: 200ms;
    background: white !important;
    transform: translateX(2px) translateY(-2px);
}

/* ─────────────────────────────────────────────
   RESPONSIVE NAVIGATION
───────────────────────────────────────────── */
@media (max-width: 768px) {
    #main { margin-top: 4em !important; }
    #site-header, #site-header-inner { height: auto; }
}

/* ─────────────────────────────────────────────
   BLOG / ARTICLES
───────────────────────────────────────────── */
.blog-entry-inner {
    border: none !important;
    box-shadow: 3px 3px 6px 0px #505050bf;
    border-radius: 4px;
    padding-bottom: 2em !important;
}

/* Thumbnail dans la grille */
.blog-entry-inner .thumbnail img {
    height: 25vh;
    object-fit: cover;
    border-radius: 4px;
    width: 100%;
}

/* Thumbnail article individuel */
.thumbnail img {
    height: 40vh;
    max-height: 40vh;
    object-fit: cover;
    border-radius: 4px;
    width: 100%;
}

@media (max-width: 768px) {
    .blog-entry-inner .thumbnail img { height: 200px; }
    .thumbnail img { height: 220px; max-height: 220px; }
}
@media (max-width: 480px) {
    .blog-entry-inner .thumbnail img { height: 180px; }
    .thumbnail img { height: 180px; max-height: 180px; }
}

.wp-block-latest-posts__list { display: flex; flex-direction: column; }
.wp-block-latest-posts__list li { padding: 1em 0; }
.related-post-media img { object-fit: cover; height: 15vh; }

/* Bouton "Lire la suite" */
.blog-entry-readmore a {
    color: white;
    background-color: #008641;
    border-radius: 4px;
    border: 1px solid #008641 !important;
    transition: all 0.3s linear;
    text-decoration: none !important;
    padding: 1em 3em 1em 1em !important;
    font-weight: 600;
    margin-top: 1em;
    font-size: 0.9em !important;
}
.blog-entry-readmore a:hover { color: #008641 !important; background-color: white; }
.blog-entry-readmore use { stroke: white; }

/* ─────────────────────────────────────────────
   DIVERS BLOCKS GUTENBERG
───────────────────────────────────────────── */
.wp-block-uagb-container { display: block !important; }
.wp-block-uagb-container p { margin-top: -20px; }
.page-numbers .current { color: white !important; }

.wp-element-button {
    background: white;
    color: #008641;
    border: 1px solid #008641 !important;
    padding: 0.5em 1em !important;
    border-radius: 4px !important;
    transition: 200ms;
}
.wp-element-button:hover { background: #008641; color: white; }

/* ─────────────────────────────────────────────
   PAGE CONNEXION
───────────────────────────────────────────── */
body.intranet-login {
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: #f5f6f4;
    margin: 0;
}

/* Masquer les éléments du site sur la page connexion */
body.intranet-login #site-header,
body.intranet-login #main-nav,
body.intranet-login footer,
body.intranet-login #footer-widgets,
body.intranet-login .oceanwp-cookie-notice { display: none !important; }
body.intranet-login #main { margin-top: 0 !important; }

.bg-layer { position: fixed; inset: 0; z-index: 0; background: #f5f6f4; }

.bg-squares {
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none; overflow: hidden;
}

/* Carrés décoratifs en arrière-plan */
.sq { position: absolute; border-radius: 5px; }
.sq-1  { width:110px; height:110px; background:#0c8948; opacity:.08; top:5%;  left:4%;  transform:rotate(3deg);  }
.sq-2  { width:90px;  height:90px;  background:#5f91b3; opacity:.09; top:2%;  left:70%; transform:rotate(-2deg); }
.sq-3  { width:120px; height:120px; background:#adaf4c; opacity:.07; top:78%; left:82%; transform:rotate(2deg);  }
.sq-4  { width:100px; height:100px; background:#ce6438; opacity:.08; top:72%; left:2%;  transform:rotate(-3deg); }
.sq-5  { width:60px;  height:60px;  background:#eba942; opacity:.11; top:18%; left:88%; transform:rotate(4deg);  }
.sq-6  { width:55px;  height:55px;  background:#0c8948; opacity:.1;  top:45%; left:6%;  transform:rotate(-4deg); }
.sq-7  { width:65px;  height:65px;  background:#5f91b3; opacity:.09; top:60%; left:55%; transform:rotate(2deg);  }
.sq-8  { width:50px;  height:50px;  background:#ce6438; opacity:.1;  top:30%; left:42%; transform:rotate(-2deg); }
.sq-9  { width:70px;  height:70px;  background:#adaf4c; opacity:.08; top:85%; left:40%; transform:rotate(3deg);  }
.sq-10 { width:58px;  height:58px;  background:#eba942; opacity:.09; top:10%; left:28%; transform:rotate(-3deg); }
.sq-11 { width:28px;  height:28px;  background:#0c8948; opacity:.13; top:25%; left:16%; transform:rotate(5deg);  }
.sq-12 { width:22px;  height:22px;  background:#5f91b3; opacity:.14; top:50%; left:80%; transform:rotate(-4deg); }
.sq-13 { width:18px;  height:18px;  background:#ce6438; opacity:.13; top:68%; left:30%; transform:rotate(3deg);  }
.sq-14 { width:24px;  height:24px;  background:#eba942; opacity:.12; top:38%; left:65%; transform:rotate(-5deg); }
.sq-15 { width:20px;  height:20px;  background:#adaf4c; opacity:.13; top:92%; left:18%; transform:rotate(4deg);  }
.sq-16 { width:26px;  height:26px;  background:#0c8948; opacity:.11; top:14%; left:52%; transform:rotate(-3deg); }
.sq-17 { width:16px;  height:16px;  background:#5f91b3; opacity:.14; top:55%; left:22%; transform:rotate(2deg);  }
.sq-18 { width:30px;  height:30px;  background:#ce6438; opacity:.1;  top:82%; left:62%; transform:rotate(-4deg); }
.sq-19 { width:14px;  height:14px;  background:#eba942; opacity:.14; top:35%; left:2%;  transform:rotate(5deg);  }
.sq-20 { width:22px;  height:22px;  background:#adaf4c; opacity:.12; top:6%;  left:92%; transform:rotate(-2deg); }

/* Masquer une partie des carrés sur mobile (performances) */
@media (max-width: 480px) {
    .sq-1, .sq-2, .sq-3, .sq-4, .sq-5,
    .sq-11, .sq-12, .sq-13, .sq-14, .sq-15,
    .sq-16, .sq-17, .sq-18, .sq-19, .sq-20 { display: none; }
}

.login-wrapper {
    position: relative; z-index: 10;
    width: 100%; padding: 24px;
    display: flex; justify-content: center;
}

.login-card {
    width: 100%; max-width: 420px;
    background: #fff; border-radius: 20px;
    padding: 52px 44px 44px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.07), 0 32px 64px rgba(0,0,0,.05);
    animation: cardIn 0.65s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .login-card { padding: 36px 24px 32px; border-radius: 14px; }
    .login-wrapper { padding: 16px; }
}

.logo-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 250px; height: 120px; margin-bottom: 8px;
    animation: cardIn 0.65s 0.08s cubic-bezier(0.22,1,0.36,1) both;
}
.logo-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media (max-width: 480px) { .logo-mark { width: 180px; height: 90px; } }

.color-bar {
    display: flex; justify-content: center; gap: 5px;
    margin-bottom: 28px;
    animation: cardIn 0.65s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.color-bar span { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.color-bar .c1 { background: #0c8948; }
.color-bar .c2 { background: #5f91b3; }
.color-bar .c3 { background: #ce6438; }
.color-bar .c4 { background: #eba942; }
.color-bar .c5 { background: #adaf4c; }

.subtitle {
    font-size: 1.5rem; font-weight: 600; color: #a0a8a3;
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 40px;
    animation: cardIn 0.65s 0.17s cubic-bezier(0.22,1,0.36,1) both;
}
@media (max-width: 480px) { .subtitle { font-size: 1.1rem; margin-bottom: 28px; } }

/* Bouton Google OAuth */
.google-login { animation: cardIn 0.65s 0.22s cubic-bezier(0.22,1,0.36,1) both; }
.google-login .nsl-button,
.google-login .nsl-button-google {
    width: 100% !important; border-radius: 10px !important;
    padding: 14px 20px !important; font-size: 14px !important;
    font-weight: 600 !important; font-family: 'Montserrat', sans-serif !important;
    background: #fff !important; color: #333 !important;
    border: 1.5px solid #e2e8e5 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
    transition: all 0.2s ease !important;
}
.google-login .nsl-button:hover,
.google-login .nsl-button-google:hover {
    border-color: #0c8948 !important;
    box-shadow: 0 4px 16px rgba(12,137,72,.14) !important;
    transform: translateY(-1px) !important;
}

.divider {
    height: 1px; background: #eef0ee; margin: 32px 0 24px;
    animation: cardIn 0.65s 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

/* Lien connexion admin discret */
.admin-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 1.25rem; font-weight: 500; color: #bbb;
    text-decoration: none; letter-spacing: 0.04em;
    transition: color 0.2s ease;
    animation: cardIn 0.65s 0.33s cubic-bezier(0.22,1,0.36,1) both;
}
.admin-link::before {
    content: ''; display: inline-block; width: 13px; height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
}
.admin-link:hover { color: #0c8948; }
.admin-link:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c8948' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────
   BOUTON DÉCONNEXION (fixe en bas à gauche)
───────────────────────────────────────────── */
.logout-btn {
    position: fixed; bottom: 24px; left: 24px; z-index: 9999;
    display: inline-flex; align-items: center; flex-direction: row-reverse;
    height: 44px; width: 44px; overflow: hidden;
    background: white; border: 1.5px solid #e2e8e5; border-radius: 22px;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    transition: width 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.logout-btn:hover { width: 160px; border-color: #ce6438; box-shadow: 0 4px 16px rgba(206,100,56,.18); }

.logout-icon {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; color: #1c1c1c; transition: color 0.2s ease;
}
.logout-icon svg { width: 17px; height: 17px; }
.logout-btn:hover .logout-icon { color: #ce6438; }

.logout-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem; font-weight: 600; color: #ce6438;
    padding-right: 14px; opacity: 0; transform: translateX(8px);
    transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s;
}
.logout-btn:hover .logout-label { opacity: 1; transform: translateX(0); }

@media (max-width: 480px) { .logout-btn { bottom: 16px; left: 16px; } }

/* ─────────────────────────────────────────────
   PILLS CATÉGORIES (filtres articles)
───────────────────────────────────────────── */
.cat-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0; }

.cat-pill {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #333;
    transition: 0.2s ease;
    cursor: pointer;
    font-size: 0.9rem;
}
.cat-pill:hover,
.cat-pill.active {
    background: #0c8948;
    color: #fff;
    border-color: #0c8948;
}
@media (max-width: 480px) { .cat-pill { font-size: 0.8rem; padding: 5px 11px; } }

/* ─────────────────────────────────────────────
   LARGEUR CONTENU (pages full-width)
───────────────────────────────────────────── */
body.content-full-width #content-wrap,
body.content-full-screen #content-wrap {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
@media (max-width: 768px) {
    body.content-full-width #content-wrap,
    body.content-full-screen #content-wrap { padding-left: 15px !important; padding-right: 15px !important; }
}
@media (max-width: 480px) {
    body.content-full-width #content-wrap,
    body.content-full-screen #content-wrap { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ─────────────────────────────────────────────
   GRILLE ARTICLES AJAX
───────────────────────────────────────────── */
div#blog-entries.ajax-loaded {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: start !important;
    float: none !important;
    row-gap: 15px !important;
}
div#blog-entries.ajax-loaded article,
div#blog-entries.ajax-loaded .blog-entry {
    width: 100% !important; float: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
    clear: none !important; height: 100% !important;
}
div#blog-entries.ajax-loaded .blog-entry-inner {
    height: 100% !important;
    box-sizing: border-box !important;
}
div#blog-entries.ajax-loaded .blog-entry-inner .thumbnail {
    height: 220px !important;
    overflow: hidden !important;
}
div#blog-entries.ajax-loaded .blog-entry-inner .thumbnail img {
    height: 100% !important; width: 100% !important;
    object-fit: cover !important; max-height: none !important; min-width: unset !important;
}

@media (max-width: 1024px) {
    div#blog-entries.ajax-loaded { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    div#blog-entries.ajax-loaded { grid-template-columns: repeat(2, 1fr) !important; }
    div#blog-entries.ajax-loaded .blog-entry-inner .thumbnail { height: 180px !important; }
}
@media (max-width: 480px) {
    div#blog-entries.ajax-loaded { grid-template-columns: 1fr !important; }
    div#blog-entries.ajax-loaded .blog-entry-inner .thumbnail { height: 200px !important; }
}

/* ─────────────────────────────────────────────
   PAGINATION AJAX
───────────────────────────────────────────── */
#articles-pagination {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 30px !important;
}
#articles-pagination .nav-links {
    display: flex !important; align-items: center !important;
    gap: 6px !important; flex-wrap: wrap !important;
}
#articles-pagination .page-numbers,
#articles-pagination .ajax-page {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; width: 38px !important; height: 38px !important;
    border-radius: 8px !important; border: 1px solid #e0e0e0 !important;
    background: #fff !important; color: #333 !important;
    font-family: 'Montserrat', sans-serif !important; font-size: 0.85rem !important;
    font-weight: 500 !important; cursor: pointer !important;
    transition: all 0.2s ease !important; text-decoration: none !important; padding: 0 !important;
}
#articles-pagination .page-numbers:hover,
#articles-pagination .ajax-page:hover {
    background: #f0f9f4 !important; border-color: #0c8948 !important; color: #0c8948 !important;
}
#articles-pagination .page-numbers.current {
    background: #0c8948 !important; border-color: #0c8948 !important;
    color: #fff !important; font-weight: 600 !important;
}
#articles-pagination .page-numbers.dots {
    border: none !important; background: transparent !important;
    cursor: default !important; color: #999 !important; width: auto !important;
}
@media (max-width: 480px) {
    #articles-pagination { justify-content: center !important; }
    #articles-pagination .page-numbers,
    #articles-pagination .ajax-page { width: 34px !important; height: 34px !important; font-size: 0.8rem !important; }
}

/* ─────────────────────────────────────────────
   TITRES (style encadré vert)
───────────────────────────────────────────── */
.box-title {
    width: 100%;
    border-left: 1px solid #0c8948;
    border-bottom: 1px solid #0c8948;
    display: flex;
    padding-left: 1em;
    padding-top: 1em;
    margin-bottom: 2em;
}
.category-title { font-size: 4rem; }

@media (max-width: 1024px) { .category-title { font-size: 3rem; } }
@media (max-width: 768px)  { .category-title { font-size: 2.2rem; } }
@media (max-width: 480px)  { .category-title { font-size: 1.8rem; } }

.procedure-desc-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    background: #f0f8f4;
    border: 1px solid #c8e6d6;
    border-left: 4px solid #0c8948;
    padding: 18px 22px;
    margin-bottom: 28px;
    border-radius: 0 6px 6px 0;
    box-sizing: border-box;
}
.procedure-desc-banner__icon {
    flex-shrink: 0;
    color: #0c8948;
    margin-top: 2px;
}
.procedure-desc-banner__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.procedure-desc-banner__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0c8948;
}
.procedure-desc-banner__body {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    margin: 0;
}

/* ─────────────────────────────────────────────
   TEMPLATE PROCÉDURE PDF — BARRE D'ACTIONS
───────────────────────────────────────────── */

/* Bouton retour au-dessus du viewer */
.btn-pdf-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: #888 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}
.btn-pdf-back:hover { color: #0c8948 !important; }
.btn-pdf-back svg { flex-shrink: 0; }

/* Toolbar sticky à l'intérieur du container PDF
   → reste visible en bas de la zone de scroll */
#pdf-toolbar {
    position: sticky;
    bottom: 16px;
    align-self: center;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(22, 22, 22, 0.80);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 40px;
    padding: 5px 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
    white-space: nowrap;
    margin-top: 16px;
}

#pdf-toolbar button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}
#pdf-toolbar button:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
#pdf-toolbar button svg { pointer-events: none; }

/* Séparateur vertical entre les groupes */
.pdf-toolbar-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Valeurs page et zoom */
#zoom-level,
#pdf-page-info {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    min-width: 48px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

@media (max-width: 540px) {
    #pdf-toolbar { padding: 5px 8px; gap: 1px; bottom: 14px; }
    #pdf-toolbar button { width: 34px; height: 34px; font-size: 1.2rem; }
    #zoom-level, #pdf-page-info { font-size: 0.74rem; min-width: 38px; }
    .pdf-toolbar-sep { margin: 0 4px; }
}

/* ─────────────────────────────────────────────
   TEMPLATE PROCÉDURE PDF — VISIONNEUSE
───────────────────────────────────────────── */

/* Conteneur principal : fond gris, scroll si PDF trop grand */
#pdf-container {
    position: relative;
    background: #f0f0f0;
    border-radius: 8px;
    overflow: auto;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
}

#pdf-loading {
    padding: 40px;
    color: #666;
    font-family: 'Montserrat', sans-serif;
}

/*
 * IMPORTANT — NE PAS MODIFIER CE BLOC
 * Le wrapper doit être en position:relative et inline-block
 * pour que la couche d'annotations (#pdf-annotations) soit
 * superposée exactement au canvas. Sans ça les liens ne sont pas cliquables.
 */
#pdf-wrapper {
    position: relative;
    display: inline-block;
}

/* Le PDF est dessiné ici par PDF.js */
#pdf-canvas {
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    border-radius: 4px;
    max-width: 100%;
}

/*
 * IMPORTANT — NE PAS MODIFIER CE BLOC
 * Couche transparente superposée au canvas.
 * pointer-events:none sur le conteneur pour laisser passer les clics,
 * pointer-events:all sur les <a> pour les rendre cliquables.
 */
#pdf-annotations {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
#pdf-annotations a {
    position: absolute;
    pointer-events: all;
    cursor: pointer;
    /* décommenter pour débugger les zones cliquables : */
    /* background: rgba(0, 136, 65, 0.15); */
}


@media (max-width: 768px) {
    #pdf-container { padding: 10px; max-height: 70vh; }
}

/* ─────────────────────────────────────────────
   TEMPLATE PROCÉDURE PDF — LAYOUT + SIDEBAR
───────────────────────────────────────────── */

/* Grille : visionneuse | sidebar modes opératoires */
.procedure-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 30px;
    align-items: start;
}
.procedure-viewer { min-width: 0; } /* évite le débordement du canvas dans la grille */

/* Sidebar modes opératoires */
.procedure-mo {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
}
.mo-title {
    font-size: 14px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #fff !important; background: #0c8948;
    padding: 14px 18px; margin: 0 !important;
}
.mo-list { list-style: none !important; margin: 0 !important; padding: 8px 0 !important; }

.mo-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}
.mo-item:hover,
.mo-item.active { background: #f0f9f4; border-left-color: #0c8948; }

.mo-link {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 8px;
    font-size: 14px !important; color: #333 !important;
    text-decoration: none !important;
    flex: 1; line-height: 1.3;
}
.mo-item.active .mo-link { color: #0c8948 !important; font-weight: 600; }
.mo-link svg { flex-shrink: 0; color: #0c8948; margin-top: 2px; }

.mo-link__text  { display: flex; flex-direction: column; gap: 2px; }
.mo-link__title { font-size: 14px !important; line-height: 1.3; }
.mo-link__desc  { font-size: 12px !important; color: #666; font-weight: 400 !important; line-height: 1.3; }


/* Tablette : sidebar passe sous la visionneuse */
@media (max-width: 900px) {
    .procedure-layout { grid-template-columns: 1fr; gap: 20px; }
    .procedure-sidebar { position: static; }
    #pdf-container { max-height: 65vh; }
}

/* Mobile */
@media (max-width: 540px) {
    .procedure-layout { gap: 16px; }
    #pdf-container { max-height: 60vh; padding: 10px; }
    .mo-title { padding: 12px 14px; }
    .mo-link  { padding: 10px 6px; gap: 6px; }
    .btn-pdf-back { font-size: 13px; margin-bottom: 8px; }
}

/* ─── Grille de cartes procédures ─────────────────────────────────────────── */


.procedure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 8px;
}

.procedure-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    padding: 0;
    text-decoration: none;
    color: inherit;
    box-shadow: 3px 3px 6px 0px #50505040;
    border-top: 3px solid #0c8948;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.procedure-card:hover {
    box-shadow: 4px 6px 16px 0px #50505060;
    transform: translateY(-4px);
    text-decoration: none;
    color: inherit;
}

.procedure-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 14px;
}

.procedure-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #f0faf5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0c8948;
}

.procedure-card__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
    line-height: 1.3;
}

.procedure-card__body {
    flex: 1;
    padding: 0 20px 16px;
    border-top: 1px solid #f0f0f0;
    margin: 0 20px;
    padding: 12px 0 16px;
}

.procedure-card__desc {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.7;
}

.procedure-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #f9fafb;
    border-top: 1px solid #f0f0f0;
    margin-top: auto;
}

.procedure-card__mo-count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0.01em;
}

.procedure-card__arrow {
    font-size: 0.95rem;
    color: #0c8948;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.procedure-card:hover .procedure-card__arrow {
    transform: translateX(5px);
}

@media (max-width: 960px) {
    .procedure-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .procedure-grid { grid-template-columns: 1fr; gap: 14px; }
    .category-description { padding: 14px 16px; gap: 10px; }
    .procedure-card__header { padding: 16px 16px 12px; }
    .procedure-card__body { margin: 0 16px; }
    .procedure-card__footer { padding: 10px 16px; }
}

.shadows-block {
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.07), 0 32px 64px rgba(0,0,0,.05);
}

/* ─────────────────────────────────────────────
   CARTES DIRECTION (page Métiers)
───────────────────────────────────────────── */

.direction-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.direction-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.07);
}

.direction-card:hover {
    border-color: #0c8948;
    box-shadow: 0 8px 32px rgba(12,137,72,.12);
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}

.direction-card__top {
    background: linear-gradient(135deg, #0c8948 0%, #0a7a3e 100%);
    padding: 24px 24px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.direction-card__icon {
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.direction-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.direction-card__body {
    padding: 16px 24px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.direction-card__desc {
    font-size: 13px;
    color: #555;
    line-height: 1.65;
    margin: 0;
}

.direction-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0c8948;
}

.direction-card__footer svg {
    transition: transform 0.2s;
}

.direction-card:hover .direction-card__footer svg {
    transform: translateX(3px);
}

@media (max-width: 960px) {
    .direction-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .direction-grid { grid-template-columns: 1fr; gap: 16px; }
}