/*______★ ☆ ✭______________________________________________________-- •· ·
           •                 __. ★.      .       __
     • ▌ ▄ ·.   ▄▄▄·  ·▄▄▄▄   ▐▄▄▄▄▄▄ .▄▄▄ • ▄▄▄  .▄   ▄•·
     ·██ ▐███▪ ▐█  █  ██▪ ██   ·██▀   ▀▄.▀·  ▀▄.▀· █▌ ▄▌▪
     ▐█ ▌▐▌▐█· ▄█▀▀█▌  █·  █▌▪▄  ██  ▐▀▀ ▪  ▐▀▀▪   ▐▀▀▄·
__.__██ ██▌▐█▌ ▐█ ▪▐▌ ██. ██  ▐▌▐█▌  ▐█▄▄▌  ▐█▄▄▌ •▐█. ██▄▄▄▄▄______ www.madjeek.fr _______.. ★ ☆ ✭ 
     ▀  █▪  ▀▀  ▀  ▀  ▀▀▀▀▀•   ▀▀▀•   ▀▀▀    ▀▀▀  ·▀       ▀
  ______________________________________________________  _____*/

/*  ______________________________________________________ BASE FOR : V.LUXE 2025 / 2026 - FR _____*/

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@file : ROOT / NORMALISE / BASE GENERIC / GLOBALIZE - For theme v.classic  
My custom + @see Mit Project : https://github.com/necolas/normalize.css : MIT License Copyright (c) Nicolas Gallagher and Jonathan Neal 
+ GlOBALIZE Copyright (c) Fabien Conéjéro s@ee : https://github.com/madjeek-web/Globalize.css 
+ FUSION AVEC : GLOBALIZE ULTIMATE PRO. Copyright (c) Fabien Conéjéro + PROBALIZE.css Version Ultimate 2026. Copyright (c) Fabien Conéjéro 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* =========================================================================
SECTION 0 — VARIABLES CSS GLOBALES (FUSION COMPLÈTE)
============================================================================ */
:root {
/* ── POLICES ORIGINALES ───────────────────────────────────────────────────── */
font-family: 'quan_extralightregular', 'Quan';
/* ── COULEURS DE BASE ORIGINALES ──────────────────────────────────────────── */
--body-bg-color-base-1:#f6f6f6;--clr-no:transparent;--clr-button-text:#fff;--clr-button-border:#e6e6e6;--clr-button-hover:#c7c7c7;--clr-button-glow:#7e7e7e;--clr-input:#00000099;--clr-input-text:#e9e9e9;--clr-input-placeholder:#fff;--clr-input-border:#e6e6e6;
/*/////////////////////////////////////////////////////////////////////////////*/
/*  DOCUMENTATION CODE : 777-AAA-000-FFF                                       */
/*  Analyse approfondie des normes WCAG AAA pour les couleurs de texte et fond */
/*/////////////////////////////////////////////////////////////////////////////*/
/* Mode Clair — WCAG AAA compliant */
--color-light-bg:#FFFDF9; /* Fond très légèrement chaud, plus doux que blanc pur */ --color-light-text:#16110D; /* Texte d'un noir profond mais pas pur, pour un contraste idéal */ --color-light-heading:#0D0A08; /* Pour les titres, un noir encore plus profond mais adouci */
/* Mode Sombre — WCAG AAA compliant */
--color-dark-bg:#020202; /* Fond sombre avec une pointe de bleu, plus reposant */ --color-dark-text:#E4E2DD; /* Texte principal en blanc cassé, évite l'éblouissement */ --color-dark-heading: #F4F2EF; /* Titres très proches du blanc, mais sans danger pour les yeux */
/* Couleurs d'accentuation (optionnel) — WCAG AAA compliant */
--color-link:#555555; /* gris foncé accessible pour les liens, ratio > 7:1 sur fond clair */ --color-link-dark: #dbdbdb; /* gris clair pour liens en mode sombre, ratio > 7:1 */  /* AUTRE OPTION DE COULEURS (charte graphique) : --color-link:#2F5575; --color-link-dark:#8BB9DB; */
/* ── ESPACEMENT PROBALIZE (système d'espacement cohérent) ─────────────────── */
--prb-line-height:1.5;--prb-space-ratio:1.5;--prb-space-unit:calc(1rem * var(--prb-line-height));--prb-space-xxs:calc(var(--prb-space-unit) / (var(--prb-space-ratio) * 2));--prb-space-xs:calc(var(--prb-space-unit) / var(--prb-space-ratio));--prb-space-sm:var(--prb-space-unit);
--prb-space-md:calc(var(--prb-space-unit) * var(--prb-space-ratio));--prb-space-lg:calc(var(--prb-space-unit) * var(--prb-space-ratio) * 2);--prb-space-xl:calc(var(--prb-space-unit) * var(--prb-space-ratio) * 3);
/* ── COULEURS SÉMANTIQUES GLOBALIZE ULTIMATE PRO ─────────────────────────── */
--g-primary:#0d6efd; /* Bleu primaire — actions principales */ --g-secondary:#6c757d; /* Gris secondaire — actions secondaires */ --g-success:#198754; /* Vert succès — validations, confirmations */ --g-danger:#dc3545; /* Rouge danger — erreurs, alertes critiques */
--g-warning:#ffc107; /* Jaune avertissement — alertes modérées */ --g-info:#0dcaf0; /* Bleu info — informations complémentaires */ --g-light:#f8f9fa; /* Gris très clair — fonds légers */ --g-dark:#212529; /* Gris très foncé — fonds sombres, textes */}
/* =========================================================================
SECTION 1 — HTML & BODY (FUSION ORIGINALE + PROBALIZE)
============================================================================ */
/* Configuration HTML de base avec scroll fluide et gestion du mode sombre */
/* VARIANTE LOCALE : fr | en | zh — adapter -webkit-locale en conséquence */
html {scroll-behavior:smooth;-webkit-locale:"fr";direction:ltr;unicode-bidi:isolate;background-color:#000 !important; /* DÉFAUT Mode sombre */}
/* Surcharge pour le mode clair */
html:not(.darkmode) {background-color:#fff !important; /* Fond blanc en mode clair */}
/* Respect de la préférence système en mode sombre */
@media (prefers-color-scheme: dark) {html:not(.darkmode) {background-color:#000 !important; /* Fond noir si système en sombre */}}
/* Mode sombre activé manuellement */
html .darkmode {background-color:#000 !important; /* Fond noir en mode sombre manuel */}
/* Configuration du body — base complète */
html, body {height:100%;width:100%;margin:0px;padding:0px;border:0;font-family: 'quan_extralightregular', 'Quan', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;vertical-align:baseline;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;background-color:#000;opacity:1;animation: mymove 1.2s ease-out; /* ← plus court et plus fluide */   /* AUTRE OPTION D'ANIMATION : animation: mymove 2s; */}
/* ======================================================================
SAFE AREA INSETS — Gestion des encoches et zones système
=========================================================================
Objectif : Éviter que le contenu soit masqué par les éléments système (encoche iPhone, barre de navigation Android, coins arrondis, etc.)
Fonctionnement :
- env() lit une variable d'environnement fournie par le navigateur
- Chaque variable correspond à une zone réservée par le système : • safe-area-inset-top    → encoche / barre de statut (haut)   • safe-area-inset-right  → bord droit (ex: coins arrondis)   • safe-area-inset-bottom → barre de navigation / home indicator (bas)  • safe-area-inset-left   → bord gauche (ex: coins arrondis)
- Si l'appareil n'a pas d'encoche, env() retourne 0px → aucun effet
- Compatible iOS 11+, Android Chrome 69+, Safari 11+
Conformité WCAG 2.2 AAA : - Critère 1.4.10 (Reflow) : le contenu reste accessible même avec encoche - Critère 2.5.8 (Target Size) : les zones tactiles ne sont pas masquées
Explication détaillée : à quoi ça sert et comment ça fonctionne
============================================================
Le problème résolu : Sur les appareils modernes, l'écran n'est plus un simple rectangle :
   ┌─────────────────────────────┐
   │  ▓▓▓▓ ENCOCHE ▓▓▓▓          │  ← Contenu masqué si pas de padding
   │                             │
   │      Le contenu...         │
   │                             │
   │  ▓▓▓▓ BARRE DE NAV ▓▓▓▓     │  ← Contenu masqué si pas de padding
   └─────────────────────────────┘
Sans safe-area-inset : le header ou le footer peuvent être partiellement masqués par l'encoche ou la barre système. Avec safe-area-inset : le navigateur réserve automatiquement l'espace nécessaire.
============================================================ */
body {padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
/* Animation d'apparition de la page */
@keyframes mymove {0% {opacity:0;} 80% {opacity:0.95;} /* ← À 80% de l'animation, quasi visible */ 100% {opacity:1;}}
/*  * for all pages - body {overscroll-behavior:contain;}   * No : "scrolling" or "overscrolling" effect    * Le navigateur ne permet plus à l'utilisateur de faire défiler la page au-delà de ses limites, empêche la page de se régénérer uniquement en cas de scroll non utile ou involontaire, empêche  le scrolling excessif 
et pas d'effet de rebond.    * Mobiles + navigateurs + Safari iOS.    * Compatible avec : html { scroll-behavior: smooth; }    * Ce CSS ne pose pas de problème d'accessibilité des pages, contrairement au JS : document.addEventListener('touchmove', function(event) {event.preventDefault(); }, { passive: false });   */
body {overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain;background-color:var(--color-light-bg);color:var(--color-light-text);transition:background-color 0.5s ease, color 0.5s ease;}
body * {-webkit-user-select:text !important;-moz-user-select:text !important;-ms-user-select:text !important;user-select:text !important;}
/* Mode sombre pour le body */
.darkmode body {background-color:var(--color-dark-bg);color:var(--color-dark-text);}
/* Styles des titres avec support du mode sombre */
h1, h2, h3, h4, h5, h6 {color:var(--color-light-heading);}
.darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6 {color: var(--color-dark-heading);}
/* =========================================================================
SECTION 2 — ÉLÉMENTS DE BASE & RESET
============================================================================ */
/* corrects initial value display blockquote */ blockquote p {display:inline;}
/* WRAPPER */ .page {height:100%;width:100%;}
/* Remove the border on images inside links IE10 */ img {border-style:none;}
/* Workaround for removing comments in body */ .prompt {display:none;} samp > kbd {display:none;} pre {display:none;} code {display:none;}
/* LINKS-ON/OFF-OPTION | Gestion complète des liens avec support du mode sombre/clair */ a {cursor:pointer;list-style-type:none;text-decoration:none;color:#fff;background-color:transparent; /* Remove the gray background on active links IE10 */ color: inherit; /* Utiliser la couleur parent */}
a:hover {cursor:pointer;}
/*  * a:link{color:#000} * a:visited{color:#000} * a:hover{color:#fff} * a:active{color:rgb(126, 126, 126)} * a:visited{...} * a:focus-visible{...} * a:focus-within{...} * a:target{...} */
.effect-links-black {color:inherit; /* S'adapter au mode sombre/clair */}
mark {background-color:transparent; /* Auto bg-c : Yellow */}
/* NAVIGATION */ ul, li {list-style-type: none;}
/* CUT TEXT — césure automatique pour les mots longs */ .cut-texte-magic {-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;}
/* New clearfix-Markup free clearing - @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack */ .clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
/* IE6 */ * html .clearfix {height:1%;}
/* IE7 */ *:first-child + html .clearfix {min-height:1%;}
/* Autocomplete @see:autocomplete.js | Suggestion list */ #autocomplete {border:1px solid;overflow:hidden;position:absolute;z-index:100;} #autocomplete ul {list-style: none;list-style-image: none;margin: 0;padding: 0;} #autocomplete li {background:#fff;color:#000;cursor:default;white-space:pre;zoom:1; /* IE7 */}
/* =========================================================================
SECTION 3 — GLOBALIZE.CSS (version originale)
============================================================================ */
/* GlOBALIZE - Copyright (c) Fabien Conéjéro FC84 - @see : https://github.com/madjeek-web/Globalize.css */
/* Display */ .dp-n {display:none;}
/* Visibility */ .v-v {visibility:visible;} .vh {visibility:hidden;}
/* User Select — this class for body only */ .us-n {-webkit-user-select:none;-ms-user-select:none;user-select:none;-khtml-user-select:none;-moz-user-select:none;}
/* Couleurs rapides */ .c-000 {color:#000;} .c-fff {color:#fff;}
/* Positionnement */ .pf {position:fixed;} .pr {position:relative;} .pa {position:absolute;}
/* Hauteur auto */ .h-a {height:auto;}
/* Alignement texte */ .tc {text-align:center;} .tl {text-align:left;} .tj {text-align:justify;} .t-net {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
/* Transformation texte */ .ttc {text-transform:capitalize;} .ttu {text-transform:uppercase;} .ttn {text-transform:none;}
/* Gestion texte long */ .wwbw {word-wrap:break-word;}
/* Font style */ .fs-n {font-style:normal;}
/* Font weight */ .fw1 {font-weight:100;} .fw2 {font-weight:200;} .fw4 {font-weight:400;} .fw6 {font-weight:600;} .fw8 {font-weight:800;}
/* +ADD GLOBALIZE - My custom */ .c-eb {color:#ebebeb;} .w-640 {width:640px;} .pdd-15x4 {padding: 15px 15px 15px 15px;}
/* Dégradés et backgrounds */
.bg-alpha000 {background:-moz-linear-gradient(top, #000000a6 0%, #00000000 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000a6), color-stop(100%,#00000000));background:-webkit-linear-gradient(top, #000000a6 0%,#00000000 100%);
background:-o-linear-gradient(top, #000000a6 0%,#00000000 100%);background:-ms-linear-gradient(top, #000000a6 0%,#00000000 100%);background:linear-gradient(to bottom, #000000a6 0%,#00000000 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=0);}
.bg-alphafff {background:-moz-linear-gradient(top, #ffffffa6 0%, #ffffff00 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffffa6), color-stop(100%,#ffffff00));background:-webkit-linear-gradient(top, #ffffffa6 0%,#ffffff00 100%);
background:-o-linear-gradient(top, #ffffffa6 0%,#ffffff00 100%);background:-ms-linear-gradient(top, #ffffffa6 0%,#ffffff00 100%);background:linear-gradient(to bottom, #ffffffa6 0%,#ffffff00 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6ffffff', endColorstr='#00ffffff',GradientType=0);}
.bg-c-001 {background-color:#ebebebe6;} .bg-c-002 {background-color:#000;background-color:#000000d0;} .bg-c-003 {background-color:#18181880;background-color:#383838d0;} .bg-c-004 {background-color:#000;background-color:#000000d0;} .bg-c-005 {background-color:#d1d1d1;background-color:#d1d1d1d0;}
.bg-form {background:#f0f0f0;background:-moz-linear-gradient(0deg, #f0f0f0 0%, #e6e6e6 100%);background:-webkit-linear-gradient(0deg, #f0f0f0 0%, #e6e6e6 100%);background:linear-gradient(0deg, #f0f0f0 0%, #e6e6e6 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#e6e6e6",GradientType=1);}
/* Pattern étoilé — fond nuit étoilée */
.bg-starry-night-pattern {background-image: radial-gradient(#ffffff99, #ffffff33 3px, transparent 10px), radial-gradient(#ffffff99, #ffffff26 2px, transparent 2px), radial-gradient(#ffffffcc, #ffffff1a 2px, transparent 20px), radial-gradient(#ffffff66, #ffffff1a 2px, transparent 1px);
background-size: 150px 150px, 250px 250px, 250px 250px, 150px 150px;background-position: 0 0, 40px 60px, 10px 70px, 70px 100px;background-origin:content-box;}
/* Box shadows */
.bs1 {box-shadow: 3px 3px 15px -2px #00000033, 3px 3px 15px -2px #79797980;} .bs2 {box-shadow: 0 10px 10px -1px #ffcdf233;} .bs3 {box-shadow: 3px 3px 10px -1px #320036b3, 3px 3px 10px -1px #8a008ab3;} .bs4 {box-shadow: 5px 5px 10px #00000066;} .bs-footer {box-shadow: inset 0 0 8px whitesmoke;}
/* Patterns décoratifs (1 à 12) */
.pattern-1 {background-position:center;background-size: 100px 100px;background-color:#fff;background-image:linear-gradient(0deg, #f2f2f2 1%, transparent 1%, transparent 99%, #f2f2f2 99%), 
linear-gradient(90deg, #f2f2f2 1%, transparent 1%, transparent 99%, #f2f2f2 99%), linear-gradient(0deg, #f2f2f2 1%, transparent 1%, transparent 99%, #f2f2f2 99%), linear-gradient(90deg, #f2f2f2 1%, transparent 1%, transparent 99%, #f2f2f2 99%);}
.pattern-2 {background: rgb(162, 162, 162);background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0); background-size: 30px 30px;}
.pattern-3 {background: rgb(159, 159, 159);background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;}
.pattern-4 {background:#eee;background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;background-size:30px 30px;}
.pattern-5 {background: radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, white 20%, white 80%, transparent 80%, transparent) 50px 50px, linear-gradient(black 8px, transparent 8px) 0 -4px, linear-gradient(90deg, black 8px, transparent 8px) -4px 0;
background-color:white;background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;}
.pattern-6 {background-position:center;background-size: 100px 100px;background-color:#fff;background-image: linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%), linear-gradient(135deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%), 
linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%), linear-gradient(135deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%);}
.pattern-7 {background-position:center;background-size: 100px 100px;background-color:#fff;
background-image: linear-gradient(-5deg, #f2f2f2 5%, transparent 5%, transparent 95%, #f2f2f2 95%), linear-gradient(85deg, #f2f2f2 5%, transparent 5%, transparent 95%, #f2f2f2 95%), linear-gradient(40deg, #f2f2f2 5%, transparent 5%, transparent 95%, #f2f2f2 95%), linear-gradient(130deg, #f2f2f2 5%, transparent 5%, transparent 95%, #f2f2f2 95%);}
.pattern-8 {--s: 104px; /* control the size */ --c1:#000;--c2:#fff;--g1: /calc(2*var(--s)) calc(2*var(--s)) radial-gradient(at 100% 0,var(--c2) 17.5%,#0000 18%);--g2: /calc(2*var(--s)) calc(2*var(--s)) radial-gradient(at 0 100%,var(--c2) 17.5%,#0000 18%);--_s: 0 calc(var(--s)/2)/var(--s) var(--s);
background: calc(var(--s)/ 2) var(--s) var(--g1), calc(var(--s)/-2) 0 var(--g1), calc(var(--s)/-2) var(--s) var(--g2), calc(var(--s)/ 2) 0 var(--g2), radial-gradient(at 100% 0,var(--c1) 35%,#0000 35.5%) var(--_s), radial-gradient(at 0 100%,var(--c1) 35%,#0000 35.5%) var(--_s),repeating-conic-gradient(from 45deg,var(--c1) 0 25%,var(--c2) 0 50%) 0 0/var(--s) var(--s);}
.pattern-9 {--s: 71px; /* control the size */ --c1:#fff;--c2:#000;
background: radial-gradient(36% 72% at 25% -50%,var(--c2) 98%,#0000) 0 0/calc(2*var(--s)) var(--s), radial-gradient(36% 72% at 75% 150%,var(--c2) 98%,#0000) 0 0/calc(2*var(--s)) var(--s), radial-gradient(72% 36% at 150% 25%,var(--c2) 98%,#0000) 0 0/var(--s) calc(2*var(--s)),
radial-gradient(72% 36% at -50% 75%,var(--c2) 98%,#0000) 0 0/var(--s) calc(2*var(--s)), repeating-conic-gradient(var(--c2) 0 45deg,var(--c1) 0 25%) 0 0/calc(2*var(--s)) calc(2*var(--s));}
.pattern-10 {--s: 60px; /* control the size */ --c1:#ffffff;--c2:#000;--_g: radial-gradient(25% 25% at 25% 25%,var(--c1) 99%,#0000 101%);background: var(--_g) var(--s) var(--s)/calc(2*var(--s)) calc(2*var(--s)), var(--_g) 0 0/calc(2*var(--s)) calc(2*var(--s)),
radial-gradient(50% 50%,var(--c2) 98%,#0000) 0 0/var(--s) var(--s), repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%) calc(.5*var(--s)) 0/calc(2*var(--s)) var(--s);}
.pattern-11 {--s: 50px; /* control the size */ --c1:#fb8c4b;--c2:#fbe0bc;--g: conic-gradient(at 90% 40%,#0000 75%,var(--c1) 0);background: var(--g),var(--g) var(--s) var(--s) var(--c2);background-size: calc(2*var(--s)) calc(2*var(--s));}
.pattern-12 {--s: 104px; /* control the size */ --c1: #000000;--c2: #9e9e9e;background: conic-gradient(var(--c2) 25%,#0000 0 50%,var(--c1) 0 75%,#0000 0) calc(var(--s)/4) calc(var(--s)/4), repeating-conic-gradient(from 45deg,var(--c1) 0 25%,var(--c2) 0 50%);background-size: var(--s) var(--s);}
/* =========================================================================
SECTION 4 — BLACK HAT SEO (styles spécifiques)
============================================================================ */
.bg-img-ebx3 {background-image:url(https://madjeek.fr/madjeek-img-noindex/bg-img-ebebeb.png);opacity:0.1;background-position:center center;background-repeat:repeat-x repeat-y;background-attachment:fixed;background-size:cover;background-color:#000;}
.txt-c-eb {z-index:1;line-height:1em;font-size:22px;font-family: 'quan_extralightregular', 'Quan', 'Rajdhani';font-weight:200;font-style:normal;text-transform:none;letter-spacing:0.05em;word-spacing:0.3em;}
.bg-img-fff {background-image:url(https://madjeek.fr/img/case.jpg);background-position: center center;background-repeat: repeat-x repeat-y;background-attachment: fixed;background-size: cover;background-color:#000;}
/* =========================================================================
SECTION 5 — HELPER — DEFAULT VALUES PAGE HTML W3C
============================================================================ */
/* html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block } - li { display: list-item } - head { display: none } - table { display: table } - tr { display: table-row } - thead { display: table-header-group } - 
tbody { display: table-row-group } - tfoot { display: table-footer-group } - col { display: table-column } - colgroup { display: table-column-group } - td, th { display: table-cell } - caption { display: table-caption } - th { font-weight: bolder; text-align: center } - caption { text-align: center } - body { margin: 8px } - 
h1 { font-size: 2em; margin: .67em 0 } - h2 { font-size: 1.5em; margin: .75em 0 } - h3 { font-size: 1.17em; margin: .83em 0 } - h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } - h5 { font-size: .83em; margin: 1.5em 0 } - h6 { font-size: .75em; margin: 1.67em 0 } - h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } - 
blockquote { margin-left: 40px; margin-right: 40px } - i, cite, em, var, address { font-style: italic } - pre, tt, code, kbd, samp { font-family: monospace } - pre { white-space: pre } - button, textarea, input, select { display: inline-block } - big { font-size: 1.17em } - small, sub, sup { font-size: .83em } - sub { vertical-align: sub } - 
sup { vertical-align: super } - table { border-spacing: 2px; } - thead, tbody, tfoot { vertical-align: middle } - td, th { vertical-align: inherit } - s, strike, del { text-decoration: line-through } - hr { border: 1px inset } - ol, ul, dir, menu, dd { margin-left: 40px } - ol { list-style-type: decimal } - ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } - 
u, ins { text-decoration: underline } - br:before { content: "\A" } - :before, :after { white-space: pre-line } - center { text-align: center } - :link, :visited { text-decoration: underline } - :focus { outline: thin dotted invert } - scroll-padding-bottom, scroll-padding-left, scroll-padding-right, scroll-padding-top { auto } */

/* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] {direction:ltr;unicode-bidi:bidi-override;} BDO[DIR="rtl"] {direction:rtl;unicode-bidi:bidi-override;} *[DIR="ltr"] {direction:ltr;unicode-bidi:embed;} *[DIR="rtl"] {direction:rtl;unicode-bidi:embed;}
/* Styles d'impression de base */
@media print {h1 { page-break-before: always; } h1, h2, h3, h4, h5, h6 {page-break-after:avoid;} ul, ol, dl {page-break-before:avoid;}}
/* =========================================================================
SECTION 6 — SYSTÈME D'ESPACEMENT PROBALIZE
============================================================================ */
/* * Le "Lobotomized Owl" de Heydon Pickering : .flow > * + * = tout enfant direct d'un .flow qui suit un autre enfant.   * Ajoute automatiquement une marge top entre les enfants directs d'un .flow. */ .flow > * + * {margin-top:var(--prb-space-sm);}
/* =========================================================================
SECTION 7 — CLASSES UTILITAIRES GLOBALIZE ULTIMATE PRO
============================================================================ */
/* APPORT MAJEUR PAR RAPPORT AU CSS ORIGINAL : * Classes atomiques — Single Responsibility Principle.   * Compatible avec tous les navigateurs supportant CSS (IE9+, tous modernes). */
/* ── DISPLAY EXTENSIONS (complète vos classes .dp-n, .dpi existantes) ─── */
.dpi {display:inline;} .dpb {display:block;} .dpib {display:inline-block;} .dpf {display:flex;} .dpg {display:grid;} .dpf-inline {display:inline-flex;} .dpg-inline {display:inline-grid;}
/* ── CENTRAGE RAPIDE ───────────────────────────────────────────────────── */
.abs-center {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .flex-center {display:flex;align-items:center;justify-content:center;}
/* ── Z-INDEX (complète vos classes existantes) ─────────────────────────── */
.z-1 {z-index:-1;} .z0 {z-index:0;} .z1 {z-index:1;} .z10 {z-index:10;} .z100 {z-index:100;} .z999 {z-index:999;} .z9999 {z-index:9999;}
/* ── ALIGNEMENT TEXTE (complète .tc, .tl, .tj existantes) ───────────── */
.tr {text-align:right;}
/* ── POIDS TYPOGRAPHIQUE (extension des .fw1, .fw2, .fw4, .fw6, .fw8) ──── */
.fw3 {font-weight:300;} .fw5 {font-weight:500;} .fw7 {font-weight:700;}
/* ── TAILLES TYPOGRAPHIQUES (nouvelles) ────────────────────────────────── */
.fs-xs {font-size:0.75rem;} .fs-sm {font-size:0.875rem;} .fs-base {font-size:1rem;} .fs-lg {font-size:1.125rem;} .fs-xl {font-size:1.25rem;} .fs-2xl {font-size:1.5rem;} .fs-3xl {font-size:1.75rem;} .fs-4xl {font-size:2rem;} .fs-5xl {font-size:2.25rem;} .fs-6xl {font-size:3rem;}
/* ── HAUTEUR DE LIGNE ──────────────────────────────────────────────────── */
.lh-tight {line-height:1.25;} .lh-normal {line-height:1.5;} .lh-loose {line-height:2;}
/* ── ESPACEMENT LETTRES ────────────────────────────────────────────────── */
.ls-tight {letter-spacing:-0.025em;} .ls-normal {letter-spacing:normal;} .ls-wide {letter-spacing:0.025em;} .ls-wider {letter-spacing:0.05em;}
/* ── FLEXBOX UTILITAIRES (extension) ───────────────────────────────────── */
.fdc {flex-direction:column;} .fdr {flex-direction:row;} .fdrr {flex-direction:row-reverse;} .fdcr {flex-direction:column-reverse;} .fw {flex-wrap:wrap;} .fnw {flex-wrap:nowrap;} .jcc {justify-content:center;} .jcs {justify-content:flex-start;} .jce {justify-content:flex-end;}
.jcsb {justify-content:space-between;} .jcsa {justify-content:space-around;} .jcse {justify-content:space-evenly;} .aic {align-items:center;} .aifs {align-items:flex-start;} .aife {align-items:flex-end;} .ais {align-items:stretch;} .fg0 {flex-grow:0;} .fg1 {flex-grow:1;} .fs0 {flex-shrink:0;} .fs1 {flex-shrink:1;}
/* ── GRID UTILITAIRES ──────────────────────────────────────────────────── */
.gtc-fr2 {grid-template-columns: repeat(2, 1fr);} .gtc-fr3 {grid-template-columns: repeat(3, 1fr);} .gtc-fr4 {grid-template-columns: repeat(4, 1fr);} .gap-0 {gap:0;} .gap-1 {gap:0.25rem;} .gap-2 {gap:0.5rem;} .gap-3 {gap:0.75rem;} .gap-4 {gap:1rem;} .gap-6 {gap:1.5rem;} .gap-8 {gap:2rem;}
/* ── MARGES PROBALIZE ──────────────────────────────────────────────────── */
.mb-xxs {margin-bottom:var(--prb-space-xxs) !important;} .mb-xs {margin-bottom:var(--prb-space-xs) !important;} .mb-sm {margin-bottom:var(--prb-space-sm) !important;} .mb-md {margin-bottom: var(--prb-space-md) !important;}
.mb-lg {margin-bottom:var(--prb-space-lg) !important;} .mb-xl {margin-bottom:var(--prb-space-xl) !important;} .mb-0 {margin-bottom:0 !important;} .mt-xxs {margin-top:var(--prb-space-xxs) !important;} .mt-xs {margin-top:var(--prb-space-xs) !important;}
.mt-sm {margin-top:var(--prb-space-sm) !important;} .mt-md {margin-top:var(--prb-space-md) !important;} .mt-lg {margin-top:var(--prb-space-lg) !important;} .mt-xl {margin-top:var(--prb-space-xl) !important;} .mt-0 {margin-top:0 !important;}
.mr-xs {margin-right:var(--prb-space-xs) !important;} .mr-sm {margin-right:var(--prb-space-sm) !important;} .mr-md {margin-right:var(--prb-space-md) !important;} .ml-xs {margin-left: var(--prb-space-xs) !important;} .ml-sm {margin-left:var(--prb-space-sm) !important;} .ml-md {margin-left:var(--prb-space-md) !important;}
/* ── DIMENSIONS ────────────────────────────────────────────────────────── */
.w-full {width:100%;} .w-screen {width:100vw;} .w-min {width:min-content;} .w-max {width:max-content;} .w-fit {width:fit-content;} .h-full {height:100%;} .h-screen {height:100vh;}
/* ── BORDURES ET RADIUS ────────────────────────────────────────────────── */
.bdn {border:none;} .bds {border-style:solid;} .bdd {border-style:dashed;} .rad-none {border-radius:0;} .rad-sm {border-radius:0.125rem;} .rad {border-radius:0.25rem;} .rad-md {border-radius:0.375rem;} .rad-lg {border-radius:0.5rem;} .rad-xl {border-radius:0.75rem;} .rad-full {border-radius:9999px;}
/* ── OMBRES ────────────────────────────────────────────────────────────── */
.sd-none { box-shadow: none; } .sd-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } .sd { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);} .sd-md {box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);} .sd-lg {box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);} 
.sd-xl {box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);} .sd-inner {box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);}
/* ── OPACITÉ ───────────────────────────────────────────────────────────── */
.op-0 {opacity:0;} .op-25 {opacity:0.25;} .op-50 {opacity:0.5;} .op-75 {opacity:0.75;} .op-100 {opacity:1;}
/* ── ANIMATIONS (nouvelles — n'existaient pas dans l'original) ────────── */
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}} @keyframes fadeOut {from {opacity:1;} to {opacity:0;}} @keyframes slideUp {from {transform:translateY(20px);opacity:0;} to {transform:translateY(0);opacity:1;}}
@keyframes bounce {0%, 100% {transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1);} 50% {transform:none;animation-timing-function:cubic-bezier(0, 0, 0.2, 1);}} @keyframes pulse {0%, 100% {opacity:1;} 50% {opacity: .5;}}
/* Classes d'animation */ .an-fadein {animation:fadeIn 0.5s ease forwards;} .an-fadeout {animation:fadeOut 0.5s ease forwards;} .an-slideup {animation:slideUp 0.5s ease-out forwards;} .an-bounce {animation:bounce 1s infinite;} .an-pulse {animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;}
/* ── FILTRES CSS (nouveaux) ────────────────────────────────────────────── */
.flb {filter:blur(8px);} .flb-sm {filter:blur(4px);} .flg {filter:grayscale(100%);} .flg-none {filter:grayscale(0);}
/* ── COULEURS SÉMANTIQUES ──────────────────────────────────────────────── */
.c-primary {color:var(--g-primary);} .c-secondary {color:var(--g-secondary);} .c-success {color:var(--g-success);} .c-danger {color:var(--g-danger);} .c-warning {color:var(--g-warning);} .c-info {color:var(--g-info);} .bg-primary {background-color:var(--g-primary);} .bg-success {background-color:var(--g-success);} .bg-danger {background-color:var(--g-danger);}
/* =========================================================================
SECTION 8 — MEDIA QUERIES RESPONSIVES PROBALIZE
============================================================================ */
/* Tablette et desktop (≥ 768px) — unité d'espacement augmentée */ @media (min-width: 768px) {:root {--prb-space-unit: calc(1.25rem * var(--prb-line-height));}}
/* Grands écrans (≥ 1200px) — unité d'espacement encore augmentée */ @media (min-width: 1200px) {:root {--prb-space-unit: calc(1.5rem * var(--prb-line-height));}}
/* =========================================================================
SECTION 9 — MODE SOMBRE AUTOMATIQUE (préserve votre .darkmode existant)
============================================================================ */
/* Détecte la préférence "mode sombre" du système de l'utilisateur.   * Modifie les variables sémantiques (--g-*) pour les adapter.   * Compatible : Chrome 76+, Firefox 67+, Safari 12.1+, Edge 79+ */
@media (prefers-color-scheme: dark) {:root {--g-primary:#3b82f6;--g-secondary:#9ca3af;--g-success:#10b981;--g-danger:#ef4444;--g-warning:#f59e0b;--g-info:#06b6d4;--g-light:#1f2937;--g-dark:#f9fafb;}}
/* =========================================================================
SECTION 10 — ACCESSIBILITÉ (prefers-reduced-motion) WCAG 2.2 AAA
============================================================================ */
/* * WCAG 2.2 — Critère 2.3.3 (AAA) : Animation from Interactions * Détecte "Réduire les animations" dans les paramètres d'accessibilité. * Désactive toutes les animations pour les utilisateurs sensibles.
   * ACTIVÉ PAR : * - Windows : Accessibilité → Réduire les animations   * - macOS : Accessibilité → Affichage → Réduire les animations   * - iOS : Accessibilité → Mouvement   * - Android : Accessibilité → Supprimer les animations */
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}
/* =========================================================================
SECTION 11 — STYLES D'IMPRESSION OPTIMISÉS
============================================================================ */
/* Styles appliqués uniquement lors de l'impression (Ctrl+P ou impression système) */
@media print {
/* Masque les éléments non imprimables */ nav, #loader-overlay, .nav-hamburger-btn, .skip-link, audio, video {display:none !important;}
/* Corps : fond blanc, texte noir = économise l'encre */ body {background:white !important;color:black !important;}
/* Titres : noir à l'impression */ h1 {color:black !important;text-shadow: none !important;}
/* Liens : affiche l'URL entre parenthèses */ a[href]::after {content: " (" attr(href) ")";font-size:0.8em;color:#555;}
/* Ne répète pas l'URL des liens internes */ a[href^="#"]::after, a[href^="javascript:"]::after {content: "";}
/* Empêche les images de se couper sur deux pages */ img {page-break-inside:avoid;max-width:100%;}}