@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
 *
 * FIX v1.0.12 (2026-05-01 v3) - HEIGHT AUTO TABLES JODIT MOBILE (CAUSE RACINE) :
 * [x] [FIX] height: auto !important sur :has(td img) table/tbody/tr/td mobile
 * [x] [WHY] Jodit injecte style="height: XXXpx" inline sur les <table> lors du
 *           resize visuel par le client. Sur mobile, en mode display:block avec
 *           contenu empile verticalement, cette hauteur fixe (souvent 359px-500px)
 *           force la table a une taille trop petite : le contenu deborde par le
 *           bas et tous les elements suivants (paragraphes, autres tables) se
 *           rendent PAR-DESSUS le contenu deborde.
 * [x] [SYMPTOME] Strates de texte superposees illisibles dans les articles avec
 *                 tables de mise en page Jodit (article corail et autres).
 * [x] [VRAIE CAUSE] Le scope :not(:has(td img)) du fix v2 etait correct mais
 *                    n'attaquait pas la cause racine. Le vrai probleme etait
 *                    style="height: XXXpx" inline JAMAIS neutralise.
 * [x] [DEFENSIF] height:auto applique a 4 niveaux (table, tbody, tr, td) pour
 *                 robustesse face aux styles inline a tous niveaux d'imbrication.
 *
 * FIX v1.0.12 (2026-05-01 v2) - SCOPE STRICT THEAD/TBODY (TABLES DE DONNEES) :
 * [x] [FIX] Selecteur thead/tbody mobile passe en :not(:has(td img))
 * [x] [WHY] Le fix v2 du matin (thead+tbody width:max-content) entrait en
 *           cascade conflictuelle avec :has(td img) tbody { width:100% !important }
 *           definie plus bas, causant des artefacts de layout sur Safari iOS
 *           (superposition de paragraphes/images dans les articles avec
 *           tables de mise en page Jodit).
 * [x] [SCOPE] Regle limitee aux tables de DONNEES (Cookies, RGPD, stats).
 *             Tables de MISE EN PAGE (avec images) conservent leur empilement
 *             vertical natif via :has(td img).
 * [x] [VISIBLE] /article/le-corail-et-les-recifs-coralliens et autres articles
 *               avec contenu Jodit a base de tables image+texte.
 *
 * FIX v1.0.12 (2026-05-01) - NAVBAR FONT-SIZE ALIGNE BODY 18PX (CORROLAIRE) :
 * [x] [ADD] #main-nav .navbar-nav .nav-link { font-size: 0.9rem } (18px)
 * [x] [ADD] #main-nav .dropdown-menu { font-size: 0.85rem } (17px)
 * [x] [WHY] Corrolaire du fix body 0.9rem du meme jour : Sandbox imposait
 *           navbar 0.8rem (16px) et dropdown 0.75rem (15px), donc navbar
 *           paraissait compressee par rapport au corps editorial 18px.
 * [x] [HIERARCHIE] Ratio navbar/dropdown = 1.059 (navbar 5.9% plus grand,
 *           proche du 6.7% d'origine Sandbox).
 * [x] [SCOPE] Selecteur strict #main-nav : n'affecte ni footer, ni sidebar,
 *           ni breadcrumb, ni offcanvas-info.
 *
 * FIX v1.0.12 (2026-05-01) - ALIGNEMENT THEAD/TBODY MOBILE TABLES :
 * [x] [FIX] Extension regle mobile @media (max-width: 767.98px)
 *           .post-content table tbody → .post-content table thead, .post-content table tbody
 * [x] [WHY] Sans cette extension, le thead restait en display:table-header-group
 *           (compresse a la largeur visible) tandis que le tbody en width:max-content
 *           debordait. Tableaux Cookies/RGPD avec vrais <thead> apparaissaient
 *           desalignes (en-tetes etroits + cellules larges).
 * [x] [SCOPE] Mobile uniquement (≤767.98px), tableaux dans .post-content (Jodit).
 * [x] [PRESERVE] Scroll horizontal preserve, comportement desktop inchange.
 * [x] [VISIBLE] Pages legales (mentions, politique) avec tableaux Cookies/Donnees.
 *
 * ADD v1.0.12 (2026-05-01) - TYPOGRAPHIE GLOBALE BODY 18px (CONFORT INSTITUTIONNEL) :
 * [x] [ADD] body { font-size: 0.9rem } (= 18px sur root 20px Sandbox)
 * [x] [WHY] Sandbox impose 0.8rem (16px) en --bs-body-font-size : <p> heritent
 *           silencieusement, mais .legal-content table impose 0.9rem (18px).
 *           Resultat visible : tableaux RGPD/LCEN > paragraphes alentour.
 * [x] [WHY] Recommandation institutionnels FR (service-public.fr, gouv.fr) : 18px
 *           pour public mixte (seniors, terrain maritime CRPMEM, lecture tablette).
 * [x] [SCOPE] N'affecte QUE les elements heritant (rem est relatif au root, pas au body).
 *             Boutons, navbar, formulaires, headings : tous immunisés.
 * [x] [BONUS] Resout regression visuelle mentions-legales (tables = paragraphes).
 * [x] [AUDIT] Audit exhaustif 10 CSS frontend (2026-05-01) : aucune regression.
 *             Tous les composants restent >= 13px (seuil RGAA strict 12px).
 * [x] [ROLLBACK] Suppression de 1 regle CSS = retour comportement Sandbox.
 *
 * FIX v1.0.12 (2026-04-29) - LEGENDE LEAFLET INVERSION PALETTE :
 * [x] [FIX] .section-homepage-map .loom-map-legend background : rgba blanc
 *           → rgba(237, 246, 247, 0.92) = teal soft semi-opaque
 * [x] [ADD] Bordure subtile teal CRPMEM (#015f68 a 15% opacite)
 * [x] [WHY] Section Carte basculee de bg-crpmem-soft → bg-light dans
 *           index.php (strategie d'alternance chromatique homepage).
 *           L'ancien fond blanc devenait invisible sur le nouveau fond blanc.
 * [x] [COUPLAGE] index.php — REPOSITIONNEMENT INDICATEURS CLES (3 iterations)
 * [x] [ZERO REGRESSION] Pas de !important, specificite identique a l'ancienne
 *
 * ADD v1.0.12 (2026-04-28) - NAVBAR MENU NIVEAU 0 EN MAJUSCULES :
 * [x] [ADD] #main-nav .navbar-nav > .nav-item > .nav-link : text-transform:uppercase
 * [x] [WHY] Remplace strtoupper() PHP retire de navbar.php (unification menu sur `name`)
 * [x] [WHY] Cohérent avec migration BDD 021 + suppression priorité name_creole
 * [x] [PORTEE] Niveau 0 uniquement (sous-menus dropdown en casse libre)
 * [x] [SPEC] Selecteur 0-2-1 (suffisant pour surcharger Bootstrap, pas de !important)
 * [x] [RGAA] Aucun impact accessibilite (lecteurs d'ecran lisent casse d'origine)
 * [x] [ZERO REGRESSION] Aucun impact dropdowns, offcanvas, footer, sidebar, breadcrumb
 *
 * ADD v1.0.12 (2026-04-14) - CARTE INTERACTIVE HOMEPAGE :
 * [x] [ADD] .section-homepage-map : section carte interactive entre Edito et Bande Video
 * [x] [ADD] overflow hidden, position relative (contient la carte Leaflet)
 * [x] [ADD] .section-homepage-map .loom-map-canvas : coins arrondis, ombre subtile
 * [x] [ADD] Responsive : hauteur carte reduite mobile
 * [x] [ZERO REGRESSION] Aucun impact sections existantes
 *
 * ADD v1.0.12 (2026-03-31) - SEPARATEUR EDITORIAL SECTIONS :
 * [x] [ADD] .section-divider : trait horizontal decoratif (4px, orange CRPMEM, 4rem, centre)
 * [x] [USE] Top section Agenda (visible meme si section Environnement masquee)
 * [x] [ZERO REGRESSION] Aucun impact sur les autres sections
 *
 * ADD v1.0.12 (2026-03-25) - IMAGE DECORATIVE BANC DE POISSONS :
 * [x] [ADD] .news-fish-decoration : SUPERSEDE par .section-news::before (2026-04-03)
 * [x] [ADD] transform scaleX(-1) miroir horizontal (poissons vers la gauche)
 * [x] [ADD] opacity 0.08, z-index 0, pointer-events none (decoratif pur)
 * [x] [ADD] Responsive : reduit tablette, masque mobile
 * [x] [FIX] Retrait fish-bank section Evenements (4 sections = surcharge visuelle)
 * [x] [NOTE] Conserve : Edito (haut-droite), Actualites (bas-gauche), Contact (bas-droite)
 * [x] [RGAA] alt="" + aria-hidden="true" (image decorative)
 *
 * FIX v1.0.12 (2026-03-24) - VERTICAL-ALIGN IMAGES CELLULES TABLEAU :
 * [x] [FIX] :has() propage vertical-align de l'img vers le td parent (middle/bottom/top)
 * [x] [FIX] margin-bottom:0 sur dernier <p> dans cellules (wrapper Jodit)
 * [x] [CAUSE] Jodit applique vertical-align sur <img> au lieu de <td>
 * [x] [NOTE] :has() supporte par tous navigateurs modernes (Baseline 2023)
 *
 * ADD v1.0.12 (2026-03-24) - TABLEAUX LAYOUT RESPONSIFS MOBILE :
 * [x] [ADD] Empilement vertical des tableaux de mise en page sur mobile (<=767px)
 * [x] [ADD] Detection :has(td img) cible les tableaux layout (image+texte)
 * [x] [ADD] Tableaux de donnees (sans images) conservent le scroll horizontal
 * [x] [ADD] Images centrees, bordures supprimees, cellules vides masquees
 * [x] [FIX] !important sur width/border cellules (override inline Jodit)
 * [x] [FIX] text-align:justify sur cellules td et td p (coherence site)
 * [x] [FIX] text-align:center sur cellules contenant image (legende centree)
 * [x] [ZERO REGRESSION] Desktop inchange, tableaux de donnees intacts
 *
 * FIX v1.0.12 (2026-03-23) - CHEVAUCHEMENT HERO / NAVBAR MOBILE :
 * [x] [FIX] Tablette (<=991px) : padding-top 5rem sur container hero (reserve espace navbar)
 * [x] [FIX] Mobile (<=767px) : padding-top 4.5rem + hauteur hero 260px → 280px
 * [x] [FIX] Petit mobile (<=575px) : titre display-1 reduit a 1.5rem (2 lignes max)
 * [x] [WHY] Navbar position-absolute (~70px) recouvre le titre centre en flexbox
 * [x] [WHY] Meme pattern que le fix swiper-hero .container padding-top 5rem (2026-02-10)
 * [x] [ZERO REGRESSION] Desktop inchange (386px, padding 1rem suffisant)
 * [x] [SCOPE] article.php + category.php + toutes pages [class*="-hero--"]
 *
 * 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-05-01
 * ========================================================================
 */

/* ========================================================================
   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;
}

/* ========================================================================
   TYPOGRAPHIE GLOBALE — TAILLE DU CORPS DE TEXTE (RGAA + INSTITUTIONNEL)
   ========================================================================
   ADD v1.0.12 (2026-05-01) : Confort de lecture institutionnel + harmonisation
                              tableaux .legal-content (resout regression visuelle
                              tables > paragraphes sur pages legales).

   PROBLEME D'ORIGINE :
   Le template Sandbox definit --bs-body-font-size: 0.8rem (= 16px sur root 20px).
   Les <p> du corps editorial heritent silencieusement de cette valeur, alors
   que .legal-content table impose 0.9rem (18px). Resultat visible : les
   tableaux RGPD/LCEN apparaissent plus gros que les paragraphes alentour.

   ANALYSE COMPLEMENTAIRE :
   16px est le seuil minimum confortable web standard (Bootstrap, Tailwind),
   mais les institutionnels francais (service-public.fr, gouv.fr, ANSSI)
   recommandent 18px en corps de texte pour public mixte (seniors, terrain
   maritime CRPMEM, lecture sur tablette par tous temps).

   SOLUTION :
   body { font-size: 0.9rem } (= 18px sur root 20px).

   IMPACT TECHNIQUE :
   - rem etant relatif au :root (20px) et non au body, AUCUN composant avec
     font-size explicite (boutons, navbar, formulaires, headings, cards) n'est
     affecte. Verifie via audit exhaustif des 10 CSS frontend (2026-05-01).
   - Seuls les elements heritant silencieusement passent de 16px a 18px :
     <p>, <li>, <td>, <th> sans override + contenu Jodit (.post-content).
   - Bonus : .legal-content table (0.9rem) s'harmonise automatiquement avec
     les <p> environnants (0.9rem hérité) → resout la regression visuelle
     mentions-legales sans toucher legal-content.css.

   ROLLBACK :
   Suppression de la regle ci-dessous = retour immediat au comportement
   Sandbox (16px). Aucun autre fichier a modifier.
   ======================================================================== */

body {
    font-size: 0.9rem;        /* 18px sur root 20px Sandbox - confort institutionnel */
}

/* ========================================================================
   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);
}

/* FIX v1.0.12 (2026-03-24) : Justification texte dans cellules de tableau.
 * PROBLEME : Le client applique text-align:left en inline via Jodit sur les
 * cellules, alors que le site utilise text-align:justify partout (.post-content p).
 * FIX : Forcer justify sur les cellules et leurs paragraphes.
 * !important requis : overrider les styles inline Jodit.
 * EXCEPTION : Cellules contenant une image → centrer (legende sous l'image).
 */
.post-content table td,
.post-content table td p {
    text-align: justify !important;
}

/* Cellules image : centrer (image + legende <strong> en dessous) */
.post-content table td:has(img) {
    text-align: center !important;
}

/* FIX v1.0.12 (2026-03-24) : Alignement vertical images dans cellules de tableau.
 * PROBLEME : Jodit applique vertical-align sur le <img> au lieu du <td>.
 * Sur un <img>, vertical-align positionne par rapport a la ligne de texte.
 * Sur un <td>, vertical-align controle l'alignement du contenu dans la cellule.
 * FIX : Le selecteur :has() detecte quand un <td> contient une image avec
 *        vertical-align inline et propage la valeur au <td> parent,
 *        la ou elle produit reellement l'effet attendu.
 * BONUS : margin-bottom:0 sur le dernier <p> des cellules (wrapper Jodit)
 *         pour eviter l'espacement parasite qui decale l'alignement.
 */
.post-content table td p:last-child,
.post-content table th p:last-child {
    margin-bottom: 0;
}

.post-content table td:has(img[style*="vertical-align:middle"]),
.post-content table td:has(img[style*="vertical-align: middle"]) {
    vertical-align: middle;
}

.post-content table td:has(img[style*="vertical-align:bottom"]),
.post-content table td:has(img[style*="vertical-align: bottom"]) {
    vertical-align: bottom;
}

.post-content table td:has(img[style*="vertical-align:top"]),
.post-content table td:has(img[style*="vertical-align: top"]) {
    vertical-align: top;
}

/* 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 thead ET le tbody a se comporter comme block pour scroll
     * FIX v1.0.12 (2026-05-01) : Ajout de thead au selecteur pour resoudre
     * le desalignement <thead>/<tbody> sur mobile. Sans cette regle, le thead
     * restait en display:table-header-group (compresse a la largeur visible)
     * tandis que le tbody en width:max-content debordait. Resultat visible :
     * en-tetes etroits + cellules larges = colonnes desalignees.
     * Avec thead+tbody en meme display:block + width:max-content, les deux
     * blocs se calibrent ensemble et l'alignement de colonnes est restaure.
     *
     * FIX v1.0.12 (2026-05-01 v2) : Scope ajoute :not(:has(td img)) pour
     * exclure les tables de mise en page (image + legende). Sans ce scope,
     * la regle width:max-content entrait en cascade conflictuelle avec
     * la regle :has(td img) tbody { width: 100% !important } definie plus
     * bas, causant des artefacts de layout sur Safari iOS (superposition de
     * paragraphes/images). Scope strict : ces regles ne s'appliquent qu'aux
     * tables de DONNEES (Cookies, RGPD/LCEN, statistiques) - les tables de
     * MISE EN PAGE conservent leur empilement vertical via :has(td img). */
    .post-content table:not(:has(td img)) thead,
    .post-content table:not(:has(td img)) 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 - TABLEAUX LAYOUT RESPONSIFS (mobile)
   ADD v1.0.12 (2026-03-24) : Empilement vertical des tableaux de mise en page
   ======================================================================== */
/*
 * PROBLEME : Le client utilise des <table> pour la mise en page (image + texte
 * cote a cote). Sur mobile, les colonnes s'ecrasent et le contenu est illisible.
 *
 * SOLUTION : Le selecteur :has(td img) detecte les tableaux de layout (ceux
 * contenant des images dans les cellules) et empile les cellules verticalement
 * sur mobile. Les tableaux de donnees (statistiques, chiffres) sans images
 * conservent le scroll horizontal existant.
 *
 * DETECTION : table:has(td img) = tableau contenant au moins une image en cellule
 * → pattern classique "image poisson + texte descriptif" utilise par le client
 *
 * SPECIFICITE : :has(td img) est plus specifique que les regles generiques
 * table td { display: table-cell } → pas de !important necessaire
 * FIX v1.0.12 (2026-03-24) : !important sur width/border des cellules
 * pour overrider les styles inline Jodit (width: 30%, border-color: #000)
 * que le client applique via l'editeur. Cas legitime : empilement mobile
 * doit primer sur les largeurs de colonnes desktop.
 */
@media (max-width: 767.98px) {
    /* Tableau layout : empilement vertical
     * FIX v1.0.12 (2026-05-01 v3) : Ajout height:auto !important pour neutraliser
     * les style="height: XXXpx" inline que Jodit ajoute lors du resize visuel par
     * le client. Sans ce override, la table conserve sa hauteur fixe desktop sur
     * mobile, son contenu empile verticalement deborde, et tous les elements
     * suivants (paragraphes, autres tables) se rendent PAR-DESSUS le contenu
     * deborde. Symptome : strates de texte superposees illisibles. */
    .post-content table:has(td img) {
        display: block;
        overflow-x: visible;
        border: none !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .post-content table:has(td img) tbody {
        display: block;
        width: 100% !important;
        height: auto !important;
    }
    
    .post-content table:has(td img) tr {
        display: block;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 1.5rem;
        border: none !important;
    }
    
    /* !important requis : overrider les width/border/height inline Jodit */
    .post-content table:has(td img) td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border: none !important;
        padding: 0.25rem 0;
    }
    
    /* Images centrees dans les cellules empilees */
    .post-content table:has(td img) td img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0.75rem;
    }
    
    /* Masquer les cellules vides (artefacts layout) */
    .post-content table:has(td img) td:empty {
        display: none;
    }
}

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

/* FIX v1.0.12 (2026-04-03) : Regles generiques iframes/videos dans le contenu article.
   Le height:auto empeche les iframes nues (sans wrapper) de deborder verticalement.
   Pour les iframes dans .video-responsive, la regle est surchargee plus bas
   avec une specificite superieure (.post-content .video-responsive iframe = 0-2-1). */
.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%;
}

/* ADD v1.0.12 (2026-04-02) : Wrapper video YouTube insere par Jodit (youtubeVideoButton)
   Genere : <div class="video-responsive"><iframe src="youtube-nocookie.com/embed/..."></div>
   Sans scope .post-content : fonctionne aussi dans l'apercu Jodit admin.
   FIX v1.0.12 (2026-04-03) : Taille par defaut = pleine largeur colonne (100%). */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* ratio 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 1em 0;
}

/* ADD v1.0.12 (2026-04-03) : Variantes de taille (choix dans Jodit) */
/* Moyen : 75% de la colonne, centre */
.video-responsive--medium {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
}

/* Compact : 50% de la colonne, centre */
.video-responsive--compact {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile : toutes les variantes repassent en pleine largeur */
@media (max-width: 767.98px) {
    .video-responsive--medium,
    .video-responsive--compact {
        max-width: 100%;
    }
}

/* FIX v1.0.12 (2026-04-03) : Specificite 0-2-1 surcharge .post-content iframe (0-1-1).
   Corrige le player YouTube ecrase (height:auto ecrase height:100% a specificite egale). */
.post-content .video-responsive iframe,
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========================================================================
   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;
    }
}

/* ========================================================================
   CARTE INTERACTIVE HOMEPAGE — Section entre Edito et Bande Video
   ========================================================================
   ADD v1.0.12 (2026-04-14) : Section carte interactive pilotee par
   show_on_homepage dans la table maps (admin toggle).

   BACKGROUND : bg-crpmem-soft (cyan pale #f0f7f8) pour contraster avec
   le bg-light (#fefefe) de la section Edito au-dessus.

   PATTERN : surtitre h2 (.section-surtitre) + titre h3 (.display-4)
   aligne sur le pattern editorial valide (Edito, Actus, Environnement).

   CARTE : .loom-map-canvas stylee ici pour integration visuelle
   (coins arrondis, ombre subtile). Les styles internes de la carte
   (legende, tooltips, overlays) sont dans interactive-map.css.

   STRUCTURE HTML (index.php) :
   <section class="wrapper bg-crpmem-soft section-homepage-map editorial-reveal">
     <div class="container py-14 py-md-16">
       <div class="row mb-8"><div class="col text-center">
         <h2 class="section-surtitre">SURTITRE</h2>
         <h3 class="display-4">Titre</h3>
       </div></div>
       <div class="row"><div class="col-12">
         <div class="loom-map" data-map-slug="xxx"></div>
       </div></div>
     </div>
   </section>
   ======================================================================== */

/* Conteneur section : overflow hidden pour eviter debordement carte */
.section-homepage-map {
    position: relative;
    overflow: hidden;
}

/* Carte Leaflet : coins arrondis + ombre subtile (integration visuelle) */
.section-homepage-map .loom-map-canvas {
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ========================================================================
   LEGENDE LEAFLET — INVERSION PALETTE (FIX v1.0.12 2026-04-29)
   ========================================================================
   CONTEXTE :
   La section Carte (.section-homepage-map) est passee de bg-crpmem-soft
   a bg-light suite a la strategie d'alternance chromatique homepage
   (Edito blanc → Indicateurs teal soft → Carte blanche → Video image).

   PROBLEME RESOLU :
   L'ancien fond rgba(255,255,255,0.85) etait concu pour ressortir sur
   bg-crpmem-soft (#edf6f7 — teal soft). Sur le nouveau bg-light (blanc),
   la legende devenait quasi-invisible (blanc semi-transparent sur blanc).

   SOLUTION :
   Inversion de la palette. La legende prend desormais le teint de
   l'ancien background de la section (#edf6f7 = bg-crpmem-soft) en
   semi-opaque. Resultat : contraste prononce sur fond blanc, palette
   harmonisee avec les autres sections teal soft de la homepage.

   COULEUR :
   rgba(237, 246, 247, 0.92) = #edf6f7 a 92% d'opacite
   - Valeur exacte de bg-crpmem-soft pour coherence chromatique
   - Opacite 0.92 (vs 0.85 precedente) : la teinte teal etant plus
     proche du blanc, on compense avec une opacite legerement superieure
     pour maintenir le contraste visuel
   - Une bordure subtile teal renforce la delimitation sur bg-light

   COUPLAGE : index.php section Carte basculee en bg-light
   (cf. FIX REPOSITIONNEMENT INDICATEURS CLES — 3 iterations chromatiques)
   ======================================================================== */

/* Legende : fond teal soft semi-opaque sur bg-light (alternance chromatique) */
.section-homepage-map .loom-map-legend {
    background: rgba(237, 246, 247, 0.92);
    border: 1px solid rgba(1, 95, 104, 0.15);
    border-radius: 0.4rem;
}

/* Responsive : hauteur carte reduite mobile */
@media (max-width: 767.98px) {
    .section-homepage-map .loom-map-canvas {
        min-height: 300px;
    }
}

/* ========================================================================
   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 les sections de la homepage.

   POSITIONS (3 au total) :
   - Section Edito (.section-edito)    : haut-droite (::before)
   - Section Actualites (.section-news): bas-gauche  (::before, miroir scaleX -1)
   - Section Contact (.section-contact): bas-droite  (::after)
   FIX v1.0.12 (2026-03-25) : Retrait section Evenements (4 = surcharge visuelle)
   FIX v1.0.12 (2026-04-03) : Actualites migre de <img> vers ::before (coherence)

   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-news,
.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-news::before,
.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;
}

/* ADD v1.0.12 (2026-04-03) : Actualites : bas-gauche, miroir horizontal */
/* ::before disponible (lower-end n'utilise que ::after) */
.wrapper.section-news::before {
    bottom: 2rem;
    left: 0;
    border: none;
    transform: scaleX(-1);
}

/* FIX v1.0.12 (2026-03-25) : Retrait section-events (4 occurrences = surcharge visuelle)
 * Conserve : Edito (haut-droite), Actualites (bas-gauche), Contact (bas-droite) */

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

/* Responsive : taille reduite sur mobile */
@media (max-width: 767.98px) {
    .section-edito::before,
    .section-news::before,
    .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-news > .container,
.section-contact > .container {
    position: relative;
    z-index: 1;
}

/* ========================================================================
   SEPARATEUR EDITORIAL ENTRE SECTIONS
   ========================================================================
   ADD v1.0.12 (2026-03-31) : Trait horizontal decoratif en haut de la
   section Agenda. Marque la transition sans ajouter d'espace ni alourdir.
   Court et epais, couleur orange CRPMEM (accent CTA charte).
   ======================================================================== */

.section-divider {
    border: none;
    border-top: 4px solid var(--crpmem-orange, #ec7520);
    width: 20rem;
    margin: 0 auto;
}

/* ========================================================================
   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;
    }
}

/* ========================================================================
   NAVBAR — MENU NIVEAU 0 EN MAJUSCULES (CSS)
   ========================================================================
   FIX v1.0.12 (2026-04-28) :

   CONTEXTE :
   Avant ce fix, navbar.php utilisait strtoupper() PHP pour mettre en
   majuscules les libelles du menu principal (niveau 0). Cette logique
   etait couplee a une priorisation silencieuse de la colonne name_creole
   sur le champ name, qui empechait le client de modifier ses libelles
   depuis l'admin (« Nos informations » edite ne s'affichait pas).

   SOLUTION :
   - navbar.php : suppression du strtoupper() PHP + suppression priorite
     name_creole (cf. FIX UNIFICATION MENU dans navbar.php)
   - helpers.php : suppression branche name_creole dans buildCategoryOptions
   - Migration BDD 021 : UPDATE name = name_creole (preservation libelles)
   - perso-crpmem.css : ce bloc — mise en majuscules deleguee au CSS

   PORTEE :
   - Cible UNIQUEMENT les .nav-link directement enfants des .nav-item
     racines de la .navbar-nav principale (selecteur > niveau 1)
   - N'affecte PAS les .dropdown-item des sous-menus (casse libre preservee)
   - N'affecte PAS les .nav-link de l'offcanvas-info, footer, sidebar,
     breadcrumb (specificite limitee a #main-nav .navbar-nav)

   RGAA AAA :
   - text-transform:uppercase est purement visuel (les lecteurs d'ecran
     lisent le texte d'origine en casse mixte, sans epellation)
   - Aucun impact accessibilite

   SPECIFICITE :
   - Selecteur : 1-2-1 (1 ID #main-nav + 2 classes + 1 enfant direct)
   - Largement superieur a Bootstrap (.nav-link : 0-1-0)
   - Pas de !important necessaire (conforme DIRECTIVES §7.4)
   ======================================================================== */

#main-nav .navbar-nav > .nav-item > .nav-link {
    text-transform: uppercase;
}

/* ========================================================================
   NAVBAR — TAILLE DE TEXTE ALIGNEE SUR BODY 18PX (CORROLAIRE FIX TYPO)
   ========================================================================
   FIX v1.0.12 (2026-05-01) : Corrolaire du fix body 0.9rem (18px) du meme jour.

   PROBLEME :
   Le fix typo body (0.8rem -> 0.9rem) a agrandi les paragraphes et le contenu
   editorial a 18px, mais Sandbox impose --bs-nav-link-font-size: 0.8rem (16px)
   et --bs-dropdown-font-size: 0.75rem (15px). Resultat visible : la navbar
   parait compressee par rapport au corps de texte.

   SOLUTION :
   - Navbar nav-link : 0.9rem (18px) = identique au body, hierarchie 1:1
   - Dropdown items : 0.85rem (17px) = legerement plus petit (hierarchie sub-menu)

   Ratio d'origine Sandbox : navbar/dropdown = 0.8/0.75 = 1.067 (navbar 6.7% plus grand)
   Ratio fix : navbar/dropdown = 0.9/0.85 = 1.059 (navbar 5.9% plus grand)
   → Hierarchie visuelle d'origine preservee.

   PORTEE :
   - #main-nav .nav-link : niveau 0 ET sous-niveaux (specificite 1-2-1)
   - #main-nav .dropdown-menu : sous-menus deroulants
   - N'affecte PAS .nav-link du footer, sidebar, breadcrumb, offcanvas-info
     (selecteur strict #main-nav)
   ======================================================================== */

#main-nav .navbar-nav .nav-link {
    font-size: 0.9rem;        /* 18px sur root 20px - aligne sur body */
}

#main-nav .dropdown-menu {
    font-size: 0.85rem;       /* 17px - hierarchie sub-menu */
}

/* ========================================================================
   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 + compensation navbar --- */
/* [FIX v1.0.12 2026-03-23] padding-top reserve espace navbar overlay (~70px)
 * Meme pattern que .swiper-hero .container padding-top:5rem (fix 2026-02-10) */
@media (max-width: 991.98px) {
    [class*="-hero--"] {
        height: 320px;
    }

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

/* --- Mobile : compact + compensation navbar --- */
/* [FIX v1.0.12 2026-03-23] hauteur 260→280px pour compenser le padding-top navbar.
 * A 260px avec 72px de padding, il restait 188px = insuffisant pour titre long. */
@media (max-width: 767.98px) {
    [class*="-hero--"] {
        height: 280px;
    }

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

/* --- Petit mobile : titre reduit pour eviter 3+ lignes --- */
/* [FIX v1.0.12 2026-03-23] display-1 Bootstrap = ~2.5rem sur <576px,
 * encore trop large pour des titres longs type CRPMEM. 1.5rem = 2 lignes max. */
@media (max-width: 575.98px) {
    [class*="-hero--"] .display-1 {
        font-size: 1.5rem !important;
    }
}

/**
 * ========================================================================
 * SIGNATURE NUMERIQUE LOOM-CMS v1.0.12
 * ========================================================================
 * Module      : Frontend - Styles personnalises CRPMEM
 * Version     : 1.0.12
 * Date        : 2026-04-14
 * 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, 280px mobile
 * [x] Hero compact : suppression angled upper-end dans HTML (7 pages)
 * [x] Hero compact : flexbox centering, neutralisation paddings Sandbox
 * [x] Hero compact : compensation navbar overlay mobile (padding-top 5rem/4.5rem)
 * [x] Hero compact : titre display-1 reduit 1.5rem petit mobile (<=575px)
 * [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
 * [x] Tableaux : vertical-align images cellules via :has() (img→td propagation, p:last-child margin fix)
 * [x] Tableaux layout mobile : empilement vertical :has(td img), !important override inline, text-align justify
 * [x] Separateur editorial : .section-divider (4px orange CRPMEM, 4rem centre, top Agenda)
 * [x] Video YouTube responsive : .video-responsive wrapper ratio 16:9 (youtubeVideoButton Jodit)
 * [x] Video YouTube : variantes taille --medium (75%) --compact (50%), mobile 100%
 * [x] Video YouTube : FIX specificite .post-content .video-responsive iframe (0-2-1) surcharge height:auto
 * [x] Fish-bank Actualites : migration <img> vers ::before CSS (coherence edito/contact, fix mobile)
 * [x] Carte interactive homepage : .section-homepage-map (overflow, border-radius, box-shadow, responsive)
 * [x] Navbar menu niveau 0 : text-transform:uppercase via #main-nav .navbar-nav > .nav-item > .nav-link
 *     (remplace strtoupper() PHP retire — unification menu sur `name`, cohérence migration BDD 021)
 * [x] Legende Leaflet : palette inversee (rgba blanc → rgba teal soft)
 *     pour rester visible apres bascule Carte en bg-light (alternance chromatique)
 * [x] Typographie globale : body 0.8rem → 0.9rem (16px → 18px) — confort institutionnel
 *     + harmonisation auto avec .legal-content table (resout regression mentions-legales)
 * [x] Tables mobile : extension regle thead+tbody (alignement colonnes restaure)
 *     pour les tableaux avec vrais <thead> (Cookies, RGPD/LCEN, donnees structurees)
 *     v2 : scope :not(:has(td img)) pour exclure tables de mise en page Jodit
 *     (evite cascade conflictuelle avec :has(td img) override -> bug Safari iOS)
 *     v3 : height:auto !important sur :has(td img) (table, tbody, tr, td) -
 *     neutralise les style="height: XXXpx" inline Jodit qui causaient
 *     les superpositions de paragraphes/images sur mobile (cause racine).
 * [x] Navbar font-size aligne sur body 18px : nav-link 0.9rem (18px) +
 *     dropdown-menu 0.85rem (17px). Corrolaire fix body 0.9rem du meme jour.
 *
 * Hash : SHA256-PERSOCRPMEM-20260501-V5-HEIGHT-AUTO-JODIT
 * ========================================================================
 */