/* ==========================================================================
   DUNOIS LOISIRS — CHARTE COULEUR ET LISIBILITE
   NS Communication — 11/09/2026 — revision 16
   Destination : Template Options > Custom Code > champ "Custom CSS"
   (sans balises <style> — chemin verifie en reel, LEDGER-UI 09/09/2026)

   Ce fichier REMPLACE INTEGRALEMENT le contenu du champ.
   Selectionner tout le contenu existant, le supprimer, coller celui-ci.

   PUBLIC : personnes agees. Tailles et contrastes au-dessus du minimum
   reglementaire, sauf sur la barre de menu — voir ARBITRAGE ci-dessous.

   -------------------------------------------------------------------------
   TOUS LES RATIOS SONT CALCULES PAR EXECUTION, JAMAIS ESTIMES.
   Formule WCAG 2.x : luminance relative sRGB, (L1+0.05)/(L2+0.05).
   -------------------------------------------------------------------------

   ARBITRAGE ASSUME — TAILLE DE LA BARRE DE MENU     [revu r7, mesure r8]

   MESURE DU 09/09/2026, releve console sur l'installation, a 14px :
     logo #sp-logo ................  143 px
     onze entrees de menu .........  1160 px  (nowrap, incompressibles)
     bloc profil utilisateur ......  121 px
     TOTAL REQUIS .................  1424 px
     conteneur Bootstrap (plafond)   1320 px
     DEFICIT ......................  104 px, A TOUTE LARGEUR DE FENETRE

   La barre ne rentrait donc JAMAIS, meme en 2016px de fenetre. Elle ne
   paraissait correcte que parce que #sp-menu demarre a la meme abscisse
   que #sp-logo et se superposait a la zone du logo, overflow-x: hidden
   (pose sur body et .body-innerwrapper) masquant le depassement sans
   barre de defilement.

   DECISION r7 : --dl-taille-menu passe de 14px a 13px, et le padding
   lateral des entrees de 8px a 5px. C'est la valeur du site en ligne. La
   charte visait 16px pour le public age : ce niveau n'est pas tenable a
   onze entrees de premier niveau. Le corps de texte des pages reste a
   18px et n'est PAS concerne — seule la barre de navigation descend.

   RESULTAT MESURE APRES APPLICATION (console, 09/09/2026) :
     onze entrees .................  1040 px   (etaient 1160)
     TOTAL REQUIS .................  1304 px
     conteneur ....................  1320 px
     VERDICT ......................  RENTRE, marge 16 px

   NOTE r9 : depuis la COUCHE 10, #sp-logo occupe sa PROPRE LIGNE. Les
   143px du logo ne pesent donc plus sur la ligne du menu, et la marge
   reelle y est superieure aux 16px calcules ci-dessus. Le calcul est
   conserve tel quel : il documente pourquoi la barre est a 13px, et cette
   valeur ne se remonte pas sans une nouvelle mesure.

   MARGE A SURVEILLER : les 121px du bloc profil correspondent au libelle
   "Nicolas SINGIER". Un adherent au nom plus long elargit ce bloc.
   A controler a la recette avec un compte reel de l'association.

   CONTRASTE INCHANGE ET CONFORME : blanc sur #1B6CD9 = 5,01:1 (calcule).
   13px gras n'est pas du grand texte au sens WCAG (seuil 18,66px gras) :
   le seuil applicable est 4,5:1, il est franchi. Conforme AA.

   LEVIER RESTANT, ET C'EST LE SEUL QUI REGLE LA CAUSE : reduire le nombre
   d'entrees de premier niveau. Onze, c'est beaucoup. En replier deux ou
   trois sous les rubriques existantes libere 200 a 300px et permettrait
   de remonter la barre a 15 ou 16px. Decision de CONTENU, qui appartient
   a l'association — a porter au client.

   REGLES MORTES RETIREES — ne pas les reintroduire
   - Ombres portees de 100vw sur .sp-megamenu-parent / .sp-megamenu-wrapper
     pour la pleine largeur : essayees deux fois, sans effet. Remplacees par
     un pseudo-element absolu sur #sp-menu (COUCHE 4b).
   - Regles visant .dropdown-menu pour le panneau de compte : ce selecteur
     n'existe pas sur cette installation. Le bon est .sp-profile-dropdown,
     releve en console le 09/09 (COUCHE 4f).
   - Bascule fondee sur les variantes d'en-tete de Helix
     (#sp-header.lg-header, .full-header-center, .header-with-modal-menu) :
     #sp-header ne porte AUCUNE classe sur cette installation, releve
     console du 09/09. Toutes ces regles du template sont inertes ici.
   - Repli multiligne du menu a 1200px (flex-wrap: wrap) : retire en r8.
     Le point de rupture du hors-canevas etant remonte a 1200px, le menu
     horizontal ne s'affiche plus jamais en dessous.
   - COUCHE 9b, en-tete bleu en mobile : retiree en r9 sur decision de
     l'operateur. L'en-tete reste blanc a toutes les largeurs, le
     hamburger passe en bleu (COUCHE 11).

   HISTORIQUE
   r16 COUCHE 19, panneau mobile : boutons « Se connecter » et « Premiere
       inscription » (module .dl-oc-acces) en pleine largeur, texte blanc
       centre, empiles sans decalage. La COUCHE 12 les prenait pour des
       entrees de menu (texte #1A1A1A : 3,48:1 sur bleu, 3,36:1 sur orange).
   r15 COUCHE 17, menu : centre (il etait cale a droite par la classe
       utilitaire justify-content-end de sa colonne) ; derniere entree
       (« Contact ») a nouveau symetrique - template.css lui retirait sa
       marge droite. COUCHE 18 : fond des pages de compte Joomla
       (connexion, inscription) aligne sur la charte, #F4F6F9 au lieu du
       vert pale du template.
   r14 COUCHE 15, barre du haut : les boutons « Se connecter » et « Premiere
       inscription » (modules top1 / top2) avaient un texte #AAAAAA impose
       par presets/preset1.css (2,16:1 et 2,23:1). Texte blanc, boutons
       rapproches et centres a toutes les largeurs, contour de focus blanc.
       COUCHE 16, formulaires RSForm : « Suivant » (btn-success) en orange,
       « Retour » (btn-warning) en bleu ; libelles de groupe en span
       (« RGPD ») alignes sur les autres libelles.
   r13 Formulaires RSForm passes en mise en page Bootstrap 5 (le 11/09).
       COUCHE 5 : bouton principal. template.css pose ".btn.btn-primary"
       (fond transparent, texte var(--dark)) en specificite 0,2,0, qui
       battait ".btn-primary" (0,1,0) : le bouton d'envoi etait sans fond,
       texte #4F726C. Selecteurs portes a 0,2,1 et 0,3,1 : l'orange de la
       charte s'applique, survol et appui compris. Contour de focus
       retabli sur les boutons Bootstrap. COUCHE 6 : case a cocher
       Bootstrap. Bordure rgba(0,0,0,.25) = 1,84:1 sur blanc (calcule),
       sous le seuil de 3:1 : portee a 2px #767E8C (4,09:1). Etat coche en
       bleu fonce, contour de focus retabli.
   r12 COUCHE 14, pied de page : texte et lien blancs sur #171717
       (17,93:1 au lieu de 3,38:1), 16px au lieu de 14px, centre, contour
       de focus blanc. Releve console du 11/09 : les couleurs de pied de
       page reglees dans les options du template ne sont PAS appliquees,
       presets/preset1.css les impose. Variable --dl-pied-texte ajoutee en
       COUCHE 1. COUCHE 3 : la regle d'exclusion du soulignement est
       scindee en deux (voir la note sur :has).
   r11 COUCHE 13 : hamburger cale a gauche par positionnement absolu (il
       se centrait avec le logo, meme colonne), trait epaissi. Retrait de
       li.active du bloc du tiret en COUCHE 12 : cette classe vise la page
       COURANTE et non un sous-menu ouvert — Accueil portait un tiret en
       permanence. li.open et aria-expanded sont VERIFIES le 10/09.
   r10 Logo plafonne en largeur sous 480px (COUCHE 11). COUCHE 12, panneau
       hors-canevas : texte fonce et agrandi, soulignements retires, carres
       remplaces par un "+" bleu cale a droite. Structure relevee en console
       le 10/09 : le toggler est un SPAN A L'INTERIEUR du lien
       (a > span.menu-toggler), pas un frere a droite — d'ou un calage par
       space-between sur le lien, et non par positionnement absolu.
   r9  REPARATION STRUCTURELLE : dans la version precedente, le
       commentaire d'en-tete de la COUCHE 9 n'etait jamais referme. Il
       avalait tout le commentaire de la COUCHE 9b, et une sequence de
       fermeture orpheline subsistait avant les media queries de bascule —
       qui se retrouvaient dans une zone de recuperation d'erreur du
       parseur. Structure de commentaires verifiee par script en r9.
       Sur le fond : COUCHE 9b supprimee (en-tete blanc en mobile), logo a
       hauteur fixe de 150px sans deformation, hamburger bleu, et
       padding de #sp-main-body ramene de 100px a zero.
   r8  Point de rupture du hors-canevas remonte de 992px a 1200px : a
       1199px le menu basculait sur deux lignes, comportement constate en
       reel. Retrait de la regle de repli multiligne de la COUCHE 4c.
       Bandeau bleu de #sp-menu supprime sous 1200px : il subsistait, vide.
       Le bloc profil qui vit dans #sp-menu passe alors en texte fonce.
   r7  Barre de menu a 13px et padding lateral a 5px, sur mesure du
       deficit structurel de 104px (detail en ARBITRAGE ci-dessus).
   r6  Nettoyage : une sortie de console avait ete collee dans le champ
       entre la COUCHE 8 et le commentaire final. Le parseur CSS lisait
       "div.body-wrapper" comme un debut de selecteur, cherchait une
       accolade ouvrante et n'en trouvait pas : TOUT CE QUI SUIVAIT ETAIT
       AVALE. Ajout de la COUCHE 9.
   r5  Consolidation. Pleine largeur par pseudo-element. Panneau de profil
       traite par son vrai selecteur. Chevron de sous-menu cale a droite.
   r4  Menu sur une ligne. Panneaux deroulants a 350px, cadre blanc
       supprime. Pseudo-elements du theme neutralises AVANT de dessiner le
       chevron : Helix occupe deja ::after et ::before.
   r3  Majuscules. Panneaux deroulants bleus a texte blanc. Chevrons
       dessines en CSS — les carres venaient d'une police d'icones non
       chargee ; un triangle en bordures n'a aucune dependance de fonte.
   r2  --dl-bordure #D4D9E0 = 1,42:1 : violait 1.4.11 en bordure de champ.
       Scinde en --dl-bordure-champ #767E8C (4,09:1) et --dl-filet.
       #B3261E = 6,54:1 et non 6,53:1. Fond bleu retire de #sp-header.

   DEUX REGLES D'HYGIENE — a lire avant toute modification
   1. Ne JAMAIS coller dans ce champ autre chose que du CSS valide. Une
      sortie de console, un fragment de HTML ou une note en texte brut
      tronquent silencieusement tout le reste du fichier : aucune erreur
      n'est affichee, les regles disparaissent simplement de la page.
   2. Un commentaire qui ne se referme pas avale le code qui suit, jusqu'a
      la prochaine sequence de fermeture — y compris l'en-tete de la couche
      suivante. Symetriquement, ne jamais ecrire une sequence de fermeture
      DANS le texte d'un commentaire : elle le referme sur place. Apres
      toute edition manuelle, verifier en console que le nombre de regles
      de la feuille inline n'a pas chute.
   ========================================================================== */


/* ==========================================================================
   COUCHE 1 — VARIABLES   [aucune dependance de selecteur : sure]
   Seul endroit a modifier pour faire evoluer la charte.
   ========================================================================== */

:root {
  /* Marque */
  --dl-bleu:             #1B6CD9;  /* blanc dessus     :  5,01:1  AA     */
  --dl-bleu-fonce:       #14509F;  /* blanc dessus     :  7,84:1  AAA    */
  --dl-action:           #C2410C;  /* blanc dessus     :  5,18:1  AA     */
  --dl-action-fonce:     #9A340A;  /* blanc dessus     :  7,32:1  AAA    */

  /* Neutres */
  --dl-texte:            #1A1A1A;  /* sur blanc        : 17,40:1  AAA    */
  --dl-texte-secondaire: #4A4A4A;  /* sur blanc        :  8,86:1  AAA    */
  --dl-fond:             #FFFFFF;
  --dl-fond-alt:         #F4F6F9;  /* bleu dessus      :  4,63:1  AA     */
  --dl-bordure-champ:    #767E8C;  /* sur blanc        :  4,09:1  (>3:1) */
  --dl-filet:            #D4D9E0;  /* DECORATIF SEULEMENT — 1,42:1       */

  /* Etats */
  --dl-succes:           #146C43;  /* blanc dessus     :  6,45:1  AA     */
  --dl-erreur:           #B3261E;  /* blanc dessus     :  6,54:1  AA     */

  /* Typographie */
  --dl-taille-base:      18px;     /* corps de texte — public age        */
  --dl-taille-menu:      13px;     /* r7 — voir ARBITRAGE en tete        */
  --dl-taille-petit:     16px;
  --dl-interligne:       1.6;

  /* Menu */
  --dl-largeur-sousmenu: 350px;
  --dl-menu-padding:       5px;    /* r7 — padding lateral des entrees   */

  /* Logo */
  --dl-logo-hauteur:     150px;    /* r9 — hauteur d'affichage du logo   */

  /* Pied de page — fond #171717 pose par les options du template   r12 */
  --dl-pied-texte:       #FFFFFF;  /* sur #171717      : 17,93:1  AAA    */

  /* Zones cliquables */
  --dl-cible-min:        48px;
  --dl-cible-espace:      8px;
}

/* Le zoom mobile ne doit jamais etre neutralise (WCAG 1.4.4). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ==========================================================================
   COUCHE 2 — TYPOGRAPHIE DE BASE
   ========================================================================== */

body {
  font-size: var(--dl-taille-base);
  line-height: var(--dl-interligne);
  color: var(--dl-texte);
  background-color: var(--dl-fond);
}

p, li, td, dd, label {
  font-size: var(--dl-taille-base);
  line-height: var(--dl-interligne);
}

small, .small, figcaption, .text-muted {
  font-size: var(--dl-taille-petit);
  color: var(--dl-texte-secondaire);
}

/* Aucune graisse fine : un trait trop mince annule le benefice du contraste.
   Les elements Quix portent leurs styles en ligne : non concernes. */
body, p, li, td, label,
.sp-module, .article-info {
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dl-texte);
  font-weight: 700;
  line-height: 1.3;
}


/* ==========================================================================
   COUCHE 3 — LIENS
   Souligne systematiquement : la couleur seule ne suffit pas (WCAG 1.4.1).
   ========================================================================== */

a {
  color: var(--dl-bleu);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus {
  color: var(--dl-bleu-fonce);
  text-decoration: underline;
}

/* Pas de soulignement sur ce qui n'est pas du texte : liens-images,
   boutons, navigation, contenus Quix (les 171 pages importees encapsulent
   leurs visuels dans des liens).
   r12 : DEUX regles au lieu d'une. Dans une liste de selecteurs, un seul
   selecteur non reconnu fait jeter la regle ENTIERE par le navigateur.
   Un navigateur qui ne reconnait pas :has() perdait donc aussi les
   exclusions de la navigation et des boutons. Les selecteurs a :has()
   sont isoles : s'ils tombent, seuls les liens-images restent soulignes. */
.sp-megamenu-parent a,
.sp-profile-dropdown a,
.btn,
.sp-module .nav > li > a,
.qx-element a.qx-btn {
  text-decoration: none;
}

a:has(img),
a:has(picture),
a:has(svg),
[class^="qx-"] a:has(img) {
  text-decoration: none;
}

/* Focus clavier visible sur tout element interactif (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--dl-bleu-fonce);
  outline-offset: 2px;
}


/* ==========================================================================
   COUCHE 4 — EN-TETE ET MENU PRINCIPAL
   Selecteurs CONFIRMES le 09/09/2026 par releve console sur l'installation :
     HEADER#sp-header (SANS CLASSE) | DIV.row | DIV#sp-menu
     NAV.sp-megamenu-wrapper | UL.sp-megamenu-parent
     .sp-dropdown.sp-dropdown-main
     UL.sp-profile-dropdown | LI.sp-profile-dropdown-item
     A#offcanvas-toggler dans DIV#sp-logo > DIV.sp-column (HORS du nav)
   Selecteur A CONFIRMER : .sp-dropdown-inner
   ========================================================================== */

/* --- 4a. EMPILEMENT : le deroulant passe DEVANT le contenu de page.
   Cause etablie le 09/09 : les blocs Quix sont en z-index auto et se
   peignent apres l'en-tete. Le !important surcharge le theme, pas notre
   propre code. --- */
#sp-header,
header#sp-header,
.sp-header {
  position: relative !important;
  z-index: 9999 !important;
}

#sp-header .row,
.sp-megamenu-wrapper,
.sp-megamenu-parent {
  z-index: 9999 !important;
}

.sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-mega-dropdown {
  z-index: 10000 !important;
}

/* --- 4b. BARRE PLEINE LARGEUR.
   Releve console du 09/09 : aucun ancetre ne fait la largeur de la fenetre
   sauf #sp-header, blanc et porteur du logo ; .container est plafonne a
   1320px. Un pseudo-element absolu de 100vw sur #sp-menu porte donc le
   fond, sans toucher a la structure et sans colorer la zone du logo.
   NOTE r8 : ce pseudo-element est neutralise sous 1200px en COUCHE 9 —
   sans le menu qu'il accompagne, il ne laissait qu'un bandeau vide. --- */
#sp-menu {
  position: relative !important;
  background-color: transparent !important;
}

#sp-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: var(--dl-bleu);
  z-index: -1;
}

/* La liste et son conteneur restent transparents : le fond est porte par
   le pseudo-element ci-dessus. */
.sp-megamenu-wrapper,
.sp-megamenu-parent {
  background-color: transparent !important;
}

/* --- 4c. BARRE : une seule ligne.
   r8 : la regle de repli multiligne a 1200px a ete RETIREE. Le menu
   horizontal ne s'affiche plus sous 1200px (COUCHE 9), il n'a donc plus
   rien a replier. Ne pas la reintroduire. --- */
.sp-megamenu-parent {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
}

/* --- 4d. ENTREES DE PREMIER NIVEAU — majuscules --- */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  color: #FFFFFF;                  /* 5,01:1 sur le bleu — AA */
  font-size: var(--dl-taille-menu);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  text-decoration: none;

  /* Zone cliquable : 48px de haut minimum (WCAG 2.5.8).
     La largeur reste contrainte : le padding lateral est a 5px. */
  min-height: var(--dl-cible-min);
  display: inline-flex;
  align-items: center;
  padding-left: var(--dl-menu-padding);
  padding-right: var(--dl-menu-padding);
  white-space: nowrap;
}

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current-item > a,
.sp-megamenu-parent > li > a:focus {
  background-color: var(--dl-bleu-fonce);   /* blanc dessus : 7,84:1 */
  color: #FFFFFF;
}

/* Focus clavier dans la barre : contour clair — le contour fonce serait
   invisible sur le bleu. */
.sp-megamenu-parent a:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: -3px;
}

/* --- 4e. PANNEAUX DEROULANTS : 350px, bleu jusqu'au bord, sans cadre.
   Le cadre blanc venait de .sp-dropdown, conteneur exterieur qui portait
   une marge interieure non coloree ; seul .sp-dropdown-inner l'etait.
   NOTE r7 : les entrees de SOUS-MENU gardent un padding de 10px/20px et
   ne sont pas concernees par la reduction — elles ne subissent aucune
   contrainte de largeur, le panneau etant fixe a 350px. --- */
.sp-megamenu-parent .sp-dropdown {
  width: var(--dl-largeur-sousmenu) !important;
  min-width: var(--dl-largeur-sousmenu) !important;
  background-color: var(--dl-bleu) !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sp-megamenu-parent .sp-dropdown-inner,
.sp-megamenu-parent .sp-dropdown-items {
  width: 100% !important;
  background-color: var(--dl-bleu) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Sous-sous-menu : meme largeur, meme traitement */
.sp-megamenu-parent .sp-dropdown .sp-dropdown {
  width: var(--dl-largeur-sousmenu) !important;
  min-width: var(--dl-largeur-sousmenu) !important;
}

/* Entrees de sous-menu. Le lien doit etre en FLEX : sans cela, le
   margin-left auto du chevron ne pousse rien et la fleche colle au texte.
   Le !important sur la couleur est necessaire, le theme la pose avec une
   specificite superieure. Blanc sur #1B6CD9 = 5,01:1 (calcule) — AA. */
.sp-megamenu-parent .sp-dropdown li > a,
.sp-megamenu-parent .sp-dropdown li a,
.sp-megamenu-parent .sp-dropdown-items li a,
.sp-megamenu-parent .sp-dropdown .sp-menu-item > a {
  color: #FFFFFF !important;
  font-size: var(--dl-taille-menu) !important;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  min-height: var(--dl-cible-min);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  line-height: 1.4 !important;
}

.sp-megamenu-parent .sp-dropdown li a:hover,
.sp-megamenu-parent .sp-dropdown li a:focus {
  color: #FFFFFF !important;
  background-color: var(--dl-bleu-fonce) !important;   /* 7,84:1 */
}

/* --- 4f. PANNEAU DE PROFIL UTILISATEUR.
   Selecteur .sp-profile-dropdown releve en console le 09/09. Le texte
   etait deja blanc, pose sur le fond blanc du panneau : illisible.
   Blanc sur #1B6CD9 = 5,01:1 (calcule) — AA.
   NOTE r8 : sous 1200px, le fond bleu disparait et ce bloc se retrouve
   sur blanc — la COUCHE 9 le repasse en texte fonce. --- */
#sp-header .sp-module,
#sp-header .sp-module > span,
#sp-header .sp-profile-wrapper,
#sp-header .sp-profile-wrapper > span {
  color: #FFFFFF !important;
}

.sp-profile-dropdown {
  background-color: var(--dl-bleu) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  padding: 0 !important;
}

.sp-profile-dropdown-item,
.sp-profile-dropdown-item > a,
.sp-profile-dropdown a {
  background-color: transparent !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  min-height: var(--dl-cible-min);
  display: flex;
  align-items: center;
  padding: 10px 20px !important;
}

.sp-profile-dropdown-item > a:hover,
.sp-profile-dropdown-item > a:focus,
.sp-profile-dropdown a:hover,
.sp-profile-dropdown a:focus {
  background-color: var(--dl-bleu-fonce) !important;   /* 7,84:1 */
  color: #FFFFFF !important;
}

.sp-profile-dropdown .divider,
.sp-profile-dropdown hr {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* --- 4g. CHEVRONS DESSINES EN CSS — aucune police d'icones requise.
   ORDRE OBLIGATOIRE : neutraliser les pseudo-elements du theme AVANT de
   redessiner. Helix occupe deja ::after (trait de l'entree active, en
   position absolue) et ::before (icone de police). Sans remise a zero, les
   bordures se greffent sur un element deja positionne ailleurs et
   produisent des formes flottantes au-dessus de la barre. --- */

/* Icones de police dans les entrees de menu */
.sp-megamenu-parent li > a > i,
.sp-megamenu-parent li > a > span.fa,
.sp-megamenu-parent li > a > span.icon,
.sp-megamenu-parent li > a > i[class*="fa"],
.sp-megamenu-parent li > a > span[class*="icon"] {
  display: none !important;
}

/* Les carres venaient de ::before */
.sp-megamenu-parent li > a::before,
.sp-megamenu-parent li > span::before {
  content: none !important;
  display: none !important;
}

/* Remise a zero complete de ::after */
.sp-megamenu-parent li > a::after {
  content: none;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  transform: none !important;
  transition: none !important;
  border: 0 solid transparent;
}

/* Premier niveau : pointe vers le bas.
   NOTE r7 : marge gauche ramenee de 5px a 4px — le chevron entre dans le
   calcul de largeur de la barre au meme titre que le texte. */
.sp-megamenu-parent > li.sp-has-child > a::after,
.sp-megamenu-parent > li.menu-parent > a::after,
.sp-megamenu-parent > li.parent > a::after {
  content: "" !important;
  display: inline-block !important;
  flex: none !important;
  margin-left: 4px !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid #FFFFFF !important;
  border-bottom: 0 !important;
}

/* Sous-menu : pointe vers la droite, calee a droite de la ligne.
   Inchangee : le panneau fait 350px, aucune contrainte de largeur. */
.sp-megamenu-parent .sp-dropdown li.sp-has-child > a::after,
.sp-megamenu-parent .sp-dropdown li.menu-parent > a::after,
.sp-megamenu-parent .sp-dropdown li.parent > a::after {
  content: "" !important;
  display: inline-block !important;
  flex: none !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 6px solid #FFFFFF !important;
  border-right: 0 !important;
}


/* ==========================================================================
   COUCHE 5 — BOUTONS
   Fond plein toujours. Un seul bouton principal (orange) par ecran.
   ========================================================================== */

.btn,
button,
input[type="submit"],
input[type="button"] {
  min-height: var(--dl-cible-min);
  padding: 12px 24px;
  font-size: var(--dl-taille-base);
  font-weight: 600;
  line-height: 1.4;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

/* r13 : template.css pose ".btn.btn-primary" (fond transparent, texte
   var(--dark), bordure var(--dark)) en specificite 0,2,0 ; Bootstrap 5
   pilote le fond par ses variables --bs-btn-*. Releve console du 11/09.
   Les selecteurs a element (button.btn.btn-primary = 0,2,1) l'emportent
   quel que soit l'ordre de chargement des feuilles. */
.btn-primary,
.btn-dl-action,
input[type="submit"],
button.btn.btn-primary,
a.btn.btn-primary,
input.btn.btn-primary {
  background-color: var(--dl-action);
  border-color: var(--dl-action);
  color: #FFFFFF;                  /* 5,18:1 — AA */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-dl-action:hover,
.btn-dl-action:focus,
input[type="submit"]:hover,
button.btn.btn-primary:hover,
button.btn.btn-primary:focus,
button.btn.btn-primary:active,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
a.btn.btn-primary:active,
input.btn.btn-primary:hover,
input.btn.btn-primary:focus,
input.btn.btn-primary:active {
  background-color: var(--dl-action-fonce);  /* 7,32:1 — AAA */
  border-color: var(--dl-action-fonce);
  color: #FFFFFF;
}

/* r13 : contour de focus clavier sur les boutons Bootstrap. Bootstrap 5
   remplace le contour par une ombre pale sur .btn:focus-visible (0,2,0),
   qui bat le contour de la COUCHE 3 (0,1,1) — comportement ESTIME, source
   Bootstrap non relue en session ; la regle ci-dessous le couvre dans
   tous les cas. #14509F sur blanc = 7,84:1 (calcule). */
button.btn:focus-visible,
a.btn:focus-visible,
input.btn:focus-visible {
  outline: 3px solid var(--dl-bleu-fonce);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-secondary,
.btn-dl-secondaire {
  background-color: var(--dl-bleu);
  color: #FFFFFF;                  /* 5,01:1 — AA */
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-dl-secondaire:hover,
.btn-dl-secondaire:focus {
  background-color: var(--dl-bleu-fonce);
  color: #FFFFFF;
}

/* Deux boutons voisins ne se touchent jamais (WCAG 2.5.8) */
.btn + .btn {
  margin-left: var(--dl-cible-espace);
}


/* ==========================================================================
   COUCHE 6 — FORMULAIRES
   Etiquette AU-DESSUS du champ : un texte d'aide place dans le champ
   disparait a la saisie.
   ========================================================================== */

label,
.control-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--dl-taille-base);
  font-weight: 600;
  color: var(--dl-texte);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea,
.form-control {
  min-height: var(--dl-cible-min);
  padding: 10px 14px;
  font-size: var(--dl-taille-base);
  line-height: var(--dl-interligne);
  color: var(--dl-texte);
  background-color: var(--dl-fond);
  border: 2px solid var(--dl-bordure-champ);  /* 4,09:1 — WCAG 1.4.11 */
  border-radius: 4px;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--dl-bleu-fonce);
  outline: 3px solid var(--dl-bleu-fonce);
  outline-offset: 1px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
  accent-color: var(--dl-bleu-fonce);
}

/* r13 : cases Bootstrap 5 (.form-check-input, appearance: none), posees
   par les formulaires RSForm depuis le 11/09. Bootstrap les dessine avec
   une bordure rgba(0,0,0,.25), soit 1,84:1 sur blanc (calcule) : NON
   CONFORME au seuil de 3:1 d'un composant d'interface (WCAG 1.4.11).
   accent-color ci-dessus est sans effet sur elles. Specificite 0,2,1 :
   bat .form-check-input (0,1,0) et .form-check-input:checked (0,2,0). */
input[type="checkbox"].form-check-input,
input[type="radio"].form-check-input {
  border: 2px solid var(--dl-bordure-champ);  /* 4,09:1 — WCAG 1.4.11 */
}

/* Etat coche : fond bleu fonce, la coche blanche de Bootstrap reste.
   #14509F sur blanc = 7,84:1 (calcule). */
input[type="checkbox"].form-check-input:checked,
input[type="radio"].form-check-input:checked {
  background-color: var(--dl-bleu-fonce);
  border-color: var(--dl-bleu-fonce);
}

/* Focus clavier : Bootstrap met outline: 0 et une ombre pale sur :focus
   (0,2,0) ; le contour de la charte est retabli. */
input[type="checkbox"].form-check-input:focus-visible,
input[type="radio"].form-check-input:focus-visible {
  border-color: var(--dl-bleu-fonce);
  outline: 3px solid var(--dl-bleu-fonce);
  outline-offset: 2px;
  box-shadow: none;
}

/* Messages : jamais la couleur seule, toujours du texte (WCAG 1.4.1) */
.alert-success,
.dl-succes {
  background-color: var(--dl-succes);
  color: #FFFFFF;                  /* 6,45:1 — AA */
  border: none;
  padding: 16px;
  font-size: var(--dl-taille-base);
}

.alert-danger,
.alert-error,
.dl-erreur {
  background-color: var(--dl-erreur);
  color: #FFFFFF;                  /* 6,54:1 — AA */
  border: none;
  padding: 16px;
  font-size: var(--dl-taille-base);
}

.invalid-feedback,
.form-control-feedback {
  color: var(--dl-erreur);
  font-size: var(--dl-taille-base);
  font-weight: 600;
}


/* ==========================================================================
   COUCHE 7 — SECTIONS ET FILETS
   ========================================================================== */

.dl-section-alt,
.sp-section-alt {
  background-color: var(--dl-fond-alt);
}

/* Le bleu sur fond alterne donne 4,63:1 : conforme, marge faible.
   Ne pas eclaircir --dl-fond-alt sans recalculer ce contraste. */
.dl-section-alt a,
.sp-section-alt a {
  color: var(--dl-bleu);
}

/* Filet DECORATIF : le seuil de 3:1 ne s'y applique pas (WCAG 1.4.11
   exclut le decoratif). Ne jamais reutiliser --dl-filet sur une bordure
   de champ ou de bouton. */
hr,
.dl-separateur {
  border: none;
  border-top: 1px solid var(--dl-filet);
}


/* ==========================================================================
   COUCHE 8 — ACCESSIBILITE TRANSVERSE
   ========================================================================== */

/* Lien d'evitement : visible des qu'il recoit le focus clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001;                  /* au-dessus du menu, sinon inatteignable */
  padding: 12px 20px;
  background-color: var(--dl-bleu-fonce);
  color: #FFFFFF;                  /* 7,84:1 */
  font-size: var(--dl-taille-base);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* Preference de mouvement reduit : respectee sans condition (WCAG 2.3.3) */
@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;
  }
}

/* Mobile : le texte ne retrecit pas. */
@media (max-width: 768px) {
  body, p, li, label {
    font-size: var(--dl-taille-base);
  }

  .btn,
  button,
  input[type="submit"] {
    width: 100%;
    margin-left: 0;
  }

  .btn + .btn {
    margin-left: 0;
    margin-top: var(--dl-cible-espace);
  }
}

/* Fond general — ne touche pas aux fonds de section Quix, poses sur des
   elements internes. */
body.site,
.body-innerwrapper,
#sp-main-body,
.sp-page-wrapper,
#sp-component {
  background-color: var(--dl-fond);
}

/* PATCH — 09/09/2026 : nom d'utilisateur dans l'en-tete.
   La couleur grise vient de .header-modules, releve en console.
   On la pose sur le conteneur et on force l'heritage : le libelle du nom
   n'a pas de selecteur propre identifie.
   Blanc sur #1B6CD9 = 5,01:1 (calcule) — conforme AA.
   ATTENTION : cette regle est surchargee sous 1200px en COUCHE 9, ou le
   fond n'est plus bleu. Toute modification ici doit y etre reportee. */
#sp-header .header-modules,
#sp-header .header-modules *,
#sp-header .sp-profile-wrapper,
#sp-header .sp-profile-wrapper * {
  color: #FFFFFF !important;
}

/* Le panneau ouvert garde ses propres regles (COUCHE 4f) : elles passent
   apres celle-ci et restent prioritaires a specificite egale. */


/* ==========================================================================
   COUCHE 9 — BASCULE MENU HORIZONTAL / HORS-CANEVAS
                                        [ajoutee r6, seuil revu r8]

   POURQUOI CETTE COUCHE EXISTE — constats console du 09/09/2026 :
   1. Template Options > Menu > Mega Menu > Menu Type = "Mega Menu &
      Off-canvas". Sur "Mega Menu" seul, AUCUN toggler n'est rendu, a
      aucune largeur : ce mode supprime aussi le hamburger mobile.
   2. #sp-header ne porte AUCUNE classe. Or toutes les regles responsives
      de template.css sont prefixees par une variante d'en-tete
      (.lg-header, .full-header-center, .header-with-modal-menu, ...).
      Aucune ne s'applique ici. Il ne reste que
      "#offcanvas-toggler { display: inline-flex }", sans media query :
      le hamburger s'affiche a toutes les largeurs.
   3. Symetriquement, aucune regle ne masque le menu horizontal en dessous
      d'un seuil. La double navigation n'est pas un reglage mal pose,
      c'est l'ABSENCE de bascule. Elle s'ecrit donc ici.
   4. Le toggler vit dans #sp-logo > .sp-column, HORS de
      nav.sp-megamenu-wrapper (contains() = false). Les deux cibles sont
      independantes : masquer le nav n'emporte pas le hamburger.

   SEUIL 1200px, ET NON 992px (revision r8) : a 1199px de fenetre, le
   conteneur Bootstrap retombe sous la largeur necessaire aux onze entrees
   et la barre basculait sur deux lignes. Constate en reel.

   On cible nav.sp-megamenu-wrapper et NON .sp-megamenu-parent, qui porte
   un display:flex !important pose en COUCHE 4c.
   ========================================================================== */

/* Bureau : menu horizontal seul, hamburger retire */
@media (min-width: 1200px) {
  #sp-header #sp-logo #offcanvas-toggler {
    display: none !important;
  }
}

/* Sous 1200px : hamburger seul, menu horizontal retire */
@media (max-width: 1199.98px) {

  #sp-header nav.sp-megamenu-wrapper {
    display: none !important;
  }

  #sp-header #sp-logo #offcanvas-toggler {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: var(--dl-cible-min);    /* WCAG 2.5.8 — cible 48x48 */
    min-height: var(--dl-cible-min);
  }

  /* Bandeau bleu supprime : sans le menu qu'il accompagne, il ne restait
     qu'une bande de couleur vide sous la bande blanche de l'en-tete. */
  #sp-menu::before {
    display: none !important;
  }

  #sp-menu {
    background-color: transparent !important;
    min-height: 0 !important;
  }

  /* Consequence directe : le bloc profil, qui vit dans #sp-menu, se
     retrouve sur fond blanc. Le blanc herite de la COUCHE 8 y serait
     invisible. Texte fonce sur blanc = 17,40:1 (calcule) — AAA. */
  #sp-header .header-modules,
  #sp-header .header-modules *,
  #sp-header .sp-profile-wrapper,
  #sp-header .sp-profile-wrapper > span,
  #sp-header .sp-module,
  #sp-header .sp-module > span {
    color: var(--dl-texte) !important;
  }

  /* Exception : le panneau ouvert reste bleu a texte blanc. */
  #sp-header .sp-profile-dropdown,
  #sp-header .sp-profile-dropdown * {
    color: #FFFFFF !important;
  }
}


/* ==========================================================================
   COUCHE 10 — LOGO CENTRE ET HAUTEUR D'EN-TETE      [r9, 10/09/2026]

   Mesure console du 10/09 : #sp-logo etait fige a 70px alors que l'image
   en faisait 120. Elle debordait de 25px de part et d'autre, sur la barre
   foncee et sur la barre bleue. Le champ "logo height" des options du
   template agit sur l'IMAGE, pas sur la colonne qui l'accueille.
   #sp-header .row mesurait deja 140px : les deux colonnes sont DEJA
   empilees sur deux lignes, la structure en rangees existe. On libere
   donc les hauteurs au lieu de restructurer l'en-tete.

   NOTE : --header_height du template vaut la chaine "$header_height",
   variable SCSS non compilee, livree telle quelle par l'editeur. Toute
   regle qui s'y refere est invalide et jetee par le navigateur. Ne jamais
   s'appuyer dessus.

   Image source : 1200x400, servie a 150px de haut. Le rapport est tenu
   par width:auto — ne jamais poser une largeur fixe en face.
   ========================================================================== */

/* Hauteurs liberees : le conteneur suit le contenu, plus l'inverse. */
#sp-header,
header#sp-header {
  height: auto !important;
  min-height: 0 !important;
}

#sp-logo {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 100% !important;      /* la colonne prend la ligne entiere */
  max-width: 100% !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Le logo se centre dans sa ligne. */
#sp-logo .sp-column {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Conteneurs libres : poser la hauteur sur le lien ecraserait le rapport
   de l'image si elle en heritait. */
#sp-logo .logo,
#sp-logo a.logo {
  height: auto !important;
  max-height: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Hauteur d'affichage du logo — valeur pilotee en COUCHE 1. */
#sp-logo img {
  height: var(--dl-logo-hauteur) !important;
  width: auto !important;
  max-height: none !important;
}


/* ==========================================================================
   COUCHE 11 — AJUSTEMENTS DE MISE EN PAGE           [r9, 10/09/2026]
   ========================================================================== */

/* Hamburger bleu sur l'en-tete blanc : #1B6CD9 sur blanc = 5,01:1
   (calcule). Seuil applicable 3:1 (WCAG 1.4.11) — conforme, avec marge.
   L'en-tete reste blanc a toutes les largeurs : la COUCHE 9b, qui le
   passait en bleu sous 1200px, a ete retiree en r9. */
#offcanvas-toggler .burger-icon span {
  background-color: var(--dl-bleu) !important;
}

/* Le corps de page portait padding: 100px 0, qui creait un vide blanc
   entre la barre de menu et le premier bloc Quix. Les 171 pages importees
   gerent leurs propres espacements en interne.
   PORTEE : toutes les pages, pas seulement l'accueil. */
#sp-main-body {
  padding: 0 !important;
}


/* Sous 480px, le logo ne peut plus tenir sa hauteur de 150px : a rapport
   1200x400 constant, il ferait 450px de large pour un viewport de 375.
   On contraint la largeur, la hauteur suit. Plancher de conception 320px
   (WCAG 1.4.10, Reflow). */
@media (max-width: 479.98px) {
  #sp-logo img {
    height: auto !important;
    width: 100% !important;
    max-width: 260px !important;
  }
}


/* ==========================================================================
   COUCHE 12 — PANNEAU HORS-CANEVAS                  [r10, 10/09/2026]

   Structure relevee en console le 10/09 :
     div.offcanvas-menu.border-menu
       > div.d-flex...p-3.pt-4   (logo + a.close-offcanvas)
       > div.offcanvas-inner     (header-modules, sp-module, menu)

   POINT DETERMINANT : le declencheur de sous-menu est un SPAN A
   L'INTERIEUR du lien, et non un frere a droite :
     <a href="/">Accueil<span class="menu-toggler"></span></a>
   Un simple position:relative le laisse donc suivre le flux du lien et il
   se place au-dessus du texte. Il faut ecarter les deux dans le lien
   lui-meme (space-between + margin-left auto).
   Selecteurs .offcanvas-submenu-toggler et .toggler ecartes : la lecture
   du DOM a montre qu'ils n'existent pas sur cette installation.
   ========================================================================== */

/* Texte des entrees : fonce, agrandi, sans soulignement.
   #1A1A1A sur blanc = 17,40:1 (calcule) — AAA. Le soulignement de la
   COUCHE 3 est retire ici : c'est de la navigation, pas du texte courant. */
.offcanvas-menu .offcanvas-inner a,
.offcanvas-menu .menu a,
.offcanvas-menu li > a {
  color: var(--dl-texte) !important;
  text-decoration: none !important;
  font-size: var(--dl-taille-petit) !important;
  font-weight: 600 !important;
  min-height: var(--dl-cible-min);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
}

.offcanvas-menu li > a:hover,
.offcanvas-menu li > a:focus {
  background-color: var(--dl-fond-alt) !important;
  color: var(--dl-bleu-fonce) !important;   /* 7,84:1 sur blanc */
}

/* Neutralisation AVANT redessin : icone de police et pseudo-elements du
   theme. Sans cette remise a zero, le "+" se greffe sur un element deja
   positionne ailleurs — meme mecanisme qu'en r3 sur la barre horizontale. */
.offcanvas-menu li > a > i,
.offcanvas-menu li > a > span[class*="icon"],
.offcanvas-menu li > a > span.fa,
.offcanvas-menu .menu-toggler i {
  display: none !important;
}

.offcanvas-menu li > a::before,
.offcanvas-menu li > a::after {
  content: none !important;
  display: none !important;
}

/* Le declencheur, ecarte a droite dans le flux du lien.
   font-size: 0 neutralise un eventuel libelle herite ; le "+" est
   redonne par ::after avec sa propre taille. */
.offcanvas-menu .menu-toggler {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--dl-cible-min) !important;    /* WCAG 2.5.8 — cible 48x48 */
  height: var(--dl-cible-min) !important;
  border: none !important;
  background: transparent !important;
  font-size: 0 !important;
}

/* Caractere typographique : aucune dependance de police d'icones. */
.offcanvas-menu .menu-toggler::after {
  content: "+" !important;
  display: block !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: var(--dl-bleu) !important;         /* 5,01:1 sur blanc — AA */
}

/* Sous-menu ouvert : le "+" devient un tiret.
   VERIFIE le 10/09 : li.open et aria-expanded portent bien l'etat ouvert.
   li.active a ete RETIRE — il vise la page COURANTE, pas un sous-menu
   ouvert : l'entree Accueil portait donc un tiret en permanence. */
.offcanvas-menu li.open > a .menu-toggler::after,
.offcanvas-menu .menu-toggler[aria-expanded="true"]::after {
  content: "−" !important;
}

/* Filets de separation : decoratifs, seuil 3:1 non applicable. */
.offcanvas-menu li {
  border-bottom: 1px solid var(--dl-filet) !important;
}

/* Bouton de fermeture : meme cible tactile que le reste. */
.offcanvas-menu .close-offcanvas {
  min-width: var(--dl-cible-min) !important;
  min-height: var(--dl-cible-min) !important;
  color: var(--dl-texte) !important;
}


/* ==========================================================================
   COUCHE 13 — HAMBURGER A GAUCHE                    [r11, 10/09/2026]

   La COUCHE 10 pose justify-content: center sur #sp-logo .sp-column pour
   centrer le logo. Le toggler vivant dans la MEME colonne, il se centrait
   avec lui. On le sort du flux par positionnement absolu : le logo reste
   centre sur la largeur entiere, le toggler se cale a gauche.
   Le repere est le bord de .sp-column, donc du conteneur — soit environ
   15px du bord de fenetre, pas 0. Pour aller au bord reel, il faudrait
   sortir du conteneur, ce qui casserait l'alignement du reste.
   ========================================================================== */

#sp-logo .sp-column {
  position: relative !important;
}

@media (max-width: 1199.98px) {
  #sp-header #sp-logo #offcanvas-toggler {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    justify-content: flex-start !important;
  }
}

/* Trait plus epais et plus large : l'icone par defaut est fine, et le
   public de ce site est age. Reste dans la cible de 48x48. */
#offcanvas-toggler .burger-icon {
  width: 32px !important;
}

#offcanvas-toggler .burger-icon span {
  height: 3px !important;
  border-radius: 2px !important;
}


/* ==========================================================================
   COUCHE 14 — PIED DE PAGE (copyright)              [r12, 11/09/2026]

   Structure relevee en console le 11/09 sur l'installation :
     footer#sp-footer > div.container > div.container-inner > div.row
       > div#sp-footer1.col-lg-12 > div.sp-column > span.sp-copyright
   Le texte vient du champ Copyright des options du template ; {year} y
   est remplace par l'annee (features/footer.php, code lu le 11/09).

   CONSTAT : fond #171717 (applique). Texte #4F726C, herite de #sp-footer ;
   lien #4F726C, impose par presets/preset1.css (regle visant
   "#sp-footer a" et "#sp-bottom a", specificite 1,0,1), qui bat la regle
   "a" de la COUCHE 3. Soit 3,38:1 (calcule) : NON CONFORME.
   Les couleurs reglees dans les options du template (texte #ffffff, lien
   #a2a2a2) ne sont PAS appliquees en front : ne jamais s'y fier.

   CORRECTIF : texte et lien blancs, #FFFFFF sur #171717 = 17,93:1
   (calcule) — AAA. Le lien se distingue du texte par son soulignement
   (WCAG 1.4.1), puisque la couleur est la meme. Taille portee de 14px a
   16px (--dl-taille-petit). Specificites 1,1,0 et 1,2,1 : l'emportent sur
   preset1.css et sur la COUCHE 3 sans !important.

   FOCUS : le contour de la COUCHE 3 (#14509F) ne donne que 2,29:1 sur ce
   fond (calcule), sous le seuil de 3:1 (WCAG 1.4.11) : contour blanc ici.

   Le fond reste pilote par les options du template. S'il change, TOUS les
   ratios de cette couche sont a recalculer.
   ========================================================================== */

#sp-footer .sp-column {
  text-align: center;
  color: var(--dl-pied-texte);
}

#sp-footer .sp-copyright {
  display: inline-block;
  color: var(--dl-pied-texte);
  font-size: var(--dl-taille-petit);
  line-height: var(--dl-interligne);
  padding: 8px 0;
}

#sp-footer .sp-column a,
#sp-footer .sp-column a:visited,
#sp-footer .sp-column a:hover,
#sp-footer .sp-column a:focus {
  color: var(--dl-pied-texte);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Survol et focus : trait epaissi, la couleur ne change pas. */
#sp-footer .sp-column a:hover,
#sp-footer .sp-column a:focus {
  text-decoration-thickness: 2px;
}

#sp-footer .sp-column a:focus-visible {
  outline: 3px solid var(--dl-pied-texte);  /* 17,93:1 sur #171717 */
  outline-offset: 2px;
}


/* ==========================================================================
   COUCHE 15 — BARRE DU HAUT : MODULES top1 ET top2   [r14, 11/09/2026]

   Releve console du 11/09, visiteur deconnecte :
     #sp-top-bar ... div.row (flex)
       > div#sp-top1.col-lg-6 > div.sp-column.text-center.text-lg-start
           > div.sp-module (inline-block) > ... > a.btn.btn-dl-secondaire
       > div#sp-top2.col-lg-6 > ... > a.btn.btn-dl-action
   Chaque colonne faisait la moitie de la ligne : un bouton cale a gauche,
   l'autre a droite, 880px d'ecart en bureau.

   COULEUR : presets/preset1.css impose "#sp-top-bar a" = #AAAAAA
   (specificite 1,0,1), qui bat .btn-dl-secondaire et .btn-dl-action
   (0,1,0). Soit 2,16:1 sur le bleu et 2,23:1 sur l'orange (calcule) :
   NON CONFORME. Selecteurs portes a 1,1,1 et 1,2,1 : texte blanc,
   5,01:1 sur #1B6CD9 et 5,18:1 sur #C2410C (calcule).

   CENTRAGE : les deux colonnes prennent la largeur de leur contenu et la
   ligne les centre. L'ecart entre les boutons vient de la gouttiere
   Bootstrap des colonnes. Sous la largeur utile, .row passe a la ligne :
   les boutons s'empilent, toujours centres.

   FOCUS : le contour bleu fonce de la COUCHE 3 ne donne que 1,54:1 sur le
   fond de la barre (≈ #363636, mesure sur capture) : contour blanc ici,
   12,08:1 (calcule sur cette meme valeur).
   ========================================================================== */

#sp-top-bar .row {
  justify-content: center;
}

#sp-top-bar #sp-top1,
#sp-top-bar #sp-top2 {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

#sp-top-bar a.btn-dl-secondaire,
#sp-top-bar a.btn-dl-secondaire:visited,
#sp-top-bar a.btn-dl-action,
#sp-top-bar a.btn-dl-action:visited {
  color: #FFFFFF;
  text-decoration: none;
}

#sp-top-bar a.btn-dl-secondaire:hover,
#sp-top-bar a.btn-dl-secondaire:focus {
  color: #FFFFFF;
  background-color: var(--dl-bleu-fonce);   /* 7,84:1 */
}

#sp-top-bar a.btn-dl-action:hover,
#sp-top-bar a.btn-dl-action:focus {
  color: #FFFFFF;
  background-color: var(--dl-action-fonce); /* 7,32:1 */
}

#sp-top-bar a.btn:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: none;
}


/* ==========================================================================
   COUCHE 16 — FORMULAIRES RSFORM : NAVIGATION ET LIBELLES   [r14, 11/09/2026]

   Mise en page RSForm Bootstrap 5.1.3, releve console du 11/09 sur le
   formulaire d'inscription (plusieurs pages) :
     « Suivant > »  button.rsform-button.btn.btn-success   (vert Bootstrap)
     « < Retour »   button.rsform-button.btn.btn-warning   (jaune Bootstrap)
     « Retour »     button.rsform-button-prev.btn.btn-warning
     « Valider »    button.rsform-submit-button.btn.btn-primary (COUCHE 5)
   Un seul bouton principal par ecran (COUCHE 5) : « Suivant » et
   « Valider » en orange, « Retour » en bleu secondaire.
   Les classes .rsform-button* limitent la portee aux formulaires RSForm :
   les btn-success / btn-warning du reste du site ne sont pas touches.
   Specificite 0,3,1 et 0,4,1 : bat Bootstrap (.btn:first-child:active =
   0,3,0) quel que soit l'ordre des feuilles.

   LIBELLES DE GROUPE : les cases a cocher (« RGPD ») portent un
   span.formControlLabel et non un label : la COUCHE 6 ne les touchait pas,
   ils heritaient du vert-gris du theme en graisse normale.
   ========================================================================== */

button.rsform-button.btn.btn-success {
  background-color: var(--dl-action);
  border-color: var(--dl-action);
  color: #FFFFFF;                           /* 5,18:1 — AA */
}

button.rsform-button.btn.btn-success:hover,
button.rsform-button.btn.btn-success:focus,
button.rsform-button.btn.btn-success:active {
  background-color: var(--dl-action-fonce);
  border-color: var(--dl-action-fonce);
  color: #FFFFFF;                           /* 7,32:1 — AAA */
}

button.rsform-button.btn.btn-warning,
button.rsform-button-prev.btn.btn-warning {
  background-color: var(--dl-bleu);
  border-color: var(--dl-bleu);
  color: #FFFFFF;                           /* 5,01:1 — AA */
}

button.rsform-button.btn.btn-warning:hover,
button.rsform-button.btn.btn-warning:focus,
button.rsform-button.btn.btn-warning:active,
button.rsform-button-prev.btn.btn-warning:hover,
button.rsform-button-prev.btn.btn-warning:focus,
button.rsform-button-prev.btn.btn-warning:active {
  background-color: var(--dl-bleu-fonce);
  border-color: var(--dl-bleu-fonce);
  color: #FFFFFF;                           /* 7,84:1 — AAA */
}

.rsform-block span.formControlLabel {
  display: block;
  margin-bottom: 6px;
  font-size: var(--dl-taille-base);
  font-weight: 600;
  color: var(--dl-texte);                   /* 17,40:1 sur blanc */
}


/* ==========================================================================
   COUCHE 17 — MENU CENTRE ET DERNIERE ENTREE          [r15, 11/09/2026]

   Releve console du 11/09 (page de connexion, visiteur deconnecte) :
     div#sp-menu.col-auto.flex-auto
       > div.sp-column.d-flex.justify-content-end.align-items-center
           > nav.sp-megamenu-wrapper.d-flex > ul.sp-megamenu-parent
           > div.header-modules.d-lg-flex   (« Login » / nom de l'adherent)
   CALAGE A DROITE : c'est la classe utilitaire Bootstrap
   .justify-content-end de .sp-column, posee en !important par Bootstrap.
   Seul un !important plus specifique la remplace. Le float: right de
   .sp-megamenu-parent (template.css) est sans effet dans un conteneur
   flex ; il est neutralise par proprete.
   Le groupe menu + bloc de connexion est centre d'un seul tenant : a 6
   entrees (deconnecte) comme a 9 (connecte, barre quasi pleine).

   DERNIERE ENTREE : template.css pose
   ".sp-megamenu-parent > li:last-child > a { padding: 0 0 0 15px }"
   (specificite 0,2,2), qui bat le padding de la COUCHE 4d (0,1,2) : la
   derniere entree avait 15px a gauche et 0 a droite, et le fond de
   l'entree active collait au texte. Bilan de largeur : 5+5 = 10px au lieu
   de 15+0, soit 5px de gagnes sur la barre (voir ARBITRAGE en tete).
   ========================================================================== */

#sp-header #sp-menu > .sp-column {
  justify-content: center !important;
}

#sp-header .sp-megamenu-parent {
  float: none;
}

#sp-header .sp-megamenu-parent > li:last-child > a,
#sp-header .sp-megamenu-parent > li:last-child > span {
  padding-left: var(--dl-menu-padding);
  padding-right: var(--dl-menu-padding);
}


/* ==========================================================================
   COUCHE 18 — PAGES DE COMPTE JOOMLA (connexion, inscription)
                                                        [r15, 11/09/2026]

   Releve console du 11/09 : template.css pose
   ".com_users #sp-main-body #sp-component .login, ... .registration
    { background-color: var(--light) }" (specificite 2,2,0), soit un vert
   pale ≈ #D9F2ED, etranger a la charte. Remplace par le fond alterne de
   la charte (--dl-fond-alt #F4F6F9). Specificite 2,2,1 : l'emporte quel
   que soit l'ordre des feuilles.
   Contrastes sur #F4F6F9 (calcules) : texte actuel des libelles #50716B
   4,95:1 (etait 4,57:1 sur le vert) ; texte principal 16,08:1 ; bordure de
   champ #767E8C 3,78:1 (seuil 3:1) ; rouge d'erreur #B3261E 6,04:1.
   ========================================================================== */

.com_users #sp-main-body #sp-component div.login,
.com_users #sp-main-body #sp-component div.registration {
  background-color: var(--dl-fond-alt);
}


/* ==========================================================================
   COUCHE 19 — PANNEAU MOBILE : BOUTONS D'ACCES          [r16, 11/09/2026]

   Module de la position du panneau hors-canevas, HTML :
     <div class="dl-oc-acces">
       <a class="btn btn-dl-secondaire dl-oc-bouton" href="/connexion">
       <a class="btn btn-dl-action dl-oc-bouton" href="/formulaire">
   Releve console du 11/09 : la COUCHE 12 vise TOUS les liens du panneau
   (".offcanvas-menu .offcanvas-inner a", 0,2,1, en !important) : texte
   #1A1A1A, cale a gauche (space-between). Sur les boutons : 3,48:1 sur le
   bleu, 3,36:1 sur l'orange (calcule) - NON CONFORME. La regle ".btn +
   .btn" de la COUCHE 5 decalait en outre le second bouton de 8px.
   Specificite 0,4,1 en !important : l'emporte sur la COUCHE 12.
   Texte blanc : 5,01:1 sur #1B6CD9, 5,18:1 sur #C2410C ; survol 7,84:1 et
   7,32:1 (calcule). Taille 18px (--dl-taille-base), cible 48px de haut.
   L'ORDRE (boutons au-dessus du menu) ne se regle pas ici : c'est l'ordre
   des modules dans la position du panneau, dans Joomla.
   ========================================================================== */

.offcanvas-menu .offcanvas-inner .dl-oc-acces {
  display: flex;
  flex-direction: column;
  gap: var(--dl-cible-espace);
  width: 100%;
  margin: 0 0 16px;
}

.offcanvas-menu .offcanvas-inner .dl-oc-acces a.dl-oc-bouton {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  min-height: var(--dl-cible-min);
  margin: 0 !important;
  padding: 12px 16px !important;
  color: #FFFFFF !important;
  font-size: var(--dl-taille-base) !important;
  font-weight: 600 !important;
  text-align: center;
  text-decoration: none !important;
  border-radius: 4px;
}

.offcanvas-menu .offcanvas-inner .dl-oc-acces a.dl-oc-bouton.btn-dl-secondaire {
  background-color: var(--dl-bleu) !important;
}

.offcanvas-menu .offcanvas-inner .dl-oc-acces a.dl-oc-bouton.btn-dl-action {
  background-color: var(--dl-action) !important;
}

.offcanvas-menu .offcanvas-inner .dl-oc-acces a.dl-oc-bouton.btn-dl-secondaire:hover,
.offcanvas-menu .offcanvas-inner .dl-oc-acces a.dl-oc-bouton.btn-dl-secondaire:focus {
  background-color: var(--dl-bleu-fonce) !important;
  color: #FFFFFF !important;
}

.offcanvas-menu .offcanvas-inner .dl-oc-acces a.dl-oc-bouton.btn-dl-action:hover,
.offcanvas-menu .offcanvas-inner .dl-oc-acces a.dl-oc-bouton.btn-dl-action:focus {
  background-color: var(--dl-action-fonce) !important;
  color: #FFFFFF !important;
}


/* ==========================================================================
   A VERIFIER APRES APPLICATION — hors perimetre de ce fichier

   ETAT DU FICHIER — a controler EN PREMIER apres ce collage :
   ouvrir la console et compter les regles de la feuille inline qui porte
   --dl-cible-min. Une chute brutale signale un commentaire non referme ou
   un fragment non-CSS colle dans le champ (voir REGLES D'HYGIENE en tete).
   ATTENDU EN r16 : 112 regles de premier niveau (r15 : 106), comptees par
   parseur le 11/09 — les blocs @media comptent pour une regle chacun.

   1. HAMBURGER A GAUCHE — TRAITE en r11 (COUCHE 13). Reste a verifier
      visuellement : il est cale sur le bord du CONTENEUR, soit environ
      15px du bord de fenetre. Si le bord reel est attendu, le dire.
   2. PADDING ZERO SUR #sp-main-body. S'applique a TOUTES les pages. Une
      page dont le premier bloc n'a pas de marge propre collera a la barre
      de menu. Controler a la recette sur deux ou trois pages internes.
   3. MODULES DANS LE HORS-CANEVAS. "Connexion" et "1re inscription" sont
      des MODULES (positions top1 / top2), pas des elements de menu. Le
      panneau hors-canevas affiche le menu selectionne ; qu'il reprenne ou
      non une position de module est un COMPORTEMENT a verifier dans les
      options, jamais a supposer. NON TRAITE.
   4. CLASSE D'ETAT DU SOUS-MENU OUVERT — LEVE le 10/09 : li.open et
      aria-expanded portent l'etat ouvert, li.active porte la page
      courante et a ete retire du selecteur.
   4b. CLIC SUR LE "+". Le declencheur est A L'INTERIEUR du lien : cliquer
      dessus peut suivre le lien au lieu d'ouvrir le sous-menu, selon ce
      que fait le script du template. NON TESTE. Si c'est le cas, seule une
      surcharge de la mise en page hors-canevas le corrigera — pas du CSS.
   4c. TITRES DE MODULES EN ANGLAIS. "Login Form" s'affiche dans le
      panneau : c'est le champ Titre du module, a renommer dans
      Contenu > Modules du site. Aucun rapport avec les fichiers de langue.
   5. MOBILE ET Z-INDEX. L'en-tete est a z-index 9999 : verifier qu'il ne
      passe pas devant le panneau hors-canevas ni devant une fenetre
      modale. NON VERIFIE.
   6. DEBORDEMENT HORIZONTAL. Le pseudo-element de 100vw ne cree pas de
      barre de defilement tant qu'un ancetre porte overflow-x: hidden —
      c'est le cas de body et .body-innerwrapper. ATTENTION : c'est aussi
      ce overflow qui masquait le debordement de la barre de menu. Il cache
      les erreurs de largeur autant qu'il protege la mise en page.
   7. BALISE VIEWPORT. Le site actuel porte user-scalable=no, qui bloque le
      zoom (non-conformite WCAG 1.4.4). Le devis engage sa reactivation :
      verifier que tx_newsifi ne la reintroduit pas.
   8. COULEURS DES 171 PAGES QUIX. Elles portent leurs couleurs en ligne et
      ne sont pas couvertes ici. Relever les combinaisons reelles et
      recalculer les contrastes (R14).
   9. PAGE HORS LIGNE. Texte gris clair sur fond beige, hexadecimaux non
      releves, contraste NON CALCULE. Point ouvert du CLIENT-STATE.
  10. BARRE COLLANTE. Si l'en-tete devient collant au defilement, le
      pseudo-element de 100vw doit etre reteste : la valeur vw ne suit pas
      un conteneur transforme.
  11. LARGEUR DU BLOC PROFIL SELON L'UTILISATEUR. Les 121px mesures
      correspondent a "Nicolas SINGIER". Controler a la recette avec un
      compte d'adherent reel.
  12. BLOC PROFIL EN d-none. Le conteneur porte la classe Bootstrap d-none
      mais s'affiche en display:flex : quelque chose la surcharge. A
      qualifier — une classe utilitaire neutralisee ailleurs peut en
      neutraliser d'autres.
  13. POIDS DU LOGO. 1200x400 en JPEG pour un logo : un PNG ou un SVG
      serait plus net sur les aplats de texte, et plus leger. A traiter a
      l'optimisation.

  14. PIED DE PAGE (COUCHE 14). Si le modele Quix « pied de page »
      affiche encore l'ancienne ligne de copyright en dur, la retirer dans
      Quix, pas ici. Tout lien ajoute plus tard dans #sp-footer sera blanc
      et souligne. Controler aussi l'affichage a 375px de large : la ligne
      passe sur deux lignes, centrees.
  15. MENU CENTRE (r15, COUCHE 17). A controler en connecte (9 entrees +
      nom) a 1200px de fenetre, la largeur la plus serree : la barre ne
      doit pas deborder. Entre 992 et 1199px, le menu est remplace par le
      hamburger mais le bloc de connexion reste affiche : il sera centre
      seul sous le logo.
  16. COIN DECORATIF DE LA PAGE DE CONNEXION (r15). Le cadre porte un coin
      en biais (rayon « 25px 0 0 » et motif clair en haut a droite). Son
      rendu sur le nouveau fond #F4F6F9 est a verifier sur capture.
  17. HAMBURGER EN aria-hidden="true" (sortie du template) : le bouton du
      menu mobile est masque aux lecteurs d'ecran alors qu'il est
      cliquable (WCAG 4.1.2). Hors CSS : a corriger dans le template.
  18. LIENS DES BOUTONS : toujours avec la barre oblique initiale
      (/connexion, /formulaire). Sans elle, l'adresse se resout depuis la
      page courante et mene a une 404 depuis une page de second niveau.
  19. BOUTON PRINCIPAL (r13). La regle .btn.btn-primary couvre TOUS les
      boutons principaux Bootstrap du site (formulaires RSForm, connexion,
      profil) : tous passent en orange. Un seul bouton principal par ecran
      reste la regle (COUCHE 5). Les boutons Quix (.qx-btn) portent leurs
      couleurs en ligne et ne sont pas concernes.
  20. BARRE DU HAUT (r14). Deux entrees de connexion coexistent pour un
      visiteur : le bouton « Se connecter » (top1) et « Login » dans la
      barre de menu (module de profil). Libelle anglais, et doublon :
      decision a prendre, hors CSS.

   LEVE LE 10/09/2026 : le clic sur le hamburger ouvre bien le panneau
   hors-canevas, constate en reel. Le contraste de l'icone est calcule
   (COUCHE 11). Le logo est centre et a la bonne hauteur (COUCHE 10).
   ========================================================================== */
/* --- Libelle MENU sur le bouton burger - 15/09/2026 --- */
#offcanvas-toggler {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  min-width: 48px;
}
#offcanvas-toggler .burger-icon {
  flex: 0 0 auto;
}
#offcanvas-toggler::after {
  content: "MENU";
  color: currentColor;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.05em;
}


/* =====================================================================
   r17 - 21/09/2026 - BARRE ET SOUS-MENUS : MAJUSCULES, 14px PARTOUT
   ---------------------------------------------------------------------
   Demande operateur : tout en majuscules, meme taille barre et sous-menus.
   Remplace la decision r7 (13px), devenue obsolete depuis r9 : le logo
   occupe sa propre ligne et ne pese plus sur celle du menu, et la barre
   ne compte plus que neuf entrees (onze lors de la mesure du 09/09).

   MESURE EN CONSOLE, 21/09/2026, fenetre a 1200px (cas le plus serre,
   conteneur Bootstrap a 1140px), regles ci-dessous injectees :
     neuf entrees .................  1077 px
     bloc profil ..................    52 px  (libelle sur deux lignes)
     TOTAL ........................  1129 px
     disponible (#sp-menu) ........  1140 px
     VERDICT ......................  RENTRE, marge 11 px
   A partir de 1400px, le conteneur passe a 1320px : marge large.

   MARGE A SURVEILLER : un adherent au prenom plus long elargit le bloc
   profil. A traiter en etape 3 (plafond de largeur), testee en console
   avant ecriture.

   CONTRASTE INCHANGE : blanc sur #1B6CD9 = 5,01:1 (calcule, charte du
   09/09). 14px gras n'est pas du grand texte WCAG (seuil 18,66px gras) :
   seuil 4,5:1, franchi. Conforme AA.

   Les !important reproduisent a l'identique les regles mesurees.
   Retour arriere : restaurer
   ~/archives-dl/backup-custom-css-20260921-avant-casse-menu.css
   ===================================================================== */

/* Barre : 14px, espacement de lettres retire (gain mesure ~20px) */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

/* Sous-menus : meme taille que la barre, majuscules */
.sp-megamenu-parent .sp-dropdown li > a,
.sp-megamenu-parent .sp-dropdown li a,
.sp-megamenu-parent .sp-dropdown-items li a,
.sp-megamenu-parent .sp-dropdown .sp-menu-item > a {
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}


/* =====================================================================
   r17 - 21/09/2026 - ETAPE 3 - ENTREE ACTIVE SURVOLEE : TEXTE BLANC
   ---------------------------------------------------------------------
   DEFAUT CONSTATE (capture operateur + inventaire des regles en console) :
   preset1.css porte
     .sp-megamenu-parent > li.active:hover > a { color: #0F4C41 }
   Specificite (0,3,2) : plus forte que nos regles li:hover et li.active
   (0,2,2). Elle ne gagnait donc que dans l'etat COMBINE - rubrique
   courante ET survolee - ou le texte passait en vert sombre sur le bleu
   fonce de l'etat actif.
     vert #0F4C41 sur #14509F ..... 1,26:1   ECHEC (seuil 4,5:1)
     blanc #FFFFFF sur #14509F .... 7,84:1   CONFORME
   (contrastes calcules par execution, formule WCAG 2.x)

   Correctif : memes selecteurs que le preset, donc meme specificite,
   declares plus tard. current-item couvert par symetrie.
   Retour arriere : supprimer ce bloc.
   ===================================================================== */
.sp-megamenu-parent > li.active:hover > a,
.sp-megamenu-parent > li.active:hover > span,
.sp-megamenu-parent > li.current-item:hover > a,
.sp-megamenu-parent > li.current-item:hover > span {
  color: #FFFFFF !important;
}