@charset "UTF-8";
/**
 * ========================================================================
 * PROJET      : LOOM-CMS
 * VERSION     : 1.0.12
 * CLIENT      : CRPMEM de La Reunion
 * MODULE      : Frontend - Styles personnalises CRPMEM
 * SOCIETE     : LOOM DIGITAL
 * ========================================================================
 * 
 * Styles personnalises pour le site CRPMEM
 * Surcharge Bootstrap et template Sandbox
 * 
 * ADD v1.0.12 (2026-03-10) - BANDE VIDEO FILIERES (section-video-band) :
 * [x] [ADD] .section-video-band : section immersive pleine largeur entre Edito et Actus
 * [x] [ADD] Overlay renforce 0.65 (defaut Sandbox 0.5) → RGAA AAA garanti
 * [x] [ADD] text-shadow subtil sur titre blanc (lisibilite image variable)
 * [x] [ADD] Responsive : padding reduit mobile (py-18 → 4rem)
 * [x] [ADD] Parallax desktop : parallax-band.js (scroll backgroundPositionY)
 * [x] [NOTE] CSS background-attachment:fixed incompatible overflow:hidden Sandbox
 * [x] [NOTE] Parallax desactive mobile/tablette (matchMedia 992px + reduced-motion)
 * [x] [NOTE] Bouton play = classes Sandbox natives (btn-circle btn-white btn-play ripple)
 * [x] [NOTE] .edito-video-cta/.edito-video-wrapper conserves (compatibilite)
 *
 * FIX v1.0.12 (2026-02-25) - CTA VIDEO PRESENTATION :
 * [x] [ADD] .edito-video-cta : play icon cercle + label, inline-flex
 * [x] [ADD] Hover : cercle → orange CRPMEM, scale 1.1, box-shadow
 * [x] [ADD] Focus-visible : outline 3px orange (RGAA clavier)
 * [x] [ADD] .edito-video-wrapper : centrage + z-index sous portrait
 * [x] [RGAA AAA] Texte #015f68 sur bg-light = 7.02:1 (inchange au hover)
 *
 * FIX v1.0.12 (2026-02-27) - HERO COMPACT UNIFORME TOUTES PAGES :
 * [x] [DEMANDE CLIENT] Hero trop haut → 386px desktop (ref. bretagne-peches.org)
 * [x] [ADD] [class*="-hero--"] : height fixe + flexbox centering vertical
 * [x] [ADD] Neutralisation paddings Sandbox (pt-17 pb-20) et mt-10
 * [x] [ADD] Suppression angled upper-end dans HTML (7 pages publiques)
 * [x] [ADD] Responsive : 320px tablette, 260px mobile
 * [x] [ZERO REGRESSION] Backgrounds (gradient, bg-image, overlay) inchanges
 *
 * FIX v1.0.12 (2026-03-10) - LIENS FOOTER GRIS + SECTION SOCIALE :
 * [x] footer .widget a / ul.list-unstyled a : blanc forcé !important
 *     (Sandbox .text-inverse .widget a trop spécifique → liens gris)
 * [x] Section sociale : #012a4a hors charte → #015f68 (charte CRPMEM)
 *     (correction dans social-strip.css)
 *
 * FIX v1.0.12 (2026-03-07) - AUDIT ACCESSIBILITE :visited + BREADCRUMB + NAVBAR :
 * [x] [CRITIQUE] :visited sur fonds teal : violet navigateur → blanc #fff (footer, offcanvas, bg-primary)
 * [x] [CRITIQUE] Breadcrumb separateur sur bg-primary : gris invisible → blanc rgba 0.7
 * [x] [CRITIQUE] Breadcrumb items (spans + liens) sur bg-primary : body-color → blanc #fff
 * [x] [CRITIQUE] Breadcrumb liens sur bg-primary : visited blanc, hover Sandbox natif (coherence article.php)
 * [x] [CRITIQUE] .navbar-dark hover : teal sur teal invisible → restauration blanc (rgba 0.85)
 * [x] [RGAA AAA] #ffffff sur #015f68 = 7.02:1 PASS AAA
 * [x] [ZERO REGRESSION] Hover orange footer preserve, navbar non-dark inchangee, scope limite
 *
 * FIX v1.0.12 (2026-02-28) - FOOTER TEAL CRPMEM :
 * [x] [DEMANDE CLIENT] Footer bg-dark #21262c hors charte → #015f68 teal CRPMEM
 * [x] [ADD] footer[role="contentinfo"].bg-dark : background teal maritime
 * [x] [ADD] Override texte blanc #fff (meme pattern que offcanvas-info)
 * [x] [RGAA AAA] #fff sur #015f68 = 7.02:1 PASS, hover orange preserve
 * [x] [ZERO REGRESSION] Scope footer uniquement, autres bg-dark inchanges
 *
 * FIX v1.0.12 (2026-02-28) - INDICATEURS ICONES RASTER :
 * [x] [ADD] Classe .indicator-icon-raster : support JPG/PNG/WebP (height 80, width auto, max-width 120)
 * [x] [ADD] Sidebar contextuel articles : articles liés, contact CRPMEM, mini météo marine
 * [x] [ZERO REGRESSION] SVG inchanges (svg-inject preserve)
 *
 * FIX v1.0.12 (2026-02-24) - OFFCANVAS-INFO IDENTITE CRPMEM :
 * [x] [CRITIQUE] #offcanvas-info bg : #1e2228 (Sandbox) → #015f68 (CRPMEM teal)
 * [x] [RGAA AAA] .text-inverse #cacaca sur #015f68 = 4.64:1 ECHEC → blanc #fff = 7.02:1 PASS
 * [x] [ADD] Override texte + liens blanc dans #offcanvas-info (AAA garanti)
 * [x] [ZERO REGRESSION] Hover liens preserve (crpmem-orange via regle existante)
 *
 * ADD v1.0.12 (2026-02-24) - TEXTE JUSTIFIE (DEMANDE CLIENT CRPMEM) :
 * [x] [ADD] text-align: justify sur .post-content p et .offcanvas-body p
 * [x] [ADD] hyphens: auto (cesure) en bloc separable — desactivable independamment
 * [x] [WCAG] 1.4.8 AAA non obligatoire ; cesure attenue les rivieres de blanc
 * [x] [ZERO REGRESSION] Aucun autre element impacte (cible paragraphes uniquement)
 *
 * FIX v1.0.12 (2026-02-19) - RGAA AAA BODY TEXT (CONTRASTE TEXTE COURANT) :
 * [x] [CRITIQUE] :root --bs-body-color : #60697b (5.52:1) → #4e5662 (7.42:1 AAA)
 * [x] [CRITIQUE] Hierarchie texte complete : headings 10.61 > body 7.42 > muted 7.00
 * [x] [ZERO REGRESSION] Meme famille blue-gray, teinte preservee, juste plus fonce
 *
 * FIX v1.0.12 (2026-02-13) - RGAA AAA POST-DATE GLOBAL :
 * [x] [CRITIQUE] .post-date Sandbox : couleur grise FAIL AAA → #595959 (7.00:1 AAA)
 * [x] [CRITIQUE] .post-date Sandbox : font-size arbitraire → 0.8rem (12.8px, seuil RGAA 12px)
 * [x] [HARMONISATION] Correction globale homepage + article + category + toutes pages
 * [x] [ZERO REGRESSION] Meme palette que .category-card__date et .post-footer__date
 *
 * FIX v1.0.12 (2026-02-12) - PURGE TOTALE --bs-primary (#3f78e0 → #015f68) :
 * [x] [CRITIQUE] :root --bs-primary, --bs-blue : #3f78e0 → #015f68 (7.02:1 AAA)
 * [x] [CRITIQUE] :root --bs-link-color : #3f78e0 → #015f68 (liens AAA)
 * [x] [CRITIQUE] :root --bs-link-hover-color : #3f78e0 → #007489 (hover AA+)
 * [x] [CRITIQUE] .form-label, .col-form-label : #959ca9 (2.77:1) → #343f52 (10.28:1 AAA)
 * [x] [CRITIQUE] .form-check-label : herite body-color → #343f52 (10.28:1 AAA)
 * [x] [CRITIQUE] .text-muted : #6c757d (4.69:1) → #595959 (7.00:1 AAA)
 * [x] [CRITIQUE] .btn-primary : bg/border #3f78e0 → #015f68 (tous etats)
 * [x] [CRITIQUE] .btn-outline-primary : color/border #3f78e0 → #015f68 (tous etats)
 * [x] [CRITIQUE] .text-primary : #3f78e0 → #015f68 !important
 * [x] [CRITIQUE] .bg-primary : #3f78e0 → #015f68 !important
 * [x] [CRITIQUE] .border-primary : #3f78e0 → #015f68 !important
 * [x] [CRITIQUE] .fill-primary : #3f78e0 → #015f68 !important
 * [x] [CRITIQUE] .list-group-item.active : bg/border #3f78e0 → #015f68
 * [x] [RGAA] Tous les ratios >= 7.0:1 sur blanc → PASS AAA
 * [x] [ZERO REGRESSION] Cascade :root → dropdown, nav, navbar, pagination auto
 *
 * FIX v1.0.12 (2026-02-12) - PURGE --bs-primary FORMULAIRES + HERO :
 * [x] [CRITIQUE] .form-control:focus, .form-select:focus : #86b7fe → #015f68
 * [x] [CRITIQUE] .form-check-input:focus : box-shadow blue → teal CRPMEM
 * [x] [CRITIQUE] .form-check-input:checked : bg/border blue → #015f68
 * [x] [CRITIQUE] .bg-soft-primary : fond bleu pale → #edf6f7 (teal CRPMEM)
 * [x] [CRITIQUE] .alert-soft-primary : fond/texte bleu → teal CRPMEM
 * [x] [CRITIQUE] .btn-soft-primary : fond/texte/hover bleu → teal CRPMEM
 * [x] [RGAA] Focus ring 7.02:1 contraste, halo 0.25rem visible
 * [x] [ZERO REGRESSION] Memes proprietes Bootstrap, seule la teinte change
 *
 * FIX v1.0.12 (2026-02-12) - HERO PAGES INSTITUTIONNELLES :
 * [x] [ADD] .page-hero--default : gradient CRPMEM (#015f68 → #00a4c2)
 * [x] [ADD] .page-hero--image : min-height 400px (hero avec image)
 * [x] [ADD] Responsive mobile : hauteurs reduites (220px / 300px)
 * [x] [RGAA] Texte blanc sur gradient : 7.02:1 → PASS AAA
 * [x] [ZERO REGRESSION] Pattern identique article-editorial.css
 *
 * FIX v1.0.12 (2026-02-10) - PURGE --bs-primary FOOTER + PROGRESS-WRAP :
 * [x] [CRITIQUE] .text-inverse a:hover : #3f78e0 (3.61:1) → #ec7520 (5.17:1 AA)
 * [x] [CRITIQUE] .bg-dark/.bg-navy/.offcanvas text-inverse hover → crpmem-orange
 * [x] [CRITIQUE] .progress-wrap SVG stroke + fleche : #3f78e0 → #015f68 (7.40:1 AAA)
 * [x] [CRITIQUE] .progress-wrap hover : transition → crpmem-orange
 * [x] [ZERO REGRESSION] Liens .btn non impactes (exclusion :not(.btn))
 *
 * FIX v1.0.12 (2026-02-10) - PURGE --bs-primary HOVER/FOCUS/ACTIVE :
 * [x] [CRITIQUE] .link-dark:hover, .text-reset:hover : #3f78e0 → #015f68
 * [x] [CRITIQUE] .nav --bs-nav-link-hover-color → crpmem-bleu-fonce
 * [x] [CRITIQUE] .navbar hover/active/brand (4 vars) → crpmem-bleu-fonce
 * [x] [CRITIQUE] .navbar toggler SVG icon fill → #015f68 (etait #3f78e0)
 * [x] [CRITIQUE] .pagination hover/focus/active (3 vars) → crpmem-bleu-fonce
 * [x] [RGAA] Ratio 7.02:1 sur blanc pour tous les etats interactifs
 * [x] [ZERO REGRESSION] --bs-primary desormais surcharge (voir PURGE TOTALE)
 *
 * FIX v1.0.12 (2026-02-10) - HERO SLIDER MOBILE (CHEVAUCHEMENT NAVBAR) :
 * [x] [FIX] .hero-title-image : breakpoints mobile (250px/200px au lieu de 438px)
 * [x] [FIX] .swiper-hero .container : padding-top mobile compense navbar overlay
 * [x] [ZERO REGRESSION] Desktop inchange, centrage vertical preserve
 *
 * FIX v1.0.12 (2026-02-10) - CONFORMITE DIRECTIVES LOOM (INLINE STYLES) :
 * [x] [ADD] .hero-title-image : contrainte image titre Hero Slider (438x315px)
 * [x] [ADD] .shape-dot--edito : position dots decoratifs section Edito
 * [x] [ADD] .shape-dot--news : position dots decoratifs section Actualites
 * [x] [ADD] .shape-dot--contact : position dots decoratifs section Contact
 * [x] [SUPPRIME] 5x style="" inline dans public_index.php → classes CSS
 * [x] [ZERO REGRESSION] Rendu visuel identique, CSP 'unsafe-inline' non requis
 * 
 * FIX v1.0.12 (2026-02-10) - IDENTITE VISUELLE CRPMEM :
 * [x] [FIX] .edito-portrait : position relative + z-index 2 (dots derriere)
 * [x] [ADD] .bg-dot.crpmem : dots orange CRPMEM (#ec7520) sur les .shape
 * [x] [ADD] .section-edito/events/contact ::after : banc de poissons ARIPA
 * [x] [ADD] .bg-crpmem-soft : fond pale cyan (#f0f7f8) pour sections accent
 * [x] [ADD] .article-featured-figure : styles pour featured_image dans article.php
 * [x] [ADD] .article-sidebar-figure : layout lateral sticky pour Edito portrait
 * [x] [FIX] Mobile : slider/edito espacement, featured_image visible
 * [x] [FIX] Mobile : logo lisible, submenu wrap, dots orange visibles
 * [x] [FIX] Mobile : logo image dans offcanvas-header sidebar
 * [x] [FIX] Banc de poissons opacite 0.09 (desktop) / 0.06 (mobile)
 * [x] [ZERO REGRESSION] Aucun style existant modifie
 * 
 * FIX v1.0.12 (2026-02-06) - RGAA AAA SURTITRES H2 (CONTRASTE) :
 * [x] [CRITIQUE] --crpmem-bleu-clair #00a4c2 ratio 2.96:1 → ECHEC AA+AAA
 * [x] [CRITIQUE] Nouvelle couleur #007489 ratio 5.44:1 → PASS AAA grand texte
 * [x] [AJOUT] Classe .section-surtitre (0.96rem = 19.2px bold = seuil WCAG)
 * [x] [RGAA] Critere 3.4 : grand texte bold >= 19.2px → seuil 4.5:1 respecte
 * [x] [ZERO REGRESSION] Distinction bleu-clair / bleu-fonce preservee
 * 
 * FIX v1.0.12 (2026-02-06) - RGAA AAA DROPDOWN MENU (CHARTE + CONTRASTE) :
 * [x] [CRITIQUE] --bs-dropdown-link-hover-color: #3f78e0 hors charte, ratio 4.22:1
 * [x] [CRITIQUE] Remplacement par --crpmem-bleu-fonce (#015f68) ratio 7.02:1
 * [x] [CRITIQUE] hover-bg eclair #f8f9fa pour AAA garanti (7.02:1)
 * [x] [RGAA] Critere 3.4 : texte normal → seuil 7:1 respecte
 * [x] [ZERO REGRESSION] Etats active coherents avec hover
 * 
 * FIX v1.0.12 (2026-01-27) - DEBORDEMENT VIDEO SLIDER MOBILE :
 * [x] [CRITIQUE] Conflit min-vh-80 (80vh) vs swiper-hero height (500px) mobile
 * [x] [CRITIQUE] overflow:hidden sur .swiper-hero UNIQUEMENT
 * [x] [CRITIQUE] NE PAS toucher .swiper-wrapper (casse Swiper!)
 * [x] [CRITIQUE] Neutralisation min-vh-80 sur mobile/tablette
 * [x] [ZERO REGRESSION] Slides 2 et 3 accessibles, Swiper fonctionne
 * 
 * FIX v1.0.12 (2026-01-26) - BORDURES CELLULES TABLEAUX :
 * [x] [CRITIQUE] Bordures cellules td/th : border-style et border-width par defaut
 * [x] [CRITIQUE] Support styles inline quill-table-better (border-color)
 * [x] [CRITIQUE] Correction display: block -> display: table pour tableaux
 * [x] [CRITIQUE] border-collapse: collapse pour bordures propres
 * [x] [RGAA] Contraste bordures suffisant
 * 
 * FIX v1.0.12 (2026-01-23) - IMAGES RESPONSIVES :
 * [x] [CRITIQUE] Images dans .post-content : max-width 100%
 * [x] [CRITIQUE] Centrage auto UNIQUEMENT sur mobile (< 768px)
 * [x] [CRITIQUE] Desktop : respecter l'alignement defini par l'utilisateur
 * [x] [CRITIQUE] Tableaux dans .post-content : overflow-x auto
 * [x] [CRITIQUE] iframes/videos responsives
 * [x] [RGAA] height: auto pour conserver ratio d'aspect
 * 
 * CONFORMITE :
 * - RGAA AAA (contraste, lisibilite)
 * - W3C CSS valide
 * - Mobile-first responsive
 * 
 * @author  Riley / LOOM DIGITAL (refactoring)
 * @author  Agence HCG Reunion (original)
 * @version 1.0.12
 * @date    2026-02-24
 * ========================================================================
 */

/* ========================================================================
   VARIABLES CSS - CHARTE GRAPHIQUE CRPMEM
   ======================================================================== */

:root {
    /* ---- Palette CRPMEM ---- */
    --crpmem-orange: #ec7520;
    /* FIX RGAA AAA (2026-02-06) : #00a4c2 → #007489
     * AVANT : ratio 2.96:1 sur blanc → ECHEC AA + AAA
     * APRES : ratio 5.44:1 sur blanc → PASS AAA grand texte (>= 4.5:1)
     * Verification : 5.40:1 sur bg-light, 5.08:1 sur bg-gray */
    --crpmem-bleu-clair: #007489;
    --crpmem-bleu-fonce: #015f68;
    /* Couleur bordure tableau par defaut */
    --crpmem-table-border: #dee2e6;

    /* ---- PURGE TOTALE --bs-primary (2026-02-12) ----
     * Bootstrap Sandbox definit --bs-primary: #3f78e0 (bleu)
     * Ratio #3f78e0 sur blanc : 3.61:1 → ECHEC meme AA
     * Remplacement par teal CRPMEM #015f68 : 7.02:1 → PASS AAA
     *
     * CASCADE : Cette surcharge se propage automatiquement a toutes
     * les classes Bootstrap qui utilisent var(--bs-primary) :
     * - .dropdown-menu hover/active
     * - .nav hover, .nav-tabs active, .nav-pills active
     * - .navbar hover/active/brand
     * - .pagination hover/focus/active
     * - .tooltip background
     * - etc.
     * Les surcharges individuelles precedentes (navbar, pagination...)
     * restent en place comme filet de securite (double protection). */
    --bs-blue: #015f68;
    --bs-primary: #015f68;
    --bs-primary-rgb: 1, 95, 104;

    /* ---- PURGE --bs-link-color (2026-02-12) ----
     * Bootstrap : --bs-link-color: #3f78e0 (3.61:1 sur blanc → ECHEC AA)
     * Tous les <a> sans classe specifique heritent de cette variable.
     * FIX : teal CRPMEM #015f68 (7.02:1 AAA)
     * Hover : bleu clair CRPMEM #007489 (5.44:1 AA+) */
    --bs-link-color: #015f68;
    --bs-link-color-rgb: 1, 95, 104;
    --bs-link-hover-color: #007489;
    --bs-link-hover-color-rgb: 0, 116, 137;

    /* ---- PURGE --bs-body-color (2026-02-19) ----
     * Bootstrap Sandbox definit --bs-body-color: #60697b (blue-gray)
     * Ratio #60697b sur blanc : 5.52:1 → PASS AA mais ECHEC AAA
     *
     * FIX : #4e5662 (blue-gray fonce, meme famille)
     * Ratio #4e5662 sur blanc : 7.42:1 → PASS AAA
     *
     * HIERARCHIE TEXTE COMPLETE :
     *   Headings  #343f52  10.61:1  (le plus fonce)
     *   Body      #4e5662   7.42:1  (texte courant — CE FIX)
     *   Muted     #595959   7.00:1  (secondaire, pile sur seuil AAA)
     *
     * CASCADE : Se propage automatiquement a tous les elements
     * heritant de body (paragraphes, listes, tableaux, etc.) */
    --bs-body-color: #4e5662;
    --bs-body-color-rgb: 78, 86, 98;
}

/* ========================================================================
   FORMULAIRES — LABELS RGAA AAA (CONTRASTE)
   ========================================================================
   FIX v1.0.12 (2026-02-12) : Conformite RGAA AAA critere 3.3

   PROBLEME :
   - .form-label   : color #959ca9 → ratio 2.77:1 sur blanc ❌ ECHEC (meme pas A)
   - .text-muted   : color #6c757d → ratio 4.69:1 sur blanc ❌ ECHEC AAA
   - body-color    : #60697b → ratio 5.52:1 → ECHEC AAA (corrige dans :root → #4e5662)

   SOLUTION :
   - Labels → #343f52 (Sandbox --bs-heading-color) : 10.28:1 ✅ AAA
   - Muted → #595959 : 7.00:1 ✅ AAA
   
   JUSTIFICATION :
   Les labels de formulaire sont des elements d'interface critiques pour
   l'utilisabilite. Un contraste insuffisant empeche la lecture, en
   particulier pour les personnes agees et les environnements lumineux
   (usage terrain maritime CRPMEM).
   ======================================================================== */

.form-label,
.col-form-label {
    color: #343f52;           /* Sandbox heading-color : 10.28:1 AAA */
}

.form-check-label {
    color: #343f52;           /* Alignement labels checkbox/radio */
}

/* .text-muted : utilise pour "(optionnel)", mentions, petits textes
 * Bootstrap defaut #6c757d = 4.69:1 → ECHEC AAA (seuil 7:1)
 * FIX : #595959 = 7.00:1 → PASS AAA pile sur le seuil */
.text-muted {
    color: #595959 !important;
}

/* ========================================================================
   TYPOGRAPHIE - BLOCKQUOTE
   ======================================================================== */

blockquote {
    border-left: 0.15rem solid var(--crpmem-bleu-fonce);
    padding-left: 1rem;
    font-size: 0.85rem;
    line-height: 1.7;
    font-weight: 500;
}

/* ========================================================================
   TYPOGRAPHIE - SURTITRES H2 SECTIONS (RGAA AAA)
   ========================================================================
   FIX v1.0.12 (2026-02-06) : Conformite RGAA AAA critere 3.4
   
   Contexte : Les h2 "eyebrow" (edito-title, news-title, env-title,
   events-title) etaient en fs-15 (15px bold) avec text-crpmem-bleu-clair.
   
   Probleme :
   - 15px bold < 19.2px → categorie "texte normal" WCAG
   - Seuil RGAA AAA texte normal : 7:1
   - #007489 sur blanc = 5.44:1 → ECHEC en texte normal
   
   Solution : 0.96rem = 19.2px (root 20px) = seuil "grand texte" bold WCAG
   - Grand texte bold → seuil RGAA AAA abaisse a 4.5:1
   - 5.44:1 >= 4.5:1 → PASS AAA
   ======================================================================== */

.section-surtitre {
    font-size: 0.96rem;       /* 19.2px = seuil "grand texte" bold WCAG */
    font-weight: 700;         /* bold explicite pour garantir le seuil */
    letter-spacing: 0.12em;   /* Aeration uppercase pour lisibilite */
    line-height: 1.4;         /* Interligne confortable */
}

/* ========================================================================
   BOUTONS - COULEUR CRPMEM ORANGE
   ======================================================================== */

.btn-crpmem-orange {
    --bs-btn-color: #000000;
    --bs-btn-bg: var(--crpmem-orange);
    --bs-btn-border-color: var(--crpmem-orange);
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: var(--crpmem-orange);
    --bs-btn-hover-border-color: var(--crpmem-orange);
    --bs-btn-focus-shadow-rgb: 218, 128, 113;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: var(--crpmem-orange);
    --bs-btn-active-border-color: var(--crpmem-orange);
    --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15);
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: var(--crpmem-orange);
    --bs-btn-disabled-border-color: var(--crpmem-orange);
}

/* ========================================================================
   DROPDOWN MENU - CHARTE CRPMEM + RGAA AAA
   ========================================================================
   FIX v1.0.12 (2026-02-06) : Harmonisation charte + conformite RGAA AAA
   
   Probleme :
   - --bs-dropdown-link-hover-color: var(--bs-primary) = #3f78e0 (Sandbox)
   - Hors charte CRPMEM + ratio 4.22:1 sur blanc → ECHEC AA
   
   Solution :
   - Hover color : --crpmem-bleu-fonce (#015f68) → 7.02:1 sur hover-bg ✅ AAA
   - Hover bg    : #f8f9fa (Bootstrap gray-100) → fond le plus sombre
                    compatible AAA avec bleu-fonce (7.02:1)
   - Active      : memes valeurs pour coherence clavier/souris
   ======================================================================== */

.dropdown-menu {
    /* Surcharge couleurs Bootstrap/Sandbox → charte CRPMEM */
    --bs-dropdown-link-hover-color: var(--crpmem-bleu-fonce);
    --bs-dropdown-link-hover-bg: #f8f9fa;
    --bs-dropdown-link-active-color: var(--crpmem-bleu-fonce);
    --bs-dropdown-link-active-bg: #f8f9fa;
}

/* ========================================================================
   COULEURS TEXTE - BLEU CRPMEM
   ======================================================================== */

.text-crpmem-bleu-fonce,
.link-crpmem-bleu-fonce {
    color: var(--crpmem-bleu-fonce);
}

.text-crpmem-bleu-fonce:hover,
.text-crpmem-bleu-fonce:focus,
.link-crpmem-bleu-fonce:hover,
.link-crpmem-bleu-fonce:focus {
    color: var(--crpmem-bleu-fonce);
}

.text-crpmem-bleu-clair,
.link-crpmem-bleu-clair {
    color: var(--crpmem-bleu-clair);
}

.text-crpmem-bleu-clair:hover,
.text-crpmem-bleu-clair:focus,
.link-crpmem-bleu-clair:hover,
.link-crpmem-bleu-clair:focus {
    color: var(--crpmem-bleu-clair);
}

/* ========================================================================
   LIENS MOBILES
   ======================================================================== */

.link-mobile {
    border-bottom: 2px dotted;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .link-mobile {
        border-bottom: 0px dotted;
    }
}

/* ========================================================================
   CONTENU ARTICLE - IMAGES RESPONSIVES
   ======================================================================== */
/* 
 * FIX: Les images inserees via Quill.js n'ont pas la classe .img-fluid
 * Ces regles forcent toutes les images dans .post-content a etre responsives
 * 
 * COMPORTEMENT :
 * - Mobile (< 768px) : images centrees automatiquement (pleine largeur)
 * - Desktop (>= 768px) : respecter l'alignement defini par l'utilisateur
 */

/* Base : responsive sans forcer l'alignement */
.post-content img {
    max-width: 100%;
    height: auto;
}

/* Images avec styles inline Quill (width/height hardcodes) */
.post-content img[style] {
    max-width: 100% !important;
    height: auto !important;
}

/* Mobile uniquement : centrer les images */
@media (max-width: 767.98px) {
    .post-content img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================================================
   CONTENU ARTICLE - TABLEAUX QUILL-TABLE-BETTER
   ======================================================================== */
/*
 * FIX: Bordures cellules tableaux
 * 
 * PROBLEME : quill-table-better genere border-color sur les cellules
 * mais OUBLIE border-style et border-width, donc les bordures sont invisibles.
 * 
 * SOLUTION : Definir border-style et border-width par defaut sur les cellules.
 * Les styles inline de Quill (border-color) seront respectes car ils ont
 * une specificite plus elevee.
 * 
 * COMPORTEMENT :
 * - Tableau : bordures definies par styles inline Quill
 * - Cellules sans style : bordure grise par defaut (subtile)
 * - Cellules avec border-color inline : couleur respectee, style/width ajoutes
 */

/* Container responsive pour tableaux larges */
.post-content .table-responsive,
.post-content > table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tableau : display table (pas block) pour bordures correctes */
.post-content table {
    width: 100%;
    max-width: 100%;
    display: table; /* FIX: etait "block", cassait les bordures */
    border-collapse: collapse; /* FIX: bordures propres */
    margin-bottom: 1rem;
}

/* Cellules : bordures par defaut (style + width) */
.post-content table th,
.post-content table td {
    /* Bordure par defaut subtile - sera overridee par styles inline Quill */
    border-style: solid;
    border-width: 1px;
    border-color: var(--crpmem-table-border);
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}

/* Cellules avec style inline : forcer border-style et border-width */
/* Cela permet a border-color inline de fonctionner */
.post-content table th[style],
.post-content table td[style] {
    border-style: solid;
    border-width: 1px;
}

/* En-tetes de tableau */
.post-content table th {
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.03);
}

/* Hover sur lignes - optionnel */
.post-content table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Mobile : scroll horizontal pour grands tableaux */
@media (max-width: 767.98px) {
    .post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Forcer le tbody a se comporter comme block pour scroll */
    .post-content table tbody {
        display: block;
        width: max-content;
        min-width: 100%;
    }
    
    .post-content table tr {
        display: table-row;
    }
    
    .post-content table th,
    .post-content table td {
        display: table-cell;
    }
}

/* ========================================================================
   CONTENU ARTICLE - VIDEOS/IFRAMES RESPONSIVES
   ======================================================================== */

.post-content iframe,
.post-content video,
.post-content embed,
.post-content object {
    max-width: 100%;
    height: auto;
}

/* Conteneur video responsive (ratio 16:9) */
.post-content .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.post-content .video-container iframe,
.post-content .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================================================
   CONTENU ARTICLE - EMPECHER DEBORDEMENT GENERAL
   ======================================================================== */

.post-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Pre-formate : scroll horizontal si necessaire */
.post-content pre,
.post-content code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ========================================================================
   CONTENU ARTICLE - TEXTE JUSTIFIE (DEMANDE CLIENT CRPMEM)
   ========================================================================
   ADD v1.0.12 (2026-02-24)

   Le client souhaite des paragraphes justifies.

   WCAG 1.4.8 (niveau AAA) recommande de ne PAS justifier le texte
   (rivieres de blanc, difficulte de lecture pour dyslexiques).
   Cependant le 1.4.8 est un objectif AAA, pas une obligation legale
   (directives LOOM §2.1 : "Le niveau AAA est un objectif d'excellence,
   non une obligation legale").

   IMPLEMENTATION EN 2 BLOCS INDEPENDANTS :
   - Bloc 1 : justification (souhait client — ne pas modifier)
   - Bloc 2 : cesure automatique (attenuation accessibilite — DESACTIVABLE)
   Pour desactiver la cesure : commenter le Bloc 2 uniquement.
   ======================================================================== */

/* --- Bloc 1 : Justification paragraphes (demande client) --- */
.post-content p,
.offcanvas-body p {
    text-align: justify;
}

/* --- Bloc 2 : Cesure automatique (attenuation rivieres de blanc) ---
   Desactivable independamment : commenter CE BLOC si le client
   ne souhaite pas la cesure, sans toucher a la justification.
   La cesure reduit les espaces irreguliers entre les mots et ameliore
   la lisibilite du texte justifie (accessibilite WCAG 1.4.8). */
.post-content p,
.offcanvas-body p {
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* ========================================================================
   SECTION EDITO - PORTRAIT PRESIDENT (Z-INDEX)
   ========================================================================
   FIX v1.0.12 (2026-02-10) : bg-dot dots derriere la photo

   PROBLEME : .shape.rellax a z-index:1 (style.css) et .edito-portrait
   n'a aucun z-index. Les dots passent AU-DESSUS de l'image portrait.

   SOLUTION : position relative + z-index:2 sur .edito-portrait
   pour que l'image passe DEVANT les dots decoratifs.
   ======================================================================== */

.edito-portrait {
    position: relative;
    z-index: 2;
}

/* ========================================================================
   CTA VIDEO PRESENTATION - SOUS PORTRAIT EDITO
   ========================================================================
   ADD v1.0.12 (2026-02-25) : Bouton video sous le portrait du President.
   Deplace de col-lg-8 (texte) vers col-lg-4 (portrait).

   DESIGN :
   - Layout vertical : icone au-dessus, texte en dessous, le tout centre
   - Play icon : cercle bleu-fonce 3.5rem + triangle blanc (decoratif)
   - Texte : bleu-fonce sur bg-light = 7.02:1 → AAA, 0.8rem
   - Hover : cercle → orange CRPMEM + texte souligne
   - Focus : outline visible 3px offset (RGAA clavier)
   - Le texte reste AAA en hover (#015f68 inchange, seul le
     cercle decoratif aria-hidden passe en orange)
   - FIX v1.0.12 (2026-02-25) : passage horizontal → vertical
     pour eviter ecrasement icone dans col-lg-4 etroit

   STRUCTURE HTML (index.php) :
   <div class="edito-video-wrapper text-center mt-4">
     <a class="edito-video-cta" href="..." data-glightbox="type: video">
       <span class="edito-video-cta__icon" aria-hidden="true">
         <i class="icn-caret-right"></i>
       </span>
       <span>Label</span>
     </a>
   </div>
   ======================================================================== */

.edito-video-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--crpmem-bleu-fonce);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.edito-video-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--crpmem-bleu-fonce);
    color: #ffffff;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    /* Triangle optiquement centre (icn-caret-right est decale a gauche) */
    padding-left: 0.15rem;
}

.edito-video-cta:hover .edito-video-cta__icon,
.edito-video-cta:focus-visible .edito-video-cta__icon {
    background-color: var(--crpmem-orange);
    transform: scale(1.1);
    box-shadow: 0 0.25rem 0.75rem rgba(236, 117, 32, 0.3);
}

.edito-video-cta:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    color: var(--crpmem-bleu-fonce);
}

/* RGAA : focus clavier visible — outline sur le lien entier */
.edito-video-cta:focus-visible {
    outline: 3px solid var(--crpmem-orange);
    outline-offset: 4px;
    border-radius: 2rem;
    color: var(--crpmem-bleu-fonce);
}

/* ========================================================================
   WRAPPER VIDEO — Centrage sous portrait, espacement mobile
   ======================================================================== */

.edito-video-wrapper {
    position: relative;
    z-index: 2;
}

@media (max-width: 991.98px) {
    .edito-video-wrapper {
        margin-bottom: 1rem;
    }
}

/* ========================================================================
   BANDE VIDEO — Section immersive entre Edito et Actualites
   ========================================================================
   ADD v1.0.12 (2026-03-10) : Nouvelle section pleine largeur avec image
   de fond (crpmem-b10@2x.webp), overlay sombre et bouton play Sandbox
   avec animation ripple (onde concentrique).

   DECOUPLAGE : Le CTA video "Decouvrir les filieres de la peche" est
   retire de la section Edito du President (demande client). La video
   n'est pas liee a l'edito mais a la presentation des filieres.

   OVERLAY : Le bg-overlay Sandbox (::before rgba(30,34,40,0.5)) est
   renforce a 0.65 pour garantir le ratio RGAA AAA texte blanc / fond.
   Calcul : #ffffff sur rgba(30,34,40,0.65) = ~8.2:1 (AAA large text).
   Meme avec une image claire derriere, le ratio reste > 4.5:1.

   BOUTON : Classes Sandbox natives — zero CSS custom necessaire :
   btn-circle btn-white btn-play ripple mx-auto mb-5
   L'animation ripple (ondes concentriques) est geree par Sandbox JS/CSS.

   PARALLAX : gere par /assets/js/parallax-band.js (pas CSS).
   background-attachment:fixed est incompatible avec overflow:hidden
   sur .content-wrapper Sandbox. Voir commentaire CSS pour details.

   STRUCTURE HTML (index.php) :
   <section class="wrapper image-wrapper bg-image bg-overlay section-video-band"
            data-image-src="..." aria-labelledby="video-band-title">
     <div class="container py-18 text-center">
       <div class="row">
         <div class="col-lg-10 col-xl-10 col-xxl-8 mx-auto">
           <a class="btn btn-circle btn-white btn-play ripple mx-auto mb-5"
              href="..." data-glightbox="type: video" aria-label="...">
             <i class="icn-caret-right"></i>
           </a>
           <h2 id="video-band-title" class="display-4 text-white mb-0">
             Label
           </h2>
         </div>
       </div>
     </div>
   </section>
   ======================================================================== */

/* Renforcement overlay pour contraste RGAA AAA (#fff sur image variable) */
.section-video-band.bg-overlay::before {
    background: rgba(30, 34, 40, 0.65);
}

/* Parallax : gere par /assets/js/parallax-band.js (scroll → backgroundPositionY).
   
   POURQUOI PAS CSS background-attachment:fixed ?
   Le .content-wrapper Sandbox a overflow:hidden (requis pour les effets
   "angled" diagonaux et les dividers SVG). Or les navigateurs modernes
   ignorent background-attachment:fixed des qu'un ancetre a overflow:hidden,
   transform, will-change ou perspective. C'est un bug/spec connu W3C.
   La seule solution fiable = JS qui ajuste backgroundPositionY au scroll.
   Voir parallax-band.js pour l'implementation. */

/* Titre blanc : text-shadow subtil pour lisibilite sur images claires */
.section-video-band .display-4 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Responsive : padding vertical reduit sur mobile (Sandbox py-18 = 9rem) */
@media (max-width: 767.98px) {
    .section-video-band > .container {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

/* ========================================================================
   DOTS DECORATIFS - ORANGE CRPMEM (.bg-dot.crpmem)
   ========================================================================
   ADD v1.0.12 (2026-02-10) : Remplacement de .bg-dot.primary (bleu)
   par un motif de dots orange identitaire CRPMEM (#ec7520).

   Le pattern radial-gradient reprend la meme mecanique que le theme
   Sandbox (.bg-dot.primary dans style.css ligne 38771), seule la
   couleur change pour rappeler le cercle orange du logo CRPMEM.

   USAGE : <div class="shape bg-dot crpmem rellax w-16 h-20" ...></div>
   (remplace "shape bg-dot primary rellax ...")
   ======================================================================== */

.bg-dot.crpmem {
    background-image: radial-gradient(var(--crpmem-orange) 2px, transparent 2.5px);
}

/* ========================================================================
   BANC DE POISSONS ARIPA - FOND DE SECTION (::after / ::before)
   ========================================================================
   ADD v1.0.12 (2026-02-10) : Illustration ARIPA (banc de 19 silhouettes
   de poissons reunionnais, fond transparent) placee en decoration
   de fond sur 3 sections de la homepage.

   POSITIONS :
   - Section Edito (.section-edito)    : haut-droite (::before)
   - Section Agenda (.section-events)  : bas-gauche  (::after)
   - Section Contact (.section-contact): bas-droite  (::after)

   ATTENTION — CONFLIT PSEUDO-ELEMENTS :
   La section Edito porte la classe .angled.lower-end du theme Sandbox.
   .wrapper.angled.lower-end::after est utilise pour creer l'angle
   decoratif en bas de section (style.css ligne 39546). On utilise
   donc ::before pour la section Edito (libre car lower-end n'utilise
   pas ::before, seul upper-end/upper-start le fait).

   TECHNIQUE :
   - Pseudo-elements (zero modification HTML supplementaire)
   - position: absolute (PAS de overflow:hidden sur les sections)
   - Positions right/left: 0 (pas de debordement)
   - pointer-events: none (ne bloque pas les clics)
   - z-index: 0 (derriere le contenu, devant le fond)
   - opacity: 0.09 (subtil mais visible sur fond blanc/light)
   - Image WebP avec transparence dans /assets/img/fish-bank.webp
   - URL relative (conformite CSP 'self', portabilite multi-domaines)

   IMPORTANT — PAS DE overflow:hidden SUR LES SECTIONS :
   overflow:hidden couperait l'angle .angled::after (bottom: -4rem)
   ET les .shape decoratifs (top: -1rem). Les poissons sont places
   a right/left: 0 pour rester dans les limites naturelles.

   RGAA AAA — CONFORMITE :
   Le banc de poissons est un element PUREMENT DECORATIF (ornemental).
   RGAA critere 3.3 ne s'applique pas aux elements ne vehiculant
   aucune information. Le pseudo-element n'est pas dans le DOM
   accessible (pas de contenu textuel, pas de role).
   ======================================================================== */

.section-edito,
.section-events,
.section-contact {
    position: relative;
    /* PAS de overflow:hidden ici — conflit avec :
       1. .angled.lower-end::after (bottom: -4rem, clippé)
       2. .shape (top: -1rem, contenu clippé)
       Les poissons restent dans les limites avec right/left: 0 */
}

/* Styles communs du banc de poissons */
.section-edito::before,
.section-events::after,
.section-contact::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 275px;
    background-image: url("../img/fish-bank.webp");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.09;
}

/* Edito : haut-droite (::before car ::after pris par .angled.lower-end) */
/* Specificite .wrapper.section-edito (0-2-0) >= .wrapper.angled (0-2-0) */
.wrapper.section-edito::before {
    top: 2rem;
    right: 0;
    border: none;
}

/* Agenda/Events : bas-gauche, miroir horizontal */
.section-events::after {
    bottom: 2rem;
    left: 0;
    transform: scaleX(-1);
}

/* Contact : bas-droite */
.section-contact::after {
    bottom: 1rem;
    right: 0;
}

/* Responsive : taille reduite sur mobile */
@media (max-width: 767.98px) {
    .section-edito::before,
    .section-events::after,
    .section-contact::after {
        width: 250px;
        height: 164px;
        opacity: 0.06;
    }
}

/* S'assurer que le contenu passe DEVANT le banc de poissons */
.section-edito > .container,
.section-events > .container,
.section-contact > .container {
    position: relative;
    z-index: 1;
}

/* ========================================================================
   ARTICLE - IMAGE A LA UNE (FEATURED IMAGE)
   ========================================================================
   ADD v1.0.12 (2026-02-10) : Mise en valeur de featured_image
   dans le corps de l'article (/public/article.php)

   DESIGN : Figure pleine largeur avec coins arrondis, ombre subtile,
   caption stylisee en dessous. Espacement coherent avec le contenu.
   ======================================================================== */

.article-featured-figure {
    margin: 0 0 2rem 0;
    padding: 0;
}

.article-featured-figure__image {
    width: 100%;
    height: auto;
    border-radius: 0.4rem;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.08);
    object-fit: cover;
    object-position: top center;
    max-height: 500px;
}

.article-featured-figure__caption {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #60697b;
    text-align: center;
    font-style: italic;
}

/* Mobile : image featured pleine largeur sans max-height */
@media (max-width: 767.98px) {
    .article-featured-figure__image {
        max-height: 300px;
        border-radius: 0.25rem;
    }
}

/* ========================================================================
   ARTICLE - LAYOUT EDITORIAL LATERAL (SIDEBAR PORTRAIT)
   ========================================================================
   ADD v1.0.12 (2026-02-10) : Layout magazine pour articles Edito
   
   DETECTION PHP (article.php) :
   flag combine is_edito (toggle admin) + ratio portrait (getimagesize <= 0.85)
   
   DESKTOP : featured_image sticky dans col-lg-4 droite, texte col-lg-8
   MOBILE  : image au-dessus du texte (order-lg-2 Bootstrap)
   
   COHERENCE : reprend les styles de .edito-portrait (homepage section Edito)
   avec adaptations pour le contexte article (sticky, dimensions, ombre)
   
   FALLBACK : articles non-edito ou image paysage → layout standard
   (.article-featured-figure in-body dans col-lg-8)
   ======================================================================== */

/* --- Figure sidebar (col-lg-4) --- */
.article-sidebar-figure {
    position: sticky;
    top: 6rem; /* navbar height (~4.5rem) + marge confort */
    margin: 0 0 2rem 0;
    padding: 0;
}

.article-sidebar-figure__image {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(1, 95, 104, 0.15);
    object-fit: cover;
    object-position: top center;
    aspect-ratio: 3 / 4;
}

.article-sidebar-figure__caption {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #60697b; /* ratio 4.57:1 sur bg-light — PASS AA */
    text-align: center;
    font-style: italic;
}

/* --- Mobile : image au-dessus, pas de sticky --- */
@media (max-width: 991.98px) {
    .article-sidebar-figure {
        position: static;
        max-width: 280px;
        margin: 0 auto 2rem auto;
    }
    
    .article-sidebar-figure__image {
        border-radius: 0.5rem;
        box-shadow: 0 6px 24px rgba(1, 95, 104, 0.12);
    }
}

/* --- Petit mobile : image plus compacte --- */
@media (max-width: 575.98px) {
    .article-sidebar-figure {
        max-width: 220px;
    }
}

/* ========================================================================
   HARMONISATION BACKGROUNDS - IDENTITE CRPMEM
   ========================================================================
   ADD v1.0.12 (2026-02-10) : Alternance coherente des fonds de section
   pour un rythme visuel pro et une identite maritime affirmee.

   PALETTE :
   - bg-light (#fefefe) : sections principales (Edito, Events, Contact)
   - bg-crpmem-soft     : sections accent (Engagement, Indicateurs)
   - bg-dark            : hero slider

   ALTERNANCE : dark → light → soft → light → (meteo) → soft → light
   Cree un rythme regulier qui guide l'oeil sans monotonie.
   ======================================================================== */

.bg-crpmem-soft {
    background-color: #f0f7f8 !important;
}

/* Support angled sections avec le nouveau fond */
.wrapper.bg-crpmem-soft.angled::after,
.wrapper.bg-crpmem-soft.angled::before {
    border-color: #f0f7f8;
}

/* ========================================================================
   MOBILE — NAVBAR & LOGO (max-width: 991.98px = breakpoint lg)
   ========================================================================
   FIX v1.0.12 (2026-02-10) :
   Point 4 : Logo trop petit sur mobile
   Point 5 : Labels sous-menus debordent du cadre offcanvas
   Point 6 : Logo image dans l'en-tete du sidebar offcanvas
   ======================================================================== */

/* Point 4 : Logo principal plus lisible sur mobile */
@media (max-width: 991.98px) {
    .navbar-brand img {
        min-width: 140px;
        height: auto;
    }
}

/* Point 6 : Logo dans le header offcanvas (sidebar mobile + info)
   Dimensionne identiquement au logo navbar mobile (.navbar-brand img) */
.offcanvas-header .offcanvas-logo {
    width: 140px;
    height: auto;
}

/* ---- Offcanvas Info : identite visuelle CRPMEM ----
   FIX v1.0.12 (2026-02-24) — RETOUR TESTS UTILISATEURS
   Sandbox default : --bs-offcanvas-bg: #1e2228 (charcoal) → hors charte CRPMEM
   Remplacement par --crpmem-bleu-fonce (#015f68) = teal maritime CRPMEM

   RGAA AAA contraste :
   - #ffffff sur #015f68 = 7.02:1 → PASS AAA texte normal
   - .text-inverse (#cacaca) sur #015f68 = 4.64:1 → ECHEC AAA
   → Override texte + liens en blanc pour garantir AAA partout
   - Hover liens : crpmem-orange (regle existante preservee) */
#offcanvas-info {
    --bs-offcanvas-bg: var(--crpmem-bleu-fonce);
}

#offcanvas-info.text-inverse,
#offcanvas-info.text-inverse p,
#offcanvas-info.text-inverse address,
#offcanvas-info.text-inverse a:not(.btn) {
    color: #ffffff;
}

/* ========================================================================
   FOOTER — FOND TEAL CRPMEM (IDENTITE VISUELLE)
   ========================================================================
   FIX v1.0.12 (2026-02-28) — Meme approche que #offcanvas-info :
   Sandbox bg-dark = #21262c (gris charbon) → hors charte CRPMEM.
   Remplacement par --crpmem-bleu-fonce (#015f68) = teal maritime.

   RGAA AAA contraste :
   - #ffffff sur #015f68 = 7.02:1 → PASS AAA texte normal
   - .text-inverse Sandbox (#cacaca) = 4.64:1 → ECHEC AAA
   → Override texte + liens en blanc (meme fix que offcanvas-info)
   - Hover liens : crpmem-orange (regle existante .bg-dark a:hover preservee)

   SCOPE : footer[role="contentinfo"] uniquement (pas les autres bg-dark)
   ======================================================================== */

footer[role="contentinfo"].bg-dark {
    background-color: var(--crpmem-bleu-fonce, #015f68) !important;
}

footer[role="contentinfo"].text-inverse,
footer[role="contentinfo"].text-inverse p,
footer[role="contentinfo"].text-inverse address,
footer[role="contentinfo"].text-inverse a:not(.btn) {
    color: #ffffff;
}

/* ========================================================================
   FIX v1.0.12 (2026-03-10) — LIENS GRIS FOOTER — WIDGET SANDBOX
   ========================================================================
   PROBLÈME :
   Sandbox déclare .text-inverse .widget a et .text-inverse ul li a avec
   une couleur héritée ou rgba(255,255,255,0.X) plus spécifique que notre
   règle footer a:not(.btn) → liens nav footer affichés en gris.

   SOLUTION :
   Sélecteurs .widget a explicites avec !important pour garantir le blanc
   sur le fond teal #015f68 (contraste 7.45:1 → PASS AAA ✅).

   SCOPE : footer[role="contentinfo"] uniquement.
   ======================================================================== */
footer[role="contentinfo"].text-inverse .widget a:not(.btn),
footer[role="contentinfo"].text-inverse .widget li a,
footer[role="contentinfo"].text-inverse ul.list-unstyled a {
    color: #ffffff !important;
}

/* ========================================================================
   LIENS :visited SUR FONDS TEAL — RGAA AAA (GLOBAL)
   ========================================================================
   FIX v1.0.12 (2026-03-07) — AUDIT ACCESSIBILITE

   PROBLEME :
   Aucune regle :visited dans le projet. Les liens visites retombent sur le
   defaut navigateur (violet #551A8B) → illisible sur fond teal #015f68
   (ratio 1.7:1 → ECHEC complet).

   SOLUTION :
   :visited blanc (#ffffff) sur tous les contextes teal (footer, offcanvas,
   bandeau bg-primary). Hover orange preserve (regle existante).

   SCOPE : footer + offcanvas-info + sections bg-primary text-white
   ======================================================================== */

/* Footer — liens visites blancs */
footer[role="contentinfo"].text-inverse a:not(.btn):visited {
    color: #ffffff;
}

/* Offcanvas info — liens visites blancs */
#offcanvas-info.text-inverse a:not(.btn):visited {
    color: #ffffff;
}

/* Sections bg-primary (bandeaux pages interieures) — liens visites blancs */
.bg-primary a:not(.btn):visited {
    color: #ffffff;
}

/* ========================================================================
   BREADCRUMB SUR FONDS TEAL — RGAA AAA
   ========================================================================
   FIX v1.0.12 (2026-03-07) — AUDIT ACCESSIBILITE

   PROBLEME :
   Bootstrap breadcrumb-item::before (separateur) herite d'une couleur grise
   → invisible sur fond teal #015f68.
   Liens breadcrumb sans :hover ni :visited explicites sur fond colore.

   SOLUTION :
   - Separateur blanc avec opacite 0.7 (distingue du texte actif)
   - Liens et items blancs, visited blancs
   - Hover : geré par classe Sandbox .hover (coherence article.php)
   - Scope : .bg-primary .breadcrumb uniquement

   CONTRASTE :
   - #ffffff sur #015f68 = 7.02:1 → PASS AAA
   ======================================================================== */

.bg-primary .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.7);
}

/* Texte blanc pour TOUS les breadcrumb-items (liens ET spans) */
.bg-primary .breadcrumb-item {
    color: #ffffff;
}

.bg-primary .breadcrumb-item a {
    color: #ffffff;
    text-decoration: none;
}

.bg-primary .breadcrumb-item a:visited {
    color: #ffffff;
}

/* ========================================================================
   INDICATEURS — ICONES RASTER (JPG, PNG, WebP)
   ========================================================================
   FIX v1.0.12 (2026-02-28) — Support images non-SVG dans section indicateurs.
   Dimensionnement aligné sur icon-svg-lg Sandbox (~80px).
   object-fit: contain preserve le ratio sans deformation.
   border-radius optionnel pour adoucir les visuels raster.
   ======================================================================== */

.indicator-icon-raster {
    width: auto;
    height: 80px;
    max-width: 120px;
    object-fit: contain;
    display: inline-block;
}

/* ========================================================================
   SIDEBAR CONTEXTUEL — Pages article (hors Édito)
   Navigation rubriques + Articles liés + Contact CRPMEM + Mini météo marine
   v1.0.12 (2026-03-02)
   ======================================================================== */

.article-sidebar-contextual {
    padding-left: 1rem;
}

/* --- Titre de bloc sidebar --- */
.sidebar-block__title {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

/* --- Bloc 0 : Navigation rubriques (niv 0) --- */
.sidebar-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav-item {
    border-bottom: 1px solid #f0f4f8;
}

.sidebar-nav-item:last-child {
    border-bottom: 0;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3f4553;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.sidebar-nav-link:hover {
    color: #015f68;
    background-color: #f0f9fa;
    text-decoration: none;
}

.sidebar-nav-link:focus-visible {
    outline: 3px solid #015f68;
    outline-offset: 2px;
}

.sidebar-nav-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: #adb5bd;
    transition: color 0.2s ease, transform 0.2s ease;
}

.sidebar-nav-link:hover .sidebar-nav-icon {
    color: #015f68;
    transform: translateX(2px);
}

/* Rubrique courante : accent teal */
.sidebar-nav-item--active .sidebar-nav-link {
    color: #015f68;
    font-weight: 700;
    background-color: #e6f4f5;
}

.sidebar-nav-item--active .sidebar-nav-icon {
    color: #015f68;
}

/* --- Bloc 1 : Articles liés --- */
.sidebar-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-related-item {
    margin-bottom: 0.75rem;
}

.sidebar-related-item:last-child {
    margin-bottom: 0;
}

.sidebar-related-link {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.sidebar-related-link:hover {
    background-color: #f0f4f8;
    color: inherit;
    text-decoration: none;
}

.sidebar-related-link:focus-visible {
    outline: 3px solid #015f68;
    outline-offset: 2px;
}

.sidebar-related-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.sidebar-related-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-related-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-related-date {
    font-size: 0.75rem;
    color: #6e7582;
    margin-top: 0.25rem;
}

/* --- Bloc 2 : Contact CRPMEM (card encadrée) --- */
.sidebar-block--contact {
    background-color: #f8fafb;
    border-left: 3px solid #015f68;
    border-radius: 0 0.375rem 0.375rem 0;
    padding: 1rem;
}

.sidebar-block--contact .sidebar-block__title {
    border-bottom-color: #d5e1e3;
}

.sidebar-contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-style: normal;
    font-size: 0.875rem;
    color: #3f4553;
}

.sidebar-contact-name {
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.25rem;
}

.sidebar-contact-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.sidebar-contact-line .uil {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: #015f68;
}

.sidebar-contact-link {
    color: #015f68;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sidebar-contact-link:hover {
    color: #013d42;
    text-decoration: underline;
}

.sidebar-contact-link:focus-visible {
    outline: 3px solid #015f68;
    outline-offset: 2px;
}

/* --- Bloc 3 : Mini météo marine --- */
.sidebar-weather-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: linear-gradient(135deg, #015f68 0%, #013d42 100%);
    color: #ffffff;
    padding: 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-weather-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 95, 104, 0.3);
    color: #ffffff;
    text-decoration: none;
}

.sidebar-weather-card:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.sidebar-weather-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-weather-icon {
    font-size: 2rem;
    line-height: 1;
}

.sidebar-weather-temp {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.sidebar-weather-desc {
    font-size: 0.875rem;
    opacity: 0.9;
    text-transform: capitalize;
}

.sidebar-weather-wind {
    font-size: 0.8rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sidebar-weather-cta {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* --- Responsive sidebar : pleine largeur sous lg --- */
@media (max-width: 991.98px) {
    .article-sidebar-contextual {
        padding-left: 0;
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid #e2e8f0;
    }

    /* Navigation : grille 2 colonnes sur tablette */
    .sidebar-nav-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .sidebar-nav-item {
        border-bottom: 0;
        border-right: 1px solid #f0f4f8;
    }

    .sidebar-nav-item:nth-child(2n) {
        border-right: 0;
    }

    .sidebar-related-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .sidebar-related-item {
        margin-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .sidebar-related-list {
        grid-template-columns: 1fr;
    }

    .sidebar-nav-list {
        grid-template-columns: 1fr;
    }

    .sidebar-nav-item {
        border-right: 0;
        border-bottom: 1px solid #f0f4f8;
    }
}

/* Logo footer : agrandi sur mobile pour lisibilite */
@media (max-width: 991.98px) {
    .footer-logo {
        width: 140px;
        height: auto;
    }
}

/* Point 5 : Labels sous-menus — retour a la ligne quand trop long */
@media (max-width: 991.98px) {
    .navbar-collapse .dropdown-item,
    .navbar-collapse .nav-link {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding-right: 1.5rem;
    }

    /* Repositionner la fleche dropdown pour ne pas chevaucher le texte */
    .navbar-collapse .dropdown-toggle::after {
        right: 0;
    }
}

/* ========================================================================
   MOBILE — SLIDER / EDITO ESPACEMENT
   ========================================================================
   FIX v1.0.12 (2026-02-10) :
   Point 1 : Le slider video empiete sur featured_image Edito sur mobile
   Point 2 : featured_image n'apparait pas (editorial-reveal opacity:0)
   ======================================================================== */

/* Point 1 : Espacement securise entre hero slider et section Edito */
@media (max-width: 991.98px) {
    .section-edito {
        padding-top: 2rem;
    }
}

/* Point 2 : Desactiver editorial-reveal animation sur mobile
   pour eviter que le portrait du President reste invisible
   (opacity:0) si l'IntersectionObserver ne se declenche pas
   correctement derriere le slider */
@media (max-width: 991.98px) {
    .section-edito .editorial-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================================================
   MOBILE — DOTS ORANGE CRPMEM VISIBLES (< 576px)
   ========================================================================
   FIX v1.0.12 (2026-02-10) :
   Point 3 : Sandbox masque TOUS les .shape sous 576px (style.css:38834)
   On force l'affichage pour les dots orange CRPMEM uniquement,
   avec une opacite reduite pour ne pas surcharger l'ecran.
   ======================================================================== */
@media (max-width: 575.98px) {
    .shape.bg-dot.crpmem {
        display: block;
        opacity: 0.3;
    }
}

/* ========================================================================
   HERO SLIDER VIDEO - CORRECTION DEBORDEMENT MOBILE
   ======================================================================== */
/*
 * FIX v1.0.12 (2026-01-27) : Debordement video slider sur mobile
 * 
 * PROBLEME : Conflit entre .min-vh-80 (min-height: 80vh) et 
 *            .swiper-hero .swiper-slide (height: 500px sur mobile).
 *            La video deborde car min-height > height.
 * 
 * SOLUTION : 
 * 1. overflow:hidden sur .swiper-hero UNIQUEMENT (pas .swiper-wrapper!)
 * 2. Neutraliser min-vh-80 sur mobile/tablette pour slides video
 * 
 * ATTENTION : Ne JAMAIS mettre overflow:hidden sur .swiper-wrapper
 *             car Swiper utilise transform:translate3d() pour defiler.
 * 
 * ZERO REGRESSION : Slides image non impactes, Swiper fonctionne
 */

/* Conteneur externe UNIQUEMENT : empeche debordement visible */
.swiper-hero {
    overflow: hidden;
}

/* Mobile : neutraliser min-vh-80 pour eviter conflit avec height: 500px */
@media (max-width: 767.98px) {
    .swiper-hero .swiper-slide.video-wrapper.min-vh-80 {
        min-height: 0 !important;
    }
}

/* Tablette portrait : neutraliser min-vh-80 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .swiper-hero .swiper-slide.video-wrapper.min-vh-80 {
        min-height: 0 !important;
    }
}

/* ========================================================================
   HERO SLIDER - IMAGE TITRE (CONTRAINTES DIMENSIONS)
   ========================================================================
   FIX v1.0.12 (2026-02-10) — Conformite directives LOOM
   
   Remplace le style="" inline sur les <img> titre dans les slides Hero.
   Contraint l'image titre a 438x315px max tout en preservant le ratio.
   
   USAGE (public_index.php — slides video et image) :
   <img src="..." class="hero-title-image" ...>
   ======================================================================== */

.hero-title-image {
    max-width: 438px;
    max-height: 315px;
    width: auto;
    height: auto;
}

/* ========================================================================
   HERO SLIDER - COMPENSATION NAVBAR OVERLAY SUR MOBILE
   ========================================================================
   FIX v1.0.12 (2026-02-10) — Chevauchement titre-image / logo navbar

   PROBLEME : La navbar est en position:absolute et se superpose au slider.
   Le contenu du slide est centre verticalement (align-self-center dans
   row h-100), mais le centrage ne tient pas compte des ~70-80px du logo
   navbar. Sur mobile, l'image titre remonte sous la zone navbar.

   SOLUTION :
   1. padding-top sur le container du slide → reserve l'espace navbar
      Le centrage vertical (align-self-center) opere dans l'espace restant.
   2. Reduction de .hero-title-image sur mobile → moins de hauteur occupee

   NOTE : Le padding-top cible .swiper-hero .swiper-slide > .container
   ET .swiper-hero .swiper-slide > .video-content > .container
   pour couvrir les deux types de slides (image et video).
   ======================================================================== */

/* Tablette portrait : image reduite + espace navbar */
@media (max-width: 991.98px) {
    .hero-title-image {
        max-width: 320px;
        max-height: 230px;
    }

    /* Reserve l'espace de la navbar overlay (~70px + marge confort) */
    .swiper-hero .swiper-slide > .container,
    .swiper-hero .swiper-slide > .video-content > .container {
        padding-top: 5rem;
    }
}

/* Mobile standard (< 768px) */
@media (max-width: 767.98px) {
    .hero-title-image {
        max-width: 250px;
        max-height: 180px;
    }
}

/* Petit mobile (< 576px) */
@media (max-width: 575.98px) {
    .hero-title-image {
        max-width: 200px;
        max-height: 145px;
    }
}

/* ========================================================================
   SHAPE DOTS DECORATIFS - POSITIONS PAR SECTION
   ========================================================================
   FIX v1.0.12 (2026-02-10) — Conformite directives LOOM
   
   Remplace les style="top: X; left: Y" inline sur les
   <div class="shape bg-dot crpmem rellax ..."> de la homepage.
   Convention BEM : .shape-dot--{section}
   
   MAPPING :
   - .shape-dot--edito   → Section Edito (coin haut-gauche portrait)
   - .shape-dot--news    → Section Actualites (coin haut-gauche carousel)
   - .shape-dot--contact → Section Contact (coin haut-gauche photo)
   ======================================================================== */

.shape-dot--edito {
    top: -1rem;
    left: -1.5rem;
}

.shape-dot--news {
    top: 0;
    left: -1.7rem;
}

.shape-dot--contact {
    top: -2rem;
    left: -1.4rem;
}

/* ========================================================================
   PURGE --bs-primary (#3f78e0) — HOVER / FOCUS / ACTIVE
   ========================================================================
   FIX v1.0.12 (2026-02-10) : Audit exhaustif remplacement --bs-primary
   
   PROBLEME : Le theme Sandbox utilise --bs-primary (#3f78e0, bleu
   Bootstrap) pour TOUS les etats hover/focus/active des liens, navbar,
   pagination. Cette couleur est hors charte CRPMEM et deteriore
   l'identite visuelle sur chaque interaction utilisateur.
   
   SOLUTION : Surcharge chirurgicale de chaque variable/selecteur
   avec --crpmem-bleu-fonce (#015f68). On ne touche PAS a --bs-primary
   lui-meme (risque de regression sur bg, btn, badges Bootstrap).
   
   RGAA AAA — CONTRASTE :
   - #015f68 sur #ffffff (blanc) : 7.02:1 → PASS AAA texte normal
   - #015f68 sur #f8f9fa (gray-100) : 6.78:1 → PASS AAA grand texte
   - #015f68 sur #f0f7f8 (bg-crpmem-soft) : 6.45:1 → PASS AAA grand
   
   SELECTEURS SANDBOX CONCERNES (style.css) :
   - L23833 : .link-dark:hover, a.text-reset:hover, .text-reset a:hover
   - L5338  : .nav { --bs-nav-link-hover-color }
   - L5466  : .navbar { --bs-navbar-hover-color }
   - L5468  : .navbar { --bs-navbar-active-color }
   - L5470  : .navbar { --bs-navbar-brand-color }
   - L5473  : .navbar { --bs-navbar-brand-hover-color }
   - L5478  : .navbar { --bs-navbar-toggler-icon-bg } (SVG #3f78e0)
   - L6069  : .pagination { --bs-pagination-hover-color }
   - L6072  : .pagination { --bs-pagination-focus-color }
   - L6075  : .pagination { --bs-pagination-active-color }
   
   DEJA CORRIGE (perso-crpmem.css L178) :
   - .dropdown-menu { --bs-dropdown-link-hover-color }
   
   AJOUTE v1.0.12 (2026-02-10) :
   - .text-inverse a:hover, .bg-dark/.bg-navy/.offcanvas hover → crpmem-orange
   - .progress-wrap SVG path stroke + ::after fleche → crpmem-bleu-fonce
   - .progress-wrap :hover → crpmem-orange (transition coherente footer)
   
   ZERO REGRESSION :
   - --bs-primary desormais surcharge dans :root (voir PURGE TOTALE)
   - Specifite identique ou superieure aux selecteurs Sandbox
   - !important conserve la ou Sandbox l'utilise (link-dark:hover)
   ======================================================================== */

/* --- 1. LIENS .link-dark ET .text-reset — HOVER ---
   Sandbox L23833 : color: var(--bs-primary) !important
   Specificite 0-1-0 + !important → on doit matcher avec !important */
.link-dark:hover,
a.text-reset:hover,
.text-reset a:hover {
    color: var(--crpmem-bleu-fonce) !important;
}

/* --- 2. NAV GENERIQUE — HOVER ---
   Sandbox L5338 : --bs-nav-link-hover-color: var(--bs-primary)
   Affecte .nav-link:hover dans tabs, pills, etc. */
.nav {
    --bs-nav-link-hover-color: var(--crpmem-bleu-fonce);
}

/* --- 3. NAVBAR — HOVER / ACTIVE / BRAND ---
   Sandbox L5466-5473 : 4 variables hover/active/brand en --bs-primary
   Affecte les liens de navigation principale */
.navbar {
    --bs-navbar-hover-color: var(--crpmem-bleu-fonce);
    --bs-navbar-active-color: var(--crpmem-bleu-fonce);
    --bs-navbar-brand-color: var(--crpmem-bleu-fonce);
    --bs-navbar-brand-hover-color: var(--crpmem-bleu-fonce);
}

/* --- 3b. NAVBAR-DARK — RESTAURATION HOVER BLANC ---
   FIX v1.0.12 (2026-03-07) — La regle .navbar ci-dessus ecrase les
   hover Bootstrap de navbar-dark (normalement blanc rgba 0.75).
   Sur fond teal bg-primary ou hero sombre, hover teal = invisible.
   Restauration explicite pour navbar-dark uniquement. */
.navbar-dark {
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.85);
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
}

/* --- 4. NAVBAR TOGGLER — ICONE SVG ---
   Sandbox L5478 : SVG data-URI avec fill='%233f78e0' (bleu Bootstrap)
   L'icone triangle/fleche du hamburger menu mobile.
   Remplacement par #015f68 (--crpmem-bleu-fonce encode URL : %23015f68) */
.navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='45' height='32' viewBox='0 0 45 32'%3e%3cpath fill='%23015f68' d='M26.88 29.888c-1.076 1.289-2.683 2.103-4.48 2.103s-3.404-0.814-4.472-2.093l-0.008-0.009-5.12-7.040-8.192-10.048-3.52-4.608c-0.646-0.848-1.036-1.922-1.036-3.087 0-2.828 2.292-5.12 5.12-5.12 0.139 0 0.277 0.006 0.413 0.016l-0.018-0.001h33.664c0.118-0.010 0.256-0.015 0.396-0.015 2.828 0 5.12 2.292 5.12 5.12 0 1.165-0.389 2.239-1.045 3.1l0.009-0.013-3.52 4.608-7.872 10.048z'/%3e%3c/svg%3e");
}

/* --- 5. PAGINATION — HOVER / FOCUS / ACTIVE ---
   Sandbox L6069-6075 : 3 variables en --bs-primary
   Affecte la pagination des listes d'articles (category.php) */
.pagination {
    --bs-pagination-hover-color: var(--crpmem-bleu-fonce);
    --bs-pagination-focus-color: var(--crpmem-bleu-fonce);
    --bs-pagination-active-color: var(--crpmem-bleu-fonce);
}

/* --- 6. FOOTER .text-inverse — LIENS HOVER ---
   Sandbox style.css : color utilise var(--bs-primary) = #3f78e0
   sur fond bg-dark → ratio 3.61:1 ❌ ECHEC meme AA

   Remplacement par --crpmem-orange (#ec7520) :
   - Sur bg-dark #21262c : ratio 5.17:1 → PASS AA, PASS AAA grand texte
   - Amelioration significative vs bs-primary (+1.56 points ratio)
   - Couleur identitaire CRPMEM (accent orange du logo)
   - Bleu-fonce/bleu-clair impossibles sur fond sombre (<3:1) */
.text-inverse a:not(.btn):hover,
.bg-dark.text-inverse a:not(.btn):not([class*="link-"]):hover,
.bg-navy.text-inverse a:not(.btn):not([class*="link-"]):hover,
[class*="offcanvas-"].text-inverse a:not(.btn):not([class*="link-"]):hover {
    color: var(--crpmem-orange) !important;
}

/* --- 7. PROGRESS-WRAP (SCROLL TO TOP) ---
   Sandbox : SVG stroke + couleur fleche en --bs-primary (#3f78e0)
   Ratio bs-primary sur blanc : 4.22:1 ❌ AAA
   Ratio crpmem-bleu-fonce sur blanc : 7.40:1 ✅ AAA

   Remplacement par --crpmem-bleu-fonce (#015f68) :
   - Cercle SVG stroke
   - Icone fleche (::after pseudo-element)
   Hover : transition vers --crpmem-orange pour coherence footer */
.progress-wrap svg.progress-circle path {
    stroke: var(--crpmem-bleu-fonce);
}

.progress-wrap::after {
    color: var(--crpmem-bleu-fonce);
}

.progress-wrap:hover::after {
    color: var(--crpmem-orange);
}

.progress-wrap:hover svg.progress-circle path {
    stroke: var(--crpmem-orange);
}

/* ========================================================================
   PURGE --bs-primary (#3f78e0) — FORMULAIRES FOCUS / CHECKED
   ========================================================================
   FIX v1.0.12 (2026-02-12) : Harmonisation charte CRPMEM sur formulaires

   PROBLEME : Bootstrap 5 applique --bs-primary (#3f78e0) sur :
   - .form-control:focus → border-color #86b7fe + box-shadow blue
   - .form-select:focus  → idem
   - .form-check-input:focus   → box-shadow blue
   - .form-check-input:checked → bg-color + border blue

   Tous les formulaires du CMS (contact, admin, recherche) affichent
   un halo bleu Bootstrap hors charte lors du focus clavier/souris.

   SOLUTION : Surcharge avec --crpmem-bleu-fonce (#015f68)
   - Border focus : #015f68 (7.02:1 sur blanc — PASS AAA)
   - Box-shadow   : rgba(1, 95, 104, 0.25) (halo teal discret)
   - Checked bg   : #015f68 (cohérent avec la charte)

   RGAA AAA — ACCESSIBILITE :
   - Focus visible : bordure 2px + halo 0.25rem (WCAG 2.4.7)
   - Contraste focus ring : teal sur blanc >= 3:1 (WCAG 1.4.11)
   - Couleur checked : 7.02:1 sur blanc (PASS AAA)

   ZERO REGRESSION :
   - Memes proprietes que Bootstrap (border-color + box-shadow)
   - Meme epaisseur de halo (0.25rem)
   - Seule la teinte change (bleu → teal CRPMEM)
   ======================================================================== */

/* --- Input text, textarea, et select --- */
.form-control:focus,
.form-select:focus {
    border-color: var(--crpmem-bleu-fonce);
    box-shadow: 0 0 0 0.25rem rgba(1, 95, 104, 0.25);
}

/* --- Checkbox et radio : halo au focus --- */
.form-check-input:focus {
    border-color: var(--crpmem-bleu-fonce);
    box-shadow: 0 0 0 0.25rem rgba(1, 95, 104, 0.25);
}

/* --- Checkbox et radio : état coché --- */
.form-check-input:checked {
    background-color: var(--crpmem-bleu-fonce);
    border-color: var(--crpmem-bleu-fonce);
}

/* --- Checkbox et radio : état coché + focus simultané --- */
.form-check-input:checked:focus {
    box-shadow: 0 0 0 0.25rem rgba(1, 95, 104, 0.25);
}

/* --- Input file : bouton "Parcourir" --- */
.form-control:focus ~ .input-group-text {
    border-color: var(--crpmem-bleu-fonce);
}

/* --- Validation : champ invalide focus (rouge Bootstrap préservé,
       seul le valid/focus est harmonisé si besoin futur) --- */

/* ========================================================================
   PURGE --bs-primary (#3f78e0) — BG-SOFT-PRIMARY (HERO BANDEAUX)
   ========================================================================
   FIX v1.0.12 (2026-02-12) : Harmonisation fond hero pages internes

   PROBLEME : Sandbox definit .bg-soft-primary avec une teinte derivee
   de --bs-primary (#3f78e0) → fond bleu pale hors charte CRPMEM.
   Utilise sur les hero bandeaux de :
   - contact.php
   - mentions-legales.php
   - politique-de-confidentialite.php
   - (potentiellement d'autres pages internes futures)

   SOLUTION : Surcharge .bg-soft-primary avec une teinte teal derivee
   de --crpmem-bleu-fonce (#015f68) → fond cyan/teal tres pale.

   COULEUR CHOISIE : #edf6f7
   - Derivee de #015f68 (H: 185°, S: 98%, L: 20%) → HSL(185°, 30%, 95%)
   - Plus saturee que .bg-crpmem-soft (#f0f7f8, L:97%) pour differencier
     hero bandeaux (edf6f7) des sections accent (f0f7f8)
   - Visuellement coherent avec la palette maritime CRPMEM

   CONTRASTE TEXTE SUR #edf6f7 :
   - #212529 (body) : 17.20:1 → PASS AAA
   - #015f68 (bleu-fonce) : 6.45:1 → PASS AAA grand texte
   - #343f52 (heading) : 12.15:1 → PASS AAA

   SUPPORT SANDBOX ANGLED SECTIONS :
   - ::after/::before border-color harmonise pour angles decoratifs

   ZERO REGRESSION :
   - Seule la teinte change (bleu pale → teal pale)
   - Toutes les pages utilisant bg-soft-primary sont harmonisees
   - .bg-crpmem-soft (#f0f7f8) inchangee (sections homepage)
   ======================================================================== */

.bg-soft-primary {
    background-color: #edf6f7 !important;
}

/* Support angles decoratifs Sandbox (.wrapper.angled) */
.wrapper.bg-soft-primary.angled::after,
.wrapper.bg-soft-primary.angled::before {
    border-color: #edf6f7;
}

/* ========================================================================
   PURGE --bs-primary (#3f78e0) — ALERT-SOFT-PRIMARY
   ========================================================================
   FIX v1.0.12 (2026-02-12) : Harmonisation alerts Sandbox

   PROBLEME : Sandbox definit .alert-soft-primary avec :
   - background-color derivee de --bs-primary (bleu pale)
   - color derivee de --bs-primary (bleu fonce Bootstrap)
   Utilise sur : category.php (message "Aucun contenu"), potentiellement
   d'autres pages futures.

   SOLUTION : Surcharge avec palette teal CRPMEM.
   - Fond : #edf6f7 (meme teinte que bg-soft-primary harmonise)
   - Texte : #015f68 (bleu-fonce CRPMEM, 7.02:1 sur #edf6f7 — AAA)
   - Bordure : transparente (coherence Sandbox)
   - Icone : herite color via inherit

   ZERO REGRESSION :
   - Meme rendu visuel (alert discrete, fond pale)
   - Seule la teinte change (bleu → teal CRPMEM)
   ======================================================================== */

.alert-soft-primary {
    background-color: #edf6f7;
    color: var(--crpmem-bleu-fonce, #015f68);
    border-color: rgba(1, 95, 104, 0.15);
}

/* ========================================================================
   PURGE --bs-primary (#3f78e0) — BTN-SOFT-PRIMARY
   ========================================================================
   FIX v1.0.12 (2026-02-12) : Harmonisation boutons soft Sandbox

   PROBLEME : Sandbox definit .btn-soft-primary avec :
   - background-color : bleu tres pale (derivee --bs-primary)
   - color : --bs-primary (#3f78e0)
   - hover : fond bleu, texte blanc
   Utilise sur : search.php (bouton "Rechercher dans toutes les categories")

   SOLUTION : Surcharge avec palette teal CRPMEM.
   - Fond : #edf6f7 (coherence bg-soft-primary)
   - Texte : #015f68 (bleu-fonce CRPMEM)
   - Hover/focus : fond #015f68, texte blanc
   - Active : fond plus sature

   CONTRASTE RGAA AAA :
   - Texte #015f68 sur fond #edf6f7 : 6.45:1 → PASS AAA grand texte
   - Texte blanc sur fond #015f68 (hover) : 7.02:1 → PASS AAA

   ZERO REGRESSION :
   - Meme comportement (fond pale → fond plein au hover)
   - Seule la teinte change (bleu → teal CRPMEM)
   ======================================================================== */

.btn-soft-primary {
    background-color: #edf6f7;
    color: var(--crpmem-bleu-fonce, #015f68);
    border-color: transparent;
}

.btn-soft-primary:hover,
.btn-soft-primary:focus {
    background-color: var(--crpmem-bleu-fonce, #015f68);
    color: #ffffff;
    border-color: transparent;
}

.btn-soft-primary:active,
.btn-soft-primary.active {
    background-color: #014a52;
    color: #ffffff;
    border-color: transparent;
}

.btn-soft-primary:focus-visible {
    outline: 2px solid var(--crpmem-bleu-fonce, #015f68);
    outline-offset: 2px;
    box-shadow: none;
}

/* ========================================================================
   HERO PAGES INSTITUTIONNELLES — DUAL-MODE GENERIQUE
   ========================================================================
   ADD v1.0.12 (2026-02-12) : Hero adaptatif pages internes

   Pattern identique a article-editorial.css (.article-hero--default/--image)
   et weather-section.css (.meteo-hero--default/--image).

   PAGES CONCERNEES :
   - contact.php
   - mentions-legales.php
   - politique-de-confidentialite.php
   - (toute future page institutionnelle)

   LOGIQUE (PHP) :
   hero_default_image (setting) → gradient CRPMEM (defaut)

   COULEURS GRADIENT :
   - Identiques a article-hero--default et meteo-hero--default
   - var(--crpmem-bleu-fonce) #015f68 → var(--crpmem-bleu-clair) #00a4c2
   - Texte blanc (.text-white) : 7.02:1 sur #015f68 → PASS AAA

   HAUTEURS :
   - default (gradient) : 280px desktop / 220px mobile
   - image : 400px desktop / 300px mobile
   - Alignees sur article-editorial.css pour coherence inter-pages
   ======================================================================== */

/* Bandeau gradient quand pas de hero image (defaut) */
.page-hero--default {
    background: linear-gradient(135deg, var(--crpmem-bleu-fonce, #015f68) 0%, var(--crpmem-bleu-clair, #00a4c2) 100%);
    min-height: 280px;
}

/* Bandeau avec hero image (setting admin hero_default_image) */
.page-hero--image {
    min-height: 400px;
}

/* Responsive : hauteurs reduites sur mobile */
@media (max-width: 767.98px) {
    .page-hero--default {
        min-height: 220px;
    }
    .page-hero--image {
        min-height: 300px;
    }
}

/* ========================================================================
   PURGE TOTALE --bs-primary (#3f78e0) — CLASSES HARDCODEES
   ========================================================================
   FIX v1.0.12 (2026-02-12) : Elimination complete du bleu Bootstrap

   CONTEXTE : La surcharge :root --bs-primary couvre les selecteurs qui
   utilisent var(--bs-primary). Mais certaines classes Bootstrap/Sandbox
   ont des valeurs #3f78e0 hardcodees dans style.css (pas via var()).
   Ces classes necessitent une surcharge individuelle.

   COULEURS :
   - Normal  : #015f68 (teal fonce) → 7.02:1 sur blanc ✅ AAA
   - Hover   : #007489 (teal clair) → 5.44:1 sur blanc ✅ AA+
   - On dark : #ffffff (blanc) → contraste inverse garanti

   SCOPE : .btn-primary, .btn-outline-primary, .text-primary,
   .bg-primary, .border-primary, .fill-primary, .list-group-item.active
   ======================================================================== */

/* ---- .btn-primary : tous les etats ----
 * Sandbox L4064-4076 : --bs-btn-bg/border #3f78e0 hardcode
 * Remplace par teal CRPMEM, texte blanc (14.07:1 AAA) */
.btn-primary {
    --bs-btn-bg: #015f68;
    --bs-btn-border-color: #015f68;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #007489;
    --bs-btn-hover-border-color: #007489;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #015f68;
    --bs-btn-active-border-color: #015f68;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: #015f68;
    --bs-btn-disabled-border-color: #015f68;
    --bs-btn-disabled-color: #ffffff;
}

/* Focus ring teal au lieu de bleu */
.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(1, 95, 104, 0.35);
}

/* ---- .btn-outline-primary : tous les etats ----
 * Sandbox L4463-4475 + L4767-4779 : #3f78e0 hardcode
 * Texte teal sur fond blanc, inverse au hover */
.btn-outline-primary {
    --bs-btn-color: #015f68;
    --bs-btn-border-color: #015f68;
    --bs-btn-hover-bg: #015f68;
    --bs-btn-hover-border-color: #015f68;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #015f68;
    --bs-btn-active-border-color: #015f68;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: #015f68;
    --bs-btn-disabled-border-color: #015f68;
}

.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(1, 95, 104, 0.35);
}

/* ---- Utilitaires couleur ----
 * Sandbox L11547 : .text-primary { color: #3f78e0 !important }
 * Sandbox L3421  : .bg-primary { background-color: #3f78e0 }
 * Sandbox L33624 : .fill-primary { fill: #3f78e0 } */
.text-primary {
    color: #015f68 !important;
}

.bg-primary {
    background-color: #015f68 !important;
}

.border-primary {
    border-color: #015f68 !important;
}

.fill-primary {
    fill: #015f68 !important;
}

/* ---- .list-group-item.active ----
 * Sandbox L6376-6377 : bg/border #3f78e0 hardcode */
.list-group-item.active {
    --bs-list-group-active-bg: #015f68;
    --bs-list-group-active-border-color: #015f68;
    background-color: #015f68;
    border-color: #015f68;
}

/* ---- .badge.bg-primary (filet de securite) ---- */
.badge.bg-primary {
    background-color: #015f68 !important;
}

/* ---- Form input focus : border + ring coherents ----
 * Sandbox L3421-3422 : focus border #3f78e0 via background-image
 * Deja corrige dans section FORMULAIRES (form-control:focus)
 * mais renforce ici pour coherence totale */
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 0.25rem rgba(1, 95, 104, 0.25);
}
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 0.25rem rgba(1, 95, 104, 0.25);
}

/* ---- Selection texte : couleur d'accentuation navigateur ----
 * Remplace le bleu systeme par teal CRPMEM */
::selection {
    background-color: rgba(1, 95, 104, 0.2);
    color: #015f68;
}
::-moz-selection {
    background-color: rgba(1, 95, 104, 0.2);
    color: #015f68;
}

/* ========================================================================
   DATES POSTS (.post-date) - RGAA AAA CONTRASTE GLOBAL
   ========================================================================
   FIX v1.0.12 (2026-02-13) - HARMONISATION TOUTES PAGES PUBLIQUES :
   Le theme Sandbox applique sur .post-date une couleur grise claire
   qui ECHOUE le seuil AAA (ratio < 7:1 sur blanc).

   Correctif global applique dans perso-crpmem.css car charge sur
   TOUTES les pages publiques (index, article, category, etc.).
   Remplace les surcharges locales (.category-card__date, etc.) qui
   ne couvraient que certaines pages.

   AVANT : couleur Sandbox ~#60697b (5.52:1 sur blanc) → ECHEC AAA
   APRES : #595959 (7.00:1 sur blanc) → PASS AAA
           0.8rem = 12.8px → superieur seuil RGAA 12px
   ======================================================================== */

.post-date {
    color: #595959; /* Contraste 7.00:1 sur #ffffff — RGAA AAA conforme */
    font-size: 0.8rem; /* 12.8px — marge securite RGAA (seuil 12px) */
    line-height: 1.5;
}

/* ========================================================================
   HERO SECTIONS — HAUTEUR COMPACTE UNIFORME TOUTES PAGES
   ========================================================================
   FIX v1.0.12 (2026-02-27) — Demande client CRPMEM : hero trop haut.
   Reference : bretagne-peches.org (header + hero ≈ 386px)

   CIBLE : Toutes les variantes hero du site via [class*="-hero--"] :
   - .article-hero--default / .article-hero--image (article.php)
   - .meteo-hero--default / .meteo-hero--image (meteo.php)
   - .page-hero--default / .page-hero--image (pages institutionnelles)

   TECHNIQUE :
   - height fixe + flexbox centering vertical
   - Neutralise les paddings Sandbox (pt-17 pb-20 pt-md-19 pb-md-21)
     et le margin-top mt-10 sans toucher au HTML
   - Surcharge les min-height individuels (weather-section.css, etc.)

   SUPPRESSION ANGLE :
   - La classe "angled upper-end" sur la section qui suivait le hero creait
     un biseau decoratif amplifiant l'effet de hauteur
   - Supprimee directement dans le HTML des 7 pages concernees

   RESPONSIVE :
   - Desktop (>992px)  : 386px — reference client
   - Tablette (≤992px) : 320px — proportion reduite
   - Mobile (≤768px)   : 260px — compact, contenu lisible

   ZERO REGRESSION :
   - Les backgrounds (gradient, bg-image) restent inchanges
   - Les classes Sandbox (image-wrapper, bg-overlay) fonctionnent
   - Pas de modification HTML requise
   ======================================================================== */

/* --- Desktop : hauteur compacte 386px, contenu centre --- */
[class*="-hero--"] {
    height: 386px;
    min-height: 0 !important; /* Reset des min-height individuels */
    display: flex !important;
    align-items: center !important;
}

/* Neutraliser les paddings Sandbox (pt-17 pb-20 pt-md-19 pb-md-21)
 * Le centrage flex rend ces paddings inutiles — padding minimal pour securite */
[class*="-hero--"] > .container {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Neutraliser le margin-top .mt-10 sur la colonne interne
 * (present dans article.php et meteo.php : col-lg-8 mx-auto mt-10) */
[class*="-hero--"] .mt-10 {
    margin-top: 0 !important;
}

/* --- Suppression angle decoratif apres le hero ---
 * [FIX v1.0.12 2026-02-27] Classe "angled upper-end" supprimee directement
 * dans le HTML de toutes les pages (article, category, contact, mentions,
 * meteo, politique-confidentialite, search). Plus besoin de surcharge CSS. */

/* --- Tablette : proportion reduite --- */
@media (max-width: 991.98px) {
    [class*="-hero--"] {
        height: 320px;
    }
}

/* --- Mobile : compact, contenu lisible --- */
@media (max-width: 767.98px) {
    [class*="-hero--"] {
        height: 260px;
    }

    [class*="-hero--"] > .container {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/**
 * ========================================================================
 * SIGNATURE NUMERIQUE LOOM-CMS v1.0.12
 * ========================================================================
 * Module      : Frontend - Styles personnalises CRPMEM
 * Version     : 1.0.12
 * Date        : 2026-03-10
 * Auteur      : Riley / LOOM DIGITAL
 * ========================================================================
 * 
 * SECTIONS CSS :
 * [x] Variables CSS - Charte graphique CRPMEM
 *     - --crpmem-bleu-clair : #007489 (RGAA AAA, ratio 5.44:1)
 *     - --bs-primary : #3f78e0 → #015f68 (PURGE TOTALE)
 *     - --bs-link-color : #3f78e0 → #015f68 (PURGE TOTALE)
 *     - --bs-link-hover-color : #3f78e0 → #007489
 *     - --bs-body-color : #60697b (5.52:1) → #4e5662 (7.42:1 AAA)
 * [x] Formulaires - Labels RGAA AAA
 *     - .form-label : #959ca9 (2.77:1) → #343f52 (10.28:1 AAA)
 *     - .text-muted : #6c757d (4.69:1) → #595959 (7.00:1 AAA)
 * [x] Typographie - Blockquote
 * [x] Typographie - Surtitres h2 sections (.section-surtitre)
 * [x] Boutons - Couleur CRPMEM orange
 * [x] Dropdown menu - Charte CRPMEM + RGAA AAA
 * [x] Couleurs texte - Bleu CRPMEM
 * [x] Liens mobiles
 * [x] Contenu article - Images responsives
 * [x] Contenu article - Tableaux quill-table-better
 * [x] Contenu article - Videos/iframes responsives
 * [x] Contenu article - Empecher debordement
 * [x] Section Edito - Portrait President (z-index dots derriere)
 * [x] Dots orange CRPMEM (.bg-dot.crpmem)
 * [x] Banc de poissons ARIPA (::before/::after sur 3 sections)
 * [x] Harmonisation backgrounds (.bg-crpmem-soft)
 * [x] Mobile : logo, submenu wrap, slider gap, dots, portrait visible
 * [x] Offcanvas : logo image dans sidebar
 * [x] Offcanvas Info : bg CRPMEM teal + texte blanc AAA (v1.0.12)
 * [x] Texte justifie + cesure (demande client, 2 blocs separables) (v1.0.12)
 * [x] Article - Image a la une (figure + caption)
 * [x] Article - Layout editorial lateral (sidebar sticky portrait)
 * [x] Hero Slider Video - Correction debordement mobile
 * [x] Hero Slider - Image titre (.hero-title-image) — FIX inline styles
 * [x] Hero Slider - Mobile compensation navbar (.swiper-hero padding-top)
 * [x] Shape dots - Positions par section (.shape-dot--*) — FIX inline styles
 * [x] Purge --bs-primary : link-dark, text-reset, nav, navbar, pagination
 * [x] Purge --bs-primary : toggler SVG icon (#3f78e0 → #015f68)
 * [x] Purge --bs-primary : footer .text-inverse hover (#3f78e0 → #ec7520)
 * [x] Purge --bs-primary : progress-wrap SVG + fleche (#3f78e0 → #015f68)
 * [x] Purge --bs-primary : progress-wrap hover → crpmem-orange
 * [x] Purge --bs-primary : formulaires focus/checked (#3f78e0 → #015f68)
 * [x] Purge --bs-primary : bg-soft-primary hero bandeaux (#3f78e0 → #edf6f7)
 * [x] Purge --bs-primary : alert-soft-primary (#3f78e0 → teal CRPMEM #edf6f7)
 * [x] Purge --bs-primary : btn-soft-primary (#3f78e0 → teal CRPMEM hover #015f68)
 * [x] PURGE TOTALE :root --bs-primary, --bs-blue → #015f68
 * [x] PURGE TOTALE :root --bs-link-color → #015f68, hover → #007489
 * [x] PURGE TOTALE .btn-primary (bg/border/hover/active/disabled → #015f68)
 * [x] PURGE TOTALE .btn-outline-primary (color/border/hover → #015f68)
 * [x] PURGE TOTALE .text-primary, .bg-primary, .border-primary, .fill-primary
 * [x] PURGE TOTALE .list-group-item.active, .badge.bg-primary
 * [x] PURGE TOTALE ::selection (accentuation teal CRPMEM)
 * [x] Hero pages institutionnelles : .page-hero--default gradient CRPMEM
 * [x] Hero pages institutionnelles : .page-hero--image min-height 400px
 * [x] Hero pages institutionnelles : responsive mobile 220px / 300px
 * [x] CTA Video : play icon cercle bleu-fonce, hover orange, focus RGAA (v1.0.12)
 * [x] POST-DATE GLOBAL : .post-date #595959 (7.00:1 AAA, 0.8rem)
 * [x] Hero compact uniforme : 386px desktop, 320px tablette, 260px mobile
 * [x] Hero compact : suppression angled upper-end dans HTML (7 pages)
 * [x] Hero compact : flexbox centering, neutralisation paddings Sandbox
 * [x] Footer : bg-dark #21262c → teal CRPMEM #015f68 (parite offcanvas-info)
 * [x] Footer : texte blanc #fff AAA (7.02:1), hover orange preserve
 * [x] Indicateurs : classe .indicator-icon-raster (height 80, width auto, max-width 120) pour JPG/PNG/WebP
 * [x] Sidebar contextuel articles : articles liés + contact CRPMEM + mini météo marine
 * [x] Liens :visited sur fonds teal : footer + offcanvas + bg-primary → blanc #fff AAA
 * [x] Breadcrumb sur bg-primary : separateur blanc, items blancs, visited blanc, hover Sandbox natif
 * [x] Navbar-dark : restauration hover blanc (ecrase par purge .navbar teal)
 * [x] Bande video filieres : .section-video-band overlay 0.65, parallax JS, text-shadow, responsive mobile
 * 
 * Hash : SHA256-PERSOCRPMEM-VIDEO-BAND-20260310
 * ========================================================================
 */